entangle-ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,226 @@
+"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 '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.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":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useState } from 'react';\n\nimport {\n  CodeIcon,\n  EyeDropperIcon,\n  FileTextIcon,\n  FolderIcon,\n  GridIcon,\n  PlayIcon,\n} from '@/components/Icons';\nimport { Icon } from '@/components/primitives/Icon';\n\nimport {\n  cellLabel,\n  cellRecipe,\n  cellWidthVar,\n  cellHeightVar,\n  thumb,\n  thumbImage,\n  thumbSizeVar,\n} from './AssetBrowser.css';\nimport {\n  useAssetBrowserContext,\n  useAssetDropTarget,\n  useAssetEditing,\n  useAssetFocused,\n  useAssetSelected,\n} from './AssetBrowserContext';\nimport { cellDomId, cellHeight, cellWidth } from './assetBrowserGeometry';\nimport { AssetBrowserRenameField } from './AssetBrowserRenameField';\n\nimport type { AssetItem, AssetType } from './AssetBrowser.types';\n\nexport interface AssetBrowserGridItemProps {\n  item: AssetItem;\n  index: number;\n  /** Grid `useId` base — builds the cell `id` for `aria-activedescendant`. */\n  gridId: string;\n  /** Current column count — derives 1-based `aria-rowindex`/`aria-colindex`. */\n  columns: number;\n}\n\n/**\n * Type-derived fallback glyph for files without a thumbnail or explicit `icon`.\n * Only the asset types whose fallback is actually seen (image/model usually\n * carry a thumbnail) get a distinct icon; the rest share the generic file icon.\n */\nfunction typeFallbackIcon(\n  assetType: AssetType | undefined\n): React.ReactElement {\n  switch (assetType) {\n    case 'material':\n      return <EyeDropperIcon />;\n    case 'audio':\n    case 'video':\n      return <PlayIcon />;\n    case 'scene':\n      return <GridIcon />;\n    case 'text':\n      return <CodeIcon />;\n    default:\n      return <FileTextIcon />;\n  }\n}\n\nfunction FallbackIcon({ item }: { item: AssetItem }): React.ReactElement {\n  if (item.icon) return <>{item.icon}</>;\n  return (\n    <Icon size=\"lg\" color=\"muted\" decorative>\n      {item.kind === 'folder' ? (\n        <FolderIcon />\n      ) : (\n        typeFallbackIcon(item.assetType)\n      )}\n    </Icon>\n  );\n}\n\nfunction Thumbnail({\n  item,\n  thumbPx,\n  selected,\n}: {\n  item: AssetItem;\n  thumbPx: number;\n  selected: boolean;\n}): React.ReactElement {\n  const { renderThumbnail } = useAssetBrowserContext();\n  const custom = renderThumbnail?.(item, { size: thumbPx, selected });\n  // Broken / expired / CORS-failed thumbnail URLs fall back to the type icon\n  // instead of the browser's broken-image glyph. The error flag resets when the\n  // source changes via the adjust-state-during-render pattern (a previous-prop\n  // sentinel in state — component-patterns.md §14), so no effect is needed.\n  const [errored, setErrored] = useState(false);\n  const [errorUrl, setErrorUrl] = useState(item.thumbnailUrl);\n  if (item.thumbnailUrl !== errorUrl) {\n    setErrorUrl(item.thumbnailUrl);\n    setErrored(false);\n  }\n  const showImg = !custom && item.thumbnailUrl !== undefined && !errored;\n  return (\n    <div className={thumb}>\n      {custom ??\n        (showImg ? (\n          <img\n            className={thumbImage}\n            src={item.thumbnailUrl}\n            alt=\"\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            draggable={false}\n            onError={() => {\n              setErrored(true);\n            }}\n          />\n        ) : (\n          <FallbackIcon item={item} />\n        ))}\n    </div>\n  );\n}\n\nfunction GridItemImpl({\n  item,\n  index,\n  gridId,\n  columns,\n}: AssetBrowserGridItemProps): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  const selected = useAssetSelected(item.id);\n  const focused = useAssetFocused(item.id);\n  const dropActive = useAssetDropTarget(item.id);\n  const editing = useAssetEditing(item.id);\n\n  const isDropTarget = item.kind === 'folder' && dropActive;\n  const thumbPx = ctx.thumbnailSizePx;\n  // 1-based grid position for assistive tech, computed from display index so it\n  // reflects true totals even though only the virtualization window is mounted.\n  const cols = Math.max(1, columns);\n  const ariaRowIndex = Math.floor(index / cols) + 1;\n  const ariaColIndex = (index % cols) + 1;\n\n  const isDraggable = item.draggable !== false && item.disabled !== true;\n  const isFolderTarget =\n    item.kind === 'folder' &&\n    item.droppable !== false &&\n    ctx.dnd.internalEnabled;\n\n  const inner = ctx.renderItem ? (\n    ctx.renderItem(item, {\n      selected,\n      focused,\n      index,\n      view: 'grid',\n      dropTarget: isDropTarget,\n    })\n  ) : (\n    <>\n      <Thumbnail item={item} thumbPx={thumbPx} selected={selected} />\n      {editing ? (\n        <AssetBrowserRenameField item={item} />\n      ) : (\n        <span className={cellLabel}>{item.name}</span>\n      )}\n    </>\n  );\n\n  const cell = (\n    // Keyboard interaction is centralized at the grid level: cells use roving\n    // tabIndex and AssetBrowserGrid's onKeyDown drives Enter/Space/arrow nav,\n    // so a redundant per-cell key handler is intentionally omitted.\n    // eslint-disable-next-line jsx-a11y/click-events-have-key-events\n    <div\n      role=\"gridcell\"\n      id={cellDomId(gridId, item.id)}\n      data-asset-id={item.id}\n      aria-selected={selected}\n      aria-label={item.name}\n      aria-rowindex={ariaRowIndex}\n      aria-colindex={ariaColIndex}\n      title={item.name}\n      tabIndex={focused ? 0 : -1}\n      className={cellRecipe({\n        selected,\n        dropTarget: isDropTarget,\n        disabled: item.disabled === true,\n      })}\n      style={assignInlineVars({\n        [cellWidthVar]: `${cellWidth(thumbPx)}px`,\n        [cellHeightVar]: `${cellHeight(thumbPx)}px`,\n        [thumbSizeVar]: `${thumbPx}px`,\n      })}\n      // While renaming, the cell is non-interactive for selection/open/drag —\n      // clicks on the thumbnail above the field must not reselect or navigate.\n      draggable={isDraggable && !editing}\n      onClick={\n        editing\n          ? undefined\n          : e => {\n              ctx.handleItemClick(item, index, e);\n            }\n      }\n      onDoubleClick={\n        editing\n          ? undefined\n          : () => {\n              ctx.activateItem(item);\n            }\n      }\n      onDragStart={\n        isDraggable && !editing\n          ? e => {\n              ctx.dnd.onItemDragStart(item, e);\n            }\n          : undefined\n      }\n      onDragEnd={\n        isDraggable\n          ? e => {\n              ctx.dnd.onItemDragEnd(item, e);\n            }\n          : undefined\n      }\n      onDragOver={\n        isFolderTarget\n          ? e => {\n              ctx.dnd.onFolderDragOver(item.id, e);\n            }\n          : undefined\n      }\n      onDragLeave={\n        isFolderTarget\n          ? e => {\n              ctx.dnd.onFolderDragLeave(item.id, e);\n            }\n          : undefined\n      }\n      onDrop={\n        isFolderTarget\n          ? e => {\n              ctx.dnd.onFolderDrop(item.id, e);\n            }\n          : undefined\n      }\n    >\n      {inner}\n    </div>\n  );\n\n  // The right-click menu and roving-focus marker `data-asset-id` are handled by\n  // the shared AssetBrowserContextMenuLayer at the surface level — the cell is a\n  // plain grid child with no per-cell ContextMenu wrapper.\n  return cell;\n}\n\nexport const AssetBrowserGridItem = /*#__PURE__*/ React.memo(GridItemImpl);\nAssetBrowserGridItem.displayName = 'AssetBrowserGridItem';\n"],"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,189 @@
+"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 '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.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":["'use client';\n\nimport React, { useMemo } from 'react';\n\nimport { DataTable } from '@/components/data/DataTable';\nimport { FileTextIcon, FolderIcon } from '@/components/Icons';\nimport { Icon } from '@/components/primitives/Icon';\n\nimport { listScroller, nameCell } from './AssetBrowser.css';\nimport {\n  useAssetBrowserChrome,\n  useAssetBrowserContext,\n  useAssetEditing,\n  useAssetSelection,\n} from './AssetBrowserContext';\nimport { formatBytes, formatDate } from './assetBrowserFormat';\nimport { AssetBrowserRenameField } from './AssetBrowserRenameField';\n\nimport type { AssetItem } from './AssetBrowser.types';\nimport type { AssetBrowserLabels } from './assetBrowserLabels';\nimport type {\n  DataTableColumn,\n  DataTableSortState,\n} from '@/components/data/DataTable';\n\n/**\n * Name cell — swaps to the inline rename field when this row is the rename\n * target. A component (not an inline `cell` fn) so the `useAssetEditing` hook is\n * valid; this is the same shared rename mechanism the grid uses.\n */\nfunction ListNameCell({ item }: { item: AssetItem }): React.ReactElement {\n  const editing = useAssetEditing(item.id);\n  if (editing) return <AssetBrowserRenameField item={item} />;\n  return (\n    <span className={nameCell}>\n      <Icon size=\"sm\" color=\"muted\" decorative>\n        {item.kind === 'folder' ? <FolderIcon /> : <FileTextIcon />}\n      </Icon>\n      <span>{item.name}</span>\n    </span>\n  );\n}\n\n/**\n * Default name/type/size/modified columns, built from the resolved labels so\n * the headers and the folder \"Type\" value follow the `labels` prop.\n */\nfunction buildDefaultColumns(\n  labels: AssetBrowserLabels\n): readonly DataTableColumn<AssetItem>[] {\n  return [\n    {\n      id: 'name',\n      header: labels.sortFields.name,\n      accessor: 'name',\n      sortable: true,\n      sticky: true,\n      minWidth: 160,\n      cell: ({ row }) => <ListNameCell item={row} />,\n    },\n    {\n      id: 'type',\n      header: labels.sortFields.type,\n      sortable: true,\n      width: 120,\n      accessor: row =>\n        row.kind === 'folder' ? labels.folder : (row.assetType ?? ''),\n    },\n    {\n      id: 'size',\n      header: labels.sortFields.size,\n      sortable: true,\n      align: 'right',\n      width: 100,\n      accessor: 'size',\n      cell: ({ row }) => (row.kind === 'folder' ? '—' : formatBytes(row.size)),\n    },\n    {\n      id: 'modified',\n      header: labels.sortFields.modified,\n      sortable: true,\n      align: 'right',\n      width: 140,\n      accessor: 'modifiedAt',\n      cell: ({ row }) => formatDate(row.modifiedAt),\n    },\n  ];\n}\n\nexport function AssetBrowserList(): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  const chrome = useAssetBrowserChrome();\n  const selectionSet = useAssetSelection();\n\n  const defaultColumns = useMemo(\n    () => buildDefaultColumns(ctx.labels),\n    [ctx.labels]\n  );\n  const columns = ctx.columns ?? defaultColumns;\n\n  // We own sorting (rows arrive already shaped); DataTable only reflects the\n  // indicator and reports the next desired sort.\n  const sort: DataTableSortState = {\n    columnId: chrome.sort.field,\n    direction: chrome.sort.direction,\n  };\n\n  const selection = useMemo(() => Array.from(selectionSet), [selectionSet]);\n\n  return (\n    // The mutation shortcuts (F2 / Delete / Ctrl+D) attach to this wrapper;\n    // DataTable's own keydowns bubble up to it. F2 targets the sole selected row\n    // (the list has no store roving-focus). Static-element handler is intentional.\n    // eslint-disable-next-line jsx-a11y/no-static-element-interactions\n    <div className={listScroller} onKeyDown={ctx.mutationKeyDown}>\n      <DataTable<AssetItem>\n        rows={ctx.displayedItems}\n        columns={columns}\n        rowKey=\"id\"\n        density={ctx.density}\n        height=\"100%\"\n        sort={sort}\n        manualSort\n        onSortChange={next => {\n          if (!next.columnId || !next.direction) {\n            chrome.setSort({ field: 'name', direction: 'asc' });\n            return;\n          }\n          chrome.setSort({ field: next.columnId, direction: next.direction });\n        }}\n        selectionMode={ctx.selectionMode}\n        selection={selection}\n        onSelectionChange={ids => {\n          ctx.setSelectionIds(ids, 'click');\n        }}\n        isRowSelectable={row =>\n          row.selectable !== false && row.disabled !== true\n        }\n        onRowActivate={row => {\n          ctx.activateItem(row);\n        }}\n        emptyState={ctx.emptyState}\n        loading={ctx.loading}\n        aria-label=\"Assets\"\n      />\n    </div>\n  );\n}\n"],"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":["'use client';\n\nimport React, { useCallback, useLayoutEffect, useRef, useState } from 'react';\n\nimport { Input } from '@/components/primitives/Input';\n\nimport { renameField } from './AssetBrowser.css';\nimport { useAssetBrowserContext } from './AssetBrowserContext';\n\nimport type { AssetItem } from './AssetBrowser.types';\n\nexport interface AssetBrowserRenameFieldProps {\n  item: AssetItem;\n}\n\n/**\n * Inline label editor shown in place of a grid cell's name while the cell is\n * the rename target. Owns only the transient text buffer; the \"is editing\" flag\n * lives in the store. Commits on Enter / blur (changed value), cancels on\n * Escape, and stops key propagation so the grid's roving navigation doesn't\n * steal keystrokes.\n */\nexport function AssetBrowserRenameField({\n  item,\n}: AssetBrowserRenameFieldProps): React.ReactElement {\n  const { mutations, labels } = useAssetBrowserContext();\n  const [value, setValue] = useState(item.name);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // Guard against the blur fired by our own Enter/Escape commit double-firing.\n  const committedRef = useRef(false);\n\n  // Focus + select the basename once, after the field mounts.\n  useLayoutEffect(() => {\n    const el = inputRef.current;\n    if (!el) return;\n    el.focus();\n    el.select();\n  }, []);\n\n  const commit = useCallback((): void => {\n    if (committedRef.current) return;\n    committedRef.current = true;\n    void mutations.commitRename(item, value).then(accepted => {\n      // Rejected name → reopen for another attempt.\n      if (!accepted) committedRef.current = false;\n    });\n  }, [mutations, item, value]);\n\n  const cancel = useCallback((): void => {\n    committedRef.current = true;\n    mutations.cancelRename();\n  }, [mutations]);\n\n  return (\n    <Input\n      ref={inputRef}\n      className={renameField}\n      size=\"sm\"\n      value={value}\n      aria-label={`${labels.rename} ${item.name}`}\n      onChange={setValue}\n      onKeyDown={e => {\n        // Keep arrows / Space / type-ahead inside the field, away from the grid.\n        e.stopPropagation();\n        if (e.key === 'Enter') {\n          e.preventDefault();\n          commit();\n        } else if (e.key === 'Escape') {\n          e.preventDefault();\n          cancel();\n        }\n      }}\n      onBlur={commit}\n      onClick={e => {\n        // A click on the field shouldn't reselect / navigate the cell.\n        e.stopPropagation();\n      }}\n      onDoubleClick={e => {\n        e.stopPropagation();\n      }}\n    />\n  );\n}\n"],"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":["'use client';\n\nimport React from 'react';\n\nimport { TreeView } from '@/components/controls/TreeView';\n\nimport { sidebar } from './AssetBrowser.css';\nimport { useAssetBrowserContext } from './AssetBrowserContext';\n\nimport type { TreeNodeData } from '@/components/controls/TreeView';\n\nexport function AssetBrowserSidebar(): React.ReactElement | null {\n  const ctx = useAssetBrowserContext();\n  if (!ctx.folderTree) return null;\n\n  return (\n    <div className={sidebar}>\n      <TreeView\n        nodes={ctx.folderTree as TreeNodeData[]}\n        selectionMode=\"single\"\n        selectedIds={ctx.currentFolderId ? [ctx.currentFolderId] : []}\n        onSelectionChange={ids => {\n          const id = ids[0];\n          if (id) ctx.navigate(id, 'sidebar');\n        }}\n      />\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAYE;;AACqB;AAErB;AAOQ;AACA;AAAQ;;AAKlB;;"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { SegmentedControl } from '../../navigation/SegmentedControl/SegmentedControl.js';
+import { SegmentedControlItem } from '../../navigation/SegmentedControl/SegmentedControlItem.js';
+import { statusBar, statusSpacer } from './AssetBrowser.css.js';
+import { useAssetBrowserContext } from './AssetBrowserContext.js';
+import { useAssetBrowserAnnouncement } from './useAssetBrowserAnnouncement.js';
+
+/**
+ * Optional footer bar showing the live announcement and (in grid view) a
+ * thumbnail-size segmented control. The announcement is sourced from the
+ * `useAssetBrowserAnnouncement` slice hook, so the bar updates without the
+ * root recomputing it.
+ */
+function AssetBrowserStatusBar({ view, thumbnailSize, setThumbnailSize, }) {
+    const announcement = useAssetBrowserAnnouncement();
+    const { labels } = useAssetBrowserContext();
+    return (jsxs("div", { className: statusBar, children: [jsx("span", { children: announcement }), jsx("span", { className: statusSpacer }), view === 'grid' && (jsxs(SegmentedControl, { value: typeof thumbnailSize === 'string' ? thumbnailSize : 'md', onChange: value => {
+                    setThumbnailSize(value);
+                }, size: "sm", "aria-label": labels.thumbnailSizeAria, children: [jsx(SegmentedControlItem, { value: "sm", children: "S" }), jsx(SegmentedControlItem, { value: "md", children: "M" }), jsx(SegmentedControlItem, { value: "lg", children: "L" })] }))] }));
+}
+
+export { AssetBrowserStatusBar };
+//# sourceMappingURL=AssetBrowserStatusBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserStatusBar.js","sources":["src/components/editor/AssetBrowser/AssetBrowserStatusBar.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport {\n  SegmentedControl,\n  SegmentedControlItem,\n} from '@/components/navigation/SegmentedControl';\n\nimport { statusBar, statusSpacer } from './AssetBrowser.css';\nimport { useAssetBrowserContext } from './AssetBrowserContext';\nimport { useAssetBrowserAnnouncement } from './useAssetBrowserAnnouncement';\n\nimport type { AssetThumbnailSize, AssetView } from './AssetBrowser.types';\n\nexport interface AssetBrowserStatusBarProps {\n  /** Current view — drives whether the thumbnail-size control is rendered. */\n  view: AssetView;\n  thumbnailSize: AssetThumbnailSize;\n  setThumbnailSize: (size: AssetThumbnailSize) => void;\n}\n\n/**\n * Optional footer bar showing the live announcement and (in grid view) a\n * thumbnail-size segmented control. The announcement is sourced from the\n * `useAssetBrowserAnnouncement` slice hook, so the bar updates without the\n * root recomputing it.\n */\nexport function AssetBrowserStatusBar({\n  view,\n  thumbnailSize,\n  setThumbnailSize,\n}: AssetBrowserStatusBarProps): React.ReactElement {\n  const announcement = useAssetBrowserAnnouncement();\n  const { labels } = useAssetBrowserContext();\n  return (\n    <div className={statusBar}>\n      <span>{announcement}</span>\n      <span className={statusSpacer} />\n      {view === 'grid' && (\n        <SegmentedControl\n          value={typeof thumbnailSize === 'string' ? thumbnailSize : 'md'}\n          onChange={value => {\n            setThumbnailSize(value as AssetThumbnailSize);\n          }}\n          size=\"sm\"\n          aria-label={labels.thumbnailSizeAria}\n        >\n          <SegmentedControlItem value=\"sm\">S</SegmentedControlItem>\n          <SegmentedControlItem value=\"md\">M</SegmentedControlItem>\n          <SegmentedControlItem value=\"lg\">L</SegmentedControlItem>\n        </SegmentedControl>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAsBA;;;;;AAKG;AACG;AAKJ;AACA;AACA;;AASQ;AAWV;;"}