tsquare 0.3.1 → 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,124 @@
+# Changelog
+
+## 0.4.0
+
+### New components
+
+```tsquare
+chart line "Revenue"                              # line | bar | area | pie | donut, a placeholder shape
+calendar "October 2026" range=[12, 18] marked=[3, 9]
+input "Check-in" type=date value="Oct 14, 2026"   # calendar icon
+input "Verification code" type=code value="4821"  # one box per digit (digits=6)
+slider "Price" range=[50, 400]                    # any amounts; the track scales
+progress "Uploading" value=40                     # also: progress circle, progress steps=4 step=2
+pagination pages=12 current=3
+bullets items=[Fast setup, No credit card]        # also: numbered, icon=check
+bullets icon=check items=[Boards, {label="SSO" icon=x muted}]
+```
+
+- **Charts are placeholders:** they show the kind of chart, not data.
+- **The calendar draws the real month** from its title ("October 2026" starts on a Thursday).
+- **Bullets** take any Lucide icon. One item can be an object that changes its icon or greys it out (`muted`).
+- **Inside `{…}`:**
+  - a bare word turns an option on (`{label="SSO" muted}`);
+  - an unquoted value can contain spaces (`{label=Custom domain icon=x}`).
+- **Clear errors for values that contradict each other:** a step past the last step, a page past the last page, a day that isn't in the month, a range written backwards.
+- **The accent color** also fills sliders, progress, completed steps, and the selected day and page. Charts stay gray.
+- **The prompt** grew by about 480 tokens (2,670 → 3,150).
+
+### Measured
+
+- **The new components:** 7 requests that describe a screen without naming components, two runs each.
+  - Sonnet: valid 14 of 14, and picked the right components every time (32 of 32 checks).
+  - Haiku: valid 12 of 14, 30 of 32 checks.
+- **The original 20 requests, with the new prompt:** Sonnet 100%, Haiku 65%, within its usual range. None of Haiku's failures involve the new components.
+
+## 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

@@ -192,6 +192,22 @@ export declare const componentDefinitions: {
             lines: number;
         };
     };
+    Bullets: {
+        props: z.ZodObject<{
+            items: z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+                label: z.ZodString;
+                icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                muted: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+            }, z.core.$strict>]>>;
+            numbered: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+            icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            items: string[];
+        };
+    };
     Image: {
         props: z.ZodObject<{
             height: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
@@ -206,6 +222,26 @@ export declare const componentDefinitions: {
             label: string;
         };
     };
+    Chart: {
+        props: z.ZodObject<{
+            kind: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                area: "area";
+                bar: "bar";
+                donut: "donut";
+                line: "line";
+                pie: "pie";
+            }>>>;
+            title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            height: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            kind: string;
+            title: string;
+        };
+    };
     Icon: {
         props: z.ZodObject<{
             name: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -282,11 +318,14 @@ export declare const componentDefinitions: {
             placeholder: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             value: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             type: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                code: "code";
+                date: "date";
                 email: "email";
                 password: "password";
                 search: "search";
                 text: "text";
             }>>>;
+            digits: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
             multiline: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
             helper: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             error: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
@@ -341,6 +380,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[];
@@ -350,6 +390,51 @@ export declare const componentDefinitions: {
             value: string;
         };
     };
+    Slider: {
+        props: z.ZodObject<{
+            label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            value: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            range: z.ZodOptional<z.ZodNullable<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            label: string;
+            value: number;
+        };
+    };
+    Progress: {
+        props: z.ZodObject<{
+            label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            value: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            shape: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                bar: "bar";
+                circle: "circle";
+            }>>>;
+            steps: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            step: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            label: string;
+            value: number;
+        };
+    };
+    Calendar: {
+        props: z.ZodObject<{
+            month: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            selected: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            range: z.ZodOptional<z.ZodNullable<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>;
+            marked: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodNumber>>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            month: string;
+            selected: number;
+        };
+    };
     NavBar: {
         props: z.ZodObject<{
             title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -404,6 +489,18 @@ export declare const componentDefinitions: {
             active: number;
         };
     };
+    Pagination: {
+        props: z.ZodObject<{
+            pages: z.ZodNumber;
+            current: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            pages: number;
+            current: number;
+        };
+    };
     List: {
         props: z.ZodObject<{
             dividers: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
@@ -715,6 +812,22 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 lines: number;
             };
         };
+        Bullets: {
+            props: z.ZodObject<{
+                items: z.ZodArray<z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
+                    label: z.ZodString;
+                    icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                    muted: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+                }, z.core.$strict>]>>;
+                numbered: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+                icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                items: string[];
+            };
+        };
         Image: {
             props: z.ZodObject<{
                 height: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
@@ -729,6 +842,26 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 label: string;
             };
         };
+        Chart: {
+            props: z.ZodObject<{
+                kind: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                    area: "area";
+                    bar: "bar";
+                    donut: "donut";
+                    line: "line";
+                    pie: "pie";
+                }>>>;
+                title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                height: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                kind: string;
+                title: string;
+            };
+        };
         Icon: {
             props: z.ZodObject<{
                 name: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -805,11 +938,14 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 placeholder: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 value: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 type: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                    code: "code";
+                    date: "date";
                     email: "email";
                     password: "password";
                     search: "search";
                     text: "text";
                 }>>>;
+                digits: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
                 multiline: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
                 helper: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 error: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
@@ -864,6 +1000,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[];
@@ -873,6 +1010,51 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 value: string;
             };
         };
+        Slider: {
+            props: z.ZodObject<{
+                label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                value: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                range: z.ZodOptional<z.ZodNullable<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                label: string;
+                value: number;
+            };
+        };
+        Progress: {
+            props: z.ZodObject<{
+                label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                value: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                shape: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                    bar: "bar";
+                    circle: "circle";
+                }>>>;
+                steps: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                step: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                label: string;
+                value: number;
+            };
+        };
+        Calendar: {
+            props: z.ZodObject<{
+                month: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                selected: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+                range: z.ZodOptional<z.ZodNullable<z.ZodTuple<[z.ZodNumber, z.ZodNumber], null>>>;
+                marked: z.ZodOptional<z.ZodNullable<z.ZodArray<z.ZodNumber>>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                month: string;
+                selected: number;
+            };
+        };
         NavBar: {
             props: z.ZodObject<{
                 title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
@@ -927,6 +1109,18 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 active: number;
             };
         };
+        Pagination: {
+            props: z.ZodObject<{
+                pages: z.ZodNumber;
+                current: z.ZodOptional<z.ZodNullable<z.ZodNumber>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                pages: number;
+                current: number;
+            };
+        };
         List: {
             props: z.ZodObject<{
                 dividers: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;

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

@@ -221,6 +221,13 @@ var o = (t) => t.nullish();
 var align = z.enum(["start", "center", "end", "stretch"]);
 var justify = z.enum(["start", "center", "end", "between", "around"]);
 var iconName = z.string().refine(isIcon, { error: (iss) => unknownIconMessage(String(iss.input)) }).describe("Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user");
+var day = z.number().int().min(1).max(31);
+var percent = z.number().min(0).max(100);
+var bulletItem = z.union([
+  z.string(),
+  // strict: a misspelled key is an error, not silently dropped
+  z.strictObject({ label: z.string(), icon: o(iconName), muted: o(z.boolean()) })
+]);
 var componentDefinitions = {
   // ── Canvas ────────────────────────────────────────────────────────────
   Board: {
@@ -231,7 +238,7 @@ var componentDefinitions = {
       gap: o(z.number()),
       padding: o(z.number()),
       accent: o(z.string().refine(isAccent, { error: (iss) => accentMessage(String(iss.input)) })).describe(
-        `The one UI color: primary buttons, solid badges, checked controls, toggles, active tabs, ghost buttons. ${Object.keys(ACCENTS).join(", ")}, or a hex color like #1a73e8. Omit for grayscale.`
+        `The one UI color: primary buttons, solid badges, checked controls, toggles, sliders, progress, selected days and pages, active tabs, ghost buttons. ${Object.keys(ACCENTS).join(", ")}, or a hex color like #1a73e8. Omit for grayscale.`
       )
     }),
     slots: ["default"],
@@ -341,6 +348,16 @@ var componentDefinitions = {
     description: "Body text, or placeholder lines when `lines` is set and `text` is not.",
     example: { lines: 3 }
   },
+  Bullets: {
+    props: z.object({
+      items: z.array(bulletItem).describe("Text, or {label icon muted} to change one line, e.g. {label=SSO icon=x muted}"),
+      numbered: o(z.boolean()).describe("1. 2. 3. instead of dots"),
+      icon: o(iconName).describe("A Lucide icon instead of dots, e.g. check for a feature list")
+    }),
+    slots: [],
+    description: "Bulleted, numbered or icon list of short lines.",
+    example: { items: ["Fast setup", "No credit card"] }
+  },
   Image: {
     props: z.object({
       height: o(z.number()),
@@ -352,6 +369,17 @@ var componentDefinitions = {
     description: "Image placeholder: a box with an X through it.",
     example: { height: 180, label: "Hero photo" }
   },
+  Chart: {
+    props: z.object({
+      kind: o(z.enum(["line", "bar", "area", "pie", "donut"])).describe("Default line"),
+      title: o(z.string()),
+      height: o(z.number()).describe("Default 180"),
+      width: o(z.union([z.number(), z.string()])).describe("Default fills the container width")
+    }),
+    slots: [],
+    description: "Chart placeholder: a generic line, bar, area, pie or donut shape, no data.",
+    example: { kind: "bar", title: "Signups" }
+  },
   Icon: {
     props: z.object({
       name: o(iconName),
@@ -399,7 +427,8 @@ var componentDefinitions = {
       label: o(z.string()),
       placeholder: o(z.string()),
       value: o(z.string()),
-      type: o(z.enum(["text", "password", "search", "email"])),
+      type: o(z.enum(["text", "password", "search", "email", "date", "code"])).describe("date shows a calendar icon; code draws one box per digit"),
+      digits: o(z.number().int().min(2).max(10)).describe("Boxes for type=code, default 6"),
       multiline: o(z.number().int().min(1)).describe("Number of rows; 2 or more makes a textarea"),
       helper: o(z.string()),
       error: o(z.boolean()).describe("Validation error: red border and red helper text"),
@@ -433,12 +462,46 @@ 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: [],
     description: "Dropdown field (closed state).",
     example: { label: "Country", value: "United States" }
   },
+  Slider: {
+    props: z.object({
+      label: o(z.string()),
+      value: o(z.number().min(0)).describe("Handle position: 0 to 100, or any amount (the track scales to fit)"),
+      range: o(z.tuple([z.number().min(0), z.number().min(0)])).describe("Two handles instead, e.g. [20, 80] or [50, 400]")
+    }),
+    slots: [],
+    description: "Slider with one handle, or two with `range`.",
+    example: { label: "Volume", value: 30 }
+  },
+  Progress: {
+    props: z.object({
+      label: o(z.string()),
+      value: o(percent).describe("Percent done"),
+      shape: o(z.enum(["bar", "circle"])).describe("Default bar; circle is a ring with the percent inside"),
+      steps: o(z.number().int().min(2).max(10)).describe("Draw a stepper with this many steps instead"),
+      step: o(z.number().int().min(1)).describe("The current step, with steps")
+    }),
+    slots: [],
+    description: "Progress bar, ring (circle), or stepper (steps).",
+    example: { label: "Uploading", value: 40 }
+  },
+  Calendar: {
+    props: z.object({
+      month: o(z.string()).describe('Month and year, e.g. "October 2026"; the days match that month'),
+      selected: o(day),
+      range: o(z.tuple([day, day])).describe("Selected days, e.g. [12, 18]"),
+      marked: o(z.array(day)).describe("Days with a dot, e.g. events")
+    }),
+    slots: [],
+    description: "Month calendar.",
+    example: { month: "October 2026", selected: 14 }
+  },
   // ── Navigation & data ─────────────────────────────────────────────────
   NavBar: {
     props: z.object({
@@ -469,6 +532,15 @@ var componentDefinitions = {
     description: "In-page tabs with an underline on the active one.",
     example: { items: ["Overview", "Activity", "Settings"], active: 0 }
   },
+  Pagination: {
+    props: z.object({
+      pages: z.number().int().min(1),
+      current: o(z.number().int().min(1)).describe("Default 1")
+    }),
+    slots: [],
+    description: "Page numbers with previous and next.",
+    example: { pages: 12, current: 3 }
+  },
   List: {
     props: z.object({ dividers: o(z.boolean()), grow: o(z.boolean()) }),
     slots: ["default"],
@@ -875,6 +947,20 @@ function Text({ element }) {
     }
   );
 }
+function Bullets({ element }) {
+  const p = element.props;
+  const items = p.items ?? [];
+  return /* @__PURE__ */ jsx(Box, { style: { flexDirection: "column", gap: 8 }, children: items.map((item, i) => {
+    const { label, icon, muted } = typeof item === "string" ? { label: item, icon: null, muted: false } : item;
+    const color = muted ? theme.muted : theme.text;
+    const glyph = icon ?? p.icon;
+    const marker = glyph ? /* @__PURE__ */ jsx(IconGlyph, { name: glyph, size: 18, color }) : p.numbered ? /* @__PURE__ */ jsx(Box, { style: { minWidth: 18, color, fontWeight: 600 }, children: `${i + 1}.` }) : /* @__PURE__ */ jsx(Box, { style: { width: 18, height: 22, alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(Box, { style: { width: 6, height: 6, borderRadius: 3, backgroundColor: color } }) });
+    return /* @__PURE__ */ jsxs(Box, { style: { gap: 10, alignItems: glyph ? "center" : "flex-start", fontSize: 15, lineHeight: 1.45, color }, children: [
+      marker,
+      /* @__PURE__ */ jsx(Box, { style: { flexShrink: 1 }, children: label })
+    ] }, i);
+  }) });
+}
 function Image({ element, dir }) {
   const p = element.props;
   const h = p.height ?? 160;
@@ -930,6 +1016,48 @@ function Icon({ element, dir, aligned }) {
   const p = element.props;
   return /* @__PURE__ */ jsx(Box, { style: { flexShrink: 0, ...hug(dir, aligned) }, children: /* @__PURE__ */ jsx(IconGlyph, { name: p.name, size: p.size ?? 20 }) });
 }
+var CHART_LINE = [62, 48, 55, 30, 38, 22, 34, 12];
+var CHART_BARS = [55, 72, 40, 86, 64, 48, 78];
+function Chart({ element, dir }) {
+  const p = element.props;
+  const kind = p.kind ?? "line";
+  const h = p.height ?? 180;
+  const w = p.width ?? (dir === "row" ? void 0 : "100%");
+  const round = kind === "pie" || kind === "donut";
+  const plot = (() => {
+    if (round) {
+      const slice = (from, to, fill, k) => {
+        const a0 = from / 100 * 2 * Math.PI - Math.PI / 2, a1 = to / 100 * 2 * Math.PI - Math.PI / 2;
+        const x0 = 50 + 46 * Math.cos(a0), y0 = 50 + 46 * Math.sin(a0), x1 = 50 + 46 * Math.cos(a1), y1 = 50 + 46 * Math.sin(a1);
+        return /* @__PURE__ */ jsx("path", { d: `M50 50 L${x0} ${y0} A46 46 0 ${to - from > 50 ? 1 : 0} 1 ${x1} ${y1} Z`, fill, stroke: theme.paper, strokeWidth: "1.5" }, k);
+      };
+      return /* @__PURE__ */ jsxs("svg", { width: h - 32, height: h - 32, viewBox: "0 0 100 100", children: [
+        slice(0, 45, theme.lineStrong, 0),
+        slice(45, 75, theme.line, 1),
+        slice(75, 100, theme.fill2, 2),
+        kind === "donut" ? /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r: "26", fill: theme.paper }) : null
+      ] });
+    }
+    const grid = [25, 50, 75].map((y) => /* @__PURE__ */ jsx("line", { x1: "0", y1: y, x2: "300", y2: y, stroke: theme.fill2, strokeWidth: "1", vectorEffect: "non-scaling-stroke" }, y));
+    if (kind === "bar") {
+      const bw = 300 / CHART_BARS.length;
+      return /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 300 100", preserveAspectRatio: "none", children: [
+        grid,
+        CHART_BARS.map((v, i) => /* @__PURE__ */ jsx("rect", { x: i * bw + bw * 0.2, y: 100 - v, width: bw * 0.6, height: v, rx: "2", fill: theme.line }, i))
+      ] });
+    }
+    const pts = CHART_LINE.map((y, i) => `${i / (CHART_LINE.length - 1) * 300},${y}`).join(" ");
+    return /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 300 100", preserveAspectRatio: "none", children: [
+      grid,
+      kind === "area" ? /* @__PURE__ */ jsx("polygon", { points: `0,100 ${pts} 300,100`, fill: theme.fill2 }) : null,
+      /* @__PURE__ */ jsx("polyline", { points: pts, fill: "none", stroke: theme.lineStrong, strokeWidth: "2.5", strokeLinejoin: "round", vectorEffect: "non-scaling-stroke" })
+    ] });
+  })();
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 10, width: w, height: h, flexShrink: 0, ...dir === "row" ? { flexGrow: 1, flexBasis: "0px" } : {} }, children: [
+    p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: p.title }) : null,
+    /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, borderBottom: round ? void 0 : `1.5px solid ${theme.line}`, justifyContent: round ? "center" : void 0, alignItems: round ? "center" : void 0 }, children: plot })
+  ] });
+}
 function AvatarCircle({ initials, size = 40 }) {
   return /* @__PURE__ */ jsx(
     Box,
@@ -1035,8 +1163,35 @@ function Field({ children, height = 42, top = false, error = false }) {
     }
   );
 }
-function Input({ element, dir }) {
+function CodeBoxes({ digits, value, c = GRAY }) {
+  return /* @__PURE__ */ jsx(Box, { style: { gap: 8 }, children: Array.from({ length: digits }, (_, i) => /* @__PURE__ */ jsx(
+    Box,
+    {
+      style: {
+        width: 44,
+        height: 52,
+        borderRadius: 8,
+        border: `1.5px solid ${i === value.length ? c.accent : theme.lineStrong}`,
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: 22,
+        fontWeight: 600,
+        color: theme.ink
+      },
+      children: value[i] ?? ""
+    },
+    i
+  )) });
+}
+function Input({ element, dir, colors }) {
   const p = element.props;
+  if (p.type === "code") {
+    return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 6, ...hug(dir) }, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
+      /* @__PURE__ */ jsx(CodeBoxes, { digits: p.digits ?? 6, value: String(p.value ?? "").slice(0, p.digits ?? 6), c: colors }),
+      p.helper ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 12, color: p.error ? TONES.danger : theme.muted }, children: p.helper }) : null
+    ] });
+  }
   const rows = p.multiline ?? 1;
   const isPassword = p.type === "password";
   const shown = p.value ?? null;
@@ -1046,14 +1201,15 @@ function Input({ element, dir }) {
     /* @__PURE__ */ jsxs(Field, { height: rows > 1 ? rows * 22 + 20 : 42, top: rows > 1, error: !!p.error, children: [
       p.type === "search" ? /* @__PURE__ */ jsx(IconGlyph, { name: "search", size: 18, color: theme.muted }) : null,
       /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, color: content ? theme.ink : theme.muted }, children: content ?? p.placeholder ?? (isPassword ? "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022" : "") }),
-      isPassword ? /* @__PURE__ */ jsx(IconGlyph, { name: "eye-off", size: 18, color: theme.muted }) : null
+      isPassword ? /* @__PURE__ */ jsx(IconGlyph, { name: "eye-off", size: 18, color: theme.muted }) : null,
+      p.type === "date" ? /* @__PURE__ */ jsx(IconGlyph, { name: "calendar", size: 18, color: theme.muted }) : null
     ] }),
     p.helper ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 12, color: p.error ? TONES.danger : theme.muted }, children: p.helper }) : null
   ] });
 }
 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" }),
@@ -1117,6 +1273,133 @@ function Toggle({ element, colors }) {
     /* @__PURE__ */ jsx(Switch, { on: p.on, c: colors })
   ] });
 }
+function Slider({ element, colors: c = GRAY }) {
+  const p = element.props;
+  const [a, b] = p.range ?? [0, p.value ?? 50];
+  const top = Math.max(a, b);
+  const max = top <= 100 ? 100 : Math.pow(10, Math.floor(Math.log10(top * 1.25))) * Math.ceil(top * 1.25 / Math.pow(10, Math.floor(Math.log10(top * 1.25))));
+  const from = a / max * 100, to = b / max * 100;
+  const thumb = (at, k) => /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: `${at}%`, top: 0, marginLeft: -10, width: 20, height: 20, borderRadius: 10, backgroundColor: theme.paper, border: `2px solid ${c.accent}` } }, k);
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 10 }, children: [
+    /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
+    /* @__PURE__ */ jsxs(Box, { style: { position: "relative", height: 20, marginLeft: 10, marginRight: 10 }, children: [
+      /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 0, right: 0, top: 8, height: 4, borderRadius: 2, backgroundColor: theme.fill2 } }),
+      /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: `${from}%`, width: `${to - from}%`, top: 8, height: 4, borderRadius: 2, backgroundColor: c.accent } }),
+      p.range ? thumb(from, 0) : null,
+      thumb(to, 1)
+    ] })
+  ] });
+}
+function Progress({ element, dir, aligned, colors: c = GRAY }) {
+  const p = element.props;
+  const value = Math.max(0, Math.min(100, p.value ?? 40));
+  if (p.steps) {
+    const current = Math.min(p.step ?? 1, p.steps);
+    return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 10 }, children: [
+      /* @__PURE__ */ jsx(FieldLabel, { text: p.label }),
+      /* @__PURE__ */ jsx(Box, { style: { alignItems: "center" }, children: Array.from({ length: p.steps }, (_, i) => {
+        const n = i + 1;
+        const done = n < current, now = n === current;
+        const dot = /* @__PURE__ */ jsx(
+          Box,
+          {
+            style: {
+              width: 28,
+              height: 28,
+              flexShrink: 0,
+              borderRadius: 14,
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 13,
+              fontWeight: 600,
+              backgroundColor: done ? c.accent : theme.paper,
+              border: `2px solid ${done || now ? c.accent : theme.lineStrong}`,
+              color: now ? c.accentText : theme.muted
+            },
+            children: done ? /* @__PURE__ */ jsx(IconGlyph, { name: "check", size: 14, color: c.onAccent, strokeWidth: 3 }) : String(n)
+          },
+          `d${i}`
+        );
+        return n === 1 ? dot : [/* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, height: 2, backgroundColor: n <= current ? c.accent : theme.line } }, `l${i}`), dot];
+      }) })
+    ] });
+  }
+  if (p.shape === "circle") {
+    const r = 26, circumference = 2 * Math.PI * r;
+    return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 8, alignItems: "center", ...hug(dir, aligned), ...dir === "row" ? { alignSelf: "flex-start" } : {} }, children: [
+      /* @__PURE__ */ jsxs(Box, { style: { position: "relative", width: 64, height: 64, alignItems: "center", justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", style: { position: "absolute", top: 0, left: 0 }, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r, fill: "none", stroke: theme.fill2, strokeWidth: "6" }),
+          /* @__PURE__ */ jsx("circle", { cx: "32", cy: "32", r, fill: "none", stroke: c.accent, strokeWidth: "6", strokeLinecap: "round", strokeDasharray: `${circumference * value / 100} ${circumference}`, transform: "rotate(-90 32 32)" })
+        ] }),
+        /* @__PURE__ */ jsx(Box, { style: { fontSize: 14, fontWeight: 600, color: theme.ink }, children: `${Math.round(value)}%` })
+      ] }),
+      p.label ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 13, color: theme.muted }, children: p.label }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 8 }, children: [
+    p.label ? /* @__PURE__ */ jsxs(Box, { style: { justifyContent: "space-between", fontSize: 13 }, children: [
+      /* @__PURE__ */ jsx(Box, { style: { fontWeight: 600, color: theme.text }, children: p.label }),
+      /* @__PURE__ */ jsx(Box, { style: { color: theme.muted }, children: `${Math.round(value)}%` })
+    ] }) : null,
+    /* @__PURE__ */ jsx(Box, { style: { height: 8, borderRadius: 4, backgroundColor: theme.fill2 }, children: /* @__PURE__ */ jsx(Box, { style: { width: `${value}%`, height: 8, borderRadius: 4, backgroundColor: c.accent } }) })
+  ] });
+}
+var MONTHS = ["january", "february", "march", "april", "may", "june", "july", "august", "september", "october", "november", "december"];
+function monthGrid(month) {
+  const m = String(month ?? "").toLowerCase().match(/([a-z]+)\s+(\d{4})/);
+  const index = m ? MONTHS.findIndex((name) => name.startsWith(m[1].slice(0, 3))) : -1;
+  if (!m || index < 0) return { start: 3, days: 31 };
+  const year = Number(m[2]);
+  return { start: new Date(Date.UTC(year, index, 1)).getUTCDay(), days: new Date(Date.UTC(year, index + 1, 0)).getUTCDate() };
+}
+function Calendar({ element, dir, aligned, colors: c = GRAY }) {
+  const p = element.props;
+  const { start, days } = monthGrid(p.month);
+  const [from, to] = p.range ?? [p.selected ?? 0, p.selected ?? 0];
+  const marked = new Set(p.marked ?? []);
+  const cells = [...Array(start).fill(null), ...Array.from({ length: days }, (_, i) => i + 1)];
+  while (cells.length % 7) cells.push(null);
+  const weeks = Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
+  const CELL = 38;
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 4, padding: 12, border: `1.5px solid ${theme.line}`, borderRadius: 12, backgroundColor: theme.paper, ...hug(dir, aligned) }, children: [
+    /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", justifyContent: "space-between", padding: "2px 4px 8px" }, children: [
+      /* @__PURE__ */ jsx(IconGlyph, { name: "chevron-left", size: 18, color: theme.muted }),
+      /* @__PURE__ */ jsx(Box, { style: { fontSize: 15, fontWeight: 600, color: theme.ink }, children: p.month ?? "Month" }),
+      /* @__PURE__ */ jsx(IconGlyph, { name: "chevron-right", size: 18, color: theme.muted })
+    ] }),
+    /* @__PURE__ */ jsx(Box, { children: ["S", "M", "T", "W", "T", "F", "S"].map((d, i) => /* @__PURE__ */ jsx(Box, { style: { width: CELL, justifyContent: "center", fontSize: 12, color: theme.muted }, children: d }, i)) }),
+    weeks.map((week, w) => /* @__PURE__ */ jsx(Box, { children: week.map((d, i) => {
+      const end = d != null && (d === from || d === to) && from > 0;
+      const inside = d != null && from > 0 && d > from && d < to;
+      const band = d != null && from > 0 && to > from && d >= from && d <= to;
+      return /* @__PURE__ */ jsxs(Box, { style: { width: CELL, height: CELL, alignItems: "center", justifyContent: "center", position: "relative" }, children: [
+        band ? /* @__PURE__ */ jsx(Box, { style: { position: "absolute", top: 4, bottom: 4, left: d === from ? CELL / 2 : 0, right: d === to ? CELL / 2 : 0, backgroundColor: theme.fill } }) : null,
+        d != null ? /* @__PURE__ */ jsxs(
+          Box,
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: 16,
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 14,
+              backgroundColor: end ? c.accent : void 0,
+              color: end ? c.onAccent : inside ? theme.ink : theme.text,
+              fontWeight: end ? 600 : 400
+            },
+            children: [
+              String(d),
+              marked.has(d) ? /* @__PURE__ */ jsx(Box, { style: { position: "absolute", bottom: 3, width: 4, height: 4, borderRadius: 2, backgroundColor: end ? c.onAccent : theme.muted } }) : null
+            ]
+          }
+        ) : null
+      ] }, i);
+    }) }, w))
+  ] });
+}
 var LEADING_ICON = { menu: "menu", back: "arrow-left", close: "x" };
 function NavBar({ element }) {
   const p = element.props;
@@ -1198,6 +1481,28 @@ function Tabs({ element, colors: c = GRAY }) {
     i
   )) });
 }
+function pageList(pages, current) {
+  if (pages <= 7) return Array.from({ length: pages }, (_, i) => i + 1);
+  const near = [current - 1, current, current + 1].filter((n) => n > 1 && n < pages);
+  const shown = [1, ...near, pages];
+  const out = [];
+  shown.forEach((n, i) => {
+    if (i && n - shown[i - 1] > 1) out.push("\u2026");
+    out.push(n);
+  });
+  return out;
+}
+function Pagination({ element, dir, aligned, colors: c = GRAY }) {
+  const p = element.props;
+  const pages = Math.max(1, p.pages ?? 1);
+  const current = Math.min(Math.max(1, p.current ?? 1), pages);
+  const cell = (content, key, on = false) => /* @__PURE__ */ jsx(Box, { style: { minWidth: 34, height: 34, padding: "0 6px", borderRadius: 8, alignItems: "center", justifyContent: "center", fontSize: 14, backgroundColor: on ? c.accent : void 0, color: on ? c.onAccent : theme.text, fontWeight: on ? 600 : 400 }, children: content }, key);
+  return /* @__PURE__ */ jsxs(Box, { style: { gap: 4, alignItems: "center", ...hug(dir, aligned) }, children: [
+    cell(/* @__PURE__ */ jsx(IconGlyph, { name: "chevron-left", size: 18, color: current > 1 ? theme.text : theme.line }), "prev"),
+    pageList(pages, current).map((n, i) => n === "\u2026" ? cell(/* @__PURE__ */ jsx(Box, { style: { color: theme.muted }, children: "\u2026" }), `e${i}`) : cell(String(n), n, n === current)),
+    cell(/* @__PURE__ */ jsx(IconGlyph, { name: "chevron-right", size: 18, color: current < pages ? theme.text : theme.line }), "next")
+  ] });
+}
 function List({ element, children, dir, stretch }) {
   const dividers = element.props.dividers ?? true;
   const items = withDir(children, "column");
@@ -1353,7 +1658,9 @@ var registry = {
   Spacer,
   Heading,
   Text,
+  Bullets,
   Image,
+  Chart,
   Icon,
   Avatar,
   Badge,
@@ -1363,9 +1670,13 @@ var registry = {
   Radio,
   Toggle,
   Select,
+  Slider,
+  Progress,
+  Calendar,
   NavBar,
   TabBar,
   Tabs,
+  Pagination,
   List,
   ListItem,
   Table,
@@ -1382,6 +1693,10 @@ var PRIMARY_PROP = {
   Heading: "text",
   Text: "text",
   Image: "label",
+  Chart: "title",
+  Slider: "label",
+  Progress: "label",
+  Calendar: "month",
   Icon: "name",
   Avatar: "initials",
   Badge: "label",
@@ -1454,6 +1769,18 @@ function belongsElsewhere(component, word, asProp) {
   }
   return msg;
 }
+var OBJECT_SWITCHES = /* @__PURE__ */ new Set();
+for (const info of COMPONENTS.values()) {
+  for (const schema of Object.values(info.props)) {
+    const s = unwrap(schema);
+    if (s?.def?.type !== "array") continue;
+    const el = unwrap(s.def.element);
+    for (const option of el?.def?.type === "union" ? el.def.options.map(unwrap) : [el]) {
+      if (option?.def?.type !== "object") continue;
+      for (const [key, value] of Object.entries(option.shape)) if (unwrap(value)?.def?.type === "boolean") OBJECT_SWITCHES.add(key);
+    }
+  }
+}
 function bareWords(component) {
   const info = COMPONENTS.get(component.toLowerCase());
   if (!info) throw new Error(`unknown component ${component}`);
@@ -1570,15 +1897,31 @@ function parseValue(c) {
   }
   if (t.value === "{") {
     const obj = {};
+    let lastKey = null;
     while (!c.isSym("}")) {
       c.skipCommas();
       if (c.isSym("}")) break;
       if (c.done()) throw new Error("unclosed {");
       const k = c.next();
       if (!k || k.kind === "sym") throw new Error("expected key in {\u2026}");
+      if ((k.kind === "word" || k.kind === "num") && !(c.isSym("=") || c.isSym(":"))) {
+        if (k.kind === "word" && OBJECT_SWITCHES.has(k.value)) {
+          obj[k.value] = true;
+          lastKey = null;
+          continue;
+        }
+        if (lastKey) {
+          obj[lastKey] = `${obj[lastKey]} ${k.value}`;
+          continue;
+        }
+        obj[k.value] = true;
+        continue;
+      }
       if (!(c.isSym("=") || c.isSym(":"))) throw new Error(`expected = after ${k.value}`);
       c.next();
+      const unquoted = c.peek()?.kind === "word" || c.peek()?.kind === "num";
       obj[k.value] = parseValue(c);
+      lastKey = unquoted ? k.value : null;
     }
     c.next();
     return obj;
@@ -1896,6 +2239,33 @@ function checkSpec(spec) {
       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);
     }
+    {
+      const p = el.props ?? {};
+      const say = (msg) => 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 (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})`);
+      }
+      if (el.type === "Slider" && backwards(p.range)) say(`range=[${p.range.join(", ")}] goes backwards; write the smaller number first`);
+      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 (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)`);
+      }
+      if (el.type === "Input" && p.digits != null && p.type !== "code") say("digits only applies to type=code");
+    }
     if (el.type === "Table") {
       const { columns, data } = el.props ?? {};
       if (Array.isArray(columns) && Array.isArray(data)) {
@@ -2031,7 +2401,7 @@ function fmt(v) {
   if (typeof v === "number" || typeof v === "boolean" || v === null) return String(v);
   if (Array.isArray(v)) return `[${v.map(fmt).join(", ")}]`;
   if (typeof v === "object") {
-    return `{${Object.entries(v).map(([k, x]) => `${k}=${fmt(x)}`).join(" ")}}`;
+    return `{${Object.entries(v).map(([k, x]) => x === true ? k : `${k}=${fmt(x)}`).join(" ")}}`;
   }
   return JSON.stringify(v);
 }
@@ -2145,6 +2515,8 @@ function describeType(t) {
       return s.def.options.map(describeType).join(" | ");
     case "array":
       return `array of ${describeType(s.def.element)}`;
+    case "tuple":
+      return `[${s.def.items.map(describeType).join(", ")}]`;
     case "object":
       return `{ ${Object.entries(s.shape).map(([k, v]) => `${k}: ${describeType(v)}`).join(", ")} }`;
     default:

package/dist/cli.js

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

package/dist/components.d.ts

@@ -32,19 +32,32 @@ declare function Divider({ element, dir }: Props): React.JSX.Element;
 declare function Spacer({ element }: Props): React.JSX.Element;
 declare function Heading({ element }: Props): React.JSX.Element;
 declare function Text({ element }: Props): React.JSX.Element;
+declare function Bullets({ element }: Props): React.JSX.Element;
 declare function Image({ element, dir }: Props): React.JSX.Element;
 declare function Icon({ element, dir, aligned }: Props): React.JSX.Element;
+declare function Chart({ element, dir }: Props): React.JSX.Element;
 declare function Avatar({ element, dir, aligned }: Props): React.JSX.Element;
 declare function Badge({ element, dir, aligned, colors }: Props): React.JSX.Element;
 declare function Button({ element, dir, aligned, colors: c }: Props): React.JSX.Element;
-declare function Input({ element, dir }: Props): React.JSX.Element;
+declare function Input({ element, dir, colors }: Props): React.JSX.Element;
 declare function Select({ element, dir }: Props): React.JSX.Element;
 declare function Checkbox({ element, dir, aligned, colors }: Props): React.JSX.Element;
 declare function Radio({ element, dir, aligned, colors }: Props): React.JSX.Element;
 declare function Toggle({ element, colors }: Props): React.JSX.Element;
+declare function Slider({ element, colors: c }: Props): React.JSX.Element;
+declare function Progress({ element, dir, aligned, colors: c }: Props): React.JSX.Element;
+/** The weekday (0 = Sunday) the month starts on and its length, from text like "October 2026". Generic if it can't tell. */
+export declare function monthGrid(month?: string | null): {
+    start: number;
+    days: number;
+};
+declare function Calendar({ element, dir, aligned, colors: c }: Props): React.JSX.Element;
 declare function NavBar({ element }: Props): React.JSX.Element;
 declare function TabBar({ element, colors: c }: Props): React.JSX.Element;
 declare function Tabs({ element, colors: c }: Props): React.JSX.Element;
+/** The page numbers to show: all of them up to 7, otherwise the ends and the current page's neighbours. */
+export declare function pageList(pages: number, current: number): (number | "…")[];
+declare function Pagination({ element, dir, aligned, colors: c }: Props): React.JSX.Element;
 declare function List({ element, children, dir, stretch }: Props): React.JSX.Element;
 declare function ListItem({ element, colors }: Props): React.JSX.Element;
 declare function Table({ element }: Props): React.JSX.Element;
@@ -61,7 +74,9 @@ export declare const registry: {
     Spacer: typeof Spacer;
     Heading: typeof Heading;
     Text: typeof Text;
+    Bullets: typeof Bullets;
     Image: typeof Image;
+    Chart: typeof Chart;
     Icon: typeof Icon;
     Avatar: typeof Avatar;
     Badge: typeof Badge;
@@ -71,9 +86,13 @@ export declare const registry: {
     Radio: typeof Radio;
     Toggle: typeof Toggle;
     Select: typeof Select;
+    Slider: typeof Slider;
+    Progress: typeof Progress;
+    Calendar: typeof Calendar;
     NavBar: typeof NavBar;
     TabBar: typeof TabBar;
     Tabs: typeof Tabs;
+    Pagination: typeof Pagination;
     List: typeof List;
     ListItem: typeof ListItem;
     Table: typeof Table;

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-YCIRLKKD.js";
+} from "./chunks/chunk-2IDCJVKK.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-2IDCJVKK.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -38,7 +38,8 @@ function describe(name, schema) {
       return { name, kind: "number", description };
     case "array": {
       const el = unwrap(s.def.element);
-      const hasIcon = el?.def?.type === "object" && "icon" in el.shape;
+      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":
@@ -73,9 +74,9 @@ function languageData() {
 var GROUPS = [
   { name: "Canvas", components: ["Board", "Screen", "Note"] },
   { name: "Layout", components: ["Stack", "Grid", "Card", "Divider", "Spacer"] },
-  { name: "Content", components: ["Heading", "Text", "Image", "Icon", "Avatar", "Badge"] },
-  { name: "Controls", components: ["Button", "Input", "Checkbox", "Radio", "Toggle", "Select"] },
-  { name: "Navigation & data", components: ["NavBar", "TabBar", "Tabs", "List", "ListItem", "Table"] },
+  { name: "Content", components: ["Heading", "Text", "Bullets", "Image", "Chart", "Icon", "Avatar", "Badge"] },
+  { name: "Controls", components: ["Button", "Input", "Checkbox", "Radio", "Toggle", "Select", "Slider", "Progress", "Calendar"] },
+  { name: "Navigation & data", components: ["NavBar", "TabBar", "Tabs", "Pagination", "List", "ListItem", "Table"] },
   { name: "Overlays", components: ["Modal", "Drawer"] }
 ];
 var EXAMPLES = {
@@ -178,6 +179,16 @@ var EXAMPLES = {
     text "Bold" bold
     text "Placeholder lines when lines is set and there's no text:" sm muted
     text lines=3`,
+  Bullets: `board
+  screen custom width=420 height=600
+    text "Bullets" bold
+    bullets items=[Fast setup, No credit card, Cancel anytime]
+    text "numbered" bold
+    bullets numbered items=[Create an account, Verify your email, Invite your team]
+    text "icon= any Lucide icon" bold
+    bullets icon=check items=[Unlimited boards, Share links, Version history]
+    text "One item can change its icon, or be muted" bold
+    bullets icon=check items=[Unlimited boards, Share links, {label="SSO" icon=x muted}]`,
   Image: `board
   screen custom width=480 height=210
     stack row gap=12
@@ -185,6 +196,16 @@ var EXAMPLES = {
       image height=120 width=120 rounded
       image height=120
     text "In a row, an image without a width is square." sm muted`,
+  Chart: `board
+  screen custom width=640 height=430
+    stack row gap=16
+      chart line "line (default)"
+      chart bar "bar"
+    stack row gap=16
+      chart area "area" height=150
+      chart pie "pie" height=150
+      chart donut "donut" height=150
+    text "Charts are placeholders: they show the kind of chart, not data." sm muted`,
   Icon: `board
   screen custom width=360 height=120
     stack row gap=16 align=center
@@ -228,7 +249,7 @@ var EXAMPLES = {
     button primary "Full width" fullWidth
     text "With a board accent, primary buttons fill with it and ghost buttons use it for text." sm muted`,
   Input: `board
-  screen custom width=420 height=540
+  screen custom width=420 height=760
     input "Email" placeholder="you@example.com" helper="We never share it"
     input "Username" value="dana moore" error helper="No spaces allowed"
     input password "Password" value=secret
@@ -236,24 +257,52 @@ var EXAMPLES = {
     input "Message" multiline=3
     stack row gap=8
       input placeholder="grow fills the row" grow
-      button primary "Send"`,
+      button primary "Send"
+    input "Check-in" type=date value="Oct 14, 2026"
+    input "Verification code" type=code value="4821" helper="Sent to (555) 010-2400"`,
   Checkbox: `board
   screen custom width=300 height=100
     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`,
+  Slider: `board
+  screen custom width=380 height=200
+    slider "Volume" value=30
+    slider "Price range" range=[20, 80]`,
+  Progress: `board
+  screen custom width=420 height=330
+    progress "Uploading" value=40
+    progress value=75
+    stack row gap=24
+      progress circle "Storage" value=72
+      progress circle value=15
+    progress "Setup" steps=4 step=2`,
+  Calendar: `board
+  screen custom width=660 height=400
+    stack row gap=24 align=start
+      calendar "October 2026" selected=14
+      calendar "October 2026" range=[12, 18] marked=[3, 9, 22]
+    text "range selects several days; marked adds a dot, e.g. for events." sm muted`,
   NavBar: `board
   screen custom width=380 height=240 padding=0 gap=0
     navbar "leading=menu" leading=menu actions=[search, bell]
@@ -269,6 +318,10 @@ var EXAMPLES = {
   screen custom width=400 height=150
     tabs items=[Overview, Activity, Settings] active=0
     text lines=2`,
+  Pagination: `board
+  screen custom width=420 height=160
+    pagination pages=5 current=2
+    pagination pages=12 current=6`,
   List: `board
   screen custom width=380 height=420
     list

package/examples/dashboard.tsq

@@ -1,5 +1,5 @@
 board "Analytics" accent=blue
-  screen desktop "Dashboard" padding=0 height=640
+  screen desktop "Dashboard" padding=0 height=760
     stack row grow
       stack width=220 border=right fill padding=16 gap=6
         text "Acme" bold
@@ -24,4 +24,9 @@ board "Analytics" accent=blue
             heading "932" level=2
           card "Refunds"
             heading "12" level=2
+        stack row gap=12
+          card "Revenue" grow
+            chart area height=170
+          card "Traffic sources" width=300
+            chart donut height=170
         table columns=[Order, Customer, Status, Total] data=[["#1042", Ana Torres, Paid, "$120"], ["#1041", Ben Cho, Pending, "$80"], ["#1040", Priya Nair, Paid, "$45"]]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "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

@@ -9,7 +9,7 @@ Root canvas (artboard). Holds Screens side by side, plus optional Notes. Must be
 - columns: number
 - gap: number
 - padding: number
-- accent: string — The one UI color: primary buttons, solid badges, checked controls, toggles, active tabs, ghost buttons. blue, indigo, violet, pink, red, orange, green, teal, or a hex color like #1a73e8. Omit for grayscale.
+- accent: string — The one UI color: primary buttons, solid badges, checked controls, toggles, sliders, progress, selected days and pages, active tabs, ghost buttons. blue, indigo, violet, pink, red, orange, green, teal, or a hex color like #1a73e8. Omit for grayscale.
 
 ### Screen
 One view of the product in a device frame. Children stack vertically.
@@ -78,6 +78,12 @@ Body text, or placeholder lines when `lines` is set and `text` is not.
 - bold: boolean
 - align: "left" | "center" | "right"
 
+### Bullets
+Bulleted, numbered or icon list of short lines.
+- items (required): array of string | { label: string, icon: string, muted: boolean } — Text, or {label icon muted} to change one line, e.g. {label=SSO icon=x muted}
+- numbered: boolean — 1. 2. 3. instead of dots
+- icon: string — A Lucide icon instead of dots, e.g. check for a feature list
+
 ### Image
 Image placeholder: a box with an X through it.
 - height: number
@@ -85,6 +91,13 @@ Image placeholder: a box with an X through it.
 - label: string (main text)
 - rounded: boolean
 
+### Chart
+Chart placeholder: a generic line, bar, area, pie or donut shape, no data.
+- kind: "line" | "bar" | "area" | "pie" | "donut" — Default line
+- title: string (main text)
+- height: number — Default 180
+- width: number | string — Default fills the container width
+
 ### Icon
 Line icon from Lucide.
 - name: string (main text) — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
@@ -115,7 +128,8 @@ Text field with optional label. Set multiline for a textarea.
 - label: string (main text)
 - placeholder: string
 - value: string
-- type: "text" | "password" | "search" | "email"
+- type: "text" | "password" | "search" | "email" | "date" | "code" — date shows a calendar icon; code draws one box per digit
+- digits: number — Boxes for type=code, default 6
 - multiline: number — Number of rows; 2 or more makes a textarea
 - helper: string
 - error: boolean — Validation error: red border and red helper text
@@ -142,8 +156,30 @@ 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.
 
+### Slider
+Slider with one handle, or two with `range`.
+- label: string (main text)
+- value: number — Handle position: 0 to 100, or any amount (the track scales to fit)
+- range: [number, number] — Two handles instead, e.g. [20, 80] or [50, 400]
+
+### Progress
+Progress bar, ring (circle), or stepper (steps).
+- label: string (main text)
+- value: number — Percent done
+- shape: "bar" | "circle" — Default bar; circle is a ring with the percent inside
+- steps: number — Draw a stepper with this many steps instead
+- step: number — The current step, with steps
+
+### Calendar
+Month calendar.
+- month: string (main text) — Month and year, e.g. "October 2026"; the days match that month
+- selected: number
+- range: [number, number] — Selected days, e.g. [12, 18]
+- marked: array of number — Days with a dot, e.g. events
+
 ### NavBar
 Top app bar. Place first in a Screen.
 - title: string (main text)
@@ -161,6 +197,11 @@ In-page tabs with an underline on the active one.
 - items (required): array of string
 - active: number
 
+### Pagination
+Page numbers with previous and next.
+- pages (required): number
+- current: number — Default 1
+
 ### List
 Vertical list of ListItems.
 - dividers: boolean