@neoloopy/cld-canvas 0.1.4 → 0.1.8

package/dist/view/geometry.js

@@ -6,6 +6,24 @@
  * a round arc, not a pinched parabola), trimmed to the node rims. Pure module —
  * no `obsidian`, no canvas — so the math is unit-testable.
  */
+import { materialPipeLegId } from "../engine/quantCanvasLoops";
+import { isCloud, isMaterialLink, resolveFlowSpec, sfdPositionsFor, } from "../engine/sfd";
+/** Loops whose complete representation exists in the requested canvas view. */
+export function loopsForMode(loops, mode) {
+    return mode === "sfd"
+        ? loops.filter((loop) => loop.canvasPath !== undefined &&
+            (loop.identityMode === "qualitative" || loop.canvasPath.hasMaterialLeg))
+        : loops;
+}
+/** Keep a selected badge only when that exact loop exists in the next view. */
+export function retainedLoopKeyForMode(loops, selectedKey, mode) {
+    if (selectedKey === null)
+        return null;
+    const selected = loops.find((loop) => loop.key === selectedKey);
+    return selected && loopsForMode([selected], mode).length === 1
+        ? selected.key
+        : null;
+}
 /**
  * Node (x,y) is the box center, matching the Dart painter + autoLayout.
  *
@@ -16,7 +34,7 @@
  * character-count estimate `layout.boxSize`/`autoLayout` use, so positions stay
  * deterministic.
  */
-export function buildNodeBoxes(nodes, measure) {
+export function buildNodeBoxes(nodes, measure, positions) {
     const m = new Map();
     for (const n of nodes) {
         const label = n.label || n.id;
@@ -24,7 +42,8 @@ export function buildNodeBoxes(nodes, measure) {
         const extra = n.type === "flow" ? 40 : 36;
         const textW = measure ? measure(label) : label.length * 7.2;
         const w = Math.max(60, textW + extra);
-        m.set(n.id, { id: n.id, cx: n.x, cy: n.y, w, h, type: n.type });
+        const p = positions?.get(n.id) ?? n;
+        m.set(n.id, { id: n.id, cx: p.x, cy: p.y, w, h, type: n.type });
     }
     return m;
 }
@@ -37,6 +56,105 @@ export function collectEdges(nodes) {
     }
     return out;
 }
+export function collectInfoEdges(nodes, mode) {
+    if (mode === "cld")
+        return collectEdges(nodes);
+    const byId = new Map(nodes.map((n) => [n.id, n]));
+    const out = [];
+    for (const n of nodes) {
+        for (const l of n.links) {
+            if (isMaterialLink(n, l, byId))
+                continue;
+            out.push({ id: `${n.id}__${l.to}`, source: n.id, target: l.to, link: l });
+        }
+    }
+    return out;
+}
+/**
+ * Minimum non-persistent causal projections needed to close fully resolved
+ * quantitative loops in CLD notation. A matching declared connector is already
+ * present in `collectEdges`; only legs whose resolver assigned a synthetic
+ * `cldEdgeId` are emitted here. These refs are `renderOnly`, so they cannot be
+ * selected, bowed, deleted, or serialized as authored causal links.
+ */
+export function collectCldMaterialProjectionEdges(nodes, loops) {
+    const persistedIds = new Set(collectEdges(nodes).map((edge) => edge.id));
+    const byId = new Map(nodes.map((node) => [node.id, node]));
+    const emitted = new Set();
+    const out = [];
+    for (const loop of loops) {
+        for (const leg of loop.canvasPath?.legs ?? []) {
+            if (leg.kind !== "material")
+                continue;
+            if (persistedIds.has(leg.cldEdgeId) || !emitted.add(leg.cldEdgeId))
+                continue;
+            if (!byId.has(leg.flowId) || !byId.has(leg.stockId))
+                continue;
+            out.push({
+                id: leg.cldEdgeId,
+                source: leg.flowId,
+                target: leg.stockId,
+                link: {
+                    to: leg.stockId,
+                    polarity: leg.polarity < 0 ? "-" : "+",
+                    delay: false,
+                    indirect: false,
+                    nonlinear: false,
+                },
+                renderOnly: true,
+            });
+        }
+    }
+    return out;
+}
+export function sfdRenderPositions(nodes) {
+    return sfdPositionsFor(nodes);
+}
+export function buildSfdPipeGeoms(nodes, boxes) {
+    const byId = new Map(nodes.map((n) => [n.id, n]));
+    const out = [];
+    for (const flow of nodes) {
+        if (flow.type !== "flow")
+            continue;
+        const spec = resolveFlowSpec(flow, byId);
+        if (!spec)
+            continue;
+        const valveBox = boxes.get(flow.id);
+        if (!valveBox)
+            continue;
+        const valvePoint = { x: valveBox.cx, y: valveBox.cy };
+        const fromStock = !isCloud(spec.from) && byId.get(spec.from)?.type === "stock" ? boxes.get(spec.from) : undefined;
+        const toStock = !isCloud(spec.to) && byId.get(spec.to)?.type === "stock" ? boxes.get(spec.to) : undefined;
+        const fromReal = fromStock ? { x: fromStock.cx, y: fromStock.cy } : null;
+        const toReal = toStock ? { x: toStock.cx, y: toStock.cy } : null;
+        const fromCloud = fromStock ? null : awayCloud(valvePoint, toReal, -1);
+        const toCloud = toStock ? null : awayCloud(valvePoint, fromReal, 1);
+        const fromPoint = fromStock ? rimPoint(fromStock, valvePoint) : fromCloud;
+        const toPoint = toStock ? rimPoint(toStock, valvePoint) : toCloud;
+        out.push({
+            id: `pipe__${flow.id}`,
+            flowId: flow.id,
+            from: spec.from,
+            to: spec.to,
+            fromPoint,
+            valvePoint,
+            toPoint,
+            fromCloud,
+            toCloud,
+            axisAngle: Math.atan2(toPoint.y - fromPoint.y, toPoint.x - fromPoint.x),
+        });
+    }
+    return out;
+}
+function awayCloud(flow, other, sign) {
+    if (other) {
+        const dx = flow.x - other.x;
+        const dy = flow.y - other.y;
+        const len = Math.hypot(dx, dy) || 1;
+        return { x: flow.x + (dx / len) * 80, y: flow.y + (dy / len) * 80 };
+    }
+    return { x: flow.x + sign * 80, y: flow.y };
+}
 /**
  * @param bowCache Per-edge frozen bow signs (keyed by edge id). Lone edges pick
  *   a bow side from the graph centroid **once** and reuse it; without this, a
@@ -46,8 +164,20 @@ export function collectEdges(nodes) {
 export function buildEdgeGeoms(edges, boxes, bowCache) {
     const present = edges.filter((e) => boxes.has(e.source) && boxes.has(e.target));
     const dirSet = new Set(present.map((e) => `${e.source}>${e.target}`));
+    const explicitBowSigns = new Map();
+    for (const edge of present) {
+        const curvature = edge.link.curvature;
+        if (curvature === undefined || !Number.isFinite(curvature) || curvature === 0)
+            continue;
+        const key = `${edge.source}>${edge.target}`;
+        const sign = Math.sign(curvature);
+        const previous = explicitBowSigns.get(key);
+        // Duplicate authored connectors with conflicting bows do not select the
+        // automatic reciprocal's side. The normal default remains deterministic.
+        explicitBowSigns.set(key, previous === undefined || previous === sign ? sign : 0);
+    }
     const centroid = centroidOf(boxes);
-    return present.map((e) => geomFor(e, boxes, dirSet, centroid, bowCache));
+    return present.map((e) => geomFor(e, boxes, dirSet, centroid, bowCache, explicitBowSigns.get(`${e.target}>${e.source}`)));
 }
 function centroidOf(boxes) {
     let sx = 0;
@@ -60,7 +190,7 @@ function centroidOf(boxes) {
     }
     return n === 0 ? { x: 0, y: 0 } : { x: sx / n, y: sy / n };
 }
-function geomFor(e, boxes, dirSet, centroid, bowCache) {
+function geomFor(e, boxes, dirSet, centroid, bowCache, reverseExplicitBowSign) {
     const a = boxes.get(e.source);
     const b = boxes.get(e.target);
     if (e.source === e.target)
@@ -82,9 +212,10 @@ function geomFor(e, boxes, dirSet, centroid, bowCache) {
         bow = e.link.curvature;
     }
     else if (dirSet.has(`${e.target}>${e.source}`)) {
-        // Reciprocal pair — both use the same bow sign; their opposite chord
-        // directions make the two arcs split to opposite geometric sides.
-        bow = mag;
+        // Reciprocal pair: matching signed bows split across the opposite chord
+        // normals. When the reverse connector was hand-bowed, mirror its sign so
+        // this automatic connector cannot collapse onto the authored curve.
+        bow = mag * (reverseExplicitBowSign === -1 ? -1 : 1);
     }
     else {
         // Lone edge — bow away from the graph centroid so loops read as circles,
@@ -315,6 +446,9 @@ export function computeBadges(loops, boxes, overrides) {
  * to the first. Used to highlight the loop when its badge is selected.
  */
 export function loopEdgeIds(loop) {
+    if (loop.canvasPath) {
+        return new Set(loop.canvasPath.legs.map((leg) => leg.kind === "causal" ? leg.edgeId : leg.cldEdgeId));
+    }
     const ids = loop.nodeIds;
     const out = new Set();
     for (let i = 0; i < ids.length; i++) {
@@ -322,6 +456,14 @@ export function loopEdgeIds(loop) {
     }
     return out;
 }
+/** Exact material pipe legs (`flowId` + `stockId`) belonging to a resolved loop. */
+export function loopPipeLegIds(loop) {
+    if (!loop.canvasPath)
+        return new Set();
+    return new Set(loop.canvasPath.legs
+        .filter((leg) => leg.kind === "material")
+        .map((leg) => materialPipeLegId(leg.flowId, leg.stockId)));
+}
 // ---- hit testing -----------------------------------------------------------
 export function hitNode(boxes, p) {
     const arr = [...boxes.values()];
@@ -336,6 +478,8 @@ export function hitEdge(geoms, p, scale) {
     let best = null;
     let bestD = tol;
     for (const g of geoms) {
+        if (g.renderOnly)
+            continue;
         for (let i = 0; i + 1 < g.points.length; i++) {
             const d = distToSegment(p, g.points[i], g.points[i + 1]);
             if (d < bestD) {
@@ -354,6 +498,8 @@ export function hitEdge(geoms, p, scale) {
  * pixel-perfect second press on the line.
  */
 export function nearSelectedEdge(g, p, scale) {
+    if (g.renderOnly)
+        return false;
     if (Math.hypot(g.mid.x - p.x, g.mid.y - p.y) < 26 / scale)
         return true;
     let best = Infinity;
@@ -406,3 +552,24 @@ export function nodeBounds(boxes) {
     }
     return { minX, minY, maxX, maxY };
 }
+export function sceneBounds(boxes, pipes = []) {
+    const bb = nodeBounds(boxes);
+    let { minX, minY, maxX, maxY } = bb;
+    for (const pipe of pipes) {
+        for (const p of [
+            pipe.fromPoint,
+            pipe.valvePoint,
+            pipe.toPoint,
+            pipe.fromCloud,
+            pipe.toCloud,
+        ]) {
+            if (!p)
+                continue;
+            minX = Math.min(minX, p.x - 24);
+            minY = Math.min(minY, p.y - 18);
+            maxX = Math.max(maxX, p.x + 24);
+            maxY = Math.max(maxY, p.y + 18);
+        }
+    }
+    return { minX, minY, maxX, maxY };
+}

package/dist/view/painter.d.ts

@@ -10,12 +10,14 @@
  */
 import { Camera, Point } from "./camera";
 import { Theme } from "./theme";
-import { EdgeGeom, NodeBox } from "./geometry";
+import { DiagramViewMode, EdgeGeom, NodeBox, SfdPipeGeom } from "./geometry";
 import { DetectedLoop, LoopType, VariableFile } from "../engine/types";
 export interface Scene {
+    mode: DiagramViewMode;
     nodes: VariableFile[];
     boxes: Map<string, NodeBox>;
     edges: EdgeGeom[];
+    pipes: SfdPipeGeom[];
     loops: DetectedLoop[];
     labels: Map<string, string>;
     badges: Map<string, Point>;
@@ -23,9 +25,16 @@ export interface Scene {
 /** A selected loop's members, so the painter can spotlight just that cycle. */
 export interface LoopHighlight {
     edgeIds: Set<string>;
+    /** First-class SFD material legs, keyed by exact flow + stock identity. */
+    pipeLegIds: Set<string>;
     nodeIds: Set<string>;
     type: LoopType;
 }
+/** One coherent selection payload used by plugin and Publish controllers. */
+export declare function loopHighlightFor(loop: DetectedLoop | null): LoopHighlight | null;
+export type MaterialPipeLegVisualState = "normal" | "highlighted" | "dimmed";
+/** Exact per-leg SFD state; a transfer pipe's unrelated half can recede. */
+export declare function materialPipeLegVisualState(flowId: string, stockId: string | null, highlight: LoopHighlight | null): MaterialPipeLegVisualState;
 export interface PaintUi {
     cssWidth: number;
     cssHeight: number;

package/dist/view/painter.js

@@ -9,7 +9,30 @@
  * quantitative detail lives in the ƒx node-menu modal, not on the canvas.
  */
 import { groupSwatch, swatchBorder, swatchFill, swatchInk, withAlpha } from "./theme";
+import { loopEdgeIds, loopPipeLegIds, } from "./geometry";
 import { LoopType } from "../engine/types";
+import { isCloud } from "../engine/sfd";
+import { materialPipeLegId } from "../engine/quantCanvasLoops";
+/** One coherent selection payload used by plugin and Publish controllers. */
+export function loopHighlightFor(loop) {
+    return loop
+        ? {
+            edgeIds: loopEdgeIds(loop),
+            pipeLegIds: loopPipeLegIds(loop),
+            nodeIds: new Set(loop.nodeIds),
+            type: loop.type,
+        }
+        : null;
+}
+/** Exact per-leg SFD state; a transfer pipe's unrelated half can recede. */
+export function materialPipeLegVisualState(flowId, stockId, highlight) {
+    if (!highlight)
+        return "normal";
+    if (stockId && highlight.pipeLegIds.has(materialPipeLegId(flowId, stockId))) {
+        return "highlighted";
+    }
+    return "dimmed";
+}
 const EDGE_WIDTH = [1.6, 2.5, 3.4];
 /**
  * Canvas label font. The desktop app renders its canvas text in Helvetica Neue
@@ -36,13 +59,17 @@ export function paint(ctx, scene, camera, theme, ui) {
     ctx.translate(camera.tx, camera.ty);
     ctx.scale(camera.scale, camera.scale);
     const hl = ui.loopHighlight;
-    for (const g of scene.edges) {
-        drawEdge(ctx, g, theme, g.id === ui.selectedEdgeId, hl, ui.flowPhase);
-    }
-    for (const n of scene.nodes) {
-        const box = scene.boxes.get(n.id);
-        if (box) {
-            drawNode(ctx, box, n, theme, n.id === ui.selectedNodeId, ui.liveNodeIds.has(n.id), hl ? !hl.nodeIds.has(n.id) : false, n.id === ui.selectedNodeId ? ui.pulsePhase : 0);
+    if (scene.mode === "sfd")
+        paintSfd(ctx, scene, theme, ui, hl);
+    else {
+        for (const g of scene.edges) {
+            drawEdge(ctx, g, theme, g.id === ui.selectedEdgeId, hl, ui.flowPhase);
+        }
+        for (const n of scene.nodes) {
+            const box = scene.boxes.get(n.id);
+            if (box) {
+                drawNode(ctx, box, n, theme, n.id === ui.selectedNodeId, ui.liveNodeIds.has(n.id), hl ? !hl.nodeIds.has(n.id) : false, n.id === ui.selectedNodeId ? ui.pulsePhase : 0);
+            }
         }
     }
     for (const lp of scene.loops) {
@@ -57,6 +84,30 @@ export function paint(ctx, scene, camera, theme, ui) {
             drawLinkPreview(ctx, { x: box.cx, y: box.cy }, ui.linkPreview.to, theme);
     }
 }
+function paintSfd(ctx, scene, theme, ui, hl) {
+    const pipeByFlow = new Map(scene.pipes.map((p) => [p.flowId, p]));
+    for (const p of scene.pipes)
+        drawSfdPipe(ctx, p, scene, theme, hl, ui.flowPhase);
+    for (const g of scene.edges) {
+        drawEdge(ctx, g, theme, g.id === ui.selectedEdgeId, hl, ui.flowPhase);
+    }
+    for (const n of scene.nodes) {
+        if (n.type === "flow")
+            continue;
+        const box = scene.boxes.get(n.id);
+        if (!box)
+            continue;
+        drawNode(ctx, box, n, theme, n.id === ui.selectedNodeId, ui.liveNodeIds.has(n.id), hl ? !hl.nodeIds.has(n.id) : false, n.id === ui.selectedNodeId ? ui.pulsePhase : 0);
+    }
+    for (const n of scene.nodes) {
+        if (n.type !== "flow")
+            continue;
+        const box = scene.boxes.get(n.id);
+        if (!box)
+            continue;
+        drawSfdValve(ctx, box, n, pipeByFlow.get(n.id), theme, n.id === ui.selectedNodeId, ui.liveNodeIds.has(n.id), n.id === ui.selectedNodeId ? ui.pulsePhase : 0, hl ? !hl.nodeIds.has(n.id) : false);
+    }
+}
 function drawGrid(ctx, camera, theme, ui) {
     if (camera.scale < 0.25)
         return;
@@ -205,23 +256,200 @@ function drawSubsystemMark(ctx, cx, cy, theme) {
     ctx.stroke();
 }
 function drawValve(ctx, cx, cy, theme) {
-    // Stock-and-flow valve: two triangles meeting tip-to-tip (a bowtie ▷◁).
-    // Each sub-path must be closed so its outer base edge is drawn — otherwise
-    // the four spokes read as an ✕, not a valve (matches the Dart painter).
+    // Stock-and-flow valve: two triangles meeting tip-to-tip as a vertical
+    // hourglass (⧗) — bases horizontal at top and bottom, apexes pinching at the
+    // center so the horizontal flow line threads the waist. Each sub-path must be
+    // closed so its outer base edge is drawn — otherwise the four spokes read as
+    // an ✕, not a valve (matches the Dart painter).
     ctx.strokeStyle = theme.graphite;
     ctx.lineWidth = 1.5;
     ctx.lineJoin = "round";
     ctx.beginPath();
     ctx.moveTo(cx - 6, cy - 6);
     ctx.lineTo(cx, cy);
-    ctx.lineTo(cx - 6, cy + 6);
+    ctx.lineTo(cx + 6, cy - 6);
     ctx.closePath();
-    ctx.moveTo(cx + 6, cy - 6);
+    ctx.moveTo(cx - 6, cy + 6);
     ctx.lineTo(cx, cy);
     ctx.lineTo(cx + 6, cy + 6);
     ctx.closePath();
     ctx.stroke();
 }
+function drawSfdPipe(ctx, pipe, scene, theme, highlight, flowPhase) {
+    const flow = scene.nodes.find((n) => n.id === pipe.flowId);
+    const fromStock = isCloud(pipe.from) ? null : pipe.from;
+    const toStock = isCloud(pipe.to) ? null : pipe.to;
+    const fromState = materialPipeLegVisualState(pipe.flowId, fromStock, highlight);
+    const toState = materialPipeLegVisualState(pipe.flowId, toStock, highlight);
+    drawDoubleLine(ctx, pipe.fromPoint, pipe.valvePoint, theme, fromState, highlight, flowPhase);
+    const axis = {
+        x: pipe.toPoint.x - pipe.valvePoint.x,
+        y: pipe.toPoint.y - pipe.valvePoint.y,
+    };
+    const len = Math.hypot(axis.x, axis.y) || 1;
+    const arrowLen = 12;
+    const toBase = {
+        x: pipe.toPoint.x - (axis.x / len) * arrowLen,
+        y: pipe.toPoint.y - (axis.y / len) * arrowLen,
+    };
+    drawDoubleLine(ctx, pipe.valvePoint, toBase, theme, toState, highlight, flowPhase);
+    drawPipeArrow(ctx, pipe.valvePoint, pipe.toPoint, theme, toState, highlight);
+    const sw = groupSwatch(flow?.group);
+    const tint = sw ? swatchFill(sw, theme.dark) : undefined;
+    if (pipe.fromCloud) {
+        ctx.save();
+        if (fromState === "dimmed")
+            ctx.globalAlpha = 0.16;
+        drawCloud(ctx, pipe.fromCloud, theme, tint);
+        ctx.restore();
+    }
+    if (pipe.toCloud) {
+        ctx.save();
+        if (toState === "dimmed")
+            ctx.globalAlpha = 0.16;
+        drawCloud(ctx, pipe.toCloud, theme, tint);
+        ctx.restore();
+    }
+}
+function drawDoubleLine(ctx, p0, p1, theme, state, highlight, flowPhase) {
+    const loopColor = state === "highlighted"
+        ? (highlight?.type === LoopType.reinforcing ? theme.teal : theme.amber)
+        : null;
+    ctx.save();
+    if (state === "dimmed")
+        ctx.globalAlpha = 0.16;
+    const dx = p1.x - p0.x;
+    const dy = p1.y - p0.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const off = 3;
+    const nx = (-dy / len) * off;
+    const ny = (dx / len) * off;
+    if (loopColor) {
+        ctx.beginPath();
+        ctx.moveTo(p0.x, p0.y);
+        ctx.lineTo(p1.x, p1.y);
+        ctx.strokeStyle = withAlpha(loopColor, 0.22);
+        ctx.lineWidth = 10;
+        ctx.stroke();
+    }
+    ctx.strokeStyle = loopColor ?? theme.graphite;
+    ctx.lineWidth = loopColor ? 2.4 : 1.5;
+    ctx.lineCap = "round";
+    if (loopColor) {
+        ctx.setLineDash([7, 6]);
+        ctx.lineDashOffset = -(flowPhase * 13);
+    }
+    for (const sign of [-1, 1]) {
+        ctx.beginPath();
+        ctx.moveTo(p0.x + nx * sign, p0.y + ny * sign);
+        ctx.lineTo(p1.x + nx * sign, p1.y + ny * sign);
+        ctx.stroke();
+    }
+    if (loopColor) {
+        ctx.setLineDash([]);
+        ctx.lineDashOffset = 0;
+    }
+    ctx.restore();
+}
+function drawPipeArrow(ctx, from, tip, theme, state, highlight) {
+    ctx.save();
+    if (state === "dimmed")
+        ctx.globalAlpha = 0.16;
+    const dx = tip.x - from.x;
+    const dy = tip.y - from.y;
+    const len = Math.hypot(dx, dy) || 1;
+    const ux = dx / len;
+    const uy = dy / len;
+    const px = -uy;
+    const py = ux;
+    const base = { x: tip.x - ux * 12, y: tip.y - uy * 12 };
+    ctx.beginPath();
+    ctx.moveTo(tip.x, tip.y);
+    ctx.lineTo(base.x + px * 6, base.y + py * 6);
+    ctx.lineTo(base.x - px * 6, base.y - py * 6);
+    ctx.closePath();
+    ctx.fillStyle = state === "highlighted"
+        ? (highlight?.type === LoopType.reinforcing ? theme.teal : theme.amber)
+        : theme.graphite;
+    ctx.fill();
+    ctx.restore();
+}
+function drawCloud(ctx, c, theme, tint) {
+    const puffs = [
+        [-14, 2, 9],
+        [-5, -6, 11],
+        [7, -6, 10],
+        [15, 2, 9],
+        [0, 4, 11],
+    ];
+    ctx.fillStyle = tint ?? theme.line2;
+    for (const [dx, dy, r] of puffs) {
+        circle(ctx, { x: c.x + dx, y: c.y + dy }, r);
+        ctx.fill();
+    }
+    ctx.strokeStyle = theme.line2;
+    ctx.lineWidth = 1.45;
+    for (const [dx, dy, r] of puffs) {
+        circle(ctx, { x: c.x + dx, y: c.y + dy }, r);
+        ctx.stroke();
+    }
+}
+function drawSfdValve(ctx, box, node, pipe, theme, selected, live, pulse, dim) {
+    ctx.save();
+    if (dim)
+        ctx.globalAlpha = 0.16;
+    const c = { x: box.cx, y: box.cy };
+    if (selected) {
+        const grow = 10 + 20 * pulse;
+        circle(ctx, c, grow);
+        ctx.fillStyle = withAlpha(theme.teal, 0.18 * (1 - pulse));
+        ctx.fill();
+        circle(ctx, c, 25);
+        ctx.lineWidth = 1;
+        ctx.strokeStyle = withAlpha(theme.teal, 0.55);
+        ctx.stroke();
+    }
+    if (live) {
+        circle(ctx, c, 27);
+        ctx.fillStyle = withAlpha(theme.live, 0.12);
+        ctx.fill();
+        circle(ctx, c, 22);
+        ctx.lineWidth = 2;
+        ctx.strokeStyle = theme.live;
+        ctx.stroke();
+    }
+    const angle = pipe?.axisAngle ?? 0;
+    const ux = Math.cos(angle);
+    const uy = Math.sin(angle);
+    const px = -uy;
+    const py = ux;
+    const size = 9;
+    const drawWing = (sign) => {
+        const bx = c.x + px * size * sign;
+        const by = c.y + py * size * sign;
+        ctx.moveTo(bx + ux * size, by + uy * size);
+        ctx.lineTo(c.x, c.y);
+        ctx.lineTo(bx - ux * size, by - uy * size);
+        ctx.closePath();
+    };
+    ctx.beginPath();
+    drawWing(-1);
+    drawWing(1);
+    ctx.fillStyle = theme.surface;
+    ctx.fill();
+    const sw = groupSwatch(node.group);
+    ctx.strokeStyle = sw ? swatchBorder(sw, theme.dark) : theme.ink;
+    ctx.lineWidth = 1.5;
+    ctx.lineJoin = "round";
+    ctx.stroke();
+    ctx.fillStyle = theme.ink;
+    ctx.font = "500 12px " + LABEL_FONT;
+    setLetterSpacing(ctx, LABEL_TRACKING);
+    ctx.textAlign = "center";
+    ctx.textBaseline = "top";
+    ctx.fillText(fitText(ctx, node.label, Math.max(72, box.w)), c.x, c.y + 16);
+    ctx.restore();
+}
 function drawEdge(ctx, g, theme, selected, hl, flowPhase) {
     const inLoop = hl ? hl.edgeIds.has(g.id) : false;
     const dim = hl ? !inLoop : false;
@@ -289,8 +517,8 @@ function tracePath(ctx, pts) {
         ctx.lineTo(pts[i].x, pts[i].y);
 }
 function drawArrow(ctx, tip, angle, color) {
-    const size = 8;
-    const perp = size * 0.55;
+    const size = 12;
+    const perp = size * 0.5;
     const bx = tip.x - Math.cos(angle) * size;
     const by = tip.y - Math.sin(angle) * size;
     const nx = -Math.sin(angle);
@@ -322,7 +550,7 @@ function drawPolarityChip(ctx, c, polarity, theme, selected) {
     ctx.textAlign = "center";
     ctx.textBaseline = "middle";
     // En-dash (U+2013) for the negative glyph, matching the app.
-    ctx.fillText(polarity === "-" ? "–" : "+", c.x, c.y + 0.5);
+    ctx.fillText(polarity === "-" ? "–" : polarity, c.x, c.y + 0.5);
 }
 function drawDelay(ctx, c, angle, theme) {
     ctx.save();

package/dist/view/sceneCache.d.ts

@@ -14,6 +14,7 @@
  * handed the graph + interaction caches to build from.
  */
 import { Camera, Point } from "./camera";
+import { DiagramViewMode } from "./geometry";
 import { GraphView } from "../engine/engine";
 import { Scene } from "./painter";
 /** Measure a label's pixel width at the canvas label font. */
@@ -43,7 +44,7 @@ export declare class SceneCache {
      * reference when no geometric input moved; otherwise recomputes boxes, edges,
      * and badges. Returns `null` for a null graph.
      */
-    build(graph: GraphView | null, bowSigns: Map<string, number>, badgeOverrides: Map<string, Point>): Scene | null;
+    build(graph: GraphView | null, bowSigns: Map<string, number>, badgeOverrides: Map<string, Point>, mode?: DiagramViewMode): Scene | null;
     /**
      * Fit `camera` to the current scene's node bounds. No-op (returns `false`)
      * when there's no scene, no nodes, or a zero-sized viewport — the caller keeps