tsquare 0.13.1 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 0.14.0
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.13.2.
+
+- **Click elements in the viewer.** `tsquare/viewer` takes a board's `measureElements` entries (`setElements`) and reports clicks and hovers on elements (`onElementClick(hit, hits, event)`, `onElementHover(hit, hits)`), with `hits` in `elementsAt`'s order. A click is a press that hardly moves (dragging still pans), and a flow's line counts within 8 screen pixels at any zoom. `highlight(entries, { kind: "selected" | "hover" })` outlines elements and flows inside the zoomed board (`--tsquare-highlight`), `zoomTo(entry)` fits one, `layer` is an element over the board in board pixels for the host's own marks, and `toBoard(clientX, clientY)` turns a point on the page into board pixels. The viewer only hit-tests: it never renders or measures, so the host measures where it renders and hands the entries over. Without entries it works as before. It's 4.6 KB compressed (2.3 KB before). See [Element positions](docs/element-positions.md#in-the-viewer).
+- **The playground:** click an element on the board and the editor selects its line; move the caret and its element is outlined on the board; hovering outlines what's under the pointer. `/api/render?elements=1` returns the entries with the board.
+- **`tsquare/editor`: `onCursorLine(line)`**, called when the caret moves to another line.
+- `elementsAt` and `elementsAtLine` live in their own small module (`hit.ts`), so the viewer can use them without the renderer. The main package exports them as before.
+
+## 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. Give it the board's `measureElements` entries (`setElements`) and it reports clicks and hovers on elements, outlines them (`highlight`) and zooms to them (`zoomTo`): see [Element positions](docs/element-positions.md#in-the-viewer). `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`
 
@@ -168,7 +168,7 @@ const editor = createEditor(document.getElementById("code")!, {
 });
 ```
 
-Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `lineNumbers` (default `true`), `lineWrapping` (default `false`: wrap long lines instead of scrolling sideways, continuation rows indented 4 spaces past their line's indentation, so they don't look like a child element) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
+Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `onCursorLine` (the caret's line, when it moves to another), `lineNumbers` (default `true`), `lineWrapping` (default `false`: wrap long lines instead of scrolling sideways, continuation rows indented 4 spaces past their line's indentation, so they don't look like a child element) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
 
 Its colors are CSS variables, light or dark by the page's `color-scheme`, defaulting to the playground's:
 

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";
@@ -23546,11 +23570,52 @@ function addStyles(doc) {
   doc.head.append(style);
 }
 
-// src/measure.ts
+// src/hit.ts
 var isFlow = (e) => e.type === "Flow";
 var COVERS_SCREEN = /* @__PURE__ */ new Set(["Modal", "Drawer"]);
 var OVERLAYS = /* @__PURE__ */ new Set(["Modal", "Drawer", "Toast"]);
-var CONTAINERS = new Set(Object.entries(componentDefinitions).filter(([, d2]) => d2.slots.length).map(([name]) => name));
+var CONTAINERS = /* @__PURE__ */ new Set(["Board", "Screen", "Stack", "Grid", "Card", "Accordion", "List", "Modal", "Drawer"]);
+var inside = (b, x3, y) => !!b && b.width > 0 && b.height > 0 && x3 >= b.x && x3 <= b.x + b.width && y >= b.y && y <= b.y + b.height;
+var center = (b) => [b.x + b.width / 2, b.y + b.height / 2];
+function distanceToPath(path, x3, y) {
+  let best = Infinity;
+  for (let i2 = 1; i2 < path.length; i2++) {
+    const [ax, ay] = path[i2 - 1], [bx, by] = path[i2];
+    const dx = bx - ax, dy = by - ay, len = dx * dx + dy * dy;
+    const t = len ? Math.max(0, Math.min(1, ((x3 - ax) * dx + (y - ay) * dy) / len)) : 0;
+    best = Math.min(best, Math.hypot(x3 - ax - t * dx, y - ay - t * dy));
+  }
+  return best;
+}
+var isContainer = (e) => CONTAINERS.has(e.type);
+function elementsAt(elements, x3, y, opts = {}) {
+  const tolerance = opts.tolerance ?? 6;
+  const order = new Map(elements.map((e, i2) => [e, i2]));
+  const topFirst = (a, b) => order.get(b) - order.get(a);
+  const covered = /* @__PURE__ */ new Set();
+  const screens = elements.filter((e) => e.type === "Screen");
+  const screenAround = (b) => screens.find((s) => inside(s.box, ...center(b)));
+  for (const [i2, m2] of elements.entries()) {
+    if (isFlow(m2) || !OVERLAYS.has(m2.type)) continue;
+    const screen = screenAround(m2.box);
+    if (!screen || !inside(m2.box, x3, y) && !(m2.scrim && inside(screen.box, x3, y))) continue;
+    for (const e of elements.slice(0, i2)) if (!isFlow(e) && e.type !== "Screen" && e.type !== "Board" && screenAround(e.box) === screen) covered.add(e);
+  }
+  const owners = [], labels = [], leaves = [], lines = [], containers = [];
+  for (const e of elements) {
+    if (isFlow(e)) {
+      if (inside(e.labelBox, x3, y)) labels.push(e);
+      else if (distanceToPath(e.path, x3, y) <= tolerance) lines.push(e);
+    } else if (e.overlays?.some((o2) => inside(o2, x3, y))) owners.push(e);
+    else if (!covered.has(e) && (inside(e.box, x3, y) || inside(e.labelBox, x3, y))) (isContainer(e) ? containers : leaves).push(e);
+  }
+  return [owners, labels, leaves, lines, containers].flatMap((g2) => g2.sort(topFirst));
+}
+function elementsAtLine(elements, line) {
+  return elements.filter((e) => e.line > 0 && e.line <= line && line <= e.endLine).sort((a, b) => b.line - a.line);
+}
+
+// src/measure.ts
 var BARS = /* @__PURE__ */ new Set(["NavBar", "TabBar"]);
 var toBox = (r) => ({ x: round(r.x), y: round(r.y), width: round(r.w), height: round(r.h) });
 var round = (n) => Math.round(n * 100) / 100;
@@ -23566,13 +23631,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 +23685,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);
@@ -23650,45 +23718,6 @@ async function measureElements(spec, lines, opts = {}) {
   }
   return out;
 }
-var inside = (b, x3, y) => !!b && b.width > 0 && b.height > 0 && x3 >= b.x && x3 <= b.x + b.width && y >= b.y && y <= b.y + b.height;
-var center = (b) => [b.x + b.width / 2, b.y + b.height / 2];
-function distanceToPath(path, x3, y) {
-  let best = Infinity;
-  for (let i2 = 1; i2 < path.length; i2++) {
-    const [ax, ay] = path[i2 - 1], [bx, by] = path[i2];
-    const dx = bx - ax, dy = by - ay, len = dx * dx + dy * dy;
-    const t = len ? Math.max(0, Math.min(1, ((x3 - ax) * dx + (y - ay) * dy) / len)) : 0;
-    best = Math.min(best, Math.hypot(x3 - ax - t * dx, y - ay - t * dy));
-  }
-  return best;
-}
-var isContainer = (e) => CONTAINERS.has(e.type);
-function elementsAt(elements, x3, y, opts = {}) {
-  const tolerance = opts.tolerance ?? 6;
-  const order = new Map(elements.map((e, i2) => [e, i2]));
-  const topFirst = (a, b) => order.get(b) - order.get(a);
-  const covered = /* @__PURE__ */ new Set();
-  const screens = elements.filter((e) => e.type === "Screen");
-  const screenAround = (b) => screens.find((s) => inside(s.box, ...center(b)));
-  for (const [i2, m2] of elements.entries()) {
-    if (isFlow(m2) || !OVERLAYS.has(m2.type)) continue;
-    const screen = screenAround(m2.box);
-    if (!screen || !inside(m2.box, x3, y) && !(m2.scrim && inside(screen.box, x3, y))) continue;
-    for (const e of elements.slice(0, i2)) if (!isFlow(e) && e.type !== "Screen" && e.type !== "Board" && screenAround(e.box) === screen) covered.add(e);
-  }
-  const owners = [], labels = [], leaves = [], lines = [], containers = [];
-  for (const e of elements) {
-    if (isFlow(e)) {
-      if (inside(e.labelBox, x3, y)) labels.push(e);
-      else if (distanceToPath(e.path, x3, y) <= tolerance) lines.push(e);
-    } else if (e.overlays?.some((o2) => inside(o2, x3, y))) owners.push(e);
-    else if (!covered.has(e) && (inside(e.box, x3, y) || inside(e.labelBox, x3, y))) (isContainer(e) ? containers : leaves).push(e);
-  }
-  return [owners, labels, leaves, lines, containers].flatMap((g2) => g2.sort(topFirst));
-}
-function elementsAtLine(elements, line) {
-  return elements.filter((e) => e.line > 0 && e.line <= line && line <= e.endLine).sort((a, b) => b.line - a.line);
-}
 
 // src/playground/language-data.ts
 function unwrap4(t) {
@@ -23765,6 +23794,7 @@ export {
   printWireframeText as formatWireframe,
   languageData,
   mcpTools,
+  measureBoardLayout,
   measureElements,
   parseWireframeText,
   registry,

package/dist/chunks/chunk-NZWKURF4.js

@@ -0,0 +1,236 @@
+import {
+  ACCENTS,
+  LABEL_H,
+  PRIMARY_PROP,
+  SpecError,
+  UNIVERSAL_PROPS,
+  bareWords,
+  boardLayout,
+  checkSpec,
+  componentDefinitions,
+  findAnchors,
+  flowEnds,
+  flowPolyline,
+  iconNames,
+  layoutFlows,
+  loadFonts,
+  overlayBoxes,
+  paletteFor,
+  readMarkers,
+  tagForMeasuring,
+  takesUniversalProps,
+  upgradeSpec,
+  withBoardGap,
+  withMarkers,
+  withNoteHeights,
+  withPalette
+} from "./chunk-QYGOXTAG.js";
+
+// src/hit.ts
+var isFlow = (e) => e.type === "Flow";
+var COVERS_SCREEN = /* @__PURE__ */ new Set(["Modal", "Drawer"]);
+var OVERLAYS = /* @__PURE__ */ new Set(["Modal", "Drawer", "Toast"]);
+var CONTAINERS = /* @__PURE__ */ new Set(["Board", "Screen", "Stack", "Grid", "Card", "Accordion", "List", "Modal", "Drawer"]);
+var inside = (b, x, y) => !!b && b.width > 0 && b.height > 0 && x >= b.x && x <= b.x + b.width && y >= b.y && y <= b.y + b.height;
+var center = (b) => [b.x + b.width / 2, b.y + b.height / 2];
+function distanceToPath(path, x, y) {
+  let best = Infinity;
+  for (let i = 1; i < path.length; i++) {
+    const [ax, ay] = path[i - 1], [bx, by] = path[i];
+    const dx = bx - ax, dy = by - ay, len = dx * dx + dy * dy;
+    const t = len ? Math.max(0, Math.min(1, ((x - ax) * dx + (y - ay) * dy) / len)) : 0;
+    best = Math.min(best, Math.hypot(x - ax - t * dx, y - ay - t * dy));
+  }
+  return best;
+}
+var isContainer = (e) => CONTAINERS.has(e.type);
+function elementsAt(elements, x, y, opts = {}) {
+  const tolerance = opts.tolerance ?? 6;
+  const order = new Map(elements.map((e, i) => [e, i]));
+  const topFirst = (a, b) => order.get(b) - order.get(a);
+  const covered = /* @__PURE__ */ new Set();
+  const screens = elements.filter((e) => e.type === "Screen");
+  const screenAround = (b) => screens.find((s) => inside(s.box, ...center(b)));
+  for (const [i, m] of elements.entries()) {
+    if (isFlow(m) || !OVERLAYS.has(m.type)) continue;
+    const screen = screenAround(m.box);
+    if (!screen || !inside(m.box, x, y) && !(m.scrim && inside(screen.box, x, y))) continue;
+    for (const e of elements.slice(0, i)) if (!isFlow(e) && e.type !== "Screen" && e.type !== "Board" && screenAround(e.box) === screen) covered.add(e);
+  }
+  const owners = [], labels = [], leaves = [], lines = [], containers = [];
+  for (const e of elements) {
+    if (isFlow(e)) {
+      if (inside(e.labelBox, x, y)) labels.push(e);
+      else if (distanceToPath(e.path, x, y) <= tolerance) lines.push(e);
+    } else if (e.overlays?.some((o) => inside(o, x, y))) owners.push(e);
+    else if (!covered.has(e) && (inside(e.box, x, y) || inside(e.labelBox, x, y))) (isContainer(e) ? containers : leaves).push(e);
+  }
+  return [owners, labels, leaves, lines, containers].flatMap((g) => g.sort(topFirst));
+}
+function elementsAtLine(elements, line) {
+  return elements.filter((e) => e.line > 0 && e.line <= line && line <= e.endLine).sort((a, b) => b.line - a.line);
+}
+
+// src/measure.ts
+import { renderToSvg } from "@json-render/image/render";
+var BARS = /* @__PURE__ */ new Set(["NavBar", "TabBar"]);
+var toBox = (r) => ({ x: round(r.x), y: round(r.y), width: round(r.w), height: round(r.h) });
+var round = (n) => Math.round(n * 100) / 100;
+function clip(r, to) {
+  if (!to) return r;
+  const x = Math.max(r.x, to.x), y = Math.max(r.y, to.y);
+  const w = Math.min(r.x + r.w, to.x + to.w) - x, h = Math.min(r.y + r.h, to.y + to.h) - y;
+  return w >= 0 && h >= 0 && (w > 0 || r.w === 0) && (h > 0 || r.h === 0) ? { x, y, w, h } : null;
+}
+async function measureElements(spec, lines, opts = {}) {
+  upgradeSpec(spec);
+  if (!opts.skipValidation) {
+    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 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 });
+  const laidOut = (els[spec.root].children ?? []).filter((k) => els[k]?.type === "Screen" || els[k]?.type === "Note");
+  const frames = /* @__PURE__ */ new Map(), bands = /* @__PURE__ */ new Map();
+  laidOut.forEach((k, i) => {
+    const it = items[i];
+    if (!it || els[k].type !== "Screen") return;
+    frames.set(k, { x: it.x, y: it.y + LABEL_H, w: it.width, h: it.height - LABEL_H });
+    bands.set(k, { x: it.x, y: it.y, w: it.width, h: LABEL_H });
+  });
+  const overlays = /* @__PURE__ */ new Map();
+  for (const o of overlayBoxes(spec, anchors, boxes)) overlays.set(o.id, [...overlays.get(o.id) ?? [], o.box]);
+  const lineOf = (k) => k == null ? null : lines[k] ?? 0;
+  const endLine = (k) => Math.max(lines[k] ?? 0, ...(els[k].children ?? []).filter((c) => els[c]).map(endLine));
+  const labelOf = (k) => {
+    const p = els[k].props ?? {};
+    const v = p[PRIMARY_PROP[els[k].type] ?? ""];
+    return typeof v === "string" ? v : void 0;
+  };
+  const out = [];
+  const visit = (k, parent, screen, cut) => {
+    const el = els[k];
+    if (!el || el.type === "Flow") return;
+    const p = el.props ?? {};
+    const base = { line: lineOf(k), endLine: endLine(k), ...typeof p.id === "string" ? { id: p.id } : {}, type: el.type, ...labelOf(k) != null ? { label: labelOf(k) } : {}, screenLine: lineOf(screen), parentLine: lineOf(parent) };
+    let entry = null;
+    if (el.type === "Board") entry = { ...base, box: { x: 0, y: 0, width, height } };
+    else if (el.type === "Screen") {
+      const frame = frames.get(k);
+      if (frame) entry = { ...base, box: toBox(frame), labelBox: toBox(bands.get(k)) };
+    } else {
+      const r = boxes[k];
+      const seen = r && clip(r, cut);
+      if (seen) {
+        const view = screen ? boxes[screen] ?? frames.get(screen) : void 0;
+        const os = (overlays.get(k) ?? []).map((o) => clip(o, view)).filter((o) => !!o && o.w > 0 && o.h > 0);
+        entry = { ...base, box: toBox(seen), ...os.length ? { overlays: os.map(toBox) } : {}, ...COVERS_SCREEN.has(el.type) ? { scrim: p.scrim ?? true } : {} };
+      }
+    }
+    if (entry) out.push(entry);
+    const inScreen = el.type === "Screen" ? k : screen;
+    const kids = el.children ?? [];
+    if (el.type === "Screen") {
+      const frame = frames.get(k) ?? null;
+      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) ? 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);
+    }
+  };
+  visit(spec.root, null, null, null);
+  if (opts.flows !== false) {
+    const flows = flowEnds(spec);
+    const resolved = flows.resolve(boxes);
+    const ends = new Map(flows.list.map((f) => [f.key, f]));
+    layoutFlows(spec, resolved, flows.screens, flows.gap, paletteFor()).forEach((f) => {
+      const p = els[f.key].props ?? {};
+      const e = ends.get(f.key);
+      out.push({
+        line: lineOf(f.key),
+        endLine: lineOf(f.key),
+        type: "Flow",
+        ...f.label ? { label: f.label.text } : {},
+        from: String(p.from),
+        to: String(p.to),
+        fromLine: lineOf(e.from),
+        toLine: lineOf(e.to),
+        path: flowPolyline(f).map((q) => [round(q.x), round(q.y)]),
+        ...f.label ? { labelBox: toBox(f.label) } : {}
+      });
+    });
+  }
+  return out;
+}
+
+// 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 {
+  elementsAt,
+  elementsAtLine,
+  measureElements,
+  languageData
+};

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/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/editor.js

@@ -22601,6 +22601,14 @@ var hangingIndent = ViewPlugin.fromClass(
   { decorations: (p) => p.decorations }
 );
 var wrapping = [EditorView.lineWrapping, hangingIndent];
+function cursorLine(report) {
+  let last2 = 0;
+  return EditorView.updateListener.of((u) => {
+    if (!u.selectionSet && !u.docChanged) return;
+    const line = u.state.doc.lineAt(u.state.selection.main.head).number;
+    if (line !== last2) report(last2 = line);
+  });
+}
 function createEditor(parent, opts = {}) {
   const extensions = [
     opts.lineNumbers === false ? [] : [lineNumbers(), highlightActiveLineGutter()],
@@ -22622,7 +22630,8 @@ function createEditor(parent, opts = {}) {
     EditorView.contentAttributes.of({ "aria-label": opts.ariaLabel ?? "Wireframe text", spellcheck: "false", autocapitalize: "off" }),
     EditorView.updateListener.of((u) => {
       if (u.docChanged) opts.onChange?.(u.state.doc.toString());
-    })
+    }),
+    opts.onCursorLine ? cursorLine(opts.onCursorLine) : []
   ];
   const view = new EditorView({ parent, state: EditorState.create({ doc: opts.doc ?? "", extensions }) });
   return {