tsquare 0.1.0 → 0.3.0

package/dist/chunks/chunk-46MGJLGB.js

@@ -0,0 +1,2126 @@
+// src/layout.ts
+var theme = {
+  font: "Inter",
+  board: "#e6e8eb",
+  paper: "#ffffff",
+  ink: "#1f2328",
+  text: "#3d434a",
+  muted: "#868d96",
+  line: "#d0d4d9",
+  lineStrong: "#9ca3ab",
+  fill: "#f0f2f4",
+  fill2: "#e1e4e8",
+  primary: "#2b3035",
+  onPrimary: "#ffffff",
+  scrim: "rgba(31, 35, 40, 0.38)",
+  notes: {
+    yellow: "#fdf1a8",
+    blue: "#cfe6fb",
+    pink: "#fbd3e0",
+    green: "#d4f1d0"
+  }
+};
+var DEVICES = {
+  phone: { width: 390, height: 844, radius: 36, padding: 16 },
+  tablet: { width: 820, height: 1180, radius: 24, padding: 24 },
+  desktop: { width: 1280, height: 800, radius: 10, padding: 24 },
+  custom: { width: 800, height: 600, radius: 8, padding: 20 }
+};
+var LABEL_H = 40;
+var TITLE_H = 64;
+var BOARD_PADDING = 56;
+var BOARD_GAP = 64;
+var NOTE_WIDTH = 220;
+function screenSize(props = {}) {
+  const device = props.device ?? "phone";
+  const base = DEVICES[device] ?? DEVICES.phone;
+  return {
+    device,
+    width: props.width ?? base.width,
+    height: props.height ?? base.height,
+    radius: base.radius,
+    padding: props.padding ?? base.padding,
+    chrome: props.chrome ?? (device === "phone" || device === "desktop")
+  };
+}
+function estimateNoteHeight(text, width) {
+  const charsPerLine = Math.max(8, Math.floor((width - 28) / 7.4));
+  const lines = text.split("\n").reduce((n, para) => n + Math.max(1, Math.ceil(para.length / charsPerLine)), 0);
+  return 28 + lines * 21;
+}
+
+// src/catalog.ts
+import { defineCatalog } from "@json-render/core";
+import { z } from "zod";
+
+// src/suggest.ts
+function editDistance(a, b) {
+  const d = Array.from({ length: a.length + 1 }, (_, i) => [i, ...Array(b.length).fill(0)]);
+  for (let j = 1; j <= b.length; j++) d[0][j] = j;
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      const cost = a[i - 1] === b[j - 1] ? 0 : 1;
+      d[i][j] = Math.min(d[i - 1][j] + 1, d[i][j - 1] + 1, d[i - 1][j - 1] + cost);
+      if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) d[i][j] = Math.min(d[i][j], d[i - 2][j - 2] + 1);
+    }
+  }
+  return d[a.length][b.length];
+}
+function closeMatches(word, candidates, limit = 3) {
+  const q = word.toLowerCase();
+  const maxEdits = Math.max(1, Math.floor(q.length / 3));
+  return candidates.map((c) => [c, editDistance(q, c.toLowerCase())]).filter(([, d]) => d <= maxEdits).sort((a, b) => a[1] - b[1] || a[0].localeCompare(b[0])).slice(0, limit).map(([c]) => c);
+}
+function unknownComponentMessage(name, components) {
+  const close = closeMatches(name, components);
+  return close.length ? `unknown component "${name}" (did you mean ${close.join(", ")}?)` : `unknown component "${name}" (components: ${components.join(", ")})`;
+}
+
+// src/colors.ts
+var ACCENTS = {
+  blue: "#2563eb",
+  indigo: "#4f46e5",
+  violet: "#7c3aed",
+  pink: "#db2777",
+  red: "#dc2626",
+  orange: "#c2410c",
+  green: "#15803d",
+  teal: "#0f766e"
+};
+var TONES = {
+  success: "#15803d",
+  warning: "#b45309",
+  danger: "#dc2626"
+};
+var HEX = /^#[0-9a-fA-F]{6}$/;
+var isAccent = (v) => v in ACCENTS || HEX.test(v);
+function accentMessage(v) {
+  const names = Object.keys(ACCENTS);
+  const close = closeMatches(v, names);
+  return `unknown accent "${v}"` + (close.length ? ` (did you mean ${close.join(", ")}?)` : "") + `; use one of ${names.join(", ")}, or a hex color like #1a73e8`;
+}
+function luminance(hex) {
+  const [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255).map((v) => v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+function contrast(a, b) {
+  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function readableOnWhite(hex) {
+  let [r, g, b] = [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+  let out = hex;
+  for (let k = 0; k < 20 && contrast(out, "#ffffff") < 4.5; k++) {
+    [r, g, b] = [r, g, b].map((v) => Math.round(v * 0.9));
+    out = "#" + [r, g, b].map((v) => v.toString(16).padStart(2, "0")).join("");
+  }
+  return out;
+}
+function paletteFor(accent) {
+  if (!accent || !isAccent(accent)) {
+    return { accent: theme.primary, onAccent: theme.onPrimary, accentText: theme.ink };
+  }
+  const hex = ACCENTS[accent] ?? accent.toLowerCase();
+  return {
+    accent: hex,
+    // hex accents can be light (a brand yellow): switch to dark text when white wouldn't read
+    onAccent: contrast(hex, "#ffffff") >= 3 ? "#ffffff" : theme.ink,
+    accentText: readableOnWhite(hex)
+  };
+}
+
+// src/icons.ts
+import { icons } from "lucide";
+var pascal = (s) => s.replace(/(^|[-_ ])(\w)/g, (_, __, c) => c.toUpperCase());
+var kebab = (s) => s.replace(/([a-z])([A-Z0-9])/g, "$1-$2").replace(/([0-9])([A-Z])/g, "$1-$2").replace(/([A-Z])([A-Z][a-z])/g, "$1-$2").toLowerCase();
+var table = icons;
+var iconNames = Object.keys(table).map(kebab);
+function iconNode(name) {
+  return table[pascal(name)];
+}
+var isIcon = (name) => iconNode(name) !== void 0;
+function suggestIcons(name, limit = 3) {
+  const q = name.toLowerCase().replace(/[_ ]/g, "-");
+  const words = q.split("-").filter((w) => w.length > 2);
+  const maxEdits = Math.max(1, Math.floor(q.length / 3));
+  const scored = [];
+  for (const n of iconNames) {
+    const parts = n.split("-");
+    const shared = words.filter((w) => parts.includes(w)).length;
+    const wordScore = shared ? 1 - 0.4 * (shared / words.length) + 0.05 * (parts.length - shared) : Infinity;
+    const d = editDistance(q, n);
+    const score = Math.min(wordScore, d <= maxEdits ? 3 * d / q.length : Infinity);
+    if (score < Infinity) scored.push([n, score]);
+  }
+  return scored.sort((a, b) => a[1] - b[1] || a[0].localeCompare(b[0])).slice(0, limit).map(([n]) => n);
+}
+function unknownIconMessage(name) {
+  const close = suggestIcons(name);
+  return close.length ? `unknown icon "${name}" (did you mean ${close.join(", ")}?)` : `unknown icon "${name}" (use a Lucide name in kebab-case, e.g. search, user, settings)`;
+}
+
+// src/schema.ts
+import { defineSchema } from "@json-render/core";
+var wireframeSchema = defineSchema(
+  (s) => ({
+    spec: s.object({
+      root: s.string(),
+      elements: s.record(
+        s.object({
+          type: s.ref("catalog.components"),
+          props: s.propsOf("catalog.components"),
+          children: s.array(s.string()),
+          visible: { ...s.any(), ...s.optional() },
+          repeat: { ...s.any(), ...s.optional() }
+        })
+      )
+    }),
+    catalog: s.object({
+      components: s.map({
+        props: s.zod(),
+        slots: s.array(s.string()),
+        description: s.string(),
+        example: s.any()
+      })
+    })
+  }),
+  {
+    defaultRules: [
+      "The root element MUST be a Board. A Board's children are Screens (and optional Notes placed beside them).",
+      "Every Screen MUST be a direct child of the Board. Each Screen is one view of the product; use several Screens to show several views or states.",
+      "Screens lay out their children top to bottom. Use Stack (direction row/column) and Grid inside a Screen to arrange content.",
+      "Modal and Drawer are overlays. They MUST be direct children of a Screen, and SHOULD be listed last in the Screen's children so they draw on top.",
+      "NavBar goes first in a Screen's children and TabBar goes last (before any overlay).",
+      "This is a low-fidelity wireframe: prefer placeholders (Image boxes, Text with lines) over invented copy, unless the copy matters to the design.",
+      'Every element MUST include a "children" array. Leaf elements use an empty array: "children": [].',
+      "Every id listed in a children array MUST exist as its own element."
+    ]
+  }
+);
+
+// src/catalog.ts
+var o = (t) => t.nullish();
+var align = z.enum(["start", "center", "end", "stretch"]);
+var justify = z.enum(["start", "center", "end", "between", "around"]);
+var iconName = z.string().refine(isIcon, { error: (iss) => unknownIconMessage(String(iss.input)) }).describe("Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user");
+var componentDefinitions = {
+  // ── Canvas ────────────────────────────────────────────────────────────
+  Board: {
+    props: z.object({
+      title: o(z.string()),
+      layout: o(z.enum(["row", "grid"])).describe("row = all screens side by side; grid = wrap every `columns` screens"),
+      columns: o(z.number().int().min(1)),
+      gap: o(z.number()),
+      padding: o(z.number()),
+      accent: o(z.string().refine(isAccent, { error: (iss) => accentMessage(String(iss.input)) })).describe(
+        `The one UI color: primary buttons, solid badges, checked controls, toggles, active tabs, ghost buttons. ${Object.keys(ACCENTS).join(", ")}, or a hex color like #1a73e8. Omit for grayscale.`
+      )
+    }),
+    slots: ["default"],
+    description: "Root canvas (artboard). Holds Screens side by side, plus optional Notes. Must be the root element.",
+    example: { title: "Checkout flow", layout: "row", gap: 64 }
+  },
+  Screen: {
+    props: z.object({
+      name: o(z.string()).describe("Label shown above the screen"),
+      device: o(z.enum(["phone", "tablet", "desktop", "custom"])),
+      width: o(z.number()).describe("Overrides the device width"),
+      height: o(z.number()).describe("Overrides the device height, e.g. height=1400 for a long scrolling page"),
+      chrome: o(z.boolean()).describe("Phone status bar / desktop browser bar. Default true for phone and desktop."),
+      padding: o(z.number()),
+      gap: o(z.number())
+    }),
+    slots: ["default"],
+    description: "One view of the product in a device frame. Children stack vertically.",
+    example: { name: "Home", device: "phone" }
+  },
+  Note: {
+    props: z.object({
+      text: z.string(),
+      color: o(z.enum(["yellow", "blue", "pink", "green"])),
+      width: o(z.number())
+    }),
+    slots: [],
+    description: "Sticky-note annotation. Put it on the Board beside screens, or inside a Screen next to what it explains.",
+    example: { text: "Empty state TBD", color: "yellow" }
+  },
+  // ── Layout ────────────────────────────────────────────────────────────
+  Stack: {
+    props: z.object({
+      direction: o(z.enum(["row", "column"])),
+      gap: o(z.number()),
+      padding: o(z.number()),
+      align: o(align),
+      justify: o(justify),
+      wrap: o(z.boolean()),
+      grow: o(z.boolean()).describe("Fill remaining space in the parent"),
+      width: o(z.union([z.number(), z.string()])).describe("Fixed width, e.g. 240 for a sidebar"),
+      border: o(z.enum(["none", "right", "left", "top", "bottom", "all"])),
+      fill: o(z.boolean()).describe("Light gray background")
+    }),
+    slots: ["default"],
+    description: "Flex container. The main layout primitive (rows, columns, sidebars, toolbars).",
+    example: { direction: "row", gap: 12, align: "center" }
+  },
+  Grid: {
+    props: z.object({
+      columns: z.number().int().min(1),
+      gap: o(z.number()),
+      padding: o(z.number())
+    }),
+    slots: ["default"],
+    description: "Equal-width columns that wrap. Good for card grids and galleries.",
+    example: { columns: 3, gap: 16 }
+  },
+  Card: {
+    props: z.object({
+      title: o(z.string()),
+      padding: o(z.number()),
+      gap: o(z.number()),
+      variant: o(z.enum(["outline", "filled"])),
+      grow: o(z.boolean()),
+      width: o(z.union([z.number(), z.string()])).describe("Fixed width, e.g. 320. Default fills the space.")
+    }),
+    slots: ["default"],
+    description: "Bordered container with optional title. Children stack vertically.",
+    example: { title: "Revenue", variant: "outline" }
+  },
+  Divider: {
+    props: z.object({ vertical: o(z.boolean()) }),
+    slots: [],
+    description: "Thin separator line.",
+    example: {}
+  },
+  Spacer: {
+    props: z.object({
+      size: o(z.number()).describe("Fixed size in px. Omit to fill remaining space.")
+    }),
+    slots: [],
+    description: "Empty space. Without a size it grows to push siblings apart.",
+    example: { size: 16 }
+  },
+  // ── Content ───────────────────────────────────────────────────────────
+  Heading: {
+    props: z.object({
+      text: z.string(),
+      level: o(z.union([z.literal(1), z.literal(2), z.literal(3)])),
+      align: o(z.enum(["left", "center", "right"]))
+    }),
+    slots: [],
+    description: "Heading text, level 1 (largest) to 3.",
+    example: { text: "Welcome back", level: 1 }
+  },
+  Text: {
+    props: z.object({
+      text: o(z.string()),
+      lines: o(z.number().int().min(1)).describe("Draw N placeholder lines instead of real text"),
+      size: o(z.enum(["sm", "md", "lg"])),
+      muted: o(z.boolean()),
+      bold: o(z.boolean()),
+      align: o(z.enum(["left", "center", "right"]))
+    }),
+    slots: [],
+    description: "Body text, or placeholder lines when `lines` is set and `text` is not.",
+    example: { lines: 3 }
+  },
+  Image: {
+    props: z.object({
+      height: o(z.number()),
+      width: o(z.union([z.number(), z.string()])).describe("Default fills the container width"),
+      label: o(z.string()),
+      rounded: o(z.boolean())
+    }),
+    slots: [],
+    description: "Image placeholder: a box with an X through it.",
+    example: { height: 180, label: "Hero photo" }
+  },
+  Icon: {
+    props: z.object({
+      name: o(iconName),
+      size: o(z.number())
+    }),
+    slots: [],
+    description: "Line icon from Lucide.",
+    example: { name: "search", size: 20 }
+  },
+  Avatar: {
+    props: z.object({
+      initials: o(z.string()),
+      size: o(z.number())
+    }),
+    slots: [],
+    description: "Round avatar with initials or a person silhouette.",
+    example: { initials: "JD", size: 40 }
+  },
+  Badge: {
+    props: z.object({
+      label: z.string(),
+      variant: o(z.enum(["solid", "outline"])),
+      tone: o(z.enum(["neutral", "success", "warning", "danger"])).describe("Status color. Default neutral (the accent for solid badges)")
+    }),
+    slots: [],
+    description: "Small pill label for counts or statuses.",
+    example: { label: "New", variant: "solid" }
+  },
+  // ── Controls ──────────────────────────────────────────────────────────
+  Button: {
+    props: z.object({
+      label: o(z.string()),
+      variant: o(z.enum(["primary", "secondary", "ghost"])),
+      size: o(z.enum(["sm", "md", "lg"])),
+      leadingIcon: o(iconName).describe("Lucide icon before the label, e.g. chevron-left for Back"),
+      trailingIcon: o(iconName).describe("Lucide icon after the label, e.g. chevron-right for Next"),
+      fullWidth: o(z.boolean())
+    }),
+    slots: [],
+    description: "Button. Primary is filled, secondary is outlined, ghost is text only.",
+    example: { label: "Continue", variant: "primary", fullWidth: true }
+  },
+  Input: {
+    props: z.object({
+      label: o(z.string()),
+      placeholder: o(z.string()),
+      value: o(z.string()),
+      type: o(z.enum(["text", "password", "search", "email"])),
+      multiline: o(z.number().int().min(1)).describe("Number of rows; 2 or more makes a textarea"),
+      helper: o(z.string()),
+      error: o(z.boolean()).describe("Validation error: red border and red helper text"),
+      grow: o(z.boolean()).describe("Fill the remaining space in a row"),
+      width: o(z.union([z.number(), z.string()])).describe("Fixed width, e.g. 320. Default fills the space.")
+    }),
+    slots: [],
+    description: "Text field with optional label. Set multiline for a textarea.",
+    example: { label: "Email", placeholder: "you@example.com" }
+  },
+  Checkbox: {
+    props: z.object({ label: o(z.string()), checked: o(z.boolean()) }),
+    slots: [],
+    description: "Checkbox with label.",
+    example: { label: "Remember me", checked: true }
+  },
+  Radio: {
+    props: z.object({ label: o(z.string()), checked: o(z.boolean()) }),
+    slots: [],
+    description: "Radio button with label.",
+    example: { label: "Monthly", checked: true }
+  },
+  Toggle: {
+    props: z.object({ label: o(z.string()), on: o(z.boolean()) }),
+    slots: [],
+    description: "On/off switch with label on the left.",
+    example: { label: "Notifications", on: true }
+  },
+  Select: {
+    props: z.object({
+      label: o(z.string()),
+      value: o(z.string()),
+      placeholder: o(z.string()),
+      width: o(z.union([z.number(), z.string()])).describe("Fixed width, e.g. 320. Default fills the space.")
+    }),
+    slots: [],
+    description: "Dropdown field (closed state).",
+    example: { label: "Country", value: "United States" }
+  },
+  // ── Navigation & data ─────────────────────────────────────────────────
+  NavBar: {
+    props: z.object({
+      title: o(z.string()),
+      leading: o(z.enum(["none", "menu", "back", "close", "logo"])),
+      actions: o(z.array(iconName)).describe("Icon names shown on the right"),
+      align: o(z.enum(["left", "center"]))
+    }),
+    slots: [],
+    description: "Top app bar. Place first in a Screen.",
+    example: { title: "Inbox", leading: "menu", actions: ["search", "more-vertical"] }
+  },
+  TabBar: {
+    props: z.object({
+      items: z.array(z.object({ label: z.string(), icon: o(iconName) })),
+      active: o(z.number().int())
+    }),
+    slots: [],
+    description: "Bottom tab bar for mobile. Place last in a Screen (before overlays).",
+    example: { items: [{ label: "Home", icon: "home" }, { label: "Profile", icon: "user" }], active: 0 }
+  },
+  Tabs: {
+    props: z.object({
+      items: z.array(z.string()),
+      active: o(z.number().int())
+    }),
+    slots: [],
+    description: "In-page tabs with an underline on the active one.",
+    example: { items: ["Overview", "Activity", "Settings"], active: 0 }
+  },
+  List: {
+    props: z.object({ dividers: o(z.boolean()), grow: o(z.boolean()) }),
+    slots: ["default"],
+    description: "Vertical list of ListItems.",
+    example: { dividers: true }
+  },
+  ListItem: {
+    props: z.object({
+      title: o(z.string()),
+      subtitle: o(z.string()),
+      leading: o(z.enum(["none", "icon", "avatar", "image", "checkbox"])),
+      leadingIcon: o(iconName).describe("Lucide icon on the left; setting it implies leading=icon"),
+      trailing: o(z.enum(["none", "chevron", "toggle", "text", "badge", "icon"])),
+      trailingText: o(z.string()).describe("Text for trailing=text or badge; setting it implies trailing=text"),
+      trailingIcon: o(iconName).describe("Lucide icon on the right; setting it implies trailing=icon")
+    }),
+    slots: [],
+    description: "Row in a List. Omit title for a placeholder bar.",
+    example: { title: "Account", subtitle: "Email, password", leadingIcon: "user", trailing: "chevron" }
+  },
+  Table: {
+    props: z.object({
+      columns: z.array(z.string()),
+      rows: o(z.number().int()).describe("Placeholder rows when `data` is not given"),
+      data: o(z.array(z.array(z.string())))
+    }),
+    slots: [],
+    description: "Table with headers. Rows are placeholder bars unless `data` is given.",
+    example: { columns: ["Name", "Status", "Date"], rows: 5 }
+  },
+  // ── Overlays ──────────────────────────────────────────────────────────
+  Modal: {
+    props: z.object({
+      title: o(z.string()),
+      width: o(z.number()),
+      scrim: o(z.boolean()).describe("Dim the screen behind. Default true.")
+    }),
+    slots: ["default"],
+    description: "Centered dialog over the screen. Must be a direct child of a Screen, listed last.",
+    example: { title: "Delete note?", width: 320 }
+  },
+  Drawer: {
+    props: z.object({
+      side: o(z.enum(["left", "right", "bottom"])),
+      title: o(z.string()),
+      size: o(z.number()).describe("Width for left/right, height for bottom"),
+      scrim: o(z.boolean()).describe("Dim the screen behind. Default true."),
+      handle: o(z.boolean()).describe("Grab handle on bottom sheets. Default true for bottom.")
+    }),
+    slots: ["default"],
+    description: "Panel sliding in from an edge: side nav (left), filters/details (right), or bottom sheet. Must be a direct child of a Screen, listed last.",
+    example: { side: "left", title: "Menu", size: 300 }
+  }
+};
+var catalog = defineCatalog(wireframeSchema, {
+  components: componentDefinitions
+});
+function listItemEnds(p) {
+  return {
+    leading: p.leading ?? (p.leadingIcon ? "icon" : void 0),
+    trailing: p.trailing ?? (p.trailingIcon ? "icon" : p.trailingText ? "text" : void 0)
+  };
+}
+var RENAMED_PROPS = {
+  Button: { icon: "leadingIcon" },
+  ListItem: { icon: "leadingIcon" }
+};
+function upgradeRenamedProps(spec) {
+  for (const el of Object.values(spec.elements)) {
+    const renames = RENAMED_PROPS[el.type];
+    if (!renames || !el.props) continue;
+    for (const [from, to] of Object.entries(renames)) {
+      if (from in el.props) {
+        if (!(to in el.props)) el.props[to] = el.props[from];
+        delete el.props[from];
+      }
+    }
+  }
+  return spec;
+}
+
+// src/components.tsx
+import React, { Children, cloneElement, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GRAY = paletteFor();
+function withPalette(colors) {
+  return Object.fromEntries(
+    Object.entries(registry).map(([name, C]) => [name, (props) => C({ ...props, colors })])
+  );
+}
+var flexAlign = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch" };
+var flexJustify = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function Box({ style, children }) {
+  const clean = { display: "flex" };
+  for (const [k, v] of Object.entries(style ?? {})) if (v !== void 0 && v !== null) clean[k] = v;
+  return /* @__PURE__ */ jsx("div", { style: clean, children });
+}
+function withDir(children, dir, stretch = false, aligned = false) {
+  return Children.toArray(children).map((c) => isValidElement(c) ? cloneElement(c, { dir, stretch, aligned }) : c);
+}
+function fillRow(inRow, edge = true) {
+  if (!inRow) return {};
+  return { alignSelf: edge ? "stretch" : "flex-start" };
+}
+function grow(on, dir) {
+  if (!on) return { flexGrow: 0 };
+  return dir === "row" ? { flexGrow: 1, flexBasis: "0px" } : { flexGrow: 1 };
+}
+function hug(dir, aligned = false) {
+  return dir === "row" || aligned ? {} : { alignSelf: "flex-start" };
+}
+function IconGlyph({ name, size = 20, color = theme.ink, strokeWidth = 2 }) {
+  const node = name ? iconNode(name) : null;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: color,
+      strokeWidth,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { flexShrink: 0 },
+      children: node ? node.map(
+        ([tag, attrs], i) => React.createElement(tag, { key: i, ...attrs })
+      ) : /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" })
+    }
+  );
+}
+function Board({ element, children }) {
+  const p = element.props;
+  const gap = p.gap ?? BOARD_GAP;
+  const items = Children.toArray(children);
+  const perRow = p.layout === "grid" ? Math.max(1, p.columns ?? 3) : Math.max(1, items.length);
+  const rows = [];
+  for (let i = 0; i < items.length; i += perRow) rows.push(items.slice(i, i + perRow));
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        flexDirection: "column",
+        width: "100%",
+        height: "100%",
+        padding: p.padding ?? BOARD_PADDING,
+        backgroundColor: theme.board,
+        fontFamily: theme.font,
+        color: theme.ink
+      },
+      children: [
+        p.title ? /* @__PURE__ */ jsx(Box, { style: { height: TITLE_H, fontSize: 28, fontWeight: 600, color: theme.ink }, children: p.title }) : null,
+        /* @__PURE__ */ jsx(Box, { style: { flexDirection: "column", gap }, children: rows.map((row, i) => /* @__PURE__ */ jsx(Box, { style: { flexDirection: "row", alignItems: "flex-start", gap }, children: row }, i)) })
+      ]
+    }
+  );
+}
+function StatusBar() {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        height: 34,
+        flexShrink: 0,
+        padding: "0 26px",
+        alignItems: "center",
+        justifyContent: "space-between",
+        fontSize: 14,
+        fontWeight: 600
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { children: "9:41" }),
+        /* @__PURE__ */ jsxs(Box, { style: { gap: 5, alignItems: "center" }, children: [
+          /* @__PURE__ */ jsx(IconGlyph, { name: "signal", size: 15, strokeWidth: 2.4 }),
+          /* @__PURE__ */ jsx(IconGlyph, { name: "wifi", size: 15, strokeWidth: 2.4 }),
+          /* @__PURE__ */ jsx(IconGlyph, { name: "battery-full", size: 17, strokeWidth: 2 })
+        ] })
+      ]
+    }
+  );
+}
+function BrowserBar() {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        height: 40,
+        flexShrink: 0,
+        padding: "0 14px",
+        gap: 16,
+        alignItems: "center",
+        backgroundColor: theme.fill,
+        borderBottom: `1px solid ${theme.line}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(Box, { style: { gap: 7 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx(Box, { style: { width: 11, height: 11, borderRadius: 6, backgroundColor: theme.fill2, border: `1px solid ${theme.lineStrong}` } }, i)) }),
+        /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, justifyContent: "center" }, children: /* @__PURE__ */ jsx(Box, { style: { width: 420, height: 24, borderRadius: 12, backgroundColor: theme.paper, border: `1px solid ${theme.line}` } }) }),
+        /* @__PURE__ */ jsx(Box, { style: { width: 57 } })
+      ]
+    }
+  );
+}
+function Screen({ element, children }) {
+  const p = element.props;
+  const s = screenSize(p);
+  const top = [];
+  const body = [];
+  const bottom = [];
+  const overlays = [];
+  for (const c of Children.toArray(children)) {
+    const type = isValidElement(c) ? c.props.element?.type : null;
+    if (type === "NavBar") top.push(c);
+    else if (type === "TabBar") bottom.push(c);
+    else if (type === "Modal" || type === "Drawer") overlays.push(c);
+    else body.push(c);
+  }
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
+    /* @__PURE__ */ jsx(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        style: {
+          width: s.width,
+          height: s.height,
+          flexDirection: "column",
+          backgroundColor: theme.paper,
+          border: `1.5px solid ${theme.lineStrong}`,
+          borderRadius: s.radius,
+          overflow: "hidden",
+          boxShadow: "0 1px 3px rgba(0,0,0,0.08)",
+          color: theme.ink,
+          fontSize: 15
+        },
+        children: [
+          s.chrome && s.device === "phone" ? /* @__PURE__ */ jsx(StatusBar, {}) : null,
+          s.chrome && s.device === "desktop" ? /* @__PURE__ */ jsx(BrowserBar, {}) : null,
+          /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexDirection: "column", overflow: "hidden" }, children: [
+            top,
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                style: {
+                  flexGrow: 1,
+                  flexDirection: "column",
+                  padding: s.padding,
+                  gap: p.gap ?? 14,
+                  overflow: "hidden"
+                },
+                children: withDir(body, "column")
+              }
+            ),
+            bottom,
+            overlays
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function Note({ element, dir, aligned }) {
+  const p = element.props;
+  const onBoard = dir === void 0;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: p.width ?? (onBoard ? NOTE_WIDTH : void 0),
+        marginTop: onBoard ? LABEL_H : 0,
+        flexShrink: 0,
+        padding: 14,
+        backgroundColor: theme.notes[p.color ?? "yellow"] ?? theme.notes.yellow,
+        boxShadow: "0 2px 6px rgba(0,0,0,0.12)",
+        fontSize: 14,
+        lineHeight: 1.5,
+        color: theme.ink,
+        ...onBoard ? {} : hug(dir, aligned)
+      },
+      children: p.text
+    }
+  );
+}
+var borderSide = (side) => {
+  const b = `1px solid ${theme.line}`;
+  switch (side) {
+    case "all":
+      return { border: b };
+    case "left":
+      return { borderLeft: b };
+    case "right":
+      return { borderRight: b };
+    case "top":
+      return { borderTop: b };
+    case "bottom":
+      return { borderBottom: b };
+    default:
+      return {};
+  }
+};
+function Stack({ element, children, dir: parentDir, stretch }) {
+  const p = element.props;
+  const dir = p.direction ?? "column";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        flexDirection: dir,
+        gap: p.gap ?? (dir === "row" ? 12 : 12),
+        padding: p.padding ?? 0,
+        alignItems: flexAlign[p.align ?? (dir === "row" ? "center" : "stretch")],
+        justifyContent: flexJustify[p.justify ?? "start"],
+        flexWrap: p.wrap ? "wrap" : "nowrap",
+        ...grow(p.grow, parentDir),
+        flexShrink: p.width ? 0 : 1,
+        width: p.width ?? void 0,
+        minHeight: 0,
+        backgroundColor: p.fill ? theme.fill : void 0,
+        ...borderSide(p.border),
+        // stacks with a visible edge (sidebars, panels) fill the row's height; others sit at the top
+        ...fillRow(stretch, p.width != null || !!p.fill || !!p.border && p.border !== "none")
+      },
+      children: withDir(children, dir, dir === "row" && p.align == null, dir === "column" && p.align != null && p.align !== "stretch")
+    }
+  );
+}
+function Grid({ element, children }) {
+  const p = element.props;
+  const gap = p.gap ?? 16;
+  const cols = Math.max(1, p.columns ?? 2);
+  return /* @__PURE__ */ jsx(Box, { style: { padding: p.padding ?? 0, flexDirection: "column" }, children: /* @__PURE__ */ jsx(Box, { style: { flexDirection: "row", flexWrap: "wrap", margin: -gap / 2 }, children: Children.toArray(children).map((c, i) => /* @__PURE__ */ jsx(Box, { style: { width: `${100 / cols}%`, padding: gap / 2, flexDirection: "column" }, children: withDir(c, "column") }, i)) }) });
+}
+function Card({ element, children, dir, stretch }) {
+  const p = element.props;
+  const filled = p.variant === "filled";
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        flexDirection: "column",
+        gap: p.gap ?? 10,
+        padding: p.padding ?? 16,
+        borderRadius: 10,
+        border: filled ? "none" : `1.5px solid ${theme.line}`,
+        backgroundColor: filled ? theme.fill : theme.paper,
+        ...grow(p.grow, dir),
+        width: p.width ?? void 0,
+        flexShrink: p.width ? 0 : 1,
+        ...fillRow(stretch)
+      },
+      children: [
+        p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 15, fontWeight: 600 }, children: p.title }) : null,
+        withDir(children, "column")
+      ]
+    }
+  );
+}
+function Divider({ element, dir }) {
+  const vertical = element.props.vertical ?? dir === "row";
+  return vertical ? /* @__PURE__ */ jsx(Box, { style: { width: 1, alignSelf: "stretch", backgroundColor: theme.line, flexShrink: 0 } }) : /* @__PURE__ */ jsx(Box, { style: { height: 1, alignSelf: "stretch", backgroundColor: theme.line, flexShrink: 0 } });
+}
+function Spacer({ element }) {
+  const size = element.props.size;
+  return size != null ? /* @__PURE__ */ jsx(Box, { style: { flexBasis: `${size}px`, flexGrow: 0, flexShrink: 0 } }) : /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1 } });
+}
+function Heading({ element }) {
+  const p = element.props;
+  const size = { 1: 26, 2: 20, 3: 16 }[p.level ?? 1] ?? 26;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        fontSize: size,
+        fontWeight: 600,
+        lineHeight: 1.25,
+        color: theme.ink,
+        justifyContent: p.align === "center" ? "center" : p.align === "right" ? "flex-end" : "flex-start",
+        textAlign: p.align ?? "left"
+      },
+      children: p.text
+    }
+  );
+}
+var LINE_WIDTHS = [100, 94, 97, 89, 95, 91];
+function PlaceholderLines({ count, height = 8, gap = 9, color = theme.fill2, last = 62 }) {
+  return /* @__PURE__ */ jsx(Box, { style: { flexDirection: "column", gap, alignSelf: "stretch" }, children: Array.from({ length: count }, (_, i) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        height,
+        borderRadius: height / 2,
+        backgroundColor: color,
+        width: `${i === count - 1 && count > 1 ? last : LINE_WIDTHS[i % LINE_WIDTHS.length]}%`
+      }
+    },
+    i
+  )) });
+}
+function Text({ element }) {
+  const p = element.props;
+  const size = { sm: 13, md: 15, lg: 18 }[p.size ?? "md"] ?? 15;
+  if (p.text == null) {
+    return /* @__PURE__ */ jsx(PlaceholderLines, { count: p.lines ?? 2, height: Math.round(size * 0.55), gap: Math.round(size * 0.6) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        fontSize: size,
+        lineHeight: 1.45,
+        color: p.muted ? theme.muted : theme.text,
+        fontWeight: p.bold ? 600 : 400,
+        justifyContent: p.align === "center" ? "center" : p.align === "right" ? "flex-end" : "flex-start",
+        textAlign: p.align ?? "left"
+      },
+      children: p.text
+    }
+  );
+}
+function Image({ element, dir }) {
+  const p = element.props;
+  const h = p.height ?? 160;
+  const w = p.width ?? (dir === "row" ? h : "100%");
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        position: "relative",
+        width: w,
+        height: h,
+        flexShrink: 0,
+        backgroundColor: theme.fill,
+        border: `1.5px solid ${theme.line}`,
+        borderRadius: p.rounded ? 12 : 4,
+        overflow: "hidden",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            width: "100%",
+            height: "100%",
+            viewBox: "0 0 100 100",
+            preserveAspectRatio: "none",
+            style: { position: "absolute", top: 0, left: 0 },
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "100", y2: "100", stroke: theme.line, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" }),
+              /* @__PURE__ */ jsx("line", { x1: "100", y1: "0", x2: "0", y2: "100", stroke: theme.line, strokeWidth: "1.5", vectorEffect: "non-scaling-stroke" })
+            ]
+          }
+        ),
+        p.label ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              padding: "3px 8px",
+              fontSize: 12,
+              color: theme.muted,
+              backgroundColor: theme.fill,
+              borderRadius: 4
+            },
+            children: p.label
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function Icon({ element, dir, aligned }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0, ...hug(dir, aligned) }, children: /* @__PURE__ */ jsx(IconGlyph, { name: p.name, size: p.size ?? 20 }) });
+}
+function AvatarCircle({ initials, size = 40 }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: size,
+        height: size,
+        borderRadius: size / 2,
+        backgroundColor: theme.fill2,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        fontSize: Math.round(size * 0.38),
+        fontWeight: 600,
+        color: theme.text,
+        overflow: "hidden"
+      },
+      children: initials ? initials.slice(0, 2).toUpperCase() : /* @__PURE__ */ jsx(IconGlyph, { name: "user", size: Math.round(size * 0.55), color: theme.muted })
+    }
+  );
+}
+function Avatar({ element, dir, aligned }) {
+  return /* @__PURE__ */ jsx(Box, { style: hug(dir, aligned), children: /* @__PURE__ */ jsx(AvatarCircle, { initials: element.props.initials, size: element.props.size ?? 40 }) });
+}
+function BadgePill({ label, variant, tone, c = GRAY }) {
+  const solid = variant !== "outline";
+  const toneColor = tone && tone !== "neutral" ? TONES[tone] : void 0;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        height: 22,
+        padding: "0 9px",
+        borderRadius: 11,
+        alignItems: "center",
+        fontSize: 12,
+        fontWeight: 600,
+        flexShrink: 0,
+        backgroundColor: solid ? toneColor ?? c.accent : "transparent",
+        color: solid ? toneColor ? "#ffffff" : c.onAccent : toneColor ?? theme.text,
+        border: solid ? "none" : `1.5px solid ${toneColor ?? theme.lineStrong}`
+      },
+      children: label
+    }
+  );
+}
+function Badge({ element, dir, aligned, colors }) {
+  return /* @__PURE__ */ jsx(Box, { style: hug(dir, aligned), children: /* @__PURE__ */ jsx(BadgePill, { label: element.props.label, variant: element.props.variant, tone: element.props.tone, c: colors }) });
+}
+function Button({ element, dir, aligned, colors: c = GRAY }) {
+  const p = element.props;
+  const variant = p.variant ?? "primary";
+  const h = { sm: 32, md: 42, lg: 50 }[p.size ?? "md"] ?? 42;
+  const fg = variant === "primary" ? c.onAccent : variant === "ghost" ? c.accentText : theme.ink;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        height: h,
+        padding: `0 ${Math.round(h * 0.45)}px`,
+        gap: 8,
+        borderRadius: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        fontSize: h < 36 ? 13 : 15,
+        fontWeight: 600,
+        color: fg,
+        backgroundColor: variant === "primary" ? c.accent : "transparent",
+        border: variant === "secondary" ? `1.5px solid ${theme.lineStrong}` : "none",
+        ...p.fullWidth ? { alignSelf: "stretch" } : hug(dir, aligned)
+      },
+      children: [
+        p.leadingIcon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.leadingIcon, size: h < 36 ? 16 : 18, color: fg }) : null,
+        p.label ? /* @__PURE__ */ jsx(Box, { children: p.label }) : null,
+        p.trailingIcon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.trailingIcon, size: h < 36 ? 16 : 18, color: fg }) : null
+      ]
+    }
+  );
+}
+function fieldWidth(width, dir) {
+  if (width != null) return { width, flexShrink: 0 };
+  return dir === "row" ? { flexGrow: 1, flexBasis: "0px", minWidth: 120 } : {};
+}
+function FieldLabel({ text }) {
+  return text ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: text }) : null;
+}
+function Field({ children, height = 42, top = false, error = false }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        height,
+        padding: top ? "10px 12px" : "0 12px",
+        gap: 8,
+        alignItems: top ? "flex-start" : "center",
+        border: `1.5px solid ${error ? TONES.danger : theme.lineStrong}`,
+        borderRadius: 8,
+        backgroundColor: theme.paper,
+        fontSize: 15
+      },
+      children
+    }
+  );
+}
+function Input({ element, dir }) {
+  const p = element.props;
+  const rows = p.multiline ?? 1;
+  const isPassword = p.type === "password";
+  const shown = p.value ?? null;
+  const content = isPassword && shown ? "\u2022".repeat(Math.min(shown.length, 12)) : shown;
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 6, ...fieldWidth(p.width, dir), ...p.grow ? { flexGrow: 1 } : {} }, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
+    /* @__PURE__ */ jsxs(Field, { height: rows > 1 ? rows * 22 + 20 : 42, top: rows > 1, error: !!p.error, children: [
+      p.type === "search" ? /* @__PURE__ */ jsx(IconGlyph, { name: "search", size: 18, color: theme.muted }) : null,
+      /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, color: content ? theme.ink : theme.muted }, children: content ?? p.placeholder ?? (isPassword ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "") }),
+      isPassword ? /* @__PURE__ */ jsx(IconGlyph, { name: "eye-off", size: 18, color: theme.muted }) : null
+    ] }),
+    p.helper ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 12, color: p.error ? TONES.danger : theme.muted }, children: p.helper }) : null
+  ] });
+}
+function Select({ element, dir }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 6, ...fieldWidth(p.width, dir) }, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
+    /* @__PURE__ */ jsxs(Field, { children: [
+      /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, color: p.value ? theme.ink : theme.muted }, children: p.value ?? p.placeholder ?? "Select\u2026" }),
+      /* @__PURE__ */ jsx(IconGlyph, { name: "chevron-down", size: 18, color: theme.text })
+    ] })
+  ] });
+}
+function CheckMark({ checked, round = false, c = GRAY }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: 20,
+        height: 20,
+        flexShrink: 0,
+        borderRadius: round ? 10 : 5,
+        border: `1.5px solid ${checked && !round ? c.accent : theme.lineStrong}`,
+        backgroundColor: checked && !round ? c.accent : theme.paper,
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: checked ? round ? /* @__PURE__ */ jsx(Box, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: c.accent } }) : /* @__PURE__ */ jsx(IconGlyph, { name: "check", size: 14, color: c.onAccent, strokeWidth: 3 }) : null
+    }
+  );
+}
+function Checkbox({ element, dir, aligned, colors }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs(Box, { style: { gap: 10, alignItems: "center", ...hug(dir, aligned) }, children: [
+    /* @__PURE__ */ jsx(CheckMark, { checked: p.checked, c: colors }),
+    p.label ? /* @__PURE__ */ jsx(Box, { style: { color: theme.text }, children: p.label }) : null
+  ] });
+}
+function Radio({ element, dir, aligned, colors }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs(Box, { style: { gap: 10, alignItems: "center", ...hug(dir, aligned) }, children: [
+    /* @__PURE__ */ jsx(CheckMark, { checked: p.checked, round: true, c: colors }),
+    p.label ? /* @__PURE__ */ jsx(Box, { style: { color: theme.text }, children: p.label }) : null
+  ] });
+}
+function Switch({ on, c = GRAY }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: 42,
+        height: 24,
+        borderRadius: 12,
+        padding: 3,
+        flexShrink: 0,
+        backgroundColor: on ? c.accent : theme.fill2,
+        justifyContent: on ? "flex-end" : "flex-start"
+      },
+      children: /* @__PURE__ */ jsx(Box, { style: { width: 18, height: 18, borderRadius: 9, backgroundColor: theme.paper } })
+    }
+  );
+}
+function Toggle({ element, colors }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs(Box, { style: { gap: 12, alignItems: "center", justifyContent: "space-between" }, children: [
+    p.label ? /* @__PURE__ */ jsx(Box, { style: { color: theme.text }, children: p.label }) : null,
+    /* @__PURE__ */ jsx(Switch, { on: p.on, c: colors })
+  ] });
+}
+var LEADING_ICON = { menu: "menu", back: "arrow-left", close: "x" };
+function NavBar({ element }) {
+  const p = element.props;
+  const leading = p.leading === "logo" ? /* @__PURE__ */ jsx(Box, { style: { width: 30, height: 30, borderRadius: 8, backgroundColor: theme.fill2 } }) : p.leading && p.leading !== "none" ? /* @__PURE__ */ jsx(IconGlyph, { name: LEADING_ICON[p.leading], size: 22 }) : null;
+  const actions = /* @__PURE__ */ jsx(Box, { style: { gap: 18, alignItems: "center", justifyContent: "flex-end" }, children: (p.actions ?? []).map((a, i) => /* @__PURE__ */ jsx(IconGlyph, { name: a, size: 22 }, i)) });
+  const title = p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 17, fontWeight: 600 }, children: p.title }) : null;
+  const centered = p.align === "center";
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        height: 56,
+        flexShrink: 0,
+        padding: "0 16px",
+        gap: 14,
+        alignItems: "center",
+        borderBottom: `1px solid ${theme.line}`,
+        backgroundColor: theme.paper
+      },
+      children: centered ? [
+        /* @__PURE__ */ jsx(Box, { style: { width: 90, alignItems: "center" }, children: leading }, "l"),
+        /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, justifyContent: "center" }, children: title }, "c"),
+        /* @__PURE__ */ jsx(Box, { style: { width: 90, justifyContent: "flex-end" }, children: actions }, "r")
+      ] : [
+        leading ? /* @__PURE__ */ jsx(Box, { children: leading }, "l") : null,
+        title ? /* @__PURE__ */ jsx(Box, { children: title }, "t") : null,
+        /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1 } }, "s"),
+        /* @__PURE__ */ jsx(Box, { children: actions }, "a")
+      ]
+    }
+  );
+}
+function TabBar({ element, colors: c = GRAY }) {
+  const p = element.props;
+  const active = p.active ?? 0;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        height: 76,
+        flexShrink: 0,
+        padding: "8px 0 18px",
+        borderTop: `1px solid ${theme.line}`,
+        backgroundColor: theme.paper
+      },
+      children: (p.items ?? []).map((item, i) => {
+        const color = i === active ? c.accentText : theme.muted;
+        return /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", alignItems: "center", gap: 4, color, fontSize: 11, fontWeight: i === active ? 600 : 400 },
+            children: [
+              /* @__PURE__ */ jsx(IconGlyph, { name: item.icon, size: 22, color }),
+              /* @__PURE__ */ jsx(Box, { children: item.label })
+            ]
+          },
+          i
+        );
+      })
+    }
+  );
+}
+function Tabs({ element, colors: c = GRAY }) {
+  const p = element.props;
+  const active = p.active ?? 0;
+  return /* @__PURE__ */ jsx(Box, { style: { borderBottom: `1px solid ${theme.line}`, gap: 4 }, children: (p.items ?? []).map((label, i) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        padding: "10px 14px",
+        marginBottom: -1,
+        fontSize: 14,
+        fontWeight: i === active ? 600 : 400,
+        color: i === active ? c.accentText : theme.muted,
+        borderBottom: i === active ? `2.5px solid ${c.accentText}` : "2.5px solid transparent"
+      },
+      children: label
+    },
+    i
+  )) });
+}
+function List({ element, children, dir, stretch }) {
+  const dividers = element.props.dividers ?? true;
+  const items = withDir(children, "column");
+  return /* @__PURE__ */ jsx(Box, { style: { flexDirection: "column", ...grow(element.props.grow, dir), ...fillRow(stretch, false) }, children: items.map((c, i) => /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column" }, children: [
+    i > 0 && dividers ? /* @__PURE__ */ jsx(Box, { style: { height: 1, backgroundColor: theme.line } }) : null,
+    c
+  ] }, i)) });
+}
+function ListItem({ element, colors }) {
+  const p = element.props;
+  const ends = listItemEnds(p);
+  const leading = (() => {
+    switch (ends.leading) {
+      case "icon":
+        return /* @__PURE__ */ jsx(Box, { style: { width: 38, height: 38, borderRadius: 10, backgroundColor: theme.fill, alignItems: "center", justifyContent: "center", flexShrink: 0 }, children: /* @__PURE__ */ jsx(IconGlyph, { name: p.leadingIcon, size: 20 }) });
+      case "avatar":
+        return /* @__PURE__ */ jsx(AvatarCircle, { size: 40 });
+      case "image":
+        return /* @__PURE__ */ jsx(Box, { style: { width: 48, height: 48, borderRadius: 6, backgroundColor: theme.fill, border: `1.5px solid ${theme.line}`, flexShrink: 0 } });
+      case "checkbox":
+        return /* @__PURE__ */ jsx(CheckMark, { c: colors });
+      default:
+        return null;
+    }
+  })();
+  const trailing = (() => {
+    switch (ends.trailing) {
+      case "chevron":
+        return /* @__PURE__ */ jsx(IconGlyph, { name: "chevron-right", size: 20, color: theme.muted });
+      case "toggle":
+        return /* @__PURE__ */ jsx(Switch, { on: true, c: colors });
+      case "text":
+        return /* @__PURE__ */ jsx(Box, { style: { fontSize: 13, color: theme.muted, flexShrink: 0 }, children: p.trailingText ?? "" });
+      case "badge":
+        return /* @__PURE__ */ jsx(BadgePill, { label: p.trailingText ?? "1", c: colors });
+      case "icon":
+        return /* @__PURE__ */ jsx(IconGlyph, { name: p.trailingIcon ?? "more-horizontal", size: 20, color: theme.muted });
+      default:
+        return null;
+    }
+  })();
+  return /* @__PURE__ */ jsxs(Box, { style: { minHeight: 60, padding: "10px 0", gap: 14, alignItems: "center" }, children: [
+    leading,
+    /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1, flexShrink: 1, flexDirection: "column", gap: 4 }, children: [
+      p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 15, fontWeight: 600, color: theme.ink }, children: p.title }) : /* @__PURE__ */ jsx(Box, { style: { height: 9, width: "55%", borderRadius: 5, backgroundColor: theme.fill2 } }),
+      p.subtitle ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 13, color: theme.muted }, children: p.subtitle }) : p.title ? null : /* @__PURE__ */ jsx(Box, { style: { height: 7, width: "80%", borderRadius: 4, backgroundColor: theme.fill, marginTop: 4 } })
+    ] }),
+    trailing
+  ] });
+}
+var CELL_WIDTHS = [70, 45, 60, 38, 52];
+function Table({ element }) {
+  const p = element.props;
+  const cols = p.columns ?? [];
+  const data = p.data ?? null;
+  const rowCount = data ? data.length : p.rows ?? 4;
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", border: `1.5px solid ${theme.line}`, borderRadius: 8, overflow: "hidden", fontSize: 14 }, children: [
+    /* @__PURE__ */ jsx(Box, { style: { backgroundColor: theme.fill }, children: cols.map((c, i) => /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, flexBasis: "0px", padding: "10px 14px", fontSize: 13, fontWeight: 600, color: theme.text }, children: c }, i)) }),
+    Array.from({ length: rowCount }, (_, r) => /* @__PURE__ */ jsx(Box, { style: { borderTop: `1px solid ${theme.line}`, minHeight: 42, alignItems: "center" }, children: cols.map((_2, c) => /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, flexBasis: "0px", padding: "10px 14px", color: theme.text }, children: data ? data[r]?.[c] ?? "" : /* @__PURE__ */ jsx(
+      Box,
+      {
+        style: {
+          height: 8,
+          borderRadius: 4,
+          backgroundColor: c === 0 ? theme.fill2 : theme.fill,
+          width: `${CELL_WIDTHS[(r + c * 2) % CELL_WIDTHS.length]}%`
+        }
+      }
+    ) }, c)) }, r))
+  ] });
+}
+function Scrim({ show, children, style }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: show ? theme.scrim : "transparent",
+        ...style
+      },
+      children
+    }
+  );
+}
+function Modal({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsx(Scrim, { show: p.scrim ?? true, style: { alignItems: "center", justifyContent: "center", padding: 24 }, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        width: p.width ?? 320,
+        flexDirection: "column",
+        gap: 14,
+        padding: 22,
+        borderRadius: 14,
+        backgroundColor: theme.paper,
+        boxShadow: "0 8px 30px rgba(0,0,0,0.18)"
+      },
+      children: [
+        p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }) : null,
+        withDir(children, "column")
+      ]
+    }
+  ) });
+}
+function Drawer({ element, children }) {
+  const p = element.props;
+  const side = p.side ?? "left";
+  const bottom = side === "bottom";
+  const size = p.size ?? (bottom ? 380 : 300);
+  const panel = bottom ? { left: 0, right: 0, bottom: 0, minHeight: size, maxHeight: "92%", borderRadius: "18px 18px 0 0", boxShadow: "0 -6px 24px rgba(0,0,0,0.14)" } : {
+    top: 0,
+    bottom: 0,
+    [side]: 0,
+    width: size,
+    boxShadow: side === "left" ? "6px 0 24px rgba(0,0,0,0.14)" : "-6px 0 24px rgba(0,0,0,0.14)"
+  };
+  return /* @__PURE__ */ jsx(Scrim, { show: p.scrim ?? true, children: /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        position: "absolute",
+        flexDirection: "column",
+        backgroundColor: theme.paper,
+        padding: bottom ? "10px 20px 20px" : 20,
+        gap: 14,
+        overflow: "hidden",
+        ...panel
+      },
+      children: [
+        bottom && (p.handle ?? true) ? /* @__PURE__ */ jsx(Box, { style: { justifyContent: "center", paddingBottom: 4 }, children: /* @__PURE__ */ jsx(Box, { style: { width: 40, height: 5, borderRadius: 3, backgroundColor: theme.fill2 } }) }) : null,
+        p.title ? /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsx(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }),
+          /* @__PURE__ */ jsx(IconGlyph, { name: "x", size: 22, color: theme.muted })
+        ] }) : null,
+        withDir(children, "column")
+      ]
+    }
+  ) });
+}
+var registry = {
+  Board,
+  Screen,
+  Note,
+  Stack,
+  Grid,
+  Card,
+  Divider,
+  Spacer,
+  Heading,
+  Text,
+  Image,
+  Icon,
+  Avatar,
+  Badge,
+  Button,
+  Input,
+  Checkbox,
+  Radio,
+  Toggle,
+  Select,
+  NavBar,
+  TabBar,
+  Tabs,
+  List,
+  ListItem,
+  Table,
+  Modal,
+  Drawer
+};
+
+// src/text.ts
+var PRIMARY_PROP = {
+  Board: "title",
+  Screen: "name",
+  Note: "text",
+  Card: "title",
+  Heading: "text",
+  Text: "text",
+  Image: "label",
+  Icon: "name",
+  Avatar: "initials",
+  Badge: "label",
+  Button: "label",
+  Input: "label",
+  Checkbox: "label",
+  Radio: "label",
+  Toggle: "label",
+  Select: "label",
+  NavBar: "title",
+  ListItem: "title",
+  Modal: "title",
+  Drawer: "title"
+};
+function unwrap(t) {
+  let cur = t;
+  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
+  return cur;
+}
+function textWhereExpected(schema, value) {
+  const s = unwrap(schema);
+  switch (s?.def?.type) {
+    case "string":
+      return typeof value === "number" ? String(value) : value;
+    case "array":
+      return Array.isArray(value) ? value.map((v) => textWhereExpected(s.def.element, v)) : value;
+    case "object":
+      if (!value || typeof value !== "object" || Array.isArray(value)) return value;
+      return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, k in s.shape ? textWhereExpected(s.shape[k], v) : v]));
+    default:
+      return value;
+  }
+}
+var COMPONENTS = /* @__PURE__ */ new Map();
+for (const [name, def] of Object.entries(componentDefinitions)) {
+  const shape = def.props.shape;
+  const enumValues = /* @__PURE__ */ new Map();
+  const ambiguous = /* @__PURE__ */ new Set();
+  const booleans2 = /* @__PURE__ */ new Set();
+  for (const [prop, schema] of Object.entries(shape)) {
+    const inner = unwrap(schema);
+    const type = inner?.def?.type;
+    if (type === "enum") {
+      for (const v of inner.options) {
+        if (enumValues.has(v)) ambiguous.add(v);
+        else enumValues.set(v, prop);
+      }
+    } else if (type === "boolean") {
+      booleans2.add(prop);
+    }
+  }
+  for (const v of ambiguous) enumValues.delete(v);
+  COMPONENTS.set(name.toLowerCase(), { name, props: shape, enumValues, ambiguous, booleans: booleans2 });
+}
+function belongsElsewhere(component, word, asProp) {
+  const info = COMPONENTS.get(component.toLowerCase());
+  if (!info) return "";
+  const props = [], options = [];
+  for (const other of COMPONENTS.values()) {
+    if (other === info) continue;
+    if (word in other.props && (asProp || other.booleans.has(word))) props.push(other.name);
+    else if (!asProp && (other.enumValues.has(word) || other.ambiguous.has(word))) options.push(other.name);
+  }
+  const names = (xs) => xs.length > 3 ? `${xs.slice(0, 3).join(", ")}\u2026` : xs.join(", ").replace(/, ([^,]*)$/, " and $1");
+  const a = (name) => /^[AEIOU]/.test(name) ? `an ${name}` : `a ${name}`;
+  let msg = props.length ? `${word} is a ${names(props)} prop, not ${a(info.name)} one` : options.length ? `${word} is a ${names(options)} option, not ${a(info.name)} one` : "";
+  const width = info.props.width;
+  if (msg && word === "fullWidth" && /fills the space/i.test(width?.description ?? unwrap(width)?.description ?? "")) {
+    msg += `; ${a(info.name)} already fills its width (width=\u2026 sets a fixed one), so remove it`;
+  }
+  return msg;
+}
+function bareWords(component) {
+  const info = COMPONENTS.get(component.toLowerCase());
+  if (!info) throw new Error(`unknown component ${component}`);
+  return {
+    options: [...info.enumValues].map(([value, prop]) => ({ value, prop })),
+    ambiguous: [...info.ambiguous],
+    booleans: [...info.booleans],
+    wordPrimary: WORD_PRIMARY.has(info.name)
+  };
+}
+var normalizeType = (s) => s.toLowerCase().replace(/[-_]/g, "");
+var WORD_PRIMARY = /* @__PURE__ */ new Set(["Icon", "Avatar"]);
+var ANTONYMS = { off: "on", unchecked: "checked" };
+function tokenize(src) {
+  const out = [];
+  let i = 0;
+  while (i < src.length) {
+    const c = src[i];
+    if (c === " " || c === "	") {
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      let j2 = i + 1, s = "";
+      while (j2 < src.length && src[j2] !== c) {
+        if (src[j2] === "\\" && j2 + 1 < src.length) {
+          s += src[j2 + 1];
+          j2 += 2;
+          continue;
+        }
+        s += src[j2++];
+      }
+      if (j2 >= src.length) throw new Error("unterminated string");
+      out.push({ kind: "str", value: s, start: i, end: j2 + 1 });
+      i = j2 + 1;
+      continue;
+    }
+    if ("=[]{}:,".includes(c)) {
+      out.push({ kind: "sym", value: c, start: i, end: i + 1 });
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < src.length && !` 	,=[]{}":`.includes(src[j])) j++;
+    const w = src.slice(i, j);
+    out.push({ kind: /^-?\d+(\.\d+)?$/.test(w) ? "num" : "word", value: w, start: i, end: j });
+    i = j;
+  }
+  return out;
+}
+var Cursor = class {
+  constructor(toks, src) {
+    this.toks = toks;
+    this.src = src;
+  }
+  toks;
+  src;
+  i = 0;
+  peek(o2 = 0) {
+    return this.toks[this.i + o2];
+  }
+  next() {
+    return this.toks[this.i++];
+  }
+  done() {
+    return this.i >= this.toks.length;
+  }
+  isSym(v, o2 = 0) {
+    const t = this.peek(o2);
+    return t?.kind === "sym" && t.value === v;
+  }
+  /** Commas only separate list items; elsewhere (between arguments, between {…} fields) they're ignored. */
+  skipCommas() {
+    while (this.isSym(",")) this.i++;
+  }
+};
+var scalar = (t) => t.kind === "num" ? Number(t.value) : t.kind === "word" && t.value === "true" ? true : t.kind === "word" && t.value === "false" ? false : t.kind === "word" && t.value === "null" ? null : t.value;
+function parseListItem(c) {
+  const first = c.peek();
+  if (!first) throw new Error("unclosed [");
+  if (first.kind === "str" || c.isSym("[") || c.isSym("{")) {
+    const v = parseValue(c);
+    if (!c.done() && !c.isSym(",") && !c.isSym("]")) {
+      throw new Error(`expected , or ] after ${JSON.stringify(v)} in a list (quote the whole item, or separate items with commas)`);
+    }
+    return v;
+  }
+  const toks = [];
+  while (!c.done() && !c.isSym(",") && !c.isSym("]")) {
+    const t = c.peek();
+    if (t.kind === "sym" && "[]{}".includes(t.value)) throw new Error(`unexpected "${t.value}" in a list item; quote the item`);
+    if (t.kind === "str") throw new Error(`unexpected quote in a list item; quote the whole item`);
+    toks.push(c.next());
+  }
+  if (!toks.length) throw new Error("empty item in a list (two commas in a row?)");
+  if (toks.length === 1) return scalar(toks[0]);
+  return c.src.slice(toks[0].start, toks[toks.length - 1].end);
+}
+function parseValue(c) {
+  const t = c.next();
+  if (!t) throw new Error("missing value");
+  if (t.kind === "str") return t.value;
+  if (t.kind === "num") return Number(t.value);
+  if (t.kind === "word") return scalar(t);
+  if (t.value === "[") {
+    const arr = [];
+    while (!c.isSym("]")) {
+      if (c.done()) throw new Error("unclosed [");
+      arr.push(parseListItem(c));
+      if (c.isSym(",")) c.next();
+    }
+    c.next();
+    return arr;
+  }
+  if (t.value === "{") {
+    const obj = {};
+    while (!c.isSym("}")) {
+      c.skipCommas();
+      if (c.isSym("}")) break;
+      if (c.done()) throw new Error("unclosed {");
+      const k = c.next();
+      if (!k || k.kind === "sym") throw new Error("expected key in {\u2026}");
+      if (!(c.isSym("=") || c.isSym(":"))) throw new Error(`expected = after ${k.value}`);
+      c.next();
+      obj[k.value] = parseValue(c);
+    }
+    c.next();
+    return obj;
+  }
+  throw new Error(`unexpected "${t.value}"`);
+}
+function parseWireframeText(source) {
+  const issues = [];
+  const elements = {};
+  const lines = {};
+  const stack = [];
+  let root = null;
+  let n = 0;
+  let lastElementLine = 0;
+  const srcLines = source.replace(/\r\n?/g, "\n").split("\n");
+  srcLines.forEach((raw, idx) => {
+    const lineNo = idx + 1;
+    const trimmed = raw.trim();
+    if (!trimmed || trimmed.startsWith("#") || trimmed.startsWith("```")) return;
+    const indent = raw.length - raw.trimStart().length;
+    const target = lastElementLine ? `line ${lastElementLine}` : "its component's line";
+    const wrappedProp = trimmed.match(/^([A-Za-z][\w-]*)\s*[=:]/);
+    if (wrappedProp) {
+      issues.push({ line: lineNo, message: `${wrappedProp[1]}=\u2026: props go on the same line as their component; move it to the end of ${target}` });
+      return;
+    }
+    if (/^[\[\]{}]/.test(trimmed)) {
+      issues.push({ line: lineNo, message: `a list must stay on one line; join this to ${target}` });
+      return;
+    }
+    const m = trimmed.match(/^([A-Za-z][\w-]*)(.*)$/);
+    if (!m) {
+      issues.push({ line: lineNo, message: `expected a component name, got "${trimmed}"` });
+      return;
+    }
+    lastElementLine = lineNo;
+    const info = COMPONENTS.get(normalizeType(m[1]));
+    if (!info) {
+      issues.push({ line: lineNo, message: unknownComponentMessage(m[1], [...COMPONENTS.keys()]) });
+      return;
+    }
+    const props = {};
+    try {
+      const c = new Cursor(tokenize(m[2]), m[2]);
+      while (!c.done()) {
+        c.skipCommas();
+        if (c.done()) break;
+        const t = c.peek();
+        if (t.kind !== "sym" && (c.isSym("=", 1) || c.isSym(":", 1))) {
+          c.next();
+          c.next();
+          const key = RENAMED_PROPS[info.name]?.[t.value] ?? t.value;
+          if (!(key in info.props)) {
+            const elsewhere = belongsElsewhere(info.name, key, true);
+            issues.push({ line: lineNo, message: `${info.name} has no prop "${key}"` + (elsewhere ? `: ${elsewhere}` : "") + ` (its props: ${Object.keys(info.props).join(", ")})` });
+          }
+          props[key] = key in info.props ? textWhereExpected(info.props[key], parseValue(c)) : parseValue(c);
+          continue;
+        }
+        c.next();
+        if (t.kind === "str") {
+          const p = PRIMARY_PROP[info.name];
+          if (!p) issues.push({ line: lineNo, message: `${info.name} takes no text; use key="\u2026"` });
+          else if (p in props) issues.push({ line: lineNo, message: `more than one text for ${info.name}` });
+          else props[p] = t.value;
+        } else if (t.kind === "word" && info.enumValues.has(t.value)) {
+          props[info.enumValues.get(t.value)] = t.value;
+        } else if (t.kind === "word" && info.booleans.has(t.value)) {
+          props[t.value] = true;
+        } else if (t.kind === "word" && t.value.startsWith("no-") && info.booleans.has(t.value.slice(3))) {
+          props[t.value.slice(3)] = false;
+        } else if (t.kind === "word" && ANTONYMS[t.value] && info.booleans.has(ANTONYMS[t.value])) {
+          props[ANTONYMS[t.value]] = false;
+        } else if (t.kind === "word" && WORD_PRIMARY.has(info.name) && !(PRIMARY_PROP[info.name] in props)) {
+          props[PRIMARY_PROP[info.name]] = t.value;
+        } else if (t.kind === "word" && t.value.startsWith("#")) {
+          issues.push({ line: lineNo, message: `"${t.value}": a comment must be on its own line, starting with #; to show # as text, quote it` });
+          break;
+        } else {
+          const options = [...info.enumValues.keys(), ...info.booleans];
+          const elsewhere = t.kind === "word" ? belongsElsewhere(info.name, t.value, false) : "";
+          issues.push({
+            line: lineNo,
+            message: (elsewhere ? `${info.name}: ${elsewhere}` : `${info.name}: don't know what "${t.value}" is`) + (options.length ? ` (bare words it accepts: ${options.join(", ")})` : "") + (PRIMARY_PROP[info.name] && !(PRIMARY_PROP[info.name] in props) ? `; quote text like "${t.value}"` : "")
+          });
+        }
+      }
+    } catch (e) {
+      issues.push({ line: lineNo, message: e.message });
+      return;
+    }
+    const id = `${info.name.toLowerCase()}-${++n}`;
+    elements[id] = { type: info.name, props, children: [] };
+    lines[id] = lineNo;
+    while (stack.length && stack[stack.length - 1].indent >= indent) stack.pop();
+    const parent = stack[stack.length - 1];
+    if (parent) {
+      elements[parent.id].children.push(id);
+    } else if (root === null) {
+      root = id;
+    } else {
+      issues.push({ line: lineNo, message: "only one top-level element (the board) is allowed; indent this line" });
+    }
+    stack.push({ indent, id });
+  });
+  if (root === null && !issues.length) issues.push({ line: 1, message: "empty wireframe" });
+  return { spec: root ? { root, elements } : null, issues, lines };
+}
+
+// src/render.ts
+import { readFile } from "node:fs/promises";
+import { createRequire } from "node:module";
+import { renderToSvg } from "@json-render/image/render";
+var fontFile = (name) => createRequire(import.meta.url).resolve(`@fontsource/inter/files/${name}`);
+var fontCache = null;
+function loadFonts() {
+  fontCache ??= Promise.all([
+    readFile(fontFile("inter-latin-400-normal.woff")),
+    readFile(fontFile("inter-latin-600-normal.woff"))
+  ]).then(([regular, semibold]) => [
+    { name: "Inter", data: regular, weight: 400, style: "normal" },
+    { name: "Inter", data: semibold, weight: 600, style: "normal" }
+  ]);
+  return fontCache;
+}
+var SpecError = class extends Error {
+  constructor(issues) {
+    super(`Invalid wireframe spec:
+  - ${issues.join("\n  - ")}`);
+    this.issues = issues;
+  }
+  issues;
+};
+function checkSpec(spec) {
+  upgradeRenamedProps(spec);
+  const issues = [];
+  const result = catalog.validate(spec);
+  if (!result.success) {
+    const err = result.error;
+    const zodIssues = err?.issues ?? [];
+    if (zodIssues.length) {
+      for (const i of zodIssues) issues.push(`${(i.path ?? []).join(".")}: ${i.message}`);
+    } else {
+      issues.push(String(err ?? "catalog validation failed"));
+    }
+  }
+  const root = spec.elements?.[spec.root];
+  if (!root) {
+    issues.push(`root "${spec.root}" is not in elements`);
+    return issues;
+  }
+  if (root.type !== "Board") issues.push(`root must be a Board (got ${root.type})`);
+  for (const [id, el] of Object.entries(spec.elements)) {
+    const def = componentDefinitions[el.type];
+    if (!def) {
+      issues.push(`${id}: ${unknownComponentMessage(el.type, Object.keys(componentDefinitions))}`);
+    } else {
+      const parsed = def.props.safeParse(el.props ?? {});
+      if (!parsed.success) {
+        for (const i of parsed.error.issues) {
+          issues.push(`${id}.props${i.path.length ? "." + i.path.join(".") : ""}: ${i.message}`);
+        }
+      }
+      for (const key of Object.keys(el.props ?? {})) {
+        if (!(key in def.props.shape)) {
+          const elsewhere = belongsElsewhere(el.type, key, true);
+          issues.push(`${id}.props: ${el.type} has no prop "${key}"${elsewhere ? `: ${elsewhere}` : ""}`);
+        }
+      }
+    }
+    for (const child of el.children ?? []) {
+      if (!spec.elements[child]) issues.push(`${id}: child "${child}" does not exist`);
+    }
+    if (el.type === "Screen" && !(root.children ?? []).includes(id)) {
+      issues.push(`${id}: Screen must be a direct child of the Board`);
+    }
+    if (el.type === "Modal" || el.type === "Drawer") {
+      const parent = Object.entries(spec.elements).find(([, p]) => p.children?.includes(id));
+      if (parent && parent[1].type !== "Screen") {
+        issues.push(`${id}: ${el.type} must be a direct child of a Screen (found in ${parent[1].type} "${parent[0]}")`);
+      }
+    }
+    if (el.type === "ListItem") {
+      const p = el.props ?? {};
+      const { leading, trailing } = listItemEnds(p);
+      const conflict = (prop, needs, kind, has) => issues.push(`${id}: ${prop} only shows with ${needs} (this item has ${kind}=${has}); remove one of them`);
+      if (p.leadingIcon && leading !== "icon") conflict("leadingIcon", "leading=icon", "leading", leading);
+      if (p.trailingIcon && trailing !== "icon") conflict("trailingIcon", "trailing=icon", "trailing", trailing);
+      if (p.trailingText && trailing !== "text" && trailing !== "badge") conflict("trailingText", "trailing=text or badge", "trailing", trailing);
+    }
+    if (el.type === "Table") {
+      const { columns, data } = el.props ?? {};
+      if (Array.isArray(columns) && Array.isArray(data)) {
+        const bad = data.map((row, i) => ({ row: i + 1, cells: Array.isArray(row) ? row.length : 1 })).filter((r) => r.cells !== columns.length);
+        if (bad.length) {
+          const cells = (n) => `${n} cell${n === 1 ? "" : "s"}`;
+          const rows = bad.length === 1 ? `data row ${bad[0].row} has ${cells(bad[0].cells)}` : `data rows ${bad.map((r) => `${r.row} (${cells(r.cells)})`).join(", ")} don't match`;
+          const hints = [
+            bad.some((r) => r.cells > columns.length) && `quote cells that contain a comma, e.g. ["$1,200", Paid]`,
+            bad.some((r) => r.cells < columns.length) && `use "" for an empty cell`
+          ].filter(Boolean);
+          issues.push(`${id}: Table has ${columns.length} columns, but ${rows} (${hints.join("; ")})`);
+        }
+      }
+    }
+  }
+  return issues;
+}
+function boardLayout(spec) {
+  const board = spec.elements[spec.root];
+  const p = board.props ?? {};
+  const gap = p.gap ?? BOARD_GAP;
+  const pad = p.padding ?? BOARD_PADDING;
+  const kids = (board.children ?? []).map((id) => spec.elements[id]).filter(Boolean);
+  const boxes = kids.map((el) => {
+    const props = el.props ?? {};
+    if (el.type === "Screen") {
+      const s = screenSize(props);
+      return { type: "Screen", name: String(props.name ?? ""), w: s.width, h: s.height + LABEL_H };
+    }
+    if (el.type === "Note") {
+      const w = props.width ?? NOTE_WIDTH;
+      return { type: "Note", name: String(props.text ?? ""), w, h: LABEL_H + estimateNoteHeight(props.text ?? "", w) };
+    }
+    return null;
+  });
+  const perRow = p.layout === "grid" ? Math.max(1, p.columns ?? 3) : Math.max(1, boxes.length);
+  const items = [];
+  let width = 0;
+  let y = pad + (p.title ? TITLE_H : 0);
+  for (let i = 0; i < boxes.length; i += perRow) {
+    const row = boxes.slice(i, i + perRow);
+    if (i > 0) y += gap;
+    let x = pad;
+    for (const b of row) {
+      if (b) items.push({ type: b.type, name: b.name, x, y, width: b.w, height: b.h });
+      x += (b?.w ?? 0) + gap;
+    }
+    width = Math.max(width, row.reduce((sum, b) => sum + (b?.w ?? 0), 0) + gap * (row.length - 1));
+    y += Math.max(...row.map((b) => b?.h ?? 0));
+  }
+  return { width: Math.ceil(width + pad * 2), height: Math.ceil(y + pad), items };
+}
+function boardSize(spec) {
+  const { width, height } = boardLayout(spec);
+  return { width, height };
+}
+async function renderWireframeSvg(spec, opts = {}) {
+  upgradeRenamedProps(spec);
+  if (!opts.skipValidation) {
+    const issues = checkSpec(spec);
+    if (issues.length) throw new SpecError(issues);
+  }
+  const { width, height } = boardSize(spec);
+  return renderToSvg(spec, {
+    registry: withPalette(paletteFor(spec.elements[spec.root]?.props?.accent)),
+    includeStandard: false,
+    fonts: await loadFonts(),
+    width,
+    height
+  });
+}
+async function renderWireframePng(spec, opts = {}) {
+  const svg = await renderWireframeSvg(spec, opts);
+  const { Resvg } = await import("@resvg/resvg-js");
+  const resvg = new Resvg(svg, { fitTo: { mode: "zoom", value: opts.scale ?? 1 } });
+  return resvg.render().asPng();
+}
+
+// src/compile.ts
+function compileWireframe(source) {
+  const parsed = parseWireframeText(source);
+  const issues = [...parsed.issues];
+  if (parsed.spec) {
+    for (const msg of checkSpec(parsed.spec)) {
+      const m = msg.match(/^([\w-]+)(?:\.props[^:]*)?: (.*)$/);
+      const line = m ? parsed.lines[m[1]] : void 0;
+      const text = m && line ? m[2].startsWith(`${parsed.spec.elements[m[1]].type} `) ? m[2] : `${parsed.spec.elements[m[1]].type}: ${m[2]}` : msg;
+      const readable = text.replace(
+        /(\w+) "([\w-]+)"/g,
+        (all, type, id) => parsed.lines[id] ? `the ${type} on line ${parsed.lines[id]}` : all
+      );
+      issues.push({ line: line ?? 1, message: readable });
+    }
+  }
+  const seen = /* @__PURE__ */ new Set();
+  const unique = issues.filter((i) => {
+    const key = `${i.line}|${i.message.replace(/^\w+: /, "").replace(/(has no prop "[^"]*").*$/, "$1").replace(/ \(.*$/, "")}`;
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+  unique.sort((a, b) => a.line - b.line);
+  return { spec: parsed.spec, issues: unique };
+}
+function formatIssues(issues) {
+  return issues.map((i) => `line ${i.line}: ${i.message}`).join("\n");
+}
+var WireframeError = class extends Error {
+  constructor(issues) {
+    super(`Invalid wireframe:
+${formatIssues(issues)}`);
+    this.issues = issues;
+  }
+  issues;
+};
+async function renderWireframe(source, opts = {}) {
+  const { spec, issues } = compileWireframe(source);
+  if (!spec || issues.length) throw new WireframeError(issues);
+  return opts.format === "png" ? renderWireframePng(spec, { skipValidation: true, scale: opts.scale }) : renderWireframeSvg(spec, { skipValidation: true });
+}
+
+// src/print.ts
+var BARE_WORD = /^[A-Za-z][\w-]*$/;
+var BARE_PROPS = /* @__PURE__ */ new Set(["device", "variant", "direction", "size", "side", "type", "layout"]);
+function unwrap2(t) {
+  let cur = t;
+  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
+  return cur;
+}
+function fmt(v) {
+  if (typeof v === "string") return BARE_WORD.test(v) && !["true", "false", "null"].includes(v) ? v : JSON.stringify(v);
+  if (typeof v === "number" || typeof v === "boolean" || v === null) return String(v);
+  if (Array.isArray(v)) return `[${v.map(fmt).join(", ")}]`;
+  if (typeof v === "object") {
+    return `{${Object.entries(v).map(([k, x]) => `${k}=${fmt(x)}`).join(" ")}}`;
+  }
+  return JSON.stringify(v);
+}
+function bareEnums(type) {
+  const shape = componentDefinitions[type].props.shape;
+  const seen = /* @__PURE__ */ new Map();
+  const dup = /* @__PURE__ */ new Set();
+  for (const [prop, s] of Object.entries(shape)) {
+    const inner = unwrap2(s);
+    if (inner?.def?.type === "enum") {
+      for (const v of inner.options) seen.has(v) ? dup.add(v) : seen.set(v, prop);
+    }
+  }
+  for (const d of dup) seen.delete(d);
+  return seen;
+}
+function booleans(type) {
+  const shape = componentDefinitions[type].props.shape;
+  return new Set(Object.entries(shape).filter(([, s]) => unwrap2(s)?.def?.type === "boolean").map(([k]) => k));
+}
+function printWireframeText(spec, indentUnit = "  ") {
+  const out = [];
+  const walk = (id, depth) => {
+    const el = spec.elements[id];
+    const props = { ...el.props ?? {} };
+    const parts = [el.type.toLowerCase()];
+    const enums = bareEnums(el.type);
+    const bools = booleans(el.type);
+    const primary = PRIMARY_PROP[el.type];
+    for (const [k, v] of Object.entries(props)) {
+      if (typeof v === "string" && BARE_PROPS.has(k) && enums.get(v) === k) {
+        parts.push(v);
+        delete props[k];
+      }
+    }
+    if (primary && typeof props[primary] === "string") {
+      parts.push(JSON.stringify(props[primary]));
+      delete props[primary];
+    }
+    for (const [k, v] of Object.entries(props)) {
+      if (v === void 0 || v === null) continue;
+      if (v === true && bools.has(k)) parts.push(k);
+      else parts.push(`${k}=${fmt(v)}`);
+    }
+    out.push(indentUnit.repeat(depth) + parts.join(" "));
+    for (const c of el.children ?? []) walk(c, depth + 1);
+  };
+  walk(spec.root, 0);
+  return out.join("\n") + "\n";
+}
+
+// src/prompt-example.ts
+var exampleSpec = {
+  root: "board",
+  elements: {
+    board: { type: "Board", props: { title: "Recipe app" }, children: ["browse", "detail", "note"] },
+    browse: { type: "Screen", props: { name: "Browse", device: "phone" }, children: ["b-nav", "b-search", "b-tabs", "b-grid", "b-tabbar"] },
+    "b-nav": { type: "NavBar", props: { title: "Recipes", leading: "menu", actions: ["bell"] }, children: [] },
+    "b-search": { type: "Input", props: { type: "search", placeholder: "Search recipes" }, children: [] },
+    "b-tabs": { type: "Tabs", props: { items: ["All", "Quick", "Vegetarian"], active: 0 }, children: [] },
+    "b-grid": { type: "Grid", props: { columns: 2, gap: 12 }, children: ["card-1", "card-2"] },
+    "card-1": { type: "Card", props: { padding: 10 }, children: ["c1-img", "c1-title", "c1-meta"] },
+    "c1-img": { type: "Image", props: { height: 110 }, children: [] },
+    "c1-title": { type: "Text", props: { text: "Tomato soup", bold: true }, children: [] },
+    "c1-meta": { type: "Text", props: { text: "25 min", size: "sm", muted: true }, children: [] },
+    "card-2": { type: "Card", props: { padding: 10 }, children: ["c2-img", "c2-title"] },
+    "c2-img": { type: "Image", props: { height: 110 }, children: [] },
+    "c2-title": { type: "Text", props: { lines: 2 }, children: [] },
+    "b-tabbar": {
+      type: "TabBar",
+      props: { items: [{ label: "Browse", icon: "book-open" }, { label: "Saved", icon: "heart" }, { label: "Profile", icon: "user" }], active: 0 },
+      children: []
+    },
+    detail: { type: "Screen", props: { name: "Recipe", device: "phone" }, children: ["d-nav", "d-img", "d-title", "d-tags", "d-body", "d-cook", "d-sheet"] },
+    "d-nav": { type: "NavBar", props: { leading: "back", actions: ["share", "more-horizontal"] }, children: [] },
+    "d-img": { type: "Image", props: { height: 200, label: "Photo" }, children: [] },
+    "d-title": { type: "Heading", props: { text: "Tomato soup", level: 1 }, children: [] },
+    "d-tags": { type: "Stack", props: { direction: "row", gap: 8 }, children: ["tag-1", "tag-2"] },
+    "tag-1": { type: "Badge", props: { label: "25 min", variant: "outline" }, children: [] },
+    "tag-2": { type: "Badge", props: { label: "Vegan", variant: "outline" }, children: [] },
+    "d-body": { type: "Text", props: { lines: 4 }, children: [] },
+    "d-cook": { type: "Button", props: { label: "Start cooking", variant: "primary", fullWidth: true }, children: [] },
+    "d-sheet": { type: "Drawer", props: { side: "bottom", title: "Options", size: 260 }, children: ["opt-1", "opt-2", "opt-3"] },
+    "opt-1": { type: "Toggle", props: { label: "Metric units", on: true }, children: [] },
+    "opt-2": { type: "Select", props: { label: "Servings", value: "4" }, children: [] },
+    "opt-3": { type: "Checkbox", props: { label: "Add to shopping list" }, children: [] },
+    note: { type: "Note", props: { text: "Detail screen shown with the options sheet open." }, children: [] }
+  }
+};
+
+// src/prompt.ts
+function unwrap3(t) {
+  let cur = t;
+  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
+  return cur;
+}
+function describeType(t) {
+  const s = unwrap3(t);
+  switch (s?.def?.type) {
+    case "string":
+      return "string";
+    case "number":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "enum":
+      return s.options.map((o2) => `"${o2}"`).join(" | ");
+    case "literal":
+      return s.def.values.map((v) => JSON.stringify(v)).join(" | ");
+    case "union":
+      return s.def.options.map(describeType).join(" | ");
+    case "array":
+      return `array of ${describeType(s.def.element)}`;
+    case "object":
+      return `{ ${Object.entries(s.shape).map(([k, v]) => `${k}: ${describeType(v)}`).join(", ")} }`;
+    default:
+      return "any";
+  }
+}
+function componentDocs() {
+  return Object.entries(componentDefinitions).map(([name, def]) => ({
+    name,
+    description: def.description,
+    props: Object.entries(def.props.shape).map(([prop, schema]) => ({
+      name: prop,
+      type: describeType(schema),
+      required: !["optional", "nullable"].includes(schema.def?.type),
+      main: PRIMARY_PROP[name] === prop,
+      description: schema.description ?? unwrap3(schema)?.description
+    }))
+  }));
+}
+function componentReference() {
+  const lines = [];
+  for (const c of componentDocs()) {
+    lines.push(`### ${c.name}`, c.description);
+    for (const p of c.props) {
+      lines.push(`- ${p.name}${p.required ? " (required)" : ""}: ${p.type}${p.main ? " (main text)" : ""}${p.description ? ` \u2014 ${p.description}` : ""}`);
+    }
+    lines.push("");
+  }
+  return lines.join("\n");
+}
+var RULES = `## Rules
+1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them.
+2. Each Screen is one view of the product. Use several Screens to show several views or states.
+3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.
+4. NavBar is pinned to the top of its Screen and TabBar to the bottom.
+5. Modal and Drawer are overlays. They must be direct children of a Screen.
+6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.
+7. Only use the components and props listed below. All props are optional unless marked required.
+8. Wireframes are grayscale. The only UI colors: Board accent (one color for primary buttons, checked controls, toggles, active tabs and ghost buttons), Badge tone (success, warning, danger) and Input error. Only add an accent if the request asks for color or a brand.`;
+var TEXT_FORMAT = `## Output format: wireframe text
+One element per line. Indent children two spaces under their parent. The first line is the board.
+
+A line is the component name in lowercase, followed by arguments separated by spaces:
+- "a quoted string" sets the component's main text prop (marked "main text" below)
+- a bare word that is one of the component's option values sets that option: phone, desktop, primary, ghost, row, sm, left, bottom, password, \u2026
+- a bare prop name sets that component's yes/no prop to true, only on components that have it (see each component's props below): checked (checkbox, radio), fullWidth (button), muted (text), grow (stack, card, input, list). \`off\` and \`unchecked\` set on/checked to false
+- key=value sets any prop. Values: "string", number, true/false, bare word, [list, of, values], {key=value key=value}
+
+Comments: a line that starts with # is a comment. A comment must be on its own line, never after an element on the same line. Anywhere else, # is ordinary text: [#1001, #1002], "Order #12345", accent=#1a73e8.
+
+Lists: items are separated by commas, and an item can contain spaces without quotes: [All notes, Pinned, Shared]. To put a comma inside an item, quote the item: ["$1,200", "Smith, J"]. Inside quotes, write \\" for a quote character. Numbers in a list of text are fine: [2023, 2024].
+
+If a bare word could mean more than one prop, write it as key=value.`;
+var EXAMPLE_REQUEST = "Two phone screens for a recipe app: a browse screen with search, category tabs, a grid of recipe cards and a tab bar; and a recipe detail screen with its options sheet open.";
+function wireframePrompt() {
+  return [
+    "You write low-fidelity UI wireframes as specs that a renderer turns into images.",
+    "Reply with only the spec in a single code block, with no explanation.",
+    "",
+    TEXT_FORMAT,
+    "",
+    RULES,
+    "",
+    "## Example",
+    `Request: ${EXAMPLE_REQUEST}`,
+    "",
+    "```tsquare",
+    printWireframeText(exampleSpec).trimEnd(),
+    "```",
+    "",
+    "## Components",
+    "",
+    componentReference()
+  ].join("\n");
+}
+function repairPrompt(issues) {
+  return `The wireframe has these problems:
+${issues}
+
+Reply with the corrected wireframe in a single code block.`;
+}
+
+export {
+  theme,
+  DEVICES,
+  ACCENTS,
+  iconNames,
+  componentDefinitions,
+  catalog,
+  registry,
+  PRIMARY_PROP,
+  bareWords,
+  parseWireframeText,
+  checkSpec,
+  boardLayout,
+  boardSize,
+  renderWireframeSvg,
+  renderWireframePng,
+  compileWireframe,
+  formatIssues,
+  WireframeError,
+  renderWireframe,
+  printWireframeText,
+  componentDocs,
+  wireframePrompt,
+  repairPrompt
+};