entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,130 @@
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+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 { CopyIcon } from '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import { EditIcon } from '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import { FolderIcon } from '../../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 { TrashIcon } from '../../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 { Menu } from '../../navigation/Menu/Menu.js';
+import { useAssetBrowserContext } from './AssetBrowserContext.js';
+
+/**
+ * Auto-generated item context-menu body used when `defaultItemActions` is set
+ * and the consumer hasn't supplied `renderItemContextMenu`. Renders only the
+ * entries whose mutation callback is present. Rename targets a single item.
+ */
+function DefaultItemMenu({ actions, }) {
+    const { mutations, labels } = useAssetBrowserContext();
+    const single = actions.items.length === 1;
+    const entries = [];
+    if (mutations.canRename) {
+        entries.push(jsx(Menu.Item, { icon: jsx(EditIcon, {}), shortcut: "F2", disabled: !single, onClick: actions.rename, children: labels.rename }, "rename"));
+    }
+    if (mutations.canDuplicate) {
+        entries.push(jsx(Menu.Item, { icon: jsx(CopyIcon, {}), onClick: actions.duplicate, children: labels.duplicate }, "duplicate"));
+    }
+    if (mutations.canDelete) {
+        if (entries.length > 0)
+            entries.push(jsx(Menu.Separator, {}, "sep"));
+        entries.push(jsx(Menu.Item, { icon: jsx(TrashIcon, {}), onClick: actions.delete, children: labels.delete }, "delete"));
+    }
+    if (entries.length === 0)
+        return null;
+    return jsx(Fragment, { children: entries });
+}
+/**
+ * Auto-generated empty-area context-menu body used when `defaultItemActions` is
+ * set and the consumer hasn't supplied `renderEmptyContextMenu`. Currently just
+ * the New-folder entry (when `onCreateFolder` is present).
+ */
+function DefaultEmptyMenu() {
+    const { mutations, labels } = useAssetBrowserContext();
+    if (!mutations.canCreateFolder)
+        return null;
+    return (jsx(Menu.Item, { icon: jsx(FolderIcon, {}), onClick: mutations.createFolder, children: labels.newFolder }));
+}
+
+export { DefaultEmptyMenu, DefaultItemMenu };
+//# sourceMappingURL=AssetBrowserDefaultMenus.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserDefaultMenus.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserDefaultMenus.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAWA;;;;AAIG;AACG;;;;AASJ;AACE;;AAYF;;;AAWA;AACE;;;;AAQF;AAA0B;;AAE5B;AAEA;;;;AAIG;;;;AAG+B;;AAMlC;;"}

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

@@ -0,0 +1,137 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import { useRef, useId, useEffect, useCallback, useLayoutEffect } 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 './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { cellWidthVar, gridGapVar, columnsVar, gridScroller, gridSizer, gridWindow, offsetYVar, totalHeightVar, gridFlow, marquee, marqueeHVar, marqueeWVar, marqueeYVar, marqueeXVar } from './AssetBrowser.css.js';
+import { useAssetBrowserContext, useAssetBrowserStore, useAssetMarquee } from './AssetBrowserContext.js';
+import { GRID_GAP, cellWidth, cellDomId } from './assetBrowserGeometry.js';
+import { AssetBrowserGridItem } from './AssetBrowserGridItem.js';
+import { useAssetGridKeyboardNav } from './useAssetGridKeyboardNav.js';
+import { useAssetGridVirtualizer } from './useAssetGridVirtualizer.js';
+import { useAssetMarqueeGesture } from './useAssetMarqueeGesture.js';
+
+function MarqueeLayer() {
+    const marquee$1 = useAssetMarquee();
+    if (!marquee$1.active || !marquee$1.rect)
+        return null;
+    return (jsx("div", { className: marquee, style: assignInlineVars({
+            [marqueeXVar]: `${marquee$1.rect.x}px`,
+            [marqueeYVar]: `${marquee$1.rect.y}px`,
+            [marqueeWVar]: `${marquee$1.rect.width}px`,
+            [marqueeHVar]: `${marquee$1.rect.height}px`,
+        }) }));
+}
+function AssetBrowserGrid() {
+    const ctx = useAssetBrowserContext();
+    const store = useAssetBrowserStore();
+    const scrollerRef = useRef(null);
+    const gridId = useId();
+    const items = ctx.displayedItems;
+    const count = items.length;
+    const thumbPx = ctx.thumbnailSizePx;
+    // Mirror the store's roving focus onto the grid's `aria-activedescendant`
+    // imperatively, so a screen reader announces the focused cell without us
+    // re-rendering the whole grid on every arrow-key (the per-id focus slices keep
+    // re-renders to the two affected cells). The matching cell `id` is built from
+    // the same `gridId` in AssetBrowserGridItem via `cellDomId`.
+    useEffect(() => {
+        const el = scrollerRef.current;
+        if (!el)
+            return;
+        const apply = () => {
+            const focusedId = store.getFocusedId();
+            if (focusedId === null)
+                el.removeAttribute('aria-activedescendant');
+            else
+                el.setAttribute('aria-activedescendant', cellDomId(gridId, focusedId));
+        };
+        apply();
+        return store.subscribeFocus(apply);
+    }, [store, gridId]);
+    const windowed = ctx.virtualized === true ||
+        (ctx.virtualized === 'auto' && count > ctx.virtualizationThreshold);
+    const win = useAssetGridVirtualizer({
+        containerRef: scrollerRef,
+        count,
+        thumbPx,
+        overscanRows: ctx.overscanRows,
+        enabled: windowed,
+    });
+    const scrollIndexIntoView = useCallback((index, w) => {
+        const el = scrollerRef.current;
+        if (!el)
+            return;
+        const row = Math.floor(index / w.columns);
+        const top = row * w.rowHeight;
+        const bottom = top + w.rowHeight;
+        if (top < el.scrollTop)
+            el.scrollTop = top;
+        else if (bottom > el.scrollTop + el.clientHeight)
+            el.scrollTop = bottom - el.clientHeight;
+    }, []);
+    // Bridge the imperative `scrollToItem` handle through the store so it works
+    // even when the target row is outside the virtualization window.
+    const winRef = useLatest(win);
+    useLayoutEffect(() => store.registerScrollToIndex(index => {
+        scrollIndexIntoView(index, winRef.current);
+    }), [store, winRef, scrollIndexIntoView]);
+    const keyboard = useAssetGridKeyboardNav({
+        store,
+        items,
+        win,
+        scrollerRef,
+        selectionMode: ctx.selectionMode,
+        selectAll: ctx.selectAll,
+        clearSelection: ctx.clearSelection,
+        activateItem: ctx.activateItem,
+        toggleSelectId: ctx.toggleSelectId,
+        selectByKeyboard: ctx.selectByKeyboard,
+        scrollIndexIntoView,
+    });
+    const marquee = useAssetMarqueeGesture({
+        scrollerRef,
+        enabled: ctx.marqueeEnabled,
+        items,
+        columns: win.columns,
+        thumbPx,
+        commitMarquee: ctx.commitMarquee,
+    });
+    const sharedVars = assignInlineVars({
+        [columnsVar]: String(win.columns),
+        [gridGapVar]: `${GRID_GAP}px`,
+        [cellWidthVar]: `${cellWidth(thumbPx)}px`,
+    });
+    // Grid keydown = 2D navigation + the shared mutation shortcuts (F2 / Delete /
+    // Ctrl+D). Both are attached here, on the element that receives the event, so
+    // the shortcuts fire without depending on bubbling to the root. The key sets
+    // are disjoint, so order doesn't matter.
+    const mutationKeyDown = ctx.mutationKeyDown;
+    const onGridKeyDown = useCallback((event) => {
+        keyboard.onKeyDown(event);
+        mutationKeyDown(event);
+    }, [keyboard, mutationKeyDown]);
+    const rendered = [];
+    for (let i = win.startIndex; i < win.endIndex; i += 1) {
+        const item = items[i];
+        if (!item)
+            continue;
+        rendered.push(jsx(AssetBrowserGridItem, { item: item, index: i, gridId: gridId, columns: win.columns }, item.id));
+    }
+    return (jsx("div", { ref: scrollerRef, className: gridScroller, role: "grid", "aria-label": ctx.labels.gridAria, "aria-multiselectable": ctx.selectionMode === 'multiple', "aria-rowcount": win.totalRows, "aria-colcount": win.columns, tabIndex: 0, onKeyDown: onGridKeyDown, onPointerDown: marquee.onPointerDown, onPointerMove: marquee.onPointerMove, onPointerUp: marquee.onPointerUp, onPointerCancel: marquee.onPointerCancel, children: windowed ? (jsxs("div", { className: gridSizer, style: assignInlineVars({
+                [totalHeightVar]: `${win.totalHeight}px`,
+            }), children: [jsx(MarqueeLayer, {}), jsx("div", { className: gridWindow, style: {
+                        ...sharedVars,
+                        ...assignInlineVars({ [offsetYVar]: `${win.offsetY}px` }),
+                    }, role: "presentation", children: rendered })] })) : (jsxs(Fragment, { children: [jsx(MarqueeLayer, {}), jsx("div", { className: gridFlow, style: sharedVars, role: "presentation", children: rendered })] })) }));
+}
+
+export { AssetBrowserGrid };
+//# sourceMappingURL=AssetBrowserGrid.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserGrid.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserGrid.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;AA0CA;AACE;;AACsC;;;;;;;AAYxC;;AAGE;AACA;AACA;AACA;AAEA;AACA;AACA;;;;;;;AAQE;AACA;;;AAEE;;AACwB;;AAEtB;AACJ;AACA;AACA;AACF;AAEA;AAEE;;AAGA;;;;AAIA;AACD;;AAIG;AACA;;AACA;AACA;AACA;AACA;AAAwB;;;;;;AAS5B;;AAIM;;;;;;;;;;;;;;AAiBL;;;;;;;;AASA;;;AAIC;;AAED;;;;;AAMD;AACA;AAEI;;AAEF;;AAKF;AACE;AACA;;AACA;;AAWF;AAoBU;;AAOE;AACA;AACD;AAgBb;;"}

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

@@ -0,0 +1,220 @@
+"use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+import React, { useState } from 'react';
+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 { CodeIcon } from '../../Icons/CodeIcon.js';
+import '../../Icons/CopyIcon.js';
+import '../../Icons/CutIcon.js';
+import '../../Icons/DownloadIcon.js';
+import '../../Icons/EditIcon.js';
+import '../../Icons/ErrorIcon.js';
+import '../../Icons/ExternalLinkIcon.js';
+import { EyeDropperIcon } from '../../Icons/EyeDropperIcon.js';
+import '../../Icons/EyeIcon.js';
+import '../../Icons/FilterIcon.js';
+import '../../Icons/FirstIcon.js';
+import { FolderIcon } from '../../Icons/FolderIcon.js';
+import '../../Icons/FullscreenIcon.js';
+import { GridIcon } from '../../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 { PlayIcon } from '../../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 { FileTextIcon } from '../../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 { Icon } from '../../primitives/Icon/Icon.js';
+import { cellLabel, thumbSizeVar, cellHeightVar, cellWidthVar, cellRecipe, thumb, thumbImage } from './AssetBrowser.css.js';
+import { useAssetBrowserContext, useAssetSelected, useAssetFocused, useAssetDropTarget, useAssetEditing } from './AssetBrowserContext.js';
+import { cellHeight, cellWidth, cellDomId } from './assetBrowserGeometry.js';
+import { AssetBrowserRenameField } from './AssetBrowserRenameField.js';
+
+/**
+ * Type-derived fallback glyph for files without a thumbnail or explicit `icon`.
+ * Only the asset types whose fallback is actually seen (image/model usually
+ * carry a thumbnail) get a distinct icon; the rest share the generic file icon.
+ */
+function typeFallbackIcon(assetType) {
+    switch (assetType) {
+        case 'material':
+            return jsx(EyeDropperIcon, {});
+        case 'audio':
+        case 'video':
+            return jsx(PlayIcon, {});
+        case 'scene':
+            return jsx(GridIcon, {});
+        case 'text':
+            return jsx(CodeIcon, {});
+        default:
+            return jsx(FileTextIcon, {});
+    }
+}
+function FallbackIcon({ item }) {
+    if (item.icon)
+        return jsx(Fragment, { children: item.icon });
+    return (jsx(Icon, { size: "lg", color: "muted", decorative: true, children: item.kind === 'folder' ? (jsx(FolderIcon, {})) : (typeFallbackIcon(item.assetType)) }));
+}
+function Thumbnail({ item, thumbPx, selected, }) {
+    const { renderThumbnail } = useAssetBrowserContext();
+    const custom = renderThumbnail?.(item, { size: thumbPx, selected });
+    // Broken / expired / CORS-failed thumbnail URLs fall back to the type icon
+    // instead of the browser's broken-image glyph. The error flag resets when the
+    // source changes via the adjust-state-during-render pattern (a previous-prop
+    // sentinel in state — component-patterns.md §14), so no effect is needed.
+    const [errored, setErrored] = useState(false);
+    const [errorUrl, setErrorUrl] = useState(item.thumbnailUrl);
+    if (item.thumbnailUrl !== errorUrl) {
+        setErrorUrl(item.thumbnailUrl);
+        setErrored(false);
+    }
+    const showImg = !custom && item.thumbnailUrl !== undefined && !errored;
+    return (jsx("div", { className: thumb, children: custom ??
+            (showImg ? (jsx("img", { className: thumbImage, src: item.thumbnailUrl, alt: "", loading: "lazy", decoding: "async", draggable: false, onError: () => {
+                    setErrored(true);
+                } })) : (jsx(FallbackIcon, { item: item }))) }));
+}
+function GridItemImpl({ item, index, gridId, columns, }) {
+    const ctx = useAssetBrowserContext();
+    const selected = useAssetSelected(item.id);
+    const focused = useAssetFocused(item.id);
+    const dropActive = useAssetDropTarget(item.id);
+    const editing = useAssetEditing(item.id);
+    const isDropTarget = item.kind === 'folder' && dropActive;
+    const thumbPx = ctx.thumbnailSizePx;
+    // 1-based grid position for assistive tech, computed from display index so it
+    // reflects true totals even though only the virtualization window is mounted.
+    const cols = Math.max(1, columns);
+    const ariaRowIndex = Math.floor(index / cols) + 1;
+    const ariaColIndex = (index % cols) + 1;
+    const isDraggable = item.draggable !== false && item.disabled !== true;
+    const isFolderTarget = item.kind === 'folder' &&
+        item.droppable !== false &&
+        ctx.dnd.internalEnabled;
+    const inner = ctx.renderItem ? (ctx.renderItem(item, {
+        selected,
+        focused,
+        index,
+        view: 'grid',
+        dropTarget: isDropTarget,
+    })) : (jsxs(Fragment, { children: [jsx(Thumbnail, { item: item, thumbPx: thumbPx, selected: selected }), editing ? (jsx(AssetBrowserRenameField, { item: item })) : (jsx("span", { className: cellLabel, children: item.name }))] }));
+    const cell = (
+    // Keyboard interaction is centralized at the grid level: cells use roving
+    // tabIndex and AssetBrowserGrid's onKeyDown drives Enter/Space/arrow nav,
+    // so a redundant per-cell key handler is intentionally omitted.
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+    jsx("div", { role: "gridcell", id: cellDomId(gridId, item.id), "data-asset-id": item.id, "aria-selected": selected, "aria-label": item.name, "aria-rowindex": ariaRowIndex, "aria-colindex": ariaColIndex, title: item.name, tabIndex: focused ? 0 : -1, className: cellRecipe({
+            selected,
+            dropTarget: isDropTarget,
+            disabled: item.disabled === true,
+        }), style: assignInlineVars({
+            [cellWidthVar]: `${cellWidth(thumbPx)}px`,
+            [cellHeightVar]: `${cellHeight(thumbPx)}px`,
+            [thumbSizeVar]: `${thumbPx}px`,
+        }), 
+        // While renaming, the cell is non-interactive for selection/open/drag —
+        // clicks on the thumbnail above the field must not reselect or navigate.
+        draggable: isDraggable && !editing, onClick: editing
+            ? undefined
+            : e => {
+                ctx.handleItemClick(item, index, e);
+            }, onDoubleClick: editing
+            ? undefined
+            : () => {
+                ctx.activateItem(item);
+            }, onDragStart: isDraggable && !editing
+            ? e => {
+                ctx.dnd.onItemDragStart(item, e);
+            }
+            : undefined, onDragEnd: isDraggable
+            ? e => {
+                ctx.dnd.onItemDragEnd(item, e);
+            }
+            : undefined, onDragOver: isFolderTarget
+            ? e => {
+                ctx.dnd.onFolderDragOver(item.id, e);
+            }
+            : undefined, onDragLeave: isFolderTarget
+            ? e => {
+                ctx.dnd.onFolderDragLeave(item.id, e);
+            }
+            : undefined, onDrop: isFolderTarget
+            ? e => {
+                ctx.dnd.onFolderDrop(item.id, e);
+            }
+            : undefined, children: inner }));
+    // The right-click menu and roving-focus marker `data-asset-id` are handled by
+    // the shared AssetBrowserContextMenuLayer at the surface level — the cell is a
+    // plain grid child with no per-cell ContextMenu wrapper.
+    return cell;
+}
+const AssetBrowserGridItem = /*#__PURE__*/ React.memo(GridItemImpl);
+AssetBrowserGridItem.displayName = 'AssetBrowserGridItem';
+
+export { AssetBrowserGridItem };
+//# sourceMappingURL=AssetBrowserGridItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserGridItem.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserGridItem.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA;;;;AAIG;AACH;;AAII;;AAEA;AACA;;AAEA;;AAEA;;AAEA;;;AAGJ;AAEA;;AACiB;AACf;AASF;AAEA;AASE;AACA;;;;;;AAMA;AACA;AACE;;;AAGF;AACA;AAGM;;AAUI;AAOZ;AAEA;AAME;;;;;;AAOA;;;;AAIA;;AAGA;AACA;;AAGE;AAEF;;;;AAKI;AACA;;AAaJ;;;;;;;AAiBM;AACA;AACD;;;AAIC;;;;;AAOE;;;;AAOA;;AAEI;AACF;;;;AAOF;;;;AAOA;;;;AAOA;;;;AAOA;;;;AAOA;;;;AAUR;AACF;AAEO;AACP;;"}