entangle-ui 0.9.0 → 0.11.0

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetBrowserContextMenu.js","sources":["src/components/editor/AssetBrowser/AssetBrowserContextMenu.tsx"],"sourcesContent":["'use client';\n\nimport React, { useRef, useState } from 'react';\n\nimport { ContextMenu } from '@/components/navigation/ContextMenu';\n\nimport { contextMenuTrigger } from './AssetBrowser.css';\nimport {\n  useAssetBrowserContext,\n  useAssetSelection,\n} from './AssetBrowserContext';\nimport { DefaultEmptyMenu, DefaultItemMenu } from './AssetBrowserDefaultMenus';\n\nimport type { AssetItem, AssetItemActions } from './AssetBrowser.types';\nimport type { AssetBrowserContextValue } from './AssetBrowserContext';\n\n/** Whether any item-level menu can be shown (custom render-prop or auto-built). */\nfunction hasItemMenu(ctx: AssetBrowserContextValue): boolean {\n  if (ctx.renderItemContextMenu) return true;\n  return (\n    ctx.defaultItemActions &&\n    (ctx.mutations.canRename ||\n      ctx.mutations.canDelete ||\n      ctx.mutations.canDuplicate)\n  );\n}\n\n/** Whether any empty-area menu can be shown. */\nfunction hasEmptyMenu(ctx: AssetBrowserContextValue): boolean {\n  if (ctx.renderEmptyContextMenu) return true;\n  return ctx.defaultItemActions && ctx.mutations.canCreateFolder;\n}\n\n/**\n * Item context-menu body for the right-clicked item. Resolves the acted-on\n * items (the whole selection when the target is part of it, otherwise just the\n * target), builds the mutation `actions` bound to them, and renders either the\n * consumer's `renderItemContextMenu` or the auto-built default menu. Rendered\n * only while the menu is open (base-ui unmounts closed popups).\n */\nfunction ItemMenuBody({ targetId }: { targetId: string }): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  const selection = useAssetSelection();\n  const target = ctx.displayedItems.find(it => it.id === targetId);\n  const items: AssetItem[] = target\n    ? selection.has(target.id)\n      ? ctx.displayedItems.filter(it => selection.has(it.id))\n      : [target]\n    : [];\n\n  const actions: AssetItemActions = {\n    items,\n    rename: () => {\n      const first = items[0];\n      if (first) ctx.mutations.beginRename(first.id);\n    },\n    delete: () => {\n      ctx.mutations.deleteItems(items);\n    },\n    duplicate: () => {\n      ctx.mutations.duplicateItems(items);\n    },\n  };\n\n  if (ctx.renderItemContextMenu) {\n    return <>{ctx.renderItemContextMenu(items, actions)}</>;\n  }\n  return <DefaultItemMenu actions={actions} />;\n}\n\n/** Empty-area context-menu body (consumer render-prop or the default). */\nfunction EmptyMenuBody(): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  if (ctx.renderEmptyContextMenu) return <>{ctx.renderEmptyContextMenu()}</>;\n  return <DefaultEmptyMenu />;\n}\n\n/**\n * Single, view-agnostic context-menu mechanism for the whole content surface.\n *\n * One `ContextMenu` wraps both the grid and the list. On right-click it walks up\n * from the event target to the nearest item element — a grid cell\n * (`[data-asset-id]`) or a list row (`[data-row-key]`, set by DataTable to the\n * row's id) — to decide whether an **item** was hit (show the item menu + select\n * it) or **empty space** (show the empty-area menu). The same code path runs\n * regardless of view, so grid and list share identical right-click behaviour\n * with no per-cell / per-row wrapping and no DataTable changes.\n *\n * Open state is controlled so a right-click that resolves to no body (e.g. blank\n * space when only an item menu is configured) never opens an empty popup.\n */\nexport function AssetBrowserContextMenuLayer({\n  children,\n}: {\n  children: React.ReactNode;\n}): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  const [open, setOpen] = useState(false);\n  const [targetId, setTargetId] = useState<string | null>(null);\n  // Synchronous mirror of the right-clicked target, read by `onOpenChange`\n  // (which fires in the same event, before the `setTargetId` render flushes).\n  const targetIdRef = useRef<string | null>(null);\n\n  const itemEnabled = hasItemMenu(ctx);\n  const emptyEnabled = hasEmptyMenu(ctx);\n\n  // No menus configured → render the surface untouched.\n  if (!itemEnabled && !emptyEnabled) return <>{children}</>;\n\n  const handleContextMenuCapture = (event: React.MouseEvent): void => {\n    // Grid cells carry `data-asset-id`; DataTable list rows carry `data-row-key`\n    // (the asset id, since `rowKey=\"id\"`). Match either to find the hit item.\n    const el =\n      event.target instanceof Element\n        ? event.target.closest('[data-asset-id], [data-row-key]')\n        : null;\n    const id =\n      el?.getAttribute('data-asset-id') ??\n      el?.getAttribute('data-row-key') ??\n      null;\n    targetIdRef.current = id;\n    setTargetId(id);\n    if (id) {\n      const item = ctx.displayedItems.find(it => it.id === id);\n      if (item) ctx.contextMenuSelect(item);\n    }\n  };\n\n  const showItemBody = targetId !== null && itemEnabled;\n\n  return (\n    <ContextMenu\n      open={open}\n      onOpenChange={next => {\n        // Only allow opening when the resolved target has a body to show.\n        if (next) {\n          const willShow = targetIdRef.current ? itemEnabled : emptyEnabled;\n          setOpen(willShow);\n        } else {\n          setOpen(false);\n        }\n      }}\n    >\n      <ContextMenu.Trigger\n        render={\n          <div\n            className={contextMenuTrigger}\n            onContextMenuCapture={handleContextMenuCapture}\n          >\n            {children}\n          </div>\n        }\n      />\n      <ContextMenu.Content>\n        {showItemBody ? (\n          <ItemMenuBody targetId={targetId} />\n        ) : emptyEnabled ? (\n          <EmptyMenuBody />\n        ) : null}\n      </ContextMenu.Content>\n    </ContextMenu>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;AAgBA;AACA;;AACiC;;AAG7B;;AAEE;AAEN;AAEA;AACA;;AACkC;;AAElC;AAEA;;;;;;AAMG;AACH;AACE;AACA;AACA;;;AAGI;;;AAIJ;;;AAGI;AACA;;;;AAGA;;;AAGA;;;AAIJ;;;AAGA;AACF;AAEA;AACA;AACE;;AACgC;;AAElC;AAEA;;;;;;;;;;;;;AAaG;AACG;AAKJ;;;;;AAKA;AAEA;AACA;;AAGA;;AAEA;;;AAGE;;;AAIA;AAEE;AACA;AACF;;;AAGE;AACA;AAAU;;AAEd;AAEA;AAEA;;;AAMQ;;;;;;;AA0BV;;"}

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

@@ -0,0 +1,136 @@
+"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 '../../Icons/OrbitIcon.js';
+import '../../Icons/RotateIcon.js';
+import '../../Icons/SpinIcon.js';
+import '../../Icons/CameraIcon.js';
+import '../../Icons/CubeIcon.js';
+import '../../Icons/ZoomFitIcon.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":["'use client';\n\nimport React from 'react';\n\nimport { CopyIcon, EditIcon, FolderIcon, TrashIcon } from '@/components/Icons';\nimport { Menu } from '@/components/navigation/Menu';\n\nimport { useAssetBrowserContext } from './AssetBrowserContext';\n\nimport type { AssetItemActions } from './AssetBrowser.types';\n\n/**\n * Auto-generated item context-menu body used when `defaultItemActions` is set\n * and the consumer hasn't supplied `renderItemContextMenu`. Renders only the\n * entries whose mutation callback is present. Rename targets a single item.\n */\nexport function DefaultItemMenu({\n  actions,\n}: {\n  actions: AssetItemActions;\n}): React.ReactElement | null {\n  const { mutations, labels } = useAssetBrowserContext();\n  const single = actions.items.length === 1;\n\n  const entries: React.ReactNode[] = [];\n  if (mutations.canRename) {\n    entries.push(\n      <Menu.Item\n        key=\"rename\"\n        icon={<EditIcon />}\n        shortcut=\"F2\"\n        disabled={!single}\n        onClick={actions.rename}\n      >\n        {labels.rename}\n      </Menu.Item>\n    );\n  }\n  if (mutations.canDuplicate) {\n    entries.push(\n      <Menu.Item\n        key=\"duplicate\"\n        icon={<CopyIcon />}\n        onClick={actions.duplicate}\n      >\n        {labels.duplicate}\n      </Menu.Item>\n    );\n  }\n  if (mutations.canDelete) {\n    if (entries.length > 0) entries.push(<Menu.Separator key=\"sep\" />);\n    entries.push(\n      <Menu.Item key=\"delete\" icon={<TrashIcon />} onClick={actions.delete}>\n        {labels.delete}\n      </Menu.Item>\n    );\n  }\n\n  if (entries.length === 0) return null;\n  return <>{entries}</>;\n}\n\n/**\n * Auto-generated empty-area context-menu body used when `defaultItemActions` is\n * set and the consumer hasn't supplied `renderEmptyContextMenu`. Currently just\n * the New-folder entry (when `onCreateFolder` is present).\n */\nexport function DefaultEmptyMenu(): React.ReactElement | null {\n  const { mutations, labels } = useAssetBrowserContext();\n  if (!mutations.canCreateFolder) return null;\n  return (\n    <Menu.Item icon={<FolderIcon />} onClick={mutations.createFolder}>\n      {labels.newFolder}\n    </Menu.Item>\n  );\n}\n"],"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 '@vanilla-extract/css';
+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":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, {\n  useCallback,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useRef,\n} from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport {\n  columnsVar,\n  gridGapVar,\n  gridScroller,\n  gridSizer,\n  gridWindow,\n  gridFlow,\n  cellWidthVar,\n  marquee as marqueeClass,\n  marqueeHVar,\n  marqueeWVar,\n  marqueeXVar,\n  marqueeYVar,\n  offsetYVar,\n  totalHeightVar,\n} from './AssetBrowser.css';\nimport {\n  useAssetBrowserContext,\n  useAssetBrowserStore,\n  useAssetMarquee,\n} from './AssetBrowserContext';\nimport { GRID_GAP, cellDomId, cellWidth } from './assetBrowserGeometry';\nimport { AssetBrowserGridItem } from './AssetBrowserGridItem';\nimport { useAssetGridKeyboardNav } from './useAssetGridKeyboardNav';\nimport { useAssetGridVirtualizer } from './useAssetGridVirtualizer';\nimport { useAssetMarqueeGesture } from './useAssetMarqueeGesture';\n\nimport type { AssetGridWindow } from './useAssetGridVirtualizer';\n\nfunction MarqueeLayer(): React.ReactElement | null {\n  const marquee = useAssetMarquee();\n  if (!marquee.active || !marquee.rect) return null;\n  return (\n    <div\n      className={marqueeClass}\n      style={assignInlineVars({\n        [marqueeXVar]: `${marquee.rect.x}px`,\n        [marqueeYVar]: `${marquee.rect.y}px`,\n        [marqueeWVar]: `${marquee.rect.width}px`,\n        [marqueeHVar]: `${marquee.rect.height}px`,\n      })}\n    />\n  );\n}\n\nexport function AssetBrowserGrid(): React.ReactElement {\n  const ctx = useAssetBrowserContext();\n  const store = useAssetBrowserStore();\n  const scrollerRef = useRef<HTMLDivElement>(null);\n  const gridId = useId();\n\n  const items = ctx.displayedItems;\n  const count = items.length;\n  const thumbPx = ctx.thumbnailSizePx;\n\n  // Mirror the store's roving focus onto the grid's `aria-activedescendant`\n  // imperatively, so a screen reader announces the focused cell without us\n  // re-rendering the whole grid on every arrow-key (the per-id focus slices keep\n  // re-renders to the two affected cells). The matching cell `id` is built from\n  // the same `gridId` in AssetBrowserGridItem via `cellDomId`.\n  useEffect(() => {\n    const el = scrollerRef.current;\n    if (!el) return;\n    const apply = (): void => {\n      const focusedId = store.getFocusedId();\n      if (focusedId === null) el.removeAttribute('aria-activedescendant');\n      else\n        el.setAttribute('aria-activedescendant', cellDomId(gridId, focusedId));\n    };\n    apply();\n    return store.subscribeFocus(apply);\n  }, [store, gridId]);\n\n  const windowed =\n    ctx.virtualized === true ||\n    (ctx.virtualized === 'auto' && count > ctx.virtualizationThreshold);\n\n  const win = useAssetGridVirtualizer({\n    containerRef: scrollerRef,\n    count,\n    thumbPx,\n    overscanRows: ctx.overscanRows,\n    enabled: windowed,\n  });\n\n  const scrollIndexIntoView = useCallback(\n    (index: number, w: AssetGridWindow): void => {\n      const el = scrollerRef.current;\n      if (!el) return;\n      const row = Math.floor(index / w.columns);\n      const top = row * w.rowHeight;\n      const bottom = top + w.rowHeight;\n      if (top < el.scrollTop) el.scrollTop = top;\n      else if (bottom > el.scrollTop + el.clientHeight)\n        el.scrollTop = bottom - el.clientHeight;\n    },\n    []\n  );\n\n  // Bridge the imperative `scrollToItem` handle through the store so it works\n  // even when the target row is outside the virtualization window.\n  const winRef = useLatest(win);\n  useLayoutEffect(\n    () =>\n      store.registerScrollToIndex(index => {\n        scrollIndexIntoView(index, winRef.current);\n      }),\n    [store, winRef, scrollIndexIntoView]\n  );\n\n  const keyboard = useAssetGridKeyboardNav({\n    store,\n    items,\n    win,\n    scrollerRef,\n    selectionMode: ctx.selectionMode,\n    selectAll: ctx.selectAll,\n    clearSelection: ctx.clearSelection,\n    activateItem: ctx.activateItem,\n    toggleSelectId: ctx.toggleSelectId,\n    selectByKeyboard: ctx.selectByKeyboard,\n    scrollIndexIntoView,\n  });\n\n  const marquee = useAssetMarqueeGesture({\n    scrollerRef,\n    enabled: ctx.marqueeEnabled,\n    items,\n    columns: win.columns,\n    thumbPx,\n    commitMarquee: ctx.commitMarquee,\n  });\n\n  const sharedVars = assignInlineVars({\n    [columnsVar]: String(win.columns),\n    [gridGapVar]: `${GRID_GAP}px`,\n    [cellWidthVar]: `${cellWidth(thumbPx)}px`,\n  });\n\n  // Grid keydown = 2D navigation + the shared mutation shortcuts (F2 / Delete /\n  // Ctrl+D). Both are attached here, on the element that receives the event, so\n  // the shortcuts fire without depending on bubbling to the root. The key sets\n  // are disjoint, so order doesn't matter.\n  const mutationKeyDown = ctx.mutationKeyDown;\n  const onGridKeyDown = useCallback(\n    (event: React.KeyboardEvent): void => {\n      keyboard.onKeyDown(event);\n      mutationKeyDown(event);\n    },\n    [keyboard, mutationKeyDown]\n  );\n\n  const rendered: React.ReactNode[] = [];\n  for (let i = win.startIndex; i < win.endIndex; i += 1) {\n    const item = items[i];\n    if (!item) continue;\n    rendered.push(\n      <AssetBrowserGridItem\n        key={item.id}\n        item={item}\n        index={i}\n        gridId={gridId}\n        columns={win.columns}\n      />\n    );\n  }\n\n  return (\n    <div\n      ref={scrollerRef}\n      className={gridScroller}\n      role=\"grid\"\n      aria-label={ctx.labels.gridAria}\n      aria-multiselectable={ctx.selectionMode === 'multiple'}\n      aria-rowcount={win.totalRows}\n      aria-colcount={win.columns}\n      tabIndex={0}\n      onKeyDown={onGridKeyDown}\n      onPointerDown={marquee.onPointerDown}\n      onPointerMove={marquee.onPointerMove}\n      onPointerUp={marquee.onPointerUp}\n      onPointerCancel={marquee.onPointerCancel}\n    >\n      {windowed ? (\n        <div\n          className={gridSizer}\n          style={assignInlineVars({\n            [totalHeightVar]: `${win.totalHeight}px`,\n          })}\n        >\n          <MarqueeLayer />\n          <div\n            className={gridWindow}\n            style={{\n              ...sharedVars,\n              ...assignInlineVars({ [offsetYVar]: `${win.offsetY}px` }),\n            }}\n            role=\"presentation\"\n          >\n            {rendered}\n          </div>\n        </div>\n      ) : (\n        <>\n          <MarqueeLayer />\n          <div className={gridFlow} style={sharedVars} role=\"presentation\">\n            {rendered}\n          </div>\n        </>\n      )}\n    </div>\n  );\n}\n"],"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;;"}