entangle-ui 0.9.0 → 0.10.0

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

@@ -0,0 +1,70 @@
+/** Thumbnail edge length (px) for the named scales. */
+const THUMB_PX = {
+    sm: 72,
+    md: 104,
+    lg: 144,
+};
+const CELL_PADDING = 6;
+const LABEL_HEIGHT = 32;
+const GRID_GAP = 8;
+function resolveThumbPx(size) {
+    if (typeof size === 'number')
+        return Math.max(32, size);
+    return THUMB_PX[size];
+}
+function cellWidth(thumbPx) {
+    return thumbPx + CELL_PADDING * 2 + 2; // + border
+}
+function cellHeight(thumbPx) {
+    return thumbPx + CELL_PADDING * 2 + LABEL_HEIGHT + 2;
+}
+function rowHeight(thumbPx) {
+    return cellHeight(thumbPx) + GRID_GAP;
+}
+/** How many columns fit in `width` px of usable (padding-excluded) space. */
+function columnsFor(width, thumbPx) {
+    if (width <= 0)
+        return 1;
+    const stride = cellWidth(thumbPx) + GRID_GAP;
+    return Math.max(1, Math.floor((width + GRID_GAP) / stride));
+}
+/** Content-space rectangle of the item at `index` for a given column count. */
+function itemRect(index, columns, thumbPx) {
+    const cols = Math.max(1, columns);
+    const col = index % cols;
+    const row = Math.floor(index / cols);
+    const stride = cellWidth(thumbPx) + GRID_GAP;
+    return {
+        x: col * stride,
+        y: row * rowHeight(thumbPx),
+        width: cellWidth(thumbPx),
+        height: cellHeight(thumbPx),
+    };
+}
+function rectsIntersect(a, b) {
+    return (a.x < b.x + b.width &&
+        a.x + a.width > b.x &&
+        a.y < b.y + b.height &&
+        a.y + a.height > b.y);
+}
+/**
+ * Stable DOM id for a grid cell, namespaced by the grid's `useId`. Used to
+ * wire the grid's `aria-activedescendant` to the roving-focus cell. CSS.escape
+ * is unnecessary — this is set on the element's `id`/attribute as a raw value,
+ * never used in a selector.
+ */
+function cellDomId(gridId, assetId) {
+    return `${gridId}-cell-${assetId}`;
+}
+/** Normalize two content-space points into a positive-size rectangle. */
+function rectFromPoints(ax, ay, bx, by) {
+    return {
+        x: Math.min(ax, bx),
+        y: Math.min(ay, by),
+        width: Math.abs(ax - bx),
+        height: Math.abs(ay - by),
+    };
+}
+
+export { CELL_PADDING, GRID_GAP, LABEL_HEIGHT, THUMB_PX, cellDomId, cellHeight, cellWidth, columnsFor, itemRect, rectFromPoints, rectsIntersect, resolveThumbPx, rowHeight };
+//# sourceMappingURL=assetBrowserGeometry.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserGeometry.js","sources":["../../../../../../src/components/editor/AssetBrowser/assetBrowserGeometry.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+/**
+ * Pure 2D grid keyboard navigation. Given the focused index and a key, return
+ * the next index. Returns the clamped target, or the original index when the
+ * key is not a navigation key or the move would leave the grid.
+ */
+function nextGridIndex(current, key, params) {
+    const { count } = params;
+    if (count === 0)
+        return -1;
+    const columns = Math.max(1, params.columns);
+    const rowsPerPage = Math.max(1, params.rowsPerPage);
+    const last = count - 1;
+    const clamp = (n) => Math.min(last, Math.max(0, n));
+    // Starting from "nothing focused", any nav key lands on the first item.
+    if (current < 0) {
+        switch (key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+            case 'ArrowLeft':
+            case 'ArrowUp':
+            case 'Home':
+            case 'PageUp':
+                return 0;
+            case 'End':
+            case 'PageDown':
+                return last;
+            default:
+                return current;
+        }
+    }
+    switch (key) {
+        case 'ArrowRight':
+            return current < last ? current + 1 : current;
+        case 'ArrowLeft':
+            return current > 0 ? current - 1 : current;
+        case 'ArrowDown': {
+            const target = current + columns;
+            return target <= last ? target : current;
+        }
+        case 'ArrowUp': {
+            const target = current - columns;
+            return target >= 0 ? target : current;
+        }
+        case 'Home':
+            return 0;
+        case 'End':
+            return last;
+        case 'PageDown':
+            return clamp(current + columns * rowsPerPage);
+        case 'PageUp':
+            return clamp(current - columns * rowsPerPage);
+        default:
+            return current;
+    }
+}
+/** Inclusive index range between two indices, regardless of order. */
+function indexRange(a, b) {
+    return a <= b ? [a, b] : [b, a];
+}
+
+export { indexRange, nextGridIndex };
+//# sourceMappingURL=assetBrowserKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserKeyboard.js","sources":["../../../../../../src/components/editor/AssetBrowser/assetBrowserKeyboard.ts"],"sourcesContent":[null],"names":[],"mappings":"AASA;;;;AAIG;SACa,aAAa,CAC3B,OAAe,EACf,GAAW,EACX,MAAqB,EAAA;AAErB,IAAA,MAAM,EAAE,KAAK,EAAE,GAAG,MAAM;IACxB,IAAI,KAAK,KAAK,CAAC;QAAE,OAAO,EAAE;AAE1B,IAAA,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC;AAC3C,IAAA,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC;AACnD,IAAA,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC;IACtB,MAAM,KAAK,GAAG,CAAC,CAAS,KAAa,IAAI,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;;AAGnE,IAAA,IAAI,OAAO,GAAG,CAAC,EAAE;QACf,QAAQ,GAAG;AACT,YAAA,KAAK,YAAY;AACjB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,WAAW;AAChB,YAAA,KAAK,SAAS;AACd,YAAA,KAAK,MAAM;AACX,YAAA,KAAK,QAAQ;AACX,gBAAA,OAAO,CAAC;AACV,YAAA,KAAK,KAAK;AACV,YAAA,KAAK,UAAU;AACb,gBAAA,OAAO,IAAI;AACb,YAAA;AACE,gBAAA,OAAO,OAAO;;IAEpB;IAEA,QAAQ,GAAG;AACT,QAAA,KAAK,YAAY;AACf,YAAA,OAAO,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO;AAC/C,QAAA,KAAK,WAAW;AACd,YAAA,OAAO,OAAO,GAAG,CAAC,GAAG,OAAO,GAAG,CAAC,GAAG,OAAO;QAC5C,KAAK,WAAW,EAAE;AAChB,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO;YAChC,OAAO,MAAM,IAAI,IAAI,GAAG,MAAM,GAAG,OAAO;QAC1C;QACA,KAAK,SAAS,EAAE;AACd,YAAA,MAAM,MAAM,GAAG,OAAO,GAAG,OAAO;YAChC,OAAO,MAAM,IAAI,CAAC,GAAG,MAAM,GAAG,OAAO;QACvC;AACA,QAAA,KAAK,MAAM;AACT,YAAA,OAAO,CAAC;AACV,QAAA,KAAK,KAAK;AACR,YAAA,OAAO,IAAI;AACb,QAAA,KAAK,UAAU;YACb,OAAO,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAC/C,QAAA,KAAK,QAAQ;YACX,OAAO,KAAK,CAAC,OAAO,GAAG,OAAO,GAAG,WAAW,CAAC;AAC/C,QAAA;AACE,YAAA,OAAO,OAAO;;AAEpB;AAEA;AACM,SAAU,UAAU,CAAC,CAAS,EAAE,CAAS,EAAA;AAC7C,IAAA,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC;AACjC;;;;"}

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

@@ -0,0 +1,52 @@
+const DEFAULT_ASSET_BROWSER_LABELS = {
+    searchPlaceholder: 'Search assets…',
+    viewModeAria: 'View mode',
+    gridViewTooltip: 'Grid view',
+    listViewTooltip: 'List view',
+    gridAria: 'Assets',
+    sort: 'Sort',
+    sortAscending: 'Ascending',
+    sortDescending: 'Descending',
+    filter: 'Filter',
+    back: 'Back',
+    forward: 'Forward',
+    thumbnailSizeAria: 'Thumbnail size',
+    empty: 'This folder is empty.',
+    loading: 'Loading assets…',
+    errorTitle: 'Couldn’t load assets',
+    errorDescription: 'Something went wrong while loading this folder.',
+    retry: 'Retry',
+    importOverlay: 'Drop files to import',
+    folder: 'Folder',
+    rename: 'Rename',
+    delete: 'Delete',
+    duplicate: 'Duplicate',
+    newFolder: 'New folder',
+    sortFields: {
+        name: 'Name',
+        type: 'Type',
+        size: 'Size',
+        modified: 'Modified',
+    },
+    itemCount: count => `${count} item${count === 1 ? '' : 's'}`,
+    selectedCount: count => `, ${count} selected`,
+};
+/**
+ * Merge a consumer's partial `labels` onto the English defaults. `sortFields`
+ * is merged one level deep so overriding a single column label keeps the rest.
+ */
+function resolveLabels(overrides) {
+    if (!overrides)
+        return DEFAULT_ASSET_BROWSER_LABELS;
+    return {
+        ...DEFAULT_ASSET_BROWSER_LABELS,
+        ...overrides,
+        sortFields: {
+            ...DEFAULT_ASSET_BROWSER_LABELS.sortFields,
+            ...overrides.sortFields,
+        },
+    };
+}
+
+export { DEFAULT_ASSET_BROWSER_LABELS, resolveLabels };
+//# sourceMappingURL=assetBrowserLabels.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"assetBrowserLabels.js","sources":["../../../../../../src/components/editor/AssetBrowser/assetBrowserLabels.ts"],"sourcesContent":[null],"names":[],"mappings":"AAmEO,MAAM,4BAA4B,GAAuB;AAC9D,IAAA,iBAAiB,EAAE,gBAAgB;AACnC,IAAA,YAAY,EAAE,WAAW;AACzB,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,eAAe,EAAE,WAAW;AAC5B,IAAA,QAAQ,EAAE,QAAQ;AAClB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,aAAa,EAAE,WAAW;AAC1B,IAAA,cAAc,EAAE,YAAY;AAC5B,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,iBAAiB,EAAE,gBAAgB;AACnC,IAAA,KAAK,EAAE,uBAAuB;AAC9B,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,UAAU,EAAE,sBAAsB;AAClC,IAAA,gBAAgB,EAAE,iDAAiD;AACnE,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,aAAa,EAAE,sBAAsB;AACrC,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,UAAU,EAAE;AACV,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,IAAI,EAAE,MAAM;AACZ,QAAA,QAAQ,EAAE,UAAU;AACrB,KAAA;AACD,IAAA,SAAS,EAAE,KAAK,IAAI,CAAA,EAAG,KAAK,CAAA,KAAA,EAAQ,KAAK,KAAK,CAAC,GAAG,EAAE,GAAG,GAAG,CAAA,CAAE;AAC5D,IAAA,aAAa,EAAE,KAAK,IAAI,CAAA,EAAA,EAAK,KAAK,CAAA,SAAA,CAAW;;AAG/C;;;AAGG;AACG,SAAU,aAAa,CAC3B,SAAkD,EAAA;AAElD,IAAA,IAAI,CAAC,SAAS;AAAE,QAAA,OAAO,4BAA4B;IACnD,OAAO;AACL,QAAA,GAAG,4BAA4B;AAC/B,QAAA,GAAG,SAAS;AACZ,QAAA,UAAU,EAAE;YACV,GAAG,4BAA4B,CAAC,UAAU;YAC1C,GAAG,SAAS,CAAC,UAAU;AACxB,SAAA;KACF;AACH;;;;"}

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

@@ -0,0 +1,18 @@
+/**
+ * Symbol marker identifying an AssetBrowser compound slot. Survives
+ * `React.memo`, function wrapping, and minification — unlike `displayName`.
+ */
+const ASSET_BROWSER_SLOT = Symbol.for('etui.assetBrowser.slot');
+/** Tags a component function with its slot kind. */
+function markSlot(component, kind) {
+    component[ASSET_BROWSER_SLOT] = kind;
+    return component;
+}
+/** Reads the slot kind off a React element's component type, or `null`. */
+function getSlotKind(el) {
+    const type = el.type;
+    return type?.[ASSET_BROWSER_SLOT] ?? null;
+}
+
+export { ASSET_BROWSER_SLOT, getSlotKind, markSlot };
+//# sourceMappingURL=slots.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slots.js","sources":["../../../../../../src/components/editor/AssetBrowser/slots.ts"],"sourcesContent":[null],"names":[],"mappings":"AAEA;;;AAGG;AACI,MAAM,kBAAkB,GAAkB,MAAM,CAAC,GAAG,CACzD,wBAAwB;AAS1B;AACM,SAAU,QAAQ,CAAI,SAAY,EAAE,IAA0B,EAAA;AACjE,IAAA,SAAmC,CAAC,kBAAkB,CAAC,GAAG,IAAI;AAC/D,IAAA,OAAO,SAAS;AAClB;AAEA;AACM,SAAU,WAAW,CACzB,EAAsB,EAAA;AAEtB,IAAA,MAAM,IAAI,GAAG,EAAE,CAAC,IAA8C;AAC9D,IAAA,OAAO,IAAI,GAAG,kBAAkB,CAAC,IAAI,IAAI;AAC3C;;;;"}

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

@@ -0,0 +1,19 @@
+"use client";
+import { useAssetBrowserContext, useAssetSelection } from './AssetBrowserContext.js';
+
+/**
+ * The polite-live a11y announcement string ("N items, M selected"). Subscribes
+ * to the displayed-items count from the item context and the selection-size
+ * slice from the store, so consumers can use it inside a tightly-scoped
+ * subcomponent without lifting the value to the root.
+ */
+function useAssetBrowserAnnouncement() {
+    const { displayedItems, labels } = useAssetBrowserContext();
+    const selectionSet = useAssetSelection();
+    const count = displayedItems.length;
+    const selected = selectionSet.size;
+    return `${labels.itemCount(count)}${selected > 0 ? labels.selectedCount(selected) : ''}`;
+}
+
+export { useAssetBrowserAnnouncement };
+//# sourceMappingURL=useAssetBrowserAnnouncement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserAnnouncement.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetBrowserAnnouncement.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AAOA;;;;;AAKG;;;AAGD;AACA;AACA;;AAEF;;"}

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

@@ -0,0 +1,70 @@
+"use client";
+import { useCallback, useImperativeHandle } 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 cssEscape(value) {
+    if (typeof CSS !== 'undefined' && typeof CSS.escape === 'function') {
+        return CSS.escape(value);
+    }
+    return value.replace(/["\\]/g, '\\$&');
+}
+/**
+ * Wires the imperative `AssetBrowserHandle` onto the consumer-provided ref.
+ * Each handle method has a stable identity (`useCallback`) and reads the latest
+ * props through `useLatest` refs, so the handle object is built once and its
+ * methods always see the latest props. `scrollToItem` prefers the
+ * store-registered grid scroller (works under virtualization) and falls back
+ * to a `data-asset-id` DOM query for the list view or when no grid is mounted.
+ */
+function useAssetBrowserHandle(options) {
+    const { ref, rootRef, store, items, displayed, selectAll, clearSelection, beginRename, } = options;
+    const itemsRef = useLatest(items);
+    const displayedRef = useLatest(displayed);
+    const focus = useCallback(() => {
+        rootRef.current?.focus();
+    }, [rootRef]);
+    const getElement = useCallback(() => rootRef.current, [rootRef]);
+    const scrollToItem = useCallback((id) => {
+        store.setFocusedId(id);
+        const index = displayedRef.current.findIndex(it => it.id === id);
+        if (index >= 0 && store.scrollToIndex(index))
+            return;
+        const el = rootRef.current?.querySelector(`[data-asset-id="${cssEscape(id)}"]`);
+        el?.scrollIntoView({ block: 'nearest' });
+    }, [store, rootRef, displayedRef]);
+    const getSelectedItems = useCallback(() => itemsRef.current.filter(it => store.getSelection().has(it.id)), [store, itemsRef]);
+    const beginRenameHandle = useCallback((id) => {
+        // Bring the target into view first so the rename field is visible even
+        // when it was outside the virtualization window.
+        scrollToItem(id);
+        beginRename(id);
+    }, [scrollToItem, beginRename]);
+    useImperativeHandle(ref, () => ({
+        focus,
+        getElement,
+        selectAll,
+        clearSelection,
+        scrollToItem,
+        getSelectedItems,
+        beginRename: beginRenameHandle,
+    }), [
+        focus,
+        getElement,
+        selectAll,
+        clearSelection,
+        scrollToItem,
+        getSelectedItems,
+        beginRenameHandle,
+    ]);
+}
+
+export { useAssetBrowserHandle };
+//# sourceMappingURL=useAssetBrowserHandle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetBrowserHandle.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetBrowserHandle.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAUA;AACE;AACE;;;AAGJ;AAgBA;;;;;;;AAOG;AACG;AAGJ;AAWA;AACA;AAEA;AACE;AACF;AAEA;AAKA;AAEI;AACA;;;AAEA;;;AAQJ;AAMA;;;;;AAME;AAIF;;;;;;;AASI;AACD;;;;;;;;AASA;AAEL;;"}

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;;"}