50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[544296,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"ItemStyles"] 52:I[34002,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"CodeEditor"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:Ta2a8,// Hairline UI · doc-comments · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components "use client"; import * as React from "react"; import { Check, MessageSquare, MessageSquarePlus } from "lucide-react"; import { NumberRoll } from "./number-roll"; import { StatusButton, type ActionStatus } from "./status-button"; /* ───────────────────────────────────────────────────────── * DOC COMMENTS: review threads beside the text they're about * * margin every thread sits level with the line it quotes; * threads that would overlap stack downwards * focus choose a thread (or its highlighted text) and it * lines up exactly with its line while the others * slide up and down out of its way * comment select text and a Comment pill appears in the * margin beside it; the pill grows into the * composer, and the thread takes its place * reply replies rise in and the count rolls; a reply that * fails keeps its words and says Try again * resolve the highlight fades and the card holds "Resolved · * Undo" over a draining hairline, then folds away * narrow no margin: a count sits at the end of the line, * and the paragraph opens a gap for the thread under * itself * * Threads find their text by quoting it ({ quote, prefix, * suffix }), so they survive edits around them. Highlights are * drawn under the text, never written into it: any content works. * ───────────────────────────────────────────────────────── */ export interface CommentAuthor { id: string; name: string; image?: string; } export interface DocComment { id: string; author: CommentAuthor; body: string; createdAt: Date | string | number; } /** The text a thread is about: the words themselves, and a little of what comes before and after to tell repeats apart. */ export interface CommentAnchor { quote: string; prefix?: string; suffix?: string; } export interface DocThread { id: string; anchor: CommentAnchor; comments: DocComment[]; resolved?: boolean; } export interface DocCommentsProps extends Omit, "defaultValue"> { /** The document. Any markup: it's read, never changed. */ children: React.ReactNode; threads?: DocThread[]; defaultThreads?: DocThread[]; onThreadsChange?: (threads: DocThread[]) => void; /** Who is commenting. */ user: CommentAuthor; /** Turns on commenting on a selection. Resolve with the stored thread to take its ids; throw to keep the words and say Try again. */ onCreate?: (anchor: CommentAnchor, body: string) => Promise | DocThread | void; /** Turns on replies. Resolve with the stored comment; throw to keep the words and say Try again. */ onReply?: (thread: DocThread, body: string) => Promise | DocComment | void; /** Turns on Resolve. Runs once the chance to undo is over; throw to open the thread again. */ onResolve?: (thread: DocThread) => Promise | void; undoFor?: number; locales?: string; label?: string; } type Box = { top: number; left: number; width: number; height: number }; type Found = { id: string; rects: Box[]; top: number; bottom: number; order: number; end: [Text, number] }; type Draft = { id: string; anchor: CommentAnchor; status: ActionStatus }; type Pending = { anchor: CommentAnchor; top: number; bottom: number; left: number }; type TextIndex = { text: string; nodes: { node: Text; start: number }[] }; const EASE = "cubic-bezier(0.16,1,0.3,1)"; const GLIDE = "cubic-bezier(0.77,0,0.175,1)"; const GAP = 8; const MARGIN_W = 256; const NARROW = 620; const FOCUS = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"; const NO_THREADS: DocThread[] = []; const reducedQuery = "(prefers-reduced-motion: reduce)"; const subscribeReduced = (onChange: () => void) => { const query = window.matchMedia(reducedQuery); query.addEventListener("change", onChange); return () => query.removeEventListener("change", onChange); }; const useReducedMotion = () => React.useSyncExternalStore(subscribeReduced, () => window.matchMedia(reducedQuery).matches, () => false); let seq = 0; const newId = (p: string) => `${p}${Date.now().toString(36)}${(seq++).toString(36)}`; function indexText(root: HTMLElement): TextIndex { const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT); const nodes: TextIndex["nodes"] = []; let text = ""; for (let n = walker.nextNode() as Text | null; n; n = walker.nextNode() as Text | null) { nodes.push({ node: n, start: text.length }); text += n.data; } return { text, nodes }; } /** The text node and offset at a place in the text; an end prefers the node it closes. */ function locate(index: TextIndex, offset: number, isEnd: boolean): [Text, number] | null { for (const { node, start } of index.nodes) { const end = start + node.data.length; if (isEnd ? offset > start && offset <= end : offset >= start && offset < end) return [node, offset - start]; } return null; } /** Where the quote is: the occurrence whose surroundings match the anchor best. */ function findAnchor({ text }: TextIndex, anchor: CommentAnchor): [number, number] | null { const q = anchor.quote; if (!q) return null; const p = anchor.prefix ?? ""; const s = anchor.suffix ?? ""; let best = -1; let bestScore = -1; for (let at = text.indexOf(q); at >= 0; at = text.indexOf(q, at + 1)) { let score = 0; for (let k = 1; k <= p.length && text[at - k] === p[p.length - k]; k++) score++; for (let k = 0; k < s.length && text[at + q.length + k] === s[k]; k++) score++; if (score > bestScore) { best = at; bestScore = score; } } return best < 0 ? null : [best, best + q.length]; } /** One box per line of a range, in the content's coordinates. */ function lineBoxes(range: Range, origin: DOMRect): Box[] { const out: Box[] = []; for (const r of range.getClientRects()) { if (r.width < 0.5 || r.height < 1) continue; const top = r.top - origin.top; const last = out[out.length - 1]; if (last && Math.abs(last.top - top) < 3) { const right = Math.max(last.left + last.width, r.right - origin.left); last.left = Math.min(last.left, r.left - origin.left); last.width = right - last.left; last.height = Math.max(last.height, r.height); } else out.push({ top, left: r.left - origin.left, width: r.width, height: r.height }); } return out; } /** Cards in the margin: each wants to sit at its line; the chosen one does, the rest make way above and below it. */ function solve(items: { id: string; want: number }[], height: (id: string) => number, active: string | null) { const pos = new Map(); const down = (from: number, floor: number) => { let y = floor; for (let i = from; i < items.length; i++) { const top = Math.max(items[i].want, y); pos.set(items[i].id, top); y = top + height(items[i].id) + GAP; } }; const a = items.findIndex((i) => i.id === active); if (a < 0) { down(0, 0); return pos; } pos.set(items[a].id, items[a].want); down(a + 1, items[a].want + height(items[a].id) + GAP); let ceiling = items[a].want - GAP; for (let i = a - 1; i >= 0; i--) { const top = Math.min(items[i].want, ceiling - height(items[i].id)); pos.set(items[i].id, top); ceiling = top - GAP; } // No room above the chosen one: stack from the top instead. if (items.length && (pos.get(items[0].id) ?? 0) < 0) down(0, 0); return pos; } function Avatar({ author }: { author: CommentAuthor }) { return author.image ? ( // eslint-disable-next-line @next/next/no-img-element

) : ( ); } /** A textarea that grows with what's typed. */ function Grow({ value, onChange, onKeyDown, placeholder, label, autoFocus }: { value: string; onChange: (v: string) => void; onKeyDown: (e: React.KeyboardEvent) => void; placeholder: string; label: string; autoFocus?: boolean }) { const ref = React.useRef(null); React.useLayoutEffect(() => { const el = ref.current; if (!el) return; el.style.height = "auto"; el.style.height = `${el.scrollHeight}px`; }, [value]); React.useEffect(() => { if (autoFocus) ref.current?.focus({ preventScroll: true }); }, [autoFocus]); return (

onChange(e.target.value)}
      onKeyDown={onKeyDown}
      className="block max-h-40 w-full resize-none bg-transparent text-[13px] leading-[1.45] outline-none placeholder:text-muted-foreground [@media(pointer:coarse)]:text-[16px]"
    />
  );
}

type CardActions = {
  activate: (id: string) => void;
  reply: (thread: DocThread, body: string) => Promise<boolean>;
  resolve: (thread: DocThread) => void;
  undo: (thread: DocThread) => void;
  finish: (thread: DocThread) => void;
  create: (draft: Draft, body: string) => void;
  cancel: () => void;
  height: (id: string, h: number) => void;
};

/** One thread (or the draft of one): its outer box eases to the height of what's inside, measured once per change. */
function Card({
  id,
  thread,
  draft,
  active,
  resolving,
  canReply,
  canResolve,
  user,
  when,
  note,
  holdKey,
  undoFor,
  grow,
  reduced,
  actions,
}: {
  id: string;
  thread?: DocThread;
  draft?: Draft;
  active: boolean;
  resolving: number | null;
  canReply: boolean;
  canResolve: boolean;
  user: CommentAuthor;
  when: (d: DocComment["createdAt"]) => string;
  note?: string;
  holdKey?: number;
  undoFor: number;
  grow: boolean;
  reduced: boolean;
  actions: React.RefObject<CardActions>;
}) {
  const outer = React.useRef<HTMLElement>(null);
  const inner = React.useRef<HTMLDivElement>(null);
  const [h, setH] = React.useState<number | null>(null);
  const [text, setText] = React.useState("");
  const [status, setStatus] = React.useState<ActionStatus>("idle");
  const [hold, setHold] = React.useState(false);
  const mounted = React.useRef(false);
  // A draft that became its thread: the composer starts empty for replies.
  const wasDraft = React.useRef(!!draft);
  if (wasDraft.current && !draft) {
    wasDraft.current = false;
    if (text) setText("");
  }

React.useLayoutEffect(() => {
    const el = inner.current;
    if (!el) return;
    const measure = () => {
      const next = el.offsetHeight;
      setH((p) => (p === next ? p : next));
      actions.current.height(id, next);
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(el);
    return () => observer.disconnect();
  }, [id, actions]);

// The Comment pill grows into the composer: one clip, once.
  React.useLayoutEffect(() => {
    if (grow && !reduced)
      outer.current?.animate(
        [
          { clipPath: "inset(0 calc(100% - 104px) calc(100% - 28px) 0 round 14px)", opacity: 0.7 },
          { clipPath: "inset(0 0 0 0 round 14px)", opacity: 1 },
        ],
        { duration: 320, easing: EASE },
      );
    mounted.current = true;
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

return (
    <article
      ref={outer}
      tabIndex={draft ? -1 : 0}
      onKeyDown={(e) => {
        if (e.target !== e.currentTarget || !thread) return;
        if (e.key === "Enter" || e.key === " ") {
          e.preventDefault();
          actions.current.activate(thread.id);
        }
        if (e.key === "Escape") actions.current.activate("");
      }}
      aria-label={draft ? `New comment on “${quote}”` : `${first?.author.name ?? "Comment"} on “${quote}”${replies ? `, ${replies} ${replies === 1 ? "reply" : "replies"}` : ""}`}
      onClick={() => thread && !active && actions.current.activate(thread.id)}
      className={`overflow-clip rounded-[14px] bg-background text-left ${active ? "" : "cursor-pointer"} ${FOCUS}`}
      style={{
        height: h ?? undefined,
        boxShadow: active ? "inset 0 0 0 1px var(--ring), 0 0 0 0 transparent" : "inset 0 0 0 1px var(--border)",
        transition: reduced || h === null ? "none" : `height 260ms ${EASE}, box-shadow 200ms ${EASE}`,
      }}
    >
      <div ref={inner} className="p-3">
        {draft ? (
          <>
            <div className="flex items-center gap-2 text-[12.5px] font-medium">
              <Avatar author={user} />
              {user.name}
            </div>
            <div className="mt-2">
              <Grow value={text} onChange={setText} onKeyDown={keys} placeholder="Add a comment…" label={`Comment on “${quote}”`} autoFocus />
            </div>
            <div className="mt-2.5 flex items-center justify-end gap-1">
              <button type="button" onClick={() => actions.current.cancel()} className={`inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[12.5px] text-muted-foreground hover:bg-accent hover:text-foreground ${FOCUS}`}>
                Cancel
              </button>
              <StatusButton size="sm" status={draft.status} labels={{ idle: "Comment", pending: "Posting", success: "Posted", error: "Try again" }} disabled={!text.trim()} onClick={send} />
            </div>
          </>
        ) : resolving !== null && thread ? (
          <div className="relative flex h-7 items-center gap-2 text-[12.5px]" onPointerEnter={() => setHold(true)} onPointerLeave={() => setHold(false)}>
            <span className="flex size-5 items-center justify-center text-emerald-600 dark:text-emerald-400" aria-hidden="true">
              <Check className="size-3.5" strokeWidth={2} />
            </span>
            <span className="min-w-0 flex-1 truncate text-muted-foreground">Resolved</span>
            <button
              type="button"
              onClick={(e) => {
                e.stopPropagation();
                actions.current.undo(thread);
              }}
              className={`inline-flex h-7 shrink-0 cursor-pointer items-center rounded-full px-2.5 font-medium hover:bg-accent ${FOCUS}`}
            >
              Undo
            </button>
            <span
              key={holdKey}
              aria-hidden="true"
              className="absolute inset-x-0 -bottom-3 h-px origin-left bg-foreground/40"
              style={{ animation: `ui-progress ${undoFor}ms linear reverse forwards`, animationPlayState: hold ? "paused" : "running" }}
              onAnimationEnd={() => actions.current.finish(thread)}
            />
          </div>
        ) : (
          <>
            {comments.map((c, i) => (
              <CommentItem key={c.id} comment={c} when={when} clamp={!active && i === 0} hidden={!active && i > 0} enter={mounted.current} reduced={reduced}>
                {i === 0 && active && canResolve && thread && (
                  <button
                    type="button"
                    aria-label={`Resolve the thread on “${quote}”`}
                    title="Resolve"
                    onClick={(e) => {
                      e.stopPropagation();
                      actions.current.resolve(thread);
                    }}
                    className={`-my-1 -mr-1 ml-auto flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground hover:bg-accent hover:text-foreground ${FOCUS}`}
                  >
                    <Check className="size-3.5" strokeWidth={2} />
                  </button>
                )}
              </CommentItem>
            ))}
            {!active && replies > 0 && (
              <p className="mt-1.5 text-[12px] tabular-nums text-muted-foreground">
                <NumberRoll value={replies} /> {replies === 1 ? "reply" : "replies"}
              </p>
            )}
            {active && canReply && thread && (
              <div className="mt-2.5 border-t border-border pt-2.5" onClick={(e) => e.stopPropagation()}>
                <Grow value={text} onChange={(v) => (setText(v), status === "error" && setStatus("idle"))} onKeyDown={keys} placeholder="Reply…" label={`Reply to ${first?.author.name ?? "the thread"}`} />
                <div className="grid transition-[grid-template-rows] duration-200" style={{ gridTemplateRows: text.trim() || status !== "idle" ? "1fr" : "0fr", transitionTimingFunction: EASE }}>
                  <div className="min-h-0 overflow-hidden">
                    <div className="flex justify-end pt-2">
                      <StatusButton size="sm" status={status} labels={{ idle: "Reply", pending: "Sending", success: "Sent", error: "Try again" }} onClick={send} onReset={() => setStatus("idle")} resetAfter={1200} />
                    </div>
                  </div>
                </div>
              </div>
            )}
            {note && <p className="mt-2 text-[12px] text-red-600 dark:text-red-400">{note}</p>}
          </>
        )}
      </div>
    </article>
  );
}

const MemoCard = React.memo(Card);

export function DocComments({
  children,
  threads: controlled,
  defaultThreads = NO_THREADS,
  onThreadsChange,
  user,
  onCreate,
  onReply,
  onResolve,
  undoFor = 4000,
  locales,
  label = "Comments",
  className = "",
  ...props
}: DocCommentsProps) {
  const reduced = useReducedMotion();
  const [own, setOwn] = React.useState<DocThread[]>(defaultThreads);
  const threads = controlled ?? own;
  const threadsRef = React.useRef(threads);
  threadsRef.current = threads;
  const [active, setActive] = React.useState<string | null>(null);
  const [hover, setHover] = React.useState<string | null>(null);
  const [found, setFound] = React.useState<Found[]>([]);
  const [heights, setHeights] = React.useState<ReadonlyMap<string, number>>(() => new Map());
  const [draft, setDraft] = React.useState<Draft | null>(null);
  const [pending, setPending] = React.useState<Pending | null>(null);
  const [resolving, setResolving] = React.useState<Record<string, number>>({});
  const [notes, setNotes] = React.useState<Record<string, string>>({});
  const [narrow, setNarrow] = React.useState(false);
  const [placed, setPlaced] = React.useState(false);
  const [now, setNow] = React.useState<number | null>(null);
  const [announce, setAnnounce] = React.useState("");
  const [growing, setGrowing] = React.useState<string | null>(null);

const rootRef = React.useRef<HTMLDivElement>(null);
  const innerRef = React.useRef<HTMLDivElement>(null);
  const indexRef = React.useRef<TextIndex | null>(null);
  const frame = React.useRef(0);
  const pendingRef = React.useRef<Pending | null>(null);
  pendingRef.current = pending;
  const draftRef = React.useRef<Draft | null>(null);
  draftRef.current = draft;
  const heightsRef = React.useRef(new Map<string, number>());
  const focusCard = React.useRef<string | null>(null);

const say = (text: string) => setAnnounce((a) => (a === text ? `${text} ` : text));
  const commit = (next: DocThread[]) => {
    threadsRef.current = next;
    if (controlled === undefined) setOwn(next);
    onThreadsChange?.(next);
  };

React.useEffect(() => {
    setNow(Date.now());
    const t = window.setInterval(() => setNow(Date.now()), 60_000);
    return () => window.clearInterval(t);
  }, []);
  const dateFmt = React.useMemo(() => new Intl.DateTimeFormat(locales, { month: "short", day: "numeric" }), [locales]);
  const when = React.useCallback(
    (d: DocComment["createdAt"]) => {
      if (now === null) return "";
      const t = new Date(d).getTime();
      const s = (now - t) / 1000;
      if (s < 60) return "now";
      if (s < 3600) return `${Math.floor(s / 60)}m`;
      if (s < 86400) return `${Math.floor(s / 3600)}h`;
      if (s < 172800) return "Yesterday";
      return dateFmt.format(t);
    },
    [now, dateFmt],
  );

// ── Where each thread's text is ────────────────────────
  const shown = React.useMemo(() => threads.filter((t) => !t.resolved), [threads]);
  const measure = React.useCallback(() => {
    const inner = innerRef.current;
    if (!inner) return;
    const index = (indexRef.current ??= indexText(inner));
    const origin = inner.getBoundingClientRect();
    const out: Found[] = [];
    const anchors: { id: string; anchor: CommentAnchor }[] = threadsRef.current.filter((t) => !t.resolved).map((t) => ({ id: t.id, anchor: t.anchor }));
    if (draftRef.current) anchors.push({ id: draftRef.current.id, anchor: draftRef.current.anchor });
    for (const { id, anchor } of anchors) {
      const span = findAnchor(index, anchor);
      const a = span && locate(index, span[0], false);
      const b = span && locate(index, span[1], true);
      if (!span || !a || !b) continue;
      const range = document.createRange();
      range.setStart(a[0], a[1]);
      range.setEnd(b[0], b[1]);
      const rects = lineBoxes(range, origin);
      if (!rects.length) continue;
      const last = rects[rects.length - 1];
      out.push({ id, rects, top: rects[0].top, bottom: last.top + last.height, order: span[0], end: b });
    }
    out.sort((x, y) => x.order - y.order);
    setFound((prev) =>
      prev.length === out.length && prev.every((p, i) => p.id === out[i].id && p.rects.length === out[i].rects.length && p.rects.every((r, k) => Math.abs(r.top - out[i].rects[k].top) < 0.5 && Math.abs(r.left - out[i].rects[k].left) < 0.5 && Math.abs(r.width - out[i].rects[k].width) < 0.5))
        ? prev
        : out,
    );
  }, []);
  const schedule = React.useCallback(() => {
    cancelAnimationFrame(frame.current);
    frame.current = requestAnimationFrame(measure);
  }, [measure]);

React.useLayoutEffect(() => {
    measure();
  }, [threads, draft, measure]);

React.useEffect(() => {
    const inner = innerRef.current;
    const root = rootRef.current;
    if (!inner || !root) return;
    const resize = new ResizeObserver(() => {
      setNarrow(root.offsetWidth < NARROW);
      schedule();
    });
    resize.observe(inner);
    resize.observe(root);
    const mutate = new MutationObserver(() => {
      indexRef.current = null;
      schedule();
    });
    mutate.observe(inner, { childList: true, subtree: true, characterData: true });
    document.fonts?.ready.then(schedule);
    return () => {
      resize.disconnect();
      mutate.disconnect();
      cancelAnimationFrame(frame.current);
    };
  }, [schedule]);

// ── The margin ─────────────────────────────────────────
  const heightOf = React.useCallback((id: string) => heights.get(id) ?? 72, [heights]);
  const positions = React.useMemo(() => solve(found.map((f) => ({ id: f.id, want: Math.max(0, f.top - 10) })), heightOf, active), [found, heightOf, active]);
  const marginHeight = found.reduce((m, f) => Math.max(m, (positions.get(f.id) ?? 0) + heightOf(f.id)), 0);
  // Cards slide only once they've been placed: the first layout lands without a glide.
  React.useEffect(() => {
    if (!placed && found.length && heights.size) {
      const t = requestAnimationFrame(() => setPlaced(true));
      return () => cancelAnimationFrame(t);
    }
  }, [placed, found.length, heights.size]);

// ── Selecting text to comment on ───────────────────────
  React.useEffect(() => {
    if (!onCreate) return;
    let raf = 0;
    let clear = 0;
    const read = () => {
      const inner = innerRef.current;
      const sel = window.getSelection();
      if (!inner || draftRef.current) return;
      const range = sel && sel.rangeCount && !sel.isCollapsed ? sel.getRangeAt(0) : null;
      if (!range || !inner.contains(range.commonAncestorContainer)) {
        // Hidden a moment later, so a tap on the pill (which can take the selection away first) still lands.
        window.clearTimeout(clear);
        clear = window.setTimeout(() => setPending(null), 220);
        return;
      }
      window.clearTimeout(clear);
      const before = document.createRange();
      before.setStart(inner, 0);
      before.setEnd(range.startContainer, range.startOffset);
      const text = (indexRef.current ??= indexText(inner)).text;
      let s = before.toString().length;
      let e = s + range.toString().length;
      while (s < e && /\s/.test(text[s])) s++;
      while (e > s && /\s/.test(text[e - 1])) e--;
      if (e <= s) return setPending(null);
      const origin = inner.getBoundingClientRect();
      const boxes = lineBoxes(range, origin);
      if (!boxes.length) return;
      const last = boxes[boxes.length - 1];
      setPending({
        anchor: { quote: text.slice(s, e), prefix: text.slice(Math.max(0, s - 32), s), suffix: text.slice(e, e + 32) },
        top: boxes[0].top,
        bottom: last.top + last.height,
        left: boxes[0].left,
      });
    };
    const onChange = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(read);
    };
    document.addEventListener("selectionchange", onChange);
    return () => {
      document.removeEventListener("selectionchange", onChange);
      cancelAnimationFrame(raf);
      window.clearTimeout(clear);
    };
  }, [onCreate]);

const openDraft = React.useCallback(() => {
    const p = pendingRef.current;
    if (!p || draftRef.current) return;
    const d = { id: newId("t"), anchor: p.anchor, status: "idle" as ActionStatus };
    setDraft(d);
    setGrowing(d.id);
    setActive(d.id);
    setPending(null);
    window.getSelection()?.removeAllRanges();
  }, []);

// Ctrl+Alt+M comments on the selection, as in most editors.
  React.useEffect(() => {
    if (!onCreate) return;
    const onKey = (e: KeyboardEvent) => {
      if ((e.ctrlKey || e.metaKey) && e.altKey && e.code === "KeyM" && pendingRef.current) {
        e.preventDefault();
        openDraft();
      }
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onCreate, openDraft]);

// A press outside the comments lets the chosen thread go (a draft with words in it stays).
  React.useEffect(() => {
    if (!active) return;
    const onDown = (e: PointerEvent) => {
      if (!rootRef.current?.contains(e.target as Node) && !draftRef.current) setActive(null);
    };
    document.addEventListener("pointerdown", onDown);
    return () => document.removeEventListener("pointerdown", onDown);
  }, [active]);

// ── Threads ────────────────────────────────────────────
  const hit = (e: React.PointerEvent | React.MouseEvent) => {
    const inner = innerRef.current;
    if (!inner) return null;
    const o = inner.getBoundingClientRect();
    const x = e.clientX - o.left;
    const y = e.clientY - o.top;
    for (let i = found.length - 1; i >= 0; i--) if (found[i].rects.some((r) => x >= r.left - 2 && x <= r.left + r.width + 2 && y >= r.top - 2 && y <= r.top + r.height + 2)) return found[i].id;
    return null;
  };

// What the memoised cards call, through one ref.
  const actions = React.useRef<CardActions>(null!);
  actions.current = {
    activate: (id) => setActive(id || null),
    reply,
    resolve: (thread) => {
      setResolving((r) => ({ ...r, [thread.id]: Date.now() }));
      say("Resolved. Undo is in the card.");
    },
    undo: (thread) => {
      setResolving(({ [thread.id]: _, ...rest }) => rest);
      say("Thread open again.");
    },
    finish,
    create,
    cancel: () => {
      setDraft(null);
      setActive(null);
    },
    height: (id, h) => {
      if (heightsRef.current.get(id) === h) return;
      heightsRef.current.set(id, h);
      setHeights(new Map(heightsRef.current));
    },
  };

React.useEffect(() => {
    const id = focusCard.current;
    if (!id) return;
    focusCard.current = null;
    rootRef.current?.querySelector<HTMLElement>(`[data-card="${CSS.escape(id)}"] > article`)?.focus({ preventScroll: true });
  });

// ── Narrow: the paragraph opens a gap under itself for the chosen thread ──
  const openId = draft?.id ?? active;
  const openFound = openId ? found.find((f) => f.id === openId) : undefined;
  const [gap, setGap] = React.useState<{ id: string; top: number } | null>(null);
  /** The paragraph holding the gap: found once per thread opened, its own margin kept to put back. */
  const gapEl = React.useRef<{ id: string; el: HTMLElement; was: string; base: number } | null>(null);
  const restoreGap = React.useCallback(() => {
    const g = gapEl.current;
    if (!g) return;
    gapEl.current = null;
    g.el.style.marginBottom = g.was;
    window.setTimeout(() => {
      if (gapEl.current?.el !== g.el) g.el.style.transition = "";
    }, 320);
  }, []);
  React.useLayoutEffect(() => {
    const want = narrow && openFound ? openFound.id : null;
    if (gapEl.current && gapEl.current.id !== want) restoreGap();
    if (!want || !openFound) {
      setGap(null);
      return;
    }
    const inner = innerRef.current;
    if (!gapEl.current) {
      let block: HTMLElement | null = openFound.end[0].parentElement;
      while (block && block !== inner && block.parentElement !== inner && !/^(block|list-item|flex|grid|table)$/.test(getComputedStyle(block).display)) block = block.parentElement;
      if (!block || block === inner) return;
      gapEl.current = { id: want, el: block, was: block.style.marginBottom, base: parseFloat(getComputedStyle(block).marginBottom) || 0 };
      block.style.transition = reduced ? "" : `margin-bottom 280ms ${EASE}`;
    }
    const g = gapEl.current;
    const margin = `${g.base + (heights.get(want) ?? 120) + 16}px`;
    if (g.el.style.marginBottom !== margin) g.el.style.marginBottom = margin;
    // The paragraph's own box doesn't move as its margin grows, so the card's place is read once per change.
    const top = g.el.offsetTop + g.el.offsetHeight + 8;
    setGap((x) => (x?.id === want && x.top === top ? x : { id: want, top }));
  }, [narrow, openFound, heights, reduced, restoreGap]);
  React.useEffect(() => restoreGap, [restoreGap]);

// ── Render ─────────────────────────────────────────────
  const threadOf = (id: string) => shown.find((t) => t.id === id);
  const tone = (id: string) => {
    const on = id === openId;
    const fading = resolving[id] !== undefined;
    return {
      background: `color-mix(in oklab, var(--primary) ${on ? 26 : hover === id ? 20 : 13}%, transparent)`,
      boxShadow: on ? "inset 0 -1.5px 0 var(--primary)" : "inset 0 -1.5px 0 transparent",
      opacity: fading ? 0 : 1,
    };
  };

return (
    <div ref={rootRef} role="group" aria-label={label} className={`relative text-foreground ${className}`} {...props}>
      <div className={narrow ? "" : "flex items-start gap-6"}>
        {/* The document, with the highlights drawn under it. */}
        <div className={`relative min-w-0 flex-1 ${narrow ? "pr-9" : ""}`}>
          <div
            ref={innerRef}
            className="relative"
            onPointerMove={(e) => {
              if (e.pointerType !== "mouse") return;
              const id = hit(e);
              if (id !== hover) setHover(id);
            }}
            onPointerLeave={() => hover && setHover(null)}
            onClick={(e) => {
              if (window.getSelection()?.isCollapsed === false) return;
              const id = hit(e);
              if (id && id !== draft?.id) setActive((a) => (a === id ? null : id));
              else if (!draft) setActive(null);
            }}
            style={{ cursor: hover ? "pointer" : undefined }}
          >
            <div aria-hidden="true" className="pointer-events-none absolute inset-0">
              {found.map((f) =>
                f.rects.map((r, i) => (
                  <span
                    key={`${f.id}-${i}`}
                    className="absolute rounded-[3px]"
                    style={{ top: r.top - 1, left: r.left - 1, width: r.width + 2, height: r.height + 2, ...tone(f.id), transition: reduced ? "none" : `background-color 200ms ${EASE}, box-shadow 200ms ${EASE}, opacity 320ms ${EASE}` }}
                  />
                )),
              )}
            </div>
            <div className="relative">{children}</div>

{/* Narrow: a count at the end of each thread's first line, and the open thread in the gap its paragraph made. */}
            {narrow &&
              found.map((f) => {
                const t = threadOf(f.id);
                if (!t) return null;
                return (
                  <button
                    key={f.id}
                    type="button"
                    aria-label={`${t.comments.length} ${t.comments.length === 1 ? "comment" : "comments"} on “${t.anchor.quote}”`}
                    aria-expanded={openId === f.id}
                    onClick={(e) => {
                      e.stopPropagation();
                      setActive((a) => (a === f.id ? null : f.id));
                    }}
                    className={`absolute -right-9 flex h-6 cursor-pointer items-center gap-1 rounded-full px-1.5 text-[11px] tabular-nums transition-colors ${openId === f.id ? "bg-accent text-foreground" : "text-muted-foreground hover:bg-accent hover:text-foreground"} ${FOCUS}`}
                    style={{ top: f.top - 2 }}
                  >
                    <MessageSquare className="size-3" strokeWidth={2} aria-hidden="true" />
                    {t.comments.length}
                  </button>
                );
              })}
            {narrow && gap && openId === gap.id && (
              <div key={gap.id} data-card={gap.id} className="absolute inset-x-0 z-10" style={{ top: gap.top }} onClick={(e) => e.stopPropagation()}>
                {card(gap.id)}
              </div>
            )}

{/* The Comment pill: in the margin beside the selection, or under it when narrow. */}
            {pending && !draft && (
              <button
                type="button"
                onPointerDown={(e) => e.preventDefault()}
                onClick={(e) => {
                  e.stopPropagation();
                  openDraft();
                }}
                aria-keyshortcuts="Control+Alt+M"
                className={`absolute z-20 inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full bg-background px-2.5 text-[12.5px] font-medium shadow-[inset_0_0_0_1px_var(--border)] hover:bg-accent ${FOCUS}`}
                style={
                  narrow
                    ? { top: pending.bottom + 6, left: Math.max(0, Math.min(pending.left, (innerRef.current?.offsetWidth ?? 300) - 110)) }
                    : { top: pending.top - 4, left: `calc(100% + 24px)` }
                }
                ref={(el) => {
                  if (!el || el.dataset.in || reduced) return;
                  el.dataset.in = "1";
                  el.animate(
                    [
                      { opacity: 0, transform: "scale(0.9)", filter: "blur(3px)" },
                      { opacity: 1, transform: "none", filter: "blur(0px)" },
                    ],
                    { duration: 220, easing: EASE },
                  );
                }}
              >
                <MessageSquarePlus className="size-3.5" strokeWidth={1.75} aria-hidden="true" />
                Comment
              </button>
            )}
          </div>
        </div>

{/* Wide: the margin, every card level with its line. */}
        {!narrow && (
          <aside aria-label="Threads" className="relative shrink-0" style={{ width: MARGIN_W, minHeight: marginHeight }}>
            {found.map((f) => (
              <div
                key={f.id}
                data-card={f.id}
                className="absolute inset-x-0 top-0"
                style={{ transform: `translateY(${positions.get(f.id) ?? 0}px)`, transition: placed && !reduced ? `transform 360ms ${GLIDE}` : "none", zIndex: f.id === openId ? 2 : 1 }}
              >
                {card(f.id)}
              </div>
            ))}
          </aside>
        )}
      </div>

<p className="sr-only" role="status" aria-live="polite">
        {announce}
      </p>
    </div>
  );
}
4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/status-button.json?as=dependency"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes ui-progress {\n\tfrom {\n\t\ttransform: scaleX(0);\n\t}\n\tto {\n\t\ttransform: scaleX(1);\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/doc-comments.tsx","content":"$54","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>