tsquare 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.9.0
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.8.0, and render URLs give the same images.
+
+### For editors and your own pages
+
+- **`tsquare/viewer`:** the playground's zoomable board (zoom, pan, pinch, a chip per screen, dimmed while the text has problems) as a browser module with no dependencies, for showing boards in your own page. Give `createViewer` the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math depends on itself, so a page only gives the stage a size (and can style the `panning`, `animate` and `stale` classes). The playground uses it, and so will the VS Code extension's preview.
+- **`languageData()`** is exported from `tsquare`: every component with its props, option words and description, plus icon names and accents. It's what the playground's highlighting and autocomplete use, now available to editors.
+- **`require("tsquare")` works** in Node versions that can load ES modules from CommonJS (20.19+, 22.12+): every export now has a `default` condition next to `import`. The package is still ESM only.
+
+### Playground
+
+- **Fix: pinch zoom and two-finger pan on touch screens.** Touch screens report each finger's movement separately, and each one was handled as a zoom around a different point, so the board drifted out from under the fingers while pinching, and moving two fingers together zoomed out and back in and moved the board the wrong way. Now each move pans by how far the point between the fingers moved, then zooms around it, so the part of the board between your fingers stays there. Trackpad pinch and mouse dragging were already right.
+- **Tests for the playground,** which had none: every endpoint through a real HTTP server (render, PNG, language, prompt, examples, reference, the page), the page's markup against its script and against what tsquare.dev's build expects, and the viewer in jsdom (fitting, zooming to a screen, wheel and buttons, dragging, pinching and two-finger panning).
+
 ## 0.8.0
 
 ### Brand logos

package/README.md

@@ -123,7 +123,7 @@ const { issues } = compileWireframe(source);           // problems by line, empt
 const png = await renderWireframe(source, { format: "png", scale: 2 });
 ```
 
-`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
+`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. `tsquare/viewer` is the playground's zoomable board (zoom, pan, pinch, a chip per screen) for your own page: pass it the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math needs itself; give the stage a size, and optionally style the classes it toggles on the stage: `panning` (while dragging), `animate` (while fitting or zooming to a screen, e.g. `.animate > * { transition: transform .25s }`) and `stale` (from `setStale`, e.g. `.stale img { opacity: .35 }`). `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
 
 ## Using it with Claude (skill)
 

package/dist/chunks/chunk-GTWUMF6W.js

@@ -0,0 +1,65 @@
+import {
+  ACCENTS,
+  PRIMARY_PROP,
+  UNIVERSAL_PROPS,
+  bareWords,
+  componentDefinitions,
+  iconNames,
+  takesUniversalProps
+} from "./chunk-W3OU5IS6.js";
+
+// 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 objects = el?.def?.type === "union" ? el.def.options.map(unwrap) : [el];
+      const hasIcon = objects.some((x) => x?.def?.type === "object" && "icon" in x.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 (takesUniversalProps(type)) for (const [name, schema] of Object.entries(UNIVERSAL_PROPS)) props.push(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;
+}
+
+export {
+  languageData
+};

package/dist/index.d.ts

@@ -10,3 +10,4 @@ export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js"
 export { catalog, componentDefinitions } from "./catalog.js";
 export { registry } from "./components.js";
 export { theme, DEVICES } from "./layout.js";
+export { languageData, type LanguageData, type ComponentInfo, type PropInfo } from "./playground/language-data.js";

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  languageData
+} from "./chunks/chunk-GTWUMF6W.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -180,6 +183,7 @@ export {
   encodeWireframe,
   formatIssues,
   printWireframeText as formatWireframe,
+  languageData,
   mcpTools,
   parseWireframeText,
   registry,

package/dist/playground/index.js

@@ -1,17 +1,13 @@
 import {
-  ACCENTS,
-  PRIMARY_PROP,
-  UNIVERSAL_PROPS,
-  bareWords,
+  languageData
+} from "../chunks/chunk-GTWUMF6W.js";
+import {
   boardLayout,
   compileWireframe,
-  componentDefinitions,
   componentDocs,
   formatIssues,
-  iconNames,
   renderWireframePng,
   renderWireframeSvg,
-  takesUniversalProps,
   wireframePrompt
 } from "../chunks/chunk-W3OU5IS6.js";
 
@@ -21,58 +17,6 @@ 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 objects = el?.def?.type === "union" ? el.def.options.map(unwrap) : [el];
-      const hasIcon = objects.some((x) => x?.def?.type === "object" && "icon" in x.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 (takesUniversalProps(type)) for (const [name, schema] of Object.entries(UNIVERSAL_PROPS)) props.push(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", "Flow"] },