@wildo-ai/saas-frontend-lib 1.1.10 → 1.1.11

package/dist/esm/components/flows-actors/graph-viewer.js

@@ -0,0 +1,431 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { MarkerType, useReactFlow, useStore, useStoreApi } from "@xyflow/react";
+import { ButtonSize, FrontendComponentType } from "@wildo-ai/presets-components-models";
+import { FlowsActors_Status } from "@wildo-ai/saas-models";
+import { Button, ButtonVariants_Variant } from "../../components/actions/button.js";
+import { AI_Canvas, GraphCanvasInteraction, GraphLegendMark } from "../../components/ai-elements/graph/canvas.js";
+import { AI_Controls } from "../../components/ai-elements/graph/controls.js";
+import { AI_Node, GraphHandleRole, GraphNodeSide } from "../../components/ai-elements/graph/node.js";
+import { GraphViewEdgeKind, GraphViewNodeKind } from "../../core/flows-actors/graph-view.model.js";
+import { GraphViewLayoutDirection, graphViewParentOf, layoutGraphView } from "../../core/flows-actors/graph-view.layout.js";
+import { useI18n } from "../../core/i18n/useI18n.js";
+import { useUI } from "../../core/ui/useUI.js";
+import { cn } from "../../core/ui/cn.js";
+import { AI_FlowNodeStatusBadge, flowsActorsStatusColour, flowsActorsStatusDotClass, useFlowsActorsStatusWord } from "./flow-node-badges.js";
+import { GraphViewerPresentation, graphViewerEdgeLabelKey } from "./graph-viewer.models.js";
+//===============================================================
+//  AI_GraphViewer — a GraphView, drawn read-only (#2529)
+//
+// The one way the engine draws a process: a plan and its dependencies, a run and its suspension, a flow, a
+// choreography's rounds. Hosts build a `GraphView` with an adapter and hand it here; nothing in this file knows which
+// record the graph came from.
+//
+// What it guarantees, each the answer to a defect of the renderers it replaces:
+// - every edge leaves from the port it names, so a branch's edges leave from separate points;
+// - nodes are placed in ranks at the size they are drawn at (`layoutGraphView`, measured once rendered), and a new
+//   graph is drawn over the last drawing rather than in place of it, so a live run's updates neither blank the canvas
+//   nor take the reader's focus or zoom away;
+// - a step waiting on a person is drawn amber and says so, and a run waiting on a decision says so above the drawing;
+// - selection is the HOST's (`selectedNodeId`), so it follows navigation instead of a click the page forgot;
+// - a node is reached with the keyboard (Tab), brought into view when it is off the visible part of the drawing, and
+//   opened with Enter or Space; the whole process can be read as a list, without the drawing;
+// - colours follow the theme, light or dark, and nothing moves for a reader who asked for reduced motion.
+//===============================================================
+const COMPONENT = FrontendComponentType.LOW_LEVEL_AI_GRAPH_VIEWER;
+/** The width a step is drawn at; its height is what its content needs, measured once rendered. */
+export const GRAPH_VIEWER_NODE_WIDTH = 240;
+/** The height assumed for a step before it has been measured, so the first layout is close to the final one. */
+const GRAPH_VIEWER_NODE_ESTIMATED_HEIGHT = 72;
+/** The React Flow node types this viewer registers. */
+var GraphViewerNodeType;
+(function (GraphViewerNodeType) {
+    GraphViewerNodeType["STEP"] = "graphViewerStep";
+    GraphViewerNodeType["GROUP"] = "graphViewerGroup";
+})(GraphViewerNodeType || (GraphViewerNodeType = {}));
+/** How each edge kind is drawn. Total over the kinds, so a kind added to the model must be given a look here. */
+const EDGE_LOOK = {
+    [GraphViewEdgeKind.DEPENDS_ON]: { dashed: false, colour: "var(--muted-foreground)", strokeClassName: "stroke-muted-foreground", labelled: false },
+    [GraphViewEdgeKind.FLOW]: { dashed: false, colour: "var(--muted-foreground)", strokeClassName: "stroke-muted-foreground", labelled: false },
+    [GraphViewEdgeKind.NEXT_ROUND]: { dashed: false, colour: "var(--muted-foreground)", strokeClassName: "stroke-muted-foreground", labelled: false },
+    // A lane going round in circles is the one edge a reader must not miss: amber, dashed, and worded on the drawing.
+    [GraphViewEdgeKind.REPEATS_INPUT_STATE]: { dashed: true, colour: "var(--warning)", strokeClassName: "stroke-warning", labelled: true },
+    // A catalog draws five relations at once, so each is told apart by its own mark: what a playbook writes in the primary
+    // colour, what it reads plain, what it waits for dashed, a decision that decides what it waits for dashed in the
+    // information colour, and the children a composite runs in the information colour, solid.
+    [GraphViewEdgeKind.PRODUCES]: { dashed: false, colour: "var(--primary)", strokeClassName: "stroke-primary", labelled: false },
+    [GraphViewEdgeKind.READS]: { dashed: false, colour: "var(--muted-foreground)", strokeClassName: "stroke-muted-foreground", labelled: false },
+    [GraphViewEdgeKind.GATES]: { dashed: true, colour: "var(--muted-foreground)", strokeClassName: "stroke-muted-foreground", labelled: false },
+    [GraphViewEdgeKind.CONDITIONS]: { dashed: true, colour: "var(--info)", strokeClassName: "stroke-info", labelled: false },
+    [GraphViewEdgeKind.ADMITS]: { dashed: false, colour: "var(--info)", strokeClassName: "stroke-info", labelled: false },
+};
+/** The sides a step's incoming and outgoing edges attach to, for the direction its ranks run in. */
+const PORT_SIDES = {
+    [GraphViewLayoutDirection.RIGHT]: { entry: GraphNodeSide.LEFT, exit: GraphNodeSide.RIGHT },
+    [GraphViewLayoutDirection.DOWN]: { entry: GraphNodeSide.TOP, exit: GraphNodeSide.BOTTOM },
+};
+/** A node's handles: one per port, incoming ports on its entry side and outgoing ones on its exit side. */
+export function graphViewerNodeHandles(node, direction) {
+    const sides = PORT_SIDES[direction];
+    return [
+        ...node.inPorts.map((port) => ({ id: port.id, role: GraphHandleRole.TARGET, side: sides.entry })),
+        ...node.outPorts.map((port) => ({ id: port.id, role: GraphHandleRole.SOURCE, side: sides.exit })),
+    ];
+}
+/**
+ * A GraphView, placed, as React Flow's nodes and edges. Pure, so what is drawn is testable without a canvas.
+ *
+ * A node holding others is a GROUP sized by the layout; its children are placed relative to it, after it in the list,
+ * which is the order React Flow requires. Every edge names the ports it joins, so it attaches to the handle drawn for
+ * that port, and carries an arrow in its kind's colour.
+ *
+ * The layout may be the PREVIOUS graph's while the new one is laid out: a node it holds no place for is not drawn yet,
+ * nor is a node whose group is not drawn, nor an edge missing an end. Each appears with the next layout.
+ *
+ * Every node CARRIES its measured size: a step what React Flow last measured it at, a group the size its layout gave
+ * it. React Flow keeps a node's `measured` (and its handles) when the node object brings it; without it, every new
+ * object — every update of a live run, every change of selection — is hidden, measured again and redrawn (#2529
+ * re-review F4), and a size that drops to nothing and comes back is the stall F1 was. What a step carries must be what
+ * React Flow measured LAST, or adopting the node puts the older size back over the newer one and nothing measures it
+ * again; {@link graphViewerApplyMeasurements} keeps it so.
+ */
+export function graphViewerFlowElements(graph, layout, options) {
+    const groups = new Set(layout.parentOf.values());
+    const depth = (id) => {
+        let count = 0;
+        for (let parent = layout.parentOf.get(id); parent !== undefined; parent = layout.parentOf.get(parent))
+            count += 1;
+        return count;
+    };
+    // Parents before children (React Flow resolves a child's position from a parent it has already seen); otherwise the
+    // graph's own order, which is meaningful (a plan's order, a flow's declaration order).
+    const ordered = graph.nodes.map((node, index) => ({ node, index })).sort((left, right) => depth(left.node.id) - depth(right.node.id) || left.index - right.index);
+    const drawn = new Set();
+    const nodes = ordered.flatMap(({ node }) => {
+        const placement = layout.placements.get(node.id);
+        if (!placement)
+            return [];
+        const parentId = layout.parentOf.get(node.id);
+        // Parents come first, so a parent not drawn by now is not drawn at all.
+        if (parentId !== undefined && !drawn.has(parentId))
+            return [];
+        drawn.add(node.id);
+        const isGroup = groups.has(node.id);
+        const measured = isGroup ? { width: placement.width, height: placement.height } : options.measured?.get(node.id);
+        return [{
+                id: node.id,
+                type: isGroup ? GraphViewerNodeType.GROUP : GraphViewerNodeType.STEP,
+                position: { x: placement.x, y: placement.y },
+                data: { node },
+                selected: node.id === options.selectedNodeId,
+                style: isGroup ? { width: placement.width, height: placement.height } : { width: GRAPH_VIEWER_NODE_WIDTH },
+                ...(measured ? { measured } : {}),
+                ...(parentId !== undefined ? { parentId, extent: "parent" } : {}),
+            }];
+    });
+    const edges = graph.edges.filter((edge) => drawn.has(edge.source) && drawn.has(edge.target)).map((edge) => {
+        const look = EDGE_LOOK[edge.kind];
+        return {
+            id: edge.id,
+            source: edge.source,
+            sourceHandle: edge.sourcePort,
+            target: edge.target,
+            targetHandle: edge.targetPort,
+            markerEnd: { type: MarkerType.ArrowClosed, color: look.colour },
+            style: { stroke: look.colour, ...(look.dashed ? { strokeDasharray: "6 4" } : {}) },
+            ...(look.labelled ? { label: options.edgeLabel(edge.kind) } : {}),
+            data: { kind: edge.kind },
+        };
+    });
+    return { nodes, edges };
+}
+const GraphViewerNodeContext = React.createContext(null);
+function useGraphViewerNodeContext() {
+    const context = React.useContext(GraphViewerNodeContext);
+    if (!context)
+        throw new Error("A graph viewer node is drawn outside AI_GraphViewer");
+    return context;
+}
+export const AI_GraphViewer = ({ graph, direction, title, selectedNodeId, onNodeActivate, onDecisionActivate, renderNodeBody, minimap, defaultPresentation = GraphViewerPresentation.GRAPH, className, }) => {
+    const { tComponent, isReady, formatDateTime, formatList } = useI18n({ component: COMPONENT });
+    const { statusWord, isReady: statusWordsReady } = useFlowsActorsStatusWord();
+    const [presentation, setPresentation] = React.useState(defaultPresentation);
+    const words = React.useCallback((key, params) => tComponent(COMPONENT, key, params), [tComponent]);
+    const nodesById = React.useMemo(() => new Map(graph.nodes.map((node) => [node.id, node])), [graph]);
+    const nameOf = React.useCallback((id) => nodesById.get(id)?.label ?? id, [nodesById]);
+    const activate = React.useCallback((node) => onNodeActivate?.(node), [onNodeActivate]);
+    const list = React.useCallback((items) => formatList(items), [formatList]);
+    const context = React.useMemo(() => ({ direction, nameOf, activate, words, list, ...(renderNodeBody ? { renderNodeBody } : {}) }), [direction, nameOf, activate, words, list, renderNodeBody]);
+    if (!isReady || !statusWordsReady)
+        return null;
+    const legend = graphViewerLegend(graph, words("legendTitle"), statusWord, (kind) => words(graphViewerEdgeLabelKey(kind)));
+    const decision = graph.awaitingDecision;
+    return (_jsx(GraphViewerNodeContext.Provider, { value: context, children: _jsxs("section", { "aria-label": title, className: cn("flex h-full min-h-0 flex-col gap-2", className), "data-graph-viewer": true, children: [_jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [decision ? (_jsxs("div", { className: "flex flex-wrap items-center gap-2 rounded-md border border-warning bg-warning/10 px-3 py-2 text-sm", "data-graph-viewer-awaiting": true, role: "status", children: [_jsx("span", { className: cn("inline-block size-2 shrink-0 rounded-full", flowsActorsStatusDotClass(FlowsActors_Status.AWAITING_APPROVAL)), "aria-hidden": true }), _jsx("span", { className: "font-medium", children: words("awaitingDecision", { title: decision.title }) }), _jsx("span", { className: "text-muted-foreground", children: words("awaitingDecisionSince", { since: formatDateTime(decision.requestedAt) }) }), onDecisionActivate && (_jsx(Button, { type: "button", size: ButtonSize.SM, variant: ButtonVariants_Variant.OUTLINE, onClick: () => onDecisionActivate(decision.decisionId), children: words("openDecision") }))] })) : _jsx("span", {}), _jsx("div", { className: "flex gap-1", role: "group", children: [GraphViewerPresentation.GRAPH, GraphViewerPresentation.LIST].map((option) => (_jsx(Button, { "aria-pressed": presentation === option, size: ButtonSize.SM, type: "button", variant: presentation === option ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST, onClick: () => setPresentation(option), children: words(option === GraphViewerPresentation.GRAPH ? "presentationGraph" : "presentationList") }, option))) })] }), graph.nodes.length === 0 ? (_jsx("p", { className: "rounded-md border p-4 text-sm text-muted-foreground", children: words("noNodes") })) : presentation === GraphViewerPresentation.LIST ? (_jsx(GraphViewerList, { graph: graph, selectedNodeId: selectedNodeId, title: title })) : (_jsx(GraphViewerCanvas, { graph: graph, direction: direction, legend: legend, minimap: minimap, selectedNodeId: selectedNodeId }))] }) }));
+};
+/** The legend: the statuses the drawing holds, then the edge kinds it holds, each in its own words. */
+export function graphViewerLegend(graph, title, statusWord, edgeWord) {
+    const statuses = new Set(graph.nodes.flatMap((node) => (node.status ? [node.status] : [])));
+    const kinds = new Set(graph.edges.map((edge) => edge.kind));
+    return {
+        title,
+        entries: [
+            ...Object.values(FlowsActors_Status).filter((status) => statuses.has(status)).map((status) => ({
+                id: `status:${status}`, label: statusWord(status), mark: GraphLegendMark.DOT, markClassName: flowsActorsStatusDotClass(status),
+            })),
+            ...Object.values(GraphViewEdgeKind).filter((kind) => kinds.has(kind)).map((kind) => ({
+                id: `edge:${kind}`,
+                label: edgeWord(kind),
+                mark: EDGE_LOOK[kind].dashed ? GraphLegendMark.DASHED_LINE : GraphLegendMark.LINE,
+                markClassName: EDGE_LOOK[kind].strokeClassName,
+            })),
+        ],
+    };
+}
+/** The size a step is laid out at before it has been drawn and measured. */
+const ESTIMATED_STEP_SIZE = { width: GRAPH_VIEWER_NODE_WIDTH, height: GRAPH_VIEWER_NODE_ESTIMATED_HEIGHT };
+/** Nothing placed: what the canvas draws before the first layout. */
+const NO_LAYOUT = { placements: new Map(), parentOf: new Map(), width: 0, height: 0 };
+/** Nothing measured yet. */
+const NO_MEASURED_SIZES = new Map();
+/**
+ * What each step was last measured at, after React Flow's node changes: a `dimensions` change is a measurement, applied
+ * the way React Flow's own `applyNodeChanges` applies it to a controlled node's `measured`. Any other change leaves it,
+ * and the same map comes back when nothing was measured, so a selection or a drag does not redraw the canvas.
+ *
+ * Taken from the change, not read back from the node lookup afterwards (#2529 re-review F6). React Flow writes its lookup
+ * and reports the change in one call, so a size kept this way is never older than the lookup's. Read back in an effect,
+ * it lagged by a render: a step that grew, then a new node object for it before the effect ran (a live run's next
+ * update), carried the OLD size, React Flow adopted it over the new one, and the step's box did not change again, so it
+ * was never measured again. The layout then placed it at its old height and the steps below overlapped it.
+ */
+export function graphViewerApplyMeasurements(current, changes) {
+    let next = null;
+    for (const change of changes) {
+        if (change.type !== "dimensions" || !change.dimensions)
+            continue;
+        const { width, height } = change.dimensions;
+        if (!width || !height)
+            continue;
+        const known = (next ?? current).get(change.id);
+        if (known?.width === width && known.height === height)
+            continue;
+        next ??= new Map(current);
+        next.set(change.id, { width, height });
+    }
+    return next ?? current;
+}
+/**
+ * What decides where things are drawn: the direction, every node with the group it sits in, and every edge. A status,
+ * a label or a host rebuilding the same graph as a new object is not part of it, so a live run's updates leave the
+ * drawing where it is. A label that changes a step's height still moves things, through its measured size.
+ */
+export function graphViewerStructureKey(graph, direction) {
+    return [
+        direction,
+        graph.nodes.map((node) => `${node.id}<${node.parentId ?? ""}`).join(","),
+        graph.edges.map((edge) => edge.id).join(","),
+    ].join("|");
+}
+/**
+ * The drawing. It is laid out by `GraphLayoutDriver`, inside the canvas where the measured sizes are; until the first
+ * layout it is an empty canvas, and afterwards a new graph is drawn over the last layout while its own is computed. It
+ * is never unmounted for a new graph, which would drop the reader's focus and zoom on every update of a live run.
+ */
+const GraphViewerCanvas = ({ graph, direction, legend, minimap, selectedNodeId, }) => {
+    const { words } = useGraphViewerNodeContext();
+    const { prefersReducedMotion } = useUI();
+    const [layout, setLayout] = React.useState(NO_LAYOUT);
+    const [measured, setMeasured] = React.useState(NO_MEASURED_SIZES);
+    const onNodesChange = React.useCallback((changes) => { setMeasured((current) => graphViewerApplyMeasurements(current, changes)); }, []);
+    // Where the last fit left the view, the driver's own or the canvas's refit after a resize: a viewport elsewhere is the reader's.
+    const fitted = React.useRef(null);
+    const onRefit = React.useCallback((viewport) => { fitted.current = viewport; }, []);
+    const elements = React.useMemo(() => graphViewerFlowElements(graph, layout, { selectedNodeId, measured, edgeLabel: (kind) => words(graphViewerEdgeLabelKey(kind)) }), [graph, layout, measured, selectedNodeId, words]);
+    const fitViewOptions = React.useMemo(() => ({ padding: 0.15, ...(prefersReducedMotion ? { duration: 0 } : {}) }), [prefersReducedMotion]);
+    return (_jsx("div", { className: "relative min-h-80 flex-1 overflow-hidden rounded-md border", "data-graph-viewer-canvas": true, children: _jsxs(AI_Canvas, { edges: elements.edges, fitViewOptions: fitViewOptions, interaction: GraphCanvasInteraction.VIEW, legend: legend, minimap: minimap ? { nodeColor: (node) => flowsActorsStatusColour(String(node.data.node.status ?? "")) } : undefined, nodeTypes: GRAPH_VIEWER_NODE_TYPES, nodes: elements.nodes, onNodesChange: onNodesChange, onRefit: onRefit, 
+            // The step itself is the focusable control (it is opened with Enter or Space); React Flow's own wrapper
+            // being focusable too would make Tab stop twice on every step. The step brings itself into view instead.
+            nodesFocusable: false, children: [_jsx(GraphLayoutDriver, { direction: direction, fitted: fitted, fitViewOptions: fitViewOptions, graph: graph, onLayout: setLayout }), _jsx(AI_Controls, {})] }) }));
+};
+/**
+ * Whether the graph must be laid out again: its structure changed ({@link graphViewerStructureKey}), or a drawn step's
+ * size did. Never while a drawn step is not measured yet (a size of 0 is "not drawn yet", not "drawn empty"): its real
+ * size is one frame away. `sizes` is the canvas's `id:WxH|…` signature of what is drawn; with nothing drawn it is
+ * empty, and a new structure is then laid out at the estimated sizes, since nothing can be measured until it is placed.
+ */
+export function graphViewerRelayoutDue(last, structure, sizes) {
+    if (/:0x|x0(\||$)/.test(sizes))
+        return false;
+    return last.structure !== structure || last.sizes !== sizes;
+}
+/** The measured size of every drawn node, from React Flow's node lookup; a node not measured yet is absent. */
+export function graphViewerMeasuredSizes(nodeLookup) {
+    const sizes = new Map();
+    for (const node of nodeLookup.values()) {
+        const { width, height } = node.measured;
+        if (width && height)
+            sizes.set(node.id, { width, height });
+    }
+    return sizes;
+}
+/** Whether the viewport is where the last fit left it: the reader has not moved the map since. */
+function sameViewport(left, right) {
+    return Math.abs(left.x - right.x) < 0.5 && Math.abs(left.y - right.y) < 0.5 && Math.abs(left.zoom - right.zoom) < 0.001;
+}
+/**
+ * Lays the graph out, at the sizes its steps were DRAWN at, and fits it.
+ *
+ * The sizes come from React Flow's node LOOKUP, where it records what it measured. They are not on the nodes
+ * `getNodes()` returns: in a controlled canvas those are the host's own objects, which React Flow never writes back to,
+ * so a layout read from them used the estimate for every step and tall steps overlapped (#2529 review).
+ *
+ * Keyed on the measured sizes and the structure, not on React Flow's "initialized" flag or the graph's identity: a step
+ * is first drawn as the skeleton of its lazily loaded card, so its first measurement is the skeleton's; and a host
+ * rebuilding the same graph is not a new drawing. The passes stop once every step is drawn at its final size.
+ *
+ * A pass is recorded as done only when its layout LANDS (#2529 re-review F1). Recorded when it started, a pass
+ * cancelled before landing — the new node objects it causes are measured again, so the sizes blink to nothing and
+ * cancel it — left the new structure recorded as laid out, and it was never drawn.
+ *
+ * It fits the view after a pass that changed the structure; after one that only changed sizes, only when the reader
+ * has not moved the map since the last fit, so a reader who zoomed in on a step keeps it. `fitted` is where the last
+ * fit left the view: this driver's own, or the canvas's refit after a resize of its frame, which the canvas reports
+ * (`onRefit`). Forgetting the last fit on a resize instead read every later viewport as unmoved, so a reader who zoomed
+ * after a resize lost the zoom to the next step that grew (#2529 re-review F7).
+ */
+const GraphLayoutDriver = ({ graph, direction, fitted, fitViewOptions, onLayout, }) => {
+    const sizes = useStore((state) => {
+        const parts = [];
+        for (const node of state.nodeLookup.values())
+            parts.push(`${node.id}:${Math.round(node.measured.width ?? 0)}x${Math.round(node.measured.height ?? 0)}`);
+        return parts.join("|");
+    });
+    const store = useStoreApi();
+    const { fitView, getViewport } = useReactFlow();
+    const structure = graphViewerStructureKey(graph, direction);
+    const last = React.useRef({ structure: null, sizes: "" });
+    // The graph is read when a pass is due, never as a reason for one: its identity changes on every update of a live run.
+    const latestGraph = React.useRef(graph);
+    latestGraph.current = graph;
+    React.useEffect(() => {
+        if (!graphViewerRelayoutDue(last.current, structure, sizes))
+            return;
+        const structureChanged = last.current.structure !== structure;
+        const measured = graphViewerMeasuredSizes(store.getState().nodeLookup);
+        let cancelled = false;
+        void layoutGraphView(latestGraph.current, { direction, nodeSize: (node) => measured.get(node.id) ?? ESTIMATED_STEP_SIZE }).then((result) => {
+            if (cancelled)
+                return;
+            last.current = { structure, sizes };
+            onLayout(result);
+            const readerMoved = fitted.current !== null && !sameViewport(fitted.current, getViewport());
+            if (!structureChanged && readerMoved)
+                return;
+            requestAnimationFrame(() => {
+                void fitView(fitViewOptions).then(() => { fitted.current = getViewport(); });
+            });
+        });
+        return () => { cancelled = true; };
+        // `onLayout` and the fit options are read when a pass is due; a pass is keyed on the structure and the sizes.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [structure, sizes]);
+    return null;
+};
+/**
+ * Whether a node's box is wholly inside the visible part of the canvas. `transform` is React Flow's `[x, y, zoom]`;
+ * `box` is in the drawing's coordinates, `frame` in the screen's.
+ */
+export function graphViewerBoxIsVisible(box, transform, frame) {
+    const [tx, ty, zoom] = transform;
+    const left = box.x * zoom + tx;
+    const top = box.y * zoom + ty;
+    return left >= 0 && top >= 0 && left + box.width * zoom <= frame.width && top + box.height * zoom <= frame.height;
+}
+/**
+ * Whether focus arrived the way `:focus-visible` means it — from the keyboard, not a pointer. A browser that cannot
+ * answer (an engine without the selector) is treated as keyboard focus, so the step is still brought into view.
+ */
+export function graphViewerFocusIsVisible(target) {
+    try {
+        return target.matches(":focus-visible");
+    }
+    catch {
+        return true;
+    }
+}
+/**
+ * Brings a focused step into view. React Flow does this for its own focusable node wrapper, which this viewer turns
+ * off (the step is the control), and it resets the pane's scroll, so without this Tab could land on a step the reader
+ * cannot see. The zoom is kept; only the map moves.
+ */
+function useRevealStepOnFocus() {
+    const store = useStoreApi();
+    const { setCenter } = useReactFlow();
+    const { prefersReducedMotion } = useUI();
+    return React.useCallback((nodeId, target) => {
+        // Keyboard focus only, as React Flow's own does: a click or a drag that starts on a clipped step is the reader
+        // moving the map, and centring it would undo that (#2529 re-review F2).
+        if (!graphViewerFocusIsVisible(target))
+            return;
+        const { nodeLookup, transform, width, height } = store.getState();
+        const node = nodeLookup.get(nodeId);
+        if (!node)
+            return;
+        const box = { ...node.internals.positionAbsolute, width: node.measured.width ?? 0, height: node.measured.height ?? 0 };
+        if (graphViewerBoxIsVisible(box, transform, { width, height }))
+            return;
+        void setCenter(box.x + box.width / 2, box.y + box.height / 2, { zoom: transform[2], duration: prefersReducedMotion ? 0 : 200 });
+    }, [store, setCenter, prefersReducedMotion]);
+}
+/** One step: its name, its status, what it waits on, and what the host shows under it. */
+const GraphViewerStep = ({ data, selected }) => {
+    const { direction, nameOf, activate, renderNodeBody, words, list } = useGraphViewerNodeContext();
+    const { statusWord } = useFlowsActorsStatusWord();
+    const reveal = useRevealStepOnFocus();
+    const node = data.node;
+    const waiting = node.status === FlowsActors_Status.AWAITING_APPROVAL;
+    return (_jsx(AI_Node, { className: cn("w-full", 
+        // A step waiting on a person is the one a reader looks for first: an amber edge as well as the amber badge.
+        waiting && "border-2 border-warning", selected && "ring-2 ring-primary"), "data-graph-viewer-step": node.id, handles: graphViewerNodeHandles(node, direction), children: _jsxs("div", { "aria-label": node.status ? words("stepWithStatus", { step: node.label, status: statusWord(node.status) }) : node.label, "aria-current": selected ? "true" : undefined, className: "flex flex-col gap-1 rounded-md p-card-sm outline-none focus-visible:ring-2 focus-visible:ring-ring", role: "button", tabIndex: 0, onClick: () => activate(node), onFocus: (event) => reveal(node.id, event.currentTarget), onKeyDown: (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                event.preventDefault();
+                activate(node);
+            }, children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: node.label }), node.status && _jsx(AI_FlowNodeStatusBadge, { status: node.status })] }), renderNodeBody?.(node), node.waitsOn.length > 0 && (_jsx("span", { className: "text-2xs text-muted-foreground", children: words("waitsOn", { steps: list(node.waitsOn.map(nameOf)) }) }))] }) }));
+};
+/** A group: a frame holding steps, titled. A choreography's round is titled with its number. */
+const GraphViewerGroup = ({ data }) => {
+    const { direction, words } = useGraphViewerNodeContext();
+    const node = data.node;
+    return (_jsx(AI_Node, { className: "size-full border-dashed bg-transparent shadow-none", "data-graph-viewer-group": node.id, handles: graphViewerNodeHandles(node, direction), children: _jsx("span", { className: "px-3 pt-2 text-xs font-medium text-muted-foreground", children: node.kind === GraphViewNodeKind.CHOREOGRAPHY_ROUND ? words("roundTitle", { round: node.label }) : node.label }) }));
+};
+/**
+ * Module scope on purpose: React Flow compares `nodeTypes` by identity, and an object rebuilt on each render remounts
+ * every node.
+ */
+const GRAPH_VIEWER_NODE_TYPES = {
+    [GraphViewerNodeType.STEP]: GraphViewerStep,
+    [GraphViewerNodeType.GROUP]: GraphViewerGroup,
+};
+/** The process as a list: every step in the graph's order, a group's steps nested under it. Readable without the drawing. */
+const GraphViewerList = ({ graph, selectedNodeId, title }) => {
+    // Nested exactly as the drawing nests them (`graphViewParentOf`), so a step the drawing shows, the list shows too.
+    const children = React.useMemo(() => {
+        const parentOf = graphViewParentOf(graph.nodes);
+        const byParent = new Map();
+        for (const node of graph.nodes) {
+            const parent = parentOf.get(node.id);
+            byParent.set(parent, [...(byParent.get(parent) ?? []), node]);
+        }
+        return byParent;
+    }, [graph]);
+    // Terminates: the honoured parents form a tree.
+    const items = (parent) => (children.get(parent) ?? []).map((node) => (_jsx(GraphViewerListItem, { node: node, selected: node.id === selectedNodeId, children: children.has(node.id) && _jsx("ol", { className: "ms-4 flex flex-col gap-1", children: items(node.id) }) }, node.id)));
+    return _jsx("ol", { "aria-label": title, className: "flex flex-col gap-1", "data-graph-viewer-list": true, children: items(undefined) });
+};
+const GraphViewerListItem = ({ node, selected, children }) => {
+    const { nameOf, activate, renderNodeBody, words, list } = useGraphViewerNodeContext();
+    return (_jsxs("li", { "data-graph-viewer-list-item": node.id, children: [_jsxs("button", { "aria-current": selected ? "true" : undefined, className: cn("flex w-full flex-col gap-1 rounded-md border p-2 text-start", node.status === FlowsActors_Status.AWAITING_APPROVAL && "border-warning", selected && "ring-2 ring-primary"), type: "button", onClick: () => activate(node), children: [_jsxs("span", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-sm font-medium", children: node.kind === GraphViewNodeKind.CHOREOGRAPHY_ROUND ? words("roundTitle", { round: node.label }) : node.label }), node.status && _jsx(AI_FlowNodeStatusBadge, { status: node.status })] }), renderNodeBody?.(node), node.waitsOn.length > 0 && _jsx("span", { className: "text-2xs text-muted-foreground", children: words("waitsOn", { steps: list(node.waitsOn.map(nameOf)) }) })] }), children] }));
+};
+//# sourceMappingURL=graph-viewer.js.map

package/dist/esm/components/flows-actors/graph-viewer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer.js","sourceRoot":"","sources":["../../../../../src/components/flows-actors/graph-viewer.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { MarkerType, useReactFlow, useStore, useStoreApi, type Edge, type InternalNode, type Node, type NodeChange, type NodeProps, type Viewport } from \"@xyflow/react\";\nimport { ButtonSize, FrontendComponentType } from \"@wildo-ai/presets-components-models\";\nimport { FlowsActors_Status } from \"@wildo-ai/saas-models\";\nimport { Button, ButtonVariants_Variant } from \"~wildo-frontend-lib/components/actions/button\";\nimport { AI_Canvas, GraphCanvasInteraction, GraphLegendMark, type GraphCanvasLegend } from \"~wildo-frontend-lib/components/ai-elements/graph/canvas\";\nimport { AI_Controls } from \"~wildo-frontend-lib/components/ai-elements/graph/controls\";\nimport { AI_Node, GraphHandleRole, GraphNodeSide, type AI_NodeHandle } from \"~wildo-frontend-lib/components/ai-elements/graph/node\";\nimport { GraphViewEdgeKind, GraphViewNodeKind, type GraphView, type GraphViewNode } from \"~wildo-frontend-lib/core/flows-actors/graph-view.model\";\nimport { GraphViewLayoutDirection, graphViewParentOf, layoutGraphView, type GraphViewLayout, type GraphViewSize } from \"~wildo-frontend-lib/core/flows-actors/graph-view.layout\";\nimport { useI18n } from \"~wildo-frontend-lib/core/i18n/useI18n\";\nimport { useUI } from \"~wildo-frontend-lib/core/ui/useUI\";\nimport { cn } from \"~wildo-frontend-lib/core/ui/cn\";\nimport { AI_FlowNodeStatusBadge, flowsActorsStatusColour, flowsActorsStatusDotClass, useFlowsActorsStatusWord } from \"./flow-node-badges\";\nimport { GraphViewerPresentation, graphViewerEdgeLabelKey } from \"./graph-viewer.models\";\n\n//===============================================================\n//  AI_GraphViewer — a GraphView, drawn read-only (#2529)\n//\n// The one way the engine draws a process: a plan and its dependencies, a run and its suspension, a flow, a\n// choreography's rounds. Hosts build a `GraphView` with an adapter and hand it here; nothing in this file knows which\n// record the graph came from.\n//\n// What it guarantees, each the answer to a defect of the renderers it replaces:\n// - every edge leaves from the port it names, so a branch's edges leave from separate points;\n// - nodes are placed in ranks at the size they are drawn at (`layoutGraphView`, measured once rendered), and a new\n//   graph is drawn over the last drawing rather than in place of it, so a live run's updates neither blank the canvas\n//   nor take the reader's focus or zoom away;\n// - a step waiting on a person is drawn amber and says so, and a run waiting on a decision says so above the drawing;\n// - selection is the HOST's (`selectedNodeId`), so it follows navigation instead of a click the page forgot;\n// - a node is reached with the keyboard (Tab), brought into view when it is off the visible part of the drawing, and\n//   opened with Enter or Space; the whole process can be read as a list, without the drawing;\n// - colours follow the theme, light or dark, and nothing moves for a reader who asked for reduced motion.\n//===============================================================\n\nconst COMPONENT = FrontendComponentType.LOW_LEVEL_AI_GRAPH_VIEWER;\n\n/** The width a step is drawn at; its height is what its content needs, measured once rendered. */\nexport const GRAPH_VIEWER_NODE_WIDTH = 240;\n/** The height assumed for a step before it has been measured, so the first layout is close to the final one. */\nconst GRAPH_VIEWER_NODE_ESTIMATED_HEIGHT = 72;\n\n/** The React Flow node types this viewer registers. */\nenum GraphViewerNodeType {\n  STEP = \"graphViewerStep\",\n  GROUP = \"graphViewerGroup\",\n}\n\n/** How each edge kind is drawn. Total over the kinds, so a kind added to the model must be given a look here. */\nconst EDGE_LOOK: Record<GraphViewEdgeKind, { readonly dashed: boolean; readonly colour: string; readonly strokeClassName: string; readonly labelled: boolean }> = {\n  [GraphViewEdgeKind.DEPENDS_ON]: { dashed: false, colour: \"var(--muted-foreground)\", strokeClassName: \"stroke-muted-foreground\", labelled: false },\n  [GraphViewEdgeKind.FLOW]: { dashed: false, colour: \"var(--muted-foreground)\", strokeClassName: \"stroke-muted-foreground\", labelled: false },\n  [GraphViewEdgeKind.NEXT_ROUND]: { dashed: false, colour: \"var(--muted-foreground)\", strokeClassName: \"stroke-muted-foreground\", labelled: false },\n  // A lane going round in circles is the one edge a reader must not miss: amber, dashed, and worded on the drawing.\n  [GraphViewEdgeKind.REPEATS_INPUT_STATE]: { dashed: true, colour: \"var(--warning)\", strokeClassName: \"stroke-warning\", labelled: true },\n  // A catalog draws five relations at once, so each is told apart by its own mark: what a playbook writes in the primary\n  // colour, what it reads plain, what it waits for dashed, a decision that decides what it waits for dashed in the\n  // information colour, and the children a composite runs in the information colour, solid.\n  [GraphViewEdgeKind.PRODUCES]: { dashed: false, colour: \"var(--primary)\", strokeClassName: \"stroke-primary\", labelled: false },\n  [GraphViewEdgeKind.READS]: { dashed: false, colour: \"var(--muted-foreground)\", strokeClassName: \"stroke-muted-foreground\", labelled: false },\n  [GraphViewEdgeKind.GATES]: { dashed: true, colour: \"var(--muted-foreground)\", strokeClassName: \"stroke-muted-foreground\", labelled: false },\n  [GraphViewEdgeKind.CONDITIONS]: { dashed: true, colour: \"var(--info)\", strokeClassName: \"stroke-info\", labelled: false },\n  [GraphViewEdgeKind.ADMITS]: { dashed: false, colour: \"var(--info)\", strokeClassName: \"stroke-info\", labelled: false },\n};\n\n/** The sides a step's incoming and outgoing edges attach to, for the direction its ranks run in. */\nconst PORT_SIDES: Record<GraphViewLayoutDirection, { readonly entry: GraphNodeSide; readonly exit: GraphNodeSide }> = {\n  [GraphViewLayoutDirection.RIGHT]: { entry: GraphNodeSide.LEFT, exit: GraphNodeSide.RIGHT },\n  [GraphViewLayoutDirection.DOWN]: { entry: GraphNodeSide.TOP, exit: GraphNodeSide.BOTTOM },\n};\n\n/** A node's handles: one per port, incoming ports on its entry side and outgoing ones on its exit side. */\nexport function graphViewerNodeHandles(node: GraphViewNode, direction: GraphViewLayoutDirection): readonly AI_NodeHandle[] {\n  const sides = PORT_SIDES[direction];\n  return [\n    ...node.inPorts.map((port): AI_NodeHandle => ({ id: port.id, role: GraphHandleRole.TARGET, side: sides.entry })),\n    ...node.outPorts.map((port): AI_NodeHandle => ({ id: port.id, role: GraphHandleRole.SOURCE, side: sides.exit })),\n  ];\n}\n\ninterface GraphViewerNodeData extends Record<string, unknown> {\n  readonly node: GraphViewNode;\n}\n\n/**\n * A GraphView, placed, as React Flow's nodes and edges. Pure, so what is drawn is testable without a canvas.\n *\n * A node holding others is a GROUP sized by the layout; its children are placed relative to it, after it in the list,\n * which is the order React Flow requires. Every edge names the ports it joins, so it attaches to the handle drawn for\n * that port, and carries an arrow in its kind's colour.\n *\n * The layout may be the PREVIOUS graph's while the new one is laid out: a node it holds no place for is not drawn yet,\n * nor is a node whose group is not drawn, nor an edge missing an end. Each appears with the next layout.\n *\n * Every node CARRIES its measured size: a step what React Flow last measured it at, a group the size its layout gave\n * it. React Flow keeps a node's `measured` (and its handles) when the node object brings it; without it, every new\n * object — every update of a live run, every change of selection — is hidden, measured again and redrawn (#2529\n * re-review F4), and a size that drops to nothing and comes back is the stall F1 was. What a step carries must be what\n * React Flow measured LAST, or adopting the node puts the older size back over the newer one and nothing measures it\n * again; {@link graphViewerApplyMeasurements} keeps it so.\n */\nexport function graphViewerFlowElements(\n  graph: GraphView,\n  layout: GraphViewLayout,\n  options: {\n    readonly selectedNodeId?: string;\n    readonly edgeLabel: (kind: GraphViewEdgeKind) => string;\n    /** What React Flow last measured each step at ({@link graphViewerApplyMeasurements}); carried on the node. */\n    readonly measured?: ReadonlyMap<string, GraphViewSize>;\n  },\n): { readonly nodes: Node<GraphViewerNodeData>[]; readonly edges: Edge[] } {\n  const groups = new Set(layout.parentOf.values());\n  const depth = (id: string): number => {\n    let count = 0;\n    for (let parent = layout.parentOf.get(id); parent !== undefined; parent = layout.parentOf.get(parent)) count += 1;\n    return count;\n  };\n  // Parents before children (React Flow resolves a child's position from a parent it has already seen); otherwise the\n  // graph's own order, which is meaningful (a plan's order, a flow's declaration order).\n  const ordered = graph.nodes.map((node, index) => ({ node, index })).sort((left, right) => depth(left.node.id) - depth(right.node.id) || left.index - right.index);\n  const drawn = new Set<string>();\n  const nodes = ordered.flatMap(({ node }): Node<GraphViewerNodeData>[] => {\n    const placement = layout.placements.get(node.id);\n    if (!placement) return [];\n    const parentId = layout.parentOf.get(node.id);\n    // Parents come first, so a parent not drawn by now is not drawn at all.\n    if (parentId !== undefined && !drawn.has(parentId)) return [];\n    drawn.add(node.id);\n    const isGroup = groups.has(node.id);\n    const measured = isGroup ? { width: placement.width, height: placement.height } : options.measured?.get(node.id);\n    return [{\n      id: node.id,\n      type: isGroup ? GraphViewerNodeType.GROUP : GraphViewerNodeType.STEP,\n      position: { x: placement.x, y: placement.y },\n      data: { node },\n      selected: node.id === options.selectedNodeId,\n      style: isGroup ? { width: placement.width, height: placement.height } : { width: GRAPH_VIEWER_NODE_WIDTH },\n      ...(measured ? { measured } : {}),\n      ...(parentId !== undefined ? { parentId, extent: \"parent\" as const } : {}),\n    }];\n  });\n  const edges = graph.edges.filter((edge) => drawn.has(edge.source) && drawn.has(edge.target)).map((edge): Edge => {\n    const look = EDGE_LOOK[edge.kind];\n    return {\n      id: edge.id,\n      source: edge.source,\n      sourceHandle: edge.sourcePort,\n      target: edge.target,\n      targetHandle: edge.targetPort,\n      markerEnd: { type: MarkerType.ArrowClosed, color: look.colour },\n      style: { stroke: look.colour, ...(look.dashed ? { strokeDasharray: \"6 4\" } : {}) },\n      ...(look.labelled ? { label: options.edgeLabel(edge.kind) } : {}),\n      data: { kind: edge.kind },\n    };\n  });\n  return { nodes, edges };\n}\n\n/** What the drawn nodes need from the viewer, without being re-created on every render. */\ninterface GraphViewerNodeContextValue {\n  readonly direction: GraphViewLayoutDirection;\n  readonly nameOf: (id: string) => string;\n  readonly activate: (node: GraphViewNode) => void;\n  readonly renderNodeBody?: (node: GraphViewNode) => React.ReactNode;\n  readonly words: (key: string, params?: Record<string, string | number>) => string;\n  /** Several names as one phrase in the reader's locale. */\n  readonly list: (items: readonly string[]) => string;\n}\n\nconst GraphViewerNodeContext = React.createContext<GraphViewerNodeContextValue | null>(null);\n\nfunction useGraphViewerNodeContext(): GraphViewerNodeContextValue {\n  const context = React.useContext(GraphViewerNodeContext);\n  if (!context) throw new Error(\"A graph viewer node is drawn outside AI_GraphViewer\");\n  return context;\n}\n\nexport type AI_GraphViewerProps = {\n  graph: GraphView;\n  direction: GraphViewLayoutDirection;\n  /** The process's accessible name, in the host's words. */\n  title: string;\n  /** The step the host has open: its selection follows navigation, not a click this component remembers. */\n  selectedNodeId?: string;\n  /** A step was opened: clicked, or Enter or Space on it. */\n  onNodeActivate?: (node: GraphViewNode) => void;\n  /** The decision the run waits on was opened from the banner. Without it the banner only says so. */\n  onDecisionActivate?: (decisionId: string) => void;\n  /** What a step shows under its name. Its status is always shown. */\n  renderNodeBody?: (node: GraphViewNode) => React.ReactNode;\n  /** A miniature of the whole drawing, for a large process. */\n  minimap?: boolean;\n  /** How the process is first shown. Default {@link GraphViewerPresentation.GRAPH}. */\n  defaultPresentation?: GraphViewerPresentation;\n  className?: string;\n};\n\nexport const AI_GraphViewer = ({\n  graph,\n  direction,\n  title,\n  selectedNodeId,\n  onNodeActivate,\n  onDecisionActivate,\n  renderNodeBody,\n  minimap,\n  defaultPresentation = GraphViewerPresentation.GRAPH,\n  className,\n}: AI_GraphViewerProps): React.JSX.Element | null => {\n  const { tComponent, isReady, formatDateTime, formatList } = useI18n({ component: COMPONENT });\n  const { statusWord, isReady: statusWordsReady } = useFlowsActorsStatusWord();\n  const [presentation, setPresentation] = React.useState(defaultPresentation);\n  const words = React.useCallback((key: string, params?: Record<string, string | number>) => tComponent(COMPONENT, key, params), [tComponent]);\n\n  const nodesById = React.useMemo(() => new Map(graph.nodes.map((node) => [node.id, node] as const)), [graph]);\n  const nameOf = React.useCallback((id: string) => nodesById.get(id)?.label ?? id, [nodesById]);\n  const activate = React.useCallback((node: GraphViewNode) => onNodeActivate?.(node), [onNodeActivate]);\n  const list = React.useCallback((items: readonly string[]) => formatList(items), [formatList]);\n  const context = React.useMemo<GraphViewerNodeContextValue>(\n    () => ({ direction, nameOf, activate, words, list, ...(renderNodeBody ? { renderNodeBody } : {}) }),\n    [direction, nameOf, activate, words, list, renderNodeBody],\n  );\n\n  if (!isReady || !statusWordsReady) return null;\n\n  const legend = graphViewerLegend(graph, words(\"legendTitle\"), statusWord, (kind) => words(graphViewerEdgeLabelKey(kind)));\n  const decision = graph.awaitingDecision;\n\n  return (\n    <GraphViewerNodeContext.Provider value={context}>\n      <section aria-label={title} className={cn(\"flex h-full min-h-0 flex-col gap-2\", className)} data-graph-viewer>\n        <div className=\"flex flex-wrap items-center justify-between gap-2\">\n          {decision ? (\n            <div className=\"flex flex-wrap items-center gap-2 rounded-md border border-warning bg-warning/10 px-3 py-2 text-sm\" data-graph-viewer-awaiting role=\"status\">\n              <span className={cn(\"inline-block size-2 shrink-0 rounded-full\", flowsActorsStatusDotClass(FlowsActors_Status.AWAITING_APPROVAL))} aria-hidden />\n              <span className=\"font-medium\">{words(\"awaitingDecision\", { title: decision.title })}</span>\n              <span className=\"text-muted-foreground\">{words(\"awaitingDecisionSince\", { since: formatDateTime(decision.requestedAt) })}</span>\n              {onDecisionActivate && (\n                <Button type=\"button\" size={ButtonSize.SM} variant={ButtonVariants_Variant.OUTLINE} onClick={() => onDecisionActivate(decision.decisionId)}>\n                  {words(\"openDecision\")}\n                </Button>\n              )}\n            </div>\n          ) : <span />}\n          <div className=\"flex gap-1\" role=\"group\">\n            {[GraphViewerPresentation.GRAPH, GraphViewerPresentation.LIST].map((option) => (\n              <Button\n                aria-pressed={presentation === option}\n                key={option}\n                size={ButtonSize.SM}\n                type=\"button\"\n                variant={presentation === option ? ButtonVariants_Variant.SECONDARY : ButtonVariants_Variant.GHOST}\n                onClick={() => setPresentation(option)}\n              >\n                {words(option === GraphViewerPresentation.GRAPH ? \"presentationGraph\" : \"presentationList\")}\n              </Button>\n            ))}\n          </div>\n        </div>\n\n        {graph.nodes.length === 0 ? (\n          <p className=\"rounded-md border p-4 text-sm text-muted-foreground\">{words(\"noNodes\")}</p>\n        ) : presentation === GraphViewerPresentation.LIST ? (\n          <GraphViewerList graph={graph} selectedNodeId={selectedNodeId} title={title} />\n        ) : (\n          <GraphViewerCanvas graph={graph} direction={direction} legend={legend} minimap={minimap} selectedNodeId={selectedNodeId} />\n        )}\n      </section>\n    </GraphViewerNodeContext.Provider>\n  );\n};\n\n/** The legend: the statuses the drawing holds, then the edge kinds it holds, each in its own words. */\nexport function graphViewerLegend(\n  graph: GraphView,\n  title: string,\n  statusWord: (status: string) => string,\n  edgeWord: (kind: GraphViewEdgeKind) => string,\n): GraphCanvasLegend {\n  const statuses = new Set(graph.nodes.flatMap((node) => (node.status ? [node.status] : [])));\n  const kinds = new Set(graph.edges.map((edge) => edge.kind));\n  return {\n    title,\n    entries: [\n      ...Object.values(FlowsActors_Status).filter((status) => statuses.has(status)).map((status) => ({\n        id: `status:${status}`, label: statusWord(status), mark: GraphLegendMark.DOT, markClassName: flowsActorsStatusDotClass(status),\n      })),\n      ...Object.values(GraphViewEdgeKind).filter((kind) => kinds.has(kind)).map((kind) => ({\n        id: `edge:${kind}`,\n        label: edgeWord(kind),\n        mark: EDGE_LOOK[kind].dashed ? GraphLegendMark.DASHED_LINE : GraphLegendMark.LINE,\n        markClassName: EDGE_LOOK[kind].strokeClassName,\n      })),\n    ],\n  };\n}\n\n/** The size a step is laid out at before it has been drawn and measured. */\nconst ESTIMATED_STEP_SIZE: GraphViewSize = { width: GRAPH_VIEWER_NODE_WIDTH, height: GRAPH_VIEWER_NODE_ESTIMATED_HEIGHT };\n\n/** Nothing placed: what the canvas draws before the first layout. */\nconst NO_LAYOUT: GraphViewLayout = { placements: new Map(), parentOf: new Map(), width: 0, height: 0 };\n\n/** Nothing measured yet. */\nconst NO_MEASURED_SIZES: ReadonlyMap<string, GraphViewSize> = new Map();\n\n/**\n * What each step was last measured at, after React Flow's node changes: a `dimensions` change is a measurement, applied\n * the way React Flow's own `applyNodeChanges` applies it to a controlled node's `measured`. Any other change leaves it,\n * and the same map comes back when nothing was measured, so a selection or a drag does not redraw the canvas.\n *\n * Taken from the change, not read back from the node lookup afterwards (#2529 re-review F6). React Flow writes its lookup\n * and reports the change in one call, so a size kept this way is never older than the lookup's. Read back in an effect,\n * it lagged by a render: a step that grew, then a new node object for it before the effect ran (a live run's next\n * update), carried the OLD size, React Flow adopted it over the new one, and the step's box did not change again, so it\n * was never measured again. The layout then placed it at its old height and the steps below overlapped it.\n */\nexport function graphViewerApplyMeasurements(\n  current: ReadonlyMap<string, GraphViewSize>,\n  changes: readonly NodeChange[],\n): ReadonlyMap<string, GraphViewSize> {\n  let next: Map<string, GraphViewSize> | null = null;\n  for (const change of changes) {\n    if (change.type !== \"dimensions\" || !change.dimensions) continue;\n    const { width, height } = change.dimensions;\n    if (!width || !height) continue;\n    const known = (next ?? current).get(change.id);\n    if (known?.width === width && known.height === height) continue;\n    next ??= new Map(current);\n    next.set(change.id, { width, height });\n  }\n  return next ?? current;\n}\n\n/**\n * What decides where things are drawn: the direction, every node with the group it sits in, and every edge. A status,\n * a label or a host rebuilding the same graph as a new object is not part of it, so a live run's updates leave the\n * drawing where it is. A label that changes a step's height still moves things, through its measured size.\n */\nexport function graphViewerStructureKey(graph: GraphView, direction: GraphViewLayoutDirection): string {\n  return [\n    direction,\n    graph.nodes.map((node) => `${node.id}<${node.parentId ?? \"\"}`).join(\",\"),\n    graph.edges.map((edge) => edge.id).join(\",\"),\n  ].join(\"|\");\n}\n\n/**\n * The drawing. It is laid out by `GraphLayoutDriver`, inside the canvas where the measured sizes are; until the first\n * layout it is an empty canvas, and afterwards a new graph is drawn over the last layout while its own is computed. It\n * is never unmounted for a new graph, which would drop the reader's focus and zoom on every update of a live run.\n */\nconst GraphViewerCanvas = ({\n  graph,\n  direction,\n  legend,\n  minimap,\n  selectedNodeId,\n}: {\n  readonly graph: GraphView;\n  readonly direction: GraphViewLayoutDirection;\n  readonly legend: GraphCanvasLegend;\n  readonly minimap?: boolean;\n  readonly selectedNodeId?: string;\n}): React.JSX.Element => {\n  const { words } = useGraphViewerNodeContext();\n  const { prefersReducedMotion } = useUI();\n  const [layout, setLayout] = React.useState<GraphViewLayout>(NO_LAYOUT);\n  const [measured, setMeasured] = React.useState<ReadonlyMap<string, GraphViewSize>>(NO_MEASURED_SIZES);\n  const onNodesChange = React.useCallback((changes: NodeChange[]) => { setMeasured((current) => graphViewerApplyMeasurements(current, changes)); }, []);\n  // Where the last fit left the view, the driver's own or the canvas's refit after a resize: a viewport elsewhere is the reader's.\n  const fitted = React.useRef<Viewport | null>(null);\n  const onRefit = React.useCallback((viewport: Viewport) => { fitted.current = viewport; }, []);\n\n  const elements = React.useMemo(\n    () => graphViewerFlowElements(graph, layout, { selectedNodeId, measured, edgeLabel: (kind) => words(graphViewerEdgeLabelKey(kind)) }),\n    [graph, layout, measured, selectedNodeId, words],\n  );\n  const fitViewOptions = React.useMemo(() => ({ padding: 0.15, ...(prefersReducedMotion ? { duration: 0 } : {}) }), [prefersReducedMotion]);\n\n  return (\n    <div className=\"relative min-h-80 flex-1 overflow-hidden rounded-md border\" data-graph-viewer-canvas>\n      <AI_Canvas\n        edges={elements.edges}\n        fitViewOptions={fitViewOptions}\n        interaction={GraphCanvasInteraction.VIEW}\n        legend={legend}\n        minimap={minimap ? { nodeColor: (node) => flowsActorsStatusColour(String((node.data as GraphViewerNodeData).node.status ?? \"\")) } : undefined}\n        nodeTypes={GRAPH_VIEWER_NODE_TYPES}\n        nodes={elements.nodes}\n        onNodesChange={onNodesChange}\n        onRefit={onRefit}\n        // The step itself is the focusable control (it is opened with Enter or Space); React Flow's own wrapper\n        // being focusable too would make Tab stop twice on every step. The step brings itself into view instead.\n        nodesFocusable={false}\n      >\n        <GraphLayoutDriver direction={direction} fitted={fitted} fitViewOptions={fitViewOptions} graph={graph} onLayout={setLayout} />\n        <AI_Controls />\n      </AI_Canvas>\n    </div>\n  );\n};\n\n/**\n * Whether the graph must be laid out again: its structure changed ({@link graphViewerStructureKey}), or a drawn step's\n * size did. Never while a drawn step is not measured yet (a size of 0 is \"not drawn yet\", not \"drawn empty\"): its real\n * size is one frame away. `sizes` is the canvas's `id:WxH|…` signature of what is drawn; with nothing drawn it is\n * empty, and a new structure is then laid out at the estimated sizes, since nothing can be measured until it is placed.\n */\nexport function graphViewerRelayoutDue(\n  last: { readonly structure: string | null; readonly sizes: string },\n  structure: string,\n  sizes: string,\n): boolean {\n  if (/:0x|x0(\\||$)/.test(sizes)) return false;\n  return last.structure !== structure || last.sizes !== sizes;\n}\n\n/** The measured size of every drawn node, from React Flow's node lookup; a node not measured yet is absent. */\nexport function graphViewerMeasuredSizes(nodeLookup: ReadonlyMap<string, Pick<InternalNode, \"id\" | \"measured\">>): ReadonlyMap<string, GraphViewSize> {\n  const sizes = new Map<string, GraphViewSize>();\n  for (const node of nodeLookup.values()) {\n    const { width, height } = node.measured;\n    if (width && height) sizes.set(node.id, { width, height });\n  }\n  return sizes;\n}\n\n/** Whether the viewport is where the last fit left it: the reader has not moved the map since. */\nfunction sameViewport(left: Viewport, right: Viewport): boolean {\n  return Math.abs(left.x - right.x) < 0.5 && Math.abs(left.y - right.y) < 0.5 && Math.abs(left.zoom - right.zoom) < 0.001;\n}\n\n/**\n * Lays the graph out, at the sizes its steps were DRAWN at, and fits it.\n *\n * The sizes come from React Flow's node LOOKUP, where it records what it measured. They are not on the nodes\n * `getNodes()` returns: in a controlled canvas those are the host's own objects, which React Flow never writes back to,\n * so a layout read from them used the estimate for every step and tall steps overlapped (#2529 review).\n *\n * Keyed on the measured sizes and the structure, not on React Flow's \"initialized\" flag or the graph's identity: a step\n * is first drawn as the skeleton of its lazily loaded card, so its first measurement is the skeleton's; and a host\n * rebuilding the same graph is not a new drawing. The passes stop once every step is drawn at its final size.\n *\n * A pass is recorded as done only when its layout LANDS (#2529 re-review F1). Recorded when it started, a pass\n * cancelled before landing — the new node objects it causes are measured again, so the sizes blink to nothing and\n * cancel it — left the new structure recorded as laid out, and it was never drawn.\n *\n * It fits the view after a pass that changed the structure; after one that only changed sizes, only when the reader\n * has not moved the map since the last fit, so a reader who zoomed in on a step keeps it. `fitted` is where the last\n * fit left the view: this driver's own, or the canvas's refit after a resize of its frame, which the canvas reports\n * (`onRefit`). Forgetting the last fit on a resize instead read every later viewport as unmoved, so a reader who zoomed\n * after a resize lost the zoom to the next step that grew (#2529 re-review F7).\n */\nconst GraphLayoutDriver = ({\n  graph,\n  direction,\n  fitted,\n  fitViewOptions,\n  onLayout,\n}: {\n  readonly graph: GraphView;\n  readonly direction: GraphViewLayoutDirection;\n  readonly fitted: React.RefObject<Viewport | null>;\n  readonly fitViewOptions: { readonly padding: number; readonly duration?: number };\n  readonly onLayout: (result: GraphViewLayout) => void;\n}): null => {\n  const sizes = useStore((state) => {\n    const parts: string[] = [];\n    for (const node of state.nodeLookup.values()) parts.push(`${node.id}:${Math.round(node.measured.width ?? 0)}x${Math.round(node.measured.height ?? 0)}`);\n    return parts.join(\"|\");\n  });\n  const store = useStoreApi();\n  const { fitView, getViewport } = useReactFlow();\n  const structure = graphViewerStructureKey(graph, direction);\n  const last = React.useRef<{ readonly structure: string | null; readonly sizes: string }>({ structure: null, sizes: \"\" });\n  // The graph is read when a pass is due, never as a reason for one: its identity changes on every update of a live run.\n  const latestGraph = React.useRef(graph);\n  latestGraph.current = graph;\n\n  React.useEffect(() => {\n    if (!graphViewerRelayoutDue(last.current, structure, sizes)) return;\n    const structureChanged = last.current.structure !== structure;\n    const measured = graphViewerMeasuredSizes(store.getState().nodeLookup);\n    let cancelled = false;\n    void layoutGraphView(latestGraph.current, { direction, nodeSize: (node) => measured.get(node.id) ?? ESTIMATED_STEP_SIZE }).then((result) => {\n      if (cancelled) return;\n      last.current = { structure, sizes };\n      onLayout(result);\n      const readerMoved = fitted.current !== null && !sameViewport(fitted.current, getViewport());\n      if (!structureChanged && readerMoved) return;\n      requestAnimationFrame(() => {\n        void fitView(fitViewOptions).then(() => { fitted.current = getViewport(); });\n      });\n    });\n    return () => { cancelled = true; };\n    // `onLayout` and the fit options are read when a pass is due; a pass is keyed on the structure and the sizes.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [structure, sizes]);\n  return null;\n};\n\n/**\n * Whether a node's box is wholly inside the visible part of the canvas. `transform` is React Flow's `[x, y, zoom]`;\n * `box` is in the drawing's coordinates, `frame` in the screen's.\n */\nexport function graphViewerBoxIsVisible(\n  box: { readonly x: number; readonly y: number; readonly width: number; readonly height: number },\n  transform: readonly [number, number, number],\n  frame: { readonly width: number; readonly height: number },\n): boolean {\n  const [tx, ty, zoom] = transform;\n  const left = box.x * zoom + tx;\n  const top = box.y * zoom + ty;\n  return left >= 0 && top >= 0 && left + box.width * zoom <= frame.width && top + box.height * zoom <= frame.height;\n}\n\n/**\n * Whether focus arrived the way `:focus-visible` means it — from the keyboard, not a pointer. A browser that cannot\n * answer (an engine without the selector) is treated as keyboard focus, so the step is still brought into view.\n */\nexport function graphViewerFocusIsVisible(target: Element): boolean {\n  try {\n    return target.matches(\":focus-visible\");\n  } catch {\n    return true;\n  }\n}\n\n/**\n * Brings a focused step into view. React Flow does this for its own focusable node wrapper, which this viewer turns\n * off (the step is the control), and it resets the pane's scroll, so without this Tab could land on a step the reader\n * cannot see. The zoom is kept; only the map moves.\n */\nfunction useRevealStepOnFocus(): (nodeId: string, target: Element) => void {\n  const store = useStoreApi();\n  const { setCenter } = useReactFlow();\n  const { prefersReducedMotion } = useUI();\n  return React.useCallback((nodeId: string, target: Element) => {\n    // Keyboard focus only, as React Flow's own does: a click or a drag that starts on a clipped step is the reader\n    // moving the map, and centring it would undo that (#2529 re-review F2).\n    if (!graphViewerFocusIsVisible(target)) return;\n    const { nodeLookup, transform, width, height } = store.getState();\n    const node = nodeLookup.get(nodeId);\n    if (!node) return;\n    const box = { ...node.internals.positionAbsolute, width: node.measured.width ?? 0, height: node.measured.height ?? 0 };\n    if (graphViewerBoxIsVisible(box, transform, { width, height })) return;\n    void setCenter(box.x + box.width / 2, box.y + box.height / 2, { zoom: transform[2], duration: prefersReducedMotion ? 0 : 200 });\n  }, [store, setCenter, prefersReducedMotion]);\n}\n\n/** One step: its name, its status, what it waits on, and what the host shows under it. */\nconst GraphViewerStep = ({ data, selected }: NodeProps<Node<GraphViewerNodeData>>): React.JSX.Element => {\n  const { direction, nameOf, activate, renderNodeBody, words, list } = useGraphViewerNodeContext();\n  const { statusWord } = useFlowsActorsStatusWord();\n  const reveal = useRevealStepOnFocus();\n  const node = data.node;\n  const waiting = node.status === FlowsActors_Status.AWAITING_APPROVAL;\n  return (\n    <AI_Node\n      className={cn(\n        \"w-full\",\n        // A step waiting on a person is the one a reader looks for first: an amber edge as well as the amber badge.\n        waiting && \"border-2 border-warning\",\n        selected && \"ring-2 ring-primary\",\n      )}\n      data-graph-viewer-step={node.id}\n      handles={graphViewerNodeHandles(node, direction)}\n    >\n      <div\n        aria-label={node.status ? words(\"stepWithStatus\", { step: node.label, status: statusWord(node.status) }) : node.label}\n        // The host's selection is the step it has OPEN, not a toggle the reader pressed.\n        aria-current={selected ? \"true\" : undefined}\n        className=\"flex flex-col gap-1 rounded-md p-card-sm outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n        role=\"button\"\n        tabIndex={0}\n        onClick={() => activate(node)}\n        onFocus={(event) => reveal(node.id, event.currentTarget)}\n        onKeyDown={(event) => {\n          if (event.key !== \"Enter\" && event.key !== \" \") return;\n          event.preventDefault();\n          activate(node);\n        }}\n      >\n        <div className=\"flex items-start justify-between gap-2\">\n          <span className=\"text-sm font-medium\">{node.label}</span>\n          {node.status && <AI_FlowNodeStatusBadge status={node.status} />}\n        </div>\n        {renderNodeBody?.(node)}\n        {node.waitsOn.length > 0 && (\n          <span className=\"text-2xs text-muted-foreground\">{words(\"waitsOn\", { steps: list(node.waitsOn.map(nameOf)) })}</span>\n        )}\n      </div>\n    </AI_Node>\n  );\n};\n\n/** A group: a frame holding steps, titled. A choreography's round is titled with its number. */\nconst GraphViewerGroup = ({ data }: NodeProps<Node<GraphViewerNodeData>>): React.JSX.Element => {\n  const { direction, words } = useGraphViewerNodeContext();\n  const node = data.node;\n  return (\n    <AI_Node\n      className=\"size-full border-dashed bg-transparent shadow-none\"\n      data-graph-viewer-group={node.id}\n      handles={graphViewerNodeHandles(node, direction)}\n    >\n      <span className=\"px-3 pt-2 text-xs font-medium text-muted-foreground\">\n        {node.kind === GraphViewNodeKind.CHOREOGRAPHY_ROUND ? words(\"roundTitle\", { round: node.label }) : node.label}\n      </span>\n    </AI_Node>\n  );\n};\n\n/**\n * Module scope on purpose: React Flow compares `nodeTypes` by identity, and an object rebuilt on each render remounts\n * every node.\n */\nconst GRAPH_VIEWER_NODE_TYPES = {\n  [GraphViewerNodeType.STEP]: GraphViewerStep,\n  [GraphViewerNodeType.GROUP]: GraphViewerGroup,\n};\n\n/** The process as a list: every step in the graph's order, a group's steps nested under it. Readable without the drawing. */\nconst GraphViewerList = ({ graph, selectedNodeId, title }: { readonly graph: GraphView; readonly selectedNodeId?: string; readonly title: string }): React.JSX.Element => {\n  // Nested exactly as the drawing nests them (`graphViewParentOf`), so a step the drawing shows, the list shows too.\n  const children = React.useMemo(() => {\n    const parentOf = graphViewParentOf(graph.nodes);\n    const byParent = new Map<string | undefined, GraphViewNode[]>();\n    for (const node of graph.nodes) {\n      const parent = parentOf.get(node.id);\n      byParent.set(parent, [...(byParent.get(parent) ?? []), node]);\n    }\n    return byParent;\n  }, [graph]);\n  // Terminates: the honoured parents form a tree.\n  const items = (parent: string | undefined): React.JSX.Element[] =>\n    (children.get(parent) ?? []).map((node) => (\n      <GraphViewerListItem key={node.id} node={node} selected={node.id === selectedNodeId}>\n        {children.has(node.id) && <ol className=\"ms-4 flex flex-col gap-1\">{items(node.id)}</ol>}\n      </GraphViewerListItem>\n    ));\n  return <ol aria-label={title} className=\"flex flex-col gap-1\" data-graph-viewer-list>{items(undefined)}</ol>;\n};\n\nconst GraphViewerListItem = ({ node, selected, children }: { readonly node: GraphViewNode; readonly selected: boolean; readonly children?: React.ReactNode }): React.JSX.Element => {\n  const { nameOf, activate, renderNodeBody, words, list } = useGraphViewerNodeContext();\n  return (\n    <li data-graph-viewer-list-item={node.id}>\n      <button\n        aria-current={selected ? \"true\" : undefined}\n        className={cn(\"flex w-full flex-col gap-1 rounded-md border p-2 text-start\", node.status === FlowsActors_Status.AWAITING_APPROVAL && \"border-warning\", selected && \"ring-2 ring-primary\")}\n        type=\"button\"\n        onClick={() => activate(node)}\n      >\n        <span className=\"flex items-center justify-between gap-2\">\n          <span className=\"text-sm font-medium\">{node.kind === GraphViewNodeKind.CHOREOGRAPHY_ROUND ? words(\"roundTitle\", { round: node.label }) : node.label}</span>\n          {node.status && <AI_FlowNodeStatusBadge status={node.status} />}\n        </span>\n        {renderNodeBody?.(node)}\n        {node.waitsOn.length > 0 && <span className=\"text-2xs text-muted-foreground\">{words(\"waitsOn\", { steps: list(node.waitsOn.map(nameOf)) })}</span>}\n      </button>\n      {children}\n    </li>\n  );\n};\n"]}

package/dist/esm/components/flows-actors/graph-viewer.labels.d.ts

@@ -0,0 +1,3 @@
+import { type LabellingUnitaryDef } from '@wildo-ai/presets-components-models';
+export declare const LowLevelAiGraphViewerLabels: LabellingUnitaryDef[];
+//# sourceMappingURL=graph-viewer.labels.d.ts.map

package/dist/esm/components/flows-actors/graph-viewer.labels.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"graph-viewer.labels.d.ts","sourceRoot":"","sources":["../../../../../src/components/flows-actors/graph-viewer.labels.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoC,KAAK,mBAAmB,EAA2B,MAAM,qCAAqC,CAAC;AAM1I,eAAO,MAAM,2BAA2B,EAAE,mBAAmB,EA4D5D,CAAC"}