@jini-ai/ui 0.5.5 → 0.6.10

package/dist/features/asset-grid/react/components/AssetGrid.js

@@ -1,36 +1,42 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { useT } from '../../../i18n/index.js';
-import { useDebouncedValue } from '../../../../react/hooks/useDebouncedValue.js';
-import { DEFAULT_SEARCH_DEBOUNCE_MS } from '../../constants.js';
-import { buildFacetLabelMap, dayKeyFromTimestamp, resolveFacetLabel } from '../../rules.js';
+import { dayKeyFromTimestamp, resolveFacetLabel } from '../../rules.js';
 import { useWiredAssetGridData } from '../hooks/useAssetGridData.js';
 import { useWiredAssetGridLiveUpdates } from '../hooks/useAssetGridLiveUpdates.js';
 import { useAssetGridSelection } from '../hooks/useAssetGridSelection.js';
 import { useRubberBandDrag } from '../hooks/useRubberBandDrag.js';
 import { useAssetGridKeyboardShortcuts } from '../hooks/useAssetGridKeyboardShortcuts.js';
+import { useAssetGridFilters } from './useAssetGridFilters.js';
 import { AssetCard } from './AssetCard.js';
 import { AssetGridBody } from './AssetGridBody.js';
 import { AssetGridToolbar } from './AssetGridToolbar.js';
 import { SelectionActionBar } from './SelectionActionBar.js';
 import { SelectionBand } from './SelectionBand.js';
 import { DeleteConfirmDialog } from './DeleteConfirmDialog.js';
+function renderGridContent({ loading, emptyState, t, ...bodyProps }, _options = {}) {
+    if (loading && bodyProps.assets.length === 0)
+        return _jsx("p", { className: "asset-grid-empty", children: t('Loading…') });
+    if (bodyProps.assets.length === 0)
+        return emptyState ?? _jsx("div", { className: "asset-grid-empty", children: t('No assets yet.') });
+    return _jsx(AssetGridBody, { ...bodyProps });
+}
 /**
  * A live-updating, filterable, multi-selectable asset grid — the generic
  * pattern behind a photo library / DAM. See `packages/ui/source-map.md` for
  * the full retained-behavior manifest against the original `LibrarySection.tsx`.
  */
-export function AssetGrid({ active = true, selectors, dependencies, kindFacets = [], sourceFacets = [], renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen = false, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS, liveUpdateCoalesceMs, initialViewMode = 'grid', useWiredAssetGridData: useWiredAssetGridDataHook = useWiredAssetGridData, useAssetGridSelection: useAssetGridSelectionHook = useAssetGridSelection, }) {
+export function AssetGrid({ active = true, selectors, dependencies, kindFacets: configuredKindFacets, sourceFacets: configuredSourceFacets, renderThumbnail, renderThumbnailPlaceholder, renderCardExtra, renderBulkActions, onDeleteAsset, onDeleteSelected, onPreview, isPreviewOpen = false, toolbarActions, emptyState, searchPlaceholder, searchDebounceMs, liveUpdateCoalesceMs, initialViewMode = 'grid', useWiredAssetGridData: useWiredAssetGridDataHook = useWiredAssetGridData, useAssetGridSelection: useAssetGridSelectionHook = useAssetGridSelection, }) {
     const t = useT();
-    const [kind, setKind] = useState('');
-    const [source, setSource] = useState('');
-    const [search, setSearch] = useState('');
+    const { kind, setKind, source, setSource, search, setSearch, debouncedSearch, filtersActive, kindFacets, sourceFacets, kindFacetLabels, sourceFacetLabels, } = useAssetGridFilters({
+        kindFacets: configuredKindFacets,
+        sourceFacets: configuredSourceFacets,
+        searchDebounceMs,
+    });
     const [viewMode, setViewMode] = useState(initialViewMode);
     const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
     /** Message from a delete the host rejected. Rendered inline — see `runDelete`. */
     const [deleteError, setDeleteError] = useState(null);
-    const debouncedSearch = useDebouncedValue({ value: search, delayMs: searchDebounceMs });
-    const filtersActive = !!(kind || source || debouncedSearch.trim());
     // `dependencies` (host-supplied, or omitted to fall back to the package's
     // in-memory fake) is resolved by each wirer independently — neither this
     // component nor the real `useAssetGridData`/`useAssetGridLiveUpdates`
@@ -102,11 +108,16 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
             setSelectedIds(new Set());
         });
     }, [selectedIds, onDeleteSelected, setAssets, setSelectedIds, runDelete]);
-    const handleDeleteAsset = useCallback(async (id) => {
-        await runDelete(onDeleteAsset ? (batch) => onDeleteAsset(batch[0]) : null, [id], () => {
-            setAssets((prev) => prev.filter((a) => a.id !== id));
-        });
-    }, [onDeleteAsset, setAssets, runDelete]);
+    // Built only when the host supplied `onDeleteAsset`: the card shows its per-asset delete control
+    // only when it receives a handler, so there is no "no handler" path to route through `runDelete`
+    // here (the old inline `onDeleteAsset ? … : null` could never see `null` from a rendered card).
+    const handleDeleteAsset = useMemo(() => onDeleteAsset
+        ? async (id) => {
+            await runDelete((batch) => onDeleteAsset(batch[0]), [id], () => {
+                setAssets((prev) => prev.filter((a) => a.id !== id));
+            });
+        }
+        : undefined, [onDeleteAsset, setAssets, runDelete]);
     const handlePreview = useCallback((id) => {
         const asset = assets.find((a) => a.id === id);
         if (asset)
@@ -122,13 +133,11 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
         onClearSelection: clearSelection,
         onRequestDeleteSelected: requestDeleteSelected,
     });
-    const kindFacetLabels = useMemo(() => buildFacetLabelMap(kindFacets), [kindFacets]);
-    const sourceFacetLabels = useMemo(() => buildFacetLabelMap(sourceFacets), [sourceFacets]);
     const getDayKey = useMemo(() => selectors.getDayKey ?? ((asset) => dayKeyFromTimestamp(selectors.getTimestamp(asset))), [selectors]);
     const renderCard = useCallback((asset, index) => {
         const kindValue = selectors.getKind(asset);
         const sourceValue = selectors.getSource?.(asset);
-        return (_jsx(AssetCard, { asset: asset, index: index, selected: selectedIds.has(asset.id), title: selectors.getTitle(asset), subtitle: selectors.getSubtitle?.(asset), kindLabel: resolveFacetLabel(kindValue, kindFacetLabels), sourceLabel: sourceValue ? resolveFacetLabel(sourceValue, sourceFacetLabels) : undefined, renderThumbnail: renderThumbnail, renderThumbnailPlaceholder: renderThumbnailPlaceholder, onToggle: toggleOne, onRange: rangeTo, onPreview: handlePreview, onDeleteAsset: onDeleteAsset ? handleDeleteAsset : undefined, renderCardExtra: renderCardExtra }, asset.id));
+        return (_jsx(AssetCard, { asset: asset, index: index, selected: selectedIds.has(asset.id), title: selectors.getTitle(asset), subtitle: selectors.getSubtitle?.(asset), kindLabel: resolveFacetLabel(kindValue, kindFacetLabels), sourceLabel: sourceValue ? resolveFacetLabel(sourceValue, sourceFacetLabels) : undefined, renderThumbnail: renderThumbnail, renderThumbnailPlaceholder: renderThumbnailPlaceholder, onToggle: toggleOne, onRange: rangeTo, onPreview: handlePreview, onDeleteAsset: handleDeleteAsset, renderCardExtra: renderCardExtra }, asset.id));
     }, [
         selectedIds,
         selectors,
@@ -143,6 +152,17 @@ export function AssetGrid({ active = true, selectors, dependencies, kindFacets =
         handleDeleteAsset,
         renderCardExtra,
     ]);
-    return (_jsxs("div", { className: "asset-grid-root", children: [_jsx(AssetGridToolbar, { search: search, onSearchChange: setSearch, searchPlaceholder: searchPlaceholder, kind: kind, onKindChange: setKind, kindFacets: kindFacets, source: source, onSourceChange: setSource, sourceFacets: sourceFacets, viewMode: viewMode, onViewModeChange: setViewMode, onRefresh: () => void reload(), loading: loading, toolbarActions: toolbarActions }), selectedIds.size > 0 && !dragging ? (_jsx(SelectionActionBar, { selectedIds: [...selectedIds], onSelectAll: selectAll, onClear: clearSelection, onRequestDelete: requestDeleteSelected, renderBulkActions: renderBulkActions })) : null, loading && assets.length === 0 ? (_jsx("p", { className: "asset-grid-empty", children: t('Loading…') })) : assets.length === 0 ? ((emptyState ?? _jsx("div", { className: "asset-grid-empty", children: t('No assets yet.') }))) : (_jsx(AssetGridBody, { viewMode: viewMode, assets: assets, getDayKey: getDayKey, containerRef: containerRef, onMouseDown: onMouseDown, selecting: selectedIds.size > 0, renderCard: renderCard })), _jsx(SelectionBand, { band: band }), deleteError ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: deleteError })) : null, confirmDeleteOpen ? (_jsx(DeleteConfirmDialog, { count: selectedIds.size, onCancel: () => setConfirmDeleteOpen(false), onConfirm: () => void confirmDelete() })) : null] }));
+    return (_jsxs("div", { className: "asset-grid-root", children: [_jsx(AssetGridToolbar, { search: search, onSearchChange: setSearch, searchPlaceholder: searchPlaceholder, kind: kind, onKindChange: setKind, kindFacets: kindFacets, source: source, onSourceChange: setSource, sourceFacets: sourceFacets, viewMode: viewMode, onViewModeChange: setViewMode, onRefresh: () => void reload(), loading: loading, toolbarActions: toolbarActions }), selectedIds.size > 0 && !dragging ? (_jsx(SelectionActionBar, { selectedIds: [...selectedIds], onSelectAll: selectAll, onClear: clearSelection, onRequestDelete: requestDeleteSelected, renderBulkActions: renderBulkActions })) : null, renderGridContent({
+                loading,
+                emptyState,
+                t,
+                viewMode,
+                assets,
+                getDayKey,
+                containerRef,
+                onMouseDown,
+                selecting: selectedIds.size > 0,
+                renderCard,
+            }), _jsx(SelectionBand, { band: band }), deleteError ? (_jsx("p", { className: "jini-hint jini-hint-error", role: "alert", children: deleteError })) : null, confirmDeleteOpen ? (_jsx(DeleteConfirmDialog, { count: selectedIds.size, onCancel: () => setConfirmDeleteOpen(false), onConfirm: () => void confirmDelete() })) : null] }));
 }
 //# sourceMappingURL=AssetGrid.js.map

package/dist/features/asset-grid/react/components/useAssetGridFilters.d.ts

@@ -0,0 +1,21 @@
+import type { AssetGridFacetOption } from '../../types.js';
+/** Owns the editable filters and the debounced membership used by data/live updates. */
+export declare function useAssetGridFilters({ kindFacets, sourceFacets, searchDebounceMs, }: {
+    kindFacets: AssetGridFacetOption[] | undefined;
+    sourceFacets: AssetGridFacetOption[] | undefined;
+    searchDebounceMs: number | undefined;
+}, _options?: Record<string, never>): {
+    kind: string;
+    setKind: import("react").Dispatch<import("react").SetStateAction<string>>;
+    source: string;
+    setSource: import("react").Dispatch<import("react").SetStateAction<string>>;
+    search: string;
+    setSearch: import("react").Dispatch<import("react").SetStateAction<string>>;
+    debouncedSearch: string;
+    filtersActive: boolean;
+    kindFacets: AssetGridFacetOption[];
+    sourceFacets: AssetGridFacetOption[];
+    kindFacetLabels: Map<string, string>;
+    sourceFacetLabels: Map<string, string>;
+};
+//# sourceMappingURL=useAssetGridFilters.d.ts.map

package/dist/features/asset-grid/react/components/useAssetGridFilters.js

@@ -0,0 +1,19 @@
+import { useMemo, useState } from 'react';
+import { useDebouncedValue } from '../../../../react/hooks/useDebouncedValue.js';
+import { DEFAULT_SEARCH_DEBOUNCE_MS } from '../../constants.js';
+import { buildFacetLabelMap } from '../../rules.js';
+/** Owns the editable filters and the debounced membership used by data/live updates. */
+export function useAssetGridFilters({ kindFacets = [], sourceFacets = [], searchDebounceMs = DEFAULT_SEARCH_DEBOUNCE_MS, }, _options = {}) {
+    const [kind, setKind] = useState('');
+    const [source, setSource] = useState('');
+    const [search, setSearch] = useState('');
+    const debouncedSearch = useDebouncedValue({ value: search, delayMs: searchDebounceMs });
+    const filtersActive = !!(kind || source || debouncedSearch.trim());
+    const kindFacetLabels = useMemo(() => buildFacetLabelMap(kindFacets), [kindFacets]);
+    const sourceFacetLabels = useMemo(() => buildFacetLabelMap(sourceFacets), [sourceFacets]);
+    return {
+        kind, setKind, source, setSource, search, setSearch,
+        debouncedSearch, filtersActive, kindFacets, sourceFacets, kindFacetLabels, sourceFacetLabels,
+    };
+}
+//# sourceMappingURL=useAssetGridFilters.js.map

package/dist/features/asset-grid/react/hooks/useAssetGridKeyboardShortcuts.js

@@ -1,5 +1,19 @@
 import { useGlobalKeydown } from '../../../../browser/index.js';
 import { isTypingTarget } from '../../rules.js';
+function handleSelectionKey({ event, typing, hasSelection, isPreviewOpen, onClearSelection, onRequestDeleteSelected }, _options = {}) {
+    if (event.key === 'Escape') {
+        if (isPreviewOpen)
+            return; // the preview surface owns Escape while it's open
+        if (hasSelection)
+            onClearSelection();
+    }
+    else if (event.key === 'Delete' || event.key === 'Backspace') {
+        if (typing || isPreviewOpen || !hasSelection)
+            return;
+        event.preventDefault();
+        onRequestDeleteSelected();
+    }
+}
 /** Cmd/Ctrl+A select-all, Escape clear-selection, Delete/Backspace triggers the bulk-delete confirm flow. */
 export function useAssetGridKeyboardShortcuts(params) {
     const { active, enabled, hasAssets, hasSelection, isPreviewOpen, onSelectAll, onClearSelection, onRequestDeleteSelected, } = params;
@@ -14,17 +28,8 @@ export function useAssetGridKeyboardShortcuts(params) {
                 e.preventDefault();
                 onSelectAll();
             }
-            else if (e.key === 'Escape') {
-                if (isPreviewOpen)
-                    return; // the preview surface owns Escape while it's open
-                if (hasSelection)
-                    onClearSelection();
-            }
-            else if (e.key === 'Delete' || e.key === 'Backspace') {
-                if (typing || isPreviewOpen || !hasSelection)
-                    return;
-                e.preventDefault();
-                onRequestDeleteSelected();
+            else {
+                handleSelectionKey({ event: e, typing, hasSelection, isPreviewOpen, onClearSelection, onRequestDeleteSelected });
             }
         },
     }, { enabled: active });

package/dist/features/asset-grid/react/hooks/useAssetGridLiveUpdates.d.ts

@@ -19,6 +19,8 @@ export interface UseAssetGridLiveUpdatesParams<TAsset extends AssetGridItem> {
  * id all fall back to a single full reload for that window — see
  * `packages/ui/archived provenance ledger` for why (the original OD comment: "a filtered
  * view can't predict membership client-side").
+ * Disposed subscriptions discard in-flight incremental reads. Failed passes report a
+ * fixed diagnostic and request a full reconciliation on the next live event.
  */
 export declare function useAssetGridLiveUpdates<TAsset extends AssetGridItem>(params: UseAssetGridLiveUpdatesParams<TAsset>): void;
 export type UseWiredAssetGridLiveUpdatesParams<TAsset extends AssetGridItem> = Omit<UseAssetGridLiveUpdatesParams<TAsset>, 'liveUpdates' | 'fetchAssetById'> & {

package/dist/features/asset-grid/react/hooks/useAssetGridLiveUpdates.js

@@ -2,6 +2,18 @@ import { useEffect, useMemo, useRef } from 'react';
 import { DEFAULT_LIVE_UPDATE_COALESCE_MS } from '../../constants.js';
 import { mergeIngestedAssets } from '../../rules.js';
 import { createFakeAssetGridDependencies } from '../../dependencies.js';
+/** Drains pending deletes and cancels matching ingests before the pass can fetch.
+ * Mutates the pending sets and schedules the asset update. @complexity O(d + a) deletes and assets. */
+function applyPendingDeletes({ pendingDelete, pendingIngest, setAssets }, _options = {}) {
+    // Deletes are free (no fetch); apply them first.
+    if (pendingDelete.size) {
+        const del = new Set(pendingDelete);
+        pendingDelete.clear();
+        for (const id of del)
+            pendingIngest.delete(id);
+        setAssets((prev) => prev.filter((a) => !del.has(a.id)));
+    }
+}
 /**
  * Subscribes to a live-update transport and reconciles incremental
  * ingest/delete events into the current asset list. Events are coalesced
@@ -11,6 +23,8 @@ import { createFakeAssetGridDependencies } from '../../dependencies.js';
  * id all fall back to a single full reload for that window — see
  * `packages/ui/archived provenance ledger` for why (the original OD comment: "a filtered
  * view can't predict membership client-side").
+ * Disposed subscriptions discard in-flight incremental reads. Failed passes report a
+ * fixed diagnostic and request a full reconciliation on the next live event.
  */
 export function useAssetGridLiveUpdates(params) {
     const { active, liveUpdates, filtersActive, fetchAssetById, setAssets, reload, coalesceMs = DEFAULT_LIVE_UPDATE_COALESCE_MS } = params;
@@ -33,19 +47,17 @@ export function useAssetGridLiveUpdates(params) {
     useEffect(() => {
         if (!active || !liveUpdates)
             return;
+        let disposed = false;
         let timer = null;
         const pendingIngest = new Set();
         const pendingDelete = new Set();
         let pendingFull = false;
+        // No `disposed` check on entry: a pass only ever starts from `flush`, whose first pass runs
+        // synchronously from a timer that cleanup cancels, and whose later passes are gated by the loop's
+        // own `!disposed` condition — so a pass can never begin after disposal. The post-fetch check
+        // below still matters, because disposal can land while a pass is awaiting.
         const runFlushPass = async () => {
-            // Deletes are free (no fetch); apply them first.
-            if (pendingDelete.size) {
-                const del = new Set(pendingDelete);
-                pendingDelete.clear();
-                for (const id of del)
-                    pendingIngest.delete(id);
-                setAssets((prev) => prev.filter((a) => !del.has(a.id)));
-            }
+            applyPendingDeletes({ pendingDelete, pendingIngest, setAssets });
             if (pendingFull || filtersActiveRef.current) {
                 pendingFull = false;
                 pendingIngest.clear();
@@ -61,6 +73,9 @@ export function useAssetGridLiveUpdates(params) {
                     return;
                 }
                 const fetched = await Promise.all(ids.map((id) => fetchById(id)));
+                // The same state setter can outlive this subscription (for example after deactivation).
+                if (disposed)
+                    return;
                 // A missing fetch is ambiguous (filtered out? race?) — reload instead.
                 if (fetched.some((a) => a === null)) {
                     await reloadRef.current();
@@ -105,15 +120,23 @@ export function useAssetGridLiveUpdates(params) {
             try {
                 do {
                     rerun = false;
-                    await runFlushPass();
-                } while (rerun);
+                    try {
+                        await runFlushPass();
+                    }
+                    catch {
+                        if (!disposed) {
+                            pendingFull = true;
+                            console.error('[asset-grid] Live update failed.');
+                        }
+                    }
+                } while (rerun && !disposed);
             }
             finally {
                 flushing = false;
             }
         };
         const schedule = () => {
-            if (timer)
+            if (disposed || timer)
                 return;
             timer = setTimeout(() => void flush(), coalesceMs);
         };
@@ -132,6 +155,7 @@ export function useAssetGridLiveUpdates(params) {
             },
         });
         return () => {
+            disposed = true;
             if (timer)
                 clearTimeout(timer);
             unsubscribe();

package/dist/features/asset-tree-browser/react/components/AssetTreeBrowser.d.ts

@@ -1,10 +1,10 @@
-import { type ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { AssetTreeDependencies } from '../../ports.js';
 import type { AssetTreeFileItem, AssetTreeFolderItem, AssetTreeKindConfigMap, AssetTreeNavState, AssetTreeSelectors, AssetTreeToolbarAction } from '../../types.js';
-import { useAssetTreeNavigation } from '../hooks/useAssetTreeNavigation.js';
-import { useAssetTreePreview } from '../hooks/useAssetTreePreview.js';
-import { useAssetTreeRename } from '../hooks/useAssetTreeRename.js';
-import { useAssetTreeSelection } from '../hooks/useAssetTreeSelection.js';
+import type { useAssetTreeNavigation } from '../hooks/useAssetTreeNavigation.js';
+import type { useAssetTreePreview } from '../hooks/useAssetTreePreview.js';
+import type { useAssetTreeRename } from '../hooks/useAssetTreeRename.js';
+import type { useAssetTreeSelection } from '../hooks/useAssetTreeSelection.js';
 export interface AssetTreeBrowserProps<TFile extends AssetTreeFileItem> {
     files: TFile[];
     /** Persisted folders, including empty ones — see `AssetTreeFolderItem`'s doc comment. */
@@ -59,5 +59,5 @@ export interface AssetTreeBrowserProps<TFile extends AssetTreeFileItem> {
  * section, project menu, rotating-tip footer, and file-kind-specific
  * preview rendering).
  */
-export declare function AssetTreeBrowser<TFile extends AssetTreeFileItem>({ files, folders, selectors, kindConfig, sectionOrder, dependencies, rootLabel, reloading, navState, onNavStateChange, onSelectionChange, onOpenFile, onRenameFile, onDeleteFile, onDeleteFiles, onUploadFiles, getFileUrl, downloadFiles, selectInitialPreviewFile, renderPreviewThumbnail, thumbnailIsInteractive, toolbarActions, emptyStateActions, footer, useAssetTreeNavigation: useAssetTreeNavigationHook, useAssetTreePreview: useAssetTreePreviewHook, useAssetTreeRename: useAssetTreeRenameHook, useAssetTreeSelection: useAssetTreeSelectionHook, }: AssetTreeBrowserProps<TFile>): import("react").JSX.Element;
+export declare function AssetTreeBrowser<TFile extends AssetTreeFileItem>(props: AssetTreeBrowserProps<TFile>): import("react").JSX.Element;
 //# sourceMappingURL=AssetTreeBrowser.d.ts.map

package/dist/features/asset-tree-browser/react/components/AssetTreeBrowser.js

@@ -1,27 +1,8 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useT } from '../../../i18n/index.js';
-import { DEFAULT_KIND_CONFIG_MAP, DEFAULT_SECTION_ORDER, EMPTY_TOOLBAR_ACTIONS } from '../../constants.js';
-import { createBrowserAssetTreeDependencies } from '../../dependencies.js';
-import { basenameForRename, canCopyLocalPath, countFilesUnderDir, resolveKindConfig } from '../../rules.js';
-import { useAssetTreeBatchActions } from '../hooks/useAssetTreeBatchActions.js';
-import { useAssetTreeClipboardPasteUpload } from '../hooks/useAssetTreeClipboardPasteUpload.js';
-import { useAssetTreeCopyLocalPath } from '../hooks/useAssetTreeCopyLocalPath.js';
-import { useAssetTreeDragUpload } from '../hooks/useAssetTreeDragUpload.js';
-import { useAssetTreeNavigation } from '../hooks/useAssetTreeNavigation.js';
-import { useAssetTreePreview } from '../hooks/useAssetTreePreview.js';
-import { useAssetTreeRename } from '../hooks/useAssetTreeRename.js';
-import { useAssetTreeRowMenu } from '../hooks/useAssetTreeRowMenu.js';
-import { useAssetTreeSelection } from '../hooks/useAssetTreeSelection.js';
-import { AssetTreeBreadcrumbs } from './AssetTreeBreadcrumbs.js';
-import { AssetTreeEmptyState } from './AssetTreeEmptyState.js';
-import { AssetTreeFileRow } from './AssetTreeFileRow.js';
-import { AssetTreeFolderRow } from './AssetTreeFolderRow.js';
-import { AssetTreeRowMenu } from './AssetTreeRowMenu.js';
-import { AssetTreeSelectionBar } from './AssetTreeSelectionBar.js';
-import { AssetTreeToolbar } from './AssetTreeToolbar.js';
-import { AssetTreeUploadErrorBanner } from './AssetTreeUploadErrorBanner.js';
-import { FilePreviewPane } from './FilePreviewPane.js';
+import { DEFAULT_KIND_CONFIG_MAP } from '../../constants.js';
+import { AssetTreeBrowserBody, AssetTreeBrowserPreview, AssetTreeBrowserRowMenu, AssetTreeBrowserTopbar, } from './AssetTreeBrowserParts.js';
+import { useAssetTreeBrowserController } from './useAssetTreeBrowserController.js';
 /**
  * A directory-navigable file tree: breadcrumbs, a host-supplied toolbar,
  * kind-grouped sections with a pinned Folders section, row selection with
@@ -33,118 +14,18 @@ import { FilePreviewPane } from './FilePreviewPane.js';
  * section, project menu, rotating-tip footer, and file-kind-specific
  * preview rendering).
  */
-export function AssetTreeBrowser({ files, folders, selectors, kindConfig = DEFAULT_KIND_CONFIG_MAP, sectionOrder = DEFAULT_SECTION_ORDER, dependencies, rootLabel, reloading = false, navState, onNavStateChange, onSelectionChange, onOpenFile, onRenameFile, onDeleteFile, onDeleteFiles, onUploadFiles, getFileUrl, downloadFiles, selectInitialPreviewFile, renderPreviewThumbnail, thumbnailIsInteractive = false, toolbarActions = EMPTY_TOOLBAR_ACTIONS, emptyStateActions = EMPTY_TOOLBAR_ACTIONS, footer, useAssetTreeNavigation: useAssetTreeNavigationHook = useAssetTreeNavigation, useAssetTreePreview: useAssetTreePreviewHook = useAssetTreePreview, useAssetTreeRename: useAssetTreeRenameHook = useAssetTreeRename, useAssetTreeSelection: useAssetTreeSelectionHook = useAssetTreeSelection, }) {
+export function AssetTreeBrowser(props) {
     const t = useT();
-    // KNOWN FOLLOW-UP (flagged by the 2026-07-22 verification pass, not yet
-    // fixed): this has the same useWiredX gap ConnectorsBrowser had — `deps`
-    // resolution is still inline instead of behind a `useWiredAssetTreeBrowser`
-    // wrapper. Deliberately not fixed here: unlike ConnectorsBrowser's `deps`
-    // (fed to exactly the 3 already-overridable sub-hooks), this `deps` also
-    // feeds `useAssetTreeRowMenu`, `useAssetTreeClipboardPasteUpload`, and
-    // `useAssetTreeCopyLocalPath` below — none of which currently have their
-    // own override props — so collapsing it into one wired hook is a real
-    // design decision (what belongs in the wired hook vs. stays overridable)
-    // rather than a mechanical port of the ConnectorsBrowser pattern. Lower
-    // severity than that one too: these are DOM/clipboard adapters, not
-    // remote data fetching.
-    const deps = useMemo(() => dependencies ?? createBrowserAssetTreeDependencies(), [dependencies]);
-    const navigation = useAssetTreeNavigationHook({
-        files,
-        folders,
-        sectionOrder,
-        getKind: selectors.getKind,
-        getModifiedAt: selectors.getModifiedAt,
-        navState,
-        onNavStateChange,
-    });
-    const preview = useAssetTreePreviewHook(files, selectInitialPreviewFile);
-    // Declared before `useAssetTreeSelection` so its in-flight `renaming.path`
-    // (if any) can be threaded into selection's prune logic as
-    // `pendingRenamePath` — see that hook's doc comment for the race this
-    // closes. `onRenamed` referencing `selection` here (declared below) is
-    // safe: it's a closure that only actually runs later, once `selection` is
-    // fully bound.
-    const rename = useAssetTreeRenameHook({
-        currentDir: navigation.currentDir,
-        onRenameFile,
-        onRenamed: (oldPath, renamedFile) => {
-            if (preview.previewPath === oldPath)
-                preview.setPreviewPath(renamedFile.path);
-            selection.renamePath(oldPath, renamedFile.path);
-        },
-    });
-    const selection = useAssetTreeSelectionHook(navigation.filesAtCurrentDir, navigation.currentDir, rename.renaming?.path ?? null);
-    const rowMenu = useAssetTreeRowMenu(deps.dom);
-    const dragUpload = useAssetTreeDragUpload(onUploadFiles);
-    useAssetTreeClipboardPasteUpload({
-        dom: deps.dom,
-        onUploadFiles,
-        onBeforeUpload: dragUpload.clearDropReadError,
-    });
-    const batchActions = useAssetTreeBatchActions({ selected: selection.selected, onDeleteFiles, downloadFiles });
-    const copyLocalPath = useAssetTreeCopyLocalPath(deps.clipboard);
-    useEffect(() => {
-        onSelectionChange?.(selection.selected);
-    }, [selection.selected, onSelectionChange]);
-    function findFile(path) {
-        return files.find((f) => f.path === path);
-    }
-    function openPath(path) {
-        const target = findFile(path);
-        if (target)
-            onOpenFile(target);
-    }
-    const menuFile = rowMenu.menuPos ? (findFile(rowMenu.menuPos.path) ?? null) : null;
+    const { files, folders, selectors, kindConfig = DEFAULT_KIND_CONFIG_MAP, getFileUrl } = props;
+    const controller = useAssetTreeBrowserController(props, props);
+    const { navigation, preview, selection, rowMenu, dragUpload } = controller;
     const hasSelection = selection.selected.size > 0;
-    const isEmpty = files.length === 0 && (folders?.length ?? 0) === 0;
     const previewedFile = preview.previewFile;
-    const previewKindConfig = previewedFile ? resolveKindConfig(selectors.getKind(previewedFile), kindConfig) : null;
-    return (_jsxs("div", { className: `asset-tree-panel${previewedFile ? '' : ' no-preview'}${hasSelection ? ' has-selection' : ''}`, children: [reloading ? (_jsx("div", { className: "asset-tree-reloading-overlay", "data-testid": "asset-tree-reloading", children: t('Loading…') })) : null, _jsxs("div", { className: "asset-tree-main", children: [_jsxs("div", { className: "asset-tree-topbar", children: [_jsx("div", { className: "asset-tree-topbar-left", children: _jsx(AssetTreeBreadcrumbs, { currentDir: navigation.currentDir, rootLabel: rootLabel ?? t('Files'), onNavigate: navigation.setCurrentDir }) }), _jsx("div", { className: "asset-tree-topbar-right", children: _jsx(AssetTreeToolbar, { actions: toolbarActions }) })] }), _jsxs("div", { className: "asset-tree-body", "data-testid": "asset-tree-body", onDragEnter: dragUpload.onDragEnter, onDragOver: dragUpload.onDragOver, onDragLeave: dragUpload.onDragLeave, onDrop: dragUpload.onDrop, children: [dragUpload.dropReadError && !preview.previewPath ? (_jsx(AssetTreeUploadErrorBanner, { message: dragUpload.dropReadError, onDismiss: dragUpload.clearDropReadError })) : null, hasSelection ? (_jsx(AssetTreeSelectionBar, { count: selection.selected.size, onClear: selection.clearSelection, onDelete: () => void batchActions.deleteSelected(), deleting: batchActions.deleting, onDownload: downloadFiles ? () => void batchActions.downloadSelected() : undefined, downloading: batchActions.downloading, downloadError: batchActions.downloadError })) : null, isEmpty ? (_jsx(AssetTreeEmptyState, { actions: emptyStateActions })) : (_jsxs(_Fragment, { children: [navigation.dirsAtCurrentDir.length > 0 ? (_jsxs("div", { className: "asset-tree-section", children: [_jsxs("div", { className: "asset-tree-section-label", children: [t('Folders'), _jsx("span", { className: "asset-tree-section-count", children: navigation.dirsAtCurrentDir.length })] }), navigation.dirsAtCurrentDir.map((dirName) => {
-                                                const fullPath = navigation.currentDir === '' ? dirName : `${navigation.currentDir}/${dirName}`;
-                                                return (_jsx(AssetTreeFolderRow, { name: dirName, path: fullPath, fileCount: countFilesUnderDir(files, fullPath), onNavigate: navigation.setCurrentDir }, fullPath));
-                                            })] }, "folders")) : null, navigation.sections.map((section) => {
-                                        const config = resolveKindConfig(section.kind, kindConfig);
-                                        return (_jsxs("div", { className: "asset-tree-section", children: [_jsxs("div", { className: "asset-tree-section-label", children: [t(config.label), _jsx("span", { className: "asset-tree-section-count", children: section.files.length })] }), section.files.map((f) => (_jsx(AssetTreeFileRow, { path: f.path, displayName: basenameForRename(f.path, navigation.currentDir), active: preview.previewPath === f.path, selected: selection.selected.has(f.path), kindLabel: t(config.label), kindGlyph: config.glyph, size: selectors.getSize(f), modifiedAt: selectors.getModifiedAt(f), renaming: rename.renaming?.path === f.path ? rename.renaming : null, onSelectPreview: preview.setPreviewPath, onOpen: openPath, onToggleSelect: selection.toggleSelect, onOpenMenu: rowMenu.openMenuFor, onRenameDraftChange: rename.updateDraft, onCommitRename: () => void rename.commitRename(), onCancelRename: rename.cancelRename }, f.path)))] }, `kind:${section.kind}`));
-                                    })] })), footer] }), dragUpload.draggingFiles ? (_jsx("div", { className: "asset-tree-drop-overlay", "aria-hidden": true, "data-testid": "asset-tree-drop-overlay", children: _jsx("div", { className: "asset-tree-drop-overlay-card", children: _jsx("span", { className: "label", children: t('Drop to upload') }) }) })) : null] }), previewedFile && previewKindConfig ? (_jsx(FilePreviewPane
+    return (_jsxs("div", { className: `asset-tree-panel${previewedFile ? '' : ' no-preview'}${hasSelection ? ' has-selection' : ''}`, children: [props.reloading ? (_jsx("div", { className: "asset-tree-reloading-overlay", "data-testid": "asset-tree-reloading", children: t('Loading…') })) : null, _jsxs("div", { className: "asset-tree-main", children: [_jsx(AssetTreeBrowserTopbar, { currentDir: navigation.currentDir, rootLabel: props.rootLabel, onNavigate: navigation.setCurrentDir, toolbarActions: props.toolbarActions }), _jsx(AssetTreeBrowserBody, { controller: controller, files: files, folders: folders, selectors: selectors, kindConfig: kindConfig, downloadFiles: props.downloadFiles, emptyStateActions: props.emptyStateActions, footer: props.footer }), dragUpload.draggingFiles ? (_jsx("div", { className: "asset-tree-drop-overlay", "aria-hidden": true, "data-testid": "asset-tree-drop-overlay", children: _jsx("div", { className: "asset-tree-drop-overlay-card", children: _jsx("span", { className: "label", children: t('Drop to upload') }) }) })) : null] }), previewedFile ? (_jsx(AssetTreeBrowserPreview
             // Keyed on the path so a host's `renderThumbnail` (which may mount
             // a heavy/stateful element like an iframe or canvas) fully
             // remounts when the user switches files, instead of React reusing
             // the same DOM node across two different files.
-            , { file: previewedFile, path: previewedFile.path, kindLabel: t(previewKindConfig.label), kindGlyph: previewKindConfig.glyph, size: selectors.getSize(previewedFile), modifiedAt: selectors.getModifiedAt(previewedFile), onOpen: () => onOpenFile(previewedFile), onClose: preview.clearPreview, downloadHref: getFileUrl?.(previewedFile), renderThumbnail: renderPreviewThumbnail, thumbnailIsInteractive: thumbnailIsInteractive }, previewedFile.path)) : null, rowMenu.menuPos ? (_jsx(AssetTreeRowMenu, { path: rowMenu.menuPos.path, displayName: basenameForRename(rowMenu.menuPos.path, navigation.currentDir), top: rowMenu.menuPos.top, left: rowMenu.menuPos.left, containerRef: rowMenu.containerRef, canCopyLocalPath: !!menuFile && canCopyLocalPath(menuFile, selectors), copied: copyLocalPath.copiedPath === rowMenu.menuPos.path, download: getFileUrl && menuFile
-                    ? { href: getFileUrl(menuFile), onClick: rowMenu.closeMenu }
-                    : undefined, onOpen: () => {
-                    const path = rowMenu.menuPos.path;
-                    rowMenu.closeMenu();
-                    openPath(path);
-                }, onRename: () => {
-                    const path = rowMenu.menuPos.path;
-                    rowMenu.closeMenu();
-                    rename.startRename(path);
-                }, 
-                // Deliberately does NOT close the menu (unlike every other action
-                // here) — the origin `DesignFilesPanel`'s equivalent handler did
-                // call `setMenuPos(null)` before copying, which meant its
-                // "Copied" confirmation label could never actually become visible
-                // to a user (it only ever renders inside the now-closed popover).
-                // Since the whole point of `copiedPath`/the transient-confirmation
-                // UI is to be seen, this keeps the menu open so it can be; the
-                // existing outside-dismiss/Escape handling still closes it
-                // normally afterward.
-                onCopyLocalPath: () => {
-                    const path = rowMenu.menuPos.path;
-                    // `canCopyLocalPath` (passed below) already gates the button's
-                    // `disabled` state on `!!menuFile`, so a click can only reach
-                    // this handler when `menuFile` is non-null — asserting that
-                    // instead of re-guarding it here avoids an unreachable `: null`
-                    // ternary arm (a real click can never fire on a disabled
-                    // button, so that arm was dead code, not defensive coding).
-                    const localPath = selectors.getLocalPath?.(menuFile);
-                    if (localPath)
-                        void copyLocalPath.copyLocalPath(path, localPath);
-                }, onDelete: () => {
-                    const path = rowMenu.menuPos.path;
-                    rowMenu.closeMenu();
-                    onDeleteFile(path);
-                } })) : null] }));
+            , { file: previewedFile, selectors: selectors, kindConfig: kindConfig, onOpenFile: props.onOpenFile, onClose: preview.clearPreview, getFileUrl: getFileUrl, renderPreviewThumbnail: props.renderPreviewThumbnail, thumbnailIsInteractive: props.thumbnailIsInteractive }, previewedFile.path)) : null, rowMenu.menuPos ? (_jsx(AssetTreeBrowserRowMenu, { controller: controller, menuPos: rowMenu.menuPos, selectors: selectors, getFileUrl: getFileUrl, onDeleteFile: props.onDeleteFile })) : null] }));
 }
 //# sourceMappingURL=AssetTreeBrowser.js.map

package/dist/features/asset-tree-browser/react/components/AssetTreeBrowserParts.d.ts

@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react';
+import type { AssetTreeFileItem, AssetTreeFolderItem, AssetTreeKindConfigMap, AssetTreeMenuPosition, AssetTreeSelectors, AssetTreeToolbarAction } from '../../types.js';
+import type { AssetTreeBrowserController } from './useAssetTreeBrowserController.js';
+interface ControllerProps<TFile> {
+    controller: AssetTreeBrowserController<TFile>;
+}
+export interface AssetTreeBrowserTopbarProps {
+    currentDir: string;
+    rootLabel?: string | undefined;
+    onNavigate: (dir: string) => void;
+    toolbarActions?: readonly AssetTreeToolbarAction[] | undefined;
+}
+/** Breadcrumbs (root label defaults to `t('Files')`) plus the host toolbar. */
+export declare function AssetTreeBrowserTopbar({ currentDir, rootLabel, onNavigate, toolbarActions, }: AssetTreeBrowserTopbarProps): import("react").JSX.Element;
+export interface AssetTreeBrowserBodyProps<TFile extends AssetTreeFileItem> extends ControllerProps<TFile> {
+    files: TFile[];
+    folders?: AssetTreeFolderItem[] | undefined;
+    selectors: AssetTreeSelectors<TFile>;
+    kindConfig: AssetTreeKindConfigMap;
+    downloadFiles?: ((paths: string[]) => Promise<{
+        blob: Blob;
+        filename: string;
+    }>) | undefined;
+    emptyStateActions?: readonly AssetTreeToolbarAction[] | undefined;
+    footer?: ReactNode;
+}
+/** The drop-target listing area: upload-error banner, selection bar, folders + kind sections (or the empty state), footer. */
+export declare function AssetTreeBrowserBody<TFile extends AssetTreeFileItem>(props: AssetTreeBrowserBodyProps<TFile>): import("react").JSX.Element;
+export interface AssetTreeBrowserPreviewProps<TFile extends AssetTreeFileItem> {
+    file: TFile;
+    selectors: AssetTreeSelectors<TFile>;
+    kindConfig: AssetTreeKindConfigMap;
+    onOpenFile: (file: TFile) => void;
+    onClose: () => void;
+    getFileUrl?: ((file: TFile) => string) | undefined;
+    renderPreviewThumbnail?: ((file: TFile) => ReactNode) | undefined;
+    thumbnailIsInteractive?: boolean | undefined;
+}
+/** `FilePreviewPane` for the previewed `file`, with its kind display config resolved. */
+export declare function AssetTreeBrowserPreview<TFile extends AssetTreeFileItem>({ file, selectors, kindConfig, onOpenFile, onClose, getFileUrl, renderPreviewThumbnail, thumbnailIsInteractive, }: AssetTreeBrowserPreviewProps<TFile>): import("react").JSX.Element;
+export interface AssetTreeBrowserRowMenuProps<TFile extends AssetTreeFileItem> extends ControllerProps<TFile> {
+    menuPos: AssetTreeMenuPosition;
+    selectors: AssetTreeSelectors<TFile>;
+    getFileUrl?: ((file: TFile) => string) | undefined;
+    onDeleteFile: (path: string) => void;
+}
+/** The open row context menu for `menuPos.path`, with every action wired. */
+export declare function AssetTreeBrowserRowMenu<TFile extends AssetTreeFileItem>({ controller, menuPos, selectors, getFileUrl, onDeleteFile, }: AssetTreeBrowserRowMenuProps<TFile>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AssetTreeBrowserParts.d.ts.map