@webdevarif/dashui 0.5.0 → 0.6.0

package/dist/index.js

@@ -98,8 +98,6 @@ __export(index_exports, {
   LoadingSpinner: () => LoadingSpinner,
   LocalInput: () => LocalInput,
   MediaCard: () => MediaCard,
-  MediaGrid: () => MediaGrid,
-  MediaPickerDialog: () => MediaPickerDialog,
   NotificationBell: () => NotificationBell,
   Page: () => Page,
   PageSection: () => PageSection,
@@ -145,6 +143,8 @@ __export(index_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   TopBar: () => TopBar,
+  UploadProgressPanel: () => UploadProgressPanel,
+  UploadZone: () => UploadZone,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   cn: () => cn,
@@ -1909,436 +1909,150 @@ function StorageBar({
   ] });
 }
 
-// src/components/media/media-card.tsx
+// src/components/media/upload-zone.tsx
+var import_react = require("react");
+var import_lucide_react10 = require("lucide-react");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-function stripExtension(name) {
-  return name.replace(/\.[^/.]+$/, "");
-}
-function getFileEmoji(mimeType) {
-  if (mimeType.startsWith("video/")) return "\u{1F3AC}";
-  if (mimeType.startsWith("audio/")) return "\u{1F3B5}";
-  if (mimeType === "application/pdf") return "\u{1F4C4}";
-  return "\u{1F4CE}";
-}
-function MediaCard({ file, selected = false, onClick, className }) {
-  const isImage = file.mimeType.startsWith("image/");
-  const displayName = stripExtension(file.name);
+var CloudUploadIcon = import_lucide_react10.Cloud;
+function UploadZone({
+  onFiles,
+  accept = "*",
+  multiple = true,
+  disabled = false
+}) {
+  const [dragActive, setDragActive] = (0, import_react.useState)(false);
+  const inputRef = (0, import_react.useRef)(null);
+  const handleDrag = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!disabled) {
+      setDragActive(e.type === "dragenter" || e.type === "dragover");
+    }
+  };
+  const handleDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (!disabled && e.dataTransfer.files?.length) {
+      onFiles(Array.from(e.dataTransfer.files));
+    }
+  };
+  const handleChange = (e) => {
+    if (e.target.files?.length) {
+      onFiles(Array.from(e.target.files));
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
-      role: "button",
-      tabIndex: 0,
-      onClick,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") onClick?.();
-      },
-      className: cn(
-        "group relative aspect-square cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-150",
-        selected ? "border-[color:var(--primary)] shadow-[0_0_0_2px_rgba(40,127,113,0.2)]" : "border-transparent hover:border-[color:var(--primary)]/40",
-        className
-      ),
+      className: `relative rounded-lg border-2 border-dashed p-8 text-center transition-colors ${dragActive ? "border-blue-500 bg-blue-50/50" : "border-gray-300 bg-gray-50/50 hover:border-gray-400"} ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}`,
+      onDragEnter: handleDrag,
+      onDragLeave: handleDrag,
+      onDragOver: handleDrag,
+      onDrop: handleDrop,
+      onClick: () => !disabled && inputRef.current?.click(),
       children: [
-        isImage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "img",
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          "input",
           {
-            src: file.url,
-            alt: file.name,
-            className: "h-full w-full object-cover transition-transform duration-150 group-hover:scale-[1.03]",
-            loading: "lazy"
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            onChange: handleChange,
+            disabled,
+            className: "hidden"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-150 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
-        selected && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary shadow", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-          "svg",
-          {
-            className: "h-3 w-3 text-white",
-            xmlns: "http://www.w3.org/2000/svg",
-            viewBox: "0 0 24 24",
-            fill: "none",
-            stroke: "currentColor",
-            strokeWidth: "3",
-            strokeLinecap: "round",
-            strokeLinejoin: "round",
-            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("polyline", { points: "20 6 9 17 4 12" })
-          }
-        ) })
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloudUploadIcon, { className: "w-8 h-8 text-gray-400" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm font-medium text-gray-700", children: dragActive ? "Drop files here" : "Drag & drop files, or click to browse" }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-xs text-gray-500 mt-1", children: "Max file size: 100MB" })
+          ] })
+        ] })
       ]
     }
   );
 }
 
-// src/components/media/media-grid.tsx
+// src/components/media/upload-progress-panel.tsx
+var import_lucide_react11 = require("lucide-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var columnsClass = {
-  4: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4",
-  5: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5",
-  6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
-};
-function MediaGrid({
-  files,
-  selected,
-  onSelect,
-  loading = false,
-  columns = 5,
-  emptyMessage = "No files yet.",
-  onUploadClick,
-  className
+var CheckmarkCircle01Icon = import_lucide_react11.CheckCircle;
+var Cancel01Icon = import_lucide_react11.X;
+function UploadProgressPanel({
+  items,
+  onRetry,
+  onCancel,
+  onCancelAll
 }) {
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  if (items.length === 0) return null;
+  const activeCount = items.filter((it) => it.status === "uploading").length;
+  const doneCount = items.filter((it) => it.status === "done").length;
+  const failedCount = items.filter((it) => it.status === "failed").length;
+  const avgProgress = items.length > 0 ? Math.round(items.reduce((s, it) => s + it.progress, 0) / items.length) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("h3", { className: "text-sm font-semibold text-gray-900", children: activeCount > 0 ? `Uploading ${activeCount} file${activeCount > 1 ? "s" : ""}` : "Upload complete" }),
+      onCancelAll && items.some((it) => it.status === "uploading" || it.status === "pending") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
+        {
+          onClick: onCancelAll,
+          className: "text-xs text-red-600 hover:text-red-700 font-medium",
+          children: "Cancel all"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-full h-2 bg-gray-200 rounded-full overflow-hidden mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
-        className: "aspect-square animate-pulse rounded-xl bg-muted"
-      },
-      i
-    )) });
-  }
-  if (files.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-16 text-center", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        "svg",
+        className: "h-full bg-blue-500 transition-all duration-300",
+        style: { width: `${avgProgress}%` }
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "text-xs text-gray-600 mb-4", children: [
+      doneCount,
+      " done",
+      failedCount > 0 && ` \xB7 ${failedCount} failed`,
+      activeCount > 0 && ` \xB7 ${activeCount} uploading`
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex items-center gap-3 p-2 rounded-md bg-gray-50 hover:bg-gray-100 transition-colors", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "shrink-0", children: [
+        item.status === "done" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(CheckmarkCircle01Icon, { className: "w-4 h-4 text-green-600" }),
+        item.status === "failed" && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Cancel01Icon, { className: "w-4 h-4 text-red-600" }),
+        (item.status === "uploading" || item.status === "pending") && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-4 h-4 rounded-full border-2 border-blue-300 border-t-blue-600 animate-spin" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs font-medium text-gray-900 truncate", children: item.name }),
+        item.error && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-xs text-red-600", children: item.error }),
+        item.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "text-xs text-gray-500", children: [
+          item.progress,
+          "%"
+        ] })
+      ] }),
+      item.status === "failed" && onRetry && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        "button",
         {
-          className: "h-7 w-7 text-muted-foreground",
-          xmlns: "http://www.w3.org/2000/svg",
-          viewBox: "0 0 24 24",
-          fill: "none",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
-          ]
+          onClick: () => onRetry(item.id),
+          className: "text-xs text-blue-600 hover:text-blue-700 font-medium shrink-0",
+          children: "Retry"
         }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
-      onUploadClick && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      ),
+      (item.status === "uploading" || item.status === "pending") && onCancel && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         "button",
         {
-          onClick: onUploadClick,
-          className: "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
-          children: "Upload files"
+          onClick: () => onCancel(item.id),
+          className: "text-xs text-gray-600 hover:text-gray-700 shrink-0",
+          children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Cancel01Icon, { className: "w-4 h-4" })
         }
       )
-    ] });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-    MediaCard,
-    {
-      file,
-      selected: selected?.has(file.id),
-      onClick: () => onSelect?.(file)
-    },
-    file.id
-  )) });
-}
-
-// src/components/media/media-picker-dialog.tsx
-var React20 = __toESM(require("react"));
-var import_jsx_runtime34 = require("react/jsx-runtime");
-var ALL_TYPE_OPTIONS = [
-  { value: "all", label: "All" },
-  { value: "images", label: "Images" },
-  { value: "videos", label: "Videos" },
-  { value: "documents", label: "Docs" }
-];
-function MediaPickerDialog({
-  open,
-  onOpenChange,
-  title = "Media Library",
-  files,
-  folders = [],
-  loading = false,
-  total,
-  typeFilter = "all",
-  onTypeChange,
-  search = "",
-  onSearch,
-  activeFolderId,
-  onFolderChange,
-  onUpload,
-  onLoadMore,
-  hasMore = false,
-  multiple = false,
-  initialSelected = [],
-  accept = "all",
-  onSelect
-}) {
-  const [localSelected, setLocalSelected] = React20.useState(new Set(initialSelected));
-  const [isDragging, setIsDragging] = React20.useState(false);
-  const fileInputRef = React20.useRef(null);
-  const dragCounterRef = React20.useRef(0);
-  React20.useEffect(() => {
-    if (!open) {
-      setLocalSelected(/* @__PURE__ */ new Set());
-      setIsDragging(false);
-      dragCounterRef.current = 0;
-    }
-  }, [open]);
-  const prevInitialRef = React20.useRef("");
-  React20.useEffect(() => {
-    if (!open) return;
-    const key = initialSelected.join(",");
-    if (key === prevInitialRef.current) return;
-    prevInitialRef.current = key;
-    if (initialSelected.length > 0) {
-      setLocalSelected(new Set(initialSelected));
-    }
-  }, [open, initialSelected]);
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (e.dataTransfer.types.includes("Files")) {
-      dragCounterRef.current++;
-      setIsDragging(true);
-    }
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounterRef.current--;
-    if (dragCounterRef.current <= 0) {
-      dragCounterRef.current = 0;
-      setIsDragging(false);
-    }
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dragCounterRef.current = 0;
-    setIsDragging(false);
-    if (!onUpload || !e.dataTransfer.files.length) return;
-    const accepted = accept === "images" ? Array.from(e.dataTransfer.files).filter((f) => f.type.startsWith("image/")) : Array.from(e.dataTransfer.files);
-    if (!accepted.length) return;
-    const dt = new DataTransfer();
-    accepted.forEach((f) => dt.items.add(f));
-    onUpload(dt.files);
-  };
-  const typeOptions = ALL_TYPE_OPTIONS.filter(
-    (o) => accept === "images" ? o.value === "all" || o.value === "images" : true
-  );
-  const handleFileSelect = (file) => {
-    setLocalSelected((prev) => {
-      if (multiple) {
-        const next = new Set(prev);
-        next.has(file.id) ? next.delete(file.id) : next.add(file.id);
-        return next;
-      }
-      return prev.has(file.id) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([file.id]);
-    });
-  };
-  const handleConfirm = () => {
-    const selected = files.filter((f) => localSelected.has(f.id));
-    onSelect(selected);
-    onOpenChange(false);
-  };
-  const handleUploadChange = (e) => {
-    if (e.target.files && onUpload) {
-      onUpload(e.target.files);
-    }
-  };
-  const firstSelected = files.find((f) => localSelected.has(f.id));
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-    DialogContent,
-    {
-      "aria-describedby": void 0,
-      className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DialogHeader, { className: "flex-row items-center gap-3 border-b px-5 py-3 pr-12 space-y-0 shrink-0", children: [
-          onUpload && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                className: "hidden",
-                multiple: true,
-                accept: accept === "images" ? "image/*" : void 0,
-                onChange: handleUploadChange
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "button",
-              {
-                onClick: () => fileInputRef.current?.click(),
-                className: "flex shrink-0 items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-opacity hover:opacity-90",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "h-3.5 w-3.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "17 8 12 3 7 8" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-                  ] }),
-                  "Upload"
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DialogTitle, { className: "text-sm font-semibold flex-1", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-xs text-muted-foreground shrink-0", children: [
-            total,
-            " files"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
-          folders.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "button",
-              {
-                onClick: () => onFolderChange?.(""),
-                className: cn(
-                  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-                  !activeFolderId ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { className: "h-3.5 w-3.5 shrink-0", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" }) }),
-                  "All files"
-                ]
-              }
-            ),
-            folders.map((folder) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "button",
-              {
-                onClick: () => onFolderChange?.(folder.id),
-                className: cn(
-                  "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-                  activeFolderId === folder.id ? "bg-primary/10 font-medium text-primary" : "text-muted-foreground hover:bg-accent"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: folder.name })
-                ]
-              },
-              folder.id
-            ))
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2 border-b px-4 py-2 shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center gap-0.5 rounded-lg border border-input bg-muted/50 p-0.5", children: typeOptions.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                "button",
-                {
-                  onClick: () => onTypeChange?.(opt.value),
-                  className: cn(
-                    "rounded-md px-2.5 py-1 text-xs font-medium transition-colors",
-                    typeFilter === opt.value ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-                  ),
-                  children: opt.label
-                },
-                opt.value
-              )) }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "relative flex-1 max-w-xs ml-auto", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "m21 21-4.35-4.35" })
-                ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                  "input",
-                  {
-                    type: "search",
-                    value: search,
-                    onChange: (e) => onSearch?.(e.target.value),
-                    placeholder: "Search\u2026",
-                    className: "h-8 w-full rounded-lg border border-input bg-background pl-8 pr-3 text-xs outline-none focus:border-primary focus:ring-1 focus:ring-primary/30"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "div",
-              {
-                className: "relative flex-1 overflow-y-auto p-4",
-                onDragEnter: handleDragEnter,
-                onDragLeave: handleDragLeave,
-                onDragOver: handleDragOver,
-                onDrop: handleDrop,
-                children: [
-                  isDragging && onUpload && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-primary bg-primary/5 backdrop-blur-[1px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("svg", { className: "h-10 w-10 text-primary opacity-70", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("polyline", { points: "17 8 12 3 7 8" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("p", { className: "text-sm font-medium text-primary", children: [
-                      "Drop ",
-                      accept === "images" ? "images" : "files",
-                      " to upload"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    MediaGrid,
-                    {
-                      files,
-                      selected: localSelected,
-                      onSelect: handleFileSelect,
-                      loading,
-                      columns: 5,
-                      onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
-                    }
-                  ),
-                  hasMore && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-                    "button",
-                    {
-                      onClick: onLoadMore,
-                      className: "rounded-lg border px-4 py-2 text-xs text-muted-foreground transition-colors hover:bg-accent",
-                      children: "Load more"
-                    }
-                  ) })
-                ]
-              }
-            )
-          ] })
-        ] }),
-        localSelected.size > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center justify-between gap-4 border-t px-5 py-3 shrink-0 bg-muted/20", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "text-sm text-muted-foreground", children: [
-            localSelected.size,
-            " file",
-            localSelected.size !== 1 ? "s" : "",
-            " selected"
-          ] }),
-          firstSelected && firstSelected.mimeType.startsWith("image/") && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "img",
-            {
-              src: firstSelected.url,
-              alt: firstSelected.name,
-              className: "h-9 w-9 rounded-lg border border-border object-cover shadow-sm"
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-              "button",
-              {
-                onClick: () => setLocalSelected(/* @__PURE__ */ new Set()),
-                className: "rounded-lg px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-accent",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
-              "button",
-              {
-                onClick: handleConfirm,
-                className: "rounded-lg bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground transition-opacity hover:opacity-90",
-                children: [
-                  "Use ",
-                  localSelected.size,
-                  " file",
-                  localSelected.size !== 1 ? "s" : ""
-                ]
-              }
-            )
-          ] })
-        ] })
-      ]
-    }
-  ) });
+    ] }, item.id)) })
+  ] });
 }
 
 // src/components/media/image-picker-field.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var sizeMap = {
   sm: { box: "h-12 w-12", icon: "h-4 w-4", text: "text-[9px]" },
   md: { box: "h-20 w-20", icon: "h-5 w-5", text: "text-[10px]" },
@@ -2354,8 +2068,8 @@ function ImagePickerField({
   className
 }) {
   const sz = sizeMap[size];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("relative inline-flex shrink-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         type: "button",
@@ -2365,15 +2079,15 @@ function ImagePickerField({
           sz.box,
           value ? "border-border overflow-hidden" : "border-border hover:border-[color:var(--primary)] hover:bg-primary/5"
         ),
-        children: value ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        children: value ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "img",
           {
             src: value,
             alt: filename ?? "Selected image",
             className: "h-full w-full rounded-md object-cover"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
             "svg",
             {
               className: cn(sz.icon, "text-muted-foreground transition-colors group-hover:text-primary"),
@@ -2385,17 +2099,17 @@ function ImagePickerField({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
-                /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("circle", { cx: "9", cy: "9", r: "2" }),
+                /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
               ]
             }
           ),
-          size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
+          size !== "sm" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
         ] })
       }
     ),
-    value && onRemove && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    value && onRemove && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
       {
         type: "button",
@@ -2405,12 +2119,70 @@ function ImagePickerField({
         },
         className: "absolute -right-1.5 -top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-destructive-foreground shadow-sm transition-opacity hover:opacity-90",
         "aria-label": "Remove image",
-        children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("svg", { className: "h-2.5 w-2.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { className: "h-2.5 w-2.5", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) })
       }
     )
   ] });
 }
 
+// src/components/media/media-card.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function stripExtension(name) {
+  return name.replace(/\.[^/.]+$/, "");
+}
+function getFileEmoji(mimeType) {
+  if (mimeType.startsWith("video/")) return "\u{1F3AC}";
+  if (mimeType.startsWith("audio/")) return "\u{1F3B5}";
+  if (mimeType === "application/pdf") return "\u{1F4C4}";
+  return "\u{1F4CE}";
+}
+function MediaCard({ file, selected = false, onClick, className }) {
+  const isImage = file.mimeType.startsWith("image/");
+  const displayName = stripExtension(file.name);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+    "div",
+    {
+      role: "button",
+      tabIndex: 0,
+      onClick,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") onClick?.();
+      },
+      className: cn(
+        "group relative aspect-square cursor-pointer rounded-xl overflow-hidden border-2 transition-all duration-150",
+        selected ? "border-[color:var(--primary)] shadow-[0_0_0_2px_rgba(40,127,113,0.2)]" : "border-transparent hover:border-[color:var(--primary)]/40",
+        className
+      ),
+      children: [
+        isImage ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "img",
+          {
+            src: file.url,
+            alt: file.name,
+            className: "h-full w-full object-cover transition-transform duration-150 group-hover:scale-[1.03]",
+            loading: "lazy"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute inset-0 flex items-end bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 transition-opacity duration-150 group-hover:opacity-100", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
+        selected && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "absolute right-1.5 top-1.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary shadow", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "svg",
+          {
+            className: "h-3 w-3 text-white",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "3",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/components/form/form-field.tsx
 var import_jsx_runtime36 = require("react/jsx-runtime");
 function FormField({
@@ -2478,7 +2250,7 @@ function FormSection({
 }
 
 // src/components/form/local-input.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function LocalInput({
   value,
@@ -2486,11 +2258,11 @@ function LocalInput({
   commitOnBlur,
   ...rest
 }) {
-  const [local, setLocal] = (0, import_react.useState)(String(value ?? ""));
-  const ref = (0, import_react.useRef)(null);
-  const onChangeRef = (0, import_react.useRef)(onChange);
+  const [local, setLocal] = (0, import_react2.useState)(String(value ?? ""));
+  const ref = (0, import_react2.useRef)(null);
+  const onChangeRef = (0, import_react2.useRef)(onChange);
   onChangeRef.current = onChange;
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (document.activeElement !== ref.current) {
       setLocal(String(value ?? ""));
     }
@@ -2517,7 +2289,7 @@ function LocalInput({
 }
 
 // src/components/form/responsive-size-device-icon.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/components/form/responsive-types.tsx
 var import_jsx_runtime40 = require("react/jsx-runtime");
@@ -2552,7 +2324,7 @@ function ResponsiveSizeDeviceIcon({
   activeDevice,
   setActiveDevice
 }) {
-  const [open, setOpen] = (0, import_react2.useState)(false);
+  const [open, setOpen] = (0, import_react3.useState)(false);
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       "button",
@@ -2602,7 +2374,7 @@ function ResponsiveSizeDeviceIcon({
 }
 
 // src/components/form/responsive-size-field.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 function ResponsiveSizeField({
   value,
@@ -2613,7 +2385,7 @@ function ResponsiveSizeField({
   onUnitChange,
   onCustomChange
 }) {
-  const [unitOpen, setUnitOpen] = (0, import_react3.useState)(false);
+  const [unitOpen, setUnitOpen] = (0, import_react4.useState)(false);
   const currentVal = value[activeDevice] ?? value.desktop ?? 0;
   const isCustom = unit === "custom";
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "relative flex items-center border border-white/10 rounded-md bg-white/5 w-full", style: { height: 32 }, children: [
@@ -2696,23 +2468,23 @@ function ResponsiveSizeField({
 }
 
 // src/components/feedback/alert.tsx
-var import_lucide_react10 = require("lucide-react");
+var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var variantConfig = {
   info: {
-    icon: import_lucide_react10.Info,
+    icon: import_lucide_react12.Info,
     classes: "border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-100"
   },
   success: {
-    icon: import_lucide_react10.CheckCircle2,
+    icon: import_lucide_react12.CheckCircle2,
     classes: "border-green-200 bg-green-50 text-green-900 dark:border-green-800 dark:bg-green-950 dark:text-green-100"
   },
   warning: {
-    icon: import_lucide_react10.AlertTriangle,
+    icon: import_lucide_react12.AlertTriangle,
     classes: "border-yellow-200 bg-yellow-50 text-yellow-900 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-100"
   },
   error: {
-    icon: import_lucide_react10.AlertCircle,
+    icon: import_lucide_react12.AlertCircle,
     classes: "border-red-200 bg-red-50 text-red-900 dark:border-red-800 dark:bg-red-950 dark:text-red-100"
   }
 };
@@ -2746,7 +2518,7 @@ function Alert({
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react10.X, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react12.X, { className: "h-4 w-4" })
           }
         )
       ]
@@ -2755,7 +2527,7 @@ function Alert({
 }
 
 // src/components/feedback/loading-spinner.tsx
-var import_lucide_react11 = require("lucide-react");
+var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var sizeMap2 = {
   sm: "h-4 w-4",
@@ -2764,7 +2536,7 @@ var sizeMap2 = {
 };
 function LoadingSpinner({ size = "md", className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-    import_lucide_react11.Loader2,
+    import_lucide_react13.Loader2,
     {
       className: cn("animate-spin text-muted-foreground", sizeMap2[size], className)
     }
@@ -2875,7 +2647,7 @@ function PostStatusBadge({
 }
 
 // src/components/content/post-list-table.tsx
-var React21 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 
 // src/components/Skeleton.tsx
 var import_jsx_runtime47 = require("react/jsx-runtime");
@@ -2965,10 +2737,10 @@ function getInitials(name) {
   return name.split(" ").slice(0, 2).map((w) => w[0]?.toUpperCase() ?? "").join("");
 }
 function RowActions({ post, onEdit, onDelete, onDuplicate, onStatusChange }) {
-  const [open, setOpen] = React21.useState(false);
-  const [statusOpen, setStatusOpen] = React21.useState(false);
-  const ref = React21.useRef(null);
-  React21.useEffect(() => {
+  const [open, setOpen] = React20.useState(false);
+  const [statusOpen, setStatusOpen] = React20.useState(false);
+  const ref = React20.useRef(null);
+  React20.useEffect(() => {
     if (!open) return;
     function handleClick(e) {
       if (ref.current && !ref.current.contains(e.target)) {
@@ -3480,7 +3252,7 @@ function SlugInput({
 }
 
 // src/components/content/post-sidebar-section.tsx
-var React22 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_jsx_runtime52 = require("react/jsx-runtime");
 function IconChevronDown() {
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
@@ -3504,7 +3276,7 @@ function PostSidebarSection({
   defaultOpen = true,
   className
 }) {
-  const [open, setOpen] = React22.useState(defaultOpen);
+  const [open, setOpen] = React21.useState(defaultOpen);
   return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cn("border-b border-border", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
       "button",
@@ -3540,18 +3312,18 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-var import_react5 = require("react");
+var import_react6 = require("react");
 var import_color2 = __toESM(require("color"));
 var Popover2 = __toESM(require("@radix-ui/react-popover"));
 
 // src/components/ui/color-picker.tsx
 var import_color = __toESM(require("color"));
-var import_react4 = require("react");
+var import_react5 = require("react");
 var Slider = __toESM(require("@radix-ui/react-slider"));
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var ColorPickerContext = (0, import_react4.createContext)(void 0);
+var ColorPickerContext = (0, import_react5.createContext)(void 0);
 var useColorPicker = () => {
-  const ctx = (0, import_react4.useContext)(ColorPickerContext);
+  const ctx = (0, import_react5.useContext)(ColorPickerContext);
   if (!ctx) throw new Error("useColorPicker must be used within ColorPicker");
   return ctx;
 };
@@ -3569,51 +3341,51 @@ var ColorPicker = ({
       return (0, import_color.default)("#000000");
     }
   })();
-  const [hue, setHueState] = (0, import_react4.useState)(initial.hue());
-  const [saturation, setSaturationState] = (0, import_react4.useState)(initial.saturationl());
-  const [lightness, setLightnessState] = (0, import_react4.useState)(initial.lightness());
-  const [alpha, setAlphaState] = (0, import_react4.useState)(initial.alpha() * 100);
-  const [mode, setMode] = (0, import_react4.useState)("HEX");
-  const notifyRef = (0, import_react4.useRef)(onChange);
-  (0, import_react4.useEffect)(() => {
+  const [hue, setHueState] = (0, import_react5.useState)(initial.hue());
+  const [saturation, setSaturationState] = (0, import_react5.useState)(initial.saturationl());
+  const [lightness, setLightnessState] = (0, import_react5.useState)(initial.lightness());
+  const [alpha, setAlphaState] = (0, import_react5.useState)(initial.alpha() * 100);
+  const [mode, setMode] = (0, import_react5.useState)("HEX");
+  const notifyRef = (0, import_react5.useRef)(onChange);
+  (0, import_react5.useEffect)(() => {
     notifyRef.current = onChange;
   }, [onChange]);
-  const notify = (0, import_react4.useCallback)((h, s, l, a) => {
+  const notify = (0, import_react5.useCallback)((h, s, l, a) => {
     notifyRef.current?.(import_color.default.hsl(h, s, l).alpha(a / 100).hexa());
   }, []);
-  const setHue = (0, import_react4.useCallback)((h) => {
+  const setHue = (0, import_react5.useCallback)((h) => {
     setHueState(h);
     notify(h, saturation, lightness, alpha);
   }, [saturation, lightness, alpha, notify]);
-  const setSaturation = (0, import_react4.useCallback)((s) => {
+  const setSaturation = (0, import_react5.useCallback)((s) => {
     setSaturationState(s);
     notify(hue, s, lightness, alpha);
   }, [hue, lightness, alpha, notify]);
-  const setLightness = (0, import_react4.useCallback)((l) => {
+  const setLightness = (0, import_react5.useCallback)((l) => {
     setLightnessState(l);
     notify(hue, saturation, l, alpha);
   }, [hue, saturation, alpha, notify]);
-  const setAlpha = (0, import_react4.useCallback)((a) => {
+  const setAlpha = (0, import_react5.useCallback)((a) => {
     setAlphaState(a);
     notify(hue, saturation, lightness, a);
   }, [hue, saturation, lightness, notify]);
   return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha, setMode }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
-var ColorPickerSelection = (0, import_react4.memo)(({ className, ...props }) => {
-  const containerRef = (0, import_react4.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react4.useState)(false);
+var ColorPickerSelection = (0, import_react5.memo)(({ className, ...props }) => {
+  const containerRef = (0, import_react5.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react5.useState)(false);
   const { hue, saturation, lightness, setSaturation, setLightness } = useColorPicker();
-  const [posX, setPosX] = (0, import_react4.useState)(() => saturation / 100);
-  const [posY, setPosY] = (0, import_react4.useState)(() => {
+  const [posX, setPosX] = (0, import_react5.useState)(() => saturation / 100);
+  const [posY, setPosY] = (0, import_react5.useState)(() => {
     const x = saturation / 100;
     const topL = x < 0.01 ? 100 : 50 + 50 * (1 - x);
     return topL > 0 ? Math.max(0, Math.min(1, 1 - lightness / topL)) : 0;
   });
-  const bg = (0, import_react4.useMemo)(
+  const bg = (0, import_react5.useMemo)(
     () => `linear-gradient(0deg,rgba(0,0,0,1),rgba(0,0,0,0)),linear-gradient(90deg,rgba(255,255,255,1),rgba(255,255,255,0)),hsl(${hue},100%,50%)`,
     [hue]
   );
-  const handleMove = (0, import_react4.useCallback)((e) => {
+  const handleMove = (0, import_react5.useCallback)((e) => {
     if (!isDragging || !containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
     const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
@@ -3623,7 +3395,7 @@ var ColorPickerSelection = (0, import_react4.memo)(({ className, ...props }) =>
     setSaturation(x * 100);
     setLightness((x < 0.01 ? 100 : 50 + 50 * (1 - x)) * (1 - y));
   }, [isDragging, setSaturation, setLightness]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!isDragging) return;
     const up = () => setIsDragging(false);
     window.addEventListener("pointermove", handleMove);
@@ -3732,8 +3504,8 @@ var ColorPickerOutput = ({ className, ...props }) => {
 };
 var ColorPickerFormat = ({ className, ...props }) => {
   const { hue, saturation, lightness, alpha, mode, setHue, setSaturation, setLightness, setAlpha } = useColorPicker();
-  const [focused, setFocused] = (0, import_react4.useState)(false);
-  const [localVal, setLocalVal] = (0, import_react4.useState)("");
+  const [focused, setFocused] = (0, import_react5.useState)(false);
+  const [localVal, setLocalVal] = (0, import_react5.useState)("");
   const computedVal = (() => {
     try {
       const c = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
@@ -3747,7 +3519,7 @@ var ColorPickerFormat = ({ className, ...props }) => {
     }
     return "";
   })();
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!focused) setLocalVal(computedVal);
   }, [computedVal, focused]);
   const tryApply = (raw) => {
@@ -3845,7 +3617,7 @@ function hexToHsl(hex) {
 }
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     try {
       const hex = import_color2.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
       onHexChange(hex);
@@ -3855,21 +3627,21 @@ function ColorReader({ onHexChange }) {
   return null;
 }
 function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
-  const [open, setOpen] = (0, import_react5.useState)(false);
+  const [open, setOpen] = (0, import_react6.useState)(false);
   const hexValue = hslToHex(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const pendingHexRef = (0, import_react5.useRef)(hexValue);
-  const onChangeRef = (0, import_react5.useRef)(onChange);
-  (0, import_react5.useEffect)(() => {
+  const pendingHexRef = (0, import_react6.useRef)(hexValue);
+  const onChangeRef = (0, import_react6.useRef)(onChange);
+  (0, import_react6.useEffect)(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     if (open) pendingHexRef.current = hexValue;
   }, [open, hexValue]);
-  const handleHexChange = (0, import_react5.useCallback)((hex) => {
+  const handleHexChange = (0, import_react6.useCallback)((hex) => {
     pendingHexRef.current = hex;
   }, []);
-  const handleOpenChange = (0, import_react5.useCallback)((newOpen) => {
+  const handleOpenChange = (0, import_react6.useCallback)((newOpen) => {
     if (!newOpen && open) {
       const pending = pendingHexRef.current;
       if (pending && pending !== hexValue) {
@@ -3937,9 +3709,9 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
 }
 
 // src/hooks/index.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = (0, import_react6.useState)(initial);
+  const [isOpen, setIsOpen] = (0, import_react7.useState)(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3949,7 +3721,7 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = (0, import_react6.useState)(1);
+  const [page, setPage] = (0, import_react7.useState)(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
@@ -4346,8 +4118,6 @@ var import_next_themes2 = require("next-themes");
   LoadingSpinner,
   LocalInput,
   MediaCard,
-  MediaGrid,
-  MediaPickerDialog,
   NotificationBell,
   Page,
   PageSection,
@@ -4393,6 +4163,8 @@ var import_next_themes2 = require("next-themes");
   TooltipProvider,
   TooltipTrigger,
   TopBar,
+  UploadProgressPanel,
+  UploadZone,
   badgeVariants,
   buttonVariants,
   cn,