entangle-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,46 @@
+import './../../../assets/src/components/editor/AssetBrowser/AssetBrowser.css.ts.vanilla-B2S4cEiY.css';
+import { createRuntimeFn } from '@vanilla-extract/recipes/createRuntimeFn';
+
+var body = 'AssetBrowser_body__15pxmeug';
+var breadcrumbsBar = 'AssetBrowser_breadcrumbsBar__15pxmeuf';
+var cellHeightVar = 'var(--cellHeightVar__15pxmeu1)';
+var cellLabel = 'AssetBrowser_cellLabel__15pxmeu12';
+var cellRecipe = createRuntimeFn({defaultClassName:'AssetBrowser_cellRecipe__15pxmeut',variantClassNames:{selected:{true:'AssetBrowser_cellRecipe_selected_true__15pxmeuu',false:'AssetBrowser_cellRecipe_selected_false__15pxmeuv'},dropTarget:{true:'AssetBrowser_cellRecipe_dropTarget_true__15pxmeuw',false:'AssetBrowser_cellRecipe_dropTarget_false__15pxmeux'},disabled:{true:'AssetBrowser_cellRecipe_disabled_true__15pxmeuy',false:'AssetBrowser_cellRecipe_disabled_false__15pxmeuz'}},defaultVariants:{selected:false,dropTarget:false,disabled:false},compoundVariants:[]});
+var cellWidthVar = 'var(--cellWidthVar__15pxmeu0)';
+var columnsVar = 'var(--columnsVar__15pxmeu4)';
+var contextMenuTrigger = 'AssetBrowser_contextMenuTrigger__15pxmeuj';
+var emptyText = 'AssetBrowser_emptyText__15pxmeu18';
+var emptyWrap = 'AssetBrowser_emptyWrap__15pxmeum';
+var gridFlow = 'AssetBrowser_gridFlow__15pxmeus';
+var gridGapVar = 'var(--gridGapVar__15pxmeu3)';
+var gridScroller = 'AssetBrowser_gridScroller__15pxmeup';
+var gridSizer = 'AssetBrowser_gridSizer__15pxmeuq';
+var gridWindow = 'AssetBrowser_gridWindow__15pxmeur';
+var importOverlay = 'AssetBrowser_importOverlay__15pxmeu15';
+var listScroller = 'AssetBrowser_listScroller__15pxmeu16';
+var loadingGrid = 'AssetBrowser_loadingGrid__15pxmeun';
+var main = 'AssetBrowser_main__15pxmeui';
+var marquee = 'AssetBrowser_marquee__15pxmeu14';
+var marqueeHVar = 'var(--marqueeHVar__15pxmeua)';
+var marqueeWVar = 'var(--marqueeWVar__15pxmeu9)';
+var marqueeXVar = 'var(--marqueeXVar__15pxmeu7)';
+var marqueeYVar = 'var(--marqueeYVar__15pxmeu8)';
+var nameCell = 'AssetBrowser_nameCell__15pxmeu17';
+var offsetYVar = 'var(--offsetYVar__15pxmeu6)';
+var renameField = 'AssetBrowser_renameField__15pxmeu13';
+var root = 'AssetBrowser_root__15pxmeub';
+var searchField = 'AssetBrowser_searchField__15pxmeue';
+var sidebar = 'AssetBrowser_sidebar__15pxmeuh';
+var skeletonCell = 'AssetBrowser_skeletonCell__15pxmeuo';
+var srOnly = 'AssetBrowser_srOnly__15pxmeu19';
+var statusBar = 'AssetBrowser_statusBar__15pxmeuk';
+var statusSpacer = 'AssetBrowser_statusSpacer__15pxmeul';
+var thumb = 'AssetBrowser_thumb__15pxmeu10';
+var thumbImage = 'AssetBrowser_thumbImage__15pxmeu11';
+var thumbSizeVar = 'var(--thumbSizeVar__15pxmeu2)';
+var toolbar = 'AssetBrowser_toolbar__15pxmeuc';
+var toolbarSpacer = 'AssetBrowser_toolbarSpacer__15pxmeud';
+var totalHeightVar = 'var(--totalHeightVar__15pxmeu5)';
+
+export { body, breadcrumbsBar, cellHeightVar, cellLabel, cellRecipe, cellWidthVar, columnsVar, contextMenuTrigger, emptyText, emptyWrap, gridFlow, gridGapVar, gridScroller, gridSizer, gridWindow, importOverlay, listScroller, loadingGrid, main, marquee, marqueeHVar, marqueeWVar, marqueeXVar, marqueeYVar, nameCell, offsetYVar, renameField, root, searchField, sidebar, skeletonCell, srOnly, statusBar, statusSpacer, thumb, thumbImage, thumbSizeVar, toolbar, toolbarSpacer, totalHeightVar };
+//# sourceMappingURL=AssetBrowser.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowser.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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":["'use client';\n\nimport React, { useMemo, useRef, useState } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { body, root } from './AssetBrowser.css';\nimport { AssetBrowserAnnouncementLive } from './AssetBrowserAnnouncementLive';\nimport { AssetBrowserBreadcrumbs } from './AssetBrowserBreadcrumbs';\nimport {\n  AssetBrowserChromeContext,\n  AssetBrowserContext,\n  AssetBrowserStoreContext,\n} from './AssetBrowserContext';\nimport { resolveLabels } from './assetBrowserLabels';\nimport { AssetBrowserSidebar } from './AssetBrowserSidebar';\nimport { AssetBrowserStatusBar } from './AssetBrowserStatusBar';\nimport { AssetBrowserStore } from './AssetBrowserStore';\nimport { AssetBrowserSurface } from './AssetBrowserSurface';\nimport { AssetBrowserToolbar } from './AssetBrowserToolbar';\nimport { getSlotKind, markSlot } from './slots';\nimport { useAssetBrowserHandle } from './useAssetBrowserHandle';\nimport { useAssetBrowserViewState } from './useAssetBrowserViewState';\nimport { useAssetDnd } from './useAssetDnd';\nimport { useAssetMutationKeyboard } from './useAssetMutationKeyboard';\nimport { useAssetMutations } from './useAssetMutations';\nimport { useAssetNavigation } from './useAssetNavigation';\nimport { useAssetSelectionController } from './useAssetSelectionController';\n\nimport type { AssetBrowserProps } from './AssetBrowser.types';\nimport type {\n  AssetBrowserChromeValue,\n  AssetBrowserContextValue,\n} from './AssetBrowserContext';\nimport type { ReactNode } from 'react';\n\nconst DEFAULT_MIME = 'application/x-entangle-asset';\n\ninterface SlotProps {\n  children?: ReactNode;\n}\n\nconst ToolbarSlot = markSlot(() => null, 'toolbar');\nconst SidebarSlot = markSlot(() => null, 'sidebar');\n\n/**\n * Pull the optional `Toolbar` / `Sidebar` slot children out of `children`.\n * Returns through an explicit type so the slots stay `ReactNode` at the call\n * site (a `let x: ReactNode = null` assigned only inside the forEach callback\n * would otherwise stay flow-narrowed to `null`).\n */\nfunction extractSlots(children: ReactNode): {\n  toolbarSlot: ReactNode;\n  sidebarSlot: ReactNode;\n} {\n  let toolbarSlot: ReactNode = null;\n  let sidebarSlot: ReactNode = null;\n  React.Children.forEach(children, child => {\n    if (!React.isValidElement(child)) return;\n    const kind = getSlotKind(child);\n    const slotChildren = (child.props as SlotProps).children;\n    if (kind === 'toolbar') toolbarSlot = slotChildren;\n    else if (kind === 'sidebar') sidebarSlot = slotChildren;\n  });\n  return { toolbarSlot, sidebarSlot };\n}\n\nfunction AssetBrowserRoot(props: AssetBrowserProps): React.ReactElement {\n  const {\n    items,\n    path = [],\n    folderTree,\n    currentFolderId,\n    selectionMode = 'multiple',\n    density = 'comfortable',\n    showStatusBar = false,\n    manualSearch = false,\n    manualFilter = false,\n    manualSort = false,\n    filterableTypes: filterableTypesProp,\n    loading = false,\n    loadingItemCount = 12,\n    emptyState,\n    error,\n    onErrorRetry,\n    columns,\n    marquee = true,\n    history = false,\n    renderThumbnail,\n    renderItem,\n    renderItemContextMenu,\n    renderEmptyContextMenu,\n    defaultItemActions = false,\n    onItemRename,\n    onItemsDelete,\n    onCreateFolder,\n    onItemsDuplicate,\n    virtualized = 'auto',\n    virtualizationThreshold = 200,\n    overscanRows = 4,\n    dragOutMimeType = DEFAULT_MIME,\n    getDragData,\n    onItemDragStart,\n    onItemDragEnd,\n    onItemsMove,\n    onFilesImport,\n    className,\n    style,\n    testId,\n    children,\n    ref,\n    labels: labelsProp,\n    'aria-label': ariaLabel = 'Asset browser',\n    // Controlled-state props — destructured so they don't leak onto the DOM\n    // root via `...rest`. Consumed by the view-state / selection / navigation\n    // hooks below.\n    view: viewProp,\n    defaultView,\n    onViewChange,\n    thumbnailSize: thumbnailSizeProp,\n    defaultThumbnailSize,\n    onThumbnailSizeChange,\n    search: searchProp,\n    defaultSearch,\n    onSearchChange,\n    filters: filtersProp,\n    defaultFilters,\n    onFiltersChange,\n    sort: sortProp,\n    defaultSort,\n    onSortChange,\n    selection: selectionProp,\n    defaultSelection,\n    onSelectionChange,\n    onItemOpen,\n    onNavigate,\n    ...rest\n  } = props;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  // Lazy `useState` initializer (not `useMemo`) so the per-instance store\n  // identity is guaranteed stable for the component's lifetime — `useMemo` may\n  // legally drop its cache, which would orphan every slice subscription. Mirrors\n  // `useNavigationHistory`'s store-creation idiom.\n  const [store] = useState(() => new AssetBrowserStore());\n\n  const labels = useMemo(() => resolveLabels(labelsProp), [labelsProp]);\n\n  const {\n    view,\n    setView,\n    thumbnailSize,\n    setThumbnailSize,\n    thumbnailSizePx,\n    search,\n    setSearch,\n    filters,\n    setFilters,\n    sort,\n    setSort,\n    filterableTypes,\n    displayed,\n    marqueeEnabled,\n  } = useAssetBrowserViewState({\n    items,\n    selectionMode,\n    marquee,\n    view: viewProp,\n    defaultView,\n    onViewChange,\n    thumbnailSize: thumbnailSizeProp,\n    defaultThumbnailSize,\n    onThumbnailSizeChange,\n    search: searchProp,\n    defaultSearch,\n    onSearchChange,\n    manualSearch,\n    filters: filtersProp,\n    defaultFilters,\n    onFiltersChange,\n    manualFilter,\n    sort: sortProp,\n    defaultSort,\n    onSortChange,\n    manualSort,\n    filterableTypesProp,\n  });\n\n  const { selectionSet, handlers } = useAssetSelectionController({\n    store,\n    displayed,\n    selectionMode,\n    selection: selectionProp,\n    defaultSelection,\n    onSelectionChange,\n  });\n\n  const {\n    navigate,\n    activateItem,\n    goBack,\n    goForward,\n    canGoBack,\n    canGoForward,\n    handleRootKeyDown,\n  } = useAssetNavigation({\n    history,\n    path,\n    currentFolderId,\n    onNavigate,\n    onItemOpen,\n  });\n\n  const dnd = useAssetDnd({\n    store,\n    mime: dragOutMimeType,\n    items,\n    selection: selectionSet,\n    currentFolderId,\n    getDragData,\n    onItemDragStart,\n    onItemDragEnd,\n    onItemsMove,\n    onFilesImport,\n  });\n\n  const mutations = useAssetMutations({\n    store,\n    displayed,\n    selection: selectionSet,\n    currentFolderId,\n    onItemRename,\n    onItemsDelete,\n    onCreateFolder,\n    onItemsDuplicate,\n  });\n\n  const mutationKeyboard = useAssetMutationKeyboard({\n    store,\n    mutations,\n    selection: selectionSet,\n  });\n\n  useAssetBrowserHandle({\n    ref,\n    rootRef,\n    store,\n    items,\n    displayed,\n    selectAll: handlers.selectAll,\n    clearSelection: handlers.clearSelection,\n    beginRename: mutations.beginRename,\n  });\n\n  // Render-props are forwarded through the item context as-is. They are called\n  // during render (by grid/list cells), so they can't be stabilized with a\n  // render-phase ref write (react-hooks/refs) or `useLatest` (its ref updates\n  // in an effect, one render late). Consumers that pass inline render-props and\n  // care about per-cell render cost should memoize them, mirroring `TreeView`.\n  const itemValue = useMemo<AssetBrowserContextValue>(\n    () => ({\n      displayedItems: displayed,\n      thumbnailSizePx,\n      density,\n      selectionMode,\n      marqueeEnabled,\n      handleItemClick: handlers.handleItemClick,\n      activateItem,\n      selectAll: handlers.selectAll,\n      clearSelection: handlers.clearSelection,\n      contextMenuSelect: handlers.contextMenuSelect,\n      selectByKeyboard: handlers.selectByKeyboard,\n      toggleSelectId: handlers.toggleSelectId,\n      setSelectionIds: handlers.setSelectionIds,\n      commitMarquee: handlers.commitMarquee,\n      path,\n      folderTree,\n      currentFolderId,\n      navigate,\n      renderThumbnail,\n      renderItem,\n      renderItemContextMenu,\n      renderEmptyContextMenu,\n      defaultItemActions,\n      mutations,\n      mutationKeyDown: mutationKeyboard.onKeyDown,\n      loading,\n      loadingItemCount,\n      emptyState,\n      error,\n      onErrorRetry,\n      columns,\n      dnd,\n      virtualized,\n      virtualizationThreshold,\n      overscanRows,\n      labels,\n    }),\n    [\n      displayed,\n      thumbnailSizePx,\n      density,\n      selectionMode,\n      marqueeEnabled,\n      handlers,\n      activateItem,\n      path,\n      folderTree,\n      currentFolderId,\n      navigate,\n      renderThumbnail,\n      renderItem,\n      renderItemContextMenu,\n      renderEmptyContextMenu,\n      defaultItemActions,\n      mutations,\n      mutationKeyboard.onKeyDown,\n      loading,\n      loadingItemCount,\n      emptyState,\n      error,\n      onErrorRetry,\n      columns,\n      dnd,\n      virtualized,\n      virtualizationThreshold,\n      overscanRows,\n      labels,\n    ]\n  );\n\n  const chromeValue = useMemo<AssetBrowserChromeValue>(\n    () => ({\n      view,\n      setView,\n      search,\n      setSearch,\n      filters,\n      setFilters,\n      filterableTypes,\n      sort,\n      setSort,\n      history,\n      canGoBack,\n      canGoForward,\n      goBack,\n      goForward,\n      labels,\n    }),\n    [\n      view,\n      setView,\n      search,\n      setSearch,\n      filters,\n      setFilters,\n      filterableTypes,\n      sort,\n      setSort,\n      history,\n      canGoBack,\n      canGoForward,\n      goBack,\n      goForward,\n      labels,\n    ]\n  );\n\n  // Slot extraction.\n  const { toolbarSlot, sidebarSlot } = extractSlots(children);\n\n  return (\n    <AssetBrowserStoreContext.Provider value={store}>\n      <AssetBrowserChromeContext.Provider value={chromeValue}>\n        <AssetBrowserContext.Provider value={itemValue}>\n          {/* The root is a labelled region that hosts the asset-browser widget;\n              its onKeyDown adds widget-level shortcuts (Backspace / Alt+ArrowUp\n              → parent folder), so the handler on a non-interactive role is\n              intentional. */}\n          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}\n          <div\n            ref={rootRef}\n            className={cx(root, className)}\n            style={style}\n            data-testid={testId}\n            role=\"region\"\n            tabIndex={-1}\n            aria-label={ariaLabel}\n            onKeyDown={handleRootKeyDown}\n            {...rest}\n          >\n            {toolbarSlot ?? <AssetBrowserToolbar />}\n            <AssetBrowserBreadcrumbs />\n            <div className={body}>\n              {sidebarSlot ?? <AssetBrowserSidebar />}\n              <AssetBrowserSurface\n                onDragOver={dnd.onSurfaceDragOver}\n                onDragLeave={dnd.onSurfaceDragLeave}\n                onDrop={dnd.onSurfaceDrop}\n              />\n            </div>\n            {showStatusBar && (\n              <AssetBrowserStatusBar\n                view={view}\n                thumbnailSize={thumbnailSize}\n                setThumbnailSize={setThumbnailSize}\n              />\n            )}\n            <AssetBrowserAnnouncementLive />\n          </div>\n        </AssetBrowserContext.Provider>\n      </AssetBrowserChromeContext.Provider>\n    </AssetBrowserStoreContext.Provider>\n  );\n}\n\nAssetBrowserRoot.displayName = 'AssetBrowser';\n\nexport const AssetBrowser = /*#__PURE__*/ Object.assign(AssetBrowserRoot, {\n  Toolbar: ToolbarSlot,\n  Sidebar: SidebarSlot,\n});\n"],"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":["'use client';\n\nimport React from 'react';\n\nimport { srOnly } from './AssetBrowser.css';\nimport { useAssetBrowserAnnouncement } from './useAssetBrowserAnnouncement';\n\n/**\n * Screen-reader-only `aria-live=\"polite\"` region carrying the current\n * \"N items, M selected\" announcement. Subscribes to the displayed-count and\n * selection slices via {@link useAssetBrowserAnnouncement}.\n */\nexport function AssetBrowserAnnouncementLive(): React.ReactElement {\n  const announcement = useAssetBrowserAnnouncement();\n  return (\n    <div className={srOnly} aria-live=\"polite\" role=\"status\">\n      {announcement}\n    </div>\n  );\n}\n"],"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":["'use client';\n\nimport React from 'react';\n\nimport {\n  Breadcrumbs,\n  BreadcrumbItem,\n} from '@/components/navigation/Breadcrumbs';\n\nimport { breadcrumbsBar } from './AssetBrowser.css';\nimport { useAssetBrowserContext } from './AssetBrowserContext';\n\nexport function AssetBrowserBreadcrumbs(): React.ReactElement | null {\n  const ctx = useAssetBrowserContext();\n  if (ctx.path.length === 0) return null;\n\n  return (\n    <div className={breadcrumbsBar}>\n      <Breadcrumbs maxItems={4} itemsAfterCollapse={2} itemsBeforeCollapse={1}>\n        {ctx.path.map((segment, index) => {\n          const isLast = index === ctx.path.length - 1;\n          return (\n            <BreadcrumbItem\n              key={segment.id}\n              isCurrent={isLast}\n              onClick={\n                isLast\n                  ? undefined\n                  : () => {\n                      ctx.navigate(segment.id, 'breadcrumb');\n                    }\n              }\n            >\n              {segment.name}\n            </BreadcrumbItem>\n          );\n        })}\n      </Breadcrumbs>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;AAaE;AACA;AAA2B;AAE3B;;;AAWgB;;;;AASV;AAIR;;"}

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

@@ -0,0 +1,140 @@
+"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 '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.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":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React from 'react';\n\nimport { EmptyState } from '@/components/feedback/EmptyState';\nimport { Skeleton } from '@/components/feedback/Skeleton';\nimport { ErrorIcon } from '@/components/Icons';\nimport { Button } from '@/components/primitives/Button';\n\nimport {\n  cellWidthVar,\n  emptyText,\n  emptyWrap,\n  loadingGrid,\n  skeletonCell,\n} from './AssetBrowser.css';\nimport {\n  useAssetBrowserChrome,\n  useAssetBrowserContext,\n} from './AssetBrowserContext';\nimport { cellWidth } from './assetBrowserGeometry';\nimport { AssetBrowserGrid } from './AssetBrowserGrid';\nimport { AssetBrowserList } from './AssetBrowserList';\n\n/**\n * Skeleton placeholder grid shown while `loading`. Renders `loadingItemCount`\n * cells sized to the current thumbnail scale (a square block + a label line)\n * so the loading state matches the real grid's geometry instead of a lone\n * spinner. Static (`animation=\"none\"`) — dozens of pulsing blocks are noise.\n */\nfunction LoadingGrid({\n  count,\n  thumbPx,\n}: {\n  count: number;\n  thumbPx: number;\n}): React.ReactElement {\n  return (\n    <div\n      className={loadingGrid}\n      style={assignInlineVars({ [cellWidthVar]: `${cellWidth(thumbPx)}px` })}\n      role=\"presentation\"\n      aria-hidden\n      data-testid=\"asset-browser-loading\"\n    >\n      {Array.from({ length: Math.max(0, count) }, (_, i) => (\n        <div key={i} className={skeletonCell}>\n          <Skeleton width={thumbPx} height={thumbPx} animation=\"none\" />\n          <Skeleton shape=\"line\" width=\"80%\" animation=\"none\" />\n        </div>\n      ))}\n    </div>\n  );\n}\n\n/**\n * Resolves the main content area: error → error state, loading → skeleton grid,\n * empty → empty state, otherwise the grid or list view depending on\n * `chrome.view`.\n */\nexport function AssetBrowserContent(): React.ReactElement {\n  const {\n    loading,\n    loadingItemCount,\n    thumbnailSizePx,\n    displayedItems,\n    emptyState,\n    error,\n    onErrorRetry,\n    labels,\n  } = useAssetBrowserContext();\n  const { view } = useAssetBrowserChrome();\n\n  // `null` / `undefined` / `false` → no error; `true` → built-in message;\n  // any other node → custom replacement.\n  if (error !== undefined && error !== null && error !== false) {\n    return (\n      <div className={emptyWrap}>\n        {error === true ? (\n          <EmptyState\n            icon={<ErrorIcon />}\n            title={labels.errorTitle}\n            description={labels.errorDescription}\n            action={\n              onErrorRetry ? (\n                <Button size=\"sm\" variant=\"default\" onClick={onErrorRetry}>\n                  {labels.retry}\n                </Button>\n              ) : undefined\n            }\n          />\n        ) : (\n          error\n        )}\n      </div>\n    );\n  }\n  if (loading) {\n    return view === 'grid' ? (\n      <LoadingGrid count={loadingItemCount} thumbPx={thumbnailSizePx} />\n    ) : (\n      <div className={emptyWrap}>\n        <EmptyState loading title={labels.loading} />\n      </div>\n    );\n  }\n  if (displayedItems.length === 0) {\n    return (\n      <div className={emptyWrap}>\n        {emptyState ?? <span className={emptyText}>{labels.empty}</span>}\n      </div>\n    );\n  }\n  return view === 'grid' ? <AssetBrowserGrid /> : <AssetBrowserList />;\n}\n"],"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":["'use client';\n\nimport { createContext, useContext, useSyncExternalStore } from 'react';\n\nimport type {\n  AssetFilterState,\n  AssetItem,\n  AssetItemActions,\n  AssetItemState,\n  AssetNavigationSource,\n  AssetPathSegment,\n  AssetSelectionReason,\n  AssetSortState,\n  AssetView,\n} from './AssetBrowser.types';\nimport type { AssetBrowserLabels } from './assetBrowserLabels';\nimport type {\n  AssetBrowserStore,\n  DragState,\n  MarqueeState,\n} from './AssetBrowserStore';\nimport type { AssetMutationsApi } from './useAssetMutations';\nimport type { TreeNodeData } from '@/components/controls/TreeView';\nimport type {\n  DataTableColumn,\n  DataTableDensity,\n} from '@/components/data/DataTable';\nimport type { ReactNode } from 'react';\nimport type React from 'react';\n\n// ── Store context (hot path) ─────────────────────────────────────────────\n\nexport const AssetBrowserStoreContext =\n  /*#__PURE__*/ createContext<AssetBrowserStore | null>(null);\n\nexport function useAssetBrowserStore(): AssetBrowserStore {\n  const store = useContext(AssetBrowserStoreContext);\n  if (!store) {\n    throw new Error(\n      'AssetBrowser slice hooks must be used inside an <AssetBrowser> subtree.'\n    );\n  }\n  return store;\n}\n\nexport function useAssetFocus(): string | null {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeFocus, store.getFocusedId);\n}\n\n/**\n * Per-id focus slice: `true` only for the roving-focus item. Returns a boolean\n * so arrow-key navigation re-renders just the two affected cells, not the whole\n * grid.\n */\nexport function useAssetFocused(id: string): boolean {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(\n    store.subscribeFocus,\n    () => store.getFocusedId() === id\n  );\n}\n\n/**\n * Per-id rename slice: `true` only for the item whose label is being edited\n * inline. Returns a boolean so entering/leaving rename re-renders only that\n * cell.\n */\nexport function useAssetEditing(id: string): boolean {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(\n    store.subscribeEditing,\n    () => store.getEditingId() === id\n  );\n}\n\nexport function useAssetMarquee(): MarqueeState {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeMarquee, store.getMarquee);\n}\n\nexport function useAssetDrag(): DragState {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeDrag, store.getDrag);\n}\n\n/** Per-id drop-target slice: `true` while an active drag hovers this folder. */\nexport function useAssetDropTarget(id: string): boolean {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeDrag, () => {\n    const drag = store.getDrag();\n    return drag.active && drag.dropTargetId === id;\n  });\n}\n\n/** The full selection set (whole-set consumers: list view, status bar). */\nexport function useAssetSelection(): ReadonlySet<string> {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeSelection, store.getSelection);\n}\n\n/**\n * Per-id selection slice. Returns a boolean so selecting an item re-renders\n * only the cells whose state actually flipped.\n */\nexport function useAssetSelected(id: string): boolean {\n  const store = useAssetBrowserStore();\n  return useSyncExternalStore(store.subscribeSelection, () =>\n    store.getSelection().has(id)\n  );\n}\n\n// ── Item context (data + interaction; consumed by every grid cell) ──────────\n\nexport interface AssetDndContext {\n  internalEnabled: boolean;\n  externalEnabled: boolean;\n  onItemDragStart: (item: AssetItem, event: React.DragEvent) => void;\n  onItemDragEnd: (item: AssetItem, event: React.DragEvent) => void;\n  onFolderDragOver: (folderId: string, event: React.DragEvent) => void;\n  onFolderDragLeave: (folderId: string, event: React.DragEvent) => void;\n  onFolderDrop: (folderId: string, event: React.DragEvent) => void;\n  onSurfaceDragOver: (event: React.DragEvent) => void;\n  onSurfaceDragLeave: (event: React.DragEvent) => void;\n  onSurfaceDrop: (event: React.DragEvent) => void;\n}\n\nexport interface AssetBrowserContextValue {\n  // data\n  displayedItems: readonly AssetItem[];\n\n  // layout / mode (read by cells)\n  thumbnailSizePx: number;\n  density: DataTableDensity;\n  selectionMode: 'single' | 'multiple' | false;\n  /** Whether rubber-band marquee selection is active (multiple + `marquee`). */\n  marqueeEnabled: boolean;\n\n  // interaction handlers\n  handleItemClick: (\n    item: AssetItem,\n    index: number,\n    event: React.MouseEvent\n  ) => void;\n  activateItem: (item: AssetItem) => void;\n  selectAll: () => void;\n  clearSelection: () => void;\n  contextMenuSelect: (item: AssetItem) => void;\n  /** Select-or-extend driven by keyboard navigation over displayed order. */\n  selectByKeyboard: (index: number, extend: boolean) => void;\n  /** Toggle a single id (Space / Ctrl-click parity). */\n  toggleSelectId: (id: string) => void;\n  /** Replace selection with a raw id list (DataTable bridge). */\n  setSelectionIds: (ids: string[], reason: AssetSelectionReason) => void;\n  /** Commit a marquee result (additive merges with current selection). */\n  commitMarquee: (ids: string[], additive: boolean) => void;\n\n  // navigation\n  path: readonly AssetPathSegment[];\n  folderTree?: readonly TreeNodeData[];\n  currentFolderId?: string;\n  navigate: (folderId: string, source: AssetNavigationSource) => void;\n\n  // render props\n  renderThumbnail?: (\n    item: AssetItem,\n    ctx: { size: number; selected: boolean }\n  ) => ReactNode;\n  renderItem?: (item: AssetItem, state: AssetItemState) => ReactNode;\n  renderItemContextMenu?: (\n    items: AssetItem[],\n    actions: AssetItemActions\n  ) => ReactNode;\n  renderEmptyContextMenu?: () => ReactNode;\n  /** Auto-build default Rename/Duplicate/Delete/New-folder menu entries. */\n  defaultItemActions: boolean;\n\n  // mutations (inline rename, delete, create-folder, duplicate)\n  mutations: AssetMutationsApi;\n  /**\n   * Mutation keyboard handler (F2 / Delete / Ctrl+D). Attached by each view to\n   * its own scroller so the shortcuts work in both grid and list without\n   * relying on event bubbling to the root.\n   */\n  mutationKeyDown: (event: React.KeyboardEvent) => void;\n\n  // states\n  loading: boolean;\n  loadingItemCount: number;\n  emptyState?: ReactNode;\n  error?: ReactNode;\n  onErrorRetry?: () => void;\n  columns?: readonly DataTableColumn<AssetItem>[];\n\n  // drag & drop\n  dnd: AssetDndContext;\n\n  // virtualization\n  virtualized: boolean | 'auto';\n  virtualizationThreshold: number;\n  overscanRows: number;\n\n  // i18n (resolved: defaults merged with the consumer's overrides)\n  labels: AssetBrowserLabels;\n}\n\nexport const AssetBrowserContext =\n  /*#__PURE__*/ createContext<AssetBrowserContextValue | null>(null);\n\nexport function useAssetBrowserContext(): AssetBrowserContextValue {\n  const value = useContext(AssetBrowserContext);\n  if (!value) {\n    throw new Error(\n      'AssetBrowser subcomponents must be used inside an <AssetBrowser>.'\n    );\n  }\n  return value;\n}\n\n// ── Chrome context (view / search / filter / sort / history) ────────────────\n// Split from the item context so typing in the search box (a per-keystroke\n// update) re-renders only the toolbar, not every grid cell.\n\nexport interface AssetBrowserChromeValue {\n  view: AssetView;\n  setView: (view: AssetView) => void;\n\n  search: string;\n  setSearch: (query: string) => void;\n  filters: AssetFilterState;\n  setFilters: (filters: AssetFilterState) => void;\n  filterableTypes: string[];\n  sort: AssetSortState;\n  setSort: (sort: AssetSortState) => void;\n\n  // history (only meaningful when the `history` prop is enabled)\n  history: boolean;\n  canGoBack: boolean;\n  canGoForward: boolean;\n  goBack: () => void;\n  goForward: () => void;\n\n  // i18n (resolved: defaults merged with the consumer's overrides)\n  labels: AssetBrowserLabels;\n}\n\nexport const AssetBrowserChromeContext =\n  /*#__PURE__*/ createContext<AssetBrowserChromeValue | null>(null);\n\nexport function useAssetBrowserChrome(): AssetBrowserChromeValue {\n  const value = useContext(AssetBrowserChromeContext);\n  if (!value) {\n    throw new Error(\n      'AssetBrowser chrome subcomponents must be used inside an <AssetBrowser>.'\n    );\n  }\n  return value;\n}\n"],"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;;"}