@anvilkit/plugin-asset-manager 0.1.6 → 0.1.8

package/dist/ui/MetadataPanel.js

@@ -1,9 +1,12 @@
 "use client";
+import { useMsg } from "@anvilkit/core/i18n";
 import { Button } from "@anvilkit/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
 import { Input } from "@anvilkit/ui/input";
+import { Label } from "@anvilkit/ui/label";
 import * as __rspack_external_react from "react";
 function MetadataPanel({ asset, onCancel, onConfirm }) {
+    const msg = useMsg();
     const [name, setName] = __rspack_external_react.useState("");
     const [tagInput, setTagInput] = __rspack_external_react.useState("");
     const [tags, setTags] = __rspack_external_react.useState([]);
@@ -12,8 +15,6 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
         if (null === asset) return;
         setName(asset.name ?? "");
         setTags(asset.tags ?? []);
-        setTagInput("");
-        setBusy(false);
     }, [
         asset
     ]);
@@ -54,19 +55,23 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
             setBusy(false);
         }
     }
+    function handleCancel() {
+        setTagInput("");
+        onCancel();
+    }
     function handleOpenChange(nextOpen) {
-        if (!nextOpen && !busy) onCancel();
+        if (!nextOpen && !busy) handleCancel();
     }
     const open = null !== asset;
     const mimeType = asset?.meta?.mimeType;
     return /*#__PURE__*/ __rspack_external_react.createElement(Dialog, {
         open: open,
         onOpenChange: handleOpenChange
-    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, "Edit asset"), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, asset?.id, mimeType ? ` (${mimeType})` : "")), /*#__PURE__*/ __rspack_external_react.createElement("div", {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, msg("assetManager.dialog.editTitle")), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, asset?.id, mimeType ? ` (${mimeType})` : "")), /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-asset-manager-metadata": true
-    }, /*#__PURE__*/ __rspack_external_react.createElement("label", {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Label, {
         htmlFor: "asset-metadata-name"
-    }, "Name"), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
+    }, msg("assetManager.form.nameLabel")), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
         id: "asset-metadata-name",
         value: name,
         onChange: (event)=>{
@@ -76,21 +81,22 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
         disabled: busy
     }), /*#__PURE__*/ __rspack_external_react.createElement("div", {
         "data-asset-manager-tag-editor": true
-    }, /*#__PURE__*/ __rspack_external_react.createElement("label", {
+    }, /*#__PURE__*/ __rspack_external_react.createElement(Label, {
         htmlFor: "asset-metadata-tag-input"
-    }, "Tags"), /*#__PURE__*/ __rspack_external_react.createElement("ul", {
-        "aria-label": "Current tags",
-        role: "list"
+    }, msg("assetManager.form.tagsLabel")), /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+        "aria-label": msg("assetManager.form.tagsListLabel")
     }, tags.map((tag)=>/*#__PURE__*/ __rspack_external_react.createElement("li", {
             key: tag
-        }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, tag), /*#__PURE__*/ __rspack_external_react.createElement("button", {
-            "aria-label": `Remove tag ${tag}`,
+        }, /*#__PURE__*/ __rspack_external_react.createElement("span", null, tag), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+            "aria-label": msg("assetManager.form.removeTag").replace("{tag}", tag),
             "data-asset-action": "remove-tag",
             disabled: busy,
             onClick: ()=>{
                 removeTag(tag);
             },
-            type: "button"
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs"
         }, "\xd7")))), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
         id: "asset-metadata-tag-input",
         value: tagInput,
@@ -98,17 +104,17 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
             setTagInput(event.target.value);
         },
         onKeyDown: handleTagKeyDown,
-        placeholder: "Add a tag and press Enter",
+        placeholder: msg("assetManager.form.addTagPlaceholder"),
         disabled: busy
     }))), /*#__PURE__*/ __rspack_external_react.createElement(DialogFooter, null, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         disabled: busy,
-        onClick: onCancel,
+        onClick: handleCancel,
         type: "button",
         variant: "outline"
-    }, "Cancel"), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+    }, msg("assetManager.button.cancel")), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         disabled: busy || null === asset,
         onClick: handleConfirm,
         type: "button"
-    }, busy ? "Saving…" : "Save"))));
+    }, busy ? msg("assetManager.dialog.saveProgress") : msg("assetManager.button.save")))));
 }
 export { MetadataPanel };

package/dist/ui/MoveTargetPicker.cjs

@@ -0,0 +1,87 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    MoveTargetPicker: ()=>MoveTargetPicker
+});
+const i18n_namespaceObject = require("@anvilkit/core/i18n");
+const button_namespaceObject = require("@anvilkit/ui/button");
+const dialog_namespaceObject = require("@anvilkit/ui/dialog");
+const external_react_namespaceObject = require("react");
+function MoveTargetPicker({ open, onOpenChange, folders, onPick, rootLabel }) {
+    const msg = (0, i18n_namespaceObject.useMsg)();
+    const resolvedRootLabel = rootLabel ?? msg("assetManager.folder.root");
+    const [busy, setBusy] = external_react_namespaceObject.useState(false);
+    async function pick(folderId) {
+        if (busy) return;
+        setBusy(true);
+        try {
+            await onPick(folderId);
+            onOpenChange(false);
+        } finally{
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.Dialog, {
+        open: open,
+        onOpenChange: (next)=>{
+            if (!busy) onOpenChange(next);
+        }
+    }, /*#__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.dialog.moveTitle"))), /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+        "aria-label": msg("assetManager.dialog.moveTitle"),
+        "data-testid": "ak-move-target-picker",
+        className: "flex max-h-72 flex-col gap-1 overflow-auto"
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement("li", null, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start",
+        "data-move-target": "root",
+        disabled: busy,
+        onClick: ()=>void pick(null)
+    }, resolvedRootLabel)), folders.map((folder)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
+            key: folder.id
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-start",
+            "data-move-target": folder.id,
+            disabled: busy,
+            onClick: ()=>void pick(folder.id)
+        }, folder.name))))));
+}
+exports.MoveTargetPicker = __webpack_exports__.MoveTargetPicker;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "MoveTargetPicker"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/MoveTargetPicker.d.cts

@@ -0,0 +1,16 @@
+import type { AssetFolder } from "../types/folders.js";
+/**
+ * Keyboard-accessible move-target picker — the a11y fallback for drag-to-folder.
+ * Renders, inside a focus-trapping `<Dialog>`, a labelled `<ul>` of Tab-focusable
+ * folder `<Button>`s plus a root option (no roving-tabindex listbox; each option
+ * is an individually focusable, Enter/Space-activatable button).
+ */
+export interface MoveTargetPickerProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly folders: readonly AssetFolder[];
+    readonly onPick: (folderId: string | null) => void | Promise<void>;
+    readonly rootLabel?: string;
+}
+export declare function MoveTargetPicker({ open, onOpenChange, folders, onPick, rootLabel, }: MoveTargetPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MoveTargetPicker.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoveTargetPicker.d.cts","sourceRoot":"","sources":["../../src/ui/MoveTargetPicker.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACT,EAAE,qBAAqB,2CAgEvB"}

package/dist/ui/MoveTargetPicker.d.ts

@@ -0,0 +1,16 @@
+import type { AssetFolder } from "../types/folders.js";
+/**
+ * Keyboard-accessible move-target picker — the a11y fallback for drag-to-folder.
+ * Renders, inside a focus-trapping `<Dialog>`, a labelled `<ul>` of Tab-focusable
+ * folder `<Button>`s plus a root option (no roving-tabindex listbox; each option
+ * is an individually focusable, Enter/Space-activatable button).
+ */
+export interface MoveTargetPickerProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly folders: readonly AssetFolder[];
+    readonly onPick: (folderId: string | null) => void | Promise<void>;
+    readonly rootLabel?: string;
+}
+export declare function MoveTargetPicker({ open, onOpenChange, folders, onPick, rootLabel, }: MoveTargetPickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MoveTargetPicker.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MoveTargetPicker.d.ts","sourceRoot":"","sources":["../../src/ui/MoveTargetPicker.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD;;;;;GAKG;AACH,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,YAAY,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC/C,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC,QAAQ,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACnE,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,OAAO,EACP,MAAM,EACN,SAAS,GACT,EAAE,qBAAqB,2CAgEvB"}

package/dist/ui/MoveTargetPicker.js

@@ -0,0 +1,49 @@
+"use client";
+import { useMsg } from "@anvilkit/core/i18n";
+import { Button } from "@anvilkit/ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
+import * as __rspack_external_react from "react";
+function MoveTargetPicker({ open, onOpenChange, folders, onPick, rootLabel }) {
+    const msg = useMsg();
+    const resolvedRootLabel = rootLabel ?? msg("assetManager.folder.root");
+    const [busy, setBusy] = __rspack_external_react.useState(false);
+    async function pick(folderId) {
+        if (busy) return;
+        setBusy(true);
+        try {
+            await onPick(folderId);
+            onOpenChange(false);
+        } finally{
+            setBusy(false);
+        }
+    }
+    return /*#__PURE__*/ __rspack_external_react.createElement(Dialog, {
+        open: open,
+        onOpenChange: (next)=>{
+            if (!busy) onOpenChange(next);
+        }
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, msg("assetManager.dialog.moveTitle"))), /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+        "aria-label": msg("assetManager.dialog.moveTitle"),
+        "data-testid": "ak-move-target-picker",
+        className: "flex max-h-72 flex-col gap-1 overflow-auto"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("li", null, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "ghost",
+        size: "sm",
+        className: "w-full justify-start",
+        "data-move-target": "root",
+        disabled: busy,
+        onClick: ()=>void pick(null)
+    }, resolvedRootLabel)), folders.map((folder)=>/*#__PURE__*/ __rspack_external_react.createElement("li", {
+            key: folder.id
+        }, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "w-full justify-start",
+            "data-move-target": folder.id,
+            disabled: busy,
+            onClick: ()=>void pick(folder.id)
+        }, folder.name))))));
+}
+export { MoveTargetPicker };

package/dist/ui/ReplaceAssetDialog.cjs

@@ -31,11 +31,13 @@ __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     ReplaceAssetDialog: ()=>ReplaceAssetDialog
 });
+const i18n_namespaceObject = require("@anvilkit/core/i18n");
 const button_namespaceObject = require("@anvilkit/ui/button");
 const dialog_namespaceObject = require("@anvilkit/ui/dialog");
 const external_react_namespaceObject = require("react");
 const external_plugin_cjs_namespaceObject = require("../plugin.cjs");
 function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, onConfirm }) {
+    const msg = (0, i18n_namespaceObject.useMsg)();
     const inputRef = external_react_namespaceObject.useRef(null);
     const [selectedFile, setSelectedFile] = external_react_namespaceObject.useState(null);
     const [error, setError] = external_react_namespaceObject.useState(null);
@@ -43,15 +45,10 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
     const acceptAttr = external_react_namespaceObject.useMemo(()=>acceptedMimeTypes?.join(","), [
         acceptedMimeTypes
     ]);
-    external_react_namespaceObject.useEffect(()=>{
-        if (null === asset) {
-            setSelectedFile(null);
-            setError(null);
-            setBusy(false);
-        }
-    }, [
-        asset
-    ]);
+    function resetPicker() {
+        setSelectedFile(null);
+        setError(null);
+    }
     function handleFileChange(event) {
         const file = event.target.files?.[0];
         event.target.value = "";
@@ -73,22 +70,27 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
         setBusy(true);
         try {
             await onConfirm(asset, selectedFile);
+            resetPicker();
         } catch (err) {
             setError(err instanceof Error ? err.message : String(err));
         } finally{
             setBusy(false);
         }
     }
+    function handleCancel() {
+        resetPicker();
+        onCancel();
+    }
     function handleOpenChange(nextOpen) {
-        if (!nextOpen && !busy) onCancel();
+        if (!nextOpen && !busy) handleCancel();
     }
     const open = null !== asset;
     const label = asset?.name ?? asset?.id ?? "";
     return /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.Dialog, {
         open: open,
         onOpenChange: handleOpenChange
-    }, /*#__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, "Replace asset?"), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, label ? `Pick a file to replace ${label} with. Existing asset:// references will resolve to the new bytes.` : "Pick a file to replace this asset with.")), /*#__PURE__*/ external_react_namespaceObject.createElement("input", {
-        "aria-label": "Replacement file",
+    }, /*#__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.dialog.replaceTitle")), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, label ? msg("assetManager.dialog.replaceDescription").replace("{label}", label) : msg("assetManager.dialog.replaceDescriptionGeneric"))), /*#__PURE__*/ external_react_namespaceObject.createElement("input", {
+        "aria-label": msg("assetManager.dialog.replaceFileLabel"),
         "data-testid": "replace-asset-file-input",
         hidden: true,
         onChange: handleFileChange,
@@ -104,22 +106,22 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
         variant: "outline",
         onClick: ()=>inputRef.current?.click(),
         disabled: busy
-    }, selectedFile ? "Choose a different file" : "Choose file"), /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+    }, selectedFile ? msg("assetManager.dialog.chooseFileDifferent") : msg("assetManager.dialog.chooseFile")), /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
         "aria-live": "polite",
         role: "status"
-    }, selectedFile ? `Selected: ${selectedFile.name}` : "No file selected."), error ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+    }, selectedFile ? msg("assetManager.dialog.fileSelected").replace("{name}", selectedFile.name) : msg("assetManager.dialog.noFileSelected")), error ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
         "data-asset-manager-replace-error": true,
         role: "alert"
     }, error) : null), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogFooter, null, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
         type: "button",
         variant: "outline",
-        onClick: onCancel,
+        onClick: handleCancel,
         disabled: busy
-    }, "Cancel"), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+    }, msg("assetManager.button.cancel")), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
         type: "button",
         onClick: handleConfirm,
         disabled: busy || null === asset || null === selectedFile
-    }, busy ? "Replacing…" : "Replace"))));
+    }, busy ? msg("assetManager.dialog.replaceProgress") : msg("assetManager.button.replace")))));
 }
 exports.ReplaceAssetDialog = __webpack_exports__.ReplaceAssetDialog;
 for(var __rspack_i in __webpack_exports__)if (-1 === [

package/dist/ui/ReplaceAssetDialog.d.cts

@@ -1,4 +1,5 @@
-import type { AssetManagerOptions, UploadResult } from "../types/types.js";
+import type { AssetManagerOptions } from "../types/options.js";
+import type { UploadResult } from "../types/types.js";
 export interface ReplaceAssetDialogProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize"> {
     /** Asset to replace. `null` closes the dialog. */
     readonly asset: UploadResult | null;

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

@@ -1 +1 @@
-{"version":3,"file":"ReplaceAssetDialog.d.cts","sourceRoot":"","sources":["../../src/ui/ReplaceAssetDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,uBAChB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,CAAC;IACtE,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACT,EAAE,uBAAuB,2CAuHzB"}
+{"version":3,"file":"ReplaceAssetDialog.d.cts","sourceRoot":"","sources":["../../src/ui/ReplaceAssetDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,uBAChB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,CAAC;IACtE,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACT,EAAE,uBAAuB,2CAuIzB"}

package/dist/ui/ReplaceAssetDialog.d.ts

@@ -1,4 +1,5 @@
-import type { AssetManagerOptions, UploadResult } from "../types/types.js";
+import type { AssetManagerOptions } from "../types/options.js";
+import type { UploadResult } from "../types/types.js";
 export interface ReplaceAssetDialogProps extends Pick<AssetManagerOptions, "acceptedMimeTypes" | "maxFileSize"> {
     /** Asset to replace. `null` closes the dialog. */
     readonly asset: UploadResult | null;

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

@@ -1 +1 @@
-{"version":3,"file":"ReplaceAssetDialog.d.ts","sourceRoot":"","sources":["../../src/ui/ReplaceAssetDialog.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE3E,MAAM,WAAW,uBAChB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,CAAC;IACtE,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACT,EAAE,uBAAuB,2CAuHzB"}
+{"version":3,"file":"ReplaceAssetDialog.d.ts","sourceRoot":"","sources":["../../src/ui/ReplaceAssetDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEtD,MAAM,WAAW,uBAChB,SAAQ,IAAI,CAAC,mBAAmB,EAAE,mBAAmB,GAAG,aAAa,CAAC;IACtE,kDAAkD;IAClD,QAAQ,CAAC,KAAK,EAAE,YAAY,GAAG,IAAI,CAAC;IACpC;;;;OAIG;IACH,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC9E,QAAQ,CAAC,QAAQ,EAAE,MAAM,IAAI,CAAC;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,iBAAiB,EACjB,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,GACT,EAAE,uBAAuB,2CAuIzB"}

package/dist/ui/ReplaceAssetDialog.js

@@ -1,9 +1,11 @@
 "use client";
+import { useMsg } from "@anvilkit/core/i18n";
 import { Button } from "@anvilkit/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
 import { validateSelectedFile } from "../plugin.js";
 import * as __rspack_external_react from "react";
 function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, onConfirm }) {
+    const msg = useMsg();
     const inputRef = __rspack_external_react.useRef(null);
     const [selectedFile, setSelectedFile] = __rspack_external_react.useState(null);
     const [error, setError] = __rspack_external_react.useState(null);
@@ -11,15 +13,10 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
     const acceptAttr = __rspack_external_react.useMemo(()=>acceptedMimeTypes?.join(","), [
         acceptedMimeTypes
     ]);
-    __rspack_external_react.useEffect(()=>{
-        if (null === asset) {
-            setSelectedFile(null);
-            setError(null);
-            setBusy(false);
-        }
-    }, [
-        asset
-    ]);
+    function resetPicker() {
+        setSelectedFile(null);
+        setError(null);
+    }
     function handleFileChange(event) {
         const file = event.target.files?.[0];
         event.target.value = "";
@@ -41,22 +38,27 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
         setBusy(true);
         try {
             await onConfirm(asset, selectedFile);
+            resetPicker();
         } catch (err) {
             setError(err instanceof Error ? err.message : String(err));
         } finally{
             setBusy(false);
         }
     }
+    function handleCancel() {
+        resetPicker();
+        onCancel();
+    }
     function handleOpenChange(nextOpen) {
-        if (!nextOpen && !busy) onCancel();
+        if (!nextOpen && !busy) handleCancel();
     }
     const open = null !== asset;
     const label = asset?.name ?? asset?.id ?? "";
     return /*#__PURE__*/ __rspack_external_react.createElement(Dialog, {
         open: open,
         onOpenChange: handleOpenChange
-    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, "Replace asset?"), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, label ? `Pick a file to replace ${label} with. Existing asset:// references will resolve to the new bytes.` : "Pick a file to replace this asset with.")), /*#__PURE__*/ __rspack_external_react.createElement("input", {
-        "aria-label": "Replacement file",
+    }, /*#__PURE__*/ __rspack_external_react.createElement(DialogContent, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogHeader, null, /*#__PURE__*/ __rspack_external_react.createElement(DialogTitle, null, msg("assetManager.dialog.replaceTitle")), /*#__PURE__*/ __rspack_external_react.createElement(DialogDescription, null, label ? msg("assetManager.dialog.replaceDescription").replace("{label}", label) : msg("assetManager.dialog.replaceDescriptionGeneric"))), /*#__PURE__*/ __rspack_external_react.createElement("input", {
+        "aria-label": msg("assetManager.dialog.replaceFileLabel"),
         "data-testid": "replace-asset-file-input",
         hidden: true,
         onChange: handleFileChange,
@@ -72,21 +74,21 @@ function ReplaceAssetDialog({ acceptedMimeTypes, asset, maxFileSize, onCancel, o
         variant: "outline",
         onClick: ()=>inputRef.current?.click(),
         disabled: busy
-    }, selectedFile ? "Choose a different file" : "Choose file"), /*#__PURE__*/ __rspack_external_react.createElement("p", {
+    }, selectedFile ? msg("assetManager.dialog.chooseFileDifferent") : msg("assetManager.dialog.chooseFile")), /*#__PURE__*/ __rspack_external_react.createElement("p", {
         "aria-live": "polite",
         role: "status"
-    }, selectedFile ? `Selected: ${selectedFile.name}` : "No file selected."), error ? /*#__PURE__*/ __rspack_external_react.createElement("p", {
+    }, selectedFile ? msg("assetManager.dialog.fileSelected").replace("{name}", selectedFile.name) : msg("assetManager.dialog.noFileSelected")), error ? /*#__PURE__*/ __rspack_external_react.createElement("p", {
         "data-asset-manager-replace-error": true,
         role: "alert"
     }, error) : null), /*#__PURE__*/ __rspack_external_react.createElement(DialogFooter, null, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         type: "button",
         variant: "outline",
-        onClick: onCancel,
+        onClick: handleCancel,
         disabled: busy
-    }, "Cancel"), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+    }, msg("assetManager.button.cancel")), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
         type: "button",
         onClick: handleConfirm,
         disabled: busy || null === asset || null === selectedFile
-    }, busy ? "Replacing…" : "Replace"))));
+    }, busy ? msg("assetManager.dialog.replaceProgress") : msg("assetManager.button.replace")))));
 }
 export { ReplaceAssetDialog };

package/dist/ui/UnsplashPanel.cjs

@@ -0,0 +1,137 @@
+"use strict";
+"use client";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, getters, values)=>{
+        var define = (defs, kind)=>{
+            for(var key in defs)if (__webpack_require__.o(defs, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+                enumerable: true,
+                [kind]: defs[key]
+            });
+        };
+        define(getters, "get");
+        define(values, "value");
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    UnsplashPanel: ()=>UnsplashPanel
+});
+const i18n_namespaceObject = require("@anvilkit/core/i18n");
+const button_namespaceObject = require("@anvilkit/ui/button");
+const input_namespaceObject = require("@anvilkit/ui/input");
+const external_react_namespaceObject = require("react");
+function UnsplashPanel({ themes, activeThemeId, onThemeChange, query, onQueryChange, results, status, onPick, onLoadMore, themeLabel, skeletonCount = 12 }) {
+    const msg = (0, i18n_namespaceObject.useMsg)();
+    const resolvedThemeLabel = themeLabel ?? ((key)=>msg(key));
+    if ("disabled" === status) return /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
+        role: "status",
+        "data-testid": "ak-unsplash-disabled",
+        className: "flex flex-col items-center gap-2 p-6 text-center text-sm text-[var(--ak-studio-muted-fg)]"
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement("p", null, msg("assetManager.unsplash.disabled")));
+    return /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
+        "data-testid": "ak-unsplash-panel",
+        className: "flex flex-col gap-2"
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement("span", {
+        role: "status",
+        "aria-live": "polite",
+        "data-testid": "ak-unsplash-status",
+        className: "sr-only"
+    }, "loading" === status ? msg("assetManager.unsplash.loading") : ""), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
+        value: query,
+        placeholder: msg("assetManager.unsplash.searchPlaceholder"),
+        "data-testid": "ak-unsplash-search",
+        onChange: (event)=>onQueryChange(event.currentTarget.value)
+    }), themes.length > 0 ? /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
+        role: "group",
+        "aria-label": msg("assetManager.unsplash.themesLabel"),
+        "data-testid": "ak-unsplash-themes",
+        className: "flex flex-wrap gap-1"
+    }, themes.map((theme)=>/*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+            key: theme.id,
+            type: "button",
+            size: "sm",
+            variant: theme.id === activeThemeId ? "secondary" : "ghost",
+            "aria-pressed": theme.id === activeThemeId,
+            "data-theme-id": theme.id,
+            onClick: ()=>onThemeChange(theme.id === activeThemeId ? void 0 : theme.id)
+        }, resolvedThemeLabel(theme.label)))) : null, "rateLimited" === status ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+        role: "alert",
+        "data-testid": "ak-unsplash-rate-limited",
+        className: "text-sm"
+    }, msg("assetManager.unsplash.rateLimited")) : null, "error" === status ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+        role: "alert",
+        "data-testid": "ak-unsplash-error",
+        className: "text-sm"
+    }, msg("assetManager.unsplash.error")) : null, "loading" === status && 0 === results.length ? /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+        "data-testid": "ak-unsplash-skeletons",
+        className: "grid grid-cols-3 gap-2",
+        "aria-hidden": "true"
+    }, Array.from({
+        length: skeletonCount
+    }, (_, index)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
+            key: `skeleton-${index}`,
+            className: "aspect-square animate-pulse rounded bg-[var(--ak-studio-muted,#e5e7eb)]"
+        }))) : 0 === results.length && "idle" === status ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+        "data-testid": "ak-unsplash-empty",
+        className: "p-4 text-center text-sm"
+    }, msg("assetManager.unsplash.empty")) : /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+        "data-testid": "ak-unsplash-results",
+        className: "grid grid-cols-3 gap-2"
+    }, results.map((result)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
+            key: result.id,
+            className: "flex flex-col gap-0.5"
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
+            type: "button",
+            "data-unsplash-id": result.id,
+            "aria-label": msg("assetManager.unsplash.insert").replace("{photographer}", result.photographerName),
+            className: "overflow-hidden rounded",
+            onClick: ()=>void onPick(result.id)
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("img", {
+            src: result.thumbnailUrl,
+            alt: "",
+            className: "aspect-square w-full object-cover",
+            loading: "lazy"
+        })), /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+            className: "truncate text-[10px] text-[var(--ak-studio-muted-fg)]"
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("a", {
+            href: result.photographerUrl,
+            target: "_blank",
+            rel: "noreferrer noopener",
+            className: "underline"
+        }, result.photographerName), " ", "\xb7", " ", /*#__PURE__*/ external_react_namespaceObject.createElement("a", {
+            href: result.unsplashUrl,
+            target: "_blank",
+            rel: "noreferrer noopener",
+            className: "underline"
+        }, "Unsplash"))))), onLoadMore && results.length > 0 ? /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
+        className: "flex justify-center"
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        disabled: "loading" === status,
+        onClick: onLoadMore
+    }, msg("assetManager.button.loadMore"))) : null);
+}
+exports.UnsplashPanel = __webpack_exports__.UnsplashPanel;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "UnsplashPanel"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});