@terra-symposium/docs 0.1.17 → 0.1.71

package/lib-dist/{terra → components/terra}/flow/_chrome.js

@@ -8,19 +8,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 IMPORTS
 //////////////////////////////////////////////////*/
 // API
-import { applyEdgeChanges, applyNodeChanges, getSmoothStepPath, useInternalNode, useNodeConnections, useReactFlow, useStore } from '@xyflow/react';
-import { canonicalId, cn, isNumber, isRec, isString, normArcGraph, resolvedEdges } from '../runtime/runtime.js';
-import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
-import { layoutGraph } from './_layout.js';
+import { applyEdgeChanges, applyNodeChanges, getSmoothStepPath, useInternalNode, useNodeConnections, useReactFlow, useStore, } from '@xyflow/react';
+import { canonicalId, cn, isNumber, isRec, isString, normArcGraph, resolvedEdges, } from '../../../lib/terra/runtime/runtime.js';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { layoutGraph } from '../../../lib/terra/flow/_layout.js';
 // COMPONENTS
-import { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, Position as HandlePos, ReactFlow, ReactFlowProvider } from '@xyflow/react';
+import { Background, BackgroundVariant, BaseEdge, Controls, EdgeLabelRenderer, Handle, Position as HandlePos, ReactFlow, ReactFlowProvider, } from '@xyflow/react';
 import { Button } from '@terra-symposium/styling/ui/terra-original';
 import { ButtonGroup } from '@terra-symposium/styling/ui/terra-original';
 import { Card, CardDescription } from '@terra-symposium/styling/ui/terra-original';
-import { ErrorBoundary } from '../runtime/ui.js';
-import { FitToScreen as FitToScreenIcon, MagicWand as MagicWandIcon, ZoomIn as ZoomInIcon, ZoomOut as ZoomOutIcon } from '@carbon/icons-react';
+import { ErrorBoundary } from '../ui.js';
+import { FitToScreen as FitToScreenIcon, MagicWand as MagicWandIcon, ZoomIn as ZoomInIcon, ZoomOut as ZoomOutIcon, } from '@carbon/icons-react';
 import { Textarea } from '@terra-symposium/styling/ui/terra-original';
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@terra-symposium/styling/ui/terra-original';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@terra-symposium/styling/ui/terra-original';
 /*//////////////////////////////////////////////////
 CONFIG
 //////////////////////////////////////////////////*/
@@ -35,7 +35,13 @@ const ARC_PORTS = {
     outbound: ['default', 'bottom'],
 };
 const CLASS = { meta: 'text-xs opacity-70' };
-const EDGE_LANE = { gap: 20, minWidth: 112, maxWidth: 320, appendageGap: 4, appendageWidth: 128 };
+const EDGE_LANE = {
+    gap: 20,
+    minWidth: 112,
+    maxWidth: 320,
+    appendageGap: 4,
+    appendageWidth: 128,
+};
 /*//////////////////////////////////////////////////
 EDITOR
 //////////////////////////////////////////////////*/
@@ -48,7 +54,7 @@ EDITOR
  *
  * @return The current editor state and mutation helpers.
  */
-export function useEditor({ adapter, disabled = false }) {
+export function useEditor({ adapter, disabled = false, }) {
     // STATES
     const [els, setEls] = useState(adapter.read);
     const ref = useRef(els);
@@ -65,11 +71,15 @@ export function useEditor({ adapter, disabled = false }) {
     }, [adapter]);
     const editable = useCallback((n) => adapter.editableNode?.(n) ?? true, [adapter]);
     const selection = useCallback(() => {
-        const nodes = ref.current.nodes.filter(n => n.selected && editable(n));
+        const nodes = ref.current.nodes.filter((n) => n.selected && editable(n));
         if (!nodes.length)
             return null;
-        const ids = new Set(nodes.map(n => n.id));
-        return { version: 1, nodes, edges: ref.current.edges.filter(e => ids.has(e.source) && ids.has(e.target)) };
+        const ids = new Set(nodes.map((n) => n.id));
+        return {
+            version: 1,
+            nodes,
+            edges: ref.current.edges.filter((e) => ids.has(e.source) && ids.has(e.target)),
+        };
     }, [editable]);
     const copy = useCallback(() => {
         const val = selection();
@@ -80,10 +90,13 @@ export function useEditor({ adapter, disabled = false }) {
     const deleteSel = useCallback(() => {
         if (disabled)
             return;
-        const ids = new Set(ref.current.nodes.filter(n => n.selected && editable(n)).map(n => n.id));
+        const ids = new Set(ref.current.nodes.filter((n) => n.selected && editable(n)).map((n) => n.id));
         if (!ids.size)
             return;
-        write({ nodes: ref.current.nodes.filter(n => !ids.has(n.id)), edges: ref.current.edges.filter(e => !ids.has(e.source) && !ids.has(e.target)) });
+        write({
+            nodes: ref.current.nodes.filter((n) => !ids.has(n.id)),
+            edges: ref.current.edges.filter((e) => !ids.has(e.source) && !ids.has(e.target)),
+        });
     }, [disabled, editable, write]);
     const cut = useCallback(() => {
         if (disabled)
@@ -96,16 +109,31 @@ export function useEditor({ adapter, disabled = false }) {
             return;
         try {
             const raw = JSON.parse(window.localStorage.getItem(adapter.clipboardKey) ?? 'null');
-            if (!isRec(raw) || raw.version !== 1 || !Array.isArray(raw.nodes) || !Array.isArray(raw.edges))
+            if (!isRec(raw) ||
+                raw.version !== 1 ||
+                !Array.isArray(raw.nodes) ||
+                !Array.isArray(raw.edges))
                 return;
             const val = raw;
-            const ids = new Map(val.nodes.map(n => [n.id, `n-${crypto.randomUUID()}`]));
+            const ids = new Map(val.nodes.map((n) => [n.id, `n-${crypto.randomUUID()}`]));
             write({
                 nodes: [
-                    ...ref.current.nodes.map(n => ({ ...n, selected: false })),
-                    ...val.nodes.map(n => ({ ...(adapter.cloneNode?.(n, ids.get(n.id)) ?? { ...n, id: ids.get(n.id) }), position: { x: n.position.x + 40, y: n.position.y + 40 }, selected: true })),
+                    ...ref.current.nodes.map((n) => ({ ...n, selected: false })),
+                    ...val.nodes.map((n) => ({
+                        ...(adapter.cloneNode?.(n, ids.get(n.id)) ?? { ...n, id: ids.get(n.id) }),
+                        position: { x: n.position.x + 40, y: n.position.y + 40 },
+                        selected: true,
+                    })),
+                ],
+                edges: [
+                    ...ref.current.edges,
+                    ...val.edges.map((e) => ({
+                        ...e,
+                        id: `e-${crypto.randomUUID()}`,
+                        source: ids.get(e.source),
+                        target: ids.get(e.target),
+                    })),
                 ],
-                edges: [...ref.current.edges, ...val.edges.map(e => ({ ...e, id: `e-${crypto.randomUUID()}`, source: ids.get(e.source), target: ids.get(e.target) }))],
             });
         }
         catch {
@@ -118,13 +146,25 @@ export function useEditor({ adapter, disabled = false }) {
         const val = selection();
         if (!val)
             return;
-        const ids = new Map(val.nodes.map(n => [n.id, `n-${crypto.randomUUID()}`]));
+        const ids = new Map(val.nodes.map((n) => [n.id, `n-${crypto.randomUUID()}`]));
         write({
             nodes: [
-                ...ref.current.nodes.map(n => ({ ...n, selected: false })),
-                ...val.nodes.map(n => ({ ...(adapter.cloneNode?.(n, ids.get(n.id)) ?? { ...n, id: ids.get(n.id) }), position: { x: n.position.x + 40, y: n.position.y + 40 }, selected: true })),
+                ...ref.current.nodes.map((n) => ({ ...n, selected: false })),
+                ...val.nodes.map((n) => ({
+                    ...(adapter.cloneNode?.(n, ids.get(n.id)) ?? { ...n, id: ids.get(n.id) }),
+                    position: { x: n.position.x + 40, y: n.position.y + 40 },
+                    selected: true,
+                })),
+            ],
+            edges: [
+                ...ref.current.edges,
+                ...val.edges.map((e) => ({
+                    ...e,
+                    id: `e-${crypto.randomUUID()}`,
+                    source: ids.get(e.source),
+                    target: ids.get(e.target),
+                })),
             ],
-            edges: [...ref.current.edges, ...val.edges.map(e => ({ ...e, id: `e-${crypto.randomUUID()}`, source: ids.get(e.source), target: ids.get(e.target) }))],
         });
     }, [adapter, disabled, selection, write]);
     useEffect(() => {
@@ -136,7 +176,10 @@ export function useEditor({ adapter, disabled = false }) {
          * @param e - Pointer event received from the flow canvas.
          */
         const keydown = (e) => {
-            if (!(e.metaKey || e.ctrlKey) || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement || e.target?.isContentEditable)
+            if (!(e.metaKey || e.ctrlKey) ||
+                e.target instanceof HTMLInputElement ||
+                e.target instanceof HTMLTextAreaElement ||
+                e.target?.isContentEditable)
                 return;
             if (e.key.toLowerCase() === 'c') {
                 e.preventDefault();
@@ -163,11 +206,21 @@ export function useEditor({ adapter, disabled = false }) {
     // RENDER
     return {
         ...els,
-        selected: els.nodes.filter(n => n.selected),
+        selected: els.nodes.filter((n) => n.selected),
         connect: useCallback((c) => {
-            if (disabled || !c.source || !c.target || adapter.validConnection?.(c, ref.current) === false)
+            if (disabled ||
+                !c.source ||
+                !c.target ||
+                adapter.validConnection?.(c, ref.current) === false)
                 return;
-            const e = adapter.createEdge?.(c, ref.current) ?? { id: `e-${crypto.randomUUID()}`, source: c.source, target: c.target, sourceHandle: c.sourceHandle, targetHandle: c.targetHandle };
+            const e = adapter.createEdge?.(c, ref.current) ??
+                {
+                    id: `e-${crypto.randomUUID()}`,
+                    source: c.source,
+                    target: c.target,
+                    sourceHandle: c.sourceHandle,
+                    targetHandle: c.targetHandle,
+                };
             if (e)
                 write({ ...ref.current, edges: [...ref.current.edges, e] });
         }, [adapter, disabled, write]),
@@ -180,17 +233,23 @@ export function useEditor({ adapter, disabled = false }) {
                 write(adapter.layout(ref.current));
         }, [adapter, disabled, write]),
         onEdgesChange: useCallback((v) => {
-            const permitted = disabled ? v.filter(c => c.type === 'select') : v;
+            const permitted = disabled ? v.filter((c) => c.type === 'select') : v;
             if (permitted.length)
                 write({ ...ref.current, edges: applyEdgeChanges(permitted, ref.current.edges) });
         }, [disabled, write]),
         onNodesChange: useCallback((v) => {
-            const permitted = disabled ? v.filter(c => c.type === 'select') : v;
+            const permitted = disabled ? v.filter((c) => c.type === 'select') : v;
             if (permitted.length)
                 write({ ...ref.current, nodes: applyNodeChanges(permitted, ref.current.nodes) });
         }, [disabled, write]),
         onSelectionChange: useCallback((v) => {
-            write({ ...ref.current, nodes: ref.current.nodes.map(n => ({ ...n, selected: new Set(v.map(n => n.id)).has(n.id) })) });
+            write({
+                ...ref.current,
+                nodes: ref.current.nodes.map((n) => ({
+                    ...n,
+                    selected: new Set(v.map((n) => n.id)).has(n.id),
+                })),
+            });
         }, [write]),
         paste,
     };
@@ -209,7 +268,9 @@ export function getCustomPos(n) {
     if (!isRec(n.data) || !('customPosition' in n.data))
         return;
     const point = n.data.customPosition;
-    return isRec(point) && isNumber(point.x) && isNumber(point.y) ? { x: point.x, y: point.y } : undefined;
+    return isRec(point) && isNumber(point.x) && isNumber(point.y)
+        ? { x: point.x, y: point.y }
+        : undefined;
 }
 /**
  * Resolves a node's structural group id from its parent or embedded data.
@@ -239,9 +300,21 @@ export function getNodeSize(n, defaults = {
     erdHeight: 60,
 }, extraHeight) {
     const style = isRec(n.style) ? n.style : {};
-    const width = Number(n.measured?.width ?? style.width ?? (n.type === 'group' ? (defaults.groupWidth ?? defaults.width) : n.type === 'erd' ? (defaults.erdWidth ?? defaults.width) : defaults.width));
-    const height = extraHeight?.(n) ?? Number(n.measured?.height ?? style.height ?? (n.type === 'group' ? (defaults.groupHeight ?? defaults.height) : defaults.height));
-    return { w: Number.isFinite(width) ? width : defaults.width, h: Number.isFinite(height) ? height : defaults.height };
+    const width = Number(n.measured?.width ??
+        style.width ??
+        (n.type === 'group'
+            ? (defaults.groupWidth ?? defaults.width)
+            : n.type === 'erd'
+                ? (defaults.erdWidth ?? defaults.width)
+                : defaults.width));
+    const height = extraHeight?.(n) ??
+        Number(n.measured?.height ??
+            style.height ??
+            (n.type === 'group' ? (defaults.groupHeight ?? defaults.height) : defaults.height));
+    return {
+        w: Number.isFinite(width) ? width : defaults.width,
+        h: Number.isFinite(height) ? height : defaults.height,
+    };
 }
 /**
  * Creates the stable Arc layout used by both the editor and read-only canvas.
@@ -256,7 +329,11 @@ export function useArcNodeLayout(customLayout) {
             return customLayout(n, e);
         if (!n.length)
             return n;
-        const sizeByType = { content: { w: 208, h: 92 }, group: { w: 240, h: 160 }, default: { w: 160, h: 72 } };
+        const sizeByType = {
+            content: { w: 208, h: 92 },
+            group: { w: 240, h: 160 },
+            default: { w: 160, h: 72 },
+        };
         const getSize = (node) => {
             const type = isRec(node.data) && isString(node.data.graphType) ? node.data.graphType : 'default';
             return Object.hasOwn(sizeByType, type) ? sizeByType[type] : sizeByType.default;
@@ -265,7 +342,10 @@ export function useArcNodeLayout(customLayout) {
             getSize,
             placeNode: (node, dagreNode) => {
                 const size = getSize(node);
-                return { ...node, position: { x: (dagreNode?.x ?? 0) - size.w / 2, y: (dagreNode?.y ?? 0) - size.h / 2 } };
+                return {
+                    ...node,
+                    position: { x: (dagreNode?.x ?? 0) - size.w / 2, y: (dagreNode?.y ?? 0) - size.h / 2 },
+                };
             },
         }).positionedNodes;
     }, [customLayout]);
@@ -282,7 +362,7 @@ export function useArcNodeLayout(customLayout) {
  *
  * @returns Positioned nodes and the resulting graph height.
  */
-export { layoutGraph } from './_layout.js';
+export { layoutGraph } from '../../../lib/terra/flow/_layout.js';
 /*//////////////////////////////////////////////////
 NODE CHROME
 //////////////////////////////////////////////////*/
@@ -296,13 +376,16 @@ NODE CHROME
  *
  * @return The full handle set for a node.
  */
-export function Handles({ editable = false, sources: srcs = [], tgts = [] }) {
-    return (_jsx(ErrorBoundary, { name: 'Handles', children: ['target', 'source'].map(t => [
+export function Handles({ editable = false, sources: srcs = [], tgts = [], }) {
+    return (_jsx(ErrorBoundary, { name: "Handles", children: ['target', 'source'].map((t) => [
             { id: 'top', pos: HandlePos.Top },
             { id: 'right', pos: HandlePos.Right },
             { id: 'bottom', pos: HandlePos.Bottom },
             { id: 'left', pos: HandlePos.Left },
-        ].map(p => (_jsx(Port, { id: p.id, type: t, position: p.pos, style: { opacity: editable || (t === 'target' ? tgts : srcs).includes(p.id) ? 1 : 0, pointerEvents: editable ? 'auto' : 'none' } }, `${t}-${p.id}`)))) }));
+        ].map((p) => (_jsx(Port, { id: p.id, type: t, position: p.pos, style: {
+                opacity: editable || (t === 'target' ? tgts : srcs).includes(p.id) ? 1 : 0,
+                pointerEvents: editable ? 'auto' : 'none',
+            } }, `${t}-${p.id}`)))) }));
 }
 /**
  * Renders a single styled React Flow handle with an optional tooltip.
@@ -340,7 +423,7 @@ function Port({ ariaLabel, className, hidden = false, id, isConnectable, positio
             pointerEvents: hidden ? 'none' : (style?.pointerEvents ?? 'auto'),
             ...(choice ? { clipPath: 'polygon(50% 0, 100% 50%, 50% 100%, 0 50%)' } : {}),
         }, id: id, ...(ariaLabel ? { 'aria-label': ariaLabel } : {}), ...(isConnectable !== undefined ? { isConnectable } : {}) }));
-    return title ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: handle }), _jsx(TooltipContent, { size: 'sm', children: title })] })) : (handle);
+    return title ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: handle }), _jsx(TooltipContent, { size: "sm", children: title })] })) : (handle);
 }
 /**
  * Renders the compact skeleton card used while a flow is resolving.
@@ -354,19 +437,19 @@ function Port({ ariaLabel, className, hidden = false, id, isConnectable, positio
  */
 export function SkeletonCard({ as = 'div', className, style, ...props }) {
     const Element = as;
-    return (_jsx(ErrorBoundary, { name: 'SkeletonCard', children: _jsxs(Element, { ...props, className: cn('relative flex h-16 items-center justify-center overflow-visible rounded-md border-2 px-3 py-2 shadow-sm', className), style: { backgroundColor: '#eaf8f9', borderColor: '#16899d', width: 208, ...style }, children: [_jsx("div", { className: 'absolute left-1/2 top-0 z-10 h-2 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border shadow-sm', style: { backgroundColor: '#f7ffff', borderColor: '#16899d' } }), _jsxs("div", { className: 'flex w-full animate-pulse flex-col items-center gap-2', children: [_jsx("div", { className: 'h-4 w-[92%] rounded-md', style: { backgroundColor: '#5db9c6' } }), _jsx("div", { className: 'mr-2 h-2.5 w-20 rounded-md', style: { backgroundColor: '#91d3db' } })] })] }) }));
+    return (_jsx(ErrorBoundary, { name: "SkeletonCard", children: _jsxs(Element, { ...props, className: cn('relative flex h-16 items-center justify-center overflow-visible rounded-md border-2 px-3 py-2 shadow-sm', className), style: { backgroundColor: '#eaf8f9', borderColor: '#16899d', width: 208, ...style }, children: [_jsx("div", { className: "absolute left-1/2 top-0 z-10 h-2 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full border shadow-sm", style: { backgroundColor: '#f7ffff', borderColor: '#16899d' } }), _jsxs("div", { className: "flex w-full animate-pulse flex-col items-center gap-2", children: [_jsx("div", { className: "h-4 w-[92%] rounded-md", style: { backgroundColor: '#5db9c6' } }), _jsx("div", { className: "mr-2 h-2.5 w-20 rounded-md", style: { backgroundColor: '#91d3db' } })] })] }) }));
 }
 /** Provides the common card, title, and metadata treatment for every Arc graph host. */
 const DEFAULT_SKIN = {
-    Card: ({ children, className, onClick, selected, style, tone = 'default' }) => (_jsx(Card, { onClick: onClick, size: 'sm', style: { overflow: 'visible', ...style }, className: cn('relative min-w-36 !overflow-visible !rounded !p-3 shadow-sm', {
+    Card: ({ children, className, onClick, selected, style, tone = 'default' }) => (_jsx(Card, { onClick: onClick, size: "sm", style: { overflow: 'visible', ...style }, className: cn('relative min-w-36 !overflow-visible !rounded !p-3 shadow-sm', {
             caution: 'border-amber-500 bg-amber-50 text-amber-950 dark:border-amber-800 dark:bg-amber-950 dark:text-amber-100',
             critical: 'border-red-500 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100',
             default: 'border-primary-6 bg-primary-1 text-primary-12',
             positive: 'border-green-600 bg-green-50 text-green-900 dark:border-green-700 dark:bg-green-950 dark:text-green-100',
             primary: 'border-primary-7 bg-primary-2 text-primary-12',
         }[tone], selected && 'ring-2 ring-primary-8', className), children: children })),
-    Input: props => _jsx(Textarea, { ...props }),
-    Text: ({ children, className }) => _jsx(CardDescription, { className: className, children: children }),
+    Input: (props) => _jsx(Textarea, { ...props }),
+    Text: ({ children, className }) => (_jsx(CardDescription, { className: className, children: children })),
 };
 const SkinCtx = createContext(DEFAULT_SKIN);
 /**
@@ -400,7 +483,11 @@ function isArrayEqual(a, b) {
 export function LogicNode({ id, data }) {
     const skin = useSkin();
     const type = data.graphType ?? 'function';
-    const detail = type === 'function' ? data.function?.type : type === 'condition' ? data.condition?.type : undefined;
+    const detail = type === 'function'
+        ? data.function?.type
+        : type === 'condition'
+            ? data.condition?.type
+            : undefined;
     // prettier-ignore
     return _jsx(ErrorBoundary, { name: 'LogicNode', children: _jsxs(skin.Card, { className: cn('flex flex-col justify-center', (type === 'origin' || type === 'terminal') && 'items-center rounded-full text-center'), style: { ... /* prettier-ignore */(type === 'origin' ? { background: '#f0fdf4', borderColor: '#16a34a', color: '#14532d' }
                     : type === 'terminal' ? { background: '#fef2f2', borderColor: '#ef4444', color: '#7f1d1d' }
@@ -416,13 +503,13 @@ export function LogicNode({ id, data }) {
  *
  * @return The zoom control cluster.
  */
-export function ZoomControls({ position: pos, disabled = false }) {
+export function ZoomControls({ position: pos, disabled = false, }) {
     const { fitView, zoomIn, zoomOut } = useReactFlow();
-    return (_jsx(ErrorBoundary, { name: 'ZoomControls', children: _jsx(Controls, { position: pos, showZoom: false, showFitView: false, showInteractive: false, children: _jsx(ButtonGroup, { children: [
-                    { label: 'Zoom in', icon: _jsx(ZoomInIcon, { "aria-hidden": 'true' }), onClick: zoomIn },
-                    { label: 'Zoom out', icon: _jsx(ZoomOutIcon, { "aria-hidden": 'true' }), onClick: zoomOut },
-                    { label: 'Fit view', icon: _jsx(FitToScreenIcon, { "aria-hidden": 'true' }), onClick: fitView },
-                ].map(({ label: l, icon: i, onClick: o }) => (_jsx(Button, { variant: 'ghost', size: 'icon-sm', "aria-label": l, title: l, disabled: disabled, onClick: () => void o(), children: i }, l))) }) }) }));
+    return (_jsx(ErrorBoundary, { name: "ZoomControls", children: _jsx(Controls, { position: pos, showZoom: false, showFitView: false, showInteractive: false, children: _jsx(ButtonGroup, { children: [
+                    { label: 'Zoom in', icon: _jsx(ZoomInIcon, { "aria-hidden": "true" }), onClick: zoomIn },
+                    { label: 'Zoom out', icon: _jsx(ZoomOutIcon, { "aria-hidden": "true" }), onClick: zoomOut },
+                    { label: 'Fit view', icon: _jsx(FitToScreenIcon, { "aria-hidden": "true" }), onClick: fitView },
+                ].map(({ label: l, icon: i, onClick: o }) => (_jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": l, title: l, disabled: disabled, onClick: () => void o(), children: i }, l))) }) }) }));
 }
 /**
  * Renders the shared floating context menu shell used by flow hosts.
@@ -433,7 +520,7 @@ export function ZoomControls({ position: pos, disabled = false }) {
  *
  * @return The floating context menu when visible, otherwise `null`.
  */
-function FloatingMenu({ state, children }) {
+function FloatingMenu({ state, children, }) {
     if (!state.show)
         return null;
     // prettier-ignore
@@ -449,7 +536,7 @@ LOADING
  * @return The shared loading skeleton.
  */
 export function Skeleton() {
-    return (_jsx(ErrorBoundary, { name: 'Skeleton', children: _jsx("div", { className: 'flex w-full items-center justify-center', style: { minHeight: 'calc(100vh - 20rem)' }, children: _jsxs("div", { className: 'flex animate-pulse flex-col items-center gap-8', children: [_jsx(SkeletonCard, {}), _jsx(SkeletonCard, { className: 'translate-x-16 opacity-70' }), _jsx(SkeletonCard, { className: '-translate-x-12 opacity-40' })] }) }) }));
+    return (_jsx(ErrorBoundary, { name: "Skeleton", children: _jsx("div", { className: "flex w-full items-center justify-center", style: { minHeight: 'calc(100vh - 20rem)' }, children: _jsxs("div", { className: "flex animate-pulse flex-col items-center gap-8", children: [_jsx(SkeletonCard, {}), _jsx(SkeletonCard, { className: "translate-x-16 opacity-70" }), _jsx(SkeletonCard, { className: "-translate-x-12 opacity-40" })] }) }) }));
 }
 /*//////////////////////////////////////////////////
 ARC ADAPTER
@@ -464,10 +551,17 @@ ARC ADAPTER
  */
 export function arcGraphFrom(flow, prev) {
     return {
-        nodes: flow.nodes.map(n => {
-            const prior = new Map(prev.nodes.map(i => [i._key, i])).get(n.data.graphKey);
-            const type = n.data.graphType || (n.type === 'decision' ? 'function' : n.type === 'origin' || n.type === 'terminal' ? n.type : 'content');
-            const published = isRec(n.data.published) && isString(n.data.published._id) ? n.data.published._id : undefined;
+        nodes: flow.nodes.map((n) => {
+            const prior = new Map(prev.nodes.map((i) => [i._key, i])).get(n.data.graphKey);
+            const type = n.data.graphType ||
+                (n.type === 'decision'
+                    ? 'function'
+                    : n.type === 'origin' || n.type === 'terminal'
+                        ? n.type
+                        : 'content');
+            const published = isRec(n.data.published) && isString(n.data.published._id)
+                ? n.data.published._id
+                : undefined;
             return {
                 ...(prior ?? {}),
                 _key: n.data.graphKey || n.id,
@@ -475,18 +569,36 @@ export function arcGraphFrom(flow, prev) {
                 position: { ...n.position, ...(n.data.hierarchy ? { row: n.data.hierarchy.row } : {}) },
                 ...(n.data.title ? { title: n.data.title } : {}),
                 ...(n.parentId ? { parentId: n.parentId } : {}),
-                ...(isRec(n.style) ? { style: { ...(isNumber(n.style.width) ? { width: n.style.width } : {}), ...(isNumber(n.style.height) ? { height: n.style.height } : {}) } } : {}),
-                ...(prior?.problem || n.data.problemId || published ? { problem: prior?.problem || { _type: 'reference', _ref: n.data.problemId || published || '' } } : {}),
+                ...(isRec(n.style)
+                    ? {
+                        style: {
+                            ...(isNumber(n.style.width) ? { width: n.style.width } : {}),
+                            ...(isNumber(n.style.height) ? { height: n.style.height } : {}),
+                        },
+                    }
+                    : {}),
+                ...(prior?.problem || n.data.problemId || published
+                    ? {
+                        problem: prior?.problem || {
+                            _type: 'reference',
+                            _ref: n.data.problemId || published || '',
+                        },
+                    }
+                    : {}),
                 ...(n.data.hidden ? { hidden: true } : {}),
-                ...(type === 'function' && !prior?.function ? { function: { type: 'appendPrefix', value: '' } } : {}),
-                ...(type === 'condition' && !prior?.condition ? { condition: { type: 'random', weights: [] } } : {}),
+                ...(type === 'function' && !prior?.function
+                    ? { function: { type: 'appendPrefix', value: '' } }
+                    : {}),
+                ...(type === 'condition' && !prior?.condition
+                    ? { condition: { type: 'random', weights: [] } }
+                    : {}),
             };
         }),
-        edges: flow.edges.map(e => ({
+        edges: flow.edges.map((e) => ({
             _key: e.id,
             source: e.source,
             target: e.target,
-            ...(new Map(flow.nodes.map(n => [n.id, n.data.graphType])).get(e.source) === 'content' &&
+            ...(new Map(flow.nodes.map((n) => [n.id, n.data.graphType])).get(e.source) === 'content' &&
                 e.sourceHandle &&
                 !(
                 /*
@@ -496,7 +608,9 @@ export function arcGraphFrom(flow, prev) {
                  */ ['top', 'right', 'bottom', 'left'].includes(e.sourceHandle))
                 ? { handle: e.sourceHandle }
                 : {}),
-            ...(e.data?.functions?.length ? { functions: e.data.functions } : {}),
+            ...(e.data?.functions?.length
+                ? { functions: e.data.functions }
+                : {}),
         })),
     };
 }
@@ -524,7 +638,7 @@ export function arcGraphFrom(flow, prev) {
  *
  * @return The shared Arc canvas.
  */
-export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _jsx(MagicWandIcon, { "aria-hidden": 'true' }), arrangeLabel = 'Arrange nodes', editable = false, layoutNodes, readOnly = false, showDuration = true, showHierarchyControls = true, onArrange, onConnect, onEdgesChange, onInit, onNodeClick, onNodeContextMenu: onNodeCtxMenu, onNodesChange, onPaneContextMenu: onPaneCtxMenu, onProblemOpen, onProblemTitleChange, onReady, onResizeEnd, }) {
+export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _jsx(MagicWandIcon, { "aria-hidden": "true" }), arrangeLabel = 'Arrange nodes', editable = false, layoutNodes, readOnly = false, showDuration = true, showHierarchyControls = true, onArrange, onConnect, onEdgesChange, onInit, onNodeClick, onNodeContextMenu: onNodeCtxMenu, onNodesChange, onPaneContextMenu: onPaneCtxMenu, onProblemOpen, onProblemTitleChange, onReady, onResizeEnd, }) {
     // STATES
     const arrangeNodes = useArcNodeLayout(layoutNodes);
     // prettier-ignore
@@ -533,12 +647,15 @@ export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _j
     const [nodes, setNodes] = useState(() => arrangeNodes(els.nodes, els.edges));
     // INIT
     useEffect(() => {
-        setNodes(c => {
+        setNodes((c) => {
             if (layout.current !== topology) {
                 layout.current = topology;
                 return arrangeNodes(els.nodes, els.edges);
             }
-            return els.nodes.map(n => ({ ...n, position: new Map(c.map(n => [n.id, n.position])).get(n.id) ?? n.position }));
+            return els.nodes.map((n) => ({
+                ...n,
+                position: new Map(c.map((n) => [n.id, n.position])).get(n.id) ?? n.position,
+            }));
         });
     }, [arrangeNodes, els.edges, els.nodes, topology]);
     // HELPERS
@@ -547,9 +664,9 @@ export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _j
         return ((frame) => () => cancelAnimationFrame(frame))(requestAnimationFrame(() => onReady?.()));
     }, [onReady]);
     // RENDER
-    return (_jsx(ErrorBoundary, { name: 'ArcCanvas', children: _jsx(ReactFlowProvider, { children: _jsx(TooltipProvider, { delayDuration: 120, children: _jsx(SkinCtx.Provider, { value: DEFAULT_SKIN, children: _jsx(InitCtx.Provider, { value: true, children: _jsxs(ReactFlow, { nodes: nodes
-                                .filter(n => !n.data.hidden)
-                                .map(n => ({
+    return (_jsx(ErrorBoundary, { name: "ArcCanvas", children: _jsx(ReactFlowProvider, { children: _jsx(TooltipProvider, { delayDuration: 120, children: _jsx(SkinCtx.Provider, { value: DEFAULT_SKIN, children: _jsx(InitCtx.Provider, { value: true, children: _jsxs(ReactFlow, { nodes: nodes
+                                .filter((n) => !n.data.hidden)
+                                .map((n) => ({
                                 ...n,
                                 data: {
                                     ...n.data,
@@ -558,21 +675,43 @@ export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _j
                                     showDuration,
                                     showHierarchyControls,
                                     ...(n.data.graphType === 'content'
-                                        ? { onOpen: () => n.data.problem && onProblemOpen?.(n.data.problem), onTitleChange: (title) => onProblemTitleChange?.(n.id, title) }
+                                        ? {
+                                            onOpen: () => n.data.problem && onProblemOpen?.(n.data.problem),
+                                            onTitleChange: (title) => onProblemTitleChange?.(n.id, title),
+                                        }
                                         : {}),
                                     ...(n.data.hierarchy
                                         ? {
                                             hierarchy: {
                                                 ...n.data.hierarchy,
-                                                onChange: (pos) => onNodesChange?.([{ id: n.id, type: 'replace', item: { ...n, data: { ...n.data, hierarchy: { ...n.data.hierarchy, ...pos } } } }]),
+                                                onChange: (pos) => onNodesChange?.([
+                                                    {
+                                                        id: n.id,
+                                                        type: 'replace',
+                                                        item: {
+                                                            ...n,
+                                                            data: {
+                                                                ...n.data,
+                                                                hierarchy: { ...n.data.hierarchy, ...pos },
+                                                            },
+                                                        },
+                                                    },
+                                                ]),
                                             },
                                         }
                                         : {}),
                                     ...(n.data.graphType === 'group' || n.data.graphType === 'note'
-                                        ? { onResizeEnd: (_id, params) => onResizeEnd?.(n.id, params) }
+                                        ? {
+                                            onResizeEnd: (_id, params) => onResizeEnd?.(n.id, params),
+                                        }
                                         : {}),
                                 },
-                            })), edges: els.edges, nodeTypes: useMemo(() => ({ group: annotationNodeTypes?.group, logicNode: LogicNode, note: annotationNodeTypes?.note, problemNode: ProblemNode }), [annotationNodeTypes]), edgeTypes: { custom: ArcEdge }, onInit: i => {
+                            })), edges: els.edges, nodeTypes: useMemo(() => ({
+                                group: annotationNodeTypes?.group,
+                                logicNode: LogicNode,
+                                note: annotationNodeTypes?.note,
+                                problemNode: ProblemNode,
+                            }), [annotationNodeTypes]), edgeTypes: { custom: ArcEdge }, onInit: (i) => {
                                 onInit?.(i);
                                 requestAnimationFrame(() => {
                                     void i.fitView({ padding: 0.1, duration: 50 });
@@ -580,12 +719,16 @@ export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _j
                             }, onNodesChange: useCallback((c) => {
                                 if (!onNodesChange)
                                     return;
-                                setNodes(s => applyNodeChanges(c, s));
+                                setNodes((s) => applyNodeChanges(c, s));
                                 onNodesChange(c);
-                            }, [onNodesChange]), ...(onEdgesChange ? { onEdgesChange } : {}), ...(onConnect ? { onConnect: (connection) => onConnect({ ...connection, targetHandle: 'inbound' }) } : {}), ...(onNodeClick ? { onNodeClick } : {}), ...(onNodeCtxMenu ? { onNodeContextMenu: onNodeCtxMenu } : {}), ...(onPaneCtxMenu ? { onPaneContextMenu: onPaneCtxMenu } : {}), fitView: true, minZoom: 0.1, proOptions: { hideAttribution: true }, panOnScroll: true, panOnDrag: false, zoomOnScroll: false, selectionOnDrag: editable, nodesDraggable: editable, nodesConnectable: editable, elementsSelectable: editable, children: [onArrange && (_jsx(Controls, { position: 'top-right', showFitView: false, showInteractive: false, showZoom: false, children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: 'ghost', size: 'icon-sm', "aria-label": arrangeLabel, title: arrangeLabel, onClick: () => {
+                            }, [onNodesChange]), ...(onEdgesChange ? { onEdgesChange } : {}), ...(onConnect
+                                ? {
+                                    onConnect: (connection) => onConnect({ ...connection, targetHandle: 'inbound' }),
+                                }
+                                : {}), ...(onNodeClick ? { onNodeClick } : {}), ...(onNodeCtxMenu ? { onNodeContextMenu: onNodeCtxMenu } : {}), ...(onPaneCtxMenu ? { onPaneContextMenu: onPaneCtxMenu } : {}), fitView: true, minZoom: 0.1, proOptions: { hideAttribution: true }, panOnScroll: true, panOnDrag: false, zoomOnScroll: false, selectionOnDrag: editable, nodesDraggable: editable, nodesConnectable: editable, elementsSelectable: editable, children: [onArrange && (_jsx(Controls, { position: "top-right", showFitView: false, showInteractive: false, showZoom: false, children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": arrangeLabel, title: arrangeLabel, onClick: () => {
                                                 setNodes(arrangeNodes(els.nodes, els.edges));
                                                 onArrange?.();
-                                            }, children: arrangeIcon }) }) })), _jsx(ZoomControls, { position: 'bottom-right' }), _jsx(Background, { variant: BackgroundVariant.Dots })] }) }) }) }) }) }));
+                                            }, children: arrangeIcon }) }) })), _jsx(ZoomControls, { position: "bottom-right" }), _jsx(Background, { variant: BackgroundVariant.Dots })] }) }) }) }) }) }));
 }
 /**
  * Expands a persisted Arc into the one canonical node and edge projection.
@@ -598,14 +741,18 @@ export function ArcCanvas({ elements: els, annotationNodeTypes, arrangeIcon = _j
  */
 export function arcCanvasElements(graph, problems, edgeData) {
     const norm = normArcGraph(graph);
-    const byId = new Map(problems.map(p => [canonicalId(p._id), p]));
+    const byId = new Map(problems.map((p) => [canonicalId(p._id), p]));
     return {
-        nodes: norm.nodes.map(n => {
+        nodes: norm.nodes.map((n) => {
             const problem = n.problem?._ref ? byId.get(canonicalId(n.problem._ref)) : undefined;
             return {
                 id: n._key,
                 position: n.position ?? { x: 0, y: 0 },
-                type: n.type === 'content' ? 'problemNode' : n.type === 'group' || n.type === 'note' ? n.type : 'logicNode',
+                type: n.type === 'content'
+                    ? 'problemNode'
+                    : n.type === 'group' || n.type === 'note'
+                        ? n.type
+                        : 'logicNode',
                 ...(n.parentId ? { parentId: n.parentId } : {}),
                 ...(n.style ? { style: n.style } : {}),
                 draggable: n.type !== 'origin' && n.type !== 'terminal' && !(n.position && 'row' in n.position),
@@ -613,7 +760,14 @@ export function arcCanvasElements(graph, problems, edgeData) {
                 data: {
                     graphKey: n._key,
                     graphType: n.type,
-                    title: n.type === 'content' ? problem?.title || 'Problem' : n.title || (n.type === 'group' ? 'Container' : n.type === 'note' ? 'Sticky note' : n.type.slice(0, 1).toUpperCase() + n.type.slice(1)),
+                    title: n.type === 'content'
+                        ? problem?.title || 'Problem'
+                        : n.title ||
+                            (n.type === 'group'
+                                ? 'Container'
+                                : n.type === 'note'
+                                    ? 'Sticky note'
+                                    : n.type.slice(0, 1).toUpperCase() + n.type.slice(1)),
                     ...(n.type === 'group' || n.type === 'note' ? { editable: true, id: n._key } : {}),
                     ...(n.type === 'content'
                         ? {
@@ -622,7 +776,11 @@ export function arcCanvasElements(graph, problems, edgeData) {
                                 ...(problem?.title ? { title: problem.title } : {}),
                                 ...(problem?.duration !== undefined ? { duration: problem.duration } : {}),
                                 ...(problem?.choice?.opts || problem?.choice?.options
-                                    ? { choices: (problem.choice.opts?.length ? problem.choice.opts : (problem.choice.options ?? [])).map(c => ({ id: c._key, ...(c.label ? { label: c.label } : {}) })) }
+                                    ? {
+                                        choices: (problem.choice.opts?.length
+                                            ? problem.choice.opts
+                                            : (problem.choice.options ?? [])).map((c) => ({ id: c._key, ...(c.label ? { label: c.label } : {}) })),
+                                    }
                                     : {}),
                             },
                             ...(problem ? { published: problem } : {}),
@@ -631,34 +789,50 @@ export function arcCanvasElements(graph, problems, edgeData) {
                     ...(n.function ? { function: n.function } : {}),
                     ...(n.condition ? { condition: n.condition } : {}),
                     ...(n.hidden ? { hidden: true } : {}),
-                    ...(n.position && 'row' in n.position && typeof n.position.row === 'number' ? { hierarchy: { row: n.position.row } } : {}),
+                    ...(n.position && 'row' in n.position && typeof n.position.row === 'number'
+                        ? { hierarchy: { row: n.position.row } }
+                        : {}),
                 },
             };
         }),
         edges: (() => {
             const routes = [
                 ...resolvedEdges(norm),
-                ...norm.nodes.flatMap(n => {
+                ...norm.nodes.flatMap((n) => {
                     const problem = n.problem?._ref ? byId.get(canonicalId(n.problem._ref)) : undefined;
-                    return (problem?.choice?.opts ?? problem?.choice?.options ?? []).flatMap(c => {
+                    return (problem?.choice?.opts ?? problem?.choice?.options ?? []).flatMap((c) => {
                         // Authored choice options can project to null (options stored as plain strings lose
                         // their fields under the `options[]{...}` projection). Skip malformed entries rather
                         // than crashing the whole canvas on CMS content this renderer does not control.
                         if (!isRec(c))
                             return [];
                         const tgt = c.referral?._ref
-                            ? new Map(norm.nodes.filter(n => n.type === 'content' && n.problem?._ref).map(n => [canonicalId(n.problem._ref), n._key])).get(canonicalId(c.referral._ref))
+                            ? new Map(norm.nodes
+                                .filter((n) => n.type === 'content' && n.problem?._ref)
+                                .map((n) => [canonicalId(n.problem._ref), n._key])).get(canonicalId(c.referral._ref))
                             : undefined;
-                        if (!tgt || new Set(norm.edges.map(e => `${e.source}:${e.target}:${e.handle ?? ''}`)).has(`${n._key}:${tgt}:${c._key}`))
+                        if (!tgt ||
+                            new Set(norm.edges.map((e) => `${e.source}:${e.target}:${e.handle ?? ''}`)).has(`${n._key}:${tgt}:${c._key}`))
                             return [];
-                        return [{ _key: `choice:${n._key}:${c._key}:${tgt}`, source: n._key, target: tgt, handle: c._key }];
+                        return [
+                            {
+                                _key: `choice:${n._key}:${c._key}:${tgt}`,
+                                source: n._key,
+                                target: tgt,
+                                handle: c._key,
+                            },
+                        ];
                     });
                 }),
-            ].map(e => {
+            ].map((e) => {
                 return {
                     edge: e,
                     data: e.functions?.length || edgeData
-                        ? { ...(e.functions?.length ? { functions: e.functions } : {}), ...edgeData?.(e, byId.get(canonicalId(new Map(norm.nodes.map(n => [n._key, n])).get(e.source)?.problem?._ref ?? ''))) }
+                        ? {
+                            ...(e.functions?.length ? { functions: e.functions } : {}),
+                            ...edgeData?.(e, byId.get(canonicalId(new Map(norm.nodes.map((n) => [n._key, n])).get(e.source)?.problem?._ref ??
+                                ''))),
+                        }
                         : undefined,
                 };
             });
@@ -673,13 +847,19 @@ export function arcCanvasElements(graph, problems, edgeData) {
             }
             const laneMetaMap = new Map();
             for (const [, group] of routesBySrc) {
-                const labelledRoutes = group.filter(r => r.data?.label || r.data?.appendages?.length);
+                const labelledRoutes = group.filter((r) => r.data?.label || r.data?.appendages?.length);
                 if (labelledRoutes.length > 0) {
-                    const widths = labelledRoutes.map(r => Math.min(EDGE_LANE.maxWidth, Math.max(EDGE_LANE.minWidth, (r.data.label?.length ?? 0) * 6 + 24, r.data.appendages?.length ? r.data.appendages.length * EDGE_LANE.appendageWidth + (r.data.appendages.length - 1) * EDGE_LANE.appendageGap : 0)));
+                    const widths = labelledRoutes.map((r) => Math.min(EDGE_LANE.maxWidth, Math.max(EDGE_LANE.minWidth, (r.data.label?.length ?? 0) * 6 + 24, r.data.appendages?.length
+                        ? r.data.appendages.length * EDGE_LANE.appendageWidth +
+                            (r.data.appendages.length - 1) * EDGE_LANE.appendageGap
+                        : 0)));
                     let currOffset = -(widths.reduce((s, w) => s + w, 0) + (widths.length - 1) * EDGE_LANE.gap) / 2;
                     for (let i = 0; i < labelledRoutes.length; i++) {
                         const w = widths[i];
-                        laneMetaMap.set(labelledRoutes[i].edge._key, { laneWidth: w, laneOffset: currOffset + w / 2 });
+                        laneMetaMap.set(labelledRoutes[i].edge._key, {
+                            laneWidth: w,
+                            laneOffset: currOffset + w / 2,
+                        });
                         currOffset += w + EDGE_LANE.gap;
                     }
                 }
@@ -697,7 +877,9 @@ export function arcCanvasElements(graph, problems, edgeData) {
                         ? {
                             data: {
                                 ...d,
-                                ...(laneMeta?.laneOffset !== undefined ? { laneOffset: laneMeta.laneOffset } : {}),
+                                ...(laneMeta?.laneOffset !== undefined
+                                    ? { laneOffset: laneMeta.laneOffset }
+                                    : {}),
                                 ...(laneMeta?.laneWidth !== undefined ? { laneWidth: laneMeta.laneWidth } : {}),
                             },
                         }
@@ -727,34 +909,50 @@ export function arcCanvasElements(graph, problems, edgeData) {
  * @return The rendered edge path and label layer.
  */
 export function ArcEdge({ id, source: src, sourceHandleId: srcHandleId, sourceX: srcX, sourceY: srcY, sourcePosition: srcPos, target: tgt, targetHandleId: tgtHandleId, targetX: tgtX, targetY: tgtY, targetPosition: tgtPos, data, }) {
-    const appendages = data?.appendages ?? data?.functions?.map(f => (f.type === 'appendPrefix' ? { title: f.value, type: 'Prefix' } : { title: 'Definition', type: f.type === 'appendTerm' ? 'Term' : 'Remove' }));
+    const appendages = data?.appendages ??
+        data?.functions?.map((f) => f.type === 'appendPrefix'
+            ? { title: f.value, type: 'Prefix' }
+            : { title: 'Definition', type: f.type === 'appendTerm' ? 'Term' : 'Remove' });
     const srcNode = useInternalNode(src);
     const tgtNode = useInternalNode(tgt);
-    const srcHandle = srcNode?.internals.handleBounds?.source?.find(h => h.id === srcHandleId);
-    const tgtHandle = tgtNode?.internals.handleBounds?.target?.find(h => h.id === tgtHandleId);
+    const srcHandle = srcNode?.internals.handleBounds?.source?.find((h) => h.id === srcHandleId);
+    const tgtHandle = tgtNode?.internals.handleBounds?.target?.find((h) => h.id === tgtHandleId);
     // prettier-ignore
     const srcCenter = srcHandle ? { x: srcNode.internals.positionAbsolute.x + srcHandle.x + srcHandle.width / 2, y: srcNode.internals.positionAbsolute.y + srcHandle.y + srcHandle.height / 2 } : { x: srcX, y: srcY };
     // prettier-ignore
     const tgtCenter = tgtHandle ? { x: tgtNode.internals.positionAbsolute.x + tgtHandle.x + tgtHandle.width / 2, y: tgtNode.internals.positionAbsolute.y + tgtHandle.y + tgtHandle.height / 2 } : { x: tgtX, y: tgtY };
     const terminal = data?.terminal;
-    const vertical = (srcPos === HandlePos.Bottom || srcPos === HandlePos.Top) && (tgtPos === HandlePos.Bottom || tgtPos === HandlePos.Top);
+    const vertical = (srcPos === HandlePos.Bottom || srcPos === HandlePos.Top) &&
+        (tgtPos === HandlePos.Bottom || tgtPos === HandlePos.Top);
     const srcHeight = srcNode?.measured.height;
     const tgtApproachY = tgtCenter.y - 24;
     const bendY = terminal
-        ? (srcHeight === undefined ? srcCenter.y : srcNode ? srcNode.internals.positionAbsolute.y + srcHeight : srcCenter.y) + 52
+        ? (srcHeight === undefined
+            ? srcCenter.y
+            : srcNode
+                ? srcNode.internals.positionAbsolute.y + srcHeight
+                : srcCenter.y) + 52
         : !terminal && tgtCenter.y < srcCenter.y
             ? Math.min(srcCenter.y - 52, tgtApproachY - 24)
             : (srcCenter.y + tgtApproachY) / 2;
-    const [fallback, fallbackX, fallbackY] = getSmoothStepPath({ sourceX: srcX, sourceY: srcY, sourcePosition: srcPos, targetX: tgtX, targetY: tgtY, targetPosition: tgtPos, offset: 16 });
+    const [fallback, fallbackX, fallbackY] = getSmoothStepPath({
+        sourceX: srcX,
+        sourceY: srcY,
+        sourcePosition: srcPos,
+        targetX: tgtX,
+        targetY: tgtY,
+        targetPosition: tgtPos,
+        offset: 16,
+    });
     const laneX = srcCenter.x + (data?.laneOffset ?? 0);
-    return (_jsxs(ErrorBoundary, { name: 'ArcEdge', children: [_jsx(BaseEdge, { id: id, path: 
+    return (_jsxs(ErrorBoundary, { name: "ArcEdge", children: [_jsx(BaseEdge, { id: id, path: 
                 /* prettier-ignore */ terminal
                     ? `M ${srcCenter.x},${srcCenter.y} V ${bendY} H ${laneX}` : vertical
-                    ? `M ${srcCenter.x},${srcCenter.y} V ${bendY} H ${laneX} V ${tgtApproachY} H ${tgtCenter.x} V ${tgtCenter.y}` : fallback }), (data?.label || appendages?.length) && (_jsx(EdgeLabelRenderer, { children: _jsxs("div", { className: cn('nodrag nopan flex max-w-80 flex-col items-center gap-1 text-[10px] leading-tight', data?.laneWidth ? 'w-full' : 'w-fit'), "aria-label": `${data?.terminal ? 'Terminal route. ' : ''}${data?.label ?? 'Route'}${appendages?.length ? `. ${appendages.map(a => `${a.title}, ${a.type}`).join('; ')}` : ''}`, style: {
+                    ? `M ${srcCenter.x},${srcCenter.y} V ${bendY} H ${laneX} V ${tgtApproachY} H ${tgtCenter.x} V ${tgtCenter.y}` : fallback }), (data?.label || appendages?.length) && (_jsx(EdgeLabelRenderer, { children: _jsxs("div", { className: cn('nodrag nopan flex max-w-80 flex-col items-center gap-1 text-[10px] leading-tight', data?.laneWidth ? 'w-full' : 'w-fit'), "aria-label": `${data?.terminal ? 'Terminal route. ' : ''}${data?.label ?? 'Route'}${appendages?.length ? `. ${appendages.map((a) => `${a.title}, ${a.type}`).join('; ')}` : ''}`, style: {
                         position: 'absolute',
                         transform: `translate(-50%, -50%) translate(${terminal || vertical ? laneX : fallbackX}px,${terminal ? bendY + 12 : vertical ? bendY : fallbackY}px)`,
                         ...(data?.laneWidth ? { width: data.laneWidth } : {}),
-                    }, children: [data?.label && _jsx("span", { className: 'block w-full truncate whitespace-nowrap rounded bg-white/95 px-1 text-center font-medium text-primary-12 shadow-sm', children: data.label }), _jsx("div", { className: 'flex w-full flex-wrap items-start justify-center gap-0.5', children: appendages?.map((a, i) => (_jsxs("span", { className: cn('inline-flex h-5 w-32 min-w-0 max-w-32 items-baseline justify-center gap-1 overflow-hidden rounded px-1.5 py-0.5 text-center shadow-sm', data?.terminal ? 'bg-primary-9 text-white' : 'bg-secondary-8 text-secondary-12'), title: `${a.title} — ${a.type}`, children: [_jsx("span", { className: 'min-w-0 truncate whitespace-nowrap', children: a.title }), _jsx("span", { className: 'shrink-0 text-[9px] font-semibold uppercase tracking-wide opacity-75', children: a.type })] }, `${a.title}-${a.type}-${i}`))) })] }) }))] }));
+                    }, children: [data?.label && (_jsx("span", { className: "block w-full truncate whitespace-nowrap rounded bg-white/95 px-1 text-center font-medium text-primary-12 shadow-sm", children: data.label })), _jsx("div", { className: "flex w-full flex-wrap items-start justify-center gap-0.5", children: appendages?.map((a, i) => (_jsxs("span", { className: cn('inline-flex h-5 w-32 min-w-0 max-w-32 items-baseline justify-center gap-1 overflow-hidden rounded px-1.5 py-0.5 text-center shadow-sm', data?.terminal ? 'bg-primary-9 text-white' : 'bg-secondary-8 text-secondary-12'), title: `${a.title} — ${a.type}`, children: [_jsx("span", { className: "min-w-0 truncate whitespace-nowrap", children: a.title }), _jsx("span", { className: "shrink-0 text-[9px] font-semibold uppercase tracking-wide opacity-75", children: a.type })] }, `${a.title}-${a.type}-${i}`))) })] }) }))] }));
 }
 /**
  * Renders the common problem card, its handles, title editing, and route affordances.
@@ -766,33 +964,46 @@ export function ArcEdge({ id, source: src, sourceHandleId: srcHandleId, sourceX:
  *
  * @return The rendered problem node.
  */
-export function ProblemNode({ id, data, selected }) {
+export function ProblemNode({ id, data, selected, }) {
     const skin = useSkin();
     const input = useRef(null);
-    const outgoing = useStore(s => s.edges.filter(e => e.source === id).map(e => e.sourceHandle ?? 'default'), isArrayEqual);
+    const outgoing = useStore((s) => s.edges.filter((e) => e.source === id).map((e) => e.sourceHandle ?? 'default'), isArrayEqual);
     const choices = data.problem.choices ?? [];
     const routes = [
         { id: 'default' },
         ...choices,
         ...Array.from(new Set(outgoing))
-            .filter(h => h !== 'default' && !choices.some(c => c.id === h))
-            .map(h => ({ id: h })),
+            .filter((h) => h !== 'default' && !choices.some((c) => c.id === h))
+            .map((h) => ({ id: h })),
     ];
     const connectable = data.editable !== false && data.draft !== false;
-    const terminus = useNodeConnections({ id: 'inbound' }).length > 0 && (!outgoing.length || (!outgoing.includes('default') && choices.some(c => !outgoing.includes(c.id))));
+    const terminus = useNodeConnections({ id: 'inbound' }).length > 0 &&
+        (!outgoing.length ||
+            (!outgoing.includes('default') && choices.some((c) => !outgoing.includes(c.id))));
     useEffect(() => {
         if (!data.renaming || !input.current)
             return;
         input.current.focus();
         input.current.select();
     }, [data.renaming]);
-    return (_jsx(ErrorBoundary, { name: 'ProblemNode', children: _jsxs(skin.Card, { selected: selected, tone: terminus ? 'caution' : 'default', className: cn('relative flex w-52 flex-col', data.hierarchy && data.showHierarchyControls ? 'h-[120px]' : data.showDuration === false ? 'h-16' : 'h-[84px]', terminus && 'rounded-2xl'), onClick: e => {
+    return (_jsx(ErrorBoundary, { name: "ProblemNode", children: _jsxs(skin.Card, { selected: selected, tone: terminus ? 'caution' : 'default', className: cn('relative flex w-52 flex-col', data.hierarchy && data.showHierarchyControls
+                ? 'h-[120px]'
+                : data.showDuration === false
+                    ? 'h-16'
+                    : 'h-[84px]', terminus && 'rounded-2xl'), onClick: (e) => {
                 if (!e.metaKey && !e.ctrlKey && !e.shiftKey)
                     data.onOpen?.();
-            }, children: [ARC_PORTS.inbound.map(i => (_jsx(Port, { id: i, type: 'target', position: HandlePos.Top, ariaLabel: 'Incoming route', title: 'Incoming route', isConnectable: connectable }, i))), data.readOnly ? (_jsx("strong", { className: 'block truncate whitespace-nowrap leading-5', title: data.problem.title ?? 'Problem', children: data.problem.title ?? 'Problem' })) : (_jsx(skin.Input, { ref: input, rows: 1, defaultValue: data.problem.title ?? '', "aria-label": 'Problem title', className: 'h-5 !min-h-0 resize-none overflow-hidden whitespace-nowrap border-0 bg-transparent p-0 font-semibold leading-5 shadow-none outline-none focus-visible:ring-0', onClick: e => {
+            }, children: [ARC_PORTS.inbound.map((i) => (_jsx(Port, { id: i, type: "target", position: HandlePos.Top, ariaLabel: "Incoming route", title: "Incoming route", isConnectable: connectable }, i))), data.readOnly ? (_jsx("strong", { className: "block truncate whitespace-nowrap leading-5", title: data.problem.title ?? 'Problem', children: data.problem.title ?? 'Problem' })) : (_jsx(skin.Input, { ref: input, rows: 1, defaultValue: data.problem.title ?? '', "aria-label": "Problem title", className: "h-5 !min-h-0 resize-none overflow-hidden whitespace-nowrap border-0 bg-transparent p-0 font-semibold leading-5 shadow-none outline-none focus-visible:ring-0", onClick: (e) => {
                         e.stopPropagation();
-                    }, onChange: e => data.onTitleChange?.(e.currentTarget.value) })), data.showDuration !== false && data.problem.duration !== undefined && _jsxs(skin.Text, { className: cn(CLASS.meta, 'mt-auto'), children: [data.problem.duration, " minutes"] }), data.showDuration !== false && data.duration && (_jsxs(skin.Text, { className: cn(CLASS.meta, data.problem.duration === undefined && 'mt-auto'), children: [data.duration.min === data.duration.max ? data.duration.min : `${data.duration.min}-${data.duration.max}`, " total"] })), data.hierarchy && data.showHierarchyControls !== false && (_jsx("div", { className: 'mt-auto text-[10px]', onClick: e => {
+                    }, onChange: (e) => data.onTitleChange?.(e.currentTarget.value) })), data.showDuration !== false && data.problem.duration !== undefined && (_jsxs(skin.Text, { className: cn(CLASS.meta, 'mt-auto'), children: [data.problem.duration, " minutes"] })), data.showDuration !== false && data.duration && (_jsxs(skin.Text, { className: cn(CLASS.meta, data.problem.duration === undefined && 'mt-auto'), children: [data.duration.min === data.duration.max
+                            ? data.duration.min
+                            : `${data.duration.min}-${data.duration.max}`, ' ', "total"] })), data.hierarchy && data.showHierarchyControls !== false && (_jsx("div", { className: "mt-auto text-[10px]", onClick: (e) => {
                         e.stopPropagation();
-                    }, children: _jsxs("label", { htmlFor: `problem-row-${id}`, className: 'grid gap-0.5', children: [_jsx("span", { children: "Row" }), _jsx("input", { id: `problem-row-${id}`, className: 'h-5 rounded border bg-background px-1', "aria-label": 'Hierarchy row', type: 'number', min: '1', value: data.hierarchy.row, onChange: e => data.hierarchy?.onChange?.({ ...data.hierarchy, row: Math.max(1, Number(e.currentTarget.value) || 1) }) })] }) })), skin.Meta?.({ problem: data.problem }), routes.map((r, i) => (_jsx(Port, { id: r.id, type: 'source', position: HandlePos.Bottom, isConnectable: connectable, variant: r.id === 'default' ? 'default' : 'choice', ...(r.id === 'default' ? { ariaLabel: 'Default referral', title: 'Default referral' } : { ariaLabel: `Choice route ${r.label ?? i}`, title: r.label }), style: { left: `${((i + 1) / (routes.length + 1)) * 100}%` } }, r.id)))] }) }));
+                    }, children: _jsxs("label", { htmlFor: `problem-row-${id}`, className: "grid gap-0.5", children: [_jsx("span", { children: "Row" }), _jsx("input", { id: `problem-row-${id}`, className: "h-5 rounded border bg-background px-1", "aria-label": "Hierarchy row", type: "number", min: "1", value: data.hierarchy.row, onChange: (e) => data.hierarchy?.onChange?.({
+                                    ...data.hierarchy,
+                                    row: Math.max(1, Number(e.currentTarget.value) || 1),
+                                }) })] }) })), skin.Meta?.({ problem: data.problem }), routes.map((r, i) => (_jsx(Port, { id: r.id, type: "source", position: HandlePos.Bottom, isConnectable: connectable, variant: r.id === 'default' ? 'default' : 'choice', ...(r.id === 'default'
+                        ? { ariaLabel: 'Default referral', title: 'Default referral' }
+                        : { ariaLabel: `Choice route ${r.label ?? i}`, title: r.label }), style: { left: `${((i + 1) / (routes.length + 1)) * 100}%` } }, r.id)))] }) }));
 }
 //# sourceMappingURL=_chrome.js.map