tsquare 0.13.1 → 0.13.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+## 0.13.2
+
+The language hasn't changed. Boards without notes on the board render exactly as in 0.13.1, and so do the 438 example and eval boards; boards where a note's height was misjudged are fixed.
+
+- **Notes on the board get their real height** (#44). The layout estimated a note's height from its text's length, but the board draws the real wrap. In a grid, a row holding only notes could then be drawn a line or more taller or shorter than laid out, and every screen below it moved: flow arrows routed through the wrong place (an arrow's lane could cut across a screen), `measureElements` boxes missed the drawn screens, and a long note could be cut off at the bottom of the board, squeezing the title. Notes are now measured in a quick render of their own before the board is laid out (about 5 ms; none when a board has no notes).
+- **`measureBoardLayout(spec, { flows })`**: the board's size and each screen's position, exact (async, since it renders the notes). Use it to size the image and place screen chips. `boardLayout` is unchanged: synchronous, with the estimate. `renderAll`, the playground and the MCP render tool use the exact one now.
+- **A modal taller than its screen is measured below the status bar** (#45). The screen draws its modals, drawers and toasts below its status or browser bar, but `measureElements` cut them only to the frame, so a long form in a modal (16 fields on a phone) had a box over the status bar, and a click there returned the modal. They and their contents are now cut where they're drawn.
+- **Measuring works in DOMs without `structuredClone`** (jsdom): boards with notes, tooltips or flows failed there with "structuredClone is not defined".
+
 ## 0.13.1
 
 The language and the renderer haven't changed: every wireframe renders exactly as in 0.13.0.

package/README.md

@@ -151,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.13/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. `measureElements` gives each element's box on the board and its line in the text, and `elementsAt` what's under a click, for making a board clickable (see [Element positions](docs/element-positions.md)).
+`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 `measureBoardLayout` (exact; `boardLayout` is a synchronous estimate that can be off by a line or more on boards with notes). 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.13/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. `measureElements` gives each element's box on the board and its line in the text, and `elementsAt` what's under a click, for making a board clickable (see [Element positions](docs/element-positions.md)).
 
 ### The editor: `tsquare/editor`
 

package/dist/browser/index.js

@@ -21840,7 +21840,7 @@ function findAnchors(spec) {
 }
 var MARK = (i2) => `#fe${(i2 >> 8).toString(16).padStart(2, "0")}${(i2 & 255).toString(16).padStart(2, "0")}`;
 function tagForMeasuring(spec, anchors, bodies = []) {
-  const tagged = structuredClone(spec);
+  const tagged = { ...spec, elements: Object.fromEntries(Object.entries(spec.elements).map(([k, el2]) => [k, { ...el2 }])) };
   const colors = /* @__PURE__ */ new Map();
   let n = 1;
   const tag = (id, part) => {
@@ -22932,7 +22932,8 @@ function boardLayout(spec, opts = {}) {
     }
     if (el2.type === "Note") {
       const w2 = props.width ?? NOTE_WIDTH;
-      return { type: "Note", name: String(props.text ?? ""), w: w2, h: LABEL_H + estimateNoteHeight(props.text ?? "", w2) };
+      const h2 = typeof props.__height === "number" ? props.__height : estimateNoteHeight(props.text ?? "", w2);
+      return { type: "Note", name: String(props.text ?? ""), w: w2, h: LABEL_H + h2 };
     }
     return null;
   });
@@ -22976,6 +22977,28 @@ function flowLabelGap(spec, laidOut, perRow) {
   }
   return widest ? widest + 32 : 0;
 }
+async function withNoteHeights(spec) {
+  const els = spec.elements;
+  const notes = (els[spec.root]?.children ?? []).filter((k) => els[k]?.type === "Note");
+  if (!notes.length || notes.every((k) => typeof els[k].props?.__height === "number")) return spec;
+  let root = "__notes";
+  while (root in els) root += "_";
+  const probe = {
+    root,
+    elements: { [root]: { type: "Board", props: { layout: "grid", columns: 1, padding: 0, gap: 0 }, children: notes }, ...Object.fromEntries(notes.map((k) => [k, els[k]])) }
+  };
+  const { tagged, colors } = tagForMeasuring(probe, notes.map((id) => ({ id, screen: id, kind: "tooltip", field: false })));
+  const props = (k) => els[k].props ?? {};
+  const width = Math.max(...notes.map((k) => props(k).width ?? NOTE_WIDTH));
+  const height = notes.reduce((sum, k) => sum + LABEL_H + 3 * estimateNoteHeight(props(k).text ?? "", props(k).width ?? NOTE_WIDTH), 100);
+  const svg = await renderToSvg(tagged, { registry: withMarkers(withPalette(paletteFor())), includeStandard: false, fonts: await loadFonts(), width, height });
+  const boxes = readMarkers(svg, colors);
+  const measured = notes.filter((k) => boxes[k]).map((k) => [k, { ...els[k], props: { ...props(k), __height: boxes[k].h } }]);
+  return { ...spec, elements: { ...els, ...Object.fromEntries(measured) } };
+}
+async function measureBoardLayout(spec, opts = {}) {
+  return boardLayout(await withNoteHeights(spec), opts);
+}
 function boardSize(spec, opts = {}) {
   const { width, height } = boardLayout(spec, opts);
   return { width, height };
@@ -22986,6 +23009,7 @@ async function renderWireframeSvg(spec, opts = {}) {
     const issues = checkSpec(spec);
     if (issues.length) throw new SpecError(issues);
   }
+  spec = await withNoteHeights(spec);
   const flowsOn = opts.flows !== false;
   const { width, height } = boardLayout(spec, { flows: opts.flows });
   spec = withBoardGap(spec, opts.flows);
@@ -23420,7 +23444,7 @@ async function renderWireframeTool(args) {
   const { spec, issues } = compileWireframe(args.text);
   if (!spec || issues.length) return problems(issues);
   const flows = args.flows !== false;
-  const { width, height } = boardSize(spec, { flows });
+  const { width, height } = await measureBoardLayout(spec, { flows });
   const scale = Math.min(1, MODEL_IMAGE_MAX / Math.max(width, height));
   const png = await renderWireframePng(spec, { skipValidation: true, flows, scale });
   const shown = scale < 1 ? `, shown at ${Math.round(width * scale)}\xD7${Math.round(height * scale)}` : "";
@@ -23506,7 +23530,7 @@ async function renderBlock(doc, source) {
   if (!spec || issues.length) return problems2(doc, issues.map((i2) => `line ${i2.line}: ${i2.message}`));
   try {
     const svg = await renderWireframeSvg(spec, { skipValidation: true });
-    const { width, height } = boardLayout(spec);
+    const { width, height } = await measureBoardLayout(spec);
     const title = spec.elements[spec.root]?.props?.title;
     const figure = doc.createElement("figure");
     figure.className = "tsquare-board";
@@ -23566,13 +23590,15 @@ async function measureElements(spec, lines, opts = {}) {
     const issues = checkSpec(spec);
     if (issues.length) throw new SpecError(issues);
   }
+  spec = await withNoteHeights(spec);
   const { width, height } = boardLayout(spec, { flows: opts.flows });
   spec = withBoardGap(spec, opts.flows);
   const els = spec.elements;
   const anchors = findAnchors(spec);
   const every = Object.keys(els).filter((k) => !["Board", "Screen", "Flow"].includes(els[k].type)).map((id) => ({ id, screen: id, kind: "tooltip", field: false }));
   const screens = Object.keys(els).filter((k) => els[k].type === "Screen");
-  const { tagged, colors } = tagForMeasuring(spec, [...anchors, ...every], screens);
+  const inners = screens.map((id) => ({ id, screen: id, kind: "tooltip", field: false }));
+  const { tagged, colors } = tagForMeasuring(spec, [...anchors, ...every, ...inners], screens);
   const svg = await renderToSvg(tagged, { registry: withMarkers(withPalette(paletteFor())), includeStandard: false, fonts: await loadFonts(), width, height });
   const boxes = readMarkers(svg, colors);
   const { items } = boardLayout(spec, { flows: opts.flows });
@@ -23618,9 +23644,10 @@ async function measureElements(spec, lines, opts = {}) {
     const kids = el2.children ?? [];
     if (el2.type === "Screen") {
       const frame = frames.get(k) ?? null;
-      const body = clip(boxes[`${k}#body`] ?? frame, frame);
+      const inner = clip(boxes[k] ?? frame, frame);
+      const body = clip(boxes[`${k}#body`] ?? inner, inner);
       const over = (c2) => OVERLAYS.has(els[c2]?.type);
-      for (const c2 of [...kids.filter((c3) => !over(c3)), ...kids.filter(over)]) visit(c2, k, k, BARS.has(els[c2]?.type) || over(c2) ? frame : body);
+      for (const c2 of [...kids.filter((c3) => !over(c3)), ...kids.filter(over)]) visit(c2, k, k, BARS.has(els[c2]?.type) || over(c2) ? inner : body);
     } else {
       const inner = el2.type === "Drawer" && boxes[k] ? clip(boxes[k], cut) : cut;
       for (const c2 of kids) visit(c2, k, inScreen, inner);
@@ -23765,6 +23792,7 @@ export {
   printWireframeText as formatWireframe,
   languageData,
   mcpTools,
+  measureBoardLayout,
   measureElements,
   parseWireframeText,
   registry,

package/dist/chunks/{chunk-K3Y2E2QA.js → chunk-QYGOXTAG.js}

@@ -2383,7 +2383,7 @@ function findAnchors(spec) {
 }
 var MARK = (i) => `#fe${(i >> 8).toString(16).padStart(2, "0")}${(i & 255).toString(16).padStart(2, "0")}`;
 function tagForMeasuring(spec, anchors, bodies = []) {
-  const tagged = structuredClone(spec);
+  const tagged = { ...spec, elements: Object.fromEntries(Object.entries(spec.elements).map(([k, el]) => [k, { ...el }])) };
   const colors = /* @__PURE__ */ new Map();
   let n = 1;
   const tag = (id, part) => {
@@ -2985,7 +2985,8 @@ function boardLayout(spec, opts = {}) {
     }
     if (el.type === "Note") {
       const w = props.width ?? NOTE_WIDTH;
-      return { type: "Note", name: String(props.text ?? ""), w, h: LABEL_H + estimateNoteHeight(props.text ?? "", w) };
+      const h = typeof props.__height === "number" ? props.__height : estimateNoteHeight(props.text ?? "", w);
+      return { type: "Note", name: String(props.text ?? ""), w, h: LABEL_H + h };
     }
     return null;
   });
@@ -3029,6 +3030,28 @@ function flowLabelGap(spec, laidOut, perRow) {
   }
   return widest ? widest + 32 : 0;
 }
+async function withNoteHeights(spec) {
+  const els = spec.elements;
+  const notes = (els[spec.root]?.children ?? []).filter((k) => els[k]?.type === "Note");
+  if (!notes.length || notes.every((k) => typeof els[k].props?.__height === "number")) return spec;
+  let root = "__notes";
+  while (root in els) root += "_";
+  const probe = {
+    root,
+    elements: { [root]: { type: "Board", props: { layout: "grid", columns: 1, padding: 0, gap: 0 }, children: notes }, ...Object.fromEntries(notes.map((k) => [k, els[k]])) }
+  };
+  const { tagged, colors } = tagForMeasuring(probe, notes.map((id) => ({ id, screen: id, kind: "tooltip", field: false })));
+  const props = (k) => els[k].props ?? {};
+  const width = Math.max(...notes.map((k) => props(k).width ?? NOTE_WIDTH));
+  const height = notes.reduce((sum, k) => sum + LABEL_H + 3 * estimateNoteHeight(props(k).text ?? "", props(k).width ?? NOTE_WIDTH), 100);
+  const svg = await renderToSvg(tagged, { registry: withMarkers(withPalette(paletteFor())), includeStandard: false, fonts: await loadFonts(), width, height });
+  const boxes = readMarkers(svg, colors);
+  const measured = notes.filter((k) => boxes[k]).map((k) => [k, { ...els[k], props: { ...props(k), __height: boxes[k].h } }]);
+  return { ...spec, elements: { ...els, ...Object.fromEntries(measured) } };
+}
+async function measureBoardLayout(spec, opts = {}) {
+  return boardLayout(await withNoteHeights(spec), opts);
+}
 function boardSize(spec, opts = {}) {
   const { width, height } = boardLayout(spec, opts);
   return { width, height };
@@ -3039,6 +3062,7 @@ async function renderWireframeSvg(spec, opts = {}) {
     const issues = checkSpec(spec);
     if (issues.length) throw new SpecError(issues);
   }
+  spec = await withNoteHeights(spec);
   const flowsOn = opts.flows !== false;
   const { width, height } = boardLayout(spec, { flows: opts.flows });
   spec = withBoardGap(spec, opts.flows);
@@ -3412,6 +3436,8 @@ export {
   SpecError,
   checkSpec,
   boardLayout,
+  withNoteHeights,
+  measureBoardLayout,
   boardSize,
   renderWireframeSvg,
   withBoardGap,

package/dist/chunks/{chunk-HVGRKWIV.js → chunk-W5RDSAXT.js}

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

package/dist/cli.js

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

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { mcpTools, MCP_INSTRUCTIONS, LINK_KINDS, DEFAULT_LINKS, type LinkKind, w
 export { upgradeWireframe, upgradeSpec, RENAMED_PROPS, type UpgradeOptions } from "./upgrade.js";
 export { renderAll, DEFAULT_SELECTOR, type RenderAllOptions, type RenderAllResult } from "./dom.js";
 export { measureElements, elementsAt, elementsAtLine, type Measured, type MeasuredElement, type MeasuredFlow, type MeasuredBox, type MeasureOptions } from "./measure.js";
-export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, boardLayout, type BoardItem, type RenderWireframeOptions } from "./render.js";
+export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, boardLayout, measureBoardLayout, type BoardItem, type RenderWireframeOptions } from "./render.js";
 export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js";
 export { catalog, componentDefinitions } from "./catalog.js";
 export { registry } from "./components.js";

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "./chunks/chunk-HVGRKWIV.js";
+} from "./chunks/chunk-W5RDSAXT.js";
 import {
   DEVICES,
   LABEL_H,
@@ -21,6 +21,7 @@ import {
   languageReference,
   layoutFlows,
   loadFonts,
+  measureBoardLayout,
   overlayBoxes,
   paletteFor,
   parseWireframeText,
@@ -38,8 +39,9 @@ import {
   wireframePrompt,
   withBoardGap,
   withMarkers,
+  withNoteHeights,
   withPalette
-} from "./chunks/chunk-K3Y2E2QA.js";
+} from "./chunks/chunk-QYGOXTAG.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
@@ -130,7 +132,7 @@ async function renderWireframeTool(args) {
   const { spec, issues } = compileWireframe(args.text);
   if (!spec || issues.length) return problems(issues);
   const flows = args.flows !== false;
-  const { width, height } = boardSize(spec, { flows });
+  const { width, height } = await measureBoardLayout(spec, { flows });
   const scale = Math.min(1, MODEL_IMAGE_MAX / Math.max(width, height));
   const png = await renderWireframePng(spec, { skipValidation: true, flows, scale });
   const shown = scale < 1 ? `, shown at ${Math.round(width * scale)}\xD7${Math.round(height * scale)}` : "";
@@ -216,7 +218,7 @@ async function renderBlock(doc, source) {
   if (!spec || issues.length) return problems2(doc, issues.map((i) => `line ${i.line}: ${i.message}`));
   try {
     const svg = await renderWireframeSvg(spec, { skipValidation: true });
-    const { width, height } = boardLayout(spec);
+    const { width, height } = await measureBoardLayout(spec);
     const title = spec.elements[spec.root]?.props?.title;
     const figure = doc.createElement("figure");
     figure.className = "tsquare-board";
@@ -277,13 +279,15 @@ async function measureElements(spec, lines, opts = {}) {
     const issues = checkSpec(spec);
     if (issues.length) throw new SpecError(issues);
   }
+  spec = await withNoteHeights(spec);
   const { width, height } = boardLayout(spec, { flows: opts.flows });
   spec = withBoardGap(spec, opts.flows);
   const els = spec.elements;
   const anchors = findAnchors(spec);
   const every = Object.keys(els).filter((k) => !["Board", "Screen", "Flow"].includes(els[k].type)).map((id) => ({ id, screen: id, kind: "tooltip", field: false }));
   const screens = Object.keys(els).filter((k) => els[k].type === "Screen");
-  const { tagged, colors } = tagForMeasuring(spec, [...anchors, ...every], screens);
+  const inners = screens.map((id) => ({ id, screen: id, kind: "tooltip", field: false }));
+  const { tagged, colors } = tagForMeasuring(spec, [...anchors, ...every, ...inners], screens);
   const svg = await renderToSvg(tagged, { registry: withMarkers(withPalette(paletteFor())), includeStandard: false, fonts: await loadFonts(), width, height });
   const boxes = readMarkers(svg, colors);
   const { items } = boardLayout(spec, { flows: opts.flows });
@@ -329,9 +333,10 @@ async function measureElements(spec, lines, opts = {}) {
     const kids = el.children ?? [];
     if (el.type === "Screen") {
       const frame = frames.get(k) ?? null;
-      const body = clip(boxes[`${k}#body`] ?? frame, frame);
+      const inner = clip(boxes[k] ?? frame, frame);
+      const body = clip(boxes[`${k}#body`] ?? inner, inner);
       const over = (c) => OVERLAYS.has(els[c]?.type);
-      for (const c of [...kids.filter((c2) => !over(c2)), ...kids.filter(over)]) visit(c, k, k, BARS.has(els[c]?.type) || over(c) ? frame : body);
+      for (const c of [...kids.filter((c2) => !over(c2)), ...kids.filter(over)]) visit(c, k, k, BARS.has(els[c]?.type) || over(c) ? inner : body);
     } else {
       const inner = el.type === "Drawer" && boxes[k] ? clip(boxes[k], cut) : cut;
       for (const c of kids) visit(c, k, inScreen, inner);
@@ -424,6 +429,7 @@ export {
   printWireframeText as formatWireframe,
   languageData,
   mcpTools,
+  measureBoardLayout,
   measureElements,
   parseWireframeText,
   registry,

package/dist/measure.d.ts

@@ -32,8 +32,8 @@ export interface MeasuredElement {
     /** The line of the element containing it; null for the board. */
     parentLine: number | null;
     /**
-     * Where it's drawn: the part that shows, for content cut off by its screen (past the bottom, or
-     * under a tab bar) or by a drawer's panel. A screen's box is its frame. Can be 0 wide or 0 tall
+     * Where it's drawn: the part that shows, for content cut off by its screen (past the bottom, under
+     * a tab bar, or under the status or browser bar) or by a drawer's panel. A screen's box is its frame. Can be 0 wide or 0 tall
      * (a spacer in a row): such an element is listed, but never under a point.
      */
     box: MeasuredBox;

package/dist/playground/index.js

@@ -1,15 +1,15 @@
 import {
   languageData
-} from "../chunks/chunk-HVGRKWIV.js";
+} from "../chunks/chunk-W5RDSAXT.js";
 import {
-  boardLayout,
   compileWireframe,
   componentDocs,
   formatIssues,
+  measureBoardLayout,
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-K3Y2E2QA.js";
+} from "../chunks/chunk-QYGOXTAG.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";
@@ -498,7 +498,7 @@ function createPlaygroundHandler() {
       const flows = url.searchParams.get("flows") !== "0";
       if (url.pathname === "/api/render") {
         if (!spec || issues.length) return json(res, 200, { issues });
-        const { width, height, items } = boardLayout(spec, { flows });
+        const { width, height, items } = await measureBoardLayout(spec, { flows });
         return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true, flows }), width, height, items });
       }
       if (!spec || issues.length) return json(res, 400, { issues });

package/dist/render.d.ts

@@ -30,6 +30,26 @@ export declare function boardLayout(spec: Spec, opts?: {
     items: BoardItem[];
     gap: number;
 };
+/**
+ * The spec with each note on the board carrying its drawn height (`__height`), measured by rendering
+ * the notes alone. boardLayout otherwise estimates a note's height from its text's length, but the
+ * board draws the real wrap: a notes-only row in a grid then moved every screen below it off its
+ * layout, and a long note could be cut off at the bottom (#44). No render when the board has no notes.
+ */
+export declare function withNoteHeights(spec: Spec): Promise<Spec>;
+/**
+ * boardLayout with each note's drawn height, so the canvas size and every screen's position match
+ * the rendered board exactly. Use it to size the image and place screen chips; boardLayout is the
+ * synchronous estimate, off by a line or more when a note wraps differently than its length suggests.
+ */
+export declare function measureBoardLayout(spec: Spec, opts?: {
+    flows?: boolean;
+}): Promise<{
+    width: number;
+    height: number;
+    items: BoardItem[];
+    gap: number;
+}>;
 /** The canvas size for a board. */
 export declare function boardSize(spec: Spec, opts?: {
     flows?: boolean;