@chaibuilder/pages 0.5.2 → 0.5.3-rc.2

package/dist/{digital-asset-manager-DJEJxRa5.js → digital-asset-manager-CXnvfs-d.js}

@@ -1,140 +1,140 @@
-import { jsx as e, jsxs as i, Fragment as I } from "react/jsx-runtime";
-import ie, { useState as f, useMemo as we, useEffect as G, useCallback as D, Suspense as Ae } from "react";
+import { jsx as e, jsxs as i, Fragment as F } from "react/jsx-runtime";
+import ie, { useState as f, useMemo as Ae, useEffect as R, useCallback as k, Suspense as Se } from "react";
 import { mergeClasses as ae } from "@chaibuilder/sdk";
-import { Button as u, Label as L, Textarea as Se, Input as Ce, Dialog as Ee, DialogContent as Te, DialogHeader as ke, DialogTitle as ze, DialogDescription as De, DialogFooter as je, Switch as Pe, TooltipProvider as Ie, Tooltip as Fe, TooltipTrigger as Ue, TooltipContent as $e } from "@chaibuilder/sdk/ui";
-import { find as _e, merge as Be, pick as qe, first as Le } from "lodash-es";
-import { Loader as F, AlertCircle as Me, ChevronLeft as Oe, Pencil as Ke, Search as Qe, Archive as Ge, Film as Re, ImageIcon as We, Edit as Ve, Trash2 as Ye, Check as He, Upload as Xe, AlertTriangle as Ze } from "lucide-react";
-import { useDropzone as Je } from "react-dropzone";
-import { useQueryClient as R, useMutation as W, useQuery as le } from "@tanstack/react-query";
+import { Button as h, Label as M, Textarea as Ce, Input as Ee, Dialog as Te, DialogContent as ke, DialogHeader as ze, DialogTitle as De, DialogDescription as Pe, DialogFooter as je, Switch as Ie, TooltipProvider as Fe, Tooltip as Ue, TooltipTrigger as $e, TooltipContent as _e } from "@chaibuilder/sdk/ui";
+import { find as Be, merge as qe, pick as Le, first as Me } from "lodash-es";
+import { Loader as U, AlertCircle as Oe, ChevronLeft as Ke, Pencil as Qe, Search as Ge, Archive as Re, Film as We, ImageIcon as Ve, Edit as Ye, Trash2 as He, Check as Xe, Upload as Ze, AlertTriangle as Je } from "lucide-react";
+import { useDropzone as et } from "react-dropzone";
+import { useQueryClient as W, useMutation as V, useQuery as le } from "@tanstack/react-query";
 import { toast as j } from "sonner";
-import { W as U, X as $, Y as y, Z as _ } from "./index-TNPTcXFM.js";
-const et = () => {
-  const n = U(), r = R(), s = $();
-  return W({
+import { W as $, X as _, Y as N, Z as B } from "./index-C92l-a7n.js";
+const tt = () => {
+  const n = $(), l = W(), c = _();
+  return V({
     mutationFn: async ({
       file: a,
-      folderId: d,
-      name: l,
-      optimize: g = !0
-    }) => s(n, {
-      action: y.UPLOAD_ASSET,
-      data: { file: a, folderId: d, name: l, optimize: g }
+      folderId: m,
+      name: r,
+      optimize: d = !0
+    }) => c(n, {
+      action: N.UPLOAD_ASSET,
+      data: { file: a, folderId: m, name: r, optimize: d }
     }),
     onSuccess: (a) => {
       if (a != null && a.error)
         throw new Error(a == null ? void 0 : a.error);
-      r.invalidateQueries({
-        queryKey: [_, y.GET_ASSETS]
+      l.invalidateQueries({
+        queryKey: [B, N.GET_ASSETS]
       }), j.success("Asset uploaded successfully");
     },
     onError: () => {
       j.error("Failed to upload asset");
     }
   });
-}, tt = () => {
-  const n = U(), r = R(), s = $();
-  return W({
-    mutationFn: async (a) => s(n, {
-      action: y.DELETE_ASSET,
+}, it = () => {
+  const n = $(), l = W(), c = _();
+  return V({
+    mutationFn: async (a) => c(n, {
+      action: N.DELETE_ASSET,
       data: { id: a }
     }),
     onSuccess: (a) => {
       if (a != null && a.error)
         throw new Error(a == null ? void 0 : a.error);
-      r.invalidateQueries({
-        queryKey: [_, y.GET_ASSETS]
+      l.invalidateQueries({
+        queryKey: [B, N.GET_ASSETS]
       }), j.success("Asset deleted successfully");
     },
     onError: () => {
       j.error("Failed to delete asset");
     }
   });
-}, it = () => {
-  const n = U(), r = R(), s = $();
-  return W({
-    mutationFn: async (a) => s(n, {
-      action: y.UPDATE_ASSET,
+}, at = () => {
+  const n = $(), l = W(), c = _();
+  return V({
+    mutationFn: async (a) => c(n, {
+      action: N.UPDATE_ASSET,
       data: a
     }),
     onSuccess: (a) => {
       if (a != null && a.error)
         throw new Error(a == null ? void 0 : a.error);
-      r.invalidateQueries({
-        queryKey: [_, y.GET_ASSETS]
+      l.invalidateQueries({
+        queryKey: [B, N.GET_ASSETS]
       }), j.success("Asset updated successfully");
     },
     onError: () => {
       j.error("Failed to update asset");
     }
   });
-}, at = (n = {}) => {
-  const r = U(), s = $(), { search: a, page: d = 1, limit: l = 30 } = n;
+}, lt = (n = {}) => {
+  const l = $(), c = _(), { search: a, page: m = 1, limit: r = 30 } = n;
   return le({
-    queryKey: [_, y.GET_ASSETS, a, d, l],
+    queryKey: [B, N.GET_ASSETS, a, m, r],
     queryFn: async () => {
-      const g = await s(r, {
-        action: y.GET_ASSETS,
+      const d = await c(l, {
+        action: N.GET_ASSETS,
         data: {
           search: a,
-          page: d,
-          limit: l
+          page: m,
+          limit: r
         }
       });
-      return g.page = d, g.limit = l, g;
+      return d.page = m, d.limit = r, d;
     },
     staleTime: 1e3 * 60 * 5,
     retry: 1
   });
-}, lt = (n) => {
-  const r = U(), s = $();
+}, rt = (n) => {
+  const l = $(), c = _();
   return le({
-    queryKey: [_, y.GET_ASSET, n],
-    queryFn: async () => n ? await s(r, {
-      action: y.GET_ASSET,
+    queryKey: [B, N.GET_ASSET, n],
+    queryFn: async () => n ? await c(l, {
+      action: N.GET_ASSET,
       data: { id: n }
     }) : null,
     staleTime: 1e3 * 60 * 5,
     retry: 1
   });
 };
-function rt(n) {
-  const r = isNaN(n) ? 0 : typeof n == "number" ? n : parseInt(n);
-  return r ? r < 1024 ? `${r.toFixed(2)} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(2)} KB` : `${(r / (1024 * 1024)).toFixed(2)} MB` : "0 B";
+function nt(n) {
+  const l = isNaN(n) ? 0 : typeof n == "number" ? n : parseInt(n);
+  return l ? l < 1024 ? `${l.toFixed(2)} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(2)} KB` : `${(l / (1024 * 1024)).toFixed(2)} MB` : "0 B";
 }
 function ee(n) {
   if (!n) return "N/A";
-  const r = new Date(n);
+  const l = new Date(n);
   return new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     year: "numeric",
     hour: "2-digit",
     minute: "2-digit"
-  }).format(r);
+  }).format(l);
 }
-function te(n, r) {
-  let s = n, a = r == null ? void 0 : r.description;
-  return (!a || typeof a != "string") && (a = ""), (!s || typeof s != "string") && (s = ""), s !== a;
+function te(n, l) {
+  let c = n, a = l == null ? void 0 : l.description;
+  return (!a || typeof a != "string") && (a = ""), (!c || typeof c != "string") && (c = ""), c !== a;
 }
-const nt = ({
+const st = ({
   assetId: n,
-  onBack: r,
-  onEdit: s,
+  onBack: l,
+  onEdit: c,
   onSave: a,
-  isSaving: d
+  isSaving: m
 }) => {
-  var N, C, h;
-  const { data: l, isLoading: g, isError: p } = lt(n || ""), [v, m] = f("");
+  var x, C, E;
+  const { data: r, isLoading: d, isError: y } = rt(n || ""), [g, u] = f("");
   return ie.useEffect(() => {
-    l != null && l.description && m(l.description);
-  }, [l]), g ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ e(F, { className: "h-8 w-8 animate-spin" }) }) : p || !(l != null && l.id) ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "text-center max-w-md mx-auto p-6", children: [
-    /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e(Me, { className: "h-12 w-12 text-gray-400" }) }),
+    r != null && r.description && u(r.description);
+  }, [r]), d ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ e(U, { className: "h-8 w-8 animate-spin" }) }) : y || !(r != null && r.id) ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ i("div", { className: "text-center max-w-md mx-auto p-6", children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e(Oe, { className: "h-12 w-12 text-gray-400" }) }),
     /* @__PURE__ */ e("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: "No Asset Found" }),
-    /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 mb-6", children: p ? "There was an error loading the asset. Please try again later." : "The asset you're looking for doesn't exist or has been removed." }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 mb-6", children: y ? "There was an error loading the asset. Please try again later." : "The asset you're looking for doesn't exist or has been removed." }),
     /* @__PURE__ */ i("div", { className: "flex justify-center gap-4", children: [
-      /* @__PURE__ */ e(u, { variant: "outline", onClick: r, children: "Back to Assets" }),
-      p && /* @__PURE__ */ e(
-        u,
+      /* @__PURE__ */ e(h, { variant: "outline", onClick: l, children: "Back to Assets" }),
+      y && /* @__PURE__ */ e(
+        h,
         {
           variant: "default",
           onClick: () => window.location.reload(),
@@ -145,28 +145,28 @@ const nt = ({
   ] }) }) : /* @__PURE__ */ i("div", { className: "flex-1 flex flex-col gap-y-4 overflow-hidden", children: [
     /* @__PURE__ */ i("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ i(
-        u,
+        h,
         {
           variant: "outline",
           size: "sm",
-          onClick: r,
-          disabled: d,
+          onClick: l,
+          disabled: m,
           children: [
-            /* @__PURE__ */ e(Oe, { className: "h-4 w-4" }),
+            /* @__PURE__ */ e(Ke, { className: "h-4 w-4" }),
             "Back to Assets"
           ]
         }
       ),
       /* @__PURE__ */ i("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ e(u, { variant: "outline", onClick: r, disabled: d, children: "Cancel" }),
+        /* @__PURE__ */ e(h, { variant: "outline", onClick: l, disabled: m, children: "Cancel" }),
         /* @__PURE__ */ i(
-          u,
+          h,
           {
             variant: "default",
-            onClick: () => s(l),
-            disabled: d,
+            onClick: () => c(r),
+            disabled: m,
             children: [
-              /* @__PURE__ */ e(Ke, { className: "h-4 w-4" }),
+              /* @__PURE__ */ e(Qe, { className: "h-4 w-4" }),
               "Edit Image"
             ]
           }
@@ -177,74 +177,74 @@ const nt = ({
       /* @__PURE__ */ e("div", { className: "relative h-[calc(80vh-200px)] w-full flex items-start justify-center", children: /* @__PURE__ */ e(
         "img",
         {
-          src: `${l.url}?v=${((N = l.metadata) == null ? void 0 : N.updatedAt) || l.createdAt}`,
-          alt: l.name,
+          src: `${r.url}?v=${((x = r.metadata) == null ? void 0 : x.updatedAt) || r.createdAt}`,
+          alt: r.name,
           className: "w-full h-full object-contain rounded-lg max-h-max max-w-max"
         }
       ) }),
       /* @__PURE__ */ i("div", { className: "space-y-6", children: [
         /* @__PURE__ */ i("div", { className: "grid gap-3 border rounded-md pt-2 bg-gray-100", children: [
-          /* @__PURE__ */ e(L, { className: "w-full text-center", children: "Details" }),
+          /* @__PURE__ */ e(M, { className: "w-full text-center", children: "Details" }),
           /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2 bg-white", children: [
-            { label: "File Name", value: l.name },
-            { label: "Type", value: l.type, capitalize: !0 },
+            { label: "File Name", value: r.name },
+            { label: "Type", value: r.type, capitalize: !0 },
             {
               label: "Format",
-              value: ((C = l.metadata) == null ? void 0 : C.format) || l.type,
+              value: ((C = r.metadata) == null ? void 0 : C.format) || r.type,
               capitalize: !0
             },
             {
               label: "Size",
-              value: rt(l.size)
+              value: nt(r.size)
             },
             {
               label: "Dimensions",
-              value: `${l.width || 0} × ${l.height || 0}`
+              value: `${r.width || 0} × ${r.height || 0}`
             },
             {
               label: "Created",
-              value: ee(l.createdAt)
+              value: ee(r.createdAt)
             },
             {
               label: "Updated",
               value: ee(
-                ((h = l.metadata) == null ? void 0 : h.updatedAt) || l.createdAt
+                ((E = r.metadata) == null ? void 0 : E.updatedAt) || r.createdAt
               )
             }
-          ].map((o) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(L, { className: "w-max text-left px-2 w-1/4 font-normal text-gray-700", children: o.label }),
+          ].map((s) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(M, { className: "w-max text-left px-2 w-1/4 font-normal text-gray-700", children: s.label }),
             ":",
             /* @__PURE__ */ e(
               "div",
               {
-                className: "w-max text-left font-medium text-gray-900" + o.capitalize ? " capitalize" : "",
-                children: o.value
+                className: "w-max text-left font-medium text-gray-900" + s.capitalize ? " capitalize" : "",
+                children: s.value
               }
             )
-          ] }, o.label)) })
+          ] }, s.label)) })
         ] }),
-        l.usedOn && l.usedOn.length > 0 && /* @__PURE__ */ i("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ e(L, { children: "Used On" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2", children: l.usedOn.map((o, b) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e("div", { className: "w-max text-left font-medium text-gray-900", children: o.name }),
+        r.usedOn && r.usedOn.length > 0 && /* @__PURE__ */ i("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ e(M, { children: "Used On" }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2", children: r.usedOn.map((s, b) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "w-max text-left font-medium text-gray-900", children: s.name }),
             /* @__PURE__ */ i("div", { className: "text-gray-500", children: [
               "(",
-              o.slug,
+              s.slug,
               ")"
             ] })
           ] }, b)) })
         ] }),
         /* @__PURE__ */ i("div", { className: "grid gap-3 border rounded-md pt-2 bg-gray-100 relative", children: [
-          /* @__PURE__ */ e(L, { className: "w-full text-center", children: "Description" }),
+          /* @__PURE__ */ e(M, { className: "w-full text-center", children: "Description" }),
           /* @__PURE__ */ e(
-            Se,
+            Ce,
             {
               id: "description",
-              value: v,
+              value: g,
               placeholder: "Enter a description for the asset",
-              onChange: (o) => m(o.target.value),
+              onChange: (s) => u(s.target.value),
               rows: 3,
-              disabled: d,
+              disabled: m,
               className: "hover:border-black/40 bg-white"
             }
           ),
@@ -252,11 +252,11 @@ const nt = ({
             "button",
             {
               type: "button",
-              onClick: () => a(v),
-              disabled: d || !te(v, l),
-              className: `py-0 bg-blue-500 text-white px-3 py-0.5 rounded-md text-sm ${d || !te(v, l) ? "opacity-50 cursor-not-allowed" : ""}`,
-              children: d ? /* @__PURE__ */ i(I, { children: [
-                /* @__PURE__ */ e(F, { className: "h-4 w-4 mr-2 animate-spin" }),
+              onClick: () => a(g),
+              disabled: m || !te(g, r),
+              className: `py-0 bg-blue-500 text-white px-3 py-0.5 rounded-md text-sm ${m || !te(g, r) ? "opacity-50 cursor-not-allowed" : ""}`,
+              children: m ? /* @__PURE__ */ i(F, { children: [
+                /* @__PURE__ */ e(U, { className: "h-4 w-4 mr-2 animate-spin" }),
                 "Saving..."
               ] }) : "Save"
             }
@@ -265,63 +265,73 @@ const nt = ({
       ] })
     ] })
   ] });
-}, st = ie.lazy(() => import("./image-editor-CzFST20j.js"));
-function ct(n) {
-  const r = isNaN(n) ? 0 : typeof n == "number" ? n : parseInt(n);
-  return r ? r < 1024 ? `${r.toFixed(2)} B` : r < 1024 * 1024 ? `${(r / 1024).toFixed(2)} KB` : `${(r / (1024 * 1024)).toFixed(2)} MB` : "0 B";
+}, ct = ie.lazy(() => import("./image-editor-CzFST20j.js"));
+function ot(n) {
+  const l = isNaN(n) ? 0 : typeof n == "number" ? n : parseInt(n);
+  return l ? l < 1024 ? `${l.toFixed(2)} B` : l < 1024 * 1024 ? `${(l / 1024).toFixed(2)} KB` : `${(l / (1024 * 1024)).toFixed(2)} MB` : "0 B";
 }
-const ot = ({
+const dt = ({
   isUpdatingAsset: n,
-  allowedTypes: r,
-  maxFileSize: s,
+  allowedTypes: l,
+  maxFileSize: c,
   uploadAsset: a,
-  isUploadingAsset: d
+  isUploadingAsset: m,
+  onUploaded: r
 }) => {
-  const [l, g] = f(() => {
-    const h = localStorage.getItem("chai_optimize_images");
-    return h !== null ? h === "true" : !0;
+  const [d, y] = f(() => {
+    const s = localStorage.getItem("chai_optimize_images");
+    return s !== null ? s === "true" : !0;
   });
-  G(() => {
-    localStorage.setItem("chai_optimize_images", l.toString());
-  }, [l]);
-  const p = n || d, v = D(
-    async (h) => new Promise((o, b) => {
-      const B = h[0], E = new FileReader();
-      E.readAsDataURL(B), E.onload = async () => {
-        const P = await a({
-          file: E.result,
-          folderId: void 0,
-          name: B.name,
-          optimize: l
-        });
-        o(P);
-      }, E.onerror = (P) => b(P);
+  R(() => {
+    localStorage.setItem("chai_optimize_images", d.toString());
+  }, [d]);
+  const g = n || m, u = k(
+    async (s) => new Promise((b, q) => {
+      const I = s[0], z = new FileReader();
+      z.readAsDataURL(I), z.onload = async () => {
+        a(
+          {
+            file: z.result,
+            folderId: void 0,
+            name: I.name,
+            optimize: d
+          },
+          {
+            onSuccess: (v) => {
+              r && r(v), b(v);
+            },
+            onError: (v) => {
+              q(v);
+            }
+          }
+        );
+      }, z.onerror = (v) => q(v);
     }),
-    [a, l]
-  ), { getRootProps: m, getInputProps: N, isDragActive: C } = Je({
-    onDrop: v,
+    [a, d]
+  ), { getRootProps: x, getInputProps: C, isDragActive: E } = et({
+    onDrop: u,
     accept: {
-      "image/*": r.includes("image") ? [] : []
+      "image/*": l.includes("image") ? [] : []
     },
-    maxSize: s * 1024 * 1024,
-    disabled: n || d
+    maxSize: c * 1024 * 1024,
+    disabled: n || m
   });
   return /* @__PURE__ */ e(
     "div",
     {
-      className: `flex flex-col items-center justify-center w-full border-2 hover:border-black/50 border-dashed p-0 rounded-lg border-slate-300 py-2 h-[60px] ${p ? "opacity-90 bg-gray-100 pointer-events-none" : "hover:border-black/50 bg-gray-100 hover:bg-gray-100"}`,
+      className: `flex flex-col items-center justify-center w-full border-2 hover:border-black/50 border-dashed p-0 rounded-lg border-slate-300 py-2 h-[60px] ${g ? "opacity-90 bg-gray-100 pointer-events-none" : "hover:border-black/50 bg-gray-100 hover:bg-gray-100"}`,
       children: /* @__PURE__ */ i(
         "div",
         {
-          ...m(),
+          ...x(),
           className: ae(
             "rounded-lg text-center cursor-pointer w-full h-max flex flex-col justify-center",
-            p ? "items-start" : "items-center",
-            C ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+            g ? "items-start" : "items-center",
+            E ? "border-primary bg-primary/5" : "border-muted-foreground/20"
           ),
           children: [
-            /* @__PURE__ */ e("input", { ...N() }),
-            p ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center px-6", children: /* @__PURE__ */ i(
+            /* @__PURE__ */ e("input", { ...C() }),
+            g ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center px-6", children: /* @__PURE__ */ i(
               "div",
               {
                 className: "leading-tight flex items-center justify-center gap-2",
@@ -330,7 +340,7 @@ const ot = ({
                     "div",
                     {
                       className: "flex items-center justify-center rounded-full bg-indigo-100 p-2",
-                      children: /* @__PURE__ */ e(F, { className: "h-4 w-4 text-indigo-500 animate-spin" })
+                      children: /* @__PURE__ */ e(U, { className: "h-4 w-4 text-indigo-500 animate-spin" })
                     }
                   ),
                   /* @__PURE__ */ i("div", { className: "text-left", children: [
@@ -354,7 +364,7 @@ const ot = ({
                       "div",
                       {
                         className: "flex items-center justify-center rounded-full bg-indigo-100 p-2 border border-indigo-500",
-                        children: /* @__PURE__ */ e(Xe, { className: "h-4 w-4 text-indigo-500" })
+                        children: /* @__PURE__ */ e(Ze, { className: "h-4 w-4 text-indigo-500" })
                       }
                     ),
                     /* @__PURE__ */ i("div", { className: "text-left", children: [
@@ -367,14 +377,14 @@ const ot = ({
                         /* @__PURE__ */ i("span", { className: "", children: [
                           "Accepted file types:",
                           " ",
-                          /* @__PURE__ */ e("span", { className: "capitalize text-indigo-400", children: r.join(", ") }),
+                          /* @__PURE__ */ e("span", { className: "capitalize text-indigo-400", children: l.join(", ") }),
                           " & "
                         ] }),
                         /* @__PURE__ */ i("span", { children: [
                           "Max file size:",
                           " ",
                           /* @__PURE__ */ i("span", { className: "capitalize text-indigo-400", children: [
-                            s,
+                            c,
                             " MB"
                           ] })
                         ] })
@@ -391,34 +401,34 @@ const ot = ({
                     /* @__PURE__ */ e(
                       "span",
                       {
-                        className: l ? "text-indigo-600" : "text-gray-400",
-                        children: l ? "On" : "Off"
+                        className: d ? "text-indigo-600" : "text-gray-400",
+                        children: d ? "On" : "Off"
                       }
                     )
                   ] }),
                   /* @__PURE__ */ e(
-                    Pe,
+                    Ie,
                     {
-                      checked: l,
-                      onCheckedChange: (h) => {
-                        g(h);
+                      checked: d,
+                      onCheckedChange: (s) => {
+                        y(s);
                       },
-                      onClick: (h) => {
-                        h.stopPropagation();
+                      onClick: (s) => {
+                        s.stopPropagation();
                       },
                       className: "data-[state=checked]:bg-indigo-500"
                     }
                   )
                 ] }),
-                /* @__PURE__ */ e(Ie, { children: /* @__PURE__ */ i(Fe, { children: [
-                  /* @__PURE__ */ e(Ue, { asChild: !0, children: /* @__PURE__ */ e(
+                /* @__PURE__ */ e(Fe, { children: /* @__PURE__ */ i(Ue, { children: [
+                  /* @__PURE__ */ e($e, { asChild: !0, children: /* @__PURE__ */ e(
                     "span",
                     {
-                      className: `text-amber-500 flex items-center cursor-help ${l ? "invisible" : ""}`,
-                      children: /* @__PURE__ */ e(Ze, { className: "h-4 w-4 mr-1" })
+                      className: `text-amber-500 flex items-center cursor-help ${d ? "invisible" : ""}`,
+                      children: /* @__PURE__ */ e(Je, { className: "h-4 w-4 mr-1" })
                     }
                   ) }),
-                  /* @__PURE__ */ e($e, { side: "top", children: /* @__PURE__ */ i("p", { className: "text-white text-xs", children: [
+                  /* @__PURE__ */ e(_e, { side: "top", children: /* @__PURE__ */ i("p", { className: "text-white text-xs", children: [
                     "Warning: Unoptimized images may affect ",
                     /* @__PURE__ */ e("br", {}),
                     " performance and page load times"
@@ -432,48 +442,48 @@ const ot = ({
     }
   );
 };
-function yt({
+function bt({
   close: n,
-  onSelect: r,
-  mode: s = "image",
+  onSelect: l,
+  mode: c = "image",
   assetId: a
 }) {
-  const g = we(() => [s], [s]), [p, v] = f(null), [m, N] = f(null), [C, h] = f(null), [o, b] = f({ show: !1, file: "" }), [B, E] = f(!1), [P, M] = f(
+  const d = Ae(() => [c], [c]), [y, g] = f(null), [u, x] = f(null), [C, E] = f(null), [s, b] = f({ show: !1, file: "" }), [q, I] = f(!1), [z, v] = f(
     a ? "details" : "grid"
-  ), [O, re] = f(""), [q, ne] = f(""), [w, V] = f(1), [Y] = f(30), [A, H] = f([]);
-  G(() => {
-    a && (v(a), M("details"));
-  }, [a]), G(() => {
+  ), [O, re] = f(""), [L, ne] = f(""), [w, Y] = f(1), [H] = f(30), [A, K] = f([]);
+  R(() => {
+    a && (g(a), v("details"));
+  }, [a]), R(() => {
     const t = setTimeout(() => {
-      re(q), V(1);
+      re(L), Y(1);
     }, 300);
     return () => clearTimeout(t);
-  }, [q]);
-  const { data: k, isLoading: X } = at({
+  }, [L]);
+  const { data: D, isLoading: X } = lt({
     search: O.toLowerCase().trim(),
     page: w,
-    limit: Y
-  }), T = (k == null ? void 0 : k.assets) || [], se = (k == null ? void 0 : k.total) || 0, S = Math.ceil(se / Y), K = w < S, Q = w > 1, ce = (T == null ? void 0 : T.length) > 0, { mutate: oe } = tt(), { mutate: Z, isPending: de } = et(), { mutate: J, isPending: me } = it(), z = D(
+    limit: H
+  }), T = (D == null ? void 0 : D.assets) || [], se = (D == null ? void 0 : D.total) || 0, S = Math.ceil(se / H), Q = w < S, G = w > 1, ce = (T == null ? void 0 : T.length) > 0, { mutate: oe } = it(), { mutate: Z, isPending: de } = tt(), { mutate: J, isPending: me } = at(), P = k(
     (t) => {
-      t >= 1 && t <= S && V(t);
+      t >= 1 && t <= S && Y(t);
     },
     [S]
-  ), ue = D(() => {
-    K && z(w + 1);
-  }, [w, K, z]), he = D(() => {
-    Q && z(w - 1);
-  }, [w, Q, z]), fe = (t) => {
+  ), ue = k(() => {
+    Q && P(w + 1);
+  }, [w, Q, P]), he = k(() => {
+    G && P(w - 1);
+  }, [w, G, P]), fe = (t) => {
     ne(t.target.value);
-  }, ge = D(
+  }, ge = k(
     (t) => {
-      H((c) => _e(c, { id: t.id }) ? [] : [t]);
+      K((o) => Be(o, { id: t.id }) ? [] : [t]);
     },
     [!1]
-  ), pe = D(() => {
-    H([]);
+  ), pe = k(() => {
+    K([]);
   }, []), xe = () => {
-    A.length !== 0 && (r(
-      qe(Le(A), [
+    A.length !== 0 && (l(
+      Le(Me(A), [
         "id",
         "url",
         "width",
@@ -482,71 +492,74 @@ function yt({
       ])
     ), n());
   }, ve = async (t) => {
-    N(t);
+    x(t);
   }, Ne = async () => {
-    m && (h(m == null ? void 0 : m.id), await oe(m.id, {
+    u && (E(u == null ? void 0 : u.id), await oe(u.id, {
       onSuccess: () => {
-        h(null), N(null);
+        E(null), x(null);
       },
       onError: () => {
-        h(null);
+        E(null);
       }
-    }), N(null));
+    }), x(null));
   }, ye = (t) => {
-    v(t.id), M("details");
-  }, be = async (t, c) => {
+    g(t.id), v("details");
+  }, be = async (t, o) => {
     try {
-      const x = localStorage.getItem("chai_optimize_images") !== "false";
-      c ? (await Z({
+      const p = localStorage.getItem("chai_optimize_images") !== "false";
+      o ? (await Z({
         file: t,
         folderId: void 0,
-        name: o.name || "",
-        optimize: x
+        name: s.name || "",
+        optimize: p
       }), b({ show: !1, file: "" })) : (await J({
-        id: o.id || "",
+        id: s.id || "",
         file: t
       }), b({ show: !1, file: "" }));
-    } catch (x) {
-      console.error("Error saving edited image:", x);
+    } catch (p) {
+      console.error("Error saving edited image:", p);
     }
-  };
-  return /* @__PURE__ */ i(I, { children: [
+  }, we = k((t) => {
+    K([t]);
+  }, []);
+  return /* @__PURE__ */ i(F, { children: [
     /* @__PURE__ */ i("div", { className: "max-w-[1232px] max-h-[1232px] w-[80vw] h-[80vh] space-y-4 flex flex-col", children: [
       /* @__PURE__ */ e("h1", { className: "text-lg font-medium", children: "Digital Asset Manager" }),
-      P === "grid" ? /* @__PURE__ */ i(I, { children: [
+      z === "grid" ? /* @__PURE__ */ i(F, { children: [
         /* @__PURE__ */ e(
-          ot,
+          dt,
           {
             maxFileSize: 10,
-            allowedTypes: g,
+            allowedTypes: d,
             uploadAsset: Z,
             isUpdatingAsset: me,
-            isUploadingAsset: de
+            isUploadingAsset: de,
+            onUploaded: we
           }
         ),
         /* @__PURE__ */ i("div", { className: "border p-2 rounded-lg flex-1 flex flex-col gap-y-3 overflow-hidden relative", children: [
           /* @__PURE__ */ i("div", { className: "flex items-center justify-between gap-3", children: [
             /* @__PURE__ */ i("div", { className: "relative w-1/2 ", children: [
               /* @__PURE__ */ e(
-                Qe,
+                Ge,
                 {
                   strokeWidth: 3,
-                  className: `absolute left-2 top-2.5 h-4 w-4 text-muted-foreground ${q.length > 0 ? "text-indigo-800" : ""}`
+                  className: `absolute left-2 top-2.5 h-4 w-4 text-muted-foreground ${L.length > 0 ? "text-indigo-800" : ""}`
                 }
               ),
               /* @__PURE__ */ e(
-                Ce,
+                Ee,
                 {
                   placeholder: "Search assets...",
                   onChange: fe,
-                  value: q,
+                  value: L,
                   className: "pl-8"
                 }
               )
             ] }),
             A.length > 0 ? /* @__PURE__ */ e("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-              A.length > 0 && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
-                u,
+              A.length > 0 && /* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(
+                h,
                 {
                   variant: "outline",
                   size: "sm",
@@ -556,7 +569,7 @@ function yt({
                 }
               ) }),
               /* @__PURE__ */ e(
-                u,
+                h,
                 {
                   size: "sm",
                   onClick: xe,
@@ -578,7 +591,7 @@ function yt({
             /* @__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 && !ce ? /* @__PURE__ */ i("div", { className: "flex flex-col items-center justify-center h-full border rounded-lg", children: [
-            /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: /* @__PURE__ */ e(Ge, { className: "h-9 w-9 text-indigo-500" }) }),
+            /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: /* @__PURE__ */ e(Re, { className: "h-9 w-9 text-indigo-500" }) }),
             /* @__PURE__ */ e("div", { className: "text-muted-foreground text-lg", children: "No assets found" }),
             /* @__PURE__ */ e("div", { className: "text-muted-foreground text-sm", children: O.length > 0 ? "No assets found for your search: " + O : "Start uploading assets to get started" }),
             /* @__PURE__ */ e("br", {})
@@ -587,23 +600,23 @@ function yt({
             {
               className: ae(
                 "relative cursor-pointer overflow-hidden transition-all rounded-lg border-2 group max-w-[180px] max-h-[180px] flex flex-col justify-between",
-                A.some((c) => c.id === t.id) ? "border-blue-500" : "hover:border-black/90",
-                C && (m == null ? void 0 : m.id) === t.id ? "opacity-50 pointer-events-none" : "",
+                A.some((o) => o.id === t.id) ? "border-blue-500" : "hover:border-black/90",
+                C && (u == null ? void 0 : u.id) === t.id ? "opacity-50 pointer-events-none" : "",
                 C === t.id ? "opacity-50 pointer-events-none" : ""
               ),
               onClick: () => ge(t),
               children: [
                 /* @__PURE__ */ i("div", { className: "aspect-square relative overflow-hidden", children: [
-                  C === t.id ? /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ e(F, { className: "h-8 w-8 animate-spin text-white" }) }) : null,
+                  C === t.id ? /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ e(U, { className: "h-8 w-8 animate-spin text-white" }) }) : null,
                   t.type === "image" ? /* @__PURE__ */ e(
                     "img",
                     {
                       src: `${t.thumbnailUrl || "/placeholder.svg"}?v=${(t == null ? void 0 : t.updatedAt) || t.createdAt}`,
                       alt: t.name,
-                      className: `object-contain w-full h-full min-h-[80px] ${A.some((c) => c.id === t.id) ? "" : "group-hover:blur-sm group-hover:contrast-50"}`
+                      className: `object-contain w-full h-full min-h-[80px] ${A.some((o) => o.id === t.id) ? "" : "group-hover:blur-sm group-hover:contrast-50"}`
                     }
                   ) : /* @__PURE__ */ i("div", { className: "flex items-center justify-center h-full", children: [
-                    /* @__PURE__ */ e(Re, { className: "h-12 w-12 text-muted-foreground" }),
+                    /* @__PURE__ */ e(We, { className: "h-12 w-12 text-muted-foreground" }),
                     t.thumbnailUrl && /* @__PURE__ */ e(
                       "img",
                       {
@@ -623,53 +636,53 @@ function yt({
                       children: t.name
                     }
                   ),
-                  /* @__PURE__ */ e("div", { className: "text-[9px] whitespace-nowrap font-light text-muted-foreground flex items-center justify-between", children: /* @__PURE__ */ e("span", { children: ct((t == null ? void 0 : t.size) || 0) }) })
+                  /* @__PURE__ */ e("div", { className: "text-[9px] whitespace-nowrap font-light text-muted-foreground flex items-center justify-between", children: /* @__PURE__ */ e("span", { children: ot((t == null ? void 0 : t.size) || 0) }) })
                 ] }),
-                !A.some((c) => c.id === t.id) && /* @__PURE__ */ i("div", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+                !A.some((o) => o.id === t.id) && /* @__PURE__ */ i("div", { className: "absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
                   /* @__PURE__ */ e(
-                    u,
+                    h,
                     {
                       variant: "secondary",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (c) => {
-                        c.stopPropagation(), ye(t);
+                      onClick: (o) => {
+                        o.stopPropagation(), ye(t);
                       },
-                      children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ e(Ve, { className: "h-4 w-4" })
                     }
                   ),
                   /* @__PURE__ */ e(
-                    u,
+                    h,
                     {
                       variant: "secondary",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (c) => {
-                        c.stopPropagation(), b({
+                      onClick: (o) => {
+                        o.stopPropagation(), b({
                           id: t.id,
                           show: !0,
                           file: t.url,
                           name: t.name
                         });
                       },
-                      children: /* @__PURE__ */ e(Ve, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
                     }
                   ),
                   /* @__PURE__ */ e(
-                    u,
+                    h,
                     {
                       variant: "destructive",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (c) => {
-                        c.stopPropagation(), ve(t);
+                      onClick: (o) => {
+                        o.stopPropagation(), ve(t);
                       },
-                      children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
+                      children: /* @__PURE__ */ e(He, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
-                A.some((c) => c.id === t.id) && /* @__PURE__ */ e("div", { className: "absolute top-1 right-1 border border-white h-max rounded-full bg-blue-500 p-1", children: /* @__PURE__ */ e(
-                  He,
+                A.some((o) => o.id === t.id) && /* @__PURE__ */ e("div", { className: "absolute top-1 right-1 border border-white h-max rounded-full bg-blue-500 p-1", children: /* @__PURE__ */ e(
+                  Xe,
                   {
                     className: "w-3 h-3 text-white",
                     strokeWidth: 5
@@ -681,58 +694,58 @@ function yt({
           )) }) }),
           S > 1 && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 bg-white border-t p-4", children: /* @__PURE__ */ i("div", { className: "flex items-center justify-center space-x-2", children: [
             /* @__PURE__ */ e(
-              u,
+              h,
               {
                 variant: "outline",
                 size: "sm",
                 onClick: he,
-                disabled: !Q,
+                disabled: !G,
                 children: "Previous"
               }
             ),
-            Array.from({ length: Math.min(5, S) }, (t, c) => {
-              const x = c + 1;
+            Array.from({ length: Math.min(5, S) }, (t, o) => {
+              const p = o + 1;
               return /* @__PURE__ */ e(
-                u,
+                h,
                 {
-                  variant: w === x ? "default" : "outline",
+                  variant: w === p ? "default" : "outline",
                   size: "sm",
-                  onClick: () => z(x),
-                  children: x
+                  onClick: () => P(p),
+                  children: p
                 },
-                x
+                p
               );
             }),
-            S > 5 && /* @__PURE__ */ i(I, { children: [
+            S > 5 && /* @__PURE__ */ i(F, { children: [
               /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "..." }),
               /* @__PURE__ */ e(
-                u,
+                h,
                 {
                   variant: w === S ? "default" : "outline",
                   size: "sm",
-                  onClick: () => z(S),
+                  onClick: () => P(S),
                   children: S
                 }
               )
             ] }),
             /* @__PURE__ */ e(
-              u,
+              h,
               {
                 variant: "outline",
                 size: "sm",
                 onClick: ue,
-                disabled: !K,
+                disabled: !Q,
                 children: "Next"
               }
             )
           ] }) })
         ] })
       ] }) : /* @__PURE__ */ e(
-        nt,
+        st,
         {
-          assetId: p || a || "",
+          assetId: y || a || "",
           onBack: () => {
-            M("grid"), v(null);
+            v("grid"), g(null);
           },
           onEdit: (t) => {
             b({
@@ -743,53 +756,53 @@ function yt({
             });
           },
           onSave: async (t) => {
-            if (p) {
-              E(!0);
+            if (y) {
+              I(!0);
               try {
-                const c = T.find((x) => x.id === p);
-                c && await J(Be(c, { description: t }));
+                const o = T.find((p) => p.id === y);
+                o && await J(qe(o, { description: t }));
               } finally {
-                E(!1);
+                I(!1);
               }
             }
           },
-          isSaving: B
+          isSaving: q
         }
       )
     ] }),
-    o.show && /* @__PURE__ */ e(
-      Ae,
+    s.show && /* @__PURE__ */ e(
+      Se,
       {
-        fallback: /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(F, { className: "h-8 w-8 animate-spin" }) }),
+        fallback: /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(U, { className: "h-8 w-8 animate-spin" }) }),
         children: /* @__PURE__ */ e(
-          st,
+          ct,
           {
-            imageUrl: o.file,
+            imageUrl: s.file,
             onSave: be,
             onClose: () => b({ show: !1, file: "" }),
-            defaultSavedImageName: o.name,
-            isEditing: !!o.id
+            defaultSavedImageName: s.name,
+            isEditing: !!s.id
           }
         )
       }
     ),
-    m && /* @__PURE__ */ e(
-      Ee,
+    u && /* @__PURE__ */ e(
+      Te,
       {
-        open: !!m,
-        onOpenChange: () => N(null),
-        children: /* @__PURE__ */ i(Te, { children: [
-          /* @__PURE__ */ i(ke, { children: [
-            /* @__PURE__ */ e(ze, { children: "Delete Asset" }),
-            /* @__PURE__ */ i(De, { children: [
+        open: !!u,
+        onOpenChange: () => x(null),
+        children: /* @__PURE__ */ i(ke, { children: [
+          /* @__PURE__ */ i(ze, { children: [
+            /* @__PURE__ */ e(De, { children: "Delete Asset" }),
+            /* @__PURE__ */ i(Pe, { children: [
               'Are you sure you want to delete "',
-              m.name,
+              u.name,
               '"? This action cannot be undone.'
             ] })
           ] }),
           /* @__PURE__ */ i(je, { className: "gap-2 sm:gap-0", children: [
-            /* @__PURE__ */ e(u, { variant: "outline", onClick: () => N(null), children: "Cancel" }),
-            /* @__PURE__ */ e(u, { variant: "destructive", onClick: Ne, children: "Delete" })
+            /* @__PURE__ */ e(h, { variant: "outline", onClick: () => x(null), children: "Cancel" }),
+            /* @__PURE__ */ e(h, { variant: "destructive", onClick: Ne, children: "Delete" })
           ] })
         ] })
       }
@@ -797,5 +810,5 @@ function yt({
   ] });
 }
 export {
-  yt as default
+  bt as default
 };