tsquare 0.2.0 → 0.3.0

package/dist/playground/index.js

@@ -1,11 +1,17 @@
 import {
+  ACCENTS,
+  PRIMARY_PROP,
+  bareWords,
+  boardLayout,
   compileWireframe,
+  componentDefinitions,
   componentDocs,
   formatIssues,
+  iconNames,
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-L6GTIZQH.js";
+} from "../chunks/chunk-46MGJLGB.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -13,6 +19,56 @@ 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"] },
@@ -166,7 +222,9 @@ var EXAMPLES = {
       button primary sm "Small"
       button primary "Medium"
       button primary lg "Large"
-    button secondary "With icon" icon=download
+    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
@@ -225,11 +283,11 @@ var EXAMPLES = {
   ListItem: `board
   screen custom width=400 height=440
     list
-      listitem "leading=icon" subtitle="trailing=chevron" leading=icon icon=settings trailing=chevron
+      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 "trailing=icon" trailing=icon trailingIcon=trash-2
+      listitem "trailingIcon=trash-2" trailingIcon=trash-2
       listitem leading=image trailing=chevron`,
   Table: `board
   screen custom width=520 height=400
@@ -252,15 +310,15 @@ var EXAMPLES = {
     drawer left size=260
       heading "Menu" level=3
       list dividers=false
-        listitem "Inbox" leading=icon icon=inbox
-        listitem "Sent" leading=icon icon=send
+        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" leading=icon icon=link
-        listitem "Message" leading=icon icon=message-circle`
+        listitem "Copy link" leadingIcon=link
+        listitem "Message" leadingIcon=message-circle`
 };
 
 // src/playground/index.ts
@@ -280,6 +338,28 @@ ${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(
@@ -290,9 +370,11 @@ function reference() {
   ).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();
+  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) {
@@ -321,6 +403,12 @@ function createPlaygroundHandler() {
       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")));
@@ -337,7 +425,8 @@ function createPlaygroundHandler() {
       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 }) });
+        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)));
@@ -370,6 +459,7 @@ ${problems.join("\n")}`);
   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;