entangle-ui 0.9.0 → 0.10.0

package/dist/esm/components/editor/AssetBrowser/useAssetGridKeyboardNav.js

@@ -0,0 +1,91 @@
+"use client";
+import { useMemo, useCallback } from 'react';
+import { nextGridIndex } from './assetBrowserKeyboard.js';
+
+/**
+ * 2D grid keyboard navigation for `AssetBrowserGrid`. Handles arrows, Home/End,
+ * PageUp/PageDown, Enter (activate), Space (toggle), Ctrl/Cmd+A (select all),
+ * Escape (clear). `onKeyDown` is a `useCallback` — the selection/navigation
+ * callbacks it depends on are themselves stable, and the handler is only spread
+ * onto the grid `onKeyDown` so re-attaching on layout changes is free.
+ *
+ * Alt+ArrowUp is intentionally **not** handled here — it bubbles to the root's
+ * "go to parent" handler when `history` is on.
+ */
+function useAssetGridKeyboardNav(options) {
+    const { store, items, win, scrollerRef, selectionMode, selectAll, clearSelection, activateItem, toggleSelectId, selectByKeyboard, scrollIndexIntoView, } = options;
+    const indexById = useMemo(() => {
+        const map = new Map();
+        items.forEach((item, i) => map.set(item.id, i));
+        return map;
+    }, [items]);
+    const onKeyDown = useCallback((event) => {
+        const count = items.length;
+        if (count === 0)
+            return;
+        const key = event.key;
+        // Let Alt+ArrowUp bubble to the root's "go to parent" handler.
+        if (event.altKey && key === 'ArrowUp')
+            return;
+        const focusedId = store.getFocusedId();
+        const current = focusedId ? (indexById.get(focusedId) ?? -1) : -1;
+        const multiple = selectionMode === 'multiple';
+        if ((event.ctrlKey || event.metaKey) && (key === 'a' || key === 'A')) {
+            event.preventDefault();
+            selectAll();
+            return;
+        }
+        if (key === 'Escape') {
+            clearSelection();
+            return;
+        }
+        if (key === 'Enter') {
+            const item = current >= 0 ? items[current] : undefined;
+            if (item) {
+                event.preventDefault();
+                activateItem(item);
+            }
+            return;
+        }
+        if (key === ' ') {
+            const item = current >= 0 ? items[current] : undefined;
+            if (item) {
+                event.preventDefault();
+                toggleSelectId(item.id);
+            }
+            return;
+        }
+        const rowsPerPage = Math.max(1, Math.floor((scrollerRef.current?.clientHeight ?? win.rowHeight) / win.rowHeight));
+        const next = nextGridIndex(current, key, {
+            columns: win.columns,
+            count,
+            rowsPerPage,
+        });
+        const target = next >= 0 ? items[next] : undefined;
+        if (next !== current && target) {
+            event.preventDefault();
+            store.setFocusedId(target.id);
+            scrollIndexIntoView(next, win);
+            if (selectionMode !== false) {
+                selectByKeyboard(next, multiple && event.shiftKey);
+            }
+        }
+    }, [
+        store,
+        items,
+        win,
+        scrollerRef,
+        selectionMode,
+        indexById,
+        selectAll,
+        clearSelection,
+        activateItem,
+        toggleSelectId,
+        selectByKeyboard,
+        scrollIndexIntoView,
+    ]);
+    return { onKeyDown };
+}
+
+export { useAssetGridKeyboardNav };
+//# sourceMappingURL=useAssetGridKeyboardNav.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetGridKeyboardNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetGridKeyboardNav.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetGridKeyboardNav.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;AAgCA;;;;;;;;;AASG;AACG;;AAiBJ;AACE;;AAEA;AACF;AAEA;AAEI;;;AAEA;;AAEA;;AACA;;AAEA;;;AAIE;;;AAGF;AACE;;;AAGF;AACE;;;;;;;AAOF;AACE;;;AAGE;;;;AAKJ;AAMA;;;;AAIC;AACD;AACA;;AAEE;AACA;AACA;;;;AAIJ;;;;;;;;;;;;;AAcC;;AAIL;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetGridVirtualizer.js

@@ -0,0 +1,91 @@
+"use client";
+import { useState, useEffect, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useResizeObserver } from '../../../hooks/useResizeObserver/useResizeObserver.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 { columnsFor, rowHeight } from './assetBrowserGeometry.js';
+
+/**
+ * Windowed grid math. Tracks container width + height via `useResizeObserver`
+ * and scroll position via a throttled (rAF) scroll listener, then derives the
+ * row-aligned slice of items to render.
+ *
+ * When `enabled` is false it still reports `columns`/`rowHeight` (needed for
+ * keyboard navigation) but renders the whole list.
+ */
+function useAssetGridVirtualizer(options) {
+    const { containerRef, count, thumbPx, overscanRows, enabled } = options;
+    const [size, setSize] = useState({ width: 0, height: 0 });
+    const [scrollTop, setScrollTop] = useState(0);
+    useResizeObserver(containerRef, entry => {
+        setSize({
+            width: entry.contentRect.width,
+            height: entry.contentRect.height,
+        });
+    });
+    useEffect(() => {
+        const el = containerRef.current;
+        if (!el || !enabled)
+            return;
+        let raf = 0;
+        const onScroll = () => {
+            cancelAnimationFrame(raf);
+            raf = requestAnimationFrame(() => {
+                setScrollTop(el.scrollTop);
+            });
+        };
+        el.addEventListener('scroll', onScroll, { passive: true });
+        return () => {
+            el.removeEventListener('scroll', onScroll);
+            cancelAnimationFrame(raf);
+        };
+    }, [containerRef, enabled]);
+    return useMemo(() => {
+        const columns = columnsFor(size.width, thumbPx);
+        const rh = rowHeight(thumbPx);
+        const totalRows = Math.ceil(count / columns);
+        const totalHeight = totalRows * rh;
+        if (!enabled) {
+            return {
+                columns,
+                rowHeight: rh,
+                totalRows,
+                totalHeight,
+                startIndex: 0,
+                endIndex: count,
+                offsetY: 0,
+                windowed: false,
+            };
+        }
+        const startRow = Math.max(0, Math.floor(scrollTop / rh) - overscanRows);
+        const viewportRows = Math.ceil((size.height || rh) / rh);
+        const endRow = Math.min(totalRows, startRow + viewportRows + overscanRows * 2);
+        return {
+            columns,
+            rowHeight: rh,
+            totalRows,
+            totalHeight,
+            startIndex: startRow * columns,
+            endIndex: Math.min(count, endRow * columns),
+            offsetY: startRow * rh,
+            windowed: true,
+        };
+    }, [
+        size.width,
+        size.height,
+        scrollTop,
+        count,
+        thumbPx,
+        overscanRows,
+        enabled,
+    ]);
+}
+
+export { useAssetGridVirtualizer };
+//# sourceMappingURL=useAssetGridVirtualizer.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetGridVirtualizer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetGridVirtualizer.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetGridVirtualizer.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;AAkCA;;;;;;;AAOG;AACG;AAGJ;AACA;;AAGA;AACE;AACE;AACA;AACD;AACH;;AAGE;AACA;;;;;AAIE;AACE;AACF;AACF;AACA;AACA;AACE;;AAEF;AACF;;;AAIE;;AAEA;;;;AAKI;;;AAGA;AACA;AACA;AACA;;;AAIJ;AACA;AACA;;;AAOE;;;;;;AAMA;;AAEJ;AACE;AACA;;;;;;AAMD;AACH;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetMarqueeGesture.js

@@ -0,0 +1,128 @@
+"use client";
+import { useRef, useCallback, useEffect } 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 '../../../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 { useAssetBrowserStore } from './AssetBrowserContext.js';
+import { rectFromPoints, rectsIntersect, itemRect } from './assetBrowserGeometry.js';
+
+/**
+ * Pointer-driven rubber-band selection for the grid. The active rect lives in
+ * the AssetBrowser store (so the marquee overlay can subscribe via its own
+ * slice), while pointer-move updates are RAF-throttled. The hit-test runs once
+ * on pointer-up and reports through `commitMarquee`.
+ *
+ * Handlers have stable identities (`useCallback`) and read the latest props
+ * through `useLatest` refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetMarqueeGesture(options) {
+    const { scrollerRef, enabled, items, columns, thumbPx, commitMarquee } = options;
+    const store = useAssetBrowserStore();
+    const dragRef = useRef(null);
+    const rafRef = useRef(0);
+    const enabledRef = useLatest(enabled);
+    const itemsRef = useLatest(items);
+    const columnsRef = useLatest(columns);
+    const thumbPxRef = useLatest(thumbPx);
+    const commitMarqueeRef = useLatest(commitMarquee);
+    const contentPoint = useCallback((event) => {
+        const el = scrollerRef.current;
+        if (!el)
+            return { x: 0, y: 0 };
+        const rect = el.getBoundingClientRect();
+        return {
+            x: event.clientX - rect.left + el.scrollLeft,
+            y: event.clientY - rect.top + el.scrollTop,
+        };
+    }, [scrollerRef]);
+    const onPointerDown = useCallback((event) => {
+        if (event.button !== 0 || !enabledRef.current)
+            return;
+        // Started on an item, not empty space — let the item handle the click.
+        if (event.target !== event.currentTarget)
+            return;
+        const p = contentPoint(event);
+        dragRef.current = {
+            startX: p.x,
+            startY: p.y,
+            additive: event.ctrlKey || event.metaKey,
+            moved: false,
+        };
+        scrollerRef.current?.setPointerCapture(event.pointerId);
+        store.setMarquee({
+            active: true,
+            rect: { x: p.x, y: p.y, width: 0, height: 0 },
+            additive: dragRef.current.additive,
+        });
+    }, [store, scrollerRef, contentPoint, enabledRef]);
+    const onPointerMove = useCallback((event) => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        drag.moved = true;
+        cancelAnimationFrame(rafRef.current);
+        const p = contentPoint(event);
+        rafRef.current = requestAnimationFrame(() => {
+            store.setMarquee({
+                active: true,
+                rect: rectFromPoints(drag.startX, drag.startY, p.x, p.y),
+                additive: drag.additive,
+            });
+        });
+    }, [store, contentPoint]);
+    const onPointerUp = useCallback((event) => {
+        const drag = dragRef.current;
+        if (!drag)
+            return;
+        cancelAnimationFrame(rafRef.current);
+        dragRef.current = null;
+        scrollerRef.current?.releasePointerCapture(event.pointerId);
+        const p = contentPoint(event);
+        const rect = rectFromPoints(drag.startX, drag.startY, p.x, p.y);
+        const ids = [];
+        const currentItems = itemsRef.current;
+        for (let i = 0; i < currentItems.length; i += 1) {
+            const item = currentItems[i];
+            if (!item || item.selectable === false)
+                continue;
+            if (rectsIntersect(rect, itemRect(i, columnsRef.current, thumbPxRef.current))) {
+                ids.push(item.id);
+            }
+        }
+        commitMarqueeRef.current(ids, drag.additive);
+        store.clearMarquee();
+    }, [
+        store,
+        scrollerRef,
+        contentPoint,
+        itemsRef,
+        columnsRef,
+        thumbPxRef,
+        commitMarqueeRef,
+    ]);
+    // Abort an in-flight marquee without committing a selection. Fires on a
+    // system/touch `pointercancel`, which would otherwise leave `dragRef` set and
+    // the marquee rect stuck active in the store until the next pointer-down.
+    const onPointerCancel = useCallback((event) => {
+        if (!dragRef.current)
+            return;
+        cancelAnimationFrame(rafRef.current);
+        dragRef.current = null;
+        scrollerRef.current?.releasePointerCapture(event.pointerId);
+        store.clearMarquee();
+    }, [store, scrollerRef]);
+    // Cancel any in-flight RAF on unmount.
+    useEffect(() => () => {
+        cancelAnimationFrame(rafRef.current);
+    }, []);
+    return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel };
+}
+
+export { useAssetMarqueeGesture };
+//# sourceMappingURL=useAssetMarqueeGesture.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetMarqueeGesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetMarqueeGesture.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetMarqueeGesture.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AA8CA;;;;;;;;AAQG;AACG;AAGJ;AAEA;AAEA;AACA;AAEA;AACA;AACA;AACA;AACA;AAEA;AAEI;AACA;;AACA;;;;;AAKF;AAIF;;;;AAII;;AACA;;;;AAIE;AACA;;;;AAIA;;AAEA;AACD;;AAKL;AAEI;AACA;;AACA;AACA;AACA;AACA;;AAEI;AACA;;AAED;AACH;AACF;AAIF;AAEI;AACA;;AACA;AACA;;AAEA;;;AAGA;AACA;AACE;AACA;;AACA;AAME;;;;;AAKN;;;;;;;;AASC;;;;AAMH;;;AAGI;AACA;;;AAGF;;AAKF;AAEI;;;AAMN;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetMutationKeyboard.js

@@ -0,0 +1,72 @@
+"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 '../../../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';
+
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable);
+}
+/**
+ * View-agnostic mutation keyboard shortcuts. The same handler is exposed through
+ * context (`mutationKeyDown`) and attached by each view to its own scroller —
+ * the grid (merged with its 2D nav) and the list wrapper — so the shortcuts
+ * work identically in both without relying on event bubbling to the root.
+ *
+ * - **F2** — inline-rename the focused item, or the sole selected item (the list
+ *   has no store roving-focus, so it falls back to a single selection).
+ * - **Delete** (and **⌘⌫** on macOS) — delete the selection. Plain `Backspace`
+ *   stays reserved for the root's "go to parent" shortcut.
+ * - **Ctrl/⌘+D** — duplicate the selection.
+ *
+ * Each shortcut is a no-op unless its mutation callback is wired, and all are
+ * skipped while the focus is in an editable element (search box, rename field).
+ * The handler is `useCallback`-stable; live state is read through `useLatest`.
+ */
+function useAssetMutationKeyboard(options) {
+    const { store, mutations } = options;
+    const mutationsRef = useLatest(mutations);
+    const selectionRef = useLatest(options.selection);
+    const onKeyDown = useCallback((event) => {
+        if (isEditableTarget(event.target))
+            return;
+        const key = event.key;
+        const m = mutationsRef.current;
+        if ((event.ctrlKey || event.metaKey) &&
+            (key === 'd' || key === 'D') &&
+            m.canDuplicate) {
+            event.preventDefault();
+            m.duplicateItems();
+            return;
+        }
+        if (key === 'F2' && m.canRename) {
+            const focusedId = store.getFocusedId();
+            const sel = selectionRef.current;
+            const targetId = focusedId ?? (sel.size === 1 ? [...sel][0] : undefined);
+            if (targetId !== undefined) {
+                event.preventDefault();
+                m.beginRename(targetId);
+            }
+            return;
+        }
+        if ((key === 'Delete' || (event.metaKey && key === 'Backspace')) &&
+            m.canDelete) {
+            event.preventDefault();
+            m.deleteItems();
+        }
+    }, [store, mutationsRef, selectionRef]);
+    return { onKeyDown };
+}
+
+export { useAssetMutationKeyboard };
+//# sourceMappingURL=useAssetMutationKeyboard.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetMutationKeyboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetMutationKeyboard.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetMutationKeyboard.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAsBA;AACE;AAAsC;AACtC;;;AAKF;AAEA;;;;;;;;;;;;;;;AAeG;AACG;AAGJ;AACA;;AAGA;AAEI;;AACA;AACA;;AAIE;;;;;;;AAQA;AACA;;AAGA;;AAEE;;;;AAIJ;;;;;;;AAYN;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetMutations.js

@@ -0,0 +1,141 @@
+"use client";
+import { useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../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';
+
+/**
+ * Owns the mutation intents — inline rename (begin/commit/cancel), delete,
+ * create-folder, duplicate — for `AssetBrowser`. AssetBrowser is presentational:
+ * these report intent through the consumer's callbacks and never touch `items`.
+ *
+ * The "which cell is editing" flag lives in the store (so rename can be started
+ * from the keyboard, a menu, or the imperative handle — all outside the cell);
+ * the transient text buffer is local to the rename field. Every handler has a
+ * stable identity (`useCallback`) and reads the latest props through `useLatest`
+ * refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetMutations(options) {
+    const { store } = options;
+    const canRename = options.onItemRename !== undefined;
+    const canDelete = options.onItemsDelete !== undefined;
+    const canCreateFolder = options.onCreateFolder !== undefined;
+    const canDuplicate = options.onItemsDuplicate !== undefined;
+    const displayedRef = useLatest(options.displayed);
+    const selectionRef = useLatest(options.selection);
+    const currentFolderIdRef = useLatest(options.currentFolderId);
+    const onItemRenameRef = useLatest(options.onItemRename);
+    const onItemsDeleteRef = useLatest(options.onItemsDelete);
+    const onCreateFolderRef = useLatest(options.onCreateFolder);
+    const onItemsDuplicateRef = useLatest(options.onItemsDuplicate);
+    /** Resolve the items an operation targets: the explicit arg, else the selection. */
+    const resolveTargets = useCallback((items) => {
+        if (items)
+            return [...items];
+        const sel = selectionRef.current;
+        return displayedRef.current.filter(it => sel.has(it.id));
+    }, [displayedRef, selectionRef]);
+    const beginRename = useCallback((id) => {
+        if (onItemRenameRef.current === undefined)
+            return;
+        store.setFocusedId(id);
+        store.setEditingId(id);
+    }, [store, onItemRenameRef]);
+    const cancelRename = useCallback(() => {
+        store.setEditingId(null);
+    }, [store]);
+    const commitRename = useCallback(async (item, newName) => {
+        const trimmed = newName.trim();
+        const cb = onItemRenameRef.current;
+        // Empty or unchanged → close silently without firing the callback.
+        if (cb === undefined || trimmed === '' || trimmed === item.name) {
+            store.setEditingId(null);
+            return true;
+        }
+        const result = await cb(item, trimmed);
+        // Only an explicit `false` keeps the editor open (rejected name).
+        const accepted = result !== false;
+        if (accepted)
+            store.setEditingId(null);
+        return accepted;
+    }, [store, onItemRenameRef]);
+    const deleteItems = useCallback((items) => {
+        const cb = onItemsDeleteRef.current;
+        if (cb === undefined)
+            return;
+        const targets = resolveTargets(items);
+        if (targets.length === 0)
+            return;
+        // Move roving focus to a survivor before the data updates, so focus
+        // doesn't vanish when the deleted cells unmount.
+        const list = displayedRef.current;
+        const doomed = new Set(targets.map(it => it.id));
+        const focusedId = store.getFocusedId();
+        if (focusedId !== null && doomed.has(focusedId)) {
+            const from = list.findIndex(it => it.id === focusedId);
+            let survivor = null;
+            for (let i = from + 1; i < list.length; i += 1) {
+                const it = list[i];
+                if (it && !doomed.has(it.id)) {
+                    survivor = it.id;
+                    break;
+                }
+            }
+            if (survivor === null) {
+                for (let i = from - 1; i >= 0; i -= 1) {
+                    const it = list[i];
+                    if (it && !doomed.has(it.id)) {
+                        survivor = it.id;
+                        break;
+                    }
+                }
+            }
+            store.setFocusedId(survivor);
+        }
+        cb(targets);
+    }, [store, resolveTargets, displayedRef, onItemsDeleteRef]);
+    const createFolder = useCallback(() => {
+        onCreateFolderRef.current?.(currentFolderIdRef.current ?? null);
+    }, [onCreateFolderRef, currentFolderIdRef]);
+    const duplicateItems = useCallback((items) => {
+        const cb = onItemsDuplicateRef.current;
+        if (cb === undefined)
+            return;
+        const targets = resolveTargets(items);
+        if (targets.length === 0)
+            return;
+        cb(targets);
+    }, [resolveTargets, onItemsDuplicateRef]);
+    return useMemo(() => ({
+        canRename,
+        canDelete,
+        canCreateFolder,
+        canDuplicate,
+        beginRename,
+        commitRename,
+        cancelRename,
+        deleteItems,
+        createFolder,
+        duplicateItems,
+    }), [
+        canRename,
+        canDelete,
+        canCreateFolder,
+        canDuplicate,
+        beginRename,
+        commitRename,
+        cancelRename,
+        deleteItems,
+        createFolder,
+        duplicateItems,
+    ]);
+}
+
+export { useAssetMutations };
+//# sourceMappingURL=useAssetMutations.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetMutations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetMutations.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetMutations.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA8CA;;;;;;;;;;AAUG;AACG;AAGJ;AAEA;AACA;AACA;AACA;;;;;;;;;AAWA;AAEI;AAAW;AACX;AACA;AACF;AAIF;AAEI;;AACA;AACA;AACF;AAIF;AACE;AACF;;AAII;AACA;;AAEA;AACE;AACA;;;;AAIF;AACA;AAAc;AACd;AACF;AAIF;AAEI;;;AAEA;AACA;;;;AAGA;AACA;AACA;;AAEE;;AAEA;AACE;AACA;AACE;;;;AAIJ;AACE;AACE;AACA;AACE;;;;;AAKN;;;;AAON;;AAEA;AAEA;AAEI;;;AAEA;AACA;;;AAEF;AAIF;;;;;;;;;;;AAYG;;;;;;;;;;;AAYA;AAEL;;"}

package/dist/esm/components/editor/AssetBrowser/useAssetNavigation.js

@@ -0,0 +1,113 @@
+"use client";
+import { useEffect, useCallback, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useLatest } from '../../../hooks/useLatest/useLatest.js';
+import '../../../hooks/useBreakpoint/useBreakpoint.js';
+import './../../../assets/src/theme/lightTheme.css.ts.vanilla-Ct6f9Iym.css';
+import '../../../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 { useNavigationHistory } from '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable);
+}
+/**
+ * Folder navigation + back/forward stack + "go to parent" keyboard shortcuts,
+ * built on top of the library's `useNavigationHistory` primitive. Every handler
+ * has a stable identity (`useCallback`) and reads the latest props through
+ * `useLatest` refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetNavigation(options) {
+    const { history, path, onNavigate, onItemOpen, currentFolderId } = options;
+    const histApi = useNavigationHistory({
+        initial: currentFolderId,
+        enabled: history,
+    });
+    const { push, canGoBack, canGoForward } = histApi;
+    const histGoBack = histApi.goBack;
+    const histGoForward = histApi.goForward;
+    // Keep the back/forward stack in sync with the controlled `currentFolderId`.
+    // `useNavigationHistory` only seeds `initial` once on mount, so an out-of-band
+    // change (deep link, "reveal in browser", or a parent that updates
+    // `currentFolderId` without routing through `navigate`) would otherwise leave
+    // the stack — and `canGoBack`/`canGoForward` — stale. `push` no-ops when the
+    // entry already equals the current one, so navigate/back/forward (which leave
+    // `current === currentFolderId`) don't double-push and the forward branch
+    // survives; only a genuine external change advances the stack. This is the
+    // "mirror React state into an external store" bridge that component-patterns.md
+    // §2 lists as a legitimate `useEffect` use.
+    useEffect(() => {
+        if (!history || currentFolderId === undefined)
+            return;
+        push(currentFolderId);
+    }, [history, currentFolderId, push]);
+    const onNavigateRef = useLatest(onNavigate);
+    const onItemOpenRef = useLatest(onItemOpen);
+    const historyRef = useLatest(history);
+    const pathRef = useLatest(path);
+    const navigate = useCallback((folderId, source) => {
+        push(folderId);
+        onNavigateRef.current?.(folderId, source);
+    }, [push, onNavigateRef]);
+    const goBack = useCallback(() => {
+        const target = histGoBack();
+        if (target === undefined)
+            return;
+        onNavigateRef.current?.(target, 'back');
+    }, [histGoBack, onNavigateRef]);
+    const goForward = useCallback(() => {
+        const target = histGoForward();
+        if (target === undefined)
+            return;
+        onNavigateRef.current?.(target, 'forward');
+    }, [histGoForward, onNavigateRef]);
+    const activateItem = useCallback((item) => {
+        if (item.kind === 'folder')
+            navigate(item.id, 'open');
+        else
+            onItemOpenRef.current?.(item);
+    }, [navigate, onItemOpenRef]);
+    const handleRootKeyDown = useCallback((event) => {
+        if (!historyRef.current)
+            return;
+        if (isEditableTarget(event.target))
+            return;
+        const goToParent = event.key === 'Backspace' || (event.altKey && event.key === 'ArrowUp');
+        if (!goToParent)
+            return;
+        const currentPath = pathRef.current;
+        const parent = currentPath[currentPath.length - 2];
+        if (parent) {
+            event.preventDefault();
+            navigate(parent.id, 'breadcrumb');
+        }
+    }, [navigate, historyRef, pathRef]);
+    return useMemo(() => ({
+        navigate,
+        activateItem,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+        history,
+        handleRootKeyDown,
+    }), [
+        navigate,
+        activateItem,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+        history,
+        handleRootKeyDown,
+    ]);
+}
+
+export { useAssetNavigation };
+//# sourceMappingURL=useAssetNavigation.js.map

package/dist/esm/components/editor/AssetBrowser/useAssetNavigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetNavigation.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetNavigation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAuCA;AACE;AAAsC;AACtC;;;AAKF;AAEA;;;;;AAKG;AACG;AAGJ;;AAGE;AACA;AACD;;AAED;AACA;;;;;;;;;;;;AAaE;;;;AAIF;AACA;AACA;AACA;;;;AAME;AAIF;AACE;;;;AAGF;AAEA;AACE;;;;AAGF;AAEA;AAEI;AAA4B;;AACvB;AACP;AAIF;;;AAGI;;AACA;AAEA;;AACA;;;;AAIE;;;AAMN;;;;;;;;;AAUG;;;;;;;;;AAUA;AAEL;;"}