@pauloricca/spagbol 0.1.0 → 0.1.3

package/dist/editors.css

@@ -0,0 +1,157 @@
+/* Controlled editors extracted from Teia; hosts own storage and execution. */
+.spagbol-curve-editor {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.spagbol-curve-editor-chart {
+  position: relative;
+  height: var(--node-display-height, 128px);
+  overflow: hidden;
+}
+
+.spagbol-curve-editor-canvas {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.spagbol-curve-editor-value-label {
+  --spagbol-curve-editor-value-offset: calc(7px * var(--graph-screen-scale, 1));
+  position: absolute;
+  z-index: 3;
+  padding: calc(2px * var(--graph-screen-scale, 1)) calc(4px * var(--graph-screen-scale, 1));
+  transform: translate(var(--spagbol-curve-editor-value-offset), calc(-100% - var(--spagbol-curve-editor-value-offset)));
+  border: calc(1px * var(--graph-screen-scale, 1)) solid var(--color-foreground-62, rgba(255,255,255,.62));
+  background: var(--color-background, var(--spagbol-bg, #000));
+  color: var(--color-foreground, var(--spagbol-foreground, #fff));
+  font-size: calc(1.1em * var(--graph-screen-scale, 1));
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.spagbol-curve-editor-value-label.is-left {
+  transform: translate(calc(-100% - var(--spagbol-curve-editor-value-offset)), calc(-100% - var(--spagbol-curve-editor-value-offset)));
+}
+
+.spagbol-curve-editor-value-label.is-below {
+  transform: translate(var(--spagbol-curve-editor-value-offset), var(--spagbol-curve-editor-value-offset));
+}
+
+.spagbol-curve-editor-value-label.is-left.is-below {
+  transform: translate(calc(-100% - var(--spagbol-curve-editor-value-offset)), var(--spagbol-curve-editor-value-offset));
+}
+
+.spagbol-curve-editor-chrome {
+  pointer-events: none;
+}
+
+.spagbol-curve-editor-path {
+  fill: none;
+  stroke: var(--color-accent, var(--spagbol-accent, #2fd061));
+  stroke-linecap: square;
+  stroke-linejoin: round;
+  stroke-width: calc(2px * var(--graph-stroke-scale, 1));
+  vector-effect: non-scaling-stroke;
+}
+.spagbol-curve-editor-path.is-background { opacity: .38; }
+.spagbol-curve-editor-hit-target {
+  fill: transparent;
+  cursor: grab;
+  pointer-events: all;
+}
+
+.spagbol-curve-editor-hit-target.is-locked {
+  cursor: default;
+}
+
+.spagbol-curve-editor-handle {
+  fill: var(--color-background, var(--spagbol-bg, #000));
+  stroke: var(--color-accent, var(--spagbol-accent, #2fd061));
+  stroke-width: calc(2px * var(--graph-stroke-scale, 1) * var(--spagbol-curve-editor-point-scale, 1));
+  cursor: grab;
+  pointer-events: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.spagbol-curve-editor-endpoint {
+  stroke: var(--color-foreground, var(--spagbol-foreground, #fff));
+}
+
+.spagbol-curve-editor-handle.is-locked {
+  cursor: default;
+}
+
+
+.spagbol-sequencer { display: grid; grid-auto-rows: minmax(0, 1fr); width: 100%; min-width: 0; }
+.spagbol-sequencer-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); min-width: 0; }
+.spagbol-sequencer-label-right .spagbol-sequencer-row { grid-template-columns: minmax(0, 1fr) var(--spagbol-sequencer-label-width, 44px); }
+.spagbol-sequencer-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; }
+.spagbol-sequencer-label-right .spagbol-sequencer-label { justify-content: flex-start; padding-right: 0; }
+.spagbol-sequencer-cells { position: relative; display: grid; grid-template-columns: repeat(var(--spagbol-sequencer-steps), minmax(0, 1fr)); min-width: 0; overflow: hidden; }
+.spagbol-sequencer-cell { min-width: 0; padding: 0; border: 0; background: transparent; }
+.spagbol-sequencer-gate { position: absolute; z-index: 2; bottom: 0; min-width: 2px; background: var(--color-accent, var(--spagbol-accent, #2fd061)); cursor: grab; touch-action: none; }
+.spagbol-sequencer-create-preview { pointer-events: none; opacity: 0.7; }
+.spagbol-sequencer-gate-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
+.spagbol-sequencer-gate-handle-left { left: 0; }.spagbol-sequencer-gate-handle-right { right: 0; }
+.spagbol-sequencer-level-handle { position: absolute; top: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; }
+
+
+.spagbol-sequencer .spagbol-sequencer-cells { height: 100%; }
+.spagbol-sequencer .spagbol-sequencer-cell {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid var(--color-foreground-44, rgba(255,255,255,.44));
+  border-bottom: 1px solid var(--color-foreground-44, rgba(255,255,255,.44));
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.spagbol-sequencer .spagbol-sequencer-row:first-child .spagbol-sequencer-cell { border-top: 1px solid var(--color-foreground-44, rgba(255,255,255,.44)); }
+.spagbol-sequencer .spagbol-sequencer-cell:first-child { border-left: 1px solid var(--color-foreground-44, rgba(255,255,255,.44)); }
+.spagbol-sequencer .spagbol-sequencer-cell-beat-highlight { background: var(--color-foreground-15, rgba(255,255,255,.15)); }
+.spagbol-sequencer .spagbol-sequencer-cell:hover,
+.spagbol-sequencer .spagbol-sequencer-cell:focus-visible { background: var(--color-foreground-20, rgba(255,255,255,.2)); outline: 0; }
+.spagbol-sequencer .spagbol-sequencer-cell-current {
+  background: var(--color-foreground-12, rgba(255,255,255,.12));
+  box-shadow: inset 0 0 0 2px var(--color-foreground-28, rgba(255,255,255,.28));
+}
+.spagbol-sequencer .spagbol-sequencer-gate { border: 0; border-radius: 0; box-shadow: none; }
+
+
+.spagbol-control-joystick {
+  --joystick-handle-size: 12px;
+  position: relative;
+  height: var(--node-display-height, 120px);
+  min-width: 0;
+  box-sizing: border-box;
+  border: calc(1px * var(--graph-stroke-scale, 1)) solid var(--color-foreground, var(--spagbol-foreground, #fff));
+  background: transparent;
+  cursor: crosshair;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.spagbol-control-joystick-handle {
+  position: absolute;
+  width: var(--joystick-handle-size);
+  height: var(--joystick-handle-size);
+  box-sizing: border-box;
+  border: calc(1px * var(--graph-stroke-scale, 1)) solid var(--color-foreground, var(--spagbol-foreground, #fff));
+  background: var(--color-accent, var(--spagbol-accent, #2fd061));
+  pointer-events: none;
+}
+

package/dist/react/SpagbolCanvas.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpagbolCanvas.d.ts","sourceRoot":"","sources":["../../src/react/SpagbolCanvas.tsx"],"names":[],"mappings":"AAGA,OAAO,EAyBL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,KAAK,UAAU,EAEf,KAAK,WAAW,EAChB,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,4BAA4B,CAAC;AA4CpC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,gBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACpC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACrE,wEAAwE;IACxE,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,MAAM,CAAC,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC3C,mFAAmF;IACnF,SAAS,CAAC,EAAE,KAAK,GAAG;QAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,4BAA4B,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAetD"}
+{"version":3,"file":"SpagbolCanvas.d.ts","sourceRoot":"","sources":["../../src/react/SpagbolCanvas.tsx"],"names":[],"mappings":"AAKA,OAAO,EA0BL,KAAK,QAAQ,EACb,KAAK,iBAAiB,EACvB,MAAM,eAAe,CAAC;AACvB,OAAO,EAWL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAQL,KAAK,UAAU,EAEf,KAAK,WAAW,EAChB,KAAK,SAAS,EAIf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAKL,KAAK,kBAAkB,EACvB,KAAK,qBAAqB,EAC1B,KAAK,YAAY,EACjB,KAAK,eAAe,EACrB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,4BAA4B,CAAC;AA4CpC,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AACD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,MAAM,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC,CAAC;IAClD,oFAAoF;IACpF,SAAS,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC9B,8EAA8E;IAC9E,gBAAgB,CAAC,CAAC,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC,WAAW,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IACpC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,uBAAuB,CAAC,CAAC,CAAC;IACrE,wEAAwE;IACxE,YAAY,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,eAAe,CAAC,EAAE,QAAQ,CAAC;IAC3B,gBAAgB,CAAC,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAC;IAC5C,MAAM,CAAC,CAAC,QAAQ,EAAE,iBAAiB,GAAG,IAAI,CAAC;IAC3C,mFAAmF;IACnF,SAAS,CAAC,EAAE,KAAK,GAAG;QAAE,gBAAgB,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAClD,cAAc,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,4BAA4B,GAAG,KAAK,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAQD,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,+BAetD"}

package/dist/react/SpagbolCanvas.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { SPAGBOL_ZOOM_BASELINE, spagbolHeaderTitleScale } from "./zoom.js";
+import { previewNodePositions, applyNodePositions } from "./nodeDrag.js";
 import { createPortal } from "react-dom";
 import { SpagbolCanvasLinkControls } from "./SpagbolCanvasLinkControls.js";
 import { SpagbolCanvasFlow } from "./SpagbolCanvasFlow.js";
-import { BaseEdge, ConnectionLineType, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, SelectionMode, ViewportPortal, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useNodeId, useNodesInitialized, useViewport, } from "@xyflow/react";
+import { applyNodeChanges, BaseEdge, ConnectionLineType, EdgeLabelRenderer, Handle, Position, ReactFlow, ReactFlowProvider, SelectionMode, ViewportPortal, useReactFlow, useStore, useStoreApi, useUpdateNodeInternals, useNodeId, useNodesInitialized, useViewport, } from "@xyflow/react";
 import { memo, useCallback, useEffect, useId, useMemo, useRef, useState, } from "react";
 import { areaMembers, groupPanelLayout, spagbolGroupKinds, copyFragment, createId, portsFor, readFragment, } from "../core/index.js";
 import { GraphContext, useEditorSnapshot, useEditorSelector, useSpagbol, } from "./context.js";
@@ -13,6 +15,8 @@ import { rememberMeasurements, reuseFlowPresentations, stationaryReconnectEdge,
 import { duplicateDragPresentation, } from "./duplicateDrag.js";
 import { translateExtentForVisibleContent, clampViewportToTranslateExtent, infiniteCanvasExtent, } from "./viewport.js";
 import { anchorFlowId, areaFlowId, linkPath, nodeFlowId, parseHandle, sourceHandle, targetHandle, } from "./geometry.js";
+const defaultGraphViewport = { x: 0, y: 0, zoom: SPAGBOL_ZOOM_BASELINE };
+const emptyFlowNodes = [];
 const emptyViews = Object.freeze({});
 const emptyPresentations = Object.freeze({});
 const defaultFeatures = { compact: true, nestedGraphs: true, panels: true, areas: true, linkProperties: true };
@@ -149,22 +153,26 @@ function SpagbolCanvasArea({ data, selected }) {
             height: area.collapsed
                 ? 34 + (area.controlHeight ?? 0)
                 : area.size.height,
-        }, children: [_jsxs("div", { className: "spagbol-canvas-area-header nodrag nopan", onPointerDown: (event) => start(event), ...pointerHandlers, children: [titleEditing ? _jsx("input", { autoFocus: true, className: "spagbol-canvas-area-title-input nodrag nopan", "aria-label": "Area title", value: titleDraft, onFocus: event => event.currentTarget.select(), onChange: event => setTitleDraft(event.currentTarget.value), onPointerDown: event => event.stopPropagation(), onBlur: () => { editor.updateArea(area.id, { title: titleDraft.trim() || 'Area' }); setTitleEditing(false); }, onKeyDown: event => { event.stopPropagation(); if (event.key === 'Enter')
+        }, children: [_jsxs("div", { className: "spagbol-canvas-area-header nodrag nopan", onPointerDown: (event) => start(event), ...pointerHandlers, children: [titleEditing ? _jsx("input", { autoFocus: true, className: "spagbol-canvas-area-title-input nodrag nopan", "aria-label": "Area title", value: titleDraft, onFocus: event => event.currentTarget.select(), onChange: event => setTitleDraft(event.currentTarget.value), onPointerDown: event => event.stopPropagation(), onBlur: () => { editor.updateArea(area.id, { title: titleDraft.trim() || 'Container' }); setTitleEditing(false); }, onKeyDown: event => { event.stopPropagation(); if (event.key === 'Enter')
                             event.currentTarget.blur(); if (event.key === 'Escape') {
                             setTitleDraft(area.title);
                             setTitleEditing(false);
                         } } }) : _jsx("span", { className: "spagbol-canvas-area-title", onDoubleClick: event => { event.stopPropagation(); if (editor.editing) {
                             setTitleDraft(area.title);
                             setTitleEditing(true);
-                        } }, children: area.title }), _jsxs("div", { className: "spagbol-canvas-area-actions", onPointerDown: (event) => event.stopPropagation(), children: [_jsx("button", { title: area.locked ? "Unlock membership" : "Lock membership", "aria-label": area.locked ? "Unlock membership" : "Lock membership", disabled: !editor.editing, onClick: () => editor.lockArea(area.id, !area.locked), children: area.locked ? "●" : "○" }), _jsx("button", { title: area.collapsed ? "Expand area" : "Collapse area", "aria-label": area.collapsed ? "Expand area" : "Collapse area", disabled: !editor.editing, onClick: () => editor.updateArea(area.id, { collapsed: !area.collapsed }), children: area.collapsed ? "+" : "−" })] })] }), !area.collapsed && area.controlHeight ? (_jsx("div", { className: "spagbol-canvas-area-divider", style: { top: 34 + area.controlHeight } })) : null, !area.collapsed && editor.editing && (_jsx("button", { className: "spagbol-canvas-area-resize nodrag nopan", "aria-label": "Resize area", onPointerDown: (event) => start(event, true), ...pointerHandlers })), _jsx(Handle, { id: "collapsed:in", type: "target", position: Position.Left, isConnectable: false, className: "spagbol-canvas-area-pin", style: { top: 17 } }), _jsx(Handle, { id: "collapsed:out", type: "source", position: Position.Right, isConnectable: false, className: "spagbol-canvas-area-pin", style: { top: 17 } })] }));
+                        } }, children: area.title }), _jsxs("div", { className: "spagbol-canvas-area-actions", onPointerDown: (event) => event.stopPropagation(), children: [_jsx("button", { type: "button", className: "spagbol-canvas-area-lock", title: area.locked ? "Unlock area membership" : "Lock area membership", "aria-label": area.locked ? "Unlock area membership" : "Lock area membership", "aria-pressed": area.locked === true, disabled: !editor.editing, onDoubleClick: event => event.stopPropagation(), onClick: event => {
+                                    event.preventDefault();
+                                    event.stopPropagation();
+                                    editor.lockArea(area.id, !area.locked);
+                                }, children: _jsx("span", { className: "spagbol-canvas-area-lock-icon", "aria-hidden": "true" }) }), _jsx("button", { type: "button", className: "spagbol-canvas-area-compact", "aria-pressed": area.collapsed === true, title: area.collapsed ? "Expand area" : "Collapse area", "aria-label": area.collapsed ? "Expand area" : "Collapse area", disabled: !editor.editing, onClick: () => editor.updateArea(area.id, { collapsed: !area.collapsed }), children: area.collapsed ? "+" : "−" })] })] }), !area.collapsed && area.controlHeight ? (_jsx("div", { className: "spagbol-canvas-area-divider", style: { top: 34 + area.controlHeight } })) : null, !area.collapsed && editor.editing && (_jsx("button", { className: "spagbol-canvas-area-resize nodrag nopan", "aria-label": "Resize area", onPointerDown: (event) => start(event, true), ...pointerHandlers })), _jsx(Handle, { id: "collapsed:in", type: "target", position: Position.Left, isConnectable: false, className: "spagbol-canvas-area-pin", style: { top: 17 } }), _jsx(Handle, { id: "collapsed:out", type: "source", position: Position.Right, isConnectable: false, className: "spagbol-canvas-area-pin", style: { top: 17 } })] }));
 }
 const SpagbolCanvasLink = memo(function SpagbolCanvasLink(props) {
     const { editor, diagnostics, linkOverlay, connecting } = useSpagbol();
     const flow = useReactFlow();
     const viewport = useViewport();
     const [controlsVisible, setControlsVisible] = useState(false);
-    const selection = useEditorSelector(editor, snapshot => snapshot.selection);
-    const showControls = props.selected && selection.linkIds.length === 1 && editor.editing && !connecting && !props.data?.virtual;
+    const selectedLinkId = useEditorSelector(editor, snapshot => snapshot.selection.linkIds.length === 1 ? snapshot.selection.linkIds[0] : undefined);
+    const showControls = props.selected && selectedLinkId === props.id && editor.editing && !connecting && !props.data?.virtual;
     useEffect(() => {
         if (!showControls) {
             setControlsVisible(false);
@@ -206,13 +214,15 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     const flow = useReactFlow();
     const flowStore = useStoreApi();
     const nodesInitialized = useNodesInitialized();
-    const flowNodes = useStore((state) => state.nodes);
+    // Only cable-property anchors need live native geometry. Subscribing to every
+    // position change otherwise causes redundant full-canvas renders during drags.
+    const flowNodes = useStore((state) => features.linkProperties ? state.nodes : emptyFlowNodes);
     // Measurements are canvas state, not saved graph data. Retaining them keeps
     // React Flow from hiding/reinitializing every node on each drag preview frame.
     const measuredSizes = useRef(new Map());
     const [measurementRevision, setMeasurementRevision] = useState(0);
-    const [zoom, setZoom] = useState(props.defaultViewport?.zoom ?? 1);
-    const [settledViewport, setSettledViewport] = useState(props.defaultViewport ?? { x: 0, y: 0, zoom: 1 });
+    const [zoom, setZoom] = useState(props.defaultViewport?.zoom ?? SPAGBOL_ZOOM_BASELINE);
+    const [settledViewport, setSettledViewport] = useState(props.defaultViewport ?? defaultGraphViewport);
     const [editorSize, setEditorSize] = useState({ width: 0, height: 0 });
     const viewportMoving = useRef(false);
     useEffect(() => {
@@ -235,6 +245,9 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     const [activeMode, setActiveMode] = useState(editor.policy.modes?.[0] ?? editor.modes.list()[0]?.id ?? "set");
     const [picker, setPicker] = useState(null);
     const [search, setSearch] = useState("");
+    const [pickerIndex, setPickerIndex] = useState(0);
+    const pickerListId = useId();
+    const pickerList = useRef(null);
     const [error, setError] = useState(null);
     const [drawing, setDrawing] = useState(null);
     const connection = useRef(null);
@@ -244,10 +257,24 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     const [reconnectOriginal, setReconnectOriginal] = useState(null);
     const duplicate = useRef(null);
     const [duplicatePreview, setDuplicatePreview] = useState(null);
-    const cancelledDuplicate = useRef(false);
+    const cancelledNodeDrag = useRef(false);
+    // Position previews belong to the canvas, not the persistent document. A drag
+    // commits once, avoiding whole-document edits/validation on every pointer move.
+    const nodeDrag = useRef(null);
+    const [positionRevision, setPositionRevision] = useState(0);
+    const clearNodeDrag = () => {
+        nodeDrag.current = null;
+        // Force a controlled refresh on cancellation, even though the saved position
+        // never changed: React Flow currently holds the transient pointer position.
+        setPositionRevision(value => value + 1);
+    };
     useEffect(() => {
+        if (!snapshot.gesture && nodeDrag.current) {
+            cancelledNodeDrag.current = true;
+            clearNodeDrag();
+        }
         if (!snapshot.gesture && duplicate.current) {
-            cancelledDuplicate.current = true;
+            cancelledNodeDrag.current = true;
             duplicate.current = null;
             setDuplicatePreview(null);
         }
@@ -283,7 +310,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             const area = editor.graph.areas.find(area => area.id === id);
             if (!area)
                 return;
-            cancelledDuplicate.current = false;
+            cancelledNodeDrag.current = false;
             const fragment = copyFragment(editor.graph, [], [id]);
             duplicate.current = { namespace: createId('preview'), fragment, nodeId: '', origin: area.position, positions: new Map(fragment.nodes.map(node => [node.id, node.position])), areaPositions: new Map(fragment.areas.map(area => [area.id, area.position])), external };
             setDuplicatePreview(duplicate.current);
@@ -391,7 +418,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         ...renderGraph.nodes.map((node) => ({
             id: nodeFlowId(node.id),
             type: "spagbolNode",
-            position: node.position,
+            position: nodeDrag.current?.get(node.id) ?? node.position,
             selected: snapshot.selection.nodeIds.includes(node.id),
             hidden: collapsed.nodes.has(node.id),
             draggable: editor.editing && views[node.kind]?.draggable !== false &&
@@ -407,6 +434,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             deletable: false,
             dragHandle: ".spagbol-canvas-drag-handle",
             data: {
+                positionRevision,
                 node: duplicatePresentation?.originalNodes.get(node.id) ?? node,
                 projected: collapsed.projected.has(node.id),
                 stationaryOriginal: duplicatePresentation?.originalNodes.has(node.id),
@@ -426,6 +454,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         })),
     ], [
         renderGraph,
+        positionRevision,
         duplicatePresentation,
         snapshot.selection,
         snapshot.mode,
@@ -483,6 +512,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         collapsed,
         flow,
         measurementKey,
+        measurementRevision,
         settledViewport.zoom,
         editorSize,
         props.panBounds,
@@ -758,8 +788,19 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             setDuplicatePreview(next);
             return;
         }
-        if (cancelledDuplicate.current)
+        if (cancelledNodeDrag.current)
             return;
+        if (positions.length && nodeDrag.current) {
+            const next = previewNodePositions(nodeDrag.current, positions);
+            if (next !== nodeDrag.current)
+                nodeDrag.current = next;
+            // This is a controlled React Flow: recording positions in a ref does not
+            // update native geometry. Publish only the transient node presentation;
+            // the graph, validation and history still change once, on drop.
+            const state = flowStore.getState();
+            state.setNodes(applyNodeChanges(positions, state.nodes));
+            return;
+        }
         if (positions.length)
             editor.edit("Move nodes", "layout", (graph) => {
                 for (const change of positions)
@@ -792,6 +833,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             return;
         const bounds = root.current?.getBoundingClientRect();
         setSearch("");
+        setPickerIndex(0);
         setPicker({
             point: flow.screenToFlowPosition(client),
             screen: {
@@ -892,8 +934,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             return;
         const command = event.metaKey || event.ctrlKey, key = event.key.toLowerCase();
         if (key === "escape") {
-            if (duplicate.current)
-                cancelledDuplicate.current = true;
+            if (duplicate.current || nodeDrag.current)
+                cancelledNodeDrag.current = true;
+            if (nodeDrag.current)
+                clearNodeDrag();
             duplicate.current = null;
             setDuplicatePreview(null);
             editor.cancelGesture();
@@ -943,7 +987,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         }
         if (command && key === "0") {
             event.preventDefault();
-            void flow.zoomTo(1);
+            void flow.zoomTo(SPAGBOL_ZOOM_BASELINE);
             return;
         }
         if (key === "delete" || key === "backspace") {
@@ -988,14 +1032,20 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
         const touch = event.changedTouches[0];
         return touch ? { x: touch.clientX, y: touch.clientY } : undefined;
     }
-    const availableNodes = [...editor.nodes.list().filter(definition => !props.nodeKinds || props.nodeKinds.includes(definition.kind)), ...(features.areas && !picker?.origin && !picker?.linkId ? [{ kind: 'spagbol.area', label: 'Area', createData: () => ({}), ports: () => [] }] : [])]
+    const availableNodes = [...editor.nodes.list().filter(definition => !props.nodeKinds || props.nodeKinds.includes(definition.kind)), ...(features.areas && !picker?.origin && !picker?.linkId ? [{ kind: 'spagbol.area', label: 'Container', createData: () => ({}), ports: () => [] }] : [])]
         .filter(definition => snapshot.path.length > 0 || ![spagbolGroupKinds.inputs, spagbolGroupKinds.outputs].includes(definition.kind))
         .filter((definition) => `${definition.label} ${definition.category ?? ""} ${definition.keywords?.join(" ") ?? ""}`
         .toLowerCase()
         .includes(search.toLowerCase()));
+    const selectedPickerIndex = Math.min(pickerIndex, Math.max(0, availableNodes.length - 1));
+    const selectedPickerNode = availableNodes[selectedPickerIndex];
+    useEffect(() => {
+        if (picker)
+            pickerList.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: "nearest", inline: "nearest" });
+    }, [picker, selectedPickerIndex, search]);
     return (_jsx(GraphContext.Provider, { value: context, children: _jsxs("div", { ref: root, className: `spagbol-canvas ${props.className ?? ""}`, style: {
                 ...props.style,
-                "--spagbol-title-scale": zoom < 0.3 ? 1.75 : zoom < 0.5 ? 1.3 : 1,
+                "--spagbol-title-scale": spagbolHeaderTitleScale(zoom),
                 "--spagbol-canvas-height": `${editorSize.height}px`,
             }, tabIndex: 0, "aria-label": props.ariaLabel ?? "Graph editor", onKeyDown: keyDown, onDoubleClick: (event) => {
                 if (event.target.classList.contains("react-flow__pane")) {
@@ -1045,8 +1095,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                 if (event.currentTarget.hasPointerCapture(event.pointerId))
                     event.currentTarget.releasePointerCapture(event.pointerId);
             }, onPointerCancel: () => {
-                if (duplicate.current)
-                    cancelledDuplicate.current = true;
+                if (duplicate.current || nodeDrag.current)
+                    cancelledNodeDrag.current = true;
+                if (nodeDrag.current)
+                    clearNodeDrag();
                 duplicate.current = null;
                 setDuplicatePreview(null);
                 setDrawing(null);
@@ -1064,8 +1116,10 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                     }, onNodeDragStart: (event, node) => {
                         if (!node.data.node)
                             return;
-                        cancelledDuplicate.current = false;
+                        cancelledNodeDrag.current = false;
                         editor.beginGesture(event.altKey ? "Duplicate nodes" : "Move nodes");
+                        if (!event.altKey)
+                            nodeDrag.current = new Map();
                         if (event.altKey) {
                             const selection = editor.getSnapshot().selection;
                             const ids = selection.nodeIds.includes(node.data.node.id)
@@ -1084,11 +1138,14 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                             setDuplicatePreview(duplicate.current);
                         }
                     }, onNodeDragStop: (_event, node) => {
+                        const positions = nodeDrag.current;
+                        if (positions)
+                            clearNodeDrag();
                         const current = duplicate.current;
                         duplicate.current = null;
                         setDuplicatePreview(null);
-                        if (cancelledDuplicate.current) {
-                            cancelledDuplicate.current = false;
+                        if (cancelledNodeDrag.current) {
+                            cancelledNodeDrag.current = false;
                             editor.cancelGesture();
                             editor.select(editor.getSnapshot().selection);
                             return;
@@ -1108,6 +1165,8 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                                 return;
                             }
                         }
+                        if (positions?.size)
+                            editor.edit("Move nodes", "layout", graph => applyNodePositions(graph, positions));
                         editor.commitGesture();
                     }, onConnectStart: (_event, params) => {
                         setRevealedNodeId(params.nodeId?.startsWith("node:") ? params.nodeId.slice(5) : null);
@@ -1189,7 +1248,7 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                     }, connectionLineType: ConnectionLineType.Bezier, connectionLineStyle: {
                         stroke: editor.modes.get(activeMode)?.color,
                         strokeWidth: 2,
-                    }, defaultViewport: props.defaultViewport, onInit: instance => props.onInit?.(instance), onMoveStart: () => {
+                    }, defaultViewport: props.defaultViewport ?? defaultGraphViewport, onInit: instance => props.onInit?.(instance), onMoveStart: () => {
                         viewportMoving.current = true;
                     }, onMove: (_, viewport) => setZoom(viewport.zoom), onMoveEnd: (_, viewport) => {
                         viewportMoving.current = false;
@@ -1199,12 +1258,30 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
                                 transform: `translate(${Math.min(drawing.start.x, drawing.end.x)}px, ${Math.min(drawing.start.y, drawing.end.y)}px)`,
                                 width: Math.abs(drawing.start.x - drawing.end.x),
                                 height: Math.abs(drawing.start.y - drawing.end.y),
-                            } }) })) }), _jsx("div", { ref: setLinkOverlay, className: "spagbol-canvas-link-overlay" }), (props.toolbar ?? true) === true ? (props.controls === false ? null : (_jsx(SpagbolCanvasControls, { ...props.controls }))) : (props.toolbar), picker && (_jsxs("div", { className: "spagbol-canvas-picker nodrag nopan", role: "dialog", "aria-label": "Add node", style: { left: picker.screen.x, top: picker.screen.y }, onPointerDown: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "spagbol-canvas-picker-heading", children: [picker.linkId ? "insert a node" : "add a node", _jsx("button", { "aria-label": "Cancel node creation", onClick: () => setPicker(null), children: "\u00D7" })] }), _jsx("input", { autoFocus: true, "aria-label": "Search node types", placeholder: "Search nodes\u2026", value: search, onChange: (event) => setSearch(event.target.value), onKeyDown: (event) => {
+                            } }) })) }), _jsx("div", { ref: setLinkOverlay, className: "spagbol-canvas-link-overlay" }), (props.toolbar ?? true) === true ? (props.controls === false ? null : (_jsx(SpagbolCanvasControls, { ...props.controls }))) : (props.toolbar), picker && (_jsxs("div", { className: "spagbol-canvas-picker nodrag nopan", role: "dialog", "aria-label": "Add node", style: { left: picker.screen.x, top: picker.screen.y }, onPointerDown: (event) => event.stopPropagation(), children: [_jsxs("div", { className: "spagbol-canvas-picker-heading", children: [_jsx("span", { className: "spagbol-canvas-picker-title", children: picker.linkId ? "Insert a node" : "Add a node" }), _jsx("button", { "aria-label": "Cancel node creation", onClick: () => setPicker(null), children: "\u00D7" })] }), _jsx("input", { autoFocus: true, "aria-label": "Search node types", role: "combobox", "aria-expanded": "true", "aria-autocomplete": "list", "aria-controls": pickerListId, "aria-activedescendant": selectedPickerNode ? `${pickerListId}-${selectedPickerIndex}` : undefined, placeholder: "Search nodes\u2026", value: search, onChange: (event) => {
+                                setSearch(event.target.value);
+                                setPickerIndex(0);
+                            }, onKeyDown: (event) => {
                                 event.stopPropagation();
-                                if (event.key === "Escape")
+                                if (event.nativeEvent.isComposing)
+                                    return;
+                                if (event.key === "ArrowDown") {
+                                    event.preventDefault();
+                                    setPickerIndex(Math.min(selectedPickerIndex + 1, Math.max(0, availableNodes.length - 1)));
+                                }
+                                else if (event.key === "ArrowUp") {
+                                    event.preventDefault();
+                                    setPickerIndex(Math.max(0, selectedPickerIndex - 1));
+                                }
+                                else if (event.key === "Escape") {
+                                    event.preventDefault();
                                     setPicker(null);
-                                if (event.key === "Enter" && availableNodes[0])
-                                    chooseNode(availableNodes[0].kind);
-                            } }), _jsxs("div", { className: "spagbol-canvas-picker-list", children: [availableNodes.map((definition) => (_jsxs("button", { onClick: () => chooseNode(definition.kind), children: [_jsx("span", { children: definition.label }), _jsx("small", { children: definition.category })] }, definition.kind))), !availableNodes.length && _jsx("p", { children: "No matching nodes." })] })] })), error && (_jsxs("div", { className: "spagbol-canvas-error", role: "alert", children: [error, _jsx("button", { "aria-label": "Dismiss error", onClick: () => setError(null), children: "\u00D7" })] })), props.overlay && (_jsx("div", { className: "spagbol-canvas-overlay", children: props.overlay }))] }) }));
+                                }
+                                else if (event.key === "Enter") {
+                                    event.preventDefault();
+                                    if (selectedPickerNode)
+                                        chooseNode(selectedPickerNode.kind);
+                                }
+                            } }), _jsxs("div", { ref: pickerList, id: pickerListId, className: "spagbol-canvas-picker-list nowheel", role: "listbox", "aria-label": "Node types", children: [availableNodes.map((definition, index) => (_jsxs("button", { id: `${pickerListId}-${index}`, type: "button", role: "option", "aria-selected": index === selectedPickerIndex, tabIndex: -1, onPointerMove: () => setPickerIndex(index), onMouseDown: (event) => event.preventDefault(), onClick: () => chooseNode(definition.kind), children: [_jsx("span", { children: definition.label }), _jsx("small", { children: definition.category })] }, definition.kind))), !availableNodes.length && _jsx("p", { children: "No matching nodes." })] })] })), error && (_jsxs("div", { className: "spagbol-canvas-error", role: "alert", children: [error, _jsx("button", { "aria-label": "Dismiss error", onClick: () => setError(null), children: "\u00D7" })] })), props.overlay && (_jsx("div", { className: "spagbol-canvas-overlay", children: props.overlay }))] }) }));
 }
 //# sourceMappingURL=SpagbolCanvas.js.map