tsquare 0.12.4 → 0.13.1

package/dist/browser/index.js

@@ -7675,16 +7675,16 @@ function FDEF(state) {
   state.ip = ip;
   state.funcs[fn] = prog.slice(ipBegin + 1, ip);
 }
-function MDAP(round, state) {
+function MDAP(round2, state) {
   var pi = state.stack.pop();
   var p = state.z0[pi];
   var fv = state.fv;
   var pv = state.pv;
   if (exports.DEBUG) {
-    console.log(state.step, "MDAP[" + round + "]", pi);
+    console.log(state.step, "MDAP[" + round2 + "]", pi);
   }
   var d2 = pv.distance(p, HPZero);
-  if (round) {
+  if (round2) {
     d2 = state.round(d2);
   }
   fv.setRelative(p, HPZero, d2, pv);
@@ -7887,7 +7887,7 @@ function RTDG(state) {
   }
   state.round = roundToDoubleGrid;
 }
-function MIAP(round, state) {
+function MIAP(round2, state) {
   var stack = state.stack;
   var n = stack.pop();
   var pi = stack.pop();
@@ -7898,7 +7898,7 @@ function MIAP(round, state) {
   if (exports.DEBUG) {
     console.log(
       state.step,
-      "MIAP[" + round + "]",
+      "MIAP[" + round2 + "]",
       n,
       "(",
       cv,
@@ -7907,7 +7907,7 @@ function MIAP(round, state) {
     );
   }
   var d2 = pv.distance(p, HPZero);
-  if (round) {
+  if (round2) {
     if (Math.abs(d2 - cv) < state.cvCutIn) {
       d2 = cv;
     }
@@ -20659,6 +20659,7 @@ function markRoot(root, color) {
   const kids = Children.toArray(node.props.children);
   return cloneElement(node, {}, ...kids, /* @__PURE__ */ jsx3(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]) => [
@@ -20666,7 +20667,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;
       }
     ])
   );
@@ -20840,19 +20841,22 @@ function Screen({ element, children }) {
           s.chrome && s.device === "desktop" ? /* @__PURE__ */ jsx3(BrowserBar, {}) : null,
           /* @__PURE__ */ jsxs(Box, { style: { position: "relative", flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: [
             top,
-            /* @__PURE__ */ jsx3(Box, { style: { flexGrow: 1, flexBasis: "0px", flexDirection: "column", overflow: "hidden" }, children: /* @__PURE__ */ jsx3(
-              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__ */ jsx3(
+                Box,
+                {
+                  style: {
+                    flexGrow: 1,
+                    flexShrink: 0,
+                    flexDirection: "column",
+                    padding: s.padding,
+                    gap: p.gap ?? 14
+                  },
+                  children: withDir(body, "column")
+                }
+              ),
+              p.__markBody ? /* @__PURE__ */ jsx3(Marker, { color: p.__markBody }) : null
+            ] }),
             bottom,
             overlays.map((o2) => isValidElement(o2) ? cloneElement(o2, { aboveTabBar: bottom.length > 0 }) : o2),
             p.__mark ? /* @__PURE__ */ jsx3(Marker, { color: p.__mark }) : null
@@ -21118,9 +21122,9 @@ function Chart({ element, dir }) {
   const kind = p.kind ?? "line";
   const h2 = p.height ?? 180;
   const w2 = p.width ?? (dir === "row" ? void 0 : "100%");
-  const round = kind === "pie" || kind === "donut";
+  const round2 = kind === "pie" || kind === "donut";
   const plot = (() => {
-    if (round) {
+    if (round2) {
       const slice = (from, to2, fill, k) => {
         const a0 = from / 100 * 2 * Math.PI - Math.PI / 2, a1 = to2 / 100 * 2 * Math.PI - Math.PI / 2;
         const x0 = 50 + 46 * Math.cos(a0), y0 = 50 + 46 * Math.sin(a0), x1 = 50 + 46 * Math.cos(a1), y1 = 50 + 46 * Math.sin(a1);
@@ -21150,7 +21154,7 @@ function Chart({ element, dir }) {
   })();
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", gap: 10, width: w2, height: h2, flexShrink: 0, ...dir === "row" ? { flexGrow: 1, flexBasis: "0px" } : {} }, children: [
     p.title ? /* @__PURE__ */ jsx3(Box, { style: { fontSize: 13, fontWeight: 600, color: theme.text }, children: p.title }) : null,
-    /* @__PURE__ */ jsx3(Box, { style: { flexGrow: 1, borderBottom: round ? void 0 : `1.5px solid ${theme.line}`, justifyContent: round ? "center" : void 0, alignItems: round ? "center" : void 0 }, children: plot })
+    /* @__PURE__ */ jsx3(Box, { style: { flexGrow: 1, borderBottom: round2 ? void 0 : `1.5px solid ${theme.line}`, justifyContent: round2 ? "center" : void 0, alignItems: round2 ? "center" : void 0 }, children: plot })
   ] });
 }
 function AvatarCircle({ initials, size = 40 }) {
@@ -21315,7 +21319,7 @@ function Select({ element, dir }) {
     ] })
   ] });
 }
-function CheckMark({ checked, round = false, c: c2 = GRAY }) {
+function CheckMark({ checked, round: round2 = false, c: c2 = GRAY }) {
   return /* @__PURE__ */ jsx3(
     Box,
     {
@@ -21323,13 +21327,13 @@ function CheckMark({ checked, round = false, c: c2 = GRAY }) {
         width: 20,
         height: 20,
         flexShrink: 0,
-        borderRadius: round ? 10 : 5,
-        border: `1.5px solid ${checked && !round ? c2.accent : theme.lineStrong}`,
-        backgroundColor: checked && !round ? c2.accent : theme.paper,
+        borderRadius: round2 ? 10 : 5,
+        border: `1.5px solid ${checked && !round2 ? c2.accent : theme.lineStrong}`,
+        backgroundColor: checked && !round2 ? c2.accent : theme.paper,
         alignItems: "center",
         justifyContent: "center"
       },
-      children: checked ? round ? /* @__PURE__ */ jsx3(Box, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: c2.accent } }) : /* @__PURE__ */ jsx3(IconGlyph, { name: "check", size: 14, color: c2.onAccent, strokeWidth: 3 }) : null
+      children: checked ? round2 ? /* @__PURE__ */ jsx3(Box, { style: { width: 10, height: 10, borderRadius: 5, backgroundColor: c2.accent } }) : /* @__PURE__ */ jsx3(IconGlyph, { name: "check", size: 14, color: c2.onAccent, strokeWidth: 3 }) : null
     }
   );
 }
@@ -21469,7 +21473,7 @@ function Calendar({ element, dir, aligned, colors: c2 = GRAY }) {
     /* @__PURE__ */ jsx3(Box, { children: ["S", "M", "T", "W", "T", "F", "S"].map((d2, i2) => /* @__PURE__ */ jsx3(Box, { style: { width: CELL, justifyContent: "center", fontSize: 12, color: theme.muted }, children: d2 }, i2)) }),
     weeks.map((week, w2) => /* @__PURE__ */ jsx3(Box, { children: week.map((d2, i2) => {
       const end = d2 != null && (d2 === from || d2 === to2) && from > 0;
-      const inside = d2 != null && from > 0 && d2 > from && d2 < to2;
+      const inside2 = d2 != null && from > 0 && d2 > from && d2 < to2;
       const band = d2 != null && from > 0 && to2 > from && d2 >= from && d2 <= to2;
       return /* @__PURE__ */ jsxs(Box, { style: { width: CELL, height: CELL, alignItems: "center", justifyContent: "center", position: "relative" }, children: [
         band ? /* @__PURE__ */ jsx3(Box, { style: { position: "absolute", top: 4, bottom: 4, left: d2 === from ? CELL / 2 : 0, right: d2 === to2 ? CELL / 2 : 0, backgroundColor: theme.fill } }) : null,
@@ -21485,7 +21489,7 @@ function Calendar({ element, dir, aligned, colors: c2 = GRAY }) {
               justifyContent: "center",
               fontSize: 14,
               backgroundColor: end ? c2.accent : void 0,
-              color: end ? c2.onAccent : inside ? theme.ink : theme.text,
+              color: end ? c2.onAccent : inside2 ? theme.ink : theme.text,
               fontWeight: end ? 600 : 400
             },
             children: [
@@ -21707,7 +21711,8 @@ function Modal({ element, children }) {
       },
       children: [
         p.title ? /* @__PURE__ */ jsx3(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }) : null,
-        withDir(children, "column")
+        withDir(children, "column"),
+        p.__mark ? /* @__PURE__ */ jsx3(Marker, { color: p.__mark }) : null
       ]
     }
   ) });
@@ -21742,7 +21747,8 @@ function Drawer({ element, children }) {
           /* @__PURE__ */ jsx3(Box, { style: { fontSize: 18, fontWeight: 600 }, children: p.title }),
           /* @__PURE__ */ jsx3(IconGlyph, { name: "x", size: 22, color: theme.muted })
         ] }) : null,
-        withDir(children, "column")
+        withDir(children, "column"),
+        p.__mark ? /* @__PURE__ */ jsx3(Marker, { color: p.__mark }) : null
       ]
     }
   ) });
@@ -21755,7 +21761,8 @@ function Toast({ element, aboveTabBar }) {
   return /* @__PURE__ */ jsx3(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__ */ jsx3(IconGlyph, { name: p.icon, size: 18, color: theme.onPrimary }) : null,
     /* @__PURE__ */ jsx3(Box, { style: { flexShrink: 1 }, children: p.text ?? "" }),
-    p.action ? /* @__PURE__ */ jsx3(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null
+    p.action ? /* @__PURE__ */ jsx3(Box, { style: { fontWeight: 700, marginLeft: 8, flexShrink: 0 }, children: p.action }) : null,
+    p.__mark ? /* @__PURE__ */ jsx3(Marker, { color: p.__mark }) : null
   ] }) });
 }
 function Flow() {
@@ -21832,22 +21839,23 @@ function findAnchors(spec) {
   return [...out, ...tips];
 }
 var MARK = (i2) => `#fe${(i2 >> 8).toString(16).padStart(2, "0")}${(i2 & 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 el2 = tagged.elements[id];
-    el2.props = { ...el2.props ?? {}, [field ? "__markField" : "__mark"]: color };
+    el2.props = { ...el2.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) {
@@ -21871,6 +21879,7 @@ function place(anchor, size, screen, opts) {
   return { x: x3 - screen.x, y: y - screen.y, bottom: screen.y + screen.h - (anchor.y - opts.gap), side };
 }
 var ROW = 36;
+var listHeight = (rows) => rows * (ROW - 4) + 2 * 4 + 2 * 1.5;
 function ListCard({ items, width, selected, c: c2 }) {
   return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", width, padding: 4, backgroundColor: theme.paper, border: `1.5px solid ${theme.lineStrong}`, borderRadius: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.18)" }, children: items.map((item, i2) => {
     const on2 = selected != null && item.label === selected;
@@ -21906,35 +21915,57 @@ function tooltipSize(text2) {
   const lines = Math.max(1, Math.ceil(text2.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, drawnH: listHeight(options.length), pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
+  }
+  if (a.kind === "menu") {
+    const items = p.menu.map((i2) => typeof i2 === "string" ? { label: i2 } : i2);
+    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, drawnH: listHeight(items.length), 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);
+    if (!o2) return [];
+    const h2 = "drawnH" in o2 && o2.drawnH != null ? o2.drawnH : o2.size.h;
+    const top = o2.screen.y + o2.pos.y + (o2.pos.side === "above" ? o2.size.h - h2 : 0);
+    return [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: top, w: o2.size.w, h: h2 } }];
+  });
+}
 function overlayLayer(spec, anchors, boxes, c2, 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__ */ jsx4(ListCard, { items: options.map((label) => ({ label })), width: size.w, selected: p.value, c: c2 });
+      node = /* @__PURE__ */ jsx4(ListCard, { items: o2.options.map((label) => ({ label })), width: size.w, selected: p.value, c: c2 });
     } else if (a.kind === "menu") {
-      const items = p.menu.map((i2) => typeof i2 === "string" ? { label: i2 } : i2);
-      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__ */ jsx4(ListCard, { items, width, c: c2 });
+      node = /* @__PURE__ */ jsx4(ListCard, { items: o2.items, width: size.w, c: c2 });
     } 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__ */ jsx4("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: c2 }) });
+      node = /* @__PURE__ */ jsx4("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: c2 }) });
     } else {
-      const size = tooltipSize(p.tooltip);
-      pos = place(anchor, size, screen, { prefer: "above", align: "center", gap: 4 });
       node = /* @__PURE__ */ jsx4(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) ?? [];
@@ -22076,9 +22107,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 }) => {
@@ -22097,20 +22126,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 }, i2) => {
+  return flows.map(({ key }, i2) => {
     const r = routes[i2];
     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: d2, at } = linePath(r, pts, p.line ?? "rounded");
-    shapes.push(
-      /* @__PURE__ */ jsx5("path", { d: d2, 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: d2, at } = linePath(r, pts, line);
+    const out = { key, route: r, points: pts, d: d2, color: flowColor(p.color, palette), start, end, line, dashed: !!p.dashed };
     if (p.label) {
       const w2 = flowLabelWidth(String(p.label));
       const covers = (c2) => placed.filter((q) => c2.x - w2 / 2 < q.x + q.w && q.x < c2.x + w2 / 2 && c2.y - 14 < q.y + q.h && q.y < c2.y + 14).length + ends.filter((q) => Math.abs(q.x - c2.x) < w2 / 2 + 12 && Math.abs(q.y - c2.y) < 24).length;
@@ -22120,13 +22145,58 @@ function flowLayer(spec, flows, screens, gap, palette, size) {
         const c2 = at(t), n = covers(c2);
         if (n < best) [mid, best] = [c2, n];
       }
-      const top = mid.y - 12;
-      placed.push({ x: mid.x - w2 / 2, y: top, w: w2, h: 24 });
+      const box = { x: mid.x - w2 / 2, y: mid.y - 12, w: w2, 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 }, (_, i2) => at(i2 / 24));
+  } else {
+    const radius = f.line === "curved" ? 40 : f.line === "rounded" ? 14 : 0;
+    const q = simplify(pts);
+    out = [q[0]];
+    for (let i2 = 1; i2 < q.length; i2++) {
+      const p = q[i2];
+      if (radius > 0 && i2 < q.length - 1) {
+        const prev = q[i2 - 1], next = q[i2 + 1];
+        const rr2 = 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 * rr2, y: p.y - into.y * rr2 }, b = { x: p.x + outd.x * rr2, y: p.y + outd.y * rr2 };
+        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, i2, all) => i2 === 0 || Math.hypot(p.x - all[i2 - 1].x, p.y - all[i2 - 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__ */ jsx5("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__ */ jsx5("div", { style: { position: "absolute", left: mid.x - w2 / 2, top, width: w2, 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__ */ jsx5("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__ */ jsx5("svg", { width: size.width, height: size.height, viewBox: `0 0 ${size.width} ${size.height}`, style: { position: "absolute", top: 0, left: 0 }, children: shapes }),
     labels
@@ -22917,10 +22987,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 });
@@ -22928,13 +22996,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: to2 }) => ({ key, ends: { from: flows.box(from, boxes) ?? flows.screenBox(from), to: flows.box(to2, boxes) ?? flows.screenBox(to2), fromScreen: flows.screenBox(from), toScreen: flows.screenBox(to2) } })).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();
@@ -22962,9 +23034,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: to2 }) => ({ key, ends: { from: box(from) ?? screenBox(from), to: box(to2) ?? screenBox(to2), fromScreen: screenBox(from), toScreen: screenBox(to2) } })).filter((f) => !!(f.ends.from && f.ends.to && f.ends.fromScreen && f.ends.toScreen));
+    }
   };
 }
 async function measureAnchors(spec, extra = []) {
@@ -23008,7 +23083,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((i2) => `line ${i2.line}: ${i2.message}`).join("\n");
@@ -23471,6 +23546,150 @@ function addStyles(doc) {
   doc.head.append(style);
 }
 
+// src/measure.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 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, to2) {
+  if (!to2) return r;
+  const x3 = Math.max(r.x, to2.x), y = Math.max(r.y, to2.y);
+  const w2 = Math.min(r.x + r.w, to2.x + to2.w) - x3, h2 = Math.min(r.y + r.h, to2.y + to2.h) - y;
+  return w2 >= 0 && h2 >= 0 && (w2 > 0 || r.w === 0) && (h2 > 0 || r.h === 0) ? { x: x3, y, w: w2, h: h2 } : 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, i2) => {
+    const it = items[i2];
+    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 o2 of overlayBoxes(spec, anchors, boxes)) overlays.set(o2.id, [...overlays.get(o2.id) ?? [], o2.box]);
+  const lineOf = (k) => k == null ? null : lines[k] ?? 0;
+  const endLine = (k) => Math.max(lines[k] ?? 0, ...(els[k].children ?? []).filter((c2) => els[c2]).map(endLine));
+  const labelOf = (k) => {
+    const p = els[k].props ?? {};
+    const v2 = p[PRIMARY_PROP[els[k].type] ?? ""];
+    return typeof v2 === "string" ? v2 : void 0;
+  };
+  const out = [];
+  const visit = (k, parent, screen, cut) => {
+    const el2 = els[k];
+    if (!el2 || el2.type === "Flow") return;
+    const p = el2.props ?? {};
+    const base = { line: lineOf(k), endLine: endLine(k), ...typeof p.id === "string" ? { id: p.id } : {}, type: el2.type, ...labelOf(k) != null ? { label: labelOf(k) } : {}, screenLine: lineOf(screen), parentLine: lineOf(parent) };
+    let entry = null;
+    if (el2.type === "Board") entry = { ...base, box: { x: 0, y: 0, width, height } };
+    else if (el2.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 os3 = (overlays.get(k) ?? []).map((o2) => clip(o2, view)).filter((o2) => !!o2 && o2.w > 0 && o2.h > 0);
+        entry = { ...base, box: toBox(seen), ...os3.length ? { overlays: os3.map(toBox) } : {}, ...COVERS_SCREEN.has(el2.type) ? { scrim: p.scrim ?? true } : {} };
+      }
+    }
+    if (entry) out.push(entry);
+    const inScreen = el2.type === "Screen" ? k : screen;
+    const kids = el2.children ?? [];
+    if (el2.type === "Screen") {
+      const frame = frames.get(k) ?? null;
+      const body = clip(boxes[`${k}#body`] ?? frame, frame);
+      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);
+    } else {
+      const inner = el2.type === "Drawer" && boxes[k] ? clip(boxes[k], cut) : cut;
+      for (const c2 of kids) visit(c2, 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, 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) {
   let cur = t;
@@ -23539,11 +23758,14 @@ export {
   compileWireframe,
   componentDefinitions,
   decodeWireframe,
+  elementsAt,
+  elementsAtLine,
   encodeWireframe,
   formatIssues,
   printWireframeText as formatWireframe,
   languageData,
   mcpTools,
+  measureElements,
   parseWireframeText,
   registry,
   renderAll,

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

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