entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,108 @@
+"use client";
+import { useDeferredValue, useMemo } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.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 { collectTypes, shapeAssets } from './assetBrowserFilter.js';
+import { resolveThumbPx } from './assetBrowserGeometry.js';
+
+const DEFAULT_SORT = { field: 'name', direction: 'asc' };
+/**
+ * View-state aggregate for `AssetBrowser`. Wraps the five `useControlledState`
+ * pairs (view / thumbnailSize / search / filters / sort) and computes the
+ * derived values (`thumbnailSizePx`, `filterableTypes`, `displayed`,
+ * `marqueeEnabled`). Search is run through `useDeferredValue` so heavy filter
+ * + sort passes can lag behind responsive keystrokes.
+ */
+function useAssetBrowserViewState(options) {
+    const [view, setView] = useControlledState({
+        value: options.view,
+        defaultValue: options.defaultView,
+        onChange: options.onViewChange,
+        fallback: 'grid',
+    });
+    const [thumbnailSize, setThumbnailSize] = useControlledState({
+        value: options.thumbnailSize,
+        defaultValue: options.defaultThumbnailSize,
+        onChange: options.onThumbnailSizeChange,
+        fallback: 'md',
+    });
+    const [search, setSearch] = useControlledState({
+        value: options.search,
+        defaultValue: options.defaultSearch,
+        onChange: options.onSearchChange,
+        fallback: '',
+    });
+    const [filters, setFilters] = useControlledState({
+        value: options.filters,
+        defaultValue: options.defaultFilters,
+        onChange: options.onFiltersChange,
+        fallback: {},
+    });
+    const [sort, setSort] = useControlledState({
+        value: options.sort,
+        defaultValue: options.defaultSort,
+        onChange: options.onSortChange,
+        fallback: DEFAULT_SORT,
+    });
+    const deferredSearch = useDeferredValue(search);
+    const thumbnailSizePx = resolveThumbPx(thumbnailSize);
+    const marqueeEnabled = options.selectionMode === 'multiple' && options.marquee;
+    const filterableTypes = useMemo(() => options.filterableTypesProp ?? collectTypes(options.items), [options.filterableTypesProp, options.items]);
+    const displayed = useMemo(() => shapeAssets(options.items, {
+        search: deferredSearch,
+        filters,
+        sort,
+        manualSearch: options.manualSearch,
+        manualFilter: options.manualFilter,
+        manualSort: options.manualSort,
+    }), [
+        options.items,
+        deferredSearch,
+        filters,
+        sort,
+        options.manualSearch,
+        options.manualFilter,
+        options.manualSort,
+    ]);
+    return useMemo(() => ({
+        view,
+        setView,
+        thumbnailSize,
+        setThumbnailSize,
+        thumbnailSizePx,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        sort,
+        setSort,
+        filterableTypes,
+        displayed,
+        marqueeEnabled,
+    }), [
+        view,
+        setView,
+        thumbnailSize,
+        setThumbnailSize,
+        thumbnailSizePx,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        sort,
+        setSort,
+        filterableTypes,
+        displayed,
+        marqueeEnabled,
+    ]);
+}
+
+export { useAssetBrowserViewState };
+//# sourceMappingURL=useAssetBrowserViewState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserViewState.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetBrowserViewState.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAkBA;AAoDA;;;;;;AAMG;AACG;AAGJ;;;;AAIE;AACD;AACD;;;;AAKI;AACD;AACH;;;;AAIE;AACD;AACD;;;;AAIE;AACD;AACD;;;;AAIE;AACD;AAED;AACA;;AAIA;AAKA;AAGM;;;;;;AAMD;AAED;;;;AAIA;AACA;AACA;AACD;AAGH;;;;;;;;;;;;;;;AAgBG;;;;;;;;;;;;;;;AAgBA;AAEL;;"}

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 '../../../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 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":[null],"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":[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;;"}