@agent-native/core 0.37.3 → 0.38.0

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

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { IconCode, IconPlus, IconX } from "@tabler/icons-react";
+import { cn } from "../../utils.js";
+import { defineBlock } from "../types.js";
+import { codeTabsSchema, codeTabsMdx, } from "./code-tabs.config.js";
+/**
+ * Standard `code-tabs` block (STANDARD core library): a vertical file tab rail
+ * with Shiki-highlighted code panes. Moved verbatim from the plan
+ * `CodeTabsBlock` (`DocumentArea.tsx`) so its rendered output is unchanged, then
+ * generalized to the registry `Read`/`Edit` contract. Shareable by any app that
+ * registers the core block library.
+ *
+ * `Edit` is schema-driven in spirit: each tab's `code` field renders as a
+ * code-style monospace text area (the plain auto-editor can't descend into the
+ * `tabs` array), plus label/language/caption inputs. The component owns no app
+ * services, so it stays portable across apps.
+ */
+/* ── Read (vertical tab rail + Shiki) ──────────────────────────────────────── */
+function CodeTabsRead({ data, blockId, title }) {
+    const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? "");
+    const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("h2", { children: title }), _jsxs("div", { className: "grid overflow-hidden border-y border-plan-line md:grid-cols-[300px_minmax(0,1fr)]", children: [_jsx("div", { className: "border-plan-line md:border-r", children: data.tabs.map((tab) => (_jsxs("button", { type: "button", "data-plan-interactive": true, className: cn("flex w-full items-start gap-3 border-b border-plan-line px-4 py-4 text-left", tab.id === active?.id
+                                ? "bg-plan-block text-plan-text shadow-[inset_3px_0_0_hsl(var(--ring))]"
+                                : "text-plan-muted hover:bg-accent/30"), onClick: () => setActiveId(tab.id), children: [_jsx(IconCode, { className: "mt-0.5 size-4 shrink-0" }), _jsxs("span", { className: "min-w-0", children: [_jsx("span", { className: "block truncate font-mono text-sm font-semibold", children: tab.label }), tab.caption && (_jsx("span", { className: "mt-1 block text-xs leading-5", children: tab.caption }))] })] }, tab.id))) }), _jsx("div", { className: "min-w-0 p-5", children: active && (_jsxs(_Fragment, { children: [_jsx("h3", { className: "text-2xl font-semibold tracking-tight", children: active.label }), active.caption && (_jsx("p", { className: "mt-2 text-plan-muted", children: active.caption })), _jsx(CodeSurface, { code: active.code, language: active.language })] })) })] })] }));
+}
+function CodeSurface({ code, language, className, }) {
+    return (_jsx("div", { className: cn("plan-code-surface", className ?? "mt-5"), children: _jsx(HighlightedCode, { code: code, language: language }) }));
+}
+/* ── Edit (code text areas per tab) ────────────────────────────────────────── */
+const inputClass = "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";
+const codeAreaClass = "flex min-h-[140px] w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-xs leading-5 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+/** Mint a reasonably-unique code-tab id without pulling a dep into core. */
+function newCodeTabId() {
+    return `code-tab-${Math.random().toString(36).slice(2, 10)}`;
+}
+/**
+ * Editor: a file-tab strip (one tab active at a time) whose active tab exposes
+ * label/language/caption/code fields — mirroring the read renderer's tabbed
+ * layout and the standard `tabs` block editor instead of stacking every tab's
+ * full form vertically. Add/remove/rename keep the schema's 1..12 bounds.
+ */
+function CodeTabsEdit({ data, onChange, editable, }) {
+    const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? "");
+    const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];
+    const commit = (tabs) => onChange({ tabs });
+    const updateTab = (id, patch) => commit(data.tabs.map((tab) => (tab.id === id ? { ...tab, ...patch } : tab)));
+    const removeTab = (id) => {
+        const next = data.tabs.filter((tab) => tab.id !== id);
+        if (next.length === 0)
+            return; // tabs must keep at least one (schema min 1)
+        commit(next);
+        if (activeId === id)
+            setActiveId(next[0]?.id ?? "");
+    };
+    const addTab = () => {
+        if (data.tabs.length >= 12)
+            return; // schema max
+        const id = newCodeTabId();
+        commit([
+            ...data.tabs,
+            { id, label: `file-${data.tabs.length + 1}.ts`, code: "" },
+        ]);
+        setActiveId(id);
+    };
+    return (_jsxs("div", { className: "an-code-tabs-editor flex flex-col gap-4", children: [_jsxs("div", { className: "flex max-w-full flex-wrap items-center gap-1 overflow-x-auto", role: "tablist", "data-plan-interactive": true, children: [data.tabs.map((tab) => {
+                        const selected = tab.id === active?.id;
+                        return (_jsxs("div", { className: cn("group flex items-center gap-1 rounded-lg pr-1 transition-colors", selected ? "bg-plan-block shadow-sm" : "hover:bg-plan-block/60"), children: [_jsxs("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => setActiveId(tab.id), className: cn("flex items-center gap-2 rounded-lg px-3 py-2 font-mono text-sm font-semibold transition-colors", selected ? "text-plan-text" : "text-plan-muted"), children: [_jsx(IconCode, { className: "size-4 shrink-0" }), tab.label] }), editable && data.tabs.length > 1 && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": `Remove ${tab.label}`, className: cn("flex size-6 shrink-0 items-center justify-center rounded text-plan-muted transition-opacity", "opacity-0 group-hover:opacity-100 group-focus-within:opacity-100", "hover:bg-muted hover:text-foreground"), onClick: () => removeTab(tab.id), children: _jsx(IconX, { className: "size-3.5 shrink-0" }) }))] }, tab.id));
+                    }), editable && data.tabs.length < 12 && (_jsxs("button", { type: "button", "data-plan-interactive": true, "aria-label": "Add tab", className: "flex items-center gap-1.5 rounded-md px-2 py-2 text-sm text-plan-muted hover:bg-plan-block/60 hover:text-plan-text", onClick: addTab, children: [_jsx(IconPlus, { className: "size-4" }), "Add tab"] }))] }), active && (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("div", { className: "grid gap-2 md:grid-cols-2", children: [_jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Label" }), _jsx("input", { type: "text", "data-plan-interactive": true, className: inputClass, value: active.label, disabled: !editable, onChange: (event) => updateTab(active.id, { label: event.target.value }) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Language" }), _jsx("input", { type: "text", "data-plan-interactive": true, className: inputClass, value: active.language ?? "", disabled: !editable, onChange: (event) => updateTab(active.id, {
+                                            language: event.target.value || undefined,
+                                        }) })] })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Caption" }), _jsx("input", { type: "text", "data-plan-interactive": true, className: inputClass, value: active.caption ?? "", disabled: !editable, onChange: (event) => updateTab(active.id, {
+                                    caption: event.target.value || undefined,
+                                }) })] }), _jsxs("label", { className: "flex flex-col gap-1.5", children: [_jsx("span", { className: "text-xs font-medium text-muted-foreground", children: "Code" }), _jsx("textarea", { "data-plan-interactive": true, spellCheck: false, className: codeAreaClass, value: active.code, disabled: !editable, onChange: (event) => updateTab(active.id, { code: event.target.value }) })] })] }))] }));
+}
+let highlighterLoader = null;
+function loadHighlighter() {
+    if (!highlighterLoader) {
+        highlighterLoader = (async () => {
+            const [{ createHighlighterCore }, { createOnigurumaEngine }] = await Promise.all([
+                import("shiki/core"),
+                import("shiki/engine/oniguruma"),
+            ]);
+            return createHighlighterCore({
+                themes: [import("shiki/themes/github-dark-default.mjs")],
+                langs: [
+                    import("shiki/langs/javascript.mjs"),
+                    import("shiki/langs/typescript.mjs"),
+                    import("shiki/langs/jsx.mjs"),
+                    import("shiki/langs/tsx.mjs"),
+                    import("shiki/langs/json.mjs"),
+                    import("shiki/langs/css.mjs"),
+                    import("shiki/langs/html.mjs"),
+                    import("shiki/langs/markdown.mjs"),
+                    import("shiki/langs/bash.mjs"),
+                    import("shiki/langs/shellscript.mjs"),
+                    import("shiki/langs/python.mjs"),
+                    import("shiki/langs/yaml.mjs"),
+                    import("shiki/langs/sql.mjs"),
+                ],
+                engine: createOnigurumaEngine(import("shiki/wasm")),
+            });
+        })().catch((error) => {
+            highlighterLoader = null;
+            throw error;
+        });
+    }
+    return highlighterLoader;
+}
+const LANG_ALIASES = {
+    js: "javascript",
+    ts: "typescript",
+    sh: "bash",
+    shell: "bash",
+    zsh: "bash",
+    py: "python",
+    yml: "yaml",
+    md: "markdown",
+};
+function HighlightedCode({ code, language, }) {
+    const [html, setHtml] = useState(null);
+    useEffect(() => {
+        let cancelled = false;
+        loadHighlighter()
+            .then((highlighter) => {
+            const requested = (language || "text").toLowerCase();
+            const resolved = LANG_ALIASES[requested] ?? requested;
+            const loaded = highlighter.getLoadedLanguages();
+            const lang = loaded.includes(resolved) ? resolved : "text";
+            return highlighter.codeToHtml(code, {
+                lang,
+                theme: "github-dark-default",
+            });
+        })
+            .then((out) => {
+            if (!cancelled)
+                setHtml(out);
+        })
+            .catch(() => {
+            if (!cancelled)
+                setHtml(null);
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [code, language]);
+    if (html) {
+        // Shiki output is generated from plain text by the highlighter itself —
+        // it is NOT agent-authored HTML, so this is safe (mirrors core chat).
+        return (_jsx("div", { className: "plan-shiki", dangerouslySetInnerHTML: { __html: html } }));
+    }
+    return (_jsx("pre", { children: _jsx("code", { className: language ? `language-${language}` : undefined, children: code }) }));
+}
+/* ── Spec ──────────────────────────────────────────────────────────────────── */
+export const codeTabsBlock = defineBlock({
+    type: "code-tabs",
+    schema: codeTabsSchema,
+    mdx: codeTabsMdx,
+    Read: CodeTabsRead,
+    Edit: CodeTabsEdit,
+    placement: ["block"],
+    label: "Code tabs",
+    icon: IconCode,
+    description: "A vertical file tab rail of syntax-highlighted code snippets, one tab per file with an optional language and caption.",
+});
+//# sourceMappingURL=code-tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"code-tabs.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/code-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from \"react\";\nimport { IconCode, 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  codeTabsSchema,\n  codeTabsMdx,\n  type CodeTabsData,\n  type CodeTabsTab,\n} from \"./code-tabs.config.js\";\n\n/**\n * Standard `code-tabs` block (STANDARD core library): a vertical file tab rail\n * with Shiki-highlighted code panes. Moved verbatim from the plan\n * `CodeTabsBlock` (`DocumentArea.tsx`) so its rendered output is unchanged, then\n * generalized to the registry `Read`/`Edit` contract. Shareable by any app that\n * registers the core block library.\n *\n * `Edit` is schema-driven in spirit: each tab's `code` field renders as a\n * code-style monospace text area (the plain auto-editor can't descend into the\n * `tabs` array), plus label/language/caption inputs. The component owns no app\n * services, so it stays portable across apps.\n */\n\n/* ── Read (vertical tab rail + Shiki) ──────────────────────────────────────── */\n\nfunction CodeTabsRead({ data, blockId, title }: BlockReadProps<CodeTabsData>) {\n  const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? \"\");\n  const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <h2>{title}</h2>}\n      <div className=\"grid overflow-hidden border-y border-plan-line md:grid-cols-[300px_minmax(0,1fr)]\">\n        <div className=\"border-plan-line md:border-r\">\n          {data.tabs.map((tab) => (\n            <button\n              key={tab.id}\n              type=\"button\"\n              data-plan-interactive\n              className={cn(\n                \"flex w-full items-start gap-3 border-b border-plan-line px-4 py-4 text-left\",\n                tab.id === active?.id\n                  ? \"bg-plan-block text-plan-text shadow-[inset_3px_0_0_hsl(var(--ring))]\"\n                  : \"text-plan-muted hover:bg-accent/30\",\n              )}\n              onClick={() => setActiveId(tab.id)}\n            >\n              <IconCode className=\"mt-0.5 size-4 shrink-0\" />\n              <span className=\"min-w-0\">\n                <span className=\"block truncate font-mono text-sm font-semibold\">\n                  {tab.label}\n                </span>\n                {tab.caption && (\n                  <span className=\"mt-1 block text-xs leading-5\">\n                    {tab.caption}\n                  </span>\n                )}\n              </span>\n            </button>\n          ))}\n        </div>\n        <div className=\"min-w-0 p-5\">\n          {active && (\n            <>\n              <h3 className=\"text-2xl font-semibold tracking-tight\">\n                {active.label}\n              </h3>\n              {active.caption && (\n                <p className=\"mt-2 text-plan-muted\">{active.caption}</p>\n              )}\n              <CodeSurface code={active.code} language={active.language} />\n            </>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n\nfunction 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\n/* ── Edit (code text areas per tab) ────────────────────────────────────────── */\n\nconst inputClass =\n  \"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\nconst codeAreaClass =\n  \"flex min-h-[140px] w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-xs leading-5 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\";\n\n/** Mint a reasonably-unique code-tab id without pulling a dep into core. */\nfunction newCodeTabId(): string {\n  return `code-tab-${Math.random().toString(36).slice(2, 10)}`;\n}\n\n/**\n * Editor: a file-tab strip (one tab active at a time) whose active tab exposes\n * label/language/caption/code fields — mirroring the read renderer's tabbed\n * layout and the standard `tabs` block editor instead of stacking every tab's\n * full form vertically. Add/remove/rename keep the schema's 1..12 bounds.\n */\nfunction CodeTabsEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<CodeTabsData>) {\n  const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? \"\");\n  const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];\n\n  const commit = (tabs: CodeTabsTab[]) => onChange({ tabs });\n\n  const updateTab = (id: string, patch: Partial<CodeTabsTab>) =>\n    commit(\n      data.tabs.map((tab) => (tab.id === id ? { ...tab, ...patch } : tab)),\n    );\n\n  const removeTab = (id: string) => {\n    const next = data.tabs.filter((tab) => tab.id !== id);\n    if (next.length === 0) return; // tabs must keep at least one (schema min 1)\n    commit(next);\n    if (activeId === id) setActiveId(next[0]?.id ?? \"\");\n  };\n\n  const addTab = () => {\n    if (data.tabs.length >= 12) return; // schema max\n    const id = newCodeTabId();\n    commit([\n      ...data.tabs,\n      { id, label: `file-${data.tabs.length + 1}.ts`, code: \"\" },\n    ]);\n    setActiveId(id);\n  };\n\n  return (\n    <div className=\"an-code-tabs-editor flex flex-col gap-4\">\n      <div\n        className=\"flex max-w-full flex-wrap items-center gap-1 overflow-x-auto\"\n        role=\"tablist\"\n        data-plan-interactive\n      >\n        {data.tabs.map((tab) => {\n          const selected = tab.id === active?.id;\n          return (\n            <div\n              key={tab.id}\n              className={cn(\n                \"group flex items-center gap-1 rounded-lg pr-1 transition-colors\",\n                selected ? \"bg-plan-block shadow-sm\" : \"hover:bg-plan-block/60\",\n              )}\n            >\n              <button\n                type=\"button\"\n                role=\"tab\"\n                aria-selected={selected}\n                onClick={() => setActiveId(tab.id)}\n                className={cn(\n                  \"flex items-center gap-2 rounded-lg px-3 py-2 font-mono text-sm font-semibold transition-colors\",\n                  selected ? \"text-plan-text\" : \"text-plan-muted\",\n                )}\n              >\n                <IconCode className=\"size-4 shrink-0\" />\n                {tab.label}\n              </button>\n              {editable && data.tabs.length > 1 && (\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label={`Remove ${tab.label}`}\n                  className={cn(\n                    \"flex size-6 shrink-0 items-center justify-center rounded text-plan-muted transition-opacity\",\n                    \"opacity-0 group-hover:opacity-100 group-focus-within:opacity-100\",\n                    \"hover:bg-muted hover:text-foreground\",\n                  )}\n                  onClick={() => removeTab(tab.id)}\n                >\n                  <IconX className=\"size-3.5 shrink-0\" />\n                </button>\n              )}\n            </div>\n          );\n        })}\n        {editable && data.tabs.length < 12 && (\n          <button\n            type=\"button\"\n            data-plan-interactive\n            aria-label=\"Add tab\"\n            className=\"flex items-center gap-1.5 rounded-md px-2 py-2 text-sm text-plan-muted hover:bg-plan-block/60 hover:text-plan-text\"\n            onClick={addTab}\n          >\n            <IconPlus className=\"size-4\" />\n            Add tab\n          </button>\n        )}\n      </div>\n      {active && (\n        <div className=\"flex flex-col gap-2\">\n          <div className=\"grid gap-2 md:grid-cols-2\">\n            <label className=\"flex flex-col gap-1.5\">\n              <span className=\"text-xs font-medium text-muted-foreground\">\n                Label\n              </span>\n              <input\n                type=\"text\"\n                data-plan-interactive\n                className={inputClass}\n                value={active.label}\n                disabled={!editable}\n                onChange={(event) =>\n                  updateTab(active.id, { label: event.target.value })\n                }\n              />\n            </label>\n            <label className=\"flex flex-col gap-1.5\">\n              <span className=\"text-xs font-medium text-muted-foreground\">\n                Language\n              </span>\n              <input\n                type=\"text\"\n                data-plan-interactive\n                className={inputClass}\n                value={active.language ?? \"\"}\n                disabled={!editable}\n                onChange={(event) =>\n                  updateTab(active.id, {\n                    language: event.target.value || undefined,\n                  })\n                }\n              />\n            </label>\n          </div>\n          <label className=\"flex flex-col gap-1.5\">\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              Caption\n            </span>\n            <input\n              type=\"text\"\n              data-plan-interactive\n              className={inputClass}\n              value={active.caption ?? \"\"}\n              disabled={!editable}\n              onChange={(event) =>\n                updateTab(active.id, {\n                  caption: event.target.value || undefined,\n                })\n              }\n            />\n          </label>\n          <label className=\"flex flex-col gap-1.5\">\n            <span className=\"text-xs font-medium text-muted-foreground\">\n              Code\n            </span>\n            <textarea\n              data-plan-interactive\n              spellCheck={false}\n              className={codeAreaClass}\n              value={active.code}\n              disabled={!editable}\n              onChange={(event) =>\n                updateTab(active.id, { code: event.target.value })\n              }\n            />\n          </label>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/* ── Shiki syntax highlighting (lazy-loaded, single dark theme) ────────────── */\ntype ShikiHighlighter = {\n  codeToHtml: (\n    code: string,\n    options: { lang: string; theme: string },\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: [import(\"shiki/themes/github-dark-default.mjs\")],\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};\n\nfunction 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          theme: \"github-dark-default\",\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    // Shiki output is generated from plain text by the highlighter itself —\n    // it is NOT agent-authored HTML, so this is safe (mirrors core chat).\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/* ── Spec ──────────────────────────────────────────────────────────────────── */\n\nexport const codeTabsBlock = defineBlock<CodeTabsData>({\n  type: \"code-tabs\",\n  schema: codeTabsSchema,\n  mdx: codeTabsMdx,\n  Read: CodeTabsRead,\n  Edit: CodeTabsEdit,\n  placement: [\"block\"],\n  label: \"Code tabs\",\n  icon: IconCode,\n  description:\n    \"A vertical file tab rail of syntax-highlighted code snippets, one tab per file with an optional language and caption.\",\n});\n"]}

package/dist/client/blocks/library/html.config.d.ts

@@ -0,0 +1,37 @@
+import { z } from "zod";
+import type { BlockMdxConfig } from "../types.js";
+/**
+ * Pure (React-free) part of the standard HTML / Tailwind block: its data schema
+ * and MDX round-trip config. Shared by the React spec (`html.tsx`) and any
+ * server-side / agent registry (e.g. the plan app's `plan-block-registry.ts`),
+ * so importing it into a server module never pulls React in.
+ *
+ * This is the registry form of the plan `custom-html` block. The schema MUST
+ * stay data-compatible with the `custom-html` branch of the plan
+ * `planBlockSchema` (bounded `html`, optional bounded `css`, optional trimmed
+ * `caption`, all rejecting full-document / script markup) so a registered block
+ * still validates through the app's generic `update-block` re-validation. The
+ * MDX `tag` (`HtmlBlock`) + flat `html`/`css`/`caption` attribute shape MUST
+ * match the legacy `<HtmlBlock … html css caption />` encoding
+ * (`plan-mdx.ts` `serializeBlock`/`parseBlock`) so stored `.mdx` round-trips
+ * byte-compatibly.
+ */
+export interface HtmlBlockData {
+    /** Bounded HTML fragment (no html/head/body/script/style document markup). */
+    html: string;
+    /** Optional bounded CSS, scoped into the sandboxed iframe. */
+    css?: string;
+    /** Optional short caption rendered under the rendered fragment. */
+    caption?: string;
+}
+export declare const htmlSchema: z.ZodType<HtmlBlockData>;
+/**
+ * MDX config: `html`, `css`, and `caption` are flat attributes (no children) —
+ * exactly the legacy `<HtmlBlock id … html css caption />` self-closing form.
+ * Insertion order of `toAttrs` is the on-disk attribute order, so it stays
+ * `html` → `css` → `caption` to match `plan-mdx.ts:serializeBlock`. `fromAttrs`
+ * mirrors the legacy parse defaults (`html ?? ""`, `css`/`caption` undefined
+ * when absent).
+ */
+export declare const htmlMdx: BlockMdxConfig<HtmlBlockData>;
+//# sourceMappingURL=html.config.d.ts.map

package/dist/client/blocks/library/html.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/html.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;GAeG;AAEH,MAAM,WAAW,aAAa;IAC5B,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAaD,eAAO,MAAM,UAAU,EAeG,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;AAEnD;;;;;;;GAOG;AACH,eAAO,MAAM,OAAO,EAAE,cAAc,CAAC,aAAa,CAYjD,CAAC"}

package/dist/client/blocks/library/html.config.js

@@ -0,0 +1,46 @@
+import { z } from "zod";
+/**
+ * Rejects full HTML documents, executable/structural tags, and JS/data URLs.
+ * Kept byte-identical to the plan `noFullHtmlDocument` refine so the registry
+ * schema accepts exactly what `planBlockSchema` accepts (and nothing it would
+ * reject). Defense in depth — the block also renders inside a sandboxed iframe.
+ */
+const unsafeHtmlPattern = /(?:<!doctype|<\/?(?:html|head|body|script|style|iframe|object|embed|link|meta|base|form)[\s>/]|\b(?:javascript|data:text\/html)\s*:|\bsrcdoc\s*=|\bon[a-z][\w:-]*\s*=)/i;
+const noFullHtmlDocument = (value) => !unsafeHtmlPattern.test(value);
+export const htmlSchema = z
+    .object({
+    html: z.string().max(100_000).refine(noFullHtmlDocument, {
+        message: "Custom HTML blocks must be bounded fragments without html/head/body/script/style tags.",
+    }),
+    css: z
+        .string()
+        .max(50_000)
+        .refine(noFullHtmlDocument, {
+        message: "Custom CSS blocks must not include document or script tags.",
+    })
+        .optional(),
+    caption: z.string().trim().max(400).optional(),
+})
+    .strict();
+/**
+ * MDX config: `html`, `css`, and `caption` are flat attributes (no children) —
+ * exactly the legacy `<HtmlBlock id … html css caption />` self-closing form.
+ * Insertion order of `toAttrs` is the on-disk attribute order, so it stays
+ * `html` → `css` → `caption` to match `plan-mdx.ts:serializeBlock`. `fromAttrs`
+ * mirrors the legacy parse defaults (`html ?? ""`, `css`/`caption` undefined
+ * when absent).
+ */
+export const htmlMdx = {
+    tag: "HtmlBlock",
+    toAttrs: (data) => ({
+        html: data.html,
+        css: data.css,
+        caption: data.caption,
+    }),
+    fromAttrs: (attrs) => ({
+        html: attrs.string("html") ?? "",
+        css: attrs.string("css"),
+        caption: attrs.string("caption"),
+    }),
+};
+//# sourceMappingURL=html.config.js.map

package/dist/client/blocks/library/html.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"html.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/html.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AA6BxB;;;;;GAKG;AACH,MAAM,iBAAiB,GACrB,yKAAyK,CAAC;AAE5K,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,CAAC,iBAAiB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC;KACxB,MAAM,CAAC;IACN,IAAI,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC,kBAAkB,EAAE;QACvD,OAAO,EACL,wFAAwF;KAC3F,CAAC;IACF,GAAG,EAAE,CAAC;SACH,MAAM,EAAE;SACR,GAAG,CAAC,MAAM,CAAC;SACX,MAAM,CAAC,kBAAkB,EAAE;QAC1B,OAAO,EAAE,6DAA6D;KACvE,CAAC;SACD,QAAQ,EAAE;IACb,OAAO,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE;CAC/C,CAAC;KACD,MAAM,EAAyC,CAAC;AAEnD;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,OAAO,GAAkC;IACpD,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,GAAG,EAAE,IAAI,CAAC,GAAG;QACb,OAAO,EAAE,IAAI,CAAC,OAAO;KACtB,CAAC;IACF,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;QAChC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;QACxB,OAAO,EAAE,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC;KACjC,CAAC;CACH,CAAC","sourcesContent":["import { z } from \"zod\";\nimport type { BlockMdxConfig } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the standard HTML / Tailwind block: its data schema\n * and MDX round-trip config. Shared by the React spec (`html.tsx`) and any\n * server-side / agent registry (e.g. the plan app's `plan-block-registry.ts`),\n * so importing it into a server module never pulls React in.\n *\n * This is the registry form of the plan `custom-html` block. The schema MUST\n * stay data-compatible with the `custom-html` branch of the plan\n * `planBlockSchema` (bounded `html`, optional bounded `css`, optional trimmed\n * `caption`, all rejecting full-document / script markup) so a registered block\n * still validates through the app's generic `update-block` re-validation. The\n * MDX `tag` (`HtmlBlock`) + flat `html`/`css`/`caption` attribute shape MUST\n * match the legacy `<HtmlBlock … html css caption />` encoding\n * (`plan-mdx.ts` `serializeBlock`/`parseBlock`) so stored `.mdx` round-trips\n * byte-compatibly.\n */\n\nexport interface HtmlBlockData {\n  /** Bounded HTML fragment (no html/head/body/script/style document markup). */\n  html: string;\n  /** Optional bounded CSS, scoped into the sandboxed iframe. */\n  css?: string;\n  /** Optional short caption rendered under the rendered fragment. */\n  caption?: string;\n}\n\n/**\n * Rejects full HTML documents, executable/structural tags, and JS/data URLs.\n * Kept byte-identical to the plan `noFullHtmlDocument` refine so the registry\n * schema accepts exactly what `planBlockSchema` accepts (and nothing it would\n * reject). Defense in depth — the block also renders inside a sandboxed iframe.\n */\nconst unsafeHtmlPattern =\n  /(?:<!doctype|<\\/?(?:html|head|body|script|style|iframe|object|embed|link|meta|base|form)[\\s>/]|\\b(?:javascript|data:text\\/html)\\s*:|\\bsrcdoc\\s*=|\\bon[a-z][\\w:-]*\\s*=)/i;\n\nconst noFullHtmlDocument = (value: string) => !unsafeHtmlPattern.test(value);\n\nexport const htmlSchema = z\n  .object({\n    html: z.string().max(100_000).refine(noFullHtmlDocument, {\n      message:\n        \"Custom HTML blocks must be bounded fragments without html/head/body/script/style tags.\",\n    }),\n    css: z\n      .string()\n      .max(50_000)\n      .refine(noFullHtmlDocument, {\n        message: \"Custom CSS blocks must not include document or script tags.\",\n      })\n      .optional(),\n    caption: z.string().trim().max(400).optional(),\n  })\n  .strict() as unknown as z.ZodType<HtmlBlockData>;\n\n/**\n * MDX config: `html`, `css`, and `caption` are flat attributes (no children) —\n * exactly the legacy `<HtmlBlock id … html css caption />` self-closing form.\n * Insertion order of `toAttrs` is the on-disk attribute order, so it stays\n * `html` → `css` → `caption` to match `plan-mdx.ts:serializeBlock`. `fromAttrs`\n * mirrors the legacy parse defaults (`html ?? \"\"`, `css`/`caption` undefined\n * when absent).\n */\nexport const htmlMdx: BlockMdxConfig<HtmlBlockData> = {\n  tag: \"HtmlBlock\",\n  toAttrs: (data) => ({\n    html: data.html,\n    css: data.css,\n    caption: data.caption,\n  }),\n  fromAttrs: (attrs) => ({\n    html: attrs.string(\"html\") ?? \"\",\n    css: attrs.string(\"css\"),\n    caption: attrs.string(\"caption\"),\n  }),\n};\n"]}

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

@@ -0,0 +1,21 @@
+import type { BlockReadProps, BlockEditProps } from "../types.js";
+import { type HtmlBlockData } from "./html.config.js";
+/** Read-only renderer: the sandboxed iframe preview plus an optional caption. */
+export declare function HtmlReadBlock({ data, blockId, title, ctx, }: BlockReadProps<HtmlBlockData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Custom editor: an "Edit source" toggle that flips between the live preview and
+ * inline HTML + CSS textareas (ported from the plan `CustomHtmlBlock`). The
+ * title is rendered by the registry's edit-mode section wrapper, so this only
+ * renders the toggle + content. Edits commit the merged data via `onChange`,
+ * which the app routes through its generic `update-block` patch (re-validated by
+ * the app schema).
+ */
+export declare function HtmlEditBlock({ data, onChange, editable, title, ctx, }: BlockEditProps<HtmlBlockData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * The standard HTML / Tailwind block spec. Both apps register this; the plan app
+ * registers the matching React-free `{ schema, mdx }` server-side via
+ * `html.config.ts`. `empty()` seeds a friendly starter fragment for slash
+ * insertion.
+ */
+export declare const htmlBlock: import("../types.js").BlockSpec<HtmlBlockData>;
+//# sourceMappingURL=html.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/html.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClE,OAAO,EAAuB,KAAK,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAqD3E,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,CAAC,aAAa,CAAC,2CAO/B;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,CAAC,aAAa,CAAC,2CAiE/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gDAYpB,CAAC"}

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconCode, IconEdit, IconX } from "@tabler/icons-react";
+import { defineBlock } from "../types.js";
+import { htmlSchema, htmlMdx } from "./html.config.js";
+/**
+ * Standard library HTML / Tailwind block. The registry form of the plan
+ * `custom-html` block: an author-supplied HTML (+ optional CSS) fragment
+ * rendered inside a sandboxed iframe, with an inline source editor.
+ *
+ * Security: the fragment is rendered in a `sandbox="allow-same-origin"` iframe
+ * with `referrerPolicy="no-referrer"` — no scripts execute — and the schema's
+ * `noFullHtmlDocument` refine rejects document/script/handler markup before it
+ * is ever stored. When the app injects `ctx.sanitizeHtml`, the fragment + CSS
+ * are additionally sanitized before being placed in the iframe `srcDoc`.
+ *
+ * Styling uses app-agnostic shadcn utility classes (`border`, `bg-muted`,
+ * `text-muted-foreground`) so the block renders cleanly in any template, not
+ * just the plan app.
+ */
+/** Build the iframe document for a fragment, applying app sanitization if given. */
+function buildSrcDoc(data, sanitize) {
+    const css = data.css ?? "";
+    const body = sanitize ? sanitize(data.html, data.css) : data.html;
+    return `<!doctype html><html><head><style>body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:#1f1f1d;background:transparent;}*{box-sizing:border-box}${css}</style></head><body>${body}</body></html>`;
+}
+function HtmlPreview({ data, title, sanitize, }) {
+    return (_jsxs(_Fragment, { children: [_jsx("iframe", { title: title || "Custom HTML block", srcDoc: buildSrcDoc(data, sanitize), sandbox: "allow-same-origin", referrerPolicy: "no-referrer", className: "mt-4 h-[360px] w-full rounded-xl border bg-muted" }), data.caption && (_jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: data.caption }))] }));
+}
+/** Read-only renderer: the sandboxed iframe preview plus an optional caption. */
+export function HtmlReadBlock({ data, blockId, title, ctx, }) {
+    return (_jsxs("section", { className: "plan-block group", "data-block-id": blockId, children: [title && _jsx("h2", { children: title }), _jsx(HtmlPreview, { data: data, title: title, sanitize: ctx.sanitizeHtml })] }));
+}
+/**
+ * Custom editor: an "Edit source" toggle that flips between the live preview and
+ * inline HTML + CSS textareas (ported from the plan `CustomHtmlBlock`). The
+ * title is rendered by the registry's edit-mode section wrapper, so this only
+ * renders the toggle + content. Edits commit the merged data via `onChange`,
+ * which the app routes through its generic `update-block` patch (re-validated by
+ * the app schema).
+ */
+export function HtmlEditBlock({ data, onChange, editable, title, ctx, }) {
+    const [editing, setEditing] = useState(false);
+    const [html, setHtml] = useState(data.html);
+    const [css, setCss] = useState(data.css ?? "");
+    return (_jsxs("div", { className: "plan-html-block group", "data-an-block-edit": true, children: [_jsx("div", { className: "flex items-start justify-end gap-4", children: editable && (_jsxs("button", { type: "button", "data-plan-interactive": true, className: "inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", onClick: () => setEditing((value) => !value), children: [editing ? (_jsx(IconX, { className: "size-4" })) : (_jsx(IconEdit, { className: "size-4" })), editing ? "Cancel" : "Edit source"] })) }), editing ? (_jsxs("div", { className: "mt-2 grid gap-3", "data-plan-interactive": true, children: [_jsx("textarea", { value: html, onChange: (event) => setHtml(event.target.value), className: "flex min-h-48 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", placeholder: "HTML fragment" }), _jsx("textarea", { value: css, onChange: (event) => setCss(event.target.value), className: "flex min-h-32 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", placeholder: "Optional CSS" }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx("button", { type: "button", "data-plan-interactive": true, className: "inline-flex h-9 items-center rounded-md px-4 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground", onClick: () => setEditing(false), children: "Cancel" }), _jsx("button", { type: "button", "data-plan-interactive": true, className: "inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90", onClick: () => {
+                                    onChange({ ...data, html, css: css || undefined });
+                                    setEditing(false);
+                                }, children: "Save" })] })] })) : (_jsx(HtmlPreview, { data: data, title: title, sanitize: ctx.sanitizeHtml }))] }));
+}
+/**
+ * The standard HTML / Tailwind block spec. Both apps register this; the plan app
+ * registers the matching React-free `{ schema, mdx }` server-side via
+ * `html.config.ts`. `empty()` seeds a friendly starter fragment for slash
+ * insertion.
+ */
+export const htmlBlock = defineBlock({
+    type: "custom-html",
+    schema: htmlSchema,
+    mdx: htmlMdx,
+    Read: HtmlReadBlock,
+    Edit: HtmlEditBlock,
+    placement: ["block"],
+    label: "HTML / Tailwind",
+    icon: IconCode,
+    description: "An author-supplied HTML (with optional CSS) fragment rendered in a sandboxed iframe, with inline source editing.",
+    empty: () => ({ html: '<div class="p-6">Edit this HTML fragment…</div>' }),
+});
+//# sourceMappingURL=html.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/html.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { IconCode, IconEdit, IconX } from \"@tabler/icons-react\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps } from \"../types.js\";\nimport { htmlSchema, htmlMdx, type HtmlBlockData } from \"./html.config.js\";\n\n/**\n * Standard library HTML / Tailwind block. The registry form of the plan\n * `custom-html` block: an author-supplied HTML (+ optional CSS) fragment\n * rendered inside a sandboxed iframe, with an inline source editor.\n *\n * Security: the fragment is rendered in a `sandbox=\"allow-same-origin\"` iframe\n * with `referrerPolicy=\"no-referrer\"` — no scripts execute — and the schema's\n * `noFullHtmlDocument` refine rejects document/script/handler markup before it\n * is ever stored. When the app injects `ctx.sanitizeHtml`, the fragment + CSS\n * are additionally sanitized before being placed in the iframe `srcDoc`.\n *\n * Styling uses app-agnostic shadcn utility classes (`border`, `bg-muted`,\n * `text-muted-foreground`) so the block renders cleanly in any template, not\n * just the plan app.\n */\n\n/** Build the iframe document for a fragment, applying app sanitization if given. */\nfunction buildSrcDoc(\n  data: HtmlBlockData,\n  sanitize?: (html: string, css?: string) => string,\n): string {\n  const css = data.css ?? \"\";\n  const body = sanitize ? sanitize(data.html, data.css) : data.html;\n  return `<!doctype html><html><head><style>body{margin:0;min-height:100%;font-family:Inter,system-ui,sans-serif;color:#1f1f1d;background:transparent;}*{box-sizing:border-box}${css}</style></head><body>${body}</body></html>`;\n}\n\nfunction HtmlPreview({\n  data,\n  title,\n  sanitize,\n}: {\n  data: HtmlBlockData;\n  title?: string;\n  sanitize?: (html: string, css?: string) => string;\n}) {\n  return (\n    <>\n      <iframe\n        title={title || \"Custom HTML block\"}\n        srcDoc={buildSrcDoc(data, sanitize)}\n        sandbox=\"allow-same-origin\"\n        referrerPolicy=\"no-referrer\"\n        className=\"mt-4 h-[360px] w-full rounded-xl border bg-muted\"\n      />\n      {data.caption && (\n        <p className=\"mt-3 text-sm text-muted-foreground\">{data.caption}</p>\n      )}\n    </>\n  );\n}\n\n/** Read-only renderer: the sandboxed iframe preview plus an optional caption. */\nexport function HtmlReadBlock({\n  data,\n  blockId,\n  title,\n  ctx,\n}: BlockReadProps<HtmlBlockData>) {\n  return (\n    <section className=\"plan-block group\" data-block-id={blockId}>\n      {title && <h2>{title}</h2>}\n      <HtmlPreview data={data} title={title} sanitize={ctx.sanitizeHtml} />\n    </section>\n  );\n}\n\n/**\n * Custom editor: an \"Edit source\" toggle that flips between the live preview and\n * inline HTML + CSS textareas (ported from the plan `CustomHtmlBlock`). The\n * title is rendered by the registry's edit-mode section wrapper, so this only\n * renders the toggle + content. Edits commit the merged data via `onChange`,\n * which the app routes through its generic `update-block` patch (re-validated by\n * the app schema).\n */\nexport function HtmlEditBlock({\n  data,\n  onChange,\n  editable,\n  title,\n  ctx,\n}: BlockEditProps<HtmlBlockData>) {\n  const [editing, setEditing] = useState(false);\n  const [html, setHtml] = useState(data.html);\n  const [css, setCss] = useState(data.css ?? \"\");\n\n  return (\n    <div className=\"plan-html-block group\" data-an-block-edit>\n      <div className=\"flex items-start justify-end gap-4\">\n        {editable && (\n          <button\n            type=\"button\"\n            data-plan-interactive\n            className=\"inline-flex h-8 items-center gap-1.5 rounded-md px-2.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n            onClick={() => setEditing((value) => !value)}\n          >\n            {editing ? (\n              <IconX className=\"size-4\" />\n            ) : (\n              <IconEdit className=\"size-4\" />\n            )}\n            {editing ? \"Cancel\" : \"Edit source\"}\n          </button>\n        )}\n      </div>\n      {editing ? (\n        <div className=\"mt-2 grid gap-3\" data-plan-interactive>\n          <textarea\n            value={html}\n            onChange={(event) => setHtml(event.target.value)}\n            className=\"flex min-h-48 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            placeholder=\"HTML fragment\"\n          />\n          <textarea\n            value={css}\n            onChange={(event) => setCss(event.target.value)}\n            className=\"flex min-h-32 w-full rounded-md border border-input bg-transparent px-3 py-2 font-mono text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            placeholder=\"Optional CSS\"\n          />\n          <div className=\"flex justify-end gap-2\">\n            <button\n              type=\"button\"\n              data-plan-interactive\n              className=\"inline-flex h-9 items-center rounded-md px-4 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground\"\n              onClick={() => setEditing(false)}\n            >\n              Cancel\n            </button>\n            <button\n              type=\"button\"\n              data-plan-interactive\n              className=\"inline-flex h-9 items-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90\"\n              onClick={() => {\n                onChange({ ...data, html, css: css || undefined });\n                setEditing(false);\n              }}\n            >\n              Save\n            </button>\n          </div>\n        </div>\n      ) : (\n        <HtmlPreview data={data} title={title} sanitize={ctx.sanitizeHtml} />\n      )}\n    </div>\n  );\n}\n\n/**\n * The standard HTML / Tailwind block spec. Both apps register this; the plan app\n * registers the matching React-free `{ schema, mdx }` server-side via\n * `html.config.ts`. `empty()` seeds a friendly starter fragment for slash\n * insertion.\n */\nexport const htmlBlock = defineBlock<HtmlBlockData>({\n  type: \"custom-html\",\n  schema: htmlSchema,\n  mdx: htmlMdx,\n  Read: HtmlReadBlock,\n  Edit: HtmlEditBlock,\n  placement: [\"block\"],\n  label: \"HTML / Tailwind\",\n  icon: IconCode,\n  description:\n    \"An author-supplied HTML (with optional CSS) fragment rendered in a sandboxed iframe, with inline source editing.\",\n  empty: () => ({ html: '<div class=\"p-6\">Edit this HTML fragment…</div>' }),\n});\n"]}

package/dist/client/blocks/library/table.config.d.ts

@@ -0,0 +1,30 @@
+import { z } from "zod";
+import type { BlockMdxConfig } from "../types.js";
+/**
+ * Pure (React-free) part of the standard `table` block: its data schema and MDX
+ * round-trip config. Shared by the server MDX adapter (the plan
+ * `plan-block-registry.ts` → `plan-mdx.ts`) and the client spec
+ * (`table.tsx`). Keeping it React-free means a server module that imports it
+ * never pulls React into the Nitro/SSR bundle.
+ *
+ * The schema MUST stay data-compatible with the legacy `table` branch of the
+ * plan `planBlockSchema` (`{ columns: string[]; rows: string[][] }`), and the
+ * MDX `tag` + attribute shape MUST match the legacy self-closing
+ * `<Table … columns={…} rows={…} />` encoding (`plan-mdx.ts`
+ * `serializeBlock`/`parseBlock`) so stored `.mdx` round-trips byte-compatibly.
+ */
+export interface TableData {
+    columns: string[];
+    rows: string[][];
+}
+export declare const tableSchema: z.ZodType<TableData>;
+/**
+ * MDX config: `columns` and `rows` are JSON attributes (no children) — exactly
+ * the legacy self-closing `<Table id title summary editable columns={…} rows={…} />`
+ * form. The legacy serializer emits `columns` before `rows`; `toAttrs` returns
+ * the keys in that exact insertion order because `serializeSpecBlock` preserves
+ * `Object.entries` order. `fromAttrs` mirrors the legacy parser's `?? []`
+ * defaults so partial/older nodes stay tolerant.
+ */
+export declare const tableMdx: BlockMdxConfig<TableData>;
+//# sourceMappingURL=table.config.d.ts.map

package/dist/client/blocks/library/table.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/table.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,SAAS;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,EAGP,CAAC,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;AAEtC;;;;;;;GAOG;AACH,eAAO,MAAM,QAAQ,EAAE,cAAc,CAAC,SAAS,CAO9C,CAAC"}

package/dist/client/blocks/library/table.config.js

@@ -0,0 +1,22 @@
+import { z } from "zod";
+export const tableSchema = z.object({
+    columns: z.array(z.string()),
+    rows: z.array(z.array(z.string())),
+});
+/**
+ * MDX config: `columns` and `rows` are JSON attributes (no children) — exactly
+ * the legacy self-closing `<Table id title summary editable columns={…} rows={…} />`
+ * form. The legacy serializer emits `columns` before `rows`; `toAttrs` returns
+ * the keys in that exact insertion order because `serializeSpecBlock` preserves
+ * `Object.entries` order. `fromAttrs` mirrors the legacy parser's `?? []`
+ * defaults so partial/older nodes stay tolerant.
+ */
+export const tableMdx = {
+    tag: "Table",
+    toAttrs: (data) => ({ columns: data.columns, rows: data.rows }),
+    fromAttrs: (attrs) => ({
+        columns: attrs.array("columns") ?? [],
+        rows: attrs.array("rows") ?? [],
+    }),
+};
+//# sourceMappingURL=table.config.js.map

package/dist/client/blocks/library/table.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/table.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAsBxB,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;IAClC,OAAO,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC;IAC5B,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC;CACnC,CAAoC,CAAC;AAEtC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B;IACjD,GAAG,EAAE,OAAO;IACZ,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAC/D,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,OAAO,EAAE,KAAK,CAAC,KAAK,CAAS,SAAS,CAAC,IAAI,EAAE;QAC7C,IAAI,EAAE,KAAK,CAAC,KAAK,CAAW,MAAM,CAAC,IAAI,EAAE;KAC1C,CAAC;CACH,CAAC","sourcesContent":["import { z } from \"zod\";\nimport type { BlockMdxConfig } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the standard `table` block: its data schema and MDX\n * round-trip config. Shared by the server MDX adapter (the plan\n * `plan-block-registry.ts` → `plan-mdx.ts`) and the client spec\n * (`table.tsx`). Keeping it React-free means a server module that imports it\n * never pulls React into the Nitro/SSR bundle.\n *\n * The schema MUST stay data-compatible with the legacy `table` branch of the\n * plan `planBlockSchema` (`{ columns: string[]; rows: string[][] }`), and the\n * MDX `tag` + attribute shape MUST match the legacy self-closing\n * `<Table … columns={…} rows={…} />` encoding (`plan-mdx.ts`\n * `serializeBlock`/`parseBlock`) so stored `.mdx` round-trips byte-compatibly.\n */\n\nexport interface TableData {\n  columns: string[];\n  rows: string[][];\n}\n\nexport const tableSchema = z.object({\n  columns: z.array(z.string()),\n  rows: z.array(z.array(z.string())),\n}) as unknown as z.ZodType<TableData>;\n\n/**\n * MDX config: `columns` and `rows` are JSON attributes (no children) — exactly\n * the legacy self-closing `<Table id title summary editable columns={…} rows={…} />`\n * form. The legacy serializer emits `columns` before `rows`; `toAttrs` returns\n * the keys in that exact insertion order because `serializeSpecBlock` preserves\n * `Object.entries` order. `fromAttrs` mirrors the legacy parser's `?? []`\n * defaults so partial/older nodes stay tolerant.\n */\nexport const tableMdx: BlockMdxConfig<TableData> = {\n  tag: \"Table\",\n  toAttrs: (data) => ({ columns: data.columns, rows: data.rows }),\n  fromAttrs: (attrs) => ({\n    columns: attrs.array<string>(\"columns\") ?? [],\n    rows: attrs.array<string[]>(\"rows\") ?? [],\n  }),\n};\n"]}

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

@@ -0,0 +1,8 @@
+import { type TableData } from "./table.config.js";
+/**
+ * The full standard `table` `BlockSpec`. Pairs the React-free
+ * {@link tableSchema}/{@link tableMdx} config (also used by the server registry)
+ * with the React `Read`/`Edit`. `empty()` seeds a 2×2 grid for slash insertion.
+ */
+export declare const tableBlock: import("../types.js").BlockSpec<TableData>;
+//# sourceMappingURL=table.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/table.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAyB,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAyO1E;;;;GAIG;AACH,eAAO,MAAM,UAAU,4CAoBrB,CAAC"}