@weasel-js/diagram 1.13.0 → 1.14.0

package/dist/effect.js

@@ -1,12 +1,14 @@
-import { DiagramView, reorderContribution, ANYWHERE, isBodyEnd, sequenceSlots } from './chunk-ESFIS7BB.js';
-import './chunk-Y72FK3Y7.js';
-import { stageFromType, LOOK_THEME, drawableWires, uniqueStages, shownPorts, valueRowId, NO_VALUE, previewRowId, formatParam, stageStyle, PROBLEM_COLOR, typeColors, kindOf, boxNode, portOn, wireStyle, isControl, wireEdge, sceneStyles, uniqueGroups, wireEdges, exitLabel, splitProblem, checkPipeline, PREVIEW_DENSITY, runOrder, PREVIEW_SIZE, closeBitmaps, previewsOf, paramValues } from './chunk-FAQXYGMX.js';
-export { LOOK_THEME, NO_VALUE, PREVIEW_SIZE, PROBLEM_COLOR, checkPipeline, drawableWires, exitLabel, formatParam, isControl, kindOf, portOn, previewRowId, runOrder, shownPorts, stageFromType, stageRows, stageStyle, typeColors, uniqueGroups, uniqueStages, valueRowId, wireEdges, wireStyle } from './chunk-FAQXYGMX.js';
-import { diagramScene, diagramPages, edgeIdOf, titleIdOf, groupLabelIdOf, nestGroups, groupMinWidth, LABEL_PLACEMENT, EDGE_DERIVE_PATH } from './chunk-QU4QZUC6.js';
-import { portOf, insetOf, diagramNodeOf, DEFAULT_GROUP_INSET, SIDE_TRACK_GAP, widenForMinWidth, rankGaps, portSitesOf, labelCenter } from './chunk-L4H444QI.js';
+import { DiagramView, reorderContribution, ANYWHERE, isBodyEnd, sequenceSlots } from './chunk-62SMY45E.js';
+import './chunk-5VNPLOIX.js';
+import { stageFromType, LOOK_THEME, drawableWires, uniqueStages, shownPorts, valueRowId, NO_VALUE, previewRowId, formatParam, stageStyle, PROBLEM_COLOR, typeColors, kindOf, boxNode, portOn, wireStyle, isControl, wireEdge, sceneStyles, uniqueGroups, wireEdges, exitLabel, splitProblem, checkPipeline, PREVIEW_DENSITY, runOrder, PREVIEW_SIZE, closeBitmaps, previewsOf, paramValues } from './chunk-TBG6DFB2.js';
+export { LOOK_THEME, NO_VALUE, PREVIEW_SIZE, PROBLEM_COLOR, checkPipeline, drawableWires, exitLabel, formatParam, isControl, kindOf, portOn, previewRowId, runOrder, shownPorts, stageFromType, stageRows, stageStyle, typeColors, uniqueGroups, uniqueStages, valueRowId, wireEdges, wireStyle } from './chunk-TBG6DFB2.js';
+import { diagramScene, diagramPages, edgeIdOf, titleIdOf, groupLabelIdOf, nestGroups, groupMinWidth, LABEL_PLACEMENT, EDGE_DERIVE_PATH } from './chunk-ZWXM5F4I.js';
+import { portOf, insetOf, diagramNodeOf, DEFAULT_GROUP_INSET, SIDE_TRACK_GAP, widenForMinWidth, rankGaps, portSitesOf, labelCenter, resolveOutline } from './chunk-VB6HUKNG.js';
+import { moveItems, imeKey, isNoopDrop } from '@weasel-js/headless';
+import { useLatest, bitmapSrc, ActionDisabledReason, worldPosesOf, RIGID_POSE_COMPOSITION, IDENTITY_POSE_COMPOSITION, pointAlongPath } from '@weasel-js/core';
 import { polygonFromPoints } from '@weasel-js/core/math';
+import { pathToD, transformPath, pathFromD, worldCoords } from '@weasel-js/geom';
 import { forwardRef, useMemo, useRef, useState, useImperativeHandle, useEffect, useCallback, useSyncExternalStore } from 'react';
-import { useLatest, bitmapSrc, ActionDisabledReason, pointAlongPath } from '@weasel-js/core';
 import { releaseImageSource } from '@weasel-js/core/renderer';
 import { jsx } from 'react/jsx-runtime';
 import { useLatest as useLatest$1, adoptCssOnce, useVisibleRaf } from '@weasel-js/react';
@@ -113,8 +115,6 @@ function moveGroup(doc, id, offset) {
     ...boxes !== void 0 ? { groupBoxes: boxes } : {}
   };
 }
-
-// src/effect/lookRoutes.ts
 var EPS = 1e-3;
 var near = (a, b) => Math.abs(a.x - b.x) <= EPS && Math.abs(a.y - b.y) <= EPS;
 var copy = (p) => ({ x: p.x, y: p.y });
@@ -139,9 +139,10 @@ function wireEnds(specs, edge) {
   const spec = specs.find((s) => s.id === edge);
   const trait = spec?.data?.diagram;
   const [from, to] = spec?.dependsOn ?? [];
-  const point = (node, port) => {
-    const n = node === void 0 || port === void 0 ? void 0 : specs.find((s) => s.id === node);
-    return n === void 0 ? void 0 : portOf({ id: node, kind: n.kind ?? "mark", data: n.data }, n.pose, port)?.point;
+  const world = worldPosesOf(specs, RIGID_POSE_COMPOSITION);
+  const point = (node, port2) => {
+    const n = node === void 0 || port2 === void 0 ? void 0 : specs.find((s) => s.id === node);
+    return n === void 0 ? void 0 : portOf({ id: node, kind: n.kind ?? "mark", data: n.data }, world.get(node), port2)?.point;
   };
   const a = point(from, trait?.from?.port);
   const b = point(to, trait?.to?.port);
@@ -206,11 +207,24 @@ function removeStages(doc, ids) {
   });
 }
 function pruneRoutes(doc, rewired = []) {
-  const pruned = pruneLookRoutes(doc, rewired);
+  const pruned = pruneLabels(pruneLookRoutes(doc, rewired));
   if (pruned.routes === void 0) return pruned;
   const ids = new Set(doc.pipeline.wires.flatMap((w) => w.id === void 0 || rewired.includes(w.id) ? [] : [w.id]));
   return { ...pruned, routes: Object.fromEntries(Object.entries(pruned.routes).filter(([id]) => ids.has(id))) };
 }
+function pruneLabels(doc) {
+  if (doc.labels === void 0) return doc;
+  const ids = new Set(doc.pipeline.wires.flatMap((w) => w.id === void 0 ? [] : [w.id]));
+  const kept = Object.entries(doc.labels).filter(([id]) => ids.has(id));
+  const { labels: _was, ...rest } = doc;
+  return kept.length > 0 ? { ...rest, labels: Object.fromEntries(kept) } : rest;
+}
+function setWireLabel(doc, wire, placement) {
+  const { [wire]: _was, ...others } = doc.labels ?? {};
+  const { labels: _all, ...rest } = doc;
+  const labels = placement === null ? others : { ...others, [wire]: placement };
+  return Object.keys(labels).length > 0 ? { ...rest, labels } : rest;
+}
 function setWireRoute(doc, wire, points) {
   const { [wire]: _was, ...rest } = doc.routes ?? {};
   return { ...doc, routes: points.length > 0 ? { ...rest, [wire]: points.map((p) => ({ x: p.x, y: p.y })) } : rest };
@@ -332,12 +346,6 @@ function chainLinks(pipeline, chain) {
   return { mainIn, mainOut, between: between2 };
 }
 var portsOf = (p, stage, side) => p.stages.find((s) => s.id === stage)?.[side] ?? [];
-function movedChain(chain, i, j, to) {
-  const run = chain.slice(i, j + 1);
-  const out = [...chain.slice(0, i), ...chain.slice(j + 1)];
-  out.splice(to > j ? to - run.length : to, 0, ...run);
-  return out;
-}
 function moveInChain(doc, stage, to) {
   return moveRunInChain(doc, stage, stage, to);
 }
@@ -346,7 +354,8 @@ function moveRunInChain(doc, first, last, to) {
   const chain = mainChain(p);
   const i = chain.indexOf(first);
   const j = chain.indexOf(last);
-  if (i < 0 || j < i || !Number.isInteger(to) || to < 0 || to > chain.length || to >= i && to <= j + 1) return null;
+  const run = Array.from({ length: j - i + 1 }, (_, k) => i + k);
+  if (i < 0 || j < i || !Number.isInteger(to) || to < 0 || to > chain.length || isNoopDrop(run, to)) return null;
   const { mainIn, mainOut, between: between2 } = chainLinks(p, chain);
   const wIn = i > 0 ? between2[i - 1] : void 0;
   const wOut = j < chain.length - 1 ? between2[j] : void 0;
@@ -354,8 +363,8 @@ function moveRunInChain(doc, first, last, to) {
   const gone = new Set([wIn, wOut, wAB].filter((k) => k !== void 0));
   const kept = p.wires.filter((_, k) => !gone.has(k));
   const free = (ref) => !kept.some((w) => w.to.stage === ref.stage && w.to.port === ref.port);
-  const pick = (id, side, type) => portsOf(p, id, side).find((port) => (type === void 0 || port.type === type) && (side === "outputs" || free({ stage: id, port: port.id })))?.id;
-  const typeOf = (id, port) => [...portsOf(p, id, "inputs"), ...portsOf(p, id, "outputs")].find((x) => x.id === port)?.type;
+  const pick = (id, side, type) => portsOf(p, id, side).find((port2) => (type === void 0 || port2.type === type) && (side === "outputs" || free({ stage: id, port: port2.id })))?.id;
+  const typeOf = (id, port2) => [...portsOf(p, id, "inputs"), ...portsOf(p, id, "outputs")].find((x) => x.id === port2)?.type;
   const made = [];
   const prev = chain[i - 1];
   const next = chain[j + 1];
@@ -386,7 +395,7 @@ function moveRunInChain(doc, first, last, to) {
     wires.push({ id: nextWireId({ ...p, wires }), from: m.from, to: m.to });
   }
   const pipeline = { ...p, wires };
-  const want = movedChain(chain, i, j, to);
+  const want = moveItems(chain, run, to);
   const got = mainChain(pipeline);
   if (got.length !== want.length || got.some((id, k) => id !== want[k])) return null;
   return pruneRoutes({ ...doc, pipeline }, [...gone].flatMap((k) => p.wires[k].id ?? []));
@@ -394,6 +403,49 @@ function moveRunInChain(doc, first, last, to) {
 function canMoveInChain(doc, stage, to) {
   return moveInChain(doc, stage, to) !== null;
 }
+var DIAGONAL = [0, 1, 1, 0, 0, 0];
+var SYMMETRIC = /* @__PURE__ */ new Set(["rect", "diamond", "ellipse"]);
+var anchor = (at) => ({ u: at.v, v: at.u });
+var vec = (p) => ({ x: p.y, y: p.x });
+var transposeD = (d) => pathToD(transformPath(pathFromD(d), DIAGONAL));
+function outline(o) {
+  if (typeof o === "string" && SYMMETRIC.has(o)) return o;
+  const path = typeof o === "string" ? resolveOutline(o).path({ x: 0, y: 0, width: 1, height: 1 }) : o;
+  return transformPath(path, DIAGONAL);
+}
+function port(p) {
+  const out = { ...p, at: anchor(p.at) };
+  if (p.sites !== void 0) {
+    out.sites = p.sites.map((s) => ({ ...s, ...anchor(s), ...s.normal ? { normal: vec(s.normal) } : {} }));
+  }
+  if (p.normal) out.normal = vec(p.normal);
+  return out;
+}
+function mark(m) {
+  if ("d" in m) return { ...m, d: transposeD(m.d) };
+  return {
+    ...m,
+    at: anchor(m.at),
+    ...m.self !== void 0 ? { self: anchor(m.self) } : {},
+    ...m.offset !== void 0 ? { offset: vec(m.offset) } : {}
+  };
+}
+function transpose(node) {
+  const { width, height, ...rest } = node;
+  return {
+    ...rest,
+    ...node.outline !== void 0 ? { outline: outline(node.outline) } : {},
+    ...node.ports !== void 0 ? { ports: node.ports.map(port) } : {},
+    ...node.marks !== void 0 ? { marks: node.marks.map(mark) } : {},
+    ...height !== void 0 ? { width: height } : {},
+    ...width !== void 0 ? { height: width } : {}
+  };
+}
+var flowing = (symbol) => (stage, pipeline, options) => {
+  if (options?.direction !== "down") return symbol(stage, pipeline, options);
+  const row = { ...options, direction: "right", controlSide: options.controlSide === "right" ? "bottom" : "top" };
+  return transpose(symbol(stage, pipeline, row));
+};
 
 // src/effect/symbolParts.ts
 function along(side, i, n) {
@@ -468,7 +520,10 @@ var hexagon = (stage, pipeline, options) => ({
   lines: [stage.title],
   ports: [...inputs(stage, pipeline, options, void 0, onHexagon), ...onHexagon(stage.outputs ?? [], "right")]
 });
-var step = (stage, pipeline, options) => {
+var CUT_SIZE = 10;
+var CUT_GAP = 3;
+var CUT_CHAR = 0.6 * CUT_SIZE;
+var stepAlong = (titleGap) => (stage, pipeline, options) => {
   if (!canBand(stage)) return diamond(stage, pipeline, options);
   const exits = stage.outputs ?? [];
   const n = exits.length;
@@ -483,10 +538,10 @@ var step = (stage, pipeline, options) => {
     text: String(cut),
     at: { u: riser(k), v: 1 },
     self: { u: 0.5, v: 0 },
-    offset: { x: 0, y: 3 },
-    style: { fontSize: 10 }
+    offset: { x: 0, y: CUT_GAP },
+    style: { fontSize: CUT_SIZE }
   }));
-  marks.push(title(stage, options, 18));
+  marks.push(title(stage, options, titleGap));
   return {
     outline: "rect",
     lines: [],
@@ -497,6 +552,12 @@ var step = (stage, pipeline, options) => {
     marks
   };
 };
+var step = (stage, pipeline, options) => {
+  if (options?.direction !== "down") return stepAlong(18)(stage, pipeline, options);
+  if (options.controlSide === "right") return flowing(stepAlong(18))(stage, pipeline, options);
+  const widest = Math.max(0, ...(stage.split?.at ?? []).map((cut) => String(cut).length * CUT_CHAR));
+  return flowing(stepAlong(Math.max(18, CUT_GAP + widest + 4)))(stage, pipeline, options);
+};
 var TRIANGLE = [[0, 0], [1, 0.5], [0, 1]];
 var COMPARATOR = outlineOf(TRIANGLE);
 var EXIT_AT = 0.7;
@@ -615,10 +676,14 @@ var demux = (stage, pipeline, options) => {
 var LEVER_FIRST = "M0.2 0.5 L0.78 0.27";
 var CONTACT_FIRST = dot(0.8, 0.25, 0.07);
 var CONTACT_SECOND = dot(0.8, 0.75, 0.07);
-var THROWN_SECOND = /* @__PURE__ */ new Map([
+var THROWN_ALONG = [
   [LEVER_FIRST, "M0.2 0.5 L0.78 0.73"],
   [CONTACT_FIRST, CONTACT_SECOND],
   [CONTACT_SECOND, CONTACT_FIRST]
+];
+var THROWN_SECOND = new Map([
+  ...THROWN_ALONG,
+  ...THROWN_ALONG.map(([from, to]) => [transposeD(from), transposeD(to)])
 ]);
 var thrownToSecond = (d) => THROWN_SECOND.get(d);
 var switchSymbol = (stage, pipeline, options) => {
@@ -646,15 +711,15 @@ var switchSymbol = (stage, pipeline, options) => {
   };
 };
 var BRANCH_SYMBOLS = Object.freeze({
-  diamond,
-  bar,
-  demux,
-  switch: switchSymbol,
-  hexagon,
+  diamond: flowing(diamond),
+  bar: flowing(bar),
+  demux: flowing(demux),
+  switch: flowing(switchSymbol),
+  hexagon: flowing(hexagon),
   step,
-  comparator,
-  crossover,
-  fork
+  comparator: flowing(comparator),
+  crossover: flowing(crossover),
+  fork: flowing(fork)
 });
 var NEEDS = {
   bar: canBand,
@@ -679,7 +744,7 @@ function sidePorts(stage) {
     ...(stage.outputs ?? []).map((p) => ({ id: p.id, at: { u: 1, v: 0.5 } }))
   ];
 }
-var untyped = (ports) => (ports ?? []).map(({ type: _type, ...port }) => port);
+var untyped = (ports) => (ports ?? []).map(({ type: _type, ...port2 }) => port2);
 function nodeOf(stage, pipeline, branch, theme) {
   if (kindOf(stage) !== "decision") {
     return { ...boxNode(stage, { showParams: false, rowPorts: false, ports: sidePorts(stage) }), padding: COMPACT_PADDING };
@@ -823,8 +888,8 @@ function ownerOf(stages) {
     const parent = spec.parent;
     if (parent !== void 0 && stages.has(parent)) return parent;
     const deps = spec.dependsOn;
-    const anchor = Array.isArray(deps) && deps.length === 1 ? deps[0] : void 0;
-    return anchor !== void 0 && stages.has(anchor) ? anchor : void 0;
+    const anchor2 = Array.isArray(deps) && deps.length === 1 ? deps[0] : void 0;
+    return anchor2 !== void 0 && stages.has(anchor2) ? anchor2 : void 0;
   };
 }
 function wireEnds2(spec) {
@@ -859,9 +924,10 @@ function costSpec(stage, own, of, text, problem) {
   const fill = problem ? { paint: { color: PROBLEM_COLOR } } : titleData.fill ?? { paint: { color: stageStyle(of).text } };
   const width = text.length * fontSize * 0.6;
   const height = Math.ceil(fontSize * 1.2);
-  const box = stage.pose;
+  const world = worldPosesOf([stage, ...own], RIGID_POSE_COMPOSITION);
+  const box = world.get(stage.id);
   const top = Math.min(box.y, ...own.flatMap((s) => {
-    const p = s.pose;
+    const p = world.get(s.id);
     return s !== stage && p !== void 0 && p.y + p.height <= box.y ? [p.y] : [];
   }));
   return {
@@ -885,8 +951,8 @@ function useRunPortOptions(color, pipeline, run) {
       shape: "circle",
       sizePx: 8,
       // Every port a look declares has a value type; the compass defaults have none.
-      showsPort: (port) => port.type !== void 0,
-      fill: (port) => ({ paint: { color: color(port.type), ...faded.has(port.nodeId) ? { opacity: DIM } : {} } })
+      showsPort: (port2) => port2.type !== void 0,
+      fill: (port2) => ({ paint: { color: color(port2.type), ...faded.has(port2.nodeId) ? { opacity: DIM } : {} } })
     };
   }, [color, missed]);
 }
@@ -1010,10 +1076,15 @@ function orient(p, a, b) {
   if (canWire(p, b, a)) return { from: b, to: a };
   return null;
 }
-var fed = (p, to, except) => p.wires.some((w) => w.to.stage === to.stage && w.to.port === to.port && (except === void 0 || w.id !== except));
+var same = (a, b) => a.stage === b.stage && a.port === b.port;
+var takesMany = (p, to) => p.stages.find((s) => s.id === to.stage)?.inputs?.find((i) => i.id === to.port)?.many === true;
+var fed = (p, from, to, except) => {
+  const many = takesMany(p, to);
+  return p.wires.some((w) => same(w.to, to) && (!many || same(w.from, from)) && (except === void 0 || w.id !== except));
+};
 function wireFor(p, a, b, except) {
   const wire = orient(p, a, b);
-  return wire !== null && !fed(p, wire.to, except) ? wire : null;
+  return wire !== null && !fed(p, wire.from, wire.to, except) ? wire : null;
 }
 function pinShown(doc, specs) {
   const shown = Object.fromEntries([...stageBoxes(doc, specs)].map(([id, b]) => [id, { x: b.x, y: b.y }]));
@@ -1021,7 +1092,8 @@ function pinShown(doc, specs) {
 }
 function stageBoxes(doc, specs) {
   const ids = new Set(doc.pipeline.stages.map((s) => s.id));
-  return new Map(specs.filter((s) => ids.has(s.id)).map((s) => [s.id, s.pose]));
+  const world = worldPosesOf(specs, RIGID_POSE_COMPOSITION);
+  return new Map(specs.filter((s) => ids.has(s.id)).map((s) => [s.id, world.get(s.id)]));
 }
 function editHandlers(now, unpick, rename = () => {
 }) {
@@ -1040,7 +1112,7 @@ function editHandlers(now, unpick, rename = () => {
       held = false;
       const reports = { moves: drag.moves.splice(0), boxes: drag.boxes.splice(0) };
       const { doc, built, specs, onChange } = now();
-      const boxes = new Map(specs.map((s) => [s.id, s.pose]));
+      const boxes = worldPosesOf(specs, RIGID_POSE_COMPOSITION);
       const out = dragEdit(pinShown(ensureWireIds(doc), specs), built, reports, (id) => boxes.get(id));
       if (out !== null) onChange(out.doc, out.label);
     });
@@ -1064,7 +1136,7 @@ function editHandlers(now, unpick, rename = () => {
       if (id === void 0 || wire === void 0 || c.port === void 0) return null;
       const moved = { stage: c.node, port: c.port };
       const [from, to] = c.end === "from" ? [moved, wire.to] : [wire.from, moved];
-      return canWire(d.pipeline, from, to) && !fed(d.pipeline, to, id) ? reconnectWire(d, id, c.end, moved) : null;
+      return canWire(d.pipeline, from, to) && !fed(d.pipeline, from, to, id) ? reconnectWire(d, id, c.end, moved) : null;
     }),
     onEditRoute: (c) => commit("Edit route", (d, b) => {
       const id = b.wireOf(c.edge);
@@ -1078,6 +1150,11 @@ function editHandlers(now, unpick, rename = () => {
       const ends = wireEnds(specs, c.edge);
       return ends === void 0 ? null : setLookRoute(d, look, id, c.waypoints, ends);
     }),
+    onMoveLabel: (m) => commit("Move label", (d, b) => {
+      const id = b.wireOf(m.edge);
+      if (id === void 0 || m.placement === null && d.labels?.[id] === void 0) return null;
+      return setWireLabel(d, id, m.placement);
+    }),
     onDelete: (r) => commit("Delete", (d, b) => {
       unpick();
       const stages = r.nodes.flatMap((n) => b.stageOf(n) ?? []);
@@ -1105,14 +1182,14 @@ function useEditorPicks(built, given) {
   const [group, setGroup] = useState(null);
   const [edge, setEdge] = useState(null);
   const latest = useLatest$1({ built, given });
-  const pick = useCallback((id) => {
+  const pick = useCallback((id, ids = id === null ? [] : [id]) => {
     const { built: b, given: g } = latest.current;
     const s = id === null ? void 0 : b.stageOf(id);
     const k = id === null ? void 0 : b.groupOf(id);
     setStage(s ?? null);
     setGroup(k ?? null);
     setEdge(id !== null && s === void 0 && k === void 0 && b.wireOf(id) !== void 0 ? id : null);
-    g.onSelect?.(s ?? null);
+    g.onSelect?.(s ?? null, ids.filter((i) => isPart(b, i)));
     g.onSelectGroup?.(k ?? null);
   }, [latest]);
   const unpick = useCallback(() => setEdge(null), []);
@@ -1166,6 +1243,7 @@ function GroupTitleField({ initial, onDone }) {
       onChange: (e) => setText(e.target.value),
       onKeyDown: (e) => {
         e.stopPropagation();
+        if (imeKey(e.nativeEvent)) return;
         if (e.key === "Enter") finish(text.trim());
         else if (e.key === "Escape") finish(null);
       },
@@ -1390,6 +1468,7 @@ function clearLabel(path, size, offset, keepOut) {
   }
   return void 0;
 }
+var worldSpecs = (data, options) => diagramScene(data, { ...options, composition: IDENTITY_POSE_COMPOSITION });
 var inkOf = (id, specs) => specs.filter((s) => s.id === id || s.parent === id || String(s.id).startsWith(`${id}/mark:`)).map((s) => s.pose);
 function walledIn(grid, walls) {
   if (walls.length === 0) return grid;
@@ -1404,7 +1483,7 @@ function walledIn(grid, walls) {
   };
 }
 function routeWires(wires, nodes, laid) {
-  const specs = diagramScene({ nodes, edges: wires.map((w) => w.edge), ...laid.groups !== void 0 ? { groups: laid.groups } : {} }, {
+  const specs = worldSpecs({ nodes, edges: wires.map((w) => w.edge), ...laid.groups !== void 0 ? { groups: laid.groups } : {} }, {
     layout: "none",
     router: laid.router,
     ...laid.measure !== void 0 ? { measure: laid.measure } : {}
@@ -1412,9 +1491,9 @@ function routeWires(wires, nodes, laid) {
   const spec = new Map(specs.map((s) => [s.id, s]));
   const ink = new Map(nodes.map((n) => [n.id, inkOf(n.id, specs)]));
   const grid = { ...laid.grid, ink: laid.grid.columns.map((_, c) => [...ink].flatMap(([id, b]) => laid.column.get(id) === c ? b : [])) };
-  const end = (stage, port) => {
+  const end = (stage, port2) => {
     const s = spec.get(stage);
-    const [site, ...sites] = portSitesOf({ id: stage, data: s.data }, s.pose, port);
+    const [site, ...sites] = portSitesOf({ id: stage, data: s.data }, s.pose, port2);
     return { column: laid.column.get(stage), point: site?.point ?? { x: 0, y: 0 }, normal: site?.normal ?? null, sites };
   };
   const walls = nestGroups(laid.groups ?? [], (id) => ink.has(id)).flatMap((g) => {
@@ -1438,7 +1517,7 @@ function routeWires(wires, nodes, laid) {
     return { waypoints, path: routeOf(spec.get(edge.from), edge.fromPort, spec.get(edge.to), edge.toPort, laid.router, waypoints) };
   });
   const segments = routes.map(({ path }) => {
-    const c = path?.kind === "polygon" ? path.coords : [];
+    const c = path?.kind === "polygon" ? worldCoords(path) : [];
     return Array.from({ length: Math.max(0, c.length / 2 - 1) }, (_, i) => {
       const [x0, y0, x1, y1] = [c[2 * i], c[2 * i + 1], c[2 * i + 2], c[2 * i + 3]];
       return { x: Math.min(x0, x1) - 1, y: Math.min(y0, y1) - 1, width: Math.abs(x1 - x0) + 2, height: Math.abs(y1 - y0) + 2 };
@@ -1482,11 +1561,11 @@ function laneHeights(count, least, needs, insets) {
 }
 function lanePorts(stage, box, lane, band) {
   const side = (ports, u) => ports.map((p) => {
-    const same = ports.filter((q) => q.type === p.type);
+    const same2 = ports.filter((q) => q.type === p.type);
     const [top, bottom] = band(lane.get(p.type));
     const a = Math.max(top, box.y);
     const b = Math.min(bottom, box.y + box.height);
-    const y = a + (b - a) * (same.indexOf(p) + 1) / (same.length + 1);
+    const y = a + (b - a) * (same2.indexOf(p) + 1) / (same2.length + 1);
     return { id: p.id, type: p.type, at: { u, v: (y - box.y) / box.height }, normal: { x: u === 0 ? -1 : 1, y: 0 } };
   });
   return [...side(stage.inputs ?? [], 0), ...side(stage.outputs ?? [], 1)];
@@ -1499,7 +1578,7 @@ function controlSideOf(stage, pipeline, lane) {
   return control.length > 0 && signal.length > 0 && mean(control) > mean(signal) ? "bottom" : "top";
 }
 function sizesOf(nodes, groups, measure) {
-  const specs = diagramScene({ nodes, edges: [], groups }, { layout: "none", ...measure !== void 0 ? { measure } : {} });
+  const specs = worldSpecs({ nodes, edges: [], groups }, { layout: "none", ...measure !== void 0 ? { measure } : {} });
   const pose = new Map(specs.map((s) => [s.id, s.pose]));
   const spec = new Map(specs.map((s) => [s.id, s]));
   const nested = nestGroups(groups, (id) => nodes.some((n) => n.id === id)).map((g) => ({ members: g.members, inset: insetOf(diagramNodeOf({ id: g.id, kind: "mark", data: spec.get(g.id)?.data })?.group?.inset) }));
@@ -1645,10 +1724,27 @@ var lanes = (pipeline, options = {}) => {
 // src/effect/rack.ts
 var SKIP_OUT = "~skip-out";
 var SKIP_IN = "~skip-in";
+var TAP = "~tap:";
+var untapped = (port2) => port2.startsWith(TAP) ? port2.slice(TAP.length) : port2;
 var SIDE_PORT_GAP = 24;
-var spreadAt = (ports, v) => ports.map((p, i) => ({ id: p.id, type: p.type, at: { u: (i + 1) / (ports.length + 1), v }, normal: { x: 0, y: v * 2 - 1 } }));
-function roomFor(ports) {
-  const count = (v) => ports.filter((p) => p.at.v === v && p.at.u > 0 && p.at.u < 1).length;
+var ROW = {
+  anchor: (along2, across) => ({ u: along2, v: across }),
+  along: (at) => at.u,
+  across: (at) => at.v,
+  normal: (across) => ({ x: 0, y: across * 2 - 1 })
+};
+var COLUMN = {
+  anchor: (along2, across) => ({ u: across, v: along2 }),
+  along: (at) => at.v,
+  across: (at) => at.u,
+  normal: (across) => ({ x: across * 2 - 1, y: 0 })
+};
+var spreadAt = (frame, ports, across) => ports.map((p, i) => ({ id: p.id, type: p.type, at: frame.anchor((i + 1) / (ports.length + 1), across), normal: frame.normal(across) }));
+function roomFor(frame, ports) {
+  const count = (across) => ports.filter((p) => {
+    const along2 = frame.along(p.at);
+    return frame.across(p.at) === across && along2 > 0 && along2 < 1;
+  }).length;
   return (Math.max(count(0), count(1)) + 1) * SIDE_PORT_GAP;
 }
 function rackWires(pipeline, skips) {
@@ -1684,26 +1780,37 @@ function rackWires(pipeline, skips) {
   }
   return wires;
 }
+function tapped(wires, line, boxed) {
+  return wires.map((w) => {
+    const from = line.at.get(w.from.stage);
+    const to = line.at.get(w.to.stage);
+    const across = from !== void 0 && to !== void 0 && to - from > 1 && !w.arc && boxed(w.from.stage) && w.from.port === line.mainOut.get(w.from.stage) && w.to.port !== line.mainIn.get(w.to.stage);
+    return across ? { ...w, from: { stage: w.from.stage, port: TAP + w.from.port }, exit: w.exit ?? w.from } : w;
+  });
+}
 function lineOf(pipeline, ordered, chain) {
   const { mainIn, mainOut } = chainLinks(pipeline, ordered);
   return { at: new Map(chain.map((id, i) => [id, i])), mainIn, mainOut };
 }
-function portsOf2(stage, line, wires, near2, far) {
-  if (!line.at.has(stage.id)) return [...spreadAt(stage.outputs ?? [], far), ...spreadAt(stage.inputs ?? [], near2)];
-  const typed = (p, anchor) => ({ id: p.id, type: p.type, at: anchor });
+function portsOf2(stage, line, wires, frame, near2, far) {
+  if (!line.at.has(stage.id)) return [...spreadAt(frame, stage.outputs ?? [], far), ...spreadAt(frame, stage.inputs ?? [], near2)];
+  const typed = (p, anchor2) => ({ id: p.id, type: p.type, at: anchor2 });
   const out = [];
   const side = [];
   for (const p of stage.inputs ?? []) {
-    if (p.id === line.mainIn.get(stage.id)) out.push(typed(p, { u: 0, v: 0.5 }));
+    if (p.id === line.mainIn.get(stage.id)) out.push(typed(p, frame.anchor(0, 0.5)));
     else side.push(p);
   }
   for (const p of stage.outputs ?? []) {
-    if (p.id === line.mainOut.get(stage.id)) out.push(typed(p, { u: 1, v: 0.5 }));
+    if (p.id === line.mainOut.get(stage.id)) out.push(typed(p, frame.anchor(1, 0.5)));
     else side.push(p);
   }
-  out.push(...spreadAt(side, near2));
+  const main = portOn(stage, line.mainOut.get(stage.id) ?? "");
+  const taps = new Set(wires.flatMap((w) => w.from.stage === stage.id && w.from.port.startsWith(TAP) ? [w.from.port] : []));
+  if (main !== void 0) for (const id of taps) side.push({ ...main, id });
+  out.push(...spreadAt(frame, side, near2));
   const type = portOn(stage, line.mainOut.get(stage.id) ?? line.mainIn.get(stage.id) ?? "")?.type;
-  const arc = (id, u) => ({ id, at: { u, v: far }, ...type !== void 0 ? { type } : {} });
+  const arc = (id, along2) => ({ id, at: frame.anchor(along2, far), ...type !== void 0 ? { type } : {} });
   if (wires.some((w) => w.arc && w.from.stage === stage.id)) out.push(arc(SKIP_OUT, 0.75));
   if (wires.some((w) => w.arc && w.to.stage === stage.id)) out.push(arc(SKIP_IN, 0.25));
   return out;
@@ -1711,6 +1818,8 @@ function portsOf2(stage, line, wires, near2, far) {
 var rack = (pipeline, options = {}) => {
   const theme = options.theme ?? LOOK_THEME;
   const color = typeColors(pipeline, options.colors, theme.series);
+  const down = options.direction === "down";
+  const frame = down ? COLUMN : ROW;
   const below = options.side !== "above";
   const near2 = below ? 1 : 0;
   const far = below ? 0 : 1;
@@ -1720,16 +1829,18 @@ var rack = (pipeline, options = {}) => {
   const skips = options.collapseSkips === false ? [] : skipDecisions(pipeline, ordered);
   const gone = new Set(skips.map((s) => s.decision.id));
   const chain = ordered.filter((id) => !gone.has(id));
-  const wires = rackWires(pipeline, skips);
   const line = lineOf(pipeline, ordered, chain);
+  const decisions = new Set(stages.filter((st) => kindOf(st) === "decision").map((st) => st.id));
+  const wires = tapped(rackWires(pipeline, skips), line, (id) => !decisions.has(id));
   const kept = stages.filter((s) => !gone.has(s.id));
-  const controlSide = below ? "bottom" : "top";
+  const flow = { direction: down ? "down" : "right", controlSide: down ? below ? "right" : "left" : below ? "bottom" : "top" };
   const nodes = kept.map((stage) => {
-    if (kindOf(stage) === "decision") return { id: stage.id, ...branchNode(stage, pipeline, options.branch, { controlSide, style: stageStyle(stage, theme) }) };
-    const ports = portsOf2(stage, line, wires, near2, far);
+    if (kindOf(stage) === "decision") return { id: stage.id, ...branchNode(stage, pipeline, options.branch, { ...flow, style: stageStyle(stage, theme) }) };
+    const ports = portsOf2(stage, line, wires, frame, near2, far);
     const node = boxNode(stage, { showParams: options.showParams !== false, rowPorts: false, ports, run: options });
-    const room = roomFor(ports);
-    return room > 2 * SIDE_PORT_GAP ? { ...node, width: room } : node;
+    const room = roomFor(frame, ports);
+    if (room <= 2 * SIDE_PORT_GAP) return node;
+    return down ? { ...node, height: Math.max(node.height ?? 0, room) } : { ...node, width: room };
   });
   const byId = new Map(kept.map((s) => [s.id, s]));
   const edges = wires.map((wire) => {
@@ -1750,7 +1861,7 @@ var rack = (pipeline, options = {}) => {
     scene: {
       layout: "chain",
       layoutOptions: {
-        direction: "right",
+        direction: down ? "down" : "right",
         chain,
         chainSide: below ? "after" : "before",
         ...options.nodeGap !== void 0 ? { nodeGap: options.nodeGap } : {},
@@ -1760,14 +1871,14 @@ var rack = (pipeline, options = {}) => {
       ...sceneStyles(kept, edges, theme)
     },
     color,
-    order: { axis: "x", items: chain.map((id) => ({ id })) },
+    order: { axis: down ? "y" : "x", items: chain.map((id) => ({ id })) },
     exits: new Map(wires.flatMap((wire, i) => wire.exit === void 0 ? [] : [[edgeIdOf(edges[i].edge), wire.exit]]))
   };
 };
 
 // src/effect/editorMapping.ts
 var endsKey = (from, to) => JSON.stringify([from.stage, from.port, to.stage, to.port]);
-var edgeEnds = (e) => endsKey({ stage: e.from, port: e.fromPort ?? "" }, { stage: e.to, port: e.toPort ?? "" });
+var edgeEnds = (e) => endsKey({ stage: e.from, port: untapped(e.fromPort ?? "") }, { stage: e.to, port: e.toPort ?? "" });
 function editorScene(doc, look = "nodeGraph", options) {
   const drawn = drawLook(doc, look, options);
   const stages = new Set(doc.pipeline.stages.map((s) => s.id));
@@ -1783,10 +1894,16 @@ function editorScene(doc, look = "nodeGraph", options) {
     return id === void 0 ? [] : [[edgeIdOf(e), id]];
   }));
   const routes = look === "nodeGraph" ? doc.routes : void 0;
-  const edges = routes === void 0 ? drawn.data.edges : drawn.data.edges.map((e) => {
+  const { labels } = doc;
+  const edges = routes === void 0 && labels === void 0 ? drawn.data.edges : drawn.data.edges.map((e) => {
     const id = wires.get(edgeIdOf(e));
-    const route = id === void 0 ? void 0 : routes[id];
-    return route === void 0 ? e : { ...e, waypoints: route };
+    const route = id === void 0 ? void 0 : routes?.[id];
+    const label = id === void 0 ? void 0 : labels?.[id];
+    return {
+      ...e,
+      ...route !== void 0 ? { waypoints: route } : {},
+      ...label !== void 0 ? { labelPlacement: label } : {}
+    };
   });
   return {
     ...drawn,
@@ -1948,9 +2065,7 @@ function groupMove(doc, order, units, move) {
 }
 function laneMove(doc, order, move) {
   const types = order.items.flatMap((i) => laneTypeOf(i.id) ?? []);
-  const moved = types.filter((_, k) => k !== move.from);
-  moved.splice(move.to > move.from ? move.to - 1 : move.to, 0, types[move.from]);
-  return setLaneOrder(doc, moved);
+  return setLaneOrder(doc, moveItems(types, [move.from], move.to));
 }
 function unitsBefore(move) {
   const units = move.order.filter((id) => id !== move.id);
@@ -2017,7 +2132,8 @@ function renameGroupContribution(now, rename) {
       invoker: {
         timing: "immediate",
         run(_, params) {
-          const group = under({ x: Number(params?.worldX), y: Number(params?.worldY) });
+          const world = params?.world;
+          const group = world ? under(world) : void 0;
           if (group !== void 0) rename(group);
         }
       }
@@ -2049,7 +2165,7 @@ function freeSpot(boxes, size, view) {
   const last = boxes.reduce((a, b) => b.x + b.width > a.x + a.width ? b : a);
   return { x: last.x + last.width + PLACE_GAP, y: last.y };
 }
-var EffectEditor = forwardRef(function EffectEditor2({ doc, onChange, run, selected, onSelect, selectedGroup, onSelectGroup, look = "nodeGraph", options, width, height, background, className }, ref) {
+var EffectEditor = forwardRef(function EffectEditor2({ doc, onChange, run, selected, onSelect, selectedGroup, onSelectGroup, look = "nodeGraph", options, width, height, maxScale, bounded, refit, background, className }, ref) {
   const built = useMemo(() => editorScene(doc, look, options), [doc, look, options]);
   const specs = useMemo(() => applyLookRoutes(diagramScene(built.data, built.scene), doc, look, built).map((s) => s.pickable === false || isPart(built, s.id) ? s : { ...s, pickable: false }), [built, doc, look]);
   const painted = useMemo(() => paintRun(doc.pipeline, specs, run, built.exits), [doc.pipeline, specs, run, built]);
@@ -2113,6 +2229,9 @@ var EffectEditor = forwardRef(function EffectEditor2({ doc, onChange, run, selec
       width,
       height,
       minScale: EFFECT_MIN_SCALE,
+      ...maxScale !== void 0 ? { maxScale } : {},
+      ...bounded !== void 0 ? { bounded } : {},
+      ...refit !== void 0 ? { refit } : {},
       anchor: "start",
       ports: "connect",
       portOptions,
@@ -2120,9 +2239,11 @@ var EffectEditor = forwardRef(function EffectEditor2({ doc, onChange, run, selec
       onConnect: handlers.onConnect,
       onReconnect: handlers.onReconnect,
       onEditRoute: handlers.onEditRoute,
+      onMoveLabel: handlers.onMoveLabel,
       onDelete: handlers.onDelete,
       ...look === "nodeGraph" ? { onMove: handlers.onMove } : { ambient },
       ...look === "nodeGraph" ? { onEditContainer: handlers.onEditContainer } : {},
+      selectionMode: "multiple",
       onSelect: picks.pick,
       ...picks.shown !== void 0 ? { selected: picks.shown } : {},
       ...pages !== void 0 ? { pages } : {},
@@ -2145,9 +2266,9 @@ function draw(width, height, paint) {
   paint(canvas.getContext("2d"));
   return canvas.transferToImageBitmap();
 }
-function need(ctx, port) {
-  const value = ctx.inputs[port];
-  if (value === void 0) throw new Error(`${port} is not connected`);
+function need(ctx, port2) {
+  const value = ctx.inputs[port2];
+  if (value === void 0) throw new Error(`${port2} is not connected`);
   return value;
 }
 function decide(ctx, value) {
@@ -2324,14 +2445,14 @@ function createPass(pipeline, opts) {
     const values = {};
     const previews = {};
     const seen = { ...inputs2, ...outputs };
-    for (const port of shownPorts(stage)) {
-      const value = seen[port.id];
+    for (const port2 of shownPorts(stage)) {
+      const value = seen[port2.id];
       if (value === void 0) continue;
-      const kind = opts.kinds?.[port.type];
+      const kind = opts.kinds?.[port2.type];
       const text = kind?.show !== void 0 ? kind.show(value) : plainText(value);
-      if (text !== void 0) values[port.id] = text;
+      if (text !== void 0) values[port2.id] = text;
       const preview = opts.previews === false ? void 0 : await kind?.preview?.(value, size);
-      if (preview !== void 0) previews[port.id] = preview;
+      if (preview !== void 0) previews[port2.id] = preview;
     }
     const full = {
       ...entry,
@@ -2376,11 +2497,11 @@ function createPass(pipeline, opts) {
       const given = new Set(Object.values(sources));
       const done = /* @__PURE__ */ new Set();
       for (const [id, outputs] of made) {
-        for (const port of stages.get(id)?.outputs ?? []) {
-          const value = outputs[port.id];
+        for (const port2 of stages.get(id)?.outputs ?? []) {
+          const value = outputs[port2.id];
           if (value === void 0 || given.has(value) || done.has(value)) continue;
           done.add(value);
-          opts.kinds?.[port.type]?.dispose?.(value);
+          opts.kinds?.[port2.type]?.dispose?.(value);
         }
       }
       made.clear();
@@ -2389,9 +2510,9 @@ function createPass(pipeline, opts) {
 }
 function passThrough(stage, inputs2) {
   const out = {};
-  for (const port of stage.outputs ?? []) {
-    const from = (stage.inputs ?? []).find((i) => i.type === port.type && inputs2[i.id] !== void 0);
-    if (from !== void 0) out[port.id] = inputs2[from.id];
+  for (const port2 of stage.outputs ?? []) {
+    const from = (stage.inputs ?? []).find((i) => i.type === port2.type && inputs2[i.id] !== void 0);
+    if (from !== void 0) out[port2.id] = inputs2[from.id];
   }
   return out;
 }
@@ -2418,6 +2539,7 @@ function createEffectRunner(opts) {
   let controller = new AbortController();
   let tail = Promise.resolve();
   let pending = 0;
+  let behind = false;
   let published = [];
   const listeners = /* @__PURE__ */ new Set();
   const set = (next) => {
@@ -2479,6 +2601,7 @@ function createEffectRunner(opts) {
       controller.abort();
       controller = new AbortController();
       dropStepping();
+      behind = false;
       set({ run: void 0, playing: false, time: 0 });
     },
     advance(seconds) {
@@ -2486,6 +2609,17 @@ function createEffectRunner(opts) {
       state = { ...state, time: state.time + seconds };
       if (pending === 0) void enqueue(wholeRun(state.time));
     },
+    seek(seconds) {
+      state = { ...state, time: seconds };
+      if (pending === 0) void enqueue(wholeRun(seconds));
+      else if (!behind) {
+        behind = true;
+        void enqueue((signal) => {
+          behind = false;
+          return wholeRun(state.time)(signal);
+        });
+      }
+    },
     setPipeline(next) {
       if (next === pipeline) return;
       pipeline = next;
@@ -2520,7 +2654,7 @@ function createEffectRunner(opts) {
   };
 }
 function useEffectRunner(opts) {
-  const { pipeline, sources, evaluators, kinds, previews, previewSize, target, requestFrame, cancelFrame } = opts;
+  const { pipeline, sources, evaluators, kinds, previews, previewSize, target, requestFrame, cancelFrame, clock } = opts;
   const [runner] = useState(() => createEffectRunner(opts));
   useEffect(() => {
     runner.setPipeline(pipeline);
@@ -2553,9 +2687,30 @@ function useEffectRunner(opts) {
   });
   useEffect(() => {
     last.current = null;
-    if (state.playing) loop.request();
+    if (state.playing && clock === void 0) loop.request();
     else loop.cancel();
-  }, [state.playing, loop]);
+  }, [state.playing, loop, clock]);
+  useEffect(() => {
+    if (clock === void 0) return;
+    const c = clock.clock;
+    const follow = () => {
+      if (c.rate !== 0) runner.play();
+      else runner.pause();
+    };
+    follow();
+    if (runner.state.time !== c.elapsed / 1e3) runner.seek(c.elapsed / 1e3);
+    const offClock = c.subscribe(follow);
+    const offFrame = clock.onFrame((elapsed) => runner.seek(elapsed / 1e3));
+    const offRunner = runner.subscribe(() => {
+      const { playing } = runner.state;
+      if (playing !== (c.rate !== 0)) c.rate = playing ? c.speed : 0;
+    });
+    return () => {
+      offClock();
+      offFrame();
+      offRunner();
+    };
+  }, [runner, clock]);
   useEffect(() => {
     runner.drawn(state.run);
   }, [runner, state.run]);
@@ -2563,6 +2718,6 @@ function useEffectRunner(opts) {
   return { ...state, runner };
 }
 
-export { AT_COLOR, BRANCH_SYMBOLS, COMPACT_PADDING, EFFECT_LOOKS, EFFECT_MIN_SCALE, EffectChart, EffectEditor, IMAGE_STAGE_TYPES, LANE_INSET, REORDER_LANES_ACTION_ID, addStage, addWire, applyLookRoutes, branchNode, canMoveInChain, canWire, chainLinks, compact, costText, createEffectRunner, createPass, editorScene, ensureWireIds, groupContents, groupStages, imageEvaluators, imageValueKinds, laneId, laneTypeOf, lanes, mainChain, moveGroup, moveInChain, moveStages, moveToGroup, nextGroupId, nextStageId, nextWireId, nodeGraph, paintRun, pruneLookRoutes, rack, reconnectWire, removeStages, removeWires, renameGroup, runPipeline, setGroupBox, setLaneOrder, setLookRoute, setParam, setWireRoute, symbolNameFor, testCard, ungroup, useEffectRunner, wireEnds };
+export { AT_COLOR, BRANCH_SYMBOLS, COMPACT_PADDING, EFFECT_LOOKS, EFFECT_MIN_SCALE, EffectChart, EffectEditor, IMAGE_STAGE_TYPES, LANE_INSET, REORDER_LANES_ACTION_ID, addStage, addWire, applyLookRoutes, branchNode, canMoveInChain, canWire, chainLinks, compact, costText, createEffectRunner, createPass, editorScene, ensureWireIds, groupContents, groupStages, imageEvaluators, imageValueKinds, laneId, laneTypeOf, lanes, mainChain, moveGroup, moveInChain, moveStages, moveToGroup, nextGroupId, nextStageId, nextWireId, nodeGraph, paintRun, pruneLookRoutes, rack, reconnectWire, removeStages, removeWires, renameGroup, runPipeline, setGroupBox, setLaneOrder, setLookRoute, setParam, setWireLabel, setWireRoute, symbolNameFor, testCard, ungroup, useEffectRunner, wireEnds };
 //# sourceMappingURL=effect.js.map
 //# sourceMappingURL=effect.js.map