tsquare 0.3.2 → 0.4.1

package/dist/cli.js

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

package/dist/components.d.ts

@@ -28,28 +28,45 @@ declare function Note({ element, dir, aligned }: Props): React.JSX.Element;
 declare function Stack({ element, children, dir: parentDir, stretch }: Props): React.JSX.Element;
 declare function Grid({ element, children }: Props): React.JSX.Element;
 declare function Card({ element, children, dir, stretch }: Props): React.JSX.Element;
+declare function Accordion({ element, children }: Props): React.JSX.Element;
 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;
 declare function Modal({ element, children }: Props): React.JSX.Element;
 declare function Drawer({ element, children }: Props): React.JSX.Element;
+declare function Toast({ element, aboveTabBar }: Props & {
+    aboveTabBar?: boolean;
+}): React.JSX.Element;
 export declare const registry: {
     Board: typeof Board;
     Screen: typeof Screen;
@@ -57,11 +74,14 @@ export declare const registry: {
     Stack: typeof Stack;
     Grid: typeof Grid;
     Card: typeof Card;
+    Accordion: typeof Accordion;
     Divider: typeof Divider;
     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,13 +91,18 @@ 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;
     Modal: typeof Modal;
     Drawer: typeof Drawer;
+    Toast: typeof Toast;
 };
 export {};

package/dist/index.js

@@ -20,7 +20,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-X46EDSCQ.js";
+} from "./chunks/chunk-QLIHML44.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-X46EDSCQ.js";
+} from "../chunks/chunk-QLIHML44.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":
@@ -72,11 +73,11 @@ function languageData() {
 // src/playground/reference.ts
 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: "Overlays", components: ["Modal", "Drawer"] }
+  { name: "Layout", components: ["Stack", "Grid", "Card", "Accordion", "Divider", "Spacer"] },
+  { 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", "Toast"] }
 ];
 var EXAMPLES = {
   Board: `board row "Checkout flow" gap=48 accent=blue
@@ -148,6 +149,14 @@ var EXAMPLES = {
         text lines=3
       card "filled" variant=filled grow
         text lines=3`,
+  Accordion: `board
+  screen custom width=380 height=330 gap=0
+    heading "FAQ" level=3
+    accordion "How long does shipping take?" open
+      text "Orders arrive in 3\u20135 business days." muted
+    accordion "Can I return an item?"
+    accordion "Do you ship internationally?"
+    accordion "How do I track my order?"`,
   Divider: `board
   screen custom width=360 height=150
     text "Above"
@@ -171,20 +180,43 @@ var EXAMPLES = {
     heading "Level 3" level=3
     heading "Centered" level=3 align=center`,
   Text: `board
-  screen custom width=360 height=300
+  screen custom width=360 height=370
     text "Body text, default size"
     text lg "Large"
     text sm "Small and muted" muted
     text "Bold" bold
     text "Placeholder lines when lines is set and there's no text:" sm muted
-    text lines=3`,
+    text lines=3
+    text "Breadcrumbs are small muted text:" sm muted
+    text "Home / Settings / Profile" sm muted`,
+  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
+  screen custom width=480 height=400
     stack row gap=12
       image "label" height=120 width=160
       image height=120 width=120 rounded
       image height=120
-    text "In a row, an image without a width is square." sm muted`,
+    text "In a row, an image without a width is square." sm muted
+    image map height=150 "Map"`,
+  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 +260,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,7 +268,9 @@ 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
@@ -262,6 +296,24 @@ var EXAMPLES = {
     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]
@@ -277,6 +329,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
@@ -326,7 +382,19 @@ var EXAMPLES = {
     drawer bottom "Share" size=280
       list dividers=false
         listitem "Copy link" leadingIcon=link
-        listitem "Message" leadingIcon=message-circle`
+        listitem "Message" leadingIcon=message-circle`,
+  Toast: `board
+  screen phone "Bottom, above a tab bar"
+    heading "Inbox" level=2
+    list
+      listitem "Ana Torres" subtitle="Lunch on Friday?" leading=avatar
+      listitem "Ben Cho" subtitle="Draft attached" leading=avatar
+    tabbar items=[{label=Inbox icon=inbox}, {label=Settings icon=settings}]
+    toast "Message sent" action="Undo" icon=check
+  screen phone "Top"
+    heading "Profile" level=2
+    image height=160
+    toast "Changes saved" position=top`
 };
 
 // src/playground/index.ts

package/dist/prompt.d.ts

@@ -13,7 +13,7 @@ export declare function componentDocs(): {
     props: PropDoc[];
 }[];
 export declare function componentReference(): string;
-export declare const RULES = "## Rules\n1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them.\n2. Each Screen is one view of the product. Use several Screens to show several views or states.\n3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.\n4. NavBar is pinned to the top of its Screen and TabBar to the bottom.\n5. Modal and Drawer are overlays. They must be direct children of a Screen.\n6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.\n7. Only use the components and props listed below. All props are optional unless marked required.\n8. Wireframes are grayscale. The only UI colors: Board accent (one color for primary buttons, checked controls, toggles, active tabs and ghost buttons), Badge tone (success, warning, danger) and Input error. Only add an accent if the request asks for color or a brand.";
+export declare const RULES = "## Rules\n1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them.\n2. Each Screen is one view of the product. Use several Screens to show several views or states.\n3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.\n4. NavBar is pinned to the top of its Screen and TabBar to the bottom.\n5. Modal, Drawer and Toast are overlays. They must be direct children of a Screen.\n6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.\n7. Only use the components and props listed below. All props are optional unless marked required.\n8. Wireframes are grayscale. The only UI colors: Board accent (one color for primary buttons, checked controls, toggles, active tabs and ghost buttons), Badge tone (success, warning, danger) and Input error. Only add an accent if the request asks for color or a brand.";
 export declare const TEXT_FORMAT = "## Output format: wireframe text\nOne element per line. Indent children two spaces under their parent. The first line is the board.\n\nA line is the component name in lowercase, followed by arguments separated by spaces:\n- \"a quoted string\" sets the component's main text prop (marked \"main text\" below)\n- a bare word that is one of the component's option values sets that option: phone, desktop, primary, ghost, row, sm, left, bottom, password, \u2026\n- a bare prop name sets that component's yes/no prop to true, only on components that have it (see each component's props below): checked (checkbox, radio), fullWidth (button), muted (text), grow (stack, card, input, list). `off` and `unchecked` set on/checked to false\n- key=value sets any prop. Values: \"string\", number, true/false, bare word, [list, of, values], {key=value key=value}\n\nComments: a line that starts with # is a comment. A comment must be on its own line, never after an element on the same line. Anywhere else, # is ordinary text: [#1001, #1002], \"Order #12345\", accent=#1a73e8.\n\nLists: items are separated by commas, and an item can contain spaces without quotes: [All notes, Pinned, Shared]. To put a comma inside an item, quote the item: [\"$1,200\", \"Smith, J\"]. Inside quotes, write \\\" for a quote character. Numbers in a list of text are fine: [2023, 2024].\n\nIf a bare word could mean more than one prop, write it as key=value.";
 export declare const EXAMPLE_REQUEST = "Two phone screens for a recipe app: a browse screen with search, category tabs, a grid of recipe cards and a tab bar; and a recipe detail screen with its options sheet open.";
 /** The system prompt for writing wireframe text. */

package/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.2",
+  "version": "0.4.1",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",

package/skill/tsquare/SKILL.md

@@ -47,7 +47,7 @@ If a bare word could mean more than one prop, write it as key=value.
 2. Each Screen is one view of the product. Use several Screens to show several views or states.
 3. A Screen lays out its children top to bottom. Use Stack (direction row or column) and Grid to arrange content.
 4. NavBar is pinned to the top of its Screen and TabBar to the bottom.
-5. Modal and Drawer are overlays. They must be direct children of a Screen.
+5. Modal, Drawer and Toast are overlays. They must be direct children of a Screen.
 6. This is a low-fidelity wireframe. Prefer placeholders (Image boxes, Text with lines) over invented copy unless the copy matters.
 7. Only use the components and props listed below. All props are optional unless marked required.
 8. Wireframes are grayscale. The only UI colors: Board accent (one color for primary buttons, checked controls, toggles, active tabs and ghost buttons), Badge tone (success, warning, danger) and Input error. Only add an accent if the request asks for color or a brand.

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.
@@ -55,6 +55,11 @@ Bordered container with optional title. Children stack vertically.
 - grow: boolean
 - width: number | string — Fixed width, e.g. 320. Default fills the space.
 
+### Accordion
+Collapsible section: a title row with a chevron, children below when open. Stack several for an FAQ.
+- title: string (main text)
+- open: boolean — Show the children. Default closed: only the title row
+
 ### Divider
 Thin separator line.
 - vertical: boolean
@@ -78,12 +83,26 @@ 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.
+Image placeholder: a box with an X through it, or a map.
 - height: number
 - width: number | string — Default fills the container width
 - label: string (main text)
 - rounded: boolean
+- kind: "photo" | "map" — map draws roads and a pin instead of the X
+
+### 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.
@@ -115,7 +134,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
@@ -145,6 +165,27 @@ Dropdown field (closed state).
 - 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)
@@ -162,6 +203,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
@@ -196,3 +242,10 @@ Panel sliding in from an edge: side nav (left), filters/details (right), or bott
 - size: number — Width for left/right, height for bottom
 - scrim: boolean — Dim the screen behind. Default true.
 - handle: boolean — Grab handle on bottom sheets. Default true for bottom.
+
+### Toast
+Short message over the screen, e.g. after saving. Must be a direct child of a Screen, listed last.
+- text: string (main text)
+- action: string — A text button, e.g. "Undo"
+- icon: string — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
+- position: "bottom" | "top" — Default bottom, above a TabBar