@chaibuilder/pages 0.4.20-beta.2 → 0.5.0-beta.1

package/dist/{digital-asset-manager-C2ypiQHt.js → digital-asset-manager-DWilfiv8.js}

@@ -1,13 +1,13 @@
 import { jsx as e, jsxs as i, Fragment as I } from "react/jsx-runtime";
-import ie, { useState as f, useMemo as be, useEffect as G, useCallback as D, Suspense as Ae } from "react";
+import ie, { useState as f, useMemo as we, useEffect as G, useCallback as D, Suspense as Ae } from "react";
 import { mergeClasses as ae } from "@chaibuilder/sdk";
-import { Button as u, Label as q, Textarea as Se, Input as Ce, Dialog as Ee, DialogContent as Te, DialogHeader as ke, DialogTitle as ze, DialogDescription as De, DialogFooter as Pe, Switch as je, 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 Oe, first as qe } from "lodash-es";
-import { Loader as F, AlertCircle as Le, ChevronLeft as Me, 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 { 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 { toast as P } from "sonner";
-import { W as U, X as $, Y as y, Z as _ } from "./index-HVr8s8no.js";
+import { toast as j } from "sonner";
+import { W as U, X as $, Y as y, Z as _ } from "./index-Cm83yAXd.js";
 const et = () => {
   const n = U(), r = R(), s = $();
   return W({
@@ -25,10 +25,10 @@ const et = () => {
         throw new Error(a == null ? void 0 : a.error);
       r.invalidateQueries({
         queryKey: [_, y.GET_ASSETS]
-      }), P.success("Asset uploaded successfully");
+      }), j.success("Asset uploaded successfully");
     },
     onError: () => {
-      P.error("Failed to upload asset");
+      j.error("Failed to upload asset");
     }
   });
 }, tt = () => {
@@ -43,10 +43,10 @@ const et = () => {
         throw new Error(a == null ? void 0 : a.error);
       r.invalidateQueries({
         queryKey: [_, y.GET_ASSETS]
-      }), P.success("Asset deleted successfully");
+      }), j.success("Asset deleted successfully");
     },
     onError: () => {
-      P.error("Failed to delete asset");
+      j.error("Failed to delete asset");
     }
   });
 }, it = () => {
@@ -61,10 +61,10 @@ const et = () => {
         throw new Error(a == null ? void 0 : a.error);
       r.invalidateQueries({
         queryKey: [_, y.GET_ASSETS]
-      }), P.success("Asset updated successfully");
+      }), j.success("Asset updated successfully");
     },
     onError: () => {
-      P.error("Failed to update asset");
+      j.error("Failed to update asset");
     }
   });
 }, at = (n = {}) => {
@@ -123,17 +123,17 @@ const nt = ({
   onSave: a,
   isSaving: d
 }) => {
-  var N, S, h;
-  const { data: l, isLoading: g, isError: x } = lt(n || ""), [v, m] = f("");
+  var N, C, h;
+  const { data: l, isLoading: g, isError: p } = lt(n || ""), [v, m] = 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" }) }) : x || !(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(Le, { className: "h-12 w-12 text-gray-400" }) }),
+  }, [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" }) }),
     /* @__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: x ? "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: 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__ */ i("div", { className: "flex justify-center gap-4", children: [
       /* @__PURE__ */ e(u, { variant: "outline", onClick: r, children: "Back to Assets" }),
-      x && /* @__PURE__ */ e(
+      p && /* @__PURE__ */ e(
         u,
         {
           variant: "default",
@@ -152,7 +152,7 @@ const nt = ({
           onClick: r,
           disabled: d,
           children: [
-            /* @__PURE__ */ e(Me, { className: "h-4 w-4" }),
+            /* @__PURE__ */ e(Oe, { className: "h-4 w-4" }),
             "Back to Assets"
           ]
         }
@@ -179,18 +179,18 @@ const nt = ({
         {
           src: `${l.url}?v=${((N = l.metadata) == null ? void 0 : N.updatedAt) || l.createdAt}`,
           alt: l.name,
-          className: "w-full h-full object-contain rounded-lg max-h-max max-w-max shadow-2xl shadow-black/30"
+          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(q, { className: "w-full text-center", children: "Details" }),
+          /* @__PURE__ */ e(L, { 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: "Format",
-              value: ((S = l.metadata) == null ? void 0 : S.format) || l.type,
+              value: ((C = l.metadata) == null ? void 0 : C.format) || l.type,
               capitalize: !0
             },
             {
@@ -211,38 +211,38 @@ const nt = ({
                 ((h = l.metadata) == null ? void 0 : h.updatedAt) || l.createdAt
               )
             }
-          ].map((c) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e(q, { className: "w-max text-left px-2 w-1/4 font-normal text-gray-700", children: c.label }),
+          ].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 }),
             ":",
             /* @__PURE__ */ e(
               "div",
               {
-                className: "w-max text-left font-medium text-gray-900" + c.capitalize ? " capitalize" : "",
-                children: c.value
+                className: "w-max text-left font-medium text-gray-900" + o.capitalize ? " capitalize" : "",
+                children: o.value
               }
             )
-          ] }, c.label)) })
+          ] }, o.label)) })
         ] }),
         l.usedOn && l.usedOn.length > 0 && /* @__PURE__ */ i("div", { className: "grid gap-3", children: [
-          /* @__PURE__ */ e(q, { children: "Used On" }),
-          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2", children: l.usedOn.map((c, w) => /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e("div", { className: "w-max text-left font-medium text-gray-900", children: c.name }),
+          /* @__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 }),
             /* @__PURE__ */ i("div", { className: "text-gray-500", children: [
               "(",
-              c.slug,
+              o.slug,
               ")"
             ] })
-          ] }, w)) })
+          ] }, b)) })
         ] }),
         /* @__PURE__ */ i("div", { className: "grid gap-3 border rounded-md pt-2 bg-gray-100 relative", children: [
-          /* @__PURE__ */ e(q, { className: "w-full text-center", children: "Description" }),
+          /* @__PURE__ */ e(L, { className: "w-full text-center", children: "Description" }),
           /* @__PURE__ */ e(
             Se,
             {
               id: "description",
               value: v,
               placeholder: "Enter a description for the asset",
-              onChange: (c) => m(c.target.value),
+              onChange: (o) => m(o.target.value),
               rows: 3,
               disabled: d,
               className: "hover:border-black/40 bg-white"
@@ -284,21 +284,21 @@ const ot = ({
   G(() => {
     localStorage.setItem("chai_optimize_images", l.toString());
   }, [l]);
-  const x = n || d, v = D(
-    async (h) => new Promise((c, w) => {
-      const B = h[0], C = new FileReader();
-      C.readAsDataURL(B), C.onload = async () => {
-        const j = await a({
-          file: C.result,
+  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
         });
-        c(j);
-      }, C.onerror = (j) => w(j);
+        o(P);
+      }, E.onerror = (P) => b(P);
     }),
     [a, l]
-  ), { getRootProps: m, getInputProps: N, isDragActive: S } = Je({
+  ), { getRootProps: m, getInputProps: N, isDragActive: C } = Je({
     onDrop: v,
     accept: {
       "image/*": r.includes("image") ? [] : []
@@ -309,35 +309,42 @@ const ot = ({
   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] ${x ? "opacity-90 bg-gray-100 pointer-events-none" : "hover:border-black/50 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] ${p ? "opacity-90 bg-gray-100 pointer-events-none" : "hover:border-black/50 bg-gray-100 hover:bg-gray-100"}`,
       children: /* @__PURE__ */ i(
         "div",
         {
           ...m(),
           className: ae(
-            "rounded-lg text-center cursor-pointer w-full h-max flex flex-col items-center justify-center",
-            S ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+            "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"
           ),
           children: [
             /* @__PURE__ */ e("input", { ...N() }),
-            x ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ i("div", { className: "leading-tight flex items-center gap-2", children: [
-              /* @__PURE__ */ e(
-                "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" })
-                }
-              ),
-              /* @__PURE__ */ i("div", { className: "text-left", children: [
-                /* @__PURE__ */ e("div", { className: "font-medium", children: n ? "Updating file..." : "Uploading file..." }),
-                /* @__PURE__ */ i("div", { className: "text-xs text-muted-foreground font-light", children: [
-                  "Please wait while we ",
-                  n ? "update" : "upload",
-                  " ",
-                  "your file..."
-                ] })
-              ] })
-            ] }) }) : /* @__PURE__ */ i("div", { className: "flex items-center justify-between w-full px-6", children: [
+            p ? /* @__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",
+                children: [
+                  /* @__PURE__ */ e(
+                    "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" })
+                    }
+                  ),
+                  /* @__PURE__ */ i("div", { className: "text-left", children: [
+                    /* @__PURE__ */ e("div", { className: "font-medium", children: n ? "Updating file..." : "Uploading file..." }),
+                    /* @__PURE__ */ i("div", { className: "text-xs text-muted-foreground font-light", children: [
+                      "Please wait while we ",
+                      n ? "update" : "upload",
+                      " ",
+                      "your file..."
+                    ] })
+                  ] })
+                ]
+              }
+            ) }) : /* @__PURE__ */ i("div", { className: "flex items-center justify-between w-full px-6", children: [
               /* @__PURE__ */ e("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ i(
                 "div",
                 {
@@ -390,7 +397,7 @@ const ot = ({
                     )
                   ] }),
                   /* @__PURE__ */ e(
-                    je,
+                    Pe,
                     {
                       checked: l,
                       onCheckedChange: (h) => {
@@ -431,42 +438,42 @@ function yt({
   mode: s = "image",
   assetId: a
 }) {
-  const g = be(() => [s], [s]), [x, v] = f(null), [m, N] = f(null), [S, h] = f(null), [c, w] = f({ show: !1, file: "" }), [B, C] = f(!1), [j, L] = f(
+  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(
     a ? "details" : "grid"
-  ), [M, re] = f(""), [O, ne] = f(""), [b, V] = f(1), [Y] = f(30), [E, H] = f([]);
+  ), [O, re] = f(""), [q, ne] = f(""), [w, V] = f(1), [Y] = f(30), [A, H] = f([]);
   G(() => {
-    a && (v(a), L("details"));
+    a && (v(a), M("details"));
   }, [a]), G(() => {
     const t = setTimeout(() => {
-      re(O), V(1);
+      re(q), V(1);
     }, 300);
     return () => clearTimeout(t);
-  }, [O]);
+  }, [q]);
   const { data: k, isLoading: X } = at({
-    search: M.toLowerCase().trim(),
-    page: b,
+    search: O.toLowerCase().trim(),
+    page: w,
     limit: Y
-  }), T = (k == null ? void 0 : k.assets) || [], se = (k == null ? void 0 : k.total) || 0, A = Math.ceil(se / Y), K = b < A, Q = b > 1, ce = (T == null ? void 0 : T.length) > 0, { mutate: oe } = tt(), { mutate: Z, isPending: de } = et(), { mutate: J, isPending: me } = it(), z = D(
+  }), 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(
     (t) => {
-      t >= 1 && t <= A && V(t);
+      t >= 1 && t <= S && V(t);
     },
-    [A]
+    [S]
   ), ue = D(() => {
-    K && z(b + 1);
-  }, [b, K, z]), he = D(() => {
-    Q && z(b - 1);
-  }, [b, Q, z]), fe = (t) => {
+    K && z(w + 1);
+  }, [w, K, z]), he = D(() => {
+    Q && z(w - 1);
+  }, [w, Q, z]), fe = (t) => {
     ne(t.target.value);
   }, ge = D(
     (t) => {
-      H((o) => _e(o, { id: t.id }) ? [] : [t]);
+      H((c) => _e(c, { id: t.id }) ? [] : [t]);
     },
     [!1]
   ), pe = D(() => {
     H([]);
   }, []), xe = () => {
-    E.length !== 0 && (r(
-      Oe(qe(E), [
+    A.length !== 0 && (r(
+      qe(Le(A), [
         "id",
         "url",
         "width",
@@ -486,27 +493,27 @@ function yt({
       }
     }), N(null));
   }, ye = (t) => {
-    v(t.id), L("details");
-  }, we = async (t, o) => {
+    v(t.id), M("details");
+  }, be = async (t, c) => {
     try {
-      const p = localStorage.getItem("chai_optimize_images") !== "false";
-      o ? (await Z({
+      const x = localStorage.getItem("chai_optimize_images") !== "false";
+      c ? (await Z({
         file: t,
         folderId: void 0,
-        name: c.name || "",
-        optimize: p
-      }), w({ show: !1, file: "" })) : (await J({
-        id: c.id || "",
+        name: o.name || "",
+        optimize: x
+      }), b({ show: !1, file: "" })) : (await J({
+        id: o.id || "",
         file: t
-      }), w({ show: !1, file: "" }));
-    } catch (p) {
-      console.error("Error saving edited image:", p);
+      }), b({ show: !1, file: "" }));
+    } catch (x) {
+      console.error("Error saving edited image:", x);
     }
   };
   return /* @__PURE__ */ i(I, { 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" }),
-      j === "grid" ? /* @__PURE__ */ i(I, { children: [
+      P === "grid" ? /* @__PURE__ */ i(I, { children: [
         /* @__PURE__ */ e(
           ot,
           {
@@ -524,7 +531,7 @@ function yt({
                 Qe,
                 {
                   strokeWidth: 3,
-                  className: `absolute left-2 top-2.5 h-4 w-4 text-muted-foreground ${O.length > 0 ? "text-indigo-800" : ""}`
+                  className: `absolute left-2 top-2.5 h-4 w-4 text-muted-foreground ${q.length > 0 ? "text-indigo-800" : ""}`
                 }
               ),
               /* @__PURE__ */ e(
@@ -532,13 +539,13 @@ function yt({
                 {
                   placeholder: "Search assets...",
                   onChange: fe,
-                  value: O,
-                  className: "pl-8 hover:shadow-lg"
+                  value: q,
+                  className: "pl-8"
                 }
               )
             ] }),
-            E.length > 0 ? /* @__PURE__ */ e("div", { className: "flex justify-between items-center", children: /* @__PURE__ */ i("div", { className: "flex items-center gap-2", children: [
-              E.length > 0 && /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
+            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,
                 {
                   variant: "outline",
@@ -553,13 +560,13 @@ function yt({
                 {
                   size: "sm",
                   onClick: xe,
-                  disabled: E.length === 0,
+                  disabled: A.length === 0,
                   children: "Select Asset"
                 }
               )
             ] }) }) : null
           ] }),
-          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto", children: X ? /* @__PURE__ */ i("div", { className: "columns-1 gap-3 space-y-3 sm:columns-3 md:columns-5", children: [
+          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto pb-[66px]", children: X ? /* @__PURE__ */ i("div", { className: "columns-1 gap-3 space-y-3 sm:columns-3 md:columns-5", 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" }),
@@ -573,27 +580,27 @@ function yt({
           ] }) : !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 text-lg", children: "No assets found" }),
-            /* @__PURE__ */ e("div", { className: "text-muted-foreground text-sm", children: M.length > 0 ? "No assets found for your search: " + M : "Start uploading assets to get started" }),
+            /* @__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", {})
           ] }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3 p-1", children: T == null ? void 0 : T.map((t) => /* @__PURE__ */ i(
             "div",
             {
               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",
-                E.some((o) => o.id === t.id) ? "border-4 border-blue-500" : "hover:border-black/50",
-                S && (m == null ? void 0 : m.id) === t.id ? "opacity-50 pointer-events-none" : "",
-                S === t.id ? "opacity-50 pointer-events-none" : ""
+                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" : "",
+                C === t.id ? "opacity-50 pointer-events-none" : ""
               ),
               onClick: () => ge(t),
               children: [
                 /* @__PURE__ */ i("div", { className: "aspect-square relative overflow-hidden", children: [
-                  S === 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(F, { 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]"
+                      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"}`
                     }
                   ) : /* @__PURE__ */ i("div", { className: "flex items-center justify-center h-full", children: [
                     /* @__PURE__ */ e(Re, { className: "h-12 w-12 text-muted-foreground" }),
@@ -607,30 +614,26 @@ function yt({
                     )
                   ] })
                 ] }),
-                /* @__PURE__ */ i("div", { className: "py-1 px-2", children: [
-                  /* @__PURE__ */ e("div", { className: "text-xs truncate", title: t.name, children: t.name }),
-                  /* @__PURE__ */ i("div", { className: "text-[10px] font-light text-muted-foreground flex items-center justify-between", children: [
-                    /* @__PURE__ */ e("span", { children: ct((t == null ? void 0 : t.size) || 0) }),
-                    /* @__PURE__ */ i("span", { children: [
-                      "Used on",
-                      " ",
-                      /* @__PURE__ */ i("span", { className: "font-normal", children: [
-                        (t == null ? void 0 : t.usedOnCount) || 0,
-                        " "
-                      ] }),
-                      (t == null ? void 0 : t.usedOnCount) === 1 ? "page" : "pages"
-                    ] })
-                  ] })
+                /* @__PURE__ */ i("div", { className: "py-1 px-2 flex items-end justify-between bg-white border-t-[1px] border-black/10", children: [
+                  /* @__PURE__ */ e(
+                    "div",
+                    {
+                      className: "text-xs truncate leading-tight",
+                      title: t.name,
+                      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__ */ i("div", { className: "absolute inset-0 bg-black/80 border-white border-4 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2", children: [
+                !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: [
                   /* @__PURE__ */ e(
                     u,
                     {
                       variant: "secondary",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (o) => {
-                        o.stopPropagation(), ye(t);
+                      onClick: (c) => {
+                        c.stopPropagation(), ye(t);
                       },
                       children: /* @__PURE__ */ e(We, { className: "h-4 w-4" })
                     }
@@ -641,8 +644,8 @@ function yt({
                       variant: "secondary",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (o) => {
-                        o.stopPropagation(), w({
+                      onClick: (c) => {
+                        c.stopPropagation(), b({
                           id: t.id,
                           show: !0,
                           file: t.url,
@@ -658,14 +661,14 @@ function yt({
                       variant: "destructive",
                       size: "icon",
                       className: "h-8 w-8 rounded-full",
-                      onClick: (o) => {
-                        o.stopPropagation(), ve(t);
+                      onClick: (c) => {
+                        c.stopPropagation(), ve(t);
                       },
                       children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
                     }
                   )
                 ] }),
-                E.some((o) => o.id === t.id) && /* @__PURE__ */ e("div", { className: "absolute top-2 right-2 border border-white h-max rounded-full bg-blue-500 p-1", children: /* @__PURE__ */ e(
+                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,
                   {
                     className: "w-3 h-3 text-white",
@@ -676,7 +679,7 @@ function yt({
             },
             t.id
           )) }) }),
-          A > 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: [
+          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,
               {
@@ -687,28 +690,28 @@ function yt({
                 children: "Previous"
               }
             ),
-            Array.from({ length: Math.min(5, A) }, (t, o) => {
-              const p = o + 1;
+            Array.from({ length: Math.min(5, S) }, (t, c) => {
+              const x = c + 1;
               return /* @__PURE__ */ e(
                 u,
                 {
-                  variant: b === p ? "default" : "outline",
+                  variant: w === x ? "default" : "outline",
                   size: "sm",
-                  onClick: () => z(p),
-                  children: p
+                  onClick: () => z(x),
+                  children: x
                 },
-                p
+                x
               );
             }),
-            A > 5 && /* @__PURE__ */ i(I, { children: [
+            S > 5 && /* @__PURE__ */ i(I, { children: [
               /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "..." }),
               /* @__PURE__ */ e(
                 u,
                 {
-                  variant: b === A ? "default" : "outline",
+                  variant: w === S ? "default" : "outline",
                   size: "sm",
-                  onClick: () => z(A),
-                  children: A
+                  onClick: () => z(S),
+                  children: S
                 }
               )
             ] }),
@@ -727,12 +730,12 @@ function yt({
       ] }) : /* @__PURE__ */ e(
         nt,
         {
-          assetId: x || a || "",
+          assetId: p || a || "",
           onBack: () => {
-            L("grid"), v(null);
+            M("grid"), v(null);
           },
           onEdit: (t) => {
-            w({
+            b({
               id: t.id,
               show: !0,
               file: t.url,
@@ -740,13 +743,13 @@ function yt({
             });
           },
           onSave: async (t) => {
-            if (x) {
-              C(!0);
+            if (p) {
+              E(!0);
               try {
-                const o = T.find((p) => p.id === x);
-                o && await J(Be(o, { description: t }));
+                const c = T.find((x) => x.id === p);
+                c && await J(Be(c, { description: t }));
               } finally {
-                C(!1);
+                E(!1);
               }
             }
           },
@@ -754,18 +757,18 @@ function yt({
         }
       )
     ] }),
-    c.show && /* @__PURE__ */ e(
+    o.show && /* @__PURE__ */ e(
       Ae,
       {
         fallback: /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(F, { className: "h-8 w-8 animate-spin" }) }),
         children: /* @__PURE__ */ e(
           st,
           {
-            imageUrl: c.file,
-            onSave: we,
-            onClose: () => w({ show: !1, file: "" }),
-            defaultSavedImageName: c.name,
-            isEditing: !!c.id
+            imageUrl: o.file,
+            onSave: be,
+            onClose: () => b({ show: !1, file: "" }),
+            defaultSavedImageName: o.name,
+            isEditing: !!o.id
           }
         )
       }
@@ -784,7 +787,7 @@ function yt({
               '"? This action cannot be undone.'
             ] })
           ] }),
-          /* @__PURE__ */ i(Pe, { className: "gap-2 sm:gap-0", children: [
+          /* @__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" })
           ] })