tsquare 0.7.0 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 0.8.0
+
+### Brand logos
+
+```tsquare
+    button secondary "Continue with Google" leadingIcon=brand-google fullWidth
+    listitem "GitHub" subtitle="Connected" leadingIcon=brand-github trailing=toggle
+```
+
+- **Seven brand logos**, usable anywhere an icon is: `brand-apple`, `brand-facebook`, `brand-github`, `brand-google`, `brand-notion`, `brand-stripe`, `brand-x`. They're for sign-in buttons and integrations, and are drawn in the wireframe's gray at the same visual size as Lucide icons.
+- **The `brand-` prefix keeps them apart from Lucide:** `apple` is still Lucide's fruit and `x` its close icon. A brand name without the prefix is an error that suggests it (`github` → `brand-github`, `twitter` → `brand-x`), and an unknown `brand-…` name lists the logos there are.
+- The logos come from [Simple Icons](https://simpleicons.org) 16.34.0 (CC0), a new dependency pinned exactly like Lucide, since a release can change or remove logos. Simple Icons has no Slack, LinkedIn or Microsoft logo, so tsquare doesn't either.
+- **Prompt:** rule 11 names the logos and the `apple`/`x` trap. The skill and the docs (Icons page, Icon component) are regenerated.
+
+### Flow wording
+
+- **"Board level" is gone.** The Flow description, prompt rule 10, the docs and the error for a flow written inside a screen now say what to do: write each flow on its own line after the screens, indented like a screen (not inside one). The error used to read "flow lines go at the board level, after the screens (indented like a screen)". A clarification only: what's valid hasn't changed.
+
+## 0.7.1
+
+- **`share_wireframe` returns only the links asked for.** A new `links` option takes the kinds from the playground's Copy link menu, with the same names: `share`, `svg`, `png`, `markdown`, `html`. The default is `["svg", "share"]`, an image link and the link to edit it; before, every call returned four links. Each link carries the whole wireframe (about 1,200 characters for a three-screen board), and the model has to write out every link it passes on, exactly, so fewer links means less to write and fewer chances to break one. A wireframe too long for an image link gets its share link instead, with a note saying why. New exports: `LINK_KINDS`, `DEFAULT_LINKS`, `LinkKind`.
+
+- **Invalid values name the prop and the value.** A wrong `key=value` used to come back as Zod's bare message, which didn't say which prop on the line was wrong: `Input: Invalid option: expected one of "text"|"password"|…`. Now: `Input: type=otp isn't an option; use one of text, password, search, email, date, code`. Likewise `level=4 isn't an option; use one of 1, 2, 3`, `height=tall should be a number`, `columns=Name should be a list like [a, b]`, `range=[1] needs at least 2 items`, `columns=0 is too small (at least 1)`. This matters most in the MCP repair loop, where the model fixes what the messages say.
+- **Fix: the HTML link escapes `&`** (and `<`, `>`) in the board title, in both the playground's Copy link → HTML and the MCP share tool, which now share one helper. A title like `Tom &amp; Jerry` used to show as "Tom & Jerry".
+- **One wrong value is one error.** A check that uses a prop's value is skipped when that value is already invalid: `input type=otp digits=6` no longer also says "digits only applies to type=code". Checks that only notice a prop is set still run (`leadingIcon` on an avatar item is wrong whatever the icon's name).
+
 ## 0.7.0
 
 ### MCP tools

package/README.md

@@ -95,7 +95,7 @@ Sticky notes beside the wireframe have their own colors, since they're annotatio
 |---|---|
 | Canvas | board, screen (`phone` 390×844, `tablet` 820×1180, `desktop` 1280×800, `custom`), note |
 | Layout | stack, grid, card, divider, spacer |
-| Content | heading, text (`lines=3` draws placeholder lines), image (X-box placeholder), icon (any [Lucide](https://lucide.dev/icons) name, see [Icons](docs/icons.md)), avatar, badge |
+| Content | heading, text (`lines=3` draws placeholder lines), image (X-box placeholder), icon (any [Lucide](https://lucide.dev/icons) name or a brand logo such as `brand-google`, see [Icons](docs/icons.md)), avatar, badge |
 | Controls | button, input (`multiline=4` for a textarea), checkbox, radio, toggle, select |
 | Navigation & data | navbar, tabbar, tabs, list, listitem, table |
 | Overlays | modal, drawer (`left`, `right`, `bottom` sheet) |
@@ -158,4 +158,4 @@ How it was measured, the tasks, every model output, and the scripts: [`eval/`](e
 
 ## License
 
-MIT. The Inter font comes from the `@fontsource/inter` dependency, under the SIL Open Font License 1.1. Icons are from [Lucide](https://lucide.dev), under the ISC license.
+MIT. The Inter font comes from the `@fontsource/inter` dependency, under the SIL Open Font License 1.1. Icons are from [Lucide](https://lucide.dev), under the ISC license. Brand logos are from [Simple Icons](https://simpleicons.org) (CC0); the logos themselves are trademarks of their owners.

package/dist/chunks/{chunk-Z4RBFAOM.js → chunk-W3OU5IS6.js}

@@ -131,14 +131,20 @@ function paletteFor(accent) {
 
 // src/icons.ts
 import { icons } from "lucide";
+import { siApple, siFacebook, siGithub, siGoogle, siNotion, siStripe, siX } from "simple-icons";
+var BRAND_ICONS = Object.fromEntries(
+  [siApple, siFacebook, siGithub, siGoogle, siNotion, siStripe, siX].map((i) => [`brand-${i.slug}`, { title: i.title, path: i.path }])
+);
+var brandIconNames = Object.keys(BRAND_ICONS).sort();
+var brandPath = (name) => BRAND_ICONS[name.toLowerCase()]?.path;
 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);
+var iconNames = [...Object.keys(table).map(kebab), ...brandIconNames];
 function iconNode(name) {
   return table[pascal(name)];
 }
-var isIcon = (name) => iconNode(name) !== void 0;
+var isIcon = (name) => iconNode(name) !== void 0 || brandPath(name) !== void 0;
 var GUESSES = {
   call: ["phone"],
   compose: ["square-pen", "pencil"],
@@ -148,7 +154,8 @@ var GUESSES = {
   notifications: ["bell"],
   profile: ["user", "circle-user"],
   envelope: ["mail"],
-  close: ["x"]
+  close: ["x"],
+  twitter: ["brand-x"]
 };
 var DIRECTIONS = ["right", "left", "down", "up"];
 var directionRank = (n) => {
@@ -157,7 +164,7 @@ var directionRank = (n) => {
 };
 function suggestIcons(name, limit = 4) {
   const q = name.toLowerCase().replace(/[_ ]/g, "-");
-  const guessed = GUESSES[q] ?? [];
+  const guessed = [...BRAND_ICONS[`brand-${q}`] ? [`brand-${q}`] : [], ...GUESSES[q] ?? []];
   const words = q.split("-").filter((w) => w.length > 2);
   const maxEdits = Math.max(1, Math.floor(q.length / 3));
   const scored = [];
@@ -173,6 +180,7 @@ function suggestIcons(name, limit = 4) {
   return [.../* @__PURE__ */ new Set([...guessed, ...close])].slice(0, limit);
 }
 function unknownIconMessage(name) {
+  if (/^brand-/i.test(name)) return `unknown icon "${name}"; the brand logos are ${brandIconNames.join(", ")}`;
   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)`;
 }
@@ -297,7 +305,7 @@ var componentDefinitions = {
       )
     }),
     slots: [],
-    description: 'An arrow between two elements or screens, named with #id. Written at the board level after the screens: flow signin -> home "Tap Sign in".',
+    description: 'An arrow between two elements or screens, named with #id. Write each flow on its own line after the screens, indented like a screen (not inside one): flow signin -> home "Tap Sign in".',
     example: { from: "signin", to: "home", label: "Tap Sign in" }
   },
   // ── Layout ────────────────────────────────────────────────────────────
@@ -427,7 +435,7 @@ var componentDefinitions = {
       size: o(z.number())
     }),
     slots: [],
-    description: "Line icon from Lucide.",
+    description: "Line icon from Lucide, or a brand logo (brand-google, brand-apple, \u2026).",
     example: { name: "search", size: 20 }
   },
   Avatar: {
@@ -735,6 +743,9 @@ function hug(dir, aligned = false) {
   return dir === "row" || aligned ? {} : { alignSelf: "flex-start" };
 }
 function IconGlyph({ name, size = 20, color = theme.ink, strokeWidth = 2 }) {
+  const brand = name ? brandPath(name) : void 0;
+  if (brand)
+    return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "-2 -2 28 28", fill: color, style: { flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { d: brand }) });
   const node = name ? iconNode(name) : null;
   return /* @__PURE__ */ jsx(
     "svg",
@@ -2684,6 +2695,38 @@ function listItemKindHint(el, path) {
   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 written(v) {
+  if (typeof v === "string") return /^[^\s"[\]{}=,]+$/.test(v) ? v : JSON.stringify(v);
+  if (Array.isArray(v)) return `[${v.map(written).join(", ")}]`;
+  return JSON.stringify(v) ?? String(v);
+}
+function propIssueMessage(props, issue) {
+  const path = issue.path ?? [];
+  if (!path.length || issue.code === "custom") return issue.message;
+  const key = path.map(String).join(".");
+  const value = path.reduce((v, k) => v == null ? v : v[k], props);
+  const given = `${key}=${written(value)}`;
+  switch (issue.code) {
+    case "invalid_value":
+      return `${given} isn't an option; use one of ${(issue.values ?? []).map(written).join(", ")}`;
+    case "invalid_union": {
+      const options = (issue.errors ?? []).flat().flatMap((e) => e.code === "invalid_value" ? e.values : []);
+      if (options.length) return `${given} isn't an option; use one of ${options.map(written).join(", ")}`;
+      return `${given} isn't a valid value`;
+    }
+    case "invalid_type":
+      return `${given} should be ${issue.expected === "array" ? "a list like [a, b]" : `a ${issue.expected}`}`;
+    case "too_small":
+    case "too_big": {
+      const [bound, n] = issue.code === "too_small" ? ["at least", issue.minimum] : ["at most", issue.maximum];
+      if (issue.origin === "array") return `${given} needs ${bound} ${n} item${n == 1 ? "" : "s"}`;
+      if (issue.origin === "string") return `${given} needs ${bound} ${n} character${n == 1 ? "" : "s"}`;
+      return `${given} is too ${issue.code === "too_small" ? "small" : "large"} (${bound} ${n})`;
+    }
+    default:
+      return `${given}: ${issue.message}`;
+  }
+}
 function checkSpec(spec) {
   upgradeSpec(spec);
   const issues = [];
@@ -2705,13 +2748,16 @@ function checkSpec(spec) {
   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];
+    const bad = /* @__PURE__ */ new Set();
+    const failed = (...keys) => keys.some((k) => bad.has(k));
     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}`);
+          if (i.path.length) bad.add(String(i.path[0]));
+          issues.push(`${id}.props${i.path.length ? "." + i.path.join(".") : ""}: ${listItemKindHint(el, i.path) ?? propIssueMessage(el.props ?? {}, i)}`);
         }
       }
       for (const key of Object.keys(el.props ?? {})) {
@@ -2750,50 +2796,50 @@ function checkSpec(spec) {
       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 (p.leadingIcon && leading !== "icon" && !failed("leading")) conflict("leadingIcon", "leading=icon", "leading", leading);
+      if (p.trailingIcon && trailing !== "icon" && !failed("trailing")) conflict("trailingIcon", "trailing=icon", "trailing", trailing);
+      if (p.trailingText && trailing !== "text" && trailing !== "badge" && !failed("trailing")) conflict("trailingText", "trailing=text or badge", "trailing", trailing);
     }
     {
       const p = el.props ?? {};
-      const say = (msg) => issues.push(`${id}: ${msg}`);
+      const say = (msg, ...reads) => !failed(...reads) && issues.push(`${id}: ${msg}`);
       const backwards = (r) => Array.isArray(r) && r.length === 2 && r[0] > r[1];
       if (el.type === "Progress") {
-        if (p.step != null && p.steps == null) say(`step only shows with steps (e.g. steps=4 step=${p.step})`);
-        if (p.step != null && p.steps != null && p.step > p.steps) say(`step=${p.step} is past the last step (steps=${p.steps})`);
-        if (p.steps != null && p.shape === "circle") say("a stepper (steps) can't also be a circle; remove one of them");
+        if (p.step != null && p.steps == null) say(`step only shows with steps (e.g. steps=4 step=${typeof p.step === "number" ? p.step : 2})`);
+        if (p.step != null && p.steps != null && p.step > p.steps) say(`step=${p.step} is past the last step (steps=${p.steps})`, "step", "steps");
+        if (p.steps != null && p.shape === "circle") say("a stepper (steps) can't also be a circle; remove one of them", "shape");
       }
       if (el.type === "Pagination" && p.current != null && p.pages != null && p.current > p.pages) {
-        say(`current=${p.current} is past the last page (pages=${p.pages})`);
+        say(`current=${p.current} is past the last page (pages=${p.pages})`, "current", "pages");
       }
-      if (el.type === "Slider" && backwards(p.range)) say(`range=[${p.range.join(", ")}] goes backwards; write the smaller number first`);
+      if (el.type === "Slider" && backwards(p.range)) say(`range=[${p.range.join(", ")}] goes backwards; write the smaller number first`, "range");
       if (el.type === "Slider" && p.range && p.value != null) say("a slider has value (one handle) or range (two), not both");
       if (el.type === "Calendar") {
         const { days } = monthGrid(p.month);
         const all = [p.selected, ...p.range ?? [], ...p.marked ?? []].filter((d) => typeof d === "number");
         const late = all.find((d) => d > days);
-        if (late) say(`day ${late} isn't in ${p.month ?? "the month"} (it has ${days} days)`);
-        if (backwards(p.range)) say(`range=[${p.range.join(", ")}] goes backwards; write the earlier day first`);
+        if (late) say(`day ${late} isn't in ${p.month ?? "the month"} (it has ${days} days)`, "month", "selected", "range", "marked");
+        if (backwards(p.range)) say(`range=[${p.range.join(", ")}] goes backwards; write the earlier day first`, "range");
         if (p.range && p.selected != null) say("a calendar has selected (one day) or range (several), not both");
       }
       if (el.type === "Input" && p.type === "code" && p.value != null && String(p.value).length > (p.digits ?? 6)) {
-        say(`value has ${String(p.value).length} characters but the code has ${p.digits ?? 6} boxes (digits)`);
+        say(`value has ${String(p.value).length} characters but the code has ${p.digits ?? 6} boxes (digits)`, "type", "value", "digits");
       }
-      if (el.type === "Input" && p.digits != null && p.type !== "code") say("digits only applies to type=code");
-      if (el.type === "Input" && p.open && p.type !== "date") say("open shows a date picker, so it needs type=date");
-      if ((el.type === "Button" || el.type === "ListItem" || el.type === "NavBar") && p.open && !(Array.isArray(p.menu) && p.menu.length)) say("open shows the menu; add menu=[\u2026] with its items");
-      if (el.type === "Select" && p.open && !(Array.isArray(p.options) && p.options.length)) say("open shows the options list; add options=[\u2026] with the choices");
+      if (el.type === "Input" && p.digits != null && p.type !== "code") say("digits only applies to type=code", "type");
+      if (el.type === "Input" && p.open && p.type !== "date") say("open shows a date picker, so it needs type=date", "type");
+      if ((el.type === "Button" || el.type === "ListItem" || el.type === "NavBar") && p.open && !(Array.isArray(p.menu) && p.menu.length)) say("open shows the menu; add menu=[\u2026] with its items", "menu");
+      if (el.type === "Select" && p.open && !(Array.isArray(p.options) && p.options.length)) say("open shows the options list; add options=[\u2026] with the choices", "options");
     }
     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 bad2 = data.map((row, i) => ({ row: i + 1, cells: Array.isArray(row) ? row.length : 1 })).filter((r) => r.cells !== columns.length);
+        if (bad2.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 rows = bad2.length === 1 ? `data row ${bad2[0].row} has ${cells(bad2[0].cells)}` : `data rows ${bad2.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`
+            bad2.some((r) => r.cells > columns.length) && `quote cells that contain a comma, e.g. ["$1,200", Paid]`,
+            bad2.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("; ")})`);
         }
@@ -2808,12 +2854,12 @@ function checkSpec(spec) {
     if (other) issues.push(`${key}: the id #${ref} is also used by ${spec.elements[other.key].type} "${other.key}"${other.id === ref ? "" : ` (as #${other.id}; ids ignore case)`}; ids must be unique`);
     else owners.set(ref.toLowerCase(), { key, id: ref });
   }
-  const written = [...owners.values()].map((o2) => o2.id);
+  const written2 = [...owners.values()].map((o2) => o2.id);
   const parentOf = /* @__PURE__ */ new Map();
   for (const [k, el] of Object.entries(spec.elements)) for (const c of el.children ?? []) parentOf.set(c, k);
   for (const [key, el] of Object.entries(spec.elements)) {
     if (el.type !== "Flow") continue;
-    if (!(root.children ?? []).includes(key)) issues.push(`${key}: flow lines go at the board level, after the screens (indented like a screen)`);
+    if (!(root.children ?? []).includes(key)) issues.push(`${key}: write each flow on its own line after the screens, indented like a screen (not inside one)`);
     const p = el.props ?? {};
     for (const end of ["from", "to"]) {
       if (typeof p[end] !== "string") continue;
@@ -2828,9 +2874,9 @@ function checkSpec(spec) {
         }
         continue;
       }
-      const close = closeMatches(p[end], written);
+      const close = closeMatches(p[end], written2);
       issues.push(
-        `${key}: no element has the id #${p[end]}` + (close.length ? ` (did you mean ${close.map((c) => "#" + c).join(", ")}?)` : owners.size ? ` (ids on this board: ${written.map((c) => "#" + c).join(", ")})` : "; name an element by writing #name after it")
+        `${key}: no element has the id #${p[end]}` + (close.length ? ` (did you mean ${close.map((c) => "#" + c).join(", ")}?)` : owners.size ? ` (ids on this board: ${written2.map((c) => "#" + c).join(", ")})` : "; name an element by writing #name after it")
       );
     }
     if (typeof p.from === "string" && typeof p.to === "string" && p.from.toLowerCase() === p.to.toLowerCase()) issues.push(`${key}: a flow needs two different ends (both are #${p.from})`);
@@ -3194,7 +3240,8 @@ var RULES = `## Rules
 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), Input error and Flow color. Only add an accent if the request asks for color or a brand.
 9. Any element except Board, Screen, Note and Flow can take tooltip="text" to show a tooltip next to it. Select (with options), Input type=date, and Button, ListItem or NavBar (with menu) take open to show their list, calendar or menu over the screen.
-10. To show how screens connect, name elements or screens by writing #name after them (button primary "Sign in" #signin, screen phone "Home" #home), then add board-level lines after the screens: flow signin -> home "Tap Sign in".`;
+10. To show how screens connect, name elements or screens by writing #name after them (button primary "Sign in" #signin, screen phone "Home" #home), then write each flow on its own line after the screens, indented like a screen (not inside one): flow signin -> home "Tap Sign in".
+11. Icons are Lucide names, plus brand logos named brand-\u2026: brand-google, brand-apple, brand-github, brand-facebook, brand-x, brand-notion, brand-stripe (button "Continue with Google" leadingIcon=brand-google). Plain apple is a fruit and x is a close icon.`;
 var TEXT_FORMAT = `## Output format: wireframe text
 One element per line. Indent children two spaces under their parent. The first line is the board.
 

package/dist/cli.js

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

package/dist/escape.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Escaping for HTML attribute values, shared by the playground's Copy link → HTML and the MCP
+ * share tool, so the two give the same <img> tag. & first, or the entities it adds get escaped again.
+ */
+export declare const escapeAttr: (s: string) => string;

package/dist/icons.d.ts

@@ -1,4 +1,17 @@
-/** Kebab-case names for every Lucide icon (including Lucide's aliases, e.g. home and house). */
+/**
+ * Brand logos, from Simple Icons (CC0; pinned exactly, like lucide). Filled shapes on a 24×24 grid,
+ * named brand-… so they can't collide with Lucide: `apple` is Lucide's fruit and `x` its close icon.
+ * Imported one by one so a browser bundle carries only these. Simple Icons has no Slack, LinkedIn or
+ * Microsoft logo (removed); don't draw our own.
+ */
+export declare const BRAND_ICONS: Record<string, {
+    title: string;
+    path: string;
+}>;
+export declare const brandIconNames: string[];
+/** The SVG path of a brand-… logo, or undefined. */
+export declare const brandPath: (name: string) => string | undefined;
+/** Kebab-case names for every Lucide icon (including Lucide's aliases, e.g. home and house), then the brand logos. */
 export declare const iconNames: string[];
 /** The Lucide icon node for a kebab-case name, or undefined if there's no such icon. */
 export declare function iconNode(name: string): any;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { renderWireframe, compileWireframe, formatIssues, WireframeError, type C
 export { wireframePrompt, repairPrompt } from "./prompt.js";
 export { printWireframeText as formatWireframe } from "./print.js";
 export { encodeWireframe, decodeWireframe, MAX_SHARED_TEXT } from "./share.js";
-export { mcpTools, MCP_INSTRUCTIONS, wireframeGuide, renderWireframeTool, shareWireframeTool, callMcpTool, type ToolResult, type ToolContent, type ToolOptions, type McpToolName } from "./mcp.js";
+export { mcpTools, MCP_INSTRUCTIONS, LINK_KINDS, DEFAULT_LINKS, type LinkKind, wireframeGuide, renderWireframeTool, shareWireframeTool, callMcpTool, type ToolResult, type ToolContent, type ToolOptions, type McpToolName } from "./mcp.js";
 export { upgradeWireframe, upgradeSpec, RENAMED_PROPS, type UpgradeOptions } from "./upgrade.js";
 export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, boardLayout, type BoardItem, type RenderWireframeOptions } from "./render.js";
 export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js";

package/dist/index.js

@@ -21,7 +21,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-Z4RBFAOM.js";
+} from "./chunks/chunk-W3OU5IS6.js";
 
 // src/share.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
@@ -45,19 +45,36 @@ function decodeWireframe(data) {
 
 // src/mcp.ts
 import { z } from "zod";
+
+// src/escape.ts
+var escapeAttr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/[\r\n]+/g, " ");
+
+// src/mcp.ts
 var MODEL_IMAGE_MAX = 1600;
 var MAX_IMAGE_LINK_DATA = 16e3;
 var DEFAULT_BASE = "https://tsquare.dev";
 var MCP_INSTRUCTIONS = "tsquare draws low-fidelity UI wireframes from a small text language: multi-screen boards with notes and flow arrows, grayscale by default. Call wireframe_guide once before writing your first wireframe, then render_wireframe to check and see it, and share_wireframe to give the user links.";
 var textInput = z.string().max(MAX_SHARED_TEXT).describe("The wireframe in tsquare text (a ```tsquare code fence around it is fine).");
 var flowsInput = z.boolean().optional().describe("Draw flow arrows (default true). false leaves them out, as if there were no flow lines.");
+var LINK_KINDS = ["share", "svg", "png", "markdown", "html"];
+var DEFAULT_LINKS = ["svg", "share"];
+var LINK_LABELS = {
+  share: "Share link (opens it in the playground to view and edit)",
+  svg: "Image link (SVG)",
+  png: "Image link (PNG)",
+  markdown: "Markdown",
+  html: "HTML"
+};
+var linksInput = z.array(z.enum(LINK_KINDS)).min(1).optional().describe(
+  "Which links to return; ask only for what the user needs, since each link is long. share: open and edit it in the playground. svg: an image link to view or embed (Notion, GitHub, docs). png: an image link for tools that don't show SVG. markdown: an image for READMEs and docs. html: an <img> tag for web pages. Default [svg, share]."
+);
 var GUIDE_HEADER = `# Writing tsquare wireframes
 
 Workflow:
 1. Write the wireframe text for the user's request, following the language below.
 2. Call render_wireframe with it. If it reports problems, fix every line it names and render again.
 3. Look at the image for what the checker can't see: content cut off at the bottom of a screen (make the screen taller with height=\u2026 or remove content), cramped rows, text that wraps badly. Fix and render again.
-4. Call share_wireframe and give the user the links: the image link to look at or embed, and the playground link to edit. Show the wireframe text too, in a \`\`\`tsquare code block, so they can keep it.
+4. Call share_wireframe with only the links the user needs (links=[\u2026]; by default an image link and the share link to edit it), and give them to the user exactly as returned: each link carries the whole wireframe, so one changed character breaks it. Show the wireframe text too, in a \`\`\`tsquare code block, so they can keep it.
 `;
 var mcpTools = {
   wireframe_guide: {
@@ -74,8 +91,8 @@ var mcpTools = {
   },
   share_wireframe: {
     title: "Share a wireframe",
-    description: "Links for valid tsquare wireframe text: an image link (SVG or PNG) to show or embed in Markdown, Notion or docs, and a playground link to edit it. The links contain the wireframe text itself (compressed), so anyone with a link can read it.",
-    inputSchema: z.object({ text: textInput, flows: flowsInput }),
+    description: "Links for valid tsquare wireframe text, the same kinds as the playground's Copy link menu: a share link to edit it in the playground, image links (SVG, PNG), Markdown and HTML. Ask only for the links the user needs (default: an SVG image link and the share link). Each link contains the whole wireframe text (compressed), so anyone with a link can read it.",
+    inputSchema: z.object({ text: textInput, flows: flowsInput, links: linksInput }),
     annotations: { readOnlyHint: true, openWorldHint: false }
   }
 };
@@ -113,28 +130,28 @@ function shareWireframeTool(args, opts = {}) {
     return { content: [text(`This wireframe is too long to share as a link (over ${MAX_SHARED_TEXT / 1e3} KB of text). Split it into smaller boards.`)], isError: true };
   const data = encodeWireframe(bare);
   const query = args.flows === false ? "?flows=0" : "";
-  const title = String(spec.elements[spec.root]?.props?.title ?? "Wireframe").replace(/[[\]\n]/g, " ");
-  const playground = `${base}/playground#${data}`;
-  if (data.length > MAX_IMAGE_LINK_DATA)
-    return { content: [text(`Playground (to view and edit): ${playground}
-
-This wireframe is too long for an image link; the playground link still works. To get image links, split it into smaller boards.`)] };
+  const title = String(spec.elements[spec.root]?.props?.title ?? "Wireframe");
+  const kinds = [...new Set(args.links?.length ? args.links : DEFAULT_LINKS)];
+  const share = `${base}/playground#${data}`;
+  const lines = [];
+  const notes = ["Give each link exactly as written: it carries the whole wireframe, so anyone with it can read the wireframe, and one changed character breaks it."];
+  if (data.length > MAX_IMAGE_LINK_DATA && kinds.some((k) => k !== "share")) {
+    if (!kinds.includes("share")) kinds.unshift("share");
+    notes.unshift("This wireframe is too long for an image link, so only the share link is included. To get image links, split it into smaller boards.");
+  }
   const svg = `${base}/svg/${data}${query}`;
-  const png = `${base}/png/${data}${query}`;
-  return {
-    content: [
-      text(
-        [
-          `Image (SVG): ${svg}`,
-          `Image (PNG): ${png}`,
-          `Playground (to view and edit): ${playground}`,
-          `Markdown: ![${title}](${svg})`,
-          "",
-          "The links contain the wireframe text, so anyone with a link can read it."
-        ].join("\n")
-      )
-    ]
-  };
+  for (const kind of kinds) {
+    if (kind !== "share" && data.length > MAX_IMAGE_LINK_DATA) continue;
+    const link = {
+      share,
+      svg,
+      png: `${base}/png/${data}${query}`,
+      markdown: `![${title.replace(/[[\]\n]/g, " ")}](${svg})`,
+      html: `<img src="${svg}" alt="${escapeAttr(title)}">`
+    }[kind];
+    lines.push(`${LINK_LABELS[kind]}: ${link}`);
+  }
+  return { content: [text([...lines, "", ...notes].join("\n"))] };
 }
 async function callMcpTool(name, args = {}, opts = {}) {
   if (name === "wireframe_guide") return wireframeGuide();
@@ -145,7 +162,9 @@ async function callMcpTool(name, args = {}, opts = {}) {
   return name === "render_wireframe" ? renderWireframeTool(parsed.data) : shareWireframeTool(parsed.data, opts);
 }
 export {
+  DEFAULT_LINKS,
   DEVICES,
+  LINK_KINDS,
   MAX_SHARED_TEXT,
   MCP_INSTRUCTIONS,
   RENAMED_PROPS,

package/dist/mcp.d.ts

@@ -30,6 +30,11 @@ export declare const MODEL_IMAGE_MAX = 1600;
 export declare const MAX_IMAGE_LINK_DATA = 16000;
 /** Short server instructions: what the tools are for and the order to use them in. */
 export declare const MCP_INSTRUCTIONS: string;
+/** The link kinds share_wireframe offers: the playground's Copy link menu, with the same names. */
+export declare const LINK_KINDS: readonly ["share", "svg", "png", "markdown", "html"];
+export type LinkKind = (typeof LINK_KINDS)[number];
+/** What a plain "share it" gets: one image link and the link to edit it. */
+export declare const DEFAULT_LINKS: LinkKind[];
 export declare const mcpTools: {
     readonly wireframe_guide: {
         readonly title: "tsquare language guide";
@@ -54,10 +59,17 @@ export declare const mcpTools: {
     };
     readonly share_wireframe: {
         readonly title: "Share a wireframe";
-        readonly description: "Links for valid tsquare wireframe text: an image link (SVG or PNG) to show or embed in Markdown, Notion or docs, and a playground link to edit it. The links contain the wireframe text itself (compressed), so anyone with a link can read it.";
+        readonly description: "Links for valid tsquare wireframe text, the same kinds as the playground's Copy link menu: a share link to edit it in the playground, image links (SVG, PNG), Markdown and HTML. Ask only for the links the user needs (default: an SVG image link and the share link). Each link contains the whole wireframe text (compressed), so anyone with a link can read it.";
         readonly inputSchema: z.ZodObject<{
             text: z.ZodString;
             flows: z.ZodOptional<z.ZodBoolean>;
+            links: z.ZodOptional<z.ZodArray<z.ZodEnum<{
+                html: "html";
+                markdown: "markdown";
+                png: "png";
+                share: "share";
+                svg: "svg";
+            }>>>;
         }, z.core.$strip>;
         readonly annotations: {
             readonly readOnlyHint: true;
@@ -77,6 +89,7 @@ export declare function renderWireframeTool(args: {
 export declare function shareWireframeTool(args: {
     text: string;
     flows?: boolean;
+    links?: LinkKind[];
 }, opts?: ToolOptions): ToolResult;
 /** Run a tool by name, for servers that dispatch by name. Unknown names come back as an error result. */
 export declare function callMcpTool(name: string, args?: Record<string, unknown>, opts?: ToolOptions): Promise<ToolResult>;

package/dist/playground/index.js

@@ -13,7 +13,7 @@ import {
   renderWireframeSvg,
   takesUniversalProps,
   wireframePrompt
-} from "../chunks/chunk-Z4RBFAOM.js";
+} from "../chunks/chunk-W3OU5IS6.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";