tsquare 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # 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`.

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-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.js

@@ -21,7 +21,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-ZLVSCEWO.js";
+} from "./chunks/chunk-W3OU5IS6.js";
 
 // src/share.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";

package/dist/playground/index.js

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

package/dist/prompt.d.ts

@@ -13,7 +13,7 @@ export declare function componentDocs(): {
     props: PropDoc[];
 }[];
 export declare function componentReference(): string;
-export declare const RULES = "## Rules\n1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them and Flow lines after them (rule 10).\n2. Each Screen is one view of the product. Use several Screens to show several views or states.\n3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.\n4. NavBar is pinned to the top of its Screen and TabBar to the bottom.\n5. Modal, Drawer and Toast are overlays. They must be direct children of a Screen.\n6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.\n7. Only use the components and props listed below. All props are optional unless marked required.\n8. 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.\n9. 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.\n10. 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\".";
+export declare const RULES = "## Rules\n1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them and Flow lines after them (rule 10).\n2. Each Screen is one view of the product. Use several Screens to show several views or states.\n3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.\n4. NavBar is pinned to the top of its Screen and TabBar to the bottom.\n5. Modal, Drawer and Toast are overlays. They must be direct children of a Screen.\n6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.\n7. Only use the components and props listed below. All props are optional unless marked required.\n8. 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.\n9. 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.\n10. 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\".\n11. 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.";
 export declare const TEXT_FORMAT = "## Output format: wireframe text\nOne element per line. Indent children two spaces under their parent. The first line is the board.\n\nA line is the component name in lowercase, followed by arguments separated by spaces:\n- \"a quoted string\" sets the component's main text prop (marked \"main text\" below)\n- 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\n- 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\n- key=value sets any prop. Values: \"string\", number, true/false, bare word, [list, of, values], {key=value key=value}\n\nComments: 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.\n\nLists: 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].\n\nIf a bare word could mean more than one prop, write it as key=value.";
 export declare const EXAMPLE_REQUEST = "Two phone screens for a recipe app: a browse screen with search, category tabs, a grid of recipe cards and a tab bar; and a recipe detail screen with its options sheet open.";
 /** The system prompt for writing wireframe text. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",
@@ -75,6 +75,7 @@
     "@types/react": "^19.3.0",
     "lucide": "1.48.0",
     "react": "^19.3.0",
+    "simple-icons": "16.34.0",
     "zod": "^4.6.5"
   },
   "devDependencies": {

package/skill/tsquare/SKILL.md

@@ -52,7 +52,8 @@ If a bare word could mean more than one prop, write it as key=value.
 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-…: 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.
 
 ## Example
 

package/skill/tsquare/reference.md

@@ -28,7 +28,7 @@ Sticky-note annotation. Put it on the Board beside screens, or inside a Screen n
 - width: number
 
 ### Flow
-An arrow between two elements or screens, named with #id. Written at the board level after the screens: flow signin -> home "Tap Sign in".
+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".
 - from (required): string — The id where the arrow starts (written before ->)
 - to (required): string — The id it points at (written after ->)
 - label: string (main text)
@@ -116,7 +116,7 @@ Chart placeholder: a generic line, bar, area, pie or donut shape, no data.
 - width: number | string — Default fills the container width
 
 ### Icon
-Line icon from Lucide.
+Line icon from Lucide, or a brand logo (brand-google, brand-apple, …).
 - name: string (main text) — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
 - size: number