tsquare 0.2.0 → 0.3.1

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

@@ -139,8 +139,25 @@ function iconNode(name) {
   return table[pascal(name)];
 }
 var isIcon = (name) => iconNode(name) !== void 0;
-function suggestIcons(name, limit = 3) {
+var GUESSES = {
+  call: ["phone"],
+  compose: ["square-pen", "pencil"],
+  person: ["user"],
+  bag: ["shopping-bag"],
+  notification: ["bell"],
+  notifications: ["bell"],
+  profile: ["user", "circle-user"],
+  envelope: ["mail"],
+  close: ["x"]
+};
+var DIRECTIONS = ["right", "left", "down", "up"];
+var directionRank = (n) => {
+  const i = DIRECTIONS.indexOf(n.split("-").pop());
+  return i < 0 ? DIRECTIONS.length : i;
+};
+function suggestIcons(name, limit = 4) {
   const q = name.toLowerCase().replace(/[_ ]/g, "-");
+  const guessed = GUESSES[q] ?? [];
   const words = q.split("-").filter((w) => w.length > 2);
   const maxEdits = Math.max(1, Math.floor(q.length / 3));
   const scored = [];
@@ -152,7 +169,8 @@ function suggestIcons(name, limit = 3) {
     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);
+  const close = scored.sort((a, b) => a[1] - b[1] || directionRank(a[0]) - directionRank(b[0]) || a[0].localeCompare(b[0])).map(([n]) => n);
+  return [.../* @__PURE__ */ new Set([...guessed, ...close])].slice(0, limit);
 }
 function unknownIconMessage(name) {
   const close = suggestIcons(name);
@@ -368,7 +386,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 +480,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 +526,12 @@ 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)
+  };
+}
 
 // src/components.tsx
 import React, { Children, cloneElement, isValidElement } from "react";
@@ -978,8 +1003,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 +1208,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 +1224,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 +1373,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 +1436,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 +1476,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 +1496,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 +1592,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()]) });
@@ -1705,7 +1632,8 @@ function parseWireframeText(source) {
           c.next();
           const key = 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 +1654,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,9 +1688,296 @@ function parseWireframeText(source) {
   return { spec: root ? { root, elements } : null, issues, lines };
 }
 
+// src/upgrade.ts
+var RENAMED_PROPS = {
+  Button: { icon: "leadingIcon" },
+  ListItem: { icon: "leadingIcon" }
+};
+var RENAMED_BY_WORD = new Map(Object.entries(RENAMED_PROPS).map(([type, renames]) => [type.toLowerCase(), renames]));
+function upgradeWireframe(text, options = {}) {
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  const out = [];
+  for (const line of lines) {
+    const trimmed = line.trim();
+    const component = trimmed.match(/^([A-Za-z][\w-]*)/)?.[1];
+    if (!component || trimmed.startsWith("```")) {
+      out.push(line);
+      continue;
+    }
+    const tokens = scanLine(line, component.length + (line.length - line.trimStart().length));
+    let upgraded = line;
+    let comment = "";
+    if (options.fromLink) {
+      const hash = tokens.find((t) => t.kind === "word" && t.depth === 0 && upgraded[t.start] === "#" && !t.afterEquals);
+      if (hash && !fillsMainText(component, tokens, hash)) {
+        comment = upgraded.slice(hash.start).trimEnd();
+        upgraded = upgraded.slice(0, hash.start).trimEnd();
+      }
+    }
+    const renames = RENAMED_BY_WORD.get(component.toLowerCase().replace(/[-_]/g, ""));
+    if (renames) {
+      for (const t of [...tokens].reverse()) {
+        if (t.kind === "key" && t.depth === 0 && t.start < upgraded.length && renames[t.text]) {
+          upgraded = upgraded.slice(0, t.start) + renames[t.text] + upgraded.slice(t.start + t.text.length);
+        }
+      }
+    }
+    if (comment) out.push(line.slice(0, line.length - line.trimStart().length) + comment);
+    out.push(upgraded);
+  }
+  return out.join("\n");
+}
+function upgradeSpec(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;
+}
+var PLAIN_WORD_MAIN_TEXT = ["avatar", "icon"];
+function fillsMainText(component, tokens, hash) {
+  if (!PLAIN_WORD_MAIN_TEXT.includes(component.toLowerCase())) return false;
+  for (const t of tokens) {
+    if (t === hash) return true;
+    if (t.depth > 0 || t.afterEquals || t.kind === "key") continue;
+    return false;
+  }
+  return false;
+}
+function scanLine(line, from) {
+  const tokens = [];
+  let depth = 0;
+  let afterEquals = false;
+  let i = from;
+  while (i < line.length) {
+    const c = line[i];
+    if (c === " " || c === "	") {
+      i++;
+      continue;
+    }
+    if (c === '"' || c === "'") {
+      let j2 = i + 1;
+      while (j2 < line.length && line[j2] !== c) j2 += line[j2] === "\\" ? 2 : 1;
+      tokens.push({ kind: "string", text: line.slice(i, j2 + 1), start: i, depth, afterEquals });
+      afterEquals = false;
+      i = j2 + 1;
+      continue;
+    }
+    if (c === "[" || c === "{") {
+      depth++;
+      afterEquals = false;
+      i++;
+      continue;
+    }
+    if (c === "]" || c === "}") {
+      depth = Math.max(0, depth - 1);
+      afterEquals = false;
+      i++;
+      continue;
+    }
+    if (c === ",") {
+      afterEquals = false;
+      i++;
+      continue;
+    }
+    if (c === "=" || c === ":") {
+      afterEquals = true;
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < line.length && !` 	,=[]{}":`.includes(line[j])) j++;
+    const text = line.slice(i, j);
+    let k = j;
+    while (line[k] === " " || line[k] === "	") k++;
+    const isKey = !afterEquals && (line[k] === "=" || line[k] === ":");
+    tokens.push({ kind: isKey ? "key" : "word", text, start: i, depth, afterEquals });
+    afterEquals = false;
+    i = j;
+  }
+  return tokens;
+}
+
+// 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 listItemKindHint(el, path) {
+  const prop = path[0];
+  if (el.type !== "ListItem" || path.length !== 1 || prop !== "leadingIcon" && prop !== "trailingIcon") return void 0;
+  const side = prop === "leadingIcon" ? "leading" : "trailing";
+  const value = String(el.props?.[prop]);
+  let schema = componentDefinitions.ListItem.props.shape[side];
+  while (schema && ["optional", "nullable", "default"].includes(schema.def?.type)) schema = schema.def.innerType;
+  const kinds = schema?.options ?? [];
+  if (value === "icon" || !kinds.includes(value)) return void 0;
+  return `${value} is a ${side} kind, not an icon name: write ${side}=${value} instead of ${prop}=${value}`;
+}
+function checkSpec(spec) {
+  upgradeSpec(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(".") : ""}: ${listItemKindHint(el, i.path) ?? 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 = {}) {
+  upgradeSpec(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 parsed = parseWireframeText(upgradeWireframe(source));
   const issues = [...parsed.issues];
   if (parsed.spec) {
     for (const msg of checkSpec(parsed.spec)) {
@@ -1774,7 +1993,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 +2190,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 +2230,22 @@ Reply with the corrected wireframe in a single code block.`;
 export {
   theme,
   DEVICES,
+  ACCENTS,
+  iconNames,
   componentDefinitions,
   catalog,
   registry,
+  PRIMARY_PROP,
+  bareWords,
+  parseWireframeText,
+  RENAMED_PROPS,
+  upgradeWireframe,
+  upgradeSpec,
   checkSpec,
+  boardLayout,
   boardSize,
   renderWireframeSvg,
   renderWireframePng,
-  parseWireframeText,
   compileWireframe,
   formatIssues,
   WireframeError,