@agent-native/core 0.44.0 → 0.44.1

package/dist/client/blocks/library/JsonExplorerBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"JsonExplorerBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useId,\n  useMemo,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport {\n  JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH,\n  JSON_EXPLORER_MAX_COLLAPSED_DEPTH,\n  type JsonExplorerData,\n} from \"./json-explorer.config.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `json-explorer` block — a browser-devtools /\n * Postman-style collapsible JSON tree. The raw JSON TEXT (`data.json`) is the\n * source of truth; the Read renderer parses it defensively and, on any parse\n * error, falls back to the raw text plus the error message (it never throws).\n * Lives in core so any app can register the dev-doc block (no shadcn import).\n *\n * Progressive disclosure is the whole point: object/array nodes show a chevron\n * and a one-line summary (\"{…} 3 keys\" / \"[…] 5 items\"); each node tracks its\n * own open/closed state (`useState`) seeded by `collapsedDepth` so deep payloads\n * stay scannable. Leaf values are type-colored (string = green, number = blue,\n * boolean = violet, null = muted); keys use a stable accent color; subtle indent\n * guide lines mark nesting.\n *\n * DARK/LIGHT: the plan editor toggles a `.dark` class on <html>. Every color\n * token — value types, keys, guide lines, chrome — uses Tailwind `dark:` variants\n * or the theme-aware plan CSS-var utilities, so the tree reads correctly in BOTH\n * modes (no hardcoded dark-only palette).\n */\n\n/* ── Theme-aware value-type color tokens ───────────────────────────────────── */\n\n/** String leaves: green in both modes. */\nconst STRING_CLASS = \"text-emerald-700 dark:text-emerald-300\";\n/** Number leaves: blue in both modes. */\nconst NUMBER_CLASS = \"text-blue-700 dark:text-blue-300\";\n/** Boolean leaves: violet in both modes. */\nconst BOOLEAN_CLASS = \"text-violet-700 dark:text-violet-300\";\n/** `null`/`undefined` leaves: muted (theme-aware plan var). */\nconst NULL_CLASS = \"text-plan-muted italic\";\n/** Object keys: a stable, saturated accent that reads in both modes. */\nconst KEY_CLASS = \"text-rose-700 dark:text-rose-300\";\n/** Structural punctuation (braces, brackets, commas, colons). */\nconst PUNCT_CLASS = \"text-plan-muted\";\n\nconst JSON_EXPLORER_DEPTH_PRESETS = [\n  { label: \"Off\", value: 0 },\n  { label: \"2 levels\", value: JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH },\n  { label: \"3 levels\", value: 3 },\n  { label: \"All\", value: JSON_EXPLORER_MAX_COLLAPSED_DEPTH },\n] as const;\n\nfunction clampCollapsedDepth(value: number): number {\n  return Math.max(0, Math.min(JSON_EXPLORER_MAX_COLLAPSED_DEPTH, value));\n}\n\ntype JsonValue =\n  | string\n  | number\n  | boolean\n  | null\n  | JsonValue[]\n  | { [key: string]: JsonValue };\ntype JsonObject = { [key: string]: JsonValue };\n\ninterface ParseResult {\n  ok: boolean;\n  value?: JsonValue;\n  error?: string;\n}\n\ninterface JsonTreePulse {\n  open: boolean;\n  nonce: number;\n}\n\nfunction parseJson(raw: string): ParseResult {\n  const trimmed = raw.trim();\n  if (!trimmed) {\n    return { ok: false, error: \"Empty payload — add some JSON to explore.\" };\n  }\n  try {\n    return { ok: true, value: JSON.parse(trimmed) as JsonValue };\n  } catch (error) {\n    return {\n      ok: false,\n      error: error instanceof Error ? error.message : \"Invalid JSON\",\n    };\n  }\n}\n\nfunction isContainer(value: JsonValue): value is JsonValue[] | JsonObject {\n  return value !== null && typeof value === \"object\";\n}\n\n/** One-line summary for a collapsed container, devtools style. */\nfunction containerSummary(value: JsonValue[] | JsonObject): string {\n  if (Array.isArray(value)) {\n    const count = value.length;\n    return `[…] ${count} ${count === 1 ? \"item\" : \"items\"}`;\n  }\n  const count = Object.keys(value).length;\n  return `{…} ${count} ${count === 1 ? \"key\" : \"keys\"}`;\n}\n\n/** Render a leaf (primitive) value with its type color. */\nfunction LeafValue({ value }: { value: string | number | boolean | null }) {\n  if (value === null) {\n    return <span className={NULL_CLASS}>null</span>;\n  }\n  if (typeof value === \"string\") {\n    return <span className={STRING_CLASS}>{JSON.stringify(value)}</span>;\n  }\n  if (typeof value === \"number\") {\n    return <span className={NUMBER_CLASS}>{String(value)}</span>;\n  }\n  // boolean\n  return <span className={BOOLEAN_CLASS}>{String(value)}</span>;\n}\n\ninterface JsonNodeProps {\n  /** The object key or array index label for this node (root has none). */\n  label?: string | number;\n  value: JsonValue;\n  depth: number;\n  /** Depth beyond which nodes start collapsed. */\n  collapsedDepth: number;\n  /** Global or parent expand/collapse pulse — overrides per-node seed when changed. */\n  forceOpen: JsonTreePulse | null;\n  /** True when this node is followed by a sibling (renders a trailing comma). */\n  trailingComma?: boolean;\n}\n\n/**\n * A single tree node. Containers (object/array) get their own collapse state,\n * seeded from `collapsedDepth` and re-seeded whenever the global expand/collapse\n * \"pulse\" (`forceOpen`) flips. Leaves render inline with their type color.\n */\nfunction JsonNode({\n  label,\n  value,\n  depth,\n  collapsedDepth,\n  forceOpen,\n  trailingComma,\n}: JsonNodeProps) {\n  const seededOpen = forceOpen?.open ?? depth < collapsedDepth;\n  // `forceOpen` is the global pulse: when the user hits expand/collapse all we\n  // flip every node, but per-node toggles still win afterward.\n  const [openState, setOpenState] = useState<{\n    forceOpen: JsonTreePulse | null;\n    open: boolean;\n  }>({ forceOpen, open: seededOpen });\n  const [subtreePulse, setSubtreePulse] = useState<JsonTreePulse | null>(null);\n\n  let open = openState.open;\n  if (forceOpen !== openState.forceOpen) {\n    open = forceOpen?.open ?? openState.open;\n    setOpenState({ forceOpen, open });\n  }\n\n  const handleToggle = (event: ReactMouseEvent<HTMLButtonElement>) => {\n    const nextOpen = !open;\n    setOpenState((prev) => ({ ...prev, open: nextOpen }));\n    if (event.altKey) {\n      setSubtreePulse((prev) => ({\n        open: nextOpen,\n        nonce: (prev?.nonce ?? 0) + 1,\n      }));\n    } else {\n      setSubtreePulse(null);\n    }\n  };\n\n  const keyEl =\n    label !== undefined ? (\n      <>\n        <span className={KEY_CLASS}>\n          {typeof label === \"number\" ? label : JSON.stringify(label)}\n        </span>\n        <span className={PUNCT_CLASS}>: </span>\n      </>\n    ) : null;\n\n  if (!isContainer(value)) {\n    return (\n      <div className=\"flex items-start py-0.5 leading-relaxed\">\n        <span className=\"select-none whitespace-pre\">{keyEl}</span>\n        <LeafValue value={value} />\n        {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(value);\n  const entries: Array<[string | number, JsonValue]> = isArray\n    ? (value as JsonValue[]).map((item, index) => [index, item])\n    : Object.entries(value as JsonObject);\n  const openBrace = isArray ? \"[\" : \"{\";\n  const closeBrace = isArray ? \"]\" : \"}\";\n  const empty = entries.length === 0;\n  const childForceOpen = subtreePulse ?? forceOpen;\n  const childPulseNonce = childForceOpen?.nonce ?? 0;\n\n  return (\n    <div className=\"leading-relaxed\">\n      <button\n        type=\"button\"\n        data-plan-interactive\n        aria-expanded={open}\n        disabled={empty}\n        onClick={handleToggle}\n        className={cn(\n          \"group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors\",\n          !empty && \"hover:bg-accent/40\",\n          empty && \"cursor-default\",\n        )}\n      >\n        <IconChevronRight\n          className={cn(\n            \"mt-1 size-3.5 shrink-0 text-plan-muted transition-transform\",\n            open && \"rotate-90\",\n            empty && \"opacity-0\",\n          )}\n        />\n        <span className=\"min-w-0 whitespace-pre-wrap break-words\">\n          {keyEl}\n          <span className={PUNCT_CLASS}>{openBrace}</span>\n          {!open && !empty && (\n            <span className=\"ml-1 text-plan-muted\">\n              {containerSummary(value)}\n            </span>\n          )}\n          {(!open || empty) && (\n            <span className={PUNCT_CLASS}>\n              {empty ? \"\" : \"…\"}\n              {closeBrace}\n              {trailingComma ? \",\" : \"\"}\n            </span>\n          )}\n        </span>\n      </button>\n\n      {open && !empty && (\n        <>\n          {/* Indent guide: a subtle vertical rule marks the nesting level. */}\n          <div className=\"ml-[7px] border-l border-plan-line pl-3.5\">\n            {entries.map(([entryKey, entryValue], index) => (\n              <JsonNode\n                key={`${String(entryKey)}:${childPulseNonce}`}\n                label={entryKey}\n                value={entryValue}\n                depth={depth + 1}\n                collapsedDepth={collapsedDepth}\n                forceOpen={childForceOpen}\n                trailingComma={index < entries.length - 1}\n              />\n            ))}\n          </div>\n          <div className=\"flex items-start\">\n            {/* Align the closing brace under the chevron column. */}\n            <span className=\"ml-[18px] whitespace-pre\">\n              <span className={PUNCT_CLASS}>{closeBrace}</span>\n              {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── Read (collapsible devtools tree) ──────────────────────────────────────── */\n\n/**\n * Read-only renderer for a `json-explorer` block. Parses `data.json` defensively\n * and renders the collapsible tree; on a parse error it shows the raw payload in\n * a monospace block plus the error (never throws). An \"Expand all / Collapse\n * all\" control toggles every node at once via a global pulse counter.\n */\nexport function JsonExplorerRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<JsonExplorerData>) {\n  const heading = data.title ?? title;\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {heading && <div className=\"plan-block-label\">{heading}</div>}\n      <JsonExplorerSurface data={data} />\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\nexport function JsonExplorerSurface({\n  data,\n  className,\n  label = \"JSON\",\n}: {\n  data: Pick<JsonExplorerData, \"json\" | \"collapsedDepth\">;\n  className?: string;\n  label?: string;\n}) {\n  const parsed = useMemo(() => parseJson(data.json), [data.json]);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n  // `pulse` carries a boolean (expand/collapse) plus a nonce so repeated clicks\n  // of the same action still re-fire the reseed in each node.\n  const [pulse, setPulse] = useState<{ open: boolean; nonce: number } | null>(\n    null,\n  );\n\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-xl border border-plan-line bg-plan-code\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5\">\n        <span className=\"font-mono text-xs uppercase tracking-wide text-plan-muted\">\n          {label}\n        </span>\n        {parsed.ok && isContainer(parsed.value as JsonValue) && (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: true,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Expand all\n            </button>\n            <span className=\"text-plan-muted\">·</span>\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: false,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Collapse all\n            </button>\n          </div>\n        )}\n      </div>\n      <div className=\"overflow-auto px-3 py-2.5 font-mono [font-size:var(--plan-code-size)] text-plan-code-text\">\n        {parsed.ok ? (\n          <JsonNode\n            // Remount the whole tree when the global pulse fires so every node\n            // re-seeds from the new open/closed state cleanly.\n            key={pulse?.nonce ?? 0}\n            value={parsed.value as JsonValue}\n            depth={0}\n            collapsedDepth={collapsedDepth}\n            forceOpen={pulse}\n          />\n        ) : (\n          <div className=\"space-y-2\">\n            <pre className=\"overflow-auto whitespace-pre-wrap break-words text-plan-code-text\">\n              {data.json || \"—\"}\n            </pre>\n            <p className=\"text-xs text-red-600 dark:text-red-300\">\n              Could not parse JSON: {parsed.error}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ── Edit (panel form) ─────────────────────────────────────────────────────── */\n\n/**\n * Panel editor for a `json-explorer` block: a monospace textarea bound to the\n * raw `json`, a \"Format\" button that pretty-prints via `JSON.parse` →\n * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never\n * `window.alert`), an auto-expand depth picker/input, and a `title` input.\n * Renders BARE content (no `<section>`); the registry's panel surface supplies\n * the popover chrome.\n */\nexport function JsonExplorerEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<JsonExplorerData>) {\n  const jsonId = useId();\n  const titleId = useId();\n  const depthId = useId();\n  const [formatError, setFormatError] = useState<string | null>(null);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n\n  const setCollapsedDepth = (value: number) => {\n    onChange({ ...data, collapsedDepth: clampCollapsedDepth(value) });\n  };\n\n  const handleFormat = () => {\n    try {\n      const formatted = JSON.stringify(JSON.parse(data.json), null, 2);\n      setFormatError(null);\n      onChange({ ...data, json: formatted });\n    } catch (error) {\n      setFormatError(\n        error instanceof Error ? error.message : \"Invalid JSON — cannot format\",\n      );\n    }\n  };\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={titleId}>Title</DevLabel>\n        <DevInput\n          id={titleId}\n          value={data.title ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({ ...data, title: event.target.value || undefined })\n          }\n          placeholder=\"Optional heading\"\n        />\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel htmlFor={jsonId}>JSON payload</DevLabel>\n          {editable && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={handleFormat}\n              className=\"inline-flex h-7 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            >\n              Format\n            </button>\n          )}\n        </div>\n        <DevTextarea\n          id={jsonId}\n          value={data.json}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) => {\n            setFormatError(null);\n            onChange({ ...data, json: event.target.value });\n          }}\n          className=\"min-h-56 font-mono text-xs\"\n          placeholder={'{\\n  \"id\": \"abc123\",\\n  \"active\": true\\n}'}\n        />\n        {formatError && (\n          <p className=\"text-xs text-red-600 dark:text-red-300\">\n            {formatError}\n          </p>\n        )}\n        <p className=\"text-xs text-muted-foreground\">\n          Raw JSON text is the source of truth. Use Format to pretty-print it.\n        </p>\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={depthId}>Auto expand</DevLabel>\n        <div className=\"flex flex-wrap gap-1\">\n          {JSON_EXPLORER_DEPTH_PRESETS.map((preset) => {\n            const active = collapsedDepth === preset.value;\n            return (\n              <button\n                key={preset.label}\n                type=\"button\"\n                data-plan-interactive\n                aria-pressed={active}\n                disabled={!editable}\n                onClick={() => setCollapsedDepth(preset.value)}\n                className={cn(\n                  \"inline-flex h-7 items-center justify-center rounded-md border px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n                  active\n                    ? \"border-primary bg-primary text-primary-foreground\"\n                    : \"border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground\",\n                )}\n              >\n                {preset.label}\n              </button>\n            );\n          })}\n        </div>\n        <DevInput\n          id={depthId}\n          type=\"number\"\n          min={0}\n          max={JSON_EXPLORER_MAX_COLLAPSED_DEPTH}\n          value={collapsedDepth}\n          readOnly={!editable}\n          onChange={(event) => {\n            const next = Number.parseInt(event.target.value, 10);\n            onChange({\n              ...data,\n              collapsedDepth: Number.isFinite(next)\n                ? clampCollapsedDepth(next)\n                : undefined,\n            });\n          }}\n          className=\"w-24\"\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Levels open automatically. Use 0 to start collapsed,{\" \"}\n          {JSON_EXPLORER_MAX_COLLAPSED_DEPTH} for all.\n        </p>\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"JsonExplorerBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/JsonExplorerBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useId,\n  useMemo,\n  useState,\n  type MouseEvent as ReactMouseEvent,\n} from \"react\";\nimport { IconChevronRight } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport {\n  JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH,\n  JSON_EXPLORER_MAX_COLLAPSED_DEPTH,\n  type JsonExplorerData,\n} from \"./json-explorer.config.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `json-explorer` block — a browser-devtools /\n * Postman-style collapsible JSON tree. The raw JSON TEXT (`data.json`) is the\n * source of truth; the Read renderer parses it defensively and, on any parse\n * error, falls back to the raw text plus the error message (it never throws).\n * Lives in core so any app can register the dev-doc block (no shadcn import).\n *\n * Progressive disclosure is the whole point: object/array nodes show a chevron\n * and a one-line summary (\"{…} 3 keys\" / \"[…] 5 items\"); each node tracks its\n * own open/closed state (`useState`) seeded by `collapsedDepth` so deep payloads\n * stay scannable. Leaf values are type-colored (string = green, number = blue,\n * boolean = violet, null = muted); keys use a stable accent color; subtle indent\n * guide lines mark nesting.\n *\n * DARK/LIGHT: the plan editor toggles a `.dark` class on <html>. Every color\n * token — value types, keys, guide lines, chrome — uses Tailwind `dark:` variants\n * or the theme-aware plan CSS-var utilities, so the tree reads correctly in BOTH\n * modes (no hardcoded dark-only palette).\n */\n\n/* ── Theme-aware value-type color tokens ───────────────────────────────────── */\n\n/** String leaves: green in both modes. */\nconst STRING_CLASS = \"text-emerald-700 dark:text-emerald-300\";\n/** Number leaves: blue in both modes. */\nconst NUMBER_CLASS = \"text-blue-700 dark:text-blue-300\";\n/** Boolean leaves: violet in both modes. */\nconst BOOLEAN_CLASS = \"text-violet-700 dark:text-violet-300\";\n/** `null`/`undefined` leaves: muted (theme-aware plan var). */\nconst NULL_CLASS = \"text-plan-muted italic\";\n/** Object keys: a stable, saturated accent that reads in both modes. */\nconst KEY_CLASS = \"text-rose-700 dark:text-rose-300\";\n/** Structural punctuation (braces, brackets, commas, colons). */\nconst PUNCT_CLASS = \"text-plan-muted\";\n\nconst JSON_EXPLORER_DEPTH_PRESETS = [\n  { label: \"Off\", value: 0 },\n  { label: \"2 levels\", value: JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH },\n  { label: \"3 levels\", value: 3 },\n  { label: \"All\", value: JSON_EXPLORER_MAX_COLLAPSED_DEPTH },\n] as const;\n\nfunction clampCollapsedDepth(value: number): number {\n  return Math.max(0, Math.min(JSON_EXPLORER_MAX_COLLAPSED_DEPTH, value));\n}\n\ntype JsonValue =\n  | string\n  | number\n  | boolean\n  | null\n  | JsonValue[]\n  | { [key: string]: JsonValue };\ntype JsonObject = { [key: string]: JsonValue };\n\ninterface ParseResult {\n  ok: boolean;\n  value?: JsonValue;\n  error?: string;\n}\n\ninterface JsonTreePulse {\n  open: boolean;\n  nonce: number;\n}\n\nfunction parseJson(raw: string): ParseResult {\n  const trimmed = raw.trim();\n  if (!trimmed) {\n    return { ok: false, error: \"Empty payload — add some JSON to explore.\" };\n  }\n  try {\n    return { ok: true, value: JSON.parse(trimmed) as JsonValue };\n  } catch (error) {\n    return {\n      ok: false,\n      error: error instanceof Error ? error.message : \"Invalid JSON\",\n    };\n  }\n}\n\nfunction isContainer(value: JsonValue): value is JsonValue[] | JsonObject {\n  return value !== null && typeof value === \"object\";\n}\n\n/** One-line summary for a collapsed container, devtools style. */\nfunction containerSummary(value: JsonValue[] | JsonObject): string {\n  if (Array.isArray(value)) {\n    const count = value.length;\n    return `[…] ${count} ${count === 1 ? \"item\" : \"items\"}`;\n  }\n  const count = Object.keys(value).length;\n  return `{…} ${count} ${count === 1 ? \"key\" : \"keys\"}`;\n}\n\n/** Render a leaf (primitive) value with its type color. */\nfunction LeafValue({ value }: { value: string | number | boolean | null }) {\n  if (value === null) {\n    return <span className={NULL_CLASS}>null</span>;\n  }\n  if (typeof value === \"string\") {\n    return <span className={STRING_CLASS}>{JSON.stringify(value)}</span>;\n  }\n  if (typeof value === \"number\") {\n    return <span className={NUMBER_CLASS}>{String(value)}</span>;\n  }\n  // boolean\n  return <span className={BOOLEAN_CLASS}>{String(value)}</span>;\n}\n\ninterface JsonNodeProps {\n  /** The object key or array index label for this node (root has none). */\n  label?: string | number;\n  value: JsonValue;\n  depth: number;\n  /** Depth beyond which nodes start collapsed. */\n  collapsedDepth: number;\n  /** Global or parent expand/collapse pulse — overrides per-node seed when changed. */\n  forceOpen: JsonTreePulse | null;\n  /** True when this node is followed by a sibling (renders a trailing comma). */\n  trailingComma?: boolean;\n}\n\n/**\n * A single tree node. Containers (object/array) get their own collapse state,\n * seeded from `collapsedDepth` and re-seeded whenever the global expand/collapse\n * \"pulse\" (`forceOpen`) flips. Leaves render inline with their type color.\n */\nfunction JsonNode({\n  label,\n  value,\n  depth,\n  collapsedDepth,\n  forceOpen,\n  trailingComma,\n}: JsonNodeProps) {\n  const seededOpen = forceOpen?.open ?? depth < collapsedDepth;\n  // `forceOpen` is the global pulse: when the user hits expand/collapse all we\n  // flip every node, but per-node toggles still win afterward.\n  const [openState, setOpenState] = useState<{\n    forceOpen: JsonTreePulse | null;\n    open: boolean;\n  }>({ forceOpen, open: seededOpen });\n  const [subtreePulse, setSubtreePulse] = useState<JsonTreePulse | null>(null);\n\n  let open = openState.open;\n  if (forceOpen !== openState.forceOpen) {\n    open = forceOpen?.open ?? openState.open;\n    setOpenState({ forceOpen, open });\n  }\n\n  const handleToggle = (event: ReactMouseEvent<HTMLButtonElement>) => {\n    const nextOpen = !open;\n    setOpenState((prev) => ({ ...prev, open: nextOpen }));\n    if (event.altKey) {\n      setSubtreePulse((prev) => ({\n        open: nextOpen,\n        nonce: (prev?.nonce ?? 0) + 1,\n      }));\n    } else {\n      setSubtreePulse(null);\n    }\n  };\n\n  const keyEl =\n    label !== undefined ? (\n      <>\n        <span className={KEY_CLASS}>\n          {typeof label === \"number\" ? label : JSON.stringify(label)}\n        </span>\n        <span className={PUNCT_CLASS}>: </span>\n      </>\n    ) : null;\n\n  if (!isContainer(value)) {\n    return (\n      <div className=\"flex items-start py-0.5 leading-relaxed\">\n        <span className=\"select-none whitespace-pre\">{keyEl}</span>\n        <LeafValue value={value} />\n        {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n      </div>\n    );\n  }\n\n  const isArray = Array.isArray(value);\n  const entries: Array<[string | number, JsonValue]> = isArray\n    ? (value as JsonValue[]).map((item, index) => [index, item])\n    : Object.entries(value as JsonObject);\n  const openBrace = isArray ? \"[\" : \"{\";\n  const closeBrace = isArray ? \"]\" : \"}\";\n  const empty = entries.length === 0;\n  const childForceOpen = subtreePulse ?? forceOpen;\n  const childPulseNonce = childForceOpen?.nonce ?? 0;\n\n  return (\n    <div className=\"leading-relaxed\">\n      <button\n        type=\"button\"\n        data-plan-interactive\n        aria-expanded={open}\n        disabled={empty}\n        onClick={handleToggle}\n        className={cn(\n          \"group flex w-full items-start gap-1 rounded py-0.5 text-left transition-colors\",\n          !empty && \"hover:bg-accent/40\",\n          empty && \"cursor-default\",\n        )}\n      >\n        <IconChevronRight\n          className={cn(\n            \"mt-1 size-3.5 shrink-0 text-plan-muted transition-transform\",\n            open && \"rotate-90\",\n            empty && \"opacity-0\",\n          )}\n        />\n        <span className=\"min-w-0 whitespace-pre-wrap break-words\">\n          {keyEl}\n          <span className={PUNCT_CLASS}>{openBrace}</span>\n          {!open && !empty && (\n            <span className=\"ml-1 text-plan-muted\">\n              {containerSummary(value)}\n            </span>\n          )}\n          {(!open || empty) && (\n            <span className={PUNCT_CLASS}>\n              {empty ? \"\" : \"…\"}\n              {closeBrace}\n              {trailingComma ? \",\" : \"\"}\n            </span>\n          )}\n        </span>\n      </button>\n\n      {open && !empty && (\n        <>\n          {/* Indent guide: a subtle vertical rule marks the nesting level. */}\n          <div className=\"ml-[7px] border-l border-plan-line pl-3.5\">\n            {entries.map(([entryKey, entryValue], index) => (\n              <JsonNode\n                key={`${String(entryKey)}:${childPulseNonce}`}\n                label={entryKey}\n                value={entryValue}\n                depth={depth + 1}\n                collapsedDepth={collapsedDepth}\n                forceOpen={childForceOpen}\n                trailingComma={index < entries.length - 1}\n              />\n            ))}\n          </div>\n          <div className=\"flex items-start\">\n            {/* Align the closing brace under the chevron column. */}\n            <span className=\"ml-[18px] whitespace-pre\">\n              <span className={PUNCT_CLASS}>{closeBrace}</span>\n              {trailingComma && <span className={PUNCT_CLASS}>,</span>}\n            </span>\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n\n/* ── Read (collapsible devtools tree) ──────────────────────────────────────── */\n\n/**\n * Read-only renderer for a `json-explorer` block. Parses `data.json` defensively\n * and renders the collapsible tree; on a parse error it shows the raw payload in\n * a monospace block plus the error (never throws). An \"Expand all / Collapse\n * all\" control toggles every node at once via a global pulse counter.\n */\nexport function JsonExplorerRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<JsonExplorerData>) {\n  const heading = data.title ?? title;\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {heading && <div className=\"plan-block-label\">{heading}</div>}\n      <JsonExplorerSurface data={data} />\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\nexport function JsonExplorerSurface({\n  data,\n  className,\n  label = \"JSON\",\n}: {\n  data: Pick<JsonExplorerData, \"json\" | \"collapsedDepth\">;\n  className?: string;\n  label?: string;\n}) {\n  const parsed = useMemo(() => parseJson(data.json), [data.json]);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n  // `pulse` carries a boolean (expand/collapse) plus a nonce so repeated clicks\n  // of the same action still re-fire the reseed in each node.\n  const [pulse, setPulse] = useState<{ open: boolean; nonce: number } | null>(\n    null,\n  );\n\n  return (\n    <div\n      className={cn(\n        \"overflow-hidden rounded-xl border border-plan-line bg-plan-code\",\n        className,\n      )}\n    >\n      <div className=\"flex items-center justify-between gap-2 border-b border-plan-line px-3 py-1.5\">\n        <span className=\"font-mono text-xs uppercase tracking-wide text-plan-muted\">\n          {label}\n        </span>\n        {parsed.ok && isContainer(parsed.value as JsonValue) && (\n          <div className=\"flex items-center gap-1\">\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: true,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Expand all\n            </button>\n            <span className=\"text-plan-muted\">·</span>\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={() =>\n                setPulse((prev) => ({\n                  open: false,\n                  nonce: (prev?.nonce ?? 0) + 1,\n                }))\n              }\n              className=\"rounded px-1.5 py-0.5 text-xs text-plan-muted transition-colors hover:bg-accent/60 hover:text-plan-text\"\n            >\n              Collapse all\n            </button>\n          </div>\n        )}\n      </div>\n      <div\n        className=\"overflow-auto px-3 py-2.5 font-mono [font-size:var(--plan-doc-code-size)] text-plan-code-text\"\n        data-code-surface\n      >\n        {parsed.ok ? (\n          <JsonNode\n            // Remount the whole tree when the global pulse fires so every node\n            // re-seeds from the new open/closed state cleanly.\n            key={pulse?.nonce ?? 0}\n            value={parsed.value as JsonValue}\n            depth={0}\n            collapsedDepth={collapsedDepth}\n            forceOpen={pulse}\n          />\n        ) : (\n          <div className=\"space-y-2\">\n            <pre className=\"overflow-auto whitespace-pre-wrap break-words text-plan-code-text\">\n              {data.json || \"—\"}\n            </pre>\n            <p className=\"text-xs text-red-600 dark:text-red-300\">\n              Could not parse JSON: {parsed.error}\n            </p>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\n/* ── Edit (panel form) ─────────────────────────────────────────────────────── */\n\n/**\n * Panel editor for a `json-explorer` block: a monospace textarea bound to the\n * raw `json`, a \"Format\" button that pretty-prints via `JSON.parse` →\n * `JSON.stringify(_, null, 2)` (guarded — shows an INLINE error, never\n * `window.alert`), an auto-expand depth picker/input, and a `title` input.\n * Renders BARE content (no `<section>`); the registry's panel surface supplies\n * the popover chrome.\n */\nexport function JsonExplorerEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<JsonExplorerData>) {\n  const jsonId = useId();\n  const titleId = useId();\n  const depthId = useId();\n  const [formatError, setFormatError] = useState<string | null>(null);\n  const collapsedDepth =\n    data.collapsedDepth ?? JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH;\n\n  const setCollapsedDepth = (value: number) => {\n    onChange({ ...data, collapsedDepth: clampCollapsedDepth(value) });\n  };\n\n  const handleFormat = () => {\n    try {\n      const formatted = JSON.stringify(JSON.parse(data.json), null, 2);\n      setFormatError(null);\n      onChange({ ...data, json: formatted });\n    } catch (error) {\n      setFormatError(\n        error instanceof Error ? error.message : \"Invalid JSON — cannot format\",\n      );\n    }\n  };\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={titleId}>Title</DevLabel>\n        <DevInput\n          id={titleId}\n          value={data.title ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({ ...data, title: event.target.value || undefined })\n          }\n          placeholder=\"Optional heading\"\n        />\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel htmlFor={jsonId}>JSON payload</DevLabel>\n          {editable && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={handleFormat}\n              className=\"inline-flex h-7 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md border border-input bg-background px-2 text-xs font-medium ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\"\n            >\n              Format\n            </button>\n          )}\n        </div>\n        <DevTextarea\n          id={jsonId}\n          value={data.json}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) => {\n            setFormatError(null);\n            onChange({ ...data, json: event.target.value });\n          }}\n          className=\"min-h-56 font-mono text-xs\"\n          placeholder={'{\\n  \"id\": \"abc123\",\\n  \"active\": true\\n}'}\n        />\n        {formatError && (\n          <p className=\"text-xs text-red-600 dark:text-red-300\">\n            {formatError}\n          </p>\n        )}\n        <p className=\"text-xs text-muted-foreground\">\n          Raw JSON text is the source of truth. Use Format to pretty-print it.\n        </p>\n      </div>\n\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={depthId}>Auto expand</DevLabel>\n        <div className=\"flex flex-wrap gap-1\">\n          {JSON_EXPLORER_DEPTH_PRESETS.map((preset) => {\n            const active = collapsedDepth === preset.value;\n            return (\n              <button\n                key={preset.label}\n                type=\"button\"\n                data-plan-interactive\n                aria-pressed={active}\n                disabled={!editable}\n                onClick={() => setCollapsedDepth(preset.value)}\n                className={cn(\n                  \"inline-flex h-7 items-center justify-center rounded-md border px-2 text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n                  active\n                    ? \"border-primary bg-primary text-primary-foreground\"\n                    : \"border-input bg-background text-muted-foreground hover:bg-accent hover:text-accent-foreground\",\n                )}\n              >\n                {preset.label}\n              </button>\n            );\n          })}\n        </div>\n        <DevInput\n          id={depthId}\n          type=\"number\"\n          min={0}\n          max={JSON_EXPLORER_MAX_COLLAPSED_DEPTH}\n          value={collapsedDepth}\n          readOnly={!editable}\n          onChange={(event) => {\n            const next = Number.parseInt(event.target.value, 10);\n            onChange({\n              ...data,\n              collapsedDepth: Number.isFinite(next)\n                ? clampCollapsedDepth(next)\n                : undefined,\n            });\n          }}\n          className=\"w-24\"\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Levels open automatically. Use 0 to start collapsed,{\" \"}\n          {JSON_EXPLORER_MAX_COLLAPSED_DEPTH} for all.\n        </p>\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/MermaidBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AA4OvD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,WAAW,CAAC,2CAW7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwC7B"}
+{"version":3,"file":"MermaidBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAoRvD;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GACR,EAAE,cAAc,CAAC,WAAW,CAAC,2CAW7B;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,WAAW,CAAC,2CAwC7B"}

package/dist/client/blocks/library/MermaidBlock.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useId, useMemo, useState } from "react";
+import { IconArrowsMaximize } from "@tabler/icons-react";
 import { DevInput, DevLabel } from "./dev-doc-ui.js";
+import { DiagramLightbox } from "./diagram.js";
 function errorMessage(error) {
     return error instanceof Error ? error.message : "Failed to render diagram";
 }
@@ -68,12 +70,26 @@ function useIsDark() {
     }, []);
     return isDark;
 }
+/**
+ * Inject a rendered Mermaid/Excalidraw SVG string. Shared by the inline render
+ * and the expand lightbox so the enlarged view shows the exact same SVG; the
+ * lightbox passes `enlarged` so the SVG stretches to fill the wider modal
+ * (`max-w-5xl`) instead of staying at its intrinsic inline size.
+ */
+function MermaidSvg({ svg, enlarged }) {
+    return (_jsx("div", { className: enlarged
+            ? "flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:w-full [&_svg]:max-w-full"
+            : "mt-2 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full", 
+        // Excalidraw and Mermaid output are sanitized before injection.
+        dangerouslySetInnerHTML: { __html: svg } }));
+}
 function MermaidDiagram({ source, idSeed, }) {
     const isDark = useIsDark();
     // Only render the diagram after mount: `mermaid` is client-only and SSR has no
     // DOM for it to measure against.
     const [mounted, setMounted] = useState(false);
     const [state, setState] = useState({});
+    const [expanded, setExpanded] = useState(false);
     // A DOM-id-safe, stable-per-block render id. Mermaid requires a valid CSS id.
     const renderId = useMemo(() => `mermaid-${idSeed.replace(/[^a-zA-Z0-9_-]/g, "-")}`, [idSeed]);
     useEffect(() => {
@@ -130,9 +146,12 @@ function MermaidDiagram({ source, idSeed, }) {
     if (!state.svg) {
         return (_jsx("div", { className: "mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted", children: "Add a diagram definition to render it." }));
     }
-    return (_jsx("div", { className: "mt-2 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full", 
-        // Excalidraw and Mermaid output are sanitized before injection.
-        dangerouslySetInnerHTML: { __html: state.svg } }));
+    // Hover-revealed top-right expand button + shared lightbox, matching the
+    // DiagramBlock affordance exactly (same icon, reveal-on-hover/focus, Escape +
+    // backdrop close via the reused `DiagramLightbox`). The enlarged view re-shows
+    // the same rendered SVG scaled to fit the wider modal.
+    const svg = state.svg;
+    return (_jsxs("div", { className: "group/mermaid relative", children: [_jsx(MermaidSvg, { svg: svg }), _jsx("button", { type: "button", "data-plan-interactive": true, onClick: () => setExpanded(true), "aria-label": "Expand diagram", title: "Expand diagram", className: "an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100", children: _jsx(IconArrowsMaximize, { className: "size-4" }) }), expanded ? (_jsx(DiagramLightbox, { onClose: () => setExpanded(false), children: _jsx(MermaidSvg, { svg: svg, enlarged: true }) })) : null] }));
 }
 /**
  * Read-only renderer for a `mermaid` block. Wraps the diagram in the standard

package/dist/client/blocks/library/MermaidBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"MermaidBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useState } from \"react\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type { MermaidData } from \"./mermaid.config.js\";\nimport { DevInput, DevLabel } from \"./dev-doc-ui.js\";\n\n/**\n * Read + Edit renderers for a `mermaid` block — a Mermaid diagram definition\n * (flowchart, sequence, etc.) edited as raw text and rendered as an\n * Excalidraw-style SVG so it matches the plan's hand-drawn / sketchy house\n * style.\n * Lives in core so any app can register the dev-doc block; it stays app-agnostic\n * (no shadcn / next-themes import).\n *\n * The Mermaid and Excalidraw runtimes are browser-only,\n * so the Read renderer SSR-guards: it renders a lightweight placeholder until a\n * `useEffect` confirms it is mounted, then dynamically imports\n * `@excalidraw/mermaid-to-excalidraw` + `@excalidraw/excalidraw` and injects\n * the exported SVG. If Excalidraw conversion fails, it falls back to Mermaid's\n * hand-drawn renderer. Parse errors never throw; they show the raw source and\n * the error message.\n *\n * Dark mode: the plan editor toggles a `.dark` class on <html>. The Read renderer\n * reads `document.documentElement.classList.contains(\"dark\")` (re-checking on a\n * `MutationObserver` of the html class) and re-renders the diagram with matching\n * light/dark export settings.\n */\n\ninterface MermaidRenderState {\n  svg?: string;\n  error?: string;\n}\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : \"Failed to render diagram\";\n}\n\nfunction sanitizeSvgMarkup(svg: string): string {\n  if (typeof DOMParser === \"undefined\") return svg;\n  const doc = new DOMParser().parseFromString(svg, \"image/svg+xml\");\n  doc\n    .querySelectorAll(\"script, foreignObject\")\n    .forEach((node) => node.remove());\n  for (const element of Array.from(doc.querySelectorAll(\"*\"))) {\n    for (const attr of Array.from(element.attributes)) {\n      const name = attr.name.toLowerCase();\n      const value = attr.value.trim().toLowerCase();\n      if (\n        name.startsWith(\"on\") ||\n        ((name === \"href\" || name.endsWith(\":href\")) &&\n          value.startsWith(\"javascript:\"))\n      ) {\n        element.removeAttribute(attr.name);\n      }\n    }\n  }\n  return doc.documentElement.outerHTML;\n}\n\nasync function renderExcalidrawSvg(\n  source: string,\n  isDark: boolean,\n): Promise<string> {\n  const [{ parseMermaidToExcalidraw }, excalidraw] = await Promise.all([\n    import(\"@excalidraw/mermaid-to-excalidraw\") as Promise<{\n      parseMermaidToExcalidraw: (source: string) => Promise<{\n        elements: unknown[];\n        files?: Record<string, unknown>;\n      }>;\n    }>,\n    import(\"@excalidraw/excalidraw\") as Promise<{\n      convertToExcalidrawElements: (elements: unknown[]) => unknown[];\n      exportToSvg: (options: {\n        elements: unknown[];\n        appState: {\n          theme: \"dark\" | \"light\";\n          viewBackgroundColor: string;\n          exportWithDarkMode: boolean;\n        };\n        files: Record<string, unknown>;\n      }) => Promise<{ outerHTML: string }>;\n    }>,\n  ]);\n  const { elements, files } = await parseMermaidToExcalidraw(source);\n  const excalidrawElements = excalidraw.convertToExcalidrawElements(elements);\n  const svg = await excalidraw.exportToSvg({\n    elements: excalidrawElements,\n    appState: {\n      theme: isDark ? \"dark\" : \"light\",\n      viewBackgroundColor: \"transparent\",\n      exportWithDarkMode: isDark,\n    },\n    files: files ?? {},\n  });\n  return sanitizeSvgMarkup(svg.outerHTML);\n}\n\nasync function renderMermaidSvg(\n  source: string,\n  id: string,\n  isDark: boolean,\n): Promise<string> {\n  const mermaid = (\n    (await import(\"mermaid\")) as {\n      default: {\n        initialize: (config: Record<string, unknown>) => void;\n        render: (id: string, source: string) => Promise<{ svg: string }>;\n      };\n    }\n  ).default;\n  mermaid.initialize({\n    startOnLoad: false,\n    securityLevel: \"strict\",\n    look: \"handDrawn\",\n    theme: isDark ? \"dark\" : \"neutral\",\n  });\n  const { svg } = await mermaid.render(id, source);\n  return sanitizeSvgMarkup(svg);\n}\n\n/** Read the live dark-mode flag from the document root (next-themes-free). */\nfunction useIsDark(): boolean {\n  const [isDark, setIsDark] = useState(false);\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const root = document.documentElement;\n    const read = () => setIsDark(root.classList.contains(\"dark\"));\n    read();\n    const observer = new MutationObserver(read);\n    observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n    return () => observer.disconnect();\n  }, []);\n  return isDark;\n}\n\nfunction MermaidDiagram({\n  source,\n  idSeed,\n}: {\n  source: string;\n  idSeed: string;\n}) {\n  const isDark = useIsDark();\n  // Only render the diagram after mount: `mermaid` is client-only and SSR has no\n  // DOM for it to measure against.\n  const [mounted, setMounted] = useState(false);\n  const [state, setState] = useState<MermaidRenderState>({});\n\n  // A DOM-id-safe, stable-per-block render id. Mermaid requires a valid CSS id.\n  const renderId = useMemo(\n    () => `mermaid-${idSeed.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`,\n    [idSeed],\n  );\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    let cancelled = false;\n    const trimmed = source.trim();\n    if (!trimmed) {\n      setState({});\n      return;\n    }\n    (async () => {\n      try {\n        const svg = await renderExcalidrawSvg(trimmed, isDark);\n        if (!cancelled) setState({ svg });\n      } catch (excalidrawError) {\n        try {\n          // Fallback keeps diagrams usable if a Mermaid feature is not supported\n          // by the Excalidraw converter in a given host app.\n          const svg = await renderMermaidSvg(\n            trimmed,\n            `${renderId}-${isDark ? \"d\" : \"l\"}`,\n            isDark,\n          );\n          if (!cancelled) setState({ svg });\n        } catch (mermaidError) {\n          const excalidrawMessage = errorMessage(excalidrawError);\n          const mermaidMessage = errorMessage(mermaidError);\n          if (!cancelled) {\n            setState({\n              error:\n                excalidrawMessage === mermaidMessage\n                  ? mermaidMessage\n                  : `Excalidraw: ${excalidrawMessage}; Mermaid fallback: ${mermaidMessage}`,\n            });\n          }\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n    // Re-render when the source OR the resolved theme changes so toggling\n    // dark/light updates the diagram live.\n  }, [mounted, source, isDark, renderId]);\n\n  if (!mounted) {\n    return (\n      <div className=\"mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted\">\n        Loading diagram…\n      </div>\n    );\n  }\n\n  if (state.error) {\n    return (\n      <div className=\"mt-2 space-y-2\">\n        <pre className=\"overflow-auto rounded-lg border border-plan-line bg-plan-code px-3 py-2 font-mono [font-size:var(--plan-code-size)] text-plan-code-text\">\n          {source}\n        </pre>\n        <p className=\"text-sm text-plan-muted\">\n          Could not render diagram: {state.error}\n        </p>\n      </div>\n    );\n  }\n\n  if (!state.svg) {\n    return (\n      <div className=\"mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted\">\n        Add a diagram definition to render it.\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className=\"mt-2 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full\"\n      // Excalidraw and Mermaid output are sanitized before injection.\n      dangerouslySetInnerHTML={{ __html: state.svg }}\n    />\n  );\n}\n\n/**\n * Read-only renderer for a `mermaid` block. Wraps the diagram in the standard\n * titled `plan-block` section + an optional muted caption, matching the plan\n * house style.\n */\nexport function MermaidRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<MermaidData>) {\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      <MermaidDiagram source={data.source} idSeed={blockId} />\n      {data.caption && (\n        <p className=\"mt-3 text-sm text-plan-muted\">{data.caption}</p>\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/**\n * Edit renderer (panel surface) for a `mermaid` block: a monospace textarea for\n * the diagram source plus an optional caption input. Both commit immediately via\n * `onChange`. `editSurface: \"panel\"` means the registry renders the `Read` view\n * with a corner edit button that opens this form in the plan's shared popover, so\n * this renders only the form (the popover supplies the chrome and title).\n */\nexport function MermaidEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<MermaidData>) {\n  const sourceId = useId();\n  const captionId = useId();\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={sourceId}>Diagram source</DevLabel>\n        <textarea\n          id={sourceId}\n          value={data.source}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) =>\n            onChange({ ...data, source: event.target.value })\n          }\n          className=\"flex min-h-56 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder={\"flowchart TD\\n  A[Start] --> B{Decision}\"}\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Mermaid syntax — flowcharts, sequence diagrams, and more.\n        </p>\n      </div>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={captionId}>Caption</DevLabel>\n        <DevInput\n          id={captionId}\n          value={data.caption ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({\n              ...data,\n              caption: event.target.value || undefined,\n            })\n          }\n          placeholder=\"Optional caption\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"MermaidBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/MermaidBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useMemo, useState } from \"react\";\nimport { IconArrowsMaximize } from \"@tabler/icons-react\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type { MermaidData } from \"./mermaid.config.js\";\nimport { DevInput, DevLabel } from \"./dev-doc-ui.js\";\nimport { DiagramLightbox } from \"./diagram.js\";\n\n/**\n * Read + Edit renderers for a `mermaid` block — a Mermaid diagram definition\n * (flowchart, sequence, etc.) edited as raw text and rendered as an\n * Excalidraw-style SVG so it matches the plan's hand-drawn / sketchy house\n * style.\n * Lives in core so any app can register the dev-doc block; it stays app-agnostic\n * (no shadcn / next-themes import).\n *\n * The Mermaid and Excalidraw runtimes are browser-only,\n * so the Read renderer SSR-guards: it renders a lightweight placeholder until a\n * `useEffect` confirms it is mounted, then dynamically imports\n * `@excalidraw/mermaid-to-excalidraw` + `@excalidraw/excalidraw` and injects\n * the exported SVG. If Excalidraw conversion fails, it falls back to Mermaid's\n * hand-drawn renderer. Parse errors never throw; they show the raw source and\n * the error message.\n *\n * Dark mode: the plan editor toggles a `.dark` class on <html>. The Read renderer\n * reads `document.documentElement.classList.contains(\"dark\")` (re-checking on a\n * `MutationObserver` of the html class) and re-renders the diagram with matching\n * light/dark export settings.\n */\n\ninterface MermaidRenderState {\n  svg?: string;\n  error?: string;\n}\n\nfunction errorMessage(error: unknown): string {\n  return error instanceof Error ? error.message : \"Failed to render diagram\";\n}\n\nfunction sanitizeSvgMarkup(svg: string): string {\n  if (typeof DOMParser === \"undefined\") return svg;\n  const doc = new DOMParser().parseFromString(svg, \"image/svg+xml\");\n  doc\n    .querySelectorAll(\"script, foreignObject\")\n    .forEach((node) => node.remove());\n  for (const element of Array.from(doc.querySelectorAll(\"*\"))) {\n    for (const attr of Array.from(element.attributes)) {\n      const name = attr.name.toLowerCase();\n      const value = attr.value.trim().toLowerCase();\n      if (\n        name.startsWith(\"on\") ||\n        ((name === \"href\" || name.endsWith(\":href\")) &&\n          value.startsWith(\"javascript:\"))\n      ) {\n        element.removeAttribute(attr.name);\n      }\n    }\n  }\n  return doc.documentElement.outerHTML;\n}\n\nasync function renderExcalidrawSvg(\n  source: string,\n  isDark: boolean,\n): Promise<string> {\n  const [{ parseMermaidToExcalidraw }, excalidraw] = await Promise.all([\n    import(\"@excalidraw/mermaid-to-excalidraw\") as Promise<{\n      parseMermaidToExcalidraw: (source: string) => Promise<{\n        elements: unknown[];\n        files?: Record<string, unknown>;\n      }>;\n    }>,\n    import(\"@excalidraw/excalidraw\") as Promise<{\n      convertToExcalidrawElements: (elements: unknown[]) => unknown[];\n      exportToSvg: (options: {\n        elements: unknown[];\n        appState: {\n          theme: \"dark\" | \"light\";\n          viewBackgroundColor: string;\n          exportWithDarkMode: boolean;\n        };\n        files: Record<string, unknown>;\n      }) => Promise<{ outerHTML: string }>;\n    }>,\n  ]);\n  const { elements, files } = await parseMermaidToExcalidraw(source);\n  const excalidrawElements = excalidraw.convertToExcalidrawElements(elements);\n  const svg = await excalidraw.exportToSvg({\n    elements: excalidrawElements,\n    appState: {\n      theme: isDark ? \"dark\" : \"light\",\n      viewBackgroundColor: \"transparent\",\n      exportWithDarkMode: isDark,\n    },\n    files: files ?? {},\n  });\n  return sanitizeSvgMarkup(svg.outerHTML);\n}\n\nasync function renderMermaidSvg(\n  source: string,\n  id: string,\n  isDark: boolean,\n): Promise<string> {\n  const mermaid = (\n    (await import(\"mermaid\")) as {\n      default: {\n        initialize: (config: Record<string, unknown>) => void;\n        render: (id: string, source: string) => Promise<{ svg: string }>;\n      };\n    }\n  ).default;\n  mermaid.initialize({\n    startOnLoad: false,\n    securityLevel: \"strict\",\n    look: \"handDrawn\",\n    theme: isDark ? \"dark\" : \"neutral\",\n  });\n  const { svg } = await mermaid.render(id, source);\n  return sanitizeSvgMarkup(svg);\n}\n\n/** Read the live dark-mode flag from the document root (next-themes-free). */\nfunction useIsDark(): boolean {\n  const [isDark, setIsDark] = useState(false);\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    const root = document.documentElement;\n    const read = () => setIsDark(root.classList.contains(\"dark\"));\n    read();\n    const observer = new MutationObserver(read);\n    observer.observe(root, { attributes: true, attributeFilter: [\"class\"] });\n    return () => observer.disconnect();\n  }, []);\n  return isDark;\n}\n\n/**\n * Inject a rendered Mermaid/Excalidraw SVG string. Shared by the inline render\n * and the expand lightbox so the enlarged view shows the exact same SVG; the\n * lightbox passes `enlarged` so the SVG stretches to fill the wider modal\n * (`max-w-5xl`) instead of staying at its intrinsic inline size.\n */\nfunction MermaidSvg({ svg, enlarged }: { svg: string; enlarged?: boolean }) {\n  return (\n    <div\n      className={\n        enlarged\n          ? \"flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:w-full [&_svg]:max-w-full\"\n          : \"mt-2 flex justify-center overflow-auto [&_svg]:h-auto [&_svg]:max-w-full\"\n      }\n      // Excalidraw and Mermaid output are sanitized before injection.\n      dangerouslySetInnerHTML={{ __html: svg }}\n    />\n  );\n}\n\nfunction MermaidDiagram({\n  source,\n  idSeed,\n}: {\n  source: string;\n  idSeed: string;\n}) {\n  const isDark = useIsDark();\n  // Only render the diagram after mount: `mermaid` is client-only and SSR has no\n  // DOM for it to measure against.\n  const [mounted, setMounted] = useState(false);\n  const [state, setState] = useState<MermaidRenderState>({});\n  const [expanded, setExpanded] = useState(false);\n\n  // A DOM-id-safe, stable-per-block render id. Mermaid requires a valid CSS id.\n  const renderId = useMemo(\n    () => `mermaid-${idSeed.replace(/[^a-zA-Z0-9_-]/g, \"-\")}`,\n    [idSeed],\n  );\n\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n\n  useEffect(() => {\n    if (!mounted) return;\n    let cancelled = false;\n    const trimmed = source.trim();\n    if (!trimmed) {\n      setState({});\n      return;\n    }\n    (async () => {\n      try {\n        const svg = await renderExcalidrawSvg(trimmed, isDark);\n        if (!cancelled) setState({ svg });\n      } catch (excalidrawError) {\n        try {\n          // Fallback keeps diagrams usable if a Mermaid feature is not supported\n          // by the Excalidraw converter in a given host app.\n          const svg = await renderMermaidSvg(\n            trimmed,\n            `${renderId}-${isDark ? \"d\" : \"l\"}`,\n            isDark,\n          );\n          if (!cancelled) setState({ svg });\n        } catch (mermaidError) {\n          const excalidrawMessage = errorMessage(excalidrawError);\n          const mermaidMessage = errorMessage(mermaidError);\n          if (!cancelled) {\n            setState({\n              error:\n                excalidrawMessage === mermaidMessage\n                  ? mermaidMessage\n                  : `Excalidraw: ${excalidrawMessage}; Mermaid fallback: ${mermaidMessage}`,\n            });\n          }\n        }\n      }\n    })();\n    return () => {\n      cancelled = true;\n    };\n    // Re-render when the source OR the resolved theme changes so toggling\n    // dark/light updates the diagram live.\n  }, [mounted, source, isDark, renderId]);\n\n  if (!mounted) {\n    return (\n      <div className=\"mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted\">\n        Loading diagram…\n      </div>\n    );\n  }\n\n  if (state.error) {\n    return (\n      <div className=\"mt-2 space-y-2\">\n        <pre className=\"overflow-auto rounded-lg border border-plan-line bg-plan-code px-3 py-2 font-mono [font-size:var(--plan-code-size)] text-plan-code-text\">\n          {source}\n        </pre>\n        <p className=\"text-sm text-plan-muted\">\n          Could not render diagram: {state.error}\n        </p>\n      </div>\n    );\n  }\n\n  if (!state.svg) {\n    return (\n      <div className=\"mt-2 flex min-h-24 items-center justify-center rounded-lg border border-plan-line bg-plan-code text-sm text-plan-muted\">\n        Add a diagram definition to render it.\n      </div>\n    );\n  }\n\n  // Hover-revealed top-right expand button + shared lightbox, matching the\n  // DiagramBlock affordance exactly (same icon, reveal-on-hover/focus, Escape +\n  // backdrop close via the reused `DiagramLightbox`). The enlarged view re-shows\n  // the same rendered SVG scaled to fit the wider modal.\n  const svg = state.svg;\n  return (\n    <div className=\"group/mermaid relative\">\n      <MermaidSvg svg={svg} />\n      <button\n        type=\"button\"\n        data-plan-interactive\n        onClick={() => setExpanded(true)}\n        aria-label=\"Expand diagram\"\n        title=\"Expand diagram\"\n        className=\"an-diagram-expand-trigger absolute right-2 top-2 z-10 flex size-7 items-center justify-center rounded-md border border-border/60 bg-background/90 text-muted-foreground opacity-0 shadow-sm backdrop-blur transition-[color,opacity] hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring group-hover/mermaid:opacity-100\"\n      >\n        <IconArrowsMaximize className=\"size-4\" />\n      </button>\n      {expanded ? (\n        <DiagramLightbox onClose={() => setExpanded(false)}>\n          <MermaidSvg svg={svg} enlarged />\n        </DiagramLightbox>\n      ) : null}\n    </div>\n  );\n}\n\n/**\n * Read-only renderer for a `mermaid` block. Wraps the diagram in the standard\n * titled `plan-block` section + an optional muted caption, matching the plan\n * house style.\n */\nexport function MermaidRead({\n  data,\n  blockId,\n  title,\n  summary,\n}: BlockReadProps<MermaidData>) {\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      <MermaidDiagram source={data.source} idSeed={blockId} />\n      {data.caption && (\n        <p className=\"mt-3 text-sm text-plan-muted\">{data.caption}</p>\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/**\n * Edit renderer (panel surface) for a `mermaid` block: a monospace textarea for\n * the diagram source plus an optional caption input. Both commit immediately via\n * `onChange`. `editSurface: \"panel\"` means the registry renders the `Read` view\n * with a corner edit button that opens this form in the plan's shared popover, so\n * this renders only the form (the popover supplies the chrome and title).\n */\nexport function MermaidEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<MermaidData>) {\n  const sourceId = useId();\n  const captionId = useId();\n\n  return (\n    <div className=\"grid gap-3\" data-plan-interactive>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={sourceId}>Diagram source</DevLabel>\n        <textarea\n          id={sourceId}\n          value={data.source}\n          readOnly={!editable}\n          spellCheck={false}\n          onChange={(event) =>\n            onChange({ ...data, source: event.target.value })\n          }\n          className=\"flex min-h-56 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n          placeholder={\"flowchart TD\\n  A[Start] --> B{Decision}\"}\n        />\n        <p className=\"text-xs text-muted-foreground\">\n          Mermaid syntax — flowcharts, sequence diagrams, and more.\n        </p>\n      </div>\n      <div className=\"grid gap-1.5\">\n        <DevLabel htmlFor={captionId}>Caption</DevLabel>\n        <DevInput\n          id={captionId}\n          value={data.caption ?? \"\"}\n          readOnly={!editable}\n          onChange={(event) =>\n            onChange({\n              ...data,\n              caption: event.target.value || undefined,\n            })\n          }\n          placeholder=\"Optional caption\"\n        />\n      </div>\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/annotation-rail.d.ts

@@ -74,12 +74,97 @@ export declare function AnnotationGutterMarker({ marker, active, className, }: {
     active: boolean;
     className?: string;
 }): import("react/jsx-runtime").JSX.Element;
+/**
+ * One line-anchored note card: marker pip (when `showMarker`), the resolved line
+ * span ("Line 8"), an optional label, and the markdown `note` (via
+ * `ctx.renderMarkdown`). This is the single source of card markup, rendered both
+ * by the visually-hidden a11y/test stack and by the on-hover portal popover.
+ */
+export declare function AnnotationCard<A extends RailAnnotation>({ item, ctx, active, showMarker, className, onMouseEnter, onMouseLeave, }: {
+    item: ResolvedAnnotation<A>;
+    ctx: BlockRenderContext;
+    active?: boolean;
+    showMarker?: boolean;
+    className?: string;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Visually-hidden stack of every resolved note. It is NOT a visible column — it
+ * sits in the flow but clipped to a 1px box (the `sr-only` pattern) so the note
+ * text and the per-card marker pips stay in the accessibility tree and in the
+ * DOM (assistive tech can reach them, and tests that read `textContent`/count
+ * pips still see them) WITHOUT painting a persistent rail beside the code. The
+ * visible card appears only on hover via {@link AnnotationHoverCard}.
+ */
+export declare function AnnotationHiddenStack<A extends RailAnnotation>({ items, ctx, showMarker, }: {
+    items: ResolvedAnnotation<A>[];
+    ctx: BlockRenderContext;
+    showMarker?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+/** The geometry the hover card anchors to (in viewport coordinates). */
+export interface AnnotationAnchor {
+    /** Right edge of the code block (where the card should start). */
+    codeRight: number;
+    /** Left edge of the code block (for the below-fallback alignment). */
+    codeLeft: number;
+    /** Vertical center of the hovered line. */
+    lineCenter: number;
+    /** Bottom of the hovered line (for the below-fallback placement). */
+    lineBottom: number;
+}
+/**
+ * The single on-hover note card, portaled to `document.body` and positioned
+ * `fixed` so it escapes the code block's `overflow` and never reflows the code.
+ *
+ * Placement: by default it sits to the RIGHT of the code block's right edge,
+ * vertically centered on the hovered line — so it never overlaps the code text.
+ * If there isn't room to the right (it would overflow the viewport), it clamps
+ * within the viewport, and if the right gutter is too narrow for the card it
+ * falls back to BELOW the hovered line (left-aligned to the code block). The card
+ * keeps itself open while hovered (`onMouseEnter`/`onMouseLeave` forwarded) so it
+ * stays readable; the caller adds the small hover-intent close delay.
+ */
+export declare function AnnotationHoverCard<A extends RailAnnotation>({ item, anchor, ctx, showMarker, onMouseEnter, onMouseLeave, }: {
+    item: ResolvedAnnotation<A>;
+    anchor: AnnotationAnchor;
+    ctx: BlockRenderContext;
+    showMarker?: boolean;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+}): any;
+/**
+ * Hover-intent controller for the on-hover note card. Exposes `activeIndex` +
+ * the captured `anchor`, plus `open`/`scheduleClose`/`cancelClose` handlers.
+ *
+ *  - `open(index, anchor)` shows a card immediately (cancels any pending close).
+ *  - `scheduleClose()` hides after a short delay, so moving the pointer from the
+ *    code line across the gap into the card itself keeps it open.
+ *  - `cancelClose()` (call on card mouse-enter) keeps it open while reading.
+ */
+export declare function useAnnotationHover(delay?: number): {
+    readonly activeIndex: number;
+    readonly anchor: AnnotationAnchor;
+    readonly open: (index: number, anchor: AnnotationAnchor) => void;
+    readonly scheduleClose: () => void;
+    readonly cancelClose: () => void;
+};
+/**
+ * Build an {@link AnnotationAnchor} from the code block element and the hovered
+ * row element. The card anchors to the code block's RIGHT edge and the row's
+ * vertical center, both in viewport coordinates (so a `fixed` portal lines up).
+ */
+export declare function anchorFromElements(codeEl: HTMLElement | null, rowEl: HTMLElement | null): AnnotationAnchor | null;
 /**
  * The responsive list of line-anchored note cards. Each card shows its marker
  * pip, the resolved line span ("Line 8"), an optional label, and the markdown
  * `note` (via `ctx.renderMarkdown`). Hovering a card sets the active index;
  * `activeIndex` driven from outside lets a hovered code row light its card and
  * vice-versa. Only annotations whose `range` resolved are listed.
+ *
+ * @deprecated Superseded by the on-hover {@link AnnotationHoverCard}; kept for
+ * back-compat with any external importer. Both block read renderers now use the
+ * hover popover anchored to the right of the code instead of a persistent rail.
  */
 export declare function AnnotationNoteRail<A extends RailAnnotation>({ items, activeIndex, onActiveChange, ctx, className, showMarker, }: {
     items: ResolvedAnnotation<A>[];

package/dist/client/blocks/library/annotation-rail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotation-rail.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/annotation-rail.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAIH;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,GAAG,EAAE,MAAM,EACX,SAAS,EAAE,MAAM,GAChB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAUvC;AAED,0EAA0E;AAC1E,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc;IAC3E,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,+CAA+C;IAC/C,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,CAAC,CAAC;IACd,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC9C;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACzD,WAAW,EAAE,CAAC,EAAE,GAAG,SAAS,EAC5B,YAAY,EAAE,CAAC,UAAU,EAAE,CAAC,KAAK,MAAM,GACtC,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAOzB;AAED,wEAAwE;AACxE,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EACzD,QAAQ,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,GAChC,GAAG,CAAC,MAAM,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC,CAWtC;AAED,kFAAkF;AAClF,wBAAgB,UAAU,CAAC,IAAI,EAAE,kBAAkB,GAAG,MAAM,CAK3D;AAID;;;GAGG;AACH,wBAAgB,sBAAsB,CAAC,EACrC,MAAM,EACN,MAAM,EACN,SAAS,GACV,EAAE;IACD,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,2CAeA;AAID;;;;;;GAMG;AACH,wBAAgB,kBAAkB,CAAC,CAAC,SAAS,cAAc,EAAE,EAC3D,KAAK,EACL,WAAW,EACX,cAAc,EACd,GAAG,EACH,SAAS,EACT,UAAkB,GACnB,EAAE;IACD,KAAK,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC/B,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C,GAAG,EAAE,kBAAkB,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CAsDA;AAED,gFAAgF;AAChF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB,EAAE,GAAG,OAAO,CAEvE;AAED,MAAM,MAAM,sBAAsB,GAAG,SAAS,CAAC"}
+{"version":3,"file":"annotation-rail.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/annotation-rail.tsx"],"names":[],"mappings":"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"}

package/dist/client/blocks/library/annotation-rail.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { createPortal } from "react-dom";
 import { cn } from "../../utils.js";
 /**
  * Shared line-anchored annotation UI for the `annotated-code` and `diff` blocks.
@@ -96,22 +97,162 @@ export function AnnotationGutterMarker({ marker, active, className, }) {
             ? "bg-amber-500 text-white dark:bg-amber-400 dark:text-amber-950"
             : "bg-amber-400/25 text-amber-700 dark:bg-amber-300/20 dark:text-amber-300", className), children: marker }));
 }
-/* ── Note rail ─────────────────────────────────────────────────────────────── */
+/* ── Note card ─────────────────────────────────────────────────────────────── */
+/**
+ * One line-anchored note card: marker pip (when `showMarker`), the resolved line
+ * span ("Line 8"), an optional label, and the markdown `note` (via
+ * `ctx.renderMarkdown`). This is the single source of card markup, rendered both
+ * by the visually-hidden a11y/test stack and by the on-hover portal popover.
+ */
+export function AnnotationCard({ item, ctx, active = false, showMarker = false, className, onMouseEnter, onMouseLeave, }) {
+    return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: cn("rounded-lg border px-3.5 py-2.5 transition-colors", active
+            ? "border-amber-400/70 bg-amber-50 dark:border-amber-300/40 dark:bg-amber-300/[0.08]"
+            : "border-plan-line bg-plan-block/40 hover:border-amber-400/50", className), children: [_jsxs("div", { className: cn("flex flex-wrap gap-x-2 gap-y-0.5", showMarker ? "items-center" : "items-baseline"), children: [showMarker && (_jsx(AnnotationGutterMarker, { marker: item.marker, active: active })), _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-plan-muted", children: rangeLabel(item) }), item.annotation.label && (_jsx("span", { className: "text-[13px] font-semibold text-plan-text", children: item.annotation.label }))] }), _jsx("div", { className: "plan-annotation-note mt-1 text-[13px] leading-relaxed text-plan-text/85", children: ctx.renderMarkdown ? (ctx.renderMarkdown(item.annotation.note)) : (_jsx("p", { children: item.annotation.note })) })] }));
+}
+/**
+ * Visually-hidden stack of every resolved note. It is NOT a visible column — it
+ * sits in the flow but clipped to a 1px box (the `sr-only` pattern) so the note
+ * text and the per-card marker pips stay in the accessibility tree and in the
+ * DOM (assistive tech can reach them, and tests that read `textContent`/count
+ * pips still see them) WITHOUT painting a persistent rail beside the code. The
+ * visible card appears only on hover via {@link AnnotationHoverCard}.
+ */
+export function AnnotationHiddenStack({ items, ctx, showMarker = false, }) {
+    const resolved = useMemo(() => items.filter((item) => item.range), [items]);
+    if (resolved.length === 0)
+        return null;
+    return (_jsx("div", { className: "absolute size-px overflow-hidden whitespace-nowrap border-0 p-0 [clip:rect(0,0,0,0)] [clip-path:inset(50%)]", "data-annotation-hidden-stack": true, children: resolved.map((item) => (_jsx(AnnotationCard, { item: item, ctx: ctx, showMarker: showMarker }, item.index))) }));
+}
+const HOVER_CARD_WIDTH = 280;
+const HOVER_CARD_GAP = 12;
+const VIEWPORT_MARGIN = 8;
+/**
+ * The single on-hover note card, portaled to `document.body` and positioned
+ * `fixed` so it escapes the code block's `overflow` and never reflows the code.
+ *
+ * Placement: by default it sits to the RIGHT of the code block's right edge,
+ * vertically centered on the hovered line — so it never overlaps the code text.
+ * If there isn't room to the right (it would overflow the viewport), it clamps
+ * within the viewport, and if the right gutter is too narrow for the card it
+ * falls back to BELOW the hovered line (left-aligned to the code block). The card
+ * keeps itself open while hovered (`onMouseEnter`/`onMouseLeave` forwarded) so it
+ * stays readable; the caller adds the small hover-intent close delay.
+ */
+export function AnnotationHoverCard({ item, anchor, ctx, showMarker = false, onMouseEnter, onMouseLeave, }) {
+    const cardRef = useRef(null);
+    const [pos, setPos] = useState(null);
+    // Measure the rendered card, then resolve a non-overlapping position: right of
+    // the code if it fits, else clamp into the viewport, else drop below the line.
+    useLayoutEffect(() => {
+        if (typeof window === "undefined")
+            return;
+        const el = cardRef.current;
+        const rect = el?.getBoundingClientRect();
+        const width = rect && rect.width > 0 ? rect.width : HOVER_CARD_WIDTH;
+        const height = rect && rect.height > 0 ? rect.height : 0;
+        const vw = window.innerWidth || 0;
+        const vh = window.innerHeight || 0;
+        const rightLeft = anchor.codeRight + HOVER_CARD_GAP;
+        const fitsRight = rightLeft + width + VIEWPORT_MARGIN <= vw;
+        let left;
+        let top;
+        if (fitsRight) {
+            // Default: to the right of the code, centered on the hovered line.
+            left = rightLeft;
+            top = anchor.lineCenter - height / 2;
+        }
+        else {
+            // No room to the right → drop below the line, aligned to the code's left.
+            left = anchor.codeLeft;
+            top = anchor.lineBottom + HOVER_CARD_GAP;
+        }
+        // Clamp within the viewport so the card is never cut off.
+        left = Math.max(VIEWPORT_MARGIN, Math.min(left, vw - width - VIEWPORT_MARGIN));
+        top = Math.max(VIEWPORT_MARGIN, Math.min(top, vh - height - VIEWPORT_MARGIN));
+        setPos({ top, left });
+    }, [
+        anchor.codeRight,
+        anchor.codeLeft,
+        anchor.lineCenter,
+        anchor.lineBottom,
+        item.index,
+    ]);
+    if (typeof document === "undefined")
+        return null;
+    return createPortal(_jsx("div", { ref: cardRef, role: "tooltip", "data-annotation-hover-card": true, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "pointer-events-auto fixed z-50", style: {
+            top: pos?.top ?? anchor.lineCenter,
+            left: pos?.left ?? anchor.codeRight + HOVER_CARD_GAP,
+            width: HOVER_CARD_WIDTH,
+            // Hide until measured to avoid a one-frame jump from the fallback spot.
+            visibility: pos ? "visible" : "hidden",
+        }, children: _jsx(AnnotationCard, { item: item, ctx: ctx, active: true, showMarker: showMarker, className: "shadow-lg shadow-black/10 dark:shadow-black/40" }) }), document.body);
+}
+/**
+ * Hover-intent controller for the on-hover note card. Exposes `activeIndex` +
+ * the captured `anchor`, plus `open`/`scheduleClose`/`cancelClose` handlers.
+ *
+ *  - `open(index, anchor)` shows a card immediately (cancels any pending close).
+ *  - `scheduleClose()` hides after a short delay, so moving the pointer from the
+ *    code line across the gap into the card itself keeps it open.
+ *  - `cancelClose()` (call on card mouse-enter) keeps it open while reading.
+ */
+export function useAnnotationHover(delay = 130) {
+    const [active, setActive] = useState(null);
+    const timer = useRef(null);
+    const cancelClose = () => {
+        if (timer.current) {
+            clearTimeout(timer.current);
+            timer.current = null;
+        }
+    };
+    const open = (index, anchor) => {
+        cancelClose();
+        setActive({ index, anchor });
+    };
+    const scheduleClose = () => {
+        cancelClose();
+        timer.current = setTimeout(() => setActive(null), delay);
+    };
+    useEffect(() => () => cancelClose(), []);
+    return {
+        activeIndex: active?.index ?? null,
+        anchor: active?.anchor ?? null,
+        open,
+        scheduleClose,
+        cancelClose,
+    };
+}
+/**
+ * Build an {@link AnnotationAnchor} from the code block element and the hovered
+ * row element. The card anchors to the code block's RIGHT edge and the row's
+ * vertical center, both in viewport coordinates (so a `fixed` portal lines up).
+ */
+export function anchorFromElements(codeEl, rowEl) {
+    if (!codeEl || !rowEl)
+        return null;
+    const code = codeEl.getBoundingClientRect();
+    const row = rowEl.getBoundingClientRect();
+    return {
+        codeRight: code.right,
+        codeLeft: code.left,
+        lineCenter: row.top + row.height / 2,
+        lineBottom: row.bottom,
+    };
+}
 /**
  * The responsive list of line-anchored note cards. Each card shows its marker
  * pip, the resolved line span ("Line 8"), an optional label, and the markdown
  * `note` (via `ctx.renderMarkdown`). Hovering a card sets the active index;
  * `activeIndex` driven from outside lets a hovered code row light its card and
  * vice-versa. Only annotations whose `range` resolved are listed.
+ *
+ * @deprecated Superseded by the on-hover {@link AnnotationHoverCard}; kept for
+ * back-compat with any external importer. Both block read renderers now use the
+ * hover popover anchored to the right of the code instead of a persistent rail.
  */
 export function AnnotationNoteRail({ items, activeIndex, onActiveChange, ctx, className, showMarker = false, }) {
     const sideAnnotations = useMemo(() => items.filter((item) => item.range), [items]);
-    return (_jsx("div", { className: cn("flex flex-col gap-2.5", className), children: sideAnnotations.map((item) => {
-            const isActive = activeIndex === item.index;
-            return (_jsxs("div", { onMouseEnter: () => onActiveChange(item.index), onMouseLeave: () => onActiveChange(null), className: cn("rounded-lg border px-3.5 py-2.5 transition-colors", isActive
-                    ? "border-amber-400/70 bg-amber-50 dark:border-amber-300/40 dark:bg-amber-300/[0.08]"
-                    : "border-plan-line bg-plan-block/40 hover:border-amber-400/50"), children: [_jsxs("div", { className: cn("flex flex-wrap gap-x-2 gap-y-0.5", showMarker ? "items-center" : "items-baseline"), children: [showMarker && (_jsx(AnnotationGutterMarker, { marker: item.marker, active: isActive })), _jsx("span", { className: "text-[11px] font-semibold uppercase tracking-wide text-plan-muted", children: rangeLabel(item) }), item.annotation.label && (_jsx("span", { className: "text-[13px] font-semibold text-plan-text", children: item.annotation.label }))] }), _jsx("div", { className: "plan-annotation-note mt-1 text-[13px] leading-relaxed text-plan-text/85", children: ctx.renderMarkdown ? (ctx.renderMarkdown(item.annotation.note)) : (_jsx("p", { children: item.annotation.note })) })] }, item.index));
-        }) }));
+    return (_jsx("div", { className: cn("flex flex-col gap-2.5", className), children: sideAnnotations.map((item) => (_jsx(AnnotationCard, { item: item, ctx: ctx, active: activeIndex === item.index, showMarker: showMarker, onMouseEnter: () => onActiveChange(item.index), onMouseLeave: () => onActiveChange(null) }, item.index))) }));
 }
 /** Whether a resolved list has at least one note worth rendering a rail for. */
 export function hasRailAnnotations(items) {