@chaibuilder/pages 0.4.6-beta.2 → 0.4.6-beta.4

package/dist/{digital-asset-manager-Scnvw98W.js → digital-asset-manager-9X9QSmn9.js}

@@ -1,260 +1,262 @@
-import { jsxs as a, Fragment as j, jsx as e } from "react/jsx-runtime";
-import W, { useState as T, useCallback as C, useMemo as ne, useRef as oe, useEffect as ce, Suspense as Y } from "react";
-import { mergeClasses as O } from "@chaibuilder/sdk";
-import { Tabs as de, TabsList as ue, TabsTrigger as H, Button as v, TabsContent as V, Input as me, Card as he, CardContent as pe } from "@chaibuilder/sdk/ui";
-import { debounce as fe, find as ge, merge as ve } from "lodash-es";
-import { Search as xe, Film as ye, ImageIcon as Ne, Edit as Se, Trash2 as we, Loader2 as _, Upload as Ae } from "lucide-react";
-import { useDropzone as be } from "react-dropzone";
-import { useQueryClient as B, useMutation as Q, useInfiniteQuery as Ee } from "@tanstack/react-query";
-import { toast as N } from "sonner";
-import { W as z, X as M, Y as f, Z as Ce } from "./index-Ci9oNrDB.js";
-const Te = () => {
-  const l = z(), n = B(), o = M();
-  return Q({
+import { jsxs as a, Fragment as B, jsx as e } from "react/jsx-runtime";
+import W, { useState as S, useCallback as A, useMemo as re, useRef as oe, Suspense as O } from "react";
+import { mergeClasses as Y } from "@chaibuilder/sdk";
+import { Tabs as ce, TabsList as de, TabsTrigger as $, Button as f, TabsContent as H, Input as ue, Card as me, CardContent as he, Dialog as ge, DialogContent as pe, DialogHeader as fe, DialogTitle as ye, DialogDescription as ve, DialogFooter as xe } from "@chaibuilder/sdk/ui";
+import { debounce as Ne, find as Ae, merge as we } from "lodash-es";
+import { Search as Se, Film as be, ImageIcon as Ce, Edit as Ee, Trash2 as Te, Loader2 as V, Upload as De } from "lucide-react";
+import { useDropzone as Pe } from "react-dropzone";
+import { useQueryClient as Q, useMutation as R, useQuery as Ue } from "@tanstack/react-query";
+import { toast as b } from "sonner";
+import { W as z, X as F, Y as y, Z as ze } from "./index-D_vvEddR.js";
+const Fe = () => {
+  const t = z(), r = Q(), o = F();
+  return R({
     mutationFn: async ({
-      file: r,
-      folderId: c,
-      name: t
-    }) => o(l, {
-      action: f.UPLOAD_ASSET,
-      data: { file: r, folderId: c, name: t }
+      file: i,
+      folderId: d,
+      name: u
+    }) => o(t, {
+      action: y.UPLOAD_ASSET,
+      data: { file: i, folderId: d, name: u }
     }),
     onSuccess: () => {
-      n.invalidateQueries({
-        queryKey: [f.GET_ASSETS]
-      }), N.success("Asset uploaded successfully");
+      r.invalidateQueries({
+        queryKey: [y.GET_ASSETS]
+      }), b.success("Asset uploaded successfully");
     },
     onError: () => {
-      N.error("Failed to upload asset");
+      b.error("Failed to upload asset");
     }
   });
-}, Ue = () => {
-  const l = z(), n = B(), o = M();
-  return Q({
-    mutationFn: async (r) => o(l, {
-      action: f.DELETE_ASSET,
-      data: { id: r }
+}, Me = () => {
+  const t = z(), r = Q(), o = F();
+  return R({
+    mutationFn: async (i) => o(t, {
+      action: y.DELETE_ASSET,
+      data: { id: i }
     }),
     onSuccess: () => {
-      n.invalidateQueries({
-        queryKey: [f.GET_ASSETS]
-      }), N.success("Asset deleted successfully");
+      r.invalidateQueries({
+        queryKey: [y.GET_ASSETS]
+      }), b.success("Asset deleted successfully");
     },
     onError: () => {
-      N.error("Failed to delete asset");
+      b.error("Failed to delete asset");
     }
   });
-}, Fe = () => {
-  const l = z(), n = B(), o = M();
-  return Q({
-    mutationFn: async (r) => o(l, {
-      action: f.UPDATE_ASSET,
-      data: r
+}, Ie = () => {
+  const t = z(), r = Q(), o = F();
+  return R({
+    mutationFn: async (i) => o(t, {
+      action: y.UPDATE_ASSET,
+      data: i
     }),
     onSuccess: () => {
-      n.invalidateQueries({
-        queryKey: [f.GET_ASSETS]
-      }), N.success("Asset updated successfully");
+      r.invalidateQueries({
+        queryKey: [y.GET_ASSETS]
+      }), b.success("Asset updated successfully");
     },
     onError: () => {
-      N.error("Failed to update asset");
+      b.error("Failed to update asset");
     }
   });
-}, ze = (l = {}) => {
-  const n = z(), o = M(), { search: r, limit: c = 10 } = l;
-  return Ee({
-    queryKey: [Ce, f.GET_ASSETS, { search: r, limit: c }],
-    queryFn: async ({ pageParam: t = 1 }) => (await o(n, {
-      action: f.GET_ASSETS,
+}, ke = (t = {}) => {
+  const r = z(), o = F(), { search: i, page: d = 1, limit: u = 10 } = t;
+  return Ue({
+    queryKey: [ze, y.GET_ASSETS, i, d, u],
+    queryFn: async () => (await o(r, {
+      action: y.GET_ASSETS,
       data: {
-        search: r,
-        page: t,
-        limit: c
+        search: i,
+        page: d,
+        limit: u
       }
     })).data,
-    initialPageParam: 1,
-    getNextPageParam: (t) => ((t == null ? void 0 : t.page) ?? 0) * ((t == null ? void 0 : t.pageSize) ?? 0) < ((t == null ? void 0 : t.total) ?? 0) ? (t.page ?? 0) + 1 : void 0,
-    getPreviousPageParam: (t) => (t.page ?? 0) > 1 ? (t.page ?? 0) - 1 : void 0,
     retry: 1
   });
 };
-function Me() {
-  const [n, o] = T([]), [r, c] = T({
+function qe() {
+  const [r, o] = S([]), [i, d] = S({
     query: "",
+    page: 1,
     pageSize: 10
-  }), t = fe(() => r.query, 300)(), {
-    data: d,
-    isLoading: S,
-    fetchNextPage: w,
-    hasNextPage: u,
-    isFetchingNextPage: g
-  } = ze({
-    search: (t == null ? void 0 : t.toLowerCase().trim()) || "",
-    limit: r.pageSize
-  }), D = (d == null ? void 0 : d.pages.flatMap((p) => p.assets)) || [], { mutate: x, isPaused: h } = Fe(), { mutate: A, isPending: y } = Te(), { mutate: b, isPending: U } = Ue(), I = C(() => {
-    u && !g && w();
-  }, [w, u, g]), E = C((p) => {
-    c((m) => ({
-      ...m,
-      query: p
+  }), u = Ne(() => i.query, 300)(), { data: n, isLoading: C } = ke({
+    search: (u == null ? void 0 : u.toLowerCase().trim()) || "",
+    page: i.page,
+    limit: i.pageSize
+  }), v = n ? Math.ceil(n.total / n.pageSize) : 0, c = (n == null ? void 0 : n.page) || 1, g = c < v, m = c > 1, { mutate: E, isPending: M } = Ie(), { mutate: w, isPending: p } = Fe(), { mutate: T, isPending: D } = Me(), x = A(
+    (h) => {
+      h >= 1 && h <= v && d((N) => ({
+        ...N,
+        page: h
+      }));
+    },
+    [v]
+  ), I = A(() => {
+    g && x(c + 1);
+  }, [c, g, x]), k = A(() => {
+    m && x(c - 1);
+  }, [c, m, x]), q = A((h) => {
+    d((N) => ({
+      ...N,
+      query: h,
+      page: 1
+      // Reset to first page on new search
     }));
-  }, []), k = C(
-    (p) => {
-      o((m) => ge(m, { id: p.id }) ? [] : [p]);
+  }, []), P = A(
+    (h) => {
+      o((N) => Ae(N, { id: h.id }) ? [] : [h]);
     },
     [!1]
-  ), q = C(() => {
+  ), j = A(() => {
     o([]);
   }, []);
   return {
     // Data
-    query: (r == null ? void 0 : r.query) || "",
-    selectedAssets: n,
-    assets: D,
-    hasNextPage: u,
-    isFetchingNextPage: g,
+    query: (i == null ? void 0 : i.query) || "",
+    selectedAssets: r,
+    assets: (n == null ? void 0 : n.assets) || [],
+    currentPage: c,
+    totalPages: v,
+    hasNextPage: g,
+    hasPreviousPage: m,
     // Mutations
-    uploadAsset: A,
-    updateAsset: x,
-    deleteAsset: b,
-    loadMoreAssets: I,
-    updateSearchQuery: E,
-    clearSelectedAssets: q,
-    updateSelectedAssets: k,
+    uploadAsset: w,
+    updateAsset: E,
+    deleteAsset: T,
+    goToPage: x,
+    nextPage: I,
+    previousPage: k,
+    updateSearchQuery: q,
+    clearSelectedAssets: j,
+    updateSelectedAssets: P,
     // Loading
-    isLoadingAssets: S,
-    isUploadingAsset: y,
-    isUpdatingAsset: h,
-    isDeletingAsset: U
+    isLoadingAssets: C,
+    isUploadingAsset: p,
+    isUpdatingAsset: M,
+    isDeletingAsset: D
   };
 }
-const De = W.lazy(() => import("./asset-metadata-editor-CEFwXx62.js")), Ie = W.lazy(() => import("./image-editor-BQ6_F-iv.js"));
-function Oe({
-  close: l,
-  onSelect: n,
+const je = W.lazy(() => import("./asset-metadata-editor-r5vYHUfm.js")), _e = W.lazy(() => import("./image-editor-CwVua57o.js"));
+function Xe({
+  close: t,
+  onSelect: r,
   mode: o = "image"
 }) {
-  const c = ne(() => [o], [o]), [t, d] = T("browse"), [S, w] = T(null), [u, g] = T({ show: !1, file: "", name: "" }), {
+  const d = re(() => [o], [o]), [u, n] = S("browse"), [C, v] = S(null), [c, g] = S(null), [m, E] = S({ show: !1, file: "" }), {
     // Data
-    query: D,
-    assets: x,
-    selectedAssets: h,
-    hasNextPage: A,
-    isFetchingNextPage: y,
+    query: M,
+    assets: w,
+    selectedAssets: p,
     // Mutations
-    uploadAsset: b,
-    updateAsset: U,
-    deleteAsset: I,
-    loadMoreAssets: E,
-    updateSearchQuery: k,
-    clearSelectedAssets: q,
-    updateSelectedAssets: p,
+    uploadAsset: T,
+    updateAsset: D,
+    deleteAsset: x,
+    updateSearchQuery: I,
+    clearSelectedAssets: k,
+    updateSelectedAssets: q,
     // Loading
-    isLoadingAssets: m,
-    isUploadingAsset: R,
-    isUpdatingAsset: X
+    isLoadingAssets: P,
+    isUploadingAsset: j,
+    isUpdatingAsset: h
     // isDeletingAsset,
-  } = Me(), G = oe(null);
-  ce(() => {
-    const s = G.current;
-    if (!s) return;
-    const i = () => {
-      s.scrollHeight - s.scrollTop <= s.clientHeight * 1.5 && !m && A && !y && E();
-    };
-    return s.addEventListener("scroll", i), () => s.removeEventListener("scroll", i);
-  }, [m, E, A, y]);
-  const Z = C(
-    async (s) => new Promise((i, L) => {
-      const K = s[0], F = new FileReader();
-      F.readAsDataURL(K), F.onload = async () => {
-        const P = await b({
-          file: F.result,
+  } = qe(), N = oe(null), K = A(
+    async (s) => new Promise((l, _) => {
+      const G = s[0], U = new FileReader();
+      U.readAsDataURL(G), U.onload = async () => {
+        const L = await T({
+          file: U.result,
           folderId: null,
-          name: K.name
+          name: G.name
         });
-        d("browse"), i(P);
-      }, F.onerror = (P) => L(P);
+        n("browse"), l(L);
+      }, U.onerror = (L) => _(L);
     }),
-    [b]
-  ), { getRootProps: J, getInputProps: $, isDragActive: ee } = be({
-    onDrop: Z,
+    [T]
+  ), { getRootProps: X, getInputProps: Z, isDragActive: J } = Pe({
+    onDrop: K,
     accept: {
-      "image/*": c.includes("image") ? [] : [],
-      "video/*": c.includes("video") ? [] : []
+      "image/*": d.includes("image") ? [] : [],
+      "video/*": d.includes("video") ? [] : []
     },
     maxSize: 10 * 1024 * 1024
-  }), se = () => {
-    n([h[0].url]), l();
-  }, ae = async (s) => {
-    await I(s.id);
+  }), ee = () => {
+    r([p[0].url]), t();
+  }, se = async (s) => {
+    g(s);
+  }, ae = async () => {
+    c && (await x(c.id), g(null));
   }, te = (s) => {
-    w(s);
-  }, le = async (s, i) => {
-    await U(ve(s, i)), l();
+    v(s);
+  }, le = async (s, l) => {
+    await D(we(s, l)), t();
   }, ie = (s) => {
-    k(s.target.value);
-  }, re = async (s, i) => {
+    I(s.target.value);
+  }, ne = async (s, l) => {
     try {
-      i ? await b({
+      l ? await T({
         file: s,
         folderId: null,
-        name: u.name
-      }) : await U({ id: u.id, file: s }), g({ show: !1, file: "", name: "" }), d("browse");
-    } catch (L) {
-      console.error("Error saving edited image:", L);
+        name: m.name || ""
+      }) : await D({
+        id: m.id || "",
+        file: s
+      }), E({ show: !1, file: "" }), n("browse");
+    } catch (_) {
+      console.error("Error saving edited image:", _);
     }
   };
-  return /* @__PURE__ */ a(j, { children: [
+  return /* @__PURE__ */ a(B, { children: [
     /* @__PURE__ */ a("div", { className: "min-w-[700px] min-h-[600px] w-[900px] max-w-[900px]", children: [
       /* @__PURE__ */ e("h1", { className: "text-lg font-medium pb-4", children: "Digital Asset Manager" }),
       /* @__PURE__ */ a(
-        de,
+        ce,
         {
-          value: t,
-          onValueChange: (s) => d(s),
+          value: u,
+          onValueChange: (s) => n(s),
           className: "flex-1 flex flex-col h-full",
           children: [
             /* @__PURE__ */ a("div", { className: "flex justify-between items-center mb-2", children: [
-              /* @__PURE__ */ a(ue, { children: [
-                /* @__PURE__ */ e(H, { value: "browse", children: "Browse Assets" }),
-                /* @__PURE__ */ e(H, { value: "upload", children: "Upload" })
+              /* @__PURE__ */ a(de, { children: [
+                /* @__PURE__ */ e($, { value: "browse", children: "Browse Assets" }),
+                /* @__PURE__ */ e($, { value: "upload", children: "Upload" })
               ] }),
               /* @__PURE__ */ a("div", { className: "flex items-center gap-2", children: [
-                h.length > 0 && /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
-                  v,
+                p.length > 0 && /* @__PURE__ */ e(B, { children: /* @__PURE__ */ e(
+                  f,
                   {
                     variant: "outline",
                     size: "sm",
-                    onClick: () => q(),
+                    onClick: () => k(),
                     title: "Clear selection",
                     children: "Clear"
                   }
                 ) }),
                 /* @__PURE__ */ e(
-                  v,
+                  f,
                   {
                     size: "sm",
-                    onClick: se,
-                    disabled: h.length === 0,
+                    onClick: ee,
+                    disabled: p.length === 0,
                     children: "Select Asset"
                   }
                 )
               ] })
             ] }),
-            /* @__PURE__ */ a(V, { value: "browse", className: "flex-1 flex flex-col", children: [
+            /* @__PURE__ */ a(H, { value: "browse", className: "flex-1 flex flex-col", children: [
               /* @__PURE__ */ e("div", { className: "flex items-center gap-2 mb-2", children: /* @__PURE__ */ a("div", { className: "relative w-full", children: [
-                /* @__PURE__ */ e(xe, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
+                /* @__PURE__ */ e(Se, { className: "absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" }),
                 /* @__PURE__ */ e(
-                  me,
+                  ue,
                   {
                     placeholder: "Search assets...",
-                    value: D,
+                    value: M,
                     onChange: ie,
                     className: "pl-8"
                   }
                 )
               ] }) }),
-              m && x.length === 0 ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 overflow-y-auto max-h-[550px] p-1", children: [
+              P && w.length === 0 ? /* @__PURE__ */ a("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 overflow-y-auto max-h-[550px] p-1", children: [
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" }),
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" }),
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" }),
@@ -265,37 +267,37 @@ function Oe({
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" }),
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" }),
                 /* @__PURE__ */ e("div", { className: "bg-gray-200 h-64 w-full animate-pulse rounded" })
-              ] }) : x.length === 0 ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center h-full text-center p-12 h-[380px]", children: [
+              ] }) : w.length === 0 ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center justify-center h-full text-center p-12 h-[380px]", children: [
                 /* @__PURE__ */ a("div", { className: "text-muted-foreground mb-2", children: [
                   /* @__PURE__ */ e("h3", { className: "text-gray-800 font-medium", children: "No assets to display" }),
                   /* @__PURE__ */ e("p", { className: "text-sm", children: "You haven't uploaded any assets yet. Start by uploading your first asset." })
                 ] }),
-                /* @__PURE__ */ e("div", { className: "flex gap-2 pt-4", children: /* @__PURE__ */ e(v, { size: "lg", onClick: () => d("upload"), children: "Upload Assets" }) })
+                /* @__PURE__ */ e("div", { className: "flex gap-2 pt-4", children: /* @__PURE__ */ e(f, { size: "lg", onClick: () => n("upload"), children: "Upload Assets" }) })
               ] }) : /* @__PURE__ */ a(
                 "div",
                 {
-                  ref: G,
+                  ref: N,
                   className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2 overflow-y-auto max-h-[550px] p-1",
                   children: [
-                    x.map((s) => /* @__PURE__ */ e(
-                      he,
+                    w.map((s) => /* @__PURE__ */ e(
+                      me,
                       {
-                        className: O(
+                        className: Y(
                           "cursor-pointer overflow-hidden transition-all",
-                          h.some((i) => i.id === s.id) ? "ring-2 ring-primary" : "hover:ring-2 hover:ring-primary/20"
+                          p.some((l) => l.id === s.id) ? "ring-2 ring-primary" : "hover:ring-2 hover:ring-primary/20"
                         ),
-                        onClick: () => p(s),
-                        children: /* @__PURE__ */ a(pe, { className: "p-0 relative group", children: [
+                        onClick: () => q(s),
+                        children: /* @__PURE__ */ a(he, { className: "p-0 relative group", children: [
                           /* @__PURE__ */ a("div", { className: "aspect-square relative overflow-hidden bg-muted", children: [
                             s.type === "image" ? /* @__PURE__ */ e(
                               "img",
                               {
-                                src: s.url || "/placeholder.svg",
+                                src: s.thumbnailUrl || "/placeholder.svg",
                                 alt: s.name,
                                 className: "object-cover w-full h-full"
                               }
                             ) : /* @__PURE__ */ a("div", { className: "flex items-center justify-center h-full", children: [
-                              /* @__PURE__ */ e(ye, { className: "h-12 w-12 text-muted-foreground" }),
+                              /* @__PURE__ */ e(be, { className: "h-12 w-12 text-muted-foreground" }),
                               s.thumbnailUrl && /* @__PURE__ */ e(
                                 "img",
                                 {
@@ -307,53 +309,53 @@ function Oe({
                             ] }),
                             /* @__PURE__ */ a("div", { className: "absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
                               /* @__PURE__ */ e(
-                                v,
+                                f,
                                 {
                                   variant: "secondary",
                                   size: "icon",
                                   className: "h-8 w-8",
-                                  onClick: (i) => {
-                                    i.stopPropagation(), te(s);
+                                  onClick: (l) => {
+                                    l.stopPropagation(), te(s);
                                   },
-                                  children: /* @__PURE__ */ e(Ne, { className: "h-4 w-4" })
+                                  children: /* @__PURE__ */ e(Ce, { className: "h-4 w-4" })
                                 }
                               ),
                               /* @__PURE__ */ e(
-                                v,
+                                f,
                                 {
                                   variant: "secondary",
                                   size: "icon",
                                   className: "h-8 w-8",
-                                  onClick: (i) => {
-                                    i.stopPropagation(), g({
+                                  onClick: (l) => {
+                                    l.stopPropagation(), E({
                                       id: s.id,
                                       show: !0,
                                       file: s.url,
                                       name: s.name
                                     });
                                   },
-                                  children: /* @__PURE__ */ e(Se, { className: "h-4 w-4" })
+                                  children: /* @__PURE__ */ e(Ee, { className: "h-4 w-4" })
                                 }
                               ),
                               /* @__PURE__ */ e(
-                                v,
+                                f,
                                 {
                                   variant: "destructive",
                                   size: "icon",
                                   className: "h-8 w-8",
-                                  onClick: (i) => {
-                                    i.stopPropagation(), ae(s);
+                                  onClick: (l) => {
+                                    l.stopPropagation(), se(s);
                                   },
-                                  children: /* @__PURE__ */ e(we, { className: "h-4 w-4" })
+                                  children: /* @__PURE__ */ e(Te, { className: "h-4 w-4" })
                                 }
                               )
                             ] }),
-                            h.some((i) => i.id === s.id) && /* @__PURE__ */ e("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ e(
+                            p.some((l) => l.id === s.id) && /* @__PURE__ */ e("div", { className: "absolute top-2 left-2", children: /* @__PURE__ */ e(
                               "input",
                               {
                                 type: "checkbox",
-                                checked: h.some(
-                                  (i) => i.id === s.id
+                                checked: p.some(
+                                  (l) => l.id === s.id
                                 ),
                                 readOnly: !0,
                                 className: "rounded-full"
@@ -370,54 +372,41 @@ function Oe({
                               }
                             ),
                             /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground flex items-center justify-between", children: [
-                              /* @__PURE__ */ e("span", { children: ke((s == null ? void 0 : s.size) || 0) }),
-                              /* @__PURE__ */ e("span", { children: qe(s.createdAt) })
+                              /* @__PURE__ */ e("span", { children: Le((s == null ? void 0 : s.size) || 0) }),
+                              /* @__PURE__ */ e("span", { children: Be(s.createdAt) })
                             ] })
                           ] })
                         ] })
                       },
                       s.id
                     )),
-                    m && x.length > 0 && /* @__PURE__ */ e("div", { className: "col-span-full flex justify-center py-4", children: /* @__PURE__ */ e(_, { className: "h-6 w-6 animate-spin text-muted-foreground" }) }),
-                    !m && A && /* @__PURE__ */ e("div", { className: "col-span-full flex justify-center py-4", children: /* @__PURE__ */ a(
-                      v,
-                      {
-                        variant: "outline",
-                        onClick: () => E(),
-                        disabled: y,
-                        className: "flex items-center gap-2",
-                        children: [
-                          y ? /* @__PURE__ */ e(_, { className: "h-4 w-4 animate-spin" }) : null,
-                          "Load More"
-                        ]
-                      }
-                    ) })
+                    P && w.length > 0 && /* @__PURE__ */ e("div", { className: "col-span-full flex justify-center py-4", children: /* @__PURE__ */ e(V, { className: "h-6 w-6 animate-spin text-muted-foreground" }) })
                   ]
                 }
               )
             ] }),
-            /* @__PURE__ */ e(V, { value: "upload", className: "flex-1 ", children: /* @__PURE__ */ a(
+            /* @__PURE__ */ e(H, { value: "upload", className: "flex-1 ", children: /* @__PURE__ */ a(
               "div",
               {
-                ...J(),
-                className: O(
+                ...X(),
+                className: Y(
                   "border-2 border-dashed rounded-lg h-[380px] flex flex-col items-center justify-center text-center cursor-pointer hover:bg-gray-50",
-                  ee ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+                  J ? "border-primary bg-primary/5" : "border-muted-foreground/20"
                 ),
                 children: [
-                  /* @__PURE__ */ e("input", { ...$() }),
-                  X || R ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center", children: [
-                    /* @__PURE__ */ e(_, { className: "h-12 w-12 text-primary animate-spin mb-4" }),
+                  /* @__PURE__ */ e("input", { ...Z() }),
+                  h || j ? /* @__PURE__ */ a("div", { className: "flex flex-col items-center", children: [
+                    /* @__PURE__ */ e(V, { className: "h-12 w-12 text-primary animate-spin mb-4" }),
                     /* @__PURE__ */ e("h3", { className: "text-lg font-medium mb-1", children: "Uploading files..." }),
                     /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: "Please wait while your files are being processed." })
-                  ] }) : /* @__PURE__ */ a(j, { children: [
-                    /* @__PURE__ */ e(Ae, { className: "h-12 w-12 text-muted-foreground mb-4" }),
+                  ] }) : /* @__PURE__ */ a(B, { children: [
+                    /* @__PURE__ */ e(De, { className: "h-12 w-12 text-muted-foreground mb-4" }),
                     /* @__PURE__ */ e("h3", { className: "text-lg font-medium mb-1", children: "Drag & drop files here" }),
                     /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground mb-4", children: "or click to browse your files" }),
                     /* @__PURE__ */ a("div", { className: "text-xs text-muted-foreground", children: [
                       /* @__PURE__ */ a("p", { children: [
                         "Accepted file types: ",
-                        c.join(", ")
+                        d.join(", ")
                       ] }),
                       /* @__PURE__ */ a("p", { children: [
                         "Maximum file size: ",
@@ -433,39 +422,60 @@ function Oe({
         }
       )
     ] }),
-    S && /* @__PURE__ */ e(Y, { fallback: /* @__PURE__ */ e("div", { children: "Loading..." }), children: /* @__PURE__ */ e(
-      De,
+    C && /* @__PURE__ */ e(O, { fallback: /* @__PURE__ */ e("div", { children: "Loading..." }), children: /* @__PURE__ */ e(
+      je,
       {
-        asset: S,
-        onSave: (s) => le(S, s),
+        asset: C,
+        onSave: (s) => le(C, s),
         onCancel: () => {
-          w(null);
+          v(null);
         }
       }
     ) }),
-    u.show && /* @__PURE__ */ e(Y, { fallback: /* @__PURE__ */ e("div", { children: "Loading..." }), children: /* @__PURE__ */ e(
-      Ie,
+    m.show && /* @__PURE__ */ e(O, { fallback: /* @__PURE__ */ e("div", { children: "Loading..." }), children: /* @__PURE__ */ e(
+      _e,
+      {
+        imageUrl: m.file,
+        onSave: ne,
+        onClose: () => E({ show: !1, file: "" }),
+        defaultSavedImageName: m.name,
+        isEditing: !!m.id
+      }
+    ) }),
+    c && /* @__PURE__ */ e(
+      ge,
       {
-        imageUrl: u.file,
-        onSave: re,
-        onClose: () => g({ show: !1, file: "", name: "" }),
-        defaultSavedImageName: u.name,
-        isEditing: !!u.id
+        open: !!c,
+        onOpenChange: () => g(null),
+        children: /* @__PURE__ */ a(pe, { children: [
+          /* @__PURE__ */ a(fe, { children: [
+            /* @__PURE__ */ e(ye, { children: "Delete Asset" }),
+            /* @__PURE__ */ a(ve, { children: [
+              'Are you sure you want to delete "',
+              c.name,
+              '"? This action cannot be undone.'
+            ] })
+          ] }),
+          /* @__PURE__ */ a(xe, { className: "gap-2 sm:gap-0", children: [
+            /* @__PURE__ */ e(f, { variant: "outline", onClick: () => g(null), children: "Cancel" }),
+            /* @__PURE__ */ e(f, { variant: "destructive", onClick: ae, children: "Delete" })
+          ] })
+        ] })
       }
-    ) })
+    )
   ] });
 }
-function ke(l) {
-  return l < 1024 ? l + " B" : l < 1024 * 1024 ? (l / 1024).toFixed(1) + " KB" : l < 1024 * 1024 * 1024 ? (l / (1024 * 1024)).toFixed(1) + " MB" : (l / (1024 * 1024 * 1024)).toFixed(1) + " GB";
+function Le(t) {
+  return t < 1024 ? `${t.toFixed(2)} KB` : `${(t / 1024).toFixed(2)} MB`;
 }
-function qe(l) {
-  const n = new Date(l);
+function Be(t) {
+  const r = new Date(t);
   return new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric"
-  }).format(n);
+  }).format(r);
 }
 export {
-  Oe as default
+  Xe as default
 };