tsquare 0.1.0 → 0.2.0

package/dist/playground/index.js

@@ -0,0 +1,376 @@
+import {
+  compileWireframe,
+  componentDocs,
+  formatIssues,
+  renderWireframePng,
+  renderWireframeSvg,
+  wireframePrompt
+} from "../chunks/chunk-L6GTIZQH.js";
+
+// src/playground/index.ts
+import { createServer } from "node:http";
+import { readFile, readdir } from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+// src/playground/reference.ts
+var GROUPS = [
+  { name: "Canvas", components: ["Board", "Screen", "Note"] },
+  { name: "Layout", components: ["Stack", "Grid", "Card", "Divider", "Spacer"] },
+  { name: "Content", components: ["Heading", "Text", "Image", "Icon", "Avatar", "Badge"] },
+  { name: "Controls", components: ["Button", "Input", "Checkbox", "Radio", "Toggle", "Select"] },
+  { name: "Navigation & data", components: ["NavBar", "TabBar", "Tabs", "List", "ListItem", "Table"] },
+  { name: "Overlays", components: ["Modal", "Drawer"] }
+];
+var EXAMPLES = {
+  Board: `board row "Checkout flow" gap=48 accent=blue
+  screen custom "Cart" width=240 height=200
+    heading "Cart" level=3
+    text lines=3
+    spacer
+    button primary "Checkout" fullWidth
+  screen custom "Payment" width=240 height=200
+    heading "Payment" level=3
+    toggle "Save card" on
+    spacer
+    button primary "Pay" fullWidth
+  note "accent colors primary buttons, toggles, checked controls and active tabs. Omit it for grayscale." width=180`,
+  Screen: `board
+  screen phone "phone"
+    heading "390 \xD7 844"
+    text "Phone and desktop screens show a status bar or browser bar (chrome). Turn it off with chrome=false." muted
+  screen custom "custom" width=260 height=200
+    heading "Any size" level=2
+    text "device=custom with width and height" muted`,
+  Note: `board gap=32
+  screen custom width=320 height=220
+    text lines=4
+    note "Notes can also sit inside a screen" color=blue
+  note "yellow (default)" width=130
+  note "blue" color=blue width=130
+  note "pink" color=pink width=130
+  note "green" color=green width=130`,
+  Stack: `board
+  screen custom width=560 height=300 padding=0
+    stack row grow
+      stack width=160 border=right fill padding=16 gap=12
+        text "Sidebar" bold
+        text "width, border, fill" sm muted
+      stack grow padding=16 gap=16
+        stack row justify=between align=center
+          heading "Toolbar" level=3
+          stack row gap=8
+            button secondary sm "Filter"
+            button primary sm "New"
+        stack row wrap gap=8
+          badge outline "row"
+          badge outline "wrap"
+          badge outline "gap"
+        text lines=3`,
+  Grid: `board
+  screen custom width=520 height=300
+    grid columns=3 gap=12
+      card
+        image height=60
+        text "Item" bold
+      card
+        image height=60
+        text "Item" bold
+      card
+        image height=60
+        text "Item" bold
+      card
+        image height=60
+        text "Item" bold
+      card
+        image height=60
+        text "Item" bold`,
+  Card: `board
+  screen custom width=520 height=170
+    stack row gap=16
+      card "outline (default)" grow
+        text lines=3
+      card "filled" variant=filled grow
+        text lines=3`,
+  Divider: `board
+  screen custom width=360 height=150
+    text "Above"
+    divider
+    text "Below"
+    stack row gap=12 align=center
+      text "Left"
+      divider vertical
+      text "Right"`,
+  Spacer: `board
+  screen custom width=360 height=260
+    heading "Fixed spacer" level=3
+    spacer size=24
+    text "24px gap above"
+    spacer
+    button primary "Pushed to the bottom" fullWidth`,
+  Heading: `board
+  screen custom width=360 height=170
+    heading "Level 1" level=1
+    heading "Level 2" level=2
+    heading "Level 3" level=3
+    heading "Centered" level=3 align=center`,
+  Text: `board
+  screen custom width=360 height=300
+    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`,
+  Image: `board
+  screen custom width=480 height=210
+    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`,
+  Icon: `board
+  screen custom width=360 height=120
+    stack row gap=16 align=center
+      icon home
+      icon search
+      icon bell
+      icon settings
+      icon heart size=32
+    text "Any Lucide name in kebab-case (lucide.dev/icons)" sm muted`,
+  Avatar: `board
+  screen custom width=300 height=100
+    stack row gap=12 align=center
+      avatar "JD"
+      avatar "AB" size=48
+      avatar
+      avatar size=24`,
+  Badge: `board
+  screen custom width=340 height=110
+    stack row gap=8
+      badge "solid" variant=solid
+      badge outline "outline"
+      badge "3"
+    stack row gap=8
+      badge "Active" tone=success
+      badge "Pending" tone=warning
+      badge "Failed" tone=danger
+      badge outline "Failed" tone=danger`,
+  Button: `board
+  screen custom width=420 height=310
+    stack row gap=8 align=center
+      button primary "Primary"
+      button secondary "Secondary"
+      button ghost "Ghost"
+    stack row gap=8 align=center
+      button primary sm "Small"
+      button primary "Medium"
+      button primary lg "Large"
+    button secondary "With icon" icon=download
+    button primary "Full width" fullWidth
+    text "With a board accent, primary buttons fill with it and ghost buttons use it for text." sm muted`,
+  Input: `board
+  screen custom width=420 height=540
+    input "Email" placeholder="you@example.com" helper="We never share it"
+    input "Username" value="dana moore" error helper="No spaces allowed"
+    input password "Password" value=secret
+    input search placeholder="Search"
+    input "Message" multiline=3
+    stack row gap=8
+      input placeholder="grow fills the row" grow
+      button primary "Send"`,
+  Checkbox: `board
+  screen custom width=300 height=100
+    checkbox "Checked" checked
+    checkbox "Unchecked"`,
+  Radio: `board
+  screen custom width=300 height=130
+    radio "Selected" checked
+    radio "Not selected"
+    radio "Not selected"`,
+  Toggle: `board
+  screen custom width=300 height=100
+    toggle "On" on
+    toggle "Off" off`,
+  Select: `board
+  screen custom width=320 height=170
+    select "Country" value="Mexico"
+    select "Size" placeholder="Choose one" width=160`,
+  NavBar: `board
+  screen custom width=380 height=240 padding=0 gap=0
+    navbar "leading=menu" leading=menu actions=[search, bell]
+    navbar "leading=back, centered" leading=back align=center actions=[share]
+    navbar "leading=close" leading=close
+    navbar "leading=logo" leading=logo actions=[user]`,
+  TabBar: `board
+  screen phone "Tab bar sits at the bottom"
+    heading "Home"
+    text lines=4
+    tabbar items=[{label=Home icon=house}, {label=Search icon=search}, {label=Inbox icon=inbox}, {label=Profile icon=user}] active=0`,
+  Tabs: `board
+  screen custom width=400 height=150
+    tabs items=[Overview, Activity, Settings] active=0
+    text lines=2`,
+  List: `board
+  screen custom width=380 height=420
+    list
+      listitem "Dividers on (default)"
+      listitem "Second row"
+    list dividers=false
+      listitem "dividers=false"
+      listitem "Second row"
+    list
+      listitem
+      listitem`,
+  ListItem: `board
+  screen custom width=400 height=440
+    list
+      listitem "leading=icon" subtitle="trailing=chevron" leading=icon icon=settings trailing=chevron
+      listitem "leading=avatar" subtitle="trailing=text" leading=avatar trailing=text trailingText="9:41"
+      listitem "leading=image" subtitle="trailing=badge" leading=image trailing=badge trailingText="3"
+      listitem "leading=checkbox" leading=checkbox trailing=toggle
+      listitem "trailing=icon" trailing=icon trailingIcon=trash-2
+      listitem leading=image trailing=chevron`,
+  Table: `board
+  screen custom width=520 height=400
+    table columns=[Name, Role, Status] data=[["Ana Ruiz", Admin, Active], ["Ben Cho", Editor, Invited]]
+    text "Without data, rows are placeholder bars:" sm muted
+    table columns=[Name, Role, Status] rows=3`,
+  Modal: `board
+  screen phone "Modal"
+    heading "Settings"
+    text lines=6
+    modal "Delete account?"
+      text "This can't be undone." muted
+      stack row justify=end gap=8
+        button ghost "Cancel"
+        button primary "Delete"`,
+  Drawer: `board
+  screen phone "side=left"
+    navbar "Inbox" leading=menu
+    text lines=6
+    drawer left size=260
+      heading "Menu" level=3
+      list dividers=false
+        listitem "Inbox" leading=icon icon=inbox
+        listitem "Sent" leading=icon icon=send
+  screen phone "side=bottom"
+    navbar "Photo" leading=back
+    image height=300
+    drawer bottom "Share" size=280
+      list dividers=false
+        listitem "Copy link" leading=icon icon=link
+        listitem "Message" leading=icon icon=message-circle`
+};
+
+// src/playground/index.ts
+var here = path.dirname(fileURLToPath(import.meta.url));
+var packageRoot = path.resolve(here, "..", "..");
+var MAX_BODY = 256 * 1024;
+function checkReferenceExamples() {
+  const problems = [];
+  for (const c of componentDocs()) {
+    if (!EXAMPLES[c.name]) problems.push(`${c.name}: no example in src/playground/reference.ts`);
+    if (!GROUPS.some((g) => g.components.includes(c.name))) problems.push(`${c.name}: not in any group in src/playground/reference.ts`);
+  }
+  for (const [name, src] of Object.entries(EXAMPLES)) {
+    const { issues } = compileWireframe(src);
+    if (issues.length) problems.push(`${name} example:
+${formatIssues(issues)}`);
+  }
+  return problems;
+}
+var referenceCache = null;
+function reference() {
+  referenceCache ??= Promise.all(
+    componentDocs().map(async (c) => {
+      const { spec } = compileWireframe(EXAMPLES[c.name]);
+      return { ...c, example: EXAMPLES[c.name], svg: await renderWireframeSvg(spec, { skipValidation: true }) };
+    })
+  ).then((components) => ({ groups: GROUPS, components }));
+  return referenceCache;
+}
+async function examples() {
+  const dir = path.join(packageRoot, "examples");
+  const files = (await readdir(dir)).filter((f) => f.endsWith(".tsq")).sort();
+  return Promise.all(files.map(async (f) => ({ name: f.replace(/\.tsq$/, ""), source: await readFile(path.join(dir, f), "utf8") })));
+}
+function readBody(req) {
+  return new Promise((resolve, reject) => {
+    let size = 0;
+    const chunks = [];
+    req.on("data", (c) => {
+      size += c.length;
+      if (size > MAX_BODY) reject(new Error("body too large"));
+      else chunks.push(c);
+    });
+    req.on("end", () => resolve(Buffer.concat(chunks).toString("utf8")));
+    req.on("error", reject);
+  });
+}
+var json = (res, status, body) => {
+  res.writeHead(status, { "content-type": "application/json" });
+  res.end(JSON.stringify(body));
+  return true;
+};
+function createPlaygroundHandler() {
+  return async function handle(req, res) {
+    const url = new URL(req.url ?? "/", "http://localhost");
+    if (req.method === "GET" && url.pathname === "/") {
+      res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+      res.end(await readFile(path.join(here, "index.html")));
+      return true;
+    }
+    if (req.method === "GET" && url.pathname === "/mark.png") {
+      res.writeHead(200, { "content-type": "image/png", "cache-control": "max-age=3600" });
+      res.end(await readFile(path.join(packageRoot, "assets", "mark.png")));
+      return true;
+    }
+    if (req.method === "GET" && url.pathname === "/api/reference") return json(res, 200, await reference());
+    if (req.method === "GET" && url.pathname === "/api/examples") return json(res, 200, await examples());
+    if (req.method === "GET" && url.pathname === "/api/prompt") {
+      res.writeHead(200, { "content-type": "text/plain; charset=utf-8" });
+      res.end(wireframePrompt());
+      return true;
+    }
+    if (req.method === "POST" && (url.pathname === "/api/render" || url.pathname === "/api/png")) {
+      const { spec, issues } = compileWireframe(await readBody(req));
+      if (url.pathname === "/api/render") {
+        if (!spec || issues.length) return json(res, 200, { issues });
+        return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true }) });
+      }
+      if (!spec || issues.length) return json(res, 400, { issues });
+      const scale = Math.min(4, Math.max(1, Number(url.searchParams.get("scale") ?? 2)));
+      res.writeHead(200, { "content-type": "image/png" });
+      res.end(await renderWireframePng(spec, { skipValidation: true, scale }));
+      return true;
+    }
+    return false;
+  };
+}
+function startPlayground(port = 4321) {
+  const problems = checkReferenceExamples();
+  if (problems.length) {
+    console.error(`Reference examples need fixing:
+
+${problems.join("\n")}`);
+    process.exit(1);
+  }
+  const handle = createPlaygroundHandler();
+  const server = createServer((req, res) => {
+    handle(req, res).then((handled) => {
+      if (!handled) json(res, 404, { error: "not found" });
+    }).catch((err) => {
+      console.error(err);
+      if (!res.headersSent) json(res, 500, { error: String(err?.message ?? err) });
+      else res.end();
+    });
+  });
+  server.listen(port, "127.0.0.1", () => console.log(`tsquare playground \u2192 http://localhost:${port}`));
+  return server;
+}
+export {
+  checkReferenceExamples,
+  createPlaygroundHandler,
+  startPlayground
+};

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 a boolean prop to true: checked, fullWidth, grow, muted. `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- `#` after a space starts a comment that runs to the end of the line\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,20 @@
+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[];
+/** Work out the canvas size from the Board's screens (Satori needs it up front). */
+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/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,45 @@
+/**
+ * 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
+ */
+import type { Spec } from "@json-render/core";
+/** Which prop a quoted string fills, per component. */
+export declare const PRIMARY_PROP: Record<string, 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/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 icon=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…" leading=icon icon=shopping-cart trailing=text trailingText="9:12"
+      listitem "Trip ideas" subtitle="Lisbon in October?" leading=icon icon=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" icon=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" leading=icon icon=notebook-pen trailing=text trailingText="24"
+        listitem "Folders" leading=icon icon=folder trailing=chevron
+        listitem "Archive" leading=icon icon=archive
+        listitem "Settings" leading=icon icon=settings
+      spacer
+      button secondary "Sign out" icon=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" leading=icon icon=layout-dashboard
+          listitem "All notes" leading=icon icon=notebook-pen trailing=text trailingText="128"
+          listitem "Shared" leading=icon icon=users
+          listitem "Settings" leading=icon icon=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" icon=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" icon=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