tsquare 0.13.2 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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.

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 `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)).
+`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

@@ -23570,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;
@@ -23677,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) {

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/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 {

package/dist/hit.d.ts

@@ -0,0 +1,88 @@
+/**
+ * What's under a point or a line, from measureElements' entries: plain data in, plain data out, and
+ * nothing heavy imported, so the viewer (tsquare/viewer) can hit-test in the browser without the
+ * renderer. measure.ts produces the entries and re-exports all of this.
+ */
+import type { ComponentName } from "./catalog.js";
+/** A box on the board, in board pixels: the same coordinates as the rendered SVG. */
+export interface MeasuredBox {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface MeasuredElement {
+    /** The element's line in the wireframe text; 0 when `lines` doesn't have it. */
+    line: number;
+    /** The last line of its block (its children included); `line` when it has no children. */
+    endLine: number;
+    /** Its #id, when the text gives one. */
+    id?: string;
+    /** "Button", "Screen", … */
+    type: Exclude<ComponentName, "Flow">;
+    /** Its main text: a button's label, a screen's name, a heading's text. */
+    label?: string;
+    /** The line of the screen it's on; null for the board, screens and notes beside them. */
+    screenLine: number | null;
+    /** 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, 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;
+    /** Screens: the band above the frame with the screen's name. */
+    labelBox?: MeasuredBox;
+    /** Its open menu, option list or date picker, and its tooltip, in drawing order (a tooltip's and a date picker's size within a few px). */
+    overlays?: MeasuredBox[];
+    /** Modals and drawers: whether the screen behind is dimmed (on unless the text says no-scrim). */
+    scrim?: boolean;
+}
+export interface MeasuredFlow {
+    /** The flow's line in the wireframe text; 0 when `lines` doesn't have it. */
+    line: number;
+    /** Always `line`: a flow has no children. */
+    endLine: number;
+    type: "Flow";
+    label?: string;
+    /** The ids it connects, as written in the flow line. */
+    from: string;
+    to: string;
+    /** The lines of the elements (or screens) it connects. */
+    fromLine: number;
+    toLine: number;
+    /** The drawn line as points, from the tip of one end's marker to the other's; curves and corners are sampled. */
+    path: [number, number][];
+    /** The label pill. */
+    labelBox?: MeasuredBox;
+}
+export type Measured = MeasuredElement | MeasuredFlow;
+export declare const isFlow: (e: Measured) => e is MeasuredFlow;
+/** Dim their screen while open (unless no-scrim): a click on the dimmed part is a click on the screen. */
+export declare const COVERS_SCREEN: Set<string>;
+export declare const OVERLAYS: Set<string>;
+/**
+ * Components that hold others (the catalog's components with slots; a test keeps the two equal):
+ * from the type, not from the lines, so the order doesn't depend on them.
+ */
+export declare const CONTAINERS: ReadonlySet<string>;
+/**
+ * Everything under a point (board pixels), most likely meant first:
+ *   1. an open menu, option list, date picker or tooltip: the element it belongs to
+ *   2. a flow's label
+ *   3. elements that hold no others (buttons, inputs, text, …), topmost first
+ *   4. a flow's line, within `tolerance` px of it (default 6; pass more when the board is shown zoomed out)
+ *   5. stacks, cards, modals and drawers, then the screen, then the board
+ * A modal, drawer or toast hides the screen's content under it. One that dims its screen (modals and
+ * drawers, unless no-scrim) hides all of it: on the dimmed part, only the screen and the board.
+ */
+export declare function elementsAt(elements: Measured[], x: number, y: number, opts?: {
+    tolerance?: number;
+}): Measured[];
+/**
+ * The element on a line and every block around it, innermost first: for a code view that follows
+ * the caret. A comment or blank line between an element's children gives that element. A flow's
+ * line gives the flow, then the board.
+ */
+export declare function elementsAtLine(elements: Measured[], line: number): Measured[];