entangle-ui 0.8.2 → 0.10.0

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

@@ -0,0 +1,72 @@
+"use client";
+import { useCallback } 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 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable);
+}
+/**
+ * View-agnostic mutation keyboard shortcuts. The same handler is exposed through
+ * context (`mutationKeyDown`) and attached by each view to its own scroller —
+ * the grid (merged with its 2D nav) and the list wrapper — so the shortcuts
+ * work identically in both without relying on event bubbling to the root.
+ *
+ * - **F2** — inline-rename the focused item, or the sole selected item (the list
+ *   has no store roving-focus, so it falls back to a single selection).
+ * - **Delete** (and **⌘⌫** on macOS) — delete the selection. Plain `Backspace`
+ *   stays reserved for the root's "go to parent" shortcut.
+ * - **Ctrl/⌘+D** — duplicate the selection.
+ *
+ * Each shortcut is a no-op unless its mutation callback is wired, and all are
+ * skipped while the focus is in an editable element (search box, rename field).
+ * The handler is `useCallback`-stable; live state is read through `useLatest`.
+ */
+function useAssetMutationKeyboard(options) {
+    const { store, mutations } = options;
+    const mutationsRef = useLatest(mutations);
+    const selectionRef = useLatest(options.selection);
+    const onKeyDown = useCallback((event) => {
+        if (isEditableTarget(event.target))
+            return;
+        const key = event.key;
+        const m = mutationsRef.current;
+        if ((event.ctrlKey || event.metaKey) &&
+            (key === 'd' || key === 'D') &&
+            m.canDuplicate) {
+            event.preventDefault();
+            m.duplicateItems();
+            return;
+        }
+        if (key === 'F2' && m.canRename) {
+            const focusedId = store.getFocusedId();
+            const sel = selectionRef.current;
+            const targetId = focusedId ?? (sel.size === 1 ? [...sel][0] : undefined);
+            if (targetId !== undefined) {
+                event.preventDefault();
+                m.beginRename(targetId);
+            }
+            return;
+        }
+        if ((key === 'Delete' || (event.metaKey && key === 'Backspace')) &&
+            m.canDelete) {
+            event.preventDefault();
+            m.deleteItems();
+        }
+    }, [store, mutationsRef, selectionRef]);
+    return { onKeyDown };
+}
+
+export { useAssetMutationKeyboard };
+//# sourceMappingURL=useAssetMutationKeyboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetMutationKeyboard.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetMutationKeyboard.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAsBA;AACE;AAAsC;AACtC;;;AAKF;AAEA;;;;;;;;;;;;;;;AAeG;AACG;AAGJ;AACA;;AAGA;AAEI;;AACA;AACA;;AAIE;;;;;;;AAQA;AACA;;AAGA;;AAEE;;;;AAIJ;;;;;;;AAYN;;"}

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

@@ -0,0 +1,141 @@
+"use client";
+import { useCallback, useMemo } 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 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+/**
+ * Owns the mutation intents — inline rename (begin/commit/cancel), delete,
+ * create-folder, duplicate — for `AssetBrowser`. AssetBrowser is presentational:
+ * these report intent through the consumer's callbacks and never touch `items`.
+ *
+ * The "which cell is editing" flag lives in the store (so rename can be started
+ * from the keyboard, a menu, or the imperative handle — all outside the cell);
+ * the transient text buffer is local to the rename field. Every handler has a
+ * stable identity (`useCallback`) and reads the latest props through `useLatest`
+ * refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetMutations(options) {
+    const { store } = options;
+    const canRename = options.onItemRename !== undefined;
+    const canDelete = options.onItemsDelete !== undefined;
+    const canCreateFolder = options.onCreateFolder !== undefined;
+    const canDuplicate = options.onItemsDuplicate !== undefined;
+    const displayedRef = useLatest(options.displayed);
+    const selectionRef = useLatest(options.selection);
+    const currentFolderIdRef = useLatest(options.currentFolderId);
+    const onItemRenameRef = useLatest(options.onItemRename);
+    const onItemsDeleteRef = useLatest(options.onItemsDelete);
+    const onCreateFolderRef = useLatest(options.onCreateFolder);
+    const onItemsDuplicateRef = useLatest(options.onItemsDuplicate);
+    /** Resolve the items an operation targets: the explicit arg, else the selection. */
+    const resolveTargets = useCallback((items) => {
+        if (items)
+            return [...items];
+        const sel = selectionRef.current;
+        return displayedRef.current.filter(it => sel.has(it.id));
+    }, [displayedRef, selectionRef]);
+    const beginRename = useCallback((id) => {
+        if (onItemRenameRef.current === undefined)
+            return;
+        store.setFocusedId(id);
+        store.setEditingId(id);
+    }, [store, onItemRenameRef]);
+    const cancelRename = useCallback(() => {
+        store.setEditingId(null);
+    }, [store]);
+    const commitRename = useCallback(async (item, newName) => {
+        const trimmed = newName.trim();
+        const cb = onItemRenameRef.current;
+        // Empty or unchanged → close silently without firing the callback.
+        if (cb === undefined || trimmed === '' || trimmed === item.name) {
+            store.setEditingId(null);
+            return true;
+        }
+        const result = await cb(item, trimmed);
+        // Only an explicit `false` keeps the editor open (rejected name).
+        const accepted = result !== false;
+        if (accepted)
+            store.setEditingId(null);
+        return accepted;
+    }, [store, onItemRenameRef]);
+    const deleteItems = useCallback((items) => {
+        const cb = onItemsDeleteRef.current;
+        if (cb === undefined)
+            return;
+        const targets = resolveTargets(items);
+        if (targets.length === 0)
+            return;
+        // Move roving focus to a survivor before the data updates, so focus
+        // doesn't vanish when the deleted cells unmount.
+        const list = displayedRef.current;
+        const doomed = new Set(targets.map(it => it.id));
+        const focusedId = store.getFocusedId();
+        if (focusedId !== null && doomed.has(focusedId)) {
+            const from = list.findIndex(it => it.id === focusedId);
+            let survivor = null;
+            for (let i = from + 1; i < list.length; i += 1) {
+                const it = list[i];
+                if (it && !doomed.has(it.id)) {
+                    survivor = it.id;
+                    break;
+                }
+            }
+            if (survivor === null) {
+                for (let i = from - 1; i >= 0; i -= 1) {
+                    const it = list[i];
+                    if (it && !doomed.has(it.id)) {
+                        survivor = it.id;
+                        break;
+                    }
+                }
+            }
+            store.setFocusedId(survivor);
+        }
+        cb(targets);
+    }, [store, resolveTargets, displayedRef, onItemsDeleteRef]);
+    const createFolder = useCallback(() => {
+        onCreateFolderRef.current?.(currentFolderIdRef.current ?? null);
+    }, [onCreateFolderRef, currentFolderIdRef]);
+    const duplicateItems = useCallback((items) => {
+        const cb = onItemsDuplicateRef.current;
+        if (cb === undefined)
+            return;
+        const targets = resolveTargets(items);
+        if (targets.length === 0)
+            return;
+        cb(targets);
+    }, [resolveTargets, onItemsDuplicateRef]);
+    return useMemo(() => ({
+        canRename,
+        canDelete,
+        canCreateFolder,
+        canDuplicate,
+        beginRename,
+        commitRename,
+        cancelRename,
+        deleteItems,
+        createFolder,
+        duplicateItems,
+    }), [
+        canRename,
+        canDelete,
+        canCreateFolder,
+        canDuplicate,
+        beginRename,
+        commitRename,
+        cancelRename,
+        deleteItems,
+        createFolder,
+        duplicateItems,
+    ]);
+}
+
+export { useAssetMutations };
+//# sourceMappingURL=useAssetMutations.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetMutations.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetMutations.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AA8CA;;;;;;;;;;AAUG;AACG;AAGJ;AAEA;AACA;AACA;AACA;;;;;;;;;AAWA;AAEI;AAAW;AACX;AACA;AACF;AAIF;AAEI;;AACA;AACA;AACF;AAIF;AACE;AACF;;AAII;AACA;;AAEA;AACE;AACA;;;;AAIF;AACA;AAAc;AACd;AACF;AAIF;AAEI;;;AAEA;AACA;;;;AAGA;AACA;AACA;;AAEE;;AAEA;AACE;AACA;AACE;;;;AAIJ;AACE;AACE;AACA;AACE;;;;;AAKN;;;;AAON;;AAEA;AAEA;AAEI;;;AAEA;AACA;;;AAEF;AAIF;;;;;;;;;;;AAYG;;;;;;;;;;;AAYA;AAEL;;"}

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

@@ -0,0 +1,113 @@
+"use client";
+import { useEffect, useCallback, useMemo } 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 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import { useNavigationHistory } from '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+
+function isEditableTarget(target) {
+    if (!(target instanceof HTMLElement))
+        return false;
+    return (target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.isContentEditable);
+}
+/**
+ * Folder navigation + back/forward stack + "go to parent" keyboard shortcuts,
+ * built on top of the library's `useNavigationHistory` primitive. Every handler
+ * has a stable identity (`useCallback`) and reads the latest props through
+ * `useLatest` refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetNavigation(options) {
+    const { history, path, onNavigate, onItemOpen, currentFolderId } = options;
+    const histApi = useNavigationHistory({
+        initial: currentFolderId,
+        enabled: history,
+    });
+    const { push, canGoBack, canGoForward } = histApi;
+    const histGoBack = histApi.goBack;
+    const histGoForward = histApi.goForward;
+    // Keep the back/forward stack in sync with the controlled `currentFolderId`.
+    // `useNavigationHistory` only seeds `initial` once on mount, so an out-of-band
+    // change (deep link, "reveal in browser", or a parent that updates
+    // `currentFolderId` without routing through `navigate`) would otherwise leave
+    // the stack — and `canGoBack`/`canGoForward` — stale. `push` no-ops when the
+    // entry already equals the current one, so navigate/back/forward (which leave
+    // `current === currentFolderId`) don't double-push and the forward branch
+    // survives; only a genuine external change advances the stack. This is the
+    // "mirror React state into an external store" bridge that component-patterns.md
+    // §2 lists as a legitimate `useEffect` use.
+    useEffect(() => {
+        if (!history || currentFolderId === undefined)
+            return;
+        push(currentFolderId);
+    }, [history, currentFolderId, push]);
+    const onNavigateRef = useLatest(onNavigate);
+    const onItemOpenRef = useLatest(onItemOpen);
+    const historyRef = useLatest(history);
+    const pathRef = useLatest(path);
+    const navigate = useCallback((folderId, source) => {
+        push(folderId);
+        onNavigateRef.current?.(folderId, source);
+    }, [push, onNavigateRef]);
+    const goBack = useCallback(() => {
+        const target = histGoBack();
+        if (target === undefined)
+            return;
+        onNavigateRef.current?.(target, 'back');
+    }, [histGoBack, onNavigateRef]);
+    const goForward = useCallback(() => {
+        const target = histGoForward();
+        if (target === undefined)
+            return;
+        onNavigateRef.current?.(target, 'forward');
+    }, [histGoForward, onNavigateRef]);
+    const activateItem = useCallback((item) => {
+        if (item.kind === 'folder')
+            navigate(item.id, 'open');
+        else
+            onItemOpenRef.current?.(item);
+    }, [navigate, onItemOpenRef]);
+    const handleRootKeyDown = useCallback((event) => {
+        if (!historyRef.current)
+            return;
+        if (isEditableTarget(event.target))
+            return;
+        const goToParent = event.key === 'Backspace' || (event.altKey && event.key === 'ArrowUp');
+        if (!goToParent)
+            return;
+        const currentPath = pathRef.current;
+        const parent = currentPath[currentPath.length - 2];
+        if (parent) {
+            event.preventDefault();
+            navigate(parent.id, 'breadcrumb');
+        }
+    }, [navigate, historyRef, pathRef]);
+    return useMemo(() => ({
+        navigate,
+        activateItem,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+        history,
+        handleRootKeyDown,
+    }), [
+        navigate,
+        activateItem,
+        goBack,
+        goForward,
+        canGoBack,
+        canGoForward,
+        history,
+        handleRootKeyDown,
+    ]);
+}
+
+export { useAssetNavigation };
+//# sourceMappingURL=useAssetNavigation.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetNavigation.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetNavigation.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;AAuCA;AACE;AAAsC;AACtC;;;AAKF;AAEA;;;;;AAKG;AACG;AAGJ;;AAGE;AACA;AACD;;AAED;AACA;;;;;;;;;;;;AAaE;;;;AAIF;AACA;AACA;AACA;;;;AAME;AAIF;AACE;;;;AAGF;AAEA;AACE;;;;AAGF;AAEA;AAEI;AAA4B;;AACvB;AACP;AAIF;;;AAGI;;AACA;AAEA;;AACA;;;;AAIE;;;AAMN;;;;;;;;;AAUG;;;;;;;;;AAUA;AAEL;;"}

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

@@ -0,0 +1,174 @@
+"use client";
+import { useTransition, useMemo, useLayoutEffect, useRef, useCallback } from 'react';
+import '../../../utils/devWarn.js';
+import { useControlledState } from '../../../hooks/useControlledState/useControlledState.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 'react/jsx-runtime';
+import './../../../assets/src/theme/globalScrollbars.css.ts.vanilla-BAJwnUEJ.css';
+import '../../../hooks/useNavigationHistory/useNavigationHistory.js';
+import { indexRange } from './assetBrowserKeyboard.js';
+
+function selectableIds(list) {
+    return list.filter(it => it.selectable !== false).map(it => it.id);
+}
+/**
+ * Owns selection state and the click/keyboard/marquee gestures that mutate it.
+ *
+ * Selection stays in React state (so the controlled `selection` prop and
+ * `onSelectionChange` work) but is mirrored into the store on commit, letting
+ * each cell subscribe to its own `useAssetSelected(id)` slice instead of
+ * re-rendering the whole grid. The anchor is tracked by **id**, not index, so
+ * shift-ranges survive a re-sort or re-filter between clicks. All handlers have
+ * stable identities (`useCallback`) and read the latest props/state through
+ * `useLatest` refs, matching `component-patterns.md` rules #3/#11.
+ */
+function useAssetSelectionController(options) {
+    const { store, displayed, selectionMode, onSelectionChange } = options;
+    const [, startTransition] = useTransition();
+    const [selectionArr, setSelectionArr] = useControlledState({
+        value: options.selection,
+        defaultValue: options.defaultSelection,
+        fallback: [],
+    });
+    const selectionSet = useMemo(() => new Set(selectionArr), [selectionArr]);
+    // Mirror into the store so per-id slices stay in sync. useLayoutEffect runs
+    // before paint, so initially-selected items never flash unselected.
+    useLayoutEffect(() => {
+        store.setSelection(selectionSet);
+    }, [store, selectionSet]);
+    const anchorRef = useRef(null);
+    // Live props/state read inside the stable handlers below.
+    const displayedRef = useLatest(displayed);
+    const selectionModeRef = useLatest(selectionMode);
+    const selectionSetRef = useLatest(selectionSet);
+    const onSelectionChangeRef = useLatest(onSelectionChange);
+    /** Resolve the anchor id to its current position in the displayed list. */
+    const anchorIndex = useCallback(() => {
+        if (anchorRef.current === null)
+            return -1;
+        return displayedRef.current.findIndex(it => it.id === anchorRef.current);
+    }, [displayedRef]);
+    const commitSelection = useCallback((ids, reason) => {
+        setSelectionArr(ids);
+        onSelectionChangeRef.current?.(ids, { reason });
+    }, [setSelectionArr, onSelectionChangeRef]);
+    const handleItemClick = useCallback((item, index, event) => {
+        store.setFocusedId(item.id);
+        if (selectionModeRef.current === false ||
+            item.selectable === false ||
+            item.disabled) {
+            return;
+        }
+        if (selectionModeRef.current === 'single') {
+            commitSelection([item.id], 'click');
+            anchorRef.current = item.id;
+            return;
+        }
+        if (event.shiftKey) {
+            const a = anchorIndex();
+            if (a !== -1) {
+                const [from, to] = indexRange(a, index);
+                commitSelection(selectableIds(displayedRef.current.slice(from, to + 1)), 'click');
+                return;
+            }
+        }
+        if (event.ctrlKey || event.metaKey) {
+            const next = new Set(selectionSetRef.current);
+            if (next.has(item.id))
+                next.delete(item.id);
+            else
+                next.add(item.id);
+            commitSelection(Array.from(next), 'click');
+            anchorRef.current = item.id;
+            return;
+        }
+        commitSelection([item.id], 'click');
+        anchorRef.current = item.id;
+    }, [
+        store,
+        commitSelection,
+        anchorIndex,
+        selectionModeRef,
+        displayedRef,
+        selectionSetRef,
+    ]);
+    const selectByKeyboard = useCallback((index, extend) => {
+        const item = displayedRef.current[index];
+        if (!item)
+            return;
+        if (extend) {
+            const a = anchorIndex();
+            if (a !== -1) {
+                const [from, to] = indexRange(a, index);
+                commitSelection(selectableIds(displayedRef.current.slice(from, to + 1)), 'keyboard');
+                return;
+            }
+        }
+        commitSelection(item.selectable === false ? [] : [item.id], 'keyboard');
+        anchorRef.current = item.id;
+    }, [commitSelection, anchorIndex, displayedRef]);
+    const toggleSelectId = useCallback((id) => {
+        const next = new Set(selectionSetRef.current);
+        if (next.has(id))
+            next.delete(id);
+        else
+            next.add(id);
+        commitSelection(Array.from(next), 'keyboard');
+    }, [commitSelection, selectionSetRef]);
+    const setSelectionIds = useCallback((ids, reason) => {
+        commitSelection(ids, reason);
+    }, [commitSelection]);
+    const commitMarquee = useCallback((ids, additive) => {
+        startTransition(() => {
+            if (additive) {
+                const next = new Set(selectionSetRef.current);
+                ids.forEach(id => next.add(id));
+                commitSelection(Array.from(next), 'marquee');
+                return;
+            }
+            commitSelection(ids, 'marquee');
+        });
+    }, [commitSelection, selectionSetRef]);
+    const selectAll = useCallback(() => {
+        startTransition(() => {
+            commitSelection(selectableIds(displayedRef.current), 'selectAll');
+        });
+    }, [commitSelection, displayedRef]);
+    const clearSelection = useCallback(() => {
+        commitSelection([], 'clear');
+    }, [commitSelection]);
+    const contextMenuSelect = useCallback((item) => {
+        store.setFocusedId(item.id);
+        if (!selectionSetRef.current.has(item.id) && item.selectable !== false) {
+            commitSelection([item.id], 'contextMenu');
+        }
+        anchorRef.current = item.id;
+    }, [store, commitSelection, selectionSetRef]);
+    const handlers = useMemo(() => ({
+        handleItemClick,
+        selectByKeyboard,
+        toggleSelectId,
+        setSelectionIds,
+        commitMarquee,
+        selectAll,
+        clearSelection,
+        contextMenuSelect,
+    }), [
+        handleItemClick,
+        selectByKeyboard,
+        toggleSelectId,
+        setSelectionIds,
+        commitMarquee,
+        selectAll,
+        clearSelection,
+        contextMenuSelect,
+    ]);
+    return { selectionSet, handlers };
+}
+
+export { useAssetSelectionController };
+//# sourceMappingURL=useAssetSelectionController.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useAssetSelectionController.js","sources":["../../../../../../src/components/editor/AssetBrowser/useAssetSelectionController.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;AAgDA;;AAEA;AAEA;;;;;;;;;;AAUG;AACG;;AAIJ;AAEA;;;AAII;AACD;AAGH;;;;AAKE;AACF;AAEA;;AAGA;AACA;AACA;AACA;;AAGA;AACE;;AACA;AACF;;;;AAME;;AAME;AACA;;;;;AAOA;;AAEE;;;AAGF;AACE;AACA;AACE;AACA;;;;;;AASF;AAAuB;;AAClB;;AAEL;;;;AAIF;AACF;;;;;;;AAQC;;;AAMC;;;AAEE;AACA;AACE;AACA;;;;;AAQJ;;AAKJ;;AAGI;AAAkB;;AACb;;AAEP;;AAME;AACF;;;;;AASM;;;;AAIF;AACF;AACF;AAIF;;;AAGE;AACF;AAEA;AACE;AACF;AAEA;AAEI;AACA;;;AAGA;;AAKJ;;;;;;;;;AAUG;;;;;;;;;AAUA;AAGH;AACF;;"}

package/dist/esm/components/editor/ChatPanel/ChatActionBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatActionBar.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatActionBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;;AAaL;AAGF;;"}
+{"version":3,"file":"ChatActionBar.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatActionBar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUO;;AAaL;AAGF;;"}

package/dist/esm/components/editor/ChatPanel/ChatAttachment.js

@@ -2,8 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback } from 'react';
 import { cx } from '../../../utils/cx.js';
-import { attachmentThumbnailStyle, attachmentChipIconStyle, attachmentChipNameStyle, attachmentChipRemoveStyle, attachmentChipStyle } from './ChatPanel.css.js';
 import { MiniSelectionIcon, MiniCodeIcon, MiniImageIcon, MiniFileIcon, MiniCloseIcon } from './ChatIcons.js';
+import { attachmentThumbnailStyle, attachmentChipIconStyle, attachmentChipNameStyle, attachmentChipRemoveStyle, attachmentChipStyle } from './ChatPanel.css.js';
 
 const TYPE_ICONS = {
     file: MiniFileIcon,
@@ -17,13 +17,19 @@ const ChatAttachmentChip =
     const handleClick = useCallback(() => {
         onClick?.(attachment);
     }, [onClick, attachment]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onClick?.(attachment);
+        }
+    }, [onClick, attachment]);
     const handleRemove = useCallback((e) => {
         e.stopPropagation();
         onRemove?.(attachment.id);
     }, [onRemove, attachment.id]);
     const TypeIcon = TYPE_ICONS[attachment.type] ?? MiniFileIcon;
     const isClickable = !!onClick;
-    return (jsxs("div", { ref: ref, className: cx(attachmentChipStyle, className), style: style, "data-testid": testId, "data-clickable": isClickable || undefined, onClick: isClickable ? handleClick : undefined, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest, children: [attachment.type === 'image' && attachment.thumbnailUrl ? (jsx("img", { src: attachment.thumbnailUrl, alt: attachment.name, className: attachmentThumbnailStyle })) : (jsx("span", { className: attachmentChipIconStyle, children: jsx(TypeIcon, {}) })), jsx("span", { className: attachmentChipNameStyle, children: attachment.name }), removable && (jsx("button", { type: "button", className: attachmentChipRemoveStyle, onClick: handleRemove, "aria-label": `Remove ${attachment.name}`, children: jsx(MiniCloseIcon, {}) }))] }));
+    return (jsxs("div", { ref: ref, className: cx(attachmentChipStyle, className), style: style, "data-testid": testId, "data-clickable": isClickable || undefined, onClick: isClickable ? handleClick : undefined, onKeyDown: isClickable ? handleKeyDown : undefined, role: isClickable ? 'button' : undefined, tabIndex: isClickable ? 0 : undefined, ...rest, children: [attachment.type === 'image' && attachment.thumbnailUrl ? (jsx("img", { src: attachment.thumbnailUrl, alt: attachment.name, className: attachmentThumbnailStyle })) : (jsx("span", { className: attachmentChipIconStyle, children: jsx(TypeIcon, {}) })), jsx("span", { className: attachmentChipNameStyle, children: attachment.name }), removable && (jsx("button", { type: "button", className: attachmentChipRemoveStyle, onClick: handleRemove, "aria-label": `Remove ${attachment.name}`, children: jsx(MiniCloseIcon, {}) }))] }));
 });
 ChatAttachmentChip.displayName = 'ChatAttachmentChip';
 

package/dist/esm/components/editor/ChatPanel/ChatAttachment.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatAttachment.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatAttachment.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAqBA;AACE;AACA;AACA;AACA;;AAGF;;AAGE;AAYI;AACE;AACF;AAEA;;AAGI;;;AAMJ;AAEA;AAsCF;AAGJ;;"}
+{"version":3,"file":"ChatAttachment.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatAttachment.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAuBA;AACE;AACA;AACA;AACA;;AAGF;;AAGE;AAYI;AACE;AACF;AAEA;AAEI;;AAEE;;AAEJ;AAIF;;AAGI;;;AAMJ;AAEA;AAuCF;AAGJ;;"}

package/dist/esm/components/editor/ChatPanel/ChatBubble.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatBubble.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatBubble.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAOO;AAUH;AAWF;AAGF;;"}
+{"version":3,"file":"ChatBubble.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatBubble.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAUO;AAUH;AAWF;AAGF;;"}