tsquare 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+## 0.4.1
+
+```tsquare
+image map height=200 "Pickup"               # a map placeholder: roads and a pin, instead of the X
+accordion "How long does shipping take?" open
+  text "Orders arrive in 3–5 business days."
+accordion "Can I return an item?"           # closed: only the title row
+toast "Message sent" action="Undo" icon=check   # pinned to the bottom (above a tab bar), or position=top
+```
+
+- **Toast** is an overlay like Modal and Drawer: a direct child of a Screen, listed last.
+- **Measured:** three new requests (a ride map, an FAQ, a "saved" message), two runs per model. All 12 outputs were valid and used the new pieces, except one Haiku run that drew a plain image labeled "Map". The prompt grew by about 195 tokens.
+- **Breadcrumbs** don't need a component: `text "Home / Settings / Profile" sm muted`. The Text docs page now shows this.
+
+## 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.

package/dist/catalog.d.ts

@@ -134,6 +134,18 @@ export declare const componentDefinitions: {
             variant: string;
         };
     };
+    Accordion: {
+        props: z.ZodObject<{
+            title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            open: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+        }, z.core.$strip>;
+        slots: string[];
+        description: string;
+        example: {
+            title: string;
+            open: boolean;
+        };
+    };
     Divider: {
         props: z.ZodObject<{
             vertical: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
@@ -192,12 +204,32 @@ 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>>;
             width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
             label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
             rounded: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+            kind: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                map: "map";
+                photo: "photo";
+            }>>>;
         }, z.core.$strip>;
         slots: never[];
         description: string;
@@ -206,6 +238,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 +334,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>>;
@@ -351,6 +406,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>>;
@@ -405,6 +505,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>>;
@@ -494,6 +606,23 @@ export declare const componentDefinitions: {
             size: number;
         };
     };
+    Toast: {
+        props: z.ZodObject<{
+            text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            action: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+            position: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                bottom: "bottom";
+                top: "top";
+            }>>>;
+        }, z.core.$strip>;
+        slots: never[];
+        description: string;
+        example: {
+            text: string;
+            action: string;
+        };
+    };
 };
 export declare const catalog: import("@json-render/core").Catalog<{
     spec: import("@json-render/core").SchemaType<"object", {
@@ -658,6 +787,18 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 variant: string;
             };
         };
+        Accordion: {
+            props: z.ZodObject<{
+                title: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                open: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+            }, z.core.$strip>;
+            slots: string[];
+            description: string;
+            example: {
+                title: string;
+                open: boolean;
+            };
+        };
         Divider: {
             props: z.ZodObject<{
                 vertical: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
@@ -716,12 +857,32 @@ 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>>;
                 width: z.ZodOptional<z.ZodNullable<z.ZodUnion<readonly [z.ZodNumber, z.ZodString]>>>;
                 label: z.ZodOptional<z.ZodNullable<z.ZodString>>;
                 rounded: z.ZodOptional<z.ZodNullable<z.ZodBoolean>>;
+                kind: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                    map: "map";
+                    photo: "photo";
+                }>>>;
             }, z.core.$strip>;
             slots: never[];
             description: string;
@@ -730,6 +891,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>>;
@@ -806,11 +987,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>>;
@@ -875,6 +1059,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>>;
@@ -929,6 +1158,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>>;
@@ -1018,6 +1259,23 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 size: number;
             };
         };
+        Toast: {
+            props: z.ZodObject<{
+                text: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                action: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                icon: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+                position: z.ZodOptional<z.ZodNullable<z.ZodEnum<{
+                    bottom: "bottom";
+                    top: "top";
+                }>>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                text: string;
+                action: string;
+            };
+        };
     };
 }>;
 export type ComponentName = keyof typeof componentDefinitions;