tsquare 0.12.2 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.12.4
+
+The language hasn't changed. Boards whose screen names fit render exactly as in 0.12.3 (checked byte for byte on 438 boards); boards with a screen name wider than its screen are fixed:
+
+- **A screen name wider than its screen ends in "…"** instead of widening its column. The board's layout sizes each column by its screen, so a long name pushed the screens after it right of where the layout put them, and the last screen was cut off at the board's right edge. Only names that might not fit are truncated, judged by an upper bound on each character's width in the font, so every other name renders as before.
+
+## 0.12.3
+
+The language hasn't changed. Screens whose content fits render exactly as in 0.12.2 (the same pixels; the SVG's internal mask ids differ). Screens whose content is taller than the screen are fixed:
+
+- **Content taller than its screen no longer pushes things out of it.** The screen's body grew with its content, so a toast or a tab bar ended up below the frame and wasn't drawn, a modal was centered too low, and a bottom drawer started too low with its end cut off. The content is now cut off at the bottom of the screen, as it already looked, and bars and overlays are placed in the visible screen. Of 438 boards in the examples and eval outputs, 434 render the same pixels; one modal moves up 18px to the middle of its screen, and three gain 4 to 8 pixels of the frame's bottom border that overflowing content used to cover.
+
 ## 0.12.2
 
 The language and the renderer haven't changed: every wireframe renders exactly as in 0.12.1, and render URLs give the same images.

package/README.md

@@ -52,10 +52,29 @@ A wireframe can be embedded anywhere an image works (Notion, GitHub, docs sites)
 
 The playground's **Copy link** menu makes these; [Embedding](docs/embedding.md) has the steps for Notion, GitHub and your own site. The text is compressed into the URL, not encrypted, so anyone with the link can read it; see [privacy](https://tsquare.dev/privacy). `encodeWireframe` and `decodeWireframe` in the library produce and read the same links.
 
-## In your editor and notes
+## Use it with
+
+**With AI**
+
+- **Claude:** the [tsquare skill](https://tsquare.dev/docs/ai#the-claude-skill) teaches Claude the language and how to check its own wireframes.
+- **Any model:** the [system prompt](https://tsquare.dev/docs/ai#the-prompt), or the hosted [MCP server](https://tsquare.dev/docs/ai#connect-over-mcp) for Claude, ChatGPT, Cursor, VS Code and other tools that take a remote MCP URL.
+
+**In your docs**
+
+- **Docusaurus, Astro, MDX:** [`remark-tsquare`](https://tsquare.dev/docs/markdown-plugins#remark-tsquare) draws ```` ```tsquare ```` code blocks when the site is built.
+- **VitePress, Eleventy:** [`markdown-it-tsquare`](https://tsquare.dev/docs/markdown-plugins#markdown-it-tsquare), the same for sites built on markdown-it.
+- **Any web page:** [one script tag](https://tsquare.dev/docs/embedding#pages-written-in-markdown) draws the code blocks in the reader's browser, with no build step.
+- **Notion, GitHub and anywhere an image works:** [image links](#image-links).
+
+**In your app**
+
+- **React:** [`@tsquare-js/react`](https://tsquare.dev/docs/react) shows boards, a zoomable viewer, an editor and a playground, including boards in a model's reply while it's still streaming in.
+- **Node or the browser:** the [library](#library) itself.
+
+**In your editor and notes**
 
 - **VS Code** (and Cursor, VSCodium, Windsurf): the [tsquare extension](https://marketplace.visualstudio.com/items?itemName=tsquare-js.tsquare-vscode) gives `.tsq` files a live preview, problems as you type, highlighting and autocomplete. Also on [Open VSX](https://open-vsx.org/extension/tsquare-js/tsquare-vscode).
-- **Obsidian**: the [tsquare plugin](https://community.obsidian.md/plugins/tsquare) draws ```` ```tsquare ```` code blocks in your notes, on desktop and mobile. See [the Obsidian page](https://tsquare.dev/docs/obsidian).
+- **Obsidian:** the [tsquare plugin](https://community.obsidian.md/plugins/tsquare) draws ```` ```tsquare ```` code blocks in your notes, on desktop and mobile. See [the Obsidian page](https://tsquare.dev/docs/obsidian).
 
 ## The language
 
@@ -117,10 +136,14 @@ tsquare prompt                     # system prompt for models
 tsquare playground [--port 4321]   # live editor, component reference, prompt
 ```
 
-Use `-` to read from stdin. In this repo, run them through npm: `npm run check -- file.tsq`. Files use the `.tsq` extension; the CLI reads any text file.
+Run them with `npx tsquare …` (nothing to install), or install the `tsquare` command with `npm install -g tsquare`. Use `-` to read from stdin. In this repo, run them through npm: `npm run check -- file.tsq`. Files use the `.tsq` extension; the CLI reads any text file.
 
 ## Library
 
+```bash
+npm install tsquare
+```
+
 ```ts
 import { renderWireframe, compileWireframe, formatIssues } from "tsquare";
 
@@ -128,7 +151,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. `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 }`). Call `destroy()` when you remove it. `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. In a browser bundle (esbuild, Vite, webpack) the same imports render SVG with no setup; PNG and share links need Node. On a page without a build step, `<script src="https://cdn.jsdelivr.net/npm/tsquare@0.11/dist/tsquare.min.js"></script>` draws every ```` ```tsquare ```` code block on the page (see [Embedding](docs/embedding.md#pages-written-in-markdown)). 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 }`). Call `destroy()` when you remove it. `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. In a browser bundle (esbuild, Vite, webpack) the same imports render SVG with no setup; PNG and share links need Node. On a page without a build step, `<script src="https://cdn.jsdelivr.net/npm/tsquare@0.12/dist/tsquare.min.js"></script>` draws every ```` ```tsquare ```` code block on the page (see [Embedding](docs/embedding.md#pages-written-in-markdown)). See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
 
 ### The editor: `tsquare/editor`
 

package/dist/browser/index.js

@@ -20789,6 +20789,16 @@ function BrowserBar() {
     }
   );
 }
+function mayOverflow(name, width) {
+  let w2 = 0;
+  for (const ch of name) {
+    if (ch.charCodeAt(0) >= 128 || /[MWmw@%&]/.test(ch)) w2 += 16.5;
+    else if (/[A-Z]/.test(ch)) w2 += 12.5;
+    else if (/[ .,:;'!|il1jft()[\]{}"`-]/.test(ch)) w2 += 8.5;
+    else w2 += 11;
+  }
+  return w2 > width;
+}
 function Screen({ element, children }) {
   const p = element.props;
   const s = screenSize(p);
@@ -20804,7 +20814,12 @@ function Screen({ element, children }) {
     else body.push(c2);
   }
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx3(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
+    mayOverflow(p.name ?? "", s.width) ? (
+      // the board's layout sizes each column by its screen, so a name that may be wider than the
+      // screen gets the screen's width and ends in "…" instead of widening the column. Only then:
+      // the clip changes how the text is antialiased, and names that fit should render as before.
+      /* @__PURE__ */ jsx3(Box, { style: { width: s.width, height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: /* @__PURE__ */ jsx3("div", { style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: p.name }) })
+    ) : /* @__PURE__ */ jsx3(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -20823,21 +20838,21 @@ function Screen({ element, children }) {
         children: [
           s.chrome && s.device === "phone" ? /* @__PURE__ */ jsx3(StatusBar, {}) : null,
           s.chrome && s.device === "desktop" ? /* @__PURE__ */ jsx3(BrowserBar, {}) : null,
-          /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexDirection: "column", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: [
             top,
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx3(Box, { style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx3(
               Box,
               {
                 style: {
                   flexGrow: 1,
+                  flexShrink: 0,
                   flexDirection: "column",
                   padding: s.padding,
-                  gap: p.gap ?? 14,
-                  overflow: "hidden"
+                  gap: p.gap ?? 14
                 },
                 children: withDir(body, "column")
               }
-            ),
+            ) }),
             bottom,
             overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2),
             p.__mark ? /* @__PURE__ */ jsx3(Marker, { color: p.__mark }) : null

package/dist/chunks/{chunk-WRN5ADPR.js → chunk-BSE346UI.js}

@@ -836,6 +836,16 @@ function BrowserBar() {
     }
   );
 }
+function mayOverflow(name, width) {
+  let w = 0;
+  for (const ch of name) {
+    if (ch.charCodeAt(0) >= 128 || /[MWmw@%&]/.test(ch)) w += 16.5;
+    else if (/[A-Z]/.test(ch)) w += 12.5;
+    else if (/[ .,:;'!|il1jft()[\]{}"`-]/.test(ch)) w += 8.5;
+    else w += 11;
+  }
+  return w > width;
+}
 function Screen({ element, children }) {
   const p = element.props;
   const s = screenSize(p);
@@ -851,7 +861,12 @@ function Screen({ element, children }) {
     else body.push(c);
   }
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
+    mayOverflow(p.name ?? "", s.width) ? (
+      // the board's layout sizes each column by its screen, so a name that may be wider than the
+      // screen gets the screen's width and ends in "…" instead of widening the column. Only then:
+      // the clip changes how the text is antialiased, and names that fit should render as before.
+      /* @__PURE__ */ jsx(Box, { style: { width: s.width, height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: p.name }) })
+    ) : /* @__PURE__ */ jsx(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -870,21 +885,21 @@ function Screen({ element, children }) {
         children: [
           s.chrome && s.device === "phone" ? /* @__PURE__ */ jsx(StatusBar, {}) : null,
           s.chrome && s.device === "desktop" ? /* @__PURE__ */ jsx(BrowserBar, {}) : null,
-          /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexDirection: "column", overflow: "hidden" }, children: [
+          /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: [
             top,
-            /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
               Box,
               {
                 style: {
                   flexGrow: 1,
+                  flexShrink: 0,
                   flexDirection: "column",
                   padding: s.padding,
-                  gap: p.gap ?? 14,
-                  overflow: "hidden"
+                  gap: p.gap ?? 14
                 },
                 children: withDir(body, "column")
               }
-            ),
+            ) }),
             bottom,
             overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2),
             p.__mark ? /* @__PURE__ */ jsx(Marker, { color: p.__mark }) : null

package/dist/chunks/{chunk-NYVFYSZ6.js → chunk-XWGHLFRX.js}

@@ -6,7 +6,7 @@ import {
   componentDefinitions,
   iconNames,
   takesUniversalProps
-} from "./chunk-WRN5ADPR.js";
+} from "./chunk-BSE346UI.js";
 
 // src/playground/language-data.ts
 function unwrap(t) {

package/dist/cli.js

@@ -6,7 +6,7 @@ import {
   printWireframeText,
   renderWireframe,
   wireframePrompt
-} from "./chunks/chunk-WRN5ADPR.js";
+} from "./chunks/chunk-BSE346UI.js";
 
 // src/cli.ts
 import { readFile, writeFile } from "node:fs/promises";

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "./chunks/chunk-NYVFYSZ6.js";
+} from "./chunks/chunk-XWGHLFRX.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -24,7 +24,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-WRN5ADPR.js";
+} from "./chunks/chunk-BSE346UI.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";

package/dist/playground/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "../chunks/chunk-NYVFYSZ6.js";
+} from "../chunks/chunk-XWGHLFRX.js";
 import {
   boardLayout,
   compileWireframe,
@@ -9,7 +9,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-WRN5ADPR.js";
+} from "../chunks/chunk-BSE346UI.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";