entangle-ui 0.9.0 → 0.11.0

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 '@vanilla-extract/css';
+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":["'use client';\n\nimport { useCallback, useMemo } from 'react';\n\nimport { useLatest } from '@/hooks';\n\nimport type { AssetItem, AssetRenameResult } from './AssetBrowser.types';\nimport type { AssetBrowserStore } from './AssetBrowserStore';\n\nexport interface UseAssetMutationsOptions {\n  store: AssetBrowserStore;\n  /** Displayed (filtered + sorted) list — used to resolve the focus-after-delete target. */\n  displayed: readonly AssetItem[];\n  /** Live selection set — delete/duplicate default to acting on it. */\n  selection: ReadonlySet<string>;\n  currentFolderId: string | undefined;\n  onItemRename?: (item: AssetItem, newName: string) => AssetRenameResult;\n  onItemsDelete?: (items: AssetItem[]) => void;\n  onCreateFolder?: (parentFolderId: string | null) => void;\n  onItemsDuplicate?: (items: AssetItem[]) => void;\n}\n\nexport interface AssetMutationsApi {\n  /** Whether each operation is enabled (its callback is present). */\n  canRename: boolean;\n  canDelete: boolean;\n  canCreateFolder: boolean;\n  canDuplicate: boolean;\n  /** Enter inline-rename on `id` (no-op when rename is disabled). */\n  beginRename: (id: string) => void;\n  /**\n   * Commit a rename. Returns whether the editor should close (`true`) or stay\n   * open (`false`, e.g. the consumer rejected the name). Empty / unchanged\n   * names close without firing the callback.\n   */\n  commitRename: (item: AssetItem, newName: string) => Promise<boolean>;\n  /** Leave rename mode without committing. */\n  cancelRename: () => void;\n  /** Delete the given items (defaults to the current selection when omitted). */\n  deleteItems: (items?: readonly AssetItem[]) => void;\n  /** Create a folder in the current folder. */\n  createFolder: () => void;\n  /** Duplicate the given items (defaults to the current selection when omitted). */\n  duplicateItems: (items?: readonly AssetItem[]) => void;\n}\n\n/**\n * Owns the mutation intents — inline rename (begin/commit/cancel), delete,\n * create-folder, duplicate — for `AssetBrowser`. AssetBrowser is presentational:\n * these report intent through the consumer's callbacks and never touch `items`.\n *\n * The \"which cell is editing\" flag lives in the store (so rename can be started\n * from the keyboard, a menu, or the imperative handle — all outside the cell);\n * the transient text buffer is local to the rename field. Every handler has a\n * stable identity (`useCallback`) and reads the latest props through `useLatest`\n * refs, matching `component-patterns.md` rules #3/#11.\n */\nexport function useAssetMutations(\n  options: UseAssetMutationsOptions\n): AssetMutationsApi {\n  const { store } = options;\n\n  const canRename = options.onItemRename !== undefined;\n  const canDelete = options.onItemsDelete !== undefined;\n  const canCreateFolder = options.onCreateFolder !== undefined;\n  const canDuplicate = options.onItemsDuplicate !== undefined;\n\n  const displayedRef = useLatest(options.displayed);\n  const selectionRef = useLatest(options.selection);\n  const currentFolderIdRef = useLatest(options.currentFolderId);\n  const onItemRenameRef = useLatest(options.onItemRename);\n  const onItemsDeleteRef = useLatest(options.onItemsDelete);\n  const onCreateFolderRef = useLatest(options.onCreateFolder);\n  const onItemsDuplicateRef = useLatest(options.onItemsDuplicate);\n\n  /** Resolve the items an operation targets: the explicit arg, else the selection. */\n  const resolveTargets = useCallback(\n    (items?: readonly AssetItem[]): AssetItem[] => {\n      if (items) return [...items];\n      const sel = selectionRef.current;\n      return displayedRef.current.filter(it => sel.has(it.id));\n    },\n    [displayedRef, selectionRef]\n  );\n\n  const beginRename = useCallback(\n    (id: string): void => {\n      if (onItemRenameRef.current === undefined) return;\n      store.setFocusedId(id);\n      store.setEditingId(id);\n    },\n    [store, onItemRenameRef]\n  );\n\n  const cancelRename = useCallback((): void => {\n    store.setEditingId(null);\n  }, [store]);\n\n  const commitRename = useCallback(\n    async (item: AssetItem, newName: string): Promise<boolean> => {\n      const trimmed = newName.trim();\n      const cb = onItemRenameRef.current;\n      // Empty or unchanged → close silently without firing the callback.\n      if (cb === undefined || trimmed === '' || trimmed === item.name) {\n        store.setEditingId(null);\n        return true;\n      }\n      const result = await cb(item, trimmed);\n      // Only an explicit `false` keeps the editor open (rejected name).\n      const accepted = result !== false;\n      if (accepted) store.setEditingId(null);\n      return accepted;\n    },\n    [store, onItemRenameRef]\n  );\n\n  const deleteItems = useCallback(\n    (items?: readonly AssetItem[]): void => {\n      const cb = onItemsDeleteRef.current;\n      if (cb === undefined) return;\n      const targets = resolveTargets(items);\n      if (targets.length === 0) return;\n      // Move roving focus to a survivor before the data updates, so focus\n      // doesn't vanish when the deleted cells unmount.\n      const list = displayedRef.current;\n      const doomed = new Set(targets.map(it => it.id));\n      const focusedId = store.getFocusedId();\n      if (focusedId !== null && doomed.has(focusedId)) {\n        const from = list.findIndex(it => it.id === focusedId);\n        let survivor: string | null = null;\n        for (let i = from + 1; i < list.length; i += 1) {\n          const it = list[i];\n          if (it && !doomed.has(it.id)) {\n            survivor = it.id;\n            break;\n          }\n        }\n        if (survivor === null) {\n          for (let i = from - 1; i >= 0; i -= 1) {\n            const it = list[i];\n            if (it && !doomed.has(it.id)) {\n              survivor = it.id;\n              break;\n            }\n          }\n        }\n        store.setFocusedId(survivor);\n      }\n      cb(targets);\n    },\n    [store, resolveTargets, displayedRef, onItemsDeleteRef]\n  );\n\n  const createFolder = useCallback((): void => {\n    onCreateFolderRef.current?.(currentFolderIdRef.current ?? null);\n  }, [onCreateFolderRef, currentFolderIdRef]);\n\n  const duplicateItems = useCallback(\n    (items?: readonly AssetItem[]): void => {\n      const cb = onItemsDuplicateRef.current;\n      if (cb === undefined) return;\n      const targets = resolveTargets(items);\n      if (targets.length === 0) return;\n      cb(targets);\n    },\n    [resolveTargets, onItemsDuplicateRef]\n  );\n\n  return useMemo<AssetMutationsApi>(\n    () => ({\n      canRename,\n      canDelete,\n      canCreateFolder,\n      canDuplicate,\n      beginRename,\n      commitRename,\n      cancelRename,\n      deleteItems,\n      createFolder,\n      duplicateItems,\n    }),\n    [\n      canRename,\n      canDelete,\n      canCreateFolder,\n      canDuplicate,\n      beginRename,\n      commitRename,\n      cancelRename,\n      deleteItems,\n      createFolder,\n      duplicateItems,\n    ]\n  );\n}\n"],"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 '@vanilla-extract/css';
+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":["'use client';\n\nimport { useCallback, useEffect, useMemo } from 'react';\n\nimport { useLatest, useNavigationHistory } from '@/hooks';\n\nimport type {\n  AssetItem,\n  AssetNavigationSource,\n  AssetPathSegment,\n} from './AssetBrowser.types';\nimport type { KeyboardEvent } from 'react';\n\nexport interface UseAssetNavigationOptions {\n  /** Enables Back/Forward + parent-nav. When false, the hook is a thin pass-through. */\n  history: boolean;\n  /** Current location (oldest → newest). Used to resolve \"go to parent\". */\n  path: readonly AssetPathSegment[];\n  /** Seeds the history stack on mount. */\n  currentFolderId: string | undefined;\n  onNavigate?: (folderId: string, source: AssetNavigationSource) => void;\n  onItemOpen?: (item: AssetItem) => void;\n}\n\nexport interface AssetNavigationApi {\n  /** Pass-through for navigation (breadcrumb / sidebar / folder open). Pushes onto history. */\n  navigate: (folderId: string, source: AssetNavigationSource) => void;\n  /** Open a file or enter a folder (file → onItemOpen; folder → navigate). */\n  activateItem: (item: AssetItem) => void;\n  goBack: () => void;\n  goForward: () => void;\n  canGoBack: boolean;\n  canGoForward: boolean;\n  /** Pass-through of the prop so consumers can gate UI on it. */\n  history: boolean;\n  /** Attach to the AssetBrowser root: Backspace / Alt+ArrowUp → parent folder. */\n  handleRootKeyDown: (event: KeyboardEvent) => void;\n}\n\nfunction isEditableTarget(target: EventTarget | null): boolean {\n  if (!(target instanceof HTMLElement)) return false;\n  return (\n    target.tagName === 'INPUT' ||\n    target.tagName === 'TEXTAREA' ||\n    target.isContentEditable\n  );\n}\n\n/**\n * Folder navigation + back/forward stack + \"go to parent\" keyboard shortcuts,\n * built on top of the library's `useNavigationHistory` primitive. Every handler\n * has a stable identity (`useCallback`) and reads the latest props through\n * `useLatest` refs, matching `component-patterns.md` rules #3/#11.\n */\nexport function useAssetNavigation(\n  options: UseAssetNavigationOptions\n): AssetNavigationApi {\n  const { history, path, onNavigate, onItemOpen, currentFolderId } = options;\n\n  const histApi = useNavigationHistory({\n    initial: currentFolderId,\n    enabled: history,\n  });\n  const { push, canGoBack, canGoForward } = histApi;\n  const histGoBack = histApi.goBack;\n  const histGoForward = histApi.goForward;\n\n  // Keep the back/forward stack in sync with the controlled `currentFolderId`.\n  // `useNavigationHistory` only seeds `initial` once on mount, so an out-of-band\n  // change (deep link, \"reveal in browser\", or a parent that updates\n  // `currentFolderId` without routing through `navigate`) would otherwise leave\n  // the stack — and `canGoBack`/`canGoForward` — stale. `push` no-ops when the\n  // entry already equals the current one, so navigate/back/forward (which leave\n  // `current === currentFolderId`) don't double-push and the forward branch\n  // survives; only a genuine external change advances the stack. This is the\n  // \"mirror React state into an external store\" bridge that component-patterns.md\n  // §2 lists as a legitimate `useEffect` use.\n  useEffect(() => {\n    if (!history || currentFolderId === undefined) return;\n    push(currentFolderId);\n  }, [history, currentFolderId, push]);\n\n  const onNavigateRef = useLatest(onNavigate);\n  const onItemOpenRef = useLatest(onItemOpen);\n  const historyRef = useLatest(history);\n  const pathRef = useLatest(path);\n\n  const navigate = useCallback(\n    (folderId: string, source: AssetNavigationSource): void => {\n      push(folderId);\n      onNavigateRef.current?.(folderId, source);\n    },\n    [push, onNavigateRef]\n  );\n\n  const goBack = useCallback((): void => {\n    const target = histGoBack();\n    if (target === undefined) return;\n    onNavigateRef.current?.(target, 'back');\n  }, [histGoBack, onNavigateRef]);\n\n  const goForward = useCallback((): void => {\n    const target = histGoForward();\n    if (target === undefined) return;\n    onNavigateRef.current?.(target, 'forward');\n  }, [histGoForward, onNavigateRef]);\n\n  const activateItem = useCallback(\n    (item: AssetItem): void => {\n      if (item.kind === 'folder') navigate(item.id, 'open');\n      else onItemOpenRef.current?.(item);\n    },\n    [navigate, onItemOpenRef]\n  );\n\n  const handleRootKeyDown = useCallback(\n    (event: KeyboardEvent): void => {\n      if (!historyRef.current) return;\n      if (isEditableTarget(event.target)) return;\n      const goToParent =\n        event.key === 'Backspace' || (event.altKey && event.key === 'ArrowUp');\n      if (!goToParent) return;\n      const currentPath = pathRef.current;\n      const parent = currentPath[currentPath.length - 2];\n      if (parent) {\n        event.preventDefault();\n        navigate(parent.id, 'breadcrumb');\n      }\n    },\n    [navigate, historyRef, pathRef]\n  );\n\n  return useMemo(\n    () => ({\n      navigate,\n      activateItem,\n      goBack,\n      goForward,\n      canGoBack,\n      canGoForward,\n      history,\n      handleRootKeyDown,\n    }),\n    [\n      navigate,\n      activateItem,\n      goBack,\n      goForward,\n      canGoBack,\n      canGoForward,\n      history,\n      handleRootKeyDown,\n    ]\n  );\n}\n"],"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 '@vanilla-extract/css';
+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":["'use client';\n\nimport {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useTransition,\n} from 'react';\n\nimport { useControlledState, useLatest } from '@/hooks';\n\nimport { indexRange } from './assetBrowserKeyboard';\n\nimport type { AssetItem, AssetSelectionReason } from './AssetBrowser.types';\nimport type { AssetBrowserStore } from './AssetBrowserStore';\nimport type { MouseEvent } from 'react';\n\nexport interface UseAssetSelectionControllerOptions {\n  store: AssetBrowserStore;\n  /** The filtered + sorted list, in display order (anchor ranges run over it). */\n  displayed: readonly AssetItem[];\n  selectionMode: 'single' | 'multiple' | false;\n  selection?: readonly string[];\n  defaultSelection?: readonly string[];\n  onSelectionChange?: (\n    ids: string[],\n    meta: { reason: AssetSelectionReason }\n  ) => void;\n}\n\nexport interface AssetSelectionHandlers {\n  handleItemClick: (item: AssetItem, index: number, event: MouseEvent) => void;\n  selectByKeyboard: (index: number, extend: boolean) => void;\n  toggleSelectId: (id: string) => void;\n  setSelectionIds: (ids: string[], reason: AssetSelectionReason) => void;\n  commitMarquee: (ids: string[], additive: boolean) => void;\n  selectAll: () => void;\n  clearSelection: () => void;\n  contextMenuSelect: (item: AssetItem) => void;\n}\n\nexport interface AssetSelectionController {\n  selectionSet: ReadonlySet<string>;\n  /** Stable identity — the handlers never change, so they're safe context deps. */\n  handlers: AssetSelectionHandlers;\n}\n\nfunction selectableIds(list: readonly AssetItem[]): string[] {\n  return list.filter(it => it.selectable !== false).map(it => it.id);\n}\n\n/**\n * Owns selection state and the click/keyboard/marquee gestures that mutate it.\n *\n * Selection stays in React state (so the controlled `selection` prop and\n * `onSelectionChange` work) but is mirrored into the store on commit, letting\n * each cell subscribe to its own `useAssetSelected(id)` slice instead of\n * re-rendering the whole grid. The anchor is tracked by **id**, not index, so\n * shift-ranges survive a re-sort or re-filter between clicks. All handlers have\n * stable identities (`useCallback`) and read the latest props/state through\n * `useLatest` refs, matching `component-patterns.md` rules #3/#11.\n */\nexport function useAssetSelectionController(\n  options: UseAssetSelectionControllerOptions\n): AssetSelectionController {\n  const { store, displayed, selectionMode, onSelectionChange } = options;\n  const [, startTransition] = useTransition();\n\n  const [selectionArr, setSelectionArr] = useControlledState<readonly string[]>(\n    {\n      value: options.selection,\n      defaultValue: options.defaultSelection,\n      fallback: [],\n    }\n  );\n\n  const selectionSet = useMemo(() => new Set(selectionArr), [selectionArr]);\n\n  // Mirror into the store so per-id slices stay in sync. useLayoutEffect runs\n  // before paint, so initially-selected items never flash unselected.\n  useLayoutEffect(() => {\n    store.setSelection(selectionSet);\n  }, [store, selectionSet]);\n\n  const anchorRef = useRef<string | null>(null);\n\n  // Live props/state read inside the stable handlers below.\n  const displayedRef = useLatest(displayed);\n  const selectionModeRef = useLatest(selectionMode);\n  const selectionSetRef = useLatest(selectionSet);\n  const onSelectionChangeRef = useLatest(onSelectionChange);\n\n  /** Resolve the anchor id to its current position in the displayed list. */\n  const anchorIndex = useCallback((): number => {\n    if (anchorRef.current === null) return -1;\n    return displayedRef.current.findIndex(it => it.id === anchorRef.current);\n  }, [displayedRef]);\n\n  const commitSelection = useCallback(\n    (ids: string[], reason: AssetSelectionReason): void => {\n      setSelectionArr(ids);\n      onSelectionChangeRef.current?.(ids, { reason });\n    },\n    [setSelectionArr, onSelectionChangeRef]\n  );\n\n  const handleItemClick = useCallback(\n    (item: AssetItem, index: number, event: MouseEvent): void => {\n      store.setFocusedId(item.id);\n      if (\n        selectionModeRef.current === false ||\n        item.selectable === false ||\n        item.disabled\n      ) {\n        return;\n      }\n      if (selectionModeRef.current === 'single') {\n        commitSelection([item.id], 'click');\n        anchorRef.current = item.id;\n        return;\n      }\n      if (event.shiftKey) {\n        const a = anchorIndex();\n        if (a !== -1) {\n          const [from, to] = indexRange(a, index);\n          commitSelection(\n            selectableIds(displayedRef.current.slice(from, to + 1)),\n            'click'\n          );\n          return;\n        }\n      }\n      if (event.ctrlKey || event.metaKey) {\n        const next = new Set(selectionSetRef.current);\n        if (next.has(item.id)) next.delete(item.id);\n        else next.add(item.id);\n        commitSelection(Array.from(next), 'click');\n        anchorRef.current = item.id;\n        return;\n      }\n      commitSelection([item.id], 'click');\n      anchorRef.current = item.id;\n    },\n    [\n      store,\n      commitSelection,\n      anchorIndex,\n      selectionModeRef,\n      displayedRef,\n      selectionSetRef,\n    ]\n  );\n\n  const selectByKeyboard = useCallback(\n    (index: number, extend: boolean): void => {\n      const item = displayedRef.current[index];\n      if (!item) return;\n      if (extend) {\n        const a = anchorIndex();\n        if (a !== -1) {\n          const [from, to] = indexRange(a, index);\n          commitSelection(\n            selectableIds(displayedRef.current.slice(from, to + 1)),\n            'keyboard'\n          );\n          return;\n        }\n      }\n      commitSelection(item.selectable === false ? [] : [item.id], 'keyboard');\n      anchorRef.current = item.id;\n    },\n    [commitSelection, anchorIndex, displayedRef]\n  );\n\n  const toggleSelectId = useCallback(\n    (id: string): void => {\n      const next = new Set(selectionSetRef.current);\n      if (next.has(id)) next.delete(id);\n      else next.add(id);\n      commitSelection(Array.from(next), 'keyboard');\n    },\n    [commitSelection, selectionSetRef]\n  );\n\n  const setSelectionIds = useCallback(\n    (ids: string[], reason: AssetSelectionReason): void => {\n      commitSelection(ids, reason);\n    },\n    [commitSelection]\n  );\n\n  const commitMarquee = useCallback(\n    (ids: string[], additive: boolean): void => {\n      startTransition(() => {\n        if (additive) {\n          const next = new Set(selectionSetRef.current);\n          ids.forEach(id => next.add(id));\n          commitSelection(Array.from(next), 'marquee');\n          return;\n        }\n        commitSelection(ids, 'marquee');\n      });\n    },\n    [commitSelection, selectionSetRef]\n  );\n\n  const selectAll = useCallback((): void => {\n    startTransition(() => {\n      commitSelection(selectableIds(displayedRef.current), 'selectAll');\n    });\n  }, [commitSelection, displayedRef]);\n\n  const clearSelection = useCallback((): void => {\n    commitSelection([], 'clear');\n  }, [commitSelection]);\n\n  const contextMenuSelect = useCallback(\n    (item: AssetItem): void => {\n      store.setFocusedId(item.id);\n      if (!selectionSetRef.current.has(item.id) && item.selectable !== false) {\n        commitSelection([item.id], 'contextMenu');\n      }\n      anchorRef.current = item.id;\n    },\n    [store, commitSelection, selectionSetRef]\n  );\n\n  const handlers = useMemo<AssetSelectionHandlers>(\n    () => ({\n      handleItemClick,\n      selectByKeyboard,\n      toggleSelectId,\n      setSelectionIds,\n      commitMarquee,\n      selectAll,\n      clearSelection,\n      contextMenuSelect,\n    }),\n    [\n      handleItemClick,\n      selectByKeyboard,\n      toggleSelectId,\n      setSelectionIds,\n      commitMarquee,\n      selectAll,\n      clearSelection,\n      contextMenuSelect,\n    ]\n  );\n\n  return { selectionSet, handlers };\n}\n"],"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":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { actionBarStyle } from './ChatPanel.css';\n\nimport type { ChatActionBarProps } from './ChatPanel.types';\n\nexport const ChatActionBar = /*#__PURE__*/ React.memo<ChatActionBarProps>(\n  ({ children, className, style, testId, ref, ...rest }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(actionBarStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nChatActionBar.displayName = 'ChatActionBar';\n"],"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":["'use client';\n\nimport React, { useCallback } from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport {\n  MiniCloseIcon,\n  MiniFileIcon,\n  MiniImageIcon,\n  MiniCodeIcon,\n  MiniSelectionIcon,\n} from './ChatIcons';\nimport {\n  attachmentChipStyle,\n  attachmentChipIconStyle,\n  attachmentChipNameStyle,\n  attachmentChipRemoveStyle,\n  attachmentThumbnailStyle,\n} from './ChatPanel.css';\n\nimport type { ChatAttachmentChipProps } from './ChatPanel.types';\n\nconst TYPE_ICONS: Record<string, React.FC> = {\n  file: MiniFileIcon,\n  image: MiniImageIcon,\n  code: MiniCodeIcon,\n  selection: MiniSelectionIcon,\n};\n\n// ─── Component ───────────────────────────────────────────────────\n\nexport const ChatAttachmentChip =\n  /*#__PURE__*/ React.memo<ChatAttachmentChipProps>(\n    ({\n      attachment,\n      onRemove,\n      onClick,\n      removable = false,\n      className,\n      style,\n      testId,\n      ref,\n      ...rest\n    }) => {\n      const handleClick = useCallback(() => {\n        onClick?.(attachment);\n      }, [onClick, attachment]);\n\n      const handleKeyDown = useCallback(\n        (e: React.KeyboardEvent) => {\n          if (e.key === 'Enter' || e.key === ' ') {\n            e.preventDefault();\n            onClick?.(attachment);\n          }\n        },\n        [onClick, attachment]\n      );\n\n      const handleRemove = useCallback(\n        (e: React.MouseEvent) => {\n          e.stopPropagation();\n          onRemove?.(attachment.id);\n        },\n        [onRemove, attachment.id]\n      );\n\n      const TypeIcon = TYPE_ICONS[attachment.type] ?? MiniFileIcon;\n      const isClickable = !!onClick;\n\n      return (\n        <div\n          ref={ref}\n          className={cx(attachmentChipStyle, className)}\n          style={style}\n          data-testid={testId}\n          data-clickable={isClickable || undefined}\n          onClick={isClickable ? handleClick : undefined}\n          onKeyDown={isClickable ? handleKeyDown : undefined}\n          role={isClickable ? 'button' : undefined}\n          tabIndex={isClickable ? 0 : undefined}\n          {...rest}\n        >\n          {attachment.type === 'image' && attachment.thumbnailUrl ? (\n            <img\n              src={attachment.thumbnailUrl}\n              alt={attachment.name}\n              className={attachmentThumbnailStyle}\n            />\n          ) : (\n            <span className={attachmentChipIconStyle}>\n              <TypeIcon />\n            </span>\n          )}\n\n          <span className={attachmentChipNameStyle}>{attachment.name}</span>\n\n          {removable && (\n            <button\n              type=\"button\"\n              className={attachmentChipRemoveStyle}\n              onClick={handleRemove}\n              aria-label={`Remove ${attachment.name}`}\n            >\n              <MiniCloseIcon />\n            </button>\n          )}\n        </div>\n      );\n    }\n  );\n\nChatAttachmentChip.displayName = 'ChatAttachmentChip';\n"],"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":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { bubbleRecipe } from './ChatPanel.css';\n\nimport type { ChatBubbleProps } from './ChatPanel.types';\n\nexport const ChatBubble = /*#__PURE__*/ React.memo<ChatBubbleProps>(\n  ({\n    role = 'assistant',\n    children,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(bubbleRecipe({ role }), className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nChatBubble.displayName = 'ChatBubble';\n"],"names":[],"mappings":";;;;;;AAUO;AAUH;AAWF;AAGF;;"}

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

@@ -1,8 +1,7 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useCallback } from 'react';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { cx } from '../../../utils/cx.js';
+import React, { useState, useCallback } from 'react';
 import '../../Icons/AddIcon.js';
 import '../../Icons/AiChatIcon.js';
 import '../../Icons/AiSparklesIcon.js';
@@ -34,6 +33,7 @@ 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';
@@ -89,21 +89,37 @@ 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 { useIsMounted } from '../../../hooks/useIsMounted/useIsMounted.js';
+import { cx } from '../../../utils/cx.js';
 import { codeBlockHeaderStyle, codeBlockLanguageStyle, codeBlockActionsStyle, codeBlockCopyButtonStyle, codeBlockLineNumbersColumnStyle, codeBlockPreStyle, codeBlockMaxHeightVar, codeBlockContentWithLineNumbersStyle, codeBlockContentStyle, codeBlockContainerStyle } from './ChatPanel.css.js';
 
 const ChatCodeBlock = /*#__PURE__*/ React.memo(({ code, language, copyable = true, lineNumbers = false, maxHeight = 400, actions, className, style, testId, ref, ...rest }) => {
     const [copied, setCopied] = useState(false);
+    const isMounted = useIsMounted();
     const handleCopy = useCallback(() => {
         navigator.clipboard
             .writeText(code)
             .then(() => {
+            // clipboard.writeText can't be cancelled, so guard the state writes:
+            // the block may unmount before it resolves, or within the 2s reset.
+            if (!isMounted())
+                return;
             setCopied(true);
-            setTimeout(() => setCopied(false), 2000);
+            setTimeout(() => {
+                if (isMounted())
+                    setCopied(false);
+            }, 2000);
         })
             .catch(() => {
             // Fallback: older browsers — no-op
         });
-    }, [code]);
+    }, [code, isMounted]);
     const lines = code.split('\n');
     const showHeader = language != null || copyable || actions != null;
     return (jsxs("div", { ref: ref, className: cx(codeBlockContainerStyle, className), style: style, "data-testid": testId, ...rest, children: [showHeader && (jsxs("div", { className: codeBlockHeaderStyle, children: [language != null && (jsx("span", { className: codeBlockLanguageStyle, children: language })), jsxs("div", { className: codeBlockActionsStyle, children: [actions, copyable && (jsx("button", { type: "button", className: codeBlockCopyButtonStyle, onClick: handleCopy, "aria-label": copied ? 'Copied' : 'Copy code', children: copied ? (jsx(CheckIcon, { size: 12, decorative: true })) : (jsx(CopyIcon, { size: 12, decorative: true })) }))] })] })), jsxs("div", { className: cx(codeBlockContentStyle, lineNumbers && codeBlockContentWithLineNumbersStyle), style: assignInlineVars({

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

@@ -1 +1 @@
-{"version":3,"file":"ChatCodeBlock.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatCodeBlock.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO;;AAgBH;AACE;;;;;AAKE;;;AAGA;AACJ;;;AAKA;AAuCQ;AACD;AAoBT;AAGF;;"}
+{"version":3,"file":"ChatCodeBlock.js","sources":["src/components/editor/ChatPanel/ChatCodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport React, { useState, useCallback } from 'react';\n\nimport { CheckIcon, CopyIcon } from '@/components/Icons';\nimport { useIsMounted } from '@/hooks/useIsMounted';\nimport { cx } from '@/utils/cx';\n\nimport {\n  codeBlockContainerStyle,\n  codeBlockHeaderStyle,\n  codeBlockLanguageStyle,\n  codeBlockActionsStyle,\n  codeBlockCopyButtonStyle,\n  codeBlockContentStyle,\n  codeBlockContentWithLineNumbersStyle,\n  codeBlockLineNumbersColumnStyle,\n  codeBlockPreStyle,\n  codeBlockMaxHeightVar,\n} from './ChatPanel.css';\n\nimport type { ChatCodeBlockProps } from './ChatPanel.types';\n\nexport const ChatCodeBlock = /*#__PURE__*/ React.memo<ChatCodeBlockProps>(\n  ({\n    code,\n    language,\n    copyable = true,\n    lineNumbers = false,\n    maxHeight = 400,\n    actions,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    const [copied, setCopied] = useState(false);\n    const isMounted = useIsMounted();\n\n    const handleCopy = useCallback(() => {\n      navigator.clipboard\n        .writeText(code)\n        .then(() => {\n          // clipboard.writeText can't be cancelled, so guard the state writes:\n          // the block may unmount before it resolves, or within the 2s reset.\n          if (!isMounted()) return;\n          setCopied(true);\n          setTimeout(() => {\n            if (isMounted()) setCopied(false);\n          }, 2000);\n        })\n        .catch(() => {\n          // Fallback: older browsers — no-op\n        });\n    }, [code, isMounted]);\n\n    const lines = code.split('\\n');\n    const showHeader = language != null || copyable || actions != null;\n\n    return (\n      <div\n        ref={ref}\n        className={cx(codeBlockContainerStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {showHeader && (\n          <div className={codeBlockHeaderStyle}>\n            {language != null && (\n              <span className={codeBlockLanguageStyle}>{language}</span>\n            )}\n            <div className={codeBlockActionsStyle}>\n              {actions}\n              {copyable && (\n                <button\n                  type=\"button\"\n                  className={codeBlockCopyButtonStyle}\n                  onClick={handleCopy}\n                  aria-label={copied ? 'Copied' : 'Copy code'}\n                >\n                  {copied ? (\n                    <CheckIcon size={12} decorative />\n                  ) : (\n                    <CopyIcon size={12} decorative />\n                  )}\n                </button>\n              )}\n            </div>\n          </div>\n        )}\n\n        <div\n          className={cx(\n            codeBlockContentStyle,\n            lineNumbers && codeBlockContentWithLineNumbersStyle\n          )}\n          style={assignInlineVars({\n            [codeBlockMaxHeightVar]: `${maxHeight}px`,\n          })}\n          data-testid={testId ? `${testId}-content` : undefined}\n        >\n          {lineNumbers && (\n            <div\n              className={codeBlockLineNumbersColumnStyle}\n              aria-hidden=\"true\"\n              data-testid={testId ? `${testId}-line-numbers` : undefined}\n            >\n              {lines.map((_, i) => (\n                <div key={i}>{i + 1}</div>\n              ))}\n            </div>\n          )}\n          <pre className={codeBlockPreStyle}>\n            <code>{code}</code>\n          </pre>\n        </div>\n      </div>\n    );\n  }\n);\n\nChatCodeBlock.displayName = 'ChatCodeBlock';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO;;AAeH;AAEA;AACE;;;;;;;;;AAQM;;;AAEJ;;;AAGA;AACJ;;;AAKA;AAuCQ;AACD;AAoBT;AAGF;;"}

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

@@ -2,8 +2,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import { cx } from '../../../utils/cx.js';
-import { contextChipIconStyle, contextChipLabelStyle, contextChipItemsStyle, contextChipDismissStyle, contextChipStyle } from './ChatPanel.css.js';
 import { MiniCloseIcon } from './ChatIcons.js';
+import { contextChipIconStyle, contextChipLabelStyle, contextChipItemsStyle, contextChipDismissStyle, contextChipStyle } from './ChatPanel.css.js';
 
 const ChatContextChip = /*#__PURE__*/ React.memo(({ label, items, icon, onDismiss, className, style, testId, ref, ...rest }) => {
     return (jsxs("div", { ref: ref, className: cx(contextChipStyle, className), style: style, "data-testid": testId, ...rest, children: [icon && jsx("span", { className: contextChipIconStyle, children: icon }), jsxs("span", { className: contextChipLabelStyle, children: [label, ":"] }), jsx("span", { className: contextChipItemsStyle, children: items.join(', ') }), onDismiss && (jsx("button", { type: "button", className: contextChipDismissStyle, onClick: onDismiss, "aria-label": `Dismiss ${label}`, children: jsx(MiniCloseIcon, {}) }))] }));

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

@@ -1 +1 @@
-{"version":3,"file":"ChatContextChip.js","sources":["../../../../../../src/components/editor/ChatPanel/ChatContextChip.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAcO;AAYH;AAuBF;AAGF;;"}
+{"version":3,"file":"ChatContextChip.js","sources":["src/components/editor/ChatPanel/ChatContextChip.tsx"],"sourcesContent":["'use client';\n\nimport React from 'react';\n\nimport { cx } from '@/utils/cx';\n\nimport { MiniCloseIcon } from './ChatIcons';\nimport {\n  contextChipStyle,\n  contextChipIconStyle,\n  contextChipLabelStyle,\n  contextChipItemsStyle,\n  contextChipDismissStyle,\n} from './ChatPanel.css';\n\nimport type { ChatContextChipProps } from './ChatPanel.types';\n\nexport const ChatContextChip = /*#__PURE__*/ React.memo<ChatContextChipProps>(\n  ({\n    label,\n    items,\n    icon,\n    onDismiss,\n    className,\n    style,\n    testId,\n    ref,\n    ...rest\n  }) => {\n    return (\n      <div\n        ref={ref}\n        className={cx(contextChipStyle, className)}\n        style={style}\n        data-testid={testId}\n        {...rest}\n      >\n        {icon && <span className={contextChipIconStyle}>{icon}</span>}\n        <span className={contextChipLabelStyle}>{label}:</span>\n        <span className={contextChipItemsStyle}>{items.join(', ')}</span>\n        {onDismiss && (\n          <button\n            type=\"button\"\n            className={contextChipDismissStyle}\n            onClick={onDismiss}\n            aria-label={`Dismiss ${label}`}\n          >\n            <MiniCloseIcon />\n          </button>\n        )}\n      </div>\n    );\n  }\n);\n\nChatContextChip.displayName = 'ChatContextChip';\n"],"names":[],"mappings":";;;;;;;AAiBO;AAYH;AAuBF;AAGF;;"}