@pauloricca/spagbol 0.1.0 → 0.1.3

package/src/react/SpagbolCanvas.tsx

@@ -1,7 +1,10 @@
+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 {
+  applyNodeChanges,
   BaseEdge,
   ConnectionLineType,
   EdgeLabelRenderer,
@@ -146,6 +149,8 @@ export interface SpagbolCanvasProps extends SpagbolCanvasSlots {
   controls?: SpagbolCanvasControlsOptions | false;
   ariaLabel?: string;
 }
+const defaultGraphViewport = { x: 0, y: 0, zoom: SPAGBOL_ZOOM_BASELINE };
+const emptyFlowNodes: FlowNode[] = [];
 const emptyViews: Readonly<Record<string, SpagbolNodeView>> = Object.freeze({});
 const emptyPresentations: Readonly<Record<string, SpagbolLinkPresentation>> =
   Object.freeze({});
@@ -340,20 +345,31 @@ function SpagbolCanvasArea({ data, selected }: NodeProps<FlowNode>) {
         onPointerDown={(event) => start(event)}
         {...pointerHandlers}
       >
-        {titleEditing ? <input autoFocus 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') event.currentTarget.blur(); if (event.key === 'Escape') { setTitleDraft(area.title); setTitleEditing(false); } }} /> : <span className="spagbol-canvas-area-title" onDoubleClick={event => { event.stopPropagation(); if (editor.editing) { setTitleDraft(area.title); setTitleEditing(true); } }}>{area.title}</span>}
+        {titleEditing ? <input autoFocus 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); } }} /> : <span className="spagbol-canvas-area-title" onDoubleClick={event => { event.stopPropagation(); if (editor.editing) { setTitleDraft(area.title); setTitleEditing(true); } }}>{area.title}</span>}
         <div
           className="spagbol-canvas-area-actions"
           onPointerDown={(event) => event.stopPropagation()}
         >
           <button
-            title={area.locked ? "Unlock membership" : "Lock membership"}
-            aria-label={area.locked ? "Unlock membership" : "Lock membership"}
+            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}
-            onClick={() => editor.lockArea(area.id, !area.locked)}
+            onDoubleClick={event => event.stopPropagation()}
+            onClick={event => {
+              event.preventDefault();
+              event.stopPropagation();
+              editor.lockArea(area.id, !area.locked);
+            }}
           >
-            {area.locked ? "●" : "○"}
+            <span className="spagbol-canvas-area-lock-icon" aria-hidden="true" />
           </button>
           <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}
@@ -404,8 +420,8 @@ const SpagbolCanvasLink = memo(function SpagbolCanvasLink(props: EdgeProps<FlowL
   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); return; }
     const timer = window.setTimeout(() => setControlsVisible(true), 260);
@@ -507,16 +523,18 @@ function SpagbolCanvasInner({
   const flow = useReactFlow<FlowNode, FlowLink>();
   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<string, { width: number; height: number }>(),
   );
   const [measurementRevision, setMeasurementRevision] = useState(0);
-  const [zoom, setZoom] = useState(props.defaultViewport?.zoom ?? 1);
+  const [zoom, setZoom] = useState(props.defaultViewport?.zoom ?? SPAGBOL_ZOOM_BASELINE);
   const [settledViewport, setSettledViewport] = useState<Viewport>(
-    props.defaultViewport ?? { x: 0, y: 0, zoom: 1 },
+    props.defaultViewport ?? defaultGraphViewport,
   );
   const [editorSize, setEditorSize] = useState({ width: 0, height: 0 });
   const viewportMoving = useRef(false);
@@ -543,6 +561,9 @@ function SpagbolCanvasInner({
   );
   const [picker, setPicker] = useState<Picker | null>(null);
   const [search, setSearch] = useState("");
+  const [pickerIndex, setPickerIndex] = useState(0);
+  const pickerListId = useId();
+  const pickerList = useRef<HTMLDivElement>(null);
   const [error, setError] = useState<string | null>(null);
   const [drawing, setDrawing] = useState<{
     start: Point;
@@ -559,10 +580,25 @@ function SpagbolCanvasInner({
   const duplicate = useRef<DuplicateDrag | null>(null);
   const [duplicatePreview, setDuplicatePreview] =
     useState<DuplicateDrag | null>(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<ReadonlyMap<string, Point> | null>(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);
     }
@@ -612,7 +648,7 @@ function SpagbolCanvasInner({
     if (phase === 'start') {
       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);
@@ -723,7 +759,7 @@ function SpagbolCanvasInner({
         (node): FlowNode => ({
           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:
@@ -742,6 +778,7 @@ function SpagbolCanvasInner({
           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(
@@ -770,6 +807,7 @@ function SpagbolCanvasInner({
     ],
     [
       renderGraph,
+      positionRevision,
       duplicatePresentation,
       snapshot.selection,
       snapshot.mode,
@@ -836,6 +874,7 @@ function SpagbolCanvasInner({
     collapsed,
     flow,
     measurementKey,
+    measurementRevision,
     settledViewport.zoom,
     editorSize,
     props.panBounds,
@@ -1181,7 +1220,17 @@ function SpagbolCanvasInner({
       setDuplicatePreview(next);
       return;
     }
-    if (cancelledDuplicate.current) return;
+    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)
@@ -1212,6 +1261,7 @@ function SpagbolCanvasInner({
     if (!editor.editing) return;
     const bounds = root.current?.getBoundingClientRect();
     setSearch("");
+    setPickerIndex(0);
     setPicker({
       point: flow.screenToFlowPosition(client),
       screen: {
@@ -1362,7 +1412,8 @@ function SpagbolCanvasInner({
     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();
@@ -1411,7 +1462,7 @@ function SpagbolCanvasInner({
     }
     if (command && key === "0") {
       event.preventDefault();
-      void flow.zoomTo(1);
+      void flow.zoomTo(SPAGBOL_ZOOM_BASELINE);
       return;
     }
     if (key === "delete" || key === "backspace") {
@@ -1459,13 +1510,18 @@ function SpagbolCanvasInner({
     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: () => [] } as import('../core/index.js').NodeDefinition] : [])]
+  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: () => [] } as import('../core/index.js').NodeDefinition] : [])]
     .filter(definition => snapshot.path.length > 0 || ![spagbolGroupKinds.inputs, spagbolGroupKinds.outputs].includes(definition.kind as typeof spagbolGroupKinds.inputs))
     .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 (
     <GraphContext.Provider value={context}>
@@ -1475,7 +1531,7 @@ function SpagbolCanvasInner({
         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`,
           } as CSSProperties
         }
@@ -1539,7 +1595,8 @@ function SpagbolCanvasInner({
             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);
@@ -1569,10 +1626,11 @@ function SpagbolCanvasInner({
           }}
           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)
@@ -1594,11 +1652,13 @@ function SpagbolCanvasInner({
             }
           }}
           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;
@@ -1620,6 +1680,8 @@ function SpagbolCanvasInner({
                 return;
               }
             }
+            if (positions?.size)
+              editor.edit("Move nodes", "layout", graph => applyNodePositions(graph, positions));
             editor.commitGesture();
           }}
           onConnectStart={(_event, params) => {
@@ -1745,7 +1807,7 @@ function SpagbolCanvasInner({
             stroke: editor.modes.get(activeMode)?.color,
             strokeWidth: 2,
           }}
-          defaultViewport={props.defaultViewport}
+          defaultViewport={props.defaultViewport ?? defaultGraphViewport}
           onInit={instance => props.onInit?.(instance as unknown as ReactFlowInstance)}
           onMoveStart={() => {
             viewportMoving.current = true;
@@ -1807,7 +1869,9 @@ function SpagbolCanvasInner({
             onPointerDown={(event) => event.stopPropagation()}
           >
             <div className="spagbol-canvas-picker-heading">
-              {picker.linkId ? "insert a node" : "add a node"}
+              <span className="spagbol-canvas-picker-title">
+                {picker.linkId ? "Insert a node" : "Add a node"}
+              </span>
               <button
                 aria-label="Cancel node creation"
                 onClick={() => setPicker(null)}
@@ -1818,20 +1882,46 @@ function SpagbolCanvasInner({
             <input
               autoFocus
               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…"
               value={search}
-              onChange={(event) => setSearch(event.target.value)}
+              onChange={(event) => {
+                setSearch(event.target.value);
+                setPickerIndex(0);
+              }}
               onKeyDown={(event) => {
                 event.stopPropagation();
-                if (event.key === "Escape") setPicker(null);
-                if (event.key === "Enter" && availableNodes[0])
-                  chooseNode(availableNodes[0].kind);
+                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);
+                } else if (event.key === "Enter") {
+                  event.preventDefault();
+                  if (selectedPickerNode) chooseNode(selectedPickerNode.kind);
+                }
               }}
             />
-            <div className="spagbol-canvas-picker-list">
-              {availableNodes.map((definition) => (
+            <div ref={pickerList} id={pickerListId} className="spagbol-canvas-picker-list nowheel" role="listbox" aria-label="Node types">
+              {availableNodes.map((definition, index) => (
                 <button
                   key={definition.kind}
+                  id={`${pickerListId}-${index}`}
+                  type="button"
+                  role="option"
+                  aria-selected={index === selectedPickerIndex}
+                  tabIndex={-1}
+                  onPointerMove={() => setPickerIndex(index)}
+                  onMouseDown={(event) => event.preventDefault()}
                   onClick={() => chooseNode(definition.kind)}
                 >
                   <span>{definition.label}</span>

package/src/react/SpagbolCanvasControls.tsx

@@ -1,5 +1,5 @@
 import { useReactFlow } from "@xyflow/react";
-import { isGroupBoundary } from "../core/index.js";
+import { graphAt, isGroupBoundary } from "../core/index.js";
 import { useRef, useState, type ReactNode } from "react";
 import { SpagbolControlZoom } from "./SpagbolControlZoom.js";
 import { SpagbolCanvasMenu } from "./SpagbolCanvasMenu.js";
@@ -154,11 +154,6 @@ export function SpagbolCanvasActions(options: SpagbolCanvasControlsOptions) {
           void invoke(action, fromMenu);
         }}
       >
-        {action.checked !== undefined && fromMenu ? (
-          <span className="spagbol-canvas-menu-check" aria-hidden="true">
-            {action.checked ? "✓" : ""}
-          </span>
-        ) : null}
         {action.label}
       </button>
     );
@@ -237,7 +232,7 @@ export function SpagbolCanvasControls(options: SpagbolCanvasControlsOptions) {
               }
               onClick={() => editor.navigate(snapshot.path.slice(0, index + 1))}
             >
-              {id}
+              {graphAt(snapshot.document, snapshot.path.slice(0, index)).nodes.find(node => node.id === id)?.label?.trim() || 'Group'}
             </button>
           ))}
         </nav>

package/src/react/SpagbolControlJoystick.tsx

@@ -0,0 +1,147 @@
+import { useEffect, useRef, type PointerEvent } from 'react';
+
+export interface SpagbolControlJoystickProps {
+  x: number;
+  y: number;
+  elasticity?: number;
+  className?: string;
+  onChange: (x: number, y: number) => void;
+}
+
+export function SpagbolControlJoystick({ x, y, elasticity = 0, onChange, className = '' }: SpagbolControlJoystickProps) {
+  const changeRef = useRef(onChange); changeRef.current = onChange;
+  const dragPointerRef = useRef<number | null>(null);
+  const returnFrameRef = useRef<number | null>(null);
+  const returnTimeRef = useRef(0);
+  const elasticityRef = useRef(elasticity);
+  const normalizedX = clamp(x, 0, 1);
+  const normalizedY = clamp(y, 0, 1);
+  const positionRef = useRef({ x: normalizedX, y: normalizedY });
+
+  elasticityRef.current = elasticity;
+  if (dragPointerRef.current === null && returnFrameRef.current === null) {
+    positionRef.current = { x: normalizedX, y: normalizedY };
+  }
+
+  useEffect(() => () => {
+    if (returnFrameRef.current !== null) {
+      window.cancelAnimationFrame(returnFrameRef.current);
+    }
+  }, []);
+
+  function stopReturn() {
+    if (returnFrameRef.current !== null) {
+      window.cancelAnimationFrame(returnFrameRef.current);
+      returnFrameRef.current = null;
+    }
+  }
+
+  function startReturn() {
+    stopReturn();
+    if (!(elasticityRef.current > 0)) return;
+    returnTimeRef.current = performance.now();
+
+    function stepReturn(timestamp: number) {
+      if (dragPointerRef.current !== null || !(elasticityRef.current > 0)) {
+        returnFrameRef.current = null;
+        return;
+      }
+
+      const elapsedSeconds = Math.min(0.05, Math.max(0, (timestamp - returnTimeRef.current) / 1000));
+      returnTimeRef.current = timestamp;
+      const current = positionRef.current;
+      const deltaX = 0.5 - current.x;
+      const deltaY = 0.5 - current.y;
+      const distance = Math.hypot(deltaX, deltaY);
+      const travel = elasticityRef.current * elapsedSeconds;
+
+      if (distance <= Math.max(0.0001, travel)) {
+        positionRef.current = { x: 0.5, y: 0.5 };
+        returnFrameRef.current = null;
+        changeRef.current(0.5, 0.5);
+        return;
+      }
+
+      const scale = travel / distance;
+      const next = {
+        x: current.x + deltaX * scale,
+        y: current.y + deltaY * scale,
+      };
+      positionRef.current = next;
+      changeRef.current(next.x, next.y);
+      returnFrameRef.current = window.requestAnimationFrame(stepReturn);
+    }
+
+    returnFrameRef.current = window.requestAnimationFrame(stepReturn);
+  }
+
+  function updateFromPointer(event: PointerEvent<HTMLDivElement>) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    const nextX = (event.clientX - bounds.left) / Math.max(1, bounds.width);
+    const nextY = 1 - ((event.clientY - bounds.top) / Math.max(1, bounds.height));
+    const next = { x: clamp(nextX, 0, 1), y: clamp(nextY, 0, 1) };
+    positionRef.current = next;
+    onChange(next.x, next.y);
+  }
+
+  return (
+    <div
+      className={`spagbol-control-joystick ${className} nodrag nopan`}
+      role="group"
+      aria-label="Joystick"
+      aria-valuetext={`X ${normalizedX.toFixed(3)}, Y ${normalizedY.toFixed(3)}`}
+      onPointerDown={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!event.isPrimary || event.button !== 0) return;
+        stopReturn();
+        dragPointerRef.current = event.pointerId;
+        event.currentTarget.setPointerCapture(event.pointerId);
+        updateFromPointer(event);
+      }}
+      onPointerMove={(event) => {
+        if (dragPointerRef.current !== event.pointerId) return;
+        event.preventDefault();
+        event.stopPropagation();
+        updateFromPointer(event);
+      }}
+      onPointerUp={(event) => {
+        event.stopPropagation();
+        if (dragPointerRef.current === event.pointerId) {
+          dragPointerRef.current = null;
+          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+            event.currentTarget.releasePointerCapture(event.pointerId);
+          }
+          startReturn();
+        }
+      }}
+      onPointerCancel={(event) => {
+        event.stopPropagation();
+        if (dragPointerRef.current === event.pointerId) {
+          dragPointerRef.current = null;
+          startReturn();
+        }
+      }}
+      onLostPointerCapture={(event) => {
+        if (dragPointerRef.current === event.pointerId) {
+          dragPointerRef.current = null;
+          startReturn();
+        }
+      }}
+      onClick={(event) => event.stopPropagation()}
+      onDoubleClick={(event) => event.stopPropagation()}
+    >
+      <span
+        className="spagbol-control-joystick-handle"
+        style={{
+          left: `calc(${normalizedX} * (100% - var(--joystick-handle-size)))`,
+          top: `calc(${1 - normalizedY} * (100% - var(--joystick-handle-size)))`,
+        }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+}
+
+
+function clamp(value: number, min: number, max: number) { return Math.max(min, Math.min(max, Number.isFinite(value) ? value : 0.5)); }

package/src/react/SpagbolControlZoom.tsx

@@ -1,3 +1,4 @@
+import { SPAGBOL_ZOOM_BASELINE, spagbolZoomPercentage } from "./zoom.js";
 import { ControlButton, Controls, useReactFlow } from "@xyflow/react";
 import type { ReactNode } from "react";
 
@@ -17,10 +18,10 @@ export function SpagbolControlZoom({
   layout = "flow",
 }: SpagbolControlZoomProps) {
   const flow = useReactFlow();
-  const percentage = `${Math.round(zoom * 100)}%`;
+  const percentage = spagbolZoomPercentage(zoom);
   const reset = () => {
     if (onReset) onReset();
-    else void flow.zoomTo(1);
+    else void flow.zoomTo(SPAGBOL_ZOOM_BASELINE);
   };
   const label = `Reset zoom to 100% (currently ${percentage})`;
   if (layout === "flow")