entangle-ui 0.9.0 → 0.11.0

package/dist/esm/components/editor/Minimap/useMinimapGestures.js

@@ -0,0 +1,299 @@
+"use client";
+import { useRef, useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '@vanilla-extract/css';
+import './../../../assets/src/theme/darkTheme.css.ts.vanilla-BHZ3ecRn.css';
+import 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { minimapToWorld, getViewportRectOnMinimap, getViewportCenterWorld } from './minimapCoords.js';
+import { hitTestItems } from './minimapHitTest.js';
+
+const CLICK_THRESHOLD_PX = 3;
+/** Hover line-picking tolerance, in minimap CSS px. Translated to world units per gesture. */
+const LINE_HIT_TOLERANCE_MINIMAP_PX = 4;
+function getLocalPointerPosition(e, container) {
+    if (!container)
+        return { x: 0, y: 0 };
+    const rect = container.getBoundingClientRect();
+    return { x: e.clientX - rect.left, y: e.clientY - rect.top };
+}
+function pointInRect(p, r) {
+    return (p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height);
+}
+/**
+ * Pointer + keyboard gesture machine for `<Minimap>`. All live props and
+ * the `onNavigate` callback are read through `useLatest` refs so the
+ * returned handlers are stable for the lifetime of the component —
+ * pointer event listeners never re-attach on prop changes.
+ *
+ * Hover state and drag state are written directly to the `MinimapStore`,
+ * not local React state, so slice subscribers (`useMinimapHover`,
+ * `useMinimapDragState`) re-render independently and don't see the rest
+ * of the world thrash.
+ */
+function useMinimapGestures(opts) {
+    const { containerRef, store } = opts;
+    // Live refs — handlers always see the latest values without re-binding.
+    const worldBoundsRef = useLatest(opts.worldBounds);
+    const transformRef = useLatest(opts.transform);
+    const viewportSizeRef = useLatest(opts.viewportSize);
+    const minimapSizeRef = useLatest(opts.minimapSize);
+    const itemsRef = useLatest(opts.items);
+    const interactionsRef = useLatest(opts.interactions);
+    const keyboardPanStepRef = useLatest(opts.keyboardPanStep);
+    const disabledRef = useLatest(opts.disabled);
+    const onNavigateRef = useLatest(opts.onNavigate);
+    const stateRef = useRef(null);
+    const emit = useCallback((info) => {
+        onNavigateRef.current?.(info);
+    }, [onNavigateRef]);
+    const updateHover = useCallback((screen) => {
+        if (!screen) {
+            store.setHover({ hoverWorldPoint: null, hoveredItemId: null });
+            return;
+        }
+        const worldBounds = worldBoundsRef.current;
+        const minimapSize = minimapSizeRef.current;
+        const items = itemsRef.current;
+        const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);
+        const scaleX = worldBounds.width > 0 ? minimapSize.width / worldBounds.width : 1;
+        const scaleY = worldBounds.height > 0 ? minimapSize.height / worldBounds.height : 1;
+        const scale = Math.min(scaleX, scaleY) || 1;
+        const tolerance = LINE_HIT_TOLERANCE_MINIMAP_PX / scale;
+        store.setHover({
+            hoverWorldPoint: worldPoint,
+            hoveredItemId: hitTestItems(worldPoint, items, tolerance),
+        });
+    }, [store, worldBoundsRef, minimapSizeRef, itemsRef]);
+    const handlePointerDown = useCallback((e) => {
+        if (disabledRef.current || e.button !== 0)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const screen = getLocalPointerPosition(e, container);
+        const worldBounds = worldBoundsRef.current;
+        const minimapSize = minimapSizeRef.current;
+        const transform = transformRef.current;
+        const viewportSize = viewportSizeRef.current;
+        const interactions = interactionsRef.current;
+        const viewportRect = getViewportRectOnMinimap(transform, viewportSize, worldBounds, minimapSize);
+        const inside = pointInRect(screen, viewportRect);
+        let mode = null;
+        let grabOffsetWorld;
+        if (inside && interactions.dragViewportRect) {
+            mode = 'drag-rect';
+            const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);
+            const center = getViewportCenterWorld(transform, viewportSize);
+            grabOffsetWorld = {
+                x: pointerWorld.x - center.x,
+                y: pointerWorld.y - center.y,
+            };
+        }
+        else if (!inside && interactions.click) {
+            // Tap-vs-drag is resolved on pointermove / pointerup.
+            // dragFromEmpty (if enabled) takes over after the click threshold.
+            mode = 'pending-click';
+        }
+        else if (!inside && interactions.dragFromEmpty) {
+            mode = 'drag-pan';
+        }
+        else {
+            return;
+        }
+        e.preventDefault();
+        container.setPointerCapture(e.pointerId);
+        stateRef.current = {
+            pointerId: e.pointerId,
+            mode,
+            startScreen: screen,
+            grabOffsetWorld,
+        };
+        if (mode === 'drag-pan') {
+            const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);
+            store.setIsDragging(true);
+            emit({ worldPoint, phase: 'drag-start' });
+        }
+        else if (mode === 'drag-rect') {
+            store.setIsDragging(true);
+            const center = getViewportCenterWorld(transform, viewportSize);
+            emit({ worldPoint: center, phase: 'drag-start' });
+        }
+    }, [
+        containerRef,
+        disabledRef,
+        interactionsRef,
+        transformRef,
+        viewportSizeRef,
+        worldBoundsRef,
+        minimapSizeRef,
+        store,
+        emit,
+    ]);
+    const handlePointerMove = useCallback((e) => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const screen = getLocalPointerPosition(e, container);
+        // Always update hover state — independent of gesture capture.
+        updateHover(screen);
+        const state = stateRef.current;
+        if (state?.pointerId !== e.pointerId)
+            return;
+        const worldBounds = worldBoundsRef.current;
+        const minimapSize = minimapSizeRef.current;
+        const interactions = interactionsRef.current;
+        const dx = screen.x - state.startScreen.x;
+        const dy = screen.y - state.startScreen.y;
+        const moved = Math.hypot(dx, dy) >= CLICK_THRESHOLD_PX;
+        if (state.mode === 'pending-click') {
+            if (!moved)
+                return;
+            if (interactions.dragFromEmpty) {
+                state.mode = 'drag-pan';
+                store.setIsDragging(true);
+                const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);
+                emit({ worldPoint, phase: 'drag-start' });
+            }
+            else {
+                // Threshold exceeded but drag-from-empty is disabled — cancel the click.
+                state.mode = 'cancelled';
+            }
+            return;
+        }
+        if (state.mode === 'cancelled')
+            return;
+        if (state.mode === 'drag-pan') {
+            const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);
+            emit({ worldPoint, phase: 'drag' });
+            return;
+        }
+        // Only 'drag-rect' remains after the early returns above.
+        const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);
+        const offset = state.grabOffsetWorld ?? { x: 0, y: 0 };
+        emit({
+            worldPoint: {
+                x: pointerWorld.x - offset.x,
+                y: pointerWorld.y - offset.y,
+            },
+            phase: 'drag',
+        });
+    }, [
+        containerRef,
+        worldBoundsRef,
+        minimapSizeRef,
+        interactionsRef,
+        store,
+        emit,
+        updateHover,
+    ]);
+    const handlePointerLeave = useCallback(() => {
+        if (stateRef.current)
+            return; // keep hover during drag (pointer capture)
+        updateHover(null);
+    }, [updateHover]);
+    const endGesture = useCallback((e, cancelled) => {
+        const state = stateRef.current;
+        if (state?.pointerId !== e.pointerId)
+            return;
+        const container = containerRef.current;
+        if (container?.hasPointerCapture(e.pointerId)) {
+            container.releasePointerCapture(e.pointerId);
+        }
+        if (!cancelled) {
+            const worldBounds = worldBoundsRef.current;
+            const minimapSize = minimapSizeRef.current;
+            const screen = getLocalPointerPosition(e, container);
+            if (state.mode === 'pending-click') {
+                const worldPoint = minimapToWorld(state.startScreen, worldBounds, minimapSize);
+                emit({ worldPoint, phase: 'click' });
+            }
+            else if (state.mode === 'drag-pan') {
+                const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);
+                emit({ worldPoint, phase: 'drag-end' });
+            }
+            else if (state.mode === 'drag-rect') {
+                const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);
+                const offset = state.grabOffsetWorld ?? { x: 0, y: 0 };
+                emit({
+                    worldPoint: {
+                        x: pointerWorld.x - offset.x,
+                        y: pointerWorld.y - offset.y,
+                    },
+                    phase: 'drag-end',
+                });
+            }
+        }
+        stateRef.current = null;
+        store.setIsDragging(false);
+    }, [containerRef, worldBoundsRef, minimapSizeRef, store, emit]);
+    const handlePointerUp = useCallback((e) => {
+        endGesture(e, false);
+    }, [endGesture]);
+    const handlePointerCancel = useCallback((e) => {
+        endGesture(e, true);
+    }, [endGesture]);
+    const handleKeyDown = useCallback((e) => {
+        if (disabledRef.current)
+            return;
+        let dx = 0;
+        let dy = 0;
+        switch (e.key) {
+            case 'ArrowLeft':
+                dx = -1;
+                break;
+            case 'ArrowRight':
+                dx = 1;
+                break;
+            case 'ArrowUp':
+                dy = -1;
+                break;
+            case 'ArrowDown':
+                dy = 1;
+                break;
+            default:
+                return;
+        }
+        e.preventDefault();
+        const transform = transformRef.current;
+        const viewportSize = viewportSizeRef.current;
+        const keyboardPanStep = keyboardPanStepRef.current;
+        const zoom = transform.zoom === 0 ? 1 : transform.zoom;
+        const worldViewW = viewportSize.width / zoom;
+        const worldViewH = viewportSize.height / zoom;
+        const stepMul = e.shiftKey ? 5 : 1;
+        const stepW = worldViewW * keyboardPanStep * stepMul;
+        const stepH = worldViewH * keyboardPanStep * stepMul;
+        const currentCenter = getViewportCenterWorld(transform, viewportSize);
+        emit({
+            worldPoint: {
+                x: currentCenter.x + dx * stepW,
+                y: currentCenter.y + dy * stepH,
+            },
+            phase: 'click',
+        });
+    }, [disabledRef, transformRef, viewportSizeRef, keyboardPanStepRef, emit]);
+    const handlers = useMemo(() => ({
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onPointerLeave: handlePointerLeave,
+        onKeyDown: handleKeyDown,
+    }), [
+        handlePointerDown,
+        handlePointerMove,
+        handlePointerUp,
+        handlePointerCancel,
+        handlePointerLeave,
+        handleKeyDown,
+    ]);
+    return { handlers };
+}
+
+export { useMinimapGestures };
+//# sourceMappingURL=useMinimapGestures.js.map

package/dist/esm/components/editor/Minimap/useMinimapGestures.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMinimapGestures.js","sources":["src/components/editor/Minimap/useMinimapGestures.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport {\n  getViewportCenterWorld,\n  getViewportRectOnMinimap,\n  minimapToWorld,\n} from './minimapCoords';\nimport { hitTestItems } from './minimapHitTest';\n\nimport type {\n  MinimapInteractionConfig,\n  MinimapItem,\n  MinimapNavigateInfo,\n} from './Minimap.types';\nimport type { MinimapStore } from './MinimapStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type {\n  ViewportSize,\n  ViewportTransform,\n  WorldRect,\n} from '@/components/primitives/viewport';\nimport type React from 'react';\n\nconst CLICK_THRESHOLD_PX = 3;\n/** Hover line-picking tolerance, in minimap CSS px. Translated to world units per gesture. */\nconst LINE_HIT_TOLERANCE_MINIMAP_PX = 4;\n\ninterface UseMinimapGesturesOptions {\n  containerRef: React.RefObject<HTMLDivElement | null>;\n  store: MinimapStore;\n  worldBounds: WorldRect;\n  transform: ViewportTransform;\n  viewportSize: ViewportSize;\n  minimapSize: ViewportSize;\n  items: ReadonlyArray<MinimapItem>;\n  interactions: Required<MinimapInteractionConfig>;\n  keyboardPanStep: number;\n  disabled: boolean;\n  onNavigate: ((info: MinimapNavigateInfo) => void) | undefined;\n}\n\ntype GestureMode = 'pending-click' | 'drag-rect' | 'drag-pan' | 'cancelled';\n\ninterface PointerState {\n  pointerId: number;\n  mode: GestureMode;\n  startScreen: Point2D;\n  /** Drag-rect only: world-space offset from viewport center at drag-start. */\n  grabOffsetWorld?: Point2D;\n}\n\ninterface UseMinimapGesturesReturn {\n  handlers: {\n    onPointerDown: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerMove: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerUp: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerCancel: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onPointerLeave: (e: React.PointerEvent<HTMLDivElement>) => void;\n    onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;\n  };\n}\n\nfunction getLocalPointerPosition(\n  e: React.PointerEvent<HTMLDivElement>,\n  container: HTMLDivElement | null\n): Point2D {\n  if (!container) return { x: 0, y: 0 };\n  const rect = container.getBoundingClientRect();\n  return { x: e.clientX - rect.left, y: e.clientY - rect.top };\n}\n\nfunction pointInRect(\n  p: Point2D,\n  r: { x: number; y: number; width: number; height: number }\n): boolean {\n  return (\n    p.x >= r.x && p.x <= r.x + r.width && p.y >= r.y && p.y <= r.y + r.height\n  );\n}\n\n/**\n * Pointer + keyboard gesture machine for `<Minimap>`. All live props and\n * the `onNavigate` callback are read through `useLatest` refs so the\n * returned handlers are stable for the lifetime of the component —\n * pointer event listeners never re-attach on prop changes.\n *\n * Hover state and drag state are written directly to the `MinimapStore`,\n * not local React state, so slice subscribers (`useMinimapHover`,\n * `useMinimapDragState`) re-render independently and don't see the rest\n * of the world thrash.\n */\nexport function useMinimapGestures(\n  opts: UseMinimapGesturesOptions\n): UseMinimapGesturesReturn {\n  const { containerRef, store } = opts;\n\n  // Live refs — handlers always see the latest values without re-binding.\n  const worldBoundsRef = useLatest(opts.worldBounds);\n  const transformRef = useLatest(opts.transform);\n  const viewportSizeRef = useLatest(opts.viewportSize);\n  const minimapSizeRef = useLatest(opts.minimapSize);\n  const itemsRef = useLatest(opts.items);\n  const interactionsRef = useLatest(opts.interactions);\n  const keyboardPanStepRef = useLatest(opts.keyboardPanStep);\n  const disabledRef = useLatest(opts.disabled);\n  const onNavigateRef = useLatest(opts.onNavigate);\n\n  const stateRef = useRef<PointerState | null>(null);\n\n  const emit = useCallback(\n    (info: MinimapNavigateInfo): void => {\n      onNavigateRef.current?.(info);\n    },\n    [onNavigateRef]\n  );\n\n  const updateHover = useCallback(\n    (screen: Point2D | null): void => {\n      if (!screen) {\n        store.setHover({ hoverWorldPoint: null, hoveredItemId: null });\n        return;\n      }\n      const worldBounds = worldBoundsRef.current;\n      const minimapSize = minimapSizeRef.current;\n      const items = itemsRef.current;\n      const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);\n      const scaleX =\n        worldBounds.width > 0 ? minimapSize.width / worldBounds.width : 1;\n      const scaleY =\n        worldBounds.height > 0 ? minimapSize.height / worldBounds.height : 1;\n      const scale = Math.min(scaleX, scaleY) || 1;\n      const tolerance = LINE_HIT_TOLERANCE_MINIMAP_PX / scale;\n      store.setHover({\n        hoverWorldPoint: worldPoint,\n        hoveredItemId: hitTestItems(worldPoint, items, tolerance),\n      });\n    },\n    [store, worldBoundsRef, minimapSizeRef, itemsRef]\n  );\n\n  const handlePointerDown = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      if (disabledRef.current || e.button !== 0) return;\n      const container = containerRef.current;\n      if (!container) return;\n\n      const screen = getLocalPointerPosition(e, container);\n      const worldBounds = worldBoundsRef.current;\n      const minimapSize = minimapSizeRef.current;\n      const transform = transformRef.current;\n      const viewportSize = viewportSizeRef.current;\n      const interactions = interactionsRef.current;\n\n      const viewportRect = getViewportRectOnMinimap(\n        transform,\n        viewportSize,\n        worldBounds,\n        minimapSize\n      );\n      const inside = pointInRect(screen, viewportRect);\n\n      let mode: GestureMode | null = null;\n      let grabOffsetWorld: Point2D | undefined;\n\n      if (inside && interactions.dragViewportRect) {\n        mode = 'drag-rect';\n        const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);\n        const center = getViewportCenterWorld(transform, viewportSize);\n        grabOffsetWorld = {\n          x: pointerWorld.x - center.x,\n          y: pointerWorld.y - center.y,\n        };\n      } else if (!inside && interactions.click) {\n        // Tap-vs-drag is resolved on pointermove / pointerup.\n        // dragFromEmpty (if enabled) takes over after the click threshold.\n        mode = 'pending-click';\n      } else if (!inside && interactions.dragFromEmpty) {\n        mode = 'drag-pan';\n      } else {\n        return;\n      }\n\n      e.preventDefault();\n      container.setPointerCapture(e.pointerId);\n\n      stateRef.current = {\n        pointerId: e.pointerId,\n        mode,\n        startScreen: screen,\n        grabOffsetWorld,\n      };\n\n      if (mode === 'drag-pan') {\n        const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);\n        store.setIsDragging(true);\n        emit({ worldPoint, phase: 'drag-start' });\n      } else if (mode === 'drag-rect') {\n        store.setIsDragging(true);\n        const center = getViewportCenterWorld(transform, viewportSize);\n        emit({ worldPoint: center, phase: 'drag-start' });\n      }\n    },\n    [\n      containerRef,\n      disabledRef,\n      interactionsRef,\n      transformRef,\n      viewportSizeRef,\n      worldBoundsRef,\n      minimapSizeRef,\n      store,\n      emit,\n    ]\n  );\n\n  const handlePointerMove = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      const container = containerRef.current;\n      if (!container) return;\n      const screen = getLocalPointerPosition(e, container);\n      // Always update hover state — independent of gesture capture.\n      updateHover(screen);\n\n      const state = stateRef.current;\n      if (state?.pointerId !== e.pointerId) return;\n\n      const worldBounds = worldBoundsRef.current;\n      const minimapSize = minimapSizeRef.current;\n      const interactions = interactionsRef.current;\n\n      const dx = screen.x - state.startScreen.x;\n      const dy = screen.y - state.startScreen.y;\n      const moved = Math.hypot(dx, dy) >= CLICK_THRESHOLD_PX;\n\n      if (state.mode === 'pending-click') {\n        if (!moved) return;\n        if (interactions.dragFromEmpty) {\n          state.mode = 'drag-pan';\n          store.setIsDragging(true);\n          const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);\n          emit({ worldPoint, phase: 'drag-start' });\n        } else {\n          // Threshold exceeded but drag-from-empty is disabled — cancel the click.\n          state.mode = 'cancelled';\n        }\n        return;\n      }\n\n      if (state.mode === 'cancelled') return;\n\n      if (state.mode === 'drag-pan') {\n        const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);\n        emit({ worldPoint, phase: 'drag' });\n        return;\n      }\n\n      // Only 'drag-rect' remains after the early returns above.\n      const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);\n      const offset = state.grabOffsetWorld ?? { x: 0, y: 0 };\n      emit({\n        worldPoint: {\n          x: pointerWorld.x - offset.x,\n          y: pointerWorld.y - offset.y,\n        },\n        phase: 'drag',\n      });\n    },\n    [\n      containerRef,\n      worldBoundsRef,\n      minimapSizeRef,\n      interactionsRef,\n      store,\n      emit,\n      updateHover,\n    ]\n  );\n\n  const handlePointerLeave = useCallback((): void => {\n    if (stateRef.current) return; // keep hover during drag (pointer capture)\n    updateHover(null);\n  }, [updateHover]);\n\n  const endGesture = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>, cancelled: boolean): void => {\n      const state = stateRef.current;\n      if (state?.pointerId !== e.pointerId) return;\n      const container = containerRef.current;\n      if (container?.hasPointerCapture(e.pointerId)) {\n        container.releasePointerCapture(e.pointerId);\n      }\n\n      if (!cancelled) {\n        const worldBounds = worldBoundsRef.current;\n        const minimapSize = minimapSizeRef.current;\n        const screen = getLocalPointerPosition(e, container);\n        if (state.mode === 'pending-click') {\n          const worldPoint = minimapToWorld(\n            state.startScreen,\n            worldBounds,\n            minimapSize\n          );\n          emit({ worldPoint, phase: 'click' });\n        } else if (state.mode === 'drag-pan') {\n          const worldPoint = minimapToWorld(screen, worldBounds, minimapSize);\n          emit({ worldPoint, phase: 'drag-end' });\n        } else if (state.mode === 'drag-rect') {\n          const pointerWorld = minimapToWorld(screen, worldBounds, minimapSize);\n          const offset = state.grabOffsetWorld ?? { x: 0, y: 0 };\n          emit({\n            worldPoint: {\n              x: pointerWorld.x - offset.x,\n              y: pointerWorld.y - offset.y,\n            },\n            phase: 'drag-end',\n          });\n        }\n      }\n\n      stateRef.current = null;\n      store.setIsDragging(false);\n    },\n    [containerRef, worldBoundsRef, minimapSizeRef, store, emit]\n  );\n\n  const handlePointerUp = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      endGesture(e, false);\n    },\n    [endGesture]\n  );\n\n  const handlePointerCancel = useCallback(\n    (e: React.PointerEvent<HTMLDivElement>): void => {\n      endGesture(e, true);\n    },\n    [endGesture]\n  );\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLDivElement>): void => {\n      if (disabledRef.current) return;\n      let dx = 0;\n      let dy = 0;\n      switch (e.key) {\n        case 'ArrowLeft':\n          dx = -1;\n          break;\n        case 'ArrowRight':\n          dx = 1;\n          break;\n        case 'ArrowUp':\n          dy = -1;\n          break;\n        case 'ArrowDown':\n          dy = 1;\n          break;\n        default:\n          return;\n      }\n      e.preventDefault();\n\n      const transform = transformRef.current;\n      const viewportSize = viewportSizeRef.current;\n      const keyboardPanStep = keyboardPanStepRef.current;\n\n      const zoom = transform.zoom === 0 ? 1 : transform.zoom;\n      const worldViewW = viewportSize.width / zoom;\n      const worldViewH = viewportSize.height / zoom;\n      const stepMul = e.shiftKey ? 5 : 1;\n      const stepW = worldViewW * keyboardPanStep * stepMul;\n      const stepH = worldViewH * keyboardPanStep * stepMul;\n\n      const currentCenter = getViewportCenterWorld(transform, viewportSize);\n      emit({\n        worldPoint: {\n          x: currentCenter.x + dx * stepW,\n          y: currentCenter.y + dy * stepH,\n        },\n        phase: 'click',\n      });\n    },\n    [disabledRef, transformRef, viewportSizeRef, keyboardPanStepRef, emit]\n  );\n\n  const handlers = useMemo(\n    () => ({\n      onPointerDown: handlePointerDown,\n      onPointerMove: handlePointerMove,\n      onPointerUp: handlePointerUp,\n      onPointerCancel: handlePointerCancel,\n      onPointerLeave: handlePointerLeave,\n      onKeyDown: handleKeyDown,\n    }),\n    [\n      handlePointerDown,\n      handlePointerMove,\n      handlePointerUp,\n      handlePointerCancel,\n      handlePointerLeave,\n      handleKeyDown,\n    ]\n  );\n\n  return { handlers };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA2BA;AACA;AACA;AAqCA;AAIE;;AACA;;AAEF;AAEA;AAIE;AAGF;AAEA;;;;;;;;;;AAUG;AACG;AAGJ;;;;;;;;;;;AAaA;AAEA;AAEI;AACF;AAIF;;AAGM;;;AAGF;AACA;AACA;;;;AAMA;AACA;;AAEE;;AAED;;AAKL;;;AAGI;AACA;;;AAGA;AACA;AACA;AACA;AACA;AAEA;;;AASA;AAEA;;;;AAIE;AACE;AACA;;;AAEG;;;;;AAIA;;;;;;;AAOP;;;;AAKE;;;AAIF;;AAEE;;;AAEK;AACL;;;;AAIJ;;;;;;;;;;AAWC;AAGH;AAEI;AACA;;;;;AAKA;AACA;;AAEA;AACA;AACA;;;AAIA;AAEA;AACE;;AACA;AACE;AACA;;;;;;AAKA;;;;AAKJ;;AAEA;;;;;;;AAQA;AACA;AACE;AACE;AACA;AACD;AACD;AACD;AACH;;;;;;;;AASC;AAGH;;AACwB;;AAExB;;AAII;AACA;;AACA;;AAEE;;;AAIA;AACA;;AAEA;AACE;;;AAMK;;;;AAGA;;AAEL;AACA;AACE;AACE;AACA;AACD;AACD;AACD;;;AAIL;AACA;AACF;AAIF;AAEI;AACF;AAIF;AAEI;AACF;AAIF;;;;;AAKI;AACE;;;AAGA;;;AAGA;;;AAGA;;;AAGA;;;;AAKF;AACA;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;;AAGA;AACE;AACE;AACA;AACD;AACD;AACD;AACH;AAIF;AAEI;AACA;AACA;AACA;AACA;AACA;AACD;;;;;;;AAQA;;AAIL;;"}

package/dist/esm/components/editor/NodeGraph/NodeGraph.css.js

@@ -0,0 +1,36 @@
+import './../../../assets/src/components/editor/NodeGraph/NodeGraph.css.ts.vanilla-ClF4YZvl.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var defaultNodeBodyRecipe = createRuntimeFn({defaultClassName:'NodeGraph_defaultNodeBodyRecipe__vfkbcbc',variantClassNames:{selected:{true:'NodeGraph_defaultNodeBodyRecipe_selected_true__vfkbcbd',false:'NodeGraph_defaultNodeBodyRecipe_selected_false__vfkbcbe'}},defaultVariants:{selected:false},compoundVariants:[]});
+var groupColorSwatchStyle = 'NodeGraph_groupColorSwatchStyle__vfkbcb14';
+var groupLabelBarStyle = 'NodeGraph_groupLabelBarStyle__vfkbcb11';
+var groupLabelInputStyle = 'NodeGraph_groupLabelInputStyle__vfkbcb13';
+var groupLabelStyle = 'NodeGraph_groupLabelStyle__vfkbcb12';
+var groupOverlayRecipe = createRuntimeFn({defaultClassName:'NodeGraph_groupOverlayRecipe__vfkbcbt',variantClassNames:{selected:{true:'NodeGraph_groupOverlayRecipe_selected_true__vfkbcbu',false:'NodeGraph_groupOverlayRecipe_selected_false__vfkbcbv'},dragging:{true:'NodeGraph_groupOverlayRecipe_dragging_true__vfkbcbw',false:'NodeGraph_groupOverlayRecipe_dragging_false__vfkbcbx'},blocked:{true:'NodeGraph_groupOverlayRecipe_blocked_true__vfkbcby',false:'NodeGraph_groupOverlayRecipe_blocked_false__vfkbcbz'}},defaultVariants:{selected:false,dragging:false,blocked:false},compoundVariants:[]});
+var groupResizeHandleStyle = 'NodeGraph_groupResizeHandleStyle__vfkbcb10';
+var minimapSlotStyle = 'NodeGraph_minimapSlotStyle__vfkbcb15';
+var nodeBodyRecipe = createRuntimeFn({defaultClassName:'NodeGraph_nodeBodyRecipe__vfkbcb1c',variantClassNames:{variant:{panel:'NodeGraph_nodeBodyRecipe_variant_panel__vfkbcb1d',flat:'NodeGraph_nodeBodyRecipe_variant_flat__vfkbcb1e',minimal:'NodeGraph_nodeBodyRecipe_variant_minimal__vfkbcb1f'},selected:{true:'NodeGraph_nodeBodyRecipe_selected_true__vfkbcb1g',false:'NodeGraph_nodeBodyRecipe_selected_false__vfkbcb1h'},hovered:{true:'NodeGraph_nodeBodyRecipe_hovered_true__vfkbcb1i',false:'NodeGraph_nodeBodyRecipe_hovered_false__vfkbcb1j'}},defaultVariants:{variant:'panel',selected:false,hovered:false},compoundVariants:[]});
+var nodeGraphRootStyle = 'NodeGraph_nodeGraphRootStyle__vfkbcb2';
+var nodeGraphToolbarRecipe = createRuntimeFn({defaultClassName:'NodeGraph_nodeGraphToolbarRecipe__vfkbcb16',variantClassNames:{placement:{'top-left':'NodeGraph_nodeGraphToolbarRecipe_placement_top-left__vfkbcb17','top-right':'NodeGraph_nodeGraphToolbarRecipe_placement_top-right__vfkbcb18','bottom-left':'NodeGraph_nodeGraphToolbarRecipe_placement_bottom-left__vfkbcb19','bottom-right':'NodeGraph_nodeGraphToolbarRecipe_placement_bottom-right__vfkbcb1a'}},defaultVariants:{placement:'top-left'},compoundVariants:[]});
+var nodeGraphToolbarSeparatorStyle = 'NodeGraph_nodeGraphToolbarSeparatorStyle__vfkbcb1b';
+var nodeHeaderIconStyle = 'NodeGraph_nodeHeaderIconStyle__vfkbcb1l';
+var nodeHeaderStyle = 'NodeGraph_nodeHeaderStyle__vfkbcb1k';
+var nodeHeaderSubtitleStyle = 'NodeGraph_nodeHeaderSubtitleStyle__vfkbcb1o';
+var nodeHeaderTextStyle = 'NodeGraph_nodeHeaderTextStyle__vfkbcb1m';
+var nodeHeaderTitleStyle = 'NodeGraph_nodeHeaderTitleStyle__vfkbcb1n';
+var nodeHeightVar = 'var(--nodeHeightVar__vfkbcb1)';
+var nodeSectionChevronRecipe = createRuntimeFn({defaultClassName:'NodeGraph_nodeSectionChevronRecipe__vfkbcb1z',variantClassNames:{collapsed:{true:'NodeGraph_nodeSectionChevronRecipe_collapsed_true__vfkbcb20',false:'NodeGraph_nodeSectionChevronRecipe_collapsed_false__vfkbcb21'}},defaultVariants:{collapsed:false},compoundVariants:[]});
+var nodeSectionContentStyle = 'NodeGraph_nodeSectionContentStyle__vfkbcb23';
+var nodeSectionHeaderStyle = 'NodeGraph_nodeSectionHeaderStyle__vfkbcb1y';
+var nodeSectionStyle = 'NodeGraph_nodeSectionStyle__vfkbcb1x';
+var nodeSectionTitleStyle = 'NodeGraph_nodeSectionTitleStyle__vfkbcb22';
+var nodeWidthVar = 'var(--nodeWidthVar__vfkbcb0)';
+var nodeWrapperRecipe = createRuntimeFn({defaultClassName:'NodeGraph_nodeWrapperRecipe__vfkbcb3',variantClassNames:{autoSize:{true:'NodeGraph_nodeWrapperRecipe_autoSize_true__vfkbcb4',false:'NodeGraph_nodeWrapperRecipe_autoSize_false__vfkbcb5'},draggable:{true:'NodeGraph_nodeWrapperRecipe_draggable_true__vfkbcb6',false:'NodeGraph_nodeWrapperRecipe_draggable_false__vfkbcb7'},dragging:{true:'NodeGraph_nodeWrapperRecipe_dragging_true__vfkbcb8',false:'NodeGraph_nodeWrapperRecipe_dragging_false__vfkbcb9'},selectable:{true:'NodeGraph_nodeWrapperRecipe_selectable_true__vfkbcba',false:'NodeGraph_nodeWrapperRecipe_selectable_false__vfkbcbb'}},defaultVariants:{autoSize:true,draggable:true,selectable:true,dragging:false},compoundVariants:[]});
+var pinLabelStyle = 'NodeGraph_pinLabelStyle__vfkbcb1w';
+var pinListColumnStyle = 'NodeGraph_pinListColumnStyle__vfkbcb1q';
+var pinListStyle = 'NodeGraph_pinListStyle__vfkbcb1p';
+var pinRowRecipe = createRuntimeFn({defaultClassName:'NodeGraph_pinRowRecipe__vfkbcb1r',variantClassNames:{side:{left:'NodeGraph_pinRowRecipe_side_left__vfkbcb1s',right:'NodeGraph_pinRowRecipe_side_right__vfkbcb1t',top:'NodeGraph_pinRowRecipe_side_top__vfkbcb1u',bottom:'NodeGraph_pinRowRecipe_side_bottom__vfkbcb1v'}},defaultVariants:{},compoundVariants:[]});
+var portSlotRecipe = createRuntimeFn({defaultClassName:'NodeGraph_portSlotRecipe__vfkbcbf',variantClassNames:{side:{left:'NodeGraph_portSlotRecipe_side_left__vfkbcbg',right:'NodeGraph_portSlotRecipe_side_right__vfkbcbh',top:'NodeGraph_portSlotRecipe_side_top__vfkbcbi',bottom:'NodeGraph_portSlotRecipe_side_bottom__vfkbcbj'},custom:{false:'NodeGraph_portSlotRecipe_custom_false__vfkbcbk',true:'NodeGraph_portSlotRecipe_custom_true__vfkbcbl'},source:{true:'NodeGraph_portSlotRecipe_source_true__vfkbcbm',false:'NodeGraph_portSlotRecipe_source_false__vfkbcbn'},candidate:{true:'NodeGraph_portSlotRecipe_candidate_true__vfkbcbo',false:'NodeGraph_portSlotRecipe_candidate_false__vfkbcbp'},invalid:{true:'NodeGraph_portSlotRecipe_invalid_true__vfkbcbq',false:'NodeGraph_portSlotRecipe_invalid_false__vfkbcbr'}},defaultVariants:{source:false,candidate:false,invalid:false,custom:false},compoundVariants:[]});
+
+export { defaultNodeBodyRecipe, groupColorSwatchStyle, groupLabelBarStyle, groupLabelInputStyle, groupLabelStyle, groupOverlayRecipe, groupResizeHandleStyle, minimapSlotStyle, nodeBodyRecipe, nodeGraphRootStyle, nodeGraphToolbarRecipe, nodeGraphToolbarSeparatorStyle, nodeHeaderIconStyle, nodeHeaderStyle, nodeHeaderSubtitleStyle, nodeHeaderTextStyle, nodeHeaderTitleStyle, nodeHeightVar, nodeSectionChevronRecipe, nodeSectionContentStyle, nodeSectionHeaderStyle, nodeSectionStyle, nodeSectionTitleStyle, nodeWidthVar, nodeWrapperRecipe, pinLabelStyle, pinListColumnStyle, pinListStyle, pinRowRecipe, portSlotRecipe };
+//# sourceMappingURL=NodeGraph.css.js.map

package/dist/esm/components/editor/NodeGraph/NodeGraph.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NodeGraph.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}