entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,254 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useRef, useState, useMemo } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { body, root } from './AssetBrowser.css.js';
+import { AssetBrowserAnnouncementLive } from './AssetBrowserAnnouncementLive.js';
+import { AssetBrowserBreadcrumbs } from './AssetBrowserBreadcrumbs.js';
+import { AssetBrowserStoreContext, AssetBrowserChromeContext, AssetBrowserContext } from './AssetBrowserContext.js';
+import { resolveLabels } from './assetBrowserLabels.js';
+import { AssetBrowserSidebar } from './AssetBrowserSidebar.js';
+import { AssetBrowserStatusBar } from './AssetBrowserStatusBar.js';
+import { AssetBrowserStore } from './AssetBrowserStore.js';
+import { AssetBrowserSurface } from './AssetBrowserSurface.js';
+import { AssetBrowserToolbar } from './AssetBrowserToolbar.js';
+import { markSlot, getSlotKind } from './slots.js';
+import { useAssetBrowserHandle } from './useAssetBrowserHandle.js';
+import { useAssetBrowserViewState } from './useAssetBrowserViewState.js';
+import { useAssetDnd } from './useAssetDnd.js';
+import { useAssetMutationKeyboard } from './useAssetMutationKeyboard.js';
+import { useAssetMutations } from './useAssetMutations.js';
+import { useAssetNavigation } from './useAssetNavigation.js';
+import { useAssetSelectionController } from './useAssetSelectionController.js';
+
+const DEFAULT_MIME = 'application/x-entangle-asset';
+const ToolbarSlot = markSlot(() => null, 'toolbar');
+const SidebarSlot = markSlot(() => null, 'sidebar');
+/**
+ * Pull the optional `Toolbar` / `Sidebar` slot children out of `children`.
+ * Returns through an explicit type so the slots stay `ReactNode` at the call
+ * site (a `let x: ReactNode = null` assigned only inside the forEach callback
+ * would otherwise stay flow-narrowed to `null`).
+ */
+function extractSlots(children) {
+    let toolbarSlot = null;
+    let sidebarSlot = null;
+    React.Children.forEach(children, child => {
+        if (!React.isValidElement(child))
+            return;
+        const kind = getSlotKind(child);
+        const slotChildren = child.props.children;
+        if (kind === 'toolbar')
+            toolbarSlot = slotChildren;
+        else if (kind === 'sidebar')
+            sidebarSlot = slotChildren;
+    });
+    return { toolbarSlot, sidebarSlot };
+}
+function AssetBrowserRoot(props) {
+    const { items, path = [], folderTree, currentFolderId, selectionMode = 'multiple', density = 'comfortable', showStatusBar = false, manualSearch = false, manualFilter = false, manualSort = false, filterableTypes: filterableTypesProp, loading = false, loadingItemCount = 12, emptyState, error, onErrorRetry, columns, marquee = true, history = false, renderThumbnail, renderItem, renderItemContextMenu, renderEmptyContextMenu, defaultItemActions = false, onItemRename, onItemsDelete, onCreateFolder, onItemsDuplicate, virtualized = 'auto', virtualizationThreshold = 200, overscanRows = 4, dragOutMimeType = DEFAULT_MIME, getDragData, onItemDragStart, onItemDragEnd, onItemsMove, onFilesImport, className, style, testId, children, ref, labels: labelsProp, 'aria-label': ariaLabel = 'Asset browser', 
+    // Controlled-state props — destructured so they don't leak onto the DOM
+    // root via `...rest`. Consumed by the view-state / selection / navigation
+    // hooks below.
+    view: viewProp, defaultView, onViewChange, thumbnailSize: thumbnailSizeProp, defaultThumbnailSize, onThumbnailSizeChange, search: searchProp, defaultSearch, onSearchChange, filters: filtersProp, defaultFilters, onFiltersChange, sort: sortProp, defaultSort, onSortChange, selection: selectionProp, defaultSelection, onSelectionChange, onItemOpen, onNavigate, ...rest } = props;
+    const rootRef = useRef(null);
+    // Lazy `useState` initializer (not `useMemo`) so the per-instance store
+    // identity is guaranteed stable for the component's lifetime — `useMemo` may
+    // legally drop its cache, which would orphan every slice subscription. Mirrors
+    // `useNavigationHistory`'s store-creation idiom.
+    const [store] = useState(() => new AssetBrowserStore());
+    const labels = useMemo(() => resolveLabels(labelsProp), [labelsProp]);
+    const { view, setView, thumbnailSize, setThumbnailSize, thumbnailSizePx, search, setSearch, filters, setFilters, sort, setSort, filterableTypes, displayed, marqueeEnabled, } = useAssetBrowserViewState({
+        items,
+        selectionMode,
+        marquee,
+        view: viewProp,
+        defaultView,
+        onViewChange,
+        thumbnailSize: thumbnailSizeProp,
+        defaultThumbnailSize,
+        onThumbnailSizeChange,
+        search: searchProp,
+        defaultSearch,
+        onSearchChange,
+        manualSearch,
+        filters: filtersProp,
+        defaultFilters,
+        onFiltersChange,
+        manualFilter,
+        sort: sortProp,
+        defaultSort,
+        onSortChange,
+        manualSort,
+        filterableTypesProp,
+    });
+    const { selectionSet, handlers } = useAssetSelectionController({
+        store,
+        displayed,
+        selectionMode,
+        selection: selectionProp,
+        defaultSelection,
+        onSelectionChange,
+    });
+    const { navigate, activateItem, goBack, goForward, canGoBack, canGoForward, handleRootKeyDown, } = useAssetNavigation({
+        history,
+        path,
+        currentFolderId,
+        onNavigate,
+        onItemOpen,
+    });
+    const dnd = useAssetDnd({
+        store,
+        mime: dragOutMimeType,
+        items,
+        selection: selectionSet,
+        currentFolderId,
+        getDragData,
+        onItemDragStart,
+        onItemDragEnd,
+        onItemsMove,
+        onFilesImport,
+    });
+    const mutations = useAssetMutations({
+        store,
+        displayed,
+        selection: selectionSet,
+        currentFolderId,
+        onItemRename,
+        onItemsDelete,
+        onCreateFolder,
+        onItemsDuplicate,
+    });
+    const mutationKeyboard = useAssetMutationKeyboard({
+        store,
+        mutations,
+        selection: selectionSet,
+    });
+    useAssetBrowserHandle({
+        ref,
+        rootRef,
+        store,
+        items,
+        displayed,
+        selectAll: handlers.selectAll,
+        clearSelection: handlers.clearSelection,
+        beginRename: mutations.beginRename,
+    });
+    // Render-props are forwarded through the item context as-is. They are called
+    // during render (by grid/list cells), so they can't be stabilized with a
+    // render-phase ref write (react-hooks/refs) or `useLatest` (its ref updates
+    // in an effect, one render late). Consumers that pass inline render-props and
+    // care about per-cell render cost should memoize them, mirroring `TreeView`.
+    const itemValue = useMemo(() => ({
+        displayedItems: displayed,
+        thumbnailSizePx,
+        density,
+        selectionMode,
+        marqueeEnabled,
+        handleItemClick: handlers.handleItemClick,
+        activateItem,
+        selectAll: handlers.selectAll,
+        clearSelection: handlers.clearSelection,
+        contextMenuSelect: handlers.contextMenuSelect,
+        selectByKeyboard: handlers.selectByKeyboard,
+        toggleSelectId: handlers.toggleSelectId,
+        setSelectionIds: handlers.setSelectionIds,
+        commitMarquee: handlers.commitMarquee,
+        path,
+        folderTree,
+        currentFolderId,
+        navigate,
+        renderThumbnail,
+        renderItem,
+        renderItemContextMenu,
+        renderEmptyContextMenu,
+        defaultItemActions,
+        mutations,
+        mutationKeyDown: mutationKeyboard.onKeyDown,
+        loading,
+        loadingItemCount,
+        emptyState,
+        error,
+        onErrorRetry,
+        columns,
+        dnd,
+        virtualized,
+        virtualizationThreshold,
+        overscanRows,
+        labels,
+    }), [
+        displayed,
+        thumbnailSizePx,
+        density,
+        selectionMode,
+        marqueeEnabled,
+        handlers,
+        activateItem,
+        path,
+        folderTree,
+        currentFolderId,
+        navigate,
+        renderThumbnail,
+        renderItem,
+        renderItemContextMenu,
+        renderEmptyContextMenu,
+        defaultItemActions,
+        mutations,
+        mutationKeyboard.onKeyDown,
+        loading,
+        loadingItemCount,
+        emptyState,
+        error,
+        onErrorRetry,
+        columns,
+        dnd,
+        virtualized,
+        virtualizationThreshold,
+        overscanRows,
+        labels,
+    ]);
+    const chromeValue = useMemo(() => ({
+        view,
+        setView,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        filterableTypes,
+        sort,
+        setSort,
+        history,
+        canGoBack,
+        canGoForward,
+        goBack,
+        goForward,
+        labels,
+    }), [
+        view,
+        setView,
+        search,
+        setSearch,
+        filters,
+        setFilters,
+        filterableTypes,
+        sort,
+        setSort,
+        history,
+        canGoBack,
+        canGoForward,
+        goBack,
+        goForward,
+        labels,
+    ]);
+    // Slot extraction.
+    const { toolbarSlot, sidebarSlot } = extractSlots(children);
+    return (jsx(AssetBrowserStoreContext.Provider, { value: store, children: jsx(AssetBrowserChromeContext.Provider, { value: chromeValue, children: jsx(AssetBrowserContext.Provider, { value: itemValue, children: jsxs("div", { ref: rootRef, className: cx(root, className), style: style, "data-testid": testId, role: "region", tabIndex: -1, "aria-label": ariaLabel, onKeyDown: handleRootKeyDown, ...rest, children: [toolbarSlot ?? jsx(AssetBrowserToolbar, {}), jsx(AssetBrowserBreadcrumbs, {}), jsxs("div", { className: body, children: [sidebarSlot ?? jsx(AssetBrowserSidebar, {}), jsx(AssetBrowserSurface, { onDragOver: dnd.onSurfaceDragOver, onDragLeave: dnd.onSurfaceDragLeave, onDrop: dnd.onSurfaceDrop })] }), showStatusBar && (jsx(AssetBrowserStatusBar, { view: view, thumbnailSize: thumbnailSize, setThumbnailSize: setThumbnailSize })), jsx(AssetBrowserAnnouncementLive, {})] }) }) }) }));
+}
+AssetBrowserRoot.displayName = 'AssetBrowser';
+const AssetBrowser = /*#__PURE__*/ Object.assign(AssetBrowserRoot, {
+    Toolbar: ToolbarSlot,
+    Sidebar: SidebarSlot,
+});
+
+export { AssetBrowser };
+//# sourceMappingURL=AssetBrowser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowser.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowser.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoCA;AAMA;AACA;AAEA;;;;;AAKG;AACH;;;;AAOI;;AACA;AACA;;;;;AAGF;AACA;AACF;AAEA;AACE;;;;;AAuEA;;;;;AAKA;AAEA;AAEA;;;;AAmBE;;;AAGA;;;AAGA;;;;AAIA;;;;AAIA;;;;;AAKD;AAED;;;;AAIE;;;AAGD;AAED;;;;;;AAcC;;;AAIC;;AAEA;;;;;;;AAOD;;;;AAKC;;;;;;AAMD;;;;AAKC;AACD;AAED;;;;;;;;;AASC;;;;;;AAOD;AAEI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCD;;;;;;;;;;;;;;;;;;AAmBC;;;;;;;;;;;;AAYD;AAGH;;;;;;;;;;;;;;;;AAiBG;;;;;;;;;;;;;;;;AAiBA;;;AAMH;AA2CF;AAEA;AAEO;AACL;AACA;AACD;;"}

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

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { srOnly } from './AssetBrowser.css.js';
+import { useAssetBrowserAnnouncement } from './useAssetBrowserAnnouncement.js';
+
+/**
+ * Screen-reader-only `aria-live="polite"` region carrying the current
+ * "N items, M selected" announcement. Subscribes to the displayed-count and
+ * selection slices via {@link useAssetBrowserAnnouncement}.
+ */
+function AssetBrowserAnnouncementLive() {
+    const announcement = useAssetBrowserAnnouncement();
+    return (jsx("div", { className: srOnly, "aria-live": "polite", role: "status", children: announcement }));
+}
+
+export { AssetBrowserAnnouncementLive };
+//# sourceMappingURL=AssetBrowserAnnouncementLive.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserAnnouncementLive.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserAnnouncementLive.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;AAOA;;;;AAIG;;AAED;AACA;AAKF;;"}

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { Breadcrumbs } from '../../navigation/Breadcrumbs/Breadcrumbs.js';
+import { BreadcrumbItem } from '../../navigation/Breadcrumbs/BreadcrumbItem.js';
+import '../../navigation/Breadcrumbs/BreadcrumbSeparator.js';
+import '../../navigation/Breadcrumbs/BreadcrumbEllipsis.js';
+import { breadcrumbsBar } from './AssetBrowser.css.js';
+import { useAssetBrowserContext } from './AssetBrowserContext.js';
+
+function AssetBrowserBreadcrumbs() {
+    const ctx = useAssetBrowserContext();
+    if (ctx.path.length === 0)
+        return null;
+    return (jsx("div", { className: breadcrumbsBar, children: jsx(Breadcrumbs, { maxItems: 4, itemsAfterCollapse: 2, itemsBeforeCollapse: 1, children: ctx.path.map((segment, index) => {
+                const isLast = index === ctx.path.length - 1;
+                return (jsx(BreadcrumbItem, { isCurrent: isLast, onClick: isLast
+                        ? undefined
+                        : () => {
+                            ctx.navigate(segment.id, 'breadcrumb');
+                        }, children: segment.name }, segment.id));
+            }) }) }));
+}
+
+export { AssetBrowserBreadcrumbs };
+//# sourceMappingURL=AssetBrowserBreadcrumbs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserBreadcrumbs.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserBreadcrumbs.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;AAaE;AACA;AAA2B;AAE3B;;;AAWgB;;;;AASV;AAIR;;"}

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

@@ -0,0 +1,134 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { EmptyState } from '../../feedback/EmptyState/EmptyState.js';
+import { Skeleton } from '../../feedback/Skeleton/Skeleton.js';
+import '../../feedback/Skeleton/SkeletonGroup.js';
+import '../../feedback/Skeleton/SkeletonLayout.js';
+import '../../Icons/AddIcon.js';
+import '../../Icons/AiChatIcon.js';
+import '../../Icons/AiSparklesIcon.js';
+import '../../Icons/ArrowDownIcon.js';
+import '../../Icons/ArrowLeftIcon.js';
+import '../../Icons/ArrowRightIcon.js';
+import '../../Icons/ArrowUpIcon.js';
+import '../../Icons/BookmarkIcon.js';
+import '../../Icons/CalendarIcon.js';
+import '../../Icons/ChevronDownIcon.js';
+import '../../Icons/ChevronUpIcon.js';
+import '../../Icons/ClockIcon.js';
+import '../../Icons/CloseIcon.js';
+import '../../Icons/CloudUploadIcon.js';
+import '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import { ErrorIcon } from '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import '../../Icons/GridIcon.js';
+import '../../Icons/HeartIcon.js';
+import '../../Icons/HelpIcon.js';
+import '../../Icons/HomeIcon.js';
+import '../../Icons/ImageIcon.js';
+import '../../Icons/InfoIcon.js';
+import '../../Icons/LastIcon.js';
+import '../../Icons/LinkIcon.js';
+import '../../Icons/ListIcon.js';
+import '../../Icons/LockIcon.js';
+import '../../Icons/MaximizeIcon.js';
+import '../../Icons/MenuIcon.js';
+import '../../Icons/MinimizeIcon.js';
+import '../../Icons/PasteIcon.js';
+import '../../Icons/PlayIcon.js';
+import '../../Icons/RedoIcon.js';
+import '../../Icons/RefreshIcon.js';
+import '../../Icons/RobotIcon.js';
+import '../../Icons/SaveIcon.js';
+import '../../Icons/SearchIcon.js';
+import '../../Icons/SettingsIcon.js';
+import '../../Icons/SortIcon.js';
+import '../../Icons/StarIcon.js';
+import '../../Icons/SuccessIcon.js';
+import '../../Icons/TagIcon.js';
+import '../../Icons/TrashIcon.js';
+import '../../Icons/UndoIcon.js';
+import '../../Icons/UnlinkIcon.js';
+import '../../Icons/UnlockIcon.js';
+import '../../Icons/UploadIcon.js';
+import '../../Icons/UserIcon.js';
+import '../../Icons/WarningIcon.js';
+import '../../Icons/ZoomInIcon.js';
+import '../../Icons/ZoomOutIcon.js';
+import '../../Icons/CheckIcon.js';
+import '../../Icons/CircleIcon.js';
+import '../../Icons/TangentFreeIcon.js';
+import '../../Icons/TangentAlignedIcon.js';
+import '../../Icons/TangentMirroredIcon.js';
+import '../../Icons/TangentAutoIcon.js';
+import '../../Icons/TangentLinearIcon.js';
+import '../../Icons/TangentStepIcon.js';
+import '../../Icons/ArchiveIcon.js';
+import '../../Icons/DotsVerticalIcon.js';
+import '../../Icons/DotsHorizontalIcon.js';
+import '../../Icons/ChevronLeftIcon.js';
+import '../../Icons/ChevronRightIcon.js';
+import '../../Icons/FolderOpenIcon.js';
+import '../../Icons/FolderCogIcon.js';
+import '../../Icons/UsersIcon.js';
+import '../../Icons/BuildingIcon.js';
+import '../../Icons/FileTextIcon.js';
+import '../../Icons/PauseIcon.js';
+import '../../Icons/StopIcon.js';
+import '../../Icons/SendIcon.js';
+import '../../Icons/TerminalIcon.js';
+import '../../Icons/GitBranchIcon.js';
+import '../../Icons/BugIcon.js';
+import '../../Icons/MinusIcon.js';
+import '../../Icons/PinIcon.js';
+import { Button } from '../../primitives/Button/Button.js';
+import { emptyWrap, emptyText, loadingGrid, skeletonCell, cellWidthVar } from './AssetBrowser.css.js';
+import { useAssetBrowserContext, useAssetBrowserChrome } from './AssetBrowserContext.js';
+import { cellWidth } from './assetBrowserGeometry.js';
+import { AssetBrowserGrid } from './AssetBrowserGrid.js';
+import { AssetBrowserList } from './AssetBrowserList.js';
+
+/**
+ * Skeleton placeholder grid shown while `loading`. Renders `loadingItemCount`
+ * cells sized to the current thumbnail scale (a square block + a label line)
+ * so the loading state matches the real grid's geometry instead of a lone
+ * spinner. Static (`animation="none"`) — dozens of pulsing blocks are noise.
+ */
+function LoadingGrid({ count, thumbPx, }) {
+    return (jsx("div", { className: loadingGrid, style: assignInlineVars({ [cellWidthVar]: `${cellWidth(thumbPx)}px` }), role: "presentation", "aria-hidden": true, "data-testid": "asset-browser-loading", children: Array.from({ length: Math.max(0, count) }, (_, i) => (jsxs("div", { className: skeletonCell, children: [jsx(Skeleton, { width: thumbPx, height: thumbPx, animation: "none" }), jsx(Skeleton, { shape: "line", width: "80%", animation: "none" })] }, i))) }));
+}
+/**
+ * Resolves the main content area: error → error state, loading → skeleton grid,
+ * empty → empty state, otherwise the grid or list view depending on
+ * `chrome.view`.
+ */
+function AssetBrowserContent() {
+    const { loading, loadingItemCount, thumbnailSizePx, displayedItems, emptyState, error, onErrorRetry, labels, } = useAssetBrowserContext();
+    const { view } = useAssetBrowserChrome();
+    // `null` / `undefined` / `false` → no error; `true` → built-in message;
+    // any other node → custom replacement.
+    if (error !== undefined && error !== null && error !== false) {
+        return (jsx("div", { className: emptyWrap, children: error === true ? (jsx(EmptyState, { icon: jsx(ErrorIcon, {}), title: labels.errorTitle, description: labels.errorDescription, action: onErrorRetry ? (jsx(Button, { size: "sm", variant: "default", onClick: onErrorRetry, children: labels.retry })) : undefined })) : (error) }));
+    }
+    if (loading) {
+        return view === 'grid' ? (jsx(LoadingGrid, { count: loadingItemCount, thumbPx: thumbnailSizePx })) : (jsx("div", { className: emptyWrap, children: jsx(EmptyState, { loading: true, title: labels.loading }) }));
+    }
+    if (displayedItems.length === 0) {
+        return (jsx("div", { className: emptyWrap, children: emptyState ?? jsx("span", { className: emptyText, children: labels.empty }) }));
+    }
+    return view === 'grid' ? jsx(AssetBrowserGrid, {}) : jsx(AssetBrowserList, {});
+}
+
+export { AssetBrowserContent };
+//# sourceMappingURL=AssetBrowserContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserContent.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;;AAKG;AACH;;AAuBA;AAEA;;;;AAIG;;;AAYD;;;AAIA;AACE;;;AAsBA;;AAQF;AACE;;AAMF;AACF;;"}

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

@@ -0,0 +1,81 @@
+"use client";
+import { useContext, useSyncExternalStore, createContext } from 'react';
+
+// ── Store context (hot path) ─────────────────────────────────────────────
+const AssetBrowserStoreContext = 
+/*#__PURE__*/ createContext(null);
+function useAssetBrowserStore() {
+    const store = useContext(AssetBrowserStoreContext);
+    if (!store) {
+        throw new Error('AssetBrowser slice hooks must be used inside an <AssetBrowser> subtree.');
+    }
+    return store;
+}
+/**
+ * Per-id focus slice: `true` only for the roving-focus item. Returns a boolean
+ * so arrow-key navigation re-renders just the two affected cells, not the whole
+ * grid.
+ */
+function useAssetFocused(id) {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeFocus, () => store.getFocusedId() === id);
+}
+/**
+ * Per-id rename slice: `true` only for the item whose label is being edited
+ * inline. Returns a boolean so entering/leaving rename re-renders only that
+ * cell.
+ */
+function useAssetEditing(id) {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeEditing, () => store.getEditingId() === id);
+}
+function useAssetMarquee() {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeMarquee, store.getMarquee);
+}
+function useAssetDrag() {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeDrag, store.getDrag);
+}
+/** Per-id drop-target slice: `true` while an active drag hovers this folder. */
+function useAssetDropTarget(id) {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeDrag, () => {
+        const drag = store.getDrag();
+        return drag.active && drag.dropTargetId === id;
+    });
+}
+/** The full selection set (whole-set consumers: list view, status bar). */
+function useAssetSelection() {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeSelection, store.getSelection);
+}
+/**
+ * Per-id selection slice. Returns a boolean so selecting an item re-renders
+ * only the cells whose state actually flipped.
+ */
+function useAssetSelected(id) {
+    const store = useAssetBrowserStore();
+    return useSyncExternalStore(store.subscribeSelection, () => store.getSelection().has(id));
+}
+const AssetBrowserContext = 
+/*#__PURE__*/ createContext(null);
+function useAssetBrowserContext() {
+    const value = useContext(AssetBrowserContext);
+    if (!value) {
+        throw new Error('AssetBrowser subcomponents must be used inside an <AssetBrowser>.');
+    }
+    return value;
+}
+const AssetBrowserChromeContext = 
+/*#__PURE__*/ createContext(null);
+function useAssetBrowserChrome() {
+    const value = useContext(AssetBrowserChromeContext);
+    if (!value) {
+        throw new Error('AssetBrowser chrome subcomponents must be used inside an <AssetBrowser>.');
+    }
+    return value;
+}
+
+export { AssetBrowserChromeContext, AssetBrowserContext, AssetBrowserStoreContext, useAssetBrowserChrome, useAssetBrowserContext, useAssetBrowserStore, useAssetDrag, useAssetDropTarget, useAssetEditing, useAssetFocused, useAssetMarquee, useAssetSelected, useAssetSelection };
+//# sourceMappingURL=AssetBrowserContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserContext.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserContext.ts"],"sourcesContent":[null],"names":[],"mappings":";;;AA8BA;;AAGE;;AAGA;;AAEE;;AAIF;AACF;AAOA;;;;AAIG;AACG;AACJ;AACA;AAIF;AAEA;;;;AAIG;AACG;AACJ;AACA;AAIF;;AAGE;;AAEF;;AAGE;;AAEF;AAEA;AACM;AACJ;AACA;AACE;;AAEF;AACF;AAEA;;AAEE;;AAEF;AAEA;;;AAGG;AACG;AACJ;AACA;AAGF;;AAiGE;;AAGA;;AAEE;;AAIF;AACF;;AA8BE;;AAGA;;AAEE;;AAIF;AACF;;"}

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

@@ -0,0 +1,123 @@
+"use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { ContextMenu } from '../../navigation/ContextMenu/ContextMenu.js';
+import { contextMenuTrigger } from './AssetBrowser.css.js';
+import { useAssetBrowserContext, useAssetSelection } from './AssetBrowserContext.js';
+import { DefaultItemMenu, DefaultEmptyMenu } from './AssetBrowserDefaultMenus.js';
+
+/** Whether any item-level menu can be shown (custom render-prop or auto-built). */
+function hasItemMenu(ctx) {
+    if (ctx.renderItemContextMenu)
+        return true;
+    return (ctx.defaultItemActions &&
+        (ctx.mutations.canRename ||
+            ctx.mutations.canDelete ||
+            ctx.mutations.canDuplicate));
+}
+/** Whether any empty-area menu can be shown. */
+function hasEmptyMenu(ctx) {
+    if (ctx.renderEmptyContextMenu)
+        return true;
+    return ctx.defaultItemActions && ctx.mutations.canCreateFolder;
+}
+/**
+ * Item context-menu body for the right-clicked item. Resolves the acted-on
+ * items (the whole selection when the target is part of it, otherwise just the
+ * target), builds the mutation `actions` bound to them, and renders either the
+ * consumer's `renderItemContextMenu` or the auto-built default menu. Rendered
+ * only while the menu is open (base-ui unmounts closed popups).
+ */
+function ItemMenuBody({ targetId }) {
+    const ctx = useAssetBrowserContext();
+    const selection = useAssetSelection();
+    const target = ctx.displayedItems.find(it => it.id === targetId);
+    const items = target
+        ? selection.has(target.id)
+            ? ctx.displayedItems.filter(it => selection.has(it.id))
+            : [target]
+        : [];
+    const actions = {
+        items,
+        rename: () => {
+            const first = items[0];
+            if (first)
+                ctx.mutations.beginRename(first.id);
+        },
+        delete: () => {
+            ctx.mutations.deleteItems(items);
+        },
+        duplicate: () => {
+            ctx.mutations.duplicateItems(items);
+        },
+    };
+    if (ctx.renderItemContextMenu) {
+        return jsx(Fragment, { children: ctx.renderItemContextMenu(items, actions) });
+    }
+    return jsx(DefaultItemMenu, { actions: actions });
+}
+/** Empty-area context-menu body (consumer render-prop or the default). */
+function EmptyMenuBody() {
+    const ctx = useAssetBrowserContext();
+    if (ctx.renderEmptyContextMenu)
+        return jsx(Fragment, { children: ctx.renderEmptyContextMenu() });
+    return jsx(DefaultEmptyMenu, {});
+}
+/**
+ * Single, view-agnostic context-menu mechanism for the whole content surface.
+ *
+ * One `ContextMenu` wraps both the grid and the list. On right-click it walks up
+ * from the event target to the nearest item element — a grid cell
+ * (`[data-asset-id]`) or a list row (`[data-row-key]`, set by DataTable to the
+ * row's id) — to decide whether an **item** was hit (show the item menu + select
+ * it) or **empty space** (show the empty-area menu). The same code path runs
+ * regardless of view, so grid and list share identical right-click behaviour
+ * with no per-cell / per-row wrapping and no DataTable changes.
+ *
+ * Open state is controlled so a right-click that resolves to no body (e.g. blank
+ * space when only an item menu is configured) never opens an empty popup.
+ */
+function AssetBrowserContextMenuLayer({ children, }) {
+    const ctx = useAssetBrowserContext();
+    const [open, setOpen] = useState(false);
+    const [targetId, setTargetId] = useState(null);
+    // Synchronous mirror of the right-clicked target, read by `onOpenChange`
+    // (which fires in the same event, before the `setTargetId` render flushes).
+    const targetIdRef = useRef(null);
+    const itemEnabled = hasItemMenu(ctx);
+    const emptyEnabled = hasEmptyMenu(ctx);
+    // No menus configured → render the surface untouched.
+    if (!itemEnabled && !emptyEnabled)
+        return jsx(Fragment, { children: children });
+    const handleContextMenuCapture = (event) => {
+        // Grid cells carry `data-asset-id`; DataTable list rows carry `data-row-key`
+        // (the asset id, since `rowKey="id"`). Match either to find the hit item.
+        const el = event.target instanceof Element
+            ? event.target.closest('[data-asset-id], [data-row-key]')
+            : null;
+        const id = el?.getAttribute('data-asset-id') ??
+            el?.getAttribute('data-row-key') ??
+            null;
+        targetIdRef.current = id;
+        setTargetId(id);
+        if (id) {
+            const item = ctx.displayedItems.find(it => it.id === id);
+            if (item)
+                ctx.contextMenuSelect(item);
+        }
+    };
+    const showItemBody = targetId !== null && itemEnabled;
+    return (jsxs(ContextMenu, { open: open, onOpenChange: next => {
+            // Only allow opening when the resolved target has a body to show.
+            if (next) {
+                const willShow = targetIdRef.current ? itemEnabled : emptyEnabled;
+                setOpen(willShow);
+            }
+            else {
+                setOpen(false);
+            }
+        }, children: [jsx(ContextMenu.Trigger, { render: jsx("div", { className: contextMenuTrigger, onContextMenuCapture: handleContextMenuCapture, children: children }) }), jsx(ContextMenu.Content, { children: showItemBody ? (jsx(ItemMenuBody, { targetId: targetId })) : emptyEnabled ? (jsx(EmptyMenuBody, {})) : null })] }));
+}
+
+export { AssetBrowserContextMenuLayer };
+//# sourceMappingURL=AssetBrowserContextMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserContextMenu.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserContextMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;AAgBA;AACA;;AACiC;;AAG7B;;AAEE;AAEN;AAEA;AACA;;AACkC;;AAElC;AAEA;;;;;;AAMG;AACH;AACE;AACA;AACA;;;AAGI;;;AAIJ;;;AAGI;AACA;;;;AAGA;;;AAGA;;;AAIJ;;;AAGA;AACF;AAEA;AACA;AACE;;AACgC;;AAElC;AAEA;;;;;;;;;;;;;AAaG;AACG;AAKJ;;;;;AAKA;AAEA;AACA;;AAGA;;AAEA;;;AAGE;;;AAIA;AAEE;AACA;AACF;;;AAGE;AACA;AAAU;;AAEd;AAEA;AAEA;;;AAMQ;;;;;;;AA0BV;;"}