@weasel-js/diagram 1.11.0 → 1.11.1

package/dist/effect.js

@@ -1,200 +1,398 @@
-import { diagramScene, DiagramView, edgeIdOf, LABEL_PLACEMENT, EDGE_DERIVE_PATH, labelCenter } from './chunk-C4NAI6NV.js';
-import { SIDE_TRACK_GAP, portSitesOf } from './chunk-NUMMW5BI.js';
+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 { useMemo, useEffect, useState, useRef } from 'react';
-import { bitmapSrc, useLatest, pointAlongPath } from '@weasel-js/core';
+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/check.ts
-function splitProblem(stage) {
-  const split = stage.split;
-  if (split === void 0) return null;
-  if (!(stage.inputs ?? []).some((p) => p.id === split.input)) return `splits on "${split.input}", which is not one of its inputs`;
-  if (split.at.length === 0) return "splits with no cuts";
-  if (!split.at.every(Number.isFinite)) return "has a cut that is not a finite number";
-  if (split.at.some((cut, i) => i > 0 && cut <= split.at[i - 1])) return "has cuts that are not in ascending order";
-  const exits = (stage.outputs ?? []).length;
-  if (exits !== split.at.length + 1) return `has ${split.at.length} cuts and ${exits} outputs; it needs ${split.at.length + 1}`;
-  return null;
-}
-function checkPipeline(pipeline) {
-  const out = [];
-  const stages = /* @__PURE__ */ new Map();
-  for (const stage of pipeline.stages) {
-    if (stages.has(stage.id)) {
-      out.push({ kind: "duplicate-stage", stage: stage.id, message: `Stage "${stage.id}" appears more than once.` });
-      continue;
-    }
-    stages.set(stage.id, stage);
-    const seen = /* @__PURE__ */ new Set();
-    for (const port of [...stage.inputs ?? [], ...stage.outputs ?? []]) {
-      if (seen.has(port.id)) {
-        out.push({ kind: "duplicate-port", stage: stage.id, port: port.id, message: `Stage "${stage.id}" has two ports called "${port.id}".` });
-      }
-      seen.add(port.id);
-    }
-    const split = splitProblem(stage);
-    if (split !== null) out.push({ kind: "bad-split", stage: stage.id, message: `Stage "${stage.id}" ${split}.` });
+// 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));
   }
-  pipeline.wires.forEach((wire, index) => {
-    const ends = [["from", "outputs", "inputs"], ["to", "inputs", "outputs"]].map(([end, own, other]) => {
-      const ref = wire[end];
-      const stage = stages.get(ref.stage);
-      if (stage === void 0) {
-        out.push({ kind: "missing-stage", wire: index, stage: ref.stage, message: `Wire ${index} names stage "${ref.stage}", which does not exist.` });
-        return null;
-      }
-      const port = (stage[own] ?? []).find((p) => p.id === ref.port);
-      if (port !== void 0) return port;
-      const wrong = (stage[other] ?? []).some((p) => p.id === ref.port);
-      out.push(wrong ? { kind: "wrong-direction", wire: index, stage: ref.stage, port: ref.port, message: `Wire ${index} ${end === "from" ? "starts at an input" : "ends at an output"}, "${ref.stage}.${ref.port}".` } : { kind: "missing-port", wire: index, stage: ref.stage, port: ref.port, message: `Wire ${index} names port "${ref.stage}.${ref.port}", which does not exist.` });
-      return null;
-    });
-    const [from, to] = ends;
-    if (from && to && from.type !== to.type) {
-      out.push({ kind: "type-mismatch", wire: index, message: `Wire ${index} joins a "${from.type}" output to a "${to.type}" input.` });
-    }
-  });
-  const groupIds = /* @__PURE__ */ new Set();
-  const groups = (pipeline.groups ?? []).filter((group) => {
-    const repeat = groupIds.has(group.id);
-    if (repeat || stages.has(group.id)) {
-      out.push({
-        kind: "duplicate-group",
-        group: group.id,
-        message: repeat ? `Group "${group.id}" appears more than once.` : `Group "${group.id}" has the id of a stage.`
-      });
-      return false;
-    }
-    groupIds.add(group.id);
-    return true;
+}
+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 };
   });
-  for (const group of groups) {
-    for (const member of group.members) {
-      if (stages.has(member) || groupIds.has(member)) continue;
-      out.push({ kind: "missing-member", group: group.id, message: `Group "${group.id}" names "${member}", which is neither a stage nor a group.` });
+  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/draw.ts
-var PALETTE = ["#6fb3ff", "#c58bff", "#f2c14e", "#5ad07f", "#ff8a6b", "#4fd1c5", "#e58fb8", "#b0bec5"];
-var UNTYPED = "#8aa2b5";
-var PROBLEM_COLOR = "#ff5d5d";
-var NORMAL = { fill: "#16222c", stroke: "#3d566b", text: "#dbe7f2", strokeWidth: 1.5 };
-var BYPASSED = { fill: "#121a21", stroke: "#3d566b", text: "#6d8496", strokeWidth: 1.5, dash: [4, 3] };
-function typeColors(pipeline, given = {}) {
-  const colors = /* @__PURE__ */ new Map();
-  for (const stage of pipeline.stages) {
-    for (const port of [...stage.inputs ?? [], ...stage.outputs ?? []]) {
-      if (colors.has(port.type)) continue;
-      colors.set(port.type, given[port.type] ?? PALETTE[colors.size % PALETTE.length]);
-    }
-  }
-  return (type) => type === void 0 ? UNTYPED : colors.get(type) ?? given[type] ?? UNTYPED;
+// 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;
 }
-function isControl(pipeline, type) {
-  return type !== void 0 && pipeline.types?.[type]?.control === true;
+
+// 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 stageStyle(stage) {
-  return stage.bypassed === true ? BYPASSED : NORMAL;
+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 wireStyle(color, control, problem) {
-  return {
-    stroke: problem ? PROBLEM_COLOR : color,
-    width: 2,
-    markerEnd: null,
-    ...control ? { dash: [5, 4] } : {}
-  };
+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 uniqueStages(pipeline) {
-  const seen = /* @__PURE__ */ new Set();
-  return pipeline.stages.filter((s) => seen.has(s.id) ? false : (seen.add(s.id), true));
+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 uniqueGroups(pipeline) {
-  const seen = new Set(pipeline.stages.map((s) => s.id));
-  return (pipeline.groups ?? []).filter((g) => seen.has(g.id) ? false : (seen.add(g.id), true));
+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 portOn(stage, id) {
-  return [...stage?.inputs ?? [], ...stage?.outputs ?? []].find((p) => p.id === 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)
+  });
 }
-function kindOf(stage) {
-  return stage.kind === "decision" || stage.kind === "source" || stage.kind === "sink" ? stage.kind : "stage";
+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 drawableWires(pipeline) {
-  const stages = new Map(uniqueStages(pipeline).map((s) => [s.id, s]));
-  const flagged = new Set(checkPipeline(pipeline).flatMap((p) => p.wire === void 0 ? [] : [p.wire]));
-  return pipeline.wires.flatMap((wire, index) => {
-    const fromStage = stages.get(wire.from.stage);
-    const toStage = stages.get(wire.to.stage);
-    const from = portOn(fromStage, wire.from.port);
-    if (fromStage === void 0 || toStage === void 0 || from === void 0 || portOn(toStage, wire.to.port) === void 0) return [];
-    return [{ wire, index, type: from.type, problem: flagged.has(index), fromStage, toStage }];
+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 });
 }
-var NO_VALUE = "\u2013";
-var VALUE_ROOM = "00000.000";
-var valueRowId = (port) => `value:${port}`;
-var previewRowId = (port) => `preview:${port}`;
-var PREVIEW_SIZE = 48;
-function runRowsOf(o) {
-  return {
-    ...o.showValues !== void 0 ? { showValues: o.showValues } : {},
-    ...o.showPreviews !== void 0 ? { showPreviews: o.showPreviews } : {},
-    ...o.previewSize !== void 0 ? { previewSize: o.previewSize } : {}
-  };
+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;
 }
-function stageRows(stage, opts) {
-  const rows = [{ kind: "label", text: stage.title, style: { bold: true } }];
-  const side = (ports) => (ports ?? []).map((p) => ({ id: p.id, label: p.label ?? p.id, type: p.type }));
-  if (opts.withPorts && ((stage.inputs?.length ?? 0) > 0 || (stage.outputs?.length ?? 0) > 0)) {
-    rows.push({ kind: "ports", left: side(stage.inputs), right: side(stage.outputs) });
+
+// 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 size = opts.previewSize ?? PREVIEW_SIZE;
-  const preview = typeof size === "number" ? { width: size, height: size } : size;
-  const seen = /* @__PURE__ */ new Set();
-  for (const p of stage.outputs ?? []) {
-    if (seen.has(p.id)) continue;
-    seen.add(p.id);
-    if (opts.showValues === true) {
-      rows.push({ kind: "field", id: valueRowId(p.id), label: p.label ?? p.id, value: NO_VALUE, room: VALUE_ROOM });
+  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;
     }
-    if (opts.showPreviews === true) rows.push({ kind: "slot", id: previewRowId(p.id), ...preview });
+    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;
   }
-  if (opts.showParams) for (const p of stage.params ?? []) rows.push({ kind: "field", label: p.label, value: p.value });
-  return rows;
+  return longest;
 }
-function exitLabel(d) {
-  if (d.wire.label !== void 0) return d.wire.label;
-  return kindOf(d.fromStage) === "decision" ? portOn(d.fromStage, d.wire.from.port)?.label ?? d.wire.from.port : void 0;
+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;
 }
-function boxNode(stage, opts) {
-  return {
-    id: stage.id,
-    outline: kindOf(stage) === "stage" ? "rect" : "stadium",
-    rows: stageRows(stage, { showParams: opts.showParams, withPorts: opts.rowPorts, ...runRowsOf(opts.run ?? {}) }),
-    // Always set: left off, a stage port named n, e, s or w would share its id with a compass default.
-    ports: opts.ports
-  };
+
+// 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 };
 }
-function wireEdge(from, to, label) {
-  return { from: from.stage, fromPort: from.port, to: to.stage, toPort: to.port, ...label !== void 0 ? { label } : {} };
+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 wireEdges(pipeline, color) {
-  return drawableWires(pipeline).map((d) => ({
-    edge: wireEdge(d.wire.from, d.wire.to, exitLabel(d)),
-    style: wireStyle(color(d.type), isControl(pipeline, d.type), d.problem)
-  }));
+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 sceneStyles(stages, edges) {
-  const nodes = new Map(stages.map((s) => [s.id, stageStyle(s)]));
-  const wires = new Map(edges.map((e) => [edgeIdOf(e.edge), e.style]));
-  return {
-    nodeStyle: (n) => nodes.get(n.id) ?? NORMAL,
-    edgeStyle: (e) => wires.get(edgeIdOf(e)) ?? wireStyle(UNTYPED, false, false)
-  };
+function canMoveInChain(doc, stage, to) {
+  return moveInChain(doc, stage, to) !== null;
 }
 
 // src/effect/symbolParts.ts
@@ -219,11 +417,11 @@ function alongLine(points, t) {
   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, place2 = spread) {
+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 [...place2(all.filter((p) => !steering.includes(p)), "left"), ...place2(steering, side)];
+  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({
@@ -482,11 +680,11 @@ function sidePorts(stage) {
   ];
 }
 var untyped = (ports) => (ports ?? []).map(({ type: _type, ...port }) => port);
-function nodeOf(stage, pipeline, branch) {
+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);
+  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) {
@@ -499,9 +697,10 @@ function lines(pipeline) {
   return [...by.values()];
 }
 var compact = (pipeline, options = {}) => {
-  const color = typeColors(pipeline, options.colors);
+  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"));
+  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 {
@@ -515,7 +714,7 @@ var compact = (pipeline, options = {}) => {
       layout: "layered",
       layoutOptions: { direction: "right", nodeGap: options.nodeGap ?? 16, rankGap: options.rankGap ?? 48 },
       router: options.router ?? "bezier",
-      ...sceneStyles(stages, edges)
+      ...sceneStyles(stages, edges, theme)
     },
     color
   };
@@ -523,9 +722,10 @@ var compact = (pipeline, options = {}) => {
 
 // src/effect/nodeGraph.ts
 var nodeGraph = (pipeline, options = {}) => {
-  const color = typeColors(pipeline, options.colors);
+  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) } : boxNode(stage, { showParams: options.showParams !== false, rowPorts: true, ports: [], run: options }));
+  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) },
@@ -537,12 +737,26 @@ var nodeGraph = (pipeline, options = {}) => {
         ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
       },
       router: options.router ?? "bezier",
-      ...sceneStyles(stages, edges)
+      ...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()) {
@@ -552,7 +766,7 @@ function paintRun(pipeline, specs, run, exits = /* @__PURE__ */ new Map()) {
   const owner = ownerOf(stages);
   const passed = /* @__PURE__ */ new Set();
   for (const spec of specs) {
-    const ends = wireEnds(spec);
+    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;
@@ -563,7 +777,7 @@ function paintRun(pipeline, specs, run, exits = /* @__PURE__ */ new Map()) {
   const values = /* @__PURE__ */ new Map();
   const previews = /* @__PURE__ */ new Map();
   for (const [id, stage] of stages) {
-    for (const p of stage.outputs ?? []) {
+    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);
@@ -585,12 +799,16 @@ function paintRun(pipeline, specs, run, exits = /* @__PURE__ */ new Map()) {
     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 cost = stages.has(id) ? run.stages[id]?.cost : void 0;
-    if (cost !== void 0) out.push(costSpec(spec, specs.filter((s) => owner(s) === id), stages.get(id), cost));
+    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;
 }
@@ -609,7 +827,7 @@ function ownerOf(stages) {
     return anchor !== void 0 && stages.has(anchor) ? anchor : void 0;
   };
 }
-function wireEnds(spec) {
+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;
@@ -633,13 +851,12 @@ function dimmed(data) {
     ...d.stroke !== void 0 ? { stroke: fade(d.stroke) } : {}
   };
 }
-function costSpec(stage, own, of, cost) {
+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 = titleData.fill ?? { paint: { color: stageStyle(of).text } };
-  const text = costText(cost);
+  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;
@@ -660,6 +877,19 @@ 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;
@@ -686,18 +916,6 @@ function useSameContent(value) {
   setKept({ value, content });
   return value;
 }
-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();
-  }, []);
-}
 function EffectChart({
   pipeline: given,
   run,
@@ -724,17 +942,7 @@ function EffectChart({
     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 missed = JSON.stringify([...unreachedStages(pipeline, run)].sort());
-  const portOptions = 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: built.color(port.type), ...faded.has(port.nodeId) ? { opacity: DIM } : {} } })
-    };
-  }, [built, missed]);
+  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(
@@ -755,17 +963,331 @@ function EffectChart({
     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, near) {
+function corridor(grid, columns, near2) {
   const ink = columns.flatMap((c) => grid.ink[c] ?? []);
-  const middle = laneAt(grid, near) + 0.5;
-  const clear = grid.edges.flatMap((y, k) => covers(ink, y) ? [] : [k]);
-  return clear.reduce((best, k) => Math.abs(k - middle) < Math.abs(best - middle) ? k : best, clear[0] ?? 0);
+  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) {
@@ -859,11 +1381,11 @@ var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y
 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 near = pointAlongPath(path, t)?.point;
-      const center = near === void 0 ? null : labelCenter(path, { at: { near }, offset: side }, size);
-      if (near === void 0 || center === null) continue;
+      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, offset: side, box };
+      if (!keepOut.some((k) => overlaps(box, k))) return { near: near2, offset: side, box };
     }
   }
   return void 0;
@@ -910,10 +1432,10 @@ function routeWires(wires, nodes, laid) {
     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 clear = path === null || label === void 0 ? void 0 : clearLabel(path, label, offset, others) ?? clearLabel(path, label, offset, keepOut);
-    if (clear === void 0) return { edge: routed, style };
-    keepOut.push(clear.box);
-    return { edge: { ...routed, labelPlacement: { at: { near: clear.near }, offset: clear.offset } }, style };
+    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 };
 }
@@ -921,11 +1443,8 @@ function routeWires(wires, nodes, laid) {
 // src/effect/lanes.ts
 var LANE_INSET = 6;
 var MARGIN = 16;
-var LANE_STYLES = [
-  { fill: "rgba(255, 255, 255, 0.035)", stroke: "rgba(255, 255, 255, 0.06)", text: "#9fbdd6", strokeWidth: 1 },
-  { fill: "rgba(255, 255, 255, 0)", stroke: "rgba(255, 255, 255, 0.06)", text: "#9fbdd6", strokeWidth: 1 }
-];
 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));
@@ -935,23 +1454,6 @@ 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 columnsOf(stages, wires, spans) {
-  const feeds = new Map(stages.map((s) => [s.id, /* @__PURE__ */ new Set()]));
-  for (const d of wires) if (d.wire.from.stage !== d.wire.to.stage) feeds.get(d.wire.to.stage).add(d.wire.from.stage);
-  const column = /* @__PURE__ */ new Map();
-  const held = [];
-  const left = [...stages];
-  while (left.length > 0) {
-    const i = Math.max(0, left.findIndex((s) => [...feeds.get(s.id)].every((f) => column.has(f))));
-    const stage = left.splice(i, 1)[0];
-    const span = spans.get(stage.id);
-    let c = Math.max(0, ...[...feeds.get(stage.id)].flatMap((f) => column.has(f) ? [column.get(f) + 1] : []));
-    while (held[c]?.some(([lo, hi]) => lo <= span[1] && span[0] <= hi)) c++;
-    (held[c] ??= []).push(span);
-    column.set(stage.id, c);
-  }
-  return column;
-}
 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]))) {
@@ -978,10 +1480,14 @@ function controlSideOf(stage, pipeline, lane) {
   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, measure) {
-  const specs = diagramScene({ nodes, edges: [] }, { layout: "none", ...measure !== void 0 ? { measure } : {} });
+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]));
-  return new Map(nodes.map((n) => {
+  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 = {
@@ -992,6 +1498,7 @@ function sizesOf(nodes, measure) {
     };
     return [n.id, { box, over }];
   }));
+  return { size, titles };
 }
 function laneNode(type, box, color) {
   return {
@@ -1010,7 +1517,7 @@ function insetsFor(edges, tracks) {
     return LANE_INSET + (k === 0 || k === edges - 1 ? n * TRACK_GAP : Math.max(0, n - 1) * TRACK_GAP / 2);
   });
 }
-function place(plan, insets) {
+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);
@@ -1029,11 +1536,13 @@ function place(plan, insets) {
   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 lefts = Array.from(widths, (_, c) => plan.start + Array.from(widths.slice(0, c), (wd) => (wd ?? 0) + plan.gap).reduce((a, b) => a + b, 0));
+  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, over } = stood.get(stage.id);
-    const box = { x: lefts[c] + (widths[c] - inkWidth(stage.id)) / 2 + over.left, y, width, height };
+    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 },
@@ -1044,25 +1553,28 @@ function place(plan, insets) {
   });
   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 };
+  return { nodes, tops, heights, columns, edges, end };
 }
 var lanes = (pipeline, options = {}) => {
-  const color = typeColors(pipeline, options.colors);
+  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) }) } : boxNode(stage, { showParams: options.showParams !== false, rowPorts: false, ports: [], run: options }));
+  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 size = sizesOf([...drawn, ...labels], options.measure);
-  const column = columnsOf(stages, drawableWires(pipeline), spans);
+  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)),
@@ -1072,23 +1584,24 @@ var lanes = (pipeline, options = {}) => {
   const router = options.router ?? "bezier";
   const wires = wireEdges(pipeline, color);
   let insets = insetsFor(rows.length + 1, /* @__PURE__ */ new Map());
-  let laid = place(plan, insets);
+  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 need = insetsFor(rows.length + 1, routed.tracks);
-    if (need.every((n, k) => n <= insets[k])) break;
-    insets = need.map((n, k) => Math.max(n, insets[k]));
-    laid = place(plan, insets);
+    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 : columns[columns.length - 1][1] + MARGIN;
+  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);
-  const laneStyle = new Map(rows.map((t, i) => [laneId(t), LANE_STYLES[i % LANE_STYLES.length]]));
+  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: uniqueGroups(pipeline) },
+    data: { nodes: [...laneNodes, ...laid.nodes], edges: edges.map((e) => e.edge), groups },
     scene: {
       layout: "none",
       router,
@@ -1096,61 +1609,17 @@ var lanes = (pipeline, options = {}) => {
       ...styles,
       nodeStyle: (n) => laneStyle.get(n.id) ?? styles.nodeStyle(n)
     },
-    color
+    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/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/rack.ts
 var SKIP_OUT = "~skip-out";
 var SKIP_IN = "~skip-in";
@@ -1164,7 +1633,14 @@ 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 { from: d.wire.from, to: d.wire.to, type: d.type, problem: d.problem, ...label !== void 0 ? { label } : {} };
+    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({
@@ -1186,22 +1662,12 @@ function rackWires(pipeline, skips) {
   }
   return wires;
 }
-function lineOf(pipeline, chain, wires) {
-  const at = new Map(chain.map((id, i) => [id, i]));
-  const mainIn = /* @__PURE__ */ new Map();
-  const mainOut = /* @__PURE__ */ new Map();
-  for (const wire of wires) {
-    if (wire.arc || isControl(pipeline, wire.type)) continue;
-    const a = at.get(wire.from.stage);
-    const b = at.get(wire.to.stage);
-    if (a === void 0 || b !== a + 1) continue;
-    if (!mainOut.has(wire.from.stage)) mainOut.set(wire.from.stage, wire.from.port);
-    if (!mainIn.has(wire.to.stage)) mainIn.set(wire.to.stage, wire.to.port);
-  }
-  return { at, mainIn, mainOut };
+function lineOf(pipeline, ordered, chain) {
+  const { mainIn, mainOut } = chainLinks(pipeline, ordered);
+  return { at: new Map(chain.map((id, i) => [id, i])), mainIn, mainOut };
 }
-function portsOf(stage, line, wires, near, far) {
-  if (!line.at.has(stage.id)) return [...spreadAt(stage.outputs ?? [], far), ...spreadAt(stage.inputs ?? [], near)];
+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 = [];
@@ -1213,7 +1679,7 @@ function portsOf(stage, line, wires, near, far) {
     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, near));
+  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));
@@ -1221,9 +1687,10 @@ function portsOf(stage, line, wires, near, far) {
   return out;
 }
 var rack = (pipeline, options = {}) => {
-  const color = typeColors(pipeline, options.colors);
+  const theme = options.theme ?? LOOK_THEME;
+  const color = typeColors(pipeline, options.colors, theme.series);
   const below = options.side !== "above";
-  const near = below ? 1 : 0;
+  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));
@@ -1232,12 +1699,12 @@ var rack = (pipeline, options = {}) => {
   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, chain, wires);
+  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 }) };
-    const ports = portsOf(stage, line, wires, near, far);
+    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;
@@ -1248,7 +1715,7 @@ var rack = (pipeline, options = {}) => {
     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),
+      edge: wireEdge(wire.from, wire.to, label, wire.id),
       style: wireStyle(color(wire.type), wire.arc === true || isControl(pipeline, wire.type), wire.problem)
     };
   });
@@ -1268,16 +1735,808 @@ var rack = (pipeline, options = {}) => {
         ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
       },
       router: "bezier",
-      ...sceneStyles(kept, edges)
+      ...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 });
 
-export { BRANCH_SYMBOLS, COMPACT_PADDING, EFFECT_LOOKS, EFFECT_MIN_SCALE, EffectChart, LANE_INSET, NO_VALUE, PREVIEW_SIZE, PROBLEM_COLOR, branchNode, checkPipeline, compact, costText, drawableWires, exitLabel, isControl, kindOf, laneId, lanes, mainChain, nodeGraph, paintRun, portOn, previewRowId, rack, stageRows, stageStyle, symbolNameFor, typeColors, uniqueGroups, uniqueStages, valueRowId, wireEdges, wireStyle };
+// 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