tsquare 0.1.0 → 0.3.0

package/dist/playground/reference.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Examples for the playground's Components tab and the generated component
+ * docs. Each one is a complete wireframe so it can be opened in the editor
+ * as-is. Every catalog component needs one, in a group, and each must compile:
+ * `npm run build` fails otherwise, and the playground refuses to start.
+ */
+export declare const GROUPS: {
+    name: string;
+    components: string[];
+}[];
+export declare const EXAMPLES: Record<string, string>;

package/dist/print.d.ts

@@ -0,0 +1,2 @@
+import type { Spec } from "@json-render/core";
+export declare function printWireframeText(spec: Spec, indentUnit?: string): string;

package/dist/prompt-example.d.ts

@@ -0,0 +1,3 @@
+import type { Spec } from "@json-render/core";
+/** The worked example in the model prompt (also used by the format eval). */
+export declare const exampleSpec: Spec;

package/dist/prompt.d.ts

@@ -0,0 +1,22 @@
+export interface PropDoc {
+    name: string;
+    type: string;
+    required: boolean;
+    /** This prop is filled by a quoted string, e.g. the label of `button "Save"`. */
+    main: boolean;
+    description?: string;
+}
+/** Every component with its description and props, straight from the catalog. */
+export declare function componentDocs(): {
+    name: string;
+    description: string;
+    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 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. */
+export declare function wireframePrompt(): string;
+/** Follow-up message asking a model to fix the problems in its last reply. */
+export declare function repairPrompt(issues: string): string;

package/dist/render.d.ts

@@ -0,0 +1,40 @@
+import type { Spec } from "@json-render/core";
+export declare class SpecError extends Error {
+    issues: string[];
+    constructor(issues: string[]);
+}
+/** Catalog validation plus the structural rules the renderer depends on. */
+export declare function checkSpec(spec: Spec): string[];
+export interface BoardItem {
+    type: "Screen" | "Note";
+    /** Screen name or note text, for labels in tools like the playground. */
+    name: string;
+    /** Box on the board in px, including the screen's name label above its frame. */
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+/**
+ * Where everything sits on the board: the canvas size (Satori needs it up
+ * front) and each screen's and note's box, laid out in rows exactly as the
+ * Board component does.
+ */
+export declare function boardLayout(spec: Spec): {
+    width: number;
+    height: number;
+    items: BoardItem[];
+};
+/** The canvas size for a board. */
+export declare function boardSize(spec: Spec): {
+    width: number;
+    height: number;
+};
+export interface RenderWireframeOptions {
+    /** Skip validation (e.g. while a spec is still streaming in). */
+    skipValidation?: boolean;
+}
+export declare function renderWireframeSvg(spec: Spec, opts?: RenderWireframeOptions): Promise<string>;
+export declare function renderWireframePng(spec: Spec, opts?: RenderWireframeOptions & {
+    scale?: number;
+}): Promise<Buffer<ArrayBufferLike>>;

package/dist/schema.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Wireframe spec schema. Same flat element shape as the other json-render
+ * renderers (root + elements map), with wireframe-specific rules for the
+ * generated LLM prompt.
+ */
+export declare const wireframeSchema: import("@json-render/core").Schema<{
+    spec: import("@json-render/core").SchemaType<"object", {
+        root: import("@json-render/core").SchemaType<"string", unknown>;
+        elements: import("@json-render/core").SchemaType<"record", import("@json-render/core").SchemaType<"object", {
+            type: import("@json-render/core").SchemaType<"ref", string>;
+            props: import("@json-render/core").SchemaType<"propsOf", string>;
+            children: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            visible: {
+                optional: true;
+                kind: "any";
+                inner?: unknown;
+            };
+            repeat: {
+                optional: true;
+                kind: "any";
+                inner?: unknown;
+            };
+        }>>;
+    }>;
+    catalog: import("@json-render/core").SchemaType<"object", {
+        components: import("@json-render/core").SchemaType<"map", {
+            props: import("@json-render/core").SchemaType<"zod", unknown>;
+            slots: import("@json-render/core").SchemaType<"array", import("@json-render/core").SchemaType<"string", unknown>>;
+            description: import("@json-render/core").SchemaType<"string", unknown>;
+            example: import("@json-render/core").SchemaType<"any", unknown>;
+        }>;
+    }>;
+}>;

package/dist/share.d.ts

@@ -0,0 +1,4 @@
+/** Largest decoded text accepted, in bytes. Plenty for a board; stops a tiny URL from inflating into megabytes. */
+export declare const MAX_SHARED_TEXT = 64000;
+export declare function encodeWireframe(text: string): string;
+export declare function decodeWireframe(data: string): string;

package/dist/suggest.d.ts

@@ -0,0 +1,5 @@
+/** Edit distance counting a swap of neighbouring letters as one edit ("serach" → search). */
+export declare function editDistance(a: string, b: string): any;
+/** Up to `limit` candidates within a small edit distance of `word`, closest first. */
+export declare function closeMatches(word: string, candidates: string[], limit?: number): string[];
+export declare function unknownComponentMessage(name: string, components: string[]): string;

package/dist/text.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Text syntax for wireframes. Compiles to the same flat json-render spec.
+ *
+ *   board "Notes app"
+ *     screen phone "Sign in" padding=28
+ *       heading "Welcome back"
+ *       input "Email" placeholder="you@example.com"
+ *       stack row justify=between
+ *         checkbox "Remember me" checked
+ *         button "Forgot?" ghost sm
+ *       button "Sign in" primary lg fullWidth
+ *
+ * Line = component name, then arguments, children indented below.
+ * Arguments:
+ *   "quoted"      → the component's main text prop (label, title, text…)
+ *   bare word     → an enum value (phone, primary, row, sm…) or a boolean prop set to true (checked)
+ *   key=value     → any prop; value is "string", number, true/false, word, [list] or {key=value …}
+ *                   list items are separated by commas only, so [Ana Torres, Admin] is two items;
+ *                   quote an item that contains a comma: ["$1,200", "Smith, J"]
+ *   # comment        → only on a line of its own; anywhere else # is text ([#1001, …], accent=#1a73e8)
+ */
+import type { Spec } from "@json-render/core";
+/** Which prop a quoted string fills, per component. */
+export declare const PRIMARY_PROP: Record<string, string>;
+/**
+ * For an error message: where a prop name or bare word that this component doesn't take
+ * belongs instead, e.g. fullWidth on an input → "fullWidth is a Button prop". Empty if nowhere.
+ */
+export declare function belongsElsewhere(component: string, word: string, asProp: boolean): string;
+/** What a component accepts as bare words, for docs: option values (with their prop), ambiguous values, and boolean props. */
+export declare function bareWords(component: string): {
+    options: {
+        value: string;
+        prop: string;
+    }[];
+    ambiguous: string[];
+    booleans: string[];
+    wordPrimary: boolean;
+};
+export interface TextIssue {
+    line: number;
+    message: string;
+}
+export interface ParseResult {
+    spec: Spec | null;
+    issues: TextIssue[];
+    /** element id → source line, for mapping validation errors back */
+    lines: Record<string, number>;
+}
+export declare function parseWireframeText(source: string): ParseResult;

package/examples/checkout.tsq

@@ -0,0 +1,15 @@
+board row "Checkout" accent=green
+  screen phone "Cart"
+    navbar "Cart" leading=back
+    list
+      listitem "Oat latte" subtitle="Large, extra shot" leading=image trailing=text trailingText="$5.40"
+      listitem "Croissant" subtitle="Warm" leading=image trailing=text trailingText="$3.20"
+    spacer
+    button primary lg "Checkout · $8.60" fullWidth
+  screen phone "Pay"
+    navbar "Cart" leading=back
+    text lines=4
+    drawer bottom "Payment" size=300
+      select "Card" value="Visa ending 6411"
+      toggle "Save card" on
+      button primary lg "Pay $8.60" fullWidth

package/examples/dashboard.tsq

@@ -0,0 +1,27 @@
+board "Analytics" accent=blue
+  screen desktop "Dashboard" padding=0 height=640
+    stack row grow
+      stack width=220 border=right fill padding=16 gap=6
+        text "Acme" bold
+        list dividers=false
+          listitem "Overview" leadingIcon=layout-grid
+          listitem "Customers" leadingIcon=users
+          listitem "Orders" leadingIcon=receipt
+          listitem "Settings" leadingIcon=settings
+      stack grow padding=24 gap=20
+        stack row justify=between align=center
+          heading "Overview" level=2
+          stack row gap=8
+            input search placeholder="Search" width=220
+            button primary "Export" leadingIcon=download
+            avatar "DM"
+        grid columns=4 gap=12
+          card "Revenue"
+            heading "$48.2k" level=2
+          card "Orders"
+            heading "1,284" level=2
+          card "Customers"
+            heading "932" level=2
+          card "Refunds"
+            heading "12" level=2
+        table columns=[Order, Customer, Status, Total] data=[["#1042", Ana Torres, Paid, "$120"], ["#1041", Ben Cho, Pending, "$80"], ["#1040", Priya Nair, Paid, "$45"]]

package/examples/notes-mobile.tsq

@@ -0,0 +1,84 @@
+board row "Notes app — mobile"
+  screen phone "1 · Sign in" padding=28 gap=18
+    spacer size=36
+    image width=64 height=64 rounded
+    heading "Welcome back" level=1
+    text "Sign in to sync your notes." muted
+    input email "Email" placeholder="you@example.com"
+    input password "Password" value=hunter22
+    stack row justify=between
+      checkbox "Remember me" checked
+      button ghost sm "Forgot?"
+    button primary lg "Sign in" fullWidth
+    stack row gap=12 align=center
+      stack grow
+        divider
+      text sm "or" muted
+      stack grow
+        divider
+    button secondary lg "Continue with Google" fullWidth leadingIcon=globe
+    spacer
+    text sm "New here? Create an account" align=center muted
+  screen phone "2 · Notes"
+    navbar "Notes" leading=menu actions=[bell, more-vertical]
+    input search placeholder="Search notes"
+    tabs items=[All, Pinned, Shared] active=0
+    list
+      listitem "Grocery list" subtitle="Eggs, oat milk, basil…" leadingIcon=shopping-cart trailing=text trailingText="9:12"
+      listitem "Trip ideas" subtitle="Lisbon in October?" leadingIcon=map trailing=badge trailingText="2"
+      listitem leading=image trailing=chevron
+      listitem leading=image trailing=chevron
+      listitem leading=image trailing=chevron
+    stack row justify=end grow align=end
+      button primary "New note" leadingIcon=plus
+    tabbar items=[{label=Notes icon=notebook-pen}, {label=Search icon=search}, {label=Shared icon=users}, {label=Profile icon=user}] active=0
+  screen phone "3 · Side menu (drawer)"
+    navbar "Notes" leading=menu actions=[bell, more-vertical]
+    list
+      listitem leading=image
+      listitem leading=image
+      listitem leading=image
+      listitem leading=image
+      listitem leading=image
+      listitem leading=image
+    drawer left size=290
+      stack row gap=12
+        avatar "DM" size=44
+        stack gap=2
+          text "Dana Moore" bold
+          text sm "dana@example.com" muted
+      divider
+      list dividers=false
+        listitem "All notes" leadingIcon=notebook-pen trailing=text trailingText="24"
+        listitem "Folders" leadingIcon=folder trailing=chevron
+        listitem "Archive" leadingIcon=archive
+        listitem "Settings" leadingIcon=settings
+      spacer
+      button secondary "Sign out" leadingIcon=log-out fullWidth
+  screen phone "4 · Discard draft (modal)"
+    navbar "New note" leading=close actions=[image, check] align=center
+    heading "Untitled" level=2
+    text lines=7
+    stack row gap=8
+      badge outline "work"
+      badge outline "ideas"
+    modal "Discard this draft?"
+      text "You'll lose what you've written so far." muted
+      stack row justify=end gap=8
+        button ghost "Keep editing"
+        button primary "Discard"
+  screen phone "5 · Note options (bottom sheet)"
+    navbar leading=back actions=[share, more-horizontal]
+    image "Cover image" height=180
+    heading "Trip ideas" level=1
+    text lines=5
+    drawer bottom "Note options" size=400
+      toggle "Pin to top" on
+      toggle "Share with link" on=false
+      select "Folder" value=Travel
+      stack gap=10
+        text sm "Reminder" bold
+        stack row gap=20
+          radio "None" checked
+          radio "Tomorrow"
+          radio "Pick date"

package/examples/notes-web.tsq

@@ -0,0 +1,54 @@
+board "Notes app — web"
+  screen desktop "Workspace overview" padding=0 gap=0
+    stack row grow gap=0 align=stretch
+      stack width=240 padding=20 gap=6 border=right fill
+        stack row gap=10
+          image width=32 height=32 rounded
+          text "Notebook" bold
+        spacer size=12
+        list dividers=false
+          listitem "Overview" leadingIcon=layout-dashboard
+          listitem "All notes" leadingIcon=notebook-pen trailing=text trailingText="128"
+          listitem "Shared" leadingIcon=users
+          listitem "Settings" leadingIcon=settings
+        spacer
+        stack row gap=10
+          avatar "DM" size=32
+          text sm "Dana Moore"
+      stack grow padding=32 gap=24
+        stack row gap=12
+          heading "Overview" level=1
+          spacer
+          stack width=260
+            input search placeholder=Search
+          button "New note" leadingIcon=plus
+        grid columns=3 gap=20
+          card "Notes this week"
+            heading "42" level=1
+            text lines=1
+          card "Shared with you"
+            heading "7" level=1
+            text lines=1
+          card filled "Storage"
+            heading "1.2 GB" level=1
+            text lines=1
+        tabs items=[Recent, Pinned, Archived] active=0
+        table columns=[Title, Folder, Owner, Updated] data=[["Grocery list", Personal, Dana, "9:12 AM"], ["Trip ideas", Travel, Dana, Yesterday], ["Q4 planning", Work, Sam, Mon], ["Reading list", Personal, Dana, "Sep 20"]]
+  screen desktop "Filters (right drawer)" padding=32 gap=24
+    stack row gap=12
+      heading "All notes" level=1
+      spacer
+      button secondary "Filters" leadingIcon=sliders-horizontal
+    table columns=[Title, Folder, Owner, Updated] rows=9
+    drawer right "Filters" size=340
+      select "Folder" placeholder="Any folder"
+      select "Owner" value=Me
+      divider
+      checkbox "Pinned only" checked
+      checkbox "Has attachments"
+      checkbox "Shared with me"
+      spacer
+      stack row justify=end gap=8
+        button ghost "Reset"
+        button "Apply filters"
+  note "Filters open in a right drawer so the table keeps its width. Open question: persist filters per workspace?" color=yellow

package/examples/sign-in.tsq

@@ -0,0 +1,14 @@
+board "Sign in"
+  screen phone "Sign in" padding=28 gap=16
+    spacer size=24
+    heading "Welcome back" level=1
+    text "Sign in to sync your notes." muted
+    input email "Email" placeholder="you@example.com"
+    input password "Password"
+    stack row justify=between
+      checkbox "Remember me" checked
+      button ghost sm "Forgot?"
+    button primary lg "Sign in" fullWidth
+    spacer
+    text sm "New here? Create an account" align=center muted
+  note "Show the error state when the password is wrong" width=200

package/examples/states.tsq

@@ -0,0 +1,16 @@
+board row "Empty and error states"
+  screen phone "No notes yet"
+    navbar "Notes" actions=[plus]
+    stack grow justify=center align=center gap=12 padding=24
+      image "Illustration" height=140 width=200
+      heading "No notes yet" level=2
+      text "Your notes will show up here." muted align=center
+      button primary "New note" leadingIcon=plus
+  screen phone "Couldn't load"
+    navbar "Notes" actions=[plus]
+    stack grow justify=center align=center gap=12 padding=24
+      icon triangle-alert size=40
+      heading "Something went wrong" level=2
+      text "Check your connection and try again." muted align=center
+      button secondary "Try again" leadingIcon=refresh-cw
+      badge "Offline" tone=warning

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",
@@ -23,13 +23,26 @@
     "url": "https://github.com/tsquare-js/tsquare/issues"
   },
   "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./playground": {
+      "types": "./dist/playground/index.d.ts",
+      "import": "./dist/playground/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "bin": {
     "tsquare": "bin/tsquare.js"
   },
   "files": [
     "bin/",
-    "src/",
+    "dist/",
     "skill/tsquare/",
+    "examples/*.tsq",
+    "assets/mark.png",
     "LICENSE",
     "README.md"
   ],
@@ -41,28 +54,39 @@
     "check": "tsx src/cli.ts check",
     "fmt": "tsx src/cli.ts fmt",
     "prompt": "tsx src/cli.ts prompt",
-    "playground": "tsx playground/server.ts",
+    "playground": "tsx src/cli.ts playground",
     "skill": "tsx skill/build.ts",
     "docs": "tsx docs/build.ts",
     "typecheck": "tsc",
     "examples": "for f in examples/*.tsq; do tsx src/cli.ts render $f -o ${f%.tsq}.png --scale 2; done",
     "eval:prompts": "tsx eval/prompts.ts",
-    "eval:score": "tsx eval/score.ts"
+    "eval:score": "tsx eval/score.ts",
+    "build": "tsx scripts/build.ts",
+    "prepare": "npm run build"
   },
   "dependencies": {
     "@fontsource/inter": "5.3.0",
     "@json-render/core": "^0.21.0",
     "@json-render/image": "^0.21.0",
     "@resvg/resvg-js": "^2.6.2",
+    "@types/node": ">=20",
+    "@types/react": "^19.3.0",
     "lucide": "1.48.0",
     "react": "^19.3.0",
-    "tsx": "^4.23.15",
     "zod": "^4.6.5"
   },
   "devDependencies": {
-    "@types/node": "^26.6.3",
-    "@types/react": "^19.3.0",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.11.1",
+    "@codemirror/language": "^6.12.4",
+    "@codemirror/lint": "^6.9.7",
+    "@codemirror/search": "^6.7.2",
+    "@codemirror/state": "^6.7.6",
+    "@codemirror/view": "^6.43.13",
+    "@lezer/highlight": "^1.2.5",
+    "esbuild": "^0.28.2",
     "gpt-tokenizer": "^4.0.0",
+    "tsx": "^4.23.15",
     "typescript": "^7.0.2"
   }
 }

package/skill/tsquare/SKILL.md

@@ -13,13 +13,13 @@ tsquare is a small text language for UI wireframe boards. You write a `.tsq` fil
 2. **Check:** `tsquare check <name>.tsq`. It lists problems by line, with the valid options or a "did you mean". Fix every one and check again until it says the file is valid.
 3. **Render:** `tsquare render <name>.tsq -o <name>.png --scale 2` (use `-o <name>.svg` for docs that take SVG).
 4. **Look at the PNG** before showing it. The checker can't see layout, so check for:
-   - content cut off at the bottom of a screen (screens have a fixed height; nothing warns about clipping). Remove content, split it into another screen, or use `device=custom` with a larger `height`.
+   - content cut off at the bottom of a screen (screens have a fixed height; nothing warns about clipping). Remove content, split it into another screen, or give the screen a larger `height` (it works on any device).
    - cramped rows, or text squeezed into narrow columns.
    - anything the request asked for that's missing.
    Fix the `.tsq` and render again.
 5. **Deliver** the image path and the `.tsq` source, so the user can edit it later.
 
-If `tsquare` isn't found, stop and ask the user how it's installed. From a checkout of the repo, `npm link` makes the command available.
+If `tsquare` isn't installed, run it through npx (`npx tsquare check <name>.tsq`); it needs Node 20 or newer. If that fails, stop and ask the user how they want it installed.
 
 ## Keep in mind
 
@@ -33,9 +33,10 @@ One element per line. Indent children two spaces under their parent. The first l
 A line is the component name in lowercase, followed by arguments separated by spaces:
 - "a quoted string" sets the component's main text prop (marked "main text" in reference.md)
 - a bare word that is one of the component's option values sets that option: phone, desktop, primary, ghost, row, sm, left, bottom, password, …
-- a bare prop name sets a boolean prop to true: checked, fullWidth, grow, muted. `off` and `unchecked` set on/checked to false
+- 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
 - key=value sets any prop. Values: "string", number, true/false, bare word, [list, of, values], {key=value key=value}
-- # starts a comment
+
+Comments: 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.
 
 Lists: 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].
 

package/skill/tsquare/reference.md

@@ -15,8 +15,8 @@ Root canvas (artboard). Holds Screens side by side, plus optional Notes. Must be
 One view of the product in a device frame. Children stack vertically.
 - name: string (main text) — Label shown above the screen
 - device: "phone" | "tablet" | "desktop" | "custom"
-- width: number — Only for device=custom
-- height: number — Only for device=custom
+- width: number — Overrides the device width
+- height: number — Overrides the device height, e.g. height=1400 for a long scrolling page
 - chrome: boolean — Phone status bar / desktop browser bar. Default true for phone and desktop.
 - padding: number
 - gap: number
@@ -106,7 +106,8 @@ Button. Primary is filled, secondary is outlined, ghost is text only.
 - label: string (main text)
 - variant: "primary" | "secondary" | "ghost"
 - size: "sm" | "md" | "lg"
-- icon: string — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
+- leadingIcon: string — Lucide icon before the label, e.g. chevron-left for Back
+- trailingIcon: string — Lucide icon after the label, e.g. chevron-right for Next
 - fullWidth: boolean
 
 ### Input
@@ -170,10 +171,10 @@ Row in a List. Omit title for a placeholder bar.
 - title: string (main text)
 - subtitle: string
 - leading: "none" | "icon" | "avatar" | "image" | "checkbox"
-- icon: string — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
+- leadingIcon: string — Lucide icon on the left; setting it implies leading=icon
 - trailing: "none" | "chevron" | "toggle" | "text" | "badge" | "icon"
-- trailingText: string
-- trailingIcon: string — Lucide icon name in kebab-case, e.g. menu, search, arrow-left, settings, bell, user
+- trailingText: string — Text for trailing=text or badge; setting it implies trailing=text
+- trailingIcon: string — Lucide icon on the right; setting it implies trailing=icon
 
 ### Table
 Table with headers. Rows are placeholder bars unless `data` is given.