tsquare 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.4.2
+
+- **Toast corners:** `position` also takes `topLeft`, `topRight`, `bottomLeft` and `bottomRight`, besides `top` and `bottom` (centered, the default). Desktop apps often show toasts in a corner.
+
+## 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

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>>;
@@ -214,6 +226,10 @@ export declare const componentDefinitions: {
             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;
@@ -590,6 +606,27 @@ 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";
+                bottomLeft: "bottomLeft";
+                bottomRight: "bottomRight";
+                top: "top";
+                topLeft: "topLeft";
+                topRight: "topRight";
+            }>>>;
+        }, 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", {
@@ -754,6 +791,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>>;
@@ -834,6 +883,10 @@ export declare const catalog: import("@json-render/core").Catalog<{
                 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;
@@ -1210,6 +1263,27 @@ 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";
+                    bottomLeft: "bottomLeft";
+                    bottomRight: "bottomRight";
+                    top: "top";
+                    topLeft: "topLeft";
+                    topRight: "topRight";
+                }>>>;
+            }, z.core.$strip>;
+            slots: never[];
+            description: string;
+            example: {
+                text: string;
+                action: string;
+            };
+        };
     };
 }>;
 export type ComponentName = keyof typeof componentDefinitions;

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

@@ -207,7 +207,7 @@ var wireframeSchema = defineSchema(
       "The root element MUST be a Board. A Board's children are Screens (and optional Notes placed beside them).",
       "Every Screen MUST be a direct child of the Board. Each Screen is one view of the product; use several Screens to show several views or states.",
       "Screens lay out their children top to bottom. Use Stack (direction row/column) and Grid inside a Screen to arrange content.",
-      "Modal and Drawer are overlays. They MUST be direct children of a Screen, and SHOULD be listed last in the Screen's children so they draw on top.",
+      "Modal, Drawer and Toast are overlays. They MUST be direct children of a Screen, and SHOULD be listed last in the Screen's children so they draw on top.",
       "NavBar goes first in a Screen's children and TabBar goes last (before any overlay).",
       "This is a low-fidelity wireframe: prefer placeholders (Image boxes, Text with lines) over invented copy, unless the copy matters to the design.",
       'Every element MUST include a "children" array. Leaf elements use an empty array: "children": [].',
@@ -310,6 +310,15 @@ var componentDefinitions = {
     description: "Bordered container with optional title. Children stack vertically.",
     example: { title: "Revenue", variant: "outline" }
   },
+  Accordion: {
+    props: z.object({
+      title: o(z.string()),
+      open: o(z.boolean()).describe("Show the children. Default closed: only the title row")
+    }),
+    slots: ["default"],
+    description: "Collapsible section: a title row with a chevron, children below when open. Stack several for an FAQ.",
+    example: { title: "Shipping", open: true }
+  },
   Divider: {
     props: z.object({ vertical: o(z.boolean()) }),
     slots: [],
@@ -363,10 +372,11 @@ var componentDefinitions = {
       height: o(z.number()),
       width: o(z.union([z.number(), z.string()])).describe("Default fills the container width"),
       label: o(z.string()),
-      rounded: o(z.boolean())
+      rounded: o(z.boolean()),
+      kind: o(z.enum(["photo", "map"])).describe("map draws roads and a pin instead of the X")
     }),
     slots: [],
-    description: "Image placeholder: a box with an X through it.",
+    description: "Image placeholder: a box with an X through it, or a map.",
     example: { height: 180, label: "Hero photo" }
   },
   Chart: {
@@ -593,6 +603,17 @@ var componentDefinitions = {
     slots: ["default"],
     description: "Panel sliding in from an edge: side nav (left), filters/details (right), or bottom sheet. Must be a direct child of a Screen, listed last.",
     example: { side: "left", title: "Menu", size: 300 }
+  },
+  Toast: {
+    props: z.object({
+      text: o(z.string()),
+      action: o(z.string()).describe('A text button, e.g. "Undo"'),
+      icon: o(iconName),
+      position: o(z.enum(["bottom", "top", "topLeft", "topRight", "bottomLeft", "bottomRight"])).describe("Default bottom (centered), above a TabBar")
+    }),
+    slots: [],
+    description: "Short message over the screen, e.g. after saving. Must be a direct child of a Screen, listed last.",
+    example: { text: "Message sent", action: "Undo" }
   }
 };
 var catalog = defineCatalog(wireframeSchema, {
@@ -743,7 +764,7 @@ function Screen({ element, children }) {
     const type = isValidElement(c) ? c.props.element?.type : null;
     if (type === "NavBar") top.push(c);
     else if (type === "TabBar") bottom.push(c);
-    else if (type === "Modal" || type === "Drawer") overlays.push(c);
+    else if (type === "Modal" || type === "Drawer" || type === "Toast") overlays.push(c);
     else body.push(c);
   }
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
@@ -782,7 +803,7 @@ function Screen({ element, children }) {
               }
             ),
             bottom,
-            overlays
+            overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2)
           ] })
         ]
       }
@@ -885,6 +906,16 @@ function Card({ element, children, dir, stretch }) {
     }
   );
 }
+function Accordion({ element, children }) {
+  const p = element.props;
+  return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", borderBottom: `1px solid ${theme.line}` }, children: [
+    /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", justifyContent: "space-between", gap: 12, padding: "12px 0" }, children: [
+      /* @__PURE__ */ jsx(Box, { style: { fontSize: 15, fontWeight: 600, color: theme.ink }, children: p.title ?? "" }),
+      /* @__PURE__ */ jsx(IconGlyph, { name: p.open ? "chevron-up" : "chevron-down", size: 18, color: theme.muted })
+    ] }),
+    p.open ? /* @__PURE__ */ jsx(Box, { style: { flexDirection: "column", gap: 10, paddingBottom: 14 }, children: withDir(children, "column") }) : null
+  ] });
+}
 function Divider({ element, dir }) {
   const vertical = element.props.vertical ?? dir === "row";
   return vertical ? /* @__PURE__ */ jsx(Box, { style: { width: 1, alignSelf: "stretch", backgroundColor: theme.line, flexShrink: 0 } }) : /* @__PURE__ */ jsx(Box, { style: { height: 1, alignSelf: "stretch", backgroundColor: theme.line, flexShrink: 0 } });
@@ -961,6 +992,7 @@ function Bullets({ element }) {
     ] }, i);
   }) });
 }
+var MAP_ROADS = ["M0 42 C30 38 60 50 100 44", "M38 0 C42 30 34 60 44 100", "M0 78 L100 70", "M72 0 L80 100", "M0 16 L40 22", "M44 60 L100 92"];
 function Image({ element, dir }) {
   const p = element.props;
   const h = p.height ?? 160;
@@ -981,7 +1013,12 @@ function Image({ element, dir }) {
         justifyContent: "center"
       },
       children: [
-        /* @__PURE__ */ jsxs(
+        p.kind === "map" ? /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", preserveAspectRatio: "none", style: { position: "absolute", top: 0, left: 0 }, children: [
+          /* @__PURE__ */ jsx("rect", { x: "0", y: "0", width: "100", height: "100", fill: theme.fill2 }),
+          /* @__PURE__ */ jsx("rect", { x: "62", y: "8", width: "26", height: "22", fill: theme.fill }),
+          /* @__PURE__ */ jsx("rect", { x: "8", y: "64", width: "20", height: "26", fill: theme.fill }),
+          MAP_ROADS.map((d, i) => /* @__PURE__ */ jsx("path", { d, fill: "none", stroke: theme.paper, strokeWidth: i < 2 ? 7 : 4, vectorEffect: "non-scaling-stroke" }, i))
+        ] }) : /* @__PURE__ */ jsxs(
           "svg",
           {
             width: "100%",
@@ -995,6 +1032,10 @@ function Image({ element, dir }) {
             ]
           }
         ),
+        p.kind === "map" ? /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 0, right: 0, top: 0, bottom: 0, alignItems: "center", justifyContent: "center", paddingBottom: 28 }, children: /* @__PURE__ */ jsxs("svg", { width: "28", height: "36", viewBox: "0 0 24 31", children: [
+          /* @__PURE__ */ jsx("path", { d: "M12 1C6.5 1 2 5.3 2 10.7 2 18 12 30 12 30s10-12 10-19.3C22 5.3 17.5 1 12 1z", fill: theme.ink }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "10.5", r: "3.6", fill: theme.paper })
+        ] }) }) : null,
         p.label ? /* @__PURE__ */ jsx(
           Box,
           {
@@ -1003,7 +1044,9 @@ function Image({ element, dir }) {
               fontSize: 12,
               color: theme.muted,
               backgroundColor: theme.fill,
-              borderRadius: 4
+              borderRadius: 4,
+              // a map keeps its pin in the middle, so the label goes in the corner
+              ...p.kind === "map" ? { position: "absolute", left: 8, bottom: 8, backgroundColor: theme.paper } : {}
             },
             children: p.label
           }
@@ -1647,6 +1690,17 @@ function Drawer({ element, children }) {
     }
   ) });
 }
+function Toast({ element, aboveTabBar }) {
+  const p = element.props;
+  const position = p.position ?? "bottom";
+  const top = position.startsWith("top");
+  const side = position.endsWith("Left") ? "flex-start" : position.endsWith("Right") ? "flex-end" : "center";
+  return /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 16, right: 16, justifyContent: side, ...top ? { top: 16 } : { bottom: aboveTabBar ? 92 : 24 } }, children: /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 12, backgroundColor: theme.ink, color: theme.onPrimary, fontSize: 14, boxShadow: "0 6px 20px rgba(0,0,0,0.22)", maxWidth: 420 }, children: [
+    p.icon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.icon, size: 18, color: theme.onPrimary }) : null,
+    /* @__PURE__ */ jsx(Box, { style: { flexShrink: 1 }, children: p.text ?? "" }),
+    p.action ? /* @__PURE__ */ jsx(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null
+  ] }) });
+}
 var registry = {
   Board,
   Screen,
@@ -1654,6 +1708,7 @@ var registry = {
   Stack,
   Grid,
   Card,
+  Accordion,
   Divider,
   Spacer,
   Heading,
@@ -1681,7 +1736,8 @@ var registry = {
   ListItem,
   Table,
   Modal,
-  Drawer
+  Drawer,
+  Toast
 };
 
 // src/text.ts
@@ -1709,7 +1765,9 @@ var PRIMARY_PROP = {
   NavBar: "title",
   ListItem: "title",
   Modal: "title",
-  Drawer: "title"
+  Drawer: "title",
+  Accordion: "title",
+  Toast: "text"
 };
 function unwrap(t) {
   let cur = t;
@@ -2225,7 +2283,7 @@ function checkSpec(spec) {
     if (el.type === "Screen" && !(root.children ?? []).includes(id)) {
       issues.push(`${id}: Screen must be a direct child of the Board`);
     }
-    if (el.type === "Modal" || el.type === "Drawer") {
+    if (el.type === "Modal" || el.type === "Drawer" || el.type === "Toast") {
       const parent = Object.entries(spec.elements).find(([, p]) => p.children?.includes(id));
       if (parent && parent[1].type !== "Screen") {
         issues.push(`${id}: ${el.type} must be a direct child of a Screen (found in ${parent[1].type} "${parent[0]}")`);
@@ -2552,7 +2610,7 @@ var RULES = `## Rules
 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/dist/cli.js

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

package/dist/components.d.ts

@@ -28,6 +28,7 @@ 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;
@@ -63,6 +64,9 @@ 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;
@@ -70,6 +74,7 @@ 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;
@@ -98,5 +103,6 @@ export declare const registry: {
     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-2IDCJVKK.js";
+} from "./chunks/chunk-NREXWHAE.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-2IDCJVKK.js";
+} from "../chunks/chunk-NREXWHAE.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -73,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: "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"] }
+  { name: "Overlays", components: ["Modal", "Drawer", "Toast"] }
 ];
 var EXAMPLES = {
   Board: `board row "Checkout flow" gap=48 accent=blue
@@ -149,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"
@@ -172,13 +180,15 @@ 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
@@ -190,12 +200,13 @@ var EXAMPLES = {
     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
@@ -371,7 +382,24 @@ 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
+  screen desktop "Corners: topLeft, topRight, bottomLeft, bottomRight" width=900 height=420
+    heading "Dashboard" level=2
+    image height=220
+    toast "topRight" position=topRight
+    toast "bottomLeft" action="Undo" position=bottomLeft`
 };
 
 // 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/package.json

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

@@ -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
@@ -85,11 +90,12 @@ Bulleted, numbered or icon list of short lines.
 - 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.
@@ -236,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" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" — Default bottom (centered), above a TabBar