entangle-ui 0.9.0 → 0.10.0

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

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

@@ -0,0 +1,183 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { DataTable } from '../../data/DataTable/DataTable.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 '../../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 '../../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 { listScroller, nameCell } from './AssetBrowser.css.js';
+import { useAssetBrowserContext, useAssetBrowserChrome, useAssetSelection, useAssetEditing } from './AssetBrowserContext.js';
+import { formatBytes, formatDate } from './assetBrowserFormat.js';
+import { AssetBrowserRenameField } from './AssetBrowserRenameField.js';
+
+/**
+ * Name cell — swaps to the inline rename field when this row is the rename
+ * target. A component (not an inline `cell` fn) so the `useAssetEditing` hook is
+ * valid; this is the same shared rename mechanism the grid uses.
+ */
+function ListNameCell({ item }) {
+    const editing = useAssetEditing(item.id);
+    if (editing)
+        return jsx(AssetBrowserRenameField, { item: item });
+    return (jsxs("span", { className: nameCell, children: [jsx(Icon, { size: "sm", color: "muted", decorative: true, children: item.kind === 'folder' ? jsx(FolderIcon, {}) : jsx(FileTextIcon, {}) }), jsx("span", { children: item.name })] }));
+}
+/**
+ * Default name/type/size/modified columns, built from the resolved labels so
+ * the headers and the folder "Type" value follow the `labels` prop.
+ */
+function buildDefaultColumns(labels) {
+    return [
+        {
+            id: 'name',
+            header: labels.sortFields.name,
+            accessor: 'name',
+            sortable: true,
+            sticky: true,
+            minWidth: 160,
+            cell: ({ row }) => jsx(ListNameCell, { item: row }),
+        },
+        {
+            id: 'type',
+            header: labels.sortFields.type,
+            sortable: true,
+            width: 120,
+            accessor: row => row.kind === 'folder' ? labels.folder : (row.assetType ?? ''),
+        },
+        {
+            id: 'size',
+            header: labels.sortFields.size,
+            sortable: true,
+            align: 'right',
+            width: 100,
+            accessor: 'size',
+            cell: ({ row }) => (row.kind === 'folder' ? '—' : formatBytes(row.size)),
+        },
+        {
+            id: 'modified',
+            header: labels.sortFields.modified,
+            sortable: true,
+            align: 'right',
+            width: 140,
+            accessor: 'modifiedAt',
+            cell: ({ row }) => formatDate(row.modifiedAt),
+        },
+    ];
+}
+function AssetBrowserList() {
+    const ctx = useAssetBrowserContext();
+    const chrome = useAssetBrowserChrome();
+    const selectionSet = useAssetSelection();
+    const defaultColumns = useMemo(() => buildDefaultColumns(ctx.labels), [ctx.labels]);
+    const columns = ctx.columns ?? defaultColumns;
+    // We own sorting (rows arrive already shaped); DataTable only reflects the
+    // indicator and reports the next desired sort.
+    const sort = {
+        columnId: chrome.sort.field,
+        direction: chrome.sort.direction,
+    };
+    const selection = useMemo(() => Array.from(selectionSet), [selectionSet]);
+    return (
+    // The mutation shortcuts (F2 / Delete / Ctrl+D) attach to this wrapper;
+    // DataTable's own keydowns bubble up to it. F2 targets the sole selected row
+    // (the list has no store roving-focus). Static-element handler is intentional.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    jsx("div", { className: listScroller, onKeyDown: ctx.mutationKeyDown, children: jsx(DataTable, { rows: ctx.displayedItems, columns: columns, rowKey: "id", density: ctx.density, height: "100%", sort: sort, manualSort: true, onSortChange: next => {
+                if (!next.columnId || !next.direction) {
+                    chrome.setSort({ field: 'name', direction: 'asc' });
+                    return;
+                }
+                chrome.setSort({ field: next.columnId, direction: next.direction });
+            }, selectionMode: ctx.selectionMode, selection: selection, onSelectionChange: ids => {
+                ctx.setSelectionIds(ids, 'click');
+            }, isRowSelectable: row => row.selectable !== false && row.disabled !== true, onRowActivate: row => {
+                ctx.activateItem(row);
+            }, emptyState: ctx.emptyState, loading: ctx.loading, "aria-label": "Assets" }) }));
+}
+
+export { AssetBrowserList };
+//# sourceMappingURL=AssetBrowserList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserList.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserList.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyBA;;;;AAIG;AACH;;AAEE;AAAa;;AASf;AAEA;;;AAGG;AACH;;AAII;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;AACD;AACE;AACA;AACA;AACA;;AAGD;AACD;AACE;AACA;AACA;AACA;AACA;AACA;;AAED;AACD;AACE;AACA;AACA;AACA;AACA;AACA;AACA;AACD;;AAEL;;AAGE;AACA;AACA;;AAMA;;;AAIA;AACE;AACA;;AAGF;;;;;;;;AAkBU;;;AAGF;AACF;AAIE;;AAMA;AACF;AAOR;;"}

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

@@ -0,0 +1,63 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useLayoutEffect, useCallback } from 'react';
+import { Input } from '../../primitives/Input/Input.js';
+import { renameField } from './AssetBrowser.css.js';
+import { useAssetBrowserContext } from './AssetBrowserContext.js';
+
+/**
+ * Inline label editor shown in place of a grid cell's name while the cell is
+ * the rename target. Owns only the transient text buffer; the "is editing" flag
+ * lives in the store. Commits on Enter / blur (changed value), cancels on
+ * Escape, and stops key propagation so the grid's roving navigation doesn't
+ * steal keystrokes.
+ */
+function AssetBrowserRenameField({ item, }) {
+    const { mutations, labels } = useAssetBrowserContext();
+    const [value, setValue] = useState(item.name);
+    const inputRef = useRef(null);
+    // Guard against the blur fired by our own Enter/Escape commit double-firing.
+    const committedRef = useRef(false);
+    // Focus + select the basename once, after the field mounts.
+    useLayoutEffect(() => {
+        const el = inputRef.current;
+        if (!el)
+            return;
+        el.focus();
+        el.select();
+    }, []);
+    const commit = useCallback(() => {
+        if (committedRef.current)
+            return;
+        committedRef.current = true;
+        void mutations.commitRename(item, value).then(accepted => {
+            // Rejected name → reopen for another attempt.
+            if (!accepted)
+                committedRef.current = false;
+        });
+    }, [mutations, item, value]);
+    const cancel = useCallback(() => {
+        committedRef.current = true;
+        mutations.cancelRename();
+    }, [mutations]);
+    return (jsx(Input, { ref: inputRef, className: renameField, size: "sm", value: value, "aria-label": `${labels.rename} ${item.name}`, onChange: setValue, onKeyDown: e => {
+            // Keep arrows / Space / type-ahead inside the field, away from the grid.
+            e.stopPropagation();
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                commit();
+            }
+            else if (e.key === 'Escape') {
+                e.preventDefault();
+                cancel();
+            }
+        }, onBlur: commit, onClick: e => {
+            // A click on the field shouldn't reselect / navigate the cell.
+            e.stopPropagation();
+        }, onDoubleClick: e => {
+            e.stopPropagation();
+        } }));
+}
+
+export { AssetBrowserRenameField };
+//# sourceMappingURL=AssetBrowserRenameField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserRenameField.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserRenameField.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAeA;;;;;;AAMG;AACG;;AAIJ;AACA;;AAEA;;;AAIE;AACA;;;;;AAKF;;;AAEE;AACA;;AAEE;AAAe;AACjB;;AAGF;AACE;;AAEF;AAEA;;;AAWM;;AAEE;;AACK;;AAEL;;;;;AAOJ;;;AAMN;;"}

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { TreeView } from '../../controls/TreeView/TreeView.js';
+import { sidebar } from './AssetBrowser.css.js';
+import { useAssetBrowserContext } from './AssetBrowserContext.js';
+
+function AssetBrowserSidebar() {
+    const ctx = useAssetBrowserContext();
+    if (!ctx.folderTree)
+        return null;
+    return (jsx("div", { className: sidebar, children: jsx(TreeView, { nodes: ctx.folderTree, selectionMode: "single", selectedIds: ctx.currentFolderId ? [ctx.currentFolderId] : [], onSelectionChange: ids => {
+                const id = ids[0];
+                if (id)
+                    ctx.navigate(id, 'sidebar');
+            } }) }));
+}
+
+export { AssetBrowserSidebar };
+//# sourceMappingURL=AssetBrowserSidebar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserSidebar.js","sources":["../../../../../../src/components/editor/AssetBrowser/AssetBrowserSidebar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAYE;;AACqB;AAErB;AAOQ;AACA;AAAQ;;AAKlB;;"}