tsquare 0.3.2 → 0.4.1

package/dist/chunks/{chunk-X46EDSCQ.js → chunk-QLIHML44.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": [].',
@@ -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"],
@@ -303,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: [],
@@ -341,17 +357,39 @@ 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()),
       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: {
+    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 +437,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"),
@@ -440,6 +479,39 @@ var componentDefinitions = {
     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({
@@ -470,6 +542,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"],
@@ -522,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"])).describe("Default bottom, 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, {
@@ -672,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: [
@@ -711,7 +803,7 @@ function Screen({ element, children }) {
               }
             ),
             bottom,
-            overlays
+            overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2)
           ] })
         ]
       }
@@ -814,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 } });
@@ -876,6 +978,21 @@ 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);
+  }) });
+}
+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;
@@ -896,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%",
@@ -910,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,
           {
@@ -918,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
           }
@@ -931,6 +1059,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,
@@ -1036,8 +1206,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;
@@ -1047,7 +1244,8 @@ 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
   ] });
@@ -1118,6 +1316,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;
@@ -1199,6 +1524,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");
@@ -1343,6 +1690,15 @@ function Drawer({ element, children }) {
     }
   ) });
 }
+function Toast({ element, aboveTabBar }) {
+  const p = element.props;
+  const top = p.position === "top";
+  return /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 16, right: 16, justifyContent: "center", ...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,
@@ -1350,11 +1706,14 @@ var registry = {
   Stack,
   Grid,
   Card,
+  Accordion,
   Divider,
   Spacer,
   Heading,
   Text,
+  Bullets,
   Image,
+  Chart,
   Icon,
   Avatar,
   Badge,
@@ -1364,14 +1723,19 @@ var registry = {
   Radio,
   Toggle,
   Select,
+  Slider,
+  Progress,
+  Calendar,
   NavBar,
   TabBar,
   Tabs,
+  Pagination,
   List,
   ListItem,
   Table,
   Modal,
-  Drawer
+  Drawer,
+  Toast
 };
 
 // src/text.ts
@@ -1383,6 +1747,10 @@ var PRIMARY_PROP = {
   Heading: "text",
   Text: "text",
   Image: "label",
+  Chart: "title",
+  Slider: "label",
+  Progress: "label",
+  Calendar: "month",
   Icon: "name",
   Avatar: "initials",
   Badge: "label",
@@ -1395,7 +1763,9 @@ var PRIMARY_PROP = {
   NavBar: "title",
   ListItem: "title",
   Modal: "title",
-  Drawer: "title"
+  Drawer: "title",
+  Accordion: "title",
+  Toast: "text"
 };
 function unwrap(t) {
   let cur = t;
@@ -1455,6 +1825,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}`);
@@ -1571,15 +1953,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;
@@ -1883,7 +2281,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]}")`);
@@ -1897,6 +2295,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)) {
@@ -2032,7 +2457,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);
 }
@@ -2146,6 +2571,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:
@@ -2181,7 +2608,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.`;