@coframe-gtm/annotations 1.0.4 → 1.2.0

package/src/ui/styles.ts

@@ -6,6 +6,12 @@
  */
 
 export const STYLES = `
+/* Box-sizing reset — the host page's reset is scoped to its own tree and
+   doesn't reach the overlay, so width:100% controls + padding would
+   otherwise overflow their popups. Keep everything border-box. */
+.cf-overlay, .cf-overlay *, .cf-overlay *::before, .cf-overlay *::after {
+  box-sizing: border-box;
+}
 .cf-overlay {
   position: fixed;
   inset: 0;
@@ -17,12 +23,18 @@ export const STYLES = `
   --cf-border: rgba(255, 255, 255, 0.1);
   --cf-muted: rgba(255, 255, 255, 0.55);
   --cf-accent: #a78bfa;
+  /* Liquid-glass fill for popups/panels — low alpha so the backdrop blur
+     actually reads as frosted glass instead of a solid black box. */
+  --cf-glass: rgba(24, 24, 34, 0.55);
+  --cf-glass-border: rgba(255, 255, 255, 0.14);
 }
 .cf-overlay[data-theme="light"] {
   color: #18181b;
   --cf-bg: rgba(252, 252, 253, 0.97);
   --cf-border: rgba(0, 0, 0, 0.1);
   --cf-muted: rgba(0, 0, 0, 0.5);
+  --cf-glass: rgba(252, 252, 253, 0.60);
+  --cf-glass-border: rgba(0, 0, 0, 0.10);
 }
 
 /* Hover highlight + multi-select boxes */
@@ -77,8 +89,29 @@ export const STYLES = `
 .cf-cursor-agent .cf-cursor-label { color: #0b0b0f; }
 
 /* Pins */
-.cf-pin {
+/* Outline box hugging the annotated element (so it's obvious what the
+   annotation refers to). Colour-coded per author via --cf-pin. */
+/* A multi-element annotation renders several .cf-anno outlines wrapped in
+   one group — display:contents so the wrapper itself adds no layout box and
+   the fixed-positioned outlines anchor straight to the viewport. */
+.cf-anno-group { display: contents; }
+.cf-anno {
   position: fixed;
+  pointer-events: none;
+  border: 1.5px solid var(--cf-pin, #a78bfa);
+  border-radius: 7px;
+  background: color-mix(in srgb, var(--cf-pin, #a78bfa) 9%, transparent);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cf-pin, #a78bfa) 15%, transparent);
+  z-index: 2;
+}
+/* Entrance animation plays only on first render (.cf-fresh), never on the
+   scroll/resize re-renders — otherwise the box flickers while scrolling. */
+.cf-anno.cf-fresh { animation: cf-rise .18s cubic-bezier(.16,1,.3,1) both; }
+.cf-anno.agent { border-style: dashed; }
+.cf-anno.resolved { opacity: 0.4; }
+.cf-pin {
+  position: absolute;
+  top: -11px; left: -11px;
   width: 22px; height: 22px;
   border-radius: 50% 50% 50% 2px;
   background: var(--cf-pin, #a78bfa);
@@ -92,21 +125,40 @@ export const STYLES = `
   z-index: 3;
   transition: transform .12s cubic-bezier(.34,1.56,.64,1);
   padding: 0;
-  /* Pop in when a pin first renders so new annotations are obvious. */
-  animation: cf-pin-pop .32s cubic-bezier(.34,1.56,.64,1) both;
 }
+/* Pop in only when a pin first renders (.cf-fresh) — not on the scroll
+   re-renders, which would otherwise replay the pop on every tick. */
+.cf-pin.cf-fresh { animation: cf-pin-pop .32s cubic-bezier(.34,1.56,.64,1) both; }
 .cf-pin:hover { transform: scale(1.2); }
 .cf-pin.resolved { opacity: 0.45; }
-/* Agent-pushed pins pulse a ring so reviewers spot what the agent added. */
-.cf-pin.agent { border-style: dashed; }
-.cf-pin.agent::after {
-  content: "";
-  position: absolute; inset: -4px;
-  border-radius: inherit;
-  border: 2px solid var(--cf-pin, #a78bfa);
-  animation: cf-pin-ring 1.6s ease-out 3;
+/* Human vs agent reads from the box outline (solid vs dashed) + the pin
+   glyph (number vs initial) + colour — no extra per-pin chrome. */
+
+/* Hover-to-preview card — shown next to a pin on mouseenter. */
+.cf-pin-preview {
+  position: absolute;
+  top: 26px; left: 0;
+  max-width: 240px;
+  width: max-content;
   pointer-events: none;
-}
+  background: var(--cf-glass);
+  border: 1px solid var(--cf-glass-border);
+  border-radius: 9px;
+  padding: 7px 10px;
+  font: 500 12px -apple-system, system-ui;
+  line-height: 1.4;
+  color: #f4f4f5;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  backdrop-filter: blur(24px) saturate(180%);
+  box-shadow:
+    0 8px 28px rgba(0,0,0,0.4),
+    inset 0 1px 0 rgba(255,255,255,0.18);
+  z-index: 7;
+  animation: cf-rise .14s cubic-bezier(.16,1,.3,1) both;
+}
+.cf-overlay[data-theme="light"] .cf-pin-preview { color: #18181b; }
 
 @keyframes cf-pin-pop {
   0% { transform: scale(0); opacity: 0; }
@@ -123,24 +175,83 @@ export const STYLES = `
   position: fixed;
   left: 16px; bottom: 16px;
   pointer-events: auto;
-  background: var(--cf-bg);
-  border: 1px solid var(--cf-border);
-  border-radius: 14px;
-  padding: 10px;
+  /* Liquid glass — translucent, frosted, with a bright top edge. */
+  background: rgba(24,24,34,0.52);
+  border: 1px solid rgba(255,255,255,0.14);
+  border-radius: 17px;
+  padding: 9px;
   display: flex; flex-direction: column; gap: 8px;
-  backdrop-filter: blur(16px) saturate(140%);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
-  min-width: 220px;
+  -webkit-backdrop-filter: blur(30px) saturate(185%);
+  backdrop-filter: blur(30px) saturate(185%);
+  box-shadow:
+    0 18px 50px rgba(0,0,0,0.34),
+    inset 0 1px 0 rgba(255,255,255,0.22),
+    inset 0 -1px 0 rgba(0,0,0,0.22);
   z-index: 4;
 }
 .cf-toolbar-head {
   display: flex; align-items: center; gap: 7px;
-  font-weight: 700; letter-spacing: 0.02em;
+  cursor: grab; user-select: none; touch-action: none;
+}
+.cf-toolbar-head:active { cursor: grabbing; }
+/* Visible drag affordance — signals the panel can be moved. */
+.cf-grip {
+  flex: 0 0 auto; color: var(--cf-muted);
+  font-size: 13px; line-height: 1; letter-spacing: -2px; opacity: 0.5;
+}
+.cf-toolbar-head:hover .cf-grip { opacity: 0.85; }
+/* Logo button — tap to collapse back to the puck. */
+.cf-collapse {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 26px; height: 26px; flex: 0 0 auto; padding: 0;
+  border: 0; border-radius: 8px; cursor: pointer;
+  /* Light tile so a dark brand logo reads on the dark panel. */
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
+}
+.cf-collapse:hover { filter: brightness(0.94); }
+.cf-brand {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 22px; height: 22px; flex: 0 0 auto; pointer-events: none;
+}
+.cf-brand svg { width: 18px; height: 18px; display: block; }
+.cf-toolbar.cf-dragging {
+  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
+  transition: none;
 }
 .cf-logo-dot {
-  width: 8px; height: 8px; border-radius: 50%;
-  background: var(--cf-accent);
-  box-shadow: 0 0 10px var(--cf-accent);
+  width: 9px; height: 9px; border-radius: 50%;
+  background: var(--cf-accent); box-shadow: 0 0 10px var(--cf-accent);
+}
+
+/* Collapsed FAB — a draggable logo puck; tap to expand. */
+.cf-fab {
+  position: fixed; left: 16px; bottom: 16px;
+  width: 48px; height: 48px; border-radius: 16px;
+  pointer-events: auto; cursor: grab; user-select: none; touch-action: none;
+  display: flex; align-items: center; justify-content: center;
+  /* Liquid glass puck — frosted light so the dark mark reads. */
+  background: rgba(255,255,255,0.66);
+  -webkit-backdrop-filter: blur(22px) saturate(185%);
+  backdrop-filter: blur(22px) saturate(185%);
+  box-shadow:
+    0 12px 34px rgba(0,0,0,0.20),
+    inset 0 1px 0 rgba(255,255,255,0.95),
+    0 0 0 0.5px rgba(0,0,0,0.06);
+  z-index: 4;
+  transition: transform .13s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease;
+}
+.cf-fab:hover { transform: scale(1.06); }
+.cf-fab.cf-dragging { cursor: grabbing; transition: none; box-shadow: 0 18px 44px rgba(0,0,0,0.42); }
+.cf-fab .cf-brand { width: 28px; height: 28px; cursor: inherit; }
+.cf-fab .cf-brand svg { width: 24px; height: 24px; }
+.cf-fab-badge {
+  position: absolute; top: -5px; right: -5px;
+  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
+  border-radius: 9px; background: var(--cf-accent); color: #fff;
+  font: 800 10px -apple-system, system-ui;
+  display: flex; align-items: center; justify-content: center;
+  box-shadow: 0 0 0 2px var(--cf-bg);
 }
 .cf-count {
   margin-left: auto;
@@ -151,24 +262,45 @@ export const STYLES = `
 }
 .cf-overlay[data-theme="light"] .cf-count { background: rgba(0,0,0,0.06); }
 
+/* View / Comment reads as a pill switch — rounded track + sliding pill. */
 .cf-seg {
   display: flex; gap: 2px;
-  background: rgba(255,255,255,0.06);
-  border-radius: 9px; padding: 2px;
+  background: rgba(255,255,255,0.07);
+  border-radius: 999px; padding: 3px;
 }
 .cf-overlay[data-theme="light"] .cf-seg { background: rgba(0,0,0,0.05); }
 .cf-seg-btn {
   flex: 1; border: none; background: transparent; color: var(--cf-muted);
-  padding: 5px 10px; border-radius: 7px; font: 600 12px -apple-system, system-ui;
+  padding: 5px 14px; border-radius: 999px; cursor: pointer;
+  font: 600 12px -apple-system, system-ui;
+  transition: color .15s ease, background .2s ease;
 }
+.cf-seg-btn:hover { color: #fff; }
 .cf-seg-btn.on {
   background: var(--cf-accent); color: #fff;
-  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
+  box-shadow: 0 1px 5px rgba(124,92,255,0.45);
+}
+/* Suggestions navigator — count + jump to each annotation. */
+.cf-nav {
+  display: flex; align-items: center; justify-content: space-between; gap: 6px;
+  background: rgba(255,255,255,0.05); border-radius: 10px; padding: 2px 3px;
 }
+.cf-nav-btn {
+  border: 0; background: transparent; color: var(--cf-muted); cursor: pointer;
+  width: 24px; height: 22px; border-radius: 7px; font-size: 16px; line-height: 1; padding: 0;
+}
+.cf-nav-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
+.cf-nav-label { font: 700 11px -apple-system, system-ui; color: var(--cf-muted); }
 .cf-tools .cf-seg-btn.on { background: rgba(255,255,255,0.16); color: #fff; }
 .cf-overlay[data-theme="light"] .cf-tools .cf-seg-btn.on { background: rgba(0,0,0,0.12); color: #111; }
 .cf-hint { font-size: 11px; color: var(--cf-muted); padding: 0 2px; }
 .cf-commit { width: 100%; }
+.cf-launch {
+  width: 100%; border: 0; margin-top: 2px;
+  background: linear-gradient(135deg, #7c5cff, #3ecf8e);
+  box-shadow: 0 6px 18px rgba(124,92,255,0.35);
+}
+.cf-launch:hover { filter: brightness(1.07); }
 
 /* Buttons */
 .cf-btn {
@@ -190,13 +322,20 @@ export const STYLES = `
   left: 16px; bottom: 92px;
   width: 320px;
   pointer-events: auto;
-  background: var(--cf-bg);
-  border: 1px solid var(--cf-border);
-  border-radius: 14px;
+  /* Liquid glass — translucent + heavily frosted with a bright top edge,
+     matching the toolbar/FAB. The low-alpha fill is what lets the blur
+     read as glass rather than a solid black box. */
+  background: var(--cf-glass);
+  border: 1px solid var(--cf-glass-border);
+  border-radius: 16px;
   padding: 12px;
   display: flex; flex-direction: column; gap: 10px;
-  backdrop-filter: blur(16px) saturate(140%);
-  box-shadow: 0 16px 48px rgba(0,0,0,0.55);
+  -webkit-backdrop-filter: blur(30px) saturate(185%);
+  backdrop-filter: blur(30px) saturate(185%);
+  box-shadow:
+    0 18px 50px rgba(0,0,0,0.40),
+    inset 0 1px 0 rgba(255,255,255,0.22),
+    inset 0 -1px 0 rgba(0,0,0,0.22);
   z-index: 5;
   animation: cf-rise .2s cubic-bezier(.16,1,.3,1) both;
 }
@@ -218,6 +357,13 @@ export const STYLES = `
   width: 22px; height: 22px; border-radius: 6px;
 }
 .cf-icon-btn:hover { background: rgba(255,255,255,0.08); }
+/* Clear / erase-board — small text button after the count. */
+.cf-clear {
+  margin-left: 4px; width: auto; height: auto; padding: 3px 8px;
+  font: 700 10px -apple-system, system-ui; text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+.cf-clear:hover { color: #fff; }
 
 .cf-textarea {
   width: 100%; min-height: 72px; resize: vertical;
@@ -246,7 +392,29 @@ export const STYLES = `
   border-color: var(--cf-chip, var(--cf-accent));
   color: #fff;
 }
-.cf-popup-actions { display: flex; gap: 8px; justify-content: flex-end; }
+.cf-popup-actions { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
+
+/* Composer grows out of the floater — the WAAPI morph drives it, so drop
+   the CSS keyframe to avoid a double animation. */
+.cf-popup.cf-morph { animation: none; }
+/* The logo in the popup head — the floater mark that flew over + opened. */
+.cf-popup-brand {
+  width: 20px; height: 20px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0,0,0,0.25);
+}
+.cf-popup-brand svg { width: 15px; height: 15px; display: block; }
+/* Intent/severity disclosure — minimal by default. */
+.cf-details { display: flex; flex-direction: column; gap: 10px; }
+.cf-details[hidden] { display: none; }
+.cf-disclose {
+  margin-right: auto; border: 0; background: transparent; color: var(--cf-muted);
+  font: 600 11px -apple-system, system-ui; cursor: pointer;
+  padding: 6px 6px; border-radius: 7px;
+}
+.cf-disclose:hover, .cf-disclose.on { color: #fff; background: rgba(255,255,255,0.06); }
+.cf-overlay[data-theme="light"] .cf-disclose:hover,
+.cf-overlay[data-theme="light"] .cf-disclose.on { color: #111; background: rgba(0,0,0,0.05); }
 
 /* Thread */
 .cf-thread-body {
@@ -255,7 +423,17 @@ export const STYLES = `
 }
 .cf-msg { display: flex; flex-direction: column; gap: 3px; }
 .cf-msg-meta { display: flex; align-items: center; gap: 6px; }
-.cf-avatar { font-size: 12px; }
+.cf-avatar {
+  width: 20px; height: 20px; flex: 0 0 auto;
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: 50%; overflow: hidden;
+  font: 800 9px -apple-system, system-ui; letter-spacing: 0.02em;
+  color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.25);
+  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.14), 0 1px 2px rgba(0,0,0,0.3);
+}
+/* Agents read as a distinct rounded "logo" tile; humans stay round. */
+.cf-avatar-agent { border-radius: 7px; }
+.cf-avatar-img { width: 100%; height: 100%; object-fit: cover; }
 .cf-msg-name {
   font: 700 11px -apple-system, system-ui; color: var(--cf-muted);
 }

package/src/ui/App.tsx

@@ -1,69 +0,0 @@
-/**
- * Root Preact tree — the full annotation overlay.
- *
- * Real JSX (the file is `.tsx`); esbuild + tsc transpile via the
- * package's `jsx: react-jsx` + `jsxImportSource: preact` config.
- * Local component state uses preact/hooks; cross-cutting state lives
- * in the signals from `../store.js`.
- *
- * Layers (all inside the closed Shadow DOM, fixed-positioned):
- *   1. hover highlight  — element under the cursor in feedback mode
- *   2. multi-select boxes
- *   3. pins             — one numbered marker per annotation
- *   4. toolbar          — mode + tool switches
- *   5. composer popup   — comment + intent/severity/kind on capture
- *   6. thread panel     — per-pin discussion (human ↔ agent)
- */
-
-import type { ComponentChild } from "preact";
-
-import {
-  activeThreadId,
-  annotations,
-  cursors,
-  draft,
-  hoverBox,
-  multiSelection,
-  theme,
-  viewportTick,
-} from "../store.js";
-import { boxStyle } from "./helpers.js";
-import { Toolbar } from "./Toolbar.js";
-import { MultiBox, Pin } from "./Pins.js";
-import { Cursor } from "./Cursors.js";
-import { Composer } from "./Composer.js";
-import { ThreadPanel } from "./ThreadPanel.js";
-import { STYLES } from "./styles.js";
-
-export function App(): ComponentChild {
-  const themeAttr = theme.value === "auto" ? "dark" : theme.value;
-  // Subscribe to viewport changes so pins recompute their screen pos.
-  void viewportTick.value;
-
-  return (
-    <div class="cf-overlay" data-theme={themeAttr}>
-      <style key="styles">{STYLES}</style>
-      {hoverBox.value && !draft.value ? (
-        <div key="hover" class="cf-hover" style={boxStyle(hoverBox.value)} />
-      ) : null}
-      {multiSelection.value.map((el, i) => (
-        <MultiBox key={`multi-${i}`} el={el} />
-      ))}
-      <div key="pins">
-        {annotations.value.map((a, i) => (
-          <Pin key={a.id} a={a} index={i + 1} />
-        ))}
-      </div>
-      <div key="cursors">
-        {cursors.value.map((c) => (
-          <Cursor key={`cursor-${c.id}`} c={c} />
-        ))}
-      </div>
-      <Toolbar />
-      {draft.value ? <Composer key="composer" target={draft.value} /> : null}
-      {activeThreadId.value ? (
-        <ThreadPanel key="thread" id={activeThreadId.value} />
-      ) : null}
-    </div>
-  );
-}

package/src/ui/Composer.tsx

@@ -1,138 +0,0 @@
-/**
- * Composer popup — the comment + intent/severity form shown when a
- * target is captured. Local form state lives in preact/hooks; on
- * submit it pushes through the AFS API and clears the draft.
- */
-
-import type { ComponentChild } from "preact";
-import { useState } from "preact/hooks";
-
-import { api } from "../api.js";
-import type { CapturedTarget } from "../capture.js";
-import { author, draft } from "../store.js";
-import type {
-  AnnotationIntent,
-  AnnotationKind,
-  AnnotationSeverity,
-} from "../types.js";
-import {
-  INTENTS,
-  SEVERITIES,
-  SEVERITY_COLOR,
-  SEVERITY_NEUTRAL,
-} from "./constants.js";
-import { truncate } from "./helpers.js";
-
-interface ChipProps {
-  label: string;
-  on: boolean;
-  color: string;
-  onClick: () => void;
-}
-
-export function Chip({ label, on, color, onClick }: ChipProps): ComponentChild {
-  return (
-    <button
-      class={`cf-chip${on ? " on" : ""}`}
-      style={on ? `--cf-chip:${color};` : undefined}
-      onClick={onClick}
-    >
-      {label}
-    </button>
-  );
-}
-
-interface ComposerProps {
-  target: CapturedTarget;
-}
-
-export function Composer({ target }: ComposerProps): ComponentChild {
-  const [comment, setComment] = useState("");
-  const [intent, setIntent] = useState<AnnotationIntent>("change");
-  const [severity, setSeverity] = useState<AnnotationSeverity>("important");
-
-  const submit = (): void => {
-    const text = comment.trim();
-    if (!text) return;
-    api.addAnnotation({
-      ...target,
-      comment: text,
-      intent,
-      severity,
-      kind: "feedback" satisfies AnnotationKind,
-      author: author.value,
-    });
-    draft.value = null;
-  };
-
-  const cancel = (): void => {
-    draft.value = null;
-  };
-
-  const label = target.isMultiSelect
-    ? `${target.elementBoundingBoxes?.length ?? 0} elements`
-    : target.selectedText
-      ? `"${truncate(target.selectedText, 40)}"`
-      : `<${target.element}>`;
-
-  return (
-    <div class="cf-popup cf-composer">
-      <div key="head" class="cf-popup-head">
-        <span key="t" class="cf-popup-target">{label}</span>
-        <button key="x" class="cf-icon-btn" onClick={cancel} title="Cancel">
-          ✕
-        </button>
-      </div>
-      <textarea
-        key="ta"
-        class="cf-textarea"
-        placeholder="Describe the change… (Markdown supported)"
-        autofocus
-        value={comment}
-        onInput={(e: Event) => setComment((e.target as HTMLTextAreaElement).value)}
-        onKeyDown={(e: KeyboardEvent) => {
-          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") submit();
-        }}
-      />
-      <div key="intent" class="cf-field">
-        <span key="l" class="cf-field-label">Intent</span>
-        <div key="g" class="cf-chipset">
-          {INTENTS.map((it) => (
-            <Chip
-              key={it}
-              label={it}
-              on={intent === it}
-              color={SEVERITY_NEUTRAL}
-              onClick={() => setIntent(it)}
-            />
-          ))}
-        </div>
-      </div>
-      <div key="sev" class="cf-field">
-        <span key="l" class="cf-field-label">Severity</span>
-        <div key="g" class="cf-chipset">
-          {SEVERITIES.map((s) => (
-            <Chip
-              key={s}
-              label={s}
-              on={severity === s}
-              color={SEVERITY_COLOR[s]}
-              onClick={() => setSeverity(s)}
-            />
-          ))}
-        </div>
-      </div>
-      <div key="actions" class="cf-popup-actions">
-        <button key="c" class="cf-btn" onClick={cancel}>Cancel</button>
-        <button
-          key="s"
-          class="cf-btn cf-btn-primary"
-          disabled={!comment.trim()}
-          onClick={submit}
-        >
-          Comment
-        </button>
-      </div>
-    </div>
-  );
-}

package/src/ui/Cursors.tsx

@@ -1,50 +0,0 @@
-/**
- * Live presence cursors — one labeled arrow per remote actor (human
- * reviewers + spun-off agents) collaborating on the same page.
- */
-
-import type { ComponentChild } from "preact";
-
-import type { PresenceCursor } from "../store.js";
-import { CURSOR_PALETTE } from "./constants.js";
-import { hashId } from "./helpers.js";
-
-interface CursorProps {
-  c: PresenceCursor;
-}
-
-export function Cursor({ c }: CursorProps): ComponentChild {
-  // x is % of viewport width; y is px from document top.
-  const left = (c.x / 100) * window.innerWidth;
-  const top = c.y - window.scrollY;
-  const color =
-    c.color ??
-    (c.kind === "agent"
-      ? CURSOR_PALETTE[Math.abs(hashId(c.id)) % CURSOR_PALETTE.length]!
-      : "#ffffff");
-  return (
-    <div
-      class={`cf-cursor cf-cursor-${c.kind}`}
-      style={`top:${top}px;left:${left}px;--cf-cursor:${color};`}
-    >
-      {/* Arrow pointer. */}
-      <svg
-        key="arrow"
-        width="18"
-        height="18"
-        viewBox="0 0 18 18"
-        class="cf-cursor-arrow"
-      >
-        <path
-          d="M2 2 L2 14 L6 10 L9 16 L11 15 L8 9 L14 9 Z"
-          fill={color}
-          stroke="rgba(0,0,0,0.35)"
-          stroke-width="0.75"
-        />
-      </svg>
-      <span key="label" class="cf-cursor-label">
-        {`${c.kind === "agent" ? "🤖 " : ""}${c.label}`}
-      </span>
-    </div>
-  );
-}

package/src/ui/Pins.tsx

@@ -1,58 +0,0 @@
-/**
- * Pins + multi-select boxes.
- *
- *   - `Pin`      — one numbered marker per annotation, re-anchored to
- *                  its live element each render.
- *   - `MultiBox` — a pulsing outline around each element in the
- *                  current multi-selection set.
- */
-
-import type { ComponentChild } from "preact";
-
-import { activeThreadId } from "../store.js";
-import type { Annotation } from "../types.js";
-import { DEFAULT_DOT, SEVERITY_COLOR } from "./constants.js";
-import { boxStyle, firstLine, pinPosition } from "./helpers.js";
-
-interface PinProps {
-  a: Annotation;
-  index: number;
-}
-
-export function Pin({ a, index }: PinProps): ComponentChild {
-  const pos = pinPosition(a);
-  if (!pos) return null;
-  const color = a.severity ? SEVERITY_COLOR[a.severity] : DEFAULT_DOT;
-  const resolved = a.status === "resolved" || a.status === "dismissed";
-  return (
-    <button
-      class={`cf-pin${resolved ? " resolved" : ""}${a.author?.kind === "agent" ? " agent" : ""}`}
-      style={`top:${pos.top}px;left:${pos.left}px;--cf-pin:${color};`}
-      title={firstLine(a.comment)}
-      onClick={() => {
-        activeThreadId.value = activeThreadId.value === a.id ? null : a.id;
-      }}
-    >
-      {a.author?.kind === "agent" ? "★" : String(index)}
-    </button>
-  );
-}
-
-interface MultiBoxProps {
-  el: Element;
-}
-
-export function MultiBox({ el }: MultiBoxProps): ComponentChild {
-  const rect = el.getBoundingClientRect();
-  return (
-    <div
-      class="cf-multi-box"
-      style={boxStyle({
-        top: rect.top,
-        left: rect.left,
-        width: rect.width,
-        height: rect.height,
-      })}
-    />
-  );
-}