@agent-native/core 0.39.1 → 0.40.0

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

@@ -0,0 +1,25 @@
+import type { BlockEditProps, BlockReadProps } from "../types.js";
+import { type ColumnsData } from "./columns.config.js";
+/** Read renderer: a responsive grid of columns, each child rendered read-only. */
+export declare function ColumnsBlockReader({ data, blockId, title, ctx, }: BlockReadProps<ColumnsData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor: the same responsive grid, with child blocks rendered editable in
+ * place through the app dispatcher. A child change updates that child within
+ * its column and commits the whole
+ * columns block — mirroring the legacy `tabs` onChange bubbling so the plan's
+ * recursive `updateBlocks`/`findBlock` (`PlanContentRenderer`) keeps working.
+ *
+ * Renders BARE (no `plan-block` section / title): in edit mode the app's block
+ * dispatcher already wraps registered editors in a titled `plan-block` section,
+ * so wrapping again here would double-nest. The read renderer owns its own
+ * section because read mode renders the spec directly.
+ */
+export declare function ColumnsBlockEditor({ data, onChange, editable, blockId, ctx, }: BlockEditProps<ColumnsData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * The standard columns block spec (with React `Read`/`Edit`). Apps register this
+ * in their browser registry. The schema + MDX config come from
+ * `./columns.config.ts`, the exact same object server / agent code registers, so
+ * rendering and source round-trip never drift.
+ */
+export declare const columnsBlock: import("../types.js").BlockSpec<ColumnsData>;
+//# sourceMappingURL=columns.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/columns.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,cAAc,EACd,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,EAGL,KAAK,WAAW,EAEjB,MAAM,qBAAqB,CAAC;AAiG7B,kFAAkF;AAClF,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,CAAC,WAAW,CAAC,2CAmB7B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,WAAW,CAAC,2CAmE7B;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY,8CA0DvB,CAAC"}

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

@@ -0,0 +1,199 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconColumns } from "@tabler/icons-react";
+import { cn } from "../../utils.js";
+import { defineBlock } from "../types.js";
+import { columnsSchema, columnsMdx, } from "./columns.config.js";
+/**
+ * Standard `columns` block: a multi-column side-by-side container whose columns
+ * each hold a list of child blocks. Labels may still exist in stored data for
+ * source round-tripping, but the document UI intentionally renders bare regions.
+ *
+ * Like `tabs`, child rendering flows through `ctx.renderBlock` — the app's own
+ * block dispatcher — so registered children render via their spec and
+ * unconverted children fall through the app's legacy switch. This is the
+ * coexistence seam: the core columns block never has to know app-specific child
+ * block types. The plan CSS classes (`plan-block`, `text-plan-*`) resolve
+ * against the plan app's stylesheet at render time.
+ */
+/** Mint a reasonably-unique column id without pulling a dep into core. */
+function newColId() {
+    return `col-${Math.random().toString(36).slice(2, 10)}`;
+}
+/**
+ * Tailwind grid-column classes keyed by the column count. The grid collapses to
+ * a single column on small screens and fans out to the column count at `md`+, so
+ * narrow viewports stack the panels instead of crushing them.
+ */
+const COLS_CLASS = {
+    1: "grid-cols-1",
+    2: "grid-cols-1 md:grid-cols-2",
+    3: "grid-cols-1 md:grid-cols-3",
+    4: "grid-cols-1 md:grid-cols-4",
+};
+/** Resolve the responsive grid class for a column count (clamped to 1–4). */
+function gridColsClass(count) {
+    return COLS_CLASS[Math.min(4, Math.max(1, count))] ?? COLS_CLASS[1];
+}
+const API_REFERENCE_BLOCK_TYPES = new Set(["api-endpoint", "openapi-spec"]);
+const BEFORE_LABELS = new Set(["before", "old", "previous", "current"]);
+const AFTER_LABELS = new Set(["after", "new", "next", "target"]);
+function normalizedLabel(column) {
+    return column.label?.trim().toLowerCase() ?? "";
+}
+function isComparisonGroup(columns) {
+    const labels = columns.map(normalizedLabel);
+    return (labels.some((label) => BEFORE_LABELS.has(label)) &&
+        labels.some((label) => AFTER_LABELS.has(label)));
+}
+function isApiReferenceGroup(columns) {
+    return (columns.length > 1 &&
+        !isComparisonGroup(columns) &&
+        columns.every((column) => column.blocks.length > 0 &&
+            column.blocks.every((block) => API_REFERENCE_BLOCK_TYPES.has(block.type))));
+}
+function columnsLayoutClass(columns) {
+    return isApiReferenceGroup(columns)
+        ? COLS_CLASS[1]
+        : gridColsClass(columns.length);
+}
+function isBlankRichTextBlock(block) {
+    if (block.type !== "rich-text")
+        return false;
+    const data = block.data;
+    if (!data || typeof data !== "object" || Array.isArray(data))
+        return false;
+    const markdown = data.markdown;
+    return typeof markdown === "string" && markdown.trim().length === 0;
+}
+function isEffectivelyEmptyRegion(blocks) {
+    return (blocks.length === 0 ||
+        (blocks.length === 1 && isBlankRichTextBlock(blocks[0])));
+}
+function areSameBlocks(a, b) {
+    if (a === b)
+        return true;
+    try {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    catch {
+        return false;
+    }
+}
+/** Read renderer: a responsive grid of columns, each child rendered read-only. */
+export function ColumnsBlockReader({ data, blockId, title, ctx, }) {
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("div", { className: "plan-block-label", children: title }), _jsx("div", { className: cn("grid gap-6", columnsLayoutClass(data.columns)), children: data.columns.map((column) => (_jsx("div", { className: "min-w-0", children: _jsx("div", { children: column.blocks.map((child) => (_jsx("div", { children: ctx.renderBlock?.({ block: child, editing: false }) }, child.id))) }) }, column.id))) })] }));
+}
+/**
+ * Editor: the same responsive grid, with child blocks rendered editable in
+ * place through the app dispatcher. A child change updates that child within
+ * its column and commits the whole
+ * columns block — mirroring the legacy `tabs` onChange bubbling so the plan's
+ * recursive `updateBlocks`/`findBlock` (`PlanContentRenderer`) keeps working.
+ *
+ * Renders BARE (no `plan-block` section / title): in edit mode the app's block
+ * dispatcher already wraps registered editors in a titled `plan-block` section,
+ * so wrapping again here would double-nest. The read renderer owns its own
+ * section because read mode renders the spec directly.
+ */
+export function ColumnsBlockEditor({ data, onChange, editable, blockId, ctx, }) {
+    const commit = (columns) => onChange({ columns });
+    const updateChild = (columnId, child) => commit(data.columns.map((column) => column.id === columnId
+        ? {
+            ...column,
+            blocks: column.blocks.map((existing) => existing.id === child.id ? child : existing),
+        }
+        : column));
+    return (_jsx("div", { "data-columns-edit-block": blockId, className: "grid gap-3", children: _jsx("div", { className: cn("grid gap-6", columnsLayoutClass(data.columns)), children: data.columns.map((column) => (_jsx("div", { className: "min-w-0", children: _jsx("div", { children: ctx.renderBlocksEditor
+                        ? ctx.renderBlocksEditor({
+                            blocks: column.blocks,
+                            onChange: (nextBlocks) => {
+                                if (areSameBlocks(nextBlocks, column.blocks))
+                                    return;
+                                onChange({
+                                    columns: data.columns.map((existing) => existing.id === column.id
+                                        ? {
+                                            ...existing,
+                                            blocks: nextBlocks,
+                                        }
+                                        : existing),
+                                }, {
+                                    containerRegion: {
+                                        regionId: column.id,
+                                        blocks: nextBlocks,
+                                    },
+                                });
+                            },
+                            editable,
+                            containerBlockId: blockId,
+                            regionId: column.id,
+                            regionLabel: column.label,
+                        })
+                        : column.blocks.map((child) => (_jsx("div", { children: ctx.renderBlock?.({
+                                block: child,
+                                editing: true,
+                                onChange: (next) => updateChild(column.id, next),
+                            }) }, child.id))) }) }, column.id))) }) }));
+}
+/**
+ * The standard columns block spec (with React `Read`/`Edit`). Apps register this
+ * in their browser registry. The schema + MDX config come from
+ * `./columns.config.ts`, the exact same object server / agent code registers, so
+ * rendering and source round-trip never drift.
+ */
+export const columnsBlock = defineBlock({
+    type: "columns",
+    schema: columnsSchema,
+    mdx: columnsMdx,
+    Read: ColumnsBlockReader,
+    Edit: ColumnsBlockEditor,
+    placement: ["block"],
+    editSurface: "container",
+    container: {
+        regions: (data) => data.columns,
+        updateRegion: (data, regionId, blocks) => {
+            const shouldRemoveRegion = data.columns.length > 1 && isEffectivelyEmptyRegion(blocks);
+            return {
+                columns: data.columns
+                    .map((column) => column.id === regionId ? { ...column, blocks } : column)
+                    .filter((column) => column.id !== regionId || !shouldRemoveRegion),
+            };
+        },
+        addRegion: (data, afterRegionId) => {
+            if (data.columns.length >= 4)
+                return data;
+            const nextColumn = {
+                id: newColId(),
+                blocks: [],
+            };
+            if (!afterRegionId)
+                return { columns: [...data.columns, nextColumn] };
+            const afterIndex = data.columns.findIndex((column) => column.id === afterRegionId);
+            if (afterIndex < 0)
+                return { columns: [...data.columns, nextColumn] };
+            return {
+                columns: [
+                    ...data.columns.slice(0, afterIndex + 1),
+                    nextColumn,
+                    ...data.columns.slice(afterIndex + 1),
+                ],
+            };
+        },
+        removeRegion: (data, regionId) => {
+            if (data.columns.length <= 1)
+                return data;
+            return {
+                columns: data.columns.filter((column) => column.id !== regionId),
+            };
+        },
+    },
+    label: "Columns",
+    icon: IconColumns,
+    description: "A multi-column side-by-side layout container; each column holds its own list of blocks. Ideal for before/after or current/target comparisons.",
+    empty: () => ({
+        columns: [
+            { id: newColId(), blocks: [] },
+            { id: newColId(), blocks: [] },
+        ],
+    }),
+});
+//# sourceMappingURL=columns.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"columns.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/columns.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IconColumns } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport { defineBlock } from \"../types.js\";\nimport type {\n  BlockContainerRegion,\n  BlockEditProps,\n  BlockReadProps,\n  NestedBlock,\n} from \"../types.js\";\nimport {\n  columnsSchema,\n  columnsMdx,\n  type ColumnsData,\n  type ColumnsColumn,\n} from \"./columns.config.js\";\n\n/**\n * Standard `columns` block: a multi-column side-by-side container whose columns\n * each hold a list of child blocks. Labels may still exist in stored data for\n * source round-tripping, but the document UI intentionally renders bare regions.\n *\n * Like `tabs`, child rendering flows through `ctx.renderBlock` — the app's own\n * block dispatcher — so registered children render via their spec and\n * unconverted children fall through the app's legacy switch. This is the\n * coexistence seam: the core columns block never has to know app-specific child\n * block types. The plan CSS classes (`plan-block`, `text-plan-*`) resolve\n * against the plan app's stylesheet at render time.\n */\n\n/** Mint a reasonably-unique column id without pulling a dep into core. */\nfunction newColId(): string {\n  return `col-${Math.random().toString(36).slice(2, 10)}`;\n}\n\n/**\n * Tailwind grid-column classes keyed by the column count. The grid collapses to\n * a single column on small screens and fans out to the column count at `md`+, so\n * narrow viewports stack the panels instead of crushing them.\n */\nconst COLS_CLASS: Record<number, string> = {\n  1: \"grid-cols-1\",\n  2: \"grid-cols-1 md:grid-cols-2\",\n  3: \"grid-cols-1 md:grid-cols-3\",\n  4: \"grid-cols-1 md:grid-cols-4\",\n};\n\n/** Resolve the responsive grid class for a column count (clamped to 1–4). */\nfunction gridColsClass(count: number): string {\n  return COLS_CLASS[Math.min(4, Math.max(1, count))] ?? COLS_CLASS[1];\n}\n\nconst API_REFERENCE_BLOCK_TYPES = new Set([\"api-endpoint\", \"openapi-spec\"]);\nconst BEFORE_LABELS = new Set([\"before\", \"old\", \"previous\", \"current\"]);\nconst AFTER_LABELS = new Set([\"after\", \"new\", \"next\", \"target\"]);\n\nfunction normalizedLabel(column: ColumnsColumn): string {\n  return column.label?.trim().toLowerCase() ?? \"\";\n}\n\nfunction isComparisonGroup(columns: ColumnsColumn[]): boolean {\n  const labels = columns.map(normalizedLabel);\n  return (\n    labels.some((label) => BEFORE_LABELS.has(label)) &&\n    labels.some((label) => AFTER_LABELS.has(label))\n  );\n}\n\nfunction isApiReferenceGroup(columns: ColumnsColumn[]): boolean {\n  return (\n    columns.length > 1 &&\n    !isComparisonGroup(columns) &&\n    columns.every(\n      (column) =>\n        column.blocks.length > 0 &&\n        column.blocks.every((block) =>\n          API_REFERENCE_BLOCK_TYPES.has(block.type),\n        ),\n    )\n  );\n}\n\nfunction columnsLayoutClass(columns: ColumnsColumn[]): string {\n  return isApiReferenceGroup(columns)\n    ? COLS_CLASS[1]\n    : gridColsClass(columns.length);\n}\n\nfunction isBlankRichTextBlock(block: NestedBlock): boolean {\n  if (block.type !== \"rich-text\") return false;\n  const data = block.data;\n  if (!data || typeof data !== \"object\" || Array.isArray(data)) return false;\n  const markdown = (data as { markdown?: unknown }).markdown;\n  return typeof markdown === \"string\" && markdown.trim().length === 0;\n}\n\nfunction isEffectivelyEmptyRegion(blocks: NestedBlock[]): boolean {\n  return (\n    blocks.length === 0 ||\n    (blocks.length === 1 && isBlankRichTextBlock(blocks[0]!))\n  );\n}\n\nfunction areSameBlocks(a: NestedBlock[], b: NestedBlock[]): boolean {\n  if (a === b) return true;\n  try {\n    return JSON.stringify(a) === JSON.stringify(b);\n  } catch {\n    return false;\n  }\n}\n\n/** Read renderer: a responsive grid of columns, each child rendered read-only. */\nexport function ColumnsBlockReader({\n  data,\n  blockId,\n  title,\n  ctx,\n}: BlockReadProps<ColumnsData>) {\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <div className=\"plan-block-label\">{title}</div>}\n      <div className={cn(\"grid gap-6\", columnsLayoutClass(data.columns))}>\n        {data.columns.map((column) => (\n          <div key={column.id} className=\"min-w-0\">\n            <div>\n              {column.blocks.map((child) => (\n                <div key={child.id}>\n                  {ctx.renderBlock?.({ block: child, editing: false })}\n                </div>\n              ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </section>\n  );\n}\n\n/**\n * Editor: the same responsive grid, with child blocks rendered editable in\n * place through the app dispatcher. A child change updates that child within\n * its column and commits the whole\n * columns block — mirroring the legacy `tabs` onChange bubbling so the plan's\n * recursive `updateBlocks`/`findBlock` (`PlanContentRenderer`) keeps working.\n *\n * Renders BARE (no `plan-block` section / title): in edit mode the app's block\n * dispatcher already wraps registered editors in a titled `plan-block` section,\n * so wrapping again here would double-nest. The read renderer owns its own\n * section because read mode renders the spec directly.\n */\nexport function ColumnsBlockEditor({\n  data,\n  onChange,\n  editable,\n  blockId,\n  ctx,\n}: BlockEditProps<ColumnsData>) {\n  const commit = (columns: ColumnsColumn[]) => onChange({ columns });\n\n  const updateChild = (columnId: string, child: NestedBlock) =>\n    commit(\n      data.columns.map((column) =>\n        column.id === columnId\n          ? {\n              ...column,\n              blocks: column.blocks.map((existing) =>\n                existing.id === child.id ? child : existing,\n              ),\n            }\n          : column,\n      ),\n    );\n\n  return (\n    <div data-columns-edit-block={blockId} className=\"grid gap-3\">\n      <div className={cn(\"grid gap-6\", columnsLayoutClass(data.columns))}>\n        {data.columns.map((column) => (\n          <div key={column.id} className=\"min-w-0\">\n            <div>\n              {ctx.renderBlocksEditor\n                ? ctx.renderBlocksEditor({\n                    blocks: column.blocks,\n                    onChange: (nextBlocks) => {\n                      if (areSameBlocks(nextBlocks, column.blocks)) return;\n                      onChange(\n                        {\n                          columns: data.columns.map((existing) =>\n                            existing.id === column.id\n                              ? {\n                                  ...existing,\n                                  blocks: nextBlocks,\n                                }\n                              : existing,\n                          ),\n                        },\n                        {\n                          containerRegion: {\n                            regionId: column.id,\n                            blocks: nextBlocks,\n                          },\n                        },\n                      );\n                    },\n                    editable,\n                    containerBlockId: blockId,\n                    regionId: column.id,\n                    regionLabel: column.label,\n                  })\n                : column.blocks.map((child) => (\n                    <div key={child.id}>\n                      {ctx.renderBlock?.({\n                        block: child,\n                        editing: true,\n                        onChange: (next) => updateChild(column.id, next),\n                      })}\n                    </div>\n                  ))}\n            </div>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\n/**\n * The standard columns block spec (with React `Read`/`Edit`). Apps register this\n * in their browser registry. The schema + MDX config come from\n * `./columns.config.ts`, the exact same object server / agent code registers, so\n * rendering and source round-trip never drift.\n */\nexport const columnsBlock = defineBlock<ColumnsData>({\n  type: \"columns\",\n  schema: columnsSchema,\n  mdx: columnsMdx,\n  Read: ColumnsBlockReader,\n  Edit: ColumnsBlockEditor,\n  placement: [\"block\"],\n  editSurface: \"container\",\n  container: {\n    regions: (data): BlockContainerRegion[] => data.columns,\n    updateRegion: (data, regionId, blocks) => {\n      const shouldRemoveRegion =\n        data.columns.length > 1 && isEffectivelyEmptyRegion(blocks);\n\n      return {\n        columns: data.columns\n          .map((column) =>\n            column.id === regionId ? { ...column, blocks } : column,\n          )\n          .filter((column) => column.id !== regionId || !shouldRemoveRegion),\n      };\n    },\n    addRegion: (data, afterRegionId) => {\n      if (data.columns.length >= 4) return data;\n      const nextColumn: ColumnsColumn = {\n        id: newColId(),\n        blocks: [],\n      };\n      if (!afterRegionId) return { columns: [...data.columns, nextColumn] };\n      const afterIndex = data.columns.findIndex(\n        (column) => column.id === afterRegionId,\n      );\n      if (afterIndex < 0) return { columns: [...data.columns, nextColumn] };\n      return {\n        columns: [\n          ...data.columns.slice(0, afterIndex + 1),\n          nextColumn,\n          ...data.columns.slice(afterIndex + 1),\n        ],\n      };\n    },\n    removeRegion: (data, regionId) => {\n      if (data.columns.length <= 1) return data;\n      return {\n        columns: data.columns.filter((column) => column.id !== regionId),\n      };\n    },\n  },\n  label: \"Columns\",\n  icon: IconColumns,\n  description:\n    \"A multi-column side-by-side layout container; each column holds its own list of blocks. Ideal for before/after or current/target comparisons.\",\n  empty: () => ({\n    columns: [\n      { id: newColId(), blocks: [] },\n      { id: newColId(), blocks: [] },\n    ],\n  }),\n});\n"]}

package/dist/client/blocks/library/dev-doc-ui.d.ts

@@ -2,7 +2,8 @@ import type { ComponentProps, InputHTMLAttributes, LabelHTMLAttributes, ReactNod
 /**
  * Minimal, app-agnostic form primitives for the core "dev-doc" block library
  * (mermaid / api-endpoint / data-model / diff / file-tree / json-explorer /
- * annotated-code). These blocks previously imported the plan app's shadcn/ui
+ * annotated-code).
+ * These blocks previously imported the plan app's shadcn/ui
  * components (`@/components/ui/*`); core blocks must stay portable, so these are
  * plain styled elements that reproduce the SAME shadcn Tailwind classes byte-for
  * -byte. They resolve against whatever shadcn token theme (`border-input`,

package/dist/client/blocks/library/dev-doc-ui.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dev-doc-ui.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/dev-doc-ui.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EACT,sBAAsB,EACvB,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;;;;GAcG;AAIH,eAAO,MAAM,QAAQ,oIAanB,CAAC;AAKH,eAAO,MAAM,QAAQ,oIAYnB,CAAC;AAKH,eAAO,MAAM,WAAW,6IAYtB,CAAC;AAKH,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,2CAUvE;AAID;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CACN,mBAAmB,CAAC,iBAAiB,CAAC,EACtC,UAAU,GAAG,SAAS,GAAG,MAAM,CAChC,2CAwBA;AAID,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAsBA"}
+{"version":3,"file":"dev-doc-ui.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/dev-doc-ui.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACV,cAAc,EACd,mBAAmB,EACnB,mBAAmB,EACnB,SAAS,EACT,sBAAsB,EACvB,MAAM,OAAO,CAAC;AAIf;;;;;;;;;;;;;;;GAeG;AAIH,eAAO,MAAM,QAAQ,oIAanB,CAAC;AAKH,eAAO,MAAM,QAAQ,oIAYnB,CAAC;AAKH,eAAO,MAAM,WAAW,6IAYtB,CAAC;AAKH,gEAAgE;AAChE,wBAAgB,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,MAAM,CAAC,2CAUvE;AAID;;;GAGG;AACH,wBAAgB,SAAS,CAAC,EACxB,OAAO,EACP,eAAe,EACf,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAC;IACjB,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,GAAG,IAAI,CACN,mBAAmB,CAAC,iBAAiB,CAAC,EACtC,UAAU,GAAG,SAAS,GAAG,MAAM,CAChC,2CAwBA;AAID,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;CAClB;AAED;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAa,EACb,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EAAE,SAAS,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,2CAsBA"}

package/dist/client/blocks/library/dev-doc-ui.js

@@ -5,7 +5,8 @@ import { cn } from "../../utils.js";
 /**
  * Minimal, app-agnostic form primitives for the core "dev-doc" block library
  * (mermaid / api-endpoint / data-model / diff / file-tree / json-explorer /
- * annotated-code). These blocks previously imported the plan app's shadcn/ui
+ * annotated-code).
+ * These blocks previously imported the plan app's shadcn/ui
  * components (`@/components/ui/*`); core blocks must stay portable, so these are
  * plain styled elements that reproduce the SAME shadcn Tailwind classes byte-for
  * -byte. They resolve against whatever shadcn token theme (`border-input`,

package/dist/client/blocks/library/dev-doc-ui.js.map

@@ -1 +1 @@
-{"version":3,"file":"dev-doc-ui.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/dev-doc-ui.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  ComponentProps,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  ReactNode,\n  TextareaHTMLAttributes,\n} from \"react\";\nimport { IconChevronDown } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\n\n/**\n * Minimal, app-agnostic form primitives for the core \"dev-doc\" block library\n * (mermaid / api-endpoint / data-model / diff / file-tree / json-explorer /\n * annotated-code). These blocks previously imported the plan app's shadcn/ui\n * components (`@/components/ui/*`); core blocks must stay portable, so these are\n * plain styled elements that reproduce the SAME shadcn Tailwind classes byte-for\n * -byte. They resolve against whatever shadcn token theme (`border-input`,\n * `bg-background`, `ring-ring`, …) the host app ships, so the rendered look is\n * unchanged across apps.\n *\n * The Select is intentionally a NATIVE `<select>` styled to match the shadcn\n * trigger rather than a Radix popover: it keeps core dependency-free and behaves\n * identically for the simple enum pickers these editors use (method, change,\n * param location, diff mode).\n */\n\n/* ── Input ─────────────────────────────────────────────────────────────────── */\n\nexport const DevInput = forwardRef<\n  HTMLInputElement,\n  InputHTMLAttributes<HTMLInputElement>\n>(({ className, type, ...props }, ref) => (\n  <input\n    ref={ref}\n    type={type}\n    className={cn(\n      \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevInput.displayName = \"DevInput\";\n\n/* ── Label ─────────────────────────────────────────────────────────────────── */\n\nexport const DevLabel = forwardRef<\n  HTMLLabelElement,\n  LabelHTMLAttributes<HTMLLabelElement>\n>(({ className, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn(\n      \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevLabel.displayName = \"DevLabel\";\n\n/* ── Textarea ──────────────────────────────────────────────────────────────── */\n\nexport const DevTextarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    className={cn(\n      \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevTextarea.displayName = \"DevTextarea\";\n\n/* ── Badge ─────────────────────────────────────────────────────────────────── */\n\n/** Only the `outline` badge variant is used by these blocks. */\nexport function DevBadge({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Switch ────────────────────────────────────────────────────────────────── */\n\n/**\n * A native-checkbox toggle styled to read like the shadcn Switch. `onCheckedChange`\n * mirrors the shadcn/Radix API so call sites stay identical.\n */\nexport function DevSwitch({\n  checked,\n  onCheckedChange,\n  disabled,\n  className,\n  ...props\n}: {\n  checked: boolean;\n  onCheckedChange: (checked: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLButtonElement>,\n  \"onChange\" | \"checked\" | \"type\"\n>) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      disabled={disabled}\n      data-plan-interactive\n      onClick={() => onCheckedChange(!checked)}\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50\",\n        checked ? \"bg-primary\" : \"bg-input\",\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    >\n      <span\n        className={cn(\n          \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform\",\n          checked ? \"translate-x-5\" : \"translate-x-0\",\n        )}\n      />\n    </button>\n  );\n}\n\n/* ── Select (native, shadcn-trigger styled) ────────────────────────────────── */\n\nexport interface DevSelectOption {\n  value: string;\n  label: ReactNode;\n}\n\n/**\n * A native `<select>` styled to match the shadcn SelectTrigger. Drop-in for the\n * simple enum pickers the dev-doc editors use. `onValueChange` mirrors the shadcn\n * API. The chevron is positioned over the native control.\n */\nexport function DevSelect({\n  value,\n  onValueChange,\n  options,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n}: {\n  value: string;\n  onValueChange: (value: string) => void;\n  options: DevSelectOption[];\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <select\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        data-plan-interactive\n        onChange={(event) => onValueChange(event.target.value)}\n        className={cn(\n          \"flex h-10 w-full appearance-none items-center justify-between rounded-md border border-input bg-background px-3 py-2 pr-8 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        )}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {typeof option.label === \"string\" ? option.label : option.value}\n          </option>\n        ))}\n      </select>\n      <IconChevronDown className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 opacity-50\" />\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"dev-doc-ui.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/dev-doc-ui.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from \"react\";\nimport type {\n  ComponentProps,\n  InputHTMLAttributes,\n  LabelHTMLAttributes,\n  ReactNode,\n  TextareaHTMLAttributes,\n} from \"react\";\nimport { IconChevronDown } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\n\n/**\n * Minimal, app-agnostic form primitives for the core \"dev-doc\" block library\n * (mermaid / api-endpoint / data-model / diff / file-tree / json-explorer /\n * annotated-code).\n * These blocks previously imported the plan app's shadcn/ui\n * components (`@/components/ui/*`); core blocks must stay portable, so these are\n * plain styled elements that reproduce the SAME shadcn Tailwind classes byte-for\n * -byte. They resolve against whatever shadcn token theme (`border-input`,\n * `bg-background`, `ring-ring`, …) the host app ships, so the rendered look is\n * unchanged across apps.\n *\n * The Select is intentionally a NATIVE `<select>` styled to match the shadcn\n * trigger rather than a Radix popover: it keeps core dependency-free and behaves\n * identically for the simple enum pickers these editors use (method, change,\n * param location, diff mode).\n */\n\n/* ── Input ─────────────────────────────────────────────────────────────────── */\n\nexport const DevInput = forwardRef<\n  HTMLInputElement,\n  InputHTMLAttributes<HTMLInputElement>\n>(({ className, type, ...props }, ref) => (\n  <input\n    ref={ref}\n    type={type}\n    className={cn(\n      \"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevInput.displayName = \"DevInput\";\n\n/* ── Label ─────────────────────────────────────────────────────────────────── */\n\nexport const DevLabel = forwardRef<\n  HTMLLabelElement,\n  LabelHTMLAttributes<HTMLLabelElement>\n>(({ className, ...props }, ref) => (\n  <label\n    ref={ref}\n    className={cn(\n      \"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevLabel.displayName = \"DevLabel\";\n\n/* ── Textarea ──────────────────────────────────────────────────────────────── */\n\nexport const DevTextarea = forwardRef<\n  HTMLTextAreaElement,\n  TextareaHTMLAttributes<HTMLTextAreaElement>\n>(({ className, ...props }, ref) => (\n  <textarea\n    ref={ref}\n    className={cn(\n      \"flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  />\n));\nDevTextarea.displayName = \"DevTextarea\";\n\n/* ── Badge ─────────────────────────────────────────────────────────────────── */\n\n/** Only the `outline` badge variant is used by these blocks. */\nexport function DevBadge({ className, ...props }: ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/* ── Switch ────────────────────────────────────────────────────────────────── */\n\n/**\n * A native-checkbox toggle styled to read like the shadcn Switch. `onCheckedChange`\n * mirrors the shadcn/Radix API so call sites stay identical.\n */\nexport function DevSwitch({\n  checked,\n  onCheckedChange,\n  disabled,\n  className,\n  ...props\n}: {\n  checked: boolean;\n  onCheckedChange: (checked: boolean) => void;\n  disabled?: boolean;\n  className?: string;\n} & Omit<\n  InputHTMLAttributes<HTMLButtonElement>,\n  \"onChange\" | \"checked\" | \"type\"\n>) {\n  return (\n    <button\n      type=\"button\"\n      role=\"switch\"\n      aria-checked={checked}\n      disabled={disabled}\n      data-plan-interactive\n      onClick={() => onCheckedChange(!checked)}\n      className={cn(\n        \"peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50\",\n        checked ? \"bg-primary\" : \"bg-input\",\n        className,\n      )}\n      {...(props as Record<string, unknown>)}\n    >\n      <span\n        className={cn(\n          \"pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform\",\n          checked ? \"translate-x-5\" : \"translate-x-0\",\n        )}\n      />\n    </button>\n  );\n}\n\n/* ── Select (native, shadcn-trigger styled) ────────────────────────────────── */\n\nexport interface DevSelectOption {\n  value: string;\n  label: ReactNode;\n}\n\n/**\n * A native `<select>` styled to match the shadcn SelectTrigger. Drop-in for the\n * simple enum pickers the dev-doc editors use. `onValueChange` mirrors the shadcn\n * API. The chevron is positioned over the native control.\n */\nexport function DevSelect({\n  value,\n  onValueChange,\n  options,\n  disabled,\n  className,\n  \"aria-label\": ariaLabel,\n}: {\n  value: string;\n  onValueChange: (value: string) => void;\n  options: DevSelectOption[];\n  disabled?: boolean;\n  className?: string;\n  \"aria-label\"?: string;\n}) {\n  return (\n    <div className={cn(\"relative\", className)}>\n      <select\n        value={value}\n        disabled={disabled}\n        aria-label={ariaLabel}\n        data-plan-interactive\n        onChange={(event) => onValueChange(event.target.value)}\n        className={cn(\n          \"flex h-10 w-full appearance-none items-center justify-between rounded-md border border-input bg-background px-3 py-2 pr-8 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        )}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {typeof option.label === \"string\" ? option.label : option.value}\n          </option>\n        ))}\n      </select>\n      <IconChevronDown className=\"pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 opacity-50\" />\n    </div>\n  );\n}\n"]}

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

@@ -10,7 +10,7 @@ export declare function HtmlReadBlock({ data, blockId, title, ctx, }: BlockReadP
  * 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;
+export declare function HtmlEditBlock({ data, onChange, editable, blockId, title, summary, 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

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

@@ -1 +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,gDAepB,CAAC"}
+{"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;AAElE,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,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,aAAa,CAAC,2CAyI/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,gDAepB,CAAC"}

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

@@ -1,7 +1,8 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
+import { useEffect, useId, useState } from "react";
 import { IconCode, IconEdit, IconX } from "@tabler/icons-react";
 import { defineBlock } from "../types.js";
+import { AiEditableFieldLabel } from "../AiEditableField.js";
 import { htmlSchema, htmlMdx } from "./html.config.js";
 /**
  * Standard library HTML / Tailwind block. The registry form of the plan
@@ -39,12 +40,41 @@ export function HtmlReadBlock({ data, blockId, title, ctx, }) {
  * which the app routes through its generic `update-block` patch (re-validated by
  * the app schema).
  */
-export function HtmlEditBlock({ data, onChange, editable, title, ctx, }) {
+export function HtmlEditBlock({ data, onChange, editable, blockId, title, summary, ctx, }) {
+    const htmlId = useId();
+    const cssId = useId();
+    const captionId = useId();
     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 });
+    const [caption, setCaption] = useState(data.caption ?? "");
+    useEffect(() => {
+        setHtml(data.html);
+        setCss(data.css ?? "");
+        setCaption(data.caption ?? "");
+    }, [data]);
+    const fieldAction = (field, value) => ({
+        blockId,
+        blockType: "custom-html",
+        blockTitle: title,
+        blockSummary: summary,
+        fieldValue: value,
+        draftScope: `block:custom-html:${blockId}:${field.toLowerCase().replace(/[^a-z0-9]+/g, "-")}`,
+        disabled: !editable,
+        instructions: "Update the plan with update-visual-plan using a targeted update-block content patch for this custom-html block id. Preserve unrelated HTML/CSS/caption fields unless the requested edit requires changing them.",
+        companionFields: [
+            { label: "HTML fragment", value: html || "(empty)", language: "html" },
+            { label: "CSS", value: css || "(empty)", language: "css" },
+            { label: "Caption", value: caption || "(empty)", language: "text" },
+        ],
+    });
+    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 && (_jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": editing ? "Cancel editing source" : "Edit source", className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring", onClick: () => setEditing((value) => !value), children: editing ? (_jsx(IconX, { className: "size-4" })) : (_jsx(IconEdit, { className: "size-4" })) })) }), editing ? (_jsxs("div", { className: "mt-2 grid gap-3", "data-plan-interactive": true, children: [_jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: htmlId, label: "HTML fragment", ctx: ctx, action: fieldAction("HTML fragment", html) }), _jsx("textarea", { id: htmlId, value: html, disabled: !editable, 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 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "HTML fragment" })] }), _jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: cssId, label: "CSS", ctx: ctx, action: fieldAction("CSS", css) }), _jsx("textarea", { id: cssId, value: css, disabled: !editable, 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 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Optional CSS" })] }), _jsxs("div", { className: "group/field grid gap-1.5", children: [_jsx(AiEditableFieldLabel, { htmlFor: captionId, label: "Caption", ctx: ctx, action: fieldAction("Caption", caption) }), _jsx("input", { id: captionId, type: "text", value: caption, disabled: !editable, onChange: (event) => setCaption(event.target.value), className: "flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50", placeholder: "Optional caption" })] }), _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 transition-colors hover:bg-primary/90", onClick: () => {
+                                    onChange({
+                                        ...data,
+                                        html,
+                                        css: css || undefined,
+                                        caption: caption || undefined,
+                                    });
                                     setEditing(false);
                                 }, children: "Save" })] })] })) : (_jsx(HtmlPreview, { data: data, title: title, sanitize: ctx.sanitizeHtml }))] }));
 }

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

@@ -1 +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 && <div className=\"plan-block-label\">{title}</div>}\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  // Config-driven: the render (a sandboxed card) differs from its source, so edit\n  // the html/css/caption from a corner button + panel rather than always-inline.\n  editSurface: \"panel\",\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"]}
+{"version":3,"file":"html.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/html.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useId, useState } from \"react\";\nimport { IconCode, IconEdit, IconX } from \"@tabler/icons-react\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps } from \"../types.js\";\nimport { AiEditableFieldLabel } from \"../AiEditableField.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 && <div className=\"plan-block-label\">{title}</div>}\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  blockId,\n  title,\n  summary,\n  ctx,\n}: BlockEditProps<HtmlBlockData>) {\n  const htmlId = useId();\n  const cssId = useId();\n  const captionId = useId();\n  const [editing, setEditing] = useState(false);\n  const [html, setHtml] = useState(data.html);\n  const [css, setCss] = useState(data.css ?? \"\");\n  const [caption, setCaption] = useState(data.caption ?? \"\");\n\n  useEffect(() => {\n    setHtml(data.html);\n    setCss(data.css ?? \"\");\n    setCaption(data.caption ?? \"\");\n  }, [data]);\n\n  const fieldAction = (\n    field: \"HTML fragment\" | \"CSS\" | \"Caption\",\n    value: string,\n  ) => ({\n    blockId,\n    blockType: \"custom-html\",\n    blockTitle: title,\n    blockSummary: summary,\n    fieldValue: value,\n    draftScope: `block:custom-html:${blockId}:${field.toLowerCase().replace(/[^a-z0-9]+/g, \"-\")}`,\n    disabled: !editable,\n    instructions:\n      \"Update the plan with update-visual-plan using a targeted update-block content patch for this custom-html block id. Preserve unrelated HTML/CSS/caption fields unless the requested edit requires changing them.\",\n    companionFields: [\n      { label: \"HTML fragment\", value: html || \"(empty)\", language: \"html\" },\n      { label: \"CSS\", value: css || \"(empty)\", language: \"css\" },\n      { label: \"Caption\", value: caption || \"(empty)\", language: \"text\" },\n    ],\n  });\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            aria-label={editing ? \"Cancel editing source\" : \"Edit source\"}\n            className=\"inline-flex size-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\"\n            onClick={() => setEditing((value) => !value)}\n          >\n            {editing ? (\n              <IconX className=\"size-4\" />\n            ) : (\n              <IconEdit className=\"size-4\" />\n            )}\n          </button>\n        )}\n      </div>\n      {editing ? (\n        <div className=\"mt-2 grid gap-3\" data-plan-interactive>\n          <div className=\"group/field grid gap-1.5\">\n            <AiEditableFieldLabel\n              htmlFor={htmlId}\n              label=\"HTML fragment\"\n              ctx={ctx}\n              action={fieldAction(\"HTML fragment\", html)}\n            />\n            <textarea\n              id={htmlId}\n              value={html}\n              disabled={!editable}\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 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=\"HTML fragment\"\n            />\n          </div>\n          <div className=\"group/field grid gap-1.5\">\n            <AiEditableFieldLabel\n              htmlFor={cssId}\n              label=\"CSS\"\n              ctx={ctx}\n              action={fieldAction(\"CSS\", css)}\n            />\n            <textarea\n              id={cssId}\n              value={css}\n              disabled={!editable}\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 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=\"Optional CSS\"\n            />\n          </div>\n          <div className=\"group/field grid gap-1.5\">\n            <AiEditableFieldLabel\n              htmlFor={captionId}\n              label=\"Caption\"\n              ctx={ctx}\n              action={fieldAction(\"Caption\", caption)}\n            />\n            <input\n              id={captionId}\n              type=\"text\"\n              value={caption}\n              disabled={!editable}\n              onChange={(event) => setCaption(event.target.value)}\n              className=\"flex h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\"\n              placeholder=\"Optional caption\"\n            />\n          </div>\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 transition-colors hover:bg-primary/90\"\n              onClick={() => {\n                onChange({\n                  ...data,\n                  html,\n                  css: css || undefined,\n                  caption: caption || undefined,\n                });\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  // Config-driven: the render (a sandboxed card) differs from its source, so edit\n  // the html/css/caption from a corner button + panel rather than always-inline.\n  editSurface: \"panel\",\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/json-explorer.config.d.ts

@@ -22,13 +22,15 @@ import type { BlockMdxConfig } from "../types.js";
  * children) — the shared `prop()` encoder round-trips multiline strings cleanly,
  * and keeping it an attribute avoids the payload being reflowed as prose.
  */
+export declare const JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH = 2;
+export declare const JSON_EXPLORER_MAX_COLLAPSED_DEPTH = 20;
 export interface JsonExplorerData {
     /** Optional heading shown above the tree. */
     title?: string;
     /** Raw JSON text — the source of truth, parsed defensively at render time. */
     json: string;
     /**
-     * Depth beyond which nodes start collapsed (default 1). Nodes at a depth `<`
+     * Depth beyond which nodes start collapsed (default 2). Nodes at a depth `<`
      * this value render expanded; deeper nodes render collapsed until clicked.
      */
     collapsedDepth?: number;

package/dist/client/blocks/library/json-explorer.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"json-explorer.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/json-explorer.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,EAId,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAE7C;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAY5D,CAAC"}
+{"version":3,"file":"json-explorer.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/json-explorer.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,qCAAqC,IAAI,CAAC;AACvD,eAAO,MAAM,iCAAiC,KAAK,CAAC;AAEpD,MAAM,WAAW,gBAAgB;IAC/B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8EAA8E;IAC9E,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,kBAAkB,EASd,CAAC,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC;AAE7C;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,gBAAgB,CAY5D,CAAC"}

package/dist/client/blocks/library/json-explorer.config.js

@@ -1,8 +1,37 @@
 import { z } from "zod";
+/**
+ * Pure (React-free) part of the PLAN-SPECIFIC `json-explorer` 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 browser-devtools / Postman-style collapsible JSON tree:
+ * object/array nodes show a chevron + a one-line summary ("{…} 3 keys" /
+ * "[…] 5 items") and expand/collapse; leaf values are type-colored (string =
+ * green, number = blue, boolean = violet, null = muted). The raw JSON TEXT is
+ * the source of truth (`json`), so authoring round-trips losslessly even when
+ * the JSON is invalid — the reader parses defensively and falls back to the raw
+ * text on a parse error rather than throwing.
+ *
+ * The schema MUST stay data-compatible with the inline `json-explorer` member of
+ * `planBlockSchema` (`plan-content.ts`), and the MDX `tag` (`Json`) +
+ * attribute shape MUST match the `<Json title json collapsedDepth />` encoding so
+ * stored `.mdx` round-trips. `json` lives in the `json` ATTRIBUTE (not MDX
+ * children) — the shared `prop()` encoder round-trips multiline strings cleanly,
+ * and keeping it an attribute avoids the payload being reflowed as prose.
+ */
+export const JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH = 2;
+export const JSON_EXPLORER_MAX_COLLAPSED_DEPTH = 20;
 export const jsonExplorerSchema = z.object({
     title: z.string().trim().max(200).optional(),
     json: z.string().max(200_000),
-    collapsedDepth: z.number().int().min(0).max(20).optional(),
+    collapsedDepth: z
+        .number()
+        .int()
+        .min(0)
+        .max(JSON_EXPLORER_MAX_COLLAPSED_DEPTH)
+        .optional(),
 });
 /**
  * MDX config: `title`, `json`, and `collapsedDepth` are flat attributes — the

package/dist/client/blocks/library/json-explorer.config.js.map

@@ -1 +1 @@
-{"version":3,"file":"json-explorer.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/json-explorer.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAsCxB,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC,MAAM,CAAC;IACzC,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,GAAG,CAAC,OAAO,CAAC;IAC7B,cAAc,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,QAAQ,EAAE;CAC3D,CAA2C,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAqC;IAC/D,GAAG,EAAE,MAAM;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,cAAc,EAAE,IAAI,CAAC,cAAc;KACpC,CAAC;IACF,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;QAChC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;KAC/C,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 `json-explorer` 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 browser-devtools / Postman-style collapsible JSON tree:\n * object/array nodes show a chevron + a one-line summary (\"{…} 3 keys\" /\n * \"[…] 5 items\") and expand/collapse; leaf values are type-colored (string =\n * green, number = blue, boolean = violet, null = muted). The raw JSON TEXT is\n * the source of truth (`json`), so authoring round-trips losslessly even when\n * the JSON is invalid — the reader parses defensively and falls back to the raw\n * text on a parse error rather than throwing.\n *\n * The schema MUST stay data-compatible with the inline `json-explorer` member of\n * `planBlockSchema` (`plan-content.ts`), and the MDX `tag` (`Json`) +\n * attribute shape MUST match the `<Json title json collapsedDepth />` encoding so\n * stored `.mdx` round-trips. `json` lives in the `json` ATTRIBUTE (not MDX\n * children) — the shared `prop()` encoder round-trips multiline strings cleanly,\n * and keeping it an attribute avoids the payload being reflowed as prose.\n */\n\nexport interface JsonExplorerData {\n  /** Optional heading shown above the tree. */\n  title?: string;\n  /** Raw JSON text — the source of truth, parsed defensively at render time. */\n  json: string;\n  /**\n   * Depth beyond which nodes start collapsed (default 1). Nodes at a depth `<`\n   * this value render expanded; deeper nodes render collapsed until clicked.\n   */\n  collapsedDepth?: number;\n}\n\nexport const jsonExplorerSchema = z.object({\n  title: z.string().trim().max(200).optional(),\n  json: z.string().max(200_000),\n  collapsedDepth: z.number().int().min(0).max(20).optional(),\n}) as unknown as z.ZodType<JsonExplorerData>;\n\n/**\n * MDX config: `title`, `json`, and `collapsedDepth` are flat attributes — the\n * `<Json id … title json collapsedDepth />` self-closing form. Insertion order\n * of `toAttrs` is the on-disk attribute order (`title` → `json` →\n * `collapsedDepth`). `fromAttrs` mirrors a forgiving parse (`json ?? \"\"`,\n * `title`/`collapsedDepth` undefined when absent) so a plan missing an attribute\n * still parses.\n */\nexport const jsonExplorerMdx: BlockMdxConfig<JsonExplorerData> = {\n  tag: \"Json\",\n  toAttrs: (data) => ({\n    title: data.title,\n    json: data.json,\n    collapsedDepth: data.collapsedDepth,\n  }),\n  fromAttrs: (attrs) => ({\n    json: attrs.string(\"json\") ?? \"\",\n    title: attrs.string(\"title\"),\n    collapsedDepth: attrs.number(\"collapsedDepth\"),\n  }),\n};\n"]}
+{"version":3,"file":"json-explorer.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/json-explorer.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,MAAM,CAAC,MAAM,qCAAqC,GAAG,CAAC,CAAC;AACvD,MAAM,CAAC,MAAM,iCAAiC,GAAG,EAAE,CAAC;AAcpD,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC,MAAM,CAAC;IACzC,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,GAAG,CAAC,OAAO,CAAC;IAC7B,cAAc,EAAE,CAAC;SACd,MAAM,EAAE;SACR,GAAG,EAAE;SACL,GAAG,CAAC,CAAC,CAAC;SACN,GAAG,CAAC,iCAAiC,CAAC;SACtC,QAAQ,EAAE;CACd,CAA2C,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAqC;IAC/D,GAAG,EAAE,MAAM;IACX,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAClB,KAAK,EAAE,IAAI,CAAC,KAAK;QACjB,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,cAAc,EAAE,IAAI,CAAC,cAAc;KACpC,CAAC;IACF,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,EAAE;QAChC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;QAC5B,cAAc,EAAE,KAAK,CAAC,MAAM,CAAC,gBAAgB,CAAC;KAC/C,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 `json-explorer` 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 browser-devtools / Postman-style collapsible JSON tree:\n * object/array nodes show a chevron + a one-line summary (\"{…} 3 keys\" /\n * \"[…] 5 items\") and expand/collapse; leaf values are type-colored (string =\n * green, number = blue, boolean = violet, null = muted). The raw JSON TEXT is\n * the source of truth (`json`), so authoring round-trips losslessly even when\n * the JSON is invalid — the reader parses defensively and falls back to the raw\n * text on a parse error rather than throwing.\n *\n * The schema MUST stay data-compatible with the inline `json-explorer` member of\n * `planBlockSchema` (`plan-content.ts`), and the MDX `tag` (`Json`) +\n * attribute shape MUST match the `<Json title json collapsedDepth />` encoding so\n * stored `.mdx` round-trips. `json` lives in the `json` ATTRIBUTE (not MDX\n * children) — the shared `prop()` encoder round-trips multiline strings cleanly,\n * and keeping it an attribute avoids the payload being reflowed as prose.\n */\n\nexport const JSON_EXPLORER_DEFAULT_COLLAPSED_DEPTH = 2;\nexport const JSON_EXPLORER_MAX_COLLAPSED_DEPTH = 20;\n\nexport interface JsonExplorerData {\n  /** Optional heading shown above the tree. */\n  title?: string;\n  /** Raw JSON text — the source of truth, parsed defensively at render time. */\n  json: string;\n  /**\n   * Depth beyond which nodes start collapsed (default 2). Nodes at a depth `<`\n   * this value render expanded; deeper nodes render collapsed until clicked.\n   */\n  collapsedDepth?: number;\n}\n\nexport const jsonExplorerSchema = z.object({\n  title: z.string().trim().max(200).optional(),\n  json: z.string().max(200_000),\n  collapsedDepth: z\n    .number()\n    .int()\n    .min(0)\n    .max(JSON_EXPLORER_MAX_COLLAPSED_DEPTH)\n    .optional(),\n}) as unknown as z.ZodType<JsonExplorerData>;\n\n/**\n * MDX config: `title`, `json`, and `collapsedDepth` are flat attributes — the\n * `<Json id … title json collapsedDepth />` self-closing form. Insertion order\n * of `toAttrs` is the on-disk attribute order (`title` → `json` →\n * `collapsedDepth`). `fromAttrs` mirrors a forgiving parse (`json ?? \"\"`,\n * `title`/`collapsedDepth` undefined when absent) so a plan missing an attribute\n * still parses.\n */\nexport const jsonExplorerMdx: BlockMdxConfig<JsonExplorerData> = {\n  tag: \"Json\",\n  toAttrs: (data) => ({\n    title: data.title,\n    json: data.json,\n    collapsedDepth: data.collapsedDepth,\n  }),\n  fromAttrs: (attrs) => ({\n    json: attrs.string(\"json\") ?? \"\",\n    title: attrs.string(\"title\"),\n    collapsedDepth: attrs.number(\"collapsedDepth\"),\n  }),\n};\n"]}

package/dist/client/blocks/library/server-specs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"server-specs.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/server-specs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AA0DpE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,GAAG,CAAC,EAqI/C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAC9C,MAAM,EACN,OAAO,CACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,kBAAkB,CAAC,CAC5E,CACF,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,2BAA2B,CAAA;CAAO,GACxD,IAAI,CAON"}
+{"version":3,"file":"server-specs.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/server-specs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,aAAa,CAAC;AAC1D,OAAO,EAAkB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AA+DpE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,CAAC,GAAG,CAAC,EA+I/C,CAAC;AAEF;;;;;GAKG;AACH,MAAM,MAAM,2BAA2B,GAAG,MAAM,CAC9C,MAAM,EACN,OAAO,CACL,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa,GAAG,kBAAkB,CAAC,CAC5E,CACF,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,2BAA2B,CACzC,QAAQ,EAAE,aAAa,EACvB,OAAO,GAAE;IAAE,SAAS,CAAC,EAAE,2BAA2B,CAAA;CAAO,GACxD,IAAI,CAON"}