@weasel-js/diagram 1.10.1 → 1.11.0

package/dist/effect.js

@@ -0,0 +1,1283 @@
+import { diagramScene, DiagramView, edgeIdOf, LABEL_PLACEMENT, EDGE_DERIVE_PATH, labelCenter } from './chunk-C4NAI6NV.js';
+import { SIDE_TRACK_GAP, portSitesOf } from './chunk-NUMMW5BI.js';
+import { polygonFromPoints } from '@weasel-js/core/math';
+import { useMemo, useEffect, useState, useRef } from 'react';
+import { bitmapSrc, useLatest, pointAlongPath } from '@weasel-js/core';
+import { releaseImageSource } from '@weasel-js/core/renderer';
+import { jsx } from 'react/jsx-runtime';
+
+// 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}.` });
+  }
+  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;
+  });
+  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 out;
+}
+
+// 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;
+}
+function isControl(pipeline, type) {
+  return type !== void 0 && pipeline.types?.[type]?.control === true;
+}
+function stageStyle(stage) {
+  return stage.bypassed === true ? BYPASSED : NORMAL;
+}
+function wireStyle(color, control, problem) {
+  return {
+    stroke: problem ? PROBLEM_COLOR : color,
+    width: 2,
+    markerEnd: null,
+    ...control ? { dash: [5, 4] } : {}
+  };
+}
+function uniqueStages(pipeline) {
+  const seen = /* @__PURE__ */ new Set();
+  return pipeline.stages.filter((s) => seen.has(s.id) ? false : (seen.add(s.id), true));
+}
+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 portOn(stage, id) {
+  return [...stage?.inputs ?? [], ...stage?.outputs ?? []].find((p) => p.id === id);
+}
+function kindOf(stage) {
+  return stage.kind === "decision" || stage.kind === "source" || stage.kind === "sink" ? stage.kind : "stage";
+}
+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 }];
+  });
+}
+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 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) });
+  }
+  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 });
+    }
+    if (opts.showPreviews === true) rows.push({ kind: "slot", id: previewRowId(p.id), ...preview });
+  }
+  if (opts.showParams) for (const p of stage.params ?? []) rows.push({ kind: "field", label: p.label, value: p.value });
+  return rows;
+}
+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 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
+  };
+}
+function wireEdge(from, to, label) {
+  return { from: from.stage, fromPort: from.port, to: to.stage, toPort: to.port, ...label !== void 0 ? { label } : {} };
+}
+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 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)
+  };
+}
+
+// src/effect/symbolParts.ts
+function along(side, i, n) {
+  const t = (i + 1) / (n + 1);
+  if (side === "left") return { u: 0, v: t };
+  if (side === "right") return { u: 1, v: t };
+  return side === "top" ? { u: t, v: 0 } : { u: t, v: 1 };
+}
+var spread = (ports, side) => ports.map((p, i) => ({ id: p.id, type: p.type, at: along(side, i, ports.length) }));
+function alongLine(points, t) {
+  const lengths = points.slice(1).map((p, i) => Math.hypot(p[0] - points[i][0], p[1] - points[i][1]));
+  let left = t * lengths.reduce((a, b) => a + b, 0);
+  for (const [i, len] of lengths.entries()) {
+    if (left <= len || i === lengths.length - 1) {
+      const k = len === 0 ? 0 : Math.min(left / len, 1);
+      const [a, b] = [points[i], points[i + 1]];
+      return { u: a[0] + (b[0] - a[0]) * k, v: a[1] + (b[1] - a[1]) * k };
+    }
+    left -= len;
+  }
+  return { u: points[0][0], v: points[0][1] };
+}
+var placeAlong = (sides) => (ports, side) => ports.map((p, i) => ({ id: p.id, type: p.type, at: alongLine(sides[side], (i + 1) / (ports.length + 1)) }));
+function inputs(stage, pipeline, options, steer, place2 = 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)];
+}
+var title = (stage, options, gap = 4) => options?.controlSide === "bottom" ? { text: stage.title, at: { u: 0.5, v: 0 }, self: { u: 0.5, v: 1 }, offset: { x: 0, y: -gap } } : { text: stage.title, at: { u: 0.5, v: 1 }, self: { u: 0.5, v: 0 }, offset: { x: 0, y: gap } };
+var DIAMOND_SIDES = placeAlong({
+  left: [[0, 0], [0, 1]],
+  top: [[0.5, 0], [0.5, 0]],
+  right: [[1, 0], [1, 1]],
+  bottom: [[0, 0.5], [0.5, 1]]
+});
+var diamond = (stage, pipeline, options) => {
+  const exits = stage.outputs ?? [];
+  const ins = inputs(stage, pipeline, options, void 0, options?.controlSide === "bottom" ? DIAMOND_SIDES : spread);
+  const topFree = !ins.some((p) => p.at.v === 0);
+  const out = exits.length === 2 ? [
+    { id: exits[0].id, type: exits[0].type, at: { u: 1, v: 0.5 } },
+    { id: exits[1].id, type: exits[1].type, at: { u: 0.5, v: 1 }, ...topFree ? { sites: [{ u: 0.5, v: 0 }] } : {} }
+  ] : spread(exits, "right");
+  return { outline: "diamond", lines: [stage.title], ports: [...ins, ...out] };
+};
+var BAND_TINTS = ["#c58bff", "#6fb3ff", "#5ad07f", "#f2c14e"];
+var styleOf = (stage, options) => options?.style ?? stageStyle(stage);
+var tintsOf = (stage, options) => options?.tints ?? (stage.bypassed === true ? [styleOf(stage, options).stroke] : BAND_TINTS);
+var canBand = (stage) => stage.split !== void 0 && splitProblem(stage) === null;
+var twoExits = (stage) => (stage.outputs ?? []).length === 2;
+var bandExits = (exits) => exits.map((p, i) => ({ id: p.id, type: p.type, at: { u: 1, v: 1 - (i + 0.5) / exits.length } }));
+var cutLabels = (cuts, n) => cuts.map((cut, k) => ({
+  text: String(cut),
+  at: { u: 0, v: 1 - (k + 1) / n },
+  self: { u: 1, v: 0.5 },
+  offset: { x: -10, y: 0 }
+}));
+var dot = (cx, cy, r) => `M${cx - r} ${cy} A${r} ${r} 0 1 0 ${cx + r} ${cy} A${r} ${r} 0 1 0 ${cx - r} ${cy} Z`;
+
+// src/effect/glyphs.ts
+var outlineOf = (points) => polygonFromPoints(points.map(([x, y]) => ({ x, y })));
+var POINT = 0.2;
+var onHexagon = placeAlong({
+  left: [[POINT, 0], [0, 0.5], [POINT, 1]],
+  right: [[1 - POINT, 0], [1, 0.5], [1 - POINT, 1]],
+  top: [[POINT, 0], [1 - POINT, 0]],
+  bottom: [[POINT, 1], [1 - POINT, 1]]
+});
+var hexagon = (stage, pipeline, options) => ({
+  outline: "hexagon",
+  lines: [stage.title],
+  ports: [...inputs(stage, pipeline, options, void 0, onHexagon), ...onHexagon(stage.outputs ?? [], "right")]
+});
+var step = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const level = (i) => 1 - (i + 0.5) / n;
+  const riser = (k) => 0.1 + 0.8 * (k + 1) / n;
+  let stairs = `M0 ${level(0)}`;
+  for (let k = 0; k < n - 1; k++) stairs += ` H${riser(k)} V${level(k + 1)}`;
+  const marks = [{ d: `${stairs} H1`, stroke: ink, strokeWidth: 2 }];
+  for (let i = 0; i < n - 1; i++) marks.push({ d: `M${riser(i)} ${level(i)} H1`, stroke: ink, dash: [2, 2], opacity: 0.5 });
+  stage.split.at.forEach((cut, k) => marks.push({
+    text: String(cut),
+    at: { u: riser(k), v: 1 },
+    self: { u: 0.5, v: 0 },
+    offset: { x: 0, y: 3 },
+    style: { fontSize: 10 }
+  }));
+  marks.push(title(stage, options, 18));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: Math.max(48, 24 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var TRIANGLE = [[0, 0], [1, 0.5], [0, 1]];
+var COMPARATOR = outlineOf(TRIANGLE);
+var EXIT_AT = 0.7;
+var onTriangle = placeAlong({
+  left: [[0, 0], [0, 1]],
+  right: [[1, 0.5], [1, 0.5]],
+  // The first part of each slanted edge, short of the exits.
+  top: [[0, 0], [0.6, 0.3]],
+  bottom: [[0, 1], [0.6, 0.7]]
+});
+var comparator = (stage, pipeline, options) => {
+  if (!twoExits(stage)) return diamond(stage, pipeline, options);
+  const outs = stage.outputs;
+  const banded = canBand(stage);
+  const [upper, lower] = banded ? [outs[1], outs[0]] : [outs[0], outs[1]];
+  const ins = inputs(stage, pipeline, options, void 0, onTriangle);
+  const signal = ins.filter((p) => p.at.u === 0);
+  const ink = styleOf(stage, options).text;
+  const marks = [];
+  if (canBand(stage)) marks.push({ text: String(stage.split.at[0]), at: { u: 0.35, v: 0.5 }, self: { u: 0.5, v: 0.5 }, color: ink });
+  else if (signal.length === 2) {
+    signal.forEach((p, i) => marks.push({ text: i === 0 ? "+" : "\u2212", at: p.at, self: { u: 0, v: 0.5 }, offset: { x: 4, y: 0 }, color: ink }));
+  }
+  marks.push(title(stage, options));
+  const exit = (p, v) => ({ id: p.id, type: p.type, at: { u: EXIT_AT, v } });
+  return {
+    outline: COMPARATOR,
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: 56,
+    ports: [...ins, exit(upper, EXIT_AT / 2), exit(lower, 1 - EXIT_AT / 2)],
+    marks
+  };
+};
+function response(i, n) {
+  const lo = 1 - i / n;
+  const hi = 1 - (i + 1) / n;
+  const skirt = 0.25 / n;
+  const rise = i === 0 ? "M0.75 1" : `M0.15 ${lo + skirt} C0.15 ${lo} 0.75 ${lo} 0.75 ${lo - skirt}`;
+  const fall = i === n - 1 ? " V0" : ` V${hi + skirt} C0.75 ${hi} 0.15 ${hi} 0.15 ${hi - skirt}`;
+  return rise + fall;
+}
+var crossover = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const tints = tintsOf(stage, options);
+  const marks = [];
+  exits.forEach((_, i) => {
+    marks.push({ d: response(i, n), stroke: tints[i % tints.length], strokeWidth: 1.5 });
+    marks.push({ d: `M0.75 ${1 - (i + 0.5) / n} H1`, stroke: ink });
+  });
+  marks.push(...cutLabels(stage.split.at, n), title(stage, options));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 56,
+    height: Math.max(56, 28 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var atPoint = (p) => [p, p];
+var onDot = placeAlong({ left: atPoint([0, 0.5]), right: atPoint([1, 0.5]), top: atPoint([0.5, 0]), bottom: atPoint([0.5, 1]) });
+var FORK = 12;
+var fork = (stage, pipeline, options) => ({
+  outline: "stadium",
+  lines: [],
+  padding: 0,
+  width: FORK,
+  height: FORK,
+  ports: [...inputs(stage, pipeline, options, void 0, onDot), ...onDot(stage.outputs ?? [], "right")],
+  marks: [{ d: dot(0.5, 0.5, 0.5), fill: styleOf(stage, options).text }, title(stage, options)]
+});
+
+// src/effect/symbols.ts
+var bar = (stage, pipeline, options) => {
+  if (!canBand(stage)) return diamond(stage, pipeline, options);
+  const cuts = stage.split.at;
+  const exits = stage.outputs ?? [];
+  const n = exits.length;
+  const ink = styleOf(stage, options).text;
+  const tints = tintsOf(stage, options);
+  const marks = [];
+  exits.forEach((_, i) => {
+    const top = 1 - (i + 1) / n;
+    marks.push({ d: `M0 ${top} H1 V${1 - i / n} H0 Z`, fill: tints[i % tints.length], opacity: 0.3 });
+  });
+  cuts.forEach((_, k) => marks.push({ d: `M-0.25 ${1 - (k + 1) / n} H1.25`, stroke: ink }));
+  marks.push(...cutLabels(cuts, n), title(stage, options));
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 24,
+    height: Math.max(72, 30 * n),
+    ports: [...inputs(stage, pipeline, options, stage.split.input), ...bandExits(exits)],
+    marks
+  };
+};
+var demux = (stage, pipeline, options) => {
+  const exits = stage.outputs ?? [];
+  return {
+    outline: "trapezoid",
+    lines: [],
+    padding: 0,
+    width: 44,
+    height: Math.max(64, 28 * exits.length),
+    ports: [...inputs(stage, pipeline, options), ...spread(exits, "right")],
+    marks: [title(stage, options)]
+  };
+};
+var LEVER_FIRST = "M0.2 0.5 L0.78 0.27";
+var CONTACT_FIRST = dot(0.8, 0.25, 0.07);
+var CONTACT_SECOND = dot(0.8, 0.75, 0.07);
+var THROWN_SECOND = /* @__PURE__ */ new Map([
+  [LEVER_FIRST, "M0.2 0.5 L0.78 0.73"],
+  [CONTACT_FIRST, CONTACT_SECOND],
+  [CONTACT_SECOND, CONTACT_FIRST]
+]);
+var thrownToSecond = (d) => THROWN_SECOND.get(d);
+var switchSymbol = (stage, pipeline, options) => {
+  if (!twoExits(stage)) return diamond(stage, pipeline, options);
+  const exits = stage.outputs ?? [];
+  const ink = styleOf(stage, options).text;
+  return {
+    outline: "rect",
+    lines: [],
+    padding: 0,
+    width: 48,
+    height: 48,
+    ports: [
+      ...inputs(stage, pipeline, options),
+      ...exits.map((p, i) => ({ id: p.id, type: p.type, at: { u: 1, v: i === 0 ? 0.25 : 0.75 } }))
+    ],
+    marks: [
+      { d: "M0 0.5 H0.2 M0.8 0.25 H1 M0.8 0.75 H1", stroke: ink },
+      { d: LEVER_FIRST, stroke: ink, strokeWidth: 2.5 },
+      { d: dot(0.2, 0.5, 0.07), fill: ink },
+      { d: CONTACT_FIRST, fill: ink },
+      { d: CONTACT_SECOND, stroke: ink },
+      title(stage, options)
+    ]
+  };
+};
+var BRANCH_SYMBOLS = Object.freeze({
+  diamond,
+  bar,
+  demux,
+  switch: switchSymbol,
+  hexagon,
+  step,
+  comparator,
+  crossover,
+  fork
+});
+var NEEDS = {
+  bar: canBand,
+  step: canBand,
+  crossover: canBand,
+  switch: twoExits,
+  comparator: twoExits
+};
+function symbolNameFor(stage, choice = "auto") {
+  const want = choice === "auto" ? canBand(stage) ? "bar" : "diamond" : choice;
+  return NEEDS[want]?.(stage) === false ? "diamond" : want;
+}
+function branchNode(stage, pipeline, choice = "auto", options) {
+  return BRANCH_SYMBOLS[symbolNameFor(stage, choice)](stage, pipeline, options);
+}
+
+// src/effect/compact.ts
+var COMPACT_PADDING = 4;
+function sidePorts(stage) {
+  return [
+    ...(stage.inputs ?? []).map((p) => ({ id: p.id, at: { u: 0, v: 0.5 } })),
+    ...(stage.outputs ?? []).map((p) => ({ id: p.id, at: { u: 1, v: 0.5 } }))
+  ];
+}
+var untyped = (ports) => (ports ?? []).map(({ type: _type, ...port }) => port);
+function nodeOf(stage, pipeline, branch) {
+  if (kindOf(stage) !== "decision") {
+    return { ...boxNode(stage, { showParams: false, rowPorts: false, ports: sidePorts(stage) }), padding: COMPACT_PADDING };
+  }
+  const symbol = branchNode(stage, pipeline, branch);
+  return { id: stage.id, ...symbol, ports: untyped(symbol.ports), padding: symbol.padding ?? COMPACT_PADDING };
+}
+function lines(pipeline) {
+  const by = /* @__PURE__ */ new Map();
+  for (const d of drawableWires(pipeline)) {
+    const exit = kindOf(d.fromStage) === "decision" ? d.wire.from.port : "";
+    const key = JSON.stringify([d.wire.from.stage, exit, d.wire.to.stage]);
+    by.set(key, [...by.get(key) ?? [], d]);
+  }
+  return [...by.values()];
+}
+var compact = (pipeline, options = {}) => {
+  const color = typeColors(pipeline, options.colors);
+  const stages = uniqueStages(pipeline);
+  const nodes = stages.map((stage) => nodeOf(stage, pipeline, options.branch ?? "hexagon"));
+  const edges = lines(pipeline).map((line) => {
+    const first = line.find((d) => !isControl(pipeline, d.type)) ?? line[0];
+    return {
+      edge: wireEdge(first.wire.from, first.wire.to, exitLabel(first)),
+      style: wireStyle(color(first.type), line.every((d) => isControl(pipeline, d.type)), line.some((d) => d.problem))
+    };
+  });
+  return {
+    data: { nodes, edges: edges.map((e) => e.edge), groups: uniqueGroups(pipeline) },
+    scene: {
+      layout: "layered",
+      layoutOptions: { direction: "right", nodeGap: options.nodeGap ?? 16, rankGap: options.rankGap ?? 48 },
+      router: options.router ?? "bezier",
+      ...sceneStyles(stages, edges)
+    },
+    color
+  };
+};
+
+// src/effect/nodeGraph.ts
+var nodeGraph = (pipeline, options = {}) => {
+  const color = typeColors(pipeline, options.colors);
+  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 edges = wireEdges(pipeline, color);
+  return {
+    data: { nodes, edges: edges.map((e) => e.edge), groups: uniqueGroups(pipeline) },
+    scene: {
+      layout: "layered",
+      layoutOptions: {
+        direction: "right",
+        ...options.nodeGap !== void 0 ? { nodeGap: options.nodeGap } : {},
+        ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
+      },
+      router: options.router ?? "bezier",
+      ...sceneStyles(stages, edges)
+    },
+    color
+  };
+};
+var DIM = 0.3;
+var COST_GAP = 2;
+var COST_SCALE = 0.8;
+function paintRun(pipeline, specs, run, exits = /* @__PURE__ */ new Map()) {
+  if (run === void 0) return [...specs];
+  const stages = new Map(uniqueStages(pipeline).map((s) => [s.id, s]));
+  const unreached = unreachedStages(pipeline, run);
+  const owner = ownerOf(stages);
+  const passed = /* @__PURE__ */ new Set();
+  for (const spec of specs) {
+    const ends = wireEnds(spec);
+    if (ends === null) continue;
+    const exit = exits.get(spec.id) ?? { stage: ends.from, port: ends.fromPort };
+    const taken = run.stages[exit.stage]?.taken;
+    if (unreached.has(ends.from) || unreached.has(ends.to) || unreached.has(exit.stage) || taken !== void 0 && exit.port !== taken) {
+      passed.add(spec.id);
+    }
+  }
+  const values = /* @__PURE__ */ new Map();
+  const previews = /* @__PURE__ */ new Map();
+  for (const [id, stage] of stages) {
+    for (const p of stage.outputs ?? []) {
+      values.set(`${id}/${valueRowId(p.id)}`, `${p.label ?? p.id}: ${run.stages[id]?.values?.[p.id] ?? NO_VALUE}`);
+      const preview = run.stages[id]?.previews?.[p.id];
+      if (preview !== void 0) previews.set(`${id}/${previewRowId(p.id)}`, preview);
+    }
+  }
+  const thrownSecond = new Set([...stages.values()].filter((s) => {
+    const outs = s.outputs ?? [];
+    return outs.length === 2 && run.stages[s.id]?.taken === outs[1].id;
+  }).map((s) => s.id));
+  const out = specs.map((spec) => {
+    const id = spec.id;
+    let next = spec;
+    const text = values.get(id);
+    if (text !== void 0 && spec.data.text !== text) next = { ...next, data: { ...next.data, text } };
+    const preview = previews.get(id);
+    if (preview !== void 0) next = { ...next, data: { image: { src: bitmapSrc(preview) } } };
+    const stage = owner(spec);
+    if (stage !== void 0 && thrownSecond.has(stage)) next = thrown(next);
+    const dependsOn = spec.dependsOn;
+    const onWire = Array.isArray(dependsOn) && dependsOn.length === 1 && passed.has(dependsOn[0]);
+    if (stage !== void 0 && unreached.has(stage) || passed.has(id) || onWire) next = { ...next, data: dimmed(next.data) };
+    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));
+  }
+  return out;
+}
+function unreachedStages(pipeline, run) {
+  if (run === void 0) return /* @__PURE__ */ new Set();
+  return new Set(uniqueStages(pipeline).map((s) => s.id).filter((id) => run.stages[id] === void 0));
+}
+function ownerOf(stages) {
+  return (spec) => {
+    const id = spec.id;
+    if (stages.has(id)) return id;
+    const parent = spec.parent;
+    if (parent !== void 0 && stages.has(parent)) return parent;
+    const deps = spec.dependsOn;
+    const anchor = Array.isArray(deps) && deps.length === 1 ? deps[0] : void 0;
+    return anchor !== void 0 && stages.has(anchor) ? anchor : void 0;
+  };
+}
+function wireEnds(spec) {
+  const trait = spec.data?.diagram;
+  const deps = spec.dependsOn;
+  if (trait?.from === void 0 || trait.to === void 0 || !Array.isArray(deps) || deps.length !== 2) return null;
+  return { from: deps[0], to: deps[1], fromPort: trait.from.port };
+}
+function thrown(spec) {
+  const trait = spec.data.diagram;
+  const d = trait?.mark === void 0 ? void 0 : thrownToSecond(trait.mark.d);
+  return d === void 0 ? spec : { ...spec, data: { ...spec.data, diagram: { ...trait, mark: { d } } } };
+}
+function dimmed(data) {
+  const fade = (part) => {
+    const paint = part?.paint;
+    if (paint === void 0) return part;
+    return { ...part, paint: { ...paint, opacity: (paint.opacity ?? 1) * DIM } };
+  };
+  const d = data;
+  return {
+    ...data,
+    ...d.fill !== void 0 ? { fill: fade(d.fill) } : {},
+    ...d.stroke !== void 0 ? { stroke: fade(d.stroke) } : {}
+  };
+}
+function costSpec(stage, own, of, cost) {
+  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 width = text.length * fontSize * 0.6;
+  const height = Math.ceil(fontSize * 1.2);
+  const box = stage.pose;
+  const top = Math.min(box.y, ...own.flatMap((s) => {
+    const p = s.pose;
+    return s !== stage && p !== void 0 && p.y + p.height <= box.y ? [p.y] : [];
+  }));
+  return {
+    id: `${stage.id}/cost`,
+    kind: "leaf",
+    layer: "main",
+    pickable: false,
+    pose: { x: box.x + box.width - width, y: top - height - COST_GAP, width, height },
+    data: { text, style, fill }
+  };
+}
+function costText(ms) {
+  if (ms >= 100) return `${Math.round(ms)} ms`;
+  return `${Number(ms.toPrecision(3))} ms`;
+}
+var EFFECT_MIN_SCALE = 0.5;
+var keys = /* @__PURE__ */ new WeakMap();
+var nextKey = 0;
+function keyOf(built) {
+  let key = keys.get(built);
+  if (key === void 0) {
+    key = nextKey++;
+    keys.set(built, key);
+  }
+  return key;
+}
+function contentOf(value) {
+  try {
+    return JSON.stringify(value) ?? null;
+  } catch {
+    return null;
+  }
+}
+function useSameContent(value) {
+  const [kept, setKept] = useState(() => ({ value, content: contentOf(value) }));
+  if (kept.value === value) return value;
+  const content = contentOf(value);
+  if (content !== null && content === kept.content) return kept.value;
+  setKept({ value, content });
+  return value;
+}
+function 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,
+  look,
+  options,
+  width,
+  height,
+  minScale = EFFECT_MIN_SCALE,
+  background,
+  selected,
+  onSelect,
+  onProblems,
+  className
+}) {
+  const pipeline = useSameContent(given);
+  const problems = useMemo(() => checkPipeline(pipeline), [pipeline]);
+  const onProblemsRef = useLatest(onProblems);
+  useEffect(() => {
+    onProblemsRef.current?.(problems);
+  }, [onProblemsRef, problems]);
+  const stageIds = useMemo(() => new Set(pipeline.stages.map((s) => s.id)), [pipeline]);
+  const built = useMemo(() => {
+    const drawn = (look ?? nodeGraph)(pipeline, options);
+    const specs = diagramScene(drawn.data, drawn.scene).map((s) => s.pickable === false || stageIds.has(s.id) ? s : { ...s, pickable: false });
+    return { specs, color: drawn.color, exits: drawn.exits };
+  }, [pipeline, look, options, stageIds]);
+  const 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 painted = useMemo(() => paintRun(pipeline, built.specs, run, built.exits), [pipeline, built, run]);
+  useReleaseReplaced(run);
+  return /* @__PURE__ */ jsx(
+    DiagramView,
+    {
+      specs: painted,
+      width,
+      height,
+      minScale,
+      ports: "show",
+      portOptions,
+      anchor: "start",
+      ...background !== void 0 ? { background } : {},
+      ...selected !== void 0 ? { selected } : {},
+      ...onSelect ? { onSelect: (id) => onSelect(id !== null && stageIds.has(id) ? id : null) } : {},
+      ...className !== void 0 ? { className } : {}
+    },
+    keyOf(built)
+  );
+}
+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) {
+  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);
+}
+var between = (a, b) => Array.from({ length: Math.abs(b - a) + 1 }, (_, i) => a + Math.sign(b - a) * i);
+function laneCourse(grid, from, to) {
+  if (from.column >= to.column) {
+    const columns2 = between(from.column, to.column);
+    const edge = corridor(grid, columns2, from.point.y);
+    return { from, to, back: true, legs: columns2.map((column) => ({ column, at: { edge } })) };
+  }
+  const columns = Array.from({ length: to.column - from.column - 1 }, (_, i) => from.column + 1 + i);
+  const blocked = (c, y, until = y) => covers(grid.ink[c] ?? [], y, until);
+  const first = columns.findIndex((c) => blocked(c, from.point.y, to.point.y));
+  if (first < 0) return void 0;
+  const want = columns.map((_, i) => i < first ? from.point.y : to.point.y);
+  const legs = columns.map((column, i) => ({ column, at: want[i] }));
+  for (let i = 0; i < columns.length; ) {
+    let j = i;
+    while (j < columns.length && blocked(columns[j], want[j])) j++;
+    if (j === i) {
+      i++;
+      continue;
+    }
+    const edge = corridor(grid, columns.slice(i, j), want[i]);
+    for (let k = i; k < j; k++) legs[k] = { column: columns[k], at: { edge } };
+    i = j;
+  }
+  return { from, to, back: false, legs };
+}
+function assignTracks(courses) {
+  const stretches = courses.map((course) => {
+    const out = [];
+    for (const { column, at } of course?.legs ?? []) {
+      if (typeof at === "number") continue;
+      const last = out[out.length - 1];
+      if (last !== void 0 && last.edge === at.edge && Math.abs(column - (course.back ? last.lo : last.hi)) === 1) {
+        if (course.back) last.lo = column;
+        else last.hi = column;
+      } else out.push({ edge: at.edge, lo: column, hi: column, track: 0 });
+    }
+    return out;
+  });
+  const ends = /* @__PURE__ */ new Map();
+  for (const s of stretches.flat().sort((a, b) => a.lo - b.lo || a.hi - b.hi)) {
+    const taken = ends.get(s.edge) ?? [];
+    const free = taken.findIndex((end) => end + 1 < s.lo);
+    s.track = free < 0 ? taken.length : free;
+    taken[s.track] = s.hi;
+    ends.set(s.edge, taken);
+  }
+  return { stretches, tracks: new Map([...ends].map(([edge, taken]) => [edge, taken.length])) };
+}
+function trackY(grid, k, j, n) {
+  const last = grid.edges.length - 1;
+  const y = grid.edges[k];
+  if (k === 0) return y + (j + 0.5) * TRACK_GAP;
+  if (k === last) return y - (j + 0.5) * TRACK_GAP;
+  return y + (j - (n - 1) / 2) * TRACK_GAP;
+}
+function straightened(points) {
+  return points.filter((p, i) => {
+    const a = points[i - 1];
+    const b = points[i + 1];
+    return a === void 0 || b === void 0 || !(a.y === p.y && p.y === b.y);
+  });
+}
+function waypointsOf(grid, course, ys) {
+  const { from, to } = course;
+  const edge = (c, side) => grid.columns[c][side];
+  if (course.back) return [{ x: edge(from.column, 1), y: ys[0] }, { x: edge(to.column, 0), y: ys[0] }];
+  const points = [];
+  const out = edge(from.column, 1);
+  if (from.normal?.x === 1 && from.point.x < out - 1) points.push({ x: (from.point.x + out) / 2, y: from.point.y }, { x: out, y: from.point.y });
+  const first = ys[0];
+  const leave = facingY(from, first);
+  const rise = Math.abs(first - leave.point.y);
+  if (upright(leave.normal) && leave.point.x + rise < out) points.push({ x: leave.point.x + rise, y: first }, { x: out, y: first });
+  course.legs.forEach(({ column }, i) => points.push({ x: edge(column, 0), y: ys[i] }, { x: edge(column, 1), y: ys[i] }));
+  const into = edge(to.column, 0);
+  const last = ys[ys.length - 1];
+  const arrive = facingY(to, last);
+  const fall = Math.abs(last - arrive.point.y);
+  if (upright(arrive.normal) && arrive.point.x - fall > into) points.push({ x: into, y: last }, { x: arrive.point.x - fall, y: last });
+  if (to.normal?.x === -1 && to.point.x > into + 1) points.push({ x: into, y: to.point.y }, { x: (to.point.x + into) / 2, y: to.point.y });
+  return straightened(points);
+}
+function routeOf(from, fromPort, to, toPort, router, waypoints) {
+  const dep = (s) => ({ node: { id: s.id, data: s.data }, pose: s.pose });
+  const edge = { data: { diagram: { from: { port: fromPort }, to: { port: toPort }, router, ...waypoints ? { waypoints } : {} } } };
+  return EDGE_DERIVE_PATH(edge, [dep(from), dep(to)]);
+}
+var overlaps = (a, b) => a.x < b.x + b.width && b.x < a.x + a.width && a.y < b.y + b.height && b.y < a.y + a.height;
+function clearLabel(path, size, offset, keepOut) {
+  for (const side of [offset, -offset]) {
+    for (const t of [0.5, 0.4, 0.6, 0.3, 0.7, 0.2, 0.8, 0.1, 0.9]) {
+      const 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 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 };
+    }
+  }
+  return void 0;
+}
+var inkOf = (id, specs) => specs.filter((s) => s.id === id || s.parent === id || String(s.id).startsWith(`${id}/mark:`)).map((s) => s.pose);
+function routeWires(wires, nodes, laid) {
+  const specs = diagramScene({ nodes, edges: wires.map((w) => w.edge) }, {
+    layout: "none",
+    router: laid.router,
+    ...laid.measure !== void 0 ? { measure: laid.measure } : {}
+  });
+  const spec = new Map(specs.map((s) => [s.id, s]));
+  const ink = new Map(nodes.map((n) => [n.id, inkOf(n.id, specs)]));
+  const grid = { ...laid.grid, ink: laid.grid.columns.map((_, c) => [...ink].flatMap(([id, b]) => laid.column.get(id) === c ? b : [])) };
+  const end = (stage, port) => {
+    const s = spec.get(stage);
+    const [site, ...sites] = portSitesOf({ id: stage, data: s.data }, s.pose, port);
+    return { column: laid.column.get(stage), point: site?.point ?? { x: 0, y: 0 }, normal: site?.normal ?? null, sites };
+  };
+  const courses = wires.map(({ edge }) => edge.from === edge.to ? void 0 : laneCourse(grid, end(edge.from, edge.fromPort), end(edge.to, edge.toPort)));
+  const { stretches, tracks } = assignTracks(courses);
+  const [top, bottom] = [grid.edges[0] ?? 0, grid.edges[grid.edges.length - 1] ?? 0];
+  const keepOut = [...ink.values()].flat().concat({ x: -1e9, y: top - 1e9, width: 2e9, height: 1e9 }, { x: -1e9, y: bottom, width: 2e9, height: 1e9 });
+  const routes = wires.map(({ edge }, w) => {
+    const course = courses[w];
+    const ys = course?.legs.map(({ column, at }) => {
+      if (typeof at === "number") return at;
+      const s = stretches[w].find((t) => t.edge === at.edge && t.lo <= column && column <= t.hi);
+      return trackY(grid, at.edge, s.track, tracks.get(at.edge));
+    });
+    const waypoints = course === void 0 ? void 0 : waypointsOf(grid, course, ys);
+    return { waypoints, path: routeOf(spec.get(edge.from), edge.fromPort, spec.get(edge.to), edge.toPort, laid.router, waypoints) };
+  });
+  const segments = routes.map(({ path }) => {
+    const c = path?.kind === "polygon" ? path.coords : [];
+    return Array.from({ length: Math.max(0, c.length / 2 - 1) }, (_, i) => {
+      const [x0, y0, x1, y1] = [c[2 * i], c[2 * i + 1], c[2 * i + 2], c[2 * i + 3]];
+      return { x: Math.min(x0, x1) - 1, y: Math.min(y0, y1) - 1, width: Math.abs(x1 - x0) + 2, height: Math.abs(y1 - y0) + 2 };
+    });
+  });
+  const edges = wires.map(({ edge, style }, w) => {
+    const { waypoints, path } = routes[w];
+    const routed = waypoints === void 0 ? edge : { ...edge, routed: waypoints };
+    const label = spec.get(`${edgeIdOf(edge)}/label`)?.pose;
+    const others = keepOut.concat(segments.flatMap((boxes, k) => k === w ? [] : boxes));
+    const offset = LABEL_PLACEMENT.offset ?? 0;
+    const 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 };
+  });
+  return { edges, tracks };
+}
+
+// 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}`;
+function laneTypes(stages, first = []) {
+  const used = [...new Set(stages.flatMap((s) => [...s.inputs ?? [], ...s.outputs ?? []].map((p) => p.type)))];
+  const lead = [...new Set(first)].filter((t) => used.includes(t));
+  return [...lead, ...used.filter((t) => !lead.includes(t))];
+}
+function spanOf(stage, lane) {
+  const at = [...stage.inputs ?? [], ...stage.outputs ?? []].map((p) => lane.get(p.type));
+  return at.length === 0 ? [0, 0] : [Math.min(...at), Math.max(...at)];
+}
+function 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]))) {
+    const short = height + insets[lo] + insets[hi + 1] - heights.slice(lo, hi + 1).reduce((a, b) => a + b, 0);
+    if (short > 0) for (let i = lo; i <= hi; i++) heights[i] += short / (hi - lo + 1);
+  }
+  return heights;
+}
+function lanePorts(stage, box, lane, band) {
+  const side = (ports, u) => ports.map((p) => {
+    const same = ports.filter((q) => q.type === p.type);
+    const [top, bottom] = band(lane.get(p.type));
+    const a = Math.max(top, box.y);
+    const b = Math.min(bottom, box.y + box.height);
+    const y = a + (b - a) * (same.indexOf(p) + 1) / (same.length + 1);
+    return { id: p.id, type: p.type, at: { u, v: (y - box.y) / box.height }, normal: { x: u === 0 ? -1 : 1, y: 0 } };
+  });
+  return [...side(stage.inputs ?? [], 0), ...side(stage.outputs ?? [], 1)];
+}
+function controlSideOf(stage, pipeline, lane) {
+  const ports = [...stage.inputs ?? [], ...stage.outputs ?? []];
+  const mean = (ps) => ps.reduce((a, p) => a + lane.get(p.type), 0) / ps.length;
+  const control = ports.filter((p) => isControl(pipeline, p.type));
+  const signal = ports.filter((p) => !isControl(pipeline, p.type));
+  return control.length > 0 && signal.length > 0 && mean(control) > mean(signal) ? "bottom" : "top";
+}
+function sizesOf(nodes, measure) {
+  const specs = diagramScene({ nodes, edges: [] }, { layout: "none", ...measure !== void 0 ? { measure } : {} });
+  const pose = new Map(specs.map((s) => [s.id, s.pose]));
+  return new Map(nodes.map((n) => {
+    const box = pose.get(n.id);
+    const ink = inkOf(n.id, specs);
+    const over = {
+      left: box.x - Math.min(...ink.map((b) => b.x)),
+      top: box.y - Math.min(...ink.map((b) => b.y)),
+      right: Math.max(...ink.map((b) => b.x + b.width)) - box.x - box.width,
+      bottom: Math.max(...ink.map((b) => b.y + b.height)) - box.y - box.height
+    };
+    return [n.id, { box, over }];
+  }));
+}
+function laneNode(type, box, color) {
+  return {
+    id: laneId(type),
+    lines: [],
+    ports: [],
+    at: { x: box.x, y: box.y },
+    width: box.width,
+    height: box.height,
+    marks: [{ text: type, at: { u: 0, v: 0.5 }, self: { u: 0, v: 0.5 }, offset: { x: MARGIN, y: 0 }, color: color(type), style: { bold: true } }]
+  };
+}
+function insetsFor(edges, tracks) {
+  return Array.from({ length: edges }, (_, k) => {
+    const n = tracks.get(k) ?? 0;
+    return LANE_INSET + (k === 0 || k === edges - 1 ? n * TRACK_GAP : Math.max(0, n - 1) * TRACK_GAP / 2);
+  });
+}
+function place(plan, insets) {
+  const { stages, size, spans, column } = plan;
+  const inkHeight = (id) => size.get(id).box.height + size.get(id).over.top + size.get(id).over.bottom;
+  const heights = laneHeights(plan.rows, plan.least, stages.map((s) => ({ span: spans.get(s.id), height: inkHeight(s.id) })), insets);
+  const tops = heights.map((_, i) => heights.slice(0, i).reduce((a, b) => a + b, 0));
+  const band = (i) => [tops[i], tops[i] + heights[i]];
+  const stood = new Map(stages.map((stage) => {
+    const { box: natural, over } = size.get(stage.id);
+    const [lo, hi] = spans.get(stage.id);
+    const top = band(lo)[0] + insets[lo];
+    const span = band(hi)[1] - insets[hi + 1] - top;
+    const kind = kindOf(stage);
+    const height = kind === "decision" ? natural.height : span - over.top - over.bottom;
+    const width = kind === "source" || kind === "sink" ? natural.width + Math.max(0, height - natural.height) : natural.width;
+    return [stage.id, { y: top + (span - height - over.top - over.bottom) / 2 + over.top, height, width, over }];
+  }));
+  const inkWidth = (id) => stood.get(id).width + stood.get(id).over.left + stood.get(id).over.right;
+  const widths = [];
+  for (const s of stages) widths[column.get(s.id)] = Math.max(widths[column.get(s.id)] ?? 0, inkWidth(s.id));
+  const 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 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 };
+    return {
+      ...plan.drawn[k],
+      at: { x: box.x, y: box.y },
+      width: box.width,
+      height: box.height,
+      ...kindOf(stage) === "decision" ? {} : { ports: lanePorts(stage, box, plan.lane, band) }
+    };
+  });
+  const columns = Array.from(widths, (wd, c) => [lefts[c], lefts[c] + (wd ?? 0)]);
+  const edges = [...tops, tops.length === 0 ? 0 : tops[tops.length - 1] + heights[heights.length - 1]];
+  return { nodes, tops, heights, columns, edges };
+}
+var lanes = (pipeline, options = {}) => {
+  const color = typeColors(pipeline, options.colors);
+  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 labels = rows.map((t) => ({ id: laneId(t), lines: [t] }));
+  const size = sizesOf([...drawn, ...labels], options.measure);
+  const column = columnsOf(stages, drawableWires(pipeline), spans);
+  const plan = {
+    stages,
+    drawn,
+    size,
+    spans,
+    column,
+    lane,
+    rows: rows.length,
+    least: Math.max(options.laneHeight ?? 48, ...labels.map((l) => size.get(l.id).box.height)),
+    gap: options.rankGap ?? 40,
+    start: 2 * MARGIN + Math.max(0, ...labels.map((l) => size.get(l.id).box.width))
+  };
+  const router = options.router ?? "bezier";
+  const wires = wireEdges(pipeline, color);
+  let insets = insetsFor(rows.length + 1, /* @__PURE__ */ new Map());
+  let laid = place(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);
+    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 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]]));
+  return {
+    data: { nodes: [...laneNodes, ...laid.nodes], edges: edges.map((e) => e.edge), groups: uniqueGroups(pipeline) },
+    scene: {
+      layout: "none",
+      router,
+      ...options.measure !== void 0 ? { measure: options.measure } : {},
+      ...styles,
+      nodeStyle: (n) => laneStyle.get(n.id) ?? styles.nodeStyle(n)
+    },
+    color
+  };
+};
+
+// 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";
+var SIDE_PORT_GAP = 24;
+var spreadAt = (ports, v) => ports.map((p, i) => ({ id: p.id, type: p.type, at: { u: (i + 1) / (ports.length + 1), v }, normal: { x: 0, y: v * 2 - 1 } }));
+function roomFor(ports) {
+  const count = (v) => ports.filter((p) => p.at.v === v && p.at.u > 0 && p.at.u < 1).length;
+  return (Math.max(count(0), count(1)) + 1) * SIDE_PORT_GAP;
+}
+function rackWires(pipeline, skips) {
+  const eaten = new Set(skips.flatMap((s) => [s.into.index, s.through.index, s.skip.index]));
+  const wires = drawableWires(pipeline).filter((d) => !eaten.has(d.index)).map((d) => {
+    const label = exitLabel(d);
+    return { from: d.wire.from, to: d.wire.to, type: d.type, problem: d.problem, ...label !== void 0 ? { label } : {} };
+  });
+  for (const s of skips) {
+    wires.push({
+      from: s.into.wire.from,
+      to: s.through.wire.to,
+      type: s.into.type,
+      problem: s.into.problem || s.through.problem,
+      exit: { stage: s.decision.id, port: s.through.wire.from.port }
+    });
+    wires.push({
+      from: { stage: s.into.wire.from.stage, port: SKIP_OUT },
+      to: { stage: s.skip.wire.to.stage, port: SKIP_IN },
+      type: s.into.type,
+      problem: s.into.problem || s.skip.problem,
+      label: `${s.decision.title}: ${exitLabel(s.skip)}`,
+      arc: true,
+      exit: { stage: s.decision.id, port: s.skip.wire.from.port }
+    });
+  }
+  return wires;
+}
+function lineOf(pipeline, 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 portsOf(stage, line, wires, near, far) {
+  if (!line.at.has(stage.id)) return [...spreadAt(stage.outputs ?? [], far), ...spreadAt(stage.inputs ?? [], near)];
+  const typed = (p, anchor) => ({ id: p.id, type: p.type, at: anchor });
+  const out = [];
+  const side = [];
+  for (const p of stage.inputs ?? []) {
+    if (p.id === line.mainIn.get(stage.id)) out.push(typed(p, { u: 0, v: 0.5 }));
+    else side.push(p);
+  }
+  for (const p of stage.outputs ?? []) {
+    if (p.id === line.mainOut.get(stage.id)) out.push(typed(p, { u: 1, v: 0.5 }));
+    else side.push(p);
+  }
+  out.push(...spreadAt(side, near));
+  const type = portOn(stage, line.mainOut.get(stage.id) ?? line.mainIn.get(stage.id) ?? "")?.type;
+  const arc = (id, u) => ({ id, at: { u, v: far }, ...type !== void 0 ? { type } : {} });
+  if (wires.some((w) => w.arc && w.from.stage === stage.id)) out.push(arc(SKIP_OUT, 0.75));
+  if (wires.some((w) => w.arc && w.to.stage === stage.id)) out.push(arc(SKIP_IN, 0.25));
+  return out;
+}
+var rack = (pipeline, options = {}) => {
+  const color = typeColors(pipeline, options.colors);
+  const below = options.side !== "above";
+  const near = below ? 1 : 0;
+  const far = below ? 0 : 1;
+  const stages = uniqueStages(pipeline);
+  const given = options.chain?.filter((id) => stages.some((s) => s.id === id));
+  const ordered = given !== void 0 && given.length > 0 ? given : mainChain(pipeline);
+  const skips = options.collapseSkips === false ? [] : skipDecisions(pipeline, ordered);
+  const gone = new Set(skips.map((s) => s.decision.id));
+  const chain = ordered.filter((id) => !gone.has(id));
+  const wires = rackWires(pipeline, skips);
+  const line = lineOf(pipeline, chain, wires);
+  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);
+    const node = boxNode(stage, { showParams: options.showParams !== false, rowPorts: false, ports, run: options });
+    const room = roomFor(ports);
+    return room > 2 * SIDE_PORT_GAP ? { ...node, width: room } : node;
+  });
+  const byId = new Map(kept.map((s) => [s.id, s]));
+  const edges = wires.map((wire) => {
+    const to = byId.get(wire.to.stage);
+    const sideInput = to !== void 0 && kindOf(to) !== "decision" && !wire.arc && wire.to.port !== line.mainIn.get(wire.to.stage) && line.at.has(wire.to.stage);
+    const label = wire.label ?? (sideInput ? portOn(to, wire.to.port)?.label ?? wire.to.port : void 0);
+    return {
+      edge: wireEdge(wire.from, wire.to, label),
+      style: wireStyle(color(wire.type), wire.arc === true || isControl(pipeline, wire.type), wire.problem)
+    };
+  });
+  return {
+    data: {
+      nodes,
+      edges: edges.map((e) => e.edge),
+      groups: uniqueGroups(pipeline).map((g) => ({ ...g, members: g.members.filter((m) => !gone.has(m)) }))
+    },
+    scene: {
+      layout: "chain",
+      layoutOptions: {
+        direction: "right",
+        chain,
+        chainSide: below ? "after" : "before",
+        ...options.nodeGap !== void 0 ? { nodeGap: options.nodeGap } : {},
+        ...options.rankGap !== void 0 ? { rankGap: options.rankGap } : {}
+      },
+      router: "bezier",
+      ...sceneStyles(kept, edges)
+    },
+    color,
+    exits: new Map(wires.flatMap((wire, i) => wire.exit === void 0 ? [] : [[edgeIdOf(edges[i].edge), wire.exit]]))
+  };
+};
+
+// 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 };
+//# sourceMappingURL=effect.js.map
+//# sourceMappingURL=effect.js.map