@thanhpv102/simple-image-asset-manager 0.1.0

package/README.md

@@ -0,0 +1,16 @@
+# simple-image-asset-manager
+
+A comprehensive file/image asset manager modal for easy-email-editor. Supports folder navigation, drag-and-drop upload, image preview/editing, and more.
+
+## Features
+- Browse folders/files
+- Upload via drag-and-drop
+- Create/manage folders
+- Preview images
+- Edit images (crop, resize, rotate)
+- Delete files/folders
+- Select files for use in email templates
+
+## Usage
+See the documentation in the main repo for integration details.
+

package/dist/AssetManager.d.ts

@@ -0,0 +1,3 @@
+import { default as React } from 'react';
+import { AssetManagerProps } from './types';
+export declare const AssetManager: React.FC<AssetManagerProps>;

package/dist/index.cjs

@@ -0,0 +1,6 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),xe=require("antd"),Y=require("@ant-design/icons");var Q={exports:{}},$={};var ce;function ye(){if(ce)return $;ce=1;var d=Symbol.for("react.transitional.element"),E=Symbol.for("react.fragment");function _(y,u,f){var T=null;if(f!==void 0&&(T=""+f),u.key!==void 0&&(T=""+u.key),"key"in u){f={};for(var N in u)N!=="key"&&(f[N]=u[N])}else f=u;return u=f.ref,{$$typeof:d,type:y,key:T,ref:u!==void 0?u:null,props:f}}return $.Fragment=E,$.jsx=_,$.jsxs=_,$}var q={};var ue;function ve(){return ue||(ue=1,process.env.NODE_ENV!=="production"&&(function(){function d(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===A?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case v:return"Fragment";case w:return"Profiler";case O:return"StrictMode";case B:return"Suspense";case H:return"SuspenseList";case X:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case h:return"Portal";case g:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case G:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case L:return n=e.displayName||null,n!==null?n:d(e.type)||"Memo";case C:n=e._payload,e=e._init;try{return d(e(n))}catch{}}return null}function E(e){return""+e}function _(e){try{E(e);var n=!1}catch{n=!0}if(n){n=console;var i=n.error,l=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(n,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",l),E(e)}}function y(e){if(e===v)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var n=d(e);return n?"<"+n+">":"<...>"}catch{return"<...>"}}function u(){var e=j.A;return e===null?null:e.getOwner()}function f(){return Error("react-stack-top-frame")}function T(e){if(F.call(e,"key")){var n=Object.getOwnPropertyDescriptor(e,"key").get;if(n&&n.isReactWarning)return!1}return e.key!==void 0}function N(e,n){function i(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",n))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function ie(){var e=d(this.type);return o[e]||(o[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function K(e,n,i,l,W,M){var s=i.ref;return e={$$typeof:z,type:e,key:n,props:i,_owner:l},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:ie}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:W}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:M}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function V(e,n,i,l,W,M){var s=n.children;if(s!==void 0)if(l)if(I(s)){for(l=0;l<s.length;l++)b(s[l]);Object.freeze&&Object.freeze(s)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else b(s);if(F.call(n,"key")){s=d(e);var R=Object.keys(n).filter(function(te){return te!=="key"});l=0<R.length?"{key: someKey, "+R.join(": ..., ")+": ...}":"{key: someKey}",Z[s+l]||(R=0<R.length?"{"+R.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,l,s,R,s),Z[s+l]=!0)}if(s=null,i!==void 0&&(_(i),s=""+i),T(n)&&(_(n.key),s=""+n.key),"key"in n){i={};for(var U in n)U!=="key"&&(i[U]=n[U])}else i=n;return s&&N(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),K(e,s,i,u(),W,M)}function b(e){J(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?J(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function J(e){return typeof e=="object"&&e!==null&&e.$$typeof===z}var P=c,z=Symbol.for("react.transitional.element"),h=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),O=Symbol.for("react.strict_mode"),w=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),g=Symbol.for("react.context"),G=Symbol.for("react.forward_ref"),B=Symbol.for("react.suspense"),H=Symbol.for("react.suspense_list"),L=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),X=Symbol.for("react.activity"),A=Symbol.for("react.client.reference"),j=P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,F=Object.prototype.hasOwnProperty,I=Array.isArray,x=console.createTask?console.createTask:function(){return null};P={react_stack_bottom_frame:function(e){return e()}};var D,o={},k=P.react_stack_bottom_frame.bind(P,f)(),S=x(y(f)),Z={};q.Fragment=v,q.jsx=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!1,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)},q.jsxs=function(e,n,i){var l=1e4>j.recentlyCreatedOwnerStacks++;return V(e,n,i,!0,l?Error("react-stack-top-frame"):k,l?x(y(e)):S)}})()),q}var fe;function we(){return fe||(fe=1,process.env.NODE_ENV==="production"?Q.exports=ye():Q.exports=ve()),Q.exports}var r=we();function m(d){return d.type==="FILE"}function oe(d){return d.type==="FOLDER"}const je=({accept:d="image/*",request:E,title:_="Asset Manager",upload:y,onCreateFile:u,onDeleteFile:f,onDeleteFolder:T,onUpdateFile:N,onUpdateFolder:ie,onCreateFolder:K,onSelect:V,visible:b=!1,setVisible:J,showUnacceptedFile:P=!1,addFolderEnabled:z=!0})=>{const[h,v]=c.useState(null),[O,w]=c.useState([]),[ee,g]=c.useState(!1),[G,B]=c.useState(null),[H,L]=c.useState(!1),[C,X]=c.useState(""),[A,j]=c.useState(!1),[F,I]=c.useState([]),[x,D]=c.useState(!1),[o,k]=c.useState(null),[S,Z]=c.useState("thumbnail"),e=c.useRef(null),[n,i]=c.useState(window.innerWidth);c.useEffect(()=>{b&&(g(!0),B(null),E(h===null?void 0:h).then(t=>w(t)).catch(t=>B(t?.message||"Failed to load assets")).finally(()=>g(!1)))},[h,b,E]),c.useEffect(()=>{b&&h===null&&I([])},[h,b]),c.useEffect(()=>{const t=()=>i(window.innerWidth);return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const l=()=>{J(!1),v(null),I([]),B(null)},W=t=>{t===-1?(v(null),I([])):(v(F[t].id),I(F.slice(0,t+1)))},M=async t=>{g(!0),await f({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},s=async t=>{g(!0),await T({id:t.id}),w(a=>a.filter(p=>p!==t)),g(!1)},R=async()=>{if(!C.trim())return;g(!0);const t=await K({name:C,parentFolderId:h});w(a=>[...a,t]),X(""),L(!1),g(!1)},U=async t=>{const a=t.target.files;if(!(!a||a.length===0)){j(!0);for(const p of Array.from(a)){if(d&&!p.type.match(d.replace("*",".*")))continue;const re=await y(p),ne=await u({name:p.name,url:re,parentFolderId:h});w(be=>[...be,ne])}j(!1),e.current&&(e.current.value="")}},te=t=>{t.preventDefault(),D(!0)},pe=t=>{t.preventDefault(),D(!1)},me=async t=>{if(t.preventDefault(),D(!1),!!t.dataTransfer.files){j(!0);for(const a of Array.from(t.dataTransfer.files)){if(d&&!a.type.match(d.replace("*",".*")))continue;const p=await y(a),re=await u({name:a.name,url:p,parentFolderId:h});w(ne=>[...ne,re])}j(!1)}},ae=t=>{k(t)},le=t=>{v(t.id),I(a=>[...a,t]),k(t)},he=()=>{o&&m(o)&&(V(o.url),l())},se=async()=>{o&&(m(o)?(await M(o),k(null)):oe(o)&&(await s(o),k(null)))},de=Math.round(n*.8),ge=Math.round(de*.6);return b?r.jsx(xe.Modal,{open:b,title:r.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[r.jsx("span",{children:_}),r.jsx("div",{style:{display:"flex",flexDirection:"column",alignItems:"flex-end",gap:0,marginRight:40,marginTop:-10},children:r.jsx("button",{onClick:()=>Z(S==="thumbnail"?"list":"thumbnail"),style:{background:"none",border:"none",cursor:"pointer",padding:0,marginTop:8,fontSize:22,color:"#222",display:"flex",alignItems:"center",transition:"color 0.2s"},title:S==="thumbnail"?"List view":"Thumbnail view",children:S==="thumbnail"?r.jsx(Y.BarsOutlined,{}):r.jsx(Y.AppstoreOutlined,{})})})]}),onCancel:l,footer:null,width:de,styles:{body:{padding:0}},destroyOnHidden:!0,maskClosable:!1,centered:!0,children:r.jsxs("div",{className:"simple-image-asset-manager-modal",style:{padding:24},children:[r.jsxs("div",{className:"modal-body",style:{display:"flex",gap:24},children:[r.jsxs("div",{style:{flex:1},children:[r.jsxs("div",{style:{marginBottom:8,display:"flex",alignItems:"center",justifyContent:"space-between"},children:[r.jsxs("div",{style:{display:"flex",alignItems:"center",flexWrap:"wrap"},children:[r.jsx("span",{className:"breadcrumb",onClick:()=>W(-1),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:"All"}),F.map((t,a)=>{const p=a===F.length-1;return r.jsxs("span",{style:{display:"flex",alignItems:"center"},children:[r.jsx("span",{style:{margin:"0 4px",fontWeight:500},children:"/"}),p?r.jsx("span",{className:"breadcrumb",style:{color:"#222",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name}):r.jsx("span",{className:"breadcrumb",onClick:()=>W(a),style:{cursor:"pointer",color:"#1890ff",textDecoration:"underline",fontWeight:500,maxWidth:120,display:"inline-block",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id)})]}),z&&!H&&r.jsxs("button",{style:{display:"flex",alignItems:"center",gap:6,cursor:"pointer",userSelect:"none",fontWeight:500,fontSize:15,padding:"8px 20px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},onClick:()=>L(!0),children:[r.jsx("span",{children:"New folder"}),r.jsx(Y.FolderAddOutlined,{style:{fontSize:20}})]})]}),r.jsxs("div",{className:`drop-area${x?" drag-active":""}`,onDrop:me,onDragOver:te,onDragLeave:pe,style:{border:x?"2px solid #1890ff":"2px dashed #aaa",borderRadius:8,padding:32,marginBottom:24,textAlign:"center",background:x?"#e6f7ff":"#fafafa",position:"relative",transition:"border-color 0.3s, background 0.3s"},children:[r.jsx("div",{style:{marginBottom:8,fontWeight:500},children:x?"Drop file here to upload":"Drag & drop files here"}),r.jsx("button",{onClick:()=>e.current?.click(),disabled:A,style:{marginBottom:8,visibility:x?"hidden":"visible",padding:"8px 24px",borderRadius:4,background:A?"#ccc":"#1890ff",color:"#fff",border:"none",cursor:A?"not-allowed":"pointer",fontWeight:500,fontSize:15,boxShadow:A?"none":"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s, box-shadow 0.2s"},children:"Upload"}),r.jsx("input",{ref:e,type:"file",accept:d,style:{display:"none"},multiple:!0,onChange:U}),A&&r.jsx("div",{children:"Uploading..."})]}),ee?r.jsx("div",{children:"Loading..."}):G?r.jsx("div",{className:"error",children:G}):r.jsxs("div",{children:[z&&H&&r.jsxs("div",{style:{marginBottom:16,display:"flex",alignItems:"center",gap:8},children:[r.jsx("input",{value:C,onChange:t=>X(t.target.value),placeholder:"Folder name",style:{padding:"8px 12px",borderRadius:4,border:"1px solid #d9d9d9",fontSize:15,fontWeight:500,outline:"none",transition:"border-color 0.2s",boxSizing:"border-box"},onFocus:t=>t.target.style.borderColor="#1890ff",onBlur:t=>t.target.style.borderColor="#d9d9d9"}),r.jsx("button",{onClick:R,style:{padding:"8px 16px",borderRadius:4,background:"#1890ff",color:"#fff",border:"none",fontWeight:500,fontSize:15,cursor:"pointer",boxShadow:"0 2px 8px rgba(24,144,255,0.12)",transition:"background 0.2s"},children:"Create"}),r.jsx("button",{onClick:()=>L(!1),style:{padding:"8px 16px",borderRadius:4,background:"#f5f5f5",color:"#222",border:"1px solid #d9d9d9",fontWeight:500,fontSize:15,cursor:"pointer",transition:"background 0.2s"},children:"Cancel"})]}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,display:"flex",flexDirection:"column",alignItems:"center",padding:8,borderRadius:8,background:"#fafafa",boxSizing:"border-box"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,marginBottom:8,background:"#fff"}}):r.jsx("div",{style:{fontSize:40,width:64,height:64,display:"flex",alignItems:"center",justifyContent:"center",marginBottom:8,background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:13,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t.name})]},t.id))}):r.jsx("div",{style:{display:"block",marginBottom:16},children:O.filter(oe).map(t=>r.jsxs("div",{className:"folder-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer"},onClick:()=>le(t),children:[t.thumbnail?r.jsx("img",{src:t.thumbnail,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}):r.jsx("div",{style:{fontSize:24,width:32,height:32,display:"flex",alignItems:"center",justifyContent:"center",background:"#fff",borderRadius:4},children:"📁"}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id))}),S==="thumbnail"?r.jsx("div",{style:{display:"flex",flexWrap:"wrap",gap:16,marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{cursor:"pointer",width:120,minWidth:120,maxWidth:120,border:"2px solid "+(a?"#1890ff":"transparent"),background:a?"#e6f7ff":"#fafafa",borderRadius:8,boxSizing:"border-box",transition:"border-color 0.2s, background 0.2s",padding:8,display:"flex",flexDirection:"column",alignItems:"center"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:64,height:64,objectFit:"cover",borderRadius:4,background:"#fff",marginBottom:8}}),r.jsx("div",{style:{fontSize:12,fontWeight:500,width:"100%",textAlign:"center",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",marginTop:4},children:t.name})]},t.id)})}):r.jsx("div",{style:{display:"block",marginTop:16},children:O.filter(m).map(t=>{const a=o&&m(o)&&o.id===t.id;return r.jsxs("div",{className:"file-item",style:{display:"flex",alignItems:"center",gap:12,padding:"8px 0",borderBottom:"1px solid #f0f0f0",cursor:"pointer",background:a?"#e6f7ff":"#fff"},onClick:()=>ae(t),children:[r.jsx("img",{src:t.thumbnail||t.url,alt:t.name,style:{width:32,height:32,objectFit:"cover",borderRadius:4,background:"#fff"}}),r.jsx("div",{style:{fontSize:14,fontWeight:500,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",flex:1},children:t.name})]},t.id)})})]})]}),o&&r.jsx("div",{style:{width:ge,minWidth:320,transition:"width 2s",overflow:"hidden"},children:r.jsxs("div",{style:{border:"1px solid #eee",borderRadius:8,padding:16,background:"#fff",height:"100%",display:"flex",flexDirection:"column",alignItems:"center",position:"relative"},children:[r.jsx("button",{onClick:()=>k(null),style:{position:"absolute",top:12,right:12,background:"#f5f5f5",border:"none",borderRadius:4,padding:"4px 12px",cursor:"pointer",fontWeight:500,fontSize:14,color:"#222",boxShadow:"0 1px 4px rgba(0,0,0,0.08)"},children:"Hide"}),m(o)?r.jsxs(r.Fragment,{children:[r.jsx("img",{src:o.thumbnail||o.url,alt:o.name,style:{width:"100%",maxHeight:240,objectFit:"contain",borderRadius:4,marginBottom:16}}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:o.url.startsWith("data:")?"URL: data-uri":r.jsxs(r.Fragment,{children:["URL: ",r.jsx("a",{href:o.url,target:"_blank",rel:"noopener noreferrer",children:o.url})]})}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]}):r.jsxs(r.Fragment,{children:[r.jsx("div",{style:{fontSize:64,marginBottom:16},children:"📁"}),r.jsx("div",{style:{fontWeight:500,marginBottom:8},children:o.name}),r.jsx("div",{style:{fontSize:12,color:"#888",marginBottom:8},children:`Files: ${O.filter(t=>m(t)&&t.parentFolderId===o.id).length}`}),r.jsxs("button",{onClick:se,style:{display:"flex",alignItems:"center",gap:6,color:"#ff4d4f",background:"none",border:"none",cursor:"pointer",fontWeight:500,fontSize:15,marginTop:24},children:[r.jsx(Y.DeleteOutlined,{})," Delete"]})]})]})})]}),r.jsx("div",{className:"modal-footer",style:{display:"flex",justifyContent:"flex-end",alignItems:"center",marginTop:24},children:r.jsx("button",{onClick:he,disabled:!(o&&m(o)),style:{padding:"8px 24px",borderRadius:4,background:o&&m(o)?"#1890ff":"#ccc",color:"#fff",border:"none",cursor:o&&m(o)?"pointer":"not-allowed",fontWeight:500},children:"Select"})})]})}):null};exports.AssetManager=je;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export { AssetManager } from './AssetManager';

package/dist/index.js

@@ -0,0 +1,840 @@
+import ye, { useState as u, useRef as ve, useEffect as ne } from "react";
+import { Modal as we } from "antd";
+import { FolderAddOutlined as je, DeleteOutlined as ce, BarsOutlined as ke, AppstoreOutlined as Re } from "@ant-design/icons";
+var Z = { exports: {} }, M = {};
+var fe;
+function Ee() {
+  if (fe) return M;
+  fe = 1;
+  var d = /* @__PURE__ */ Symbol.for("react.transitional.element"), S = /* @__PURE__ */ Symbol.for("react.fragment");
+  function _(y, c, f) {
+    var T = null;
+    if (f !== void 0 && (T = "" + f), c.key !== void 0 && (T = "" + c.key), "key" in c) {
+      f = {};
+      for (var N in c)
+        N !== "key" && (f[N] = c[N]);
+    } else f = c;
+    return c = f.ref, {
+      $$typeof: d,
+      type: y,
+      key: T,
+      ref: c !== void 0 ? c : null,
+      props: f
+    };
+  }
+  return M.Fragment = S, M.jsx = _, M.jsxs = _, M;
+}
+var $ = {};
+var ue;
+function Se() {
+  return ue || (ue = 1, process.env.NODE_ENV !== "production" && (function() {
+    function d(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === A ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case v:
+          return "Fragment";
+        case w:
+          return "Profiler";
+        case C:
+          return "StrictMode";
+        case B:
+          return "Suspense";
+        case G:
+          return "SuspenseList";
+        case H:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case h:
+            return "Portal";
+          case g:
+            return e.displayName || "Context";
+          case K:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case q:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case L:
+            return n = e.displayName || null, n !== null ? n : d(e.type) || "Memo";
+          case O:
+            n = e._payload, e = e._init;
+            try {
+              return d(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function S(e) {
+      return "" + e;
+    }
+    function _(e) {
+      try {
+        S(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var i = n.error, l = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          l
+        ), S(e);
+      }
+    }
+    function y(e) {
+      if (e === v) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === O)
+        return "<...>";
+      try {
+        var n = d(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function c() {
+      var e = j.A;
+      return e === null ? null : e.getOwner();
+    }
+    function f() {
+      return Error("react-stack-top-frame");
+    }
+    function T(e) {
+      if (F.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function N(e, n) {
+      function i() {
+        D || (D = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function ie() {
+      var e = d(this.type);
+      return o[e] || (o[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function Q(e, n, i, l, W, U) {
+      var s = i.ref;
+      return e = {
+        $$typeof: z,
+        type: e,
+        key: n,
+        props: i,
+        _owner: l
+      }, (s !== void 0 ? s : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: ie
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: W
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: U
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function V(e, n, i, l, W, U) {
+      var s = n.children;
+      if (s !== void 0)
+        if (l)
+          if (I(s)) {
+            for (l = 0; l < s.length; l++)
+              x(s[l]);
+            Object.freeze && Object.freeze(s);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else x(s);
+      if (F.call(n, "key")) {
+        s = d(e);
+        var E = Object.keys(n).filter(function(ee) {
+          return ee !== "key";
+        });
+        l = 0 < E.length ? "{key: someKey, " + E.join(": ..., ") + ": ...}" : "{key: someKey}", X[s + l] || (E = 0 < E.length ? "{" + E.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          l,
+          s,
+          E,
+          s
+        ), X[s + l] = !0);
+      }
+      if (s = null, i !== void 0 && (_(i), s = "" + i), T(n) && (_(n.key), s = "" + n.key), "key" in n) {
+        i = {};
+        for (var Y in n)
+          Y !== "key" && (i[Y] = n[Y]);
+      } else i = n;
+      return s && N(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), Q(
+        e,
+        s,
+        i,
+        c(),
+        W,
+        U
+      );
+    }
+    function x(e) {
+      J(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === O && (e._payload.status === "fulfilled" ? J(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function J(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === z;
+    }
+    var P = ye, z = /* @__PURE__ */ Symbol.for("react.transitional.element"), h = /* @__PURE__ */ Symbol.for("react.portal"), v = /* @__PURE__ */ Symbol.for("react.fragment"), C = /* @__PURE__ */ Symbol.for("react.strict_mode"), w = /* @__PURE__ */ Symbol.for("react.profiler"), K = /* @__PURE__ */ Symbol.for("react.consumer"), g = /* @__PURE__ */ Symbol.for("react.context"), q = /* @__PURE__ */ Symbol.for("react.forward_ref"), B = /* @__PURE__ */ Symbol.for("react.suspense"), G = /* @__PURE__ */ Symbol.for("react.suspense_list"), L = /* @__PURE__ */ Symbol.for("react.memo"), O = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), A = /* @__PURE__ */ Symbol.for("react.client.reference"), j = P.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, I = Array.isArray, b = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    P = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var D, o = {}, k = P.react_stack_bottom_frame.bind(
+      P,
+      f
+    )(), R = b(y(f)), X = {};
+    $.Fragment = v, $.jsx = function(e, n, i) {
+      var l = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return V(
+        e,
+        n,
+        i,
+        !1,
+        l ? Error("react-stack-top-frame") : k,
+        l ? b(y(e)) : R
+      );
+    }, $.jsxs = function(e, n, i) {
+      var l = 1e4 > j.recentlyCreatedOwnerStacks++;
+      return V(
+        e,
+        n,
+        i,
+        !0,
+        l ? Error("react-stack-top-frame") : k,
+        l ? b(y(e)) : R
+      );
+    };
+  })()), $;
+}
+var pe;
+function _e() {
+  return pe || (pe = 1, process.env.NODE_ENV === "production" ? Z.exports = Ee() : Z.exports = Se()), Z.exports;
+}
+var t = _e();
+function m(d) {
+  return d.type === "FILE";
+}
+function oe(d) {
+  return d.type === "FOLDER";
+}
+const Ae = ({
+  accept: d = "image/*",
+  request: S,
+  title: _ = "Asset Manager",
+  upload: y,
+  onCreateFile: c,
+  onDeleteFile: f,
+  onDeleteFolder: T,
+  onUpdateFile: N,
+  onUpdateFolder: ie,
+  onCreateFolder: Q,
+  onSelect: V,
+  visible: x = !1,
+  setVisible: J,
+  showUnacceptedFile: P = !1,
+  addFolderEnabled: z = !0
+}) => {
+  const [h, v] = u(null), [C, w] = u([]), [K, g] = u(!1), [q, B] = u(null), [G, L] = u(!1), [O, H] = u(""), [A, j] = u(!1), [F, I] = u([]), [b, D] = u(!1), [o, k] = u(null), [R, X] = u("thumbnail"), e = ve(null), [n, i] = u(window.innerWidth);
+  ne(() => {
+    x && (g(!0), B(null), S(h === null ? void 0 : h).then((r) => w(r)).catch((r) => B(r?.message || "Failed to load assets")).finally(() => g(!1)));
+  }, [h, x, S]), ne(() => {
+    x && h === null && I([]);
+  }, [h, x]), ne(() => {
+    const r = () => i(window.innerWidth);
+    return window.addEventListener("resize", r), () => window.removeEventListener("resize", r);
+  }, []);
+  const l = () => {
+    J(!1), v(null), I([]), B(null);
+  }, W = (r) => {
+    r === -1 ? (v(null), I([])) : (v(F[r].id), I(F.slice(0, r + 1)));
+  }, U = async (r) => {
+    g(!0), await f({ id: r.id }), w((a) => a.filter((p) => p !== r)), g(!1);
+  }, s = async (r) => {
+    g(!0), await T({ id: r.id }), w((a) => a.filter((p) => p !== r)), g(!1);
+  }, E = async () => {
+    if (!O.trim()) return;
+    g(!0);
+    const r = await Q({ name: O, parentFolderId: h });
+    w((a) => [...a, r]), H(""), L(!1), g(!1);
+  }, Y = async (r) => {
+    const a = r.target.files;
+    if (!(!a || a.length === 0)) {
+      j(!0);
+      for (const p of Array.from(a)) {
+        if (d && !p.type.match(d.replace("*", ".*")))
+          continue;
+        const re = await y(p), te = await c({ name: p.name, url: re, parentFolderId: h });
+        w((be) => [...be, te]);
+      }
+      j(!1), e.current && (e.current.value = "");
+    }
+  }, ee = (r) => {
+    r.preventDefault(), D(!0);
+  }, me = (r) => {
+    r.preventDefault(), D(!1);
+  }, he = async (r) => {
+    if (r.preventDefault(), D(!1), !!r.dataTransfer.files) {
+      j(!0);
+      for (const a of Array.from(r.dataTransfer.files)) {
+        if (d && !a.type.match(d.replace("*", ".*")))
+          continue;
+        const p = await y(a), re = await c({ name: a.name, url: p, parentFolderId: h });
+        w((te) => [...te, re]);
+      }
+      j(!1);
+    }
+  }, ae = (r) => {
+    k(r);
+  }, le = (r) => {
+    v(r.id), I((a) => [...a, r]), k(r);
+  }, ge = () => {
+    o && m(o) && (V(o.url), l());
+  }, se = async () => {
+    o && (m(o) ? (await U(o), k(null)) : oe(o) && (await s(o), k(null)));
+  }, de = Math.round(n * 0.8), xe = Math.round(de * 0.6);
+  return x ? /* @__PURE__ */ t.jsx(
+    we,
+    {
+      open: x,
+      title: /* @__PURE__ */ t.jsxs("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ t.jsx("span", { children: _ }),
+        /* @__PURE__ */ t.jsx("div", { style: { display: "flex", flexDirection: "column", alignItems: "flex-end", gap: 0, marginRight: 40, marginTop: -10 }, children: /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            onClick: () => X(R === "thumbnail" ? "list" : "thumbnail"),
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+              marginTop: 8,
+              fontSize: 22,
+              color: "#222",
+              display: "flex",
+              alignItems: "center",
+              transition: "color 0.2s"
+            },
+            title: R === "thumbnail" ? "List view" : "Thumbnail view",
+            children: R === "thumbnail" ? /* @__PURE__ */ t.jsx(ke, {}) : /* @__PURE__ */ t.jsx(Re, {})
+          }
+        ) })
+      ] }),
+      onCancel: l,
+      footer: null,
+      width: de,
+      styles: { body: { padding: 0 } },
+      destroyOnHidden: !0,
+      maskClosable: !1,
+      centered: !0,
+      children: /* @__PURE__ */ t.jsxs("div", { className: "simple-image-asset-manager-modal", style: { padding: 24 }, children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "modal-body", style: { display: "flex", gap: 24 }, children: [
+          /* @__PURE__ */ t.jsxs("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ t.jsxs("div", { style: { marginBottom: 8, display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+              /* @__PURE__ */ t.jsxs("div", { style: { display: "flex", alignItems: "center", flexWrap: "wrap" }, children: [
+                /* @__PURE__ */ t.jsx(
+                  "span",
+                  {
+                    className: "breadcrumb",
+                    onClick: () => W(-1),
+                    style: { cursor: "pointer", color: "#1890ff", textDecoration: "underline", fontWeight: 500, maxWidth: 120, display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+                    children: "All"
+                  }
+                ),
+                F.map((r, a) => {
+                  const p = a === F.length - 1;
+                  return /* @__PURE__ */ t.jsxs("span", { style: { display: "flex", alignItems: "center" }, children: [
+                    /* @__PURE__ */ t.jsx("span", { style: { margin: "0 4px", fontWeight: 500 }, children: "/" }),
+                    p ? /* @__PURE__ */ t.jsx(
+                      "span",
+                      {
+                        className: "breadcrumb",
+                        style: { color: "#222", fontWeight: 500, maxWidth: 120, display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+                        children: r.name
+                      }
+                    ) : /* @__PURE__ */ t.jsx(
+                      "span",
+                      {
+                        className: "breadcrumb",
+                        onClick: () => W(a),
+                        style: { cursor: "pointer", color: "#1890ff", textDecoration: "underline", fontWeight: 500, maxWidth: 120, display: "inline-block", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" },
+                        children: r.name
+                      }
+                    )
+                  ] }, r.id);
+                })
+              ] }),
+              z && !G && /* @__PURE__ */ t.jsxs(
+                "button",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    cursor: "pointer",
+                    userSelect: "none",
+                    fontWeight: 500,
+                    fontSize: 15,
+                    padding: "8px 20px",
+                    borderRadius: 4,
+                    background: "#1890ff",
+                    color: "#fff",
+                    border: "none",
+                    boxShadow: "0 2px 8px rgba(24,144,255,0.12)",
+                    transition: "background 0.2s, box-shadow 0.2s"
+                  },
+                  onClick: () => L(!0),
+                  children: [
+                    /* @__PURE__ */ t.jsx("span", { children: "New folder" }),
+                    /* @__PURE__ */ t.jsx(je, { style: { fontSize: 20 } })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ t.jsxs(
+              "div",
+              {
+                className: `drop-area${b ? " drag-active" : ""}`,
+                onDrop: he,
+                onDragOver: ee,
+                onDragLeave: me,
+                style: {
+                  border: b ? "2px solid #1890ff" : "2px dashed #aaa",
+                  borderRadius: 8,
+                  padding: 32,
+                  marginBottom: 24,
+                  textAlign: "center",
+                  background: b ? "#e6f7ff" : "#fafafa",
+                  position: "relative",
+                  transition: "border-color 0.3s, background 0.3s"
+                },
+                children: [
+                  /* @__PURE__ */ t.jsx("div", { style: {
+                    marginBottom: 8,
+                    fontWeight: 500
+                  }, children: b ? "Drop file here to upload" : "Drag & drop files here" }),
+                  /* @__PURE__ */ t.jsx(
+                    "button",
+                    {
+                      onClick: () => e.current?.click(),
+                      disabled: A,
+                      style: {
+                        marginBottom: 8,
+                        visibility: b ? "hidden" : "visible",
+                        padding: "8px 24px",
+                        borderRadius: 4,
+                        background: A ? "#ccc" : "#1890ff",
+                        color: "#fff",
+                        border: "none",
+                        cursor: A ? "not-allowed" : "pointer",
+                        fontWeight: 500,
+                        fontSize: 15,
+                        boxShadow: A ? "none" : "0 2px 8px rgba(24,144,255,0.12)",
+                        transition: "background 0.2s, box-shadow 0.2s"
+                      },
+                      children: "Upload"
+                    }
+                  ),
+                  /* @__PURE__ */ t.jsx(
+                    "input",
+                    {
+                      ref: e,
+                      type: "file",
+                      accept: d,
+                      style: { display: "none" },
+                      multiple: !0,
+                      onChange: Y
+                    }
+                  ),
+                  A && /* @__PURE__ */ t.jsx("div", { children: "Uploading..." })
+                ]
+              }
+            ),
+            K ? /* @__PURE__ */ t.jsx("div", { children: "Loading..." }) : q ? /* @__PURE__ */ t.jsx("div", { className: "error", children: q }) : /* @__PURE__ */ t.jsxs("div", { children: [
+              z && G && /* @__PURE__ */ t.jsxs("div", { style: { marginBottom: 16, display: "flex", alignItems: "center", gap: 8 }, children: [
+                /* @__PURE__ */ t.jsx(
+                  "input",
+                  {
+                    value: O,
+                    onChange: (r) => H(r.target.value),
+                    placeholder: "Folder name",
+                    style: {
+                      padding: "8px 12px",
+                      borderRadius: 4,
+                      border: "1px solid #d9d9d9",
+                      fontSize: 15,
+                      fontWeight: 500,
+                      outline: "none",
+                      transition: "border-color 0.2s",
+                      boxSizing: "border-box"
+                    },
+                    onFocus: (r) => r.target.style.borderColor = "#1890ff",
+                    onBlur: (r) => r.target.style.borderColor = "#d9d9d9"
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  "button",
+                  {
+                    onClick: E,
+                    style: {
+                      padding: "8px 16px",
+                      borderRadius: 4,
+                      background: "#1890ff",
+                      color: "#fff",
+                      border: "none",
+                      fontWeight: 500,
+                      fontSize: 15,
+                      cursor: "pointer",
+                      boxShadow: "0 2px 8px rgba(24,144,255,0.12)",
+                      transition: "background 0.2s"
+                    },
+                    children: "Create"
+                  }
+                ),
+                /* @__PURE__ */ t.jsx(
+                  "button",
+                  {
+                    onClick: () => L(!1),
+                    style: {
+                      padding: "8px 16px",
+                      borderRadius: 4,
+                      background: "#f5f5f5",
+                      color: "#222",
+                      border: "1px solid #d9d9d9",
+                      fontWeight: 500,
+                      fontSize: 15,
+                      cursor: "pointer",
+                      transition: "background 0.2s"
+                    },
+                    children: "Cancel"
+                  }
+                )
+              ] }),
+              R === "thumbnail" ? /* @__PURE__ */ t.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 16 }, children: C.filter(oe).map((r) => /* @__PURE__ */ t.jsxs(
+                "div",
+                {
+                  className: "folder-item",
+                  style: {
+                    cursor: "pointer",
+                    width: 120,
+                    minWidth: 120,
+                    maxWidth: 120,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    padding: 8,
+                    borderRadius: 8,
+                    background: "#fafafa",
+                    boxSizing: "border-box"
+                  },
+                  onClick: () => le(r),
+                  children: [
+                    r.thumbnail ? /* @__PURE__ */ t.jsx(
+                      "img",
+                      {
+                        src: r.thumbnail,
+                        alt: r.name,
+                        style: { width: 64, height: 64, objectFit: "cover", borderRadius: 4, marginBottom: 8, background: "#fff" }
+                      }
+                    ) : /* @__PURE__ */ t.jsx("div", { style: { fontSize: 40, width: 64, height: 64, display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 8, background: "#fff", borderRadius: 4 }, children: "📁" }),
+                    /* @__PURE__ */ t.jsx("div", { style: {
+                      fontSize: 13,
+                      fontWeight: 500,
+                      width: "100%",
+                      textAlign: "center",
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis"
+                    }, children: r.name })
+                  ]
+                },
+                r.id
+              )) }) : /* @__PURE__ */ t.jsx("div", { style: { display: "block", marginBottom: 16 }, children: C.filter(oe).map((r) => /* @__PURE__ */ t.jsxs(
+                "div",
+                {
+                  className: "folder-item",
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 12,
+                    padding: "8px 0",
+                    borderBottom: "1px solid #f0f0f0",
+                    cursor: "pointer"
+                  },
+                  onClick: () => le(r),
+                  children: [
+                    r.thumbnail ? /* @__PURE__ */ t.jsx(
+                      "img",
+                      {
+                        src: r.thumbnail,
+                        alt: r.name,
+                        style: { width: 32, height: 32, objectFit: "cover", borderRadius: 4, background: "#fff" }
+                      }
+                    ) : /* @__PURE__ */ t.jsx("div", { style: { fontSize: 24, width: 32, height: 32, display: "flex", alignItems: "center", justifyContent: "center", background: "#fff", borderRadius: 4 }, children: "📁" }),
+                    /* @__PURE__ */ t.jsx("div", { style: {
+                      fontSize: 14,
+                      fontWeight: 500,
+                      whiteSpace: "nowrap",
+                      overflow: "hidden",
+                      textOverflow: "ellipsis",
+                      flex: 1
+                    }, children: r.name })
+                  ]
+                },
+                r.id
+              )) }),
+              R === "thumbnail" ? /* @__PURE__ */ t.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 16, marginTop: 16 }, children: C.filter(m).map((r) => {
+                const a = o && m(o) && o.id === r.id;
+                return /* @__PURE__ */ t.jsxs(
+                  "div",
+                  {
+                    className: "file-item",
+                    style: {
+                      cursor: "pointer",
+                      width: 120,
+                      minWidth: 120,
+                      maxWidth: 120,
+                      border: "2px solid " + (a ? "#1890ff" : "transparent"),
+                      background: a ? "#e6f7ff" : "#fafafa",
+                      borderRadius: 8,
+                      boxSizing: "border-box",
+                      transition: "border-color 0.2s, background 0.2s",
+                      padding: 8,
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center"
+                    },
+                    onClick: () => ae(r),
+                    children: [
+                      /* @__PURE__ */ t.jsx(
+                        "img",
+                        {
+                          src: r.thumbnail || r.url,
+                          alt: r.name,
+                          style: { width: 64, height: 64, objectFit: "cover", borderRadius: 4, background: "#fff", marginBottom: 8 }
+                        }
+                      ),
+                      /* @__PURE__ */ t.jsx("div", { style: {
+                        fontSize: 12,
+                        fontWeight: 500,
+                        width: "100%",
+                        textAlign: "center",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        marginTop: 4
+                      }, children: r.name })
+                    ]
+                  },
+                  r.id
+                );
+              }) }) : /* @__PURE__ */ t.jsx("div", { style: { display: "block", marginTop: 16 }, children: C.filter(m).map((r) => {
+                const a = o && m(o) && o.id === r.id;
+                return /* @__PURE__ */ t.jsxs(
+                  "div",
+                  {
+                    className: "file-item",
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: 12,
+                      padding: "8px 0",
+                      borderBottom: "1px solid #f0f0f0",
+                      cursor: "pointer",
+                      background: a ? "#e6f7ff" : "#fff"
+                    },
+                    onClick: () => ae(r),
+                    children: [
+                      /* @__PURE__ */ t.jsx(
+                        "img",
+                        {
+                          src: r.thumbnail || r.url,
+                          alt: r.name,
+                          style: { width: 32, height: 32, objectFit: "cover", borderRadius: 4, background: "#fff" }
+                        }
+                      ),
+                      /* @__PURE__ */ t.jsx("div", { style: {
+                        fontSize: 14,
+                        fontWeight: 500,
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        flex: 1
+                      }, children: r.name })
+                    ]
+                  },
+                  r.id
+                );
+              }) })
+            ] })
+          ] }),
+          o && /* @__PURE__ */ t.jsx("div", { style: { width: xe, minWidth: 320, transition: "width 2s", overflow: "hidden" }, children: /* @__PURE__ */ t.jsxs("div", { style: {
+            border: "1px solid #eee",
+            borderRadius: 8,
+            padding: 16,
+            background: "#fff",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            position: "relative"
+          }, children: [
+            /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                onClick: () => k(null),
+                style: {
+                  position: "absolute",
+                  top: 12,
+                  right: 12,
+                  background: "#f5f5f5",
+                  border: "none",
+                  borderRadius: 4,
+                  padding: "4px 12px",
+                  cursor: "pointer",
+                  fontWeight: 500,
+                  fontSize: 14,
+                  color: "#222",
+                  boxShadow: "0 1px 4px rgba(0,0,0,0.08)"
+                },
+                children: "Hide"
+              }
+            ),
+            m(o) ? /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              /* @__PURE__ */ t.jsx("img", { src: o.thumbnail || o.url, alt: o.name, style: { width: "100%", maxHeight: 240, objectFit: "contain", borderRadius: 4, marginBottom: 16 } }),
+              /* @__PURE__ */ t.jsx("div", { style: { fontWeight: 500, marginBottom: 8 }, children: o.name }),
+              /* @__PURE__ */ t.jsx("div", { style: { fontSize: 12, color: "#888", marginBottom: 8 }, children: o.url.startsWith("data:") ? "URL: data-uri" : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+                "URL: ",
+                /* @__PURE__ */ t.jsx("a", { href: o.url, target: "_blank", rel: "noopener noreferrer", children: o.url })
+              ] }) }),
+              /* @__PURE__ */ t.jsxs(
+                "button",
+                {
+                  onClick: se,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    color: "#ff4d4f",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontWeight: 500,
+                    fontSize: 15,
+                    marginTop: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ t.jsx(ce, {}),
+                    " Delete"
+                  ]
+                }
+              )
+            ] }) : /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+              /* @__PURE__ */ t.jsx("div", { style: { fontSize: 64, marginBottom: 16 }, children: "📁" }),
+              /* @__PURE__ */ t.jsx("div", { style: { fontWeight: 500, marginBottom: 8 }, children: o.name }),
+              /* @__PURE__ */ t.jsx("div", { style: { fontSize: 12, color: "#888", marginBottom: 8 }, children: `Files: ${C.filter((r) => m(r) && r.parentFolderId === o.id).length}` }),
+              /* @__PURE__ */ t.jsxs(
+                "button",
+                {
+                  onClick: se,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    color: "#ff4d4f",
+                    background: "none",
+                    border: "none",
+                    cursor: "pointer",
+                    fontWeight: 500,
+                    fontSize: 15,
+                    marginTop: 24
+                  },
+                  children: [
+                    /* @__PURE__ */ t.jsx(ce, {}),
+                    " Delete"
+                  ]
+                }
+              )
+            ] })
+          ] }) })
+        ] }),
+        /* @__PURE__ */ t.jsx(
+          "div",
+          {
+            className: "modal-footer",
+            style: { display: "flex", justifyContent: "flex-end", alignItems: "center", marginTop: 24 },
+            children: /* @__PURE__ */ t.jsx(
+              "button",
+              {
+                onClick: ge,
+                disabled: !(o && m(o)),
+                style: {
+                  padding: "8px 24px",
+                  borderRadius: 4,
+                  background: o && m(o) ? "#1890ff" : "#ccc",
+                  color: "#fff",
+                  border: "none",
+                  cursor: o && m(o) ? "pointer" : "not-allowed",
+                  fontWeight: 500
+                },
+                children: "Select"
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) : null;
+};
+export {
+  Ae as AssetManager
+};

package/dist/simple-image-asset-manager.css

@@ -0,0 +1 @@
+.error{color:#c00;margin:1rem 0}

package/dist/types.d.ts

@@ -0,0 +1,44 @@
+export interface FileItem {
+    id: string;
+    url: string;
+    type: "FILE";
+    name: string;
+    parentFolderId: string | null;
+    thumbnail?: string;
+}
+export interface FolderItem {
+    id: string;
+    name: string;
+    type: "FOLDER";
+    parentFolderId: string | null;
+    thumbnail?: string;
+    count?: number;
+}
+export interface AssetManagerProps {
+    accept?: string;
+    request: (folderId?: string) => Promise<Array<FileItem | FolderItem>>;
+    title?: string;
+    upload: (blob: Blob) => Promise<string>;
+    onCreateFile: (params: {
+        name: string;
+        url: string;
+        parentFolderId: string | null;
+    }) => Promise<FileItem>;
+    onDeleteFile: (params: {
+        id: string;
+    }) => Promise<boolean>;
+    onDeleteFolder: (params: {
+        id: string;
+    }) => Promise<boolean>;
+    onUpdateFile: (item: FileItem) => Promise<FileItem>;
+    onUpdateFolder: (item: FolderItem) => Promise<FolderItem>;
+    onCreateFolder: (params: {
+        name: string;
+        parentFolderId: string | null;
+    }) => Promise<FolderItem>;
+    onSelect: (url: string) => void;
+    visible?: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean>>;
+    showUnacceptedFile?: boolean;
+    addFolderEnabled?: boolean;
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@thanhpv102/simple-image-asset-manager",
+  "version": "0.1.0",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "antd": "^6.0.0",
+    "cropperjs": "^1.5.13"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^7.1.11"
+  },
+  "license": "MIT",
+  "description": "A comprehensive file/image asset manager modal for easy-email-editor.",
+  "author": "thanhpv102",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/thanhpv102/easy-email-editor/tree/master/packages/simple-image-asset-manager"
+  },
+  "keywords": [
+    "react",
+    "image",
+    "asset",
+    "manager",
+    "modal",
+    "easy-email-editor"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "typecheck": "tsc --noEmit"
+  }
+}