tsquare 0.13.1 → 0.14.0

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[];

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,12 +1,12 @@
 import {
-  languageData
-} from "./chunks/chunk-HVGRKWIV.js";
+  elementsAt,
+  elementsAtLine,
+  languageData,
+  measureElements
+} from "./chunks/chunk-NZWKURF4.js";
 import {
   DEVICES,
-  LABEL_H,
-  PRIMARY_PROP,
   RENAMED_PROPS,
-  SpecError,
   WireframeError,
   boardLayout,
   boardSize,
@@ -14,32 +14,21 @@ import {
   checkSpec,
   compileWireframe,
   componentDefinitions,
-  findAnchors,
-  flowEnds,
-  flowPolyline,
   formatIssues,
   languageReference,
-  layoutFlows,
-  loadFonts,
-  overlayBoxes,
-  paletteFor,
+  measureBoardLayout,
   parseWireframeText,
   printWireframeText,
-  readMarkers,
   registry,
   renderWireframe,
   renderWireframePng,
   renderWireframeSvg,
   repairPrompt,
-  tagForMeasuring,
   theme,
   upgradeSpec,
   upgradeWireframe,
-  wireframePrompt,
-  withBoardGap,
-  withMarkers,
-  withPalette
-} from "./chunks/chunk-K3Y2E2QA.js";
+  wireframePrompt
+} from "./chunks/chunk-QYGOXTAG.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
@@ -130,7 +119,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 +205,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";
@@ -255,151 +244,6 @@ function addStyles(doc) {
   style.textContent = STYLES;
   doc.head.append(style);
 }
-
-// src/measure.ts
-import { renderToSvg } from "@json-render/image/render";
-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(([, d]) => d.slots.length).map(([name]) => name));
-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);
-  }
-  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 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 body = clip(boxes[`${k}#body`] ?? frame, frame);
-      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);
-    } 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;
-}
-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);
-}
 export {
   DEFAULT_LINKS,
   DEFAULT_SELECTOR,
@@ -424,6 +268,7 @@ export {
   printWireframeText as formatWireframe,
   languageData,
   mcpTools,
+  measureBoardLayout,
   measureElements,
   parseWireframeText,
   registry,

package/dist/measure.d.ts

@@ -8,61 +8,8 @@
  * so measure once per text and look up as often as needed (they also run on the JSON in a browser).
  */
 import type { Spec } from "@json-render/core";
-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, 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
-     * (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;
+import { type Measured, type MeasuredElement } from "./hit.js";
+export { elementsAt, elementsAtLine, type Measured, type MeasuredBox, type MeasuredElement, type MeasuredFlow } from "./hit.js";
 export interface MeasureOptions {
     /** As passed to renderWireframeSvg (default true): flow labels can widen the gaps between screens, so the boxes only match a render with the same setting. */
     flows?: boolean;
@@ -76,22 +23,3 @@ export interface MeasureOptions {
  * Elements that aren't drawn (content entirely cut off, children of a closed accordion) are left out.
  */
 export declare function measureElements(spec: Spec, lines: Record<string, number>, opts?: MeasureOptions): Promise<[MeasuredElement, ...Measured[]]>;
-/**
- * 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[];

package/dist/playground/editor-options.d.ts

@@ -6,6 +6,8 @@ export interface EditorOptions {
     data?: LanguageData;
     /** Called with the whole text after every change. */
     onChange?: (text: string) => void;
+    /** Called with the caret's line (1 = the first) when it moves to another line. */
+    onCursorLine?: (line: number) => void;
     /** Line numbers in a gutter. Default true. */
     lineNumbers?: boolean;
     /** Wrap long lines instead of scrolling sideways; continuation rows are indented under their line. Default false. */

package/dist/playground/index.js

@@ -1,15 +1,16 @@
 import {
-  languageData
-} from "../chunks/chunk-HVGRKWIV.js";
+  languageData,
+  measureElements
+} from "../chunks/chunk-NZWKURF4.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";
@@ -494,12 +495,16 @@ function createPlaygroundHandler() {
       return true;
     }
     if (req.method === "POST" && (url.pathname === "/api/render" || url.pathname === "/api/png")) {
-      const { spec, issues } = compileWireframe(await readBody(req));
+      const { spec, issues, lines } = compileWireframe(await readBody(req));
       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 });
-        return json(res, 200, { issues, svg: await renderWireframeSvg(spec, { skipValidation: true, flows }), width, height, items });
+        const [svg, { width, height, items }, elements] = await Promise.all([
+          renderWireframeSvg(spec, { skipValidation: true, flows }),
+          measureBoardLayout(spec, { flows }),
+          url.searchParams.get("elements") === "1" ? measureElements(spec, lines, { skipValidation: true, flows }) : void 0
+        ]);
+        return json(res, 200, { issues, svg, width, height, items, ...elements ? { elements } : {} });
       }
       if (!spec || issues.length) return json(res, 400, { issues });
       const scale = Math.min(4, Math.max(1, Number(url.searchParams.get("scale") ?? 2)));