tsquare 0.2.0 → 0.3.0

package/dist/chunks/{chunk-L6GTIZQH.js → chunk-46MGJLGB.js}

@@ -368,7 +368,8 @@ var componentDefinitions = {
       label: o(z.string()),
       variant: o(z.enum(["primary", "secondary", "ghost"])),
       size: o(z.enum(["sm", "md", "lg"])),
-      icon: o(iconName),
+      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: [],
@@ -461,14 +462,14 @@ var componentDefinitions = {
       title: o(z.string()),
       subtitle: o(z.string()),
       leading: o(z.enum(["none", "icon", "avatar", "image", "checkbox"])),
-      icon: o(iconName),
+      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()),
-      trailingIcon: o(iconName)
+      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", leading: "icon", icon: "user", trailing: "chevron" }
+    example: { title: "Account", subtitle: "Email, password", leadingIcon: "user", trailing: "chevron" }
   },
   Table: {
     props: z.object({
@@ -507,6 +508,29 @@ var componentDefinitions = {
 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";
@@ -978,8 +1002,9 @@ function Button({ element, dir, aligned, colors: c = GRAY }) {
         ...p.fullWidth ? { alignSelf: "stretch" } : hug(dir, aligned)
       },
       children: [
-        p.icon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.icon, size: h < 36 ? 16 : 18, color: fg }) : null,
-        p.label ? /* @__PURE__ */ jsx(Box, { children: p.label }) : null
+        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
       ]
     }
   );
@@ -1182,10 +1207,11 @@ function List({ element, children, dir, stretch }) {
 }
 function ListItem({ element, colors }) {
   const p = element.props;
+  const ends = listItemEnds(p);
   const leading = (() => {
-    switch (p.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.icon, size: 20 }) });
+        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":
@@ -1197,7 +1223,7 @@ function ListItem({ element, colors }) {
     }
   })();
   const trailing = (() => {
-    switch (p.trailing) {
+    switch (ends.trailing) {
       case "chevron":
         return /* @__PURE__ */ jsx(IconGlyph, { name: "chevron-right", size: 20, color: theme.muted });
       case "toggle":
@@ -1346,145 +1372,6 @@ var registry = {
   Drawer
 };
 
-// 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) {
-  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)) issues.push(`${id}.props: ${el.type} has no prop "${key}"`);
-      }
-    }
-    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 === "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 boardSize(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 { w: s.width, h: s.height + LABEL_H };
-    }
-    if (el.type === "Note") {
-      const w = props.width ?? NOTE_WIDTH;
-      return { w, h: LABEL_H + estimateNoteHeight(props.text ?? "", w) };
-    }
-    return { w: 0, h: 0 };
-  });
-  const perRow = p.layout === "grid" ? Math.max(1, p.columns ?? 3) : Math.max(1, boxes.length);
-  let width = 0;
-  let height = 0;
-  for (let i = 0; i < boxes.length; i += perRow) {
-    const row = boxes.slice(i, i + perRow);
-    width = Math.max(width, row.reduce((sum, b) => sum + b.w, 0) + gap * (row.length - 1));
-    height += Math.max(...row.map((b) => b.h)) + (i > 0 ? gap : 0);
-  }
-  return {
-    width: Math.ceil(width + pad * 2),
-    height: Math.ceil(height + pad * 2 + (p.title ? TITLE_H : 0))
-  };
-}
-async function renderWireframeSvg(spec, opts = {}) {
-  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/text.ts
 var PRIMARY_PROP = {
   Board: "title",
@@ -1548,6 +1435,34 @@ for (const [name, def] of Object.entries(componentDefinitions)) {
   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" };
@@ -1560,7 +1475,6 @@ function tokenize(src) {
       i++;
       continue;
     }
-    if (c === "#" && !(i > 0 && "=:".includes(src[i - 1]))) break;
     if (c === '"' || c === "'") {
       let j2 = i + 1, s = "";
       while (j2 < src.length && src[j2] !== c) {
@@ -1581,8 +1495,8 @@ function tokenize(src) {
       i++;
       continue;
     }
-    let j = c === "#" ? i + 1 : i;
-    while (j < src.length && !` 	,=[]{}#":`.includes(src[j])) j++;
+    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;
@@ -1677,17 +1591,29 @@ function parseWireframeText(source) {
   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()]) });
@@ -1703,9 +1629,10 @@ function parseWireframeText(source) {
         if (t.kind !== "sym" && (c.isSym("=", 1) || c.isSym(":", 1))) {
           c.next();
           c.next();
-          const key = t.value;
+          const key = RENAMED_PROPS[info.name]?.[t.value] ?? t.value;
           if (!(key in info.props)) {
-            issues.push({ line: lineNo, message: `${info.name} has no prop "${key}" (its props: ${Object.keys(info.props).join(", ")})` });
+            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;
@@ -1726,11 +1653,15 @@ function parseWireframeText(source) {
           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: `${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}"` : "")
+            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}"` : "")
           });
         }
       }
@@ -1756,6 +1687,166 @@ function parseWireframeText(source) {
   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);
@@ -1774,7 +1865,7 @@ function compileWireframe(source) {
   }
   const seen = /* @__PURE__ */ new Set();
   const unique = issues.filter((i) => {
-    const key = `${i.line}|${i.message.replace(/^\w+: /, "").replace(/ \(.*$/, "")}`;
+    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;
@@ -1971,9 +2062,10 @@ One element per line. Indent children two spaces under their parent. The first l
 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 a boolean prop to true: checked, fullWidth, grow, muted. \`off\` and \`unchecked\` set on/checked to false
+- 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}
-- \`#\` after a space starts a comment that runs to the end of the line
+
+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].
 
@@ -2010,14 +2102,19 @@ 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,
-  parseWireframeText,
   compileWireframe,
   formatIssues,
   WireframeError,

package/dist/cli.js

@@ -6,7 +6,7 @@ import {
   printWireframeText,
   renderWireframe,
   wireframePrompt
-} from "./chunks/chunk-L6GTIZQH.js";
+} from "./chunks/chunk-46MGJLGB.js";
 
 // src/cli.ts
 import { readFile, writeFile } from "node:fs/promises";

package/dist/index.d.ts

@@ -2,7 +2,8 @@
 export { renderWireframe, compileWireframe, formatIssues, WireframeError, type CompileResult } from "./compile.js";
 export { wireframePrompt, repairPrompt } from "./prompt.js";
 export { printWireframeText as formatWireframe } from "./print.js";
-export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, type RenderWireframeOptions } from "./render.js";
+export { encodeWireframe, decodeWireframe, MAX_SHARED_TEXT } from "./share.js";
+export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, boardLayout, type BoardItem, type RenderWireframeOptions } from "./render.js";
 export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js";
 export { catalog, componentDefinitions } from "./catalog.js";
 export { registry } from "./components.js";

package/dist/index.js

@@ -1,6 +1,7 @@
 import {
   DEVICES,
   WireframeError,
+  boardLayout,
   boardSize,
   catalog,
   checkSpec,
@@ -16,15 +17,30 @@ import {
   repairPrompt,
   theme,
   wireframePrompt
-} from "./chunks/chunk-L6GTIZQH.js";
+} from "./chunks/chunk-46MGJLGB.js";
+
+// src/share.ts
+import { deflateRawSync, inflateRawSync } from "node:zlib";
+var MAX_SHARED_TEXT = 64e3;
+function encodeWireframe(text) {
+  return "z" + deflateRawSync(Buffer.from(text, "utf8"), { level: 9 }).toString("base64url");
+}
+function decodeWireframe(data) {
+  if (!data.startsWith("z")) throw new Error(`unknown encoding "${data.slice(0, 1)}" (expected a "z" prefix)`);
+  return inflateRawSync(Buffer.from(data.slice(1), "base64url"), { maxOutputLength: MAX_SHARED_TEXT }).toString("utf8");
+}
 export {
   DEVICES,
+  MAX_SHARED_TEXT,
   WireframeError,
+  boardLayout,
   boardSize,
   catalog,
   checkSpec,
   compileWireframe,
   componentDefinitions,
+  decodeWireframe,
+  encodeWireframe,
   formatIssues,
   printWireframeText as formatWireframe,
   parseWireframeText,

package/dist/playground/index.d.ts

@@ -8,16 +8,27 @@
  * `createPlaygroundHandler`:
  *
  *   GET  /                   the page
+ *   GET  /playground.js      the page's script (CodeMirror editor and UI), bundled by the build
  *   GET  /mark.png           the logo mark (tab icon, header)
+ *   GET  /api/language       what the editor needs to highlight and autocomplete
  *   GET  /api/reference      components, props and rendered examples
  *   GET  /api/examples       the example wireframes
  *   GET  /api/prompt         the model prompt
- *   POST /api/render         wireframe text → { issues, svg? }
+ *   POST /api/render         wireframe text → { issues, svg?, width?, height?, items? } (items: where each screen sits)
  *   POST /api/png?scale=2    wireframe text → image/png
  */
 import { type IncomingMessage, type ServerResponse } from "node:http";
 /** Problems with the reference examples: a component without an example or group, or an example that doesn't compile. */
 export declare function checkReferenceExamples(): string[];
+/** esbuild options for the browser bundle; shared with scripts/build.ts. */
+export declare const PLAYGROUND_BUNDLE: {
+    bundle: boolean;
+    format: "esm";
+    platform: "browser";
+    target: string;
+    minify: boolean;
+    legalComments: "eof";
+};
 /**
  * Handles a playground request. Resolves to false when the path isn't a
  * playground route, so a host server can serve its own routes around it.