@agent-native/core 0.42.0 → 0.44.0

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

@@ -0,0 +1,311 @@
+import { z } from "zod";
+import { prop, attributeValue } from "../mdx.js";
+export const WIREFRAME_SURFACES = [
+    "desktop",
+    "mobile",
+    "popover",
+    "panel",
+    "browser",
+];
+export const WIREFRAME_EL_NAMES = [
+    "screen",
+    "browserBar",
+    "statusBar",
+    "toolbar",
+    "row",
+    "col",
+    "sidebar",
+    "navItem",
+    "main",
+    "title",
+    "text",
+    "lines",
+    "section",
+    "taskRow",
+    "chips",
+    "chip",
+    "pill",
+    "check",
+    "field",
+    "btn",
+    "fab",
+    "card",
+    "column",
+    "avatar",
+    "iconSquare",
+    "kv",
+    "searchBar",
+    "box",
+    "divider",
+];
+/* -------------------------------------------------------------------------- */
+/* Schema (mirrors the plan-content wireframeDataSchema)                       */
+/* -------------------------------------------------------------------------- */
+const toneSchema = z.enum(["default", "accent", "warn", "ok", "muted"]);
+const elNameSchema = z.enum(WIREFRAME_EL_NAMES);
+const idSchema = z.string().trim().min(1).max(120);
+/**
+ * Reject full-document HTML (html/head/body/script/style tags) in the `html` /
+ * `css` fields. Wireframe content must be a bounded fragment; document or script
+ * tags are a stored-XSS and layout-escape hazard.
+ */
+function noFullHtmlDocument(value) {
+    return !/<\s*(?:!doctype|html|head|body|script|style)\b/i.test(value);
+}
+const wireframeNodeSchema = z.lazy(() => z
+    .object({
+    id: idSchema.optional(),
+    el: elNameSchema,
+    children: z.array(wireframeNodeSchema).max(60).optional(),
+    text: z.string().trim().max(400).optional(),
+    value: z.string().trim().max(400).optional(),
+    label: z.string().trim().max(200).optional(),
+    placeholder: z.string().trim().max(200).optional(),
+    title: z.string().trim().max(200).optional(),
+    tone: toneSchema.optional(),
+    color: toneSchema.optional(),
+    weight: z.enum(["normal", "medium", "bold"]).optional(),
+    active: z.boolean().optional(),
+    done: z.boolean().optional(),
+    emphasis: z.boolean().optional(),
+    full: z.boolean().optional(),
+    solid: z.boolean().optional(),
+    dashed: z.boolean().optional(),
+    dot: z.boolean().optional(),
+    script: z.boolean().optional(),
+    area: z.boolean().optional(),
+    shape: z.enum(["square", "circle"]).optional(),
+    count: z.number().int().min(0).max(9_999).optional(),
+    prio: z.number().int().min(0).max(9).optional(),
+    n: z.number().int().min(0).max(20).optional(),
+    widths: z.array(z.number().min(0).max(100)).max(20).optional(),
+    icon: z.string().trim().max(40).optional(),
+    note: z.string().trim().max(400).optional(),
+    due: z.string().trim().max(120).optional(),
+    dueTone: toneSchema.optional(),
+    items: z
+        .array(z.object({
+        label: z.string().trim().min(1).max(200),
+        active: z.boolean().optional(),
+        count: z.number().int().min(0).max(9_999).optional(),
+        dot: z.boolean().optional(),
+    }))
+        .max(40)
+        .optional(),
+    rows: z
+        .array(z.object({
+        k: z.string().trim().min(1).max(200),
+        v: z.string().trim().max(400),
+    }))
+        .max(40)
+        .optional(),
+})
+    .passthrough());
+export const wireframeSchema = z
+    .object({
+    surface: z.enum(["desktop", "mobile", "popover", "panel", "browser"]),
+    renderMode: z.enum(["wireframe", "design"]).optional(),
+    caption: z.string().trim().max(400).optional(),
+    skeleton: z.boolean().optional(),
+    html: z
+        .string()
+        .max(40_000)
+        .refine(noFullHtmlDocument, {
+        message: "Wireframe html must be a bounded fragment without html/head/body/script/style tags.",
+    })
+        .optional(),
+    css: z
+        .string()
+        .max(20_000)
+        .refine(noFullHtmlDocument, {
+        message: "Wireframe css must not include document or script tags.",
+    })
+        .optional(),
+    screen: z.array(wireframeNodeSchema).max(200).optional(),
+})
+    .passthrough();
+/* -------------------------------------------------------------------------- */
+/* Stable node-id derivation (verbatim from plan-mdx.ts)                       */
+/* -------------------------------------------------------------------------- */
+/**
+ * Derive a stable node id from the element name and tree path. Re-runs identically
+ * to the legacy plan derivation so stored plans round-trip without changing ids.
+ */
+export function createStableWireframeNodeId(el, path) {
+    return `node-${el}-${path}`
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "")
+        .slice(0, 80);
+}
+/* -------------------------------------------------------------------------- */
+/* Kit node <-> MDX component name maps (mirrors plan-mdx.ts NODE_TO_COMPONENT) */
+/* -------------------------------------------------------------------------- */
+const NODE_TO_COMPONENT = {
+    screen: "FrameScreen",
+    browserBar: "BrowserBar",
+    statusBar: "StatusBar",
+    toolbar: "Toolbar",
+    row: "Row",
+    col: "Col",
+    sidebar: "Sidebar",
+    navItem: "NavItem",
+    main: "Main",
+    title: "Title",
+    text: "Text",
+    lines: "Lines",
+    section: "SectionLabel",
+    taskRow: "TaskRow",
+    chips: "Chips",
+    chip: "Chip",
+    pill: "Pill",
+    check: "Check",
+    field: "Field",
+    btn: "Btn",
+    fab: "Fab",
+    card: "Card",
+    column: "Column",
+    avatar: "Avatar",
+    iconSquare: "IconSquare",
+    kv: "KV",
+    searchBar: "SearchBar",
+    box: "Box",
+    divider: "Divider",
+};
+const COMPONENT_TO_NODE = Object.fromEntries(Object.entries(NODE_TO_COMPONENT).map(([el, component]) => [component, el]));
+/* -------------------------------------------------------------------------- */
+/* Serialize (verbatim port of plan-mdx.ts serializeNode/serializeScreen)      */
+/* -------------------------------------------------------------------------- */
+function serializeNode(node, indent = "") {
+    const name = NODE_TO_COMPONENT[node.el] ?? "Box";
+    const attrs = Object.entries(node)
+        .filter(([key]) => key !== "children" && key !== "el")
+        .map(([key, value]) => prop(key, value))
+        .join("");
+    if (!node.children?.length)
+        return `${indent}<${name}${attrs} />`;
+    const children = node.children
+        .map((child) => serializeNode(child, `${indent}  `))
+        .join("\n");
+    return `${indent}<${name}${attrs}>\n${children}\n${indent}</${name}>`;
+}
+/**
+ * Serialize the wireframe data to its inner `<Screen>` MDX subtree. The registry
+ * serializer wraps this between the `<WireframeBlock …>` open/close tags, so the
+ * total output equals the legacy `serializeBlock` wireframe branch exactly.
+ */
+function serializeScreen(data) {
+    const attrs = [
+        prop("surface", data.surface),
+        prop("renderMode", data.renderMode),
+        prop("caption", data.caption),
+        prop("html", data.html),
+        prop("css", data.css),
+        prop("skeleton", data.skeleton),
+    ].join("");
+    const children = (data.screen ?? [])
+        .map((node) => serializeNode(node, "  "))
+        .join("\n");
+    if (!children)
+        return `<Screen${attrs} />`;
+    return `<Screen${attrs}>\n${children}\n</Screen>`;
+}
+function elementName(node) {
+    return node?.type === "mdxJsxFlowElement" ||
+        node?.type === "mdxJsxTextElement"
+        ? node.name
+        : undefined;
+}
+function findAttribute(node, name) {
+    return node.attributes?.find((attr) => attr.type === "mdxJsxAttribute" && attr.name === name);
+}
+function stringAttr(node, name) {
+    const value = attributeValue(findAttribute(node, name));
+    return typeof value === "string" ? value : undefined;
+}
+/**
+ * Resolve a required-when-present string attribute on a `<Screen>`. If the
+ * attribute is absent we return undefined, but if it is present yet cannot be
+ * resolved to a string (e.g. a number, an object, or an unevaluable expression)
+ * we THROW so a malformed wireframe fails the import instead of silently
+ * dropping the value and rendering an empty wireframe.
+ */
+function requiredStringAttr(node, name) {
+    const attr = findAttribute(node, name);
+    if (!attr)
+        return undefined;
+    const value = attributeValue(attr);
+    if (typeof value !== "string") {
+        throw new Error(`Wireframe <Screen> attribute "${name}" must resolve to a string, got ${typeof value}. Use a quoted string or a static template literal.`);
+    }
+    return value;
+}
+function boolAttr(node, name) {
+    const value = attributeValue(findAttribute(node, name));
+    return typeof value === "boolean" ? value : undefined;
+}
+function parseWireframeNode(node, path = "node") {
+    const component = elementName(node);
+    if (!component)
+        return null;
+    const el = COMPONENT_TO_NODE[component];
+    if (!el)
+        return null;
+    const attrs = node.attributes ?? [];
+    const parsed = { el };
+    for (const attr of attrs) {
+        if (attr.type !== "mdxJsxAttribute")
+            continue;
+        const value = attributeValue(attr);
+        if (value !== undefined)
+            parsed[attr.name] = value;
+    }
+    parsed.el = el;
+    parsed.id ??= createStableWireframeNodeId(el, path);
+    const children = (node.children ?? [])
+        .map((child, index) => parseWireframeNode(child, `${path}-${index}`))
+        .filter(Boolean);
+    if (children.length > 0)
+        parsed.children = children;
+    return parsed;
+}
+function parseScreen(node, idContext) {
+    return {
+        surface: stringAttr(node, "surface") ?? "desktop",
+        renderMode: stringAttr(node, "renderMode"),
+        caption: stringAttr(node, "caption"),
+        html: requiredStringAttr(node, "html"),
+        css: requiredStringAttr(node, "css"),
+        skeleton: boolAttr(node, "skeleton"),
+        screen: (node.children ?? [])
+            .map((child, index) => parseWireframeNode(child, `${idContext}-screen-${index}`))
+            .filter(Boolean),
+    };
+}
+/* -------------------------------------------------------------------------- */
+/* MDX config                                                                  */
+/* -------------------------------------------------------------------------- */
+/**
+ * Registry MDX config for the wireframe block. `tag` matches the legacy
+ * `WireframeBlock`. The block has no flat attributes (`toAttrs` → `{}`); all data
+ * lives in the nested `<Screen>` subtree handled by `serializeChildren` /
+ * `parseChildren`. The registry serializer wraps `serializeChildren` between the
+ * `<WireframeBlock>` open/close, producing the exact legacy bytes. On parse, the
+ * registry passes the already-extended `${idContext}-${blockId}` to
+ * `parseChildren` — the same id base the legacy `parseScreen` receives — so node
+ * ids are reproduced identically.
+ */
+export const wireframeMdx = {
+    tag: "WireframeBlock",
+    toAttrs: () => ({}),
+    fromAttrs: () => ({ surface: "desktop", screen: [] }),
+    serializeChildren: (data) => serializeScreen(data),
+    parseChildren: (childNodes, idContext) => {
+        const nodes = childNodes;
+        const screen = nodes.find((child) => elementName(child) === "Screen");
+        if (!screen)
+            return { surface: "desktop", screen: [] };
+        return parseScreen(screen, idContext);
+    },
+};
+//# sourceMappingURL=wireframe.config.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wireframe.config.js","sourceRoot":"","sources":["../../../../src/client/blocks/library/wireframe.config.ts"],"names":[],"mappings":"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","sourcesContent":["import { z } from \"zod\";\nimport { prop, attributeValue } from \"../mdx.js\";\nimport type { BlockMdxConfig } from \"../types.js\";\n\n/**\n * Pure (React-free) part of the shared `wireframe` block: its data shape, zod\n * schema, the stable node-id helper, and the nested-MDX round-trip config. Lives\n * in core so BOTH apps' server/shared registries and the client spec\n * (`wireframe.tsx`) consume one definition; importing it into a server module\n * never pulls React into the Nitro/SSR bundle.\n *\n * The wireframe block originated in the plan template. The vocabulary\n * (`PlanWireframe*` names, the `el` set, the `--wf-*` token contract) and the\n * MDX encoding (`<WireframeBlock>…<Screen>…</Screen></WireframeBlock>` with kit\n * component names `FrameScreen`/`Row`/`Col`/…) are preserved EXACTLY so stored\n * plans round-trip byte-compatibly and existing node ids never change.\n *\n * The wireframe is NESTED MDX, not a flat-attribute or prose block: its body is\n * a `<Screen surface caption>…kit-tree…</Screen>` subtree. So the config uses\n * `serializeChildren`/`parseChildren` (the registry's nested-MDX path) rather\n * than `toAttrs`/`childrenField`.\n */\n\n/* -------------------------------------------------------------------------- */\n/* Vocabulary (decoupled copy of the plan-content wireframe types)            */\n/* -------------------------------------------------------------------------- */\n\nexport type WireframeSurface =\n  | \"desktop\"\n  | \"mobile\"\n  | \"popover\"\n  | \"panel\"\n  | \"browser\";\n\nexport type WireframeRenderMode = \"wireframe\" | \"design\";\n\n/** Tone keyword reused across screen primitives. The renderer maps to color. */\nexport type WireframeTone = \"default\" | \"accent\" | \"warn\" | \"ok\" | \"muted\";\n\n/**\n * Names of the kit primitives. Component-like (MDX-friendly). The renderer maps\n * each to a flex kit component. Layout is ALWAYS flex; row/col/sidebar/main set\n * the flex direction.\n */\nexport type WireframeElName =\n  | \"screen\"\n  | \"browserBar\"\n  | \"statusBar\"\n  | \"toolbar\"\n  | \"row\"\n  | \"col\"\n  | \"sidebar\"\n  | \"navItem\"\n  | \"main\"\n  | \"title\"\n  | \"text\"\n  | \"lines\"\n  | \"section\"\n  | \"taskRow\"\n  | \"chips\"\n  | \"chip\"\n  | \"pill\"\n  | \"check\"\n  | \"field\"\n  | \"btn\"\n  | \"fab\"\n  | \"card\"\n  | \"column\"\n  | \"avatar\"\n  | \"iconSquare\"\n  | \"kv\"\n  | \"searchBar\"\n  | \"box\"\n  | \"divider\";\n\n/**\n * A single node in the wireframe kit tree. `el` is the primitive name; the\n * remaining props are the union of every primitive's props (kept permissive so\n * the model can compose freely). `children` nests other nodes. `id` is a stable\n * node id used by node-addressable patch ops (auto-assigned on create).\n *\n * There is intentionally NO x/y/width/height here — wireframe internals are\n * geometry-free and laid out by the renderer with flex.\n */\nexport type WireframeNode = {\n  /** Stable id for node-addressable patches; auto-assigned when absent. */\n  id?: string;\n  el: WireframeElName;\n  children?: WireframeNode[];\n\n  // Generic content props\n  text?: string;\n  value?: string;\n  label?: string;\n  placeholder?: string;\n  title?: string;\n\n  // Styling-by-intent (semantic only; renderer owns actual color/size)\n  tone?: WireframeTone;\n  color?: WireframeTone;\n  weight?: \"normal\" | \"medium\" | \"bold\";\n  active?: boolean;\n  done?: boolean;\n  emphasis?: boolean;\n  full?: boolean;\n  solid?: boolean;\n  dashed?: boolean;\n  dot?: boolean;\n  script?: boolean;\n  area?: boolean;\n  shape?: \"square\" | \"circle\";\n\n  // Numeric / structured props\n  count?: number;\n  prio?: number;\n  n?: number;\n  widths?: number[];\n  icon?: string;\n\n  // taskRow specifics\n  note?: string;\n  due?: string;\n  dueTone?: WireframeTone;\n\n  // Collection props (chips, kv)\n  items?: Array<{\n    label: string;\n    active?: boolean;\n    count?: number;\n    dot?: boolean;\n  }>;\n  rows?: Array<{ k: string; v: string }>;\n};\n\nexport interface WireframeData {\n  surface: WireframeSurface;\n  /** `design` renders full-fidelity branded HTML/CSS instead of a sketch. */\n  renderMode?: WireframeRenderMode;\n  caption?: string;\n  /**\n   * Neutral, textless loading register. The renderer drops borders, the sketch\n   * outline, and color, rendering soft placeholder geometry only.\n   */\n  skeleton?: boolean;\n  /**\n   * PRIMARY content: a self-contained HTML mockup of the screen (sanitized\n   * fragment — no document/script/style tags). The renderer owns the surface\n   * aspect, the dark/light theme, the hand-drawn font, and the rough overlay.\n   * When `html` is set, `screen` is ignored.\n   */\n  html?: string;\n  /** Optional scoped CSS for the html mockup (sanitized fragment). */\n  css?: string;\n  /** Kit-tree screen. Used when `html` is absent. */\n  screen?: WireframeNode[];\n}\n\nexport const WIREFRAME_SURFACES: WireframeSurface[] = [\n  \"desktop\",\n  \"mobile\",\n  \"popover\",\n  \"panel\",\n  \"browser\",\n];\n\nexport const WIREFRAME_EL_NAMES: WireframeElName[] = [\n  \"screen\",\n  \"browserBar\",\n  \"statusBar\",\n  \"toolbar\",\n  \"row\",\n  \"col\",\n  \"sidebar\",\n  \"navItem\",\n  \"main\",\n  \"title\",\n  \"text\",\n  \"lines\",\n  \"section\",\n  \"taskRow\",\n  \"chips\",\n  \"chip\",\n  \"pill\",\n  \"check\",\n  \"field\",\n  \"btn\",\n  \"fab\",\n  \"card\",\n  \"column\",\n  \"avatar\",\n  \"iconSquare\",\n  \"kv\",\n  \"searchBar\",\n  \"box\",\n  \"divider\",\n];\n\n/* -------------------------------------------------------------------------- */\n/* Schema (mirrors the plan-content wireframeDataSchema)                       */\n/* -------------------------------------------------------------------------- */\n\nconst toneSchema = z.enum([\"default\", \"accent\", \"warn\", \"ok\", \"muted\"]);\nconst elNameSchema = z.enum(\n  WIREFRAME_EL_NAMES as [WireframeElName, ...WireframeElName[]],\n);\nconst idSchema = z.string().trim().min(1).max(120);\n\n/**\n * Reject full-document HTML (html/head/body/script/style tags) in the `html` /\n * `css` fields. Wireframe content must be a bounded fragment; document or script\n * tags are a stored-XSS and layout-escape hazard.\n */\nfunction noFullHtmlDocument(value: string): boolean {\n  return !/<\\s*(?:!doctype|html|head|body|script|style)\\b/i.test(value);\n}\n\nconst wireframeNodeSchema: z.ZodType<WireframeNode> = z.lazy(() =>\n  z\n    .object({\n      id: idSchema.optional(),\n      el: elNameSchema,\n      children: z.array(wireframeNodeSchema).max(60).optional(),\n\n      text: z.string().trim().max(400).optional(),\n      value: z.string().trim().max(400).optional(),\n      label: z.string().trim().max(200).optional(),\n      placeholder: z.string().trim().max(200).optional(),\n      title: z.string().trim().max(200).optional(),\n\n      tone: toneSchema.optional(),\n      color: toneSchema.optional(),\n      weight: z.enum([\"normal\", \"medium\", \"bold\"]).optional(),\n      active: z.boolean().optional(),\n      done: z.boolean().optional(),\n      emphasis: z.boolean().optional(),\n      full: z.boolean().optional(),\n      solid: z.boolean().optional(),\n      dashed: z.boolean().optional(),\n      dot: z.boolean().optional(),\n      script: z.boolean().optional(),\n      area: z.boolean().optional(),\n      shape: z.enum([\"square\", \"circle\"]).optional(),\n\n      count: z.number().int().min(0).max(9_999).optional(),\n      prio: z.number().int().min(0).max(9).optional(),\n      n: z.number().int().min(0).max(20).optional(),\n      widths: z.array(z.number().min(0).max(100)).max(20).optional(),\n      icon: z.string().trim().max(40).optional(),\n\n      note: z.string().trim().max(400).optional(),\n      due: z.string().trim().max(120).optional(),\n      dueTone: toneSchema.optional(),\n\n      items: z\n        .array(\n          z.object({\n            label: z.string().trim().min(1).max(200),\n            active: z.boolean().optional(),\n            count: z.number().int().min(0).max(9_999).optional(),\n            dot: z.boolean().optional(),\n          }),\n        )\n        .max(40)\n        .optional(),\n      rows: z\n        .array(\n          z.object({\n            k: z.string().trim().min(1).max(200),\n            v: z.string().trim().max(400),\n          }),\n        )\n        .max(40)\n        .optional(),\n    })\n    .passthrough(),\n) as z.ZodType<WireframeNode>;\n\nexport const wireframeSchema = z\n  .object({\n    surface: z.enum([\"desktop\", \"mobile\", \"popover\", \"panel\", \"browser\"]),\n    renderMode: z.enum([\"wireframe\", \"design\"]).optional(),\n    caption: z.string().trim().max(400).optional(),\n    skeleton: z.boolean().optional(),\n    html: z\n      .string()\n      .max(40_000)\n      .refine(noFullHtmlDocument, {\n        message:\n          \"Wireframe html must be a bounded fragment without html/head/body/script/style tags.\",\n      })\n      .optional(),\n    css: z\n      .string()\n      .max(20_000)\n      .refine(noFullHtmlDocument, {\n        message: \"Wireframe css must not include document or script tags.\",\n      })\n      .optional(),\n    screen: z.array(wireframeNodeSchema).max(200).optional(),\n  })\n  .passthrough() as unknown as z.ZodType<WireframeData>;\n\n/* -------------------------------------------------------------------------- */\n/* Stable node-id derivation (verbatim from plan-mdx.ts)                       */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Derive a stable node id from the element name and tree path. Re-runs identically\n * to the legacy plan derivation so stored plans round-trip without changing ids.\n */\nexport function createStableWireframeNodeId(\n  el: WireframeElName,\n  path: string,\n): string {\n  return `node-${el}-${path}`\n    .toLowerCase()\n    .replace(/[^a-z0-9]+/g, \"-\")\n    .replace(/^-+|-+$/g, \"\")\n    .slice(0, 80);\n}\n\n/* -------------------------------------------------------------------------- */\n/* Kit node <-> MDX component name maps (mirrors plan-mdx.ts NODE_TO_COMPONENT) */\n/* -------------------------------------------------------------------------- */\n\nconst NODE_TO_COMPONENT: Record<WireframeElName, string> = {\n  screen: \"FrameScreen\",\n  browserBar: \"BrowserBar\",\n  statusBar: \"StatusBar\",\n  toolbar: \"Toolbar\",\n  row: \"Row\",\n  col: \"Col\",\n  sidebar: \"Sidebar\",\n  navItem: \"NavItem\",\n  main: \"Main\",\n  title: \"Title\",\n  text: \"Text\",\n  lines: \"Lines\",\n  section: \"SectionLabel\",\n  taskRow: \"TaskRow\",\n  chips: \"Chips\",\n  chip: \"Chip\",\n  pill: \"Pill\",\n  check: \"Check\",\n  field: \"Field\",\n  btn: \"Btn\",\n  fab: \"Fab\",\n  card: \"Card\",\n  column: \"Column\",\n  avatar: \"Avatar\",\n  iconSquare: \"IconSquare\",\n  kv: \"KV\",\n  searchBar: \"SearchBar\",\n  box: \"Box\",\n  divider: \"Divider\",\n};\n\nconst COMPONENT_TO_NODE = Object.fromEntries(\n  Object.entries(NODE_TO_COMPONENT).map(([el, component]) => [component, el]),\n) as Record<string, WireframeElName>;\n\n/* -------------------------------------------------------------------------- */\n/* Serialize (verbatim port of plan-mdx.ts serializeNode/serializeScreen)      */\n/* -------------------------------------------------------------------------- */\n\nfunction serializeNode(node: WireframeNode, indent = \"\"): string {\n  const name = NODE_TO_COMPONENT[node.el] ?? \"Box\";\n  const attrs = Object.entries(node)\n    .filter(([key]) => key !== \"children\" && key !== \"el\")\n    .map(([key, value]) => prop(key, value))\n    .join(\"\");\n  if (!node.children?.length) return `${indent}<${name}${attrs} />`;\n  const children = node.children\n    .map((child) => serializeNode(child, `${indent}  `))\n    .join(\"\\n\");\n  return `${indent}<${name}${attrs}>\\n${children}\\n${indent}</${name}>`;\n}\n\n/**\n * Serialize the wireframe data to its inner `<Screen>` MDX subtree. The registry\n * serializer wraps this between the `<WireframeBlock …>` open/close tags, so the\n * total output equals the legacy `serializeBlock` wireframe branch exactly.\n */\nfunction serializeScreen(data: WireframeData): string {\n  const attrs = [\n    prop(\"surface\", data.surface),\n    prop(\"renderMode\", data.renderMode),\n    prop(\"caption\", data.caption),\n    prop(\"html\", data.html),\n    prop(\"css\", data.css),\n    prop(\"skeleton\", data.skeleton),\n  ].join(\"\");\n  const children = (data.screen ?? [])\n    .map((node) => serializeNode(node, \"  \"))\n    .join(\"\\n\");\n  if (!children) return `<Screen${attrs} />`;\n  return `<Screen${attrs}>\\n${children}\\n</Screen>`;\n}\n\n/* -------------------------------------------------------------------------- */\n/* Parse (verbatim port of plan-mdx.ts parseScreen/parseWireframeNode)         */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Minimal MDX AST node shape used while walking the wireframe subtree. Declared\n * standalone (not an intersection with `MdxJsxNode`, whose `children` is\n * `unknown[]`) so recursive `children` stays narrowed to `WireframeMdxNode`.\n */\ntype WireframeMdxNode = {\n  type: string;\n  name?: string;\n  attributes?: Array<{\n    type: string;\n    name?: string;\n    value?: string | null | { type: string; value: string; data?: unknown };\n  }>;\n  children?: WireframeMdxNode[];\n};\n\nfunction elementName(node: WireframeMdxNode | undefined): string | undefined {\n  return node?.type === \"mdxJsxFlowElement\" ||\n    node?.type === \"mdxJsxTextElement\"\n    ? node.name\n    : undefined;\n}\n\nfunction findAttribute(node: WireframeMdxNode, name: string) {\n  return node.attributes?.find(\n    (attr) => attr.type === \"mdxJsxAttribute\" && attr.name === name,\n  );\n}\n\nfunction stringAttr(node: WireframeMdxNode, name: string): string | undefined {\n  const value = attributeValue(findAttribute(node, name));\n  return typeof value === \"string\" ? value : undefined;\n}\n\n/**\n * Resolve a required-when-present string attribute on a `<Screen>`. If the\n * attribute is absent we return undefined, but if it is present yet cannot be\n * resolved to a string (e.g. a number, an object, or an unevaluable expression)\n * we THROW so a malformed wireframe fails the import instead of silently\n * dropping the value and rendering an empty wireframe.\n */\nfunction requiredStringAttr(\n  node: WireframeMdxNode,\n  name: string,\n): string | undefined {\n  const attr = findAttribute(node, name);\n  if (!attr) return undefined;\n  const value = attributeValue(attr);\n  if (typeof value !== \"string\") {\n    throw new Error(\n      `Wireframe <Screen> attribute \"${name}\" must resolve to a string, got ${typeof value}. Use a quoted string or a static template literal.`,\n    );\n  }\n  return value;\n}\n\nfunction boolAttr(node: WireframeMdxNode, name: string): boolean | undefined {\n  const value = attributeValue(findAttribute(node, name));\n  return typeof value === \"boolean\" ? value : undefined;\n}\n\nfunction parseWireframeNode(\n  node: WireframeMdxNode,\n  path = \"node\",\n): WireframeNode | null {\n  const component = elementName(node);\n  if (!component) return null;\n  const el = COMPONENT_TO_NODE[component];\n  if (!el) return null;\n  const attrs = node.attributes ?? [];\n  const parsed: WireframeNode = { el };\n  for (const attr of attrs) {\n    if (attr.type !== \"mdxJsxAttribute\") continue;\n    const value = attributeValue(attr);\n    if (value !== undefined)\n      (parsed as Record<string, unknown>)[attr.name as string] = value;\n  }\n  parsed.el = el;\n  parsed.id ??= createStableWireframeNodeId(el, path);\n  const children = (node.children ?? [])\n    .map((child, index) => parseWireframeNode(child, `${path}-${index}`))\n    .filter(Boolean) as WireframeNode[];\n  if (children.length > 0) parsed.children = children;\n  return parsed;\n}\n\nfunction parseScreen(node: WireframeMdxNode, idContext: string): WireframeData {\n  return {\n    surface:\n      (stringAttr(node, \"surface\") as WireframeData[\"surface\"]) ?? \"desktop\",\n    renderMode: stringAttr(node, \"renderMode\") as WireframeData[\"renderMode\"],\n    caption: stringAttr(node, \"caption\"),\n    html: requiredStringAttr(node, \"html\"),\n    css: requiredStringAttr(node, \"css\"),\n    skeleton: boolAttr(node, \"skeleton\"),\n    screen: (node.children ?? [])\n      .map((child, index) =>\n        parseWireframeNode(child, `${idContext}-screen-${index}`),\n      )\n      .filter(Boolean) as WireframeNode[],\n  };\n}\n\n/* -------------------------------------------------------------------------- */\n/* MDX config                                                                  */\n/* -------------------------------------------------------------------------- */\n\n/**\n * Registry MDX config for the wireframe block. `tag` matches the legacy\n * `WireframeBlock`. The block has no flat attributes (`toAttrs` → `{}`); all data\n * lives in the nested `<Screen>` subtree handled by `serializeChildren` /\n * `parseChildren`. The registry serializer wraps `serializeChildren` between the\n * `<WireframeBlock>` open/close, producing the exact legacy bytes. On parse, the\n * registry passes the already-extended `${idContext}-${blockId}` to\n * `parseChildren` — the same id base the legacy `parseScreen` receives — so node\n * ids are reproduced identically.\n */\nexport const wireframeMdx: BlockMdxConfig<WireframeData> = {\n  tag: \"WireframeBlock\",\n  toAttrs: () => ({}),\n  fromAttrs: () => ({ surface: \"desktop\", screen: [] }),\n  serializeChildren: (data) => serializeScreen(data),\n  parseChildren: (childNodes, idContext) => {\n    const nodes = childNodes as WireframeMdxNode[];\n    const screen = nodes.find((child) => elementName(child) === \"Screen\");\n    if (!screen) return { surface: \"desktop\", screen: [] };\n    return parseScreen(screen, idContext);\n  },\n};\n"]}

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

@@ -0,0 +1,15 @@
+import type { BlockReadProps, BlockEditProps } from "../types.js";
+import { type WireframeData } from "./wireframe.config.js";
+/** Read-only renderer for a `wireframe` block. */
+export declare function WireframeBlock({ data, blockId, title, summary, ctx, }: BlockReadProps<WireframeData>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Editor for the `wireframe` block. The wireframe is canvas / agent-patch edited
+ * (it never calls `onChange`), so edit mode reuses the read surface — mirroring
+ * the plan `WireframeEditor`. The host document editor already wraps the registry
+ * edit path in a titled section, so this renders only the surface to avoid
+ * double-nesting.
+ */
+export declare function WireframeEditor({ data, ctx }: BlockEditProps<WireframeData>): import("react/jsx-runtime").JSX.Element;
+/** Full client spec for the shared `wireframe` block (schema + MDX + Read/Edit). */
+export declare const wireframeBlock: import("../types.js").BlockSpec<WireframeData>;
+//# sourceMappingURL=wireframe.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"wireframe.d.ts","sourceRoot":"","sources":["../../../../src/client/blocks/library/wireframe.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,cAAc,EACd,cAAc,EAEf,MAAM,aAAa,CAAC;AACrB,OAAO,EAGL,KAAK,aAAa,EAEnB,MAAM,uBAAuB,CAAC;AAsY/B,kDAAkD;AAClD,wBAAgB,cAAc,CAAC,EAC7B,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,EACP,GAAG,GACJ,EAAE,cAAc,CAAC,aAAa,CAAC,2CAW/B;AAED;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,cAAc,CAAC,aAAa,CAAC,2CAE3E;AAED,oFAAoF;AACpF,eAAO,MAAM,cAAc,gDAczB,CAAC"}

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

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState, } from "react";
+import { defineBlock } from "../types.js";
+import { wireframeSchema, wireframeMdx, } from "./wireframe.config.js";
+import { HTML_ROUGH_SELECTOR, KitConfigContext, RoughOverlay, Screen, renderNodes, useIsDark, useWireframeStyle, } from "./wireframe-kit.js";
+import { sanitizeWireframeCss, sanitizeWireframeHtml, scopeDesignCss, } from "./sanitize-html.js";
+const SURFACE_PRESETS = {
+    // mobile keeps a tall floor: a phone frame reads as a phone even when short.
+    mobile: { width: 300, minHeight: 360, radius: 30 },
+    desktop: { width: 840, minHeight: 200, radius: 14 },
+    browser: { width: 900, minHeight: 200, radius: 14 },
+    popover: { width: 360, minHeight: 120, radius: 16 },
+    panel: { width: 420, minHeight: 200, radius: 16 },
+};
+function isHtmlData(data) {
+    return typeof data.html === "string" && data.html.trim().length > 0;
+}
+/* -------------------------------------------------------------------------- */
+/* Shared frame shell: surface-locked WIDTH + auto (content-driven) height +   */
+/* theme + rough overlay. The frame keeps each surface's footprint and chrome  */
+/* but fits its content height instead of padding to a fixed aspect, so short  */
+/* content yields a short frame and tall content grows. Pass `canvasSize` to   */
+/* opt a fixed-aspect canvas artboard back into a hard pixel height.           */
+/* -------------------------------------------------------------------------- */
+function ArtboardFrame({ surface, compact, canvasSize, canvasWidth, skeleton, renderMode, roughOverlay = true, selector, caption, render, }) {
+    const ref = useRef(null);
+    const fitRef = useRef(null);
+    const isDark = useIsDark();
+    const theme = isDark ? "dark" : "light";
+    const style = useWireframeStyle();
+    const preset = SURFACE_PRESETS[surface] ?? SURFACE_PRESETS.desktop;
+    const width = canvasWidth ?? preset.width;
+    // AUTO-HEIGHT: with no explicit `canvasSize` the artboard height is driven by
+    // its content (`height: auto`), floored at the surface's `minHeight` so a short
+    // screen produces a short frame and a tall screen grows — instead of every
+    // surface being padded to a fixed preset height that left a big empty band
+    // below short content. A `canvasSize` (fixed-aspect canvas artboard) overrides
+    // this with a hard pixel height.
+    const fixedHeight = canvasSize;
+    const minHeight = fixedHeight ?? preset.minHeight;
+    const baseScale = compact ? Math.min(1, 320 / preset.width) : 1;
+    const maxFrameWidth = compact ? preset.width * baseScale : width;
+    const [fitScale, setFitScale] = useState(baseScale);
+    // The scaled artboard is `transform: scale()`-ed, which does not change its
+    // layout box, so the wrapper that reserves vertical space must track the
+    // artboard's ACTUAL rendered height. With a fixed height that's known up front;
+    // with auto-height we measure it.
+    const [measuredHeight, setMeasuredHeight] = useState(fixedHeight ?? null);
+    const designMode = renderMode === "design";
+    const sketchy = !designMode && style === "sketchy" && !skeleton;
+    const roughEnabled = sketchy && roughOverlay;
+    const paper = designMode
+        ? "hsl(var(--background))"
+        : "var(--plan-document, hsl(var(--background)))";
+    const frameBorder = skeleton
+        ? "var(--plan-placeholder-line, var(--plan-line, hsl(var(--border))))"
+        : "var(--plan-line, hsl(var(--border)))";
+    useEffect(() => {
+        const element = fitRef.current;
+        if (!element)
+            return;
+        const measure = () => {
+            const availableWidth = element.clientWidth;
+            const nextScale = availableWidth > 0
+                ? Math.min(baseScale, availableWidth / width)
+                : baseScale;
+            setFitScale((current) => Math.abs(current - nextScale) < 0.001 ? current : nextScale);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [baseScale, width]);
+    // Track the auto-height artboard's rendered height so the (un-transformed)
+    // wrapper reserves exactly the scaled space the frame occupies. Skipped when a
+    // fixed height is supplied — there's nothing to measure.
+    useEffect(() => {
+        if (fixedHeight != null)
+            return;
+        const element = ref.current;
+        if (!element)
+            return;
+        const measure = () => {
+            const next = element.offsetHeight;
+            setMeasuredHeight((current) => current != null && Math.abs(current - next) < 0.5 ? current : next);
+        };
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [fixedHeight]);
+    // Height the wrapper reserves: the measured (or fixed) artboard height scaled
+    // by the fit factor. Falls back to the surface floor before the first measure
+    // so SSR / first paint reserves a sensible box rather than collapsing.
+    const reservedHeight = (measuredHeight ?? minHeight) * fitScale;
+    return (_jsxs("div", { ref: fitRef, className: "plan-kit-wireframe", style: {
+            width: "100%",
+            maxWidth: maxFrameWidth,
+        }, children: [_jsx("div", { style: {
+                    width: "100%",
+                    maxWidth: maxFrameWidth,
+                    height: reservedHeight,
+                    marginInline: "auto",
+                }, children: _jsxs("div", { ref: ref, className: "plan-kit-artboard relative", style: {
+                        width,
+                        // Auto-height by default (content-driven, floored at `minHeight`);
+                        // a fixed `canvasSize` locks the height for canvas artboards.
+                        ...(fixedHeight != null ? { height: fixedHeight } : { minHeight }),
+                        borderRadius: preset.radius,
+                        background: paper,
+                        boxShadow: "0 10px 34px hsl(var(--foreground) / 0.10)",
+                        ...(fitScale !== 1
+                            ? {
+                                transform: `scale(${fitScale})`,
+                                transformOrigin: "top left",
+                            }
+                            : {}),
+                    }, children: [_jsx("div", { className: "overflow-hidden", style: {
+                                borderRadius: preset.radius,
+                                ...(fixedHeight != null
+                                    ? { position: "absolute", inset: 0 }
+                                    : { minHeight }),
+                            }, children: render({ theme, style }) }), !roughEnabled && (_jsx("div", { className: "pointer-events-none absolute inset-0", style: {
+                                borderRadius: preset.radius,
+                                border: `1.5px solid ${frameBorder}`,
+                            } })), _jsx(RoughOverlay, { scopeRef: ref, enabled: roughEnabled, frameRadius: preset.radius, selector: selector })] }) }), caption && (_jsx("p", { className: "mt-2 text-center text-xs text-plan-muted", children: caption }))] }));
+}
+/* -------------------------------------------------------------------------- */
+/* HTML artboard — author HTML, themed + roughened by the renderer.           */
+/* -------------------------------------------------------------------------- */
+function HtmlArtboard({ data, ctx, compact, }) {
+    const renderMode = data.renderMode ?? "wireframe";
+    // Sanitize author HTML/CSS at the render point (defense-in-depth against stored
+    // XSS). Self-contained in core via the shared block sanitizer (DOM-based in the
+    // browser, regex fallback on the server) so the HTML mockup path renders in any
+    // app without the host wiring a sanitizer hook.
+    const safeHtml = useMemo(() => sanitizeWireframeHtml(data.html), [data.html]);
+    const scopeId = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+    const scopedCss = useMemo(() => {
+        const safeCss = sanitizeWireframeCss(data.css);
+        // Scope every author selector under this instance's artboard so global
+        // selectors (body, *, .app-shell, :root) can't restyle/hide the host app.
+        return safeCss
+            ? scopeDesignCss(safeCss, `[data-plan-design-scope="${scopeId}"]`)
+            : "";
+    }, [data.css, scopeId]);
+    return (_jsx(ArtboardFrame, { surface: data.surface, compact: compact, skeleton: data.skeleton, renderMode: renderMode, selector: HTML_ROUGH_SELECTOR, caption: data.caption, render: ({ theme, style }) => (_jsxs("div", { className: "plan-html-frame", "data-theme": theme, "data-style": style, "data-render-mode": renderMode, "data-plan-design-scope": scopeId, "data-skeleton": data.skeleton ? "true" : undefined, children: [scopedCss && _jsx("style", { children: scopedCss }), _jsx("div", { className: "plan-html-frame-content", dangerouslySetInnerHTML: { __html: safeHtml } })] })) }));
+}
+/* -------------------------------------------------------------------------- */
+/* Kit artboard — declarative kit tree.                                       */
+/* -------------------------------------------------------------------------- */
+function KitArtboard({ data, compact, }) {
+    return (_jsx(ArtboardFrame, { surface: data.surface, compact: compact, skeleton: data.skeleton, selector: "[data-rough]", caption: data.caption, render: ({ theme, style }) => (_jsx(KitConfigContext.Provider, { value: { skeleton: data.skeleton, theme, style }, children: renderKitScreen(data.screen ?? []) })) }));
+}
+function renderKitScreen(nodes) {
+    if (nodes.length === 1 && nodes[0]?.el === "screen") {
+        return renderNodes(nodes);
+    }
+    // `minHeight` (not `height`) so the screen fills the auto-height artboard floor
+    // but grows past it when content is tall, instead of locking to a fixed box.
+    return (_jsx(Screen, { pad: "calc(var(--pad) * 1.35)", style: { minHeight: "100%" }, children: renderNodes(nodes) }));
+}
+/**
+ * The bare wireframe surface (no block section / title). Routes to the HTML
+ * mockup when `data.html` is present and a sanitizer is wired; otherwise renders
+ * the kit tree.
+ */
+function WireframeSurfaceView({ data, ctx, compact, }) {
+    if (isHtmlData(data)) {
+        return _jsx(HtmlArtboard, { data: data, ctx: ctx, compact: compact });
+    }
+    return _jsx(KitArtboard, { data: data, compact: compact });
+}
+/* -------------------------------------------------------------------------- */
+/* Block Read / Edit                                                          */
+/* -------------------------------------------------------------------------- */
+/** Read-only renderer for a `wireframe` block. */
+export function WireframeBlock({ data, blockId, title, summary, ctx, }) {
+    return (_jsxs("section", { className: "an-block plan-block an-wireframe", "data-block-id": blockId, children: [title && _jsx("div", { className: "an-block-label plan-block-label", children: title }), _jsx(WireframeSurfaceView, { data: data, ctx: ctx }), summary && _jsx("p", { className: "mt-5 text-plan-muted", children: summary })] }));
+}
+/**
+ * Editor for the `wireframe` block. The wireframe is canvas / agent-patch edited
+ * (it never calls `onChange`), so edit mode reuses the read surface — mirroring
+ * the plan `WireframeEditor`. The host document editor already wraps the registry
+ * edit path in a titled section, so this renders only the surface to avoid
+ * double-nesting.
+ */
+export function WireframeEditor({ data, ctx }) {
+    return _jsx(WireframeSurfaceView, { data: data, ctx: ctx });
+}
+/** Full client spec for the shared `wireframe` block (schema + MDX + Read/Edit). */
+export const wireframeBlock = defineBlock({
+    type: "wireframe",
+    schema: wireframeSchema,
+    mdx: wireframeMdx,
+    Read: WireframeBlock,
+    Edit: WireframeEditor,
+    placement: ["block"],
+    editSurface: "inline",
+    label: "Wireframe",
+    description: "A sketch wireframe of one screen built from kit primitives (or an HTML mockup), rendered in a chosen surface frame (desktop/mobile/popover/panel/browser).",
+    // `surface` is the only required field; `screen` defaults to []. Start on the
+    // desktop surface with an empty screen so the canvas/agent can fill it in.
+    empty: () => ({ surface: "desktop", screen: [] }),
+});
+//# sourceMappingURL=wireframe.js.map