tsquare 0.1.0 → 0.3.0

package/dist/playground/index.js

@@ -0,0 +1,466 @@
+import {
+  ACCENTS,
+  PRIMARY_PROP,
+  bareWords,
+  boardLayout,
+  compileWireframe,
+  componentDefinitions,
+  componentDocs,
+  formatIssues,
+  iconNames,
+  renderWireframePng,
+  renderWireframeSvg,
+  wireframePrompt
+} from "../chunks/chunk-46MGJLGB.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/language-data.ts
+function unwrap(t) {
+  let cur = t;
+  while (cur && ["optional", "nullable", "default"].includes(cur.def?.type)) cur = cur.def.innerType;
+  return cur;
+}
+function describe(name, schema) {
+  const s = unwrap(schema);
+  const description = schema.description ?? s?.description;
+  const iconish = /Lucide icon|Icon names/i.test(description ?? "");
+  switch (s?.def?.type) {
+    case "enum":
+      return { name, kind: "enum", values: s.options, description };
+    case "boolean":
+      return { name, kind: "boolean", values: ["true", "false"], description };
+    case "number":
+      return { name, kind: "number", description };
+    case "array": {
+      const el = unwrap(s.def.element);
+      const hasIcon = el?.def?.type === "object" && "icon" in el.shape;
+      return { name, kind: "list", icon: iconish || hasIcon, description };
+    }
+    case "object":
+      return { name, kind: "object", description };
+    default:
+      return { name, kind: "string", icon: iconish || void 0, accent: name === "accent" || void 0, description };
+  }
+}
+var cache = null;
+function languageData() {
+  if (cache) return cache;
+  const components = Object.entries(componentDefinitions).map(([type, def]) => {
+    const shape = def.props.shape;
+    const props = Object.entries(shape).map(([name, schema]) => describe(name, schema));
+    if (type === "Icon") props.find((p) => p.name === "name").icon = true;
+    const words = bareWords(type);
+    const off = words.booleans.flatMap((b) => b === "on" ? ["off"] : b === "checked" ? ["unchecked"] : [`no-${b}`]);
+    return {
+      name: type.toLowerCase(),
+      description: def.description,
+      main: PRIMARY_PROP[type],
+      children: def.slots.length > 0,
+      props,
+      words: [...words.options.map((o) => o.value), ...words.booleans, ...off]
+    };
+  });
+  cache = { components, icons: [...new Set(iconNames)].sort(), accents: Object.keys(ACCENTS) };
+  return cache;
+}
+
+// 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"
+    stack row gap=8 align=center
+      button secondary "Back" leadingIcon=chevron-left
+      button primary "Next" trailingIcon=chevron-right
+    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 "leadingIcon=settings" subtitle="trailing=chevron" leadingIcon=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 "trailingIcon=trash-2" 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" leadingIcon=inbox
+        listitem "Sent" leadingIcon=send
+  screen phone "side=bottom"
+    navbar "Photo" leading=back
+    image height=300
+    drawer bottom "Share" size=280
+      list dividers=false
+        listitem "Copy link" leadingIcon=link
+        listitem "Message" leadingIcon=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 scriptCache = null;
+function playgroundScript() {
+  scriptCache ??= (async () => {
+    const built = path.join(here, "playground.js");
+    try {
+      return await readFile(built, "utf8");
+    } catch {
+      const { build } = await import("esbuild");
+      const out = await build({ ...PLAYGROUND_BUNDLE, entryPoints: [path.join(here, "app.ts")], write: false });
+      return out.outputFiles[0].text;
+    }
+  })();
+  return scriptCache;
+}
+var PLAYGROUND_BUNDLE = {
+  bundle: true,
+  format: "esm",
+  platform: "browser",
+  target: "es2022",
+  minify: true,
+  legalComments: "eof"
+};
+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;
+}
+var EXAMPLE_ORDER = ["sign-in", "dashboard", "checkout", "states", "notes-mobile", "notes-web"];
+var rank = (name) => EXAMPLE_ORDER.indexOf(name) + 1 || EXAMPLE_ORDER.length + 1;
+async function examples() {
+  const dir = path.join(packageRoot, "examples");
+  const files = (await readdir(dir)).filter((f) => f.endsWith(".tsq")).sort((a, b) => rank(a.slice(0, -4)) - rank(b.slice(0, -4)) || a.localeCompare(b));
+  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 === "/playground.js") {
+      res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
+      res.end(await playgroundScript());
+      return true;
+    }
+    if (req.method === "GET" && url.pathname === "/api/language") return json(res, 200, languageData());
+    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 });
+        const { width, height, items } = boardLayout(spec);
+        return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true }), width, height, items });
+      }
+      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 {
+  PLAYGROUND_BUNDLE,
+  checkReferenceExamples,
+  createPlaygroundHandler,
+  startPlayground
+};

package/dist/playground/language-data.d.ts

@@ -0,0 +1,28 @@
+export interface PropInfo {
+    name: string;
+    kind: "string" | "number" | "boolean" | "enum" | "list" | "object";
+    /** Allowed values for enums (and booleans: true/false). */
+    values?: string[];
+    /** The value is a Lucide icon name (or a list of them). */
+    icon?: boolean;
+    /** The value is an accent color. */
+    accent?: boolean;
+    description?: string;
+}
+export interface ComponentInfo {
+    /** Lowercase, as written: "listitem". */
+    name: string;
+    description: string;
+    /** The prop a quoted string fills, if any. */
+    main?: string;
+    children: boolean;
+    props: PropInfo[];
+    /** Bare words this component accepts: option values, switch names and their off forms. */
+    words: string[];
+}
+export interface LanguageData {
+    components: ComponentInfo[];
+    icons: string[];
+    accents: string[];
+}
+export declare function languageData(): LanguageData;