@firecms/media_manager 3.1.0-canary.1df3b2c

package/dist/index.es.js

@@ -0,0 +1,1280 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { c } from "react-compiler-runtime";
+import { createContext, useContext, useState, useCallback, useEffect, useRef, useMemo } from "react";
+import Compressor from "compressorjs";
+import { ImageIcon, VideoLibraryIcon, AudiotrackIcon, DescriptionIcon, cls, defaultBorderMixin, Typography, CheckIcon, Card, IconButton, DownloadIcon, DeleteIcon, CloseIcon, TextField, Chip, Button, CircularProgress, Dialog, DialogContent, DialogActions, CloudUploadIcon, Tooltip, Container, AddIcon, SearchBar, AppsIcon, Icon, RefreshIcon } from "@firecms/ui";
+import { useCreateFormex } from "@firecms/formex";
+import { useSnackbarController, useStorageSource } from "@firecms/core";
+import { Link } from "react-router-dom";
+const MediaManagerContext = createContext(void 0);
+function useMediaManager() {
+  const context = useContext(MediaManagerContext);
+  if (!context) {
+    throw new Error("useMediaManager must be used within a MediaManagerProvider");
+  }
+  return context;
+}
+function MediaManagerProvider(t0) {
+  const $ = c(3);
+  const {
+    controller,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== controller) {
+    t1 = /* @__PURE__ */ jsx(MediaManagerContext.Provider, { value: controller, children });
+    $[0] = children;
+    $[1] = controller;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+}
+const DEFAULT_THUMBNAIL_PATH = "thumbs";
+function useMediaManagerController({
+  storageSource,
+  dataSourceDelegate,
+  storagePath,
+  collectionPath,
+  bucket,
+  thumbnailSizes,
+  thumbnailPath = DEFAULT_THUMBNAIL_PATH
+}) {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState();
+  const [assets, setAssets] = useState([]);
+  const [selectedAsset, setSelectedAsset] = useState();
+  const [searchQuery, setSearchQuery] = useState("");
+  const fetchDownloadURL = useCallback(async (asset) => {
+    try {
+      const downloadConfig = await storageSource.getDownloadURL(asset.storagePath, asset.bucket);
+      return {
+        ...asset,
+        downloadURL: downloadConfig.url ?? void 0
+      };
+    } catch (err) {
+      console.warn(`Failed to get download URL for ${asset.storagePath}:`, err);
+      return {
+        ...asset,
+        downloadURL: void 0
+      };
+    }
+  }, [storageSource]);
+  const refreshAssets = useCallback(async () => {
+    setLoading(true);
+    setError(void 0);
+    try {
+      console.log("Fetching media assets from:", collectionPath);
+      const entities = await dataSourceDelegate.fetchCollection({
+        path: collectionPath,
+        orderBy: "createdAt",
+        order: "desc"
+      });
+      console.log("Fetched entities:", entities.length);
+      if (entities.length === 0) {
+        setAssets([]);
+        return;
+      }
+      const loadedAssets = await Promise.all(entities.map(async (entity) => {
+        const values = entity.values;
+        const baseAsset = {
+          id: entity.id,
+          fileName: values.fileName,
+          storagePath: values.storagePath,
+          mimeType: values.mimeType,
+          size: values.size,
+          dimensions: values.dimensions,
+          title: values.title,
+          altText: values.altText,
+          caption: values.caption,
+          tags: values.tags,
+          bucket: values.bucket,
+          createdAt: values.createdAt instanceof Date ? values.createdAt : values.createdAt?.toDate ? values.createdAt.toDate() : new Date(values.createdAt),
+          updatedAt: values.updatedAt instanceof Date ? values.updatedAt : values.updatedAt?.toDate ? values.updatedAt.toDate() : new Date(values.updatedAt)
+        };
+        if (baseAsset.mimeType?.startsWith("image/") || baseAsset.mimeType?.startsWith("video/")) {
+          return await fetchDownloadURL(baseAsset);
+        }
+        return {
+          ...baseAsset,
+          downloadURL: void 0
+        };
+      }));
+      console.log("Loaded assets with URLs:", loadedAssets.length);
+      setAssets(loadedAssets);
+    } catch (err_0) {
+      console.error("Error fetching media assets:", err_0);
+      setError(err_0 instanceof Error ? err_0 : new Error(String(err_0)));
+    } finally {
+      setLoading(false);
+    }
+  }, [dataSourceDelegate, collectionPath, fetchDownloadURL]);
+  useEffect(() => {
+    refreshAssets();
+  }, [refreshAssets]);
+  const uploadFile = useCallback(async (file, metadata) => {
+    console.log("Uploading file:", file.name, "to path:", storagePath);
+    const uploadResult = await storageSource.uploadFile({
+      file,
+      fileName: file.name,
+      path: storagePath,
+      bucket
+    });
+    console.log("Upload result:", uploadResult);
+    let downloadURL;
+    try {
+      const downloadConfig_0 = await storageSource.getDownloadURL(uploadResult.path, uploadResult.bucket);
+      downloadURL = downloadConfig_0.url ?? void 0;
+      console.log("Got download URL:", downloadURL);
+    } catch (err_1) {
+      console.warn("Failed to get download URL after upload:", err_1);
+    }
+    let dimensions;
+    if (file.type.startsWith("image/")) {
+      try {
+        dimensions = await getImageDimensions(file);
+      } catch (err_2) {
+        console.warn("Failed to get image dimensions:", err_2);
+      }
+    }
+    const thumbnails = {};
+    const isRasterImage = file.type.startsWith("image/") && file.type !== "image/svg+xml";
+    if (thumbnailSizes && thumbnailSizes.length > 0 && isRasterImage) {
+      console.log("Generating thumbnails for sizes:", thumbnailSizes.map((s) => s.name));
+      for (const size of thumbnailSizes) {
+        try {
+          const thumbnailBlob = await generateThumbnail(file, size.width, size.height, size.quality ?? 0.8);
+          const thumbFileName = `${Date.now()}_${size.name}_${file.name}`;
+          const thumbPath = `${storagePath}/${thumbnailPath}/${size.name}`;
+          const thumbUploadResult = await storageSource.uploadFile({
+            file: new File([thumbnailBlob], thumbFileName, {
+              type: "image/jpeg"
+            }),
+            fileName: thumbFileName,
+            path: thumbPath,
+            bucket
+          });
+          const thumbDownloadConfig = await storageSource.getDownloadURL(thumbUploadResult.path, thumbUploadResult.bucket);
+          if (thumbDownloadConfig.url) {
+            thumbnails[size.name] = thumbDownloadConfig.url;
+            console.log(`Generated ${size.name} thumbnail:`, thumbDownloadConfig.url);
+          }
+        } catch (err_3) {
+          console.warn(`Failed to generate ${size.name} thumbnail:`, err_3);
+        }
+      }
+    }
+    const now = /* @__PURE__ */ new Date();
+    const assetData = {
+      fileName: file.name,
+      storagePath: uploadResult.path,
+      mimeType: file.type,
+      size: file.size,
+      createdAt: now,
+      updatedAt: now
+    };
+    if (dimensions) assetData.dimensions = dimensions;
+    if (metadata?.title) assetData.title = metadata.title;
+    if (metadata?.altText) assetData.altText = metadata.altText;
+    if (metadata?.caption) assetData.caption = metadata.caption;
+    if (metadata?.tags && metadata.tags.length > 0) assetData.tags = metadata.tags;
+    if (uploadResult.bucket) assetData.bucket = uploadResult.bucket;
+    if (downloadURL) assetData.downloadURL = downloadURL;
+    if (Object.keys(thumbnails).length > 0) assetData.thumbnails = thumbnails;
+    console.log("Saving asset data to database:", assetData);
+    const entity_0 = await dataSourceDelegate.saveEntity({
+      path: collectionPath,
+      values: assetData,
+      status: "new"
+    });
+    console.log("Saved entity:", entity_0.id);
+    const newAsset = {
+      id: entity_0.id,
+      fileName: file.name,
+      storagePath: uploadResult.path,
+      downloadURL,
+      mimeType: file.type,
+      size: file.size,
+      createdAt: now,
+      updatedAt: now,
+      dimensions,
+      title: metadata?.title,
+      altText: metadata?.altText,
+      caption: metadata?.caption,
+      tags: metadata?.tags,
+      bucket: uploadResult.bucket,
+      thumbnails: Object.keys(thumbnails).length > 0 ? thumbnails : void 0
+    };
+    setAssets((prev) => [newAsset, ...prev]);
+    return newAsset;
+  }, [storageSource, dataSourceDelegate, storagePath, collectionPath, bucket, thumbnailSizes, thumbnailPath]);
+  const deleteAsset = useCallback(async (assetId) => {
+    const asset_0 = assets.find((a) => a.id === assetId);
+    if (!asset_0) {
+      throw new Error(`Asset with id ${assetId} not found`);
+    }
+    console.log("Deleting asset:", assetId, asset_0.storagePath);
+    try {
+      await storageSource.deleteFile(asset_0.storagePath, asset_0.bucket);
+    } catch (err_4) {
+      console.warn("Failed to delete from storage (may not exist):", err_4);
+    }
+    await dataSourceDelegate.deleteEntity({
+      entity: {
+        id: assetId,
+        path: collectionPath,
+        values: asset_0
+      }
+    });
+    setAssets((prev_0) => prev_0.filter((a_0) => a_0.id !== assetId));
+    if (selectedAsset?.id === assetId) {
+      setSelectedAsset(void 0);
+    }
+  }, [assets, storageSource, dataSourceDelegate, collectionPath, selectedAsset]);
+  const updateAsset = useCallback(async (assetId_0, data) => {
+    const asset_1 = assets.find((a_1) => a_1.id === assetId_0);
+    if (!asset_1) {
+      throw new Error(`Asset with id ${assetId_0} not found`);
+    }
+    const cleanData = {};
+    Object.entries(data).forEach(([key, value]) => {
+      if (value !== void 0) {
+        cleanData[key] = value;
+      }
+    });
+    cleanData.updatedAt = /* @__PURE__ */ new Date();
+    console.log("Updating asset:", assetId_0, cleanData);
+    await dataSourceDelegate.saveEntity({
+      path: collectionPath,
+      entityId: assetId_0,
+      values: cleanData,
+      previousValues: asset_1,
+      status: "existing"
+    });
+    setAssets((prev_1) => prev_1.map((a_2) => a_2.id === assetId_0 ? {
+      ...a_2,
+      ...cleanData
+    } : a_2));
+    if (selectedAsset?.id === assetId_0) {
+      setSelectedAsset((prev_2) => prev_2 ? {
+        ...prev_2,
+        ...cleanData
+      } : prev_2);
+    }
+  }, [assets, dataSourceDelegate, collectionPath, selectedAsset]);
+  const searchAssets = useCallback((query) => {
+    setSearchQuery(query);
+  }, []);
+  const selectAsset = useCallback((asset_2) => {
+    setSelectedAsset(asset_2);
+  }, []);
+  const filteredAssets = searchQuery ? assets.filter((asset_3) => asset_3.fileName.toLowerCase().includes(searchQuery.toLowerCase()) || asset_3.title?.toLowerCase().includes(searchQuery.toLowerCase()) || asset_3.tags?.some((tag) => tag.toLowerCase().includes(searchQuery.toLowerCase()))) : assets;
+  return {
+    loading,
+    error,
+    assets: filteredAssets,
+    totalCount: assets.length,
+    selectedAsset,
+    selectAsset,
+    uploadFile,
+    deleteAsset,
+    updateAsset,
+    refreshAssets,
+    searchAssets,
+    storagePath,
+    collectionPath
+  };
+}
+function getImageDimensions(file) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => {
+      resolve({
+        width: img.width,
+        height: img.height
+      });
+      URL.revokeObjectURL(img.src);
+    };
+    img.onerror = reject;
+    img.src = URL.createObjectURL(file);
+  });
+}
+async function generateThumbnail(file, maxWidth, maxHeight, quality) {
+  return new Promise((resolve, reject) => {
+    new Compressor(file, {
+      quality,
+      maxWidth,
+      maxHeight,
+      mimeType: "image/jpeg",
+      success: (result) => {
+        resolve(result);
+      },
+      error: reject
+    });
+  });
+}
+function MediaAssetCard(t0) {
+  const $ = c(53);
+  const {
+    asset,
+    viewMode,
+    onClick,
+    selected,
+    thumbnailSize: t1
+  } = t0;
+  const thumbnailSize = t1 === void 0 ? "small" : t1;
+  let t2;
+  if ($[0] !== asset.mimeType) {
+    t2 = asset.mimeType.startsWith("image/");
+    $[0] = asset.mimeType;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const isImage = t2;
+  const isVideo = asset.mimeType.startsWith("video/");
+  const isAudio = asset.mimeType.startsWith("audio/");
+  const FileIcon = isImage ? ImageIcon : isVideo ? VideoLibraryIcon : isAudio ? AudiotrackIcon : DescriptionIcon;
+  const formatSize = _temp;
+  const imageUrl = asset.thumbnails?.[thumbnailSize] ?? asset.downloadURL;
+  let t3;
+  if ($[2] !== FileIcon || $[3] !== asset.altText || $[4] !== asset.fileName || $[5] !== imageUrl || $[6] !== isImage) {
+    t3 = isImage && imageUrl ? /* @__PURE__ */ jsx("img", { src: imageUrl, alt: asset.altText || asset.fileName, className: "w-full h-full object-cover transition-transform duration-200 group-hover:scale-105", loading: "lazy" }) : /* @__PURE__ */ jsx("div", { className: "w-full h-full flex items-center justify-center bg-surface-100 dark:bg-surface-800", children: /* @__PURE__ */ jsx(FileIcon, { size: "large", className: "text-surface-400 dark:text-surface-500" }) });
+    $[2] = FileIcon;
+    $[3] = asset.altText;
+    $[4] = asset.fileName;
+    $[5] = imageUrl;
+    $[6] = isImage;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const thumbnail = t3;
+  if (viewMode === "list") {
+    const t42 = selected && "ring-2 ring-primary bg-primary/5";
+    let t52;
+    if ($[8] !== t42) {
+      t52 = cls("p-3 cursor-pointer flex items-center gap-3 rounded-lg", "hover:bg-surface-100 dark:hover:bg-surface-800", "transition-colors duration-150", `border ${defaultBorderMixin}`, t42);
+      $[8] = t42;
+      $[9] = t52;
+    } else {
+      t52 = $[9];
+    }
+    let t62;
+    if ($[10] !== thumbnail) {
+      t62 = /* @__PURE__ */ jsx("div", { className: "w-12 h-12 rounded-md overflow-hidden flex-shrink-0 bg-surface-100 dark:bg-surface-800", children: thumbnail });
+      $[10] = thumbnail;
+      $[11] = t62;
+    } else {
+      t62 = $[11];
+    }
+    const t72 = asset.title || asset.fileName;
+    let t82;
+    if ($[12] !== t72) {
+      t82 = /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-medium truncate text-surface-900 dark:text-white", children: t72 });
+      $[12] = t72;
+      $[13] = t82;
+    } else {
+      t82 = $[13];
+    }
+    const t92 = formatSize(asset.size);
+    let t102;
+    if ($[14] !== asset.mimeType) {
+      t102 = asset.mimeType.split("/")[1]?.toUpperCase();
+      $[14] = asset.mimeType;
+      $[15] = t102;
+    } else {
+      t102 = $[15];
+    }
+    let t112;
+    if ($[16] !== t102 || $[17] !== t92) {
+      t112 = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", children: [
+        t92,
+        " • ",
+        t102
+      ] });
+      $[16] = t102;
+      $[17] = t92;
+      $[18] = t112;
+    } else {
+      t112 = $[18];
+    }
+    let t122;
+    if ($[19] !== t112 || $[20] !== t82) {
+      t122 = /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        t82,
+        t112
+      ] });
+      $[19] = t112;
+      $[20] = t82;
+      $[21] = t122;
+    } else {
+      t122 = $[21];
+    }
+    let t132;
+    if ($[22] !== selected) {
+      t132 = selected && /* @__PURE__ */ jsx("div", { className: "w-6 h-6 rounded-full bg-primary flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest", className: "text-white" }) });
+      $[22] = selected;
+      $[23] = t132;
+    } else {
+      t132 = $[23];
+    }
+    let t142;
+    if ($[24] !== onClick || $[25] !== t122 || $[26] !== t132 || $[27] !== t52 || $[28] !== t62) {
+      t142 = /* @__PURE__ */ jsxs("div", { className: t52, onClick, children: [
+        t62,
+        t122,
+        t132
+      ] });
+      $[24] = onClick;
+      $[25] = t122;
+      $[26] = t132;
+      $[27] = t52;
+      $[28] = t62;
+      $[29] = t142;
+    } else {
+      t142 = $[29];
+    }
+    return t142;
+  }
+  const t4 = selected && "ring-2 ring-primary";
+  let t5;
+  if ($[30] !== t4) {
+    t5 = cls("cursor-pointer overflow-hidden group relative", "transition-all duration-200", "hover:shadow-lg hover:-translate-y-0.5", t4);
+    $[30] = t4;
+    $[31] = t5;
+  } else {
+    t5 = $[31];
+  }
+  let t6;
+  if ($[32] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = /* @__PURE__ */ jsx("div", { className: cls("absolute inset-0 bg-black/0 group-hover:bg-black/20", "transition-colors duration-200") });
+    $[32] = t6;
+  } else {
+    t6 = $[32];
+  }
+  let t7;
+  if ($[33] !== selected) {
+    t7 = selected && /* @__PURE__ */ jsx("div", { className: "absolute top-2 right-2 w-6 h-6 rounded-full bg-primary flex items-center justify-center shadow-md", children: /* @__PURE__ */ jsx(CheckIcon, { size: "smallest", className: "text-white" }) });
+    $[33] = selected;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  let t8;
+  if ($[35] !== t7 || $[36] !== thumbnail) {
+    t8 = /* @__PURE__ */ jsxs("div", { className: "aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-800", children: [
+      thumbnail,
+      t6,
+      t7
+    ] });
+    $[35] = t7;
+    $[36] = thumbnail;
+    $[37] = t8;
+  } else {
+    t8 = $[37];
+  }
+  const t9 = asset.title || asset.fileName;
+  let t10;
+  if ($[38] !== t9) {
+    t10 = /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "font-medium truncate text-surface-900 dark:text-white", children: t9 });
+    $[38] = t9;
+    $[39] = t10;
+  } else {
+    t10 = $[39];
+  }
+  const t11 = formatSize(asset.size);
+  let t12;
+  if ($[40] !== asset.mimeType) {
+    t12 = asset.mimeType.split("/")[1]?.toUpperCase();
+    $[40] = asset.mimeType;
+    $[41] = t12;
+  } else {
+    t12 = $[41];
+  }
+  let t13;
+  if ($[42] !== t11 || $[43] !== t12) {
+    t13 = /* @__PURE__ */ jsxs(Typography, { variant: "caption", color: "secondary", className: "truncate block mt-0.5", children: [
+      t11,
+      " • ",
+      t12
+    ] });
+    $[42] = t11;
+    $[43] = t12;
+    $[44] = t13;
+  } else {
+    t13 = $[44];
+  }
+  let t14;
+  if ($[45] !== t10 || $[46] !== t13) {
+    t14 = /* @__PURE__ */ jsxs("div", { className: "p-3", children: [
+      t10,
+      t13
+    ] });
+    $[45] = t10;
+    $[46] = t13;
+    $[47] = t14;
+  } else {
+    t14 = $[47];
+  }
+  let t15;
+  if ($[48] !== onClick || $[49] !== t14 || $[50] !== t5 || $[51] !== t8) {
+    t15 = /* @__PURE__ */ jsxs(Card, { className: t5, onClick, children: [
+      t8,
+      t14
+    ] });
+    $[48] = onClick;
+    $[49] = t14;
+    $[50] = t5;
+    $[51] = t8;
+    $[52] = t15;
+  } else {
+    t15 = $[52];
+  }
+  return t15;
+}
+function _temp(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1048576) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / 1048576).toFixed(1)} MB`;
+}
+function MediaAssetDetails({
+  asset,
+  onClose,
+  onUpdate,
+  onDelete
+}) {
+  const snackbarController = useSnackbarController();
+  const storageSource = useStorageSource();
+  const [saving, setSaving] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [tagInput, setTagInput] = useState("");
+  const {
+    values,
+    setFieldValue,
+    dirty
+  } = useCreateFormex({
+    initialValues: {
+      title: asset.title ?? "",
+      altText: asset.altText ?? "",
+      caption: asset.caption ?? "",
+      tags: asset.tags ?? []
+    }
+  });
+  const handleSave = useCallback(async () => {
+    setSaving(true);
+    try {
+      await onUpdate(asset.id, values);
+      snackbarController.open({
+        type: "success",
+        message: "Asset updated successfully"
+      });
+    } catch (error) {
+      snackbarController.open({
+        type: "error",
+        message: `Error updating asset: ${error instanceof Error ? error.message : String(error)}`
+      });
+    } finally {
+      setSaving(false);
+    }
+  }, [asset.id, values, onUpdate, snackbarController]);
+  const handleDelete = useCallback(async () => {
+    setDeleting(true);
+    try {
+      await onDelete(asset.id);
+      snackbarController.open({
+        type: "success",
+        message: "Asset deleted successfully"
+      });
+      onClose();
+    } catch (error_0) {
+      snackbarController.open({
+        type: "error",
+        message: `Error deleting asset: ${error_0 instanceof Error ? error_0.message : String(error_0)}`
+      });
+    } finally {
+      setDeleting(false);
+      setDeleteDialogOpen(false);
+    }
+  }, [asset.id, onDelete, snackbarController, onClose]);
+  const handleDownload = useCallback(async () => {
+    try {
+      const downloadConfig = await storageSource.getDownloadURL(asset.storagePath, asset.bucket);
+      if (downloadConfig.url) {
+        window.open(downloadConfig.url, "_blank");
+      }
+    } catch (error_1) {
+      snackbarController.open({
+        type: "error",
+        message: "Error getting download URL"
+      });
+    }
+  }, [asset, storageSource, snackbarController]);
+  const handleAddTag = useCallback(() => {
+    const tag = tagInput.trim();
+    if (tag && !values.tags?.includes(tag)) {
+      setFieldValue("tags", [...values.tags ?? [], tag]);
+      setTagInput("");
+    }
+  }, [tagInput, values.tags, setFieldValue]);
+  const handleRemoveTag = useCallback((tagToRemove) => {
+    setFieldValue("tags", values.tags?.filter((t) => t !== tagToRemove) ?? []);
+  }, [values.tags, setFieldValue]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  const formatDate = (date) => {
+    return new Intl.DateTimeFormat(void 0, {
+      year: "numeric",
+      month: "short",
+      day: "numeric"
+    }).format(date);
+  };
+  const isImage = asset.mimeType.startsWith("image/");
+  const isVideo = asset.mimeType.startsWith("video/");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: cls("fixed inset-y-0 right-0 w-full sm:w-96 lg:w-[480px]", "bg-surface-50 dark:bg-surface-900", "border-l border-surface-accent-200 dark:border-surface-accent-700", "shadow-xl z-50", "flex flex-col", "animate-slide-in-right"), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 border-b border-surface-accent-200 dark:border-surface-accent-700", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: "font-medium truncate flex-1 mr-2", children: asset.title || asset.fileName }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(IconButton, { onClick: handleDownload, children: /* @__PURE__ */ jsx(DownloadIcon, { size: "small" }) }),
+          /* @__PURE__ */ jsx(IconButton, { onClick: () => setDeleteDialogOpen(true), className: "text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20", children: /* @__PURE__ */ jsx(DeleteIcon, { size: "small" }) }),
+          /* @__PURE__ */ jsx(IconButton, { onClick: onClose, children: /* @__PURE__ */ jsx(CloseIcon, { size: "small" }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "p-4 bg-surface-accent-100 dark:bg-surface-accent-800 flex items-center justify-center min-h-48 max-h-64", children: isImage && asset.downloadURL ? /* @__PURE__ */ jsx("img", { src: asset.downloadURL, alt: asset.altText || asset.fileName, className: "max-w-full max-h-full object-contain" }) : isVideo && asset.downloadURL ? /* @__PURE__ */ jsx("video", { src: asset.downloadURL, className: "max-w-full max-h-full", controls: true }) : /* @__PURE__ */ jsx("div", { className: "text-surface-accent-400", children: "Preview not available" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-auto p-4 space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-3", children: [
+          asset.dimensions && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500", children: "Dimensions" }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+              asset.dimensions.width,
+              " × ",
+              asset.dimensions.height,
+              " px"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500", children: "Size" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatSize(asset.size) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500", children: "Type" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: asset.mimeType })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500", children: "Created" }),
+            /* @__PURE__ */ jsx(Typography, { variant: "body2", children: formatDate(asset.createdAt) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx("hr", { className: "border-surface-accent-200 dark:border-surface-accent-700" }),
+        /* @__PURE__ */ jsx(TextField, { label: "File Name", value: asset.fileName, disabled: true, size: "small" }),
+        /* @__PURE__ */ jsx(TextField, { label: "Title", value: values.title ?? "", onChange: (e) => setFieldValue("title", e.target.value), size: "small" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(TextField, { label: "Alt Text", value: values.altText ?? "", onChange: (e_0) => setFieldValue("altText", e_0.target.value), size: "small" }),
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 mt-1", children: "Recommended for SEO" })
+        ] }),
+        /* @__PURE__ */ jsx(TextField, { label: "Caption", value: values.caption ?? "", onChange: (e_1) => setFieldValue("caption", e_1.target.value), size: "small", multiline: true }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500 mb-1 block", children: "Tags" }),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1 mb-2", children: values.tags?.map((tag_0) => /* @__PURE__ */ jsxs(Chip, { size: "small", colorScheme: "blueLighter", onClick: () => handleRemoveTag(tag_0), children: [
+            tag_0,
+            " ×"
+          ] }, tag_0)) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(TextField, { placeholder: "Add a tag...", value: tagInput, onChange: (e_2) => setTagInput(e_2.target.value), size: "small", className: "flex-1", onKeyDown: (e_3) => {
+              if (e_3.key === "Enter") {
+                e_3.preventDefault();
+                handleAddTag();
+              }
+            } }),
+            /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: handleAddTag, disabled: !tagInput.trim(), children: "Add" })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 p-4 border-t border-surface-accent-200 dark:border-surface-accent-700", children: /* @__PURE__ */ jsx(Button, { variant: "filled", onClick: handleSave, disabled: !dirty || saving, className: "w-full", children: saving ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : "Save Changes" }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: deleteDialogOpen, onOpenChange: setDeleteDialogOpen, children: [
+      /* @__PURE__ */ jsxs(DialogContent, { children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle1", className: "font-medium mb-2", children: "Delete Asset?" }),
+        /* @__PURE__ */ jsxs(Typography, { className: "text-surface-accent-600 dark:text-surface-accent-400", children: [
+          'Are you sure you want to delete "',
+          asset.title || asset.fileName,
+          '"? This action cannot be undone.'
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(DialogActions, { children: [
+        /* @__PURE__ */ jsx(Button, { variant: "text", onClick: () => setDeleteDialogOpen(false), disabled: deleting, children: "Cancel" }),
+        /* @__PURE__ */ jsx(Button, { variant: "filled", color: "error", onClick: handleDelete, disabled: deleting, children: deleting ? /* @__PURE__ */ jsx(CircularProgress, { size: "small" }) : "Delete" })
+      ] })
+    ] })
+  ] });
+}
+function MediaUploadDialog({
+  open,
+  onClose,
+  onUpload,
+  maxFileSize = 52428800,
+  // 50MB default
+  acceptedMimeTypes
+}) {
+  const [isDragging, setIsDragging] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState(null);
+  const [selectedFiles, setSelectedFiles] = useState([]);
+  const validateFiles = useCallback((files) => {
+    const valid = [];
+    const errors = [];
+    for (const file of files) {
+      if (maxFileSize && file.size > maxFileSize) {
+        errors.push(`${file.name}: File too large (max ${formatSize(maxFileSize)})`);
+        continue;
+      }
+      if (acceptedMimeTypes && !acceptedMimeTypes.some((type) => {
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(type.slice(0, -1));
+        }
+        return file.type === type;
+      })) {
+        errors.push(`${file.name}: File type not allowed`);
+        continue;
+      }
+      valid.push(file);
+    }
+    return {
+      valid,
+      errors
+    };
+  }, [maxFileSize, acceptedMimeTypes]);
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e_0) => {
+    e_0.preventDefault();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback((e_1) => {
+    e_1.preventDefault();
+    setIsDragging(false);
+    const files_0 = Array.from(e_1.dataTransfer.files);
+    const {
+      valid: valid_0,
+      errors: errors_0
+    } = validateFiles(files_0);
+    if (errors_0.length > 0) {
+      setError(errors_0.join("\n"));
+    } else {
+      setError(null);
+    }
+    setSelectedFiles((prev) => [...prev, ...valid_0]);
+  }, [validateFiles]);
+  const handleFileSelect = useCallback((e_2) => {
+    const files_1 = Array.from(e_2.target.files ?? []);
+    const {
+      valid: valid_1,
+      errors: errors_1
+    } = validateFiles(files_1);
+    if (errors_1.length > 0) {
+      setError(errors_1.join("\n"));
+    } else {
+      setError(null);
+    }
+    setSelectedFiles((prev_0) => [...prev_0, ...valid_1]);
+  }, [validateFiles]);
+  const handleRemoveFile = useCallback((index) => {
+    setSelectedFiles((prev_1) => prev_1.filter((_, i) => i !== index));
+  }, []);
+  const handleUpload = useCallback(async () => {
+    if (selectedFiles.length === 0) return;
+    setUploading(true);
+    setError(null);
+    try {
+      await onUpload(selectedFiles);
+      setSelectedFiles([]);
+      onClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Upload failed");
+    } finally {
+      setUploading(false);
+    }
+  }, [selectedFiles, onUpload, onClose]);
+  const handleClose = useCallback(() => {
+    if (!uploading) {
+      setSelectedFiles([]);
+      setError(null);
+      onClose();
+    }
+  }, [uploading, onClose]);
+  const formatSize = (bytes) => {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  };
+  return /* @__PURE__ */ jsxs(Dialog, { open, onOpenChange: (open_0) => !open_0 && handleClose(), maxWidth: "md", children: [
+    /* @__PURE__ */ jsxs(DialogContent, { className: "p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "p-4 border-b border-surface-accent-200 dark:border-surface-accent-700", children: /* @__PURE__ */ jsx(Typography, { variant: "h6", children: "Upload Files" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: cls("border-2 border-dashed rounded-lg p-8", "flex flex-col items-center justify-center gap-4", "transition-colors duration-150", isDragging ? "border-primary bg-primary/5" : "border-surface-accent-300 dark:border-surface-accent-600", "hover:border-primary hover:bg-primary/5", "cursor-pointer"), onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onClick: () => document.getElementById("file-upload-input")?.click(), children: [
+          /* @__PURE__ */ jsx(CloudUploadIcon, { size: "large", className: cls(isDragging ? "text-primary" : "text-surface-accent-400") }),
+          /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: "body1", className: "font-medium", children: "Drop files here or click to browse" }),
+            /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-surface-accent-500", children: [
+              "Maximum file size: ",
+              formatSize(maxFileSize)
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("input", { id: "file-upload-input", type: "file", multiple: true, accept: acceptedMimeTypes?.join(","), onChange: handleFileSelect, className: "hidden" })
+        ] }),
+        error && /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-red-500 mt-2 block whitespace-pre-line", children: error }),
+        selectedFiles.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-4 space-y-2", children: [
+          /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "text-surface-accent-500", children: [
+            "Selected files (",
+            selectedFiles.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-40 overflow-auto space-y-1", children: selectedFiles.map((file_0, index_0) => /* @__PURE__ */ jsxs("div", { className: cls("flex items-center justify-between p-2 rounded", "bg-surface-accent-50 dark:bg-surface-accent-800"), children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 mr-2", children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", className: "truncate", children: file_0.name }),
+              /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-500", children: formatSize(file_0.size) })
+            ] }),
+            /* @__PURE__ */ jsx(Button, { variant: "text", size: "small", onClick: (e_3) => {
+              e_3.stopPropagation();
+              handleRemoveFile(index_0);
+            }, disabled: uploading, children: "Remove" })
+          ] }, `${file_0.name}-${index_0}`)) })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(DialogActions, { children: [
+      /* @__PURE__ */ jsx(Button, { variant: "text", onClick: handleClose, disabled: uploading, children: "Cancel" }),
+      /* @__PURE__ */ jsx(Button, { variant: "filled", onClick: handleUpload, disabled: selectedFiles.length === 0 || uploading, children: uploading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CircularProgress, { size: "smallest" }),
+        "Uploading..."
+      ] }) : `Upload ${selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}` })
+    ] })
+  ] });
+}
+function MediaLibraryView(t0) {
+  const $ = c(58);
+  const {
+    maxFileSize,
+    acceptedMimeTypes
+  } = t0;
+  const controller = useMediaManager();
+  const [uploadDialogOpen, setUploadDialogOpen] = useState(false);
+  const [viewMode, setViewMode] = useState("grid");
+  useRef(null);
+  let t1;
+  if ($[0] !== controller) {
+    t1 = (query) => {
+      controller.searchAssets(query ?? "");
+    };
+    $[0] = controller;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const handleSearch = t1;
+  let t2;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      setUploadDialogOpen(true);
+    };
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const handleUploadClick = t2;
+  let t3;
+  if ($[3] !== controller) {
+    t3 = async (files) => {
+      for (const file of files) {
+        await controller.uploadFile(file);
+      }
+      setUploadDialogOpen(false);
+    };
+    $[3] = controller;
+    $[4] = t3;
+  } else {
+    t3 = $[4];
+  }
+  const handleFileSelect = t3;
+  let t4;
+  if ($[5] !== controller) {
+    t4 = () => {
+      controller.refreshAssets();
+    };
+    $[5] = controller;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const handleRefresh = t4;
+  let t5;
+  if ($[7] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t5 = /* @__PURE__ */ jsx(Typography, { variant: "h5", className: "font-semibold", children: "Media Library" });
+    $[7] = t5;
+  } else {
+    t5 = $[7];
+  }
+  let t6;
+  if ($[8] !== controller.totalCount) {
+    t6 = controller.totalCount !== void 0 && /* @__PURE__ */ jsxs(Typography, { variant: "caption", className: "bg-surface-accent-100 dark:bg-surface-accent-800 px-2 py-0.5 rounded-full", children: [
+      controller.totalCount,
+      " assets"
+    ] });
+    $[8] = controller.totalCount;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+  let t7;
+  if ($[10] !== t6) {
+    t7 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      t5,
+      t6
+    ] });
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  let t8;
+  if ($[12] !== handleSearch) {
+    t8 = /* @__PURE__ */ jsx(SearchBar, { onTextSearch: handleSearch, placeholder: "Search assets...", className: "flex-1 sm:w-64" });
+    $[12] = handleSearch;
+    $[13] = t8;
+  } else {
+    t8 = $[13];
+  }
+  let t9;
+  if ($[14] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t9 = () => setViewMode("grid");
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  const t10 = viewMode === "grid" && "bg-surface-accent-100 dark:bg-surface-accent-800";
+  let t11;
+  if ($[15] !== t10) {
+    t11 = cls(t10);
+    $[15] = t10;
+    $[16] = t11;
+  } else {
+    t11 = $[16];
+  }
+  let t12;
+  if ($[17] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t12 = /* @__PURE__ */ jsx(AppsIcon, { size: "small" });
+    $[17] = t12;
+  } else {
+    t12 = $[17];
+  }
+  let t13;
+  if ($[18] !== t11) {
+    t13 = /* @__PURE__ */ jsx(Tooltip, { title: "Grid view", children: /* @__PURE__ */ jsx(IconButton, { onClick: t9, className: t11, children: t12 }) });
+    $[18] = t11;
+    $[19] = t13;
+  } else {
+    t13 = $[19];
+  }
+  let t14;
+  if ($[20] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t14 = () => setViewMode("list");
+    $[20] = t14;
+  } else {
+    t14 = $[20];
+  }
+  const t15 = viewMode === "list" && "bg-surface-accent-100 dark:bg-surface-accent-800";
+  let t16;
+  if ($[21] !== t15) {
+    t16 = cls(t15);
+    $[21] = t15;
+    $[22] = t16;
+  } else {
+    t16 = $[22];
+  }
+  let t17;
+  if ($[23] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t17 = /* @__PURE__ */ jsx(Icon, { iconKey: "list", size: "small" });
+    $[23] = t17;
+  } else {
+    t17 = $[23];
+  }
+  let t18;
+  if ($[24] !== t16) {
+    t18 = /* @__PURE__ */ jsx(Tooltip, { title: "List view", children: /* @__PURE__ */ jsx(IconButton, { onClick: t14, className: t16, children: t17 }) });
+    $[24] = t16;
+    $[25] = t18;
+  } else {
+    t18 = $[25];
+  }
+  let t19;
+  if ($[26] !== t13 || $[27] !== t18) {
+    t19 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 border-l border-surface-accent-200 dark:border-surface-accent-700 pl-2 ml-2", children: [
+      t13,
+      t18
+    ] });
+    $[26] = t13;
+    $[27] = t18;
+    $[28] = t19;
+  } else {
+    t19 = $[28];
+  }
+  let t20;
+  if ($[29] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t20 = /* @__PURE__ */ jsx(RefreshIcon, { size: "small" });
+    $[29] = t20;
+  } else {
+    t20 = $[29];
+  }
+  let t21;
+  if ($[30] !== controller.loading || $[31] !== handleRefresh) {
+    t21 = /* @__PURE__ */ jsx(Tooltip, { title: "Refresh", children: /* @__PURE__ */ jsx(IconButton, { onClick: handleRefresh, disabled: controller.loading, children: t20 }) });
+    $[30] = controller.loading;
+    $[31] = handleRefresh;
+    $[32] = t21;
+  } else {
+    t21 = $[32];
+  }
+  let t22;
+  if ($[33] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t22 = /* @__PURE__ */ jsxs(Button, { variant: "filled", onClick: handleUploadClick, children: [
+      /* @__PURE__ */ jsx(AddIcon, { size: "small" }),
+      "Upload"
+    ] });
+    $[33] = t22;
+  } else {
+    t22 = $[33];
+  }
+  let t23;
+  if ($[34] !== t19 || $[35] !== t21 || $[36] !== t8) {
+    t23 = /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full sm:w-auto", children: [
+      t8,
+      t19,
+      t21,
+      t22
+    ] });
+    $[34] = t19;
+    $[35] = t21;
+    $[36] = t8;
+    $[37] = t23;
+  } else {
+    t23 = $[37];
+  }
+  let t24;
+  if ($[38] !== t23 || $[39] !== t7) {
+    t24 = /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 border-b border-surface-accent-200 dark:border-surface-accent-700 bg-surface-50 dark:bg-surface-900", children: /* @__PURE__ */ jsx(Container, { maxWidth: "6xl", className: "py-4", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between", children: [
+      t7,
+      t23
+    ] }) }) });
+    $[38] = t23;
+    $[39] = t7;
+    $[40] = t24;
+  } else {
+    t24 = $[40];
+  }
+  let t25;
+  if ($[41] !== controller || $[42] !== handleRefresh || $[43] !== viewMode) {
+    t25 = /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-auto", children: /* @__PURE__ */ jsx(Container, { maxWidth: "6xl", className: "py-6", children: controller.loading && controller.assets.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-64", children: /* @__PURE__ */ jsx(CircularProgress, {}) }) : controller.error ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-64 gap-4", children: [
+      /* @__PURE__ */ jsxs(Typography, { className: "text-red-500", children: [
+        "Error loading assets: ",
+        controller.error.message
+      ] }),
+      /* @__PURE__ */ jsx(Button, { onClick: handleRefresh, children: "Try Again" })
+    ] }) : controller.assets.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center h-64 gap-4", children: [
+      /* @__PURE__ */ jsx(Typography, { className: "text-surface-accent-500", children: "No media assets yet" }),
+      /* @__PURE__ */ jsxs(Button, { onClick: handleUploadClick, children: [
+        /* @__PURE__ */ jsx(AddIcon, { size: "small" }),
+        "Upload your first file"
+      ] })
+    ] }) : /* @__PURE__ */ jsx("div", { className: cls(viewMode === "grid" ? "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4" : "flex flex-col gap-2"), children: controller.assets.map((asset) => /* @__PURE__ */ jsx(MediaAssetCard, { asset, viewMode, onClick: () => controller.selectAsset(asset), selected: controller.selectedAsset?.id === asset.id }, asset.id)) }) }) });
+    $[41] = controller;
+    $[42] = handleRefresh;
+    $[43] = viewMode;
+    $[44] = t25;
+  } else {
+    t25 = $[44];
+  }
+  let t26;
+  if ($[45] !== controller) {
+    t26 = controller.selectedAsset && /* @__PURE__ */ jsx(MediaAssetDetails, { asset: controller.selectedAsset, onClose: () => controller.selectAsset(void 0), onUpdate: controller.updateAsset, onDelete: controller.deleteAsset });
+    $[45] = controller;
+    $[46] = t26;
+  } else {
+    t26 = $[46];
+  }
+  let t27;
+  if ($[47] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t27 = () => setUploadDialogOpen(false);
+    $[47] = t27;
+  } else {
+    t27 = $[47];
+  }
+  let t28;
+  if ($[48] !== acceptedMimeTypes || $[49] !== handleFileSelect || $[50] !== maxFileSize || $[51] !== uploadDialogOpen) {
+    t28 = /* @__PURE__ */ jsx(MediaUploadDialog, { open: uploadDialogOpen, onClose: t27, onUpload: handleFileSelect, maxFileSize, acceptedMimeTypes });
+    $[48] = acceptedMimeTypes;
+    $[49] = handleFileSelect;
+    $[50] = maxFileSize;
+    $[51] = uploadDialogOpen;
+    $[52] = t28;
+  } else {
+    t28 = $[52];
+  }
+  let t29;
+  if ($[53] !== t24 || $[54] !== t25 || $[55] !== t26 || $[56] !== t28) {
+    t29 = /* @__PURE__ */ jsxs("div", { className: "h-full flex flex-col overflow-hidden", children: [
+      t24,
+      t25,
+      t26,
+      t28
+    ] });
+    $[53] = t24;
+    $[54] = t25;
+    $[55] = t26;
+    $[56] = t28;
+    $[57] = t29;
+  } else {
+    t29 = $[57];
+  }
+  return t29;
+}
+const DEFAULT_STORAGE_PATH = "media";
+const DEFAULT_COLLECTION_PATH = "media_assets";
+const MediaManagerConfigContext = createContext(null);
+function useMediaManagerConfig() {
+  const config = useContext(MediaManagerConfigContext);
+  if (!config) {
+    throw new Error("useMediaManagerConfig must be used within MediaManagerConfigProvider");
+  }
+  return config;
+}
+function MediaLibraryViewInternal() {
+  const $ = c(14);
+  const config = useMediaManagerConfig();
+  const t0 = config.storagePath ?? DEFAULT_STORAGE_PATH;
+  const t1 = config.collectionPath ?? DEFAULT_COLLECTION_PATH;
+  let t2;
+  if ($[0] !== config.bucket || $[1] !== config.dataSourceDelegate || $[2] !== config.storageSource || $[3] !== config.thumbnailPath || $[4] !== config.thumbnailSizes || $[5] !== t0 || $[6] !== t1) {
+    t2 = {
+      storageSource: config.storageSource,
+      dataSourceDelegate: config.dataSourceDelegate,
+      storagePath: t0,
+      collectionPath: t1,
+      bucket: config.bucket,
+      thumbnailSizes: config.thumbnailSizes,
+      thumbnailPath: config.thumbnailPath
+    };
+    $[0] = config.bucket;
+    $[1] = config.dataSourceDelegate;
+    $[2] = config.storageSource;
+    $[3] = config.thumbnailPath;
+    $[4] = config.thumbnailSizes;
+    $[5] = t0;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  const controller = useMediaManagerController(t2);
+  let t3;
+  if ($[8] !== config.acceptedMimeTypes || $[9] !== config.maxFileSize) {
+    t3 = /* @__PURE__ */ jsx(MediaLibraryView, { maxFileSize: config.maxFileSize, acceptedMimeTypes: config.acceptedMimeTypes });
+    $[8] = config.acceptedMimeTypes;
+    $[9] = config.maxFileSize;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== controller || $[12] !== t3) {
+    t4 = /* @__PURE__ */ jsx(MediaManagerProvider, { controller, children: t3 });
+    $[11] = controller;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+}
+function buildMediaView() {
+  return {
+    path: "media",
+    name: "Media Library",
+    description: "Manage your media files and assets",
+    group: "Media",
+    icon: "perm_media",
+    view: /* @__PURE__ */ jsx(MediaLibraryViewInternal, {})
+  };
+}
+const MEDIA_VIEW = buildMediaView();
+function useMediaManagerPlugin(props) {
+  return useMemo(() => ({
+    key: "media_manager",
+    views: [MEDIA_VIEW],
+    provider: {
+      Component: ({
+        children
+      }) => /* @__PURE__ */ jsx(MediaManagerConfigContext.Provider, { value: props, children })
+    }
+  }), []);
+}
+function MediaLibraryCard(t0) {
+  const $ = c(3);
+  const {
+    group
+  } = t0;
+  if (group !== "Media") {
+    return null;
+  }
+  let t1;
+  if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = cls("p-4 cursor-pointer", "hover:bg-surface-accent-100 dark:hover:bg-surface-accent-800", "transition-colors duration-200", "flex flex-col gap-2");
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = /* @__PURE__ */ jsx("div", { className: cls("w-10 h-10 rounded-lg", "bg-primary/10 dark:bg-primary/20", "flex items-center justify-center"), children: /* @__PURE__ */ jsx(ImageIcon, { className: "text-primary", size: "medium" }) });
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  let t3;
+  if ($[2] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /* @__PURE__ */ jsx(Link, { to: "/media", className: "no-underline", children: /* @__PURE__ */ jsx(Card, { className: t1, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      t2,
+      /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", className: "font-medium", children: "Media Library" }),
+        /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-surface-accent-600 dark:text-surface-accent-400", children: "Manage images and files" })
+      ] })
+    ] }) }) });
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  return t3;
+}
+export {
+  MediaAssetCard,
+  MediaAssetDetails,
+  MediaLibraryCard,
+  MediaLibraryView,
+  MediaManagerProvider,
+  MediaUploadDialog,
+  useMediaManager,
+  useMediaManagerController,
+  useMediaManagerPlugin
+};
+//# sourceMappingURL=index.es.js.map