tsquare 0.5.0 → 0.6.0

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, 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.\n9. Any element except Board, Screen and Note can take tooltip=\"text\" to show a tooltip next to it. Select (with options), Input type=date, and Button, ListItem or NavBar (with menu) take open to show their list, calendar or menu over the screen.";
+export declare const RULES = "## Rules\n1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them and Flow lines after them (rule 10).\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), Input error and Flow color. Only add an accent if the request asks for color or a brand.\n9. Any element except Board, Screen, Note and Flow can take tooltip=\"text\" to show a tooltip next to it. Select (with options), Input type=date, and Button, ListItem or NavBar (with menu) take open to show their list, calendar or menu over the screen.\n10. To show how screens connect, name elements or screens by writing #name after them (button primary \"Sign in\" #signin, screen phone \"Home\" #home), then add board-level lines after the screens: flow signin -> home \"Tap Sign in\".";
 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/dist/render.d.ts

@@ -1,4 +1,5 @@
 import type { Spec } from "@json-render/core";
+import { type Anchor, type Rect } from "./anchors.js";
 export declare class SpecError extends Error {
     issues: string[];
     constructor(issues: string[]);
@@ -20,33 +21,35 @@ export interface BoardItem {
  * 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): {
+export declare function boardLayout(spec: Spec, opts?: {
+    flows?: boolean;
+}): {
     width: number;
     height: number;
     items: BoardItem[];
+    gap: number;
 };
 /** The canvas size for a board. */
-export declare function boardSize(spec: Spec): {
+export declare function boardSize(spec: Spec, opts?: {
+    flows?: boolean;
+}): {
     width: number;
     height: number;
 };
 export interface RenderWireframeOptions {
     /** Skip validation (e.g. while a spec is still streaming in). */
     skipValidation?: boolean;
+    /** Draw flow arrows (default true). Off, the board looks exactly as if it had no flow lines. */
+    flows?: boolean;
 }
 export declare function renderWireframeSvg(spec: Spec, opts?: RenderWireframeOptions): Promise<string>;
 /**
  * The measuring pass: the board's anchored elements (and their screens) and their boxes on the
  * canvas, keyed by element id (`<id>#field` for a field). No render at all when there are none.
  */
-export declare function measureAnchors(spec: Spec): Promise<{
-    anchors: import("./anchors.js").Anchor[];
-    boxes: Record<string, {
-        x: number;
-        y: number;
-        w: number;
-        h: number;
-    }>;
+export declare function measureAnchors(spec: Spec, extra?: string[]): Promise<{
+    anchors: Anchor[];
+    boxes: Record<string, Rect>;
 }>;
 export declare function renderWireframePng(spec: Spec, opts?: RenderWireframeOptions & {
     scale?: number;

package/dist/upgrade.d.ts

@@ -20,7 +20,7 @@
 /** Props renamed in 0.3.0. The prompt, docs and autocomplete only teach the new names; `tsquare fmt` rewrites old ones. */
 export declare const RENAMED_PROPS: Record<string, Record<string, string>>;
 export interface UpgradeOptions {
-    /** The text came from a link (share link or render URL), which may predate 0.3.0. */
+    /** The text came from a "z" link (share link or render URL, before 0.6.0), which may predate 0.3.0. */
     fromLink?: boolean;
 }
 /** Rewrites older syntax to the current language. Text that's already current comes back unchanged. */

package/examples/sign-up-flow.tsq

@@ -0,0 +1,26 @@
+board "Sign-up flow" accent=blue
+  screen phone "Create account" #signup
+    navbar "Create account" leading=back
+    input email "Email" value="ana@example.com"
+    input password "Password"
+    checkbox "I agree to the terms" checked
+    spacer
+    button primary lg "Continue" fullWidth #continue
+  screen phone "Verify email" #verify
+    navbar "Verify email" leading=back
+    text "We sent a 6-digit code to ana@example.com." muted
+    input type=code digits=6 value="4821"
+    button ghost "Wrong email?" #wrong
+    spacer
+    button primary lg "Verify" fullWidth #confirm
+  screen phone "Welcome" #welcome
+    spacer
+    icon circle-check size=48
+    heading "You're all set" level=1
+    text "Your account is ready." muted
+    spacer
+    button primary lg "Get started" fullWidth
+  flow continue -> verify "Code sent"
+  flow confirm -> welcome "Code matches" color=accent
+  flow wrong -> signup "Change email" dashed start=dot
+  note "The code expires after 10 minutes; show a Resend link after 30 seconds" width=200

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsquare",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Wireframes in plain text: easy for LLMs to write, fast to render as SVG or PNG.",
   "keywords": [
     "wireframe",

package/skill/tsquare/SKILL.md

@@ -43,15 +43,16 @@ Lists: items are separated by commas, and an item can contain spaces without quo
 If a bare word could mean more than one prop, write it as key=value.
 
 ## Rules
-1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them.
+1. The top element is a Board. The Board's children are Screens, plus optional Notes beside them and Flow lines after them (rule 10).
 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, 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.
-9. Any element except Board, Screen and Note can take tooltip="text" to show a tooltip next to it. Select (with options), Input type=date, and Button, ListItem or NavBar (with menu) take open to show their list, calendar or menu over the screen.
+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), Input error and Flow color. Only add an accent if the request asks for color or a brand.
+9. Any element except Board, Screen, Note and Flow can take tooltip="text" to show a tooltip next to it. Select (with options), Input type=date, and Button, ListItem or NavBar (with menu) take open to show their list, calendar or menu over the screen.
+10. To show how screens connect, name elements or screens by writing #name after them (button primary "Sign in" #signin, screen phone "Home" #home), then add board-level lines after the screens: flow signin -> home "Tap Sign in".
 
 ## Example
 

package/skill/tsquare/reference.md

@@ -3,7 +3,7 @@
 Every component and its props, generated from the catalog. All props are optional unless marked required. "main text" is the prop a quoted string fills.
 
 ### Board
-Root canvas (artboard). Holds Screens side by side, plus optional Notes. Must be the root element.
+Root canvas (artboard). Holds Screens side by side, plus optional Notes and Flow lines. Must be the root element.
 - title: string (main text)
 - layout: "row" | "grid" — row = all screens side by side; grid = wrap every `columns` screens
 - columns: number
@@ -27,6 +27,17 @@ Sticky-note annotation. Put it on the Board beside screens, or inside a Screen n
 - color: "yellow" | "blue" | "pink" | "green"
 - width: number
 
+### Flow
+An arrow between two elements or screens, named with #id. Written at the board level after the screens: flow signin -> home "Tap Sign in".
+- from (required): string — The id where the arrow starts (written before ->)
+- to (required): string — The id it points at (written after ->)
+- label: string (main text)
+- start: "none" | "arrow" | "dot" | "circle" | "bar" — Default none
+- end: "none" | "arrow" | "dot" | "circle" | "bar" — Default arrow
+- line: "rounded" | "hard" | "curved" | "straight" — Default rounded: right angles with rounded corners
+- dashed: boolean
+- color: string — Default gray. blue, indigo, violet, pink, red, orange, green, teal, a hex color, or accent for the board's
+
 ### Stack
 Flex container. The main layout primitive (rows, columns, sidebars, toolbars).
 - direction: "row" | "column"