@jini-ai/ui 0.5.4 → 0.5.6

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

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

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useT } from '../../../i18n/index.js';
+import { EMPTY_TOOLBAR_ACTIONS } from '../../constants.js';
+import { basenameForRename, canCopyLocalPath, countFilesUnderDir, resolveKindConfig } from '../../rules.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';
+/** Breadcrumbs (root label defaults to `t('Files')`) plus the host toolbar. */
+export function AssetTreeBrowserTopbar({ currentDir, rootLabel, onNavigate, toolbarActions = EMPTY_TOOLBAR_ACTIONS, }) {
+    const t = useT();
+    return (_jsxs("div", { className: "asset-tree-topbar", children: [_jsx("div", { className: "asset-tree-topbar-left", children: _jsx(AssetTreeBreadcrumbs, { currentDir: currentDir, rootLabel: rootLabel ?? t('Files'), onNavigate: onNavigate }) }), _jsx("div", { className: "asset-tree-topbar-right", children: _jsx(AssetTreeToolbar, { actions: toolbarActions }) })] }));
+}
+/** The drop-target listing area: upload-error banner, selection bar, folders + kind sections (or the empty state), footer. */
+export function AssetTreeBrowserBody(props) {
+    const { controller, downloadFiles, footer } = props;
+    const { dragUpload, preview } = controller;
+    return (_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, _jsx(AssetTreeBrowserSelectionBar, { controller: controller, downloadFiles: downloadFiles }), _jsx(AssetTreeBrowserListing, { ...props }), footer] }));
+}
+function AssetTreeBrowserSelectionBar({ controller, downloadFiles, }) {
+    const { selection, batchActions } = controller;
+    if (selection.selected.size === 0)
+        return null;
+    return (_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 }));
+}
+function AssetTreeBrowserListing({ controller, files, folders, selectors, kindConfig, emptyStateActions = EMPTY_TOOLBAR_ACTIONS, }) {
+    const { navigation } = controller;
+    const isEmpty = files.length === 0 && (folders?.length ?? 0) === 0;
+    if (isEmpty)
+        return _jsx(AssetTreeEmptyState, { actions: emptyStateActions });
+    return (_jsxs(_Fragment, { children: [_jsx(AssetTreeFoldersSection, { files: files, dirs: navigation.dirsAtCurrentDir, currentDir: navigation.currentDir, onNavigate: navigation.setCurrentDir }, "folders"), navigation.sections.map((section) => (_jsx(AssetTreeKindSection, { controller: controller, section: section, selectors: selectors, kindConfig: kindConfig }, `kind:${section.kind}`)))] }));
+}
+function AssetTreeFoldersSection({ files, dirs, currentDir, onNavigate, }) {
+    const t = useT();
+    if (dirs.length === 0)
+        return null;
+    return (_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: dirs.length })] }), dirs.map((dirName) => {
+                const fullPath = currentDir === '' ? dirName : `${currentDir}/${dirName}`;
+                return (_jsx(AssetTreeFolderRow, { name: dirName, path: fullPath, fileCount: countFilesUnderDir(files, fullPath), onNavigate: onNavigate }, fullPath));
+            })] }));
+}
+function AssetTreeKindSection({ controller, section, selectors, kindConfig, }) {
+    const t = useT();
+    const { navigation, preview, selection, rename, rowMenu, openPath } = controller;
+    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)))] }));
+}
+/** `FilePreviewPane` for the previewed `file`, with its kind display config resolved. */
+export function AssetTreeBrowserPreview({ file, selectors, kindConfig, onOpenFile, onClose, getFileUrl, renderPreviewThumbnail, thumbnailIsInteractive, }) {
+    const t = useT();
+    const previewKindConfig = resolveKindConfig(selectors.getKind(file), kindConfig);
+    return (_jsx(FilePreviewPane, { file: file, path: file.path, kindLabel: t(previewKindConfig.label), kindGlyph: previewKindConfig.glyph, size: selectors.getSize(file), modifiedAt: selectors.getModifiedAt(file), onOpen: () => onOpenFile(file), onClose: onClose, downloadHref: getFileUrl?.(file), renderThumbnail: renderPreviewThumbnail, thumbnailIsInteractive: thumbnailIsInteractive }));
+}
+/** The open row context menu for `menuPos.path`, with every action wired. */
+export function AssetTreeBrowserRowMenu({ controller, menuPos, selectors, getFileUrl, onDeleteFile, }) {
+    const { navigation, rowMenu, rename, copyLocalPath, findFile, openPath } = controller;
+    const { path } = menuPos;
+    const menuFile = findFile(path) ?? null;
+    return (_jsx(AssetTreeRowMenu, { path: path, displayName: basenameForRename(path, navigation.currentDir), top: menuPos.top, left: menuPos.left, containerRef: rowMenu.containerRef, canCopyLocalPath: !!menuFile && canCopyLocalPath(menuFile, selectors), copied: copyLocalPath.copiedPath === path, download: getFileUrl && menuFile ? { href: getFileUrl(menuFile), onClick: rowMenu.closeMenu } : undefined, onOpen: () => {
+            rowMenu.closeMenu();
+            openPath(path);
+        }, onRename: () => {
+            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: () => {
+            // `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: () => {
+            rowMenu.closeMenu();
+            onDeleteFile(path);
+        } }));
+}
+//# sourceMappingURL=AssetTreeBrowserParts.js.map

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

@@ -0,0 +1,56 @@
+import type { AssetTreeDependencies } from '../../ports.js';
+import type { AssetTreeFileItem, AssetTreeFolderItem, AssetTreeNavState, AssetTreeSelectors } from '../../types.js';
+import { type UseAssetTreeBatchActionsResult } from '../hooks/useAssetTreeBatchActions.js';
+import { type UseAssetTreeCopyLocalPathResult } from '../hooks/useAssetTreeCopyLocalPath.js';
+import { type UseAssetTreeDragUploadResult } from '../hooks/useAssetTreeDragUpload.js';
+import { useAssetTreeNavigation, type UseAssetTreeNavigationResult } from '../hooks/useAssetTreeNavigation.js';
+import { useAssetTreePreview, type UseAssetTreePreviewResult } from '../hooks/useAssetTreePreview.js';
+import { useAssetTreeRename, type UseAssetTreeRenameResult } from '../hooks/useAssetTreeRename.js';
+import { type UseAssetTreeRowMenuResult } from '../hooks/useAssetTreeRowMenu.js';
+import { useAssetTreeSelection, type UseAssetTreeSelectionResult } from '../hooks/useAssetTreeSelection.js';
+/** The `AssetTreeBrowser` props every controller run needs. */
+export interface AssetTreeBrowserControllerInput<TFile extends AssetTreeFileItem> {
+    files: TFile[];
+    selectors: AssetTreeSelectors<TFile>;
+    onOpenFile: (file: TFile) => void;
+    onRenameFile: (path: string, nextPath: string) => Promise<TFile | null> | TFile | null;
+    onDeleteFiles: (paths: string[]) => Promise<void> | void;
+    onUploadFiles: (files: File[]) => void;
+}
+/** The optional `AssetTreeBrowser` props the controller consumes, with the same defaults the component documents. */
+export interface AssetTreeBrowserControllerOptions<TFile extends AssetTreeFileItem> {
+    folders?: AssetTreeFolderItem[];
+    sectionOrder?: readonly string[];
+    dependencies?: AssetTreeDependencies;
+    navState?: AssetTreeNavState;
+    onNavStateChange?: (state: AssetTreeNavState) => void;
+    onSelectionChange?: (paths: Set<string>) => void;
+    downloadFiles?: (paths: string[]) => Promise<{
+        blob: Blob;
+        filename: string;
+    }>;
+    selectInitialPreviewFile?: (files: TFile[]) => TFile | null;
+    useAssetTreeNavigation?: typeof useAssetTreeNavigation;
+    useAssetTreePreview?: typeof useAssetTreePreview;
+    useAssetTreeRename?: typeof useAssetTreeRename;
+    useAssetTreeSelection?: typeof useAssetTreeSelection;
+}
+export interface AssetTreeBrowserController<TFile> {
+    navigation: UseAssetTreeNavigationResult<TFile>;
+    preview: UseAssetTreePreviewResult<TFile>;
+    rename: UseAssetTreeRenameResult;
+    selection: UseAssetTreeSelectionResult;
+    rowMenu: UseAssetTreeRowMenuResult;
+    dragUpload: UseAssetTreeDragUploadResult;
+    batchActions: UseAssetTreeBatchActionsResult;
+    copyLocalPath: UseAssetTreeCopyLocalPathResult;
+    findFile: (path: string) => TFile | undefined;
+    /** Resolves `path` against `files` and opens it; a path no longer in `files` is a no-op. */
+    openPath: (path: string) => void;
+}
+/**
+ * Every hook `AssetTreeBrowser` composes, wired together in the one order
+ * their cross-references need, so the component itself is pure rendering.
+ */
+export declare function useAssetTreeBrowserController<TFile extends AssetTreeFileItem>(input: AssetTreeBrowserControllerInput<TFile>, { folders, sectionOrder, dependencies, navState, onNavStateChange, onSelectionChange, downloadFiles, selectInitialPreviewFile, useAssetTreeNavigation: useAssetTreeNavigationHook, useAssetTreePreview: useAssetTreePreviewHook, useAssetTreeRename: useAssetTreeRenameHook, useAssetTreeSelection: useAssetTreeSelectionHook, }: AssetTreeBrowserControllerOptions<TFile>): AssetTreeBrowserController<TFile>;
+//# sourceMappingURL=useAssetTreeBrowserController.d.ts.map

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

@@ -0,0 +1,80 @@
+import { useEffect, useMemo } from 'react';
+import { DEFAULT_SECTION_ORDER } from '../../constants.js';
+import { createBrowserAssetTreeDependencies } from '../../dependencies.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';
+/**
+ * Every hook `AssetTreeBrowser` composes, wired together in the one order
+ * their cross-references need, so the component itself is pure rendering.
+ */
+export function useAssetTreeBrowserController(input, { folders, sectionOrder = DEFAULT_SECTION_ORDER, dependencies, navState, onNavStateChange, onSelectionChange, downloadFiles, selectInitialPreviewFile, useAssetTreeNavigation: useAssetTreeNavigationHook = useAssetTreeNavigation, useAssetTreePreview: useAssetTreePreviewHook = useAssetTreePreview, useAssetTreeRename: useAssetTreeRenameHook = useAssetTreeRename, useAssetTreeSelection: useAssetTreeSelectionHook = useAssetTreeSelection, }) {
+    const { files, selectors, onOpenFile, onRenameFile, onDeleteFiles, onUploadFiles } = input;
+    // 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);
+    }
+    return { navigation, preview, rename, selection, rowMenu, dragUpload, batchActions, copyLocalPath, findFile, openPath };
+}
+//# sourceMappingURL=useAssetTreeBrowserController.js.map

package/dist/features/asset-tree-browser/rules.js

@@ -25,36 +25,54 @@ import { DEFAULT_KIND_GLYPH, DOUBLE_ACTIVATION_WINDOW_MS, ROW_MENU_ESTIMATED_HEI
  * this asymmetry looks surprising but is exactly what the source does.
  */
 export function deriveTreeChildren(files, folders, currentDir) {
-    const prefix = currentDir === '' ? '' : `${currentDir}/`;
+    const isRoot = currentDir === '';
+    const prefix = isRoot ? '' : `${currentDir}/`;
     const dirs = new Set();
+    const localFiles = collectFileChildren({ files, prefix, isRoot, dirs });
+    collectFolderChildren({ folders, prefix, dirs });
+    return {
+        dirsAtCurrentDir: [...dirs].sort((a, b) => a.localeCompare(b)),
+        filesAtCurrentDir: localFiles,
+    };
+}
+/** The first path component of `path` below `prefix`, or `null` when `path` is outside `prefix`. */
+function childSegment(path, prefix) {
+    if (!path.startsWith(prefix))
+        return null;
+    const remainder = path.slice(prefix.length);
+    const slashIdx = remainder.indexOf('/');
+    if (slashIdx === -1)
+        return { head: remainder, nested: false };
+    return { head: remainder.slice(0, slashIdx), nested: true };
+}
+/**
+ * File half of {@link deriveTreeChildren}: adds each nested file's top
+ * segment to `dirs` and returns the files listed at this level (every
+ * in-prefix file at the root, only one-level-deep files elsewhere).
+ */
+function collectFileChildren(input) {
     const localFiles = [];
-    for (const f of files) {
-        if (!f.path.startsWith(prefix))
+    for (const f of input.files) {
+        const segment = childSegment(f.path, input.prefix);
+        if (!segment)
             continue;
-        const remainder = f.path.slice(prefix.length);
-        const slashIdx = remainder.indexOf('/');
-        if (slashIdx === -1) {
+        if (segment.nested)
+            input.dirs.add(segment.head);
+        if (!segment.nested || input.isRoot)
             localFiles.push(f);
-        }
-        else {
-            dirs.add(remainder.slice(0, slashIdx));
-            if (currentDir === '')
-                localFiles.push(f);
-        }
     }
-    for (const folder of folders) {
-        if (!folder.path.startsWith(prefix))
+    return localFiles;
+}
+/** Folder half of {@link deriveTreeChildren}: adds each persisted folder's top segment below `prefix` to `dirs`. */
+function collectFolderChildren(input) {
+    for (const folder of input.folders) {
+        const segment = childSegment(folder.path, input.prefix);
+        if (!segment)
             continue;
-        const remainder = folder.path.slice(prefix.length);
-        if (!remainder)
+        if (!segment.nested && !segment.head)
             continue; // the current directory itself
-        const slashIdx = remainder.indexOf('/');
-        dirs.add(slashIdx === -1 ? remainder : remainder.slice(0, slashIdx));
+        input.dirs.add(segment.head);
     }
-    return {
-        dirsAtCurrentDir: [...dirs].sort((a, b) => a.localeCompare(b)),
-        filesAtCurrentDir: localFiles,
-    };
 }
 /** Total files (at every depth, not just the immediate level) under `dirPath` — what a folder row's "N files" subtitle counts. */
 export function countFilesUnderDir(files, dirPath) {