@agent-native/core 0.41.0 → 0.42.0

package/dist/client/blocks/library/AnnotatedCodeBlock.d.ts

@@ -1,5 +1,24 @@
 import type { BlockEditProps, BlockReadProps } from "../types.js";
 import type { AnnotatedCodeData } from "./annotated-code.config.js";
+/**
+ * "Explain this code" walkthrough block: a standard syntax-highlighted code
+ * surface on the left with line-anchored annotation cards on the right (the
+ * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle
+ * highlight band + an accent rail down the gutter; its card shows the `lines`
+ * range, optional `label`, and the always-visible markdown `note` (via
+ * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.
+ *
+ * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same
+ * colorful palette as the `code-tabs` block) per line, so it matches the app's
+ * standard code styling and supports per-line bands without an async loader. The
+ * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`
+ * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as
+ * `<span>`s (never one `<pre>` per line) so they don't pick up document
+ * code/pre chrome. Lives in core so any app can register the dev-doc block.
+ *
+ * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace
+ * code Textarea, filename/language Inputs, and add/remove-able annotation rows.
+ */
 declare function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }: BlockReadProps<AnnotatedCodeData>): import("react/jsx-runtime").JSX.Element;
 declare function AnnotatedCodeEdit({ data, onChange, editable, }: BlockEditProps<AnnotatedCodeData>): import("react/jsx-runtime").JSX.Element;
 export { AnnotatedCodeRead, AnnotatedCodeEdit };

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedCodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAsEpC,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CA2KnC;AAMD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CAiJnC;AAED,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"AnnotatedCodeBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAEV,iBAAiB,EAClB,MAAM,4BAA4B,CAAC;AAcpC;;;;;;;;;;;;;;;;;;GAkBG;AAIH,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CA2HnC;AAMD,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,iBAAiB,CAAC,2CAiJnC;AAED,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,CAAC"}

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

@@ -3,6 +3,7 @@ import { useMemo, useState } from "react";
 import { IconCode, IconPlus, IconTrash } from "@tabler/icons-react";
 import { cn } from "../../utils.js";
 import { highlightCode, inferLanguageFromFilename, normalizeCodeLanguage, } from "./code-highlight.js";
+import { AnnotationNoteRail, buildLineMarkerMap, hasRailAnnotations, resolveAnnotations, } from "./annotation-rail.js";
 import { DevInput, DevLabel, DevTextarea } from "./dev-doc-ui.js";
 /**
  * "Explain this code" walkthrough block: a standard syntax-highlighted code
@@ -23,36 +24,6 @@ import { DevInput, DevLabel, DevTextarea } from "./dev-doc-ui.js";
  * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace
  * code Textarea, filename/language Inputs, and add/remove-able annotation rows.
  */
-/* ── Line-ref parsing ──────────────────────────────────────────────────────── */
-/**
- * Parse a 1-based `lines` ref (`"3"` or `"3-5"`) into an inclusive `[start,end]`
- * pair, clamped to `[1, lineCount]`. Returns `null` for malformed or fully
- * out-of-range refs so callers can ignore them gracefully. A reversed range
- * (`"5-3"`) is normalized; a partially out-of-range range is clamped.
- */
-function parseLineRange(ref, lineCount) {
-    const match = /^\s*(\d+)\s*(?:-\s*(\d+)\s*)?$/.exec(ref);
-    if (!match)
-        return null;
-    let start = Number.parseInt(match[1], 10);
-    let end = match[2] != null ? Number.parseInt(match[2], 10) : start;
-    if (!Number.isFinite(start) || !Number.isFinite(end))
-        return null;
-    if (start > end)
-        [start, end] = [end, start];
-    // Fully outside the file → ignore.
-    if (end < 1 || start > lineCount)
-        return null;
-    return { start: Math.max(1, start), end: Math.min(lineCount, end) };
-}
-/** Human label for a resolved annotation's line span ("Line 8" / "Lines 3–6"). */
-function rangeLabel(item) {
-    if (!item.range)
-        return `Lines ${item.annotation.lines}`;
-    return item.range.start === item.range.end
-        ? `Line ${item.range.start}`
-        : `Lines ${item.range.start}–${item.range.end}`;
-}
 /* ── Read ──────────────────────────────────────────────────────────────────── */
 function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }) {
     const [activeIndex, setActiveIndex] = useState(null);
@@ -62,28 +33,10 @@ function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }) {
         inferLanguageFromFilename(data.filename), [data.language, data.filename]);
     // Highlight each line once; empty lines keep their height with a NBSP.
     const highlightedLines = useMemo(() => lines.map((text) => (text.length ? highlightCode(text, language) : " ")), [lines, language]);
-    const resolved = useMemo(() => (data.annotations ?? []).map((annotation, index) => ({
-        index,
-        marker: index + 1,
-        annotation,
-        range: parseLineRange(annotation.lines, lineCount),
-    })), [data.annotations, lineCount]);
+    const resolved = useMemo(() => resolveAnnotations(data.annotations, () => lineCount), [data.annotations, lineCount]);
     // line number (1-based) → resolved annotations covering it.
-    const lineMarkers = useMemo(() => {
-        const map = new Map();
-        for (const item of resolved) {
-            if (!item.range)
-                continue;
-            for (let n = item.range.start; n <= item.range.end; n += 1) {
-                const list = map.get(n) ?? [];
-                list.push(item);
-                map.set(n, list);
-            }
-        }
-        return map;
-    }, [resolved]);
-    const sideAnnotations = resolved.filter((item) => item.range);
-    const hasAnnotations = sideAnnotations.length > 0;
+    const lineMarkers = useMemo(() => buildLineMarkerMap(resolved), [resolved]);
+    const hasAnnotations = hasRailAnnotations(resolved);
     const langChip = data.language?.trim();
     const codeSurface = (_jsxs("div", { className: "overflow-hidden rounded-xl border border-plan-line bg-plan-code", children: [(data.filename || langChip) && (_jsxs("div", { className: "flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2", children: [_jsx(IconCode, { className: "size-3.5 shrink-0 text-plan-muted" }), _jsx("span", { className: "min-w-0 flex-1 truncate font-mono text-[13px] font-medium text-plan-code-text", children: data.filename || "snippet" }), langChip && (_jsx("span", { className: "shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted", children: langChip }))] })), _jsx("div", { className: "overflow-x-auto py-1.5", children: _jsx("div", { className: "min-w-full font-mono text-[12.5px] leading-[22px]", children: lines.map((_text, idx) => {
                         const lineNo = idx + 1;
@@ -103,12 +56,7 @@ function AnnotatedCodeRead({ data, blockId, title, summary, ctx, }) {
                                             : "bg-amber-400/45 dark:bg-amber-300/35"
                                         : null) }), _jsx("span", { className: "w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60", children: lineNo }), _jsx("span", { className: "flex-1 whitespace-pre pr-4 text-plan-code-text", children: highlightedLines[idx] })] }, lineNo));
                     }) }) })] }));
-    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), hasAnnotations ? (_jsxs("div", { className: "grid items-start gap-3 md:grid-cols-[minmax(0,1fr)_minmax(190px,250px)]", children: [codeSurface, _jsx("div", { className: "flex flex-col gap-2.5", children: sideAnnotations.map((item) => {
-                            const isActive = activeIndex === item.index;
-                            return (_jsxs("div", { onMouseEnter: () => setActiveIndex(item.index), onMouseLeave: () => setActiveIndex(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: "flex flex-wrap items-baseline gap-x-2 gap-y-0.5", children: [_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));
-                        }) })] })) : (codeSurface), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), hasAnnotations ? (_jsxs("div", { className: "grid items-start gap-3 md:grid-cols-[minmax(0,1fr)_minmax(190px,250px)]", children: [codeSurface, _jsx(AnnotationNoteRail, { items: resolved, activeIndex: activeIndex, onActiveChange: setActiveIndex, ctx: ctx })] })) : (codeSurface), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
 }
 /* ── Edit (panel) ──────────────────────────────────────────────────────────── */
 const codeAreaClass = "min-h-[160px] font-mono text-xs leading-5";

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

@@ -1 +1 @@
-{"version":3,"file":"AnnotatedCodeBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from \"react\";\nimport { IconCode, IconPlus, IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type {\n  AnnotatedCodeAnnotation,\n  AnnotatedCodeData,\n} from \"./annotated-code.config.js\";\nimport {\n  highlightCode,\n  inferLanguageFromFilename,\n  normalizeCodeLanguage,\n} from \"./code-highlight.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * \"Explain this code\" walkthrough block: a standard syntax-highlighted code\n * surface on the left with line-anchored annotation cards on the right (the\n * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle\n * highlight band + an accent rail down the gutter; its card shows the `lines`\n * range, optional `label`, and the always-visible markdown `note` (via\n * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.\n *\n * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same\n * colorful palette as the `code-tabs` block) per line, so it matches the app's\n * standard code styling and supports per-line bands without an async loader. The\n * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`\n * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as\n * `<span>`s (never one `<pre>` per line) so they don't pick up document\n * code/pre chrome. Lives in core so any app can register the dev-doc block.\n *\n * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace\n * code Textarea, filename/language Inputs, and add/remove-able annotation rows.\n */\n\n/* ── Line-ref parsing ──────────────────────────────────────────────────────── */\n\n/**\n * Parse a 1-based `lines` ref (`\"3\"` or `\"3-5\"`) into an inclusive `[start,end]`\n * pair, clamped to `[1, lineCount]`. Returns `null` for malformed or fully\n * out-of-range refs so callers can ignore them gracefully. A reversed range\n * (`\"5-3\"`) is normalized; a partially out-of-range range is clamped.\n */\nfunction parseLineRange(\n  ref: string,\n  lineCount: number,\n): { start: number; end: number } | null {\n  const match = /^\\s*(\\d+)\\s*(?:-\\s*(\\d+)\\s*)?$/.exec(ref);\n  if (!match) return null;\n  let start = Number.parseInt(match[1], 10);\n  let end = match[2] != null ? Number.parseInt(match[2], 10) : start;\n  if (!Number.isFinite(start) || !Number.isFinite(end)) return null;\n  if (start > end) [start, end] = [end, start];\n  // Fully outside the file → ignore.\n  if (end < 1 || start > lineCount) return null;\n  return { start: Math.max(1, start), end: Math.min(lineCount, end) };\n}\n\ninterface ResolvedAnnotation {\n  /** Index in the original `annotations` array (stable hover key). */\n  index: number;\n  /** 1-based marker number (authoring order). */\n  marker: number;\n  annotation: AnnotatedCodeAnnotation;\n  range: { start: number; end: number } | null;\n}\n\n/** Human label for a resolved annotation's line span (\"Line 8\" / \"Lines 3–6\"). */\nfunction rangeLabel(item: ResolvedAnnotation): string {\n  if (!item.range) return `Lines ${item.annotation.lines}`;\n  return item.range.start === item.range.end\n    ? `Line ${item.range.start}`\n    : `Lines ${item.range.start}–${item.range.end}`;\n}\n\n/* ── Read ──────────────────────────────────────────────────────────────────── */\n\nfunction AnnotatedCodeRead({\n  data,\n  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockReadProps<AnnotatedCodeData>) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const lines = useMemo(\n    () => data.code.replace(/\\n$/, \"\").split(\"\\n\"),\n    [data.code],\n  );\n  const lineCount = lines.length;\n\n  const language = useMemo(\n    () =>\n      normalizeCodeLanguage(data.language) ??\n      inferLanguageFromFilename(data.filename),\n    [data.language, data.filename],\n  );\n\n  // Highlight each line once; empty lines keep their height with a NBSP.\n  const highlightedLines = useMemo(\n    () =>\n      lines.map((text) => (text.length ? highlightCode(text, language) : \" \")),\n    [lines, language],\n  );\n\n  const resolved = useMemo<ResolvedAnnotation[]>(\n    () =>\n      (data.annotations ?? []).map((annotation, index) => ({\n        index,\n        marker: index + 1,\n        annotation,\n        range: parseLineRange(annotation.lines, lineCount),\n      })),\n    [data.annotations, lineCount],\n  );\n\n  // line number (1-based) → resolved annotations covering it.\n  const lineMarkers = useMemo(() => {\n    const map = new Map<number, ResolvedAnnotation[]>();\n    for (const item of resolved) {\n      if (!item.range) continue;\n      for (let n = item.range.start; n <= item.range.end; n += 1) {\n        const list = map.get(n) ?? [];\n        list.push(item);\n        map.set(n, list);\n      }\n    }\n    return map;\n  }, [resolved]);\n\n  const sideAnnotations = resolved.filter((item) => item.range);\n  const hasAnnotations = sideAnnotations.length > 0;\n  const langChip = data.language?.trim();\n\n  const codeSurface = (\n    <div className=\"overflow-hidden rounded-xl border border-plan-line bg-plan-code\">\n      {(data.filename || langChip) && (\n        <div className=\"flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2\">\n          <IconCode className=\"size-3.5 shrink-0 text-plan-muted\" />\n          <span className=\"min-w-0 flex-1 truncate font-mono text-[13px] font-medium text-plan-code-text\">\n            {data.filename || \"snippet\"}\n          </span>\n          {langChip && (\n            <span className=\"shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted\">\n              {langChip}\n            </span>\n          )}\n        </div>\n      )}\n      <div className=\"overflow-x-auto py-1.5\">\n        <div className=\"min-w-full font-mono text-[12.5px] leading-[22px]\">\n          {lines.map((_text, idx) => {\n            const lineNo = idx + 1;\n            const markers = lineMarkers.get(lineNo);\n            const isAnnotated = !!markers?.length;\n            const isActive =\n              activeIndex != null &&\n              !!markers?.some((m) => m.index === activeIndex);\n            return (\n              <div\n                key={lineNo}\n                className={cn(\n                  \"flex w-full\",\n                  isActive\n                    ? \"bg-amber-400/20 dark:bg-amber-300/15\"\n                    : isAnnotated\n                      ? \"bg-amber-400/[0.07] dark:bg-amber-300/[0.07]\"\n                      : null,\n                )}\n                onMouseEnter={\n                  isAnnotated && markers\n                    ? () => setActiveIndex(markers[0].index)\n                    : undefined\n                }\n                onMouseLeave={\n                  isAnnotated ? () => setActiveIndex(null) : undefined\n                }\n              >\n                {/* Accent rail: amber on annotated lines, brighter when active. */}\n                <span\n                  aria-hidden\n                  className={cn(\n                    \"w-[3px] shrink-0 self-stretch\",\n                    isAnnotated\n                      ? isActive\n                        ? \"bg-amber-500 dark:bg-amber-400\"\n                        : \"bg-amber-400/45 dark:bg-amber-300/35\"\n                      : null,\n                  )}\n                />\n                <span className=\"w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60\">\n                  {lineNo}\n                </span>\n                <span className=\"flex-1 whitespace-pre pr-4 text-plan-code-text\">\n                  {highlightedLines[idx]}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      {hasAnnotations ? (\n        <div className=\"grid items-start gap-3 md:grid-cols-[minmax(0,1fr)_minmax(190px,250px)]\">\n          {codeSurface}\n          <div className=\"flex flex-col gap-2.5\">\n            {sideAnnotations.map((item) => {\n              const isActive = activeIndex === item.index;\n              return (\n                <div\n                  key={item.index}\n                  onMouseEnter={() => setActiveIndex(item.index)}\n                  onMouseLeave={() => setActiveIndex(null)}\n                  className={cn(\n                    \"rounded-lg border px-3.5 py-2.5 transition-colors\",\n                    isActive\n                      ? \"border-amber-400/70 bg-amber-50 dark:border-amber-300/40 dark:bg-amber-300/[0.08]\"\n                      : \"border-plan-line bg-plan-block/40 hover:border-amber-400/50\",\n                  )}\n                >\n                  <div className=\"flex flex-wrap items-baseline gap-x-2 gap-y-0.5\">\n                    <span className=\"text-[11px] font-semibold uppercase tracking-wide text-plan-muted\">\n                      {rangeLabel(item)}\n                    </span>\n                    {item.annotation.label && (\n                      <span className=\"text-[13px] font-semibold text-plan-text\">\n                        {item.annotation.label}\n                      </span>\n                    )}\n                  </div>\n                  <div className=\"plan-annotation-note mt-1 text-[13px] leading-relaxed text-plan-text/85\">\n                    {ctx.renderMarkdown ? (\n                      ctx.renderMarkdown(item.annotation.note)\n                    ) : (\n                      <p>{item.annotation.note}</p>\n                    )}\n                  </div>\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      ) : (\n        codeSurface\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel) ──────────────────────────────────────────────────────────── */\n\nconst codeAreaClass = \"min-h-[160px] font-mono text-xs leading-5\";\n\nfunction AnnotatedCodeEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<AnnotatedCodeData>) {\n  const annotations = data.annotations ?? [];\n  const patch = (next: Partial<AnnotatedCodeData>) =>\n    onChange({ ...data, ...next });\n\n  const updateAnnotation = (\n    index: number,\n    next: Partial<AnnotatedCodeAnnotation>,\n  ) =>\n    patch({\n      annotations: annotations.map((annotation, i) =>\n        i === index ? { ...annotation, ...next } : annotation,\n      ),\n    });\n\n  const removeAnnotation = (index: number) =>\n    patch({ annotations: annotations.filter((_, i) => i !== index) });\n\n  const addAnnotation = () => {\n    if (annotations.length >= 80) return; // schema max\n    patch({\n      annotations: [...annotations, { lines: \"1\", label: \"\", note: \"\" }],\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\" data-plan-interactive>\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-filename\" className=\"text-xs\">\n            Filename\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-filename\"\n            value={data.filename ?? \"\"}\n            placeholder=\"src/server/auth.ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ filename: event.target.value || undefined })\n            }\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-language\" className=\"text-xs\">\n            Language\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-language\"\n            value={data.language ?? \"\"}\n            placeholder=\"ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ language: event.target.value || undefined })\n            }\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <DevLabel htmlFor=\"annotated-code-code\" className=\"text-xs\">\n          Code\n        </DevLabel>\n        <DevTextarea\n          id=\"annotated-code-code\"\n          spellCheck={false}\n          className={codeAreaClass}\n          value={data.code}\n          disabled={!editable}\n          onChange={(event) => patch({ code: event.target.value })}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel className=\"text-xs\">Annotations</DevLabel>\n          {editable && annotations.length < 80 && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={addAnnotation}\n              className=\"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text\"\n            >\n              <IconPlus className=\"size-3.5\" />\n              Add annotation\n            </button>\n          )}\n        </div>\n        {annotations.length === 0 && (\n          <p className=\"text-xs text-plan-muted\">\n            No annotations yet. Add one to anchor a note to a line range.\n          </p>\n        )}\n        {annotations.map((annotation, index) => (\n          <div\n            key={index}\n            className=\"flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2\"\n          >\n            <div className=\"grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)_auto]\">\n              <DevInput\n                aria-label={`Annotation ${index + 1} lines`}\n                value={annotation.lines}\n                placeholder=\"3-5\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, { lines: event.target.value })\n                }\n              />\n              <DevInput\n                aria-label={`Annotation ${index + 1} label`}\n                value={annotation.label ?? \"\"}\n                placeholder=\"Label (optional)\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, {\n                    label: event.target.value || undefined,\n                  })\n                }\n              />\n              {editable && (\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label={`Remove annotation ${index + 1}`}\n                  onClick={() => removeAnnotation(index)}\n                  className=\"flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <IconTrash className=\"size-4\" />\n                </button>\n              )}\n            </div>\n            <DevTextarea\n              aria-label={`Annotation ${index + 1} note`}\n              className=\"min-h-[60px] text-sm\"\n              value={annotation.note}\n              placeholder=\"Explain what these lines do…\"\n              disabled={!editable}\n              onChange={(event) =>\n                updateAnnotation(index, { note: event.target.value })\n              }\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport { AnnotatedCodeRead, AnnotatedCodeEdit };\n"]}
+{"version":3,"file":"AnnotatedCodeBlock.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/AnnotatedCodeBlock.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from \"react\";\nimport { IconCode, IconPlus, IconTrash } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport type {\n  AnnotatedCodeAnnotation,\n  AnnotatedCodeData,\n} from \"./annotated-code.config.js\";\nimport {\n  highlightCode,\n  inferLanguageFromFilename,\n  normalizeCodeLanguage,\n} from \"./code-highlight.js\";\nimport {\n  AnnotationNoteRail,\n  buildLineMarkerMap,\n  hasRailAnnotations,\n  resolveAnnotations,\n} from \"./annotation-rail.js\";\nimport { DevInput, DevLabel, DevTextarea } from \"./dev-doc-ui.js\";\n\n/**\n * \"Explain this code\" walkthrough block: a standard syntax-highlighted code\n * surface on the left with line-anchored annotation cards on the right (the\n * Stripe-docs / Sourcegraph layout). Each annotated line range gets a subtle\n * highlight band + an accent rail down the gutter; its card shows the `lines`\n * range, optional `label`, and the always-visible markdown `note` (via\n * `ctx.renderMarkdown`). Hovering a card highlights its lines and vice-versa.\n *\n * Syntax highlighting reuses the shared `highlightCode` lowlight helper (the same\n * colorful palette as the `code-tabs` block) per line, so it matches the app's\n * standard code styling and supports per-line bands without an async loader. The\n * surface uses the plan `--plan-code*`/`--plan-*` tokens and Tailwind `dark:`\n * pairs, so it reads correctly in BOTH light and dark mode. Code lines render as\n * `<span>`s (never one `<pre>` per line) so they don't pick up document\n * code/pre chrome. Lives in core so any app can register the dev-doc block.\n *\n * Editing is panel-driven (config-style, like the diff/HTML blocks): a monospace\n * code Textarea, filename/language Inputs, and add/remove-able annotation rows.\n */\n\n/* ── Read ──────────────────────────────────────────────────────────────────── */\n\nfunction AnnotatedCodeRead({\n  data,\n  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockReadProps<AnnotatedCodeData>) {\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n\n  const lines = useMemo(\n    () => data.code.replace(/\\n$/, \"\").split(\"\\n\"),\n    [data.code],\n  );\n  const lineCount = lines.length;\n\n  const language = useMemo(\n    () =>\n      normalizeCodeLanguage(data.language) ??\n      inferLanguageFromFilename(data.filename),\n    [data.language, data.filename],\n  );\n\n  // Highlight each line once; empty lines keep their height with a NBSP.\n  const highlightedLines = useMemo(\n    () =>\n      lines.map((text) => (text.length ? highlightCode(text, language) : \" \")),\n    [lines, language],\n  );\n\n  const resolved = useMemo(\n    () => resolveAnnotations(data.annotations, () => lineCount),\n    [data.annotations, lineCount],\n  );\n\n  // line number (1-based) → resolved annotations covering it.\n  const lineMarkers = useMemo(() => buildLineMarkerMap(resolved), [resolved]);\n\n  const hasAnnotations = hasRailAnnotations(resolved);\n  const langChip = data.language?.trim();\n\n  const codeSurface = (\n    <div className=\"overflow-hidden rounded-xl border border-plan-line bg-plan-code\">\n      {(data.filename || langChip) && (\n        <div className=\"flex items-center gap-2 border-b border-plan-line bg-plan-block/50 px-3.5 py-2\">\n          <IconCode className=\"size-3.5 shrink-0 text-plan-muted\" />\n          <span className=\"min-w-0 flex-1 truncate font-mono text-[13px] font-medium text-plan-code-text\">\n            {data.filename || \"snippet\"}\n          </span>\n          {langChip && (\n            <span className=\"shrink-0 rounded border border-plan-line px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-wide text-plan-muted\">\n              {langChip}\n            </span>\n          )}\n        </div>\n      )}\n      <div className=\"overflow-x-auto py-1.5\">\n        <div className=\"min-w-full font-mono text-[12.5px] leading-[22px]\">\n          {lines.map((_text, idx) => {\n            const lineNo = idx + 1;\n            const markers = lineMarkers.get(lineNo);\n            const isAnnotated = !!markers?.length;\n            const isActive =\n              activeIndex != null &&\n              !!markers?.some((m) => m.index === activeIndex);\n            return (\n              <div\n                key={lineNo}\n                className={cn(\n                  \"flex w-full\",\n                  isActive\n                    ? \"bg-amber-400/20 dark:bg-amber-300/15\"\n                    : isAnnotated\n                      ? \"bg-amber-400/[0.07] dark:bg-amber-300/[0.07]\"\n                      : null,\n                )}\n                onMouseEnter={\n                  isAnnotated && markers\n                    ? () => setActiveIndex(markers[0].index)\n                    : undefined\n                }\n                onMouseLeave={\n                  isAnnotated ? () => setActiveIndex(null) : undefined\n                }\n              >\n                {/* Accent rail: amber on annotated lines, brighter when active. */}\n                <span\n                  aria-hidden\n                  className={cn(\n                    \"w-[3px] shrink-0 self-stretch\",\n                    isAnnotated\n                      ? isActive\n                        ? \"bg-amber-500 dark:bg-amber-400\"\n                        : \"bg-amber-400/45 dark:bg-amber-300/35\"\n                      : null,\n                  )}\n                />\n                <span className=\"w-11 shrink-0 select-none px-3 text-right text-[11px] tabular-nums text-plan-muted/60\">\n                  {lineNo}\n                </span>\n                <span className=\"flex-1 whitespace-pre pr-4 text-plan-code-text\">\n                  {highlightedLines[idx]}\n                </span>\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      {hasAnnotations ? (\n        <div className=\"grid items-start gap-3 md:grid-cols-[minmax(0,1fr)_minmax(190px,250px)]\">\n          {codeSurface}\n          <AnnotationNoteRail\n            items={resolved}\n            activeIndex={activeIndex}\n            onActiveChange={setActiveIndex}\n            ctx={ctx}\n          />\n        </div>\n      ) : (\n        codeSurface\n      )}\n      {summary && <p className=\"mt-5 text-plan-muted\">{summary}</p>}\n    </section>\n  );\n}\n\n/* ── Edit (panel) ──────────────────────────────────────────────────────────── */\n\nconst codeAreaClass = \"min-h-[160px] font-mono text-xs leading-5\";\n\nfunction AnnotatedCodeEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<AnnotatedCodeData>) {\n  const annotations = data.annotations ?? [];\n  const patch = (next: Partial<AnnotatedCodeData>) =>\n    onChange({ ...data, ...next });\n\n  const updateAnnotation = (\n    index: number,\n    next: Partial<AnnotatedCodeAnnotation>,\n  ) =>\n    patch({\n      annotations: annotations.map((annotation, i) =>\n        i === index ? { ...annotation, ...next } : annotation,\n      ),\n    });\n\n  const removeAnnotation = (index: number) =>\n    patch({ annotations: annotations.filter((_, i) => i !== index) });\n\n  const addAnnotation = () => {\n    if (annotations.length >= 80) return; // schema max\n    patch({\n      annotations: [...annotations, { lines: \"1\", label: \"\", note: \"\" }],\n    });\n  };\n\n  return (\n    <div className=\"flex flex-col gap-3\" data-plan-interactive>\n      <div className=\"grid gap-3 sm:grid-cols-2\">\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-filename\" className=\"text-xs\">\n            Filename\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-filename\"\n            value={data.filename ?? \"\"}\n            placeholder=\"src/server/auth.ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ filename: event.target.value || undefined })\n            }\n          />\n        </div>\n        <div className=\"flex flex-col gap-1.5\">\n          <DevLabel htmlFor=\"annotated-code-language\" className=\"text-xs\">\n            Language\n          </DevLabel>\n          <DevInput\n            id=\"annotated-code-language\"\n            value={data.language ?? \"\"}\n            placeholder=\"ts\"\n            disabled={!editable}\n            onChange={(event) =>\n              patch({ language: event.target.value || undefined })\n            }\n          />\n        </div>\n      </div>\n\n      <div className=\"flex flex-col gap-1.5\">\n        <DevLabel htmlFor=\"annotated-code-code\" className=\"text-xs\">\n          Code\n        </DevLabel>\n        <DevTextarea\n          id=\"annotated-code-code\"\n          spellCheck={false}\n          className={codeAreaClass}\n          value={data.code}\n          disabled={!editable}\n          onChange={(event) => patch({ code: event.target.value })}\n        />\n      </div>\n\n      <div className=\"flex flex-col gap-2\">\n        <div className=\"flex items-center justify-between\">\n          <DevLabel className=\"text-xs\">Annotations</DevLabel>\n          {editable && annotations.length < 80 && (\n            <button\n              type=\"button\"\n              data-plan-interactive\n              onClick={addAnnotation}\n              className=\"flex cursor-pointer items-center gap-1 rounded-md px-2 py-1 text-xs font-medium text-plan-muted transition-colors hover:bg-plan-block/60 hover:text-plan-text\"\n            >\n              <IconPlus className=\"size-3.5\" />\n              Add annotation\n            </button>\n          )}\n        </div>\n        {annotations.length === 0 && (\n          <p className=\"text-xs text-plan-muted\">\n            No annotations yet. Add one to anchor a note to a line range.\n          </p>\n        )}\n        {annotations.map((annotation, index) => (\n          <div\n            key={index}\n            className=\"flex flex-col gap-2 rounded-md border border-plan-line bg-plan-block/30 p-2\"\n          >\n            <div className=\"grid gap-2 sm:grid-cols-[120px_minmax(0,1fr)_auto]\">\n              <DevInput\n                aria-label={`Annotation ${index + 1} lines`}\n                value={annotation.lines}\n                placeholder=\"3-5\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, { lines: event.target.value })\n                }\n              />\n              <DevInput\n                aria-label={`Annotation ${index + 1} label`}\n                value={annotation.label ?? \"\"}\n                placeholder=\"Label (optional)\"\n                disabled={!editable}\n                onChange={(event) =>\n                  updateAnnotation(index, {\n                    label: event.target.value || undefined,\n                  })\n                }\n              />\n              {editable && (\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label={`Remove annotation ${index + 1}`}\n                  onClick={() => removeAnnotation(index)}\n                  className=\"flex size-9 shrink-0 cursor-pointer items-center justify-center rounded-md text-plan-muted transition-colors hover:bg-muted hover:text-foreground\"\n                >\n                  <IconTrash className=\"size-4\" />\n                </button>\n              )}\n            </div>\n            <DevTextarea\n              aria-label={`Annotation ${index + 1} note`}\n              className=\"min-h-[60px] text-sm\"\n              value={annotation.note}\n              placeholder=\"Explain what these lines do…\"\n              disabled={!editable}\n              onChange={(event) =>\n                updateAnnotation(index, { note: event.target.value })\n              }\n            />\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nexport { AnnotatedCodeRead, AnnotatedCodeEdit };\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"ApiEndpointBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/ApiEndpointBlock.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EACV,eAAe,EAKhB,MAAM,0BAA0B,CAAC;AAgHlC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,eAAe,CAAC,2CAqNjC;AAMD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,eAAe,CAAC,2CAsTjC"}
+{"version":3,"file":"ApiEndpointBlock.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/ApiEndpointBlock.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,KAAK,EAEV,eAAe,EAKhB,MAAM,0BAA0B,CAAC;AAsOlC;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,eAAe,CAAC,2CAsRjC;AAkBD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,cAAc,CAAC,eAAe,CAAC,2CAiXjC"}

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

@@ -1,8 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
-import { IconChevronRight, IconLock, IconPlus, IconTrash, } from "@tabler/icons-react";
+import { IconArrowNarrowRight, IconChevronRight, IconLock, IconPlus, IconTrash, } from "@tabler/icons-react";
 import { cn } from "../../utils.js";
-import { API_ENDPOINT_METHODS, API_PARAM_LOCATIONS, } from "./api-endpoint.config.js";
+import { API_ENDPOINT_CHANGES, API_ENDPOINT_METHODS, API_PARAM_LOCATIONS, } from "./api-endpoint.config.js";
 import { JsonExplorerSurface } from "./JsonExplorerBlock.js";
 import { DevBadge, DevInput, DevSwitch, DevTextarea, DevSelect, } from "./dev-doc-ui.js";
 import { CodeSurface } from "./HighlightedCode.js";
@@ -46,6 +46,71 @@ function statusPillClass(status) {
     // 3xx and everything else → neutral slate.
     return "bg-slate-200 text-slate-700 dark:bg-slate-500/20 dark:text-slate-300";
 }
+/* ── Theme-aware change tokens (shared vocabulary with file-tree/data-model) ── */
+/**
+ * Change-chip palette — IDENTICAL to `FileTreeBlock`'s `CHANGE_BADGE` so a route /
+ * param / response chip reads the same as a file or field change chip elsewhere
+ * in the recap. Tinted background + saturated text in BOTH the `.dark` plan theme
+ * and light mode via Tailwind `dark:` variants (never a dark-only palette).
+ */
+const CHANGE_BADGE = {
+    added: "bg-emerald-100 text-emerald-700 dark:bg-emerald-500/15 dark:text-emerald-300",
+    modified: "bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300",
+    removed: "bg-red-100 text-red-700 dark:bg-red-500/15 dark:text-red-300",
+    renamed: "bg-violet-100 text-violet-700 dark:bg-violet-500/15 dark:text-violet-300",
+};
+/** Single-letter glyph shown in the compact chip (VS Code gutter convention). */
+const CHANGE_GLYPH = {
+    added: "A",
+    modified: "M",
+    removed: "D",
+    renamed: "R",
+};
+/** Human label for the chip text + its `title` / `aria-label`. */
+const CHANGE_LABEL = {
+    added: "Added",
+    modified: "Modified",
+    removed: "Removed",
+    renamed: "Renamed",
+};
+/** Accent ink echoing a change color, for the name/path it applies to. */
+const CHANGE_INK = {
+    added: "text-emerald-700 dark:text-emerald-300",
+    modified: "text-blue-700 dark:text-blue-300",
+    removed: "text-red-600 line-through dark:text-red-300",
+    renamed: "text-violet-700 dark:text-violet-300",
+};
+/**
+ * A change chip: compact single-glyph badge (A/M/D/R) by default, or a labeled
+ * pill (`variant="label"`) for the endpoint header where there is room. Matches
+ * the file-tree change badge so the recap reads consistently.
+ */
+function ChangeChip({ change, variant = "glyph", className, }) {
+    if (variant === "label") {
+        return (_jsx("span", { title: CHANGE_LABEL[change], className: cn("shrink-0 rounded px-1.5 py-0.5 text-[10px] font-bold uppercase tracking-wide", CHANGE_BADGE[change], className), children: CHANGE_LABEL[change] }));
+    }
+    return (_jsx("span", { title: CHANGE_LABEL[change], "aria-label": CHANGE_LABEL[change], className: cn("flex size-4 shrink-0 items-center justify-center rounded text-[10px] font-bold leading-none", CHANGE_BADGE[change], className), children: CHANGE_GLYPH[change] }));
+}
+/**
+ * Before → after for a modified param: the prior `was` value struck through, a
+ * narrow arrow, then the current value (e.g. `optional → required`, or the old
+ * type → the new type). When `was` is absent we just show the current value.
+ */
+function WasArrowCurrent({ was, current, }) {
+    if (!was)
+        return _jsx(_Fragment, { children: current });
+    return (_jsxs("span", { className: "inline-flex items-center gap-1", children: [_jsx("span", { className: "text-plan-muted line-through", children: was }), _jsx(IconArrowNarrowRight, { className: "size-3 shrink-0 text-plan-muted" }), current] }));
+}
+/**
+ * A param carries a single `was` (prior value) for a `modified` change, but that
+ * value may describe either the required flag or the type. Decide which column
+ * the before→after belongs to: a `was` of `required`/`optional` is a required
+ * flag flip; anything else is treated as the prior type.
+ */
+function wasIsRequiredFlag(was) {
+    const v = was.trim().toLowerCase();
+    return v === "required" || v === "optional";
+}
 /** Guess a fence language from a content type so examples highlight nicely. */
 function fenceLangForContentType(contentType) {
     const ct = (contentType ?? "").toLowerCase();
@@ -94,10 +159,44 @@ export function ApiEndpointRead({ data, blockId, title, summary, ctx, }) {
         hasRequest ||
         responses.length > 0 ||
         Boolean(data.auth);
-    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-plan-line bg-plan-block", children: [_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": open, onClick: () => setOpen((value) => !value), className: cn("flex w-full items-center gap-3 px-4 py-3 text-left transition-colors", "hover:bg-accent/40"), children: [_jsx(IconChevronRight, { className: cn("size-4 shrink-0 text-plan-muted transition-transform", open && "rotate-90") }), _jsx("span", { className: cn("shrink-0 rounded-md px-2 py-1 font-mono text-xs font-bold uppercase tracking-wide", METHOD_PILL[data.method]), children: data.method }), _jsx("span", { className: cn("min-w-0 truncate font-mono text-sm font-semibold text-plan-text", data.deprecated && "text-plan-muted line-through"), children: data.path }), data.deprecated && (_jsx(DevBadge, { className: "shrink-0 border-amber-500/40 text-amber-600 dark:text-amber-300", children: "Deprecated" })), (data.summary || summary) && (_jsx("span", { className: "ml-1 min-w-0 flex-1 truncate text-sm text-plan-muted", children: data.summary || summary })), data.auth && (_jsx(IconLock, { className: "size-3.5 shrink-0 text-plan-muted", "aria-label": "Requires authentication" }))] }), open && hasBody && (_jsxs("div", { className: "border-t border-plan-line px-4 py-4", children: [data.auth && (_jsxs("div", { className: "mb-4 flex items-center gap-2 text-xs text-plan-muted", children: [_jsx(IconLock, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium text-plan-text", children: "Auth:" }), " ", data.auth] })] })), data.description?.trim() && (_jsx("div", { className: "an-api-endpoint-desc", children: ctx.renderMarkdown?.(data.description) })), params.length > 0 && (_jsxs("div", { className: "mt-5", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Parameters" }), _jsx("div", { className: "mt-2 overflow-hidden rounded-lg border border-plan-line", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-accent/30 text-left text-xs uppercase tracking-wide text-plan-muted", children: [_jsx("th", { className: "px-3 py-2 font-medium", children: "Name" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "In" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Type" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Required" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Description" })] }) }), _jsx("tbody", { children: params.map((param, index) => (_jsxs("tr", { className: "border-t border-plan-line align-top", children: [_jsx("td", { className: "px-3 py-2 font-mono text-xs font-semibold text-plan-text", children: param.name }), _jsx("td", { className: "px-3 py-2", children: _jsx("span", { className: cn("rounded px-1.5 py-0.5 font-mono text-[11px] font-semibold", PARAM_IN_BADGE[param.in]), children: param.in }) }), _jsx("td", { className: "px-3 py-2 font-mono text-xs text-plan-muted", children: param.type || "—" }), _jsx("td", { className: "px-3 py-2 text-xs", children: param.required ? (_jsx("span", { className: "font-medium text-red-600 dark:text-red-300", children: "required" })) : (_jsx("span", { className: "text-plan-muted", children: "optional" })) }), _jsx("td", { className: "px-3 py-2 text-xs text-plan-muted", children: param.description || "—" })] }, `${param.name}-${index}`))) })] }) })] })), hasRequest && (_jsxs("div", { className: "mt-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Request body" }), data.request?.contentType && (_jsx("span", { className: "rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted", children: data.request.contentType }))] }), data.request?.example && (_jsx(ApiExample, { example: data.request.example, contentType: data.request.contentType, className: "mt-2 an-api-endpoint-example" }))] })), responses.length > 0 && (_jsxs("div", { className: "mt-5", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Responses" }), _jsx("div", { className: "mt-2 flex flex-col gap-3", children: responses.map((response, index) => (_jsxs("div", { className: "rounded-lg border border-plan-line", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("span", { className: cn("rounded px-2 py-0.5 font-mono text-xs font-bold", statusPillClass(response.status)), children: response.status }), response.description && (_jsx("span", { className: "text-sm text-plan-muted", children: response.description }))] }), response.example && (_jsx("div", { className: "border-t border-plan-line px-3 pb-3 pt-3 an-api-endpoint-example", children: _jsx(ApiExample, { example: response.example, className: "mt-0" }) }))] }, `${response.status}-${index}`))) })] }))] }))] })] }));
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsxs("div", { className: "overflow-hidden rounded-xl border border-plan-line bg-plan-block", children: [_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-expanded": open, onClick: () => setOpen((value) => !value), className: cn("flex w-full items-center gap-3 px-4 py-3 text-left transition-colors", "hover:bg-accent/40"), children: [_jsx(IconChevronRight, { className: cn("size-4 shrink-0 text-plan-muted transition-transform", open && "rotate-90") }), _jsx("span", { className: cn("shrink-0 rounded-md px-2 py-1 font-mono text-xs font-bold uppercase tracking-wide", METHOD_PILL[data.method]), children: data.method }), _jsx("span", { className: cn("min-w-0 truncate font-mono text-sm font-semibold", 
+                                // `change` ink composes with `deprecated`: a deprecated route
+                                // still mutes/strikes its path; a changed route tints it (a
+                                // removed route also strikes via CHANGE_INK).
+                                data.change ? CHANGE_INK[data.change] : "text-plan-text", data.deprecated && "text-plan-muted line-through"), children: data.path }), data.change && _jsx(ChangeChip, { change: data.change, variant: "label" }), data.deprecated && (_jsx(DevBadge, { className: "shrink-0 border-amber-500/40 text-amber-600 dark:text-amber-300", children: "Deprecated" })), (data.summary || summary) && (_jsx("span", { className: "ml-1 min-w-0 flex-1 truncate text-sm text-plan-muted", children: data.summary || summary })), data.auth && (_jsx(IconLock, { className: "size-3.5 shrink-0 text-plan-muted", "aria-label": "Requires authentication" }))] }), open && hasBody && (_jsxs("div", { className: "border-t border-plan-line px-4 py-4", children: [data.auth && (_jsxs("div", { className: "mb-4 flex items-center gap-2 text-xs text-plan-muted", children: [_jsx(IconLock, { className: "size-3.5 shrink-0" }), _jsxs("span", { children: [_jsx("span", { className: "font-medium text-plan-text", children: "Auth:" }), " ", data.auth] })] })), data.description?.trim() && (_jsx("div", { className: "an-api-endpoint-desc", children: ctx.renderMarkdown?.(data.description) })), params.length > 0 && (_jsxs("div", { className: "mt-5", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Parameters" }), _jsx("div", { className: "mt-2 overflow-hidden rounded-lg border border-plan-line", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-accent/30 text-left text-xs uppercase tracking-wide text-plan-muted", children: [_jsx("th", { className: "px-3 py-2 font-medium", children: "Name" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "In" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Type" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Required" }), _jsx("th", { className: "px-3 py-2 font-medium", children: "Description" })] }) }), _jsx("tbody", { children: params.map((param, index) => {
+                                                        const change = param.change;
+                                                        // A `modified` `was` describes either the required flag
+                                                        // or the prior type; route it to the right column.
+                                                        const wasForRequired = change === "modified" &&
+                                                            param.was &&
+                                                            wasIsRequiredFlag(param.was)
+                                                            ? param.was
+                                                            : undefined;
+                                                        const wasForType = change === "modified" &&
+                                                            param.was &&
+                                                            !wasIsRequiredFlag(param.was)
+                                                            ? param.was
+                                                            : undefined;
+                                                        return (_jsxs("tr", { className: "border-t border-plan-line align-top", children: [_jsx("td", { className: "px-3 py-2 font-mono text-xs font-semibold", children: _jsxs("span", { className: "flex items-center gap-1.5", children: [_jsx("span", { className: cn(change
+                                                                                    ? CHANGE_INK[change]
+                                                                                    : "text-plan-text"), children: param.name }), change && _jsx(ChangeChip, { change: change })] }) }), _jsx("td", { className: "px-3 py-2", children: _jsx("span", { className: cn("rounded px-1.5 py-0.5 font-mono text-[11px] font-semibold", PARAM_IN_BADGE[param.in]), children: param.in }) }), _jsx("td", { className: "px-3 py-2 font-mono text-xs text-plan-muted", children: _jsx(WasArrowCurrent, { was: wasForType, current: _jsx("span", { className: cn(wasForType && "text-plan-text"), children: param.type || "—" }) }) }), _jsx("td", { className: "px-3 py-2 text-xs", children: _jsx(WasArrowCurrent, { was: wasForRequired, current: param.required ? (_jsx("span", { className: "font-medium text-red-600 dark:text-red-300", children: "required" })) : (_jsx("span", { className: "text-plan-muted", children: "optional" })) }) }), _jsx("td", { className: "px-3 py-2 text-xs text-plan-muted", children: param.description || "—" })] }, `${param.name}-${index}`));
+                                                    }) })] }) })] })), hasRequest && (_jsxs("div", { className: "mt-5", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Request body" }), data.request?.contentType && (_jsx("span", { className: "rounded bg-accent/40 px-1.5 py-0.5 font-mono text-[11px] text-plan-muted", children: data.request.contentType }))] }), data.request?.example && (_jsx(ApiExample, { example: data.request.example, contentType: data.request.contentType, className: "mt-2 an-api-endpoint-example" }))] })), responses.length > 0 && (_jsxs("div", { className: "mt-5", children: [_jsx("div", { className: "text-xs font-semibold uppercase tracking-wide text-plan-muted", children: "Responses" }), _jsx("div", { className: "mt-2 flex flex-col gap-3", children: responses.map((response, index) => (_jsxs("div", { className: "rounded-lg border border-plan-line", children: [_jsxs("div", { className: "flex items-center gap-2 px-3 py-2", children: [_jsx("span", { className: cn("rounded px-2 py-0.5 font-mono text-xs font-bold", statusPillClass(response.status)), children: response.status }), response.description && (_jsx("span", { className: cn("text-sm", response.change
+                                                                ? CHANGE_INK[response.change]
+                                                                : "text-plan-muted"), children: response.description })), response.change && (_jsx(ChangeChip, { change: response.change, variant: "label", className: "ml-auto" }))] }), response.example && (_jsx("div", { className: "border-t border-plan-line px-3 pb-3 pt-3 an-api-endpoint-example", children: _jsx(ApiExample, { example: response.example, className: "mt-0" }) }))] }, `${response.status}-${index}`))) })] }))] }))] })] }));
 }
 /* ── Edit (panel form) ─────────────────────────────────────────────────────── */
 const fieldLabelClass = "text-xs font-medium text-muted-foreground";
+/**
+ * Options for a change `DevSelect` — a leading "No change" entry (decodes to
+ * `undefined`) plus the four diff states, mirroring the file-tree editor.
+ */
+const CHANGE_SELECT_OPTIONS = [
+    { value: "none", label: "No change" },
+    ...API_ENDPOINT_CHANGES.map((change) => ({
+        value: change,
+        label: CHANGE_LABEL[change],
+    })),
+];
 /**
  * Panel editor for an `api-endpoint` block. A property form: method (Select),
  * path/summary/auth (Input), description (Textarea), deprecated (Switch), plus
@@ -129,17 +228,27 @@ export function ApiEndpointEdit({ data, onChange, editable, }) {
     return (_jsxs("div", { className: "flex flex-col gap-4", "data-plan-interactive": true, children: [_jsxs("div", { className: "grid grid-cols-[120px_minmax(0,1fr)] gap-2", children: [_jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Method" }), _jsx(DevSelect, { className: "h-9", value: data.method, disabled: !editable, onValueChange: (value) => patch({ method: value }), options: API_ENDPOINT_METHODS.map((method) => ({
                                     value: method,
                                     label: method,
-                                })) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Path" }), _jsx(DevInput, { className: "h-9 font-mono", value: data.path, disabled: !editable, placeholder: "/api/resource", onChange: (event) => patch({ path: event.target.value }) })] })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Summary" }), _jsx(DevInput, { className: "h-9", value: data.summary ?? "", disabled: !editable, placeholder: "Short one-line description", onChange: (event) => patch({ summary: event.target.value || undefined }) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Description (markdown)" }), _jsx(DevTextarea, { className: "min-h-[80px]", value: data.description ?? "", disabled: !editable, placeholder: "Longer description, rendered as markdown", onChange: (event) => patch({ description: event.target.value || undefined }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-end gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Auth" }), _jsx(DevInput, { className: "h-9", value: data.auth ?? "", disabled: !editable, placeholder: "e.g. Bearer token", onChange: (event) => patch({ auth: event.target.value || undefined }) })] }), _jsxs("label", { className: "flex items-center gap-2 pb-2", children: [_jsx(DevSwitch, { checked: Boolean(data.deprecated), disabled: !editable, onCheckedChange: (checked) => patch({ deprecated: checked || undefined }) }), _jsx("span", { className: fieldLabelClass, children: "Deprecated" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: fieldLabelClass, children: "Parameters" }), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: addParam, children: [_jsx(IconPlus, { className: "size-3.5" }), "Add"] }))] }), params.map((param, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-input p-2", children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_96px_auto] gap-2", children: [_jsx(DevInput, { className: "h-8 font-mono text-xs", value: param.name, disabled: !editable, placeholder: "name", onChange: (event) => updateParam(index, { name: event.target.value }) }), _jsx(DevSelect, { className: "h-8", value: param.in, disabled: !editable, onValueChange: (value) => updateParam(index, { in: value }), options: API_PARAM_LOCATIONS.map((location) => ({
+                                })) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Path" }), _jsx(DevInput, { className: "h-9 font-mono", value: data.path, disabled: !editable, placeholder: "/api/resource", onChange: (event) => patch({ path: event.target.value }) })] })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Summary" }), _jsx(DevInput, { className: "h-9", value: data.summary ?? "", disabled: !editable, placeholder: "Short one-line description", onChange: (event) => patch({ summary: event.target.value || undefined }) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Description (markdown)" }), _jsx(DevTextarea, { className: "min-h-[80px]", value: data.description ?? "", disabled: !editable, placeholder: "Longer description, rendered as markdown", onChange: (event) => patch({ description: event.target.value || undefined }) })] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_120px_auto] items-end gap-3", children: [_jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Auth" }), _jsx(DevInput, { className: "h-9", value: data.auth ?? "", disabled: !editable, placeholder: "e.g. Bearer token", onChange: (event) => patch({ auth: event.target.value || undefined }) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: fieldLabelClass, children: "Change" }), _jsx(DevSelect, { className: "h-9", value: data.change ?? "none", disabled: !editable, onValueChange: (value) => patch({
+                                    change: value === "none" ? undefined : value,
+                                }), options: CHANGE_SELECT_OPTIONS })] }), _jsxs("label", { className: "flex items-center gap-2 pb-2", children: [_jsx(DevSwitch, { checked: Boolean(data.deprecated), disabled: !editable, onCheckedChange: (checked) => patch({ deprecated: checked || undefined }) }), _jsx("span", { className: fieldLabelClass, children: "Deprecated" })] })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: fieldLabelClass, children: "Parameters" }), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: addParam, children: [_jsx(IconPlus, { className: "size-3.5" }), "Add"] }))] }), params.map((param, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-input p-2", children: [_jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_96px_auto] gap-2", children: [_jsx(DevInput, { className: "h-8 font-mono text-xs", value: param.name, disabled: !editable, placeholder: "name", onChange: (event) => updateParam(index, { name: event.target.value }) }), _jsx(DevSelect, { className: "h-8", value: param.in, disabled: !editable, onValueChange: (value) => updateParam(index, { in: value }), options: API_PARAM_LOCATIONS.map((location) => ({
                                             value: location,
                                             label: location,
                                         })) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove parameter", className: "flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: () => removeParam(index), children: _jsx(IconTrash, { className: "size-4" }) }))] }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2", children: [_jsx(DevInput, { className: "h-8 font-mono text-xs", value: param.type ?? "", disabled: !editable, placeholder: "type (e.g. string)", onChange: (event) => updateParam(index, { type: event.target.value || undefined }) }), _jsxs("label", { className: "flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground", children: [_jsx("input", { type: "checkbox", className: "size-3.5 cursor-pointer accent-primary", checked: Boolean(param.required), disabled: !editable, onChange: (event) => updateParam(index, {
                                                     required: event.target.checked || undefined,
                                                 }) }), "Required"] })] }), _jsx(DevInput, { className: "h-8 text-xs", value: param.description ?? "", disabled: !editable, placeholder: "description", onChange: (event) => updateParam(index, {
                                     description: event.target.value || undefined,
-                                }) })] }, index)))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: fieldLabelClass, children: "Request body" }), _jsx(DevInput, { className: "h-8 font-mono text-xs", value: data.request?.contentType ?? "", disabled: !editable, placeholder: "content type (e.g. application/json)", onChange: (event) => updateRequest({ contentType: event.target.value || undefined }) }), _jsx(DevTextarea, { className: "min-h-[80px] font-mono text-xs", value: data.request?.example ?? "", disabled: !editable, placeholder: '{ "example": "request body" }', onChange: (event) => updateRequest({ example: event.target.value || undefined }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: fieldLabelClass, children: "Responses" }), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: addResponse, children: [_jsx(IconPlus, { className: "size-3.5" }), "Add"] }))] }), responses.map((response, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-input p-2", children: [_jsxs("div", { className: "grid grid-cols-[96px_minmax(0,1fr)_auto] gap-2", children: [_jsx(DevInput, { className: "h-8 font-mono text-xs", value: response.status, disabled: !editable, placeholder: "200", onChange: (event) => updateResponse(index, { status: event.target.value }) }), _jsx(DevInput, { className: "h-8 text-xs", value: response.description ?? "", disabled: !editable, placeholder: "description", onChange: (event) => updateResponse(index, {
+                                }) }), _jsxs("div", { className: "grid grid-cols-[120px_minmax(0,1fr)] gap-2", children: [_jsx(DevSelect, { className: "h-8", value: param.change ?? "none", disabled: !editable, onValueChange: (value) => updateParam(index, {
+                                            change: value === "none"
+                                                ? undefined
+                                                : value,
+                                        }), options: CHANGE_SELECT_OPTIONS }), _jsx(DevInput, { className: "h-8 font-mono text-xs", value: param.was ?? "", disabled: !editable || param.change !== "modified", placeholder: "was (e.g. optional, or old type)", onChange: (event) => updateParam(index, { was: event.target.value || undefined }) })] })] }, index)))] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("span", { className: fieldLabelClass, children: "Request body" }), _jsx(DevInput, { className: "h-8 font-mono text-xs", value: data.request?.contentType ?? "", disabled: !editable, placeholder: "content type (e.g. application/json)", onChange: (event) => updateRequest({ contentType: event.target.value || undefined }) }), _jsx(DevTextarea, { className: "min-h-[80px] font-mono text-xs", value: data.request?.example ?? "", disabled: !editable, placeholder: '{ "example": "request body" }', onChange: (event) => updateRequest({ example: event.target.value || undefined }) })] }), _jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: fieldLabelClass, children: "Responses" }), editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1 rounded-md px-2 py-1 text-xs text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: addResponse, children: [_jsx(IconPlus, { className: "size-3.5" }), "Add"] }))] }), responses.map((response, index) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border border-input p-2", children: [_jsxs("div", { className: "grid grid-cols-[96px_minmax(0,1fr)_auto] gap-2", children: [_jsx(DevInput, { className: "h-8 font-mono text-xs", value: response.status, disabled: !editable, placeholder: "200", onChange: (event) => updateResponse(index, { status: event.target.value }) }), _jsx(DevInput, { className: "h-8 text-xs", value: response.description ?? "", disabled: !editable, placeholder: "description", onChange: (event) => updateResponse(index, {
                                             description: event.target.value || undefined,
                                         }) }), editable && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove response", className: "flex size-8 items-center justify-center rounded-md text-muted-foreground hover:bg-accent/60 hover:text-foreground", onClick: () => removeResponse(index), children: _jsx(IconTrash, { className: "size-4" }) }))] }), _jsx(DevTextarea, { className: "min-h-[64px] font-mono text-xs", value: response.example ?? "", disabled: !editable, placeholder: '{ "example": "response body" }', onChange: (event) => updateResponse(index, {
                                     example: event.target.value || undefined,
-                                }) })] }, index)))] })] }));
+                                }) }), _jsxs("label", { className: "flex items-center gap-2", children: [_jsx("span", { className: fieldLabelClass, children: "Change" }), _jsx(DevSelect, { className: "h-8 w-[120px]", value: response.change ?? "none", disabled: !editable, onValueChange: (value) => updateResponse(index, {
+                                            change: value === "none"
+                                                ? undefined
+                                                : value,
+                                        }), options: CHANGE_SELECT_OPTIONS })] })] }, index)))] })] }));
 }
 //# sourceMappingURL=ApiEndpointBlock.js.map