entangle-ui 0.8.2 → 0.10.0

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 '../../../node_modules/@vanilla-extract/css/dist/vanilla-extract-css.esm.js';
+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":[null],"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":[null],"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":[null],"names":[],"mappings":";;;;;;;AAkBA;AAEO;AAYL;AAKM;AACA;;;;;AAKD;AAcP;AAEA;;"}

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

@@ -1,9 +1,9 @@
 "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 { cx } from '../../../utils/cx.js';
 import { contentBottomSpacingVar, contentTopSpacingVar, panelContent, panelHeader, searchWrapper, searchInputBase, panelFooter, panelRoot } from './PropertyPanel.css.js';
 
 // --- Context ---
@@ -41,10 +41,14 @@ const PropertyPanel = ({ children, header, footer, size = 'md', maxHeight, searc
         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]);
+        searchQuery: deferredSearchQuery.toLowerCase(),
+    }), [size, deferredSearchQuery]);
     const hasHeader = header != null || searchable;
     const hasFooter = footer != null;
     const sizeConfig = SEARCH_SIZE_MAP[size];

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":[null],"names":[],"mappings":";;;;;;;;AAgCA;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;;;;AAOF;AAEA;;AAGI;AACD;AAIH;AACA;AAEA;;AAGE;;AAGI;AACJ;;AAGI;AACL;AAED;AAMA;AAyBkB;;AAEA;;AAyBpB;AAEA;;"}

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

@@ -1,9 +1,96 @@
 "use client";
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
+import { useCallback } from 'react';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import { UndoIcon } from '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
 import { Tooltip } from '../../primitives/Tooltip/Tooltip.js';
+import { cx } from '../../../utils/cx.js';
 import { usePropertyPanelContext } from './PropertyPanel.js';
 import { modifiedDot, controlRatioVar, splitRatioVar, fullWidthLabel, fullWidthControl, rowLabel, rowControl, resetButton, RESET_BUTTON_CLASS, rowRoot } from './PropertyRow.css.js';
 
@@ -24,8 +111,6 @@ const ROW_SIZE_MAP = {
         resetIconSize: 14,
     },
 };
-// --- Reset icon ---
-const ResetIcon = ({ size }) => (jsxs("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: [jsx("path", { d: "M2 4.5h6.5a2 2 0 0 1 0 4H6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M4 2.5L2 4.5L4 6.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 // --- Component ---
 const PropertyRow = ({ label, tooltip, children, fullWidth = false, splitRatio = [40, 60], modified = false, disabled = false, visible = true, size: sizeProp, action, onLabelContextMenu, onReset, className, style, testId, ref, ...rest }) => {
     const panelCtx = usePropertyPanelContext();
@@ -66,7 +151,7 @@ const PropertyRow = ({ label, tooltip, children, fullWidth = false, splitRatio =
                         e.preventDefault();
                         onReset();
                     }
-                }, "data-testid": "reset-button", children: jsx(ResetIcon, { size: sizeConfig.resetIconSize }) }))] }));
+                }, "data-testid": "reset-button", children: jsx(UndoIcon, { size: sizeConfig.resetIconSize, decorative: true }) }))] }));
 };
 PropertyRow.displayName = 'PropertyRow';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PropertyRow.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyRow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;AAgCA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;AAEA;AAyBA;AAEO;AAoBL;;AAEA;AAEA;;;AAIE;;AAYF;AAEA;;;;AAiBC;AAED;AAKM;AACA;;;;AAIA;;;;;AAcM;AACE;AACA;;;AAcF;AACE;AACA;;AAmBJ;;AAEE;;AAEJ;AAQV;AAEA;;"}
+{"version":3,"file":"PropertyRow.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertyRow.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA;AACE;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACD;;AAGH;AAEO;AAoBL;;AAEA;AAEA;;;AAIE;;AAYF;AAEA;;;;AAiBC;AAED;AAKM;AACA;;;;AAIA;;;;;AAcM;AACE;AACA;;;AAcF;AACE;AACA;;AAmBJ;;AAEE;;AAEJ;AAQV;AAEA;;"}

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

@@ -1,6 +1,93 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId, useState, useCallback } from 'react';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import { ChevronRightIcon } from '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
 import { cx } from '../../../utils/cx.js';
 import { usePropertyPanelContext } from './PropertyPanel.js';
 import { chevronExpanded, chevron, iconArea, sectionLabel, actionsArea, sectionTrigger, contentInner, contentWrapper, sectionRoot } from './PropertySection.css.js';
@@ -10,8 +97,6 @@ const TRIGGER_SIZE_MAP = {
     md: { chevronSize: 12 },
     lg: { chevronSize: 14 },
 };
-// --- Chevron icon ---
-const ChevronRightIcon = ({ size }) => (jsx("svg", { width: size, height: size, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: jsx("path", { d: "M4.5 3L7.5 6L4.5 9", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }));
 // --- Component ---
 const PropertySection = ({ title, icon, actions, expanded: expandedProp, defaultExpanded = true, onExpandedChange, keepMounted = false, disabled = false, size: sizeProp, indicator, onContextMenu, children, className, style, testId, ref, ...rest }) => {
     const autoId = useId();
@@ -35,6 +120,13 @@ const PropertySection = ({ title, icon, actions, expanded: expandedProp, default
     const handleActionsClick = useCallback((e) => {
         e.stopPropagation();
     }, []);
+    // Prevent keyboard activation on nested action controls from bubbling up
+    // and toggling the section trigger.
+    const handleActionsKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.stopPropagation();
+        }
+    }, []);
     const showIndicator = indicator !== null;
     return (jsxs("div", { ref: ref, className: cx(sectionRoot, className), style: style, "data-testid": testId, ...rest, children: [jsxs("button", { type: "button", id: triggerId, "aria-expanded": resolvedExpanded, "aria-controls": contentId, "aria-disabled": disabled || undefined, disabled: disabled, onClick: handleToggle, onContextMenu: onContextMenu, className: sectionTrigger({
                     size,
@@ -43,7 +135,12 @@ const PropertySection = ({ title, icon, actions, expanded: expandedProp, default
                 }), children: [showIndicator && (jsx("span", { className: cx(chevron, resolvedExpanded && chevronExpanded), style: {
                             width: `${sizeConfig.chevronSize}px`,
                             height: `${sizeConfig.chevronSize}px`,
-                        }, children: indicator ?? jsx(ChevronRightIcon, { size: sizeConfig.chevronSize }) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { className: sectionLabel, children: title }), actions && (jsx("span", { className: actionsArea, onClick: handleActionsClick, children: actions }))] }), (resolvedExpanded || keepMounted) && (jsx("div", { className: contentWrapper({ expanded: resolvedExpanded }), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedExpanded || undefined, children: jsx("div", { className: contentInner, children: children }) }))] }));
+                        }, children: indicator ?? (jsx(ChevronRightIcon, { size: sizeConfig.chevronSize, decorative: true })) })), icon && jsx("span", { className: iconArea, children: icon }), jsx("span", { className: sectionLabel, children: title }), actions && (
+                    // This wrapper is a non-semantic propagation boundary for the
+                    // user-supplied action controls it hosts; it is not itself
+                    // interactive, so it intentionally has no role.
+                    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                    jsx("span", { className: actionsArea, onClick: handleActionsClick, onKeyDown: handleActionsKeyDown, children: actions }))] }), (resolvedExpanded || keepMounted) && (jsx("div", { className: contentWrapper({ expanded: resolvedExpanded }), role: "region", id: contentId, "aria-labelledby": triggerId, hidden: !resolvedExpanded || undefined, children: jsx("div", { className: contentInner, children: children }) }))] }));
 };
 PropertySection.displayName = 'PropertySection';
 

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

@@ -1 +1 @@
-{"version":3,"file":"PropertySection.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertySection.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AA2BA;AACE;AACA;AACA;;AAGF;AAEA;AAkBA;AAEO;AAoBL;AACA;AACA;AAEA;;AAEA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;;;AAIA;;;;AAsBQ;AACD;AAMK;AACA;;AA4Bd;AAEA;;"}
+{"version":3,"file":"PropertySection.js","sources":["../../../../../../src/components/editor/PropertyInspector/PropertySection.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA;AACE;AACA;AACA;;AAGF;AAEO;AAoBL;AACA;AACA;AAEA;;AAEA;;AAGA;;AAGA;AACE;;AAEA;;;;AAMA;;AAGF;;;;;AAMA;AACE;;;;AAKF;;;;AAsBQ;AACD;AAMK;AACA;AACD;;;;;AAcH;AAuBV;AAEA;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"usePropertyUndo.js","sources":["../../../../../../src/components/editor/PropertyInspector/usePropertyUndo.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAsBA;AAIE;;AAEI;;;;;AAKE;AACA;;;;AAIF;AAAkC;AAClC;;;;;;;AASA;AAAkC;AAClC;;;;;;AAQF;;AAEA;AACE;;AAEN;AAEA;AAEA;;;AAGG;AACG;AAGJ;;AAGE;AACA;AACD;AAED;AAEI;AACE;;;AAGD;AACH;AAIF;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;;;;;;AAOA;AACA;;;;AAIJ;;"}
+{"version":3,"file":"usePropertyUndo.js","sources":["../../../../../../src/components/editor/PropertyInspector/usePropertyUndo.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAuBA;AAIE;;AAEI;;;;;AAKE;AACA;;;;AAIF;AAAkC;AAClC;;;;;;;AASA;AAAkC;AAClC;;;;;;AAQF;;AAEA;AACE;;AAEN;AAEA;AAEA;;;AAGG;AACG;AAGJ;;AAGE;AACA;AACD;AAED;AAEI;AACE;;;AAGD;AACH;AAIF;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;AAAkC;AAClC;AAGA;AACA;AACF;AAEA;AACE;;;;;;AAOA;AACA;;;;AAIJ;;"}

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

@@ -0,0 +1,23 @@
+import './../../../assets/src/components/editor/Timeline/Timeline.css.ts.vanilla-DDX6Zalo.css';
+
+var ariaLiveRegionStyle = 'Timeline_ariaLiveRegionStyle__1c3scxy4';
+var timelineBodyStyle = 'Timeline_timelineBodyStyle__1c3scxy1';
+var timelineCanvasStyle = 'Timeline_timelineCanvasStyle__1c3scxy2';
+var timelineFooterStyle = 'Timeline_timelineFooterStyle__1c3scxyg';
+var timelineHeaderColumnStyle = 'Timeline_timelineHeaderColumnStyle__1c3scxy6';
+var timelineHeaderDropIndicatorStyle = 'Timeline_timelineHeaderDropIndicatorStyle__1c3scxyh';
+var timelineHeaderGroupRowStyle = 'Timeline_timelineHeaderGroupRowStyle__1c3scxya';
+var timelineHeaderLabelStyle = 'Timeline_timelineHeaderLabelStyle__1c3scxyd';
+var timelineHeaderRowStyle = 'Timeline_timelineHeaderRowStyle__1c3scxy9';
+var timelineHeaderRowsViewportStyle = 'Timeline_timelineHeaderRowsViewportStyle__1c3scxy8';
+var timelineHeaderSpacerStyle = 'Timeline_timelineHeaderSpacerStyle__1c3scxy7';
+var timelineHeaderSwatchStyle = 'Timeline_timelineHeaderSwatchStyle__1c3scxyc';
+var timelineHeaderToggleStyle = 'Timeline_timelineHeaderToggleStyle__1c3scxyb';
+var timelineMainRowStyle = 'Timeline_timelineMainRowStyle__1c3scxy5';
+var timelineMinimapStyle = 'Timeline_timelineMinimapStyle__1c3scxye';
+var timelineOverlayLayerStyle = 'Timeline_timelineOverlayLayerStyle__1c3scxy3';
+var timelineShellStyle = 'Timeline_timelineShellStyle__1c3scxy0';
+var timelineToolbarStyle = 'Timeline_timelineToolbarStyle__1c3scxyf';
+
+export { ariaLiveRegionStyle, timelineBodyStyle, timelineCanvasStyle, timelineFooterStyle, timelineHeaderColumnStyle, timelineHeaderDropIndicatorStyle, timelineHeaderGroupRowStyle, timelineHeaderLabelStyle, timelineHeaderRowStyle, timelineHeaderRowsViewportStyle, timelineHeaderSpacerStyle, timelineHeaderSwatchStyle, timelineHeaderToggleStyle, timelineMainRowStyle, timelineMinimapStyle, timelineOverlayLayerStyle, timelineShellStyle, timelineToolbarStyle };
+//# sourceMappingURL=Timeline.css.js.map

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

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