@geekapps/silo-elements-nextjs 0.0.8 → 0.0.10

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { useUpload } from '@geekapps/silo-nextjs';
-export { SiloProvider, useFileStatus, useSignedUrl, useSiloClient, useUpload } from '@geekapps/silo-nextjs';
+import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from '@geekapps/silo-nextjs';
+export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import gsap from 'gsap';
 import { Play, Pause, FastForward, VolumeX, Volume2, AudioLines, Captions, Settings, Minimize, Maximize } from 'lucide-react';
@@ -177,10 +177,21 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
+function getFileIcon(mimeType) {
+  if (mimeType.startsWith("image/")) return "\u{1F5BC}\uFE0F";
+  if (mimeType.startsWith("video/")) return "\u{1F3AC}";
+  if (mimeType.startsWith("audio/")) return "\u{1F3B5}";
+  if (mimeType === "application/pdf") return "\u{1F4C4}";
+  if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return "\u{1F4CA}";
+  if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) return "\u{1F4D1}";
+  if (mimeType.includes("word") || mimeType.includes("document")) return "\u{1F4DD}";
+  if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip")) return "\u{1F4E6}";
+  return "\u{1F4CE}";
+}
 function ImageUploader({
   bucket,
   expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
   onError,
   className = "",
@@ -189,6 +200,7 @@ function ImageUploader({
   maxSize,
   accept = "image/*",
   showPreview = true,
+  image,
   theme,
   renderIcon,
   renderProgress,
@@ -196,28 +208,25 @@ function ImageUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
+  const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      if (showPreview) {
-        const url = URL.createObjectURL(file);
-        setPreview(url);
-      }
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError, showPreview]
-  );
+  const handleFiles = useCallback(async (files) => {
+    const file = files[0];
+    if (!file) return;
+    if (showPreview) setPreview(URL.createObjectURL(file));
+    try {
+      const result = await upload(file, {
+        ...bucket !== void 0 && { bucket },
+        visibility,
+        ...image && { image }
+      });
+      if (result) onUpload?.(result);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [upload, bucket, visibility, image, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -227,12 +236,11 @@ function ImageUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
+  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
+  const isPaused = state.status === "idle" && preview !== null;
+  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       DropZone,
@@ -241,102 +249,69 @@ function ImageUploader({
         ...maxSize !== void 0 && { maxSize },
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "32px 24px", textAlign: "center" },
-        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: preview,
-              alt: "Preview",
-              style: {
-                maxWidth: "100%",
-                maxHeight: "200px",
-                borderRadius: "8px",
-                objectFit: "contain"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", style: { maxWidth: "100%", maxHeight: "200px", borderRadius: "8px", objectFit: "contain" } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Clique ou arraste para substituir" })
         ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop image here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Arraste a imagem aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
-              "Max ",
+              "M\xE1x ",
               formatBytes(maxSize)
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
-          "%"
+    isUploading && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: state.status === "completing" ? "Finalizando\u2026" : state.status === "preparing" ? "Preparando\u2026" : `Parte ${state.part} de ${state.totalParts}` }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+      /* @__PURE__ */ jsx(ProgressBar, { progress })
     ] }) }),
-    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "10px 14px",
-      borderRadius: "8px",
-      backgroundColor: "rgba(34,197,94,0.1)",
-      color: "var(--silo-success, #22c55e)",
-      fontSize: "14px"
-    }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx("span", { children: "Upload complete" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            reset();
-            setPreview(null);
-          },
-          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
-          children: "Upload another"
-        }
-      )
+    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, ...image && { image } }), style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" }, children: "Retomar upload" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        abort();
+        setPreview(null);
+      }, style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #e2e8f0", background: "#f8fafc", fontSize: "13px", cursor: "pointer", color: "var(--silo-text-muted)" }, children: "Cancelar" })
+    ] }),
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "#22c55e", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: state.result.key }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(state.result.size) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        reset();
+        setPreview(null);
+      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Enviar outro" })
     ] }),
-    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "10px 14px",
-      borderRadius: "8px",
-      backgroundColor: "rgba(239,68,68,0.1)",
-      color: "var(--silo-error, #ef4444)",
-      fontSize: "14px"
-    }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            reset();
-          },
-          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
-          children: "Retry"
-        }
-      )
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        reset();
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 function VideoUploader({
   bucket,
   expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
   onError,
   className = "",
@@ -345,6 +320,7 @@ function VideoUploader({
   maxSize,
   accept = "video/*",
   showPreview = true,
+  video,
   theme,
   renderIcon,
   renderProgress,
@@ -352,28 +328,25 @@ function VideoUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
+  const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      if (showPreview) {
-        const url = URL.createObjectURL(file);
-        setPreview(url);
-      }
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError, showPreview]
-  );
+  const handleFiles = useCallback(async (files) => {
+    const file = files[0];
+    if (!file) return;
+    if (showPreview) setPreview(URL.createObjectURL(file));
+    try {
+      const result = await upload(file, {
+        ...bucket !== void 0 && { bucket },
+        visibility,
+        ...video && { video }
+      });
+      if (result) onUpload?.(result);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [upload, bucket, visibility, video, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -383,12 +356,11 @@ function VideoUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
+  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
+  const isPaused = state.status === "idle" && preview !== null;
+  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       DropZone,
@@ -397,69 +369,68 @@ function VideoUploader({
         ...maxSize !== void 0 && { maxSize },
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "32px 24px", textAlign: "center" },
-        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx(
-            "video",
-            {
-              src: preview,
-              style: { maxWidth: "100%", maxHeight: "180px", borderRadius: "8px" },
-              controls: false,
-              muted: true,
-              playsInline: true
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: "180px", borderRadius: "8px" }, controls: false, muted: true, playsInline: true }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Clique ou arraste para substituir" })
         ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop video here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Arraste o v\xEDdeo aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
               "MP4, MOV, MKV, WebM",
-              maxSize ? ` \xB7 Max ${formatBytes(maxSize)}` : ""
+              maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading video\u2026" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
-          "%"
+    isUploading && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: state.status === "completing" ? "Finalizando\u2026" : state.status === "preparing" ? "Preparando\u2026" : `Parte ${state.part} de ${state.totalParts}` }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Processing will start after upload completes" })
+      /* @__PURE__ */ jsx(ProgressBar, { progress }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "O processamento inicia ap\xF3s o upload" })
     ] }) }),
+    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, ...video && { video } }), style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" }, children: "Retomar upload" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        abort();
+        setPreview(null);
+      }, style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #e2e8f0", background: "#f8fafc", fontSize: "13px", cursor: "pointer", color: "var(--silo-text-muted)" }, children: "Cancelar" })
+    ] }),
     state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.1)", color: "var(--silo-success, #22c55e)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx("span", { children: "Video uploaded \u2014 processing in background" }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
+      /* @__PURE__ */ jsx("span", { children: "V\xEDdeo enviado \u2014 processando em segundo plano" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
         reset();
         setPreview(null);
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Upload another" })
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Enviar outro" })
     ] }),
     state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
+      /* @__PURE__ */ jsx("button", { onClick: () => {
         reset();
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Retry" })
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 function FileUploader({
   bucket,
-  expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
+  onBatchUpload,
   onError,
   className = "",
   style,
@@ -467,6 +438,8 @@ function FileUploader({
   maxSize,
   accept,
   multiple = false,
+  image,
+  video,
   theme,
   renderIcon,
   renderProgress,
@@ -474,23 +447,8 @@ function FileUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError]
-  );
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -500,14 +458,39 @@ function FileUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const single = useMultipartUpload(bucket);
+  const batch = useBatchUpload();
+  const handleFiles = useCallback(async (files) => {
+    if (multiple && files.length > 1) {
+      try {
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const results = await batch.upload(files, opts);
+        onBatchUpload?.(results);
+        results.forEach((r) => onUpload?.(r));
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    } else {
+      const file = files[0];
+      if (!file) return;
+      try {
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const result = await single.upload(file, opts);
+        if (result) onUpload?.(result);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    }
+  }, [single, batch, multiple, bucket, visibility, image, video, onUpload, onBatchUpload, onError]);
+  const isBatch = batch.state.files.length > 0;
+  const isSingleUploading = single.state.status === "uploading" || single.state.status === "preparing" || single.state.status === "completing";
+  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
+  const isUploading = isSingleUploading || isBatchUploading;
+  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
+  if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
+  if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
-    /* @__PURE__ */ jsx(
+    !isBatch && /* @__PURE__ */ jsx(
       DropZone,
       {
         ...accept !== void 0 && { accept },
@@ -515,56 +498,89 @@ function FileUploader({
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
         multiple,
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "28px 24px", textAlign: "center" },
         children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: multiple ? "Drop files here" : "Drop a file here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: multiple ? "Arraste arquivos aqui" : "Arraste o arquivo aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
-              "Max ",
+              "M\xE1x ",
               formatBytes(maxSize)
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSingleUploading && !isBatch && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
+        /* @__PURE__ */ jsx("span", { children: single.state.status === "completing" ? "Finalizando\u2026" : single.state.status === "preparing" ? "Preparando\u2026" : `Parte ${single.state.part} de ${single.state.totalParts}` }),
         /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
+          singleProgress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+      /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
     ] }) }),
-    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
+    isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      batch.state.files.map((f, i) => {
+        const st = f.status;
+        const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
+        const isPaused = st.status === "paused";
+        const isDone = st.status === "done";
+        const isErr = st.status === "error";
+        return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: "8px", border: "1px solid var(--silo-border)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: isDone || isErr ? 0 : "6px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "16px" }, children: getFileIcon(f.file.type) }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "13px", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", fontWeight: 600, color: isDone ? "#16a34a" : isErr ? "#ef4444" : isPaused ? "#f59e0b" : "var(--silo-accent)", flexShrink: 0 }, children: isDone ? "\u2713" : isErr ? "Erro" : isPaused ? `Pausado ${p}%` : `${p}%` }),
+            !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: "11px", padding: "2px 8px", borderRadius: "4px", border: "none", backgroundColor: "#10b981", color: "#fff", cursor: "pointer" }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: "11px", padding: "2px 8px", borderRadius: "4px", border: "none", backgroundColor: "#f59e0b", color: "#fff", cursor: "pointer" }, children: "Pausar" }) : null)
+          ] }),
+          !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
+        ] }, i);
+      }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "4px" }, children: [
+        batch.state.status !== "done" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
+            style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" },
+            children: isBatchUploading ? "Pausar tudo" : "Retomar tudo"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
+            style: { padding: "8px 14px", borderRadius: "6px", border: "none", backgroundColor: batch.state.status === "done" ? "var(--silo-accent)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: "13px", fontWeight: 600, cursor: "pointer" },
+            children: batch.state.status === "done" ? "Novo upload" : "Cancelar"
+          }
+        )
+      ] })
+    ] }),
+    single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "#22c55e", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: state.result.key }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(state.result.size) })
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: single.state.result.key }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(single.state.result.size) })
       ] }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
-        reset();
-      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Replace" })
+      /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Enviar outro" })
     ] }),
-    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
-      /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
-        reset();
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Retry" })
+    single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("span", { children: single.state.error.message }),
+      /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 var TAB_LABELS = {
-  image: { label: "Image", icon: "\u{1F5BC}\uFE0F" },
-  video: { label: "Video", icon: "\u{1F3AC}" },
-  file: { label: "File", icon: "\u{1F4CE}" }
+  image: { label: "Imagem", icon: "\u{1F5BC}\uFE0F" },
+  video: { label: "V\xEDdeo", icon: "\u{1F3AC}" },
+  file: { label: "Arquivo", icon: "\u{1F4CE}" }
 };
 function MediaUploader({
   tabs = ["image", "video", "file"],
@@ -576,6 +592,7 @@ function MediaUploader({
   style,
   theme,
   onUpload,
+  onBatchUpload,
   onError,
   ...shared
 }) {
@@ -649,8 +666,10 @@ function MediaUploader({
         {
           ...shared,
           ...fileProps,
+          multiple: true,
           ...theme !== void 0 && { theme },
           ...onUpload !== void 0 && { onUpload },
+          ...onBatchUpload !== void 0 && { onBatchUpload },
           ...onError !== void 0 && { onError }
         }
       )
@@ -1643,7 +1662,577 @@ function formatTime(seconds) {
   }
   return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
 }
+var RADIUS = { full: "50%", md: "12px", sm: "6px" };
+function Avatar({
+  fileKey,
+  bucket,
+  initials,
+  size = 40,
+  shape = "full",
+  className = "",
+  style,
+  alt = "avatar"
+}) {
+  const { url } = useSignedUrl(fileKey ?? null);
+  const [error, setError] = useState(false);
+  const radius = RADIUS[shape];
+  const base = {
+    width: size,
+    height: size,
+    borderRadius: radius,
+    overflow: "hidden",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    fontSize: size * 0.38,
+    fontWeight: 600,
+    userSelect: "none",
+    background: "var(--silo-bg, #e2e8f0)",
+    color: "var(--silo-text-muted, #64748b)",
+    ...style
+  };
+  if (url && !error) {
+    return /* @__PURE__ */ jsx("span", { className, style: base, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt,
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
+        onError: () => setError(true)
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("span", { className, style: base, "aria-label": alt, children: initials ? initials.slice(0, 2).toUpperCase() : "?" });
+}
+function Thumbnail({
+  fileKey,
+  bucket,
+  mimeType,
+  width = "100%",
+  height = 160,
+  fit = "cover",
+  borderRadius = "var(--silo-radius, 12px)",
+  placeholder,
+  className = "",
+  style,
+  alt = "thumbnail"
+}) {
+  const { url, loading } = useSignedUrl(fileKey);
+  const [error, setError] = useState(false);
+  const isVideo = mimeType?.startsWith("video/");
+  const wrapper = {
+    width,
+    height,
+    borderRadius,
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--silo-bg, #f1f5f9)",
+    position: "relative",
+    flexShrink: 0,
+    ...style
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted, #94a3b8)", fontSize: 12 }, children: "..." }) });
+  }
+  if (error || !url) {
+    return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 28 }, children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
+  }
+  if (isVideo) {
+    return /* @__PURE__ */ jsxs("span", { className, style: wrapper, children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: url,
+          style: { width: "100%", height: "100%", objectFit: fit, display: "block" },
+          muted: true,
+          preload: "metadata",
+          onError: () => setError(true)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ jsx("span", { style: { fontSize: 24, opacity: 0.85 }, children: "\u25B6" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt,
+      style: { width: "100%", height: "100%", objectFit: fit, display: "block" },
+      onError: () => setError(true)
+    }
+  ) });
+}
+function Background({
+  fileKey,
+  bucket,
+  size = "cover",
+  position = "center",
+  overlay,
+  children,
+  className = "",
+  style
+}) {
+  const { url } = useSignedUrl(fileKey);
+  const wrapper = {
+    position: "relative",
+    backgroundImage: url ? `url(${url})` : void 0,
+    backgroundSize: size,
+    backgroundPosition: position,
+    backgroundRepeat: "no-repeat",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: wrapper, children: [
+    overlay && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: overlay,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
+  ] });
+}
+function FileIcon({
+  mimeType,
+  name,
+  size,
+  iconSize = 40,
+  showName = false,
+  showSize = false,
+  className = "",
+  style
+}) {
+  const icon = getFileIcon(mimeType);
+  const ext = name?.split(".").pop()?.toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: "var(--silo-font, inherit)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: icon }),
+        ext && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: iconSize * 0.22,
+              fontWeight: 700,
+              color: "var(--silo-text-muted, #64748b)",
+              letterSpacing: "0.04em",
+              textTransform: "uppercase"
+            },
+            children: ext
+          }
+        ),
+        showName && name && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--silo-text, #0f172a)",
+              maxWidth: iconSize * 3,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              textAlign: "center"
+            },
+            title: name,
+            children: name
+          }
+        ),
+        showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #64748b)" }, children: formatBytes(size) })
+      ]
+    }
+  );
+}
+var STATUS_LABEL = {
+  CREATED: "Created",
+  UPLOADING: "Uploading",
+  INGESTING: "Ingesting",
+  QUEUED: "Queued",
+  PROCESSING: "Processing",
+  SYNCING: "Syncing",
+  READY: "Ready",
+  FAILED: "Failed",
+  CANCELLED: "Cancelled"
+};
+var STATUS_COLOR = {
+  READY: "var(--silo-success, #22c55e)",
+  FAILED: "var(--silo-error, #ef4444)",
+  CANCELLED: "var(--silo-error, #ef4444)"
+};
+function statusColor(status) {
+  return STATUS_COLOR[status] ?? "var(--silo-accent, #6366f1)";
+}
+function isProcessing(status) {
+  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
+}
+function FileCard({
+  fileId,
+  pollInterval = 3e3,
+  actions = ["preview", "copy-url"],
+  onPreview,
+  onCopyUrl,
+  onDelete,
+  className = "",
+  style
+}) {
+  const { file, loading } = useFileStatus(fileId, { pollInterval });
+  const card = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 0,
+    borderRadius: "var(--silo-radius, 12px)",
+    border: "1px solid var(--silo-border, #e2e8f0)",
+    background: "var(--silo-bg, #f8fafc)",
+    overflow: "hidden",
+    fontFamily: "var(--silo-font, inherit)",
+    width: 220,
+    ...style
+  };
+  if (loading && !file) {
+    return /* @__PURE__ */ jsx("div", { className, style: { ...card, padding: 16, color: "var(--silo-text-muted, #94a3b8)", fontSize: 13 }, children: "Loading..." });
+  }
+  if (!file) return null;
+  const status = file.status;
+  const isImg = file.mimeType.startsWith("image/");
+  const isVid = file.mimeType.startsWith("video/");
+  const showThumb = isImg || isVid;
+  const progress = file.progress ?? null;
+  const ext = file.originalName.split(".").pop()?.toUpperCase();
+  return /* @__PURE__ */ jsxs("div", { className, style: card, children: [
+    /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 130, background: "var(--silo-bg-hover, #f1f5f9)", flexShrink: 0 }, children: [
+      showThumb ? /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          fileKey: file.key,
+          mimeType: file.mimeType,
+          width: "100%",
+          height: 130,
+          borderRadius: "0",
+          style: { display: "block" }
+        }
+      ) : /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: 8,
+            right: 8,
+            fontSize: 10,
+            fontWeight: 700,
+            letterSpacing: "0.05em",
+            padding: "2px 7px",
+            borderRadius: 99,
+            background: "rgba(0,0,0,0.55)",
+            color: statusColor(status),
+            backdropFilter: "blur(4px)"
+          },
+          children: STATUS_LABEL[status] ?? status
+        }
+      ),
+      ext && /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            top: 8,
+            left: 8,
+            fontSize: 9,
+            fontWeight: 700,
+            letterSpacing: "0.06em",
+            padding: "2px 6px",
+            borderRadius: 6,
+            background: "rgba(0,0,0,0.45)",
+            color: "#fff",
+            backdropFilter: "blur(4px)"
+          },
+          children: ext
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            fontSize: 13,
+            fontWeight: 600,
+            color: "var(--silo-text, #0f172a)",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap"
+          },
+          title: file.originalName,
+          children: file.originalName
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: [
+        formatBytes(file.size),
+        file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
+        file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
+      ] }),
+      isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
+        /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
+        /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--silo-text-muted, #94a3b8)", marginTop: 2, display: "block" }, children: [
+          STATUS_LABEL[status],
+          progress != null ? ` \xB7 ${progress}%` : ""
+        ] })
+      ] }),
+      actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: [
+        actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { onClick: () => onPreview(fileId), style: btnStyle, children: "Preview" }),
+        actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              const url = `${file.key}`;
+              navigator.clipboard.writeText(url).catch(() => void 0);
+              onCopyUrl(url);
+            },
+            style: btnStyle,
+            children: "Copy URL"
+          }
+        ),
+        actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { onClick: () => onDelete(fileId), style: { ...btnStyle, color: "var(--silo-error, #ef4444)" }, children: "Delete" })
+      ] })
+    ] })
+  ] });
+}
+var btnStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  padding: "3px 9px",
+  borderRadius: 6,
+  border: "1px solid var(--silo-border, #e2e8f0)",
+  background: "transparent",
+  color: "var(--silo-text, #0f172a)",
+  cursor: "pointer",
+  lineHeight: 1.6
+};
+var STATUS_LABEL2 = {
+  CREATED: "Created",
+  UPLOADING: "Uploading",
+  INGESTING: "Ingesting",
+  QUEUED: "Queued",
+  PROCESSING: "Processing",
+  SYNCING: "Syncing",
+  READY: "Ready",
+  FAILED: "Failed",
+  CANCELLED: "Cancelled"
+};
+function isProcessing2(status) {
+  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
+}
+function formatDate(iso) {
+  return new Date(iso).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" });
+}
+function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
+  const { file, loading } = useFileStatus(fileId ?? void 0, {
+    ...fileId ? { pollInterval } : {}
+  });
+  const status = file?.status ?? "";
+  const { url } = useSignedUrl(file?.key ?? null);
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+  if (!fileId) return null;
+  const isImg = file?.mimeType.startsWith("image/");
+  const isVid = file?.mimeType.startsWith("video/");
+  const progress = file?.progress ?? null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: onClose,
+        "aria-hidden": true,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e3,
+          background: "rgba(0,0,0,0.6)",
+          backdropFilter: "blur(6px)"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": file?.originalName ?? "File preview",
+        style: modal,
+        onKeyDown: (e) => {
+          if (e.key === "Escape") onClose();
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--silo-border, #e2e8f0)" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { flex: 1, fontSize: 14, fontWeight: 600, color: "var(--silo-text, #0f172a)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: file?.originalName ?? "Loading..." }),
+            /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", style: closeBtn, children: "\u2715" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#0f0f0f", minHeight: 240, position: "relative" }, children: [
+            loading && !file && /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: 13 }, children: "Loading..." }),
+            file && isImg && url && /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: url,
+                alt: file.originalName,
+                style: { maxWidth: "100%", maxHeight: 420, objectFit: "contain", display: "block" }
+              }
+            ),
+            file && isVid && url && /* @__PURE__ */ jsx(
+              "video",
+              {
+                src: url,
+                controls: true,
+                style: { maxWidth: "100%", maxHeight: 420, display: "block" }
+              }
+            ),
+            file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
+              /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
+              /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: 13 }, children: "No preview available" })
+            ] }),
+            file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: 12,
+              background: "rgba(0,0,0,0.65)"
+            }, children: [
+              /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
+              /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
+              progress != null && /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: 12 }, children: [
+                progress,
+                "%"
+              ] })
+            ] })
+          ] }),
+          file && /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px", borderTop: "1px solid var(--silo-border, #e2e8f0)", display: "flex", flexDirection: "column", gap: 8 }, children: [
+            /* @__PURE__ */ jsxs("div", { style: metaGrid, children: [
+              /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucket }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Status", value: STATUS_LABEL2[status] ?? status, highlight: status === "READY" }),
+              file.metadata?.width && /* @__PURE__ */ jsx(MetaRow, { label: "Dimensions", value: `${file.metadata.width}\xD7${file.metadata.height}` }),
+              file.metadata?.duration && /* @__PURE__ */ jsx(MetaRow, { label: "Duration", value: `${Math.round(file.metadata.duration)}s` }),
+              file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
+              /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }, children: [
+              file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
+              file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
+              file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
+            ] }),
+            url && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
+                style: { ...btnStyle2, marginTop: 4, width: "100%", textAlign: "center" },
+                children: "Copy URL"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function MetaRow({ label, value, highlight }) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)", fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: highlight ? "var(--silo-success, #22c55e)" : "var(--silo-text, #0f172a)", fontWeight: highlight ? 600 : 400 }, children: value })
+  ] });
+}
+function Badge({ children, muted }) {
+  return /* @__PURE__ */ jsx("span", { style: {
+    fontSize: 10,
+    fontWeight: 700,
+    letterSpacing: "0.05em",
+    padding: "2px 7px",
+    borderRadius: 99,
+    border: "1px solid var(--silo-border, #e2e8f0)",
+    color: muted ? "var(--silo-text-muted, #94a3b8)" : "var(--silo-accent, #6366f1)",
+    background: "transparent"
+  }, children });
+}
+var modal = {
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  zIndex: 1001,
+  width: "min(92vw, 560px)",
+  maxHeight: "90vh",
+  display: "flex",
+  flexDirection: "column",
+  borderRadius: "var(--silo-radius, 16px)",
+  background: "var(--silo-bg, #fff)",
+  boxShadow: "0 24px 80px rgba(0,0,0,0.35)",
+  overflow: "hidden",
+  fontFamily: "var(--silo-font, inherit)"
+};
+var closeBtn = {
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  fontSize: 16,
+  color: "var(--silo-text-muted, #94a3b8)",
+  lineHeight: 1,
+  padding: "2px 4px",
+  flexShrink: 0
+};
+var btnStyle2 = {
+  fontSize: 12,
+  fontWeight: 600,
+  padding: "7px 14px",
+  borderRadius: 8,
+  border: "1px solid var(--silo-border, #e2e8f0)",
+  background: "transparent",
+  color: "var(--silo-text, #0f172a)",
+  cursor: "pointer"
+};
+var metaGrid = {
+  display: "grid",
+  gridTemplateColumns: "auto 1fr",
+  gap: "5px 16px",
+  alignItems: "baseline"
+};
 
-export { DropZone, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
+export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map