Implement CE-WP-0003 T01-T08: form binding + visual guide overlay

T01 EvidenceLink/EvidenceSet types
  - src/shared/evidence-link.ts: status (§2.4), relation (§2.5), target
  - src/shared/evidence-set.ts: ordered group + activeEvidenceItemId
  - enum-conformance test parses SharedContracts.md and asserts the
    runtime lists match exactly

T02 Binding service + in-memory link repo + active-state machine
  - src/binder/repos/in-memory-links.ts: Map-backed EvidenceLinkRepository
  - src/binder/services/bindings.ts: link/unlink/list/update/setActive
    emitting §4 EvidenceLinkCreated / EvidenceLinkUpdated /
    EvidenceItemActivated
  - src/binder/state/active.ts: (target, evidence, annotation) reducer
    + ActiveStateProvider + useActiveState hook
  - extended engine/events/types.ts with EvidenceLinkCreated,
    EvidenceLinkUpdated, FormFieldActivated payloads

T03 Rect registry (SharedContracts §7 — contract FROZEN)
  - src/binder/visual-guide/rect-registry.ts: register/getRect/subscribe
    + invalidate + getVersion for useSyncExternalStore
  - events.ts: scroll/resize/focus pumps via window + ResizeObserver +
    IntersectionObserver, rAF-throttled
  - react-hooks.ts: RectRegistryProvider, useRegisterRect(kind,id,ref),
    useRectRegistryVersion

T04 Form schema + renderer
  - src/app/forms/demo-schema.ts: text/textarea/date minimal schema
  - src/binder/FormRenderer.tsx: renders schema, each field registers
    as rect kind="field"; active field gets aria-current="true"
  - placed in binder/ (not work/) because work cannot import binder per
    DependencyMap.md §2 and the renderer needs the rect-registry hook;
    workplan T04 was amended in-place to document this

T05 Side-by-side Forms layout + click-to-link
  - src/app/forms/FormsApp.tsx + src/app/App.tsx top-bar router with
    hash route #/forms/demo
  - BinderProvider mounted at app root so links survive tab switching
  - stage-evidence-then-click-field linking interaction with banner
    + per-field link-count chip

T06 Active-evidence cycling
  - src/app/forms/ActiveEvidenceChips.tsx: chips per active target,
    Tab cycles natively, first chip auto-activates on field focus,
    each chip registers as rect kind="evidence-card"
  - ScrollBridge in FormsApp wires activeAnnotationId to viewer scroll
  - EvidenceSidebar + EvidenceStrip highlight the active item via the
    new useLastActivatedEvidence hook in work/EngineContext

T07 SVG visual-guide overlay
  - src/binder/visual-guide/Overlay.tsx: single fixed-positioned SVG,
    draws field→card and card→highlight bezier curves for the active
    triple, rAF-throttled via the registry
  - src/anchor exposes getHighlightClientRects(annotationId); the
    spike viewer wraps highlights in [data-highlight-id] so the helper
    can locate them
  - src/app/forms/HighlightRectBridge.tsx: registers the active
    annotation's rect via that helper

T08 End-to-end test (PRD scenario steps 5-9)
  - tests/integration/forms-overlay-e2e.dom.test.tsx: full path from
    Review-mode capture through Forms-mode link to active triple +
    aria-current assertions + 2 SVG paths in the overlay
  - additional integration coverage: forms-link-flow + forms-active-cycling

Gates: typecheck ✓ · lint ✓ · build ✓ · 152/152 tests across 21 files.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/app/App.tsx

@@ -1,40 +1,136 @@
 /**
  * App — the citation-evidence MVP shell.
  *
- * Three-pane layout per `wiki/ArchitectureOverview.md` §12.1:
+ * Composes the two top-level layouts:
  *
- *     ┌────────────┬──────────────────┬────────────┐
- *     │ Collection │ Document Viewer  │ Evidence   │
- *     │ List       │                  │ Sidebar    │
- *     └────────────┴──────────────────┴────────────┘
+ *   - Review mode (CE-WP-0002): collection list / viewer / evidence sidebar.
+ *   - Forms mode (CE-WP-0003): form renderer / viewer / evidence strip,
+ *     with click-to-link interaction.
  *
- * CE-WP-0002-T06 stops at "viewer shell is rendered, evidence list is
- * displayed". T07 wires the selection → annotation → evidence flow; T08
- * wires the sidebar-click → scroll-to-passage round-trip.
+ * Mode selection is driven by `location.hash`: `#/forms/demo` lands in
+ * Forms mode; anything else (including empty) lands in Review mode. The
+ * top bar toggles between them. We keep the hash sync so reload + deep
+ * links work; T08's E2E asserts the `/forms/demo` navigation path.
+ *
+ * Engine and binder providers are both mounted at the App root so
+ * evidence/annotations/links survive switching tabs.
  */
 
+import { useEffect, useState } from "react";
+
+import { BinderProvider } from "@binder/index";
 import {
-  CollectionList,
   EngineProvider,
-  EvidenceSidebar,
-  ViewerShell,
+  useEngine,
 } from "@work/index";
 
+import { FormsApp } from "./forms/FormsApp";
+import { ReviewLayout } from "./ReviewLayout";
+
+type Mode = "review" | "forms";
+
+const FORMS_HASH = "#/forms/demo";
+
+function readModeFromHash(): Mode {
+  if (typeof window === "undefined") return "review";
+  return window.location.hash === FORMS_HASH ? "forms" : "review";
+}
+
+function writeModeToHash(mode: Mode) {
+  if (typeof window === "undefined") return;
+  const target = mode === "forms" ? FORMS_HASH : "";
+  if (window.location.hash !== target) {
+    if (target) {
+      window.location.hash = target;
+    } else {
+      // Clear hash without leaving "#" trailing in the URL bar.
+      history.replaceState(null, "", window.location.pathname + window.location.search);
+    }
+  }
+}
+
+function ModeRouter() {
+  const [mode, setMode] = useState<Mode>(() => readModeFromHash());
+
+  useEffect(() => {
+    function onHash() {
+      setMode(readModeFromHash());
+    }
+    window.addEventListener("hashchange", onHash);
+    return () => window.removeEventListener("hashchange", onHash);
+  }, []);
+
+  const handleModeChange = (next: Mode) => {
+    writeModeToHash(next);
+    setMode(next);
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100vh", color: "#222" }}>
+      <TopBar mode={mode} onModeChange={handleModeChange} />
+      <div style={{ flex: 1, minHeight: 0 }}>
+        {mode === "review" ? <ReviewLayout /> : <FormsApp />}
+      </div>
+    </div>
+  );
+}
+
+function TopBar({ mode, onModeChange }: { mode: Mode; onModeChange: (m: Mode) => void }) {
+  return (
+    <header
+      style={{
+        display: "flex",
+        gap: 8,
+        padding: "6px 12px",
+        borderBottom: "1px solid #ddd",
+        background: "#fafafa",
+        fontFamily: "system-ui, sans-serif",
+        alignItems: "center",
+      }}
+    >
+      <strong style={{ fontSize: 13, marginRight: 8 }}>citation-evidence</strong>
+      <button
+        onClick={() => onModeChange("review")}
+        aria-pressed={mode === "review"}
+        style={tabStyle(mode === "review")}
+      >
+        Review
+      </button>
+      <button
+        onClick={() => onModeChange("forms")}
+        aria-pressed={mode === "forms"}
+        style={tabStyle(mode === "forms")}
+      >
+        Forms
+      </button>
+    </header>
+  );
+}
+
+function tabStyle(active: boolean) {
+  return {
+    padding: "4px 12px",
+    fontSize: 12,
+    border: "1px solid #ccc",
+    borderBottom: active ? "2px solid #0050b3" : "1px solid #ccc",
+    background: active ? "#e8f0ff" : "white",
+    cursor: "pointer" as const,
+  };
+}
+
+function AppInner() {
+  const engine = useEngine();
+  return (
+    <BinderProvider bus={engine.bus}>
+      <ModeRouter />
+    </BinderProvider>
+  );
+}
+
 export function App() {
   return (
     <EngineProvider>
-      <div
-        style={{
-          display: "flex",
-          height: "100vh",
-          fontFamily: "system-ui, sans-serif",
-          color: "#222",
-        }}
-      >
-        <CollectionList />
-        <ViewerShell />
-        <EvidenceSidebar />
-      </div>
+      <AppInner />
     </EngineProvider>
   );
 }