tsquare 0.12.4 → 0.13.0

package/dist/chunks/{chunk-BSE346UI.js → chunk-YOZFCNSK.js}

@@ -706,6 +706,7 @@ function markRoot(root, color) {
   const kids = Children.toArray(node.props.children);
   return cloneElement(node, {}, ...kids, /* @__PURE__ */ jsx(Marker, { color }, "__marker"));
 }
+var MARKS_ITSELF = /* @__PURE__ */ new Set(["Screen", "Modal", "Drawer", "Toast"]);
 function withMarkers(reg) {
   return Object.fromEntries(
     Object.entries(reg).map(([name, C]) => [
@@ -713,7 +714,7 @@ function withMarkers(reg) {
       (props) => {
         const root = C(props);
         const color = props.element?.props?.__mark;
-        return color && name !== "Screen" ? markRoot(root, color) : root;
+        return color && !MARKS_ITSELF.has(name) ? markRoot(root, color) : root;
       }
     ])
   );
@@ -887,19 +888,22 @@ function Screen({ element, children }) {
           s.chrome && s.device === "desktop" ? /* @__PURE__ */ jsx(BrowserBar, {}) : null,
           /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: [
             top,
-            /* @__PURE__ */ jsx(Box, { style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx(
-              Box,
-              {
-                style: {
-                  flexGrow: 1,
-                  flexShrink: 0,
-                  flexDirection: "column",
-                  padding: s.padding,
-                  gap: p.gap ?? 14
-                },
-                children: withDir(body, "column")
-              }
-            ) }),
+            /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: [
+              /* @__PURE__ */ jsx(
+                Box,
+                {
+                  style: {
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    flexDirection: "column",
+                    padding: s.padding,
+                    gap: p.gap ?? 14
+                  },
+                  children: withDir(body, "column")
+                }
+              ),
+              p.__markBody ? /* @__PURE__ */ jsx(Marker, { color: p.__markBody }) : null
+            ] }),
             bottom,
             overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2),
             p.__mark ? /* @__PURE__ */ jsx(Marker, { color: p.__mark }) : null
@@ -1754,7 +1758,8 @@ function Modal({ element, children }) {
       },
       children: [
         p.title ? /* @__PURE__ */ jsx(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }) : null,
-        withDir(children, "column")
+        withDir(children, "column"),
+        p.__mark ? /* @__PURE__ */ jsx(Marker, { color: p.__mark }) : null
       ]
     }
   ) });
@@ -1789,7 +1794,8 @@ function Drawer({ element, children }) {
           /* @__PURE__ */ jsx(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }),
           /* @__PURE__ */ jsx(IconGlyph, { name: "x", size: 22, color: theme.muted })
         ] }) : null,
-        withDir(children, "column")
+        withDir(children, "column"),
+        p.__mark ? /* @__PURE__ */ jsx(Marker, { color: p.__mark }) : null
       ]
     }
   ) });
@@ -1802,7 +1808,8 @@ function Toast({ element, aboveTabBar }) {
   return /* @__PURE__ */ jsx(Box, { style: { position: "absolute", left: 16, right: 16, justifyContent: side, ...top ? { top: 16 } : { bottom: aboveTabBar ? 92 : 24 } }, children: /* @__PURE__ */ jsxs(Box, { style: { alignItems: "center", gap: 12, padding: "12px 16px", borderRadius: 12, backgroundColor: theme.ink, color: theme.onPrimary, fontSize: 14, boxShadow: "0 6px 20px rgba(0,0,0,0.22)", maxWidth: 420 }, children: [
     p.icon ? /* @__PURE__ */ jsx(IconGlyph, { name: p.icon, size: 18, color: theme.onPrimary }) : null,
     /* @__PURE__ */ jsx(Box, { style: { flexShrink: 1 }, children: p.text ?? "" }),
-    p.action ? /* @__PURE__ */ jsx(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null
+    p.action ? /* @__PURE__ */ jsx(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null,
+    p.__mark ? /* @__PURE__ */ jsx(Marker, { color: p.__mark }) : null
   ] }) });
 }
 function Flow() {
@@ -2375,22 +2382,23 @@ function findAnchors(spec) {
   return [...out, ...tips];
 }
 var MARK = (i) => `#fe${(i >> 8).toString(16).padStart(2, "0")}${(i & 255).toString(16).padStart(2, "0")}`;
-function tagForMeasuring(spec, anchors) {
+function tagForMeasuring(spec, anchors, bodies = []) {
   const tagged = structuredClone(spec);
   const colors = /* @__PURE__ */ new Map();
   let n = 1;
-  const tag = (id, field) => {
-    const key = field ? `${id}#field` : id;
+  const tag = (id, part) => {
+    const key = part ? `${id}#${part}` : id;
     if (colors.has(key)) return;
     const color = MARK(n++);
     colors.set(key, color);
     const el = tagged.elements[id];
-    el.props = { ...el.props ?? {}, [field ? "__markField" : "__mark"]: color };
+    el.props = { ...el.props ?? {}, [part === "field" ? "__markField" : part === "body" ? "__markBody" : "__mark"]: color };
   };
   for (const a of anchors) {
-    tag(a.screen, false);
-    tag(a.id, a.field);
+    tag(a.screen, "");
+    tag(a.id, a.field ? "field" : "");
   }
+  for (const id of bodies) tag(id, "body");
   return { tagged, colors };
 }
 function readMarkers(svg, colors) {
@@ -2449,35 +2457,54 @@ function tooltipSize(text) {
   const lines = Math.max(1, Math.ceil(text.length * 7.4 / 216));
   return { w: width, h: lines * 18 + 12 + 6 };
 }
+function placeOverlay(spec, a, boxes) {
+  const screen = boxes[a.screen];
+  const anchor = boxes[a.field ? `${a.id}#field` : a.id];
+  if (!screen || !anchor) return null;
+  const p = propsOf(spec.elements, a.id);
+  if (a.kind === "options") {
+    const options = p.options?.length ? p.options : [p.value ?? "Option 1", "Option 2", "Option 3"];
+    const size2 = { w: anchor.w, h: options.length * ROW + 8 };
+    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
+  }
+  if (a.kind === "menu") {
+    const items = p.menu.map((i) => typeof i === "string" ? { label: i } : i);
+    const width = a.end ? 200 : Math.max(180, anchor.w);
+    const inRightHalf = anchor.x + anchor.w / 2 > screen.x + screen.w / 2;
+    const size2 = { w: width, h: items.length * ROW + 8 };
+    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 }), items };
+  }
+  if (a.kind === "calendar") {
+    const date = parseDate(p.value);
+    const { start, days } = monthGrid(date?.month);
+    const weeks = Math.ceil((start + days) / 7);
+    const size2 = { w: 296, h: 92 + weeks * 38 };
+    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), date };
+  }
+  const size = tooltipSize(p.tooltip);
+  return { screen, anchor, size, pos: place(anchor, size, screen, { prefer: "above", align: "center", gap: 4 }) };
+}
+function overlayBoxes(spec, anchors, boxes) {
+  return anchors.flatMap((a) => {
+    const o2 = placeOverlay(spec, a, boxes);
+    return o2 ? [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: o2.screen.y + o2.pos.y, w: o2.size.w, h: o2.size.h } }] : [];
+  });
+}
 function overlayLayer(spec, anchors, boxes, c, Calendar2) {
   const byScreen = /* @__PURE__ */ new Map();
   for (const a of anchors) {
-    const screen = boxes[a.screen];
-    const anchor = boxes[a.field ? `${a.id}#field` : a.id];
-    if (!screen || !anchor) continue;
+    const o2 = placeOverlay(spec, a, boxes);
+    if (!o2) continue;
+    const { screen, anchor, size, pos } = o2;
     const p = propsOf(spec.elements, a.id);
     let node = null;
-    let pos = null;
     if (a.kind === "options") {
-      const options = p.options?.length ? p.options : [p.value ?? "Option 1", "Option 2", "Option 3"];
-      const size = { w: anchor.w, h: options.length * ROW + 8 };
-      pos = place(anchor, size, screen, { prefer: "below", align: "start", gap: 4 });
-      node = /* @__PURE__ */ jsx2(ListCard, { items: options.map((label) => ({ label })), width: size.w, selected: p.value, c });
+      node = /* @__PURE__ */ jsx2(ListCard, { items: o2.options.map((label) => ({ label })), width: size.w, selected: p.value, c });
     } else if (a.kind === "menu") {
-      const items = p.menu.map((i) => typeof i === "string" ? { label: i } : i);
-      const width = a.end ? 200 : Math.max(180, anchor.w);
-      const inRightHalf = anchor.x + anchor.w / 2 > screen.x + screen.w / 2;
-      pos = place(anchor, { w: width, h: items.length * ROW + 8 }, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 });
-      node = /* @__PURE__ */ jsx2(ListCard, { items, width, c });
+      node = /* @__PURE__ */ jsx2(ListCard, { items: o2.items, width: size.w, c });
     } else if (a.kind === "calendar") {
-      const date = parseDate(p.value);
-      const { start, days } = monthGrid(date?.month);
-      const weeks = Math.ceil((start + days) / 7);
-      pos = place(anchor, { w: 296, h: 92 + weeks * 38 }, screen, { prefer: "below", align: "start", gap: 4 });
-      node = /* @__PURE__ */ jsx2("div", { style: { display: "flex", boxShadow: "0 8px 24px rgba(0,0,0,0.18)", borderRadius: 12 }, children: Calendar2({ element: { type: "Calendar", props: { month: date?.month ?? "Month", selected: date?.day } }, colors: c }) });
+      node = /* @__PURE__ */ jsx2("div", { style: { display: "flex", boxShadow: "0 8px 24px rgba(0,0,0,0.18)", borderRadius: 12 }, children: Calendar2({ element: { type: "Calendar", props: { month: o2.date?.month ?? "Month", selected: o2.date?.day } }, colors: c }) });
     } else {
-      const size = tooltipSize(p.tooltip);
-      pos = place(anchor, size, screen, { prefer: "above", align: "center", gap: 4 });
       node = /* @__PURE__ */ jsx2(Tooltip, { text: p.tooltip, side: pos.side, width: size.w, arrowX: anchor.x + anchor.w / 2 - (screen.x + pos.x) });
     }
     const list = byScreen.get(a.screen) ?? [];
@@ -2619,9 +2646,7 @@ function flowColor(color, palette) {
   const s = String(color);
   return ACCENTS[s] ?? s;
 }
-function flowLayer(spec, flows, screens, gap, palette, size) {
-  const shapes = [];
-  const labels = [];
+function layoutFlows(spec, flows, screens, gap, palette) {
   const placed = [];
   const drawn = [];
   const tips = flows.flatMap(({ ends: ends2 }) => {
@@ -2640,20 +2665,16 @@ function flowLayer(spec, flows, screens, gap, palette, size) {
     return r;
   });
   const ends = routes.flatMap((r) => [r.points[0], r.points[r.points.length - 1]]);
-  flows.forEach(({ key }, i) => {
+  return flows.map(({ key }, i) => {
     const r = routes[i];
     const p = spec.elements[key].props ?? {};
-    const color = flowColor(p.color, palette);
     const start = p.start ?? "none", end = p.end ?? "arrow";
     const pts = [...r.points];
     pts[0] = add(pts[0], DIR[r.from], INSET[start]);
     pts[pts.length - 1] = add(pts[pts.length - 1], DIR[r.to], INSET[end]);
-    const { d, at } = linePath(r, pts, p.line ?? "rounded");
-    shapes.push(
-      /* @__PURE__ */ jsx3("path", { d, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", ...p.dashed ? { strokeDasharray: "7 6" } : {} }, `${key}-line`),
-      marker(start, r.points[0], DIR[r.from], color, `${key}-start`),
-      marker(end, r.points[r.points.length - 1], DIR[r.to], color, `${key}-end`)
-    );
+    const line = p.line ?? "rounded";
+    const { d, at } = linePath(r, pts, line);
+    const out = { key, route: r, points: pts, d, color: flowColor(p.color, palette), start, end, line, dashed: !!p.dashed };
     if (p.label) {
       const w = flowLabelWidth(String(p.label));
       const covers = (c) => placed.filter((q) => c.x - w / 2 < q.x + q.w && q.x < c.x + w / 2 && c.y - 14 < q.y + q.h && q.y < c.y + 14).length + ends.filter((q) => Math.abs(q.x - c.x) < w / 2 + 12 && Math.abs(q.y - c.y) < 24).length;
@@ -2663,13 +2684,58 @@ function flowLayer(spec, flows, screens, gap, palette, size) {
         const c = at(t), n = covers(c);
         if (n < best) [mid, best] = [c, n];
       }
-      const top = mid.y - 12;
-      placed.push({ x: mid.x - w / 2, y: top, w, h: 24 });
+      const box = { x: mid.x - w / 2, y: mid.y - 12, w, h: 24 };
+      placed.push(box);
+      out.label = { text: String(p.label), ...box };
+    }
+    return out;
+  });
+}
+function flowPolyline(f) {
+  const r = f.route, pts = f.points;
+  const s0 = pts[0], e0 = pts[pts.length - 1];
+  let out;
+  if (r.lane == null && f.line === "straight") out = [s0, e0];
+  else if (r.lane == null && f.line === "curved") {
+    const { at } = linePath(r, pts, f.line);
+    out = Array.from({ length: 25 }, (_, i) => at(i / 24));
+  } else {
+    const radius = f.line === "curved" ? 40 : f.line === "rounded" ? 14 : 0;
+    const q = simplify(pts);
+    out = [q[0]];
+    for (let i = 1; i < q.length; i++) {
+      const p = q[i];
+      if (radius > 0 && i < q.length - 1) {
+        const prev = q[i - 1], next = q[i + 1];
+        const rr = Math.min(radius, Math.hypot(p.x - prev.x, p.y - prev.y) / 2, Math.hypot(next.x - p.x, next.y - p.y) / 2);
+        const into = { x: Math.sign(p.x - prev.x), y: Math.sign(p.y - prev.y) }, outd = { x: Math.sign(next.x - p.x), y: Math.sign(next.y - p.y) };
+        const a = { x: p.x - into.x * rr, y: p.y - into.y * rr }, b = { x: p.x + outd.x * rr, y: p.y + outd.y * rr };
+        for (let k = 0; k <= 6; k++) {
+          const t = k / 6;
+          out.push({ x: (1 - t) ** 2 * a.x + 2 * (1 - t) * t * p.x + t ** 2 * b.x, y: (1 - t) ** 2 * a.y + 2 * (1 - t) * t * p.y + t ** 2 * b.y });
+        }
+      } else out.push(p);
+    }
+  }
+  const first = r.points[0], last = r.points[r.points.length - 1];
+  return [first, ...out, last].filter((p, i, all) => i === 0 || Math.hypot(p.x - all[i - 1].x, p.y - all[i - 1].y) >= 0.01);
+}
+function flowLayer(layout, size) {
+  const shapes = [];
+  const labels = [];
+  for (const f of layout) {
+    const r = f.route, { key, color } = f;
+    shapes.push(
+      /* @__PURE__ */ jsx3("path", { d: f.d, fill: "none", stroke: color, strokeWidth: 2, strokeLinejoin: "round", strokeLinecap: "round", ...f.dashed ? { strokeDasharray: "7 6" } : {} }, `${key}-line`),
+      marker(f.start, r.points[0], DIR[r.from], color, `${key}-start`),
+      marker(f.end, r.points[r.points.length - 1], DIR[r.to], color, `${key}-end`)
+    );
+    if (f.label) {
       labels.push(
-        /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left: mid.x - w / 2, top, width: w, height: 24, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 12, backgroundColor: theme.paper, border: `1.5px solid ${color}`, color, fontSize: 12, fontWeight: 600 }, children: p.label }, `${key}-label`)
+        /* @__PURE__ */ jsx3("div", { style: { position: "absolute", left: f.label.x, top: f.label.y, width: f.label.w, height: 24, display: "flex", alignItems: "center", justifyContent: "center", borderRadius: 12, backgroundColor: theme.paper, border: `1.5px solid ${color}`, color, fontSize: 12, fontWeight: 600 }, children: f.label.text }, `${key}-label`)
       );
     }
-  });
+  }
   return /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", top: 0, left: 0, width: size.width, height: size.height, display: "flex" }, children: [
     /* @__PURE__ */ jsx3("svg", { width: size.width, height: size.height, viewBox: `0 0 ${size.width} ${size.height}`, style: { position: "absolute", top: 0, left: 0 }, children: shapes }),
     labels
@@ -2970,10 +3036,8 @@ async function renderWireframeSvg(spec, opts = {}) {
     if (issues.length) throw new SpecError(issues);
   }
   const flowsOn = opts.flows !== false;
-  const { width, height, gap } = boardLayout(spec, { flows: opts.flows });
-  const board = spec.elements[spec.root];
-  if ((board.props ?? {}).gap == null && gap !== BOARD_GAP)
-    spec = { ...spec, elements: { ...spec.elements, [spec.root]: { ...board, props: { ...board.props, gap } } } };
+  const { width, height } = boardLayout(spec, { flows: opts.flows });
+  spec = withBoardGap(spec, opts.flows);
   const palette = paletteFor(spec.elements[spec.root]?.props?.accent);
   const registry2 = withPalette(palette);
   const draw = async (s, reg) => renderToSvg(s, { registry: reg, includeStandard: false, fonts: await loadFonts(), width, height });
@@ -2981,13 +3045,17 @@ async function renderWireframeSvg(spec, opts = {}) {
   const { anchors, boxes } = await measureAnchors(spec, flows?.measure ?? []);
   if (!anchors.length && !flows?.list.length) return draw(spec, registry2);
   const layers = [];
-  if (flows?.list.length) {
-    const resolved = flows.list.map(({ key, from, to }) => ({ key, ends: { from: flows.box(from, boxes) ?? flows.screenBox(from), to: flows.box(to, boxes) ?? flows.screenBox(to), fromScreen: flows.screenBox(from), toScreen: flows.screenBox(to) } })).filter((f) => !!(f.ends.from && f.ends.to && f.ends.fromScreen && f.ends.toScreen));
-    layers.push(flowLayer(spec, resolved, flows.screens, flows.gap, palette, { width, height }));
-  }
+  if (flows?.list.length) layers.push(flowLayer(layoutFlows(spec, flows.resolve(boxes), flows.screens, flows.gap, palette), { width, height }));
   if (anchors.length) layers.push(overlayLayer(spec, anchors, boxes, palette, registry2.Calendar));
   return draw(spec, withTopLayer(registry2, layers));
 }
+function withBoardGap(spec, flows) {
+  const { gap } = boardLayout(spec, { flows });
+  const board = spec.elements[spec.root];
+  if ((board.props ?? {}).gap == null && gap !== BOARD_GAP)
+    return { ...spec, elements: { ...spec.elements, [spec.root]: { ...board, props: { ...board.props, gap } } } };
+  return spec;
+}
 function flowEnds(spec) {
   const els = spec.elements;
   const byId = /* @__PURE__ */ new Map();
@@ -3015,9 +3083,12 @@ function flowEnds(spec) {
     list,
     measure,
     screens: [...screenRects.values()],
-    screenBox: (key) => screenRects.get(screenOf(key) ?? ""),
     gap: (els[spec.root].props ?? {}).gap ?? BOARD_GAP,
-    box: (key, boxes) => els[key].type === "Screen" ? screenRects.get(key) : boxes[key]
+    resolve(boxes) {
+      const box = (key) => els[key].type === "Screen" ? screenRects.get(key) : boxes[key];
+      const screenBox = (key) => screenRects.get(screenOf(key) ?? "");
+      return list.map(({ key, from, to }) => ({ key, ends: { from: box(from) ?? screenBox(from), to: box(to) ?? screenBox(to), fromScreen: screenBox(from), toScreen: screenBox(to) } })).filter((f) => !!(f.ends.from && f.ends.to && f.ends.fromScreen && f.ends.toScreen));
+    }
   };
 }
 async function measureAnchors(spec, extra = []) {
@@ -3061,7 +3132,7 @@ function compileWireframe(source) {
     return true;
   });
   unique.sort((a, b) => a.line - b.line);
-  return { spec: parsed.spec, issues: unique };
+  return { spec: parsed.spec, issues: unique, lines: parsed.lines };
 }
 function formatIssues(issues) {
   return issues.map((i) => `line ${i.line}: ${i.message}`).join("\n");
@@ -3310,23 +3381,37 @@ Reply with the corrected wireframe in a single code block.`;
 export {
   theme,
   DEVICES,
+  LABEL_H,
   ACCENTS,
+  paletteFor,
   iconNames,
   UNIVERSAL_PROPS,
   takesUniversalProps,
   componentDefinitions,
   catalog,
+  withPalette,
+  withMarkers,
   registry,
+  findAnchors,
+  tagForMeasuring,
+  readMarkers,
+  overlayBoxes,
+  layoutFlows,
+  flowPolyline,
+  loadFonts,
   PRIMARY_PROP,
   bareWords,
   parseWireframeText,
   RENAMED_PROPS,
   upgradeWireframe,
   upgradeSpec,
+  SpecError,
   checkSpec,
   boardLayout,
   boardSize,
   renderWireframeSvg,
+  withBoardGap,
+  flowEnds,
   renderWireframePng,
   compileWireframe,
   formatIssues,

package/dist/cli.js

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

package/dist/compile.d.ts

@@ -5,6 +5,8 @@ export interface CompileResult {
     spec: Spec | null;
     /** Every problem, tied to a source line. Empty means the wireframe is valid. */
     issues: TextIssue[];
+    /** Each element's line in the text, by its key in the spec (for measureElements). */
+    lines: Record<string, number>;
 }
 /**
  * Parse wireframe text and validate it against the catalog, reporting every

package/dist/flows.d.ts

@@ -13,7 +13,7 @@ import { type ReactNode } from "react";
 import type { Spec } from "@json-render/core";
 import { type Palette } from "./colors.js";
 import type { Rect } from "./anchors.js";
-type Pt = {
+export type Pt = {
     x: number;
     y: number;
 };
@@ -41,6 +41,7 @@ export interface FlowBoxes {
  * `lane` and `track` count the flows already using lanes and gaps, so each gets its own.
  */
 export declare function route(ends: FlowBoxes, screens: Rect[], gap: number, lane?: number, track?: number, nudge?: number): Route;
+type End = "none" | "arrow" | "dot" | "circle" | "bar";
 /**
  * The SVG path for a routed flow, and a point a fraction along it (for the label). `pts` are the
  * route's points, trimmed for the markers. "straight" and "curved" only cut across when the route
@@ -55,11 +56,37 @@ export declare function linePath(r: Route, pts: Pt[], line: string): {
 export declare const flowLabelWidth: (label: string) => number;
 /** A flow's line color: gray, an accent name, a hex color, or the board's accent. */
 export declare function flowColor(color: unknown, palette: Palette): string;
-/** The top layer with every flow: one SVG for the lines and markers, labels as text pills. */
-export declare function flowLayer(spec: Spec, flows: {
+/** A flow laid out: its route, the drawn line, its ends and its label pill, all in board pixels. */
+export interface FlowLayout {
+    key: string;
+    route: Route;
+    /** The route's points with the ends pulled back for their markers: what the line is drawn through. */
+    points: Pt[];
+    d: string;
+    color: string;
+    start: End;
+    end: End;
+    line: string;
+    dashed: boolean;
+    label?: {
+        text: string;
+    } & Rect;
+}
+/**
+ * Where every flow goes: routes (each in its own lane and gap track), the line through them, and
+ * each label's spot. flowLayer draws this; measureElements reads it for hit-testing.
+ */
+export declare function layoutFlows(spec: Spec, flows: {
     key: string;
     ends: FlowBoxes;
-}[], screens: Rect[], gap: number, palette: Palette, size: {
+}[], screens: Rect[], gap: number, palette: Palette): FlowLayout[];
+/**
+ * The line a flow draws, as points close enough to the drawn curve for hit-testing (corners and
+ * curves sampled), from the tip of its start marker to the tip of its end marker.
+ */
+export declare function flowPolyline(f: FlowLayout): Pt[];
+/** The top layer with every flow: one SVG for the lines and markers, labels as text pills. */
+export declare function flowLayer(layout: FlowLayout[], size: {
     width: number;
     height: number;
 }): ReactNode;

package/dist/index.d.ts

@@ -6,6 +6,7 @@ export { encodeWireframe, decodeWireframe, MAX_SHARED_TEXT } from "./share.js";
 export { mcpTools, MCP_INSTRUCTIONS, LINK_KINDS, DEFAULT_LINKS, type LinkKind, wireframeGuide, renderWireframeTool, shareWireframeTool, callMcpTool, type ToolResult, type ToolContent, type ToolOptions, type McpToolName } from "./mcp.js";
 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 { parseWireframeText, type TextIssue, type ParseResult } from "./text.js";
 export { catalog, componentDefinitions } from "./catalog.js";