@anvilkit/plugin-asset-manager 0.1.5 → 0.1.6

package/README.md

@@ -1,6 +1,6 @@
 # @anvilkit/plugin-asset-manager
 
-> **Alpha (`0.1.3`).** Public surface may still shift before `v1.0`. Bundle budgets enforced in CI: headless ≤ 6 KB gzip, UI subpath ≤ 12 KB gzip.
+> **Alpha (`0.1.6`).** Public surface may still shift before `v1.0`. Bundle budgets enforced in CI: headless ≤ 6 KB gzip, UI subpath ≤ 12 KB gzip.
 
 Headless asset manager plugin for Anvilkit Studio. The host provides the upload backend; the plugin handles validation, registration, search, IR-time resolution, CSP guidance, and (optionally) a React UI for the upload + browse experience. Designed for pluggable production backends (S3, GCS, custom HTTP) with strict trust-boundary enforcement on every adapter response.
 
@@ -10,7 +10,7 @@ Headless asset manager plugin for Anvilkit Studio. The host provides the upload
 pnpm add @anvilkit/plugin-asset-manager @anvilkit/core react react-dom @puckeditor/core
 ```
 
-Non-optional peers: `react ^18.2.0 || ^19.0.0`, `react-dom ^18.2.0 || ^19.0.0`, `@puckeditor/core ^0.21.2`.
+Non-optional peers: `react >=19.0.0`, `react-dom >=19.0.0`, `@puckeditor/core ^0.21.2`.
 
 Subpath imports:
 

package/dist/adapters/data-url.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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/adapters/extract-image-dimensions.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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");
     };
 })();
 (()=>{
@@ -23,9 +27,6 @@ var __webpack_require__ = {};
 })();
 var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    extractImageDimensions: ()=>extractImageDimensions
-});
 const DEFAULT_TIMEOUT_MS = 3000;
 async function extractImageDimensions(url, mimeType, options = {}) {
     if (!mimeType || !mimeType.startsWith("image/")) return;
@@ -69,6 +70,9 @@ async function extractImageDimensions(url, mimeType, options = {}) {
         image.src = url;
     });
 }
+__webpack_require__.d(__webpack_exports__, {
+    extractImageDimensions: ()=>extractImageDimensions
+});
 exports.extractImageDimensions = __webpack_exports__.extractImageDimensions;
 for(var __rspack_i in __webpack_exports__)if (-1 === [
     "extractImageDimensions"

package/dist/adapters/in-memory.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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/adapters/s3-presigned.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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/index.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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/plugin.cjs

@@ -10,11 +10,15 @@ 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/testing/index.cjs

@@ -1,11 +1,15 @@
 "use strict";
 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/AssetBrowser.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");
     };
 })();
 (()=>{
@@ -29,8 +33,8 @@ __webpack_require__.d(__webpack_exports__, {
 });
 const card_namespaceObject = require("@anvilkit/ui/card");
 const input_namespaceObject = require("@anvilkit/ui/input");
+const windowed_namespaceObject = require("@anvilkit/ui/windowed");
 const external_react_namespaceObject = require("react");
-const external_react_dom_namespaceObject = require("react-dom");
 const infer_kind_cjs_namespaceObject = require("../utils/infer-kind.cjs");
 const KIND_FILTERS = [
     "image",
@@ -43,20 +47,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 }) {
     const [activeIndex, setActiveIndex] = external_react_namespaceObject.useState(assets.length > 0 ? 0 : -1);
-    const [scrollTop, setScrollTop] = external_react_namespaceObject.useState(0);
     const [query, setQuery] = external_react_namespaceObject.useState("");
     const [activeKinds, setActiveKinds] = external_react_namespaceObject.useState([]);
     const [pageLimit, setPageLimit] = external_react_namespaceObject.useState(pageSize);
     const buttonRefs = external_react_namespaceObject.useRef([]);
-    const scrollContainerRef = external_react_namespaceObject.useRef(null);
-    const scrollFrameRef = external_react_namespaceObject.useRef(null);
-    const pendingScrollTopRef = external_react_namespaceObject.useRef(0);
-    external_react_namespaceObject.useEffect(()=>()=>{
-            if (null !== scrollFrameRef.current && "function" == typeof cancelAnimationFrame) cancelAnimationFrame(scrollFrameRef.current);
-        }, []);
+    const pendingFocusRef = external_react_namespaceObject.useRef(null);
     const searchIndex = external_react_namespaceObject.useMemo(()=>{
         if (!searchEnabled) return null;
         return assets.map((asset)=>({
@@ -96,7 +93,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;
     external_react_namespaceObject.useEffect(()=>{
         if (0 === total) return void setActiveIndex(-1);
@@ -104,31 +100,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;
-            (0, external_react_dom_namespaceObject.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) : [
@@ -136,16 +121,7 @@ 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__*/ external_react_namespaceObject.createElement("li", {
-            "aria-posinset": index + 1,
-            "aria-setsize": total,
-            key: asset.id,
-            role: "listitem"
-        }, /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
+    const renderRow = (asset, index)=>/*#__PURE__*/ external_react_namespaceObject.createElement(external_react_namespaceObject.Fragment, null, /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
             "aria-label": `Insert asset ${asset.id}`,
             onClick: ()=>{
                 onInsert(asset);
@@ -181,6 +157,10 @@ 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"
@@ -206,7 +186,6 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
             },
             type: "button"
         }, "Delete") : null);
-    }
     const filterRow = searchEnabled ? /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
         "data-asset-manager-filters": true
     }, /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
@@ -243,53 +222,18 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
             role: "listitem"
         }, emptyLabel))));
     }
-    if (!isVirtualized) return /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.Card, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardHeader, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardTitle, null, "Asset browser"), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardContent, null, filterRow, /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+    return /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.Card, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardHeader, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardTitle, null, "Asset browser"), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardContent, null, filterRow, /*#__PURE__*/ external_react_namespaceObject.createElement(windowed_namespaceObject.Windowed, {
+        activeIndex: activeIndex >= 0 ? activeIndex : void 0,
         "aria-label": "Assets",
-        role: "list"
-    }, visibleAssets.map((asset, offset)=>renderRow(asset, offset))), hasMore ? /*#__PURE__*/ external_react_namespaceObject.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__*/ external_react_namespaceObject.createElement(card_namespaceObject.Card, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardHeader, null, /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardTitle, null, "Asset browser"), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardDescription, null, "Validated assets currently registered in memory.")), /*#__PURE__*/ external_react_namespaceObject.createElement(card_namespaceObject.CardContent, null, filterRow, /*#__PURE__*/ external_react_namespaceObject.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__*/ external_react_namespaceObject.createElement("div", {
-        style: {
-            height: totalHeight,
-            position: "relative"
-        }
-    }, /*#__PURE__*/ external_react_namespaceObject.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__*/ external_react_namespaceObject.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__*/ external_react_namespaceObject.createElement("button", {
         "data-asset-action": "load-more",
         onClick: ()=>{
             setPageLimit((current)=>current + pageSize);

package/dist/ui/AssetBrowser.d.cts

@@ -33,17 +33,16 @@ export interface AssetBrowserProps {
     /**
      * Threshold above which the list windows visible items. Below the
      * threshold the entire list renders inline so small libraries skip
-     * scroll math entirely.
+     * scroll math entirely. Forwarded to the shared `Windowed` primitive.
      */
     readonly virtualizeThreshold?: number;
     /**
      * Pixel height of a single row when virtualizing.
      *
-     * **Fixed-height contract:** the windowing math (visible range, scroll
-     * offset, and keyboard-focus scroll) assumes every row is exactly
-     * `itemHeight` tall. Rows that wrap or vary in height (long names,
-     * thumbnails) will desync the scroll position and focus calculation.
-     * Keep rows uniform, or raise `virtualizeThreshold` so the list renders
+     * **Fixed-height contract:** the windowing math assumes every row is
+     * roughly `itemHeight` tall. Rows that wrap or vary in height (long
+     * names, thumbnails) will desync the scroll-into-view calculation. Keep
+     * rows uniform, or raise `virtualizeThreshold` so the list renders
      * inline instead.
      */
     readonly itemHeight?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"AssetBrowser.d.cts","sourceRoot":"","sources":["../../src/ui/AssetBrowser.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjE,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC;;;;;;;;;OASG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAqB,EACrB,QAA4B,EAC5B,mBAAkD,EAClD,UAAgC,EAChC,SAA8B,GAC9B,EAAE,iBAAiB,2CAkZnB"}
+{"version":3,"file":"AssetBrowser.d.cts","sourceRoot":"","sources":["../../src/ui/AssetBrowser.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjE,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAOD,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAqB,EACrB,QAA4B,EAC5B,mBAAkD,EAClD,UAAgC,EAChC,SAA8B,GAC9B,EAAE,iBAAiB,2CAuSnB"}

package/dist/ui/AssetBrowser.d.ts

@@ -33,17 +33,16 @@ export interface AssetBrowserProps {
     /**
      * Threshold above which the list windows visible items. Below the
      * threshold the entire list renders inline so small libraries skip
-     * scroll math entirely.
+     * scroll math entirely. Forwarded to the shared `Windowed` primitive.
      */
     readonly virtualizeThreshold?: number;
     /**
      * Pixel height of a single row when virtualizing.
      *
-     * **Fixed-height contract:** the windowing math (visible range, scroll
-     * offset, and keyboard-focus scroll) assumes every row is exactly
-     * `itemHeight` tall. Rows that wrap or vary in height (long names,
-     * thumbnails) will desync the scroll position and focus calculation.
-     * Keep rows uniform, or raise `virtualizeThreshold` so the list renders
+     * **Fixed-height contract:** the windowing math assumes every row is
+     * roughly `itemHeight` tall. Rows that wrap or vary in height (long
+     * names, thumbnails) will desync the scroll-into-view calculation. Keep
+     * rows uniform, or raise `virtualizeThreshold` so the list renders
      * inline instead.
      */
     readonly itemHeight?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"AssetBrowser.d.ts","sourceRoot":"","sources":["../../src/ui/AssetBrowser.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjE,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC;;;;;;;;;OASG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAQD,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAqB,EACrB,QAA4B,EAC5B,mBAAkD,EAClD,UAAgC,EAChC,SAA8B,GAC9B,EAAE,iBAAiB,2CAkZnB"}
+{"version":3,"file":"AssetBrowser.d.ts","sourceRoot":"","sources":["../../src/ui/AssetBrowser.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAa,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAWjE,MAAM,WAAW,iBAAiB;IACjC,QAAQ,CAAC,MAAM,EAAE,SAAS,YAAY,EAAE,CAAC;IACzC,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;;OAIG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACnD;;;;OAIG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAChD;;;;OAIG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IACtC;;;;;;;;OAQG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,8DAA8D;IAC9D,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAOD,wBAAgB,YAAY,CAAC,EAC5B,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,MAAM,EACN,aAAqB,EACrB,QAA4B,EAC5B,mBAAkD,EAClD,UAAgC,EAChC,SAA8B,GAC9B,EAAE,iBAAiB,2CAuSnB"}

package/dist/ui/AssetBrowser.js

@@ -1,7 +1,7 @@
 "use client";
 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 * as __rspack_external_react from "react";
 const KIND_FILTERS = [
@@ -15,20 +15,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 }) {
     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 +61,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 +68,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,16 +89,7 @@ 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}`,
             onClick: ()=>{
                 onInsert(asset);
@@ -153,6 +125,10 @@ 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"
@@ -178,7 +154,6 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
             },
             type: "button"
         }, "Delete") : null);
-    }
     const filterRow = searchEnabled ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-asset-manager-filters": true
     }, /*#__PURE__*/ __rspack_external_react.createElement(Input, {
@@ -215,53 +190,18 @@ 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);