@weasel-js/diagram 1.10.1 → 1.11.1

package/dist/effect.js

@@ -0,0 +1,2542 @@
+import { DiagramView, reorderContribution, ANYWHERE, isBodyEnd, sequenceSlots } from './chunk-CI3I3I6T.js';
+import './chunk-T6DQT553.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-QKSWZEJH.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-QKSWZEJH.js';
+import { diagramScene, diagramPages, edgeIdOf, titleIdOf, groupLabelIdOf, nestGroups, LABEL_PLACEMENT, groupMinWidth, EDGE_DERIVE_PATH } from './chunk-43LDZ6L4.js';
+import { portOf, DEFAULT_GROUP_INSET, SIDE_TRACK_GAP, widenForMinWidth, portSitesOf, labelCenter, insetOf, rankGaps } from './chunk-IM6DHWZO.js';
+import { polygonFromPoints } from '@weasel-js/core/math';
+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';
+
+// src/effect/groupEdit.ts
+var groupsOf = (doc) => doc.pipeline.groups ?? [];
+function withGroups(doc, groups, boxes = doc.groupBoxes) {
+  const ids = new Set(groups.map((g) => g.id));
+  const kept = Object.entries(boxes ?? {}).filter(([id]) => ids.has(id));
+  const { groupBoxes: _was, ...rest } = doc;
+  return { ...rest, pipeline: { ...doc.pipeline, groups }, ...kept.length > 0 ? { groupBoxes: Object.fromEntries(kept) } : {} };
+}
+function pruneGroups(groups, gone, keep = () => false) {
+  const out = new Set(gone);
+  let left = [...groups];
+  for (; ; ) {
+    const emptied = left.filter((g) => g.members.length > 0 && g.members.every((m) => out.has(m)) && !keep(g.id));
+    if (emptied.length === 0) return left.map((g) => ({ ...g, members: g.members.filter((m) => !out.has(m)) }));
+    for (const g of emptied) out.add(g.id);
+    left = left.filter((g) => !emptied.includes(g));
+  }
+}
+var parentOf = (groups, id) => groups.find((g) => g.members.includes(id));
+function nextGroupId(p) {
+  const used = /* @__PURE__ */ new Set([...p.stages.map((s) => s.id), ...(p.groups ?? []).map((g) => g.id)]);
+  if (!used.has("group")) return "group";
+  let n = 2;
+  while (used.has(`group-${n}`)) n++;
+  return `group-${n}`;
+}
+function groupStages(doc, ids, label) {
+  if (ids.length === 0) return doc;
+  const id = nextGroupId(doc.pipeline);
+  const groups = groupsOf(doc);
+  const parents = new Set(ids.map((m) => parentOf(groups, m)?.id));
+  const shared = parents.size === 1 ? [...parents][0] : void 0;
+  const taken = new Set(ids);
+  const made = { id, ...label ? { label } : {}, members: [...ids] };
+  const rest = shared === void 0 ? pruneGroups(groups, taken) : groups.map((g) => {
+    if (g.id !== shared) return g;
+    const at = g.members.findIndex((m) => taken.has(m));
+    const members = g.members.filter((m) => !taken.has(m));
+    members.splice(at, 0, id);
+    return { ...g, members };
+  });
+  return withGroups(doc, [...rest, made]);
+}
+function ungroup(doc, id) {
+  const groups = groupsOf(doc);
+  const gone = groups.find((g) => g.id === id);
+  if (gone === void 0) return doc;
+  const kept = groups.filter((g) => g.id !== id).map((g) => g.members.includes(id) ? { ...g, members: g.members.flatMap((m) => m === id ? gone.members : [m]) } : g);
+  return withGroups(doc, kept);
+}
+function renameGroup(doc, id, label) {
+  return withGroups(doc, groupsOf(doc).map((g) => {
+    if (g.id !== id) return g;
+    const { label: _was, ...rest } = g;
+    return label === "" ? rest : { ...rest, label };
+  }));
+}
+function within(groups, inner, outer) {
+  for (let at = inner; at !== void 0; at = parentOf(groups, at)?.id) if (at === outer) return true;
+  return false;
+}
+function moveToGroup(doc, ids, group) {
+  const groups = groupsOf(doc);
+  if (group !== null && (!groups.some((g) => g.id === group) || ids.some((id) => within(groups, group, id)))) return doc;
+  const moving = new Set(ids);
+  const boxed = (id) => id === group || doc.groupBoxes?.[id] !== void 0;
+  const left = pruneGroups(groups, moving, boxed);
+  const placed = group === null ? left : left.map((g) => g.id === group ? { ...g, members: [...g.members, ...ids] } : g);
+  return withGroups(doc, placed);
+}
+function setGroupBox(doc, id, box) {
+  const { [id]: _was, ...rest } = doc.groupBoxes ?? {};
+  return withGroups(doc, groupsOf(doc), box === null ? rest : { ...rest, [id]: { x: box.x, y: box.y, width: box.width, height: box.height } });
+}
+function groupContents(doc, id) {
+  const groups = new Map(groupsOf(doc).map((g) => [g.id, g]));
+  const out = { stages: /* @__PURE__ */ new Set(), groups: /* @__PURE__ */ new Set() };
+  const visit = (g) => {
+    if (out.groups.has(g)) return;
+    out.groups.add(g);
+    for (const m of groups.get(g)?.members ?? []) {
+      if (groups.has(m)) visit(m);
+      else out.stages.add(m);
+    }
+  };
+  if (groups.has(id)) visit(id);
+  return out;
+}
+function moveGroup(doc, id, offset) {
+  const { stages, groups } = groupContents(doc, id);
+  const by = (p) => ({ x: p.x + offset.x, y: p.y + offset.y });
+  const places = Object.fromEntries(Object.entries(doc.places).map(([s, p]) => [s, stages.has(s) ? by(p) : p]));
+  const inside = new Set(doc.pipeline.wires.flatMap((w) => w.id !== void 0 && stages.has(w.from.stage) && stages.has(w.to.stage) ? [w.id] : []));
+  const routes = doc.routes === void 0 ? void 0 : Object.fromEntries(Object.entries(doc.routes).map(([w, r]) => [w, inside.has(w) ? r.map(by) : r]));
+  const boxes = doc.groupBoxes === void 0 ? void 0 : Object.fromEntries(Object.entries(doc.groupBoxes).map(([g, b]) => [g, groups.has(g) ? { ...b, ...by(b) } : b]));
+  return {
+    ...doc,
+    places,
+    ...routes !== void 0 ? { routes } : {},
+    ...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 });
+function withLookRoutes(doc, routes) {
+  const kept = Object.fromEntries(Object.entries(routes).filter(([, r]) => r !== void 0 && Object.keys(r).length > 0));
+  const { lookRoutes: _was, ...rest } = doc;
+  return Object.keys(kept).length > 0 ? { ...rest, lookRoutes: kept } : rest;
+}
+function setLookRoute(doc, look, wire, waypoints, ends) {
+  const { [wire]: _was, ...rest } = doc.lookRoutes?.[look] ?? {};
+  const route = { waypoints: waypoints.map(copy), ends: [copy(ends[0]), copy(ends[1])] };
+  return withLookRoutes(doc, { ...doc.lookRoutes, [look]: waypoints.length > 0 ? { ...rest, [wire]: route } : rest });
+}
+function pruneLookRoutes(doc, rewired = []) {
+  if (doc.lookRoutes === void 0) return doc;
+  const gone = new Set(rewired);
+  const ids = new Set(doc.pipeline.wires.flatMap((w) => w.id === void 0 || gone.has(w.id) ? [] : [w.id]));
+  const keep = (r) => r === void 0 ? void 0 : Object.fromEntries(Object.entries(r).filter(([id]) => ids.has(id)));
+  return withLookRoutes(doc, { rack: keep(doc.lookRoutes.rack), lanes: keep(doc.lookRoutes.lanes) });
+}
+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 ?? "leaf", data: n.data }, n.pose, port)?.point;
+  };
+  const a = point(from, trait?.from?.port);
+  const b = point(to, trait?.to?.port);
+  return a === void 0 || b === void 0 ? void 0 : [a, b];
+}
+function applyLookRoutes(specs, doc, look, built) {
+  const routes = look === "nodeGraph" ? void 0 : doc.lookRoutes?.[look];
+  if (routes === void 0) return specs;
+  let held = false;
+  const edges = built.data.edges.map((e) => {
+    const id = edgeIdOf(e);
+    const wire = built.wireOf(id);
+    const route = wire === void 0 ? void 0 : routes[wire];
+    const ends = route === void 0 ? void 0 : wireEnds(specs, id);
+    if (route === void 0 || ends === void 0 || !near(ends[0], route.ends[0]) || !near(ends[1], route.ends[1])) return e;
+    held = true;
+    return { ...e, waypoints: route.waypoints };
+  });
+  return held ? diagramScene({ ...built.data, edges }, built.scene) : specs;
+}
+
+// src/effect/edit.ts
+var withPipeline = (doc, pipeline) => ({
+  ...doc,
+  pipeline: { ...doc.pipeline, ...pipeline }
+});
+function nextStageId(p, base) {
+  const used = new Set(p.stages.map((s) => s.id));
+  if (!used.has(base)) return base;
+  let n = 2;
+  while (used.has(`${base}-${n}`)) n++;
+  return `${base}-${n}`;
+}
+function nextWireId(p) {
+  const used = new Set(p.wires.map((w) => w.id));
+  let n = 1;
+  while (used.has(`w${n}`)) n++;
+  return `w${n}`;
+}
+function addStage(doc, stage, at) {
+  const next = withPipeline(doc, { stages: [...doc.pipeline.stages, stage] });
+  return at ? { ...next, places: { ...doc.places, [stage.id]: { x: at.x, y: at.y } } } : next;
+}
+function removeStages(doc, ids) {
+  const gone = new Set(ids);
+  const { groups } = doc.pipeline;
+  const wires = doc.pipeline.wires.filter((w) => !gone.has(w.from.stage) && !gone.has(w.to.stage));
+  const kept = groups ? pruneGroups(groups, gone) : void 0;
+  const left = new Set(kept?.map((g) => g.id));
+  const boxes = doc.groupBoxes === void 0 ? void 0 : Object.entries(doc.groupBoxes).filter(([id]) => left.has(id));
+  const { groupBoxes: _was, ...rest } = doc;
+  return pruneRoutes({
+    ...rest,
+    pipeline: {
+      ...doc.pipeline,
+      stages: doc.pipeline.stages.filter((s) => !gone.has(s.id)),
+      wires,
+      ...kept ? { groups: kept } : {}
+    },
+    places: Object.fromEntries(Object.entries(doc.places).filter(([id]) => !gone.has(id))),
+    ...boxes !== void 0 && boxes.length > 0 ? { groupBoxes: Object.fromEntries(boxes) } : {}
+  });
+}
+function pruneRoutes(doc, rewired = []) {
+  const pruned = 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 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 };
+}
+function addWire(doc, wire) {
+  const w = wire.id === void 0 ? { ...wire, id: nextWireId(doc.pipeline) } : wire;
+  return withPipeline(doc, { wires: [...doc.pipeline.wires, w] });
+}
+function removeWires(doc, ids) {
+  const gone = new Set(ids);
+  return pruneRoutes(withPipeline(doc, { wires: doc.pipeline.wires.filter((w) => w.id === void 0 || !gone.has(w.id)) }));
+}
+function reconnectWire(doc, id, end, to) {
+  return withPipeline(doc, {
+    wires: doc.pipeline.wires.map((w) => w.id === id ? { ...w, [end]: { stage: to.stage, port: to.port } } : w)
+  });
+}
+var addressed = (p, key) => (p.id ?? p.label) === key;
+function setParam(doc, stage, param2, control) {
+  return withPipeline(doc, {
+    stages: doc.pipeline.stages.map(
+      (s) => s.id !== stage || !s.params ? s : { ...s, params: s.params.map((p) => addressed(p, param2) ? { ...p, control, value: formatParam(control) } : p) }
+    )
+  });
+}
+function moveStages(doc, moves) {
+  const places = { ...doc.places };
+  for (const m of moves) places[m.id] = { x: m.x, y: m.y };
+  return { ...doc, places };
+}
+function setLaneOrder(doc, order) {
+  return { ...doc, laneOrder: [...order] };
+}
+function ensureWireIds(doc) {
+  if (doc.pipeline.wires.every((w) => w.id !== void 0)) return doc;
+  const used = new Set(doc.pipeline.wires.map((w) => w.id));
+  let n = 1;
+  const wires = doc.pipeline.wires.map((w) => {
+    if (w.id !== void 0) return w;
+    while (used.has(`w${n}`)) n++;
+    const id = `w${n}`;
+    used.add(id);
+    return { ...w, id };
+  });
+  return withPipeline(doc, { wires });
+}
+function canWire(p, from, to) {
+  if (from.stage === to.stage) return false;
+  const out = p.stages.find((s) => s.id === from.stage)?.outputs?.find((x) => x.id === from.port);
+  const inn = p.stages.find((s) => s.id === to.stage)?.inputs?.find((x) => x.id === to.port);
+  return out !== void 0 && inn !== void 0 && out.type === inn.type;
+}
+
+// src/effect/mainChain.ts
+function mainChain(pipeline) {
+  const next = /* @__PURE__ */ new Map();
+  for (const d of drawableWires(pipeline)) {
+    if (isControl(pipeline, d.type)) continue;
+    next.set(d.wire.from.stage, [...next.get(d.wire.from.stage) ?? [], d.wire.to.stage]);
+  }
+  const best = /* @__PURE__ */ new Map();
+  const walking = /* @__PURE__ */ new Set();
+  const from = (id) => {
+    const known = best.get(id);
+    if (known !== void 0) return known;
+    if (walking.has(id)) return [];
+    walking.add(id);
+    let tail = [];
+    for (const to of next.get(id) ?? []) {
+      const path2 = from(to);
+      if (path2.length > tail.length && !path2.includes(id)) tail = path2;
+    }
+    walking.delete(id);
+    const path = [id, ...tail];
+    best.set(id, path);
+    return path;
+  };
+  let longest = [];
+  for (const stage of uniqueStages(pipeline)) {
+    const path = from(stage.id);
+    if (path.length > longest.length) longest = path;
+  }
+  return longest;
+}
+function skipDecisions(pipeline, line) {
+  const wires = drawableWires(pipeline);
+  const stages = new Map(uniqueStages(pipeline).map((s) => [s.id, s]));
+  const out = [];
+  line.forEach((id, i) => {
+    const decision = stages.get(id);
+    if (decision === void 0 || kindOf(decision) !== "decision" || i === 0) return;
+    if ((decision.inputs ?? []).length !== 1 || (decision.outputs ?? []).length !== 2) return;
+    const entering = wires.filter((d) => d.wire.to.stage === id);
+    const leaving = wires.filter((d) => d.wire.from.stage === id);
+    if (entering.length !== 1 || leaving.length !== 2 || entering[0].wire.from.stage !== line[i - 1]) return;
+    const through = leaving.find((d) => d.wire.to.stage === line[i + 1]);
+    const skip = leaving.find((d) => d !== through && line.indexOf(d.wire.to.stage) > i + 1);
+    const ordinary = (s) => s !== void 0 && kindOf(s) !== "decision";
+    if (!ordinary(stages.get(line[i - 1])) || !ordinary(through?.toStage) || !ordinary(skip?.toStage)) return;
+    if (through !== void 0 && skip !== void 0) out.push({ decision, into: entering[0], through, skip });
+  });
+  return out;
+}
+
+// src/effect/chainEdit.ts
+function chainLinks(pipeline, chain) {
+  const at = new Map(chain.map((id, i) => [id, i]));
+  const mainIn = /* @__PURE__ */ new Map();
+  const mainOut = /* @__PURE__ */ new Map();
+  const between2 = Array.from({ length: Math.max(0, chain.length - 1) }, () => void 0);
+  for (const d of drawableWires(pipeline)) {
+    if (isControl(pipeline, d.type)) continue;
+    const a = at.get(d.wire.from.stage);
+    if (a === void 0 || at.get(d.wire.to.stage) !== a + 1 || between2[a] !== void 0) continue;
+    between2[a] = d.index;
+    mainOut.set(d.wire.from.stage, d.wire.from.port);
+    mainIn.set(d.wire.to.stage, d.wire.to.port);
+  }
+  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);
+}
+function moveRunInChain(doc, first, last, to) {
+  const p = doc.pipeline;
+  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 { 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;
+  const wAB = to > 0 && to < chain.length ? between2[to - 1] : void 0;
+  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 made = [];
+  const prev = chain[i - 1];
+  const next = chain[j + 1];
+  if (prev !== void 0 && next !== void 0) made.push({ reuse: wIn, from: p.wires[wIn].from, to: p.wires[wOut].to });
+  const a = chain[to - 1];
+  const b = chain[to];
+  const sIn = mainIn.get(first) ?? pick(first, "inputs");
+  const sOut = mainOut.get(last) ?? pick(last, "outputs");
+  if (a !== void 0) {
+    const aOut = wAB !== void 0 ? p.wires[wAB].from.port : mainOut.get(a) ?? pick(a, "outputs", typeOf(first, sIn));
+    if (aOut === void 0 || sIn === void 0) return null;
+    made.push({ reuse: wAB, from: { stage: a, port: aOut }, to: { stage: first, port: sIn } });
+  }
+  if (b !== void 0) {
+    const bIn = wAB !== void 0 ? p.wires[wAB].to.port : mainIn.get(b) ?? pick(b, "inputs", typeOf(last, sOut));
+    if (bIn === void 0 || sOut === void 0) return null;
+    made.push({ reuse: wOut, from: { stage: last, port: sOut }, to: { stage: b, port: bIn } });
+  }
+  if (made.some((m) => !canWire(p, m.from, m.to) || !free(m.to))) return null;
+  if (new Set(made.map((m) => `${m.to.stage}\0${m.to.port}`)).size !== made.length) return null;
+  const wires = p.wires.flatMap((w, k) => {
+    if (!gone.has(k)) return [w];
+    const m = made.find((x) => x.reuse === k);
+    return m === void 0 ? [] : [{ ...w, from: m.from, to: m.to }];
+  });
+  for (const m of made) {
+    if (m.reuse !== void 0) continue;
+    wires.push({ id: nextWireId({ ...p, wires }), from: m.from, to: m.to });
+  }
+  const pipeline = { ...p, wires };
+  const want = movedChain(chain, i, j, 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 ?? []));
+}
+function canMoveInChain(doc, stage, to) {
+  return moveInChain(doc, stage, to) !== null;
+}
+
+// src/effect/symbolParts.ts
+function along(side, i, n) {
+  const t = (i + 1) / (n + 1);
+  if (side === "left") return { u: 0, v: t };
+  if (side === "right") return { u: 1, v: t };
+  return side === "top" ? { u: t, v: 0 } : { u: t, v: 1 };
+}
+var spread = (ports, side) => ports.map((p, i) => ({ id: p.id, type: p.type, at: along(side, i, ports.length) }));
+function alongLine(points, t) {
+  const lengths = points.slice(1).map((p, i) => Math.hypot(p[0] - points[i][0], p[1] - points[i][1]));
+  let left = t * lengths.reduce((a, b) => a + b, 0);
+  for (const [i, len] of lengths.entries()) {
+    if (left <= len || i === lengths.length - 1) {
+      const k = len === 0 ? 0 : Math.min(left / len, 1);
+      const [a, b] = [points[i], points[i + 1]];
+      return { u: a[0] + (b[0] - a[0]) * k, v: a[1] + (b[1] - a[1]) * k };
+    }
+    left -= len;
+  }
+  return { u: points[0][0], v: points[0][1] };
+}
+var placeAlong = (sides) => (ports, side) => ports.map((p, i) => ({ id: p.id, type: p.type, at: alongLine(sides[side], (i + 1) / (ports.length + 1)) }));
+function inputs(stage, pipeline, options, steer, place3 = spread) {
+  const all = stage.inputs ?? [];
+  const steering = all.filter((p) => isControl(pipeline, p.type) || p.id === steer && all.length > 1);
+  const side = options?.controlSide === "bottom" ? "bottom" : "top";
+  return [...place3(all.filter((p) => !steering.includes(p)), "left"), ...place3(steering, side)];
+}
+var title = (stage, options, gap = 4) => options?.controlSide === "bottom" ? { text: stage.title, at: { u: 0.5, v: 0 }, self: { u: 0.5, v: 1 }, offset: { x: 0, y: -gap } } : { text: stage.title, at: { u: 0.5, v: 1 }, self: { u: 0.5, v: 0 }, offset: { x: 0, y: gap } };
+var DIAMOND_SIDES = placeAlong({
+  left: [[0, 0], [0, 1]],
+  top: [[0.5, 0], [0.5, 0]],
+  right: [[1, 0], [1, 1]],
+  bottom: [[0, 0.5], [0.5, 1]]
+});
+var diamond = (stage, pipeline, options) => {
+  const exits = stage.outputs ?? [];
+  const ins = inputs(stage, pipeline, options, void 0, options?.controlSide === "bottom" ? DIAMOND_SIDES : spread);
+  const topFree = !ins.some((p) => p.at.v === 0);
+  const out = exits.length === 2 ? [
+    { id: exits[0].id, type: exits[0].type, at: { u: 1, v: 0.5 } },
+    { id: exits[1].id, type: exits[1].type, at: { u: 0.5, v: 1 }, ...topFree ? { sites: [{ u: 0.5, v: 0 }] } : {} }
+  ] : spread(exits, "right");
+  return { outline: "diamond", lines: [stage.title], ports: [...ins, ...out] };
+};
+var BAND_TINTS = ["#c58bff", "#6fb3ff", "#5ad07f", "#f2c14e"];
+var styleOf = (stage, options) => options?.style ?? stageStyle(stage);
+var tintsOf = (stage, options) => options?.tints ?? (stage.bypassed === true ? [styleOf(stage, options).stroke] : BAND_TINTS);
+var canBand = (stage) => stage.split !== void 0 && splitProblem(stage) === null;
+var twoExits = (stage) => (stage.outputs ?? []).length === 2;
+var bandExits = (exits) => exits.map((p, i) => ({ id: p.id, type: p.type, at: { u: 1, v: 1 - (i + 0.5) / exits.length } }));
+var cutLabels = (cuts, n) => cuts.map((cut, k) => ({
+  text: String(cut),
+  at: { u: 0, v: 1 - (k + 1) / n },
+  self: { u: 1, v: 0.5 },
+  offset: { x: -10, y: 0 }
+}));
+var dot = (cx, cy, r) => `M${cx - r} ${cy} A${r} ${r} 0 1 0 ${cx + r} ${cy} A${r} ${r} 0 1 0 ${cx - r} ${cy} Z`;
+
+// src/effect/glyphs.ts
+var outlineOf = (points) => polygonFromPoints(points.map(([x, y]) => ({ x, y })));
+var POINT = 0.2;
+var onHexagon = placeAlong({
+  left: [[POINT, 0], [0, 0.5], [POINT, 1]],
+  right: [[1 - POINT, 0], [1, 0.5], [1 - POINT, 1]],
+  top: [[POINT, 0], [1 - POINT, 0]],
+  bottom: [[POINT, 1], [1 - POINT, 1]]
+});
+var hexagon = (stage, pipeline, options) => ({
+  outline: "hexagon",
+  lines: [stage.title],
+  ports: [...inputs(stage, pipeline, options, void 0, onHexagon), ...onHexagon(stage.outputs ?? [], "right")]
+});
+var step = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const level = (i) => 1 - (i + 0.5) / n;
+  const riser = (k) => 0.1 + 0.8 * (k + 1) / n;
+  let stairs = `M0 ${level(0)}`;
+  for (let k = 0; k < n - 1; k++) stairs += ` H${riser(k)} V${level(k + 1)}`;
+  const marks = [{ d: `${stairs} H1`, stroke: ink, strokeWidth: 2 }];
+  for (let i = 0; i < n - 1; i++) marks.push({ d: `M${riser(i)} ${level(i)} H1`, stroke: ink, dash: [2, 2], opacity: 0.5 });
+  stage.split.at.forEach((cut, k) => marks.push({
+    text: String(cut),
+    at: { u: riser(k), v: 1 },
+    self: { u: 0.5, v: 0 },
+    offset: { x: 0, y: 3 },
+    style: { fontSize: 10 }
+  }));
+  marks.push(title(stage, options, 18));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: Math.max(48, 24 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var TRIANGLE = [[0, 0], [1, 0.5], [0, 1]];
+var COMPARATOR = outlineOf(TRIANGLE);
+var EXIT_AT = 0.7;
+var onTriangle = placeAlong({
+  left: [[0, 0], [0, 1]],
+  right: [[1, 0.5], [1, 0.5]],
+  // The first part of each slanted edge, short of the exits.
+  top: [[0, 0], [0.6, 0.3]],
+  bottom: [[0, 1], [0.6, 0.7]]
+});
+var comparator = (stage, pipeline, options) => {
+  if (!twoExits(stage)) return diamond(stage, pipeline, options);
+  const outs = stage.outputs;
+  const banded = canBand(stage);
+  const [upper, lower] = banded ? [outs[1], outs[0]] : [outs[0], outs[1]];
+  const ins = inputs(stage, pipeline, options, void 0, onTriangle);
+  const signal = ins.filter((p) => p.at.u === 0);
+  const ink = styleOf(stage, options).text;
+  const marks = [];
+  if (canBand(stage)) marks.push({ text: String(stage.split.at[0]), at: { u: 0.35, v: 0.5 }, self: { u: 0.5, v: 0.5 }, color: ink });
+  else if (signal.length === 2) {
+    signal.forEach((p, i) => marks.push({ text: i === 0 ? "+" : "\u2212", at: p.at, self: { u: 0, v: 0.5 }, offset: { x: 4, y: 0 }, color: ink }));
+  }
+  marks.push(title(stage, options));
+  const exit = (p, v) => ({ id: p.id, type: p.type, at: { u: EXIT_AT, v } });
+  return {
+    outline: COMPARATOR,
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: 56,
+    ports: [...ins, exit(upper, EXIT_AT / 2), exit(lower, 1 - EXIT_AT / 2)],
+    marks
+  };
+};
+function response(i, n) {
+  const lo = 1 - i / n;
+  const hi = 1 - (i + 1) / n;
+  const skirt = 0.25 / n;
+  const rise = i === 0 ? "M0.75 1" : `M0.15 ${lo + skirt} C0.15 ${lo} 0.75 ${lo} 0.75 ${lo - skirt}`;
+  const fall = i === n - 1 ? " V0" : ` V${hi + skirt} C0.75 ${hi} 0.15 ${hi} 0.15 ${hi - skirt}`;
+  return rise + fall;
+}
+var crossover = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const tints = tintsOf(stage, options);
+  const marks = [];
+  exits.forEach((_, i) => {
+    marks.push({ d: response(i, n), stroke: tints[i % tints.length], strokeWidth: 1.5 });
+    marks.push({ d: `M0.75 ${1 - (i + 0.5) / n} H1`, stroke: ink });
+  });
+  marks.push(...cutLabels(stage.split.at, n), title(stage, options));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: Math.max(56, 28 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var atPoint = (p) => [p, p];
+var onDot = placeAlong({ left: atPoint([0, 0.5]), right: atPoint([1, 0.5]), top: atPoint([0.5, 0]), bottom: atPoint([0.5, 1]) });
+var FORK = 12;
+var fork = (stage, pipeline, options) => ({
+  outline: "stadium",
+  lines: [],
+  padding: 0,
+  width: FORK,
+  height: FORK,
+  ports: [...inputs(stage, pipeline, options, void 0, onDot), ...onDot(stage.outputs ?? [], "right")],
+  marks: [{ d: dot(0.5, 0.5, 0.5), fill: styleOf(stage, options).text }, title(stage, options)]
+});
+
+// src/effect/symbols.ts
+var bar = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const cuts = stage.split.at;
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const tints = tintsOf(stage, options);
+  const marks = [];
+  exits.forEach((_, i) => {
+    const top = 1 - (i + 1) / n;
+    marks.push({ d: `M0 ${top} H1 V${1 - i / n} H0 Z`, fill: tints[i % tints.length], opacity: 0.3 });
+  });
+  cuts.forEach((_, k) => marks.push({ d: `M-0.25 ${1 - (k + 1) / n} H1.25`, stroke: ink }));
+  marks.push(...cutLabels(cuts, n), title(stage, options));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 24,
+    height: Math.max(72, 30 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var demux = (stage, pipeline, options) => {
+  const exits = stage.outputs ?? [];
+  return {
+    outline: "trapezoid",
+    lines: [],
+    padding: 0,
+    width: 44,
+    height: Math.max(64, 28 * exits.length),
+    ports: [...inputs(stage, pipeline, options), ...spread(exits, "right")],
+    marks: [title(stage, 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([
+  [LEVER_FIRST, "M0.2 0.5 L0.78 0.73"],
+  [CONTACT_FIRST, CONTACT_SECOND],
+  [CONTACT_SECOND, CONTACT_FIRST]
+]);
+var thrownToSecond = (d) => THROWN_SECOND.get(d);
+var switchSymbol = (stage, pipeline, options) => {
+  if (!twoExits(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const ink = styleOf(stage, options).text;
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 48,
+    height: 48,
+    ports: [
+      ...inputs(stage, pipeline, options),
+      ...exits.map((p, i) => ({ id: p.id, type: p.type, at: { u: 1, v: i === 0 ? 0.25 : 0.75 } }))
+    ],
+    marks: [
+      { d: "M0 0.5 H0.2 M0.8 0.25 H1 M0.8 0.75 H1", stroke: ink },
+      { d: LEVER_FIRST, stroke: ink, strokeWidth: 2.5 },
+      { d: dot(0.2, 0.5, 0.07), fill: ink },
+      { d: CONTACT_FIRST, fill: ink },
+      { d: CONTACT_SECOND, stroke: ink },
+      title(stage, options)
+    ]
+  };
+};
+var BRANCH_SYMBOLS = Object.freeze({
+  diamond,
+  bar,
+  demux,
+  switch: switchSymbol,
+  hexagon,
+  step,
+  comparator,
+  crossover,
+  fork
+});
+var NEEDS = {
+  bar: canBand,
+  step: canBand,
+  crossover: canBand,
+  switch: twoExits,
+  comparator: twoExits
+};
+function symbolNameFor(stage, choice = "auto") {
+  const want = choice === "auto" ? canBand(stage) ? "bar" : "diamond" : choice;
+  return NEEDS[want]?.(stage) === false ? "diamond" : want;
+}
+function branchNode(stage, pipeline, choice = "auto", options) {
+  return BRANCH_SYMBOLS[symbolNameFor(stage, choice)](stage, pipeline, options);
+}
+
+// src/effect/compact.ts
+var COMPACT_PADDING = 4;
+function sidePorts(stage) {
+  return [
+    ...(stage.inputs ?? []).map((p) => ({ id: p.id, at: { u: 0, v: 0.5 } })),
+    ...(stage.outputs ?? []).map((p) => ({ id: p.id, at: { u: 1, v: 0.5 } }))
+  ];
+}
+var untyped = (ports) => (ports ?? []).map(({ type: _type, ...port }) => port);
+function nodeOf(stage, pipeline, branch, theme) {
+  if (kindOf(stage) !== "decision") {
+    return { ...boxNode(stage, { showParams: false, rowPorts: false, ports: sidePorts(stage) }), padding: COMPACT_PADDING };
+  }
+  const symbol = branchNode(stage, pipeline, branch, { style: stageStyle(stage, theme) });
+  return { id: stage.id, ...symbol, ports: untyped(symbol.ports), padding: symbol.padding ?? COMPACT_PADDING };
+}
+function lines(pipeline) {
+  const by = /* @__PURE__ */ new Map();
+  for (const d of drawableWires(pipeline)) {
+    const exit = kindOf(d.fromStage) === "decision" ? d.wire.from.port : "";
+    const key = JSON.stringify([d.wire.from.stage, exit, d.wire.to.stage]);
+    by.set(key, [...by.get(key) ?? [], d]);
+  }
+  return [...by.values()];
+}
+var compact = (pipeline, options = {}) => {
+  const theme = options.theme ?? LOOK_THEME;
+  const color = typeColors(pipeline, options.colors, theme.series);
+  const stages = uniqueStages(pipeline);
+  const nodes = stages.map((stage) => nodeOf(stage, pipeline, options.branch ?? "hexagon", theme));
+  const edges = lines(pipeline).map((line) => {
+    const first = line.find((d) => !isControl(pipeline, d.type)) ?? line[0];
+    return {
+      edge: wireEdge(first.wire.from, first.wire.to, exitLabel(first)),
+      style: wireStyle(color(first.type), line.every((d) => isControl(pipeline, d.type)), line.some((d) => d.problem))
+    };
+  });
+  return {
+    data: { nodes, edges: edges.map((e) => e.edge), groups: uniqueGroups(pipeline) },
+    scene: {
+      layout: "layered",
+      layoutOptions: { direction: "right", nodeGap: options.nodeGap ?? 16, rankGap: options.rankGap ?? 48 },
+      router: options.router ?? "bezier",
+      ...sceneStyles(stages, edges, theme)
+    },
+    color
+  };
+};
+
+// src/effect/nodeGraph.ts
+var nodeGraph = (pipeline, options = {}) => {
+  const theme = options.theme ?? LOOK_THEME;
+  const color = typeColors(pipeline, options.colors, theme.series);
+  const stages = uniqueStages(pipeline);
+  const nodes = stages.map((stage) => kindOf(stage) === "decision" ? { id: stage.id, ...branchNode(stage, pipeline, options.branch, { style: stageStyle(stage, theme) }) } : boxNode(stage, { showParams: options.showParams !== false, rowPorts: true, ports: [], run: options }));
+  const edges = wireEdges(pipeline, color);
+  return {
+    data: { nodes, edges: edges.map((e) => e.edge), groups: uniqueGroups(pipeline) },
+    scene: {
+      layout: "layered",
+      layoutOptions: {
+        direction: "right",
+        ...options.nodeGap !== void 0 ? { nodeGap: options.nodeGap } : {},
+        ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
+      },
+      router: options.router ?? "bezier",
+      ...sceneStyles(stages, edges, theme)
+    },
+    color
+  };
+};
+function useReleaseReplaced(run) {
+  const shown = useRef(/* @__PURE__ */ new Set());
+  useEffect(() => {
+    const now = new Set(Object.values(run?.stages ?? {}).flatMap((s) => Object.values(s.previews ?? {})));
+    for (const old of shown.current) if (!now.has(old)) releaseImageSource(old);
+    shown.current = now;
+  }, [run]);
+  useEffect(() => () => {
+    for (const old of shown.current) releaseImageSource(old);
+    shown.current = /* @__PURE__ */ new Set();
+  }, []);
+}
+var DIM = 0.3;
+var AT_COLOR = "#ffc94d";
+var AT_WIDTH = 3;
+var COST_GAP = 2;
+var COST_SCALE = 0.8;
+function paintRun(pipeline, specs, run, exits = /* @__PURE__ */ new Map()) {
+  if (run === void 0) return [...specs];
+  const stages = new Map(uniqueStages(pipeline).map((s) => [s.id, s]));
+  const unreached = unreachedStages(pipeline, run);
+  const owner = ownerOf(stages);
+  const passed = /* @__PURE__ */ new Set();
+  for (const spec of specs) {
+    const ends = wireEnds2(spec);
+    if (ends === null) continue;
+    const exit = exits.get(spec.id) ?? { stage: ends.from, port: ends.fromPort };
+    const taken = run.stages[exit.stage]?.taken;
+    if (unreached.has(ends.from) || unreached.has(ends.to) || unreached.has(exit.stage) || taken !== void 0 && exit.port !== taken) {
+      passed.add(spec.id);
+    }
+  }
+  const values = /* @__PURE__ */ new Map();
+  const previews = /* @__PURE__ */ new Map();
+  for (const [id, stage] of stages) {
+    for (const p of shownPorts(stage)) {
+      values.set(`${id}/${valueRowId(p.id)}`, `${p.label ?? p.id}: ${run.stages[id]?.values?.[p.id] ?? NO_VALUE}`);
+      const preview = run.stages[id]?.previews?.[p.id];
+      if (preview !== void 0) previews.set(`${id}/${previewRowId(p.id)}`, preview);
+    }
+  }
+  const thrownSecond = new Set([...stages.values()].filter((s) => {
+    const outs = s.outputs ?? [];
+    return outs.length === 2 && run.stages[s.id]?.taken === outs[1].id;
+  }).map((s) => s.id));
+  const out = specs.map((spec) => {
+    const id = spec.id;
+    let next = spec;
+    const text = values.get(id);
+    if (text !== void 0 && spec.data.text !== text) next = { ...next, data: { ...next.data, text } };
+    const preview = previews.get(id);
+    if (preview !== void 0) next = { ...next, data: { image: { src: bitmapSrc(preview) } } };
+    const stage = owner(spec);
+    if (stage !== void 0 && thrownSecond.has(stage)) next = thrown(next);
+    const dependsOn = spec.dependsOn;
+    const onWire = Array.isArray(dependsOn) && dependsOn.length === 1 && passed.has(dependsOn[0]);
+    if (stage !== void 0 && unreached.has(stage) || passed.has(id) || onWire) next = { ...next, data: dimmed(next.data) };
+    if (id === run.at && next.data.stroke !== void 0) {
+      next = { ...next, data: { ...next.data, stroke: { paint: { color: AT_COLOR }, width: AT_WIDTH } } };
+    }
+    return next;
+  });
+  for (const spec of specs) {
+    const id = spec.id;
+    const entry = stages.has(id) ? run.stages[id] : void 0;
+    const note = entry?.error ?? (entry?.cost !== void 0 ? costText(entry.cost) : void 0);
+    if (note !== void 0) out.push(costSpec(spec, specs.filter((s) => owner(s) === id), stages.get(id), note, entry?.error !== void 0));
+  }
+  return out;
+}
+function unreachedStages(pipeline, run) {
+  if (run === void 0) return /* @__PURE__ */ new Set();
+  return new Set(uniqueStages(pipeline).map((s) => s.id).filter((id) => run.stages[id] === void 0));
+}
+function ownerOf(stages) {
+  return (spec) => {
+    const id = spec.id;
+    if (stages.has(id)) return id;
+    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;
+  };
+}
+function wireEnds2(spec) {
+  const trait = spec.data?.diagram;
+  const deps = spec.dependsOn;
+  if (trait?.from === void 0 || trait.to === void 0 || !Array.isArray(deps) || deps.length !== 2) return null;
+  return { from: deps[0], to: deps[1], fromPort: trait.from.port };
+}
+function thrown(spec) {
+  const trait = spec.data.diagram;
+  const d = trait?.mark === void 0 ? void 0 : thrownToSecond(trait.mark.d);
+  return d === void 0 ? spec : { ...spec, data: { ...spec.data, diagram: { ...trait, mark: { d } } } };
+}
+function dimmed(data) {
+  const fade = (part) => {
+    const paint = part?.paint;
+    if (paint === void 0) return part;
+    return { ...part, paint: { ...paint, opacity: (paint.opacity ?? 1) * DIM } };
+  };
+  const d = data;
+  return {
+    ...data,
+    ...d.fill !== void 0 ? { fill: fade(d.fill) } : {},
+    ...d.stroke !== void 0 ? { stroke: fade(d.stroke) } : {}
+  };
+}
+function costSpec(stage, own, of, text, problem) {
+  const title2 = own.find((s) => s !== stage && s.data.text !== void 0);
+  const titleData = title2?.data ?? {};
+  const fontSize = Math.round((titleData.style?.fontSize ?? 12) * COST_SCALE);
+  const style = { fontFamily: titleData.style?.fontFamily ?? "sans-serif", fontSize };
+  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 top = Math.min(box.y, ...own.flatMap((s) => {
+    const p = s.pose;
+    return s !== stage && p !== void 0 && p.y + p.height <= box.y ? [p.y] : [];
+  }));
+  return {
+    id: `${stage.id}/cost`,
+    kind: "leaf",
+    layer: "main",
+    pickable: false,
+    pose: { x: box.x + box.width - width, y: top - height - COST_GAP, width, height },
+    data: { text, style, fill }
+  };
+}
+function costText(ms) {
+  if (ms >= 100) return `${Math.round(ms)} ms`;
+  return `${Number(ms.toPrecision(3))} ms`;
+}
+function useRunPortOptions(color, pipeline, run) {
+  const missed = JSON.stringify([...unreachedStages(pipeline, run)].sort());
+  return useMemo(() => {
+    const faded = new Set(JSON.parse(missed));
+    return {
+      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 } : {} } })
+    };
+  }, [color, missed]);
+}
+var EFFECT_MIN_SCALE = 0.5;
+var keys = /* @__PURE__ */ new WeakMap();
+var nextKey = 0;
+function keyOf(built) {
+  let key = keys.get(built);
+  if (key === void 0) {
+    key = nextKey++;
+    keys.set(built, key);
+  }
+  return key;
+}
+function contentOf(value) {
+  try {
+    return JSON.stringify(value) ?? null;
+  } catch {
+    return null;
+  }
+}
+function useSameContent(value) {
+  const [kept, setKept] = useState(() => ({ value, content: contentOf(value) }));
+  if (kept.value === value) return value;
+  const content = contentOf(value);
+  if (content !== null && content === kept.content) return kept.value;
+  setKept({ value, content });
+  return value;
+}
+function EffectChart({
+  pipeline: given,
+  run,
+  look,
+  options,
+  width,
+  height,
+  minScale = EFFECT_MIN_SCALE,
+  background,
+  selected,
+  onSelect,
+  onProblems,
+  className
+}) {
+  const pipeline = useSameContent(given);
+  const problems = useMemo(() => checkPipeline(pipeline), [pipeline]);
+  const onProblemsRef = useLatest(onProblems);
+  useEffect(() => {
+    onProblemsRef.current?.(problems);
+  }, [onProblemsRef, problems]);
+  const stageIds = useMemo(() => new Set(pipeline.stages.map((s) => s.id)), [pipeline]);
+  const built = useMemo(() => {
+    const drawn = (look ?? nodeGraph)(pipeline, options);
+    const specs = diagramScene(drawn.data, drawn.scene).map((s) => s.pickable === false || stageIds.has(s.id) ? s : { ...s, pickable: false });
+    return { specs, color: drawn.color, exits: drawn.exits };
+  }, [pipeline, look, options, stageIds]);
+  const portOptions = useRunPortOptions(built.color, pipeline, run);
+  const painted = useMemo(() => paintRun(pipeline, built.specs, run, built.exits), [pipeline, built, run]);
+  useReleaseReplaced(run);
+  return /* @__PURE__ */ jsx(
+    DiagramView,
+    {
+      specs: painted,
+      width,
+      height,
+      minScale,
+      ports: "show",
+      portOptions,
+      anchor: "start",
+      ...background !== void 0 ? { background } : {},
+      ...selected !== void 0 ? { selected } : {},
+      ...onSelect ? { onSelect: (id) => onSelect(id !== null && stageIds.has(id) ? id : null) } : {},
+      ...className !== void 0 ? { className } : {}
+    },
+    keyOf(built)
+  );
+}
+
+// src/effect/groupHandlers.ts
+var parentGroup = (doc, id) => doc.pipeline.groups?.find((g) => g.members.includes(id))?.id;
+function dragEdit(doc, built, reports, boxOf) {
+  let next = doc;
+  let resized = false;
+  let touched = false;
+  const carried = /* @__PURE__ */ new Set();
+  const reparent = (id, parent) => {
+    if (parent === void 0) return;
+    if (parent === null || built.groupOf(parent) !== void 0) next = moveToGroup(next, [id], parent);
+  };
+  const depth = (id) => {
+    let n = 0;
+    for (let at = parentGroup(doc, id); at !== void 0; at = parentGroup(doc, at)) n++;
+    return n;
+  };
+  for (const edit of [...reports.boxes].sort((a, b) => depth(a.id) - depth(b.id))) {
+    const group = built.groupOf(edit.id);
+    const was = boxOf(edit.id);
+    if (group === void 0 || was === void 0 || carried.has(group)) continue;
+    touched = true;
+    reparent(group, edit.parent);
+    if (edit.box.width === was.width && edit.box.height === was.height) {
+      next = moveGroup(next, group, { x: edit.box.x - was.x, y: edit.box.y - was.y });
+      const inside = groupContents(doc, group);
+      for (const id of [...inside.stages, ...inside.groups]) carried.add(id);
+    } else {
+      next = setGroupBox(next, group, edit.box);
+      resized = true;
+    }
+  }
+  const moves = reports.moves.filter((m) => built.stageOf(m.id) !== void 0 && !carried.has(m.id));
+  for (const m of moves) reparent(m.id, m.parent);
+  if (moves.length > 0) {
+    next = moveStages(next, moves.map(({ id, x, y }) => ({ id, x, y })));
+    touched = true;
+  }
+  return touched ? { doc: next, label: resized && moves.length === 0 ? "Resize group" : "Move" } : null;
+}
+
+// src/effect/editorHandlers.ts
+function orient(p, a, b) {
+  if (canWire(p, a, b)) return { from: a, to: 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));
+function wireFor(p, a, b, except) {
+  const wire = orient(p, a, b);
+  return wire !== null && !fed(p, 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 }]));
+  return { ...doc, places: { ...shown, ...doc.places } };
+}
+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]));
+}
+function editHandlers(now, unpick, rename = () => {
+}) {
+  const commit = (label, edit) => {
+    const { doc, built, onChange } = now();
+    const d = ensureWireIds(doc);
+    const next = edit(d, built);
+    if (next !== null) onChange(next, label);
+  };
+  const drag = { moves: [], boxes: [] };
+  let held = false;
+  const hold = () => {
+    if (held) return;
+    held = true;
+    queueMicrotask(() => {
+      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 out = dragEdit(pinShown(ensureWireIds(doc), specs), built, reports, (id) => boxes.get(id));
+      if (out !== null) onChange(out.doc, out.label);
+    });
+  };
+  const canConnect = (from, to, moving) => {
+    if (isBodyEnd(from) || isBodyEnd(to)) return false;
+    const { doc, built } = now();
+    const except = moving === void 0 ? void 0 : built.wireOf(moving.edge);
+    return wireFor(doc.pipeline, { stage: from.nodeId, port: from.id }, { stage: to.nodeId, port: to.id }, except) !== null;
+  };
+  return {
+    canConnect,
+    onConnect: (e) => commit("Connect", (d) => {
+      if (e.fromPort === void 0 || e.toPort === void 0) return null;
+      const wire = wireFor(d.pipeline, { stage: e.from, port: e.fromPort }, { stage: e.to, port: e.toPort });
+      return wire === null ? null : addWire(d, wire);
+    }),
+    onReconnect: (c) => commit("Reconnect", (d, b) => {
+      const id = b.wireOf(c.edge);
+      const wire = d.pipeline.wires.find((w) => w.id === id);
+      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;
+    }),
+    onEditRoute: (c) => commit("Edit route", (d, b) => {
+      const id = b.wireOf(c.edge);
+      const { look, specs } = now();
+      if (id === void 0) return null;
+      if (look === "nodeGraph") return setWireRoute(d, id, c.waypoints);
+      if (c.waypoints.length === 0) {
+        const was = d.lookRoutes?.[look]?.[id];
+        return was === void 0 ? null : setLookRoute(d, look, id, [], was.ends);
+      }
+      const ends = wireEnds(specs, c.edge);
+      return ends === void 0 ? null : setLookRoute(d, look, id, c.waypoints, ends);
+    }),
+    onDelete: (r) => commit("Delete", (d, b) => {
+      unpick();
+      const stages = r.nodes.flatMap((n) => b.stageOf(n) ?? []);
+      const wires = r.edges.flatMap((e) => b.wireOf(e) ?? []);
+      return stages.length === 0 && wires.length === 0 ? null : removeWires(removeStages(d, stages), wires);
+    }),
+    onMove: (moves) => {
+      drag.moves.push(...moves);
+      hold();
+    },
+    onEditContainer: (edit) => {
+      if (edit.kind === "title") {
+        const group = now().built.groupOf(edit.id);
+        if (group !== void 0) rename(group);
+      } else if (edit.kind === "box") {
+        drag.boxes.push(edit);
+        hold();
+      }
+    }
+  };
+}
+var isPart = (built, id) => built.stageOf(id) !== void 0 || built.groupOf(id) !== void 0;
+function useEditorPicks(built, given) {
+  const [stage, setStage] = useState(null);
+  const [group, setGroup] = useState(null);
+  const [edge, setEdge] = useState(null);
+  const latest = useLatest$1({ built, given });
+  const pick = useCallback((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.onSelectGroup?.(k ?? null);
+  }, [latest]);
+  const unpick = useCallback(() => setEdge(null), []);
+  const shownStage = given.selected !== void 0 ? given.selected : stage;
+  const shownGroup = given.selectedGroup !== void 0 ? given.selectedGroup : group;
+  const wire = edge === null || built.wireOf(edge) === void 0 ? null : edge;
+  const controlled = given.selected !== void 0 || given.selectedGroup !== void 0;
+  const live = (id) => id !== null && isPart(built, id) ? id : null;
+  const shown = controlled ? live(shownStage) ?? live(shownGroup) ?? wire : void 0;
+  return { pick, unpick, shown };
+}
+var FIELD_RULE = ":where([data-wzl-group-title]) { width: 16ch; font: inherit; font-weight: 700; text-align: center; }";
+var TOP = { side: "top", align: "center" };
+var adoptFieldRule = (el) => {
+  if (el === null) return;
+  adoptCssOnce(el, FIELD_RULE);
+  el.focus();
+  el.select();
+};
+function useGroupTitle(doc, look, renaming, setRenaming, onChange) {
+  const latest = useLatest$1({ doc, onChange });
+  const group = renaming === null ? void 0 : doc.pipeline.groups?.find((g) => g.id === renaming);
+  const id = group?.id;
+  const was = group?.label ?? "";
+  const over = id === void 0 ? void 0 : look === "nodeGraph" ? titleIdOf(id) : was ? groupLabelIdOf(id) : id;
+  return useMemo(() => {
+    if (id === void 0 || over === void 0) return null;
+    const done = (text) => {
+      setRenaming(null);
+      if (text !== null && text !== was) latest.current.onChange(renameGroup(latest.current.doc, id, text), "Rename group");
+    };
+    const placement = over === id ? TOP : "center";
+    return [{ target: over, placement, content: /* @__PURE__ */ jsx(GroupTitleField, { initial: was, onDone: done }, id) }];
+  }, [id, was, over, setRenaming, latest]);
+}
+function GroupTitleField({ initial, onDone }) {
+  const [text, setText] = useState(initial);
+  const [done, setDone] = useState(false);
+  const finish = (value) => {
+    if (done) return;
+    setDone(true);
+    onDone(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: adoptFieldRule,
+      "data-wzl-group-title": "",
+      "aria-label": "Group name",
+      value: text,
+      onChange: (e) => setText(e.target.value),
+      onKeyDown: (e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") finish(text.trim());
+        else if (e.key === "Escape") finish(null);
+      },
+      onBlur: () => finish(text.trim())
+    }
+  );
+}
+
+// src/effect/laneColumns.ts
+function laneColumns(stages, wires, spans, groups, titles = /* @__PURE__ */ new Map()) {
+  const order = new Map(stages.map((s, i) => [s.id, i]));
+  const nested = nestGroups(groups, (id) => order.has(id));
+  const byId = new Map(nested.map((g) => [g.id, g]));
+  const grouped = new Set(nested.flatMap((g) => g.members));
+  const first = (id) => Math.min(...(byId.get(id)?.members ?? [id]).map((m) => order.get(m)));
+  const itemsOf = (ids, depth) => [...ids].sort((a, b) => first(a) - first(b)).map((id) => {
+    const g = byId.get(id);
+    if (g === void 0) return { stages: [id] };
+    const inside = place(itemsOf(g.direct, depth + 1), wires, spans);
+    const minWidth = titles.has(g.id) ? groupMinWidth(titles.get(g.id), DEFAULT_GROUP_INSET) : 0;
+    const own = { group: g.id, first: 0, last: inside.width - 1, depth, minWidth };
+    return { stages: g.members, inner: { ...inside, blocks: [own, ...inside.blocks] } };
+  });
+  const top = [...stages.map((s) => s.id).filter((id) => !grouped.has(id)), ...nested.filter((g) => g.parent === void 0).map((g) => g.id)];
+  const { column, blocks } = place(itemsOf(top, 0), wires, spans);
+  return { column, blocks };
+}
+function place(items, wires, spans) {
+  const owner = /* @__PURE__ */ new Map();
+  items.forEach((item, k) => item.stages.forEach((id) => owner.set(id, k)));
+  const feeds = items.map(() => /* @__PURE__ */ new Set());
+  for (const { wire: { from, to } } of wires) {
+    const [a, b] = [owner.get(from.stage), owner.get(to.stage)];
+    if (a !== void 0 && b !== void 0 && a !== b) feeds[b].add(from.stage);
+  }
+  const column = /* @__PURE__ */ new Map();
+  const blocks = [];
+  const held = [];
+  const whole = /* @__PURE__ */ new Set();
+  const fits = (item, c) => {
+    if (item.inner === void 0) {
+      const span = spans.get(item.stages[0]);
+      return !whole.has(c) && !held[c]?.some(([lo, hi]) => lo <= span[1] && span[0] <= hi);
+    }
+    for (let j = c; j < c + item.inner.width; j++) if (whole.has(j) || (held[j]?.length ?? 0) > 0) return false;
+    return true;
+  };
+  const left = items.map((_, k) => k);
+  while (left.length > 0) {
+    const i = Math.max(0, left.findIndex((k2) => [...feeds[k2]].every((f) => column.has(f))));
+    const k = left.splice(i, 1)[0];
+    const item = items[k];
+    let c = Math.max(0, ...[...feeds[k]].flatMap((f) => column.has(f) ? [column.get(f) + 1] : []));
+    while (!fits(item, c)) c++;
+    if (item.inner === void 0) {
+      (held[c] ??= []).push(spans.get(item.stages[0]));
+      column.set(item.stages[0], c);
+      continue;
+    }
+    for (let j = c; j < c + item.inner.width; j++) whole.add(j);
+    for (const [id, at] of item.inner.column) column.set(id, c + at);
+    for (const b of item.inner.blocks) blocks.push({ ...b, first: b.first + c, last: b.last + c });
+  }
+  return { width: Math.max(0, ...column.values()) + (column.size > 0 ? 1 : 0), column, blocks };
+}
+function columnLefts(widths, column, blocks, gap, start, extent) {
+  const count = widths.length;
+  const room = blockRoom(widths.length, column, blocks, gap);
+  const leftsNow = (now) => {
+    let x = start;
+    return Array.from(widths, (wd, c) => {
+      x += now[c];
+      const at = x;
+      x += wd ?? 0;
+      return at;
+    });
+  };
+  const byId = new Map(blocks.map((b) => [b.group, b]));
+  const span = (group, now) => {
+    const b = byId.get(group);
+    const lefts2 = leftsNow(now);
+    let [lo, hi] = [Infinity, -Infinity];
+    for (const [id, c] of column) {
+      if (c >= b.first && c <= b.last) [lo, hi] = [Math.min(lo, lefts2[c] + extent(id).lo), Math.max(hi, lefts2[c] + extent(id).hi)];
+    }
+    return { lo, hi };
+  };
+  const inset = { lo: DEFAULT_GROUP_INSET, hi: DEFAULT_GROUP_INSET };
+  widenForMinWidth([...blocks].sort((p, q) => q.depth - p.depth).map((b) => ({
+    id: b.group,
+    minWidth: b.minWidth,
+    inset,
+    children: blocks.filter((k) => k.depth === b.depth + 1 && k.first >= b.first && k.last <= b.last).map((k) => k.group),
+    before: b.first,
+    after: b.last + 1
+  })), room, span);
+  const lefts = leftsNow(room);
+  return { lefts, end: count === 0 ? start : lefts[count - 1] + (widths[count - 1] ?? 0) + room[count] };
+}
+function blockRoom(count, column, blocks, gap) {
+  if (blocks.length === 0) return Array.from({ length: count + 1 }, (_, c) => c === 0 || c === count ? 0 : gap);
+  const rows = Array.from({ length: count + 2 }, () => []);
+  for (const [id, c] of column) rows[c + 1].push({ id });
+  const inside = (b) => [...column].filter(([, c]) => c >= b.first && c <= b.last).map(([id]) => id);
+  const groups = blocks.map((b) => {
+    const parent = blocks.find((p) => p.depth === b.depth - 1 && p.first <= b.first && b.last <= p.last);
+    return { id: b.group, members: inside(b), inset: insetOf(DEFAULT_GROUP_INSET), ...parent !== void 0 ? { parent: parent.group } : {} };
+  });
+  const gaps = rankGaps({ groups }, rows, { rank: "x", cross: "y", sign: 1 }, gap);
+  return gaps.map((g, c) => c === 0 || c === count ? g - gap : g);
+}
+var upright = (n) => n !== null && Math.abs(n.y) > Math.abs(n.x);
+var facingY = (end, y) => [end, ...end.sites ?? []].find((s) => s.normal !== null && Math.sign(s.normal.y) === Math.sign(y - s.point.y) && upright(s.normal)) ?? end;
+var TRACK_GAP = SIDE_TRACK_GAP;
+var CLEAR = 3;
+var covers = (boxes, y, to = y) => boxes.some((b) => b.y - CLEAR < Math.max(y, to) && Math.min(y, to) < b.y + b.height + CLEAR);
+var laneAt = (grid, y) => Math.max(0, grid.edges.filter((e) => e <= y).length - 1);
+function corridor(grid, columns, near2) {
+  const ink = columns.flatMap((c) => grid.ink[c] ?? []);
+  const middle = laneAt(grid, near2) + 0.5;
+  const clear2 = grid.edges.flatMap((y, k) => covers(ink, y) ? [] : [k]);
+  return clear2.reduce((best, k) => Math.abs(k - middle) < Math.abs(best - middle) ? k : best, clear2[0] ?? 0);
+}
+var between = (a, b) => Array.from({ length: Math.abs(b - a) + 1 }, (_, i) => a + Math.sign(b - a) * i);
+function laneCourse(grid, from, to) {
+  if (from.column >= to.column) {
+    const columns2 = between(from.column, to.column);
+    const edge = corridor(grid, columns2, from.point.y);
+    return { from, to, back: true, legs: columns2.map((column) => ({ column, at: { edge } })) };
+  }
+  const columns = Array.from({ length: to.column - from.column - 1 }, (_, i) => from.column + 1 + i);
+  const blocked = (c, y, until = y) => covers(grid.ink[c] ?? [], y, until);
+  const first = columns.findIndex((c) => blocked(c, from.point.y, to.point.y));
+  if (first < 0) return void 0;
+  const want = columns.map((_, i) => i < first ? from.point.y : to.point.y);
+  const legs = columns.map((column, i) => ({ column, at: want[i] }));
+  for (let i = 0; i < columns.length; ) {
+    let j = i;
+    while (j < columns.length && blocked(columns[j], want[j])) j++;
+    if (j === i) {
+      i++;
+      continue;
+    }
+    const edge = corridor(grid, columns.slice(i, j), want[i]);
+    for (let k = i; k < j; k++) legs[k] = { column: columns[k], at: { edge } };
+    i = j;
+  }
+  return { from, to, back: false, legs };
+}
+function assignTracks(courses) {
+  const stretches = courses.map((course) => {
+    const out = [];
+    for (const { column, at } of course?.legs ?? []) {
+      if (typeof at === "number") continue;
+      const last = out[out.length - 1];
+      if (last !== void 0 && last.edge === at.edge && Math.abs(column - (course.back ? last.lo : last.hi)) === 1) {
+        if (course.back) last.lo = column;
+        else last.hi = column;
+      } else out.push({ edge: at.edge, lo: column, hi: column, track: 0 });
+    }
+    return out;
+  });
+  const ends = /* @__PURE__ */ new Map();
+  for (const s of stretches.flat().sort((a, b) => a.lo - b.lo || a.hi - b.hi)) {
+    const taken = ends.get(s.edge) ?? [];
+    const free = taken.findIndex((end) => end + 1 < s.lo);
+    s.track = free < 0 ? taken.length : free;
+    taken[s.track] = s.hi;
+    ends.set(s.edge, taken);
+  }
+  return { stretches, tracks: new Map([...ends].map(([edge, taken]) => [edge, taken.length])) };
+}
+function trackY(grid, k, j, n) {
+  const last = grid.edges.length - 1;
+  const y = grid.edges[k];
+  if (k === 0) return y + (j + 0.5) * TRACK_GAP;
+  if (k === last) return y - (j + 0.5) * TRACK_GAP;
+  return y + (j - (n - 1) / 2) * TRACK_GAP;
+}
+function straightened(points) {
+  return points.filter((p, i) => {
+    const a = points[i - 1];
+    const b = points[i + 1];
+    return a === void 0 || b === void 0 || !(a.y === p.y && p.y === b.y);
+  });
+}
+function waypointsOf(grid, course, ys) {
+  const { from, to } = course;
+  const edge = (c, side) => grid.columns[c][side];
+  if (course.back) return [{ x: edge(from.column, 1), y: ys[0] }, { x: edge(to.column, 0), y: ys[0] }];
+  const points = [];
+  const out = edge(from.column, 1);
+  if (from.normal?.x === 1 && from.point.x < out - 1) points.push({ x: (from.point.x + out) / 2, y: from.point.y }, { x: out, y: from.point.y });
+  const first = ys[0];
+  const leave = facingY(from, first);
+  const rise = Math.abs(first - leave.point.y);
+  if (upright(leave.normal) && leave.point.x + rise < out) points.push({ x: leave.point.x + rise, y: first }, { x: out, y: first });
+  course.legs.forEach(({ column }, i) => points.push({ x: edge(column, 0), y: ys[i] }, { x: edge(column, 1), y: ys[i] }));
+  const into = edge(to.column, 0);
+  const last = ys[ys.length - 1];
+  const arrive = facingY(to, last);
+  const fall = Math.abs(last - arrive.point.y);
+  if (upright(arrive.normal) && arrive.point.x - fall > into) points.push({ x: into, y: last }, { x: arrive.point.x - fall, y: last });
+  if (to.normal?.x === -1 && to.point.x > into + 1) points.push({ x: into, y: to.point.y }, { x: (to.point.x + into) / 2, y: to.point.y });
+  return straightened(points);
+}
+function routeOf(from, fromPort, to, toPort, router, waypoints) {
+  const dep = (s) => ({ node: { id: s.id, data: s.data }, pose: s.pose });
+  const edge = { data: { diagram: { from: { port: fromPort }, to: { port: toPort }, router, ...waypoints ? { waypoints } : {} } } };
+  return EDGE_DERIVE_PATH(edge, [dep(from), dep(to)]);
+}
+var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+function clearLabel(path, size, offset, keepOut) {
+  for (const side of [offset, -offset]) {
+    for (const t of [0.5, 0.4, 0.6, 0.3, 0.7, 0.2, 0.8, 0.1, 0.9]) {
+      const near2 = pointAlongPath(path, t)?.point;
+      const center = near2 === void 0 ? null : labelCenter(path, { at: { near: near2 }, offset: side }, size);
+      if (near2 === void 0 || center === null) continue;
+      const box = { x: center.x - size.width / 2, y: center.y - size.height / 2, width: size.width, height: size.height };
+      if (!keepOut.some((k) => overlaps(box, k))) return { near: near2, offset: side, box };
+    }
+  }
+  return void 0;
+}
+var inkOf = (id, specs) => specs.filter((s) => s.id === id || s.parent === id || String(s.id).startsWith(`${id}/mark:`)).map((s) => s.pose);
+function routeWires(wires, nodes, laid) {
+  const specs = diagramScene({ nodes, edges: wires.map((w) => w.edge) }, {
+    layout: "none",
+    router: laid.router,
+    ...laid.measure !== void 0 ? { measure: laid.measure } : {}
+  });
+  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 s = spec.get(stage);
+    const [site, ...sites] = portSitesOf({ id: stage, data: s.data }, s.pose, port);
+    return { column: laid.column.get(stage), point: site?.point ?? { x: 0, y: 0 }, normal: site?.normal ?? null, sites };
+  };
+  const courses = wires.map(({ edge }) => edge.from === edge.to ? void 0 : laneCourse(grid, end(edge.from, edge.fromPort), end(edge.to, edge.toPort)));
+  const { stretches, tracks } = assignTracks(courses);
+  const [top, bottom] = [grid.edges[0] ?? 0, grid.edges[grid.edges.length - 1] ?? 0];
+  const keepOut = [...ink.values()].flat().concat({ x: -1e9, y: top - 1e9, width: 2e9, height: 1e9 }, { x: -1e9, y: bottom, width: 2e9, height: 1e9 });
+  const routes = wires.map(({ edge }, w) => {
+    const course = courses[w];
+    const ys = course?.legs.map(({ column, at }) => {
+      if (typeof at === "number") return at;
+      const s = stretches[w].find((t) => t.edge === at.edge && t.lo <= column && column <= t.hi);
+      return trackY(grid, at.edge, s.track, tracks.get(at.edge));
+    });
+    const waypoints = course === void 0 ? void 0 : waypointsOf(grid, course, ys);
+    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 : [];
+    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 };
+    });
+  });
+  const edges = wires.map(({ edge, style }, w) => {
+    const { waypoints, path } = routes[w];
+    const routed = waypoints === void 0 ? edge : { ...edge, routed: waypoints };
+    const label = spec.get(`${edgeIdOf(edge)}/label`)?.pose;
+    const others = keepOut.concat(segments.flatMap((boxes, k) => k === w ? [] : boxes));
+    const offset = LABEL_PLACEMENT.offset ?? 0;
+    const clear2 = path === null || label === void 0 ? void 0 : clearLabel(path, label, offset, others) ?? clearLabel(path, label, offset, keepOut);
+    if (clear2 === void 0) return { edge: routed, style };
+    keepOut.push(clear2.box);
+    return { edge: { ...routed, labelPlacement: { at: { near: clear2.near }, offset: clear2.offset } }, style };
+  });
+  return { edges, tracks };
+}
+
+// src/effect/lanes.ts
+var LANE_INSET = 6;
+var MARGIN = 16;
+var laneId = (type) => `~lane:${type}`;
+var laneTypeOf = (id) => id.startsWith("~lane:") ? id.slice("~lane:".length) : void 0;
+function laneTypes(stages, first = []) {
+  const used = [...new Set(stages.flatMap((s) => [...s.inputs ?? [], ...s.outputs ?? []].map((p) => p.type)))];
+  const lead = [...new Set(first)].filter((t) => used.includes(t));
+  return [...lead, ...used.filter((t) => !lead.includes(t))];
+}
+function spanOf(stage, lane) {
+  const at = [...stage.inputs ?? [], ...stage.outputs ?? []].map((p) => lane.get(p.type));
+  return at.length === 0 ? [0, 0] : [Math.min(...at), Math.max(...at)];
+}
+function laneHeights(count, least, needs, insets) {
+  const heights = Array.from({ length: count }, () => least);
+  for (const { span: [lo, hi], height } of [...needs].sort((a, b) => a.span[1] - a.span[0] - (b.span[1] - b.span[0]))) {
+    const short = height + insets[lo] + insets[hi + 1] - heights.slice(lo, hi + 1).reduce((a, b) => a + b, 0);
+    if (short > 0) for (let i = lo; i <= hi; i++) heights[i] += short / (hi - lo + 1);
+  }
+  return heights;
+}
+function lanePorts(stage, box, lane, band) {
+  const side = (ports, u) => ports.map((p) => {
+    const same = 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);
+    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)];
+}
+function controlSideOf(stage, pipeline, lane) {
+  const ports = [...stage.inputs ?? [], ...stage.outputs ?? []];
+  const mean = (ps) => ps.reduce((a, p) => a + lane.get(p.type), 0) / ps.length;
+  const control = ports.filter((p) => isControl(pipeline, p.type));
+  const signal = ports.filter((p) => !isControl(pipeline, p.type));
+  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 pose = new Map(specs.map((s) => [s.id, s.pose]));
+  const titles = new Map(groups.flatMap((g) => {
+    const title2 = pose.get(groupLabelIdOf(g.id));
+    return title2 === void 0 ? [] : [[g.id, title2.width]];
+  }));
+  const size = new Map(nodes.map((n) => {
+    const box = pose.get(n.id);
+    const ink = inkOf(n.id, specs);
+    const over = {
+      left: box.x - Math.min(...ink.map((b) => b.x)),
+      top: box.y - Math.min(...ink.map((b) => b.y)),
+      right: Math.max(...ink.map((b) => b.x + b.width)) - box.x - box.width,
+      bottom: Math.max(...ink.map((b) => b.y + b.height)) - box.y - box.height
+    };
+    return [n.id, { box, over }];
+  }));
+  return { size, titles };
+}
+function laneNode(type, box, color) {
+  return {
+    id: laneId(type),
+    lines: [],
+    ports: [],
+    at: { x: box.x, y: box.y },
+    width: box.width,
+    height: box.height,
+    marks: [{ text: type, at: { u: 0, v: 0.5 }, self: { u: 0, v: 0.5 }, offset: { x: MARGIN, y: 0 }, color: color(type), style: { bold: true } }]
+  };
+}
+function insetsFor(edges, tracks) {
+  return Array.from({ length: edges }, (_, k) => {
+    const n = tracks.get(k) ?? 0;
+    return LANE_INSET + (k === 0 || k === edges - 1 ? n * TRACK_GAP : Math.max(0, n - 1) * TRACK_GAP / 2);
+  });
+}
+function place2(plan, insets) {
+  const { stages, size, spans, column } = plan;
+  const inkHeight = (id) => size.get(id).box.height + size.get(id).over.top + size.get(id).over.bottom;
+  const heights = laneHeights(plan.rows, plan.least, stages.map((s) => ({ span: spans.get(s.id), height: inkHeight(s.id) })), insets);
+  const tops = heights.map((_, i) => heights.slice(0, i).reduce((a, b) => a + b, 0));
+  const band = (i) => [tops[i], tops[i] + heights[i]];
+  const stood = new Map(stages.map((stage) => {
+    const { box: natural, over } = size.get(stage.id);
+    const [lo, hi] = spans.get(stage.id);
+    const top = band(lo)[0] + insets[lo];
+    const span = band(hi)[1] - insets[hi + 1] - top;
+    const kind = kindOf(stage);
+    const height = kind === "decision" ? natural.height : span - over.top - over.bottom;
+    const width = kind === "source" || kind === "sink" ? natural.width + Math.max(0, height - natural.height) : natural.width;
+    return [stage.id, { y: top + (span - height - over.top - over.bottom) / 2 + over.top, height, width, over }];
+  }));
+  const inkWidth = (id) => stood.get(id).width + stood.get(id).over.left + stood.get(id).over.right;
+  const widths = [];
+  for (const s of stages) widths[column.get(s.id)] = Math.max(widths[column.get(s.id)] ?? 0, inkWidth(s.id));
+  const offset = (id) => (widths[column.get(id)] - inkWidth(id)) / 2 + stood.get(id).over.left;
+  const extent = (id) => ({ lo: offset(id), hi: offset(id) + stood.get(id).width });
+  const { lefts, end } = columnLefts(widths, column, plan.blocks, plan.gap, plan.start, extent);
+  const nodes = stages.map((stage, k) => {
+    const c = column.get(stage.id);
+    const { y, height, width } = stood.get(stage.id);
+    const box = { x: lefts[c] + offset(stage.id), y, width, height };
+    return {
+      ...plan.drawn[k],
+      at: { x: box.x, y: box.y },
+      width: box.width,
+      height: box.height,
+      ...kindOf(stage) === "decision" ? {} : { ports: lanePorts(stage, box, plan.lane, band) }
+    };
+  });
+  const columns = Array.from(widths, (wd, c) => [lefts[c], lefts[c] + (wd ?? 0)]);
+  const edges = [...tops, tops.length === 0 ? 0 : tops[tops.length - 1] + heights[heights.length - 1]];
+  return { nodes, tops, heights, columns, edges, end };
+}
+var lanes = (pipeline, options = {}) => {
+  const theme = options.theme ?? LOOK_THEME;
+  const color = typeColors(pipeline, options.colors, theme.series);
+  const stages = uniqueStages(pipeline);
+  const types = laneTypes(stages, options.lanes);
+  const rows = types.length > 0 ? types : [""];
+  const lane = new Map(types.map((t, i) => [t, i]));
+  const spans = new Map(stages.map((s) => [s.id, spanOf(s, lane)]));
+  const drawn = stages.map((stage) => kindOf(stage) === "decision" ? { id: stage.id, ...branchNode(stage, pipeline, options.branch, { controlSide: controlSideOf(stage, pipeline, lane), style: stageStyle(stage, theme) }) } : boxNode(stage, { showParams: options.showParams !== false, rowPorts: false, ports: [], run: options }));
+  const labels = rows.map((t) => ({ id: laneId(t), lines: [t] }));
+  const groups = uniqueGroups(pipeline);
+  const { size, titles } = sizesOf([...drawn, ...labels], groups, options.measure);
+  const { column, blocks } = laneColumns(stages, drawableWires(pipeline), spans, groups, titles);
+  const plan = {
+    stages,
+    drawn,
+    size,
+    spans,
+    column,
+    blocks,
+    lane,
+    rows: rows.length,
+    least: Math.max(options.laneHeight ?? 48, ...labels.map((l) => size.get(l.id).box.height)),
+    gap: options.rankGap ?? 40,
+    start: 2 * MARGIN + Math.max(0, ...labels.map((l) => size.get(l.id).box.width))
+  };
+  const router = options.router ?? "bezier";
+  const wires = wireEdges(pipeline, color);
+  let insets = insetsFor(rows.length + 1, /* @__PURE__ */ new Map());
+  let laid = place2(plan, insets);
+  let routed = routeWires(wires, laid.nodes, { grid: laid, column, router, measure: options.measure });
+  for (let round = 0; round < 4; round++) {
+    const need2 = insetsFor(rows.length + 1, routed.tracks);
+    if (need2.every((n, k) => n <= insets[k])) break;
+    insets = need2.map((n, k) => Math.max(n, insets[k]));
+    laid = place2(plan, insets);
+    routed = routeWires(wires, laid.nodes, { grid: laid, column, router, measure: options.measure });
+  }
+  const { columns, tops, heights } = laid;
+  const right = columns.length === 0 ? plan.start : laid.end + MARGIN;
+  const laneNodes = rows.map((t, i) => laneNode(t, { x: 0, y: tops[i], width: right, height: heights[i] }, color));
+  const edges = routed.edges;
+  const styles = sceneStyles(stages, edges, theme);
+  const bodies = theme.lane.bodies;
+  const laneStyle = new Map(rows.map((t, i) => [laneId(t), bodies[i % bodies.length]]));
+  return {
+    data: { nodes: [...laneNodes, ...laid.nodes], edges: edges.map((e) => e.edge), groups },
+    scene: {
+      layout: "none",
+      router,
+      ...options.measure !== void 0 ? { measure: options.measure } : {},
+      ...styles,
+      nodeStyle: (n) => laneStyle.get(n.id) ?? styles.nodeStyle(n)
+    },
+    color,
+    order: { axis: "x", items: mainChain(pipeline).map((id) => ({ id })) },
+    ...types.length > 0 ? {
+      laneOrder: {
+        axis: "y",
+        items: types.map((t, i) => ({ id: laneId(t), grip: { x: 0, y: tops[i], width: plan.start, height: heights[i] } }))
+      }
+    } : {}
+  };
+};
+
+// src/effect/rack.ts
+var SKIP_OUT = "~skip-out";
+var SKIP_IN = "~skip-in";
+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;
+  return (Math.max(count(0), count(1)) + 1) * SIDE_PORT_GAP;
+}
+function rackWires(pipeline, skips) {
+  const eaten = new Set(skips.flatMap((s) => [s.into.index, s.through.index, s.skip.index]));
+  const wires = drawableWires(pipeline).filter((d) => !eaten.has(d.index)).map((d) => {
+    const label = exitLabel(d);
+    return {
+      ...d.wire.id !== void 0 ? { id: d.wire.id } : {},
+      from: d.wire.from,
+      to: d.wire.to,
+      type: d.type,
+      problem: d.problem,
+      ...label !== void 0 ? { label } : {}
+    };
+  });
+  for (const s of skips) {
+    wires.push({
+      from: s.into.wire.from,
+      to: s.through.wire.to,
+      type: s.into.type,
+      problem: s.into.problem || s.through.problem,
+      exit: { stage: s.decision.id, port: s.through.wire.from.port }
+    });
+    wires.push({
+      from: { stage: s.into.wire.from.stage, port: SKIP_OUT },
+      to: { stage: s.skip.wire.to.stage, port: SKIP_IN },
+      type: s.into.type,
+      problem: s.into.problem || s.skip.problem,
+      label: `${s.decision.title}: ${exitLabel(s.skip)}`,
+      arc: true,
+      exit: { stage: s.decision.id, port: s.skip.wire.from.port }
+    });
+  }
+  return wires;
+}
+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 });
+  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 }));
+    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 }));
+    else side.push(p);
+  }
+  out.push(...spreadAt(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 } : {} });
+  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;
+}
+var rack = (pipeline, options = {}) => {
+  const theme = options.theme ?? LOOK_THEME;
+  const color = typeColors(pipeline, options.colors, theme.series);
+  const below = options.side !== "above";
+  const near2 = below ? 1 : 0;
+  const far = below ? 0 : 1;
+  const stages = uniqueStages(pipeline);
+  const given = options.chain?.filter((id) => stages.some((s) => s.id === id));
+  const ordered = given !== void 0 && given.length > 0 ? given : mainChain(pipeline);
+  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 kept = stages.filter((s) => !gone.has(s.id));
+  const controlSide = 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);
+    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 byId = new Map(kept.map((s) => [s.id, s]));
+  const edges = wires.map((wire) => {
+    const to = byId.get(wire.to.stage);
+    const sideInput = to !== void 0 && kindOf(to) !== "decision" && !wire.arc && wire.to.port !== line.mainIn.get(wire.to.stage) && line.at.has(wire.to.stage);
+    const label = wire.label ?? (sideInput ? portOn(to, wire.to.port)?.label ?? wire.to.port : void 0);
+    return {
+      edge: wireEdge(wire.from, wire.to, label, wire.id),
+      style: wireStyle(color(wire.type), wire.arc === true || isControl(pipeline, wire.type), wire.problem)
+    };
+  });
+  return {
+    data: {
+      nodes,
+      edges: edges.map((e) => e.edge),
+      groups: uniqueGroups(pipeline).map((g) => ({ ...g, members: g.members.filter((m) => !gone.has(m)) }))
+    },
+    scene: {
+      layout: "chain",
+      layoutOptions: {
+        direction: "right",
+        chain,
+        chainSide: below ? "after" : "before",
+        ...options.nodeGap !== void 0 ? { nodeGap: options.nodeGap } : {},
+        ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
+      },
+      router: "bezier",
+      ...sceneStyles(kept, edges, theme)
+    },
+    color,
+    order: { axis: "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 ?? "" });
+function editorScene(doc, look = "nodeGraph", options) {
+  const drawn = drawLook(doc, look, options);
+  const stages = new Set(doc.pipeline.stages.map((s) => s.id));
+  const groups = new Set((doc.pipeline.groups ?? []).map((g) => g.id));
+  const ids = ensureWireIds(doc).pipeline.wires.map((w) => w.id);
+  const byEnds = /* @__PURE__ */ new Map();
+  for (const d of drawableWires(doc.pipeline)) {
+    const key = endsKey(d.wire.from, d.wire.to);
+    if (!byEnds.has(key)) byEnds.set(key, ids[d.index]);
+  }
+  const wires = new Map(drawn.data.edges.flatMap((e) => {
+    const id = byEnds.get(edgeEnds(e));
+    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 id = wires.get(edgeIdOf(e));
+    const route = id === void 0 ? void 0 : routes[id];
+    return route === void 0 ? e : { ...e, waypoints: route };
+  });
+  return {
+    ...drawn,
+    data: { ...drawn.data, edges },
+    stageOf: (node) => stages.has(node) ? node : void 0,
+    groupOf: (node) => groups.has(node) && !stages.has(node) ? node : void 0,
+    wireOf: (edge) => wires.get(edge)
+  };
+}
+function drawLook(doc, look, options) {
+  if (look === "rack") return rack(doc.pipeline, options);
+  if (look === "lanes") {
+    const opts = options;
+    const order = doc.laneOrder ?? opts?.lanes;
+    return lanes(doc.pipeline, { ...opts, ...order !== void 0 ? { lanes: order } : {} });
+  }
+  const drawn = nodeGraph(doc.pipeline, options);
+  const nodes = drawn.data.nodes.map((n) => {
+    const at = doc.places[n.id];
+    return at === void 0 ? n : { ...n, at: { x: at.x, y: at.y }, pinned: true };
+  });
+  const { groups = [], ...rest } = drawn.data;
+  const containers = groups.map((g) => {
+    const box = doc.groupBoxes?.[g.id];
+    return {
+      id: g.id,
+      role: "container",
+      label: g.label ?? "",
+      members: g.members,
+      ...box !== void 0 ? { box: { ...box }, pinned: true } : {}
+    };
+  });
+  return {
+    ...drawn,
+    data: {
+      ...rest,
+      nodes,
+      ...containers.length > 0 ? { containers } : {},
+      ...doc.pages !== void 0 ? { pages: doc.pages } : {}
+    }
+  };
+}
+
+// src/effect/groupOrder.ts
+function groupRuns(pipeline, chain) {
+  const at = new Map(chain.map((id, i) => [id, i]));
+  const doc = { pipeline};
+  const runs = /* @__PURE__ */ new Map();
+  for (const g of pipeline.groups ?? []) {
+    const on = [...groupContents(doc, g.id).stages].flatMap((s) => at.get(s) ?? []);
+    if (on.length === 0) continue;
+    const first = Math.min(...on);
+    const last = Math.max(...on);
+    runs.set(g.id, last - first + 1 === on.length ? { first, last } : null);
+  }
+  return runs;
+}
+var holds = (b, p) => p.x >= b.x && p.x <= b.x + b.width && p.y >= b.y && p.y <= b.y + b.height;
+function groupGripOf(doc, group, boxOf) {
+  const box = boxOf(group);
+  const members = doc.pipeline.groups?.find((g) => g.id === group)?.members ?? [];
+  const tops = members.flatMap((m) => boxOf(m)?.y ?? []);
+  if (box === void 0 || tops.length === 0) return void 0;
+  const height = Math.min(...tops) - box.y;
+  return height > 0 ? { x: box.x, y: box.y, width: box.width, height } : void 0;
+}
+function unitStages(doc, unit) {
+  return doc.pipeline.groups?.some((g) => g.id === unit) ? groupContents(doc, unit).stages : /* @__PURE__ */ new Set([unit]);
+}
+function parentsOf(doc) {
+  const parent = /* @__PURE__ */ new Map();
+  for (const g of doc.pipeline.groups ?? []) for (const m of g.members) parent.set(m, g.id);
+  return parent;
+}
+function groupAt(doc, boxOf, at, among = () => true) {
+  const parent = parentsOf(doc);
+  const depth = (id) => parent.has(id) ? 1 + depth(parent.get(id)) : 0;
+  const held = (doc.pipeline.groups ?? []).filter((g) => {
+    const grip = among(g.id) ? groupGripOf(doc, g.id, boxOf) : void 0;
+    return grip !== void 0 && holds(grip, at);
+  });
+  return held.sort((a, b) => depth(b.id) - depth(a.id))[0]?.id;
+}
+function groupSlotsAt(source, at) {
+  const { doc, order, boxOf } = source;
+  const groups = doc.pipeline.groups ?? [];
+  if (order === void 0 || groups.length === 0) return null;
+  const parent = parentsOf(doc);
+  const runs = groupRuns(doc.pipeline, mainChain(doc.pipeline));
+  const held = groupAt(doc, boxOf, at, (g) => runs.get(g) != null);
+  if (held === void 0) return null;
+  const up = parent.get(held);
+  const siblings = up !== void 0 ? groups.find((g) => g.id === up).members : [...groups, ...doc.pipeline.stages].flatMap((u) => parent.has(u.id) ? [] : [u.id]);
+  const drawnAt = new Map(order.items.map((i, k) => [i.id, k]));
+  const placed = siblings.flatMap((id) => {
+    const drawn = [...unitStages(doc, id)].flatMap((s) => drawnAt.get(s) ?? []);
+    const bounds = boxOf(id);
+    return drawn.length === 0 || bounds === void 0 ? [] : [{ id, bounds, first: Math.min(...drawn) }];
+  }).sort((a, b) => a.first - b.first);
+  const isGroup = new Set(groups.map((g) => g.id));
+  const items = placed.map(({ id, bounds }) => {
+    if (!isGroup.has(id)) return { id, bounds, grip: null };
+    const inside = groupContents(doc, id);
+    const carries = [...inside.groups, ...inside.stages, ...[...inside.groups].map(groupLabelIdOf)];
+    return { id, bounds, grip: groupGripOf(doc, id, boxOf) ?? null, carries };
+  });
+  return items.length < 2 ? null : sequenceSlots(order.axis, items);
+}
+
+// src/effect/editorReorder.ts
+var REORDER_LANES_ACTION_ID = "diagram.reorderLanes";
+var REORDER_GROUPS_ACTION_ID = "diagram.reorderGroups";
+function slotsOf(order, boxOf) {
+  if (order === void 0) return null;
+  const items = order.items.flatMap((i) => {
+    const bounds = boxOf(i.id);
+    return bounds === void 0 ? [] : [{ id: i.id, bounds, ...i.grip !== void 0 ? { grip: i.grip } : {} }];
+  });
+  return items.length < 2 ? null : sequenceSlots(order.axis, items);
+}
+function keepsGroups(doc, next) {
+  if (next === null) return null;
+  const after = groupRuns(next.pipeline, mainChain(next.pipeline));
+  for (const [id, run] of groupRuns(doc.pipeline, mainChain(doc.pipeline))) if (run !== null && after.get(id) === null) return null;
+  return next;
+}
+function dropInGap(doc, chain, drawn, to, at) {
+  const tries = [to];
+  for (let k = to; k > 0 && !drawn.has(chain[k - 1]); k--) tries.push(k - 1);
+  for (let k = to; k < chain.length && !drawn.has(chain[k]); k++) tries.push(k + 1);
+  for (const t of tries) {
+    const next = keepsGroups(doc, at(t));
+    if (next !== null) return next;
+  }
+  return null;
+}
+var drawnOf = (order) => new Set(order.items.map((i) => i.id));
+function stageMove(doc, order, move) {
+  const chain = mainChain(doc.pipeline);
+  const before = order.items[move.to];
+  const to = before === void 0 ? chain.length : chain.indexOf(before.id);
+  const wired = ensureWireIds(doc);
+  return dropInGap(doc, chain, drawnOf(order), to, (t) => moveInChain(wired, move.id, t));
+}
+function groupMove(doc, order, units, move) {
+  const chain = mainChain(doc.pipeline);
+  const drawn = drawnOf(order);
+  const indices = (unit, drawnOnly) => [...unitStages(doc, unit)].flatMap((s) => chain.includes(s) && (!drawnOnly || drawn.has(s)) ? [chain.indexOf(s)] : []);
+  const run = indices(move.id, false);
+  if (run.length === 0) return null;
+  const [i, j] = [Math.min(...run), Math.max(...run)];
+  if (j - i + 1 !== run.length) return null;
+  const before = units[move.to];
+  const edge = before !== void 0 ? indices(before, true) : indices(units[units.length - 1] ?? move.id, true).map((k) => k + 1);
+  if (edge.length === 0) return null;
+  const to = before !== void 0 ? Math.min(...edge) : Math.max(...edge);
+  const wired = ensureWireIds(doc);
+  return dropInGap(doc, chain, drawn, to, (t) => moveRunInChain(wired, chain[i], chain[j], t));
+}
+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);
+}
+function unitsBefore(move) {
+  const units = move.order.filter((id) => id !== move.id);
+  units.splice(move.from, 0, move.id);
+  return units;
+}
+function groupReorder(now) {
+  const moved = (move) => {
+    const { doc, order } = now();
+    return order === void 0 ? null : groupMove(doc, order, unitsBefore(move), move);
+  };
+  return reorderContribution({
+    id: REORDER_GROUPS_ACTION_ID,
+    label: "Reorder group",
+    slots: (_, at) => groupSlotsAt(now(), at),
+    canDrop: (move) => moved(move) !== null,
+    commit: (move) => {
+      const next = moved(move);
+      if (next !== null) now().onChange(next, "Reorder group");
+    }
+  });
+}
+function editorReorders(now) {
+  return [
+    reorderContribution({
+      label: "Reorder",
+      slots: () => slotsOf(now().order, now().boxOf),
+      canDrop: (move) => {
+        const { doc, order } = now();
+        return order !== void 0 && stageMove(doc, order, move) !== null;
+      },
+      commit: (move) => {
+        const { doc, order, onChange } = now();
+        const next = order === void 0 ? null : stageMove(doc, order, move);
+        if (next !== null) onChange(next, "Reorder");
+      }
+    }),
+    reorderContribution({
+      id: REORDER_LANES_ACTION_ID,
+      label: "Reorder lanes",
+      slots: () => slotsOf(now().laneOrder, now().boxOf),
+      commit: (move) => {
+        const { doc, laneOrder, onChange } = now();
+        if (laneOrder !== void 0) onChange(laneMove(doc, laneOrder, move), "Reorder lanes");
+      }
+    }),
+    groupReorder(now)
+  ];
+}
+var RENAME_GROUP_ACTION_ID = "effect.renameGroup";
+function renameGroupContribution(now, rename) {
+  const under = (at) => {
+    const { doc, boxOf } = now();
+    return groupAt(doc, boxOf, at);
+  };
+  return {
+    id: `weasel-diagram-effect:${RENAME_GROUP_ACTION_ID}`,
+    eligibility: { always: true },
+    actions: [{
+      id: RENAME_GROUP_ACTION_ID,
+      label: "Rename group",
+      group: "diagram",
+      enabled: (_, at) => at === void 0 || under(at) !== void 0 ? true : ActionDisabledReason.NotApplicable,
+      invoker: {
+        timing: "immediate",
+        run(_, params) {
+          const group = under({ x: Number(params?.worldX), y: Number(params?.worldY) });
+          if (group !== void 0) rename(group);
+        }
+      }
+    }],
+    // Empty space included: an unlabeled group's grip is padding.
+    bindings: [{ spec: { kind: "doubleClick", target: { kindOf: ANYWHERE } }, actionId: RENAME_GROUP_ACTION_ID }]
+  };
+}
+
+// src/effect/place.ts
+var PLACE_GAP = 24;
+var STEP = 8;
+var clear = (x, y, size, boxes) => boxes.every((b) => x >= b.x + b.width + PLACE_GAP || x + size.width + PLACE_GAP <= b.x || y >= b.y + b.height + PLACE_GAP || y + size.height + PLACE_GAP <= b.y);
+function freeSpot(boxes, size, view) {
+  if (view !== null) {
+    const right = view.x + view.width - PLACE_GAP - size.width;
+    const bottom = view.y + view.height - PLACE_GAP - size.height;
+    for (let y = view.y + PLACE_GAP; y <= bottom; y += STEP) {
+      for (let x = view.x + PLACE_GAP; x <= right; x += STEP) {
+        if (clear(x, y, size, boxes)) return { x, y };
+      }
+    }
+  }
+  if (boxes.length === 0) return { x: (view?.x ?? 0) + PLACE_GAP, y: (view?.y ?? 0) + PLACE_GAP };
+  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) {
+  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]);
+  useReleaseReplaced(run);
+  const portOptions = useRunPortOptions(built.color, doc.pipeline, run);
+  const picks = useEditorPicks(built, { selected, selectedGroup, onSelect, onSelectGroup });
+  const now = useLatest({ doc, built, specs, look, options, onChange });
+  const view = useRef(null);
+  const [renaming, setRenaming] = useState(null);
+  const handlers = useMemo(() => editHandlers(() => now.current, picks.unpick, setRenaming), [now, picks.unpick]);
+  const ambient = useMemo(() => {
+    const source = () => {
+      const { doc: d, built: b, specs: shown, onChange: report } = now.current;
+      const boxes = new Map(shown.map((s) => [s.id, s.pose]));
+      return { doc: d, order: b.order, laneOrder: b.laneOrder, boxOf: (id) => boxes.get(id), onChange: report };
+    };
+    return [...editorReorders(source), renameGroupContribution(source, setRenaming)];
+  }, [now]);
+  useImperativeHandle(ref, () => ({
+    addStage: (type, client) => {
+      const { doc: d, specs: shown, look: l, options: opts, onChange: report } = now.current;
+      const stage = stageFromType(type, nextStageId(d.pipeline, type.type));
+      if (l !== "nodeGraph") {
+        report(addStage(ensureWireIds(d), stage), "Add stage");
+        return stage.id;
+      }
+      const pinned = ensureWireIds(pinShown(d, shown));
+      if (client && view.current) {
+        report(addStage(pinned, stage, view.current.worldAt(client.x, client.y)), "Add stage");
+      } else {
+        const boxes = stageBoxes(d, shown);
+        const alone = { pipeline: { ...d.pipeline, stages: [stage], wires: [], groups: [] }, places: {} };
+        const size = stageBoxes(alone, drawnSpecs(alone, opts)).get(stage.id) ?? { width: 0, height: 0 };
+        const at = freeSpot([...boxes.values()], size, view.current?.visible() ?? null);
+        report(addStage(pinned, stage, at), "Add stage");
+      }
+      return stage.id;
+    },
+    group: (ids) => {
+      const { doc: d, specs: shown, look: l, onChange: report } = now.current;
+      if (ids.length === 0) return null;
+      const base = l === "nodeGraph" ? pinShown(ensureWireIds(d), shown) : d;
+      report(groupStages(base, ids), "Group");
+      return nextGroupId(d.pipeline);
+    },
+    ungroup: (id) => {
+      const { doc: d, onChange: report } = now.current;
+      if (d.pipeline.groups?.some((g) => g.id === id)) report(ungroup(d, id), "Ungroup");
+    },
+    renameGroup: (id) => setRenaming(id)
+  }), [now]);
+  const title2 = useGroupTitle(doc, look, renaming, setRenaming, onChange);
+  const fill = (look === "nodeGraph" ? options?.theme ?? LOOK_THEME : LOOK_THEME).page;
+  const placed = useMemo(() => diagramPages(built.data), [built.data.pages, built.data.pageLayout]);
+  const pages = useMemo(() => placed.length > 0 ? { placed, fill } : void 0, [placed, fill]);
+  return /* @__PURE__ */ jsx(
+    DiagramView,
+    {
+      ref: view,
+      specs: painted,
+      width,
+      height,
+      minScale: EFFECT_MIN_SCALE,
+      anchor: "start",
+      ports: "connect",
+      portOptions,
+      canConnect: handlers.canConnect,
+      onConnect: handlers.onConnect,
+      onReconnect: handlers.onReconnect,
+      onEditRoute: handlers.onEditRoute,
+      onDelete: handlers.onDelete,
+      ...look === "nodeGraph" ? { onMove: handlers.onMove } : { ambient },
+      ...look === "nodeGraph" ? { onEditContainer: handlers.onEditContainer } : {},
+      onSelect: picks.pick,
+      ...picks.shown !== void 0 ? { selected: picks.shown } : {},
+      ...pages !== void 0 ? { pages } : {},
+      ...title2 !== null ? { overlays: title2 } : {},
+      ...background !== void 0 ? { background } : {},
+      ...className !== void 0 ? { className } : {}
+    },
+    look
+  );
+});
+function drawnSpecs(doc, options) {
+  const built = editorScene(doc, "nodeGraph", options);
+  return diagramScene(built.data, built.scene);
+}
+
+// src/effect/image/evaluators.ts
+var BLEND = { normal: "source-over", screen: "screen", multiply: "multiply" };
+function draw(width, height, paint) {
+  const canvas = new OffscreenCanvas(width, height);
+  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`);
+  return value;
+}
+function decide(ctx, value) {
+  const outs = ctx.stage.outputs ?? [];
+  const split = ctx.stage.split;
+  const index = split !== void 0 ? split.at.filter((cut) => value >= cut).length : value > 0 ? 0 : 1;
+  return outs[Math.min(index, outs.length - 1)]?.id;
+}
+var imageEvaluators = {
+  source: ({ sources }) => {
+    if (sources.image === void 0) throw new Error("no source image");
+    return { outputs: { out: sources.image } };
+  },
+  blur: (ctx) => {
+    const image2 = need(ctx, "in");
+    const radius = Number(ctx.params.radius ?? 0);
+    return {
+      outputs: {
+        out: draw(image2.width, image2.height, (g) => {
+          g.filter = `blur(${radius}px)`;
+          g.drawImage(image2, 0, 0);
+        })
+      }
+    };
+  },
+  composite: (ctx) => {
+    const base = need(ctx, "base");
+    const top = need(ctx, "top");
+    return {
+      outputs: {
+        out: draw(base.width, base.height, (g) => {
+          g.drawImage(base, 0, 0);
+          g.globalCompositeOperation = BLEND[String(ctx.params.blend)] ?? "source-over";
+          g.drawImage(top, 0, 0, base.width, base.height);
+        })
+      }
+    };
+  },
+  mask: (ctx) => {
+    const image2 = need(ctx, "in");
+    const mask = need(ctx, "mask");
+    return {
+      outputs: {
+        out: draw(image2.width, image2.height, (g) => {
+          g.drawImage(image2, 0, 0);
+          g.globalCompositeOperation = "destination-in";
+          g.drawImage(mask, 0, 0, image2.width, image2.height);
+        })
+      }
+    };
+  },
+  oscillator: ({ params, time }) => ({ outputs: { value: Math.sin(2 * Math.PI * Number(params.rate ?? 1) * time) } }),
+  decision: (ctx) => {
+    const tested = ctx.stage.split?.input ?? ctx.stage.inputs?.find((p) => p.type === "number")?.id ?? "test";
+    const taken = decide(ctx, need(ctx, tested));
+    const type = ctx.stage.outputs?.find((p) => p.id === taken)?.type;
+    const from = ctx.stage.inputs?.find((p) => p.type === type && ctx.inputs[p.id] !== void 0);
+    return { outputs: taken !== void 0 && from !== void 0 ? { [taken]: ctx.inputs[from.id] } : {}, ...taken !== void 0 ? { taken } : {} };
+  },
+  out: () => ({ outputs: {} })
+};
+
+// src/effect/image/stageTypes.ts
+var param = (label, control) => ({ label, value: formatParam(control), control });
+var image = (id, label) => ({ id, type: "image", ...label !== void 0 ? { label } : {} });
+var IMAGE_STAGE_TYPES = [
+  { type: "source", title: "Source", kind: "source", outputs: [image("out")] },
+  {
+    type: "blur",
+    title: "Blur",
+    inputs: [image("in")],
+    outputs: [image("out")],
+    params: [param("radius", { kind: "number", value: 4, min: 0, max: 50, step: 1, unit: "px" })]
+  },
+  {
+    type: "composite",
+    title: "Composite",
+    inputs: [image("base"), image("top")],
+    outputs: [image("out")],
+    params: [param("blend", {
+      kind: "enum",
+      value: "normal",
+      options: [{ value: "normal", label: "Normal" }, { value: "screen", label: "Screen" }, { value: "multiply", label: "Multiply" }]
+    })]
+  },
+  {
+    type: "mask",
+    title: "Mask",
+    inputs: [image("in"), { id: "mask", type: "mask" }],
+    outputs: [image("out")]
+  },
+  {
+    type: "oscillator",
+    title: "Oscillator",
+    outputs: [{ id: "value", type: "number" }],
+    params: [param("rate", { kind: "number", value: 1, min: 0.1, max: 20, step: 0.1, unit: "Hz" })]
+  },
+  {
+    type: "decision",
+    title: "Decision",
+    kind: "decision",
+    inputs: [image("in"), { id: "test", type: "number" }],
+    outputs: [image("yes", "yes"), image("no", "no")]
+  },
+  { type: "out", title: "Out", kind: "sink", inputs: [image("in")] }
+];
+
+// src/effect/image/testCard.ts
+var BARS = ["#c0c0c0", "#c0c000", "#00c0c0", "#00c000", "#c000c0", "#c00000", "#0000c0"];
+function testCard(size) {
+  const { width, height } = typeof size === "number" ? { width: size, height: size } : size;
+  const canvas = new OffscreenCanvas(width, height);
+  const g = canvas.getContext("2d");
+  const barHeight = height * 0.7;
+  BARS.forEach((color, i) => {
+    g.fillStyle = color;
+    const x = Math.floor(i * width / BARS.length);
+    g.fillRect(x, 0, Math.ceil(width / BARS.length) + 1, barHeight);
+  });
+  const ramp = g.createLinearGradient(0, 0, width, 0);
+  ramp.addColorStop(0, "#000");
+  ramp.addColorStop(1, "#fff");
+  g.fillStyle = ramp;
+  g.fillRect(0, barHeight, width, height - barHeight);
+  g.strokeStyle = "#fff";
+  g.lineWidth = Math.max(1, Math.min(width, height) / 32);
+  g.beginPath();
+  g.arc(width / 2, height / 2, Math.min(width, height) * 0.3, 0, Math.PI * 2);
+  g.stroke();
+  return canvas.transferToImageBitmap();
+}
+
+// src/effect/image/valueKinds.ts
+var bitmapKind = {
+  show: (value) => `${value.width}\xD7${value.height}`,
+  preview(value, size) {
+    const width = Math.max(1, Math.round(size.width * PREVIEW_DENSITY));
+    const height = Math.max(1, Math.round(size.height * PREVIEW_DENSITY));
+    const canvas = new OffscreenCanvas(width, height);
+    canvas.getContext("2d").drawImage(value, 0, 0, width, height);
+    return canvas.transferToImageBitmap();
+  },
+  dispose: (value) => value.close()
+};
+var imageValueKinds = {
+  image: bitmapKind,
+  mask: bitmapKind,
+  number: { show: (value) => value.toFixed(3) }
+};
+
+// src/effect/looks.ts
+var EFFECT_LOOKS = Object.freeze({ nodeGraph, rack, lanes, compact });
+
+// src/effect/runner/pass.ts
+function createPass(pipeline, opts) {
+  const stages = new Map(uniqueStages(pipeline).map((s) => [s.id, s]));
+  const queue = runOrder(pipeline).order;
+  const made = /* @__PURE__ */ new Map();
+  const sources = opts.sources ?? {};
+  const size = typeof opts.previewSize === "object" ? opts.previewSize : { width: opts.previewSize ?? PREVIEW_SIZE, height: opts.previewSize ?? PREVIEW_SIZE };
+  const signal = opts.signal ?? new AbortController().signal;
+  let run = { stages: {} };
+  const inputsOf = (stage) => {
+    const inputs2 = {};
+    for (const w of pipeline.wires) {
+      if (w.to.stage !== stage.id || inputs2[w.to.port] !== void 0) continue;
+      const value = made.get(w.from.stage)?.[w.from.port];
+      if (value !== void 0) inputs2[w.to.port] = value;
+    }
+    return inputs2;
+  };
+  const record = async (stage, inputs2, outputs, entry) => {
+    made.set(stage.id, outputs);
+    const values = {};
+    const previews = {};
+    const seen = { ...inputs2, ...outputs };
+    for (const port of shownPorts(stage)) {
+      const value = seen[port.id];
+      if (value === void 0) continue;
+      const kind = opts.kinds?.[port.type];
+      const text = kind?.show !== void 0 ? kind.show(value) : plainText(value);
+      if (text !== void 0) values[port.id] = text;
+      const preview = opts.previews === false ? void 0 : await kind?.preview?.(value, size);
+      if (preview !== void 0) previews[port.id] = preview;
+    }
+    const full = {
+      ...entry,
+      ...Object.keys(values).length > 0 ? { values } : {},
+      ...Object.keys(previews).length > 0 ? { previews } : {}
+    };
+    run = { stages: { ...run.stages, [stage.id]: full } };
+  };
+  const evaluate = async (stage, inputs2) => {
+    if (stage.bypassed === true) return record(stage, inputs2, passThrough(stage, inputs2), {});
+    const evaluator = stage.type === void 0 ? void 0 : opts.evaluators[stage.type];
+    const params = paramValues(stage);
+    const start = performance.now();
+    try {
+      if (evaluator === void 0) throw new Error(`no evaluator for type "${stage.type ?? ""}"`);
+      const result = await evaluator({ stage, inputs: inputs2, params, sources, time: opts.time ?? 0, signal });
+      const cost = performance.now() - start;
+      return record(stage, inputs2, result.outputs, { cost, ...result.taken !== void 0 ? { taken: result.taken } : {} });
+    } catch (err) {
+      signal.throwIfAborted();
+      const cost = performance.now() - start;
+      run = { stages: { ...run.stages, [stage.id]: { cost, error: err instanceof Error ? err.message : String(err) } } };
+    }
+  };
+  return {
+    get run() {
+      return run;
+    },
+    async step() {
+      while (queue.length > 0) {
+        signal.throwIfAborted();
+        const stage = stages.get(queue.shift());
+        const inputs2 = inputsOf(stage);
+        if ((stage.inputs?.length ?? 0) > 0 && Object.keys(inputs2).length === 0) continue;
+        await evaluate(stage, inputs2);
+        signal.throwIfAborted();
+        return stage.id;
+      }
+      return void 0;
+    },
+    dispose() {
+      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];
+          if (value === void 0 || given.has(value) || done.has(value)) continue;
+          done.add(value);
+          opts.kinds?.[port.type]?.dispose?.(value);
+        }
+      }
+      made.clear();
+    }
+  };
+}
+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];
+  }
+  return out;
+}
+function plainText(value) {
+  return typeof value === "number" || typeof value === "string" || typeof value === "boolean" ? String(value) : void 0;
+}
+
+// src/effect/runner/runPipeline.ts
+async function runPipeline(pipeline, opts) {
+  const pass = createPass(pipeline, opts);
+  try {
+    while (await pass.step() !== void 0) ;
+    return pass.run;
+  } finally {
+    pass.dispose();
+  }
+}
+
+// src/effect/runner/runner.ts
+function createEffectRunner(opts) {
+  let { pipeline, ...options } = opts;
+  let state = { run: void 0, playing: false, time: 0 };
+  let stepping = null;
+  let controller = new AbortController();
+  let tail = Promise.resolve();
+  let pending = 0;
+  let published = [];
+  const listeners = /* @__PURE__ */ new Set();
+  const set = (next) => {
+    state = { ...state, ...next };
+    for (const l of [...listeners]) l();
+  };
+  const publish = (run) => {
+    published.push(run);
+    set({ run });
+  };
+  const passOptions = (time) => ({ ...options, time, signal: controller.signal });
+  const dropStepping = () => {
+    stepping?.dispose();
+    stepping = null;
+  };
+  const enqueue = (task) => {
+    const signal = controller.signal;
+    pending++;
+    const done = tail.then(() => signal.aborted ? void 0 : task(signal)).catch((err) => {
+      if (!signal.aborted) throw err;
+    }).finally(() => {
+      pending--;
+    });
+    tail = done.catch(() => {
+    });
+    return done;
+  };
+  const wholeRun = (time) => async (signal) => {
+    dropStepping();
+    const run = await runPipeline(pipeline, passOptions(time));
+    if (signal.aborted) closeBitmaps(previewsOf(run));
+    else publish(run);
+  };
+  const stepOnce = (time) => async () => {
+    let pass = stepping ??= createPass(pipeline, passOptions(time));
+    let at = await pass.step();
+    if (at === void 0) {
+      dropStepping();
+      pass = stepping = createPass(pipeline, passOptions(time));
+      at = await pass.step();
+    }
+    publish(at === void 0 ? pass.run : { ...pass.run, at });
+  };
+  return {
+    get state() {
+      return state;
+    },
+    run: () => enqueue(wholeRun(state.time)),
+    step() {
+      return enqueue(stepOnce(state.time));
+    },
+    play: () => {
+      if (!state.playing) set({ playing: true });
+    },
+    pause: () => {
+      if (state.playing) set({ playing: false });
+    },
+    reset() {
+      controller.abort();
+      controller = new AbortController();
+      dropStepping();
+      set({ run: void 0, playing: false, time: 0 });
+    },
+    advance(seconds) {
+      if (!state.playing) return;
+      state = { ...state, time: state.time + seconds };
+      if (pending === 0) void enqueue(wholeRun(state.time));
+    },
+    setPipeline(next) {
+      if (next === pipeline) return;
+      pipeline = next;
+      dropStepping();
+    },
+    setSources(sources) {
+      if (sources === options.sources) return;
+      options = { ...options, sources };
+      dropStepping();
+    },
+    setOptions(next) {
+      options = { ...options, ...next };
+    },
+    drawn(run) {
+      const at = run === void 0 ? published.length : published.indexOf(run);
+      if (at <= 0) return;
+      const keep = new Set(run === void 0 ? [] : previewsOf(run));
+      closeBitmaps(published.slice(0, at).flatMap(previewsOf).filter((b) => !keep.has(b)));
+      published = published.slice(at);
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    dispose() {
+      this.reset();
+      closeBitmaps(published.flatMap(previewsOf));
+      published = [];
+    }
+  };
+}
+function useEffectRunner(opts) {
+  const { pipeline, sources, evaluators, kinds, previews, previewSize, target, requestFrame, cancelFrame } = opts;
+  const [runner] = useState(() => createEffectRunner(opts));
+  useEffect(() => {
+    runner.setPipeline(pipeline);
+  }, [runner, pipeline]);
+  useEffect(() => {
+    if (sources !== void 0) runner.setSources(sources);
+  }, [runner, sources]);
+  useEffect(() => {
+    runner.setOptions({
+      evaluators,
+      ...kinds !== void 0 ? { kinds } : {},
+      ...previews !== void 0 ? { previews } : {},
+      ...previewSize !== void 0 ? { previewSize } : {}
+    });
+  }, [runner, evaluators, kinds, previews, previewSize]);
+  const state = useSyncExternalStore(runner.subscribe, () => runner.state);
+  const last = useRef(null);
+  const loop = useVisibleRaf((now, self) => {
+    if (!runner.state.playing) return;
+    runner.advance(last.current === null ? 0 : (now - last.current) / 1e3);
+    last.current = now;
+    self.request();
+  }, {
+    ...target !== void 0 ? { target } : {},
+    ...requestFrame !== void 0 ? { requestFrame } : {},
+    ...cancelFrame !== void 0 ? { cancelFrame } : {},
+    onResume: () => {
+      last.current = null;
+    }
+  });
+  useEffect(() => {
+    last.current = null;
+    if (state.playing) loop.request();
+    else loop.cancel();
+  }, [state.playing, loop]);
+  useEffect(() => {
+    runner.drawn(state.run);
+  }, [runner, state.run]);
+  useEffect(() => () => runner.dispose(), [runner]);
+  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 };
+//# sourceMappingURL=effect.js.map
+//# sourceMappingURL=effect.js.map