@anvilkit/plugin-asset-manager 0.1.1

package/dist/ui/AssetBrowser.js

@@ -0,0 +1,237 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@anvilkit/ui/card";
+import { Input } from "@anvilkit/ui/input";
+import { inferAssetKind } from "../infer-kind.js";
+import * as __rspack_external_react from "react";
+const KIND_FILTERS = [
+    "image",
+    "video",
+    "audio",
+    "font",
+    "document"
+];
+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 filteredAssets = __rspack_external_react.useMemo(()=>{
+        if (!searchEnabled) return assets;
+        const lower = query.trim().toLowerCase();
+        return assets.filter((asset)=>{
+            if (activeKinds.length > 0) {
+                if (!activeKinds.includes(inferAssetKind(asset))) return false;
+            }
+            if ("" === lower) return true;
+            if (asset.id.toLowerCase().includes(lower)) return true;
+            if (asset.name?.toLowerCase().includes(lower)) return true;
+            if (asset.meta?.mimeType?.toLowerCase().includes(lower)) return true;
+            if (asset.tags?.some((tag)=>tag.toLowerCase().includes(lower))) return true;
+            return false;
+        });
+    }, [
+        assets,
+        activeKinds,
+        query,
+        searchEnabled
+    ]);
+    const visibleSlice = __rspack_external_react.useMemo(()=>searchEnabled ? filteredAssets.slice(0, pageLimit) : filteredAssets, [
+        filteredAssets,
+        pageLimit,
+        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);
+        setActiveIndex((currentIndex)=>currentIndex >= 0 && currentIndex < total ? currentIndex : 0);
+    }, [
+        total
+    ]);
+    function moveFocus(nextIndex) {
+        if (0 === total) return;
+        const clampedIndex = Math.max(0, Math.min(nextIndex, total - 1));
+        setActiveIndex(clampedIndex);
+        if (isVirtualized && scrollContainerRef.current) {
+            const targetTop = clampedIndex * itemHeight;
+            const targetBottom = targetTop + itemHeight;
+            const viewTop = scrollContainerRef.current.scrollTop;
+            const viewBottom = viewTop + maxHeight;
+            if (targetTop < viewTop) scrollContainerRef.current.scrollTop = targetTop;
+            else if (targetBottom > viewBottom) scrollContainerRef.current.scrollTop = targetBottom - maxHeight;
+            queueMicrotask(()=>{
+                buttonRefs.current[clampedIndex]?.focus();
+            });
+            return;
+        }
+        buttonRefs.current[clampedIndex]?.focus();
+    }
+    function toggleKind(kind) {
+        setActiveKinds((current)=>current.includes(kind) ? current.filter((entry)=>entry !== kind) : [
+                ...current,
+                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", {
+            "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;
+            },
+            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;
+    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))));
+    }
+    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", {
+        "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)=>{
+            setScrollTop(event.currentTarget.scrollTop);
+        },
+        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", {
+        "data-asset-action": "load-more",
+        onClick: ()=>{
+            setPageLimit((current)=>current + pageSize);
+        },
+        type: "button"
+    }, "Load more") : null));
+}
+export { AssetBrowser };

package/dist/ui/AssetCommandPalette.cjs

@@ -0,0 +1,135 @@
+"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__.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__, {
+    AssetCommandPalette: ()=>AssetCommandPalette
+});
+const dialog_namespaceObject = require("@anvilkit/ui/dialog");
+const input_namespaceObject = require("@anvilkit/ui/input");
+const external_react_namespaceObject = require("react");
+const external_infer_kind_cjs_namespaceObject = require("../infer-kind.cjs");
+const DEFAULT_MAX_RESULTS = 20;
+function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResults = DEFAULT_MAX_RESULTS }) {
+    const [query, setQuery] = external_react_namespaceObject.useState("");
+    const [results, setResults] = external_react_namespaceObject.useState([]);
+    const [activeIndex, setActiveIndex] = external_react_namespaceObject.useState(0);
+    const inputRef = external_react_namespaceObject.useRef(null);
+    const listRef = external_react_namespaceObject.useRef(null);
+    const refresh = external_react_namespaceObject.useCallback((nextQuery)=>{
+        const page = registry.search({
+            query: nextQuery,
+            limit: maxResults
+        });
+        setResults(page.items);
+        setActiveIndex(0);
+    }, [
+        registry,
+        maxResults
+    ]);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!open) return;
+        refresh(query);
+        const unsubscribe = registry.subscribe(()=>{
+            refresh(query);
+        });
+        return unsubscribe;
+    }, [
+        open,
+        query,
+        registry,
+        refresh
+    ]);
+    external_react_namespaceObject.useEffect(()=>{
+        if (!open) return;
+        setQuery("");
+        queueMicrotask(()=>{
+            inputRef.current?.focus();
+        });
+    }, [
+        open
+    ]);
+    function handleKeyDown(event) {
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            setActiveIndex((current)=>0 === results.length ? 0 : Math.min(current + 1, results.length - 1));
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            setActiveIndex((current)=>Math.max(current - 1, 0));
+            return;
+        }
+        if ("Enter" === event.key) {
+            event.preventDefault();
+            const picked = results[activeIndex];
+            if (void 0 !== picked) {
+                onSelect(picked);
+                onOpenChange(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",
+        onChange: (event)=>{
+            setQuery(event.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: "Type to search…",
+        ref: inputRef,
+        value: query
+    }), /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+        "aria-label": "Asset results",
+        "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", {
+            "aria-selected": index === activeIndex,
+            key: asset.id,
+            role: "option"
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
+            "aria-label": `Insert asset ${asset.id}`,
+            "data-active": index === activeIndex ? "true" : void 0,
+            onClick: ()=>{
+                onSelect(asset);
+                onOpenChange(false);
+            },
+            onMouseEnter: ()=>{
+                setActiveIndex(index);
+            },
+            type: "button"
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("span", null, asset.name ?? asset.id), /*#__PURE__*/ external_react_namespaceObject.createElement("span", null, asset.meta?.mimeType ?? (0, external_infer_kind_cjs_namespaceObject.inferAssetKind)(asset))))))));
+}
+exports.AssetCommandPalette = __webpack_exports__.AssetCommandPalette;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "AssetCommandPalette"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/AssetCommandPalette.d.cts

@@ -0,0 +1,21 @@
+import type { AssetRegistry, UploadResult } from "../types.js";
+export interface AssetCommandPaletteProps {
+    /** Registry the palette searches against. */
+    readonly registry: AssetRegistry;
+    /** When `true`, the palette is shown. The host owns this state. */
+    readonly open: boolean;
+    /** Called when the palette is dismissed (Esc, click outside, after pick). */
+    readonly onOpenChange: (open: boolean) => void;
+    /**
+     * Invoked when a result is selected. The host typically calls
+     * `onAssetInserted` and closes the palette.
+     */
+    readonly onSelect: (asset: UploadResult) => void;
+    /**
+     * Maximum number of results rendered. Defaults to 20 — enough to
+     * surface relevant matches without ballooning the dialog height.
+     */
+    readonly maxResults?: number;
+}
+export declare function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResults, }: AssetCommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AssetCommandPalette.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCommandPalette.d.cts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE/D,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,2CAmH1B"}

package/dist/ui/AssetCommandPalette.d.ts

@@ -0,0 +1,21 @@
+import type { AssetRegistry, UploadResult } from "../types.js";
+export interface AssetCommandPaletteProps {
+    /** Registry the palette searches against. */
+    readonly registry: AssetRegistry;
+    /** When `true`, the palette is shown. The host owns this state. */
+    readonly open: boolean;
+    /** Called when the palette is dismissed (Esc, click outside, after pick). */
+    readonly onOpenChange: (open: boolean) => void;
+    /**
+     * Invoked when a result is selected. The host typically calls
+     * `onAssetInserted` and closes the palette.
+     */
+    readonly onSelect: (asset: UploadResult) => void;
+    /**
+     * Maximum number of results rendered. Defaults to 20 — enough to
+     * surface relevant matches without ballooning the dialog height.
+     */
+    readonly maxResults?: number;
+}
+export declare function AssetCommandPalette({ registry, open, onOpenChange, onSelect, maxResults, }: AssetCommandPaletteProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=AssetCommandPalette.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AssetCommandPalette.d.ts","sourceRoot":"","sources":["../../src/ui/AssetCommandPalette.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAE/D,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,2CAmH1B"}

package/dist/ui/AssetCommandPalette.js

@@ -0,0 +1,101 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
+import { Input } from "@anvilkit/ui/input";
+import { inferAssetKind } from "../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 [query, setQuery] = __rspack_external_react.useState("");
+    const [results, setResults] = __rspack_external_react.useState([]);
+    const [activeIndex, setActiveIndex] = __rspack_external_react.useState(0);
+    const inputRef = __rspack_external_react.useRef(null);
+    const listRef = __rspack_external_react.useRef(null);
+    const refresh = __rspack_external_react.useCallback((nextQuery)=>{
+        const page = registry.search({
+            query: nextQuery,
+            limit: maxResults
+        });
+        setResults(page.items);
+        setActiveIndex(0);
+    }, [
+        registry,
+        maxResults
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        if (!open) return;
+        refresh(query);
+        const unsubscribe = registry.subscribe(()=>{
+            refresh(query);
+        });
+        return unsubscribe;
+    }, [
+        open,
+        query,
+        registry,
+        refresh
+    ]);
+    __rspack_external_react.useEffect(()=>{
+        if (!open) return;
+        setQuery("");
+        queueMicrotask(()=>{
+            inputRef.current?.focus();
+        });
+    }, [
+        open
+    ]);
+    function handleKeyDown(event) {
+        if ("ArrowDown" === event.key) {
+            event.preventDefault();
+            setActiveIndex((current)=>0 === results.length ? 0 : Math.min(current + 1, results.length - 1));
+            return;
+        }
+        if ("ArrowUp" === event.key) {
+            event.preventDefault();
+            setActiveIndex((current)=>Math.max(current - 1, 0));
+            return;
+        }
+        if ("Enter" === event.key) {
+            event.preventDefault();
+            const picked = results[activeIndex];
+            if (void 0 !== picked) {
+                onSelect(picked);
+                onOpenChange(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",
+        onChange: (event)=>{
+            setQuery(event.target.value);
+        },
+        onKeyDown: handleKeyDown,
+        placeholder: "Type to search…",
+        ref: inputRef,
+        value: query
+    }), /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+        "aria-label": "Asset results",
+        "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", {
+            "aria-selected": index === activeIndex,
+            key: asset.id,
+            role: "option"
+        }, /*#__PURE__*/ __rspack_external_react.createElement("button", {
+            "aria-label": `Insert asset ${asset.id}`,
+            "data-active": index === activeIndex ? "true" : void 0,
+            onClick: ()=>{
+                onSelect(asset);
+                onOpenChange(false);
+            },
+            onMouseEnter: ()=>{
+                setActiveIndex(index);
+            },
+            type: "button"
+        }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.name ?? asset.id), /*#__PURE__*/ __rspack_external_react.createElement("span", null, asset.meta?.mimeType ?? inferAssetKind(asset))))))));
+}
+export { AssetCommandPalette };