@agent-native/core 0.37.2 → 0.38.0

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

@@ -0,0 +1,107 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { IconColumnInsertRight, IconPlus, IconRowInsertBottom, IconTable, IconTrash, IconX, } from "@tabler/icons-react";
+import { defineBlock } from "../types.js";
+import { tableMdx, tableSchema } from "./table.config.js";
+/**
+ * Standard `table` block — a simple grid of header columns and string rows.
+ * STANDARD library block: lives in core (`@agent-native/core/blocks`) so any
+ * app can register it. The plan app's registries (server + client) import
+ * {@link tableBlock} (browser) and the React-free {@link tableMdx}/
+ * {@link tableSchema} config (server) so its render + MDX round-trip move out
+ * of the plan `PlanBlockView` switch / `serializeBlock` into the registry,
+ * while the legacy branch stays as a backward-compatible fallback for
+ * unregistered renderers.
+ */
+/**
+ * Read-only renderer. Mirrors the legacy plan `PlanBlockView` table branch
+ * markup byte-for-byte (same `plan-block overflow-x-auto` section + title +
+ * `plan-line`/`plan-muted` table) so converting the block to the registry does
+ * not change the rendered output. The `plan-*` class names are styled by the
+ * consuming app's CSS — core only emits the markup, exactly like the existing
+ * `CalloutBlock` read renderer.
+ */
+function TableBlockRead({ data, blockId, title }) {
+    return (_jsxs("section", { className: "plan-block overflow-x-auto", "data-block-id": blockId, children: [title && _jsx("h2", { children: title }), _jsxs("table", { className: "w-full min-w-[640px] border-collapse text-left", children: [_jsx("thead", { children: _jsx("tr", { className: "border-b border-plan-line text-sm text-plan-muted", children: data.columns.map((column) => (_jsx("th", { className: "py-3 pr-4 font-semibold", children: column }, column))) }) }), _jsx("tbody", { children: data.rows.map((row, index) => (_jsx("tr", { className: "border-b border-plan-line", children: row.map((cell, cellIndex) => (_jsx("td", { className: "py-4 pr-4 text-plan-muted", children: cell }, cellIndex))) }, index))) })] })] }));
+}
+const editInputClass = "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 iconButtonClass = "inline-flex size-7 items-center justify-center rounded-md border border-input text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50";
+const addButtonClass = "inline-flex items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50";
+/**
+ * Editable grid. The schema's `columns: string[]` / `rows: string[][]` are
+ * positional/structured, which the schema auto-editor intentionally cannot
+ * render, so this block supplies its own `Edit`: an editable header row plus a
+ * body grid, with add/remove controls for both columns and rows. Every change
+ * commits a full new `{ columns, rows }` value (re-validated upstream by the
+ * registry), keeping rows rectangular with the column count.
+ */
+function TableBlockEdit({ data, onChange, editable, }) {
+    const columns = data.columns ?? [];
+    const rows = data.rows ?? [];
+    const columnCount = columns.length;
+    const commit = (next) => onChange(next);
+    const setColumn = (index, value) => {
+        commit({
+            columns: columns.map((c, i) => (i === index ? value : c)),
+            rows,
+        });
+    };
+    const setCell = (rowIndex, cellIndex, value) => {
+        commit({
+            columns,
+            rows: rows.map((row, i) => i === rowIndex
+                ? row.map((cell, j) => (j === cellIndex ? value : cell))
+                : row),
+        });
+    };
+    const addColumn = () => {
+        commit({
+            columns: [...columns, `Column ${columnCount + 1}`],
+            // Keep rows rectangular: append an empty cell to every row.
+            rows: rows.map((row) => [...row, ""]),
+        });
+    };
+    const removeColumn = (index) => {
+        commit({
+            columns: columns.filter((_, i) => i !== index),
+            rows: rows.map((row) => row.filter((_, i) => i !== index)),
+        });
+    };
+    const addRow = () => {
+        commit({
+            columns,
+            // New row matches the current column count.
+            rows: [
+                ...rows,
+                Array.from({ length: Math.max(columnCount, 1) }, () => ""),
+            ],
+        });
+    };
+    const removeRow = (index) => {
+        commit({ columns, rows: rows.filter((_, i) => i !== index) });
+    };
+    return (_jsxs("div", { className: "an-table-block-editor flex flex-col gap-3", children: [_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full min-w-[480px] border-collapse text-left", children: [_jsx("thead", { children: _jsxs("tr", { children: [columns.map((column, index) => (_jsx("th", { className: "p-1 align-top", children: _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("input", { type: "text", "data-plan-interactive": true, "aria-label": `Column ${index + 1} header`, className: editInputClass, value: column, disabled: !editable, onChange: (event) => setColumn(index, event.target.value) }), _jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": `Remove column ${index + 1}`, className: iconButtonClass, disabled: !editable, onClick: () => removeColumn(index), children: _jsx(IconX, { size: 14 }) })] }) }, index))), _jsx("th", { className: "p-1 align-top", children: _jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": "Add column", className: iconButtonClass, disabled: !editable, onClick: addColumn, children: _jsx(IconColumnInsertRight, { size: 16 }) }) })] }) }), _jsx("tbody", { children: rows.map((row, rowIndex) => (_jsxs("tr", { children: [Array.from({ length: columnCount }).map((_, cellIndex) => (_jsx("td", { className: "p-1 align-top", children: _jsx("input", { type: "text", "data-plan-interactive": true, "aria-label": `Row ${rowIndex + 1}, column ${cellIndex + 1}`, className: editInputClass, value: row[cellIndex] ?? "", disabled: !editable, onChange: (event) => setCell(rowIndex, cellIndex, event.target.value) }) }, cellIndex))), _jsx("td", { className: "p-1 align-top", children: _jsx("button", { type: "button", "data-plan-interactive": true, "aria-label": `Remove row ${rowIndex + 1}`, className: iconButtonClass, disabled: !editable, onClick: () => removeRow(rowIndex), children: _jsx(IconTrash, { size: 14 }) }) })] }, rowIndex))) })] }) }), _jsxs("div", { className: "flex flex-wrap gap-2", children: [_jsxs("button", { type: "button", "data-plan-interactive": true, className: addButtonClass, disabled: !editable, onClick: addRow, children: [_jsx(IconRowInsertBottom, { size: 16 }), "Add row"] }), _jsxs("button", { type: "button", "data-plan-interactive": true, className: addButtonClass, disabled: !editable, onClick: addColumn, children: [_jsx(IconPlus, { size: 16 }), "Add column"] })] })] }));
+}
+/**
+ * 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 const tableBlock = defineBlock({
+    type: "table",
+    schema: tableSchema,
+    mdx: tableMdx,
+    Read: TableBlockRead,
+    Edit: TableBlockEdit,
+    placement: ["block"],
+    label: "Table",
+    icon: ({ size, className }) => (_jsx(IconTable, { size: size, className: className })),
+    description: "A simple grid with header columns and string rows for comparisons, parameters, or structured lists.",
+    empty: () => ({
+        columns: ["Column 1", "Column 2"],
+        rows: [
+            ["", ""],
+            ["", ""],
+        ],
+    }),
+});
+//# sourceMappingURL=table.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  IconColumnInsertRight,\n  IconPlus,\n  IconRowInsertBottom,\n  IconTable,\n  IconTrash,\n  IconX,\n} from \"@tabler/icons-react\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockEditProps, BlockReadProps } from \"../types.js\";\nimport { tableMdx, tableSchema, type TableData } from \"./table.config.js\";\n\n/**\n * Standard `table` block — a simple grid of header columns and string rows.\n * STANDARD library block: lives in core (`@agent-native/core/blocks`) so any\n * app can register it. The plan app's registries (server + client) import\n * {@link tableBlock} (browser) and the React-free {@link tableMdx}/\n * {@link tableSchema} config (server) so its render + MDX round-trip move out\n * of the plan `PlanBlockView` switch / `serializeBlock` into the registry,\n * while the legacy branch stays as a backward-compatible fallback for\n * unregistered renderers.\n */\n\n/**\n * Read-only renderer. Mirrors the legacy plan `PlanBlockView` table branch\n * markup byte-for-byte (same `plan-block overflow-x-auto` section + title +\n * `plan-line`/`plan-muted` table) so converting the block to the registry does\n * not change the rendered output. The `plan-*` class names are styled by the\n * consuming app's CSS — core only emits the markup, exactly like the existing\n * `CalloutBlock` read renderer.\n */\nfunction TableBlockRead({ data, blockId, title }: BlockReadProps<TableData>) {\n  return (\n    <section className=\"plan-block overflow-x-auto\" data-block-id={blockId}>\n      {title && <h2>{title}</h2>}\n      <table className=\"w-full min-w-[640px] border-collapse text-left\">\n        <thead>\n          <tr className=\"border-b border-plan-line text-sm text-plan-muted\">\n            {data.columns.map((column) => (\n              <th key={column} className=\"py-3 pr-4 font-semibold\">\n                {column}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.rows.map((row, index) => (\n            <tr key={index} className=\"border-b border-plan-line\">\n              {row.map((cell, cellIndex) => (\n                <td key={cellIndex} className=\"py-4 pr-4 text-plan-muted\">\n                  {cell}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </section>\n  );\n}\n\nconst editInputClass =\n  \"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 iconButtonClass =\n  \"inline-flex size-7 items-center justify-center rounded-md border border-input text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50\";\n\nconst addButtonClass =\n  \"inline-flex items-center gap-1.5 rounded-md border border-input bg-transparent px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:opacity-50\";\n\n/**\n * Editable grid. The schema's `columns: string[]` / `rows: string[][]` are\n * positional/structured, which the schema auto-editor intentionally cannot\n * render, so this block supplies its own `Edit`: an editable header row plus a\n * body grid, with add/remove controls for both columns and rows. Every change\n * commits a full new `{ columns, rows }` value (re-validated upstream by the\n * registry), keeping rows rectangular with the column count.\n */\nfunction TableBlockEdit({\n  data,\n  onChange,\n  editable,\n}: BlockEditProps<TableData>) {\n  const columns = data.columns ?? [];\n  const rows = data.rows ?? [];\n  const columnCount = columns.length;\n\n  const commit = (next: TableData) => onChange(next);\n\n  const setColumn = (index: number, value: string) => {\n    commit({\n      columns: columns.map((c, i) => (i === index ? value : c)),\n      rows,\n    });\n  };\n\n  const setCell = (rowIndex: number, cellIndex: number, value: string) => {\n    commit({\n      columns,\n      rows: rows.map((row, i) =>\n        i === rowIndex\n          ? row.map((cell, j) => (j === cellIndex ? value : cell))\n          : row,\n      ),\n    });\n  };\n\n  const addColumn = () => {\n    commit({\n      columns: [...columns, `Column ${columnCount + 1}`],\n      // Keep rows rectangular: append an empty cell to every row.\n      rows: rows.map((row) => [...row, \"\"]),\n    });\n  };\n\n  const removeColumn = (index: number) => {\n    commit({\n      columns: columns.filter((_, i) => i !== index),\n      rows: rows.map((row) => row.filter((_, i) => i !== index)),\n    });\n  };\n\n  const addRow = () => {\n    commit({\n      columns,\n      // New row matches the current column count.\n      rows: [\n        ...rows,\n        Array.from({ length: Math.max(columnCount, 1) }, () => \"\"),\n      ],\n    });\n  };\n\n  const removeRow = (index: number) => {\n    commit({ columns, rows: rows.filter((_, i) => i !== index) });\n  };\n\n  return (\n    <div className=\"an-table-block-editor flex flex-col gap-3\">\n      <div className=\"overflow-x-auto\">\n        <table className=\"w-full min-w-[480px] border-collapse text-left\">\n          <thead>\n            <tr>\n              {columns.map((column, index) => (\n                <th key={index} className=\"p-1 align-top\">\n                  <div className=\"flex items-center gap-1\">\n                    <input\n                      type=\"text\"\n                      data-plan-interactive\n                      aria-label={`Column ${index + 1} header`}\n                      className={editInputClass}\n                      value={column}\n                      disabled={!editable}\n                      onChange={(event) => setColumn(index, event.target.value)}\n                    />\n                    <button\n                      type=\"button\"\n                      data-plan-interactive\n                      aria-label={`Remove column ${index + 1}`}\n                      className={iconButtonClass}\n                      disabled={!editable}\n                      onClick={() => removeColumn(index)}\n                    >\n                      <IconX size={14} />\n                    </button>\n                  </div>\n                </th>\n              ))}\n              <th className=\"p-1 align-top\">\n                <button\n                  type=\"button\"\n                  data-plan-interactive\n                  aria-label=\"Add column\"\n                  className={iconButtonClass}\n                  disabled={!editable}\n                  onClick={addColumn}\n                >\n                  <IconColumnInsertRight size={16} />\n                </button>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            {rows.map((row, rowIndex) => (\n              <tr key={rowIndex}>\n                {Array.from({ length: columnCount }).map((_, cellIndex) => (\n                  <td key={cellIndex} className=\"p-1 align-top\">\n                    <input\n                      type=\"text\"\n                      data-plan-interactive\n                      aria-label={`Row ${rowIndex + 1}, column ${cellIndex + 1}`}\n                      className={editInputClass}\n                      value={row[cellIndex] ?? \"\"}\n                      disabled={!editable}\n                      onChange={(event) =>\n                        setCell(rowIndex, cellIndex, event.target.value)\n                      }\n                    />\n                  </td>\n                ))}\n                <td className=\"p-1 align-top\">\n                  <button\n                    type=\"button\"\n                    data-plan-interactive\n                    aria-label={`Remove row ${rowIndex + 1}`}\n                    className={iconButtonClass}\n                    disabled={!editable}\n                    onClick={() => removeRow(rowIndex)}\n                  >\n                    <IconTrash size={14} />\n                  </button>\n                </td>\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      <div className=\"flex flex-wrap gap-2\">\n        <button\n          type=\"button\"\n          data-plan-interactive\n          className={addButtonClass}\n          disabled={!editable}\n          onClick={addRow}\n        >\n          <IconRowInsertBottom size={16} />\n          Add row\n        </button>\n        <button\n          type=\"button\"\n          data-plan-interactive\n          className={addButtonClass}\n          disabled={!editable}\n          onClick={addColumn}\n        >\n          <IconPlus size={16} />\n          Add column\n        </button>\n      </div>\n    </div>\n  );\n}\n\n/**\n * The full standard `table` `BlockSpec`. Pairs the React-free\n * {@link tableSchema}/{@link tableMdx} config (also used by the server registry)\n * with the React `Read`/`Edit`. `empty()` seeds a 2×2 grid for slash insertion.\n */\nexport const tableBlock = defineBlock<TableData>({\n  type: \"table\",\n  schema: tableSchema,\n  mdx: tableMdx,\n  Read: TableBlockRead,\n  Edit: TableBlockEdit,\n  placement: [\"block\"],\n  label: \"Table\",\n  icon: ({ size, className }) => (\n    <IconTable size={size} className={className} />\n  ),\n  description:\n    \"A simple grid with header columns and string rows for comparisons, parameters, or structured lists.\",\n  empty: () => ({\n    columns: [\"Column 1\", \"Column 2\"],\n    rows: [\n      [\"\", \"\"],\n      [\"\", \"\"],\n    ],\n  }),\n});\n"]}

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

@@ -0,0 +1,56 @@
+import { z } from "zod";
+import type { BlockMdxConfig } from "../types.js";
+import type { NestedBlock } from "../types.js";
+/**
+ * Pure (React-free) part of the standard `tabs` block: its data schema and MDX
+ * round-trip config. Shared by the server MDX adapter (a plan/content app
+ * registers it via `@agent-native/core/blocks/server`) and the full client spec
+ * (`tabs.tsx`). Keeping this React-free means importing it into a server module
+ * never pulls React into the Nitro/SSR bundle.
+ *
+ * `tabs` is a STANDARD library block: a horizontal pill-tab container where each
+ * tab holds a list of child blocks. The children are rendered RECURSIVELY
+ * through the app's own block dispatcher (`ctx.renderBlock`), so registered
+ * children render via their spec and unconverted children still fall through the
+ * app's legacy switch — the coexistence seam.
+ *
+ * Its schema MUST stay data-compatible with the legacy plan `tabs` branch of
+ * `planBlockSchema` (`tabs[]` of `{ id, label, blocks: Block[] }`), and the MDX
+ * `tag` + attribute shape MUST match the legacy
+ * `<TabsBlock … tabs={[…]} />` encoding — the WHOLE `tabs` array (including
+ * nested child blocks) encoded as one JSON prop, NOT nested MDX
+ * (`plan-mdx.ts` `serializeBlock` L349 / `parseBlock` L705) — so stored `.mdx`
+ * round-trips byte-compatibly.
+ */
+/** One tab: a label and the child blocks it contains. */
+export interface TabsTab {
+    id: string;
+    label: string;
+    /**
+     * Child blocks. Typed loosely as {@link NestedBlock} because the app owns the
+     * authoritative recursive block union (`planBlockSchema`); the tabs spec only
+     * validates the tab envelope (`id`/`label`) and passes children through.
+     */
+    blocks: NestedBlock[];
+}
+export interface TabsData {
+    tabs: TabsTab[];
+}
+/**
+ * Child blocks are validated by the app's own recursive `planBlockSchema` when
+ * the plan persists; here they pass through untyped (`z.any()`) so core never
+ * needs to import an app-specific block union. The tab envelope (`id`/`label`)
+ * mirrors the plan tabs schema bounds (`plan-content.ts` L1051) exactly.
+ */
+export declare const tabsSchema: z.ZodType<TabsData>;
+/**
+ * MDX config: `tabs` is a single JSON-encoded attribute and the block is
+ * self-closing — exactly the legacy `<TabsBlock id … tabs={[…]} />` form. The
+ * entire `tabs` array (labels + nested child blocks) is one JSON prop; child
+ * blocks are NOT serialized as nested MDX, which preserves the current byte
+ * output. `toAttrs` returns only `tabs`; `fromAttrs` reads the `tabs` array
+ * (defaulting to `[]` for backward-compat with malformed/empty stored blocks,
+ * mirroring the legacy `arrayAttr(node, "tabs") ?? []`).
+ */
+export declare const tabsMdx: BlockMdxConfig<TabsData>;
+//# sourceMappingURL=tabs.config.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.config.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/tabs.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACxB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,yDAAyD;AACzD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,EAAE,WAAW,EAAE,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,OAAO,EAAE,CAAC;CACjB;AAKD;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAWN,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;AAErC;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,EAAE,cAAc,CAAC,QAAQ,CAM5C,CAAC"}

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

@@ -0,0 +1,36 @@
+import { z } from "zod";
+/** Matches the plan `idSchema` (`z.string().trim().min(1).max(120)`). */
+const tabIdSchema = z.string().trim().min(1).max(120);
+/**
+ * Child blocks are validated by the app's own recursive `planBlockSchema` when
+ * the plan persists; here they pass through untyped (`z.any()`) so core never
+ * needs to import an app-specific block union. The tab envelope (`id`/`label`)
+ * mirrors the plan tabs schema bounds (`plan-content.ts` L1051) exactly.
+ */
+export const tabsSchema = z.object({
+    tabs: z
+        .array(z.object({
+        id: tabIdSchema,
+        label: z.string().trim().min(1).max(120),
+        blocks: z.array(z.any()).max(40),
+    }))
+        .min(1)
+        .max(12),
+});
+/**
+ * MDX config: `tabs` is a single JSON-encoded attribute and the block is
+ * self-closing — exactly the legacy `<TabsBlock id … tabs={[…]} />` form. The
+ * entire `tabs` array (labels + nested child blocks) is one JSON prop; child
+ * blocks are NOT serialized as nested MDX, which preserves the current byte
+ * output. `toAttrs` returns only `tabs`; `fromAttrs` reads the `tabs` array
+ * (defaulting to `[]` for backward-compat with malformed/empty stored blocks,
+ * mirroring the legacy `arrayAttr(node, "tabs") ?? []`).
+ */
+export const tabsMdx = {
+    tag: "TabsBlock",
+    toAttrs: (data) => ({ tabs: data.tabs }),
+    fromAttrs: (attrs) => ({
+        tabs: (attrs.array("tabs") ?? []),
+    }),
+};
+//# sourceMappingURL=tabs.config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/tabs.config.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AA0CxB,yEAAyE;AACzE,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AAEtD;;;;;GAKG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC;IACjC,IAAI,EAAE,CAAC;SACJ,KAAK,CACJ,CAAC,CAAC,MAAM,CAAC;QACP,EAAE,EAAE,WAAW;QACf,KAAK,EAAE,CAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC;QACxC,MAAM,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;KACjC,CAAC,CACH;SACA,GAAG,CAAC,CAAC,CAAC;SACN,GAAG,CAAC,EAAE,CAAC;CACX,CAAmC,CAAC;AAErC;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,OAAO,GAA6B;IAC/C,GAAG,EAAE,WAAW;IAChB,OAAO,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IACxC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;QACrB,IAAI,EAAE,CAAC,KAAK,CAAC,KAAK,CAAU,MAAM,CAAC,IAAI,EAAE,CAAc;KACxD,CAAC;CACH,CAAC","sourcesContent":["import { z } from \"zod\";\nimport type { BlockMdxConfig } from \"../types.js\";\nimport type { NestedBlock } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the standard `tabs` block: its data schema and MDX\n * round-trip config. Shared by the server MDX adapter (a plan/content app\n * registers it via `@agent-native/core/blocks/server`) and the full client spec\n * (`tabs.tsx`). Keeping this React-free means importing it into a server module\n * never pulls React into the Nitro/SSR bundle.\n *\n * `tabs` is a STANDARD library block: a horizontal pill-tab container where each\n * tab holds a list of child blocks. The children are rendered RECURSIVELY\n * through the app's own block dispatcher (`ctx.renderBlock`), so registered\n * children render via their spec and unconverted children still fall through the\n * app's legacy switch — the coexistence seam.\n *\n * Its schema MUST stay data-compatible with the legacy plan `tabs` branch of\n * `planBlockSchema` (`tabs[]` of `{ id, label, blocks: Block[] }`), and the MDX\n * `tag` + attribute shape MUST match the legacy\n * `<TabsBlock … tabs={[…]} />` encoding — the WHOLE `tabs` array (including\n * nested child blocks) encoded as one JSON prop, NOT nested MDX\n * (`plan-mdx.ts` `serializeBlock` L349 / `parseBlock` L705) — so stored `.mdx`\n * round-trips byte-compatibly.\n */\n\n/** One tab: a label and the child blocks it contains. */\nexport interface TabsTab {\n  id: string;\n  label: string;\n  /**\n   * Child blocks. Typed loosely as {@link NestedBlock} because the app owns the\n   * authoritative recursive block union (`planBlockSchema`); the tabs spec only\n   * validates the tab envelope (`id`/`label`) and passes children through.\n   */\n  blocks: NestedBlock[];\n}\n\nexport interface TabsData {\n  tabs: TabsTab[];\n}\n\n/** Matches the plan `idSchema` (`z.string().trim().min(1).max(120)`). */\nconst tabIdSchema = z.string().trim().min(1).max(120);\n\n/**\n * Child blocks are validated by the app's own recursive `planBlockSchema` when\n * the plan persists; here they pass through untyped (`z.any()`) so core never\n * needs to import an app-specific block union. The tab envelope (`id`/`label`)\n * mirrors the plan tabs schema bounds (`plan-content.ts` L1051) exactly.\n */\nexport const tabsSchema = z.object({\n  tabs: z\n    .array(\n      z.object({\n        id: tabIdSchema,\n        label: z.string().trim().min(1).max(120),\n        blocks: z.array(z.any()).max(40),\n      }),\n    )\n    .min(1)\n    .max(12),\n}) as unknown as z.ZodType<TabsData>;\n\n/**\n * MDX config: `tabs` is a single JSON-encoded attribute and the block is\n * self-closing — exactly the legacy `<TabsBlock id … tabs={[…]} />` form. The\n * entire `tabs` array (labels + nested child blocks) is one JSON prop; child\n * blocks are NOT serialized as nested MDX, which preserves the current byte\n * output. `toAttrs` returns only `tabs`; `fromAttrs` reads the `tabs` array\n * (defaulting to `[]` for backward-compat with malformed/empty stored blocks,\n * mirroring the legacy `arrayAttr(node, \"tabs\") ?? []`).\n */\nexport const tabsMdx: BlockMdxConfig<TabsData> = {\n  tag: \"TabsBlock\",\n  toAttrs: (data) => ({ tabs: data.tabs }),\n  fromAttrs: (attrs) => ({\n    tabs: (attrs.array<TabsTab>(\"tabs\") ?? []) as TabsTab[],\n  }),\n};\n"]}

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

@@ -0,0 +1,20 @@
+import type { BlockReadProps, BlockEditProps } from "../types.js";
+import { type TabsData } from "./tabs.config.js";
+/** Read renderer: pill tabs, child blocks rendered read-only via the app. */
+export declare function TabsBlockReader({ data, blockId, title, ctx, }: BlockReadProps<TabsData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor: pill tabs plus tab management (add/remove/rename), with child blocks
+ * rendered editable in place through the app dispatcher. A child change updates
+ * that child within its tab and commits the whole tabs block — mirroring the
+ * legacy `TabsBlock` onChange bubbling so the plan's recursive `updateBlocks`/
+ * `findBlock` (`PlanContentRenderer`) keeps working unchanged.
+ */
+export declare function TabsBlockEditor({ data, onChange, editable, blockId, title, ctx, }: BlockEditProps<TabsData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * The standard tabs block spec (with React `Read`/`Edit`). Apps register this in
+ * their browser registry. The schema + MDX config come from `./tabs.config.ts`,
+ * the exact same object server / agent code registers, so rendering and source
+ * round-trip never drift.
+ */
+export declare const tabsBlock: import("../types.js").BlockSpec<TabsData>;
+//# sourceMappingURL=tabs.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/tabs.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAe,MAAM,aAAa,CAAC;AAC/E,OAAO,EAGL,KAAK,QAAQ,EAEd,MAAM,kBAAkB,CAAC;AAuE1B,6EAA6E;AAC7E,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAuB1B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,CAAC,QAAQ,CAAC,2CAsI1B;AAED;;;;;GAKG;AACH,eAAO,MAAM,SAAS,2CAYpB,CAAC"}

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { IconLayoutNavbar, IconPlus, IconX } from "@tabler/icons-react";
+import { cn } from "../../utils.js";
+import { defineBlock } from "../types.js";
+import { tabsSchema, tabsMdx, } from "./tabs.config.js";
+/**
+ * Standard `tabs` block: a horizontal pill-tab container whose tabs each hold a
+ * list of child blocks. Lives in core so any app (plan today, content later) can
+ * register it.
+ *
+ * `Read`/`Edit` mirror the legacy plan `TabsBlock` markup byte-for-byte (same
+ * `plan-block` section, the `inline-flex` pill tab rail with `role="tablist"`/
+ * `role="tab"`, the same active-tab `useState`, and the `compactVisuals`
+ * heuristic on the block title) so converting the block to the registry does not
+ * change rendered output. The plan CSS classes (`plan-block`, `bg-plan-block`,
+ * `text-plan-*`) resolve against the plan app's stylesheet at render time,
+ * exactly as before.
+ *
+ * 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 tabs block never has to know app-specific child block types.
+ */
+/** Mint a reasonably-unique tab id without pulling a dep into core. */
+function newTabId() {
+    return `tab-${Math.random().toString(36).slice(2, 10)}`;
+}
+/** Compact embedded visuals for dense tab panes, matching legacy behavior. */
+function isCompact(title) {
+    return /interaction|component|note/i.test(title ?? "");
+}
+/** Shared pill-tab rail. */
+function TabRail({ tabs, activeId, onSelect, }) {
+    return (_jsx("div", { className: "mb-8 inline-flex max-w-full gap-1 overflow-x-auto", role: "tablist", "data-plan-interactive": true, children: tabs.map((tab) => {
+            const selected = tab.id === activeId;
+            return (_jsx("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => onSelect(tab.id), className: cn("rounded-lg px-4 py-2 text-sm font-semibold transition-colors", selected
+                    ? "bg-plan-block text-plan-text shadow-sm"
+                    : "text-plan-muted hover:bg-plan-block/60 hover:text-plan-text"), children: tab.label }, tab.id));
+        }) }));
+}
+/** Read renderer: pill tabs, child blocks rendered read-only via the app. */
+export function TabsBlockReader({ data, blockId, title, ctx, }) {
+    const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? "");
+    const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];
+    const compact = isCompact(title);
+    return (_jsxs("section", { className: "plan-block", "data-block-id": blockId, children: [title && _jsx("h2", { children: title }), _jsx(TabRail, { tabs: data.tabs, activeId: active?.id, onSelect: setActiveId }), active && (_jsx("div", { children: active.blocks.map((child) => (_jsx("div", { children: ctx.renderBlock?.({
+                        block: child,
+                        editing: false,
+                        compactVisuals: compact,
+                    }) }, child.id))) }))] }));
+}
+/**
+ * Editor: pill tabs plus tab management (add/remove/rename), with child blocks
+ * rendered editable in place through the app dispatcher. A child change updates
+ * that child within its tab and commits the whole tabs block — mirroring the
+ * legacy `TabsBlock` onChange bubbling so the plan's recursive `updateBlocks`/
+ * `findBlock` (`PlanContentRenderer`) keeps working unchanged.
+ */
+export function TabsBlockEditor({ data, onChange, editable, blockId, title, ctx, }) {
+    const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? "");
+    const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];
+    const compact = isCompact(title);
+    const commit = (tabs) => onChange({ tabs });
+    const renameTab = (id, label) => commit(data.tabs.map((tab) => (tab.id === id ? { ...tab, label } : 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 = newTabId();
+        commit([
+            ...data.tabs,
+            { id, label: `Tab ${data.tabs.length + 1}`, blocks: [] },
+        ]);
+        setActiveId(id);
+    };
+    const updateChild = (tabId, child) => commit(data.tabs.map((tab) => tab.id === tabId
+        ? {
+            ...tab,
+            blocks: tab.blocks.map((existing) => existing.id === child.id ? child : existing),
+        }
+        : tab));
+    // 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
+    // (`TabsBlockReader`) owns its own section because read mode renders the spec
+    // directly.
+    return (_jsxs("div", { "data-tabs-edit-block": blockId, children: [_jsxs("div", { className: "mb-8 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: [_jsx("button", { type: "button", role: "tab", "aria-selected": selected, onClick: () => setActiveId(tab.id), className: cn("rounded-lg px-4 py-2 text-sm font-semibold transition-colors", selected ? "text-plan-text" : "text-plan-muted"), children: 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: "grid gap-3", children: [editable && (_jsx("input", { type: "text", "data-plan-interactive": true, className: "flex h-9 w-full max-w-xs 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", placeholder: "Tab label", value: active.label, onChange: (event) => renameTab(active.id, event.target.value) })), _jsx("div", { children: active.blocks.map((child) => (_jsx("div", { children: ctx.renderBlock?.({
+                                block: child,
+                                editing: true,
+                                compactVisuals: compact,
+                                onChange: (next) => updateChild(active.id, next),
+                            }) }, child.id))) })] }))] }));
+}
+/**
+ * The standard tabs block spec (with React `Read`/`Edit`). Apps register this in
+ * their browser registry. The schema + MDX config come from `./tabs.config.ts`,
+ * the exact same object server / agent code registers, so rendering and source
+ * round-trip never drift.
+ */
+export const tabsBlock = defineBlock({
+    type: "tabs",
+    schema: tabsSchema,
+    mdx: tabsMdx,
+    Read: TabsBlockReader,
+    Edit: TabsBlockEditor,
+    placement: ["block", "inline"],
+    label: "Tabs",
+    icon: IconLayoutNavbar,
+    description: "A horizontal pill-tab container; each tab holds its own list of blocks.",
+    empty: () => ({ tabs: [{ id: newTabId(), label: "Tab 1", blocks: [] }] }),
+});
+//# sourceMappingURL=tabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useState } from \"react\";\nimport { IconLayoutNavbar, IconPlus, IconX } from \"@tabler/icons-react\";\nimport { cn } from \"../../utils.js\";\nimport { defineBlock } from \"../types.js\";\nimport type { BlockReadProps, BlockEditProps, NestedBlock } from \"../types.js\";\nimport {\n  tabsSchema,\n  tabsMdx,\n  type TabsData,\n  type TabsTab,\n} from \"./tabs.config.js\";\n\n/**\n * Standard `tabs` block: a horizontal pill-tab container whose tabs each hold a\n * list of child blocks. Lives in core so any app (plan today, content later) can\n * register it.\n *\n * `Read`/`Edit` mirror the legacy plan `TabsBlock` markup byte-for-byte (same\n * `plan-block` section, the `inline-flex` pill tab rail with `role=\"tablist\"`/\n * `role=\"tab\"`, the same active-tab `useState`, and the `compactVisuals`\n * heuristic on the block title) so converting the block to the registry does not\n * change rendered output. The plan CSS classes (`plan-block`, `bg-plan-block`,\n * `text-plan-*`) resolve against the plan app's stylesheet at render time,\n * exactly as before.\n *\n * Child rendering flows through `ctx.renderBlock` — the app's own block\n * dispatcher — so registered children render via their spec and unconverted\n * children fall through the app's legacy switch. This is the coexistence seam:\n * the core tabs block never has to know app-specific child block types.\n */\n\n/** Mint a reasonably-unique tab id without pulling a dep into core. */\nfunction newTabId(): string {\n  return `tab-${Math.random().toString(36).slice(2, 10)}`;\n}\n\n/** Compact embedded visuals for dense tab panes, matching legacy behavior. */\nfunction isCompact(title: string | undefined): boolean {\n  return /interaction|component|note/i.test(title ?? \"\");\n}\n\n/** Shared pill-tab rail. */\nfunction TabRail({\n  tabs,\n  activeId,\n  onSelect,\n}: {\n  tabs: TabsTab[];\n  activeId: string | undefined;\n  onSelect: (id: string) => void;\n}) {\n  return (\n    <div\n      className=\"mb-8 inline-flex max-w-full gap-1 overflow-x-auto\"\n      role=\"tablist\"\n      data-plan-interactive\n    >\n      {tabs.map((tab) => {\n        const selected = tab.id === activeId;\n        return (\n          <button\n            key={tab.id}\n            type=\"button\"\n            role=\"tab\"\n            aria-selected={selected}\n            onClick={() => onSelect(tab.id)}\n            className={cn(\n              \"rounded-lg px-4 py-2 text-sm font-semibold transition-colors\",\n              selected\n                ? \"bg-plan-block text-plan-text shadow-sm\"\n                : \"text-plan-muted hover:bg-plan-block/60 hover:text-plan-text\",\n            )}\n          >\n            {tab.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\n/** Read renderer: pill tabs, child blocks rendered read-only via the app. */\nexport function TabsBlockReader({\n  data,\n  blockId,\n  title,\n  ctx,\n}: BlockReadProps<TabsData>) {\n  const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? \"\");\n  const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];\n  const compact = isCompact(title);\n  return (\n    <section className=\"plan-block\" data-block-id={blockId}>\n      {title && <h2>{title}</h2>}\n      <TabRail tabs={data.tabs} activeId={active?.id} onSelect={setActiveId} />\n      {active && (\n        <div>\n          {active.blocks.map((child) => (\n            <div key={child.id}>\n              {ctx.renderBlock?.({\n                block: child,\n                editing: false,\n                compactVisuals: compact,\n              })}\n            </div>\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n\n/**\n * Editor: pill tabs plus tab management (add/remove/rename), with child blocks\n * rendered editable in place through the app dispatcher. A child change updates\n * that child within its tab and commits the whole tabs block — mirroring the\n * legacy `TabsBlock` onChange bubbling so the plan's recursive `updateBlocks`/\n * `findBlock` (`PlanContentRenderer`) keeps working unchanged.\n */\nexport function TabsBlockEditor({\n  data,\n  onChange,\n  editable,\n  blockId,\n  title,\n  ctx,\n}: BlockEditProps<TabsData>) {\n  const [activeId, setActiveId] = useState(data.tabs[0]?.id ?? \"\");\n  const active = data.tabs.find((tab) => tab.id === activeId) ?? data.tabs[0];\n  const compact = isCompact(title);\n\n  const commit = (tabs: TabsTab[]) => onChange({ tabs });\n\n  const renameTab = (id: string, label: string) =>\n    commit(data.tabs.map((tab) => (tab.id === id ? { ...tab, label } : tab)));\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 = newTabId();\n    commit([\n      ...data.tabs,\n      { id, label: `Tab ${data.tabs.length + 1}`, blocks: [] },\n    ]);\n    setActiveId(id);\n  };\n\n  const updateChild = (tabId: string, child: NestedBlock) =>\n    commit(\n      data.tabs.map((tab) =>\n        tab.id === tabId\n          ? {\n              ...tab,\n              blocks: tab.blocks.map((existing) =>\n                existing.id === child.id ? child : existing,\n              ),\n            }\n          : tab,\n      ),\n    );\n\n  // Renders BARE (no `plan-block` section / title): in edit mode the app's\n  // block dispatcher already wraps registered editors in a titled `plan-block`\n  // section, so wrapping again here would double-nest. The read renderer\n  // (`TabsBlockReader`) owns its own section because read mode renders the spec\n  // directly.\n  return (\n    <div data-tabs-edit-block={blockId}>\n      <div\n        className=\"mb-8 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                  \"rounded-lg px-4 py-2 text-sm font-semibold transition-colors\",\n                  selected ? \"text-plan-text\" : \"text-plan-muted\",\n                )}\n              >\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=\"grid gap-3\">\n          {editable && (\n            <input\n              type=\"text\"\n              data-plan-interactive\n              className=\"flex h-9 w-full max-w-xs 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\"\n              placeholder=\"Tab label\"\n              value={active.label}\n              onChange={(event) => renameTab(active.id, event.target.value)}\n            />\n          )}\n          <div>\n            {active.blocks.map((child) => (\n              <div key={child.id}>\n                {ctx.renderBlock?.({\n                  block: child,\n                  editing: true,\n                  compactVisuals: compact,\n                  onChange: (next) => updateChild(active.id, next),\n                })}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n\n/**\n * The standard tabs block spec (with React `Read`/`Edit`). Apps register this in\n * their browser registry. The schema + MDX config come from `./tabs.config.ts`,\n * the exact same object server / agent code registers, so rendering and source\n * round-trip never drift.\n */\nexport const tabsBlock = defineBlock<TabsData>({\n  type: \"tabs\",\n  schema: tabsSchema,\n  mdx: tabsMdx,\n  Read: TabsBlockReader,\n  Edit: TabsBlockEditor,\n  placement: [\"block\", \"inline\"],\n  label: \"Tabs\",\n  icon: IconLayoutNavbar,\n  description:\n    \"A horizontal pill-tab container; each tab holds its own list of blocks.\",\n  empty: () => ({ tabs: [{ id: newTabId(), label: \"Tab 1\", blocks: [] }] }),\n});\n"]}

package/dist/client/blocks/mdx.d.ts

@@ -0,0 +1,74 @@
+import type { BlockSpec, BlockAttrReader } from "./types.js";
+import type { BlockRegistry } from "./registry.js";
+/**
+ * Registry-driven MDX serialize/parse, plus the shared encoder primitives that
+ * are the round-trip contract. This module is React-free so the server MDX
+ * adapter (`plan-mdx.ts`) and the agent schema export can import it. The encoder
+ * + estree literal walker are kept BYTE-FOR-BYTE identical to the originals in
+ * `plan-mdx.ts` — `plan-mdx.ts` re-imports them so nothing else there changes
+ * and stored `.mdx` files round-trip the same.
+ */
+export declare function jsonExpression(value: unknown): string;
+export declare function escapeAttr(value: string): string;
+/**
+ * Encode a single attribute. Returns "" (the attribute is dropped) for
+ * undefined/null; a bare/`={false}` flag for booleans; `={n}` for numbers; a
+ * quoted string when it matches the safe charset and is short, else a JSON
+ * expression. Objects/arrays always serialize as a JSON expression.
+ */
+export declare function prop(name: string, value: unknown): string;
+/** Minimal MDX AST node shape (subset of the remark-mdx jsx element). */
+export type MdxAttrNode = {
+    type: string;
+    name?: string;
+    value?: string | null | MdxAttrExpression;
+};
+type MdxAttrExpression = {
+    type: string;
+    value: string;
+    data?: unknown;
+};
+export type MdxJsxNode = {
+    type: string;
+    name?: string;
+    attributes?: MdxAttrNode[];
+    children?: unknown[];
+    [key: string]: unknown;
+};
+export declare function attributeValue(attr: MdxAttrNode | undefined): unknown;
+/** Build a {@link BlockAttrReader} bound to one parsed JSX node. */
+export declare function createAttrReader(node: MdxJsxNode): BlockAttrReader;
+/** The base-attribute + body shape every block carries. */
+export interface SerializableBlock {
+    id: string;
+    title?: string;
+    summary?: string;
+    editable?: boolean;
+    data: unknown;
+}
+/** Base block attributes parsed from a node, before the type-specific data. */
+export interface ParsedBlockBase {
+    id: string;
+    title?: string;
+    summary?: string;
+    editable?: boolean;
+}
+/**
+ * Serialize a block to its MDX element using its spec. Byte output MUST match
+ * the legacy `serializeBlock` for every converted block: base attrs
+ * (`id,title,summary,editable`) first, then the spec's `toAttrs` in insertion
+ * order, then either nested children, prose children, or self-closing.
+ */
+export declare function serializeSpecBlock(spec: BlockSpec<any>, block: SerializableBlock): string;
+/**
+ * Parse one MDX JSX node into a block via the registry, if its tag is
+ * registered. Returns `null` for unregistered tags so the caller can fall back
+ * to its legacy parser. `base` is the already-extracted id/title/summary/
+ * editable; `children` is the stringified prose children.
+ */
+export declare function parseSpecBlock(registry: BlockRegistry, node: MdxJsxNode, base: ParsedBlockBase, children: string, idContext: string): {
+    type: string;
+    data: unknown;
+} | null;
+export {};
+//# sourceMappingURL=mdx.d.ts.map

package/dist/client/blocks/mdx.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mdx.d.ts","sourceRoot":"","sources":["../../../src/client/blocks/mdx.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,eAAe,EAAgB,MAAM,YAAY,CAAC;AAC3E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;GAOG;AAMH,wBAAgB,cAAc,CAAC,KAAK,EAAE,OAAO,GAAG,MAAM,CAErD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAMhD;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,MAAM,CAazD;AAMD,yEAAyE;AACzE,MAAM,MAAM,WAAW,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,iBAAiB,CAAC;CAC3C,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAgBF,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,WAAW,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC;AAWF,wBAAgB,cAAc,CAAC,IAAI,EAAE,WAAW,GAAG,SAAS,GAAG,OAAO,CAgBrE;AA+CD,oEAAoE;AACpE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,GAAG,eAAe,CAyBlE;AAMD,2DAA2D;AAC3D,MAAM,WAAW,iBAAiB;IAChC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,OAAO,CAAC;CACf;AAED,+EAA+E;AAC/E,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,SAAS,CAAC,GAAG,CAAC,EACpB,KAAK,EAAE,iBAAiB,GACvB,MAAM,CA+BR;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAC5B,QAAQ,EAAE,aAAa,EACvB,IAAI,EAAE,UAAU,EAChB,IAAI,EAAE,eAAe,EACrB,QAAQ,EAAE,MAAM,EAChB,SAAS,EAAE,MAAM,GAChB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,GAAG,IAAI,CAmBxC"}