@anvilkit/plugin-asset-manager 0.1.6 → 0.1.7

package/dist/ui/EmptyFolderState.cjs

@@ -0,0 +1,53 @@
+"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__, {
+    EmptyFolderState: ()=>EmptyFolderState
+});
+const button_namespaceObject = require("@anvilkit/ui/button");
+const external_react_namespaceObject = require("react");
+function EmptyFolderState({ onUpload, message = "This folder is empty." }) {
+    return /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
+        "data-testid": "ak-empty-folder",
+        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, message), onUpload ? /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: onUpload
+    }, "Drop files here or upload") : null);
+}
+exports.EmptyFolderState = __webpack_exports__.EmptyFolderState;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "EmptyFolderState"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/EmptyFolderState.d.cts

@@ -0,0 +1,6 @@
+export interface EmptyFolderStateProps {
+    readonly onUpload?: () => void;
+    readonly message?: string;
+}
+export declare function EmptyFolderState({ onUpload, message, }: EmptyFolderStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmptyFolderState.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyFolderState.d.cts","sourceRoot":"","sources":["../../src/ui/EmptyFolderState.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,QAAQ,EACR,OAAiC,GACjC,EAAE,qBAAqB,2CAcvB"}

package/dist/ui/EmptyFolderState.d.ts

@@ -0,0 +1,6 @@
+export interface EmptyFolderStateProps {
+    readonly onUpload?: () => void;
+    readonly message?: string;
+}
+export declare function EmptyFolderState({ onUpload, message, }: EmptyFolderStateProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=EmptyFolderState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyFolderState.d.ts","sourceRoot":"","sources":["../../src/ui/EmptyFolderState.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,qBAAqB;IACrC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,QAAQ,EACR,OAAiC,GACjC,EAAE,qBAAqB,2CAcvB"}

package/dist/ui/EmptyFolderState.js

@@ -0,0 +1,15 @@
+"use client";
+import { Button } from "@anvilkit/ui/button";
+import * as __rspack_external_react from "react";
+function EmptyFolderState({ onUpload, message = "This folder is empty." }) {
+    return /*#__PURE__*/ __rspack_external_react.createElement("div", {
+        "data-testid": "ak-empty-folder",
+        className: "flex flex-col items-center gap-2 p-6 text-center text-sm text-[var(--ak-studio-muted-fg)]"
+    }, /*#__PURE__*/ __rspack_external_react.createElement("p", null, message), onUpload ? /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: onUpload
+    }, "Drop files here or upload") : null);
+}
+export { EmptyFolderState };

package/dist/ui/FolderBreadcrumb.cjs

@@ -0,0 +1,73 @@
+"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__, {
+    FolderBreadcrumb: ()=>FolderBreadcrumb
+});
+const breadcrumb_namespaceObject = require("@anvilkit/ui/breadcrumb");
+const button_namespaceObject = require("@anvilkit/ui/button");
+const external_react_namespaceObject = require("react");
+function FolderBreadcrumb({ path, onNavigate, rootLabel = "All assets" }) {
+    const atRoot = 0 === path.length;
+    return /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.Breadcrumb, {
+        "aria-label": "Folders",
+        "data-testid": "ak-folder-breadcrumb"
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbList, null, /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbItem, null, atRoot ? /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbPage, {
+        "data-folder-crumb": "root"
+    }, rootLabel) : /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "link",
+        size: "sm",
+        className: "h-auto p-0",
+        "data-folder-crumb": "root",
+        onClick: ()=>onNavigate(null)
+    }, rootLabel)), path.map((folder, index)=>{
+        const isCurrent = index === path.length - 1;
+        return /*#__PURE__*/ external_react_namespaceObject.createElement(external_react_namespaceObject.Fragment, {
+            key: folder.id
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbSeparator, null), /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbItem, null, isCurrent ? /*#__PURE__*/ external_react_namespaceObject.createElement(breadcrumb_namespaceObject.BreadcrumbPage, {
+            "data-folder-crumb": folder.id
+        }, folder.name) : /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            className: "h-auto p-0",
+            "data-folder-crumb": folder.id,
+            onClick: ()=>onNavigate(folder.id)
+        }, folder.name)));
+    })));
+}
+exports.FolderBreadcrumb = __webpack_exports__.FolderBreadcrumb;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FolderBreadcrumb"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/FolderBreadcrumb.d.cts

@@ -0,0 +1,9 @@
+import type { AssetFolder } from "../types/folders.js";
+export interface FolderBreadcrumbProps {
+    /** Root → … → current folder. Empty ⇒ at root. */
+    readonly path: readonly AssetFolder[];
+    readonly onNavigate: (folderId: string | null) => void;
+    readonly rootLabel?: string;
+}
+export declare function FolderBreadcrumb({ path, onNavigate, rootLabel, }: FolderBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderBreadcrumb.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderBreadcrumb.d.cts","sourceRoot":"","sources":["../../src/ui/FolderBreadcrumb.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,qBAAqB;IACrC,kDAAkD;IAClD,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAC;IACtC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,UAAU,EACV,SAAwB,GACxB,EAAE,qBAAqB,2CAoDvB"}

package/dist/ui/FolderBreadcrumb.d.ts

@@ -0,0 +1,9 @@
+import type { AssetFolder } from "../types/folders.js";
+export interface FolderBreadcrumbProps {
+    /** Root → … → current folder. Empty ⇒ at root. */
+    readonly path: readonly AssetFolder[];
+    readonly onNavigate: (folderId: string | null) => void;
+    readonly rootLabel?: string;
+}
+export declare function FolderBreadcrumb({ path, onNavigate, rootLabel, }: FolderBreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderBreadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderBreadcrumb.d.ts","sourceRoot":"","sources":["../../src/ui/FolderBreadcrumb.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,MAAM,WAAW,qBAAqB;IACrC,kDAAkD;IAClD,QAAQ,CAAC,IAAI,EAAE,SAAS,WAAW,EAAE,CAAC;IACtC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,UAAU,EACV,SAAwB,GACxB,EAAE,qBAAqB,2CAoDvB"}

package/dist/ui/FolderBreadcrumb.js

@@ -0,0 +1,35 @@
+"use client";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@anvilkit/ui/breadcrumb";
+import { Button } from "@anvilkit/ui/button";
+import * as __rspack_external_react from "react";
+function FolderBreadcrumb({ path, onNavigate, rootLabel = "All assets" }) {
+    const atRoot = 0 === path.length;
+    return /*#__PURE__*/ __rspack_external_react.createElement(Breadcrumb, {
+        "aria-label": "Folders",
+        "data-testid": "ak-folder-breadcrumb"
+    }, /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbList, null, /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbItem, null, atRoot ? /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbPage, {
+        "data-folder-crumb": "root"
+    }, rootLabel) : /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        size: "sm",
+        className: "h-auto p-0",
+        "data-folder-crumb": "root",
+        onClick: ()=>onNavigate(null)
+    }, rootLabel)), path.map((folder, index)=>{
+        const isCurrent = index === path.length - 1;
+        return /*#__PURE__*/ __rspack_external_react.createElement(__rspack_external_react.Fragment, {
+            key: folder.id
+        }, /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbSeparator, null), /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbItem, null, isCurrent ? /*#__PURE__*/ __rspack_external_react.createElement(BreadcrumbPage, {
+            "data-folder-crumb": folder.id
+        }, folder.name) : /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+            type: "button",
+            variant: "link",
+            size: "sm",
+            className: "h-auto p-0",
+            "data-folder-crumb": folder.id,
+            onClick: ()=>onNavigate(folder.id)
+        }, folder.name)));
+    })));
+}
+export { FolderBreadcrumb };

package/dist/ui/FolderNameDialog.cjs

@@ -0,0 +1,98 @@
+"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__, {
+    FolderNameDialog: ()=>FolderNameDialog
+});
+const button_namespaceObject = require("@anvilkit/ui/button");
+const dialog_namespaceObject = require("@anvilkit/ui/dialog");
+const input_namespaceObject = require("@anvilkit/ui/input");
+const external_react_namespaceObject = require("react");
+function FolderNameDialog({ open, onOpenChange, onSubmit, title = "New folder", submitLabel = "Create", initialName = "" }) {
+    const [name, setName] = external_react_namespaceObject.useState(initialName);
+    const [busy, setBusy] = external_react_namespaceObject.useState(false);
+    const [error, setError] = external_react_namespaceObject.useState(null);
+    external_react_namespaceObject.useEffect(()=>{
+        if (open) {
+            setName(initialName);
+            setError(null);
+        }
+    }, [
+        open,
+        initialName
+    ]);
+    async function handleSubmit() {
+        const trimmed = name.trim();
+        if ("" === trimmed || busy) return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onSubmit(trimmed);
+            onOpenChange(false);
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Could not save the folder.");
+        } 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, title)), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
+        value: name,
+        placeholder: "Folder name",
+        "data-testid": "ak-folder-name-input",
+        onChange: (event)=>setName(event.currentTarget.value),
+        onKeyDown: (event)=>{
+            if ("Enter" === event.key) handleSubmit();
+        }
+    }), error ? /*#__PURE__*/ external_react_namespaceObject.createElement("p", {
+        role: "alert",
+        className: "text-sm text-[var(--ak-studio-danger-fg,#dc2626)]"
+    }, error) : null, /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogFooter, null, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy,
+        onClick: ()=>onOpenChange(false)
+    }, "Cancel"), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+        type: "button",
+        disabled: busy || "" === name.trim(),
+        onClick: ()=>void handleSubmit()
+    }, busy ? "Saving…" : submitLabel))));
+}
+exports.FolderNameDialog = __webpack_exports__.FolderNameDialog;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "FolderNameDialog"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/FolderNameDialog.d.cts

@@ -0,0 +1,14 @@
+/**
+ * One dialog for both create and rename — pass `initialName` + labels. Exported
+ * as `CreateFolderDialog` / `RenameFolderDialog` thin aliases from the barrel.
+ */
+export interface FolderNameDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly onSubmit: (name: string) => void | Promise<void>;
+    readonly title?: string;
+    readonly submitLabel?: string;
+    readonly initialName?: string;
+}
+export declare function FolderNameDialog({ open, onOpenChange, onSubmit, title, submitLabel, initialName, }: FolderNameDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderNameDialog.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderNameDialog.d.cts","sourceRoot":"","sources":["../../src/ui/FolderNameDialog.tsx"],"names":[],"mappings":"AAaA;;;GAGG;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,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,KAAoB,EACpB,WAAsB,EACtB,WAAgB,GAChB,EAAE,qBAAqB,2CA8EvB"}

package/dist/ui/FolderNameDialog.d.ts

@@ -0,0 +1,14 @@
+/**
+ * One dialog for both create and rename — pass `initialName` + labels. Exported
+ * as `CreateFolderDialog` / `RenameFolderDialog` thin aliases from the barrel.
+ */
+export interface FolderNameDialogProps {
+    readonly open: boolean;
+    readonly onOpenChange: (open: boolean) => void;
+    readonly onSubmit: (name: string) => void | Promise<void>;
+    readonly title?: string;
+    readonly submitLabel?: string;
+    readonly initialName?: string;
+}
+export declare function FolderNameDialog({ open, onOpenChange, onSubmit, title, submitLabel, initialName, }: FolderNameDialogProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=FolderNameDialog.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderNameDialog.d.ts","sourceRoot":"","sources":["../../src/ui/FolderNameDialog.tsx"],"names":[],"mappings":"AAaA;;;GAGG;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,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC1D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAC9B,QAAQ,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,wBAAgB,gBAAgB,CAAC,EAChC,IAAI,EACJ,YAAY,EACZ,QAAQ,EACR,KAAoB,EACpB,WAAsB,EACtB,WAAgB,GAChB,EAAE,qBAAqB,2CA8EvB"}

package/dist/ui/FolderNameDialog.js

@@ -0,0 +1,60 @@
+"use client";
+import { Button } from "@anvilkit/ui/button";
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@anvilkit/ui/dialog";
+import { Input } from "@anvilkit/ui/input";
+import * as __rspack_external_react from "react";
+function FolderNameDialog({ open, onOpenChange, onSubmit, title = "New folder", submitLabel = "Create", initialName = "" }) {
+    const [name, setName] = __rspack_external_react.useState(initialName);
+    const [busy, setBusy] = __rspack_external_react.useState(false);
+    const [error, setError] = __rspack_external_react.useState(null);
+    __rspack_external_react.useEffect(()=>{
+        if (open) {
+            setName(initialName);
+            setError(null);
+        }
+    }, [
+        open,
+        initialName
+    ]);
+    async function handleSubmit() {
+        const trimmed = name.trim();
+        if ("" === trimmed || busy) return;
+        setBusy(true);
+        setError(null);
+        try {
+            await onSubmit(trimmed);
+            onOpenChange(false);
+        } catch (cause) {
+            setError(cause instanceof Error ? cause.message : "Could not save the folder.");
+        } 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, title)), /*#__PURE__*/ __rspack_external_react.createElement(Input, {
+        value: name,
+        placeholder: "Folder name",
+        "data-testid": "ak-folder-name-input",
+        onChange: (event)=>setName(event.currentTarget.value),
+        onKeyDown: (event)=>{
+            if ("Enter" === event.key) handleSubmit();
+        }
+    }), error ? /*#__PURE__*/ __rspack_external_react.createElement("p", {
+        role: "alert",
+        className: "text-sm text-[var(--ak-studio-danger-fg,#dc2626)]"
+    }, error) : null, /*#__PURE__*/ __rspack_external_react.createElement(DialogFooter, null, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        variant: "outline",
+        disabled: busy,
+        onClick: ()=>onOpenChange(false)
+    }, "Cancel"), /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+        type: "button",
+        disabled: busy || "" === name.trim(),
+        onClick: ()=>void handleSubmit()
+    }, busy ? "Saving…" : submitLabel))));
+}
+export { FolderNameDialog };

package/dist/ui/FolderTree.cjs

@@ -0,0 +1,83 @@
+"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__, {
+    ASSET_DRAG_MIME: ()=>ASSET_DRAG_MIME,
+    FolderTree: ()=>FolderTree
+});
+const button_namespaceObject = require("@anvilkit/ui/button");
+const external_react_namespaceObject = require("react");
+const ASSET_DRAG_MIME = "application/x-anvilkit-assets";
+function FolderTree({ folders, currentFolderId, onNavigate, onDropAssets }) {
+    const [dropTarget, setDropTarget] = external_react_namespaceObject.useState(null);
+    const handleDrop = (folderId)=>(event)=>{
+            event.preventDefault();
+            setDropTarget(null);
+            if (void 0 === onDropAssets) return;
+            try {
+                const raw = event.dataTransfer.getData(ASSET_DRAG_MIME);
+                const assetIds = raw ? JSON.parse(raw) : [];
+                if (Array.isArray(assetIds) && assetIds.length > 0) onDropAssets(assetIds, folderId);
+            } catch  {}
+        };
+    if (0 === folders.length) return null;
+    const droppable = void 0 !== onDropAssets;
+    return /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
+        "aria-label": "Folders",
+        "data-testid": "ak-folder-tree",
+        className: "flex flex-col gap-1"
+    }, folders.map((folder)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
+            key: folder.id
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
+            type: "button",
+            variant: folder.id === currentFolderId ? "secondary" : "ghost",
+            size: "sm",
+            className: "w-full justify-start",
+            "data-folder-id": folder.id,
+            "data-drop-target": dropTarget === folder.id ? "" : void 0,
+            title: droppable ? `Open ${folder.name} — or drop assets here to move them in` : void 0,
+            onClick: ()=>onNavigate(folder.id),
+            onDragOver: onDropAssets ? (event)=>{
+                event.preventDefault();
+                setDropTarget(folder.id);
+            } : void 0,
+            onDragLeave: onDropAssets ? ()=>setDropTarget((current)=>current === folder.id ? null : current) : void 0,
+            onDrop: onDropAssets ? handleDrop(folder.id) : void 0
+        }, folder.name, " (", folder.counts.assets, ")"))));
+}
+exports.ASSET_DRAG_MIME = __webpack_exports__.ASSET_DRAG_MIME;
+exports.FolderTree = __webpack_exports__.FolderTree;
+for(var __rspack_i in __webpack_exports__)if (-1 === [
+    "ASSET_DRAG_MIME",
+    "FolderTree"
+].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/ui/FolderTree.d.cts

@@ -0,0 +1,13 @@
+import type { AssetFolder } from "../types/folders.js";
+/** dataTransfer MIME for an asset-id drag payload (native HTML5 DnD, no @dnd-kit). */
+export declare const ASSET_DRAG_MIME = "application/x-anvilkit-assets";
+export interface FolderTreeProps {
+    /** Child folders of the current folder. */
+    readonly folders: readonly AssetFolder[];
+    readonly currentFolderId: string | null;
+    readonly onNavigate: (folderId: string | null) => void;
+    /** Drop handler for an asset-id payload dragged onto a folder row. */
+    readonly onDropAssets?: (assetIds: readonly string[], folderId: string | null) => void;
+}
+export declare function FolderTree({ folders, currentFolderId, onNavigate, onDropAssets, }: FolderTreeProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FolderTree.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.d.cts","sourceRoot":"","sources":["../../src/ui/FolderTree.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,sFAAsF;AACtF,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC/B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,sEAAsE;IACtE,QAAQ,CAAC,YAAY,CAAC,EAAE,CACvB,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,KACnB,IAAI,CAAC;CACV;AAED,wBAAgB,UAAU,CAAC,EAC1B,OAAO,EACP,eAAe,EACf,UAAU,EACV,YAAY,GACZ,EAAE,eAAe,kDAoEjB"}

package/dist/ui/FolderTree.d.ts

@@ -0,0 +1,13 @@
+import type { AssetFolder } from "../types/folders.js";
+/** dataTransfer MIME for an asset-id drag payload (native HTML5 DnD, no @dnd-kit). */
+export declare const ASSET_DRAG_MIME = "application/x-anvilkit-assets";
+export interface FolderTreeProps {
+    /** Child folders of the current folder. */
+    readonly folders: readonly AssetFolder[];
+    readonly currentFolderId: string | null;
+    readonly onNavigate: (folderId: string | null) => void;
+    /** Drop handler for an asset-id payload dragged onto a folder row. */
+    readonly onDropAssets?: (assetIds: readonly string[], folderId: string | null) => void;
+}
+export declare function FolderTree({ folders, currentFolderId, onNavigate, onDropAssets, }: FolderTreeProps): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=FolderTree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FolderTree.d.ts","sourceRoot":"","sources":["../../src/ui/FolderTree.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEvD,sFAAsF;AACtF,eAAO,MAAM,eAAe,kCAAkC,CAAC;AAE/D,MAAM,WAAW,eAAe;IAC/B,2CAA2C;IAC3C,QAAQ,CAAC,OAAO,EAAE,SAAS,WAAW,EAAE,CAAC;IACzC,QAAQ,CAAC,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IACxC,QAAQ,CAAC,UAAU,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACvD,sEAAsE;IACtE,QAAQ,CAAC,YAAY,CAAC,EAAE,CACvB,QAAQ,EAAE,SAAS,MAAM,EAAE,EAC3B,QAAQ,EAAE,MAAM,GAAG,IAAI,KACnB,IAAI,CAAC;CACV;AAED,wBAAgB,UAAU,CAAC,EAC1B,OAAO,EACP,eAAe,EACf,UAAU,EACV,YAAY,GACZ,EAAE,eAAe,kDAoEjB"}

package/dist/ui/FolderTree.js

@@ -0,0 +1,42 @@
+"use client";
+import { Button } from "@anvilkit/ui/button";
+import * as __rspack_external_react from "react";
+const ASSET_DRAG_MIME = "application/x-anvilkit-assets";
+function FolderTree({ folders, currentFolderId, onNavigate, onDropAssets }) {
+    const [dropTarget, setDropTarget] = __rspack_external_react.useState(null);
+    const handleDrop = (folderId)=>(event)=>{
+            event.preventDefault();
+            setDropTarget(null);
+            if (void 0 === onDropAssets) return;
+            try {
+                const raw = event.dataTransfer.getData(ASSET_DRAG_MIME);
+                const assetIds = raw ? JSON.parse(raw) : [];
+                if (Array.isArray(assetIds) && assetIds.length > 0) onDropAssets(assetIds, folderId);
+            } catch  {}
+        };
+    if (0 === folders.length) return null;
+    const droppable = void 0 !== onDropAssets;
+    return /*#__PURE__*/ __rspack_external_react.createElement("ul", {
+        "aria-label": "Folders",
+        "data-testid": "ak-folder-tree",
+        className: "flex flex-col gap-1"
+    }, folders.map((folder)=>/*#__PURE__*/ __rspack_external_react.createElement("li", {
+            key: folder.id
+        }, /*#__PURE__*/ __rspack_external_react.createElement(Button, {
+            type: "button",
+            variant: folder.id === currentFolderId ? "secondary" : "ghost",
+            size: "sm",
+            className: "w-full justify-start",
+            "data-folder-id": folder.id,
+            "data-drop-target": dropTarget === folder.id ? "" : void 0,
+            title: droppable ? `Open ${folder.name} — or drop assets here to move them in` : void 0,
+            onClick: ()=>onNavigate(folder.id),
+            onDragOver: onDropAssets ? (event)=>{
+                event.preventDefault();
+                setDropTarget(folder.id);
+            } : void 0,
+            onDragLeave: onDropAssets ? ()=>setDropTarget((current)=>current === folder.id ? null : current) : void 0,
+            onDrop: onDropAssets ? handleDrop(folder.id) : void 0
+        }, folder.name, " (", folder.counts.assets, ")"))));
+}
+export { ASSET_DRAG_MIME, FolderTree };

package/dist/ui/MetadataPanel.cjs

@@ -34,6 +34,7 @@ __webpack_require__.d(__webpack_exports__, {
 const button_namespaceObject = require("@anvilkit/ui/button");
 const dialog_namespaceObject = require("@anvilkit/ui/dialog");
 const input_namespaceObject = require("@anvilkit/ui/input");
+const label_namespaceObject = require("@anvilkit/ui/label");
 const external_react_namespaceObject = require("react");
 function MetadataPanel({ asset, onCancel, onConfirm }) {
     const [name, setName] = external_react_namespaceObject.useState("");
@@ -96,7 +97,7 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
         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, "Edit asset"), /*#__PURE__*/ external_react_namespaceObject.createElement(dialog_namespaceObject.DialogDescription, null, asset?.id, mimeType ? ` (${mimeType})` : "")), /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
         "data-asset-manager-metadata": true
-    }, /*#__PURE__*/ external_react_namespaceObject.createElement("label", {
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement(label_namespaceObject.Label, {
         htmlFor: "asset-metadata-name"
     }, "Name"), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
         id: "asset-metadata-name",
@@ -108,21 +109,23 @@ function MetadataPanel({ asset, onCancel, onConfirm }) {
         disabled: busy
     }), /*#__PURE__*/ external_react_namespaceObject.createElement("div", {
         "data-asset-manager-tag-editor": true
-    }, /*#__PURE__*/ external_react_namespaceObject.createElement("label", {
+    }, /*#__PURE__*/ external_react_namespaceObject.createElement(label_namespaceObject.Label, {
         htmlFor: "asset-metadata-tag-input"
     }, "Tags"), /*#__PURE__*/ external_react_namespaceObject.createElement("ul", {
         "aria-label": "Current tags",
         role: "list"
     }, tags.map((tag)=>/*#__PURE__*/ external_react_namespaceObject.createElement("li", {
             key: tag
-        }, /*#__PURE__*/ external_react_namespaceObject.createElement("span", null, tag), /*#__PURE__*/ external_react_namespaceObject.createElement("button", {
+        }, /*#__PURE__*/ external_react_namespaceObject.createElement("span", null, tag), /*#__PURE__*/ external_react_namespaceObject.createElement(button_namespaceObject.Button, {
             "aria-label": `Remove tag ${tag}`,
             "data-asset-action": "remove-tag",
             disabled: busy,
             onClick: ()=>{
                 removeTag(tag);
             },
-            type: "button"
+            type: "button",
+            variant: "ghost",
+            size: "icon-xs"
         }, "\xd7")))), /*#__PURE__*/ external_react_namespaceObject.createElement(input_namespaceObject.Input, {
         id: "asset-metadata-tag-input",
         value: tagInput,