@pauloricca/spagbol 0.1.1 → 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":"AAIA,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;AAOD,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,9 +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";
@@ -14,6 +15,7 @@ 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({});
@@ -151,14 +153,18 @@ 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();
@@ -215,8 +221,8 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
     // 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(() => {
@@ -239,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);
@@ -785,6 +794,11 @@ function SpagbolCanvasInner({ editor, views = emptyViews, features = defaultFeat
             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)
@@ -819,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: {
@@ -972,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") {
@@ -1017,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")) {
@@ -1227,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;
@@ -1237,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