@webdevarif/dashui 0.5.0 → 0.6.0

package/dist/index.mjs

@@ -1752,436 +1752,150 @@ function StorageBar({
   ] });
 }
 
-// src/components/media/media-card.tsx
+// src/components/media/upload-zone.tsx
+import { useState as useState4, useRef as useRef2 } from "react";
+import { Cloud } from "lucide-react";
 import { jsx as jsx32, jsxs as jsxs18 } from "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 = Cloud;
+function UploadZone({
+  onFiles,
+  accept = "*",
+  multiple = true,
+  disabled = false
+}) {
+  const [dragActive, setDragActive] = useState4(false);
+  const inputRef = useRef2(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__ */ jsxs18(
     "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__ */ jsx32(
-          "img",
+        /* @__PURE__ */ jsx32(
+          "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__ */ jsx32("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
-        /* @__PURE__ */ jsx32("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__ */ jsx32("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
-        selected && /* @__PURE__ */ jsx32("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__ */ jsx32(
-          "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__ */ jsx32("polyline", { points: "20 6 9 17 4 12" })
-          }
-        ) })
+        ),
+        /* @__PURE__ */ jsxs18("div", { className: "flex flex-col items-center gap-2", children: [
+          /* @__PURE__ */ jsx32(CloudUploadIcon, { className: "w-8 h-8 text-gray-400" }),
+          /* @__PURE__ */ jsxs18("div", { children: [
+            /* @__PURE__ */ jsx32("p", { className: "text-sm font-medium text-gray-700", children: dragActive ? "Drop files here" : "Drag & drop files, or click to browse" }),
+            /* @__PURE__ */ jsx32("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
+import { CheckCircle, X as X2, Image, File, Video } from "lucide-react";
 import { jsx as jsx33, jsxs as jsxs19 } from "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 = CheckCircle;
+var Cancel01Icon = X2;
+function UploadProgressPanel({
+  items,
+  onRetry,
+  onCancel,
+  onCancelAll
 }) {
-  if (loading) {
-    return /* @__PURE__ */ jsx33("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: Array.from({ length: columns * 2 }).map((_, i) => /* @__PURE__ */ jsx33(
+  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__ */ jsxs19("div", { className: "rounded-lg border border-gray-200 bg-white p-4 shadow-sm", children: [
+    /* @__PURE__ */ jsxs19("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx33("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__ */ jsx33(
+        "button",
+        {
+          onClick: onCancelAll,
+          className: "text-xs text-red-600 hover:text-red-700 font-medium",
+          children: "Cancel all"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx33("div", { className: "w-full h-2 bg-gray-200 rounded-full overflow-hidden mb-4", children: /* @__PURE__ */ jsx33(
       "div",
       {
-        className: "aspect-square animate-pulse rounded-xl bg-muted"
-      },
-      i
-    )) });
-  }
-  if (files.length === 0) {
-    return /* @__PURE__ */ jsxs19("div", { className: cn("flex flex-col items-center justify-center gap-3 py-16 text-center", className), children: [
-      /* @__PURE__ */ jsx33("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxs19(
-        "svg",
+        className: "h-full bg-blue-500 transition-all duration-300",
+        style: { width: `${avgProgress}%` }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs19("p", { className: "text-xs text-gray-600 mb-4", children: [
+      doneCount,
+      " done",
+      failedCount > 0 && ` \xB7 ${failedCount} failed`,
+      activeCount > 0 && ` \xB7 ${activeCount} uploading`
+    ] }),
+    /* @__PURE__ */ jsx33("div", { className: "space-y-2 max-h-48 overflow-y-auto", children: items.map((item) => /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-3 p-2 rounded-md bg-gray-50 hover:bg-gray-100 transition-colors", children: [
+      /* @__PURE__ */ jsxs19("div", { className: "shrink-0", children: [
+        item.status === "done" && /* @__PURE__ */ jsx33(CheckmarkCircle01Icon, { className: "w-4 h-4 text-green-600" }),
+        item.status === "failed" && /* @__PURE__ */ jsx33(Cancel01Icon, { className: "w-4 h-4 text-red-600" }),
+        (item.status === "uploading" || item.status === "pending") && /* @__PURE__ */ jsx33("div", { className: "w-4 h-4 rounded-full border-2 border-blue-300 border-t-blue-600 animate-spin" })
+      ] }),
+      /* @__PURE__ */ jsxs19("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx33("p", { className: "text-xs font-medium text-gray-900 truncate", children: item.name }),
+        item.error && /* @__PURE__ */ jsx33("p", { className: "text-xs text-red-600", children: item.error }),
+        item.status === "uploading" && /* @__PURE__ */ jsxs19("p", { className: "text-xs text-gray-500", children: [
+          item.progress,
+          "%"
+        ] })
+      ] }),
+      item.status === "failed" && onRetry && /* @__PURE__ */ jsx33(
+        "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__ */ jsx33("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-            /* @__PURE__ */ jsx33("circle", { cx: "9", cy: "9", r: "2" }),
-            /* @__PURE__ */ jsx33("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__ */ jsx33("p", { className: "text-sm text-muted-foreground", children: emptyMessage }),
-      onUploadClick && /* @__PURE__ */ jsx33(
+      ),
+      (item.status === "uploading" || item.status === "pending") && onCancel && /* @__PURE__ */ jsx33(
         "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__ */ jsx33(Cancel01Icon, { className: "w-4 h-4" })
         }
       )
-    ] });
-  }
-  return /* @__PURE__ */ jsx33("div", { className: cn("grid gap-2", columnsClass[columns] ?? columnsClass[5], className), children: files.map((file) => /* @__PURE__ */ jsx33(
-    MediaCard,
-    {
-      file,
-      selected: selected?.has(file.id),
-      onClick: () => onSelect?.(file)
-    },
-    file.id
-  )) });
-}
-
-// src/components/media/media-picker-dialog.tsx
-import * as React20 from "react";
-import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs20 } from "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__ */ jsx34(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs20(
-    DialogContent,
-    {
-      "aria-describedby": void 0,
-      className: "flex h-[85vh] max-h-[700px] max-w-4xl flex-col gap-0 p-0",
-      children: [
-        /* @__PURE__ */ jsxs20(DialogHeader, { className: "flex-row items-center gap-3 border-b px-5 py-3 pr-12 space-y-0 shrink-0", children: [
-          onUpload && /* @__PURE__ */ jsxs20(Fragment4, { children: [
-            /* @__PURE__ */ jsx34(
-              "input",
-              {
-                ref: fileInputRef,
-                type: "file",
-                className: "hidden",
-                multiple: true,
-                accept: accept === "images" ? "image/*" : void 0,
-                onChange: handleUploadChange
-              }
-            ),
-            /* @__PURE__ */ jsxs20(
-              "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__ */ jsxs20("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__ */ jsx34("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                    /* @__PURE__ */ jsx34("polyline", { points: "17 8 12 3 7 8" }),
-                    /* @__PURE__ */ jsx34("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-                  ] }),
-                  "Upload"
-                ]
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx34(DialogTitle, { className: "text-sm font-semibold flex-1", children: title }),
-          /* @__PURE__ */ jsxs20("span", { className: "text-xs text-muted-foreground shrink-0", children: [
-            total,
-            " files"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 overflow-hidden min-h-0", children: [
-          folders.length > 0 && /* @__PURE__ */ jsxs20("aside", { className: "flex w-44 shrink-0 flex-col gap-0.5 overflow-y-auto border-r p-2", children: [
-            /* @__PURE__ */ jsxs20(
-              "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__ */ jsx34("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__ */ jsx34("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__ */ jsxs20(
-              "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__ */ jsx34("span", { className: "text-base leading-none", children: folder.icon ?? "\u{1F4C1}" }),
-                  /* @__PURE__ */ jsx34("span", { className: "truncate", children: folder.name })
-                ]
-              },
-              folder.id
-            ))
-          ] }),
-          /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col overflow-hidden min-w-0", children: [
-            /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2 border-b px-4 py-2 shrink-0", children: [
-              /* @__PURE__ */ jsx34("div", { className: "flex items-center gap-0.5 rounded-lg border border-input bg-muted/50 p-0.5", children: typeOptions.map((opt) => /* @__PURE__ */ jsx34(
-                "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__ */ jsxs20("div", { className: "relative flex-1 max-w-xs ml-auto", children: [
-                /* @__PURE__ */ jsxs20("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__ */ jsx34("circle", { cx: "11", cy: "11", r: "8" }),
-                  /* @__PURE__ */ jsx34("path", { d: "m21 21-4.35-4.35" })
-                ] }),
-                /* @__PURE__ */ jsx34(
-                  "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__ */ jsxs20(
-              "div",
-              {
-                className: "relative flex-1 overflow-y-auto p-4",
-                onDragEnter: handleDragEnter,
-                onDragLeave: handleDragLeave,
-                onDragOver: handleDragOver,
-                onDrop: handleDrop,
-                children: [
-                  isDragging && onUpload && /* @__PURE__ */ jsxs20("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__ */ jsxs20("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__ */ jsx34("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                      /* @__PURE__ */ jsx34("polyline", { points: "17 8 12 3 7 8" }),
-                      /* @__PURE__ */ jsx34("line", { x1: "12", y1: "3", x2: "12", y2: "15" })
-                    ] }),
-                    /* @__PURE__ */ jsxs20("p", { className: "text-sm font-medium text-primary", children: [
-                      "Drop ",
-                      accept === "images" ? "images" : "files",
-                      " to upload"
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsx34(
-                    MediaGrid,
-                    {
-                      files,
-                      selected: localSelected,
-                      onSelect: handleFileSelect,
-                      loading,
-                      columns: 5,
-                      onUploadClick: onUpload ? () => fileInputRef.current?.click() : void 0
-                    }
-                  ),
-                  hasMore && /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34(
-                    "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__ */ jsxs20("div", { className: "flex items-center justify-between gap-4 border-t px-5 py-3 shrink-0 bg-muted/20", children: [
-          /* @__PURE__ */ jsxs20("span", { className: "text-sm text-muted-foreground", children: [
-            localSelected.size,
-            " file",
-            localSelected.size !== 1 ? "s" : "",
-            " selected"
-          ] }),
-          firstSelected && firstSelected.mimeType.startsWith("image/") && /* @__PURE__ */ jsx34(
-            "img",
-            {
-              src: firstSelected.url,
-              alt: firstSelected.name,
-              className: "h-9 w-9 rounded-lg border border-border object-cover shadow-sm"
-            }
-          ),
-          /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ jsx34(
-              "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__ */ jsxs20(
-              "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
-import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs20 } from "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]" },
@@ -2197,8 +1911,8 @@ function ImagePickerField({
   className
 }) {
   const sz = sizeMap[size];
-  return /* @__PURE__ */ jsxs21("div", { className: cn("relative inline-flex shrink-0", className), children: [
-    /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsxs20("div", { className: cn("relative inline-flex shrink-0", className), children: [
+    /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
@@ -2208,15 +1922,15 @@ function ImagePickerField({
           sz.box,
           value ? "border-border overflow-hidden" : "border-border hover:border-[color:var(--primary)] hover:bg-primary/5"
         ),
-        children: value ? /* @__PURE__ */ jsx35(
+        children: value ? /* @__PURE__ */ jsx34(
           "img",
           {
             src: value,
             alt: filename ?? "Selected image",
             className: "h-full w-full rounded-md object-cover"
           }
-        ) : /* @__PURE__ */ jsxs21("div", { className: "flex flex-col items-center gap-1", children: [
-          /* @__PURE__ */ jsxs21(
+        ) : /* @__PURE__ */ jsxs20("div", { className: "flex flex-col items-center gap-1", children: [
+          /* @__PURE__ */ jsxs20(
             "svg",
             {
               className: cn(sz.icon, "text-muted-foreground transition-colors group-hover:text-primary"),
@@ -2228,17 +1942,17 @@ function ImagePickerField({
               strokeLinecap: "round",
               strokeLinejoin: "round",
               children: [
-                /* @__PURE__ */ jsx35("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx35("circle", { cx: "9", cy: "9", r: "2" }),
-                /* @__PURE__ */ jsx35("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
+                /* @__PURE__ */ jsx34("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx34("circle", { cx: "9", cy: "9", r: "2" }),
+                /* @__PURE__ */ jsx34("path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" })
               ]
             }
           ),
-          size !== "sm" && /* @__PURE__ */ jsx35("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
+          size !== "sm" && /* @__PURE__ */ jsx34("span", { className: cn(sz.text, "text-muted-foreground text-center leading-tight transition-colors group-hover:text-primary"), children: emptyLabel })
         ] })
       }
     ),
-    value && onRemove && /* @__PURE__ */ jsx35(
+    value && onRemove && /* @__PURE__ */ jsx34(
       "button",
       {
         type: "button",
@@ -2248,12 +1962,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__ */ jsx35("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__ */ jsx35("path", { d: "M18 6 6 18M6 6l12 12" }) })
+        children: /* @__PURE__ */ jsx34("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__ */ jsx34("path", { d: "M18 6 6 18M6 6l12 12" }) })
       }
     )
   ] });
 }
 
+// src/components/media/media-card.tsx
+import { jsx as jsx35, jsxs as jsxs21 } from "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__ */ jsxs21(
+    "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__ */ jsx35(
+          "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__ */ jsx35("div", { className: "flex h-full w-full items-center justify-center bg-muted text-4xl", children: getFileEmoji(file.mimeType) }),
+        /* @__PURE__ */ jsx35("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__ */ jsx35("p", { className: "truncate px-2 pb-2 text-[11px] font-medium text-white", children: displayName }) }),
+        selected && /* @__PURE__ */ jsx35("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__ */ jsx35(
+          "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__ */ jsx35("polyline", { points: "20 6 9 17 4 12" })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
 // src/components/form/form-field.tsx
 import { jsx as jsx36, jsxs as jsxs22 } from "react/jsx-runtime";
 function FormField({
@@ -2321,7 +2093,7 @@ function FormSection({
 }
 
 // src/components/form/local-input.tsx
-import { useState as useState5, useRef as useRef3, useEffect as useEffect4 } from "react";
+import { useState as useState5, useRef as useRef3, useEffect as useEffect3 } from "react";
 import { jsx as jsx39 } from "react/jsx-runtime";
 function LocalInput({
   value,
@@ -2333,7 +2105,7 @@ function LocalInput({
   const ref = useRef3(null);
   const onChangeRef = useRef3(onChange);
   onChangeRef.current = onChange;
-  useEffect4(() => {
+  useEffect3(() => {
     if (document.activeElement !== ref.current) {
       setLocal(String(value ?? ""));
     }
@@ -2539,7 +2311,7 @@ function ResponsiveSizeField({
 }
 
 // src/components/feedback/alert.tsx
-import { AlertCircle, CheckCircle2, Info, AlertTriangle, X as X2 } from "lucide-react";
+import { AlertCircle, CheckCircle2, Info, AlertTriangle, X as X3 } from "lucide-react";
 import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 var variantConfig = {
   info: {
@@ -2589,7 +2361,7 @@ function Alert({
           {
             onClick: onDismiss,
             className: "absolute right-3 top-3 rounded-md p-1 opacity-70 hover:opacity-100",
-            children: /* @__PURE__ */ jsx43(X2, { className: "h-4 w-4" })
+            children: /* @__PURE__ */ jsx43(X3, { className: "h-4 w-4" })
           }
         )
       ]
@@ -2718,7 +2490,7 @@ function PostStatusBadge({
 }
 
 // src/components/content/post-list-table.tsx
-import * as React21 from "react";
+import * as React20 from "react";
 
 // src/components/Skeleton.tsx
 import { jsx as jsx47 } from "react/jsx-runtime";
@@ -2808,10 +2580,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)) {
@@ -3323,7 +3095,7 @@ function SlugInput({
 }
 
 // src/components/content/post-sidebar-section.tsx
-import * as React22 from "react";
+import * as React21 from "react";
 import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 function IconChevronDown() {
   return /* @__PURE__ */ jsx52(
@@ -3347,7 +3119,7 @@ function PostSidebarSection({
   defaultOpen = true,
   className
 }) {
-  const [open, setOpen] = React22.useState(defaultOpen);
+  const [open, setOpen] = React21.useState(defaultOpen);
   return /* @__PURE__ */ jsxs35("div", { className: cn("border-b border-border", className), children: [
     /* @__PURE__ */ jsxs35(
       "button",
@@ -3383,7 +3155,7 @@ function PostSidebarSection({
 }
 
 // src/components/ui/hsl-color-input.tsx
-import { useState as useState11, useRef as useRef6, useEffect as useEffect7, useCallback as useCallback2 } from "react";
+import { useState as useState11, useRef as useRef6, useEffect as useEffect6, useCallback as useCallback2 } from "react";
 import Color2 from "color";
 import * as Popover2 from "@radix-ui/react-popover";
 
@@ -3394,7 +3166,7 @@ import {
   memo,
   useCallback,
   useContext,
-  useEffect as useEffect6,
+  useEffect as useEffect5,
   useMemo as useMemo2,
   useRef as useRef5,
   useState as useState10
@@ -3427,7 +3199,7 @@ var ColorPicker = ({
   const [alpha, setAlphaState] = useState10(initial.alpha() * 100);
   const [mode, setMode] = useState10("HEX");
   const notifyRef = useRef5(onChange);
-  useEffect6(() => {
+  useEffect5(() => {
     notifyRef.current = onChange;
   }, [onChange]);
   const notify = useCallback((h, s, l, a) => {
@@ -3475,7 +3247,7 @@ var ColorPickerSelection = memo(({ className, ...props }) => {
     setSaturation(x * 100);
     setLightness((x < 0.01 ? 100 : 50 + 50 * (1 - x)) * (1 - y));
   }, [isDragging, setSaturation, setLightness]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (!isDragging) return;
     const up = () => setIsDragging(false);
     window.addEventListener("pointermove", handleMove);
@@ -3599,7 +3371,7 @@ var ColorPickerFormat = ({ className, ...props }) => {
     }
     return "";
   })();
-  useEffect6(() => {
+  useEffect5(() => {
     if (!focused) setLocalVal(computedVal);
   }, [computedVal, focused]);
   const tryApply = (raw) => {
@@ -3697,7 +3469,7 @@ function hexToHsl(hex) {
 }
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
-  useEffect7(() => {
+  useEffect6(() => {
     try {
       const hex = Color2.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
       onHexChange(hex);
@@ -3712,10 +3484,10 @@ function HslColorInput({ value, onChange, className, inputClassName, disabled })
   const cssColor = value ? `hsl(${value})` : "transparent";
   const pendingHexRef = useRef6(hexValue);
   const onChangeRef = useRef6(onChange);
-  useEffect7(() => {
+  useEffect6(() => {
     onChangeRef.current = onChange;
   }, [onChange]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (open) pendingHexRef.current = hexValue;
   }, [open, hexValue]);
   const handleHexChange = useCallback2((hex) => {
@@ -4012,7 +3784,7 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
 }
 
 // src/components/auth/AuthButton.tsx
-import { Fragment as Fragment5, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx60, jsxs as jsxs42 } from "react/jsx-runtime";
 function AuthButton({
   loading,
   variant = "primary",
@@ -4067,7 +3839,7 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ jsxs42(Fragment5, { children: [
+      children: loading ? /* @__PURE__ */ jsxs42(Fragment4, { children: [
         /* @__PURE__ */ jsx60(
           "span",
           {
@@ -4197,8 +3969,6 @@ export {
   LoadingSpinner,
   LocalInput,
   MediaCard,
-  MediaGrid,
-  MediaPickerDialog,
   NotificationBell,
   Page,
   PageSection,
@@ -4244,6 +4014,8 @@ export {
   TooltipProvider,
   TooltipTrigger,
   TopBar,
+  UploadProgressPanel,
+  UploadZone,
   badgeVariants,
   buttonVariants,
   cn,