tsquare 0.7.1 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.9.0
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.8.0, and render URLs give the same images.
+
+### For editors and your own pages
+
+- **`tsquare/viewer`:** the playground's zoomable board (zoom, pan, pinch, a chip per screen, dimmed while the text has problems) as a browser module with no dependencies, for showing boards in your own page. Give `createViewer` the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math depends on itself, so a page only gives the stage a size (and can style the `panning`, `animate` and `stale` classes). The playground uses it, and so will the VS Code extension's preview.
+- **`languageData()`** is exported from `tsquare`: every component with its props, option words and description, plus icon names and accents. It's what the playground's highlighting and autocomplete use, now available to editors.
+- **`require("tsquare")` works** in Node versions that can load ES modules from CommonJS (20.19+, 22.12+): every export now has a `default` condition next to `import`. The package is still ESM only.
+
+### Playground
+
+- **Fix: pinch zoom and two-finger pan on touch screens.** Touch screens report each finger's movement separately, and each one was handled as a zoom around a different point, so the board drifted out from under the fingers while pinching, and moving two fingers together zoomed out and back in and moved the board the wrong way. Now each move pans by how far the point between the fingers moved, then zooms around it, so the part of the board between your fingers stays there. Trackpad pinch and mouse dragging were already right.
+- **Tests for the playground,** which had none: every endpoint through a real HTTP server (render, PNG, language, prompt, examples, reference, the page), the page's markup against its script and against what tsquare.dev's build expects, and the viewer in jsdom (fitting, zooming to a screen, wheel and buttons, dragging, pinching and two-finger panning).
+
+## 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`.

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) |
@@ -123,7 +123,7 @@ const { issues } = compileWireframe(source);           // problems by line, empt
 const png = await renderWireframe(source, { format: "png", scale: 2 });
 ```
 
-`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
+`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. `tsquare/viewer` is the playground's zoomable board (zoom, pan, pinch, a chip per screen) for your own page: pass it the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math needs itself; give the stage a size, and optionally style the classes it toggles on the stage: `panning` (while dragging), `animate` (while fitting or zooming to a screen, e.g. `.animate > * { transition: transform .25s }`) and `stale` (from `setStale`, e.g. `.stale img { opacity: .35 }`). `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
 
 ## Using it with Claude (skill)
 
@@ -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-GTWUMF6W.js

@@ -0,0 +1,65 @@
+import {
+  ACCENTS,
+  PRIMARY_PROP,
+  UNIVERSAL_PROPS,
+  bareWords,
+  componentDefinitions,
+  iconNames,
+  takesUniversalProps
+} from "./chunk-W3OU5IS6.js";
+
+// src/playground/language-data.ts
+function unwrap(t) {
+  let cur = t;
+  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
+  return cur;
+}
+function describe(name, schema) {
+  const s = unwrap(schema);
+  const description = schema.description ?? s?.description;
+  const iconish = /Lucide icon|Icon names/i.test(description ?? "");
+  switch (s?.def?.type) {
+    case "enum":
+      return { name, kind: "enum", values: s.options, description };
+    case "boolean":
+      return { name, kind: "boolean", values: ["true", "false"], description };
+    case "number":
+      return { name, kind: "number", description };
+    case "array": {
+      const el = unwrap(s.def.element);
+      const objects = el?.def?.type === "union" ? el.def.options.map(unwrap) : [el];
+      const hasIcon = objects.some((x) => x?.def?.type === "object" && "icon" in x.shape);
+      return { name, kind: "list", icon: iconish || hasIcon, description };
+    }
+    case "object":
+      return { name, kind: "object", description };
+    default:
+      return { name, kind: "string", icon: iconish || void 0, accent: name === "accent" || void 0, description };
+  }
+}
+var cache = null;
+function languageData() {
+  if (cache) return cache;
+  const components = Object.entries(componentDefinitions).map(([type, def]) => {
+    const shape = def.props.shape;
+    const props = Object.entries(shape).map(([name, schema]) => describe(name, schema));
+    if (takesUniversalProps(type)) for (const [name, schema] of Object.entries(UNIVERSAL_PROPS)) props.push(describe(name, schema));
+    if (type === "Icon") props.find((p) => p.name === "name").icon = true;
+    const words = bareWords(type);
+    const off = words.booleans.flatMap((b) => b === "on" ? ["off"] : b === "checked" ? ["unchecked"] : [`no-${b}`]);
+    return {
+      name: type.toLowerCase(),
+      description: def.description,
+      main: PRIMARY_PROP[type],
+      children: def.slots.length > 0,
+      props,
+      words: [...words.options.map((o) => o.value), ...words.booleans, ...off]
+    };
+  });
+  cache = { components, icons: [...new Set(iconNames)].sort(), accents: Object.keys(ACCENTS) };
+  return cache;
+}
+
+export {
+  languageData
+};

package/dist/chunks/{chunk-ZLVSCEWO.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",
@@ -2848,7 +2859,7 @@ function checkSpec(spec) {
   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;
@@ -3229,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-ZLVSCEWO.js";
+} from "./chunks/chunk-W3OU5IS6.js";
 
 // src/cli.ts
 import { readFile, writeFile } from "node:fs/promises";

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

@@ -10,3 +10,4 @@ export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js"
 export { catalog, componentDefinitions } from "./catalog.js";
 export { registry } from "./components.js";
 export { theme, DEVICES } from "./layout.js";
+export { languageData, type LanguageData, type ComponentInfo, type PropInfo } from "./playground/language-data.js";

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  languageData
+} from "./chunks/chunk-GTWUMF6W.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -21,7 +24,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-ZLVSCEWO.js";
+} from "./chunks/chunk-W3OU5IS6.js";
 
 // src/share.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
@@ -180,6 +183,7 @@ export {
   encodeWireframe,
   formatIssues,
   printWireframeText as formatWireframe,
+  languageData,
   mcpTools,
   parseWireframeText,
   registry,

package/dist/playground/index.js

@@ -1,19 +1,15 @@
 import {
-  ACCENTS,
-  PRIMARY_PROP,
-  UNIVERSAL_PROPS,
-  bareWords,
+  languageData
+} from "../chunks/chunk-GTWUMF6W.js";
+import {
   boardLayout,
   compileWireframe,
-  componentDefinitions,
   componentDocs,
   formatIssues,
-  iconNames,
   renderWireframePng,
   renderWireframeSvg,
-  takesUniversalProps,
   wireframePrompt
-} from "../chunks/chunk-ZLVSCEWO.js";
+} from "../chunks/chunk-W3OU5IS6.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -21,58 +17,6 @@ import { readFile, readdir } from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
 
-// src/playground/language-data.ts
-function unwrap(t) {
-  let cur = t;
-  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
-  return cur;
-}
-function describe(name, schema) {
-  const s = unwrap(schema);
-  const description = schema.description ?? s?.description;
-  const iconish = /Lucide icon|Icon names/i.test(description ?? "");
-  switch (s?.def?.type) {
-    case "enum":
-      return { name, kind: "enum", values: s.options, description };
-    case "boolean":
-      return { name, kind: "boolean", values: ["true", "false"], description };
-    case "number":
-      return { name, kind: "number", description };
-    case "array": {
-      const el = unwrap(s.def.element);
-      const objects = el?.def?.type === "union" ? el.def.options.map(unwrap) : [el];
-      const hasIcon = objects.some((x) => x?.def?.type === "object" && "icon" in x.shape);
-      return { name, kind: "list", icon: iconish || hasIcon, description };
-    }
-    case "object":
-      return { name, kind: "object", description };
-    default:
-      return { name, kind: "string", icon: iconish || void 0, accent: name === "accent" || void 0, description };
-  }
-}
-var cache = null;
-function languageData() {
-  if (cache) return cache;
-  const components = Object.entries(componentDefinitions).map(([type, def]) => {
-    const shape = def.props.shape;
-    const props = Object.entries(shape).map(([name, schema]) => describe(name, schema));
-    if (takesUniversalProps(type)) for (const [name, schema] of Object.entries(UNIVERSAL_PROPS)) props.push(describe(name, schema));
-    if (type === "Icon") props.find((p) => p.name === "name").icon = true;
-    const words = bareWords(type);
-    const off = words.booleans.flatMap((b) => b === "on" ? ["off"] : b === "checked" ? ["unchecked"] : [`no-${b}`]);
-    return {
-      name: type.toLowerCase(),
-      description: def.description,
-      main: PRIMARY_PROP[type],
-      children: def.slots.length > 0,
-      props,
-      words: [...words.options.map((o) => o.value), ...words.booleans, ...off]
-    };
-  });
-  cache = { components, icons: [...new Set(iconNames)].sort(), accents: Object.keys(ACCENTS) };
-  return cache;
-}
-
 // src/playground/reference.ts
 var GROUPS = [
   { name: "Canvas", components: ["Board", "Screen", "Note", "Flow"] },