@anvilkit/plugin-asset-manager 0.1.5 → 0.1.7

package/dist/ui/AssetBrowser.js

@@ -1,8 +1,10 @@
 "use client";
+import { Button } from "@anvilkit/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@anvilkit/ui/card";
 import { Input } from "@anvilkit/ui/input";
-import { flushSync } from "react-dom";
+import { Windowed } from "@anvilkit/ui/windowed";
 import { inferAssetKind } from "../utils/infer-kind.js";
+import { ASSET_DRAG_MIME } from "./FolderTree.js";
 import * as __rspack_external_react from "react";
 const KIND_FILTERS = [
     "image",
@@ -15,20 +17,13 @@ const DEFAULT_VIRTUALIZE_THRESHOLD = 50;
 const DEFAULT_ITEM_HEIGHT = 56;
 const DEFAULT_MAX_HEIGHT = 400;
 const DEFAULT_PAGE_SIZE = 100;
-const OVERSCAN = 4;
-function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEnabled = false, pageSize = DEFAULT_PAGE_SIZE, virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD, itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight = DEFAULT_MAX_HEIGHT }) {
+function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEnabled = false, aboveFilters, draggableRows = false, pageSize = DEFAULT_PAGE_SIZE, virtualizeThreshold = DEFAULT_VIRTUALIZE_THRESHOLD, itemHeight = DEFAULT_ITEM_HEIGHT, maxHeight = DEFAULT_MAX_HEIGHT }) {
     const [activeIndex, setActiveIndex] = __rspack_external_react.useState(assets.length > 0 ? 0 : -1);
-    const [scrollTop, setScrollTop] = __rspack_external_react.useState(0);
     const [query, setQuery] = __rspack_external_react.useState("");
     const [activeKinds, setActiveKinds] = __rspack_external_react.useState([]);
     const [pageLimit, setPageLimit] = __rspack_external_react.useState(pageSize);
     const buttonRefs = __rspack_external_react.useRef([]);
-    const scrollContainerRef = __rspack_external_react.useRef(null);
-    const scrollFrameRef = __rspack_external_react.useRef(null);
-    const pendingScrollTopRef = __rspack_external_react.useRef(0);
-    __rspack_external_react.useEffect(()=>()=>{
-            if (null !== scrollFrameRef.current && "function" == typeof cancelAnimationFrame) cancelAnimationFrame(scrollFrameRef.current);
-        }, []);
+    const pendingFocusRef = __rspack_external_react.useRef(null);
     const searchIndex = __rspack_external_react.useMemo(()=>{
         if (!searchEnabled) return null;
         return assets.map((asset)=>({
@@ -68,7 +63,6 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
         searchEnabled
     ]);
     const total = visibleSlice.length;
-    const isVirtualized = total > virtualizeThreshold;
     const hasMore = searchEnabled && filteredAssets.length > visibleSlice.length;
     __rspack_external_react.useEffect(()=>{
         if (0 === total) return void setActiveIndex(-1);
@@ -76,31 +70,20 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
     }, [
         total
     ]);
+    function focusRow(index) {
+        const node = buttonRefs.current[index];
+        if (node) {
+            node.focus();
+            return true;
+        }
+        return false;
+    }
     function moveFocus(nextIndex) {
         if (0 === total) return;
         const clampedIndex = Math.max(0, Math.min(nextIndex, total - 1));
-        if (isVirtualized && scrollContainerRef.current) {
-            const targetTop = clampedIndex * itemHeight;
-            const targetBottom = targetTop + itemHeight;
-            const viewTop = scrollContainerRef.current.scrollTop;
-            let nextScrollTop = viewTop;
-            if (targetTop < viewTop) nextScrollTop = targetTop;
-            else if (targetBottom > viewTop + maxHeight) nextScrollTop = targetBottom - maxHeight;
-            if (null !== scrollFrameRef.current && "function" == typeof cancelAnimationFrame) {
-                cancelAnimationFrame(scrollFrameRef.current);
-                scrollFrameRef.current = null;
-            }
-            pendingScrollTopRef.current = nextScrollTop;
-            flushSync(()=>{
-                setActiveIndex(clampedIndex);
-                setScrollTop(nextScrollTop);
-            });
-            scrollContainerRef.current.scrollTop = nextScrollTop;
-            buttonRefs.current[clampedIndex]?.focus();
-            return;
-        }
+        pendingFocusRef.current = clampedIndex;
         setActiveIndex(clampedIndex);
-        buttonRefs.current[clampedIndex]?.focus();
+        if (focusRow(clampedIndex)) pendingFocusRef.current = null;
     }
     function toggleKind(kind) {
         setActiveKinds((current)=>current.includes(kind) ? current.filter((entry)=>entry !== kind) : [
@@ -108,17 +91,16 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
                 kind
             ]);
     }
-    const firstVisible = isVirtualized ? Math.max(0, Math.floor(scrollTop / itemHeight) - OVERSCAN) : 0;
-    const lastVisible = isVirtualized ? Math.min(total - 1, Math.ceil((scrollTop + maxHeight) / itemHeight) + OVERSCAN) : total - 1;
-    const visibleAssets = 0 === total ? [] : isVirtualized ? visibleSlice.slice(firstVisible, lastVisible + 1) : visibleSlice;
-    function renderRow(asset, index) {
-        return /*#__PURE__*/ __rspack_external_react.createElement("li", {
-            "aria-posinset": index + 1,
-            "aria-setsize": total,
-            key: asset.id,
-            role: "listitem"
-        }, /*#__PURE__*/ __rspack_external_react.createElement("button", {
+    const renderRow = (asset, index)=>/*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement("button", {
             "aria-label": `Insert asset ${asset.id}`,
+            draggable: draggableRows,
+            "data-asset-draggable": draggableRows ? "" : void 0,
+            onDragStart: draggableRows ? (event)=>{
+                event.dataTransfer.setData(ASSET_DRAG_MIME, JSON.stringify([
+                    asset.id
+                ]));
+                event.dataTransfer.effectAllowed = "move";
+            } : void 0,
             onClick: ()=>{
                 onInsert(asset);
             },
@@ -153,33 +135,42 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
             },
             ref: (node)=>{
                 buttonRefs.current[index] = node;
+                if (node && pendingFocusRef.current === index) {
+                    pendingFocusRef.current = null;
+                    node.focus();
+                }
             },
             tabIndex: activeIndex === index ? 0 : -1,
             type: "button"
-        }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.id), /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.meta?.mimeType ?? "unknown type")), void 0 !== onEdit ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.id), /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.meta?.mimeType ?? "unknown type")), void 0 !== onEdit ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
             "aria-label": `Edit asset ${asset.id}`,
             "data-asset-action": "edit",
             onClick: ()=>{
                 onEdit(asset);
             },
-            type: "button"
-        }, "Edit") : null, void 0 !== onReplace ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
+            type: "button",
+            variant: "ghost",
+            size: "sm"
+        }, "Edit") : null, void 0 !== onReplace ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
             "aria-label": `Replace asset ${asset.id}`,
             "data-asset-action": "replace",
             onClick: ()=>{
                 onReplace(asset);
             },
-            type: "button"
-        }, "Replace") : null, void 0 !== onDelete ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
+            type: "button",
+            variant: "ghost",
+            size: "sm"
+        }, "Replace") : null, void 0 !== onDelete ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
             "aria-label": `Delete asset ${asset.id}`,
             "data-asset-action": "delete",
             onClick: ()=>{
                 onDelete(asset);
             },
-            type: "button"
+            type: "button",
+            variant: "ghost",
+            size: "sm"
         }, "Delete") : null);
-    }
-    const filterRow = searchEnabled ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
+    const searchRow = searchEnabled ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-asset-manager-filters": true
     }, /*#__PURE__*/ __rspack_external_react.createElement(Input, {
         "aria-label": "Search assets",
@@ -194,7 +185,7 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
         role: "group"
     }, KIND_FILTERS.map((kind)=>{
         const active = activeKinds.includes(kind);
-        return /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        return /*#__PURE__*/ __rspack_external_react.createElement(Button, {
             "aria-label": `Filter ${kind} assets`,
             "aria-pressed": active,
             "data-asset-kind-filter": kind,
@@ -203,9 +194,12 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
                 toggleKind(kind);
                 setPageLimit(pageSize);
             },
-            type: "button"
+            type: "button",
+            variant: active ? "secondary" : "ghost",
+            size: "sm"
         }, kind);
     }))) : null;
+    const filterRow = /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, aboveFilters, searchRow);
     if (0 === total) {
         const emptyLabel = searchEnabled && ("" !== query || activeKinds.length > 0) ? "No assets match the current filters." : "No assets uploaded yet.";
         return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, "Asset browser"), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement("ul", {
@@ -215,58 +209,25 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
             role: "listitem"
         }, emptyLabel))));
     }
-    if (!isVirtualized) return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, "Asset browser"), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+    return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, "Asset browser"), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement(Windowed, {
+        activeIndex: activeIndex >= 0 ? activeIndex : void 0,
         "aria-label": "Assets",
-        role: "list"
-    }, visibleAssets.map((asset, offset)=>renderRow(asset, offset))), hasMore ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
-        "data-asset-action": "load-more",
-        onClick: ()=>{
-            setPageLimit((current)=>current + pageSize);
-        },
-        type: "button"
-    }, "Load more") : null));
-    const totalHeight = total * itemHeight;
-    const offsetY = firstVisible * itemHeight;
-    return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, "Asset browser"), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement("div", {
-        "data-asset-manager-virtual": true,
-        onScroll: (event)=>{
-            const next = event.currentTarget.scrollTop;
-            if ("function" != typeof requestAnimationFrame) return void setScrollTop(next);
-            pendingScrollTopRef.current = next;
-            if (null !== scrollFrameRef.current) return;
-            scrollFrameRef.current = requestAnimationFrame(()=>{
-                scrollFrameRef.current = null;
-                setScrollTop(pendingScrollTopRef.current);
-            });
-        },
-        ref: scrollContainerRef,
-        style: {
-            height: maxHeight,
-            overflowY: "auto",
-            position: "relative"
-        }
-    }, /*#__PURE__*/ __rspack_external_react.createElement("div", {
-        style: {
-            height: totalHeight,
-            position: "relative"
-        }
-    }, /*#__PURE__*/ __rspack_external_react.createElement("ul", {
-        "aria-label": "Assets",
-        role: "list",
-        style: {
-            margin: 0,
-            padding: 0,
-            position: "absolute",
-            top: offsetY,
-            left: 0,
-            right: 0
-        }
-    }, visibleAssets.map((asset, offset)=>renderRow(asset, firstVisible + offset))))), hasMore ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        as: "ul",
+        "data-testid": "asset-browser-virtualized",
+        estimateSize: itemHeight,
+        items: visibleSlice,
+        itemKey: (asset)=>asset.id,
+        maxHeight: maxHeight,
+        renderItem: renderRow,
+        threshold: virtualizeThreshold
+    }), hasMore ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         "data-asset-action": "load-more",
         onClick: ()=>{
             setPageLimit((current)=>current + pageSize);
         },
-        type: "button"
+        type: "button",
+        variant: "outline",
+        size: "sm"
     }, "Load more") : null));
 }
 export { AssetBrowser };

package/dist/ui/AssetCommandPalette.cjs

@@ -2,11 +2,15 @@
 "use client";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
     };
 })();
 (()=>{

package/dist/ui/AssetManagerUI.cjs

@@ -2,11 +2,15 @@
 "use client";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
     };
 })();
 (()=>{
@@ -37,7 +41,7 @@ const external_DeleteAssetDialog_cjs_namespaceObject = require("./DeleteAssetDia
 const external_MetadataPanel_cjs_namespaceObject = require("./MetadataPanel.cjs");
 const external_ReplaceAssetDialog_cjs_namespaceObject = require("./ReplaceAssetDialog.cjs");
 const external_UploadButton_cjs_namespaceObject = require("./UploadButton.cjs");
-function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlAllowlistOptIn, maxFileSize, onAssetInserted, registry, searchEnabled = true, uploader }) {
+function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, aboveFilters, dataUrlAllowlistOptIn, draggableRows, maxFileSize, onAssetInserted, registry, searchEnabled = true, uploader }) {
     const [assets, setAssets] = external_react_namespaceObject.useState(()=>registry.list());
     const [progress, setProgress] = external_react_namespaceObject.useState(null);
     const [pendingDelete, setPendingDelete] = external_react_namespaceObject.useState(null);
@@ -131,7 +135,13 @@ function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlA
         onReplace: (asset)=>{
             setPendingReplace(asset);
         },
-        searchEnabled: searchEnabled
+        searchEnabled: searchEnabled,
+        ...void 0 !== aboveFilters ? {
+            aboveFilters
+        } : {},
+        ...void 0 !== draggableRows ? {
+            draggableRows
+        } : {}
     }), /*#__PURE__*/ external_react_namespaceObject.createElement(external_DeleteAssetDialog_cjs_namespaceObject.DeleteAssetDialog, {
         asset: pendingDelete,
         onCancel: ()=>{

package/dist/ui/AssetManagerUI.d.cts

@@ -1,5 +1,13 @@
-import type { AssetManagerOptions, AssetRegistry, UploadResult } from "../types/types.js";
-export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize" | "uploader" | "dataUrlAllowlistOptIn" | "allowMixedScriptHostnames"> {
+import * as React from "react";
+import type { AssetManagerOptions } from "../types/options.js";
+import type { AssetRegistry, UploadAdapter, UploadResult } from "../types/types.js";
+export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize" | "dataUrlAllowlistOptIn" | "allowMixedScriptHostnames"> {
+    /**
+     * Binary uploader. Required at the UI boundary even though
+     * `AssetManagerOptions.uploader` is optional — the plugin passes the
+     * resolved (defaulted) uploader.
+     */
+    readonly uploader: UploadAdapter;
     readonly registry: AssetRegistry;
     readonly onAssetInserted?: (asset: UploadResult) => void;
     /**
@@ -10,6 +18,14 @@ export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "accepted
      * chrome can opt out.
      */
     readonly searchEnabled?: boolean;
+    /**
+     * Optional content rendered above the browser's filter row — e.g. a
+     * `FolderBreadcrumb` + `FolderTree` for folder navigation (PRD 0002 §7.4).
+     * The host wires these to the resolved data source / composite source.
+     */
+    readonly aboveFilters?: React.ReactNode;
+    /** Make asset rows draggable so they can be dropped onto a `FolderTree`. */
+    readonly draggableRows?: boolean;
 }
-export declare function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlAllowlistOptIn, maxFileSize, onAssetInserted, registry, searchEnabled, uploader, }: AssetManagerUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, aboveFilters, dataUrlAllowlistOptIn, draggableRows, maxFileSize, onAssetInserted, registry, searchEnabled, uploader, }: AssetManagerUIProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AssetManagerUI.d.cts.map

package/dist/ui/AssetManagerUI.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetManagerUI.d.cts","sourceRoot":"","sources":["../../src/ui/AssetManagerUI.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACX,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACX,mBAAmB,EACjB,mBAAmB,GACnB,aAAa,GACb,UAAU,GACV,uBAAuB,GACvB,2BAA2B,CAC7B;IACD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzD;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC9B,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,QAAQ,EACR,aAAoB,EACpB,QAAQ,GACR,EAAE,mBAAmB,2CAiKrB"}
+{"version":3,"file":"AssetManagerUI.d.cts","sourceRoot":"","sources":["../../src/ui/AssetManagerUI.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACX,mBAAmB,EACjB,mBAAmB,GACnB,aAAa,GACb,uBAAuB,GACvB,2BAA2B,CAC7B;IACD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzD;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC9B,iBAAiB,EACjB,yBAAyB,EACzB,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,eAAe,EACf,QAAQ,EACR,aAAoB,EACpB,QAAQ,GACR,EAAE,mBAAmB,2CAmKrB"}

package/dist/ui/AssetManagerUI.d.ts

@@ -1,5 +1,13 @@
-import type { AssetManagerOptions, AssetRegistry, UploadResult } from "../types/types.js";
-export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize" | "uploader" | "dataUrlAllowlistOptIn" | "allowMixedScriptHostnames"> {
+import * as React from "react";
+import type { AssetManagerOptions } from "../types/options.js";
+import type { AssetRegistry, UploadAdapter, UploadResult } from "../types/types.js";
+export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize" | "dataUrlAllowlistOptIn" | "allowMixedScriptHostnames"> {
+    /**
+     * Binary uploader. Required at the UI boundary even though
+     * `AssetManagerOptions.uploader` is optional — the plugin passes the
+     * resolved (defaulted) uploader.
+     */
+    readonly uploader: UploadAdapter;
     readonly registry: AssetRegistry;
     readonly onAssetInserted?: (asset: UploadResult) => void;
     /**
@@ -10,6 +18,14 @@ export interface AssetManagerUIProps extends Pick<AssetManagerOptions, "accepted
      * chrome can opt out.
      */
     readonly searchEnabled?: boolean;
+    /**
+     * Optional content rendered above the browser's filter row — e.g. a
+     * `FolderBreadcrumb` + `FolderTree` for folder navigation (PRD 0002 §7.4).
+     * The host wires these to the resolved data source / composite source.
+     */
+    readonly aboveFilters?: React.ReactNode;
+    /** Make asset rows draggable so they can be dropped onto a `FolderTree`. */
+    readonly draggableRows?: boolean;
 }
-export declare function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlAllowlistOptIn, maxFileSize, onAssetInserted, registry, searchEnabled, uploader, }: AssetManagerUIProps): import("react/jsx-runtime").JSX.Element;
+export declare function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, aboveFilters, dataUrlAllowlistOptIn, draggableRows, maxFileSize, onAssetInserted, registry, searchEnabled, uploader, }: AssetManagerUIProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AssetManagerUI.d.ts.map

package/dist/ui/AssetManagerUI.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AssetManagerUI.d.ts","sourceRoot":"","sources":["../../src/ui/AssetManagerUI.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EACX,mBAAmB,EACnB,aAAa,EACb,YAAY,EACZ,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACX,mBAAmB,EACjB,mBAAmB,GACnB,aAAa,GACb,UAAU,GACV,uBAAuB,GACvB,2BAA2B,CAC7B;IACD,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzD;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC9B,iBAAiB,EACjB,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,EACX,eAAe,EACf,QAAQ,EACR,aAAoB,EACpB,QAAQ,GACR,EAAE,mBAAmB,2CAiKrB"}
+{"version":3,"file":"AssetManagerUI.d.ts","sourceRoot":"","sources":["../../src/ui/AssetManagerUI.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EACX,aAAa,EACb,aAAa,EACb,YAAY,EACZ,MAAM,mBAAmB,CAAC;AAS3B,MAAM,WAAW,mBAChB,SAAQ,IAAI,CACX,mBAAmB,EACjB,mBAAmB,GACnB,aAAa,GACb,uBAAuB,GACvB,2BAA2B,CAC7B;IACD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACzD;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxC,4EAA4E;IAC5E,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;CACjC;AAED,wBAAgB,cAAc,CAAC,EAC9B,iBAAiB,EACjB,yBAAyB,EACzB,YAAY,EACZ,qBAAqB,EACrB,aAAa,EACb,WAAW,EACX,eAAe,EACf,QAAQ,EACR,aAAoB,EACpB,QAAQ,GACR,EAAE,mBAAmB,2CAmKrB"}

package/dist/ui/AssetManagerUI.js

@@ -9,7 +9,7 @@ import { MetadataPanel } from "./MetadataPanel.js";
 import { ReplaceAssetDialog } from "./ReplaceAssetDialog.js";
 import { UploadButton } from "./UploadButton.js";
 import * as __rspack_external_react from "react";
-function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlAllowlistOptIn, maxFileSize, onAssetInserted, registry, searchEnabled = true, uploader }) {
+function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, aboveFilters, dataUrlAllowlistOptIn, draggableRows, maxFileSize, onAssetInserted, registry, searchEnabled = true, uploader }) {
     const [assets, setAssets] = __rspack_external_react.useState(()=>registry.list());
     const [progress, setProgress] = __rspack_external_react.useState(null);
     const [pendingDelete, setPendingDelete] = __rspack_external_react.useState(null);
@@ -103,7 +103,13 @@ function AssetManagerUI({ acceptedMimeTypes, allowMixedScriptHostnames, dataUrlA
         onReplace: (asset)=>{
             setPendingReplace(asset);
         },
-        searchEnabled: searchEnabled
+        searchEnabled: searchEnabled,
+        ...void 0 !== aboveFilters ? {
+            aboveFilters
+        } : {},
+        ...void 0 !== draggableRows ? {
+            draggableRows
+        } : {}
     }), /*#__PURE__*/ __rspack_external_react.createElement(DeleteAssetDialog, {
         asset: pendingDelete,
         onCancel: ()=>{

package/dist/ui/DeleteAssetDialog.cjs

@@ -2,11 +2,15 @@
 "use client";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
     };
 })();
 (()=>{

package/dist/ui/DeleteFolderDialog.cjs

@@ -0,0 +1,78 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DeleteFolderDialog: ()=>DeleteFolderDialog
+});
+const button_namespaceObject = require("@anvilkit/ui/button");
+const dialog_namespaceObject = require("@anvilkit/ui/dialog");
+const external_react_namespaceObject = require("react");
+function DeleteFolderDialog({ folder, onConfirm, onCancel }) {
+    const [busy, setBusy] = external_react_namespaceObject.useState(false);
+    async function confirm(cascade) {
+        if (null === folder || busy) return;
+        setBusy(true);
+        try {
+            await onConfirm(folder, cascade);
+        } finally{
+            setBusy(false);
+        }
+    }
+    const open = null !== folder;
+    const assetCount = folder?.counts.assets ?? 0;
+    return /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.Dialog, {
+        open: open,
+        onOpenChange: (next)=>{
+            if (!next && !busy) onCancel();
+        }
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogContent, null, /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogHeader, null, /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogTitle, null, "Delete folder?"), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, "“", folder?.name, "” will be removed. By default its contents move up to the parent folder — nothing is deleted. Choose “Delete contents” to remove its ", assetCount, " ", 1 === assetCount ? "asset" : "assets", " too.")), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogFooter, null, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy,
+        onClick: onCancel
+    }, "Cancel"), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy || null === folder,
+        onClick: ()=>void confirm(false)
+    }, busy ? "Removing…" : "Remove folder"), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "destructive",
+        disabled: busy || null === folder,
+        onClick: ()=>void confirm(true)
+    }, "Delete contents"))));
+}
+exports.DeleteFolderDialog = __webpack_exports__.DeleteFolderDialog;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "DeleteFolderDialog"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/DeleteFolderDialog.d.cts

@@ -0,0 +1,11 @@
+import type { AssetFolder } from "../types/folders.js";
+export interface DeleteFolderDialogProps {
+    /** Folder to delete. `null` ⇒ closed. */
+    readonly folder: AssetFolder | null;
+    /** Confirm. `cascade=false` reparents children to the parent (default, safe);
+     *  `cascade=true` also deletes the descendant assets. */
+    readonly onConfirm: (folder: AssetFolder, cascade: boolean) => void | Promise<void>;
+    readonly onCancel: () => void;
+}
+export declare function DeleteFolderDialog({ folder, onConfirm, onCancel, }: DeleteFolderDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DeleteFolderDialog.d.cts.map

package/dist/ui/DeleteFolderDialog.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteFolderDialog.d.cts","sourceRoot":"","sources":["../../src/ui/DeleteFolderDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACvC,yCAAyC;IACzC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC;6DACyD;IACzD,QAAQ,CAAC,SAAS,EAAE,CACnB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,OAAO,KACZ,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,QAAQ,GACR,EAAE,uBAAuB,2CA6DzB"}

package/dist/ui/DeleteFolderDialog.d.ts

@@ -0,0 +1,11 @@
+import type { AssetFolder } from "../types/folders.js";
+export interface DeleteFolderDialogProps {
+    /** Folder to delete. `null` ⇒ closed. */
+    readonly folder: AssetFolder | null;
+    /** Confirm. `cascade=false` reparents children to the parent (default, safe);
+     *  `cascade=true` also deletes the descendant assets. */
+    readonly onConfirm: (folder: AssetFolder, cascade: boolean) => void | Promise<void>;
+    readonly onCancel: () => void;
+}
+export declare function DeleteFolderDialog({ folder, onConfirm, onCancel, }: DeleteFolderDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DeleteFolderDialog.d.ts.map

package/dist/ui/DeleteFolderDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DeleteFolderDialog.d.ts","sourceRoot":"","sources":["../../src/ui/DeleteFolderDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,uBAAuB;IACvC,yCAAyC;IACzC,QAAQ,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,CAAC;IACpC;6DACyD;IACzD,QAAQ,CAAC,SAAS,EAAE,CACnB,MAAM,EAAE,WAAW,EACnB,OAAO,EAAE,OAAO,KACZ,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1B,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,MAAM,EACN,SAAS,EACT,QAAQ,GACR,EAAE,uBAAuB,2CA6DzB"}

package/dist/ui/DeleteFolderDialog.js

@@ -0,0 +1,40 @@
+"use client";
+import { Button } from "@anvilkit/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
+import * as __rspack_external_react from "react";
+function DeleteFolderDialog({ folder, onConfirm, onCancel }) {
+    const [busy, setBusy] = __rspack_external_react.useState(false);
+    async function confirm(cascade) {
+        if (null === folder || busy) return;
+        setBusy(true);
+        try {
+            await onConfirm(folder, cascade);
+        } finally{
+            setBusy(false);
+        }
+    }
+    const open = null !== folder;
+    const assetCount = folder?.counts.assets ?? 0;
+    return /*#__PURE__*/ __rspack_external_react.createElement(Dialog, {
+        open: open,
+        onOpenChange: (next)=>{
+            if (!next && !busy) onCancel();
+        }
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, "Delete folder?"), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, "“", folder?.name, "” will be removed. By default its contents move up to the parent folder — nothing is deleted. Choose “Delete contents” to remove its ", assetCount, " ", 1 === assetCount ? "asset" : "assets", " too.")), /*#__PURE__*/ __rspack_external_react.createElement(DialogFooter, null, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy,
+        onClick: onCancel
+    }, "Cancel"), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy || null === folder,
+        onClick: ()=>void confirm(false)
+    }, busy ? "Removing…" : "Remove folder"), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "destructive",
+        disabled: busy || null === folder,
+        onClick: ()=>void confirm(true)
+    }, "Delete contents"))));
+}
+export { DeleteFolderDialog };