@pauloricca/spagbol 0.1.1 → 0.1.3

package/src/react/SpagbolCanvas.tsx

@@ -1,8 +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,
@@ -147,6 +149,7 @@ 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>> =
@@ -342,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}
@@ -518,9 +532,9 @@ function SpagbolCanvasInner({
     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);
@@ -547,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;
@@ -1207,6 +1224,11 @@ function SpagbolCanvasInner({
     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)
@@ -1239,6 +1261,7 @@ function SpagbolCanvasInner({
     if (!editor.editing) return;
     const bounds = root.current?.getBoundingClientRect();
     setSearch("");
+    setPickerIndex(0);
     setPicker({
       point: flow.screenToFlowPosition(client),
       screen: {
@@ -1439,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") {
@@ -1487,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}>
@@ -1503,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
         }
@@ -1779,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;
@@ -1841,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)}
@@ -1852,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")

package/src/react/SpagbolCurveEditor.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState, type ReactNode, type PointerEvent, type MouseEvent } from 'react';
+
+/** Normalized view coordinates, not a serialized curve or runtime data model. */
+export interface SpagbolCurveEditorPoint { x: number; y: number; locked?: boolean }
+export interface SpagbolCurveEditorProps {
+  /** x: 0..1, y: -1..1. The host projects its data into these view coordinates. */
+  points: readonly SpagbolCurveEditorPoint[];
+  backgroundCurves?: readonly { points: readonly SpagbolCurveEditorPoint[]; className?: string }[];
+  className?: string;
+  pathClassName?: string;
+  ariaLabel?: string;
+  /** Actual on-screen size, including canvas zoom, for constant-sized hit targets. */
+  displaySize: { width: number; height: number };
+  screenEmphasis?: number;
+  pointScale?: number;
+  minPointSpacing?: number;
+  formatValue?: (normalizedValue: number) => string;
+  toolbar?: ReactNode;
+  underlay?: ReactNode;
+  /** SVG children in the fixed 300 × 128 viewBox; decorative, without pointer events. */
+  overlay?: ReactNode;
+  footer?: ReactNode;
+  /** Apply an insertion in host data and return the new point's index, or null to reject. */
+  onInsertPoint: (point: { x: number; y: number }) => number | null;
+  onMovePoint: (index: number, point: { x: number; y: number }) => void;
+  onRemovePoint: (index: number) => void;
+  onGestureEnd?: () => void;
+}
+
+const width = 300, height = 128, padding = 12;
+const innerWidth = width - padding * 2, innerHeight = height - padding * 2;
+const clamp = (n: number, low: number, high: number) => Math.max(low, Math.min(high, n));
+const screenPoint = (point: { x: number; y: number }) => ({ x: padding + point.x * innerWidth, y: padding + (1 - (point.y + 1) / 2) * innerHeight });
+function path(points: readonly SpagbolCurveEditorPoint[]) {
+  return points.map((point, index) => {
+    const p = screenPoint(point);
+    // Preserve Teia's two-decimal SVG path precision.
+    return `${index ? 'L' : 'M'}${Math.round(p.x * 100) / 100} ${Math.round(p.y * 100) / 100}`;
+  }).join(' ');
+}
+
+export function SpagbolCurveEditor({
+  points, backgroundCurves = [], className = '', pathClassName = '', ariaLabel = 'Curve editor',
+  displaySize, screenEmphasis = 1, pointScale = 1, minPointSpacing = 0.001,
+  formatValue = (value) => String(Math.round(value * 1000) / 1000),
+  toolbar, underlay, overlay, footer, onInsertPoint, onMovePoint, onRemovePoint, onGestureEnd,
+}: SpagbolCurveEditorProps) {
+  const editorRef = useRef<SVGSVGElement | null>(null);
+  const dragRef = useRef<{ pointerId: number; index: number } | null>(null);
+  const removedByPress = useRef(false);
+  const clickRef = useRef<{ index: number | null; time: number }>({ index: null, time: 0 });
+  const [activePoint, setActivePoint] = useState<number | null>(null);
+  const [hoveredPoint, setHoveredPoint] = useState<number | null>(null);
+  const latest = useRef({ points, onMovePoint, onGestureEnd });
+  latest.current = { points, onMovePoint, onGestureEnd };
+
+  function fromPointer(event: { clientX: number; clientY: number }) {
+    const rect = editorRef.current?.getBoundingClientRect();
+    if (!rect || rect.width <= 0 || rect.height <= 0) return null;
+    const x = clamp((event.clientX - rect.left) / rect.width * width, padding, width - padding);
+    const y = clamp((event.clientY - rect.top) / rect.height * height, padding, height - padding);
+    return { x: (x - padding) / innerWidth, y: (1 - (y - padding) / innerHeight) * 2 - 1 };
+  }
+  useEffect(() => {
+    const move = (event: globalThis.PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const current = latest.current.points;
+      const selected = current[drag.index];
+      if (!selected || selected.locked) return;
+      event.preventDefault();
+      const point = fromPointer(event);
+      if (!point) return;
+      const low = drag.index === 0 ? 0 : (current[drag.index - 1]?.x ?? 0) + minPointSpacing;
+      const high = drag.index === current.length - 1 ? 1 : (current[drag.index + 1]?.x ?? 1) - minPointSpacing;
+      // A host may reject a move; never cross adjacent point positions.
+      if (low > high) return;
+      latest.current.onMovePoint(drag.index, { x: clamp(point.x, low, high), y: point.y });
+    };
+    const stop = (event: globalThis.PointerEvent) => {
+      if (dragRef.current?.pointerId !== event.pointerId) return;
+      dragRef.current = null;
+      setActivePoint(null);
+      latest.current.onGestureEnd?.();
+    };
+    window.addEventListener('pointermove', move, { passive: false });
+    window.addEventListener('pointerup', stop);
+    window.addEventListener('pointercancel', stop);
+    return () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', stop);
+      window.removeEventListener('pointercancel', stop);
+    };
+  }, [minPointSpacing]);
+
+  const hitIndex = (target: EventTarget) => {
+    const element = target instanceof Element ? target.closest<SVGElement>('[data-spagbol-curve-point]') : null;
+    return element ? Number(element.dataset.spagbolCurvePoint) : null;
+  };
+  const remove = (index: number) => {
+    if (!points[index] || points[index].locked) return;
+    if (dragRef.current) onGestureEnd?.();
+    dragRef.current = null;
+    setActivePoint(null);
+    onRemovePoint(index);
+  };
+  const pointerDown = (event: PointerEvent<SVGSVGElement>) => {
+    if (event.button !== 0 || dragRef.current) return;
+    event.preventDefault(); event.stopPropagation();
+    removedByPress.current = false;
+    const index = hitIndex(event.target);
+    if (index !== null && Number.isInteger(index)) {
+      const now = performance.now();
+      if (clickRef.current.index === index && now - clickRef.current.time < 360 && !points[index]?.locked) {
+        clickRef.current = { index: null, time: 0 }; removedByPress.current = true; remove(index); return;
+      }
+      clickRef.current = { index, time: now };
+      if (!points[index] || points[index].locked) return;
+      dragRef.current = { pointerId: event.pointerId, index };
+      setActivePoint(index); event.currentTarget.setPointerCapture(event.pointerId); return;
+    }
+    const point = fromPointer(event);
+    if (!point) return;
+    clickRef.current = { index: null, time: 0 };
+    const insertedIndex = onInsertPoint(point);
+    if (insertedIndex === null) return;
+    dragRef.current = { pointerId: event.pointerId, index: insertedIndex };
+    setActivePoint(insertedIndex); event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const doubleClick = (event: MouseEvent<SVGSVGElement>) => {
+    event.preventDefault(); event.stopPropagation();
+    if (removedByPress.current) { removedByPress.current = false; return; }
+    const index = hitIndex(event.target);
+    if (index !== null) remove(index);
+  };
+  const radius = (pixels: number) => ({ rx: pixels / Math.max(0.001, displaySize.width / width), ry: pixels / Math.max(0.001, displaySize.height / height) });
+  const hitRadius = radius(15 * screenEmphasis);
+  const endpointRadius = radius(5 * screenEmphasis * pointScale);
+  const handleRadius = radius(6 * screenEmphasis * pointScale);
+  const valuePoint = points[activePoint ?? hoveredPoint ?? -1];
+  const valueScreen = valuePoint && screenPoint(valuePoint);
+  return <div className={`spagbol-curve-editor ${className} nodrag nopan`}>
+    <div className="spagbol-curve-editor-chart">
+      {toolbar}{underlay}
+      <svg ref={editorRef} className="spagbol-curve-editor-canvas" viewBox="0 0 300 128" preserveAspectRatio="none" aria-label={ariaLabel} role="img" onPointerDown={pointerDown} onDoubleClick={doubleClick}
+        onLostPointerCapture={(event) => {
+          if (dragRef.current?.pointerId === event.pointerId) { dragRef.current = null; setActivePoint(null); onGestureEnd?.(); }
+        }}>
+        <g className="spagbol-curve-editor-chrome">
+          {backgroundCurves.map((curve, index) => <path key={index} className={`spagbol-curve-editor-path is-background ${curve.className ?? ''}`} d={path(curve.points)} />)}
+          <path className={`spagbol-curve-editor-path ${pathClassName}`} d={path(points)} />
+          {overlay}
+        </g>
+        {points.map((point, index) => {
+          const screen = screenPoint(point);
+          return <g key={index} onPointerEnter={() => setHoveredPoint(index)} onPointerLeave={() => setHoveredPoint((current) => current === index ? null : current)}>
+            <ellipse className={`spagbol-curve-editor-hit-target ${point.locked ? 'is-locked' : ''}`} data-spagbol-curve-point={index} cx={screen.x} cy={screen.y} {...hitRadius} />
+            <ellipse className={`spagbol-curve-editor-handle ${point.locked ? 'spagbol-curve-editor-endpoint is-locked' : ''}`} data-spagbol-curve-point={index} cx={screen.x} cy={screen.y} {...(point.locked ? endpointRadius : handleRadius)} />
+          </g>;
+        })}
+      </svg>
+      {valuePoint && valueScreen ? <span className={`spagbol-curve-editor-value-label ${valuePoint.x > 0.72 ? 'is-left' : ''} ${valuePoint.y > 0.72 ? 'is-below' : ''}`} style={{ left: `${valueScreen.x / width * 100}%`, top: `${valueScreen.y / height * 100}%` }} aria-hidden="true">{formatValue(valuePoint.y)}</span> : null}
+    </div>
+    {footer}
+  </div>;
+}

package/src/react/SpagbolNodeFrame.tsx

@@ -205,32 +205,37 @@ export function SpagbolNodeFrame(props: SpagbolNodeFrameProps) {
         <span className="spagbol-node-frame-title">
           {props.title ?? <SpagbolNodeFrameTypePicker node={node} compact={!!compact} selected={selected} disabled={projected || props.readOnly || !editor.editing} />}
         </span>
-        {!projected && <button className="spagbol-node-frame-enabled" type="button" aria-label={node.enabled === false ? 'Enable node' : 'Disable node'} title={node.enabled === false ? 'Enable node' : 'Disable node'} aria-pressed={node.enabled !== false} disabled={!editor.editing || props.readOnly} onPointerDown={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onClick={event => { event.preventDefault(); event.stopPropagation(); editor.updateNode(node.id, { enabled: node.enabled === false }, 'structure'); }}><span className="spagbol-node-frame-enabled-icon" aria-hidden="true" /></button>}
-        {!projected && features.compact && !props.forceCompact && view?.compact !== false && (
+        {!projected && node.graph && features.nestedGraphs && (
           <button
-            className="spagbol-node-frame-header-button nodrag nopan"
-            aria-label={node.compact ? "Expand ports" : "Compact ports"}
-            title={node.compact ? "Expand ports" : "Compact ports"}
-            disabled={!editor.editing}
+            className="spagbol-node-frame-header-button spagbol-node-frame-enter nodrag nopan"
+            type="button"
+            onPointerDown={event => event.stopPropagation()}
+            onDoubleClick={event => event.stopPropagation()}
+            aria-label="Enter nested graph"
+            title="Enter nested graph"
             onClick={(event) => {
               event.stopPropagation();
-              editor.updateNode(node.id, { compact: !node.compact }, "layout");
+              editor.enter(node.id);
             }}
           >
-            {node.compact ? "+" : "−"}
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+              <path d="m9 6 6 6-6 6" />
+            </svg>
           </button>
         )}
-        {!projected && node.graph && features.nestedGraphs && (
+        {!projected && <button className="spagbol-node-frame-enabled" type="button" aria-label={node.enabled === false ? 'Enable node' : 'Disable node'} title={node.enabled === false ? 'Enable node' : 'Disable node'} aria-pressed={node.enabled !== false} disabled={!editor.editing || props.readOnly} onPointerDown={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onClick={event => { event.preventDefault(); event.stopPropagation(); editor.updateNode(node.id, { enabled: node.enabled === false }, 'structure'); }}><span className="spagbol-node-frame-enabled-icon" aria-hidden="true" /></button>}
+        {!projected && features.compact && !props.forceCompact && view?.compact !== false && (
           <button
             className="spagbol-node-frame-header-button nodrag nopan"
-            aria-label="Enter nested graph"
-            title="Enter nested graph"
+            aria-label={node.compact ? "Expand ports" : "Compact ports"}
+            title={node.compact ? "Expand ports" : "Compact ports"}
+            disabled={!editor.editing}
             onClick={(event) => {
               event.stopPropagation();
-              editor.enter(node.id);
+              editor.updateNode(node.id, { compact: !node.compact }, "layout");
             }}
           >
-            ↳
+            {node.compact ? "+" : "−"}
           </button>
         )}
       </div>

package/src/react/SpagbolNodeFrameTypePicker.tsx

@@ -14,7 +14,7 @@ export function SpagbolNodeFrameTypePicker({ node, compact, selected, disabled }
   const [highlight, setHighlight] = useState(0);
   const input = useRef<HTMLInputElement>(null);
   const menu = useRef<HTMLDivElement>(null);
-  const options = useMemo(() => [...editor.nodes.list().filter(item => !nodeKinds || nodeKinds.includes(item.kind)), ...(features.areas ? [{ kind: 'spagbol.area', label: 'Area' }] : [])].filter(item =>
+  const options = useMemo(() => [...editor.nodes.list().filter(item => !nodeKinds || nodeKinds.includes(item.kind)), ...(features.areas ? [{ kind: 'spagbol.area', label: 'Container' }] : [])].filter(item =>
     `${item.kind} ${item.label}`.toLowerCase().includes(query.trim().toLowerCase())
   ).sort((a, b) => Number(b.label.toLowerCase().startsWith(query.toLowerCase())) - Number(a.label.toLowerCase().startsWith(query.toLowerCase()))), [editor, query, nodeKinds, features.areas]);
   useEffect(() => { if (!selected || disabled) setOpen(false); }, [selected, disabled]);