@pauloricca/spagbol 0.0.0-stage → 0.1.0

package/dist/react/Controls.js

@@ -0,0 +1,301 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Extracted from Teia; public component/type names and CSS classes are generic.
+import { useEffect, useRef, useState } from 'react';
+const SLIDER_WHEEL_SPEED = 0.5;
+function sliderPrecisionDivisor(event) {
+    if (event.metaKey || event.ctrlKey)
+        return 5;
+    if (event.shiftKey && event.altKey)
+        return 3;
+    return 1;
+}
+export function SpagbolControlSlider({ value, displayValue, direction, onChange, onGestureStart, onGestureEnd }) {
+    const [interactionValue, setInteractionValue] = useState(null);
+    const gestureEnd = useRef(onGestureEnd);
+    gestureEnd.current = onGestureEnd;
+    const wheelTimer = useRef(null);
+    const releaseTimer = useRef(null);
+    const pendingDisplay = useRef(null);
+    function clearPendingDisplay() {
+        if (releaseTimer.current !== null)
+            clearTimeout(releaseTimer.current);
+        releaseTimer.current = null;
+        pendingDisplay.current = null;
+    }
+    function releaseDisplay(requested, cancel) {
+        clearPendingDisplay();
+        if (cancel || Math.abs((displayValue ?? value) - requested) <= 0.001) {
+            setInteractionValue(null);
+            return;
+        }
+        pendingDisplay.current = requested;
+        releaseTimer.current = setTimeout(() => { clearPendingDisplay(); setInteractionValue(null); }, 200);
+    }
+    useEffect(() => {
+        if (pendingDisplay.current !== null && Math.abs((displayValue ?? value) - pendingDisplay.current) <= 0.001) {
+            clearPendingDisplay();
+            setInteractionValue(null);
+        }
+    }, [value, displayValue]);
+    const dragRef = useRef(null);
+    // The pointer owns the display during an edit; delayed engine observations
+    // resume when it ends. This also works in apps without audio observations.
+    const normalized = clamp(interactionValue ?? displayValue ?? value, 0, 1);
+    const wheelValueRef = useRef(normalized);
+    const lastWheelTimeRef = useRef(-Infinity);
+    const wheelTargetRef = useModifiedWheel((event, target) => {
+        if (dragRef.current)
+            return;
+        if (event.timeStamp - lastWheelTimeRef.current > 160) {
+            wheelValueRef.current = normalized;
+        }
+        lastWheelTimeRef.current = event.timeStamp;
+        const travel = direction === 'vertical' ? target.clientHeight : target.clientWidth;
+        const precisionDivisor = sliderPrecisionDivisor(event);
+        const wheelDelta = wheelAxisDeltaPixels(event, direction);
+        if (wheelDelta === 0)
+            return;
+        const nextValue = clamp(wheelValueRef.current
+            + wheelDelta * (direction === 'vertical' ? 1 : -1) * SLIDER_WHEEL_SPEED
+                / Math.max(1, travel)
+                / precisionDivisor, 0, 1);
+        if (wheelTimer.current === null) {
+            clearPendingDisplay();
+            onGestureStart?.();
+        }
+        else
+            clearTimeout(wheelTimer.current);
+        wheelValueRef.current = nextValue;
+        setInteractionValue(nextValue);
+        onChange(nextValue);
+        wheelTimer.current = setTimeout(() => {
+            wheelTimer.current = null;
+            releaseDisplay(wheelValueRef.current, false);
+            gestureEnd.current?.(false);
+        }, 160);
+    });
+    function finishPointer(pointerId, cancel) {
+        if (dragRef.current?.pointerId !== pointerId)
+            return;
+        const requested = dragRef.current.value;
+        dragRef.current = null;
+        releaseDisplay(requested, cancel);
+        gestureEnd.current?.(cancel);
+    }
+    useEffect(() => {
+        const cancel = () => {
+            const active = dragRef.current !== null || wheelTimer.current !== null;
+            dragRef.current = null;
+            if (wheelTimer.current !== null)
+                clearTimeout(wheelTimer.current);
+            wheelTimer.current = null;
+            clearPendingDisplay();
+            if (active) {
+                setInteractionValue(null);
+                gestureEnd.current?.(true);
+            }
+        };
+        window.addEventListener('blur', cancel);
+        return () => { window.removeEventListener('blur', cancel); cancel(); };
+    }, []);
+    const fillStyle = direction === 'vertical'
+        ? { height: `${normalized * 100}%` }
+        : { width: `${normalized * 100}%` };
+    function pointerValue(event) {
+        const bounds = event.currentTarget.getBoundingClientRect();
+        // Keep this unbounded while dragging. Fine control uses relative travel,
+        // so clamping here would lose movement once the pointer passed an edge.
+        return direction === 'vertical'
+            ? 1 - ((event.clientY - bounds.top) / Math.max(1, bounds.height))
+            : (event.clientX - bounds.left) / Math.max(1, bounds.width);
+    }
+    function updateFromPointer(event) {
+        const drag = dragRef.current;
+        if (!drag || drag.pointerId !== event.pointerId)
+            return;
+        const cursorValue = pointerValue(event);
+        const precisionDivisor = sliderPrecisionDivisor(event);
+        if (precisionDivisor !== drag.precisionDivisor) {
+            // Re-anchor when the modifier changes so switching speeds never snaps to
+            // the cursor. Without fine control, the bias preserves this position.
+            drag.lastPointerValue = cursorValue;
+            drag.cursorBias = drag.value - cursorValue;
+            drag.precisionDivisor = precisionDivisor;
+            return;
+        }
+        const nextValue = precisionDivisor > 1
+            ? drag.value + (cursorValue - drag.lastPointerValue) / precisionDivisor
+            : cursorValue + drag.cursorBias;
+        drag.lastPointerValue = cursorValue;
+        drag.value = clamp(nextValue, 0, 1);
+        setInteractionValue(drag.value);
+        onChange(drag.value);
+    }
+    return (_jsxs("div", { className: [
+            'spagbol-control-slider nodrag nopan',
+            direction === 'vertical' ? 'spagbol-control-slider-vertical' : 'spagbol-control-slider-horizontal',
+        ].join(' '), onClick: (event) => event.stopPropagation(), children: [_jsx("span", { className: "spagbol-control-slider-fill", style: fillStyle, "aria-hidden": "true" }), _jsx("input", { ref: wheelTargetRef, "aria-label": "Slider value", type: "range", tabIndex: -1, min: 0, max: 1, step: 0.001, value: normalized, onChange: (event) => {
+                    if (dragRef.current)
+                        return;
+                    onChange(Number(event.currentTarget.value));
+                    event.currentTarget.blur();
+                }, onFocus: (event) => event.currentTarget.blur(), onPointerDown: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    if (!event.isPrimary || event.button !== 0)
+                        return;
+                    if (wheelTimer.current !== null) {
+                        clearTimeout(wheelTimer.current);
+                        wheelTimer.current = null;
+                        gestureEnd.current?.(false);
+                    }
+                    clearPendingDisplay();
+                    onGestureStart?.();
+                    const cursorValue = pointerValue(event);
+                    const precisionDivisor = sliderPrecisionDivisor(event);
+                    const initialValue = precisionDivisor > 1 ? normalized : clamp(cursorValue, 0, 1);
+                    dragRef.current = {
+                        pointerId: event.pointerId,
+                        lastPointerValue: cursorValue,
+                        value: initialValue,
+                        cursorBias: initialValue - cursorValue,
+                        precisionDivisor,
+                    };
+                    setInteractionValue(initialValue);
+                    event.currentTarget.setPointerCapture(event.pointerId);
+                    if (precisionDivisor === 1)
+                        onChange(initialValue);
+                }, onPointerMove: (event) => {
+                    if (dragRef.current?.pointerId !== event.pointerId)
+                        return;
+                    event.preventDefault();
+                    event.stopPropagation();
+                    updateFromPointer(event);
+                }, onPointerUp: (event) => {
+                    event.stopPropagation();
+                    if (dragRef.current?.pointerId === event.pointerId) {
+                        finishPointer(event.pointerId, false);
+                        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                            event.currentTarget.releasePointerCapture(event.pointerId);
+                        }
+                    }
+                    event.currentTarget.blur();
+                }, onPointerCancel: (event) => {
+                    event.stopPropagation();
+                    finishPointer(event.pointerId, true);
+                    event.currentTarget.blur();
+                }, onLostPointerCapture: (event) => {
+                    finishPointer(event.pointerId, true);
+                }, onClick: (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    event.currentTarget.blur();
+                }, onDoubleClick: (event) => event.stopPropagation() })] }));
+}
+const BUTTON_CLICK_FLASH_MS = 120;
+export function SpagbolControlButton({ mode, pressed, onPressedChange, onClickPulse }) {
+    const [pointerActive, setPointerActive] = useState(false);
+    const [clickFlashActive, setClickFlashActive] = useState(false);
+    const clickFlashTimeoutRef = useRef(null);
+    const previousPressedRef = useRef(false);
+    const isPressed = pressed >= 0.5;
+    const isLit = mode === 'trigger'
+        ? clickFlashActive
+        : mode === 'temporary'
+            ? pointerActive || isPressed
+            : isPressed;
+    function flashClick() {
+        if (clickFlashTimeoutRef.current !== null) {
+            window.clearTimeout(clickFlashTimeoutRef.current);
+        }
+        setClickFlashActive(true);
+        clickFlashTimeoutRef.current = window.setTimeout(() => {
+            clickFlashTimeoutRef.current = null;
+            setClickFlashActive(false);
+        }, BUTTON_CLICK_FLASH_MS);
+    }
+    useEffect(() => {
+        if (mode === 'trigger' && isPressed && !previousPressedRef.current) {
+            flashClick();
+        }
+        previousPressedRef.current = isPressed;
+    }, [isPressed, mode]);
+    useEffect(() => () => {
+        if (clickFlashTimeoutRef.current !== null) {
+            window.clearTimeout(clickFlashTimeoutRef.current);
+        }
+    }, []);
+    function releaseTemporary() {
+        setPointerActive(false);
+        if (mode === 'temporary') {
+            onPressedChange(0);
+        }
+    }
+    return (_jsx("button", { className: [
+            'spagbol-control-button nodrag nopan',
+            isLit ? 'spagbol-control-button-active' : '',
+        ].filter(Boolean).join(' '), type: "button", "aria-label": "Button value", "aria-pressed": isLit, onPointerDown: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            event.currentTarget.setPointerCapture(event.pointerId);
+            if (mode === 'temporary') {
+                setPointerActive(true);
+                onPressedChange(1);
+            }
+            else if (mode === 'trigger') {
+                flashClick();
+                onClickPulse();
+            }
+        }, onPointerUp: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+                event.currentTarget.releasePointerCapture(event.pointerId);
+            }
+            releaseTemporary();
+        }, onPointerCancel: (event) => {
+            event.stopPropagation();
+            releaseTemporary();
+        }, onLostPointerCapture: releaseTemporary, onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (mode === 'toggle') {
+                onPressedChange(isPressed ? 0 : 1);
+            }
+        }, onDoubleClick: (event) => event.stopPropagation() }));
+}
+function useModifiedWheel(onWheel) {
+    const targetRef = useRef(null);
+    const handlerRef = useRef(onWheel);
+    handlerRef.current = onWheel;
+    useEffect(() => {
+        const target = targetRef.current;
+        if (!target)
+            return;
+        const handleWheel = (event) => {
+            if (!event.shiftKey && !event.altKey)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            event.stopImmediatePropagation();
+            handlerRef.current(event, target);
+        };
+        target.addEventListener('wheel', handleWheel, { capture: true, passive: false });
+        return () => target.removeEventListener('wheel', handleWheel, { capture: true });
+    });
+    return targetRef;
+}
+function wheelAxisDeltaPixels(event, direction) {
+    const delta = direction === 'vertical' ? event.deltaY : event.deltaX;
+    if (event.deltaMode === 1)
+        return delta * 16;
+    if (event.deltaMode === 2)
+        return delta * window.innerHeight;
+    return delta;
+}
+function clamp(value, min, max) {
+    if (!Number.isFinite(value))
+        return min;
+    return Math.min(max, Math.max(min, value));
+}
+//# sourceMappingURL=Controls.js.map

package/dist/react/Controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../src/react/Controls.tsx"],"names":[],"mappings":"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","sourcesContent":["// Extracted from Teia; public component/type names and CSS classes are generic.\nimport { useEffect, useRef, useState, type PointerEvent, type RefObject } from 'react';\n\nexport interface SpagbolControlSliderProps {\n  value: number;\n  displayValue?: number;\n  direction: 'horizontal' | 'vertical';\n  onChange: (value: number) => void;\n  onGestureStart?(): void;\n  onGestureEnd?(cancel: boolean): void;\n}\n\nconst SLIDER_WHEEL_SPEED = 0.5;\n\nfunction sliderPrecisionDivisor(event: { metaKey: boolean; ctrlKey: boolean; shiftKey: boolean; altKey: boolean }): number {\n  if (event.metaKey || event.ctrlKey) return 5;\n  if (event.shiftKey && event.altKey) return 3;\n  return 1;\n}\n\nexport function SpagbolControlSlider({ value, displayValue, direction, onChange, onGestureStart, onGestureEnd }: SpagbolControlSliderProps) {\n  const [interactionValue, setInteractionValue] = useState<number | null>(null);\n  const gestureEnd = useRef(onGestureEnd); gestureEnd.current = onGestureEnd;\n  const wheelTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const releaseTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingDisplay = useRef<number | null>(null);\n  function clearPendingDisplay() {\n    if (releaseTimer.current !== null) clearTimeout(releaseTimer.current);\n    releaseTimer.current = null; pendingDisplay.current = null;\n  }\n  function releaseDisplay(requested: number, cancel: boolean) {\n    clearPendingDisplay();\n    if (cancel || Math.abs((displayValue ?? value) - requested) <= 0.001) { setInteractionValue(null); return; }\n    pendingDisplay.current = requested;\n    releaseTimer.current = setTimeout(() => { clearPendingDisplay(); setInteractionValue(null); }, 200);\n  }\n  useEffect(() => {\n    if (pendingDisplay.current !== null && Math.abs((displayValue ?? value) - pendingDisplay.current) <= 0.001) {\n      clearPendingDisplay(); setInteractionValue(null);\n    }\n  }, [value, displayValue]);\n  const dragRef = useRef<{\n    pointerId: number;\n    lastPointerValue: number;\n    value: number;\n    cursorBias: number;\n    precisionDivisor: number;\n  } | null>(null);\n  // The pointer owns the display during an edit; delayed engine observations\n  // resume when it ends. This also works in apps without audio observations.\n  const normalized = clamp(interactionValue ?? displayValue ?? value, 0, 1);\n  const wheelValueRef = useRef(normalized);\n  const lastWheelTimeRef = useRef(-Infinity);\n  const wheelTargetRef = useModifiedWheel<HTMLInputElement>((event, target) => {\n    if (dragRef.current) return;\n    if (event.timeStamp - lastWheelTimeRef.current > 160) {\n      wheelValueRef.current = normalized;\n    }\n    lastWheelTimeRef.current = event.timeStamp;\n    const travel = direction === 'vertical' ? target.clientHeight : target.clientWidth;\n    const precisionDivisor = sliderPrecisionDivisor(event);\n    const wheelDelta = wheelAxisDeltaPixels(event, direction);\n    if (wheelDelta === 0) return;\n    const nextValue = clamp(\n      wheelValueRef.current\n        + wheelDelta * (direction === 'vertical' ? 1 : -1) * SLIDER_WHEEL_SPEED\n          / Math.max(1, travel)\n          / precisionDivisor,\n      0,\n      1,\n    );\n    if (wheelTimer.current === null) { clearPendingDisplay(); onGestureStart?.(); }\n    else clearTimeout(wheelTimer.current);\n    wheelValueRef.current = nextValue;\n    setInteractionValue(nextValue);\n    onChange(nextValue);\n    wheelTimer.current = setTimeout(() => {\n      wheelTimer.current = null; releaseDisplay(wheelValueRef.current, false); gestureEnd.current?.(false);\n    }, 160);\n  });\n  function finishPointer(pointerId: number, cancel: boolean) {\n    if (dragRef.current?.pointerId !== pointerId) return;\n    const requested = dragRef.current.value;\n    dragRef.current = null; releaseDisplay(requested, cancel); gestureEnd.current?.(cancel);\n  }\n  useEffect(() => {\n    const cancel = () => {\n      const active = dragRef.current !== null || wheelTimer.current !== null;\n      dragRef.current = null;\n      if (wheelTimer.current !== null) clearTimeout(wheelTimer.current);\n      wheelTimer.current = null;\n      clearPendingDisplay();\n      if (active) { setInteractionValue(null); gestureEnd.current?.(true); }\n    };\n    window.addEventListener('blur', cancel);\n    return () => { window.removeEventListener('blur', cancel); cancel(); };\n  }, []);\n  const fillStyle = direction === 'vertical'\n    ? { height: `${normalized * 100}%` }\n    : { width: `${normalized * 100}%` };\n\n  function pointerValue(event: PointerEvent<HTMLInputElement>) {\n    const bounds = event.currentTarget.getBoundingClientRect();\n    // Keep this unbounded while dragging. Fine control uses relative travel,\n    // so clamping here would lose movement once the pointer passed an edge.\n    return direction === 'vertical'\n      ? 1 - ((event.clientY - bounds.top) / Math.max(1, bounds.height))\n      : (event.clientX - bounds.left) / Math.max(1, bounds.width);\n  }\n\n  function updateFromPointer(event: PointerEvent<HTMLInputElement>) {\n    const drag = dragRef.current;\n    if (!drag || drag.pointerId !== event.pointerId) return;\n\n    const cursorValue = pointerValue(event);\n    const precisionDivisor = sliderPrecisionDivisor(event);\n    if (precisionDivisor !== drag.precisionDivisor) {\n      // Re-anchor when the modifier changes so switching speeds never snaps to\n      // the cursor. Without fine control, the bias preserves this position.\n      drag.lastPointerValue = cursorValue;\n      drag.cursorBias = drag.value - cursorValue;\n      drag.precisionDivisor = precisionDivisor;\n      return;\n    }\n\n    const nextValue = precisionDivisor > 1\n      ? drag.value + (cursorValue - drag.lastPointerValue) / precisionDivisor\n      : cursorValue + drag.cursorBias;\n    drag.lastPointerValue = cursorValue;\n    drag.value = clamp(nextValue, 0, 1);\n    setInteractionValue(drag.value);\n    onChange(drag.value);\n  }\n\n  return (\n    <div className={[\n      'spagbol-control-slider nodrag nopan',\n      direction === 'vertical' ? 'spagbol-control-slider-vertical' : 'spagbol-control-slider-horizontal',\n    ].join(' ')}\n      onClick={(event) => event.stopPropagation()}\n    >\n      <span className=\"spagbol-control-slider-fill\" style={fillStyle} aria-hidden=\"true\" />\n      <input\n        ref={wheelTargetRef}\n        aria-label=\"Slider value\"\n        type=\"range\"\n        tabIndex={-1}\n        min={0}\n        max={1}\n        step={0.001}\n        value={normalized}\n        onChange={(event) => {\n          if (dragRef.current) return;\n          onChange(Number(event.currentTarget.value));\n          event.currentTarget.blur();\n        }}\n        onFocus={(event) => event.currentTarget.blur()}\n        onPointerDown={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          if (!event.isPrimary || event.button !== 0) return;\n          if (wheelTimer.current !== null) {\n            clearTimeout(wheelTimer.current); wheelTimer.current = null; gestureEnd.current?.(false);\n          }\n          clearPendingDisplay();\n          onGestureStart?.();\n          const cursorValue = pointerValue(event);\n          const precisionDivisor = sliderPrecisionDivisor(event);\n          const initialValue = precisionDivisor > 1 ? normalized : clamp(cursorValue, 0, 1);\n          dragRef.current = {\n            pointerId: event.pointerId,\n            lastPointerValue: cursorValue,\n            value: initialValue,\n            cursorBias: initialValue - cursorValue,\n            precisionDivisor,\n          };\n          setInteractionValue(initialValue);\n          event.currentTarget.setPointerCapture(event.pointerId);\n          if (precisionDivisor === 1) onChange(initialValue);\n        }}\n        onPointerMove={(event) => {\n          if (dragRef.current?.pointerId !== event.pointerId) return;\n          event.preventDefault();\n          event.stopPropagation();\n          updateFromPointer(event);\n        }}\n        onPointerUp={(event) => {\n          event.stopPropagation();\n          if (dragRef.current?.pointerId === event.pointerId) {\n            finishPointer(event.pointerId, false);\n            if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n              event.currentTarget.releasePointerCapture(event.pointerId);\n            }\n          }\n          event.currentTarget.blur();\n        }}\n        onPointerCancel={(event) => {\n          event.stopPropagation();\n          finishPointer(event.pointerId, true);\n          event.currentTarget.blur();\n        }}\n        onLostPointerCapture={(event) => {\n          finishPointer(event.pointerId, true);\n        }}\n        onClick={(event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          event.currentTarget.blur();\n        }}\n        onDoubleClick={(event) => event.stopPropagation()}\n      />\n    </div>\n  );\n}\n\nexport type SpagbolControlButtonMode = 'toggle' | 'trigger' | 'temporary';\nconst BUTTON_CLICK_FLASH_MS = 120;\n\nexport interface SpagbolControlButtonProps {\n  mode: SpagbolControlButtonMode;\n  pressed: number;\n  onPressedChange: (value: number) => void;\n  onClickPulse: () => void;\n}\n\nexport function SpagbolControlButton({ mode, pressed, onPressedChange, onClickPulse }: SpagbolControlButtonProps) {\n  const [pointerActive, setPointerActive] = useState(false);\n  const [clickFlashActive, setClickFlashActive] = useState(false);\n  const clickFlashTimeoutRef = useRef<number | null>(null);\n  const previousPressedRef = useRef(false);\n  const isPressed = pressed >= 0.5;\n  const isLit = mode === 'trigger'\n    ? clickFlashActive\n    : mode === 'temporary'\n      ? pointerActive || isPressed\n      : isPressed;\n\n  function flashClick() {\n    if (clickFlashTimeoutRef.current !== null) {\n      window.clearTimeout(clickFlashTimeoutRef.current);\n    }\n    setClickFlashActive(true);\n    clickFlashTimeoutRef.current = window.setTimeout(() => {\n      clickFlashTimeoutRef.current = null;\n      setClickFlashActive(false);\n    }, BUTTON_CLICK_FLASH_MS);\n  }\n\n  useEffect(() => {\n    if (mode === 'trigger' && isPressed && !previousPressedRef.current) {\n      flashClick();\n    }\n    previousPressedRef.current = isPressed;\n  }, [isPressed, mode]);\n\n  useEffect(() => () => {\n    if (clickFlashTimeoutRef.current !== null) {\n      window.clearTimeout(clickFlashTimeoutRef.current);\n    }\n  }, []);\n\n  function releaseTemporary() {\n    setPointerActive(false);\n    if (mode === 'temporary') {\n      onPressedChange(0);\n    }\n  }\n\n  return (\n    <button\n      className={[\n        'spagbol-control-button nodrag nopan',\n        isLit ? 'spagbol-control-button-active' : '',\n      ].filter(Boolean).join(' ')}\n      type=\"button\"\n      aria-label=\"Button value\"\n      aria-pressed={isLit}\n      onPointerDown={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        event.currentTarget.setPointerCapture(event.pointerId);\n        if (mode === 'temporary') {\n          setPointerActive(true);\n          onPressedChange(1);\n        } else if (mode === 'trigger') {\n          flashClick();\n          onClickPulse();\n        }\n      }}\n      onPointerUp={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n          event.currentTarget.releasePointerCapture(event.pointerId);\n        }\n        releaseTemporary();\n      }}\n      onPointerCancel={(event) => {\n        event.stopPropagation();\n        releaseTemporary();\n      }}\n      onLostPointerCapture={releaseTemporary}\n      onClick={(event) => {\n        event.preventDefault();\n        event.stopPropagation();\n        if (mode === 'toggle') {\n          onPressedChange(isPressed ? 0 : 1);\n        }\n      }}\n      onDoubleClick={(event) => event.stopPropagation()}\n    />\n  );\n}\n\nfunction useModifiedWheel<T extends HTMLElement>(\n  onWheel: (event: WheelEvent, target: T) => void,\n): RefObject<T | null> {\n  const targetRef = useRef<T | null>(null);\n  const handlerRef = useRef(onWheel);\n  handlerRef.current = onWheel;\n\n  useEffect(() => {\n    const target = targetRef.current;\n    if (!target) return;\n\n    const handleWheel = (event: WheelEvent) => {\n      if (!event.shiftKey && !event.altKey) return;\n      event.preventDefault();\n      event.stopPropagation();\n      event.stopImmediatePropagation();\n      handlerRef.current(event, target);\n    };\n\n    target.addEventListener('wheel', handleWheel, { capture: true, passive: false });\n    return () => target.removeEventListener('wheel', handleWheel, { capture: true });\n  });\n\n  return targetRef;\n}\n\nfunction wheelAxisDeltaPixels(\n  event: Pick<WheelEvent, 'deltaX' | 'deltaY' | 'deltaMode'>,\n  direction: 'horizontal' | 'vertical',\n): number {\n  const delta = direction === 'vertical' ? event.deltaY : event.deltaX;\n  if (event.deltaMode === 1) return delta * 16;\n  if (event.deltaMode === 2) return delta * window.innerHeight;\n  return delta;\n}\n\nfunction clamp(value: number, min: number, max: number): number {\n  if (!Number.isFinite(value)) return min;\n  return Math.min(max, Math.max(min, value));\n}\n\n"]}

package/dist/react/SpagbolCanvas.d.ts

@@ -0,0 +1,38 @@
+import { type Viewport, type ReactFlowInstance } from "@xyflow/react";
+import { type ReactNode } from "react";
+import { type Diagnostic, type GraphEditor, type GraphLink } from "../core/index.js";
+import { type SpagbolCanvasSlots, type SpagbolCanvasFeatures, type SpagbolTheme, type SpagbolNodeView } from "./context.js";
+import { type SpagbolCanvasControlsOptions } from "./SpagbolCanvasControls.js";
+export interface SpagbolLinkPresentation {
+    feedback?: boolean;
+    control?: boolean;
+    virtual?: boolean;
+}
+export interface SpagbolCanvasProps extends SpagbolCanvasSlots {
+    editor: GraphEditor;
+    views?: Readonly<Record<string, SpagbolNodeView>>;
+    /** Limit creation/type conversion without discarding existing unsupported nodes. */
+    nodeKinds?: readonly string[];
+    /** Domain conversion, e.g. capturing an asset before replacing a DSP node. */
+    onChangeNodeKind?(id: string, kind: string): void | Promise<void>;
+    features?: SpagbolCanvasFeatures;
+    diagnostics?: readonly Diagnostic[];
+    linkPresentation?: Readonly<Record<string, SpagbolLinkPresentation>>;
+    /** Read-only domain relationships, never stored, copied or selected. */
+    virtualLinks?: readonly GraphLink[];
+    className?: string;
+    style?: SpagbolTheme;
+    defaultViewport?: Viewport;
+    onViewportChange?(viewport: Viewport): void;
+    onInit?(instance: ReactFlowInstance): void;
+    /** Teia-style content bounds by default; optional margin in screen proportions. */
+    panBounds?: false | {
+        emptyScreenRatio?: number;
+    };
+    onRenderTarget?(key: string, element: HTMLElement | null): void;
+    toolbar?: boolean | ReactNode;
+    controls?: SpagbolCanvasControlsOptions | false;
+    ariaLabel?: string;
+}
+export declare function SpagbolCanvas(props: SpagbolCanvasProps): import("react").JSX.Element;
+//# sourceMappingURL=SpagbolCanvas.d.ts.map

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

@@ -0,0 +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"}