@anvilkit/plugin-asset-manager 0.1.6 → 0.1.8

package/dist/ui/AssetBrowser.js

@@ -1,8 +1,11 @@
 "use client";
+import { useMsg } from "@anvilkit/core/i18n";
+import { Button } from "@anvilkit/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@anvilkit/ui/card";
 import { Input } from "@anvilkit/ui/input";
 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,11 +18,121 @@ const DEFAULT_VIRTUALIZE_THRESHOLD = 50;
 const DEFAULT_ITEM_HEIGHT = 56;
 const DEFAULT_MAX_HEIGHT = 400;
 const DEFAULT_PAGE_SIZE = 100;
-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 AssetFilterRow({ query, onQueryChange, activeKinds, onToggleKind }) {
+    const msg = useMsg();
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        "data-asset-manager-filters": true
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Input, {
+        "aria-label": msg("assetManager.browser.searchLabel"),
+        onChange: (event)=>{
+            onQueryChange(event.target.value);
+        },
+        placeholder: msg("assetManager.browser.searchPlaceholder"),
+        value: query
+    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        "aria-label": msg("assetManager.browser.filterLabel"),
+        role: "group"
+    }, KIND_FILTERS.map((kind)=>{
+        const active = activeKinds.includes(kind);
+        return /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+            "aria-label": msg("assetManager.browser.filterByKind").replace("{kind}", kind),
+            "aria-pressed": active,
+            "data-asset-kind-filter": kind,
+            key: kind,
+            onClick: ()=>{
+                onToggleKind(kind);
+            },
+            type: "button",
+            variant: active ? "secondary" : "ghost",
+            size: "sm"
+        }, msg(`assetManager.kind.${kind}`));
+    })));
+}
+const AssetBrowser_AssetRow = /*#__PURE__*/ __rspack_external_react.memo(function({ asset, index, isActive, total, draggableRows, onInsert, onEdit, onReplace, onDelete, onFocusRow, onMoveFocus, registerRow }) {
+    const msg = useMsg();
+    return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, null, /*#__PURE__*/ __rspack_external_react.createElement("button", {
+        "aria-label": msg("assetManager.browser.insert").replace("{id}", 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);
+        },
+        onFocus: ()=>{
+            onFocusRow(index);
+        },
+        onKeyDown: (event)=>{
+            if ("ArrowDown" === event.key) {
+                event.preventDefault();
+                onMoveFocus(index + 1);
+                return;
+            }
+            if ("ArrowUp" === event.key) {
+                event.preventDefault();
+                onMoveFocus(index - 1);
+                return;
+            }
+            if ("Home" === event.key) {
+                event.preventDefault();
+                onMoveFocus(0);
+                return;
+            }
+            if ("End" === event.key) {
+                event.preventDefault();
+                onMoveFocus(total - 1);
+                return;
+            }
+            if ("Enter" === event.key || " " === event.key) {
+                event.preventDefault();
+                onInsert(asset);
+            }
+        },
+        ref: (node)=>{
+            registerRow(index, node);
+        },
+        tabIndex: isActive ? 0 : -1,
+        type: "button"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.id), /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.meta?.mimeType ?? msg("assetManager.browser.unknownMime"))), void 0 !== onEdit ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        "aria-label": msg("assetManager.browser.edit").replace("{id}", asset.id),
+        "data-asset-action": "edit",
+        onClick: ()=>{
+            onEdit(asset);
+        },
+        type: "button",
+        variant: "ghost",
+        size: "sm"
+    }, msg("assetManager.button.edit")) : null, void 0 !== onReplace ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        "aria-label": msg("assetManager.browser.replace").replace("{id}", asset.id),
+        "data-asset-action": "replace",
+        onClick: ()=>{
+            onReplace(asset);
+        },
+        type: "button",
+        variant: "ghost",
+        size: "sm"
+    }, msg("assetManager.button.replace")) : null, void 0 !== onDelete ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        "aria-label": msg("assetManager.browser.delete").replace("{id}", asset.id),
+        "data-asset-action": "delete",
+        onClick: ()=>{
+            onDelete(asset);
+        },
+        type: "button",
+        variant: "ghost",
+        size: "sm"
+    }, msg("assetManager.button.delete")) : null);
+});
+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 msg = useMsg();
     const [activeIndex, setActiveIndex] = __rspack_external_react.useState(assets.length > 0 ? 0 : -1);
     const [query, setQuery] = __rspack_external_react.useState("");
     const [activeKinds, setActiveKinds] = __rspack_external_react.useState([]);
-    const [pageLimit, setPageLimit] = __rspack_external_react.useState(pageSize);
+    const [extraPages, setExtraPages] = __rspack_external_react.useState(0);
+    const pageLimit = pageSize * (extraPages + 1);
     const buttonRefs = __rspack_external_react.useRef([]);
     const pendingFocusRef = __rspack_external_react.useRef(null);
     const searchIndex = __rspack_external_react.useMemo(()=>{
@@ -43,8 +156,9 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
         const lower = query.trim().toLowerCase();
         const hasKindFilter = activeKinds.length > 0;
         if ("" === lower && !hasKindFilter) return assets;
+        const activeKindSet = hasKindFilter ? new Set(activeKinds) : null;
         const result = [];
-        for (const entry of searchIndex)if (!hasKindFilter || activeKinds.includes(entry.kind)) {
+        for (const entry of searchIndex)if (!activeKindSet || activeKindSet.has(entry.kind)) {
             if ("" === lower || entry.haystack.includes(lower)) result.push(entry.asset);
         }
         return result;
@@ -62,137 +176,83 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
     ]);
     const total = visibleSlice.length;
     const hasMore = searchEnabled && filteredAssets.length > visibleSlice.length;
-    __rspack_external_react.useEffect(()=>{
-        if (0 === total) return void setActiveIndex(-1);
-        setActiveIndex((currentIndex)=>currentIndex >= 0 && currentIndex < total ? currentIndex : 0);
-    }, [
-        total
-    ]);
-    function focusRow(index) {
+    const effectiveActiveIndex = 0 === total ? -1 : activeIndex >= 0 && activeIndex < total ? activeIndex : 0;
+    const focusRow = __rspack_external_react.useCallback((index)=>{
         const node = buttonRefs.current[index];
         if (node) {
             node.focus();
             return true;
         }
         return false;
-    }
-    function moveFocus(nextIndex) {
+    }, []);
+    const moveFocus = __rspack_external_react.useCallback((nextIndex)=>{
         if (0 === total) return;
         const clampedIndex = Math.max(0, Math.min(nextIndex, total - 1));
         pendingFocusRef.current = clampedIndex;
         setActiveIndex(clampedIndex);
         if (focusRow(clampedIndex)) pendingFocusRef.current = null;
-    }
-    function toggleKind(kind) {
+    }, [
+        total,
+        focusRow
+    ]);
+    const registerRow = __rspack_external_react.useCallback((index, node)=>{
+        buttonRefs.current[index] = node;
+        if (node && pendingFocusRef.current === index) {
+            pendingFocusRef.current = null;
+            node.focus();
+        }
+    }, []);
+    const changeQuery = __rspack_external_react.useCallback((value)=>{
+        setQuery(value);
+        setExtraPages(0);
+    }, []);
+    const toggleKind = __rspack_external_react.useCallback((kind)=>{
         setActiveKinds((current)=>current.includes(kind) ? current.filter((entry)=>entry !== kind) : [
                 ...current,
                 kind
             ]);
-    }
-    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);
-            },
-            onFocus: ()=>{
-                setActiveIndex(index);
-            },
-            onKeyDown: (event)=>{
-                if ("ArrowDown" === event.key) {
-                    event.preventDefault();
-                    moveFocus(index + 1);
-                    return;
-                }
-                if ("ArrowUp" === event.key) {
-                    event.preventDefault();
-                    moveFocus(index - 1);
-                    return;
-                }
-                if ("Home" === event.key) {
-                    event.preventDefault();
-                    moveFocus(0);
-                    return;
-                }
-                if ("End" === event.key) {
-                    event.preventDefault();
-                    moveFocus(total - 1);
-                    return;
-                }
-                if ("Enter" === event.key || " " === event.key) {
-                    event.preventDefault();
-                    onInsert(asset);
-                }
-            },
-            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", {
-            "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", {
-            "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", {
-            "aria-label": `Delete asset ${asset.id}`,
-            "data-asset-action": "delete",
-            onClick: ()=>{
-                onDelete(asset);
-            },
-            type: "button"
-        }, "Delete") : null);
-    const filterRow = searchEnabled ? /*#__PURE__*/ __rspack_external_react.createElement("div", {
-        "data-asset-manager-filters": true
-    }, /*#__PURE__*/ __rspack_external_react.createElement(Input, {
-        "aria-label": "Search assets",
-        onChange: (event)=>{
-            setQuery(event.target.value);
-            setPageLimit(pageSize);
-        },
-        placeholder: "Search by name, tag, or MIME",
-        value: query
-    }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
-        "aria-label": "Asset kind filters",
-        role: "group"
-    }, KIND_FILTERS.map((kind)=>{
-        const active = activeKinds.includes(kind);
-        return /*#__PURE__*/ __rspack_external_react.createElement("button", {
-            "aria-label": `Filter ${kind} assets`,
-            "aria-pressed": active,
-            "data-asset-kind-filter": kind,
-            key: kind,
-            onClick: ()=>{
-                toggleKind(kind);
-                setPageLimit(pageSize);
-            },
-            type: "button"
-        }, kind);
-    }))) : null;
+        setExtraPages(0);
+    }, []);
+    const renderRow = __rspack_external_react.useCallback((asset, index)=>/*#__PURE__*/ __rspack_external_react.createElement(AssetBrowser_AssetRow, {
+            asset: asset,
+            draggableRows: draggableRows,
+            index: index,
+            isActive: effectiveActiveIndex === index,
+            onDelete: onDelete,
+            onEdit: onEdit,
+            onFocusRow: setActiveIndex,
+            onInsert: onInsert,
+            onMoveFocus: moveFocus,
+            onReplace: onReplace,
+            registerRow: registerRow,
+            total: total
+        }), [
+        draggableRows,
+        effectiveActiveIndex,
+        moveFocus,
+        onDelete,
+        onEdit,
+        onInsert,
+        onReplace,
+        registerRow,
+        total
+    ]);
+    const searchRow = searchEnabled ? /*#__PURE__*/ __rspack_external_react.createElement(AssetFilterRow, {
+        activeKinds: activeKinds,
+        onQueryChange: changeQuery,
+        onToggleKind: toggleKind,
+        query: query
+    }) : 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", {
-            "aria-label": "Assets",
-            role: "list"
-        }, /*#__PURE__*/ __rspack_external_react.createElement("li", {
-            role: "listitem"
-        }, emptyLabel))));
+        const emptyLabel = searchEnabled && ("" !== query || activeKinds.length > 0) ? msg("assetManager.browser.emptyFiltered") : msg("assetManager.browser.empty");
+        return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, msg("assetManager.browser.title")), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, msg("assetManager.browser.subtitle"))), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+            "aria-label": msg("assetManager.browser.assetsLabel")
+        }, /*#__PURE__*/ __rspack_external_react.createElement("li", null, emptyLabel))));
     }
-    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",
+    return /*#__PURE__*/ __rspack_external_react.createElement(Card, null, /*#__PURE__*/ __rspack_external_react.createElement(CardHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(CardTitle, null, msg("assetManager.browser.title")), /*#__PURE__*/ __rspack_external_react.createElement(CardDescription, null, msg("assetManager.browser.subtitle"))), /*#__PURE__*/ __rspack_external_react.createElement(CardContent, null, filterRow, /*#__PURE__*/ __rspack_external_react.createElement(Windowed, {
+        activeIndex: effectiveActiveIndex >= 0 ? effectiveActiveIndex : void 0,
+        "aria-label": msg("assetManager.browser.assetsLabel"),
         as: "ul",
         "data-testid": "asset-browser-virtualized",
         estimateSize: itemHeight,
@@ -201,12 +261,14 @@ function AssetBrowser({ assets, onInsert, onDelete, onReplace, onEdit, searchEna
         maxHeight: maxHeight,
         renderItem: renderRow,
         threshold: virtualizeThreshold
-    }), hasMore ? /*#__PURE__*/ __rspack_external_react.createElement("button", {
+    }), hasMore ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         "data-asset-action": "load-more",
         onClick: ()=>{
-            setPageLimit((current)=>current + pageSize);
+            setExtraPages((current)=>current + 1);
         },
-        type: "button"
-    }, "Load more") : null));
+        type: "button",
+        variant: "outline",
+        size: "sm"
+    }, msg("assetManager.button.loadMore")) : null));
 }
 export { AssetBrowser };

package/dist/ui/AssetCommandPalette.cjs

@@ -31,12 +31,14 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     AssetCommandPalette: ()=>AssetCommandPalette
 });
+const i18n_namespaceObject = require("@anvilkit/core/i18n");
 const dialog_namespaceObject = require("@anvilkit/ui/dialog");
 const input_namespaceObject = require("@anvilkit/ui/input");
 const external_react_namespaceObject = require("react");
 const infer_kind_cjs_namespaceObject = require("../utils/infer-kind.cjs");
 const DEFAULT_MAX_RESULTS = 20;
 function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResults = DEFAULT_MAX_RESULTS }) {
+    const msg = (0, i18n_namespaceObject.useMsg)();
     const [query, setQuery] = external_react_namespaceObject.useState("");
     const [results, setResults] = external_react_namespaceObject.useState([]);
     const [activeIndex, setActiveIndex] = external_react_namespaceObject.useState(0);
@@ -53,17 +55,21 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
         registry,
         maxResults
     ]);
-    const queryRef = external_react_namespaceObject.useRef(query);
-    queryRef.current = query;
+    const onRegistryChange = external_react_namespaceObject.useEffectEvent(()=>{
+        refresh(query);
+    });
     external_react_namespaceObject.useEffect(()=>{
         if (!open) return;
-        setQuery("");
         queueMicrotask(()=>{
             inputRef.current?.focus();
         });
     }, [
         open
     ]);
+    function emitOpenChange(nextOpen) {
+        if (!nextOpen) setQuery("");
+        onOpenChange(nextOpen);
+    }
     external_react_namespaceObject.useEffect(()=>{
         if (!open) return;
         refresh(query);
@@ -74,14 +80,10 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
     ]);
     external_react_namespaceObject.useEffect(()=>{
         if (!open) return;
-        const unsubscribe = registry.subscribe(()=>{
-            refresh(queryRef.current);
-        });
-        return unsubscribe;
+        return registry.subscribe(onRegistryChange);
     }, [
         open,
-        registry,
-        refresh
+        registry
     ]);
     function handleKeyDown(event) {
         if ("ArrowDown" === event.key) {
@@ -99,39 +101,39 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
             const picked = results[activeIndex];
             if (void 0 !== picked) {
                 onSelect(picked);
-                onOpenChange(false);
+                emitOpenChange(false);
             }
         }
     }
     return /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.Dialog, {
         open: open,
-        onOpenChange: onOpenChange
-    }, /*#__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, "Find an asset"), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, "Search by name, id, MIME type, or tag.")), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
-        "aria-label": "Asset search query",
+        onOpenChange: emitOpenChange
+    }, /*#__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, msg("assetManager.palette.title")), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, msg("assetManager.palette.subtitle"))), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
+        "aria-label": msg("assetManager.palette.searchLabel"),
         onChange: (event)=>{
             setQuery(event.target.value);
         },
         onKeyDown: handleKeyDown,
-        placeholder: "Type to search…",
+        placeholder: msg("assetManager.palette.searchPlaceholder"),
         ref: inputRef,
         value: query
     }), /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
-        "aria-label": "Asset results",
+        "aria-label": msg("assetManager.palette.resultsLabel"),
         "data-asset-manager-palette-results": true,
         ref: listRef,
         role: "listbox"
     }, 0 === results.length ? /*#__PURE__*/ external_react_namespaceObject.createElement("li", {
         role: "presentation"
-    }, "No matches.") : results.map((asset, index)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
+    }, msg("assetManager.palette.noMatches")) : results.map((asset, index)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
             "aria-selected": index === activeIndex,
             key: asset.id,
             role: "option"
         }, /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
-            "aria-label": `Insert asset ${asset.id}`,
+            "aria-label": msg("assetManager.browser.insert").replace("{id}", asset.id),
             "data-active": index === activeIndex ? "true" : void 0,
             onClick: ()=>{
                 onSelect(asset);
-                onOpenChange(false);
+                emitOpenChange(false);
             },
             onMouseEnter: ()=>{
                 setActiveIndex(index);

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

@@ -1 +1 @@
-{"version":3,"file":"AssetCommandPalette.d.cts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGrE,MAAM,WAAW,wBAAwB;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,mBAAmB,CAAC,EACnC,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,UAAgC,GAChC,EAAE,wBAAwB,2CAiI1B"}
+{"version":3,"file":"AssetCommandPalette.d.cts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGrE,MAAM,WAAW,wBAAwB;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,mBAAmB,CAAC,EACnC,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,UAAgC,GAChC,EAAE,wBAAwB,2CA6I1B"}

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

@@ -1 +1 @@
-{"version":3,"file":"AssetCommandPalette.d.ts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGrE,MAAM,WAAW,wBAAwB;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,mBAAmB,CAAC,EACnC,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,UAAgC,GAChC,EAAE,wBAAwB,2CAiI1B"}
+{"version":3,"file":"AssetCommandPalette.d.ts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGrE,MAAM,WAAW,wBAAwB;IACxC,6CAA6C;IAC7C,QAAQ,CAAC,QAAQ,EAAE,aAAa,CAAC;IACjC,mEAAmE;IACnE,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C;;;OAGG;IACH,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC7B;AAID,wBAAgB,mBAAmB,CAAC,EACnC,QAAQ,EACR,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,UAAgC,GAChC,EAAE,wBAAwB,2CA6I1B"}

package/dist/ui/AssetCommandPalette.js

@@ -1,10 +1,12 @@
 "use client";
+import { useMsg } from "@anvilkit/core/i18n";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
 import { Input } from "@anvilkit/ui/input";
 import { inferAssetKind } from "../utils/infer-kind.js";
 import * as __rspack_external_react from "react";
 const DEFAULT_MAX_RESULTS = 20;
 function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResults = DEFAULT_MAX_RESULTS }) {
+    const msg = useMsg();
     const [query, setQuery] = __rspack_external_react.useState("");
     const [results, setResults] = __rspack_external_react.useState([]);
     const [activeIndex, setActiveIndex] = __rspack_external_react.useState(0);
@@ -21,17 +23,21 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
         registry,
         maxResults
     ]);
-    const queryRef = __rspack_external_react.useRef(query);
-    queryRef.current = query;
+    const onRegistryChange = __rspack_external_react.useEffectEvent(()=>{
+        refresh(query);
+    });
     __rspack_external_react.useEffect(()=>{
         if (!open) return;
-        setQuery("");
         queueMicrotask(()=>{
             inputRef.current?.focus();
         });
     }, [
         open
     ]);
+    function emitOpenChange(nextOpen) {
+        if (!nextOpen) setQuery("");
+        onOpenChange(nextOpen);
+    }
     __rspack_external_react.useEffect(()=>{
         if (!open) return;
         refresh(query);
@@ -42,14 +48,10 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
     ]);
     __rspack_external_react.useEffect(()=>{
         if (!open) return;
-        const unsubscribe = registry.subscribe(()=>{
-            refresh(queryRef.current);
-        });
-        return unsubscribe;
+        return registry.subscribe(onRegistryChange);
     }, [
         open,
-        registry,
-        refresh
+        registry
     ]);
     function handleKeyDown(event) {
         if ("ArrowDown" === event.key) {
@@ -67,39 +69,39 @@ function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResult
             const picked = results[activeIndex];
             if (void 0 !== picked) {
                 onSelect(picked);
-                onOpenChange(false);
+                emitOpenChange(false);
             }
         }
     }
     return /*#__PURE__*/ __rspack_external_react.createElement(Dialog, {
         open: open,
-        onOpenChange: onOpenChange
-    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, "Find an asset"), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, "Search by name, id, MIME type, or tag.")), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
-        "aria-label": "Asset search query",
+        onOpenChange: emitOpenChange
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, msg("assetManager.palette.title")), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, msg("assetManager.palette.subtitle"))), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
+        "aria-label": msg("assetManager.palette.searchLabel"),
         onChange: (event)=>{
             setQuery(event.target.value);
         },
         onKeyDown: handleKeyDown,
-        placeholder: "Type to search…",
+        placeholder: msg("assetManager.palette.searchPlaceholder"),
         ref: inputRef,
         value: query
     }), /*#__PURE__*/ __rspack_external_react.createElement("ul", {
-        "aria-label": "Asset results",
+        "aria-label": msg("assetManager.palette.resultsLabel"),
         "data-asset-manager-palette-results": true,
         ref: listRef,
         role: "listbox"
     }, 0 === results.length ? /*#__PURE__*/ __rspack_external_react.createElement("li", {
         role: "presentation"
-    }, "No matches.") : results.map((asset, index)=>/*#__PURE__*/ __rspack_external_react.createElement("li", {
+    }, msg("assetManager.palette.noMatches")) : results.map((asset, index)=>/*#__PURE__*/ __rspack_external_react.createElement("li", {
             "aria-selected": index === activeIndex,
             key: asset.id,
             role: "option"
         }, /*#__PURE__*/ __rspack_external_react.createElement("button", {
-            "aria-label": `Insert asset ${asset.id}`,
+            "aria-label": msg("assetManager.browser.insert").replace("{id}", asset.id),
             "data-active": index === activeIndex ? "true" : void 0,
             onClick: ()=>{
                 onSelect(asset);
-                onOpenChange(false);
+                emitOpenChange(false);
             },
             onMouseEnter: ()=>{
                 setActiveIndex(index);