tsquare 0.3.1 → 0.3.2

package/CHANGELOG.md

@@ -0,0 +1,91 @@
+# Changelog
+
+## 0.3.2
+
+- **`grow` on Select**, like Input: `select "State" grow` fills the rest of a row. Sonnet wrote it in 5 of 9 eval runs, its only remaining mistake; with it, every stored Sonnet text output is valid.
+- **Docs:** a new [Embedding](docs/embedding.md) page for Notion, GitHub and your own site, and the Radio page shows radios side by side (`stack row` + `radio`).
+- **Tests and CI:** a test suite (`npm test`), run on Node 20, 22 and 24 for every pull request, plus a check that eval scores, docs and the skill match what's committed.
+- `CHANGELOG.md` is now included in the npm package.
+
+## 0.3.1
+
+### Older wireframes are upgraded in one step
+
+- All support for older syntax now lives in one module (`upgradeWireframe`, `upgradeSpec`), run before parsing. The parser, catalog and renderer only know the current language.
+- **Links made before 0.3.0 render again** when a comment follows an element on the same line (`screen phone "Home"   # main`): the comment moves onto its own line. Text you write or paste still gets the error, so new comments go on their own line.
+- `decodeWireframe` returns the upgraded text, so a decoded link always means what it did when it was made.
+
+### Better suggestions for unknown icons
+
+- Common guesses that aren't Lucide names now suggest what was meant: `compose` → `square-pen`, `call` → `phone`, `person` → `user`, `bag` → `shopping-bag`, `notification` → `bell`, `close` → `x`.
+- Among equally close matches, the usual directions come first: `chevron` suggests `chevron-right, chevron-left, chevron-down, chevron-up`.
+- On a list item, `trailingIcon=chevron` (or `toggle`, `avatar`…) says to write `trailing=chevron`, since that's a kind, not an icon.
+
+## 0.3.0
+
+### Renamed: `icon` is now `leadingIcon` on Button and ListItem
+
+Buttons and list items take an icon on either side, so the prop names now say which side:
+
+| Before | Now |
+|---|---|
+| `button "Download" icon=download` | `button "Download" leadingIcon=download` |
+| (not possible) | `button "Next" trailingIcon=chevron-right` |
+| `listitem "Inbox" leading=icon icon=inbox` | `listitem "Inbox" leadingIcon=inbox` |
+| `listitem "Delete" trailing=icon trailingIcon=trash-2` | `listitem "Delete" trailingIcon=trash-2` |
+
+- **Nothing breaks.** The old `icon=` spelling still works on both components, so existing files and shared render links render the same. `tsquare fmt` rewrites it to `leadingIcon=`. The prompt, the skill and the docs only teach the new names.
+- **Buttons can have a trailing icon**, for Next, external links or dropdowns. Both sides work together.
+- `leading` and `trailing` on ListItem stay as before. They pick what fills each side (`avatar`, `image`, `checkbox`, `chevron`, `badge`, `toggle`, …). An icon or text value implies its kind, so `leading=icon` and `trailing=icon` are optional.
+- `icon` stays as it is on TabBar items (`{label=Home icon=house}`) and on the Icon component.
+
+### Changed: comments go on their own line
+
+A line that starts with `#` is a comment. Anywhere else, `#` is ordinary text, so order numbers, tags and hex colors need no quotes:
+
+```tsquare
+# the orders page
+screen desktop "Orders"
+  table columns=[Order, Customer] data=[[#1001, Ana Torres], [#1002, Ben Lee]]
+```
+
+- **Why:** comments used to start at any `#` after a space. That cut off `[#1001, Ana Torres]` and broke the table, which happened to Sonnet in 3 of 4 eval runs. Across 160 eval outputs, models never wrote a comment.
+- **Upgrading:** a comment after an element on the same line (`screen phone "Home"   # main`) is now an error that tells you to move it to its own line. Nothing is dropped silently.
+
+### Clearer errors for props on the wrong component
+
+When a word or prop belongs to a different component, the error now says which one:
+
+```
+Input: fullWidth is a Button prop, not an Input one; an Input already fills its width (width=… sets a fixed one), so remove it
+Card has no prop "border": border is a Stack prop, not a Card one
+```
+
+A prop or list wrapped onto its own line says where it belongs, instead of "unknown component":
+
+```
+trailing=…: props go on the same line as their component; move it to the end of line 15
+a list must stay on one line; join this to line 6
+```
+
+### Playground
+
+- A CodeMirror editor: highlighting, autocomplete for components, options, props, Lucide icons and accent colors, and problems underlined on their line.
+- Light and dark themes.
+- Zoom and pan, zoom to a single screen, full screen and a resizable split.
+- Copy link: share link, SVG/PNG image links, Markdown and HTML snippets.
+- An examples gallery with thumbnails.
+
+### Library
+
+- `encodeWireframe` / `decodeWireframe` for share and render links.
+- `boardLayout()` returns the board size and each screen's position.
+
+### List items: a value implies its kind
+
+- `trailingIcon=trash-2` without `trailing=icon` used to render nothing, silently. Now the value implies the kind.
+- A value that contradicts an explicit kind is an error that names the fix, for example: `leadingIcon only shows with leading=icon (this item has leading=avatar); remove one of them`.
+
+### Examples
+
+- New: `sign-in`, `dashboard`, `checkout` and `states`.

package/README.md

@@ -50,7 +50,7 @@ A wireframe can be embedded anywhere an image works (Notion, GitHub, docs sites)
 ![Login](https://tsquare.dev/svg/zNYwxDsIwEAT7vGJ…)
 ```
 
-The playground's **Copy link** menu makes these. The text is compressed into the URL, not encrypted, so anyone with the link can read it; see [privacy](https://tsquare.dev/privacy). `encodeWireframe` and `decodeWireframe` in the library produce and read the same links.
+The playground's **Copy link** menu makes these; [Embedding](docs/embedding.md) has the steps for Notion, GitHub and your own site. The text is compressed into the URL, not encrypted, so anyone with the link can read it; see [privacy](https://tsquare.dev/privacy). `encodeWireframe` and `decodeWireframe` in the library produce and read the same links.
 
 ## The language
 

package/dist/catalog.d.ts

@@ -341,6 +341,7 @@ export declare const componentDefinitions: {
             label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             value: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             placeholder: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            grow: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
             width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
         }, z.core.$strip>;
         slots: never[];
@@ -864,6 +865,7 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 value: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 placeholder: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                grow: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
                 width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
             }, z.core.$strip>;
             slots: never[];

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

@@ -433,6 +433,7 @@ var componentDefinitions = {
       label: o(z.string()),
       value: o(z.string()),
       placeholder: o(z.string()),
+      grow: o(z.boolean()).describe("Fill the remaining space in a row"),
       width: o(z.union([z.number(), z.string()])).describe("Fixed width, e.g. 320. Default fills the space.")
     }),
     slots: [],
@@ -1053,7 +1054,7 @@ function Input({ element, dir }) {
 }
 function Select({ element, dir }) {
   const p = element.props;
-  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 6, ...fieldWidth(p.width, dir) }, children: [
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 6, ...fieldWidth(p.width, dir), ...p.grow ? { flexGrow: 1 } : {} }, children: [
     /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
     /* @__PURE__ */ jsxs(Field, { children: [
       /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, color: p.value ? theme.ink : theme.muted }, children: p.value ?? p.placeholder ?? "Select\u2026" }),

package/dist/cli.js

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

package/dist/index.js

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

package/dist/playground/index.js

@@ -11,7 +11,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-YCIRLKKD.js";
+} from "../chunks/chunk-X46EDSCQ.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -242,18 +242,26 @@ var EXAMPLES = {
     checkbox "Checked" checked
     checkbox "Unchecked"`,
   Radio: `board
-  screen custom width=300 height=130
+  screen custom width=380 height=230
     radio "Selected" checked
     radio "Not selected"
-    radio "Not selected"`,
+    radio "Not selected"
+    text "Side by side: put them in a row" sm muted
+    stack row gap=20
+      radio "Standard" checked
+      radio "Express"
+      radio "Pickup"`,
   Toggle: `board
   screen custom width=300 height=100
     toggle "On" on
     toggle "Off" off`,
   Select: `board
-  screen custom width=320 height=170
+  screen custom width=380 height=260
     select "Country" value="Mexico"
-    select "Size" placeholder="Choose one" width=160`,
+    select "Size" placeholder="Choose one" width=160
+    stack row gap=12
+      input "City" placeholder="Monterrey" grow
+      select "State" value="Nuevo Le\xF3n" grow`,
   NavBar: `board
   screen custom width=380 height=240 padding=0 gap=0
     navbar "leading=menu" leading=menu actions=[search, bell]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",
@@ -44,7 +44,8 @@
     "examples/*.tsq",
     "assets/mark.png",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "engines": {
     "node": ">=20"
@@ -62,7 +63,8 @@
     "eval:prompts": "tsx eval/prompts.ts",
     "eval:score": "tsx eval/score.ts",
     "build": "tsx scripts/build.ts",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "test": "tsx --test test/*.test.ts"
   },
   "dependencies": {
     "@fontsource/inter": "5.3.0",

package/skill/tsquare/reference.md

@@ -142,6 +142,7 @@ Dropdown field (closed state).
 - label: string (main text)
 - value: string
 - placeholder: string
+- grow: boolean — Fill the remaining space in a row
 - width: number | string — Fixed width, e.g. 320. Default fills the space.
 
 ### NavBar