tsquare 0.12.2 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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

@@ -20823,21 +20823,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-NYVFYSZ6.js → chunk-2FU5Z5ON.js}

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

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

@@ -870,21 +870,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/cli.js

@@ -6,7 +6,7 @@ import {
   printWireframeText,
   renderWireframe,
   wireframePrompt
-} from "./chunks/chunk-WRN5ADPR.js";
+} from "./chunks/chunk-H4Y6VBEX.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-2FU5Z5ON.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -24,7 +24,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-WRN5ADPR.js";
+} from "./chunks/chunk-H4Y6VBEX.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-2FU5Z5ON.js";
 import {
   boardLayout,
   compileWireframe,
@@ -9,7 +9,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-WRN5ADPR.js";
+} from "../chunks/chunk-H4Y6VBEX.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";