@agent-native/core 0.40.2 → 0.41.1

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
 import { cn } from "../../utils.js";
 let highlighterLoader = null;
 function loadHighlighter() {
@@ -50,6 +50,59 @@ const LANG_ALIASES = {
     bq: "sql",
     bigquery: "sql",
 };
+/**
+ * Human-facing label for a code language hint (the value stored on a code block
+ * / code tab). Returns `null` for empty / unknown / plain hints so callers can
+ * keep the surface clean (no "Plain text" chrome) when the language is unknown
+ * or auto-detected. Web languages lead because plans skew that way.
+ */
+const LANGUAGE_LABELS = {
+    typescript: "TypeScript",
+    ts: "TypeScript",
+    tsx: "TSX",
+    javascript: "JavaScript",
+    js: "JavaScript",
+    jsx: "JSX",
+    json: "JSON",
+    html: "HTML",
+    css: "CSS",
+    scss: "SCSS",
+    bash: "Bash",
+    sh: "Bash",
+    shell: "Shell",
+    zsh: "Bash",
+    python: "Python",
+    py: "Python",
+    sql: "SQL",
+    yaml: "YAML",
+    yml: "YAML",
+    markdown: "Markdown",
+    md: "Markdown",
+    graphql: "GraphQL",
+    go: "Go",
+    rust: "Rust",
+    ruby: "Ruby",
+    java: "Java",
+    c: "C",
+    cpp: "C++",
+    csharp: "C#",
+    php: "PHP",
+    swift: "Swift",
+    kotlin: "Kotlin",
+    diff: "Diff",
+    dockerfile: "Dockerfile",
+    xml: "XML",
+};
+export function prettyLanguageName(language) {
+    const raw = language
+        ?.trim()
+        .toLowerCase()
+        .replace(/^language-/, "");
+    if (!raw || raw === "text" || raw === "plaintext" || raw === "plain") {
+        return null;
+    }
+    return LANGUAGE_LABELS[raw] ?? raw;
+}
 export function HighlightedCode({ code, language, }) {
     const [html, setHtml] = useState(null);
     useEffect(() => {
@@ -86,7 +139,36 @@ export function HighlightedCode({ code, language, }) {
     }
     return (_jsx("pre", { children: _jsx("code", { className: language ? `language-${language}` : undefined, children: code }) }));
 }
-export function CodeSurface({ code, language, className, }) {
-    return (_jsx("div", { className: cn("plan-code-surface", className ?? "mt-5"), children: _jsx(HighlightedCode, { code: code, language: language }) }));
+/**
+ * Default number of code lines shown before a code surface collapses behind a
+ * "Show N more lines" toggle. Long code panes (read view, code tabs, API specs)
+ * stay scannable instead of dominating the document, matching the rest of the
+ * plan's progressively-disclosed surfaces.
+ */
+export const DEFAULT_CODE_MAX_LINES = 30;
+/**
+ * Read-only code surface used across the plan blocks (code tabs, API specs) and
+ * the markdown read view. Syntax-highlights via {@link HighlightedCode} (Shiki,
+ * client-only with a plain `<pre>` SSR fallback), follows the current
+ * light/dark `--plan-code` palette, and collapses to `maxLines` with an
+ * expand/collapse toggle so long snippets do not run away.
+ *
+ * `maxLines` of `0` / `null` disables collapsing (show everything). The default
+ * is {@link DEFAULT_CODE_MAX_LINES}; the surface only collapses when the code is
+ * actually longer than that.
+ */
+export function CodeSurface({ code, language, maxLines = DEFAULT_CODE_MAX_LINES, className, }) {
+    const [expanded, setExpanded] = useState(false);
+    const lineCount = useMemo(() => (code ? code.replace(/\n$/, "").split("\n").length : 0), [code]);
+    const cap = typeof maxLines === "number" && maxLines > 0 ? maxLines : null;
+    const collapsible = cap != null && lineCount > cap;
+    const collapsed = collapsible && !expanded;
+    const hiddenLines = collapsible ? lineCount - cap : 0;
+    const label = prettyLanguageName(language);
+    return (_jsxs("div", { className: cn("plan-code-surface", className ?? "mt-5"), "data-collapsed": collapsed ? "true" : undefined, children: [label && (_jsx("div", { className: "plan-code-surface-bar", children: _jsx("span", { className: "plan-code-surface-lang", children: label }) })), _jsxs("div", { className: "plan-code-surface-scroll", style: collapsed
+                    ? { "--plan-code-max-lines": cap }
+                    : undefined, children: [_jsx(HighlightedCode, { code: code, language: language }), collapsed && (_jsx("div", { className: "plan-code-surface-fade", "aria-hidden": "true" }))] }), collapsible && (_jsx("button", { type: "button", "data-plan-interactive": true, className: "plan-code-surface-toggle", onClick: () => setExpanded((value) => !value), children: collapsed
+                    ? `Show ${hiddenLines} more line${hiddenLines === 1 ? "" : "s"}`
+                    : "Show less" }))] }));
 }
 //# sourceMappingURL=HighlightedCode.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"HighlightedCode.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/HighlightedCode.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AAcpC,IAAI,iBAAiB,GAAqC,IAAI,CAAC;AAC/D,SAAS,eAAe;IACtB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACvB,iBAAiB,GAAG,CAAC,KAAK,IAAI,EAAE;YAC9B,MAAM,CAAC,EAAE,qBAAqB,EAAE,EAAE,EAAE,qBAAqB,EAAE,CAAC,GAC1D,MAAM,OAAO,CAAC,GAAG,CAAC;gBAChB,MAAM,CAAC,YAAY,CAAC;gBACpB,MAAM,CAAC,wBAAwB,CAAC;aACjC,CAAC,CAAC;YACL,OAAO,qBAAqB,CAAC;gBAC3B,MAAM,EAAE;oBACN,MAAM,CAAC,uCAAuC,CAAC;oBAC/C,MAAM,CAAC,sCAAsC,CAAC;iBAC/C;gBACD,KAAK,EAAE;oBACL,MAAM,CAAC,4BAA4B,CAAC;oBACpC,MAAM,CAAC,4BAA4B,CAAC;oBACpC,MAAM,CAAC,qBAAqB,CAAC;oBAC7B,MAAM,CAAC,qBAAqB,CAAC;oBAC7B,MAAM,CAAC,sBAAsB,CAAC;oBAC9B,MAAM,CAAC,qBAAqB,CAAC;oBAC7B,MAAM,CAAC,sBAAsB,CAAC;oBAC9B,MAAM,CAAC,0BAA0B,CAAC;oBAClC,MAAM,CAAC,sBAAsB,CAAC;oBAC9B,MAAM,CAAC,6BAA6B,CAAC;oBACrC,MAAM,CAAC,wBAAwB,CAAC;oBAChC,MAAM,CAAC,sBAAsB,CAAC;oBAC9B,MAAM,CAAC,qBAAqB,CAAC;iBAC9B;gBACD,MAAM,EAAE,qBAAqB,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;aACpD,CAAyC,CAAC;QAC7C,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,EAAE;YACnB,iBAAiB,GAAG,IAAI,CAAC;YACzB,MAAM,KAAK,CAAC;QACd,CAAC,CAAC,CAAC;IACL,CAAC;IACD,OAAO,iBAAiB,CAAC;AAC3B,CAAC;AAED,MAAM,YAAY,GAA2B;IAC3C,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,YAAY;IAChB,EAAE,EAAE,MAAM;IACV,KAAK,EAAE,MAAM;IACb,GAAG,EAAE,MAAM;IACX,EAAE,EAAE,QAAQ;IACZ,GAAG,EAAE,MAAM;IACX,EAAE,EAAE,UAAU;IACd,EAAE,EAAE,KAAK;IACT,QAAQ,EAAE,KAAK;CAChB,CAAC;AAEF,MAAM,UAAU,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,GAIT;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,eAAe,EAAE;aACd,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE;YACpB,MAAM,SAAS,GAAG,CAAC,QAAQ,IAAI,MAAM,CAAC,CAAC,WAAW,EAAE,CAAC;YACrD,MAAM,QAAQ,GAAG,YAAY,CAAC,SAAS,CAAC,IAAI,SAAS,CAAC;YACtD,MAAM,MAAM,GAAG,WAAW,CAAC,kBAAkB,EAAE,CAAC;YAChD,MAAM,IAAI,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC;YAC3D,OAAO,WAAW,CAAC,UAAU,CAAC,IAAI,EAAE;gBAClC,IAAI;gBACJ,MAAM,EAAE;oBACN,KAAK,EAAE,sBAAsB;oBAC7B,IAAI,EAAE,qBAAqB;iBAC5B;gBACD,YAAY,EAAE,KAAK;aACpB,CAAC,CAAC;QACL,CAAC,CAAC;aACD,IAAI,CAAC,CAAC,GAAG,EAAE,EAAE;YACZ,IAAI,CAAC,SAAS;gBAAE,OAAO,CAAC,GAAa,CAAC,CAAC;QACzC,CAAC,CAAC;aACD,KAAK,CAAC,GAAG,EAAE;YACV,IAAI,CAAC,SAAS;gBAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;QACL,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,cAAK,SAAS,EAAC,YAAY,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAC1E,CAAC;IACJ,CAAC;IACD,OAAO,CACL,wBACE,eAAM,SAAS,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAC3D,IAAI,GACA,GACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,QAAQ,EACR,SAAS,GAKV;IACC,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,mBAAmB,EAAE,SAAS,IAAI,MAAM,CAAC,YAC1D,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,GAAI,GAC/C,CACP,CAAC;AACJ,CAAC","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { cn } from \"../../utils.js\";\n\ntype ShikiHighlighter = {\n  codeToHtml: (\n    code: string,\n    options: {\n      lang: string;\n      themes: { light: string; dark: string };\n      defaultColor?: false | \"light\" | \"dark\";\n    },\n  ) => string | Promise<string>;\n  getLoadedLanguages: () => string[];\n};\n\nlet highlighterLoader: Promise<ShikiHighlighter> | null = null;\nfunction loadHighlighter(): Promise<ShikiHighlighter> {\n  if (!highlighterLoader) {\n    highlighterLoader = (async () => {\n      const [{ createHighlighterCore }, { createOnigurumaEngine }] =\n        await Promise.all([\n          import(\"shiki/core\"),\n          import(\"shiki/engine/oniguruma\"),\n        ]);\n      return createHighlighterCore({\n        themes: [\n          import(\"shiki/themes/github-light-default.mjs\"),\n          import(\"shiki/themes/github-dark-default.mjs\"),\n        ],\n        langs: [\n          import(\"shiki/langs/javascript.mjs\"),\n          import(\"shiki/langs/typescript.mjs\"),\n          import(\"shiki/langs/jsx.mjs\"),\n          import(\"shiki/langs/tsx.mjs\"),\n          import(\"shiki/langs/json.mjs\"),\n          import(\"shiki/langs/css.mjs\"),\n          import(\"shiki/langs/html.mjs\"),\n          import(\"shiki/langs/markdown.mjs\"),\n          import(\"shiki/langs/bash.mjs\"),\n          import(\"shiki/langs/shellscript.mjs\"),\n          import(\"shiki/langs/python.mjs\"),\n          import(\"shiki/langs/yaml.mjs\"),\n          import(\"shiki/langs/sql.mjs\"),\n        ],\n        engine: createOnigurumaEngine(import(\"shiki/wasm\")),\n      }) as unknown as Promise<ShikiHighlighter>;\n    })().catch((error) => {\n      highlighterLoader = null;\n      throw error;\n    });\n  }\n  return highlighterLoader;\n}\n\nconst LANG_ALIASES: Record<string, string> = {\n  js: \"javascript\",\n  ts: \"typescript\",\n  sh: \"bash\",\n  shell: \"bash\",\n  zsh: \"bash\",\n  py: \"python\",\n  yml: \"yaml\",\n  md: \"markdown\",\n  bq: \"sql\",\n  bigquery: \"sql\",\n};\n\nexport function HighlightedCode({\n  code,\n  language,\n}: {\n  code: string;\n  language?: string;\n}) {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadHighlighter()\n      .then((highlighter) => {\n        const requested = (language || \"text\").toLowerCase();\n        const resolved = LANG_ALIASES[requested] ?? requested;\n        const loaded = highlighter.getLoadedLanguages();\n        const lang = loaded.includes(resolved) ? resolved : \"text\";\n        return highlighter.codeToHtml(code, {\n          lang,\n          themes: {\n            light: \"github-light-default\",\n            dark: \"github-dark-default\",\n          },\n          defaultColor: false,\n        });\n      })\n      .then((out) => {\n        if (!cancelled) setHtml(out as string);\n      })\n      .catch(() => {\n        if (!cancelled) setHtml(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  if (html) {\n    return (\n      <div className=\"plan-shiki\" dangerouslySetInnerHTML={{ __html: html }} />\n    );\n  }\n  return (\n    <pre>\n      <code className={language ? `language-${language}` : undefined}>\n        {code}\n      </code>\n    </pre>\n  );\n}\n\nexport function CodeSurface({\n  code,\n  language,\n  className,\n}: {\n  code: string;\n  language?: string;\n  className?: string;\n}) {\n  return (\n    <div className={cn(\"plan-code-surface\", className ?? \"mt-5\")}>\n      <HighlightedCode code={code} language={language} />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"HighlightedCode.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/HighlightedCode.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useMemo, useState, type CSSProperties } from \"react\";\nimport { cn } from \"../../utils.js\";\n\ntype ShikiHighlighter = {\n  codeToHtml: (\n    code: string,\n    options: {\n      lang: string;\n      themes: { light: string; dark: string };\n      defaultColor?: false | \"light\" | \"dark\";\n    },\n  ) => string | Promise<string>;\n  getLoadedLanguages: () => string[];\n};\n\nlet highlighterLoader: Promise<ShikiHighlighter> | null = null;\nfunction loadHighlighter(): Promise<ShikiHighlighter> {\n  if (!highlighterLoader) {\n    highlighterLoader = (async () => {\n      const [{ createHighlighterCore }, { createOnigurumaEngine }] =\n        await Promise.all([\n          import(\"shiki/core\"),\n          import(\"shiki/engine/oniguruma\"),\n        ]);\n      return createHighlighterCore({\n        themes: [\n          import(\"shiki/themes/github-light-default.mjs\"),\n          import(\"shiki/themes/github-dark-default.mjs\"),\n        ],\n        langs: [\n          import(\"shiki/langs/javascript.mjs\"),\n          import(\"shiki/langs/typescript.mjs\"),\n          import(\"shiki/langs/jsx.mjs\"),\n          import(\"shiki/langs/tsx.mjs\"),\n          import(\"shiki/langs/json.mjs\"),\n          import(\"shiki/langs/css.mjs\"),\n          import(\"shiki/langs/html.mjs\"),\n          import(\"shiki/langs/markdown.mjs\"),\n          import(\"shiki/langs/bash.mjs\"),\n          import(\"shiki/langs/shellscript.mjs\"),\n          import(\"shiki/langs/python.mjs\"),\n          import(\"shiki/langs/yaml.mjs\"),\n          import(\"shiki/langs/sql.mjs\"),\n        ],\n        engine: createOnigurumaEngine(import(\"shiki/wasm\")),\n      }) as unknown as Promise<ShikiHighlighter>;\n    })().catch((error) => {\n      highlighterLoader = null;\n      throw error;\n    });\n  }\n  return highlighterLoader;\n}\n\nconst LANG_ALIASES: Record<string, string> = {\n  js: \"javascript\",\n  ts: \"typescript\",\n  sh: \"bash\",\n  shell: \"bash\",\n  zsh: \"bash\",\n  py: \"python\",\n  yml: \"yaml\",\n  md: \"markdown\",\n  bq: \"sql\",\n  bigquery: \"sql\",\n};\n\n/**\n * Human-facing label for a code language hint (the value stored on a code block\n * / code tab). Returns `null` for empty / unknown / plain hints so callers can\n * keep the surface clean (no \"Plain text\" chrome) when the language is unknown\n * or auto-detected. Web languages lead because plans skew that way.\n */\nconst LANGUAGE_LABELS: Record<string, string> = {\n  typescript: \"TypeScript\",\n  ts: \"TypeScript\",\n  tsx: \"TSX\",\n  javascript: \"JavaScript\",\n  js: \"JavaScript\",\n  jsx: \"JSX\",\n  json: \"JSON\",\n  html: \"HTML\",\n  css: \"CSS\",\n  scss: \"SCSS\",\n  bash: \"Bash\",\n  sh: \"Bash\",\n  shell: \"Shell\",\n  zsh: \"Bash\",\n  python: \"Python\",\n  py: \"Python\",\n  sql: \"SQL\",\n  yaml: \"YAML\",\n  yml: \"YAML\",\n  markdown: \"Markdown\",\n  md: \"Markdown\",\n  graphql: \"GraphQL\",\n  go: \"Go\",\n  rust: \"Rust\",\n  ruby: \"Ruby\",\n  java: \"Java\",\n  c: \"C\",\n  cpp: \"C++\",\n  csharp: \"C#\",\n  php: \"PHP\",\n  swift: \"Swift\",\n  kotlin: \"Kotlin\",\n  diff: \"Diff\",\n  dockerfile: \"Dockerfile\",\n  xml: \"XML\",\n};\n\nexport function prettyLanguageName(language?: string | null): string | null {\n  const raw = language\n    ?.trim()\n    .toLowerCase()\n    .replace(/^language-/, \"\");\n  if (!raw || raw === \"text\" || raw === \"plaintext\" || raw === \"plain\") {\n    return null;\n  }\n  return LANGUAGE_LABELS[raw] ?? raw;\n}\n\nexport function HighlightedCode({\n  code,\n  language,\n}: {\n  code: string;\n  language?: string;\n}) {\n  const [html, setHtml] = useState<string | null>(null);\n\n  useEffect(() => {\n    let cancelled = false;\n    loadHighlighter()\n      .then((highlighter) => {\n        const requested = (language || \"text\").toLowerCase();\n        const resolved = LANG_ALIASES[requested] ?? requested;\n        const loaded = highlighter.getLoadedLanguages();\n        const lang = loaded.includes(resolved) ? resolved : \"text\";\n        return highlighter.codeToHtml(code, {\n          lang,\n          themes: {\n            light: \"github-light-default\",\n            dark: \"github-dark-default\",\n          },\n          defaultColor: false,\n        });\n      })\n      .then((out) => {\n        if (!cancelled) setHtml(out as string);\n      })\n      .catch(() => {\n        if (!cancelled) setHtml(null);\n      });\n    return () => {\n      cancelled = true;\n    };\n  }, [code, language]);\n\n  if (html) {\n    return (\n      <div className=\"plan-shiki\" dangerouslySetInnerHTML={{ __html: html }} />\n    );\n  }\n  return (\n    <pre>\n      <code className={language ? `language-${language}` : undefined}>\n        {code}\n      </code>\n    </pre>\n  );\n}\n\n/**\n * Default number of code lines shown before a code surface collapses behind a\n * \"Show N more lines\" toggle. Long code panes (read view, code tabs, API specs)\n * stay scannable instead of dominating the document, matching the rest of the\n * plan's progressively-disclosed surfaces.\n */\nexport const DEFAULT_CODE_MAX_LINES = 30;\n\n/**\n * Read-only code surface used across the plan blocks (code tabs, API specs) and\n * the markdown read view. Syntax-highlights via {@link HighlightedCode} (Shiki,\n * client-only with a plain `<pre>` SSR fallback), follows the current\n * light/dark `--plan-code` palette, and collapses to `maxLines` with an\n * expand/collapse toggle so long snippets do not run away.\n *\n * `maxLines` of `0` / `null` disables collapsing (show everything). The default\n * is {@link DEFAULT_CODE_MAX_LINES}; the surface only collapses when the code is\n * actually longer than that.\n */\nexport function CodeSurface({\n  code,\n  language,\n  maxLines = DEFAULT_CODE_MAX_LINES,\n  className,\n}: {\n  code: string;\n  language?: string;\n  maxLines?: number | null;\n  className?: string;\n}) {\n  const [expanded, setExpanded] = useState(false);\n\n  const lineCount = useMemo(\n    () => (code ? code.replace(/\\n$/, \"\").split(\"\\n\").length : 0),\n    [code],\n  );\n  const cap = typeof maxLines === \"number\" && maxLines > 0 ? maxLines : null;\n  const collapsible = cap != null && lineCount > cap;\n  const collapsed = collapsible && !expanded;\n  const hiddenLines = collapsible ? lineCount - cap : 0;\n  const label = prettyLanguageName(language);\n\n  return (\n    <div\n      className={cn(\"plan-code-surface\", className ?? \"mt-5\")}\n      data-collapsed={collapsed ? \"true\" : undefined}\n    >\n      {label && (\n        <div className=\"plan-code-surface-bar\">\n          <span className=\"plan-code-surface-lang\">{label}</span>\n        </div>\n      )}\n      <div\n        className=\"plan-code-surface-scroll\"\n        style={\n          collapsed\n            ? ({ \"--plan-code-max-lines\": cap } as CSSProperties)\n            : undefined\n        }\n      >\n        <HighlightedCode code={code} language={language} />\n        {collapsed && (\n          <div className=\"plan-code-surface-fade\" aria-hidden=\"true\" />\n        )}\n      </div>\n      {collapsible && (\n        <button\n          type=\"button\"\n          data-plan-interactive\n          className=\"plan-code-surface-toggle\"\n          onClick={() => setExpanded((value) => !value)}\n        >\n          {collapsed\n            ? `Show ${hiddenLines} more line${hiddenLines === 1 ? \"\" : \"s\"}`\n            : \"Show less\"}\n        </button>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/client/blocks/library/annotated-code.config.d.ts

@@ -0,0 +1,58 @@
+import { z } from "zod";
+import type { BlockMdxConfig } from "../types.js";
+/**
+ * Pure (React-free) part of the PLAN-SPECIFIC `annotated-code` block: its data
+ * schema and MDX round-trip config. Shared by the server MDX adapter
+ * (`plan-mdx.ts` via `plan-block-registry.ts`) and the client spec
+ * (`planBlocks.tsx`). Keeping this React-free means importing it into a server
+ * module never pulls React into the Nitro/SSR bundle.
+ *
+ * The block renders a Stripe-docs / Sourcegraph "explain this code" style
+ * walkthrough: a line-numbered monospace code surface where annotated line
+ * ranges get a highlight band + numbered gutter marker, paired with a list of
+ * line-anchored notes (each note targets a 1-based `lines` ref like `"3"` or
+ * `"3-5"`). Hovering a note highlights its lines, and vice-versa.
+ *
+ * The schema MUST stay data-compatible with the `annotated-code` branch of
+ * `planBlockSchema` (`plan-content.ts`), and the MDX `tag` (`AnnotatedCode`) +
+ * flat attribute shape MUST match that inline member so stored `.mdx`
+ * round-trips. `code` is a multiline string ATTRIBUTE (the shared `prop()`
+ * encoder round-trips multiline strings cleanly, and keeping it an attribute —
+ * not MDX children — avoids the source being reflowed as prose); `annotations`
+ * is a JSON array attribute.
+ */
+/** One line-anchored note over the code. */
+export interface AnnotatedCodeAnnotation {
+    /** 1-based line reference: a single line `"3"` or an inclusive range `"3-5"`. */
+    lines: string;
+    /** Optional short label shown before the note (e.g. "Lookup"). */
+    label?: string;
+    /** The note prose (markdown), rendered through `ctx.renderMarkdown`. */
+    note: string;
+}
+export interface AnnotatedCodeData {
+    /** Optional file path shown in the header (e.g. `src/server/auth.ts`). */
+    filename?: string;
+    /** Optional language label (e.g. `ts`). Cosmetic chip + future highlighting. */
+    language?: string;
+    /** The source the walkthrough annotates. Rendered line-numbered. */
+    code: string;
+    /** Line-anchored notes. */
+    annotations?: AnnotatedCodeAnnotation[];
+}
+/**
+ * Data-compatible with the inline `annotated-code` member of `planBlockSchema`
+ * (`plan-content.ts`). `code` is the only required field; `annotations` defaults
+ * to omitted so a fresh block validates from `{ code: "…" }`.
+ */
+export declare const annotatedCodeSchema: z.ZodType<AnnotatedCodeData>;
+/**
+ * MDX config: `<AnnotatedCode filename language code annotations />` self-closing
+ * form. Insertion order of `toAttrs` is the on-disk attribute order. `code` is a
+ * multiline string attribute (round-trips through the shared `prop()` encoder);
+ * `annotations` is a JSON array attribute. `fromAttrs` mirrors a forgiving parse
+ * (`code ?? ""`, `annotations ?? []`, optional `filename`/`language` undefined
+ * when absent) so a plan missing an attribute still parses.
+ */
+export declare const annotatedCodeMdx: BlockMdxConfig<AnnotatedCodeData>;
+//# sourceMappingURL=annotated-code.config.d.ts.map

package/dist/client/blocks/library/annotated-code.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotated-code.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/annotated-code.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,4CAA4C;AAC5C,MAAM,WAAW,uBAAuB;IACtC,iFAAiF;IACjF,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wEAAwE;IACxE,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,oEAAoE;IACpE,IAAI,EAAE,MAAM,CAAC;IACb,2BAA2B;IAC3B,WAAW,CAAC,EAAE,uBAAuB,EAAE,CAAC;CACzC;AAqBD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,EAKf,CAAC,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;AAE9C;;;;;;;GAOG;AACH,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,iBAAiB,CAc9D,CAAC"}

package/dist/client/blocks/library/annotated-code.config.js

@@ -0,0 +1,53 @@
+import { z } from "zod";
+/**
+ * A 1-based line reference: `"3"` or `"3-5"` (inclusive). Whitespace tolerant.
+ * The renderer parses this defensively too, but the schema rejects clearly
+ * malformed refs so authored/agent-generated data stays clean.
+ */
+const lineRefSchema = z
+    .string()
+    .trim()
+    .regex(/^\d+(\s*-\s*\d+)?$/, {
+    message: 'lines must be a 1-based line ref like "3" or "3-5"',
+})
+    .max(40);
+const annotationSchema = z.object({
+    lines: lineRefSchema,
+    label: z.string().trim().max(160).optional(),
+    note: z.string().trim().min(1).max(4_000),
+});
+/**
+ * Data-compatible with the inline `annotated-code` member of `planBlockSchema`
+ * (`plan-content.ts`). `code` is the only required field; `annotations` defaults
+ * to omitted so a fresh block validates from `{ code: "…" }`.
+ */
+export const annotatedCodeSchema = z.object({
+    filename: z.string().trim().max(400).optional(),
+    language: z.string().trim().max(40).optional(),
+    code: z.string().max(100_000),
+    annotations: z.array(annotationSchema).max(80).optional(),
+});
+/**
+ * MDX config: `<AnnotatedCode filename language code annotations />` self-closing
+ * form. Insertion order of `toAttrs` is the on-disk attribute order. `code` is a
+ * multiline string attribute (round-trips through the shared `prop()` encoder);
+ * `annotations` is a JSON array attribute. `fromAttrs` mirrors a forgiving parse
+ * (`code ?? ""`, `annotations ?? []`, optional `filename`/`language` undefined
+ * when absent) so a plan missing an attribute still parses.
+ */
+export const annotatedCodeMdx = {
+    tag: "AnnotatedCode",
+    toAttrs: (data) => ({
+        filename: data.filename,
+        language: data.language,
+        code: data.code,
+        annotations: data.annotations,
+    }),
+    fromAttrs: (attrs) => ({
+        filename: attrs.string("filename"),
+        language: attrs.string("language"),
+        code: attrs.string("code") ?? "",
+        annotations: attrs.array("annotations") ?? [],
+    }),
+};
+//# sourceMappingURL=annotated-code.config.js.map

package/dist/client/blocks/library/annotated-code.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"annotated-code.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/annotated-code.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AA8CxB;;;;GAIG;AACH,MAAM,aAAa,GAAG,CAAC;KACpB,MAAM,EAAE;KACR,IAAI,EAAE;KACN,KAAK,CAAC,oBAAoB,EAAE;IAC3B,OAAO,EAAE,oDAAoD;CAC9D,CAAC;KACD,GAAG,CAAC,EAAE,CAAC,CAAC;AAEX,MAAM,gBAAgB,GAAG,CAAC,CAAC,MAAM,CAAC;IAChC,KAAK,EAAE,aAAa;IACpB,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;IAC5C,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC;CAC1C,CAAuC,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,CAAC,MAAM,CAAC;IAC1C,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;IAC/C,QAAQ,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE;IAC9C,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC;IAC7B,WAAW,EAAE,CAAC,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE;CAC1D,CAA4C,CAAC;AAE9C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAsC;IACjE,GAAG,EAAE,eAAe;IACpB,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ;QACvB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,WAAW,EAAE,IAAI,CAAC,WAAW;KAC9B,CAAC;IACF,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;QAClC,QAAQ,EAAE,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC;QAClC,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;QAChC,WAAW,EAAE,KAAK,CAAC,KAAK,CAA0B,aAAa,CAAC,IAAI,EAAE;KACvE,CAAC;CACH,CAAC","sourcesContent":["import { z } from \"zod\";\nimport type { BlockMdxConfig } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the PLAN-SPECIFIC `annotated-code` block: its data\n * schema and MDX round-trip config. Shared by the server MDX adapter\n * (`plan-mdx.ts` via `plan-block-registry.ts`) and the client spec\n * (`planBlocks.tsx`). Keeping this React-free means importing it into a server\n * module never pulls React into the Nitro/SSR bundle.\n *\n * The block renders a Stripe-docs / Sourcegraph \"explain this code\" style\n * walkthrough: a line-numbered monospace code surface where annotated line\n * ranges get a highlight band + numbered gutter marker, paired with a list of\n * line-anchored notes (each note targets a 1-based `lines` ref like `\"3\"` or\n * `\"3-5\"`). Hovering a note highlights its lines, and vice-versa.\n *\n * The schema MUST stay data-compatible with the `annotated-code` branch of\n * `planBlockSchema` (`plan-content.ts`), and the MDX `tag` (`AnnotatedCode`) +\n * flat attribute shape MUST match that inline member so stored `.mdx`\n * round-trips. `code` is a multiline string ATTRIBUTE (the shared `prop()`\n * encoder round-trips multiline strings cleanly, and keeping it an attribute —\n * not MDX children — avoids the source being reflowed as prose); `annotations`\n * is a JSON array attribute.\n */\n\n/** One line-anchored note over the code. */\nexport interface AnnotatedCodeAnnotation {\n  /** 1-based line reference: a single line `\"3\"` or an inclusive range `\"3-5\"`. */\n  lines: string;\n  /** Optional short label shown before the note (e.g. \"Lookup\"). */\n  label?: string;\n  /** The note prose (markdown), rendered through `ctx.renderMarkdown`. */\n  note: string;\n}\n\nexport interface AnnotatedCodeData {\n  /** Optional file path shown in the header (e.g. `src/server/auth.ts`). */\n  filename?: string;\n  /** Optional language label (e.g. `ts`). Cosmetic chip + future highlighting. */\n  language?: string;\n  /** The source the walkthrough annotates. Rendered line-numbered. */\n  code: string;\n  /** Line-anchored notes. */\n  annotations?: AnnotatedCodeAnnotation[];\n}\n\n/**\n * A 1-based line reference: `\"3\"` or `\"3-5\"` (inclusive). Whitespace tolerant.\n * The renderer parses this defensively too, but the schema rejects clearly\n * malformed refs so authored/agent-generated data stays clean.\n */\nconst lineRefSchema = z\n  .string()\n  .trim()\n  .regex(/^\\d+(\\s*-\\s*\\d+)?$/, {\n    message: 'lines must be a 1-based line ref like \"3\" or \"3-5\"',\n  })\n  .max(40);\n\nconst annotationSchema = z.object({\n  lines: lineRefSchema,\n  label: z.string().trim().max(160).optional(),\n  note: z.string().trim().min(1).max(4_000),\n}) as z.ZodType<AnnotatedCodeAnnotation>;\n\n/**\n * Data-compatible with the inline `annotated-code` member of `planBlockSchema`\n * (`plan-content.ts`). `code` is the only required field; `annotations` defaults\n * to omitted so a fresh block validates from `{ code: \"…\" }`.\n */\nexport const annotatedCodeSchema = z.object({\n  filename: z.string().trim().max(400).optional(),\n  language: z.string().trim().max(40).optional(),\n  code: z.string().max(100_000),\n  annotations: z.array(annotationSchema).max(80).optional(),\n}) as unknown as z.ZodType<AnnotatedCodeData>;\n\n/**\n * MDX config: `<AnnotatedCode filename language code annotations />` self-closing\n * form. Insertion order of `toAttrs` is the on-disk attribute order. `code` is a\n * multiline string attribute (round-trips through the shared `prop()` encoder);\n * `annotations` is a JSON array attribute. `fromAttrs` mirrors a forgiving parse\n * (`code ?? \"\"`, `annotations ?? []`, optional `filename`/`language` undefined\n * when absent) so a plan missing an attribute still parses.\n */\nexport const annotatedCodeMdx: BlockMdxConfig<AnnotatedCodeData> = {\n  tag: \"AnnotatedCode\",\n  toAttrs: (data) => ({\n    filename: data.filename,\n    language: data.language,\n    code: data.code,\n    annotations: data.annotations,\n  }),\n  fromAttrs: (attrs) => ({\n    filename: attrs.string(\"filename\"),\n    language: attrs.string(\"language\"),\n    code: attrs.string(\"code\") ?? \"\",\n    annotations: attrs.array<AnnotatedCodeAnnotation>(\"annotations\") ?? [],\n  }),\n};\n"]}

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

@@ -45,9 +45,9 @@ export function ChecklistEditor({ data, onChange, editable, }) {
     const setLabel = (id, label) => update(items.map((item) => (item.id === id ? { ...item, label } : item)));
     const remove = (id) => update(items.filter((item) => item.id !== id));
     const add = () => update([...items, { id: newItemId(), label: "", checked: false }]);
-    return (_jsxs("div", { className: "grid gap-2", children: [items.map((item) => (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": item.checked ? "Mark incomplete" : "Mark complete", className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded border", item.checked
+    return (_jsxs("div", { className: "grid gap-2", children: [items.map((item) => (_jsxs("div", { className: "group flex items-start gap-2", children: [_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": item.checked ? "Mark incomplete" : "Mark complete", className: cn("mt-1 flex size-5 shrink-0 items-center justify-center rounded border", item.checked
                             ? "border-primary bg-primary text-primary-foreground"
-                            : "border-plan-line"), onClick: () => toggle(item.id), children: item.checked && _jsx(IconCheck, { className: "size-3.5" }) }), _jsx("input", { type: "text", "data-plan-interactive": true, className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Checklist item", value: item.label, disabled: !editable, onChange: (event) => setLabel(item.id, event.target.value) }), _jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove item", className: "mt-1 flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50", disabled: !editable, onClick: () => remove(item.id), children: _jsx(IconX, { className: "size-4" }) })] }, item.id))), _jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1.5 self-start rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50", disabled: !editable, onClick: add, children: [_jsx(IconPlus, { className: "size-4" }), "Add item"] })] }));
+                            : "border-plan-line"), onClick: () => toggle(item.id), children: item.checked && _jsx(IconCheck, { className: "size-3.5" }) }), _jsx("input", { type: "text", "data-plan-interactive": true, className: "flex h-9 w-full rounded-md bg-transparent px-3 py-1 text-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Checklist item", value: item.label, disabled: !editable, onChange: (event) => setLabel(item.id, event.target.value) }), _jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Remove item", className: "mt-1 flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 disabled:opacity-50", disabled: !editable, onClick: () => remove(item.id), children: _jsx(IconX, { className: "size-4" }) })] }, item.id))), _jsxs("button", { type: "button", "data-plan-interactive": true, className: "flex items-center gap-1.5 self-start rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50", disabled: !editable, onClick: add, children: [_jsx(IconPlus, { className: "size-4" }), "Add item"] })] }));
 }
 /**
  * The standard checklist block spec (with React `Read`/`Edit`). Apps register

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

@@ -1 +1 @@
-{"version":3,"file":"checklist.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/checklist.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconCheck, IconPlus, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps } from \"../types.js\";\nimport {\n  checklistSchema,\n  checklistMdx,\n  type ChecklistData,\n  type ChecklistItem,\n} from \"./checklist.config.js\";\n\n/**\n * Standard `checklist` block. A list of toggleable items, each with a label and\n * an optional note. Lives in core so any app can register it.\n *\n * `Read` mirrors the legacy plan `PlanBlockView` checklist branch byte-for-byte\n * (same `plan-block` section, toggle buttons, `IconCheck` marker, and the\n * existing toggle-via-`onChange` behavior) so converting the block to the\n * registry does not change rendered output. The plan CSS classes\n * (`plan-block`, `text-plan-*`, `border-plan-line`) resolve against the plan\n * app's stylesheet at render time, exactly as before.\n *\n * `Edit` is a custom editor (the schema auto-editor can't edit an array of\n * objects): it lets you add, remove, toggle, and relabel items inline.\n */\n\n/** Mint a reasonably-unique item id without pulling a dep into core. */\nfunction newItemId(): string {\n  return `item-${Math.random().toString(36).slice(2, 10)}`;\n}\n\n/**\n * Read renderer. Note `onToggle` is supplied by the block dispatcher for the\n * historical click-to-toggle behavior; in pure read contexts it is omitted and\n * the markers render statically.\n */\nexport function ChecklistBlock({\n  data,\n  blockId,\n  title,\n  onToggle,\n}: BlockReadProps<ChecklistData> & {\n  onToggle?: (itemId: string) => void;\n}) {\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      <div className=\"grid gap-3\">\n        {data.items.map((item) =>\n          onToggle ? (\n            <button\n              key={item.id}\n              type=\"button\"\n              data-plan-interactive\n              className=\"flex items-start gap-3 text-left text-plan-muted\"\n              onClick={() => onToggle(item.id)}\n            >\n              <ChecklistMarker checked={item.checked} />\n              <ChecklistItemBody item={item} />\n            </button>\n          ) : (\n            <div\n              key={item.id}\n              className=\"flex items-start gap-3 text-left text-plan-muted\"\n            >\n              <ChecklistMarker checked={item.checked} />\n              <ChecklistItemBody item={item} />\n            </div>\n          ),\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction ChecklistMarker({ checked }: { checked?: boolean }) {\n  return (\n    <span\n      className={cn(\n        \"mt-1 flex size-5 items-center justify-center rounded border\",\n        checked\n          ? \"border-primary bg-primary text-primary-foreground\"\n          : \"border-plan-line\",\n      )}\n    >\n      {checked && <IconCheck className=\"size-3.5\" />}\n    </span>\n  );\n}\n\nfunction ChecklistItemBody({ item }: { item: ChecklistItem }) {\n  return (\n    <span>\n      <span className=\"block text-plan-text\">{item.label}</span>\n      {item.note && <span className=\"block text-sm\">{item.note}</span>}\n    </span>\n  );\n}\n\n/** Custom editor: toggle, relabel, add, and remove items. */\nexport function ChecklistEditor({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<ChecklistData>) {\n  const items = data.items;\n\n  const update = (next: ChecklistItem[]) => onChange({ items: next });\n\n  const toggle = (id: string) =>\n    update(\n      items.map((item) =>\n        item.id === id ? { ...item, checked: !item.checked } : item,\n      ),\n    );\n\n  const setLabel = (id: string, label: string) =>\n    update(items.map((item) => (item.id === id ? { ...item, label } : item)));\n\n  const remove = (id: string) => update(items.filter((item) => item.id !== id));\n\n  const add = () =>\n    update([...items, { id: newItemId(), label: \"\", checked: false }]);\n\n  return (\n    <div className=\"grid gap-2\">\n      {items.map((item) => (\n        <div key={item.id} className=\"flex items-start gap-2\">\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label={item.checked ? \"Mark incomplete\" : \"Mark complete\"}\n            className={cn(\n              \"mt-1 flex size-5 shrink-0 items-center justify-center rounded border\",\n              item.checked\n                ? \"border-primary bg-primary text-primary-foreground\"\n                : \"border-plan-line\",\n            )}\n            onClick={() => toggle(item.id)}\n          >\n            {item.checked && <IconCheck className=\"size-3.5\" />}\n          </button>\n          <input\n            type=\"text\"\n            data-plan-interactive\n            className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors 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=\"Checklist item\"\n            value={item.label}\n            disabled={!editable}\n            onChange={(event) => setLabel(item.id, event.target.value)}\n          />\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label=\"Remove item\"\n            className=\"mt-1 flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50\"\n            disabled={!editable}\n            onClick={() => remove(item.id)}\n          >\n            <IconX className=\"size-4\" />\n          </button>\n        </div>\n      ))}\n      <button\n        type=\"button\"\n        data-plan-interactive\n        className=\"flex items-center gap-1.5 self-start rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50\"\n        disabled={!editable}\n        onClick={add}\n      >\n        <IconPlus className=\"size-4\" />\n        Add item\n      </button>\n    </div>\n  );\n}\n\n/**\n * The standard checklist block spec (with React `Read`/`Edit`). Apps register\n * this in their browser registry. The schema + MDX config come from\n * `./checklist.config.ts`, the exact same object server / agent code registers,\n * so rendering and source round-trip never drift.\n *\n * `Read` is typed against `BlockReadProps<ChecklistData>`; the optional\n * `onToggle` the dispatcher injects for the legacy click-to-toggle behavior is\n * an extra prop the registry's `BlockView` passes through harmlessly when\n * present (it lives outside `BlockReadProps`, so it's wired by the app's block\n * dispatch rather than the generic `BlockView`).\n */\nexport const checklistBlock = defineBlock<ChecklistData>({\n  type: \"checklist\",\n  schema: checklistSchema,\n  mdx: checklistMdx,\n  Read: ChecklistBlock as never,\n  Edit: ChecklistEditor,\n  placement: [\"block\"],\n  editSurface: \"inline\",\n  // A checklist maps to NFM to-do items, so it round-trips to Notion.\n  notionCompatible: true,\n  label: \"Checklist\",\n  icon: IconCheck,\n  description:\n    \"A list of toggleable items, each with a label and an optional note.\",\n  empty: () => ({ items: [] }),\n});\n"]}
+{"version":3,"file":"checklist.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/checklist.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,gBAAgB,CAAC;AACpC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EACL,eAAe,EACf,YAAY,GAGb,MAAM,uBAAuB,CAAC;AAE/B;;;;;;;;;;;;;GAaG;AAEH,wEAAwE;AACxE,SAAS,SAAS;IAChB,OAAO,QAAQ,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,EAAE,CAAC;AAC3D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,GAGT;IACC,OAAO,CACL,mBAAS,SAAS,EAAC,YAAY,mBAAgB,OAAO,aACnD,KAAK,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,KAAK,GAAO,EACzD,cAAK,SAAS,EAAC,YAAY,YACxB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACvB,QAAQ,CAAC,CAAC,CAAC,CACT,kBAEE,IAAI,EAAC,QAAQ,iCAEb,SAAS,EAAC,kDAAkD,EAC5D,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,aAEhC,KAAC,eAAe,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAC1C,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,GAAI,KAP5B,IAAI,CAAC,EAAE,CAQL,CACV,CAAC,CAAC,CAAC,CACF,eAEE,SAAS,EAAC,kDAAkD,aAE5D,KAAC,eAAe,IAAC,OAAO,EAAE,IAAI,CAAC,OAAO,GAAI,EAC1C,KAAC,iBAAiB,IAAC,IAAI,EAAE,IAAI,GAAI,KAJ5B,IAAI,CAAC,EAAE,CAKR,CACP,CACF,GACG,IACE,CACX,CAAC;AACJ,CAAC;AAED,SAAS,eAAe,CAAC,EAAE,OAAO,EAAyB;IACzD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,6DAA6D,EAC7D,OAAO;YACL,CAAC,CAAC,mDAAmD;YACrD,CAAC,CAAC,kBAAkB,CACvB,YAEA,OAAO,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GACzC,CACR,CAAC;AACJ,CAAC;AAED,SAAS,iBAAiB,CAAC,EAAE,IAAI,EAA2B;IAC1D,OAAO,CACL,2BACE,eAAM,SAAS,EAAC,sBAAsB,YAAE,IAAI,CAAC,KAAK,GAAQ,EACzD,IAAI,CAAC,IAAI,IAAI,eAAM,SAAS,EAAC,eAAe,YAAE,IAAI,CAAC,IAAI,GAAQ,IAC3D,CACR,CAAC;AACJ,CAAC;AAED,6DAA6D;AAC7D,MAAM,UAAU,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,QAAQ,GACsB;IAC9B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;IAEzB,MAAM,MAAM,GAAG,CAAC,IAAqB,EAAE,EAAE,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC;IAEpE,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE,CAC5B,MAAM,CACJ,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CACjB,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAC5D,CACF,CAAC;IAEJ,MAAM,QAAQ,GAAG,CAAC,EAAU,EAAE,KAAa,EAAE,EAAE,CAC7C,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAE5E,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAE9E,MAAM,GAAG,GAAG,GAAG,EAAE,CACf,MAAM,CAAC,CAAC,GAAG,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IAErE,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aACxB,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,eAAmB,SAAS,EAAC,8BAA8B,aACzD,iBACE,IAAI,EAAC,QAAQ,+CAED,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eAAe,EAC9D,SAAS,EAAE,EAAE,CACX,sEAAsE,EACtE,IAAI,CAAC,OAAO;4BACV,CAAC,CAAC,mDAAmD;4BACrD,CAAC,CAAC,kBAAkB,CACvB,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,YAE7B,IAAI,CAAC,OAAO,IAAI,KAAC,SAAS,IAAC,SAAS,EAAC,UAAU,GAAG,GAC5C,EACT,gBACE,IAAI,EAAC,MAAM,iCAEX,SAAS,EAAC,yOAAyO,EACnP,WAAW,EAAC,gBAAgB,EAC5B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,CAAC,QAAQ,EACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,GAC1D,EACF,iBACE,IAAI,EAAC,QAAQ,+CAEF,aAAa,EACxB,SAAS,EAAC,4PAA4P,EACtQ,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,YAE9B,KAAC,KAAK,IAAC,SAAS,EAAC,QAAQ,GAAG,GACrB,KAjCD,IAAI,CAAC,EAAE,CAkCX,CACP,CAAC,EACF,kBACE,IAAI,EAAC,QAAQ,iCAEb,SAAS,EAAC,kJAAkJ,EAC5J,QAAQ,EAAE,CAAC,QAAQ,EACnB,OAAO,EAAE,GAAG,aAEZ,KAAC,QAAQ,IAAC,SAAS,EAAC,QAAQ,GAAG,gBAExB,IACL,CACP,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,WAAW,CAAgB;IACvD,IAAI,EAAE,WAAW;IACjB,MAAM,EAAE,eAAe;IACvB,GAAG,EAAE,YAAY;IACjB,IAAI,EAAE,cAAuB;IAC7B,IAAI,EAAE,eAAe;IACrB,SAAS,EAAE,CAAC,OAAO,CAAC;IACpB,WAAW,EAAE,QAAQ;IACrB,oEAAoE;IACpE,gBAAgB,EAAE,IAAI;IACtB,KAAK,EAAE,WAAW;IAClB,IAAI,EAAE,SAAS;IACf,WAAW,EACT,qEAAqE;IACvE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC;CAC7B,CAAC,CAAC","sourcesContent":["import { IconCheck, IconPlus, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps } from \"../types.js\";\nimport {\n  checklistSchema,\n  checklistMdx,\n  type ChecklistData,\n  type ChecklistItem,\n} from \"./checklist.config.js\";\n\n/**\n * Standard `checklist` block. A list of toggleable items, each with a label and\n * an optional note. Lives in core so any app can register it.\n *\n * `Read` mirrors the legacy plan `PlanBlockView` checklist branch byte-for-byte\n * (same `plan-block` section, toggle buttons, `IconCheck` marker, and the\n * existing toggle-via-`onChange` behavior) so converting the block to the\n * registry does not change rendered output. The plan CSS classes\n * (`plan-block`, `text-plan-*`, `border-plan-line`) resolve against the plan\n * app's stylesheet at render time, exactly as before.\n *\n * `Edit` is a custom editor (the schema auto-editor can't edit an array of\n * objects): it lets you add, remove, toggle, and relabel items inline.\n */\n\n/** Mint a reasonably-unique item id without pulling a dep into core. */\nfunction newItemId(): string {\n  return `item-${Math.random().toString(36).slice(2, 10)}`;\n}\n\n/**\n * Read renderer. Note `onToggle` is supplied by the block dispatcher for the\n * historical click-to-toggle behavior; in pure read contexts it is omitted and\n * the markers render statically.\n */\nexport function ChecklistBlock({\n  data,\n  blockId,\n  title,\n  onToggle,\n}: BlockReadProps<ChecklistData> & {\n  onToggle?: (itemId: string) => void;\n}) {\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      <div className=\"grid gap-3\">\n        {data.items.map((item) =>\n          onToggle ? (\n            <button\n              key={item.id}\n              type=\"button\"\n              data-plan-interactive\n              className=\"flex items-start gap-3 text-left text-plan-muted\"\n              onClick={() => onToggle(item.id)}\n            >\n              <ChecklistMarker checked={item.checked} />\n              <ChecklistItemBody item={item} />\n            </button>\n          ) : (\n            <div\n              key={item.id}\n              className=\"flex items-start gap-3 text-left text-plan-muted\"\n            >\n              <ChecklistMarker checked={item.checked} />\n              <ChecklistItemBody item={item} />\n            </div>\n          ),\n        )}\n      </div>\n    </section>\n  );\n}\n\nfunction ChecklistMarker({ checked }: { checked?: boolean }) {\n  return (\n    <span\n      className={cn(\n        \"mt-1 flex size-5 items-center justify-center rounded border\",\n        checked\n          ? \"border-primary bg-primary text-primary-foreground\"\n          : \"border-plan-line\",\n      )}\n    >\n      {checked && <IconCheck className=\"size-3.5\" />}\n    </span>\n  );\n}\n\nfunction ChecklistItemBody({ item }: { item: ChecklistItem }) {\n  return (\n    <span>\n      <span className=\"block text-plan-text\">{item.label}</span>\n      {item.note && <span className=\"block text-sm\">{item.note}</span>}\n    </span>\n  );\n}\n\n/** Custom editor: toggle, relabel, add, and remove items. */\nexport function ChecklistEditor({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<ChecklistData>) {\n  const items = data.items;\n\n  const update = (next: ChecklistItem[]) => onChange({ items: next });\n\n  const toggle = (id: string) =>\n    update(\n      items.map((item) =>\n        item.id === id ? { ...item, checked: !item.checked } : item,\n      ),\n    );\n\n  const setLabel = (id: string, label: string) =>\n    update(items.map((item) => (item.id === id ? { ...item, label } : item)));\n\n  const remove = (id: string) => update(items.filter((item) => item.id !== id));\n\n  const add = () =>\n    update([...items, { id: newItemId(), label: \"\", checked: false }]);\n\n  return (\n    <div className=\"grid gap-2\">\n      {items.map((item) => (\n        <div key={item.id} className=\"group flex items-start gap-2\">\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label={item.checked ? \"Mark incomplete\" : \"Mark complete\"}\n            className={cn(\n              \"mt-1 flex size-5 shrink-0 items-center justify-center rounded border\",\n              item.checked\n                ? \"border-primary bg-primary text-primary-foreground\"\n                : \"border-plan-line\",\n            )}\n            onClick={() => toggle(item.id)}\n          >\n            {item.checked && <IconCheck className=\"size-3.5\" />}\n          </button>\n          <input\n            type=\"text\"\n            data-plan-interactive\n            className=\"flex h-9 w-full rounded-md bg-transparent px-3 py-1 text-sm transition-colors 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=\"Checklist item\"\n            value={item.label}\n            disabled={!editable}\n            onChange={(event) => setLabel(item.id, event.target.value)}\n          />\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label=\"Remove item\"\n            className=\"mt-1 flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-muted hover:text-foreground focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100 disabled:opacity-50\"\n            disabled={!editable}\n            onClick={() => remove(item.id)}\n          >\n            <IconX className=\"size-4\" />\n          </button>\n        </div>\n      ))}\n      <button\n        type=\"button\"\n        data-plan-interactive\n        className=\"flex items-center gap-1.5 self-start rounded-md px-2 py-1 text-sm text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-50\"\n        disabled={!editable}\n        onClick={add}\n      >\n        <IconPlus className=\"size-4\" />\n        Add item\n      </button>\n    </div>\n  );\n}\n\n/**\n * The standard checklist block spec (with React `Read`/`Edit`). Apps register\n * this in their browser registry. The schema + MDX config come from\n * `./checklist.config.ts`, the exact same object server / agent code registers,\n * so rendering and source round-trip never drift.\n *\n * `Read` is typed against `BlockReadProps<ChecklistData>`; the optional\n * `onToggle` the dispatcher injects for the legacy click-to-toggle behavior is\n * an extra prop the registry's `BlockView` passes through harmlessly when\n * present (it lives outside `BlockReadProps`, so it's wired by the app's block\n * dispatch rather than the generic `BlockView`).\n */\nexport const checklistBlock = defineBlock<ChecklistData>({\n  type: \"checklist\",\n  schema: checklistSchema,\n  mdx: checklistMdx,\n  Read: ChecklistBlock as never,\n  Edit: ChecklistEditor,\n  placement: [\"block\"],\n  editSurface: \"inline\",\n  // A checklist maps to NFM to-do items, so it round-trips to Notion.\n  notionCompatible: true,\n  label: \"Checklist\",\n  icon: IconCheck,\n  description:\n    \"A list of toggleable items, each with a label and an optional note.\",\n  empty: () => ({ items: [] }),\n});\n"]}

package/dist/client/blocks/library/code-highlight.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/**
+ * Normalize a user-supplied language hint to a registered highlight.js grammar,
+ * or `null` when empty / unknown so callers fall back to plain text.
+ */
+export declare function normalizeCodeLanguage(value?: string | null): string | null;
+/** Best-effort language from a filename / path extension (e.g. `auth.ts` → ts). */
+export declare function inferLanguageFromFilename(filename?: string | null): string | null;
+/**
+ * Syntax-highlight `code` for an already-resolved language, returning React
+ * token nodes. Pass a single line to highlight per-line (the annotated-code use)
+ * or a whole snippet. Falls back to the raw string for empty / plaintext /
+ * unknown languages or any grammar error, so it is always safe to render.
+ */
+export declare function highlightCode(code: string, language?: string | null): ReactNode;
+//# sourceMappingURL=code-highlight.d.ts.map

package/dist/client/blocks/library/code-highlight.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-highlight.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/code-highlight.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAkGvC;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,MAAM,GAAG,IAAI,CAQ1E;AAED,mFAAmF;AACnF,wBAAgB,yBAAyB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GACvB,MAAM,GAAG,IAAI,CASf;AAiCD;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,MAAM,EACZ,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,GACvB,SAAS,CAWX"}

package/dist/client/blocks/library/code-highlight.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { common, createLowlight } from "lowlight";
+/**
+ * Shared synchronous syntax highlighter for the dev-doc code blocks. Wraps
+ * `lowlight` (highlight.js grammars over a HAST tree) and converts the tree to
+ * React nodes whose tokens carry theme-aware Tailwind classes, so a caller can
+ * highlight a whole snippet OR a single line and drop the result straight into
+ * JSX. This is the same colorful palette the `code-tabs` block uses, extracted so
+ * blocks that need per-line control (annotated-code's highlight bands, future
+ * line-anchored surfaces) render identical syntax colors instead of forking yet
+ * another token map. `DiffBlock` keeps its own muted palette on purpose (its
+ * syntax colors must not fight the add/removed line tints), so it is not a
+ * consumer here.
+ *
+ * Per-line use is the reason this is sync (lowlight, not async Shiki): a block
+ * that puts a band/gutter marker on specific lines highlights each line on its
+ * own with no loading state.
+ */
+const lowlight = createLowlight(common);
+/** Common extension / shorthand → registered highlight.js language name. */
+const LANGUAGE_ALIASES = {
+    cjs: "javascript",
+    cts: "typescript",
+    htm: "html",
+    js: "javascript",
+    jsonc: "json",
+    jsx: "jsx",
+    md: "markdown",
+    mdx: "markdown",
+    mjs: "javascript",
+    mts: "typescript",
+    py: "python",
+    rb: "ruby",
+    rs: "rust",
+    sh: "bash",
+    shell: "bash",
+    ts: "typescript",
+    tsx: "tsx",
+    yml: "yaml",
+    zsh: "bash",
+};
+/**
+ * highlight.js token class → Tailwind classes. Colorful palette (keywords rose,
+ * numbers/attrs sky, literals/titles violet, strings/tags emerald, types/builtins
+ * amber) with `dark:` pairs so it reads in both themes. Kept value-identical to
+ * the `code-tabs` block's map.
+ */
+const TOKEN_CLASS_NAMES = {
+    "hljs-addition": "text-emerald-700 dark:text-emerald-300",
+    "hljs-attr": "text-sky-700 dark:text-sky-300",
+    "hljs-attribute": "text-sky-700 dark:text-sky-300",
+    "hljs-built_in": "text-amber-700 dark:text-amber-300",
+    "hljs-bullet": "text-primary",
+    "hljs-comment": "text-muted-foreground italic",
+    "hljs-deletion": "text-destructive",
+    "hljs-doctag": "text-destructive",
+    "hljs-emphasis": "italic",
+    "hljs-formula": "text-destructive",
+    "hljs-keyword": "text-rose-700 dark:text-rose-300",
+    "hljs-link": "text-primary underline-offset-2",
+    "hljs-literal": "text-violet-700 dark:text-violet-300",
+    "hljs-meta": "text-primary",
+    "hljs-meta-string": "text-emerald-700 dark:text-emerald-300",
+    "hljs-name": "text-emerald-700 dark:text-emerald-300",
+    "hljs-number": "text-sky-700 dark:text-sky-300",
+    "hljs-params": "text-sky-700 dark:text-sky-300",
+    "hljs-property": "text-sky-700 dark:text-sky-300",
+    "hljs-quote": "text-muted-foreground italic",
+    "hljs-regexp": "text-emerald-700 dark:text-emerald-300",
+    "hljs-section": "text-violet-700 dark:text-violet-300",
+    "hljs-selector-attr": "text-primary",
+    "hljs-selector-class": "text-emerald-700 dark:text-emerald-300",
+    "hljs-selector-id": "text-emerald-700 dark:text-emerald-300",
+    "hljs-selector-pseudo": "text-primary",
+    "hljs-selector-tag": "text-emerald-700 dark:text-emerald-300",
+    "hljs-string": "text-emerald-700 dark:text-emerald-300",
+    "hljs-strong": "font-semibold",
+    "hljs-subst": "text-destructive",
+    "hljs-symbol": "text-primary",
+    "hljs-tag": "text-emerald-700 dark:text-emerald-300",
+    "hljs-template-variable": "text-amber-700 dark:text-amber-300",
+    "hljs-title": "text-violet-700 dark:text-violet-300",
+    "hljs-type": "text-amber-700 dark:text-amber-300",
+    "hljs-variable": "text-amber-700 dark:text-amber-300",
+    language_: "text-amber-700 dark:text-amber-300",
+};
+/**
+ * Normalize a user-supplied language hint to a registered highlight.js grammar,
+ * or `null` when empty / unknown so callers fall back to plain text.
+ */
+export function normalizeCodeLanguage(value) {
+    const raw = value
+        ?.trim()
+        .toLowerCase()
+        .replace(/^language-/, "");
+    if (!raw)
+        return null;
+    const normalized = LANGUAGE_ALIASES[raw] ?? raw;
+    return lowlight.registered(normalized) ? normalized : null;
+}
+/** Best-effort language from a filename / path extension (e.g. `auth.ts` → ts). */
+export function inferLanguageFromFilename(filename) {
+    const basename = filename?.split("/").pop()?.toLowerCase();
+    if (!basename)
+        return null;
+    if (basename === "dockerfile")
+        return normalizeCodeLanguage("bash");
+    if (basename === "makefile")
+        return normalizeCodeLanguage("makefile");
+    const extension = basename.includes(".")
+        ? basename.split(".").pop()
+        : undefined;
+    return normalizeCodeLanguage(extension);
+}
+function tokenClassName(value) {
+    const classes = Array.isArray(value)
+        ? value
+        : typeof value === "string"
+            ? value.split(/\s+/)
+            : [];
+    return classes
+        .map((className) => TOKEN_CLASS_NAMES[className] ?? "")
+        .filter(Boolean)
+        .join(" ");
+}
+function hastToReact(children, keyPrefix) {
+    return children.map((node, index) => {
+        if (node.type === "text")
+            return node.value ?? "";
+        if (node.type === "element") {
+            const key = `${keyPrefix}${index}`;
+            const renderedChildren = node.children?.length
+                ? hastToReact(node.children, `${key}-`)
+                : null;
+            const className = tokenClassName(node.properties?.className);
+            return (_jsx("span", { className: className || undefined, children: renderedChildren }, key));
+        }
+        return null;
+    });
+}
+/**
+ * Syntax-highlight `code` for an already-resolved language, returning React
+ * token nodes. Pass a single line to highlight per-line (the annotated-code use)
+ * or a whole snippet. Falls back to the raw string for empty / plaintext /
+ * unknown languages or any grammar error, so it is always safe to render.
+ */
+export function highlightCode(code, language) {
+    const normalized = normalizeCodeLanguage(language);
+    if (!normalized || normalized === "plaintext" || normalized === "text") {
+        return code;
+    }
+    try {
+        const tree = lowlight.highlight(normalized, code);
+        return hastToReact(tree.children ?? [], `${normalized}-`);
+    }
+    catch {
+        return code;
+    }
+}
+//# sourceMappingURL=code-highlight.js.map

package/dist/client/blocks/library/code-highlight.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"code-highlight.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/code-highlight.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ReactNode } from \"react\";\nimport { common, createLowlight } from \"lowlight\";\n\n/**\n * Shared synchronous syntax highlighter for the dev-doc code blocks. Wraps\n * `lowlight` (highlight.js grammars over a HAST tree) and converts the tree to\n * React nodes whose tokens carry theme-aware Tailwind classes, so a caller can\n * highlight a whole snippet OR a single line and drop the result straight into\n * JSX. This is the same colorful palette the `code-tabs` block uses, extracted so\n * blocks that need per-line control (annotated-code's highlight bands, future\n * line-anchored surfaces) render identical syntax colors instead of forking yet\n * another token map. `DiffBlock` keeps its own muted palette on purpose (its\n * syntax colors must not fight the add/removed line tints), so it is not a\n * consumer here.\n *\n * Per-line use is the reason this is sync (lowlight, not async Shiki): a block\n * that puts a band/gutter marker on specific lines highlights each line on its\n * own with no loading state.\n */\n\nconst lowlight = createLowlight(common);\n\ntype LowlightNode = {\n  type: string;\n  value?: string;\n  properties?: { className?: string[] | string };\n  children?: LowlightNode[];\n};\n\n/** Common extension / shorthand → registered highlight.js language name. */\nconst LANGUAGE_ALIASES: Record<string, string> = {\n  cjs: \"javascript\",\n  cts: \"typescript\",\n  htm: \"html\",\n  js: \"javascript\",\n  jsonc: \"json\",\n  jsx: \"jsx\",\n  md: \"markdown\",\n  mdx: \"markdown\",\n  mjs: \"javascript\",\n  mts: \"typescript\",\n  py: \"python\",\n  rb: \"ruby\",\n  rs: \"rust\",\n  sh: \"bash\",\n  shell: \"bash\",\n  ts: \"typescript\",\n  tsx: \"tsx\",\n  yml: \"yaml\",\n  zsh: \"bash\",\n};\n\n/**\n * highlight.js token class → Tailwind classes. Colorful palette (keywords rose,\n * numbers/attrs sky, literals/titles violet, strings/tags emerald, types/builtins\n * amber) with `dark:` pairs so it reads in both themes. Kept value-identical to\n * the `code-tabs` block's map.\n */\nconst TOKEN_CLASS_NAMES: Record<string, string> = {\n  \"hljs-addition\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-attr\": \"text-sky-700 dark:text-sky-300\",\n  \"hljs-attribute\": \"text-sky-700 dark:text-sky-300\",\n  \"hljs-built_in\": \"text-amber-700 dark:text-amber-300\",\n  \"hljs-bullet\": \"text-primary\",\n  \"hljs-comment\": \"text-muted-foreground italic\",\n  \"hljs-deletion\": \"text-destructive\",\n  \"hljs-doctag\": \"text-destructive\",\n  \"hljs-emphasis\": \"italic\",\n  \"hljs-formula\": \"text-destructive\",\n  \"hljs-keyword\": \"text-rose-700 dark:text-rose-300\",\n  \"hljs-link\": \"text-primary underline-offset-2\",\n  \"hljs-literal\": \"text-violet-700 dark:text-violet-300\",\n  \"hljs-meta\": \"text-primary\",\n  \"hljs-meta-string\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-name\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-number\": \"text-sky-700 dark:text-sky-300\",\n  \"hljs-params\": \"text-sky-700 dark:text-sky-300\",\n  \"hljs-property\": \"text-sky-700 dark:text-sky-300\",\n  \"hljs-quote\": \"text-muted-foreground italic\",\n  \"hljs-regexp\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-section\": \"text-violet-700 dark:text-violet-300\",\n  \"hljs-selector-attr\": \"text-primary\",\n  \"hljs-selector-class\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-selector-id\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-selector-pseudo\": \"text-primary\",\n  \"hljs-selector-tag\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-string\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-strong\": \"font-semibold\",\n  \"hljs-subst\": \"text-destructive\",\n  \"hljs-symbol\": \"text-primary\",\n  \"hljs-tag\": \"text-emerald-700 dark:text-emerald-300\",\n  \"hljs-template-variable\": \"text-amber-700 dark:text-amber-300\",\n  \"hljs-title\": \"text-violet-700 dark:text-violet-300\",\n  \"hljs-type\": \"text-amber-700 dark:text-amber-300\",\n  \"hljs-variable\": \"text-amber-700 dark:text-amber-300\",\n  language_: \"text-amber-700 dark:text-amber-300\",\n};\n\n/**\n * Normalize a user-supplied language hint to a registered highlight.js grammar,\n * or `null` when empty / unknown so callers fall back to plain text.\n */\nexport function normalizeCodeLanguage(value?: string | null): string | null {\n  const raw = value\n    ?.trim()\n    .toLowerCase()\n    .replace(/^language-/, \"\");\n  if (!raw) return null;\n  const normalized = LANGUAGE_ALIASES[raw] ?? raw;\n  return lowlight.registered(normalized) ? normalized : null;\n}\n\n/** Best-effort language from a filename / path extension (e.g. `auth.ts` → ts). */\nexport function inferLanguageFromFilename(\n  filename?: string | null,\n): string | null {\n  const basename = filename?.split(\"/\").pop()?.toLowerCase();\n  if (!basename) return null;\n  if (basename === \"dockerfile\") return normalizeCodeLanguage(\"bash\");\n  if (basename === \"makefile\") return normalizeCodeLanguage(\"makefile\");\n  const extension = basename.includes(\".\")\n    ? basename.split(\".\").pop()\n    : undefined;\n  return normalizeCodeLanguage(extension);\n}\n\nfunction tokenClassName(value: string[] | string | undefined): string {\n  const classes = Array.isArray(value)\n    ? value\n    : typeof value === \"string\"\n      ? value.split(/\\s+/)\n      : [];\n  return classes\n    .map((className) => TOKEN_CLASS_NAMES[className] ?? \"\")\n    .filter(Boolean)\n    .join(\" \");\n}\n\nfunction hastToReact(children: LowlightNode[], keyPrefix: string): ReactNode[] {\n  return children.map((node, index) => {\n    if (node.type === \"text\") return node.value ?? \"\";\n    if (node.type === \"element\") {\n      const key = `${keyPrefix}${index}`;\n      const renderedChildren = node.children?.length\n        ? hastToReact(node.children, `${key}-`)\n        : null;\n      const className = tokenClassName(node.properties?.className);\n      return (\n        <span key={key} className={className || undefined}>\n          {renderedChildren}\n        </span>\n      );\n    }\n    return null;\n  });\n}\n\n/**\n * Syntax-highlight `code` for an already-resolved language, returning React\n * token nodes. Pass a single line to highlight per-line (the annotated-code use)\n * or a whole snippet. Falls back to the raw string for empty / plaintext /\n * unknown languages or any grammar error, so it is always safe to render.\n */\nexport function highlightCode(\n  code: string,\n  language?: string | null,\n): ReactNode {\n  const normalized = normalizeCodeLanguage(language);\n  if (!normalized || normalized === \"plaintext\" || normalized === \"text\") {\n    return code;\n  }\n  try {\n    const tree = lowlight.highlight(normalized, code) as LowlightNode;\n    return hastToReact(tree.children ?? [], `${normalized}-`);\n  } catch {\n    return code;\n  }\n}\n"]}

package/dist/client/blocks/library/code-tabs.config.d.ts

@@ -20,6 +20,12 @@ export interface CodeTabsTab {
     language?: string;
     code: string;
     caption?: string;
+    /**
+     * Lines shown before the pane collapses behind a "Show N more lines" toggle.
+     * Omitted ⇒ the default cap (`DEFAULT_CODE_MAX_LINES`, 30). `0` ⇒ never
+     * collapse (always show the whole snippet).
+     */
+    maxLines?: number;
 }
 export interface CodeTabsData {
     tabs: CodeTabsTab[];

package/dist/client/blocks/library/code-tabs.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"code-tabs.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/code-tabs.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAKD,eAAO,MAAM,cAAc,EAaV,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,cAAc,CAAC,YAAY,CAMpD,CAAC"}
+{"version":3,"file":"code-tabs.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/code-tabs.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;GAaG;AAEH,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,WAAW,EAAE,CAAC;CACrB;AAKD,eAAO,MAAM,cAAc,EAcV,CAAC,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;AAEzC;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,EAAE,cAAc,CAAC,YAAY,CAMpD,CAAC"}

package/dist/client/blocks/library/code-tabs.config.js

@@ -9,6 +9,7 @@ export const codeTabsSchema = z.object({
         language: z.string().trim().max(40).optional(),
         code: z.string().max(100_000),
         caption: z.string().trim().max(400).optional(),
+        maxLines: z.number().int().min(0).max(2000).optional(),
     }))
         .min(1)
         .max(12),