@terra-symposium/docs 0.1.17 → 0.1.72

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

@@ -8,18 +8,18 @@ IMPORTS
 //////////////////////////////////////////////////*/
 // API
 import katex from 'katex';
-import { applyEdgeChanges, applyNodeChanges, useNodesInitialized, useReactFlow } from '@xyflow/react';
-import { cn, createTrace, errorLog, isRec, validateType, warn as logWarn } from '../runtime/runtime.js';
+import { applyEdgeChanges, applyNodeChanges, useNodesInitialized, useReactFlow, } from '@xyflow/react';
+import { cn, createTrace, errorLog, isRec, validateType, warn as logWarn, } from '../../../lib/terra/runtime/runtime.js';
 import { getCustomPos, getGroupId, getNodeSize, layoutGraph, useEditor } from './_chrome.js';
 import { useCallback, useEffect, useRef, useState } from 'react';
 // COMPONENTS
 import React from 'react';
 import { AlignHorizontalCenter as AlignHorizontalCenterIcon, AlignHorizontalLeft as AlignHorizontalLeftIcon, AlignHorizontalRight as AlignHorizontalRightIcon, AlignVerticalBottom as AlignVerticalBottomIcon, AlignVerticalCenter as AlignVerticalCenterIcon, AlignVerticalTop as AlignVerticalTopIcon, Choices as DecisionIcon, DataCategorical as TypeIcon, DataStructured as DataIcon, DistributeHorizontalCenter as DistributeHorizontalCenterIcon, DistributeHorizontalLeft as DistributeHorizontalLeftIcon, DistributeHorizontalRight as DistributeHorizontalRightIcon, DistributeVerticalBottom as DistributeVerticalBottomIcon, DistributeVerticalCenter as DistributeVerticalCenterIcon, DistributeVerticalTop as DistributeVerticalTopIcon, Document as NoteIcon, Edit as EditIcon, MagicWand as WandIcon, Maximize as MaximizeIcon, ObjectStorage as GroupIcon, PlayOutline as OriginIcon, RadioButton as TerminatorIcon, Redo as RedoIcon, StopOutline as TerminalIcon, Table as ErdIcon, Task as ProcessIcon, TrashCan as TrashIcon, Undo as UndoIcon, } from '@carbon/icons-react';
-import { Background, ControlButton, Controls, MarkerType, NodeResizer, ReactFlow, ReactFlowProvider } from '@xyflow/react';
-import { Button } from '@terra-symposium/styling/ui/terra-original';
-import { ButtonGroup } from '@terra-symposium/styling/ui/terra-original';
-import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger } from '@terra-symposium/styling/ui/terra-original';
-import { ErrorBoundary } from '../runtime/ui.js';
+import { Background, ControlButton, Controls, MarkerType, NodeResizer, ReactFlow, ReactFlowProvider, } from '@xyflow/react';
+import { Button } from '@terra-symposium/styling/ui';
+import { ButtonGroup } from '@terra-symposium/styling/ui';
+import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, } from '@terra-symposium/styling/ui';
+import { ErrorBoundary } from '../ui.js';
 import { Handles, SkeletonCard, ZoomControls } from './_chrome.js';
 /*//////////////////////////////////////////////////
 CONFIG
@@ -96,10 +96,10 @@ NODE TYPES
  * @return Resizable group frame, title bar, and group handles.
  */
 export function GroupNode({ data, selected }) {
-    return (_jsxs(ErrorBoundary, { name: 'GroupNode', children: [_jsx(NodeResizer, { color: '#ef4444', isVisible: selected && data.editable === true, minWidth: 160, minHeight: 100, onResizeEnd: (_e, p) => {
+    return (_jsxs(ErrorBoundary, { name: "GroupNode", children: [_jsx(NodeResizer, { color: "#ef4444", isVisible: selected && data.editable === true, minWidth: 160, minHeight: 100, onResizeEnd: (_e, p) => {
                     if (data.id)
                         data.onResizeEnd?.(data.id, p);
-                } }), _jsxs("div", { className: cn('size-full text-primary-11 transition-all', selected && `rounded-lg ${NODE_CLASS.selected}`, data.isDragTarget && 'ring-dashed rounded-lg bg-primary-3/20 ring-2 ring-primary-6'), children: [_jsx("div", { className: 'border-b border-primary-6 pb-2 text-lg font-bold text-primary-12', children: data.title }), _jsx(Handles, { editable: data.editable === true, ...data.requiredHandles })] })] }));
+                } }), _jsxs("div", { className: cn('size-full text-primary-11 transition-all', selected && `rounded-lg ${NODE_CLASS.selected}`, data.isDragTarget && 'ring-dashed rounded-lg bg-primary-3/20 ring-2 ring-primary-6'), children: [_jsx("div", { className: "border-b border-primary-6 pb-2 text-lg font-bold text-primary-12", children: data.title }), _jsx(Handles, { editable: data.editable === true, ...data.requiredHandles })] })] }));
 }
 /**
  * Creates a higher-order flowchart node renderer with specified styling.
@@ -112,7 +112,7 @@ export function GroupNode({ data, selected }) {
 function createNode(className, inner) {
     return function NodeCard({ data, selected }) {
         const Element = data.onClick ? 'button' : data.href ? 'a' : 'div';
-        return (_jsxs(Element, { ...(Element === 'button' ? { type: 'button' } : {}), ...(Element === 'a' ? { href: data.href } : {}), onClick: data.onClick, className: cn('relative block min-w-40 text-pretty p-2 text-center text-sm font-normal !no-underline shadow-md transition-shadow', selected && 'ring-2 ring-red-500 ring-offset-2 ring-offset-transparent', className), children: [_jsx(Handles, { editable: data.editable === true, sources: data.requiredHandles?.sources ?? [], tgts: data.requiredHandles?.tgts ?? [] }), _jsx("span", { className: inner, children: data.title })] }));
+        return (_jsxs(Element, { ...(Element === 'button' ? { type: 'button' } : {}), ...(Element === 'a' ? { href: data.href } : {}), ...(Element === 'a' ? { 'data-docs-flow-node-link': '' } : {}), onClick: data.onClick, className: cn('relative block min-w-40 text-pretty p-2 text-center text-sm font-normal !no-underline shadow-md transition-shadow', selected && 'ring-2 ring-red-500 ring-offset-2 ring-offset-transparent', className), children: [_jsx(Handles, { editable: data.editable === true, sources: data.requiredHandles?.sources ?? [], tgts: data.requiredHandles?.tgts ?? [] }), _jsx("span", { className: inner, children: data.title })] }));
     };
 }
 /**
@@ -125,17 +125,17 @@ function createNode(className, inner) {
  *
  * @return Sticky note styled container.
  */
-export function NoteNode({ id, data, selected }) {
-    return (_jsxs(ErrorBoundary, { name: 'NoteNode', children: [_jsx(NodeResizer, { color: '#ef4444', isVisible: selected && data.editable === true, minWidth: 128, minHeight: 128, onResizeEnd: (_e, p) => {
+export function NoteNode({ id, data, selected, }) {
+    return (_jsxs(ErrorBoundary, { name: "NoteNode", children: [_jsx(NodeResizer, { color: "#ef4444", isVisible: selected && data.editable === true, minWidth: 128, minHeight: 128, onResizeEnd: (_e, p) => {
                     if (data.id)
                         data.onResizeEnd?.(data.id, p);
-                } }), _jsxs("div", { className: cn("relative size-full min-h-32 min-w-32 before:absolute before:left-[5px] before:top-[30%] before:h-3/4 before:w-[90%] before:bg-black/25 before:shadow-[rgba(0,0,0,0.5)_-2px_2px_15px] before:content-['']", selected && NODE_CLASS.selected), children: [_jsx("svg", { width: '0', height: '0', className: 'absolute', children: _jsx("defs", { children: _jsx("clipPath", { id: `sticky-${id}`, clipPathUnits: 'objectBoundingBox', children: _jsx("path", { d: 'M 1 0 Q 1 0.69, 0.97 0.96 0.97 0.96, 0 0.96 Q 0.04 0.69, 0.04 0 0.04 0, 1 0' }) }) }) }), _jsx("div", { className: 'relative flex size-full min-h-32 min-w-32 items-center justify-center bg-yellow-300 p-5 pt-3 text-center text-sm font-normal text-yellow-950 shadow-md', style: { clipPath: `url(#sticky-${id})` }, children: data.title })] })] }));
+                } }), _jsxs("div", { className: cn("relative size-full min-h-32 min-w-32 before:absolute before:left-[5px] before:top-[30%] before:h-3/4 before:w-[90%] before:bg-black/25 before:shadow-[rgba(0,0,0,0.5)_-2px_2px_15px] before:content-['']", selected && NODE_CLASS.selected), children: [_jsx(Handles, { editable: data.editable === true, sources: data.requiredHandles?.sources ?? [], tgts: data.requiredHandles?.tgts ?? [] }), _jsx("svg", { width: "0", height: "0", className: "absolute", children: _jsx("defs", { children: _jsx("clipPath", { id: `sticky-${id}`, clipPathUnits: "objectBoundingBox", children: _jsx("path", { d: "M 1 0 Q 1 0.69, 0.97 0.96 0.97 0.96, 0 0.96 Q 0.04 0.69, 0.04 0 0.04 0, 1 0" }) }) }) }), _jsx("div", { className: "relative flex size-full min-h-32 min-w-32 items-center justify-center bg-yellow-300 p-5 pt-3 text-center text-sm font-normal text-yellow-950 shadow-md", style: { clipPath: `url(#sticky-${id})` }, children: data.title })] })] }));
 }
 export const NODE_TYPES = {
     erd: function ErdNode({ data, selected }) {
         const compact = data.compact === true;
         const Element = data.onClick ? 'button' : data.href ? 'a' : 'div';
-        return (_jsxs(Element, { type: Element === 'button' ? 'button' : undefined, href: Element === 'a' ? data.href : undefined, onClick: data.onClick, className: cn('block max-h-96 w-full overflow-y-scroll rounded-md border-2 border-primary-6 bg-primary-2 text-primary-12 !no-underline shadow-lg transition-shadow', compact ? 'text-xs' : 'text-sm', selected && NODE_CLASS.selected), children: [_jsx("div", { className: cn('border-b-2 border-primary-6 bg-primary-3 text-center font-bold text-primary-12', compact ? 'px-2 py-0.5 text-sm' : 'px-3 py-2 text-lg'), children: data.title }), data.attributes && data.attributes.length > 0 && (_jsx("ul", { className: cn('my-0', compact ? 'gap-y-0.5 p-0.5 px-1.5' : 'p-2'), children: data.attributes.map(a => (_jsxs("li", { className: cn('grid grid-cols-[auto,1fr] font-mono', compact ? 'my-0 gap-x-2 leading-tight' : 'gap-x-3 gap-y-0'), children: [_jsx("span", { className: 'shrink-0', children: a.name }), (() => {
+        return (_jsxs(Element, { type: Element === 'button' ? 'button' : undefined, href: Element === 'a' ? data.href : undefined, "data-docs-flow-node-link": Element === 'a' ? '' : undefined, onClick: data.onClick, className: cn('block max-h-96 w-full overflow-y-scroll rounded-md border-2 border-primary-6 bg-primary-2 text-primary-12 !no-underline shadow-lg transition-shadow', compact ? 'text-xs' : 'text-sm', selected && NODE_CLASS.selected), children: [_jsx("div", { className: cn('border-b-2 border-primary-6 bg-primary-3 text-center font-bold text-primary-12', compact ? 'px-2 py-0.5 text-sm' : 'px-3 py-2 text-lg'), children: data.title }), data.attributes && data.attributes.length > 0 && (_jsx("ul", { className: cn('my-0', compact ? 'gap-y-0.5 p-0.5 px-1.5' : 'p-2'), children: data.attributes.map((a) => (_jsxs("li", { className: cn('grid grid-cols-[auto,1fr] font-mono', compact ? 'my-0 gap-x-2 leading-tight' : 'gap-x-3 gap-y-0'), children: [_jsx("span", { className: "shrink-0", children: a.name }), (() => {
                                 const inlineMath = a.type.match(/^\$(?!\$)([\s\S]+)\$$/);
                                 const displayMath = a.type.match(/^\$\$([\s\S]+)\$\$$/);
                                 if (!inlineMath && !displayMath)
@@ -179,29 +179,34 @@ CANVAS
  */
 function syncGraph(v, r, dir, proximityConnect, editable, arcControls, onResizeEnd) {
     const sNodes = Array.isArray(v) ? v : [];
-    const nodesById = new Map(sNodes.map(_node => [_node.id, _node]));
+    const nodesById = new Map(sNodes.map((_node) => [_node.id, _node]));
     const handlesByNodeId = new Map();
     const syncedGraph = {
         edges: (Array.isArray(r) ? r : [])
-            .filter(_e => nodesById.has(_e.source) && nodesById.has(_e.target))
-            .map(e => {
+            .filter((_e) => nodesById.has(_e.source) && nodesById.has(_e.target))
+            .map((e) => {
             const edgeData = e.data ?? {};
             const l = isRec(e) ? e : {};
             const arrowHead = edgeData.arrowHead ?? l['arrowHead'] ?? false;
             const srcOverride = edgeData.srcHandleOverride ?? l['srcHandleOverride'];
             const tgtOverride = edgeData.tgtHandleOverride ?? l['tgtHandleOverride'];
             const strokeStyle = edgeData.strokeStyle ?? 'solid';
-            const markerEnd = arrowHead ? { type: MarkerType.ArrowClosed, width: 20, height: 20 } : undefined;
+            const markerEnd = arrowHead
+                ? { type: MarkerType.ArrowClosed, width: 20, height: 20 }
+                : undefined;
             let srcHandle;
             let tgtHandle;
             if (arcControls) {
                 // Arc nodes use named ports, not the positional ports used by docs flowcharts.
-                srcHandle = e.sourceHandle && !HANDLES.includes(e.sourceHandle) ? e.sourceHandle : 'default';
+                srcHandle =
+                    e.sourceHandle && !HANDLES.includes(e.sourceHandle) ? e.sourceHandle : 'default';
                 tgtHandle = 'inbound';
             }
             else if (proximityConnect) {
-                const dx = (nodesById.get(e.target).position?.x ?? 0) - (nodesById.get(e.source).position?.x ?? 0);
-                const dy = (nodesById.get(e.target).position?.y ?? 0) - (nodesById.get(e.source).position?.y ?? 0);
+                const dx = (nodesById.get(e.target).position?.x ?? 0) -
+                    (nodesById.get(e.source).position?.x ?? 0);
+                const dy = (nodesById.get(e.target).position?.y ?? 0) -
+                    (nodesById.get(e.source).position?.y ?? 0);
                 const horizontal = Math.abs(dx) > Math.abs(dy);
                 srcHandle = horizontal ? (dx > 0 ? 'right' : 'left') : dy > 0 ? 'bottom' : 'top';
                 tgtHandle = horizontal ? (dx > 0 ? 'left' : 'right') : dy > 0 ? 'top' : 'bottom';
@@ -224,22 +229,34 @@ function syncGraph(v, r, dir, proximityConnect, editable, arcControls, onResizeE
             }
             const updatedEdge = {
                 ...e,
-                data: { ...edgeData, arrowHead, srcHandleOverride: srcOverride, tgtHandleOverride: tgtOverride, strokeStyle },
+                data: {
+                    ...edgeData,
+                    arrowHead,
+                    srcHandleOverride: srcOverride,
+                    tgtHandleOverride: tgtOverride,
+                    strokeStyle,
+                },
                 sourceHandle: srcHandle,
                 targetHandle: tgtHandle,
-                style: { ...e.style, strokeDasharray: strokeStyle === 'dashed' ? '5 5' : strokeStyle === 'dotted' ? '2 2' : undefined },
+                style: {
+                    ...e.style,
+                    strokeDasharray: strokeStyle === 'dashed' ? '5 5' : strokeStyle === 'dotted' ? '2 2' : undefined,
+                },
             };
             if (markerEnd)
                 updatedEdge.markerEnd = markerEnd;
             return updatedEdge;
         }),
-        nodes: sNodes.map(n => {
+        nodes: sNodes.map((n) => {
             const handles = handlesByNodeId.get(n.id);
             const resGroupId = getGroupId(n);
             return {
                 ...n,
                 parentId: undefined, // enforce flat absolute structure globally
-                className: cn(validateType(['string'], n.className) || Array.isArray(n.className) ? n.className : undefined, n.type === 'group' && 'rounded-lg border !border-primary-6 !bg-primary-2 !text-primary-12'),
+                className: cn(validateType(['string'], n.className) || Array.isArray(n.className)
+                    ? n.className
+                    : undefined, n.type === 'group' &&
+                    'rounded-lg border !border-primary-6 !bg-primary-2 !text-primary-12'),
                 zIndex: n.type === 'group' ? -10 : 10,
                 nodeOrigin: n.type === 'group' ? [0, 0] : [0.5, 0.5],
                 data: {
@@ -248,12 +265,21 @@ function syncGraph(v, r, dir, proximityConnect, editable, arcControls, onResizeE
                     editable,
                     ...(resGroupId ? { groupId: resGroupId } : {}),
                     ...(onResizeEnd ? { onResizeEnd } : {}),
-                    requiredHandles: { sources: editable ? HANDLES : Array.from(handles?.sources ?? []), targets: editable ? HANDLES : Array.from(handles?.tgts ?? []) },
+                    requiredHandles: {
+                        sources: editable ? HANDLES : Array.from(handles?.sources ?? []),
+                        targets: editable ? HANDLES : Array.from(handles?.tgts ?? []),
+                    },
                 },
             };
         }),
     };
-    return { nodes: [...syncedGraph.nodes.filter(n => n.type === 'group'), ...syncedGraph.nodes.filter(n => n.type !== 'group')], edges: syncedGraph.edges };
+    return {
+        nodes: [
+            ...syncedGraph.nodes.filter((n) => n.type === 'group'),
+            ...syncedGraph.nodes.filter((n) => n.type !== 'group'),
+        ],
+        edges: syncedGraph.edges,
+    };
 }
 const FLOW_COMPONENTS = {
     nodeTypes: NODE_TYPES,
@@ -303,7 +329,7 @@ const FLOW_COMPONENTS = {
      */
     Canvas({ flow, nodeTypes, edgeTypes, nodeLabels, onNodeClick, onNodesChange, onEdgesChange, onConnect, onEdgeDoubleClick, onAddNode, onAddContent, lockedTypes, allowedTypes, onGroupNodes, onUngroupNodes, onDeleteSelected, onAlignNodes, onDistributeNodes, onRenameNode, onChangeNodeType, onChangeEdgeStyle, onDeleteEdge, onAutoLayout, onReady, interactive, editable, isFocused, height, showBg, showCtrls, arcControls, readyWhenEmpty, }) {
         // STATES
-        const { fitView, screenToFlowPosition: screenToFlowPos, getIntersectingNodes, updateNodeData, getNodes } = useReactFlow();
+        const { fitView, screenToFlowPosition: screenToFlowPos, getIntersectingNodes, updateNodeData, getNodes, } = useReactFlow();
         const nodesInit = useNodesInitialized();
         const hasInitialLayout = useRef(false);
         const lastFit = useRef('');
@@ -322,7 +348,7 @@ const FLOW_COMPONENTS = {
             }
             if (!nodesInit)
                 return;
-            const key = `${height}:${flow.nodes.map(_node => _node.id).join(',')}`;
+            const key = `${height}:${flow.nodes.map((_node) => _node.id).join(',')}`;
             if (lastFit.current === key)
                 return;
             const frame = { id: 0 };
@@ -348,8 +374,8 @@ const FLOW_COMPONENTS = {
             onReady?.();
         }, [onReady, ready]);
         // HELPERS
-        const selNodes = flow.nodes.filter(n => n.selected);
-        const nodesMap = React.useMemo(() => new Map(flow.nodes.map(n => [n.id, n])), [flow.nodes]);
+        const selNodes = flow.nodes.filter((n) => n.selected);
+        const nodesMap = React.useMemo(() => new Map(flow.nodes.map((n) => [n.id, n])), [flow.nodes]);
         const tgtNode = React.useMemo(() => (menuCtx.type === '_node' && menuCtx.id ? nodesMap.get(menuCtx.id) : undefined), [nodesMap, menuCtx.type, menuCtx.id]);
         /**
          * Checks whether the n is locked.
@@ -375,12 +401,12 @@ const FLOW_COMPONENTS = {
             return locked(tgtNode);
         }, [flow.nodes.length, lockedTypes, menuCtx, tgtNode]);
         // RENDER
-        return (_jsxs(ContextMenu, { onOpenChange: o => {
+        return (_jsxs(ContextMenu, { onOpenChange: (o) => {
                 trace('menu.state', { open: o, context: menuCtx });
-            }, children: [_jsx(ContextMenuTrigger, { asChild: true, onContextMenu: _e => {
+            }, children: [_jsx(ContextMenuTrigger, { asChild: true, onContextMenu: (_e) => {
                         lastPos.current = { x: _e.clientX, y: _e.clientY };
                         trace('menu.open.request', { position: lastPos.current });
-                    }, children: _jsxs("div", { className: 'relative z-20 size-full', ref: reactFlowWrapper, children: [!ready && (_jsx("div", { className: 'pointer-events-none absolute inset-0 z-10 rounded-md border border-primary-6 bg-primary-1/95', "aria-label": 'Loading nodes', children: _jsx("div", { className: 'absolute inset-0 flex items-center justify-center', children: _jsxs("div", { className: 'flex flex-col items-center gap-8', children: [_jsx(SkeletonCard, {}), _jsx(SkeletonCard, { className: 'translate-x-16 animate-pulse opacity-75' }), _jsx(SkeletonCard, { className: '-translate-x-12 animate-pulse opacity-50' })] }) }) })), _jsxs(ReactFlow, { nodes: flow.nodes, edges: flow.edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onEdgeDoubleClick: onEdgeDoubleClick, onNodeContextMenu: (_e, _node) => {
+                    }, children: _jsxs("div", { className: "relative z-20 size-full", ref: reactFlowWrapper, children: [!ready && (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10 rounded-md border border-primary-6 bg-primary-1/95", "aria-label": "Loading nodes", children: _jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: _jsxs("div", { className: "flex flex-col items-center gap-8", children: [_jsx(SkeletonCard, {}), _jsx(SkeletonCard, { className: "translate-x-16 animate-pulse opacity-75" }), _jsx(SkeletonCard, { className: "-translate-x-12 animate-pulse opacity-50" })] }) }) })), _jsxs(ReactFlow, { nodes: flow.nodes, edges: flow.edges, onNodesChange: onNodesChange, onEdgesChange: onEdgesChange, onConnect: onConnect, onEdgeDoubleClick: onEdgeDoubleClick, onNodeContextMenu: (_e, _node) => {
                                     trace('menu.n', { id: _node.id, type: _node.type });
                                     setMenuCtx({ type: '_node', id: _node.id });
                                 }, ...(onNodeClick
@@ -401,7 +427,7 @@ const FLOW_COMPONENTS = {
                                     const primaryNode = draggedNodes[0] || _node;
                                     if (primaryNode.type === 'group')
                                         return;
-                                    const groupId = getIntersectingNodes(primaryNode).find(n => n.type === 'group')?.id ?? null;
+                                    const groupId = getIntersectingNodes(primaryNode).find((n) => n.type === 'group')?.id ?? null;
                                     if (groupId !== dragTgtGroup.current) {
                                         if (dragTgtGroup.current)
                                             updateNodeData(dragTgtGroup.current, { isDragTarget: false });
@@ -416,26 +442,32 @@ const FLOW_COMPONENTS = {
                                         const tgtGroupId = dragTgtGroup.current;
                                         updateNodeData(tgtGroupId, { isDragTarget: false });
                                         dragTgtGroup.current = null;
-                                        const groupNode = getNodes().find(n => n.id === tgtGroupId);
-                                        const nodesToGroup = draggedNodes.filter(n => n.type !== 'group' && n.id !== tgtGroupId);
+                                        const groupNode = getNodes().find((n) => n.id === tgtGroupId);
+                                        const nodesToGroup = draggedNodes.filter((n) => n.type !== 'group' && n.id !== tgtGroupId);
                                         if (groupNode && nodesToGroup.length > 0)
                                             onGroupNodes(groupNode, nodesToGroup, groupNode.position.x, groupNode.position.y);
                                     }
                                     else {
-                                        const nodesToUngroup = draggedNodes.filter(n => getGroupId(n) && n.type !== 'group');
+                                        const nodesToUngroup = draggedNodes.filter((n) => getGroupId(n) && n.type !== 'group');
                                         if (nodesToUngroup.length > 0)
                                             onUngroupNodes(nodesToUngroup);
                                     }
-                                }, nodeTypes: nodeTypes, ...(edgeTypes ? { edgeTypes: edgeTypes } : {}), fitView: true, minZoom: 0.1, zoomOnScroll: false, panOnScroll: isFocused, zoomOnPinch: true, preventScrolling: false, nodesDraggable: interactive || editable, nodesConnectable: editable, elementsSelectable: true, panOnDrag: false, selectionOnDrag: true, elevateNodesOnSelect: false, children: [showBg && _jsx(Background, {}), showCtrls && arcControls ? (_jsxs(_Fragment, { children: [_jsx(Controls, { position: 'top-left', showFitView: false, showInteractive: false, showZoom: false, children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: 'ghost', size: 'icon-sm', disabled: true, "aria-label": 'Undo', title: 'Undo', children: _jsx(UndoIcon, { "aria-hidden": 'true' }) }), _jsx(Button, { variant: 'ghost', size: 'icon-sm', disabled: true, "aria-label": 'Redo', title: 'Redo', children: _jsx(RedoIcon, { "aria-hidden": 'true' }) })] }) }), _jsx(Controls, { position: 'top-right', showFitView: false, showInteractive: false, showZoom: false, children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: 'ghost', size: 'icon-sm', "aria-label": 'Arrange nodes', title: 'Arrange nodes', onClick: onAutoLayout, children: _jsx(WandIcon, { "aria-hidden": 'true' }) }) }) }), _jsx(ZoomControls, { position: 'bottom-right' })] })) : (showCtrls && (_jsxs(Controls, { position: 'bottom-left', showInteractive: false, className: '!m-3 [&_*]:!border-primary-6 [&_*]:!bg-primary-3', children: [editable && (_jsx(ControlButton, { "aria-label": 'Auto-layout nodes', title: 'Auto-layout nodes', onClick: onAutoLayout, children: _jsx(WandIcon, { "aria-hidden": 'true' }) })), _jsx(ControlButton, { "aria-label": 'Full screen', title: 'Full screen', onClick: () => (document.fullscreenElement ? void document.exitFullscreen() : void reactFlowWrapper.current?.requestFullscreen()), children: _jsx(MaximizeIcon, { "aria-hidden": 'true' }) })] })))] })] }) }), editable && (_jsx(ContextMenuContent, { className: MENU_CLASS.content, children: selNodes.length > 1 ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Align" }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.subContent, children: NODE_MENUS.align.map(m => m.label === 'sep' ? (_jsx(ContextMenuSeparator, {}, m.val)) : (_jsxs(ContextMenuItem, { onClick: () => {
+                                }, nodeTypes: nodeTypes, ...(edgeTypes ? { edgeTypes: edgeTypes } : {}), fitView: true, minZoom: 0.1, zoomOnScroll: false, panOnScroll: isFocused, zoomOnPinch: true, preventScrolling: false, nodesDraggable: interactive || editable, nodesConnectable: editable, elementsSelectable: true, panOnDrag: false, selectionOnDrag: true, elevateNodesOnSelect: false, children: [showBg && _jsx(Background, {}), showCtrls && arcControls ? (_jsxs(_Fragment, { children: [_jsx(Controls, { position: "top-left", showFitView: false, showInteractive: false, showZoom: false, children: _jsxs(ButtonGroup, { children: [_jsx(Button, { variant: "ghost", size: "icon-sm", disabled: true, "aria-label": "Undo", title: "Undo", children: _jsx(UndoIcon, { "aria-hidden": "true" }) }), _jsx(Button, { variant: "ghost", size: "icon-sm", disabled: true, "aria-label": "Redo", title: "Redo", children: _jsx(RedoIcon, { "aria-hidden": "true" }) })] }) }), _jsx(Controls, { position: "top-right", showFitView: false, showInteractive: false, showZoom: false, children: _jsx(ButtonGroup, { children: _jsx(Button, { variant: "ghost", size: "icon-sm", "aria-label": "Arrange nodes", title: "Arrange nodes", onClick: onAutoLayout, children: _jsx(WandIcon, { "aria-hidden": "true" }) }) }) }), _jsx(ZoomControls, { position: "bottom-right" })] })) : (showCtrls && (_jsxs(Controls, { position: "bottom-left", showInteractive: false, className: "!m-3 [&_*]:!border-primary-6 [&_*]:!bg-primary-3", children: [editable && (_jsx(ControlButton, { "aria-label": "Auto-layout nodes", title: "Auto-layout nodes", onClick: onAutoLayout, children: _jsx(WandIcon, { "aria-hidden": "true" }) })), _jsx(ControlButton, { "aria-label": "Full screen", title: "Full screen", onClick: () => document.fullscreenElement
+                                                    ? void document.exitFullscreen()
+                                                    : void reactFlowWrapper.current?.requestFullscreen(), children: _jsx(MaximizeIcon, { "aria-hidden": "true" }) })] })))] })] }) }), editable && (_jsx(ContextMenuContent, { className: MENU_CLASS.content, children: selNodes.length > 1 ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Align" }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.subContent, children: NODE_MENUS.align.map((m) => m.label === 'sep' ? (_jsx(ContextMenuSeparator, {}, m.val)) : (_jsxs(ContextMenuItem, { onClick: () => {
                                                 onAlignNodes(selNodes, m.val);
-                                            }, children: [m.Icon && _jsx(m.Icon, { className: MENU_CLASS.icon }), " ", m.label] }, m.val))) })] }), selNodes.length > 2 && (_jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Distribute" }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.subContent, children: NODE_MENUS.distribute.map(m => m.label === 'sep' ? (_jsx(ContextMenuSeparator, {}, m.val)) : (_jsxs(ContextMenuItem, { onClick: () => {
+                                            }, children: [m.Icon && _jsx(m.Icon, { className: MENU_CLASS.icon }), " ", m.label] }, m.val))) })] }), selNodes.length > 2 && (_jsxs(ContextMenuSub, { children: [_jsx(ContextMenuSubTrigger, { children: "Distribute" }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.subContent, children: NODE_MENUS.distribute.map((m) => m.label === 'sep' ? (_jsx(ContextMenuSeparator, {}, m.val)) : (_jsxs(ContextMenuItem, { onClick: () => {
                                                 onDistributeNodes(selNodes, m.val);
-                                            }, children: [m.Icon && _jsx(m.Icon, { className: MENU_CLASS.icon }), " ", m.label] }, m.val))) })] })), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { className: 'cursor-pointer focus:!bg-primary-3 focus:!text-primary-12', onClick: () => {
-                                    const minX = Math.min(...selNodes.map(n => n.position.x - getNodeSize(n).w / 2));
-                                    const minY = Math.min(...selNodes.map(n => n.position.y - getNodeSize(n).h / 2));
+                                            }, children: [m.Icon && _jsx(m.Icon, { className: MENU_CLASS.icon }), " ", m.label] }, m.val))) })] })), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { className: "cursor-pointer focus:!bg-primary-3 focus:!text-primary-12", onClick: () => {
+                                    const minX = Math.min(...selNodes.map((n) => n.position.x - getNodeSize(n).w / 2));
+                                    const minY = Math.min(...selNodes.map((n) => n.position.y - getNodeSize(n).h / 2));
                                     const padding = 40;
-                                    const gWidth = Math.max(...selNodes.map(n => n.position.x + getNodeSize(n).w / 2)) - minX + padding * 2;
-                                    const gHeight = Math.max(...selNodes.map(n => n.position.y + getNodeSize(n).h / 2)) - minY + padding * 2;
+                                    const gWidth = Math.max(...selNodes.map((n) => n.position.x + getNodeSize(n).w / 2)) -
+                                        minX +
+                                        padding * 2;
+                                    const gHeight = Math.max(...selNodes.map((n) => n.position.y + getNodeSize(n).h / 2)) -
+                                        minY +
+                                        padding * 2;
                                     const gX = minX - padding + gWidth / 2;
                                     const gY = minY - padding + gHeight / 2;
                                     onGroupNodes({
@@ -445,20 +477,20 @@ const FLOW_COMPONENTS = {
                                         style: { width: gWidth, height: gHeight },
                                         data: { attributes: [], customPosition: { x: gX, y: gY }, title: 'Group' },
                                     }, selNodes, gX, gY);
-                                }, children: [_jsx(GroupIcon, { className: MENU_CLASS.icon }), " Create Group"] }), _jsxs(ContextMenuItem, { intent: 'destructive', onClick: () => {
-                                    onDeleteSelected(selNodes.filter(n => !locked(n)));
+                                }, children: [_jsx(GroupIcon, { className: MENU_CLASS.icon }), " Create Group"] }), _jsxs(ContextMenuItem, { intent: "destructive", onClick: () => {
+                                    onDeleteSelected(selNodes.filter((n) => !locked(n)));
                                 }, disabled: selNodes.every(locked), children: [_jsx(TrashIcon, { className: MENU_CLASS.icon }), " Delete Selected"] })] })) : menuCtx.type === '_node' && menuCtx.id ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuItem, { disabled: isTgtLocked, onClick: () => {
                                     onRenameNode(menuCtx.id);
-                                }, children: [_jsx(EditIcon, { className: MENU_CLASS.icon }), " Rename Node"] }), _jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { disabled: isTgtLocked, children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Change Type"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: allowedTypes.map(t => {
+                                }, children: [_jsx(EditIcon, { className: MENU_CLASS.icon }), " Rename Node"] }), _jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { disabled: isTgtLocked, children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Change Type"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: allowedTypes.map((t) => {
                                             const { Icon, label, colorCls } = NODE_CFG[t];
                                             return (_jsxs(ContextMenuItem, { disabled: isTgtLocked, onClick: () => {
                                                     onChangeNodeType(menuCtx.id, t);
                                                 }, children: [_jsx(Icon, { className: cn('size-4 shrink-0', colorCls) }), _jsx("span", { children: nodeLabels[t] || label })] }, t));
-                                        }) })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: isTgtLocked, intent: 'destructive', onClick: () => tgtNode && onDeleteSelected([tgtNode]), children: [_jsx(TrashIcon, { className: MENU_CLASS.icon }), " Delete Node"] })] })) : menuCtx.type === 'e' && menuCtx.id ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Change Style"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: NODE_MENUS.edges.map(m => (_jsxs(ContextMenuItem, { onClick: () => {
+                                        }) })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { disabled: isTgtLocked, intent: "destructive", onClick: () => tgtNode && onDeleteSelected([tgtNode]), children: [_jsx(TrashIcon, { className: MENU_CLASS.icon }), " Delete Node"] })] })) : menuCtx.type === 'e' && menuCtx.id ? (_jsxs(_Fragment, { children: [_jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Change Style"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: NODE_MENUS.edges.map((m) => (_jsxs(ContextMenuItem, { onClick: () => {
                                                 onChangeEdgeStyle(menuCtx.id, m.val);
-                                            }, children: [_jsx("svg", { className: 'size-4 shrink-0 text-primary-11', viewBox: '0 0 16 16', fill: 'none', stroke: 'currentColor', strokeWidth: '2', strokeDasharray: m.dash, strokeLinecap: m.cap, children: _jsx("line", { x1: '0', y1: '8', x2: '16', y2: '8' }) }), _jsx("span", { children: m.label })] }, m.val))) })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { intent: 'destructive', onClick: () => {
+                                            }, children: [_jsx("svg", { className: "size-4 shrink-0 text-primary-11", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeDasharray: m.dash, strokeLinecap: m.cap, children: _jsx("line", { x1: "0", y1: "8", x2: "16", y2: "8" }) }), _jsx("span", { children: m.label })] }, m.val))) })] }), _jsx(ContextMenuSeparator, {}), _jsxs(ContextMenuItem, { intent: "destructive", onClick: () => {
                                     onDeleteEdge(menuCtx.id);
-                                }, children: [_jsx(TrashIcon, { className: MENU_CLASS.icon }), " Delete Edge"] })] })) : menuCtx.type === 'pane' ? (_jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Add Node"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: allowedTypes.map(t => {
+                                }, children: [_jsx(TrashIcon, { className: MENU_CLASS.icon }), " Delete Edge"] })] })) : menuCtx.type === 'pane' ? (_jsxs(ContextMenuSub, { children: [_jsxs(ContextMenuSubTrigger, { children: [_jsx(TypeIcon, { className: MENU_CLASS.icon }), " Add Node"] }), _jsx(ContextMenuSubContent, { className: MENU_CLASS.content, children: allowedTypes.map((t) => {
                                     const { Icon, label, colorCls } = NODE_CFG[t];
                                     return (_jsxs(ContextMenuItem, { onClick: () => {
                                             try {
@@ -474,7 +506,9 @@ const FLOW_COMPONENTS = {
                                                     onAddNode(t, pos);
                                             }
                                             catch (err) {
-                                                errorLog('AuthNodes', `menu.add.failed: ${t}`, { error: err instanceof Error ? err.message : String(err) });
+                                                errorLog('AuthNodes', `menu.add.failed: ${t}`, {
+                                                    error: err instanceof Error ? err.message : String(err),
+                                                });
                                             }
                                         }, children: [_jsx(Icon, { className: cn('size-4 shrink-0', colorCls) }), _jsx("span", { children: nodeLabels[t] || label })] }, t));
                                 }) })] })) : null }))] }));
@@ -522,7 +556,10 @@ COMPONENT
  */
 export default function Nodes({ nodes: initialNodes = [], edges: initialEdges = [], className, direction: dir = 'TB', nodeSep = 50, rankSep = 5, proximityConnect = false, interactive = false, height, onCommit, onAddContent, onNodeClick, nodeTypes: customNodeTypes = {}, nodeLabels = {}, lockedTypes = [], allowedTypes = Object.keys(NODE_TYPES), editable = false, disabled = !editable, clipboardKey = editable ? 'terra.flow.docs' : undefined, showBg = true, showCtrls = true, arcControls = false, edgeTypes, readyWhenEmpty = true, onReady, style, ...rest }) {
     // STATES
-    const [graph, setGraph] = useState({ nodes: initialNodes, edges: initialEdges });
+    const [graph, setGraph] = useState({
+        nodes: initialNodes,
+        edges: initialEdges,
+    });
     const [flow, setFlow] = useState({ nodes: [], edges: [] });
     const [isFocused, setIsFocused] = useState(false);
     const [internalHeight, setInternalHeight] = useState(384);
@@ -549,20 +586,39 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
     useEditor({
         adapter: {
             ...(clipboardKey ? { clipboardKey } : {}),
-            cloneNode: (n, id) => ({ ...n, id, data: { ...n.data, ...(typeof n.data.graphKey === 'string' ? { graphKey: id } : {}) } }),
-            editableNode: n => !lockedTypes.includes(n.type),
+            cloneNode: (n, id) => ({
+                ...n,
+                id,
+                data: {
+                    ...n.data,
+                    ...(typeof n.data.graphKey === 'string'
+                        ? { graphKey: id }
+                        : {}),
+                },
+            }),
+            editableNode: (n) => !lockedTypes.includes(n.type),
             read: flow,
             write: useCallback((n) => {
                 flowRef.current = n;
                 setFlow(n);
-                writeGraph(c => {
-                    const currEntities = { nodes: new Map(c.nodes.map(i => [i.id, i])), edges: new Map(c.edges.map(i => [i.id, i])) };
+                writeGraph((c) => {
+                    const currEntities = {
+                        nodes: new Map(c.nodes.map((i) => [i.id, i])),
+                        edges: new Map(c.edges.map((i) => [i.id, i])),
+                    };
                     return {
-                        nodes: n.nodes.map(n => {
+                        nodes: n.nodes.map((n) => {
                             const { editable: _, groupId: __, id: ___, isDragTarget: ____, onResizeEnd: _____, requiredHandles: ______, ...data } = n.data;
-                            return { ...currEntities.nodes.get(n.id), id: n.id, type: n.type, position: n.position, style: n.style, data };
+                            return {
+                                ...currEntities.nodes.get(n.id),
+                                id: n.id,
+                                type: n.type,
+                                position: n.position,
+                                style: n.style,
+                                data,
+                            };
                         }),
-                        edges: n.edges.map(e => {
+                        edges: n.edges.map((e) => {
                             return {
                                 ...currEntities.edges.get(e.id),
                                 id: e.id,
@@ -581,9 +637,9 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
         disabled,
     });
     const handleResizeEnd = useCallback((i, p) => {
-        writeGraph(c => ({
+        writeGraph((c) => ({
             ...c,
-            nodes: c.nodes.map(n => n.id === i
+            nodes: c.nodes.map((n) => n.id === i
                 ? {
                     ...n,
                     position: { x: p.x, y: p.y },
@@ -633,10 +689,10 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
     }, [initialNodes, initialEdges, writeGraph]);
     // HELPERS
     // RENDER
-    return (_jsx(ErrorBoundary, { name: 'Nodes', children: _jsx("div", { ...rest, style: { height: height ?? internalHeight, ...style }, className: cn('docs-flow size-full overflow-hidden rounded-md border border-primary-6', interactive && 'scrim-primary-1 scrim-20', className), tabIndex: rest.tabIndex ?? 0, onFocus: e => {
+    return (_jsx(ErrorBoundary, { name: "Nodes", children: _jsx("div", { ...rest, style: { height: height ?? internalHeight, ...style }, className: cn('docs-flow size-full overflow-hidden rounded-md border border-primary-6', interactive && 'scrim-primary-1 scrim-20', className), tabIndex: rest.tabIndex ?? 0, onFocus: (e) => {
                 setIsFocused(true);
                 rest.onFocus?.(e);
-            }, onBlur: e => {
+            }, onBlur: (e) => {
                 setIsFocused(false);
                 rest.onBlur?.(e);
             }, children: _jsx(ReactFlowProvider, { children: _jsx(FLOW_COMPONENTS.Canvas, { flow: flow, nodeTypes: { ...FLOW_COMPONENTS.nodeTypes, ...customNodeTypes }, ...(edgeTypes ? { edgeTypes } : {}), nodeLabels: nodeLabels, onNodeClick: onNodeClick, onNodesChange: 
@@ -714,14 +770,19 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                         const nEdges = applyEdgeChanges(v, flowRef.current.edges);
                         setFlow({ ...flowRef.current, edges: nEdges });
                         flowRef.current = { ...flowRef.current, edges: nEdges };
-                        if (editable && v.some(c => c.type === 'remove')) {
-                            const remEdgeIds = new Set(v.filter(c => c.type === 'remove').map(c => c.id));
-                            writeGraph(c => ({ ...c, edges: remEdgeIds.size ? c.edges.filter(_e => !remEdgeIds.has(_e.id)) : c.edges }));
+                        if (editable && v.some((c) => c.type === 'remove')) {
+                            const remEdgeIds = new Set(v.filter((c) => c.type === 'remove').map((c) => c.id));
+                            writeGraph((c) => ({
+                                ...c,
+                                edges: remEdgeIds.size
+                                    ? c.edges.filter((_e) => !remEdgeIds.has(_e.id))
+                                    : c.edges,
+                            }));
                         }
                     }, [editable, writeGraph]), onConnect: useCallback((p) => {
                         if (!editable)
                             return;
-                        writeGraph(c => ({
+                        writeGraph((c) => ({
                             ...c,
                             edges: [
                                 ...c.edges,
@@ -732,7 +793,11 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                                     sourceHandle: p.sourceHandle,
                                     targetHandle: p.targetHandle,
                                     labelBgStyle: { fill: 'white', fillOpacity: 0.8 },
-                                    data: { srcHandleOverride: p.sourceHandle, tgtHandleOverride: p.targetHandle, arrowHead: true },
+                                    data: {
+                                        srcHandleOverride: p.sourceHandle,
+                                        tgtHandleOverride: p.targetHandle,
+                                        arrowHead: true,
+                                    },
                                 },
                             ],
                         }));
@@ -742,9 +807,14 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                         const nLabel = window.prompt('Enter edge label:', r.label || '');
                         if (nLabel === null)
                             return;
-                        writeGraph(g => ({ ...g, edges: g.edges.map(e => (e.id === r.id ? { ...e, label: nLabel, labelBgStyle: { fill: 'white', fillOpacity: 0.8 } } : e)) }));
+                        writeGraph((g) => ({
+                            ...g,
+                            edges: g.edges.map((e) => e.id === r.id
+                                ? { ...e, label: nLabel, labelBgStyle: { fill: 'white', fillOpacity: 0.8 } }
+                                : e),
+                        }));
                     }, [editable, writeGraph]), onAddNode: useCallback((t, p) => {
-                        writeGraph(c => ({
+                        writeGraph((c) => ({
                             ...c,
                             nodes: [
                                 ...c.nodes,
@@ -752,27 +822,36 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                                     id: `${t}-${Date.now().toString(36)}`,
                                     type: t,
                                     position: p,
-                                    data: { attributes: [], customPosition: p, title: `${NODE_CFG[t].label} ${c.nodes.length + 1}` },
+                                    data: {
+                                        attributes: [],
+                                        customPosition: p,
+                                        title: `${NODE_CFG[t].label} ${c.nodes.length + 1}`,
+                                    },
                                 },
                             ],
                         }));
                     }, [writeGraph]), lockedTypes: lockedTypes, allowedTypes: allowedTypes, onAddContent: fns.current.onAddContent, onGroupNodes: useCallback((g, v) => {
-                        const group = { node: g, targetIds: new Set(v.map(s => s.id)) };
-                        writeGraph(c => {
-                            const nNodes = c.nodes.map(n => {
+                        const group = { node: g, targetIds: new Set(v.map((s) => s.id)) };
+                        writeGraph((c) => {
+                            const nNodes = c.nodes.map((n) => {
                                 if (group.targetIds.has(n.id)) {
                                     const { parentId: _parentId, extent: _extent, ...rest } = n;
                                     return { ...rest, data: { ...n.data, groupId: g.id } };
                                 }
                                 return n;
                             });
-                            return { ...c, nodes: nNodes.some(n => n.id === group.node.id) ? nNodes : [group.node, ...nNodes] };
+                            return {
+                                ...c,
+                                nodes: nNodes.some((n) => n.id === group.node.id)
+                                    ? nNodes
+                                    : [group.node, ...nNodes],
+                            };
                         });
                     }, [writeGraph]), onUngroupNodes: useCallback((v) => {
-                        const ungroupMap = new Map(v.map(u => [u.id, u]));
-                        writeGraph(c => ({
+                        const ungroupMap = new Map(v.map((u) => [u.id, u]));
+                        writeGraph((c) => ({
                             ...c,
-                            nodes: c.nodes.map(n => {
+                            nodes: c.nodes.map((n) => {
                                 if (ungroupMap.has(n.id)) {
                                     if (!getGroupId(ungroupMap.get(n.id)))
                                         return n;
@@ -784,23 +863,27 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                             }),
                         }));
                     }, [writeGraph]), onDeleteSelected: useCallback((s) => {
-                        writeGraph(c => {
-                            const selIds = new Set(s.map(n => n.id));
-                            return { ...c, nodes: c.nodes.filter(n => !selIds.has(n.id)), edges: c.edges.filter(_e => !selIds.has(_e.source) && !selIds.has(_e.target)) };
+                        writeGraph((c) => {
+                            const selIds = new Set(s.map((n) => n.id));
+                            return {
+                                ...c,
+                                nodes: c.nodes.filter((n) => !selIds.has(n.id)),
+                                edges: c.edges.filter((_e) => !selIds.has(_e.source) && !selIds.has(_e.target)),
+                            };
                         });
                     }, [writeGraph]), onAlignNodes: useCallback((v, t) => {
                         if (v.length < 2)
                             return;
-                        const selNodesMap = new Map(v.map(s => [s.id, s]));
-                        writeGraph(c => {
-                            const absPos = v.map(n => ({ n, abs: n.position }));
-                            const minX = Math.min(...absPos.map(p => p.abs.x - getNodeSize(p.n).w / 2));
-                            const maxX = Math.max(...absPos.map(p => p.abs.x + getNodeSize(p.n).w / 2));
-                            const minY = Math.min(...absPos.map(p => p.abs.y - getNodeSize(p.n).h / 2));
-                            const maxY = Math.max(...absPos.map(p => p.abs.y + getNodeSize(p.n).h / 2));
+                        const selNodesMap = new Map(v.map((s) => [s.id, s]));
+                        writeGraph((c) => {
+                            const absPos = v.map((n) => ({ n, abs: n.position }));
+                            const minX = Math.min(...absPos.map((p) => p.abs.x - getNodeSize(p.n).w / 2));
+                            const maxX = Math.max(...absPos.map((p) => p.abs.x + getNodeSize(p.n).w / 2));
+                            const minY = Math.min(...absPos.map((p) => p.abs.y - getNodeSize(p.n).h / 2));
+                            const maxY = Math.max(...absPos.map((p) => p.abs.y + getNodeSize(p.n).h / 2));
                             return {
                                 ...c,
-                                nodes: c.nodes.map(n => {
+                                nodes: c.nodes.map((n) => {
                                     if (selNodesMap.has(n.id)) {
                                         const flowNode = selNodesMap.get(n.id);
                                         const size = getNodeSize(flowNode);
@@ -836,7 +919,7 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                     }, [writeGraph]), onDistributeNodes: useCallback((v, t) => {
                         if (v.length < 3)
                             return;
-                        writeGraph(c => {
+                        writeGraph((c) => {
                             const isHoriz = t.startsWith('horizontal');
                             const sizeKey = isHoriz ? 'w' : 'h';
                             /**
@@ -853,14 +936,19 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                                     return basePos;
                                 return basePos + size / 2;
                             };
-                            const sorted = [...v.map(n => ({ n, abs: n.position }))].sort((a, b) => getEdge(a) - getEdge(b));
+                            const sorted = [...v.map((n) => ({ n, abs: n.position }))].sort((a, b) => getEdge(a) - getEdge(b));
                             const min = getEdge(sorted[0]);
-                            const layoutLookup = { nodes: new Map(v.map(s => [s.id, s])), indices: new Map(sorted.map((s, i) => [s.n.id, i])) };
+                            const layoutLookup = {
+                                nodes: new Map(v.map((s) => [s.id, s])),
+                                indices: new Map(sorted.map((s, i) => [s.n.id, i])),
+                            };
                             return {
                                 ...c,
-                                nodes: c.nodes.map(n => {
+                                nodes: c.nodes.map((n) => {
                                     if (layoutLookup.nodes.has(n.id)) {
-                                        const tEdge = min + ((getEdge(sorted[sorted.length - 1]) - min) / (sorted.length - 1)) * layoutLookup.indices.get(n.id);
+                                        const tEdge = min +
+                                            ((getEdge(sorted[sorted.length - 1]) - min) / (sorted.length - 1)) *
+                                                layoutLookup.indices.get(n.id);
                                         const flowNode = layoutLookup.nodes.get(n.id);
                                         const size = getNodeSize(flowNode)[sizeKey];
                                         let nAbsVal = tEdge;
@@ -868,8 +956,15 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                                             nAbsVal = tEdge + size / 2;
                                         else if (t.endsWith('right') || t.endsWith('bottom'))
                                             nAbsVal = tEdge - size / 2;
-                                        const newPos = { x: isHoriz ? nAbsVal : flowNode.position.x, y: isHoriz ? flowNode.position.y : nAbsVal };
-                                        return { ...n, position: newPos, data: { ...n.data, customPosition: newPos } };
+                                        const newPos = {
+                                            x: isHoriz ? nAbsVal : flowNode.position.x,
+                                            y: isHoriz ? flowNode.position.y : nAbsVal,
+                                        };
+                                        return {
+                                            ...n,
+                                            position: newPos,
+                                            data: { ...n.data, customPosition: newPos },
+                                        };
                                     }
                                     return n;
                                 }),
@@ -888,23 +983,35 @@ export default function Nodes({ nodes: initialNodes = [], edges: initialEdges =
                         const nTitle = window.prompt('Enter new name:', _node.data.title);
                         if (!nTitle)
                             return;
-                        writeGraph(c => ({ ...c, nodes: c.nodes.map(n => (n.id === i ? { ...n, data: { ...n.data, title: nTitle } } : n)) }));
+                        writeGraph((c) => ({
+                            ...c,
+                            nodes: c.nodes.map((n) => n.id === i ? { ...n, data: { ...n.data, title: nTitle } } : n),
+                        }));
                     }, [writeGraph]), onChangeNodeType: useCallback((i, t) => {
-                        writeGraph(c => ({ ...c, nodes: c.nodes.map(n => (n.id === i ? { ...n, type: t } : n)) }));
+                        writeGraph((c) => ({
+                            ...c,
+                            nodes: c.nodes.map((n) => (n.id === i ? { ...n, type: t } : n)),
+                        }));
                     }, [writeGraph]), onChangeEdgeStyle: useCallback((i, s) => {
-                        writeGraph(c => ({ ...c, edges: c.edges.map(e => (e.id === i ? { ...e, data: { ...e.data, strokeStyle: s } } : e)) }));
+                        writeGraph((c) => ({
+                            ...c,
+                            edges: c.edges.map((e) => e.id === i ? { ...e, data: { ...e.data, strokeStyle: s } } : e),
+                        }));
                     }, [writeGraph]), onDeleteEdge: useCallback((i) => {
-                        writeGraph(c => ({ ...c, edges: c.edges.filter(_e => _e.id !== i) }));
+                        writeGraph((c) => ({ ...c, edges: c.edges.filter((_e) => _e.id !== i) }));
                     }, [writeGraph]), onAutoLayout: useCallback(() => {
-                        writeGraph(c => {
-                            const validNodeIds = new Set(c.nodes.map(n => n.id));
+                        writeGraph((c) => {
+                            const validNodeIds = new Set(c.nodes.map((n) => n.id));
                             return {
                                 ...c,
-                                nodes: c.nodes.map(n => {
+                                nodes: c.nodes.map((n) => {
                                     const { parentId: _parentId, extent: _extent, ...rest } = n;
-                                    return { ...rest, data: Object.fromEntries(Object.entries(rest.data ?? {}).filter(([k]) => k !== 'customPosition')) };
+                                    return {
+                                        ...rest,
+                                        data: Object.fromEntries(Object.entries(rest.data ?? {}).filter(([k]) => k !== 'customPosition')),
+                                    };
                                 }),
-                                edges: c.edges.filter(e => validNodeIds.has(e.source) && validNodeIds.has(e.target)),
+                                edges: c.edges.filter((e) => validNodeIds.has(e.source) && validNodeIds.has(e.target)),
                             };
                         });
                     }, [writeGraph]), interactive: interactive, editable: permitted, isFocused: isFocused, height: typeof height === 'number' && Number.isFinite(height) ? height : internalHeight, showBg: showBg, showCtrls: showCtrls, arcControls: arcControls, readyWhenEmpty: readyWhenEmpty, onReady: onReady }) }) }) }));