entangle-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,164 @@
+"use client";
+import { useCallback } 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';
+
+const NUDGE_STEP_DEFAULT = 1;
+const NUDGE_STEP_SHIFT = 10;
+/**
+ * Keyboard interaction model for `<NodeGraph>`:
+ *
+ * | Keys                | Action                                       |
+ * | ------------------- | -------------------------------------------- |
+ * | Arrow keys          | Nudge selected nodes by 1 grid step (or 1 unit) |
+ * | Shift + Arrow keys  | Nudge by 10× the base step                    |
+ * | Delete / Backspace  | Emit `onDelete(selection)` (non-empty)       |
+ * | Enter               | Emit `onActivate(node)` when exactly one node selected |
+ * | Cmd/Ctrl + A        | Select all nodes                              |
+ * | Escape              | Clear selection (or cancel active gesture)    |
+ */
+function useNodeGraphKeyboard(options) {
+    const { store, emitNodesChange, emitSelectionChange, onDelete, onActivate, snapToGrid, disabled, } = options;
+    const emitNodesChangeRef = useLatest(emitNodesChange);
+    const emitSelectionChangeRef = useLatest(emitSelectionChange);
+    const onDeleteRef = useLatest(onDelete);
+    const onActivateRef = useLatest(onActivate);
+    const snapToGridRef = useLatest(snapToGrid);
+    const disabledRef = useLatest(disabled);
+    const nudgeSelected = useCallback((dx, dy) => {
+        const data = store.getData();
+        const selection = store.getSelection();
+        if (selection.nodes.length === 0)
+            return false;
+        const selectedIds = new Set(selection.nodes);
+        const next = data.nodes.map(node => {
+            if (!selectedIds.has(node.id))
+                return node;
+            return {
+                ...node,
+                position: { x: node.position.x + dx, y: node.position.y + dy },
+            };
+        });
+        emitNodesChangeRef.current(next);
+        return true;
+    }, [store, emitNodesChangeRef]);
+    const onKeyDown = useCallback((event) => {
+        if (disabledRef.current)
+            return;
+        // Don't steal input focus — if the event originated in an editable
+        // element inside a node body, leave it alone.
+        const target = event.target;
+        if (target &&
+            (target.isContentEditable ||
+                target.tagName === 'INPUT' ||
+                target.tagName === 'TEXTAREA' ||
+                target.tagName === 'SELECT')) {
+            return;
+        }
+        const grid = snapToGridRef.current;
+        const baseStep = grid === false || grid <= 0 ? NUDGE_STEP_DEFAULT : grid;
+        const step = event.shiftKey ? baseStep * NUDGE_STEP_SHIFT : baseStep;
+        // Dispatch on `event.code` so character keys are matched by physical
+        // location (e.g. `KeyA` for Ctrl+A), not by the printed character
+        // — which would otherwise differ on non-QWERTY / non-Latin layouts.
+        // For special keys (`ArrowUp`, `Delete`, `Backspace`, `Enter`,
+        // `Escape`) `event.code` equals `event.key`, so existing cases keep
+        // working unchanged.
+        switch (event.code) {
+            case 'ArrowUp':
+                if (nudgeSelected(0, -step))
+                    event.preventDefault();
+                return;
+            case 'ArrowDown':
+                if (nudgeSelected(0, step))
+                    event.preventDefault();
+                return;
+            case 'ArrowLeft':
+                if (nudgeSelected(-step, 0))
+                    event.preventDefault();
+                return;
+            case 'ArrowRight':
+                if (nudgeSelected(step, 0))
+                    event.preventDefault();
+                return;
+            case 'Delete':
+            case 'Backspace': {
+                const selection = store.getSelection();
+                if (selection.nodes.length === 0 &&
+                    selection.edges.length === 0 &&
+                    selection.groups.length === 0) {
+                    return;
+                }
+                onDeleteRef.current?.(selection);
+                event.preventDefault();
+                return;
+            }
+            case 'Enter': {
+                const selection = store.getSelection();
+                if (selection.nodes.length !== 1)
+                    return;
+                const id = selection.nodes[0];
+                const node = id != null ? store.getNodeById(id) : undefined;
+                if (node) {
+                    onActivateRef.current?.(node);
+                    event.preventDefault();
+                }
+                return;
+            }
+            // `event.code` is layout-independent — matches the physical "A"
+            // key regardless of the user's keyboard layout (Polish, Cyrillic,
+            // Dvorak, etc., would otherwise fire a different `event.key`).
+            case 'KeyA': {
+                if (!(event.metaKey || event.ctrlKey))
+                    return;
+                const data = store.getData();
+                emitSelectionChangeRef.current({
+                    nodes: data.nodes.map(n => n.id),
+                    edges: [],
+                    groups: [],
+                });
+                event.preventDefault();
+                return;
+            }
+            case 'Escape': {
+                // Cancel an in-flight connection first; otherwise clear selection.
+                const interaction = store.getInteraction();
+                if (interaction.kind !== 'idle') {
+                    store.setInteraction({ kind: 'idle' });
+                    event.preventDefault();
+                    return;
+                }
+                const selection = store.getSelection();
+                if (selection.nodes.length === 0 &&
+                    selection.edges.length === 0 &&
+                    selection.groups.length === 0) {
+                    return;
+                }
+                emitSelectionChangeRef.current({ nodes: [], edges: [], groups: [] });
+                event.preventDefault();
+                return;
+            }
+            default:
+                return;
+        }
+    }, [
+        store,
+        nudgeSelected,
+        onDeleteRef,
+        onActivateRef,
+        emitSelectionChangeRef,
+        snapToGridRef,
+        disabledRef,
+    ]);
+    return { onKeyDown };
+}
+
+export { useNodeGraphKeyboard };
+//# sourceMappingURL=useNodeGraphKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphKeyboard.js","sources":["src/components/editor/NodeGraph/useNodeGraphKeyboard.ts"],"sourcesContent":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport type { NodeGraphNode, NodeGraphSelection } from './NodeGraph.types';\nimport type { NodeGraphStore } from './NodeGraphStore';\nimport type React from 'react';\n\ninterface UseNodeGraphKeyboardOptions {\n  store: NodeGraphStore;\n  emitNodesChange: (next: NodeGraphNode[]) => void;\n  emitSelectionChange: (next: NodeGraphSelection) => void;\n  onDelete?: (selection: NodeGraphSelection) => void;\n  onActivate?: (node: NodeGraphNode) => void;\n  snapToGrid: number | false;\n  /** When true, all keyboard handling is skipped. */\n  disabled?: boolean;\n}\n\ninterface UseNodeGraphKeyboardReturn {\n  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n}\n\nconst NUDGE_STEP_DEFAULT = 1;\nconst NUDGE_STEP_SHIFT = 10;\n\n/**\n * Keyboard interaction model for `<NodeGraph>`:\n *\n * | Keys                | Action                                       |\n * | ------------------- | -------------------------------------------- |\n * | Arrow keys          | Nudge selected nodes by 1 grid step (or 1 unit) |\n * | Shift + Arrow keys  | Nudge by 10× the base step                    |\n * | Delete / Backspace  | Emit `onDelete(selection)` (non-empty)       |\n * | Enter               | Emit `onActivate(node)` when exactly one node selected |\n * | Cmd/Ctrl + A        | Select all nodes                              |\n * | Escape              | Clear selection (or cancel active gesture)    |\n */\nexport function useNodeGraphKeyboard(\n  options: UseNodeGraphKeyboardOptions\n): UseNodeGraphKeyboardReturn {\n  const {\n    store,\n    emitNodesChange,\n    emitSelectionChange,\n    onDelete,\n    onActivate,\n    snapToGrid,\n    disabled,\n  } = options;\n\n  const emitNodesChangeRef = useLatest(emitNodesChange);\n  const emitSelectionChangeRef = useLatest(emitSelectionChange);\n  const onDeleteRef = useLatest(onDelete);\n  const onActivateRef = useLatest(onActivate);\n  const snapToGridRef = useLatest(snapToGrid);\n  const disabledRef = useLatest(disabled);\n\n  const nudgeSelected = useCallback(\n    (dx: number, dy: number): boolean => {\n      const data = store.getData();\n      const selection = store.getSelection();\n      if (selection.nodes.length === 0) return false;\n      const selectedIds = new Set(selection.nodes);\n      const next = data.nodes.map(node => {\n        if (!selectedIds.has(node.id)) return node;\n        return {\n          ...node,\n          position: { x: node.position.x + dx, y: node.position.y + dy },\n        };\n      });\n      emitNodesChangeRef.current(next);\n      return true;\n    },\n    [store, emitNodesChangeRef]\n  );\n\n  const onKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>): void => {\n      if (disabledRef.current) return;\n      // Don't steal input focus — if the event originated in an editable\n      // element inside a node body, leave it alone.\n      const target = event.target as HTMLElement | null;\n      if (\n        target &&\n        (target.isContentEditable ||\n          target.tagName === 'INPUT' ||\n          target.tagName === 'TEXTAREA' ||\n          target.tagName === 'SELECT')\n      ) {\n        return;\n      }\n\n      const grid = snapToGridRef.current;\n      const baseStep = grid === false || grid <= 0 ? NUDGE_STEP_DEFAULT : grid;\n      const step = event.shiftKey ? baseStep * NUDGE_STEP_SHIFT : baseStep;\n\n      // Dispatch on `event.code` so character keys are matched by physical\n      // location (e.g. `KeyA` for Ctrl+A), not by the printed character\n      // — which would otherwise differ on non-QWERTY / non-Latin layouts.\n      // For special keys (`ArrowUp`, `Delete`, `Backspace`, `Enter`,\n      // `Escape`) `event.code` equals `event.key`, so existing cases keep\n      // working unchanged.\n      switch (event.code) {\n        case 'ArrowUp':\n          if (nudgeSelected(0, -step)) event.preventDefault();\n          return;\n        case 'ArrowDown':\n          if (nudgeSelected(0, step)) event.preventDefault();\n          return;\n        case 'ArrowLeft':\n          if (nudgeSelected(-step, 0)) event.preventDefault();\n          return;\n        case 'ArrowRight':\n          if (nudgeSelected(step, 0)) event.preventDefault();\n          return;\n        case 'Delete':\n        case 'Backspace': {\n          const selection = store.getSelection();\n          if (\n            selection.nodes.length === 0 &&\n            selection.edges.length === 0 &&\n            selection.groups.length === 0\n          ) {\n            return;\n          }\n          onDeleteRef.current?.(selection);\n          event.preventDefault();\n          return;\n        }\n        case 'Enter': {\n          const selection = store.getSelection();\n          if (selection.nodes.length !== 1) return;\n          const id = selection.nodes[0];\n          const node = id != null ? store.getNodeById(id) : undefined;\n          if (node) {\n            onActivateRef.current?.(node);\n            event.preventDefault();\n          }\n          return;\n        }\n        // `event.code` is layout-independent — matches the physical \"A\"\n        // key regardless of the user's keyboard layout (Polish, Cyrillic,\n        // Dvorak, etc., would otherwise fire a different `event.key`).\n        case 'KeyA': {\n          if (!(event.metaKey || event.ctrlKey)) return;\n          const data = store.getData();\n          emitSelectionChangeRef.current({\n            nodes: data.nodes.map(n => n.id),\n            edges: [],\n            groups: [],\n          });\n          event.preventDefault();\n          return;\n        }\n        case 'Escape': {\n          // Cancel an in-flight connection first; otherwise clear selection.\n          const interaction = store.getInteraction();\n          if (interaction.kind !== 'idle') {\n            store.setInteraction({ kind: 'idle' });\n            event.preventDefault();\n            return;\n          }\n          const selection = store.getSelection();\n          if (\n            selection.nodes.length === 0 &&\n            selection.edges.length === 0 &&\n            selection.groups.length === 0\n          ) {\n            return;\n          }\n          emitSelectionChangeRef.current({ nodes: [], edges: [], groups: [] });\n          event.preventDefault();\n          return;\n        }\n        default:\n          return;\n      }\n    },\n    [\n      store,\n      nudgeSelected,\n      onDeleteRef,\n      onActivateRef,\n      emitSelectionChangeRef,\n      snapToGridRef,\n      disabledRef,\n    ]\n  );\n\n  return { onKeyDown };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAyBA;AACA;AAEA;;;;;;;;;;;AAWG;AACG;AAGJ;AAUA;AACA;AACA;AACA;AACA;AACA;;AAII;AACA;AACA;AAAkC;;;;AAGD;;AAE7B;;;AAGJ;AACA;AACA;AACF;AAIF;;;;;AAKI;AACA;;;;AAKI;;;AAKJ;AACA;AACA;;;;;;;AAQA;AACE;AACE;;;AAEF;AACE;;;AAEF;AACE;;;AAEF;AACE;;;AAEF;;AAEE;AACA;AAEE;AACA;;;AAIF;;;;;AAKA;AACA;;;AAEA;;AAEE;;;;;;;;;;;AAUF;;AAEE;AACA;AACA;AACD;;;;;;AAMD;AACA;;;;;AAKA;AACA;AAEE;AACA;;;AAIF;;;;AAIF;;;AAGJ;;;;;;;;AASC;;AAIL;;"}

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

@@ -0,0 +1,234 @@
+"use client";
+import { useRef, useCallback, useEffect } from 'react';
+import '../../primitives/viewport/Viewport.js';
+import '../../primitives/viewport/ViewportLayer.js';
+import '../../primitives/viewport/ViewportWorld.js';
+import '../../primitives/viewport/ViewportOverlay.js';
+import { screenToWorld } from '../../primitives/viewport/viewportCoords.js';
+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 { toggleSelected, snapDelta } from './nodeGraphMath.js';
+import { useDragGesture } from './useDragGesture.js';
+
+const DRAG_START_THRESHOLD_PX = 3;
+/**
+ * Pointer-driven drag + click-select controller for node bodies. Owns the
+ * gesture lifecycle (`pointerdown` → document `pointermove` → `pointerup`
+ * or `pointercancel`), commits position updates through the
+ * controlled-state emitter on success, and falls back to plain click
+ * selection when the pointer moves less than the drag threshold.
+ *
+ * Document listeners are attached only while a gesture is in flight, so
+ * pointermove cost is zero between drags.
+ */
+function useNodeGraphNodeDrag(options) {
+    const { store, getTransform, localScreenPoint, snapToGrid, disabled, emitNodesChange, emitSelectionChange, } = options;
+    const snapToGridRef = useLatest(snapToGrid);
+    const disabledRef = useLatest(disabled);
+    const emitNodesChangeRef = useLatest(emitNodesChange);
+    const emitSelectionChangeRef = useLatest(emitSelectionChange);
+    const dragRef = useRef(null);
+    const gesture = useDragGesture();
+    // ── rAF-throttled interaction commits ──
+    //
+    // Native pointermove fires at the display's refresh rate (up to several
+    // hundred Hz on high-refresh monitors) — without throttling, every event
+    // triggers a full notification cycle through every NodeGraphStore
+    // subscriber (one per node + one per edge label). Buffering the latest
+    // delta in a ref and flushing once per frame caps the commit rate at
+    // requestAnimationFrame, which already matches the refresh rate the
+    // canvas layers are drawing at.
+    const pendingMoveRef = useRef(null);
+    const rafRef = useRef(0);
+    const commitPending = useCallback(() => {
+        const pending = pendingMoveRef.current;
+        if (!pending)
+            return;
+        pendingMoveRef.current = null;
+        store.setInteraction({
+            kind: 'drag-nodes',
+            nodeIds: pending.ids,
+            startWorld: pending.startWorld,
+            delta: pending.delta,
+        });
+    }, [store]);
+    const cancelRaf = useCallback(() => {
+        if (rafRef.current !== 0) {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = 0;
+        }
+    }, []);
+    /** Synchronous flush — cancels any pending rAF and commits immediately. */
+    const flushPending = useCallback(() => {
+        cancelRaf();
+        commitPending();
+    }, [cancelRaf, commitPending]);
+    // Cancel any in-flight rAF on unmount so a teardown mid-drag doesn't fire
+    // a commit into a torn-down store.
+    useEffect(() => {
+        return () => {
+            cancelRaf();
+            pendingMoveRef.current = null;
+        };
+    }, [cancelRaf]);
+    const onNodeBodyPointerDown = useCallback((event, node) => {
+        if (event.button !== 0)
+            return; // only primary button
+        // Always stop propagation for clicks on a node body so the Viewport
+        // beneath us doesn't fire a marquee. This applies even when disabled
+        // or non-interactive — the click is consumed by the node hit target.
+        event.stopPropagation();
+        if (disabledRef.current)
+            return;
+        if (node.selectable === false && node.draggable === false)
+            return;
+        const additive = event.shiftKey || event.metaKey || event.ctrlKey;
+        const currentSelection = store.getSelection();
+        const alreadySelected = currentSelection.nodes.includes(node.id);
+        // Decide which node ids should drag together. If clicked node is in
+        // the selection, drag all selected nodes; otherwise just this one.
+        let dragIds;
+        if (alreadySelected) {
+            dragIds = currentSelection.nodes;
+        }
+        else if (!additive) {
+            // Pre-emptively select just this node so the drag matches what the
+            // user sees as "selected" mid-gesture. The actual selection emit
+            // happens in pointerup if no drag occurred.
+            dragIds = [node.id];
+        }
+        else {
+            dragIds = [...currentSelection.nodes, node.id];
+        }
+        const positions = new Map();
+        for (const n of store.getData().nodes) {
+            if (dragIds.includes(n.id)) {
+                positions.set(n.id, { ...n.position });
+            }
+        }
+        const startScreen = localScreenPoint(event.clientX, event.clientY);
+        const startWorld = screenToWorld(startScreen, getTransform());
+        const pointerId = event.pointerId;
+        const handleMove = (e) => {
+            const session = dragRef.current;
+            if (session?.pointerId !== pointerId)
+                return;
+            const current = localScreenPoint(e.clientX, e.clientY);
+            const dx = current.x - session.startScreen.x;
+            const dy = current.y - session.startScreen.y;
+            if (!session.didDrag) {
+                if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX)
+                    return;
+                const clicked = store.getNodeById(session.clickedNodeId);
+                if (clicked?.draggable === false) {
+                    // Not draggable — promote to a no-op drag flag so pointerup falls
+                    // through to click selection logic.
+                    session.didDrag = false;
+                    return;
+                }
+                session.didDrag = true;
+            }
+            const transform = getTransform();
+            const worldDelta = {
+                x: dx / transform.zoom,
+                y: dy / transform.zoom,
+            };
+            const snapped = snapDelta(worldDelta, snapToGridRef.current);
+            const ids = new Set(session.nodeStartPositions.keys());
+            // Buffer the latest delta; the rAF callback below picks the most
+            // recent value when the frame fires, so any intermediate moves
+            // between frames are coalesced into one commit.
+            pendingMoveRef.current = {
+                ids,
+                startWorld: session.startWorld,
+                delta: snapped,
+            };
+            if (rafRef.current !== 0)
+                return;
+            rafRef.current = requestAnimationFrame(() => {
+                rafRef.current = 0;
+                commitPending();
+            });
+        };
+        gesture.begin(event, {
+            onMove: handleMove,
+            onCancel: () => {
+                cancelRaf();
+                pendingMoveRef.current = null;
+                dragRef.current = null;
+                store.setInteraction({ kind: 'idle' });
+            },
+        });
+        dragRef.current = {
+            pointerId,
+            clickedNodeId: node.id,
+            startScreen,
+            startWorld,
+            selectionAtStart: currentSelection,
+            nodeStartPositions: positions,
+            additive,
+            didDrag: false,
+        };
+    }, [
+        store,
+        getTransform,
+        localScreenPoint,
+        snapToGridRef,
+        disabledRef,
+        gesture,
+        cancelRaf,
+        commitPending,
+    ]);
+    const onNodeBodyPointerUp = useCallback((event, node) => {
+        const session = dragRef.current;
+        if (session?.pointerId !== event.pointerId)
+            return;
+        event.stopPropagation();
+        gesture.finish(event);
+        // Drain any deferred pointermove update before reading from the store —
+        // otherwise the commit would use the previous frame's delta and drop
+        // the final sub-frame movement before pointerup.
+        flushPending();
+        if (session.didDrag) {
+            // Commit positions from store's interaction delta.
+            const interaction = store.getInteraction();
+            if (interaction.kind === 'drag-nodes') {
+                const delta = interaction.delta;
+                const nextNodes = store.getData().nodes.map(n => {
+                    const start = session.nodeStartPositions.get(n.id);
+                    if (!start)
+                        return n;
+                    return {
+                        ...n,
+                        position: { x: start.x + delta.x, y: start.y + delta.y },
+                    };
+                });
+                emitNodesChangeRef.current(nextNodes);
+            }
+            store.setInteraction({ kind: 'idle' });
+        }
+        else {
+            // Plain click — handle selection semantics.
+            if (node.selectable !== false) {
+                const current = session.selectionAtStart;
+                emitSelectionChangeRef.current({
+                    nodes: toggleSelected(current.nodes, node.id, session.additive),
+                    edges: session.additive ? current.edges : [],
+                    groups: session.additive ? current.groups : [],
+                });
+            }
+        }
+        dragRef.current = null;
+    }, [store, emitNodesChangeRef, emitSelectionChangeRef, gesture, flushPending]);
+    return { onNodeBodyPointerDown, onNodeBodyPointerUp };
+}
+
+export { useNodeGraphNodeDrag };
+//# sourceMappingURL=useNodeGraphNodeDrag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useNodeGraphNodeDrag.js","sources":["src/components/editor/NodeGraph/useNodeGraphNodeDrag.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { screenToWorld as worldFromScreen } from '@/components/primitives/viewport';\nimport { useLatest } from '@/hooks';\n\nimport { snapDelta, toggleSelected } from './nodeGraphMath';\nimport { useDragGesture } from './useDragGesture';\n\nimport type { NodeGraphNode, NodeGraphSelection } from './NodeGraph.types';\nimport type { NodeGraphStore } from './NodeGraphStore';\nimport type { Point2D } from '@/components/primitives/canvas/canvas.types';\nimport type { ViewportTransform } from '@/components/primitives/viewport';\nimport type React from 'react';\n\nconst DRAG_START_THRESHOLD_PX = 3;\n\n/** Pending drag state buffered between pointermove and the next rAF flush. */\ninterface PendingDragMove {\n  ids: ReadonlySet<string>;\n  startWorld: Point2D;\n  delta: Point2D;\n}\n\ninterface UseNodeGraphNodeDragOptions {\n  store: NodeGraphStore;\n  getTransform: () => ViewportTransform;\n  localScreenPoint: (clientX: number, clientY: number) => Point2D;\n  snapToGrid: number | false;\n  disabled?: boolean;\n  emitNodesChange: (next: NodeGraphNode[]) => void;\n  emitSelectionChange: (next: NodeGraphSelection) => void;\n}\n\ninterface UseNodeGraphNodeDragReturn {\n  onNodeBodyPointerDown: (\n    event: React.PointerEvent<HTMLDivElement>,\n    node: NodeGraphNode\n  ) => void;\n  onNodeBodyPointerUp: (\n    event: React.PointerEvent<HTMLDivElement>,\n    node: NodeGraphNode\n  ) => void;\n}\n\ninterface DragSession {\n  pointerId: number;\n  clickedNodeId: string;\n  startScreen: Point2D;\n  startWorld: Point2D;\n  /** Snapshot of selection at gesture start (for shift-toggle reset). */\n  selectionAtStart: NodeGraphSelection;\n  /** Snapshot of node positions at gesture start. */\n  nodeStartPositions: Map<string, Point2D>;\n  additive: boolean;\n  didDrag: boolean;\n}\n\n/**\n * Pointer-driven drag + click-select controller for node bodies. Owns the\n * gesture lifecycle (`pointerdown` → document `pointermove` → `pointerup`\n * or `pointercancel`), commits position updates through the\n * controlled-state emitter on success, and falls back to plain click\n * selection when the pointer moves less than the drag threshold.\n *\n * Document listeners are attached only while a gesture is in flight, so\n * pointermove cost is zero between drags.\n */\nexport function useNodeGraphNodeDrag(\n  options: UseNodeGraphNodeDragOptions\n): UseNodeGraphNodeDragReturn {\n  const {\n    store,\n    getTransform,\n    localScreenPoint,\n    snapToGrid,\n    disabled,\n    emitNodesChange,\n    emitSelectionChange,\n  } = options;\n\n  const snapToGridRef = useLatest(snapToGrid);\n  const disabledRef = useLatest(disabled);\n  const emitNodesChangeRef = useLatest(emitNodesChange);\n  const emitSelectionChangeRef = useLatest(emitSelectionChange);\n\n  const dragRef = useRef<DragSession | null>(null);\n  const gesture = useDragGesture();\n\n  // ── rAF-throttled interaction commits ──\n  //\n  // Native pointermove fires at the display's refresh rate (up to several\n  // hundred Hz on high-refresh monitors) — without throttling, every event\n  // triggers a full notification cycle through every NodeGraphStore\n  // subscriber (one per node + one per edge label). Buffering the latest\n  // delta in a ref and flushing once per frame caps the commit rate at\n  // requestAnimationFrame, which already matches the refresh rate the\n  // canvas layers are drawing at.\n  const pendingMoveRef = useRef<PendingDragMove | null>(null);\n  const rafRef = useRef<number>(0);\n\n  const commitPending = useCallback((): void => {\n    const pending = pendingMoveRef.current;\n    if (!pending) return;\n    pendingMoveRef.current = null;\n    store.setInteraction({\n      kind: 'drag-nodes',\n      nodeIds: pending.ids,\n      startWorld: pending.startWorld,\n      delta: pending.delta,\n    });\n  }, [store]);\n\n  const cancelRaf = useCallback((): void => {\n    if (rafRef.current !== 0) {\n      cancelAnimationFrame(rafRef.current);\n      rafRef.current = 0;\n    }\n  }, []);\n\n  /** Synchronous flush — cancels any pending rAF and commits immediately. */\n  const flushPending = useCallback((): void => {\n    cancelRaf();\n    commitPending();\n  }, [cancelRaf, commitPending]);\n\n  // Cancel any in-flight rAF on unmount so a teardown mid-drag doesn't fire\n  // a commit into a torn-down store.\n  useEffect(() => {\n    return () => {\n      cancelRaf();\n      pendingMoveRef.current = null;\n    };\n  }, [cancelRaf]);\n\n  const onNodeBodyPointerDown = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, node: NodeGraphNode): void => {\n      if (event.button !== 0) return; // only primary button\n      // Always stop propagation for clicks on a node body so the Viewport\n      // beneath us doesn't fire a marquee. This applies even when disabled\n      // or non-interactive — the click is consumed by the node hit target.\n      event.stopPropagation();\n      if (disabledRef.current) return;\n      if (node.selectable === false && node.draggable === false) return;\n\n      const additive = event.shiftKey || event.metaKey || event.ctrlKey;\n      const currentSelection = store.getSelection();\n      const alreadySelected = currentSelection.nodes.includes(node.id);\n\n      // Decide which node ids should drag together. If clicked node is in\n      // the selection, drag all selected nodes; otherwise just this one.\n      let dragIds: string[];\n      if (alreadySelected) {\n        dragIds = currentSelection.nodes;\n      } else if (!additive) {\n        // Pre-emptively select just this node so the drag matches what the\n        // user sees as \"selected\" mid-gesture. The actual selection emit\n        // happens in pointerup if no drag occurred.\n        dragIds = [node.id];\n      } else {\n        dragIds = [...currentSelection.nodes, node.id];\n      }\n\n      const positions = new Map<string, Point2D>();\n      for (const n of store.getData().nodes) {\n        if (dragIds.includes(n.id)) {\n          positions.set(n.id, { ...n.position });\n        }\n      }\n\n      const startScreen = localScreenPoint(event.clientX, event.clientY);\n      const startWorld = worldFromScreen(startScreen, getTransform());\n      const pointerId = event.pointerId;\n\n      const handleMove = (e: PointerEvent): void => {\n        const session = dragRef.current;\n        if (session?.pointerId !== pointerId) return;\n        const current = localScreenPoint(e.clientX, e.clientY);\n        const dx = current.x - session.startScreen.x;\n        const dy = current.y - session.startScreen.y;\n        if (!session.didDrag) {\n          if (Math.hypot(dx, dy) < DRAG_START_THRESHOLD_PX) return;\n          const clicked = store.getNodeById(session.clickedNodeId);\n          if (clicked?.draggable === false) {\n            // Not draggable — promote to a no-op drag flag so pointerup falls\n            // through to click selection logic.\n            session.didDrag = false;\n            return;\n          }\n          session.didDrag = true;\n        }\n        const transform = getTransform();\n        const worldDelta = {\n          x: dx / transform.zoom,\n          y: dy / transform.zoom,\n        };\n        const snapped = snapDelta(worldDelta, snapToGridRef.current);\n        const ids: ReadonlySet<string> = new Set(\n          session.nodeStartPositions.keys()\n        );\n        // Buffer the latest delta; the rAF callback below picks the most\n        // recent value when the frame fires, so any intermediate moves\n        // between frames are coalesced into one commit.\n        pendingMoveRef.current = {\n          ids,\n          startWorld: session.startWorld,\n          delta: snapped,\n        };\n        if (rafRef.current !== 0) return;\n        rafRef.current = requestAnimationFrame(() => {\n          rafRef.current = 0;\n          commitPending();\n        });\n      };\n\n      gesture.begin(event, {\n        onMove: handleMove,\n        onCancel: () => {\n          cancelRaf();\n          pendingMoveRef.current = null;\n          dragRef.current = null;\n          store.setInteraction({ kind: 'idle' });\n        },\n      });\n\n      dragRef.current = {\n        pointerId,\n        clickedNodeId: node.id,\n        startScreen,\n        startWorld,\n        selectionAtStart: currentSelection,\n        nodeStartPositions: positions,\n        additive,\n        didDrag: false,\n      };\n    },\n    [\n      store,\n      getTransform,\n      localScreenPoint,\n      snapToGridRef,\n      disabledRef,\n      gesture,\n      cancelRaf,\n      commitPending,\n    ]\n  );\n\n  const onNodeBodyPointerUp = useCallback(\n    (event: React.PointerEvent<HTMLDivElement>, node: NodeGraphNode): void => {\n      const session = dragRef.current;\n      if (session?.pointerId !== event.pointerId) return;\n      event.stopPropagation();\n      gesture.finish(event);\n\n      // Drain any deferred pointermove update before reading from the store —\n      // otherwise the commit would use the previous frame's delta and drop\n      // the final sub-frame movement before pointerup.\n      flushPending();\n\n      if (session.didDrag) {\n        // Commit positions from store's interaction delta.\n        const interaction = store.getInteraction();\n        if (interaction.kind === 'drag-nodes') {\n          const delta = interaction.delta;\n          const nextNodes = store.getData().nodes.map(n => {\n            const start = session.nodeStartPositions.get(n.id);\n            if (!start) return n;\n            return {\n              ...n,\n              position: { x: start.x + delta.x, y: start.y + delta.y },\n            };\n          });\n          emitNodesChangeRef.current(nextNodes);\n        }\n        store.setInteraction({ kind: 'idle' });\n      } else {\n        // Plain click — handle selection semantics.\n        if (node.selectable !== false) {\n          const current = session.selectionAtStart;\n          emitSelectionChangeRef.current({\n            nodes: toggleSelected(current.nodes, node.id, session.additive),\n            edges: session.additive ? current.edges : [],\n            groups: session.additive ? current.groups : [],\n          });\n        }\n      }\n\n      dragRef.current = null;\n    },\n    [store, emitNodesChangeRef, emitSelectionChangeRef, gesture, flushPending]\n  );\n\n  return { onNodeBodyPointerDown, onNodeBodyPointerUp };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAgBA;AA2CA;;;;;;;;;AASG;AACG;AAGJ;AAUA;AACA;AACA;AACA;AAEA;AACA;;;;;;;;;;AAWA;AACA;AAEA;AACE;AACA;;AACA;;AAEE;;;;AAID;AACH;AAEA;AACE;AACE;AACA;;;;AAKJ;AACE;AACA;AACF;;;;AAKE;AACE;AACA;AACF;AACF;;AAII;AAAwB;;;;;;;;;AAQxB;AACA;AACA;;;AAIA;;AAEE;;;;;;AAKA;;;;;AAKF;;;AAGI;;;AAIJ;;AAEA;AAEA;AACE;AACA;;AACA;;;AAGA;;;;AAGE;;;AAGE;;;AAGF;;AAEF;AACA;AACE;AACA;;;AAGF;;;;;;;AASE;;AAEF;;AACA;AACE;AACA;AACF;AACF;AAEA;AACE;;AAEE;AACA;AACA;;;AAGH;;;;;;AAOC;AACA;;AAEA;;AAEJ;;;;;;;;;AAUC;;AAKC;AACA;;;AAEA;;;;AAKA;AAEA;;AAEE;AACA;AACE;AACA;AACE;AACA;AAAY;;AAEV;;;AAGJ;AACA;;;;;;AAKF;AACE;;AAEE;AACA;AACA;AACD;;;AAIL;AACF;AAIF;AACF;;"}

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

@@ -0,0 +1,49 @@
+"use client";
+import { useRef, useCallback, useSyncExternalStore } from 'react';
+
+/**
+ * Subscribe to a slice of an external store, returning a memoized selection.
+ *
+ * Avoids the re-render storm caused by calling `useSyncExternalStore` with a
+ * raw slice getter when the slice mutates at high frequency (e.g. drag
+ * deltas at 60–120 Hz) but each subscriber only cares about a per-id payload.
+ *
+ * The selector is invoked only when the underlying source reference changes;
+ * if the freshly computed selection compares equal to the previous one via
+ * `isEqual`, the previous selection reference is preserved so downstream
+ * `Object.is` checks (including React's reconciler) treat it as unchanged.
+ *
+ * Inspired by `use-sync-external-store/with-selector`, kept local to avoid
+ * pulling in an extra peer dependency for a single call site.
+ */
+function useStoreSlice(subscribe, getSnapshot, selector, isEqual = Object.is) {
+    const cacheRef = useRef(null);
+    const selectorRef = useRef(selector);
+    const isEqualRef = useRef(isEqual);
+    // Keep these refs pointed at the latest selector + equality fn so the
+    // snapshot getter below always uses current values without forcing a
+    // re-subscribe. This mirrors `use-sync-external-store/with-selector`, which
+    // deliberately writes these refs during render rather than in an effect.
+    // eslint-disable-next-line react-hooks/refs -- intentional with-selector latest refs
+    selectorRef.current = selector;
+    // eslint-disable-next-line react-hooks/refs -- intentional with-selector latest refs
+    isEqualRef.current = isEqual;
+    const getSelectedSnapshot = useCallback(() => {
+        const next = getSnapshot();
+        const cache = cacheRef.current;
+        if (cache && Object.is(cache.source, next)) {
+            return cache.selected;
+        }
+        const selected = selectorRef.current(next);
+        if (cache && isEqualRef.current(cache.selected, selected)) {
+            cacheRef.current = { source: next, selected: cache.selected };
+            return cache.selected;
+        }
+        cacheRef.current = { source: next, selected };
+        return selected;
+    }, [getSnapshot]);
+    return useSyncExternalStore(subscribe, getSelectedSnapshot);
+}
+
+export { useStoreSlice };
+//# sourceMappingURL=useStoreSlice.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useStoreSlice.js","sources":["src/components/editor/NodeGraph/useStoreSlice.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useRef, useSyncExternalStore } from 'react';\n\ninterface SliceCache<TSource, TSelected> {\n  source: TSource;\n  selected: TSelected;\n}\n\n/**\n * Subscribe to a slice of an external store, returning a memoized selection.\n *\n * Avoids the re-render storm caused by calling `useSyncExternalStore` with a\n * raw slice getter when the slice mutates at high frequency (e.g. drag\n * deltas at 60–120 Hz) but each subscriber only cares about a per-id payload.\n *\n * The selector is invoked only when the underlying source reference changes;\n * if the freshly computed selection compares equal to the previous one via\n * `isEqual`, the previous selection reference is preserved so downstream\n * `Object.is` checks (including React's reconciler) treat it as unchanged.\n *\n * Inspired by `use-sync-external-store/with-selector`, kept local to avoid\n * pulling in an extra peer dependency for a single call site.\n */\nexport function useStoreSlice<TSource, TSelected>(\n  subscribe: (cb: () => void) => () => void,\n  getSnapshot: () => TSource,\n  selector: (snapshot: TSource) => TSelected,\n  isEqual: (a: TSelected, b: TSelected) => boolean = Object.is\n): TSelected {\n  const cacheRef = useRef<SliceCache<TSource, TSelected> | null>(null);\n  const selectorRef = useRef(selector);\n  const isEqualRef = useRef(isEqual);\n  // Keep these refs pointed at the latest selector + equality fn so the\n  // snapshot getter below always uses current values without forcing a\n  // re-subscribe. This mirrors `use-sync-external-store/with-selector`, which\n  // deliberately writes these refs during render rather than in an effect.\n  // eslint-disable-next-line react-hooks/refs -- intentional with-selector latest refs\n  selectorRef.current = selector;\n  // eslint-disable-next-line react-hooks/refs -- intentional with-selector latest refs\n  isEqualRef.current = isEqual;\n\n  const getSelectedSnapshot = useCallback((): TSelected => {\n    const next = getSnapshot();\n    const cache = cacheRef.current;\n    if (cache && Object.is(cache.source, next)) {\n      return cache.selected;\n    }\n    const selected = selectorRef.current(next);\n    if (cache && isEqualRef.current(cache.selected, selected)) {\n      cacheRef.current = { source: next, selected: cache.selected };\n      return cache.selected;\n    }\n    cacheRef.current = { source: next, selected };\n    return selected;\n  }, [getSnapshot]);\n\n  return useSyncExternalStore(subscribe, getSelectedSnapshot);\n}\n"],"names":[],"mappings":";;;AASA;;;;;;;;;;;;;;AAcG;AACG;AAMJ;AACA;AACA;;;;;;AAMA;;AAEA;AAEA;AACE;AACA;AACA;;;;AAIA;AACE;;;;AAIF;AACF;AAEA;AACF;;"}

package/dist/esm/components/editor/PropertyInspector/PropertyGroup.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
 import { vars } from '../../../theme/contract.css.js';
+import { cx } from '../../../utils/cx.js';
 import { groupDivider, groupLine, groupTitle, indentVar, groupRoot } from './PropertyGroup.css.js';
 
 // --- Component ---

package/dist/esm/components/editor/PropertyInspector/PropertyGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyGroup.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyGroup.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;AAEO;AAYL;AAKM;AACA;;;;;AAKD;AAcP;AAEA;;"}
+{"version":3,"file":"PropertyGroup.js","sources":["src/components/editor/PropertyInspector/PropertyGroup.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { vars } from '@/theme/contract.css';\nimport { cx } from '@/utils/cx';\n\nimport {\n  groupRoot,\n  groupDivider,\n  groupTitle,\n  groupLine,\n  indentVar,\n} from './PropertyGroup.css';\n\nimport type { PropertyGroupProps } from './PropertyInspector.types';\n\n// --- Component ---\n\nexport const PropertyGroup: React.FC<PropertyGroupProps> = ({\n  title,\n  children,\n  indent = 0,\n  disabled = false,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  return (\n    <div\n      ref={ref}\n      className={cx(groupRoot, className)}\n      style={{\n        ...style,\n        ...assignInlineVars({\n          [indentVar]: `calc(${indent} * ${vars.spacing.xl})`,\n        }),\n        opacity: disabled ? 0.5 : 1,\n        pointerEvents: disabled ? 'none' : 'auto',\n      }}\n      data-testid={testId}\n      {...rest}\n    >\n      {title != null && (\n        <div className={groupDivider}>\n          <span className={groupLine} />\n          <span className={groupTitle}>{title}</span>\n          <span className={groupLine} />\n        </div>\n      )}\n      {children}\n    </div>\n  );\n};\n\nPropertyGroup.displayName = 'PropertyGroup';\n"],"names":[],"mappings":";;;;;;;AAkBA;AAEO;AAYL;AAKM;AACA;;;;;AAKD;AAcP;AAEA;;"}

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.css.js

@@ -1,13 +1,14 @@
-import './../../../assets/src/components/editor/PropertyInspector/PropertyPanel.css.ts.vanilla-RYv_XgOu.css';
+import './../../../assets/src/components/editor/PropertyInspector/PropertyPanel.css.ts.vanilla-Dpr_k5I3.css';
 
 var contentBottomSpacingVar = 'var(--contentBottomSpacingVar__151bru71)';
 var contentTopSpacingVar = 'var(--contentTopSpacingVar__151bru70)';
 var panelContent = 'PropertyPanel_panelContent__151bru76';
-var panelFooter = 'PropertyPanel_panelFooter__151bru77';
+var panelContentScroll = 'PropertyPanel_panelContentScroll__151bru77';
+var panelFooter = 'PropertyPanel_panelFooter__151bru78';
 var panelHeader = 'PropertyPanel_panelHeader__151bru73';
 var panelRoot = 'PropertyPanel_panelRoot__151bru72';
 var searchInputBase = 'PropertyPanel_searchInputBase__151bru75';
 var searchWrapper = 'PropertyPanel_searchWrapper__151bru74';
 
-export { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelFooter, panelHeader, panelRoot, searchInputBase, searchWrapper };
+export { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelContentScroll, panelFooter, panelHeader, panelRoot, searchInputBase, searchWrapper };
 //# sourceMappingURL=PropertyPanel.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.css.js.map

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

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useCallback, useMemo, createContext, useContext } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
+import { useState, useCallback, useDeferredValue, useMemo, createContext, useContext } from 'react';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
-import { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelHeader, searchWrapper, searchInputBase, panelFooter, panelRoot } from './PropertyPanel.css.js';
+import { cx } from '../../../utils/cx.js';
+import { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelHeader, searchWrapper, searchInputBase, panelContentScroll, panelFooter, panelRoot } from './PropertyPanel.css.js';
 
 // --- Context ---
 const PropertyPanelContext = 
@@ -34,17 +34,22 @@ const SEARCH_SIZE_MAP = {
     },
 };
 // --- Component ---
-const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searchable = false, searchPlaceholder = 'Search properties...', onSearchChange, contentTopSpacing, contentBottomSpacing, className, style, testId, ref, ...rest }) => {
+const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, fillHeight = false, density = 'normal', searchable = false, searchPlaceholder = 'Search properties...', onSearchChange, contentTopSpacing, contentBottomSpacing, className, style, testId, ref, ...rest }) => {
     const [searchQuery, setSearchQuery] = useState('');
     const handleSearchChange = useCallback((e) => {
         const query = e.target.value;
         setSearchQuery(query);
         onSearchChange?.(query);
     }, [onSearchChange]);
+    // Defer the query handed to descendants for filtering so the search input
+    // stays responsive while large property lists re-filter. The immediate
+    // `searchQuery` still drives the input value.
+    const deferredSearchQuery = useDeferredValue(searchQuery);
     const contextValue = useMemo(() => ({
         size,
-        searchQuery: searchQuery.toLowerCase(),
-    }), [size, searchQuery]);
+        density,
+        searchQuery: deferredSearchQuery.toLowerCase(),
+    }), [size, density, deferredSearchQuery]);
     const hasHeader = header != null || searchable;
     const hasFooter = footer != null;
     const sizeConfig = SEARCH_SIZE_MAP[size];
@@ -61,7 +66,7 @@ const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searc
                                     height: `${sizeConfig.height}px`,
                                     fontSize: sizeConfig.fontSize,
                                     padding: `0 ${sizeConfig.padding}`,
-                                } }) }))] })), maxHeight != null ? (jsx(ScrollArea, { maxHeight: maxHeight, direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, children: content })) : (content), hasFooter && jsx("div", { className: panelFooter, children: footer })] }) }));
+                                } }) }))] })), maxHeight != null ? (jsx(ScrollArea, { maxHeight: maxHeight, direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, children: content })) : fillHeight ? (jsx(ScrollArea, { direction: "vertical", scrollbarVisibility: "auto", fadeMask: true, style: { flex: 1, minHeight: 0 }, children: jsx("div", { className: cx(panelContent, panelContentScroll), style: contentStyle, children: children }) })) : (content), hasFooter && jsx("div", { className: panelFooter, children: footer })] }) }));
 };
 PropertyPanel.displayName = 'PropertyPanel';
 

package/dist/esm/components/editor/PropertyInspector/PropertyPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"PropertyPanel.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AA4BA;AAEA;AACE;AAEF;;;AAGG;;AAED;AACF;AAYA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;;;AAsBE;AAEI;;AAEA;AACF;AAIF;;AAGI;AACD;AAIH;AACA;AAEA;;AAGE;;AAGI;AACJ;;AAGI;AACL;AAED;AAMA;AAyBkB;;AAEA;;AAyBpB;AAEA;;"}
+{"version":3,"file":"PropertyPanel.js","sources":["src/components/editor/PropertyInspector/PropertyPanel.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  createContext,\n  useCallback,\n  useContext,\n  useDeferredValue,\n  useMemo,\n  useState,\n} from 'react';\n\nimport { ScrollArea } from '@/components/layout/ScrollArea';\nimport { cx } from '@/utils/cx';\n\nimport {\n  panelRoot,\n  panelHeader,\n  searchWrapper,\n  searchInputBase,\n  panelContent,\n  panelContentScroll,\n  panelFooter,\n  contentTopSpacingVar,\n  contentBottomSpacingVar,\n} from './PropertyPanel.css';\n\nimport type {\n  PropertyInspectorSize,\n  PropertyPanelContextValue,\n  PropertyPanelProps,\n} from './PropertyInspector.types';\n\n// --- Context ---\n\nconst PropertyPanelContext =\n  /*#__PURE__*/ createContext<PropertyPanelContextValue | null>(null);\n\n/**\n * Returns the PropertyPanel context value, or null if not inside a PropertyPanel.\n * Child components use this to inherit size and search query from the panel.\n */\nexport function usePropertyPanelContext(): PropertyPanelContextValue | null {\n  return useContext(PropertyPanelContext);\n}\n\nexport { PropertyPanelContext };\n\n// --- Size map ---\n\ninterface SearchInputSizeConfig {\n  height: number;\n  fontSize: string;\n  padding: string;\n}\n\nconst SEARCH_SIZE_MAP: Record<PropertyInspectorSize, SearchInputSizeConfig> = {\n  sm: {\n    height: 20,\n    fontSize: 'var(--etui-font-size-md)',\n    padding: 'var(--etui-spacing-sm)',\n  },\n  md: {\n    height: 24,\n    fontSize: 'var(--etui-font-size-md)',\n    padding: 'var(--etui-spacing-md)',\n  },\n  lg: {\n    height: 28,\n    fontSize: 'var(--etui-font-size-lg)',\n    padding: 'var(--etui-spacing-md)',\n  },\n};\n\n// --- Component ---\n\nexport const PropertyPanel: React.FC<PropertyPanelProps> = ({\n  children,\n  header,\n  footer,\n  size = 'md',\n  maxHeight,\n  fillHeight = false,\n  density = 'normal',\n  searchable = false,\n  searchPlaceholder = 'Search properties...',\n  onSearchChange,\n  contentTopSpacing,\n  contentBottomSpacing,\n\n  className,\n  style,\n  testId,\n  ref,\n  ...rest\n}) => {\n  const [searchQuery, setSearchQuery] = useState('');\n\n  const handleSearchChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const query = e.target.value;\n      setSearchQuery(query);\n      onSearchChange?.(query);\n    },\n    [onSearchChange]\n  );\n\n  // Defer the query handed to descendants for filtering so the search input\n  // stays responsive while large property lists re-filter. The immediate\n  // `searchQuery` still drives the input value.\n  const deferredSearchQuery = useDeferredValue(searchQuery);\n\n  const contextValue = useMemo<PropertyPanelContextValue>(\n    () => ({\n      size,\n      density,\n      searchQuery: deferredSearchQuery.toLowerCase(),\n    }),\n    [size, density, deferredSearchQuery]\n  );\n\n  const hasHeader = header != null || searchable;\n  const hasFooter = footer != null;\n\n  const sizeConfig = SEARCH_SIZE_MAP[size];\n\n  const contentStyle = assignInlineVars({\n    [contentTopSpacingVar]:\n      contentTopSpacing != null\n        ? `${contentTopSpacing}px`\n        : 'var(--etui-spacing-sm)',\n    [contentBottomSpacingVar]:\n      contentBottomSpacing != null\n        ? `${contentBottomSpacing}px`\n        : 'var(--etui-spacing-md)',\n  });\n\n  const content = (\n    <div className={panelContent} style={contentStyle}>\n      {children}\n    </div>\n  );\n\n  return (\n    <PropertyPanelContext.Provider value={contextValue}>\n      <div\n        ref={ref}\n        role=\"region\"\n        aria-label=\"Properties\"\n        className={cx(panelRoot, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {hasHeader && (\n          <div className={panelHeader}>\n            {header}\n            {searchable && (\n              <div className={searchWrapper}>\n                <input\n                  type=\"search\"\n                  role=\"searchbox\"\n                  aria-label=\"Search properties\"\n                  placeholder={searchPlaceholder}\n                  value={searchQuery}\n                  onChange={handleSearchChange}\n                  className={searchInputBase}\n                  style={{\n                    height: `${sizeConfig.height}px`,\n                    fontSize: sizeConfig.fontSize,\n                    padding: `0 ${sizeConfig.padding}`,\n                  }}\n                />\n              </div>\n            )}\n          </div>\n        )}\n\n        {maxHeight != null ? (\n          <ScrollArea\n            maxHeight={maxHeight}\n            direction=\"vertical\"\n            scrollbarVisibility=\"auto\"\n            fadeMask\n          >\n            {content}\n          </ScrollArea>\n        ) : fillHeight ? (\n          <ScrollArea\n            direction=\"vertical\"\n            scrollbarVisibility=\"auto\"\n            fadeMask\n            style={{ flex: 1, minHeight: 0 }}\n          >\n            <div\n              className={cx(panelContent, panelContentScroll)}\n              style={contentStyle}\n            >\n              {children}\n            </div>\n          </ScrollArea>\n        ) : (\n          content\n        )}\n\n        {hasFooter && <div className={panelFooter}>{footer}</div>}\n      </div>\n    </PropertyPanelContext.Provider>\n  );\n};\n\nPropertyPanel.displayName = 'PropertyPanel';\n"],"names":[],"mappings":";;;;;;;;AAiCA;AAEA;AACE;AAEF;;;AAGG;;AAED;AACF;AAYA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;AAEO;;AAsBL;AAEI;;AAEA;AACF;;;;AAOF;AAEA;;;AAII;;AAKJ;AACA;AAEA;;AAGE;;AAGI;AACJ;;AAGI;AACL;AAED;AAMA;AAyBkB;;AAEA;;AAuCpB;AAEA;;"}

package/dist/esm/components/editor/PropertyInspector/PropertyRow.css.js

@@ -1,15 +1,16 @@
-import './../../../assets/src/components/editor/PropertyInspector/PropertyRow.css.ts.vanilla-C3YZnnHb.css';
+import './../../../assets/src/components/editor/PropertyInspector/PropertyRow.css.ts.vanilla-pq1Uhd2a.css';
 
 var RESET_BUTTON_CLASS = 'property-row-reset';
 var controlRatioVar = 'var(--controlRatioVar__1ds48411)';
-var fullWidthControl = 'PropertyRow_fullWidthControl__1ds48417';
+var fullWidthControl = 'PropertyRow_fullWidthControl__1ds48418';
 var fullWidthLabel = 'PropertyRow_fullWidthLabel__1ds48414';
-var modifiedDot = 'PropertyRow_modifiedDot__1ds48415';
-var resetButton = 'PropertyRow_resetButton__1ds48418';
-var rowControl = 'PropertyRow_rowControl__1ds48416';
+var labelTooltipTarget = 'PropertyRow_labelTooltipTarget__1ds48415';
+var modifiedDot = 'PropertyRow_modifiedDot__1ds48416';
+var resetButton = 'PropertyRow_resetButton__1ds48419';
+var rowControl = 'PropertyRow_rowControl__1ds48417';
 var rowLabel = 'PropertyRow_rowLabel__1ds48413';
 var rowRoot = 'PropertyRow_rowRoot__1ds48412';
 var splitRatioVar = 'var(--splitRatioVar__1ds48410)';
 
-export { RESET_BUTTON_CLASS, controlRatioVar, fullWidthControl, fullWidthLabel, modifiedDot, resetButton, rowControl, rowLabel, rowRoot, splitRatioVar };
+export { RESET_BUTTON_CLASS, controlRatioVar, fullWidthControl, fullWidthLabel, labelTooltipTarget, modifiedDot, resetButton, rowControl, rowLabel, rowRoot, splitRatioVar };
 //# sourceMappingURL=PropertyRow.css.js.map

package/dist/esm/components/editor/PropertyInspector/PropertyRow.css.js.map

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