@chaibuilder/pages 0.15.5 → 0.15.6

package/dist/digital-asset-manager-BWZlrwFf.js

@@ -0,0 +1,913 @@
+import { jsxs as r, jsx as e, Fragment as H } from "react/jsx-runtime";
+import { useTranslation as ee, mergeClasses as me } from "@chaibuilder/sdk";
+import { Button as p, Input as ue, Label as V, Textarea as Fe, TooltipProvider as _, Tooltip as P, TooltipTrigger as q, TooltipContent as G, Dialog as Ue, DialogContent as Le, DialogHeader as $e, DialogTitle as Me, DialogDescription as _e, DialogFooter as Pe, Switch as qe } from "@chaibuilder/sdk/ui";
+import { find as Ge, merge as Oe, pick as Y, first as Be, isEmpty as Ke } from "lodash-es";
+import { ChevronLeft as he, ChevronRight as Qe, Loader as B, AlertCircle as Re, Copy as fe, Pencil as We, Link as Ve, Search as He, RefreshCwIcon as Xe, Archive as Ze, Film as Je, ImageIcon as Ye, Edit as et, Trash2 as tt, Check as it, Upload as lt, AlertTriangle as at } from "lucide-react";
+import pe, { useState as y, useMemo as ge, useEffect as O, useCallback as M, Suspense as rt } from "react";
+import { useDropzone as nt } from "react-dropzone";
+import { aL as K, al as Q, A as b, aM as st } from "./index-Bk8tPO5R.js";
+import { toast as A } from "sonner";
+import { f as ct, c as ot } from "./image-compression-DsZ1oqpb.js";
+import { useQueryClient as te, useMutation as ie, useQuery as xe } from "@tanstack/react-query";
+const dt = () => {
+  const s = K(), n = te(), h = Q();
+  return ie({
+    mutationFn: async (l) => {
+      const c = l.map(async (a) => h(s, {
+        action: b.UPLOAD_ASSET,
+        data: a
+      }));
+      return await Promise.all(c);
+    },
+    onSuccess: (l) => {
+      var c;
+      if (l != null && l.some((i) => i.error))
+        throw new Error(((c = l == null ? void 0 : l.find((i) => i.error)) == null ? void 0 : c.error) || "Failed to upload asset");
+      {
+        n.invalidateQueries({
+          queryKey: [b.GET_ASSETS]
+        });
+        const i = l == null ? void 0 : l.length;
+        A.success(`${i === 1 ? "Asset" : i + " Assets"} uploaded successfully`);
+      }
+    },
+    onError: () => {
+      A.error("Failed to upload asset");
+    }
+  });
+}, mt = () => {
+  const s = K(), n = te(), h = Q();
+  return ie({
+    mutationFn: async (l) => h(s, {
+      action: b.DELETE_ASSET,
+      data: { id: l }
+    }),
+    onSuccess: (l) => {
+      if (l != null && l.error)
+        throw new Error(l == null ? void 0 : l.error);
+      n.invalidateQueries({
+        queryKey: [b.GET_ASSETS]
+      }), A.success("Asset deleted successfully");
+    },
+    onError: () => {
+      A.error("Failed to delete asset");
+    }
+  });
+}, ut = () => {
+  const s = K(), n = te(), h = Q();
+  return ie({
+    mutationFn: async (l) => h(s, {
+      action: b.UPDATE_ASSET,
+      data: l
+    }),
+    onSuccess: (l) => {
+      if (l != null && l.error)
+        throw new Error(l == null ? void 0 : l.error);
+      n.invalidateQueries({
+        queryKey: [b.GET_ASSETS]
+      }), l != null && l.id && n.invalidateQueries({
+        queryKey: [b.GET_ASSET, l.id]
+      }), A.success("Asset updated successfully");
+    },
+    onError: () => {
+      A.error("Failed to update asset");
+    }
+  });
+};
+function ht({
+  currentPage: s,
+  totalPages: n,
+  onPageChange: h,
+  pageRangeDisplayed: l = 3,
+  showPageInput: c = !0,
+  className: i = ""
+}) {
+  const [a, I] = y(String(s)), N = ge(() => {
+    const o = Math.floor(l / 2);
+    let m = Math.max(1, s - o), d = Math.min(n, s + o);
+    d - m + 1 < l && (m === 1 ? d = Math.min(n, m + l - 1) : d === n && (m = Math.max(1, d - l + 1)));
+    const f = [];
+    m > 1 && (f.push(1), m > 2 && f.push("..."));
+    for (let v = m; v <= d; v++)
+      f.push(v);
+    return d < n && (d < n - 1 && f.push("..."), f.push(n)), f;
+  }, [s, n, l]), x = (o) => {
+    o !== s && o >= 1 && o <= n && (h(o), I(String(o)));
+  }, g = () => {
+    s > 1 && x(s - 1);
+  }, w = () => {
+    s < n && x(s + 1);
+  }, C = () => {
+    const o = Number(a);
+    !isNaN(o) && o >= 1 && o <= n && x(o);
+  }, S = (o) => {
+    o.key === "Enter" && C();
+  };
+  return n <= 1 ? null : /* @__PURE__ */ r("div", { className: `flex flex-wrap items-center justify-center gap-3 ${i}`, children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ r(
+        p,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: g,
+          disabled: s === 1,
+          className: "px-2 py-1 text-sm hover:bg-gray-50",
+          children: [
+            /* @__PURE__ */ e(he, { className: " h-4 w-4" }),
+            "Previous"
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "flex items-center gap-2", children: N.map((o, m) => {
+        if (o === "...")
+          return /* @__PURE__ */ e("span", { className: "px-2 text-muted-foreground", children: "..." }, `ellipsis-${m}`);
+        const d = o, f = d === s;
+        return /* @__PURE__ */ e(
+          p,
+          {
+            variant: f ? "default" : "outline",
+            size: "sm",
+            onClick: () => x(d),
+            className: f ? "border-blue-600 bg-blue-600 px-3 py-1 text-sm text-white" : "border px-3 py-1 text-sm hover:bg-gray-50 hover:text-black",
+            children: d
+          },
+          d
+        );
+      }) }),
+      /* @__PURE__ */ r(
+        p,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: w,
+          disabled: s === n,
+          className: "px-2 py-1 text-sm hover:bg-gray-50",
+          children: [
+            "Next",
+            /* @__PURE__ */ e(Qe, { className: " h-4 w-4" })
+          ]
+        }
+      )
+    ] }),
+    c && /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ e("span", { className: "text-sm text-muted-foreground", children: "Go to" }),
+      /* @__PURE__ */ e(
+        ue,
+        {
+          type: "number",
+          min: 1,
+          max: n,
+          value: a,
+          onChange: (o) => {
+            const m = o.target.value.replace(/[^\d]/g, "");
+            I(m);
+          },
+          onKeyDown: S,
+          className: "h-8 w-16 px-2 py-1"
+        }
+      ),
+      /* @__PURE__ */ e(
+        p,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: C,
+          disabled: a === "" || Number(a) < 1 || Number(a) > n,
+          children: "Go"
+        }
+      )
+    ] })
+  ] });
+}
+const ft = (s = {}) => {
+  const n = K(), h = Q(), { search: l, page: c = 1, limit: i = 30 } = s;
+  return xe({
+    queryKey: [b.GET_ASSETS, l, c, i],
+    queryFn: async () => {
+      const a = await h(n, {
+        action: b.GET_ASSETS,
+        data: {
+          search: l,
+          page: c,
+          limit: i
+        }
+      });
+      return a.page = c, a.limit = i, a;
+    },
+    staleTime: 1 / 0,
+    retry: 1
+  });
+}, pt = (s) => {
+  const n = K(), h = Q();
+  return xe({
+    queryKey: [b.GET_ASSET, s],
+    queryFn: async () => s ? await h(n, {
+      action: b.GET_ASSET,
+      data: { id: s }
+    }) : null,
+    staleTime: 1 / 0,
+    retry: 1
+  });
+};
+function gt(s) {
+  const n = isNaN(s) ? 0 : typeof s == "number" ? s : parseInt(s);
+  return n ? n < 1024 ? `${n.toFixed(2)} B` : n < 1024 * 1024 ? `${(n / 1024).toFixed(2)} KB` : `${(n / (1024 * 1024)).toFixed(2)} MB` : "0 B";
+}
+function oe(s) {
+  if (!s) return "N/A";
+  const n = new Date(s);
+  return new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit"
+  }).format(n);
+}
+function de(s, n) {
+  let h = s, l = n == null ? void 0 : n.description;
+  return (!l || typeof l != "string") && (l = ""), (!h || typeof h != "string") && (h = ""), h !== l;
+}
+const xt = ({
+  assetId: s,
+  onBack: n,
+  onEdit: h,
+  onSave: l,
+  isSaving: c
+}) => {
+  var o, m;
+  const { t: i } = ee(), { data: a, isLoading: I, isError: N } = pt(s || ""), [x, g] = y(""), [w, C] = y(!1);
+  O(() => {
+    const d = new Image();
+    return d.src = (a == null ? void 0 : a.url) || "", d.onload = () => C(!0), () => {
+      d.onload = null;
+    };
+  }, [a]);
+  const S = async (d, f) => {
+    try {
+      await navigator.clipboard.writeText(d), A.success(i("{{type}} copied to clipboard", { type: f }));
+    } catch (v) {
+      A.error(i("Failed to copy {{type}}", { type: f }), {
+        description: v == null ? void 0 : v.message
+      });
+    }
+  };
+  return pe.useEffect(() => {
+    a != null && a.description && g(a.description);
+  }, [a]), I || !w ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ e(B, { className: "h-8 w-8 animate-spin" }) }) : N || !(a != null && a.id) ? /* @__PURE__ */ e("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ r("div", { className: "text-center max-w-md mx-auto p-6", children: [
+    /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e(Re, { className: "h-12 w-12 text-gray-400" }) }),
+    /* @__PURE__ */ e("h3", { className: "text-lg font-medium text-gray-900 mb-2", children: i("No Asset Found") }),
+    /* @__PURE__ */ e("p", { className: "text-sm text-gray-500 mb-6", children: i(N ? "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__ */ r("div", { className: "flex justify-center gap-4", children: [
+      /* @__PURE__ */ e(p, { variant: "outline", onClick: n, children: i("Back to Assets") }),
+      N && /* @__PURE__ */ e(
+        p,
+        {
+          variant: "default",
+          onClick: () => window.location.reload(),
+          children: i("Try Again")
+        }
+      )
+    ] })
+  ] }) }) : /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col gap-y-4 overflow-hidden", children: [
+    /* @__PURE__ */ r("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ r(
+        p,
+        {
+          variant: "outline",
+          size: "sm",
+          onClick: n,
+          disabled: c,
+          children: [
+            /* @__PURE__ */ e(he, { className: "h-4 w-4" }),
+            i("Back to Assets")
+          ]
+        }
+      ),
+      /* @__PURE__ */ r("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ e(p, { variant: "outline", onClick: n, disabled: c, children: i("Cancel") }),
+        /* @__PURE__ */ r(
+          p,
+          {
+            variant: "outline",
+            onClick: () => S(a.url, i("Asset URL")),
+            disabled: c,
+            children: [
+              /* @__PURE__ */ e(fe, { className: "h-4 w-4 mr-2" }),
+              i("Copy URL")
+            ]
+          }
+        ),
+        /* @__PURE__ */ r(
+          p,
+          {
+            variant: "default",
+            onClick: () => h(a),
+            disabled: c,
+            children: [
+              /* @__PURE__ */ e(We, { className: "h-4 w-4" }),
+              i("Edit Image")
+            ]
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ r("div", { className: "grid grid-cols-2 items-start gap-6 flex-1 overflow-hidden", children: [
+      /* @__PURE__ */ e("div", { className: "relative h-[calc(80vh-200px)] w-full flex items-start justify-center", children: /* @__PURE__ */ e(
+        "img",
+        {
+          src: a.url,
+          alt: a.name,
+          className: "w-full h-full object-contain rounded-lg max-h-max max-w-max"
+        }
+      ) }),
+      /* @__PURE__ */ r("div", { className: "space-y-6", children: [
+        /* @__PURE__ */ r("div", { className: "grid gap-3 border rounded-md pt-2 bg-gray-100", children: [
+          /* @__PURE__ */ e(V, { className: "w-full text-center", children: i("Details") }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2 bg-white", children: [
+            { label: i("File Name"), value: a.name },
+            { label: i("Type"), value: a.type, capitalize: !0 },
+            {
+              label: i("Format"),
+              value: ((o = a.metadata) == null ? void 0 : o.format) || a.type,
+              capitalize: !0
+            },
+            {
+              label: i("Size"),
+              value: gt(a.size)
+            },
+            {
+              label: i("Dimensions"),
+              value: `${a.width || 0} × ${a.height || 0}`
+            },
+            {
+              label: i("Created"),
+              value: oe(a.createdAt)
+            },
+            {
+              label: i("Updated"),
+              value: oe(
+                ((m = a.metadata) == null ? void 0 : m.updatedAt) || (a == null ? void 0 : a.updatedAt) || a.createdAt
+              )
+            },
+            {
+              label: i("URL"),
+              value: a.url,
+              copyable: !0
+            }
+          ].map((d) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e(V, { className: "w-max text-left px-2 w-1/4 font-normal text-gray-700", children: d.label }),
+            ":",
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ e(
+                "div",
+                {
+                  className: "w-max text-left font-medium text-gray-900" + (d.capitalize ? " capitalize" : ""),
+                  children: d.value
+                }
+              ),
+              d.copyable && /* @__PURE__ */ e(
+                p,
+                {
+                  variant: "ghost",
+                  size: "icon",
+                  className: "h-6 w-6",
+                  onClick: () => S(d.value, d.label),
+                  children: /* @__PURE__ */ e(Ve, { className: "h-3 w-3" })
+                }
+              )
+            ] })
+          ] }, d.label)) })
+        ] }),
+        a.usedOn && a.usedOn.length > 0 && /* @__PURE__ */ r("div", { className: "grid gap-3", children: [
+          /* @__PURE__ */ e(V, { children: i("Used On") }),
+          /* @__PURE__ */ e("div", { className: "grid grid-cols-1 gap-2 text-sm border rounded-md p-2", children: a.usedOn.map((d, f) => /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ e("div", { className: "w-max text-left font-medium text-gray-900", children: d.name }),
+            /* @__PURE__ */ r("div", { className: "text-gray-500", children: [
+              "(",
+              d.slug,
+              ")"
+            ] })
+          ] }, f)) })
+        ] }),
+        /* @__PURE__ */ r("div", { className: "grid gap-3 border rounded-md pt-2 bg-gray-100 relative", children: [
+          /* @__PURE__ */ e(V, { className: "w-full text-center", children: i("Description") }),
+          /* @__PURE__ */ e(
+            Fe,
+            {
+              id: "description",
+              value: x,
+              placeholder: i("Enter a description for the asset"),
+              onChange: (d) => g(d.target.value),
+              rows: 3,
+              disabled: c,
+              className: "hover:border-black/40 bg-white"
+            }
+          ),
+          /* @__PURE__ */ e("div", { className: "flex justify-end items-start absolute top-1.5 right-2", children: /* @__PURE__ */ e(
+            "button",
+            {
+              type: "button",
+              onClick: () => l(x),
+              disabled: c || !de(x, a),
+              className: `py-0 bg-blue-500 text-white px-3 py-0.5 rounded-md text-sm ${c || !de(x, a) ? "opacity-50 cursor-not-allowed" : ""}`,
+              children: c ? /* @__PURE__ */ r(H, { children: [
+                /* @__PURE__ */ e(B, { className: "h-4 w-4 mr-2 animate-spin" }),
+                i("Saving...")
+              ] }) : i("Save")
+            }
+          ) })
+        ] })
+      ] })
+    ] })
+  ] });
+}, vt = pe.lazy(() => import("./image-editor-CeSSNbFY.js")), yt = 25 * 1024 * 1024, Nt = ({ isUpdatingAsset: s, allowedTypes: n, uploadAssets: h, isUploadingAsset: l, onUploaded: c }) => {
+  const { t: i } = ee(), [a, I] = y(() => {
+    const o = localStorage.getItem("chai_optimize_images");
+    return o !== null ? o === "true" : !0;
+  });
+  O(() => {
+    localStorage.setItem("chai_optimize_images", a.toString());
+  }, [a]);
+  const N = s || l, x = M(
+    async (o) => {
+      try {
+        const m = o;
+        if (!m.every((E) => E.type.startsWith("image/")))
+          return A.error(i("Invalid file type. Please upload a valid file.")), Promise.reject(new Error("Invalid file type"));
+        const d = m.map(async (E) => {
+          let j = E;
+          return E.type.startsWith("image/") && (j = await ot(E)), new Promise((X, F) => {
+            const U = new FileReader();
+            U.readAsDataURL(j), U.onload = async () => {
+              X({
+                file: U.result,
+                folderId: void 0,
+                name: E.name,
+                optimize: a
+              });
+            }, U.onerror = () => F(null);
+          });
+        }), f = await Promise.all(d), v = await h(f);
+        return (v == null ? void 0 : v.length) === 1 && c(v[0]), v;
+      } catch (m) {
+        return Promise.reject(m);
+      }
+    },
+    [h, a, c, i]
+  ), g = (o) => {
+    const m = [];
+    let d = 0;
+    return o.forEach((f) => {
+      f.size > yt ? d++ : m.push(f);
+    }), d > 0 && A.error(
+      `${d === 1 && o.length === 1 ? i("File") : d + i(d === 1 ? " file" : " files")} ${i("exceed the maximum size limit of 10MB.")}`
+    ), Ke(m) ? [] : x(m);
+  }, { getRootProps: w, getInputProps: C, isDragActive: S } = nt({
+    onDrop: g,
+    accept: {
+      "image/*": n.includes("image") ? [] : []
+    },
+    disabled: s || l,
+    multiple: !0
+  });
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: `flex h-[60px] w-full flex-col items-center justify-center rounded-lg border-2 border-dashed border-slate-300 p-0 py-2 hover:border-black/50 ${N ? "pointer-events-none bg-gray-100 opacity-90" : "bg-gray-100 hover:border-black/50 hover:bg-gray-100"}`,
+      children: /* @__PURE__ */ r(
+        "div",
+        {
+          ...w(),
+          className: me(
+            "flex h-max w-full cursor-pointer flex-col justify-center rounded-lg text-center",
+            N ? "items-start" : "items-center",
+            S ? "border-primary bg-primary/5" : "border-muted-foreground/20"
+          ),
+          children: [
+            /* @__PURE__ */ e("input", { ...C() }),
+            N ? /* @__PURE__ */ e("div", { className: "flex flex-col items-center px-6", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-center gap-2 leading-tight", children: [
+              /* @__PURE__ */ e("div", { className: "flex items-center justify-center rounded-full bg-indigo-100 p-2", children: /* @__PURE__ */ e(B, { className: "h-4 w-4 animate-spin text-indigo-500" }) }),
+              /* @__PURE__ */ r("div", { className: "text-left", children: [
+                /* @__PURE__ */ e("div", { className: "font-medium", children: i(s ? "Updating file..." : "Uploading file...") }),
+                /* @__PURE__ */ r("div", { className: "text-xs font-light text-muted-foreground", children: [
+                  i("Please wait while we"),
+                  " ",
+                  i(s ? "update" : "upload"),
+                  " ",
+                  i("your file...")
+                ] })
+              ] })
+            ] }) }) : /* @__PURE__ */ r("div", { className: "flex w-full items-center justify-between px-6", children: [
+              /* @__PURE__ */ e("div", { className: "flex flex-col items-center", children: /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-2 leading-tight", children: [
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: "flex items-center justify-center rounded-full border border-indigo-500 bg-indigo-100 p-2",
+                    children: /* @__PURE__ */ e(lt, { className: "h-4 w-4 text-indigo-500" })
+                  }
+                ),
+                /* @__PURE__ */ r("div", { className: "text-left", children: [
+                  /* @__PURE__ */ r("div", { className: "font-medium", children: [
+                    i("Drop your file here or"),
+                    " ",
+                    /* @__PURE__ */ e("span", { className: "cursor-pointer text-indigo-500 hover:underline", children: i("browse") })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "text-xs font-light text-muted-foreground", children: /* @__PURE__ */ r("span", { className: "", children: [
+                    i("Accepted file types:"),
+                    " ",
+                    /* @__PURE__ */ e("span", { className: "capitalize text-indigo-400", children: n.join(", ") })
+                  ] }) })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ r("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
+                /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ r("span", { className: "text-xs", children: [
+                    i("Optimization:"),
+                    " ",
+                    " ",
+                    /* @__PURE__ */ e("span", { className: a ? "text-indigo-600" : "text-gray-400", children: i(a ? "On" : "Off") })
+                  ] }),
+                  /* @__PURE__ */ e(
+                    qe,
+                    {
+                      checked: a,
+                      onCheckedChange: (o) => {
+                        I(o);
+                      },
+                      onClick: (o) => {
+                        o.stopPropagation();
+                      },
+                      className: "data-[state=checked]:bg-indigo-500"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(P, { children: [
+                  /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: `flex cursor-help items-center text-amber-500 ${a ? "invisible" : ""}`,
+                      children: /* @__PURE__ */ e(at, { className: "mr-1 h-4 w-4" })
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(G, { side: "top", children: /* @__PURE__ */ e("p", { className: "text-xs text-white", children: i("Warning: Unoptimized images may affect performance and page load times") }) })
+                ] }) })
+              ] })
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+function jt({ close: s, onSelect: n, mode: h = "image", assetId: l }) {
+  const { t: c } = ee(), i = !1, a = 10, I = ge(() => [h], [h]), [N, x] = y(null), [g, w] = y(null), [C, S] = y(null), [o, m] = y({ show: !1, file: "" }), [d, f] = y(!1), [v, E] = y(l ? "details" : "grid"), [j, X] = y(""), [F, U] = y(""), [R, Z] = y(1), [le] = y(30), [k, J] = y([]);
+  O(() => {
+    l && (x(l), E("details"));
+  }, [l]), O(() => {
+    const t = setTimeout(() => {
+      X(F), Z(1);
+    }, 300);
+    return () => clearTimeout(t);
+  }, [F]);
+  const {
+    data: L,
+    isLoading: W,
+    refetch: ve
+  } = ft({
+    search: j.toLowerCase().trim(),
+    page: R,
+    limit: le
+  }), D = (L == null ? void 0 : L.assets) || [], ye = (L == null ? void 0 : L.total) || 0, T = Math.ceil(ye / le);
+  O(() => {
+    W || T <= 0 || Z((t) => t > T ? T : t < 1 ? 1 : t);
+  }, [W, T]);
+  const Ne = (D == null ? void 0 : D.length) > 0, { mutate: we } = mt(), { mutateAsync: ae, isPending: be } = dt(), { mutateAsync: re, isPending: Ae } = ut(), ne = M(
+    (t) => {
+      const u = Math.min(Math.max(1, t), Math.max(1, T));
+      u !== R && Z(u);
+    },
+    [T, R]
+  ), Ce = (t) => {
+    U(t.target.value);
+  }, Se = M(
+    (t) => {
+      J((u) => Ge(u, { id: t.id }) ? [] : [t]);
+    },
+    [i]
+  ), Ee = M(() => {
+    J([]);
+  }, []), se = (t) => {
+    (t == null ? void 0 : t.length) !== 0 && (n(Y(Be(t || k), ["id", "url", "width", "height", "description"])), s());
+  }, ke = async (t) => {
+    w(t);
+  }, Ie = async () => {
+    g && (S(g == null ? void 0 : g.id), await we(g.id, {
+      onSuccess: () => {
+        S(null), w(null);
+      },
+      onError: () => {
+        S(null);
+      }
+    }), w(null));
+  }, Te = (t) => {
+    x(t.id), E("details");
+  }, ze = async (t, u) => {
+    try {
+      const $ = localStorage.getItem("chai_optimize_images") !== "false";
+      if (u) {
+        const z = await ae([
+          {
+            file: t,
+            folderId: void 0,
+            name: o.name || "",
+            optimize: $
+          }
+        ]);
+        if ((z == null ? void 0 : z.length) > 0) {
+          const ce = z[0];
+          n({
+            ...Y(ce, ["id", "width", "height", "description"]),
+            url: ce.url
+          });
+        }
+      } else {
+        const z = await re({
+          id: o.id || "",
+          file: t
+        });
+        z && n({
+          ...Y(z, ["id", "width", "height", "description"]),
+          url: z.url
+        });
+      }
+      m({ show: !1, file: "" }), s();
+    } catch ($) {
+      console.error(c("Error saving edited image:"), $);
+    }
+  }, De = M((t) => {
+    J([t]);
+  }, []), je = M(
+    (t) => {
+      ne(t);
+    },
+    [ne]
+  );
+  return /* @__PURE__ */ r(H, { children: [
+    /* @__PURE__ */ r("div", { className: "flex h-[80vh] max-h-[1232px] w-[80vw] max-w-[1232px] flex-col space-y-4", children: [
+      /* @__PURE__ */ e("h1", { className: "text-lg font-medium", children: c("Digital Asset Manager") }),
+      v === "grid" ? /* @__PURE__ */ r(H, { children: [
+        /* @__PURE__ */ e(
+          Nt,
+          {
+            maxFileSize: a,
+            allowedTypes: I,
+            uploadAssets: ae,
+            isUpdatingAsset: Ae,
+            isUploadingAsset: be,
+            onUploaded: De
+          }
+        ),
+        /* @__PURE__ */ r("div", { className: "relative flex flex-1 flex-col gap-y-3 overflow-hidden rounded-lg border p-2", children: [
+          /* @__PURE__ */ r("div", { className: "flex items-center justify-between gap-3", children: [
+            /* @__PURE__ */ r("div", { className: "relative w-1/2", children: [
+              /* @__PURE__ */ e(
+                He,
+                {
+                  strokeWidth: 3,
+                  className: `absolute left-2 top-2.5 h-4 w-4 text-muted-foreground ${F.length > 0 ? "text-indigo-800" : ""}`
+                }
+              ),
+              /* @__PURE__ */ e(
+                ue,
+                {
+                  placeholder: c("Search assets..."),
+                  onChange: Ce,
+                  value: F,
+                  className: "pl-8"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ r("div", { className: "flex items-center gap-x-2", children: [
+              k.length > 0 ? /* @__PURE__ */ e("div", { className: "flex items-center justify-between", children: /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+                k.length > 0 && /* @__PURE__ */ e(H, { children: /* @__PURE__ */ e(
+                  p,
+                  {
+                    variant: "outline",
+                    size: "sm",
+                    onClick: () => Ee(),
+                    title: c("Clear selection"),
+                    children: c("Clear")
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  p,
+                  {
+                    size: "sm",
+                    onClick: () => se(k),
+                    disabled: k.length === 0,
+                    children: c("Select Asset")
+                  }
+                )
+              ] }) }) : null,
+              /* @__PURE__ */ e(p, { variant: "ghost", size: "icon", onClick: () => ve(), children: /* @__PURE__ */ e(Xe, { className: "h-4 w-4" }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ e("div", { className: "flex-1 overflow-y-auto pb-[66px]", children: W ? /* @__PURE__ */ r("div", { className: "columns-1 gap-3 space-y-3 sm:columns-3 md:columns-5", children: [
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" }),
+            /* @__PURE__ */ e("div", { className: "h-64 w-full animate-pulse rounded bg-gray-200" })
+          ] }) : !W && !Ne ? /* @__PURE__ */ r("div", { className: "flex h-full flex-col items-center justify-center rounded-lg border", children: [
+            /* @__PURE__ */ e("div", { className: "text-muted-foreground", children: /* @__PURE__ */ e(Ze, { className: "h-9 w-9 text-indigo-500" }) }),
+            /* @__PURE__ */ e("div", { className: "text-lg text-muted-foreground", children: c("No assets found") }),
+            /* @__PURE__ */ e("div", { className: "text-sm text-muted-foreground", children: j.length > 0 ? c("No assets found for your search: {{query}}", { query: j }) : c("Start uploading assets to get started") }),
+            /* @__PURE__ */ e("br", {})
+          ] }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-3 p-1", children: D == null ? void 0 : D.map((t) => /* @__PURE__ */ r(
+            "div",
+            {
+              className: me(
+                "group relative flex max-h-[180px] max-w-[180px] cursor-pointer flex-col justify-between overflow-hidden rounded-lg border-2 transition-all",
+                k.some((u) => u.id === t.id) ? "border-blue-500" : "hover:border-black/90",
+                C && (g == null ? void 0 : g.id) === t.id ? "pointer-events-none opacity-50" : "",
+                C === t.id ? "pointer-events-none opacity-50" : ""
+              ),
+              onClick: () => Se(t),
+              onDoubleClick: () => se([t]),
+              children: [
+                /* @__PURE__ */ r("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(B, { 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: `h-full min-h-[80px] w-full object-contain ${k.some((u) => u.id === t.id) ? "" : "group-hover:blur group-hover:contrast-50"}`
+                    }
+                  ) : /* @__PURE__ */ r("div", { className: "flex h-full items-center justify-center", children: [
+                    /* @__PURE__ */ e(Je, { className: "h-12 w-12 text-muted-foreground" }),
+                    t.thumbnailUrl && /* @__PURE__ */ e(
+                      "img",
+                      {
+                        src: `${t.thumbnailUrl || "/placeholder.svg"}?v=${(t == null ? void 0 : t.updatedAt) || t.createdAt}`,
+                        alt: t.name,
+                        className: "absolute inset-0 h-full w-full object-cover"
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ r("div", { className: "flex items-end justify-between border-t-[1px] border-black/10 bg-white px-2 py-1", children: [
+                  /* @__PURE__ */ e("div", { className: "truncate text-xs leading-tight", title: t.name, children: t.name }),
+                  /* @__PURE__ */ e("div", { className: "flex items-center justify-between whitespace-nowrap text-[9px] font-light text-muted-foreground", children: /* @__PURE__ */ e("span", { children: ct((t == null ? void 0 : t.size) || 0) }) })
+                ] }),
+                !k.some((u) => u.id === t.id) && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center opacity-0 transition-opacity group-hover:opacity-100", children: /* @__PURE__ */ r("div", { className: "grid grid-cols-4 gap-2 p-2", children: [
+                  /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(P, { children: [
+                    /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ e(
+                      p,
+                      {
+                        variant: "secondary",
+                        size: "icon",
+                        className: "h-8 w-8 rounded-full",
+                        onClick: (u) => {
+                          u.stopPropagation(), Te(t);
+                        },
+                        children: /* @__PURE__ */ e(Ye, { className: "h-4 w-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("p", { children: c("View Details") }) })
+                  ] }) }),
+                  /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(P, { children: [
+                    /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ e(
+                      p,
+                      {
+                        variant: "secondary",
+                        size: "icon",
+                        className: "h-8 w-8 rounded-full",
+                        onClick: (u) => {
+                          u.stopPropagation(), navigator.clipboard.writeText(t.url), A.success(c("Asset URL copied to clipboard"));
+                        },
+                        children: /* @__PURE__ */ e(fe, { className: "h-4 w-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("p", { children: c("Copy URL") }) })
+                  ] }) }),
+                  /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(P, { children: [
+                    /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ e(
+                      p,
+                      {
+                        variant: "secondary",
+                        size: "icon",
+                        className: "h-8 w-8 rounded-full",
+                        onClick: (u) => {
+                          u.stopPropagation(), m({
+                            id: t.id,
+                            show: !0,
+                            file: t.url,
+                            name: t.name
+                          });
+                        },
+                        children: /* @__PURE__ */ e(et, { className: "h-4 w-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("p", { children: c("Edit Image") }) })
+                  ] }) }),
+                  /* @__PURE__ */ e(_, { children: /* @__PURE__ */ r(P, { children: [
+                    /* @__PURE__ */ e(q, { asChild: !0, children: /* @__PURE__ */ e(
+                      p,
+                      {
+                        variant: "destructive",
+                        size: "icon",
+                        className: "h-8 w-8 rounded-full",
+                        onClick: (u) => {
+                          u.stopPropagation(), ke(t);
+                        },
+                        children: /* @__PURE__ */ e(tt, { className: "h-4 w-4" })
+                      }
+                    ) }),
+                    /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e("p", { children: c("Delete Asset") }) })
+                  ] }) })
+                ] }) }),
+                k.some((u) => u.id === t.id) && /* @__PURE__ */ e("div", { className: "absolute right-1 top-1 h-max rounded-full border border-white bg-blue-500 p-1", children: /* @__PURE__ */ e(it, { className: "h-3 w-3 text-white", strokeWidth: 5 }) })
+              ]
+            },
+            t.id
+          )) }) }),
+          T > 1 && /* @__PURE__ */ e("div", { className: "absolute bottom-0 left-0 right-0 border-t bg-white p-4", children: /* @__PURE__ */ e(st, { fallback: /* @__PURE__ */ e("div", { className: "text-red-500", children: c("Error loading pagination") }), children: /* @__PURE__ */ e(
+            ht,
+            {
+              currentPage: R,
+              totalPages: T,
+              onPageChange: je,
+              pageRangeDisplayed: 3,
+              showPageInput: !0
+            }
+          ) }) })
+        ] })
+      ] }) : /* @__PURE__ */ e(
+        xt,
+        {
+          assetId: N || l || "",
+          onBack: () => {
+            E("grid"), x(null);
+          },
+          onEdit: (t) => {
+            m({
+              id: t.id,
+              show: !0,
+              file: t.url,
+              name: t.name
+            });
+          },
+          onSave: async (t) => {
+            if (N) {
+              f(!0);
+              try {
+                const u = D.find(($) => $.id === N);
+                u && await re(Oe(u, { description: t }));
+              } finally {
+                f(!1);
+              }
+            }
+          },
+          isSaving: d
+        }
+      )
+    ] }),
+    o.show && /* @__PURE__ */ e(
+      rt,
+      {
+        fallback: /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e(B, { className: "h-8 w-8 animate-spin" }) }),
+        children: /* @__PURE__ */ e(
+          vt,
+          {
+            imageUrl: o.file,
+            onSave: ze,
+            onClose: () => m({ show: !1, file: "" }),
+            defaultSavedImageName: o.name,
+            isEditing: !!o.id
+          }
+        )
+      }
+    ),
+    g && /* @__PURE__ */ e(Ue, { open: !!g, onOpenChange: () => w(null), children: /* @__PURE__ */ r(Le, { children: [
+      /* @__PURE__ */ r($e, { children: [
+        /* @__PURE__ */ e(Me, { children: c("Delete Asset") }),
+        /* @__PURE__ */ e(_e, { children: c('Are you sure you want to delete "{{name}}"? This action cannot be undone.', { name: g.name }) })
+      ] }),
+      /* @__PURE__ */ r(Pe, { className: "gap-2 sm:gap-0", children: [
+        /* @__PURE__ */ e(p, { variant: "outline", onClick: () => w(null), children: c("Cancel") }),
+        /* @__PURE__ */ e(p, { variant: "destructive", onClick: Ie, children: c("Delete") })
+      ] })
+    ] }) })
+  ] });
+}
+export {
+  jt as default
+};