entangle-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,192 @@
+"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 '@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';
+
+function hasFiles(event) {
+    return Array.from(event.dataTransfer.types).includes('Files');
+}
+/** True when the drag is leaving the element entirely (not into a child). */
+function leftElement(event) {
+    const related = event.relatedTarget;
+    return !(related && event.currentTarget.contains(related));
+}
+/**
+ * Drag-and-drop wiring for the AssetBrowser: internal item moves (gated by
+ * `onItemsMove`) and external file import (gated by `onFilesImport`). Every
+ * handler has a stable identity (`useCallback`) and reads the latest props
+ * through `useLatest` refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetDnd(options) {
+    const { store, mime, items, selection, currentFolderId, getDragData, onItemDragStart: cbItemDragStart, onItemDragEnd: cbItemDragEnd, onItemsMove, onFilesImport, } = options;
+    const internalEnabled = onItemsMove !== undefined;
+    const externalEnabled = onFilesImport !== undefined;
+    const mimeRef = useLatest(mime);
+    const itemsRef = useLatest(items);
+    const selectionRef = useLatest(selection);
+    const currentFolderIdRef = useLatest(currentFolderId);
+    const getDragDataRef = useLatest(getDragData);
+    const cbItemDragStartRef = useLatest(cbItemDragStart);
+    const cbItemDragEndRef = useLatest(cbItemDragEnd);
+    const onItemsMoveRef = useLatest(onItemsMove);
+    const onFilesImportRef = useLatest(onFilesImport);
+    const resolveItems = useCallback((ids) => {
+        const map = new Map(itemsRef.current.map(item => [item.id, item]));
+        return ids
+            .map(id => map.get(id))
+            .filter((item) => item !== undefined);
+    }, [itemsRef]);
+    const onItemDragStart = useCallback((item, event) => {
+        const sel = selectionRef.current;
+        const ids = sel.has(item.id) ? Array.from(sel) : [item.id];
+        const dragged = resolveItems(ids);
+        const payload = getDragDataRef.current?.(dragged) ?? {
+            [mimeRef.current]: JSON.stringify(ids),
+        };
+        for (const [type, value] of Object.entries(payload)) {
+            event.dataTransfer.setData(type, value);
+        }
+        event.dataTransfer.effectAllowed = 'copyMove';
+        store.setDrag({
+            active: true,
+            draggingIds: ids,
+            dropTargetId: null,
+            externalOver: false,
+        });
+        cbItemDragStartRef.current?.(dragged, event);
+    }, [
+        store,
+        resolveItems,
+        selectionRef,
+        getDragDataRef,
+        mimeRef,
+        cbItemDragStartRef,
+    ]);
+    const onItemDragEnd = useCallback((item, event) => {
+        const ids = store.getDrag().draggingIds;
+        const dragged = resolveItems(ids.length > 0 ? ids : [item.id]);
+        store.clearDrag();
+        cbItemDragEndRef.current?.(dragged, event);
+    }, [store, resolveItems, cbItemDragEndRef]);
+    const onFolderDragOver = useCallback((folderId, event) => {
+        const drag = store.getDrag();
+        const external = onFilesImportRef.current !== undefined && hasFiles(event);
+        const internal = onItemsMoveRef.current !== undefined && drag.active;
+        if (!external && !internal)
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = external ? 'copy' : 'move';
+        store.setDrag({
+            active: true,
+            draggingIds: drag.draggingIds,
+            dropTargetId: folderId,
+            externalOver: external,
+        });
+    }, [store, onFilesImportRef, onItemsMoveRef]);
+    const onFolderDragLeave = useCallback((folderId, event) => {
+        if (!leftElement(event))
+            return;
+        const drag = store.getDrag();
+        if (drag.dropTargetId !== folderId)
+            return;
+        store.setDrag({ ...drag, dropTargetId: null });
+    }, [store]);
+    const onFolderDrop = useCallback((folderId, event) => {
+        event.preventDefault();
+        const files = Array.from(event.dataTransfer.files);
+        const filesImport = onFilesImportRef.current;
+        const itemsMove = onItemsMoveRef.current;
+        if (files.length > 0 && filesImport) {
+            filesImport({ files, targetFolderId: folderId });
+        }
+        else if (itemsMove) {
+            const drag = store.getDrag();
+            let ids = drag.draggingIds;
+            if (ids.length === 0) {
+                const raw = event.dataTransfer.getData(mimeRef.current);
+                if (raw) {
+                    try {
+                        ids = JSON.parse(raw);
+                    }
+                    catch {
+                        ids = [];
+                    }
+                }
+            }
+            if (ids.length > 0) {
+                itemsMove({ itemIds: ids, targetFolderId: folderId });
+            }
+        }
+        store.clearDrag();
+    }, [store, onFilesImportRef, onItemsMoveRef, mimeRef]);
+    const onSurfaceDragOver = useCallback((event) => {
+        if (onFilesImportRef.current === undefined || !hasFiles(event))
+            return;
+        event.preventDefault();
+        event.dataTransfer.dropEffect = 'copy';
+        const drag = store.getDrag();
+        store.setDrag({
+            active: true,
+            draggingIds: drag.draggingIds,
+            dropTargetId: null,
+            externalOver: true,
+        });
+    }, [store, onFilesImportRef]);
+    const onSurfaceDragLeave = useCallback((event) => {
+        if (!leftElement(event))
+            return;
+        const drag = store.getDrag();
+        if (!drag.externalOver)
+            return;
+        store.setDrag({ ...drag, externalOver: false });
+    }, [store]);
+    const onSurfaceDrop = useCallback((event) => {
+        const filesImport = onFilesImportRef.current;
+        if (!filesImport)
+            return;
+        const files = Array.from(event.dataTransfer.files);
+        if (files.length === 0) {
+            store.clearDrag();
+            return;
+        }
+        event.preventDefault();
+        filesImport({
+            files,
+            targetFolderId: currentFolderIdRef.current ?? null,
+        });
+        store.clearDrag();
+    }, [store, onFilesImportRef, currentFolderIdRef]);
+    return useMemo(() => ({
+        internalEnabled,
+        externalEnabled,
+        onItemDragStart,
+        onItemDragEnd,
+        onFolderDragOver,
+        onFolderDragLeave,
+        onFolderDrop,
+        onSurfaceDragOver,
+        onSurfaceDragLeave,
+        onSurfaceDrop,
+    }), [
+        internalEnabled,
+        externalEnabled,
+        onItemDragStart,
+        onItemDragEnd,
+        onFolderDragOver,
+        onFolderDragLeave,
+        onFolderDrop,
+        onSurfaceDragOver,
+        onSurfaceDragLeave,
+        onSurfaceDrop,
+    ]);
+}
+
+export { useAssetDnd };
+//# sourceMappingURL=useAssetDnd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetDnd.js","sources":["src/components/editor/AssetBrowser/useAssetDnd.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport type { AssetItem } from './AssetBrowser.types';\nimport type { AssetDndContext } from './AssetBrowserContext';\nimport type { AssetBrowserStore } from './AssetBrowserStore';\nimport type { DragEvent } from 'react';\n\nexport interface UseAssetDndOptions {\n  store: AssetBrowserStore;\n  mime: string;\n  items: readonly AssetItem[];\n  selection: ReadonlySet<string>;\n  currentFolderId: string | undefined;\n  getDragData?: (items: AssetItem[]) => Record<string, string>;\n  onItemDragStart?: (items: AssetItem[], event: DragEvent) => void;\n  onItemDragEnd?: (items: AssetItem[], event: DragEvent) => void;\n  onItemsMove?: (payload: {\n    itemIds: string[];\n    targetFolderId: string;\n  }) => void;\n  onFilesImport?: (payload: {\n    files: File[];\n    targetFolderId: string | null;\n  }) => void;\n}\n\nfunction hasFiles(event: DragEvent): boolean {\n  return Array.from(event.dataTransfer.types).includes('Files');\n}\n\n/** True when the drag is leaving the element entirely (not into a child). */\nfunction leftElement(event: DragEvent): boolean {\n  const related = event.relatedTarget as Node | null;\n  return !(related && event.currentTarget.contains(related));\n}\n\n/**\n * Drag-and-drop wiring for the AssetBrowser: internal item moves (gated by\n * `onItemsMove`) and external file import (gated by `onFilesImport`). Every\n * handler has a stable identity (`useCallback`) and reads the latest props\n * through `useLatest` refs, matching `component-patterns.md` rules #3/#11.\n */\nexport function useAssetDnd(options: UseAssetDndOptions): AssetDndContext {\n  const {\n    store,\n    mime,\n    items,\n    selection,\n    currentFolderId,\n    getDragData,\n    onItemDragStart: cbItemDragStart,\n    onItemDragEnd: cbItemDragEnd,\n    onItemsMove,\n    onFilesImport,\n  } = options;\n\n  const internalEnabled = onItemsMove !== undefined;\n  const externalEnabled = onFilesImport !== undefined;\n\n  const mimeRef = useLatest(mime);\n  const itemsRef = useLatest(items);\n  const selectionRef = useLatest(selection);\n  const currentFolderIdRef = useLatest(currentFolderId);\n  const getDragDataRef = useLatest(getDragData);\n  const cbItemDragStartRef = useLatest(cbItemDragStart);\n  const cbItemDragEndRef = useLatest(cbItemDragEnd);\n  const onItemsMoveRef = useLatest(onItemsMove);\n  const onFilesImportRef = useLatest(onFilesImport);\n\n  const resolveItems = useCallback(\n    (ids: string[]): AssetItem[] => {\n      const map = new Map(itemsRef.current.map(item => [item.id, item]));\n      return ids\n        .map(id => map.get(id))\n        .filter((item): item is AssetItem => item !== undefined);\n    },\n    [itemsRef]\n  );\n\n  const onItemDragStart = useCallback(\n    (item: AssetItem, event: DragEvent): void => {\n      const sel = selectionRef.current;\n      const ids = sel.has(item.id) ? Array.from(sel) : [item.id];\n      const dragged = resolveItems(ids);\n      const payload = getDragDataRef.current?.(dragged) ?? {\n        [mimeRef.current]: JSON.stringify(ids),\n      };\n      for (const [type, value] of Object.entries(payload)) {\n        event.dataTransfer.setData(type, value);\n      }\n      event.dataTransfer.effectAllowed = 'copyMove';\n      store.setDrag({\n        active: true,\n        draggingIds: ids,\n        dropTargetId: null,\n        externalOver: false,\n      });\n      cbItemDragStartRef.current?.(dragged, event);\n    },\n    [\n      store,\n      resolveItems,\n      selectionRef,\n      getDragDataRef,\n      mimeRef,\n      cbItemDragStartRef,\n    ]\n  );\n\n  const onItemDragEnd = useCallback(\n    (item: AssetItem, event: DragEvent): void => {\n      const ids = store.getDrag().draggingIds;\n      const dragged = resolveItems(ids.length > 0 ? ids : [item.id]);\n      store.clearDrag();\n      cbItemDragEndRef.current?.(dragged, event);\n    },\n    [store, resolveItems, cbItemDragEndRef]\n  );\n\n  const onFolderDragOver = useCallback(\n    (folderId: string, event: DragEvent): void => {\n      const drag = store.getDrag();\n      const external =\n        onFilesImportRef.current !== undefined && hasFiles(event);\n      const internal = onItemsMoveRef.current !== undefined && drag.active;\n      if (!external && !internal) return;\n      event.preventDefault();\n      event.dataTransfer.dropEffect = external ? 'copy' : 'move';\n      store.setDrag({\n        active: true,\n        draggingIds: drag.draggingIds,\n        dropTargetId: folderId,\n        externalOver: external,\n      });\n    },\n    [store, onFilesImportRef, onItemsMoveRef]\n  );\n\n  const onFolderDragLeave = useCallback(\n    (folderId: string, event: DragEvent): void => {\n      if (!leftElement(event)) return;\n      const drag = store.getDrag();\n      if (drag.dropTargetId !== folderId) return;\n      store.setDrag({ ...drag, dropTargetId: null });\n    },\n    [store]\n  );\n\n  const onFolderDrop = useCallback(\n    (folderId: string, event: DragEvent): void => {\n      event.preventDefault();\n      const files = Array.from(event.dataTransfer.files);\n      const filesImport = onFilesImportRef.current;\n      const itemsMove = onItemsMoveRef.current;\n      if (files.length > 0 && filesImport) {\n        filesImport({ files, targetFolderId: folderId });\n      } else if (itemsMove) {\n        const drag = store.getDrag();\n        let ids = drag.draggingIds;\n        if (ids.length === 0) {\n          const raw = event.dataTransfer.getData(mimeRef.current);\n          if (raw) {\n            try {\n              ids = JSON.parse(raw) as string[];\n            } catch {\n              ids = [];\n            }\n          }\n        }\n        if (ids.length > 0) {\n          itemsMove({ itemIds: ids, targetFolderId: folderId });\n        }\n      }\n      store.clearDrag();\n    },\n    [store, onFilesImportRef, onItemsMoveRef, mimeRef]\n  );\n\n  const onSurfaceDragOver = useCallback(\n    (event: DragEvent): void => {\n      if (onFilesImportRef.current === undefined || !hasFiles(event)) return;\n      event.preventDefault();\n      event.dataTransfer.dropEffect = 'copy';\n      const drag = store.getDrag();\n      store.setDrag({\n        active: true,\n        draggingIds: drag.draggingIds,\n        dropTargetId: null,\n        externalOver: true,\n      });\n    },\n    [store, onFilesImportRef]\n  );\n\n  const onSurfaceDragLeave = useCallback(\n    (event: DragEvent): void => {\n      if (!leftElement(event)) return;\n      const drag = store.getDrag();\n      if (!drag.externalOver) return;\n      store.setDrag({ ...drag, externalOver: false });\n    },\n    [store]\n  );\n\n  const onSurfaceDrop = useCallback(\n    (event: DragEvent): void => {\n      const filesImport = onFilesImportRef.current;\n      if (!filesImport) return;\n      const files = Array.from(event.dataTransfer.files);\n      if (files.length === 0) {\n        store.clearDrag();\n        return;\n      }\n      event.preventDefault();\n      filesImport({\n        files,\n        targetFolderId: currentFolderIdRef.current ?? null,\n      });\n      store.clearDrag();\n    },\n    [store, onFilesImportRef, currentFolderIdRef]\n  );\n\n  return useMemo<AssetDndContext>(\n    () => ({\n      internalEnabled,\n      externalEnabled,\n      onItemDragStart,\n      onItemDragEnd,\n      onFolderDragOver,\n      onFolderDragLeave,\n      onFolderDrop,\n      onSurfaceDragOver,\n      onSurfaceDragLeave,\n      onSurfaceDrop,\n    }),\n    [\n      internalEnabled,\n      externalEnabled,\n      onItemDragStart,\n      onItemDragEnd,\n      onFolderDragOver,\n      onFolderDragLeave,\n      onFolderDrop,\n      onSurfaceDragOver,\n      onSurfaceDragLeave,\n      onSurfaceDrop,\n    ]\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AA8BA;AACE;AACF;AAEA;AACA;AACE;AACA;AACF;AAEA;;;;;AAKG;AACG;;AAcJ;AACA;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;AAGI;;;AAGF;;AAME;;AAEA;;;;AAIA;;;AAGA;;AAEE;AACA;AACA;AACA;AACD;;AAEH;;;;;;;AAQC;;;;;;;;AAeC;AACA;;AAGA;;;AAEA;;AAEE;;AAEA;AACA;AACD;;;AAOD;;AACA;AACA;;AACA;AACF;;;AAOE;AACA;AACA;;;;;AAIE;AACA;AACA;AACE;;AAEE;AACE;;AACA;;;;;AAKN;;;;;;AASN;;;;AAII;AACA;;AAEE;;AAEA;AACA;AACD;AACH;AAIF;AAEI;;AACA;;;AAEA;AACF;AAIF;AAEI;AACA;;AACA;AACA;;;;;AAKA;;AAEE;AACD;;;AAML;;;;;;;;;;;AAYG;;;;;;;;;;;AAYA;AAEL;;"}

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":["'use client';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { nextGridIndex } from './assetBrowserKeyboard';\n\nimport type { AssetItem } from './AssetBrowser.types';\nimport type { AssetBrowserStore } from './AssetBrowserStore';\nimport type { AssetGridWindow } from './useAssetGridVirtualizer';\nimport type { KeyboardEvent, RefObject } from 'react';\n\nexport interface UseAssetGridKeyboardNavOptions {\n  store: AssetBrowserStore;\n  items: readonly AssetItem[];\n  /** Current windowed layout (columns, rowHeight). */\n  win: AssetGridWindow;\n  /** The grid scroller — used to derive `rowsPerPage` from clientHeight. */\n  scrollerRef: RefObject<HTMLElement | null>;\n  selectionMode: 'single' | 'multiple' | false;\n  selectAll: () => void;\n  clearSelection: () => void;\n  activateItem: (item: AssetItem) => void;\n  toggleSelectId: (id: string) => void;\n  selectByKeyboard: (index: number, extend: boolean) => void;\n  /** Bring the row containing the given item index into view. */\n  scrollIndexIntoView: (index: number, w: AssetGridWindow) => void;\n}\n\nexport interface AssetGridKeyboardNav {\n  onKeyDown: (event: KeyboardEvent) => void;\n}\n\n/**\n * 2D grid keyboard navigation for `AssetBrowserGrid`. Handles arrows, Home/End,\n * PageUp/PageDown, Enter (activate), Space (toggle), Ctrl/Cmd+A (select all),\n * Escape (clear). `onKeyDown` is a `useCallback` — the selection/navigation\n * callbacks it depends on are themselves stable, and the handler is only spread\n * onto the grid `onKeyDown` so re-attaching on layout changes is free.\n *\n * Alt+ArrowUp is intentionally **not** handled here — it bubbles to the root's\n * \"go to parent\" handler when `history` is on.\n */\nexport function useAssetGridKeyboardNav(\n  options: UseAssetGridKeyboardNavOptions\n): AssetGridKeyboardNav {\n  const {\n    store,\n    items,\n    win,\n    scrollerRef,\n    selectionMode,\n    selectAll,\n    clearSelection,\n    activateItem,\n    toggleSelectId,\n    selectByKeyboard,\n    scrollIndexIntoView,\n  } = options;\n\n  const indexById = useMemo(() => {\n    const map = new Map<string, number>();\n    items.forEach((item, i) => map.set(item.id, i));\n    return map;\n  }, [items]);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent): void => {\n      const count = items.length;\n      if (count === 0) return;\n      const key = event.key;\n      // Let Alt+ArrowUp bubble to the root's \"go to parent\" handler.\n      if (event.altKey && key === 'ArrowUp') return;\n      const focusedId = store.getFocusedId();\n      const current = focusedId ? (indexById.get(focusedId) ?? -1) : -1;\n      const multiple = selectionMode === 'multiple';\n\n      if ((event.ctrlKey || event.metaKey) && (key === 'a' || key === 'A')) {\n        event.preventDefault();\n        selectAll();\n        return;\n      }\n      if (key === 'Escape') {\n        clearSelection();\n        return;\n      }\n      if (key === 'Enter') {\n        const item = current >= 0 ? items[current] : undefined;\n        if (item) {\n          event.preventDefault();\n          activateItem(item);\n        }\n        return;\n      }\n      if (key === ' ') {\n        const item = current >= 0 ? items[current] : undefined;\n        if (item) {\n          event.preventDefault();\n          toggleSelectId(item.id);\n        }\n        return;\n      }\n\n      const rowsPerPage = Math.max(\n        1,\n        Math.floor(\n          (scrollerRef.current?.clientHeight ?? win.rowHeight) / win.rowHeight\n        )\n      );\n      const next = nextGridIndex(current, key, {\n        columns: win.columns,\n        count,\n        rowsPerPage,\n      });\n      const target = next >= 0 ? items[next] : undefined;\n      if (next !== current && target) {\n        event.preventDefault();\n        store.setFocusedId(target.id);\n        scrollIndexIntoView(next, win);\n        if (selectionMode !== false) {\n          selectByKeyboard(next, multiple && event.shiftKey);\n        }\n      }\n    },\n    [\n      store,\n      items,\n      win,\n      scrollerRef,\n      selectionMode,\n      indexById,\n      selectAll,\n      clearSelection,\n      activateItem,\n      toggleSelectId,\n      selectByKeyboard,\n      scrollIndexIntoView,\n    ]\n  );\n\n  return { onKeyDown };\n}\n"],"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 '@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 { 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":["'use client';\n\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { useResizeObserver } from '@/hooks';\n\nimport { columnsFor, rowHeight as rowHeightFor } from './assetBrowserGeometry';\n\nimport type { RefObject } from 'react';\n\nexport interface UseAssetGridVirtualizerOptions {\n  containerRef: RefObject<HTMLElement | null>;\n  count: number;\n  thumbPx: number;\n  overscanRows: number;\n  /** When false, the window spans the whole list (no virtualization). */\n  enabled: boolean;\n}\n\nexport interface AssetGridWindow {\n  columns: number;\n  rowHeight: number;\n  totalRows: number;\n  totalHeight: number;\n  /** First rendered item index (row-aligned). */\n  startIndex: number;\n  /** One past the last rendered item index. */\n  endIndex: number;\n  /** Pixel offset of the rendered window from the top. */\n  offsetY: number;\n  /** Whether windowing is currently active. */\n  windowed: boolean;\n}\n\n/**\n * Windowed grid math. Tracks container width + height via `useResizeObserver`\n * and scroll position via a throttled (rAF) scroll listener, then derives the\n * row-aligned slice of items to render.\n *\n * When `enabled` is false it still reports `columns`/`rowHeight` (needed for\n * keyboard navigation) but renders the whole list.\n */\nexport function useAssetGridVirtualizer(\n  options: UseAssetGridVirtualizerOptions\n): AssetGridWindow {\n  const { containerRef, count, thumbPx, overscanRows, enabled } = options;\n  const [size, setSize] = useState({ width: 0, height: 0 });\n  const [scrollTop, setScrollTop] = useState(0);\n\n  useResizeObserver(containerRef, entry => {\n    setSize({\n      width: entry.contentRect.width,\n      height: entry.contentRect.height,\n    });\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el || !enabled) return;\n    let raf = 0;\n    const onScroll = (): void => {\n      cancelAnimationFrame(raf);\n      raf = requestAnimationFrame(() => {\n        setScrollTop(el.scrollTop);\n      });\n    };\n    el.addEventListener('scroll', onScroll, { passive: true });\n    return () => {\n      el.removeEventListener('scroll', onScroll);\n      cancelAnimationFrame(raf);\n    };\n  }, [containerRef, enabled]);\n\n  return useMemo<AssetGridWindow>(() => {\n    const columns = columnsFor(size.width, thumbPx);\n    const rh = rowHeightFor(thumbPx);\n    const totalRows = Math.ceil(count / columns);\n    const totalHeight = totalRows * rh;\n\n    if (!enabled) {\n      return {\n        columns,\n        rowHeight: rh,\n        totalRows,\n        totalHeight,\n        startIndex: 0,\n        endIndex: count,\n        offsetY: 0,\n        windowed: false,\n      };\n    }\n\n    const startRow = Math.max(0, Math.floor(scrollTop / rh) - overscanRows);\n    const viewportRows = Math.ceil((size.height || rh) / rh);\n    const endRow = Math.min(\n      totalRows,\n      startRow + viewportRows + overscanRows * 2\n    );\n\n    return {\n      columns,\n      rowHeight: rh,\n      totalRows,\n      totalHeight,\n      startIndex: startRow * columns,\n      endIndex: Math.min(count, endRow * columns),\n      offsetY: startRow * rh,\n      windowed: true,\n    };\n  }, [\n    size.width,\n    size.height,\n    scrollTop,\n    count,\n    thumbPx,\n    overscanRows,\n    enabled,\n  ]);\n}\n"],"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 '@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 { 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":["'use client';\n\nimport { useCallback, useEffect, useRef } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport { useAssetBrowserStore } from './AssetBrowserContext';\nimport {\n  itemRect,\n  rectFromPoints,\n  rectsIntersect,\n} from './assetBrowserGeometry';\n\nimport type { AssetItem } from './AssetBrowser.types';\nimport type { PointerEvent, RefObject } from 'react';\n\nexport interface UseAssetMarqueeGestureOptions {\n  /** The scroll container — also the pointer-capture target and coordinate origin. */\n  scrollerRef: RefObject<HTMLElement | null>;\n  /** When false, pointer-down is ignored. */\n  enabled: boolean;\n  /** Currently displayed items, in display order. */\n  items: readonly AssetItem[];\n  /** Current grid column count (from the virtualizer). */\n  columns: number;\n  /** Current thumbnail pixel size. */\n  thumbPx: number;\n  /** Called once on pointer-up with the items that intersect the marquee rect. */\n  commitMarquee: (ids: string[], additive: boolean) => void;\n}\n\nexport interface AssetMarqueeGestureHandlers {\n  onPointerDown: (event: PointerEvent) => void;\n  onPointerMove: (event: PointerEvent) => void;\n  onPointerUp: (event: PointerEvent) => void;\n  /** Abort an in-flight marquee (system gesture cancel, touch interruption). */\n  onPointerCancel: (event: PointerEvent) => void;\n}\n\ninterface MarqueeDrag {\n  startX: number;\n  startY: number;\n  additive: boolean;\n  moved: boolean;\n}\n\n/**\n * Pointer-driven rubber-band selection for the grid. The active rect lives in\n * the AssetBrowser store (so the marquee overlay can subscribe via its own\n * slice), while pointer-move updates are RAF-throttled. The hit-test runs once\n * on pointer-up and reports through `commitMarquee`.\n *\n * Handlers have stable identities (`useCallback`) and read the latest props\n * through `useLatest` refs, matching `component-patterns.md` rules #3/#11.\n */\nexport function useAssetMarqueeGesture(\n  options: UseAssetMarqueeGestureOptions\n): AssetMarqueeGestureHandlers {\n  const { scrollerRef, enabled, items, columns, thumbPx, commitMarquee } =\n    options;\n  const store = useAssetBrowserStore();\n\n  const dragRef = useRef<MarqueeDrag | null>(null);\n  const rafRef = useRef(0);\n\n  const enabledRef = useLatest(enabled);\n  const itemsRef = useLatest(items);\n  const columnsRef = useLatest(columns);\n  const thumbPxRef = useLatest(thumbPx);\n  const commitMarqueeRef = useLatest(commitMarquee);\n\n  const contentPoint = useCallback(\n    (event: PointerEvent): { x: number; y: number } => {\n      const el = scrollerRef.current;\n      if (!el) return { x: 0, y: 0 };\n      const rect = el.getBoundingClientRect();\n      return {\n        x: event.clientX - rect.left + el.scrollLeft,\n        y: event.clientY - rect.top + el.scrollTop,\n      };\n    },\n    [scrollerRef]\n  );\n\n  const onPointerDown = useCallback(\n    (event: PointerEvent): void => {\n      if (event.button !== 0 || !enabledRef.current) return;\n      // Started on an item, not empty space — let the item handle the click.\n      if (event.target !== event.currentTarget) return;\n      const p = contentPoint(event);\n      dragRef.current = {\n        startX: p.x,\n        startY: p.y,\n        additive: event.ctrlKey || event.metaKey,\n        moved: false,\n      };\n      scrollerRef.current?.setPointerCapture(event.pointerId);\n      store.setMarquee({\n        active: true,\n        rect: { x: p.x, y: p.y, width: 0, height: 0 },\n        additive: dragRef.current.additive,\n      });\n    },\n    [store, scrollerRef, contentPoint, enabledRef]\n  );\n\n  const onPointerMove = useCallback(\n    (event: PointerEvent): void => {\n      const drag = dragRef.current;\n      if (!drag) return;\n      drag.moved = true;\n      cancelAnimationFrame(rafRef.current);\n      const p = contentPoint(event);\n      rafRef.current = requestAnimationFrame(() => {\n        store.setMarquee({\n          active: true,\n          rect: rectFromPoints(drag.startX, drag.startY, p.x, p.y),\n          additive: drag.additive,\n        });\n      });\n    },\n    [store, contentPoint]\n  );\n\n  const onPointerUp = useCallback(\n    (event: PointerEvent): void => {\n      const drag = dragRef.current;\n      if (!drag) return;\n      cancelAnimationFrame(rafRef.current);\n      dragRef.current = null;\n      scrollerRef.current?.releasePointerCapture(event.pointerId);\n      const p = contentPoint(event);\n      const rect = rectFromPoints(drag.startX, drag.startY, p.x, p.y);\n      const ids: string[] = [];\n      const currentItems = itemsRef.current;\n      for (let i = 0; i < currentItems.length; i += 1) {\n        const item = currentItems[i];\n        if (!item || item.selectable === false) continue;\n        if (\n          rectsIntersect(\n            rect,\n            itemRect(i, columnsRef.current, thumbPxRef.current)\n          )\n        ) {\n          ids.push(item.id);\n        }\n      }\n      commitMarqueeRef.current(ids, drag.additive);\n      store.clearMarquee();\n    },\n    [\n      store,\n      scrollerRef,\n      contentPoint,\n      itemsRef,\n      columnsRef,\n      thumbPxRef,\n      commitMarqueeRef,\n    ]\n  );\n\n  // Abort an in-flight marquee without committing a selection. Fires on a\n  // system/touch `pointercancel`, which would otherwise leave `dragRef` set and\n  // the marquee rect stuck active in the store until the next pointer-down.\n  const onPointerCancel = useCallback(\n    (event: PointerEvent): void => {\n      if (!dragRef.current) return;\n      cancelAnimationFrame(rafRef.current);\n      dragRef.current = null;\n      scrollerRef.current?.releasePointerCapture(event.pointerId);\n      store.clearMarquee();\n    },\n    [store, scrollerRef]\n  );\n\n  // Cancel any in-flight RAF on unmount.\n  useEffect(\n    () => () => {\n      cancelAnimationFrame(rafRef.current);\n    },\n    []\n  );\n\n  return { onPointerDown, onPointerMove, onPointerUp, onPointerCancel };\n}\n"],"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 '@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';
+
+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":["'use client';\n\nimport { useCallback } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport type { AssetBrowserStore } from './AssetBrowserStore';\nimport type { AssetMutationsApi } from './useAssetMutations';\nimport type { KeyboardEvent } from 'react';\n\nexport interface UseAssetMutationKeyboardOptions {\n  store: AssetBrowserStore;\n  mutations: AssetMutationsApi;\n  /** Live selection set — the F2 rename target falls back to a single selection. */\n  selection: ReadonlySet<string>;\n}\n\nexport interface AssetMutationKeyboard {\n  /** Attach to the AssetBrowser root: F2 / Delete / Ctrl+D, view-agnostic. */\n  onKeyDown: (event: KeyboardEvent) => void;\n}\n\nfunction isEditableTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  return (\n    target.tagName === 'INPUT' ||\n    target.tagName === 'TEXTAREA' ||\n    target.isContentEditable\n  );\n}\n\n/**\n * View-agnostic mutation keyboard shortcuts. The same handler is exposed through\n * context (`mutationKeyDown`) and attached by each view to its own scroller —\n * the grid (merged with its 2D nav) and the list wrapper — so the shortcuts\n * work identically in both without relying on event bubbling to the root.\n *\n * - **F2** — inline-rename the focused item, or the sole selected item (the list\n *   has no store roving-focus, so it falls back to a single selection).\n * - **Delete** (and **⌘⌫** on macOS) — delete the selection. Plain `Backspace`\n *   stays reserved for the root's \"go to parent\" shortcut.\n * - **Ctrl/⌘+D** — duplicate the selection.\n *\n * Each shortcut is a no-op unless its mutation callback is wired, and all are\n * skipped while the focus is in an editable element (search box, rename field).\n * The handler is `useCallback`-stable; live state is read through `useLatest`.\n */\nexport function useAssetMutationKeyboard(\n  options: UseAssetMutationKeyboardOptions\n): AssetMutationKeyboard {\n  const { store, mutations } = options;\n  const mutationsRef = useLatest(mutations);\n  const selectionRef = useLatest(options.selection);\n\n  const onKeyDown = useCallback(\n    (event: KeyboardEvent): void => {\n      if (isEditableTarget(event.target)) return;\n      const key = event.key;\n      const m = mutationsRef.current;\n\n      if (\n        (event.ctrlKey || event.metaKey) &&\n        (key === 'd' || key === 'D') &&\n        m.canDuplicate\n      ) {\n        event.preventDefault();\n        m.duplicateItems();\n        return;\n      }\n      if (key === 'F2' && m.canRename) {\n        const focusedId = store.getFocusedId();\n        const sel = selectionRef.current;\n        const targetId =\n          focusedId ?? (sel.size === 1 ? [...sel][0] : undefined);\n        if (targetId !== undefined) {\n          event.preventDefault();\n          m.beginRename(targetId);\n        }\n        return;\n      }\n      if (\n        (key === 'Delete' || (event.metaKey && key === 'Backspace')) &&\n        m.canDelete\n      ) {\n        event.preventDefault();\n        m.deleteItems();\n      }\n    },\n    [store, mutationsRef, selectionRef]\n  );\n\n  return { onKeyDown };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBA;AACE;AAAsC;AACtC;;;AAKF;AAEA;;;;;;;;;;;;;;;AAeG;AACG;AAGJ;AACA;;AAGA;AAEI;;AACA;AACA;;AAIE;;;;;;;AAQA;AACA;;AAGA;;AAEE;;;;AAIJ;;;;;;;AAYN;;"}