@geekapps/silo-elements-nextjs 0.2.34 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/FileUploader.d.ts +1 -1
  2. package/dist/FileUploader.js +54 -85
  3. package/dist/FileUploader.js.map +1 -1
  4. package/dist/ImageUploader.d.ts +1 -1
  5. package/dist/ImageUploader.js +49 -112
  6. package/dist/ImageUploader.js.map +1 -1
  7. package/dist/MediaUploader.js +139 -256
  8. package/dist/MediaUploader.js.map +1 -1
  9. package/dist/VideoPlayer.js +12 -9
  10. package/dist/VideoPlayer.js.map +1 -1
  11. package/dist/VideoUploader.d.ts +1 -1
  12. package/dist/VideoUploader.js +54 -117
  13. package/dist/VideoUploader.js.map +1 -1
  14. package/dist/components/DropZone.js +7 -9
  15. package/dist/components/DropZone.js.map +1 -1
  16. package/dist/components/ProgressBar.js +2 -20
  17. package/dist/components/ProgressBar.js.map +1 -1
  18. package/dist/index.d.ts +0 -3
  19. package/dist/index.js +183 -426
  20. package/dist/index.js.map +1 -1
  21. package/dist/styles.css +1 -2
  22. package/dist/types.d.ts +0 -1
  23. package/package.json +47 -47
package/dist/index.js CHANGED
@@ -91,20 +91,18 @@ function DropZone({
91
91
  );
92
92
  const rootStyle = {
93
93
  ...vars,
94
- fontFamily: "var(--silo-font)",
95
- border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
96
- borderRadius: "var(--silo-radius)",
97
- backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
98
- color: "var(--silo-text)",
99
- cursor: disabled ? "not-allowed" : "pointer",
100
- transition: "border-color 0.15s, background-color 0.15s",
101
- opacity: disabled ? 0.5 : 1,
102
94
  ...style
103
95
  };
96
+ const cls = [
97
+ "silo-dropzone",
98
+ dragging ? "silo-dropzone--dragging" : "",
99
+ disabled ? "silo-dropzone--disabled" : "",
100
+ className
101
+ ].filter(Boolean).join(" ");
104
102
  return /* @__PURE__ */ jsxs(
105
103
  "div",
106
104
  {
107
- className: `silo-dropzone${className ? ` ${className}` : ""}`,
105
+ className: cls,
108
106
  style: rootStyle,
109
107
  onDragOver: (e) => {
110
108
  e.preventDefault();
@@ -142,30 +140,12 @@ function ProgressBar({ progress, className = "", style }) {
142
140
  "div",
143
141
  {
144
142
  className: `silo-progress-track${className ? ` ${className}` : ""}`,
145
- style: {
146
- height: "6px",
147
- borderRadius: "3px",
148
- backgroundColor: "rgba(99,102,241,0.15)",
149
- overflow: "hidden",
150
- ...style
151
- },
143
+ style,
152
144
  role: "progressbar",
153
145
  "aria-valuenow": progress,
154
146
  "aria-valuemin": 0,
155
147
  "aria-valuemax": 100,
156
- children: /* @__PURE__ */ jsx(
157
- "div",
158
- {
159
- className: "silo-progress-fill",
160
- style: {
161
- height: "100%",
162
- width: `${progress}%`,
163
- backgroundColor: "var(--silo-accent, #6366f1)",
164
- borderRadius: "3px",
165
- transition: "width 0.2s ease"
166
- }
167
- }
168
- )
148
+ children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
169
149
  }
170
150
  );
171
151
  }
@@ -265,7 +245,6 @@ function uploadLabel(status, progress) {
265
245
  function ImageUploader({
266
246
  bucket,
267
247
  expiresIn,
268
- visibility = "private",
269
248
  onUpload,
270
249
  onError,
271
250
  className = "",
@@ -292,12 +271,12 @@ function ImageUploader({
292
271
  const doUpload = useCallback(async (file, opts) => {
293
272
  if (showPreview) setPreview(URL.createObjectURL(file));
294
273
  try {
295
- const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: opts });
274
+ const result = await upload(file, { ...bucket !== void 0 && { bucket }, image: opts });
296
275
  if (result) onUpload?.(result);
297
276
  } catch (err) {
298
277
  onError?.(err instanceof Error ? err : new Error(String(err)));
299
278
  }
300
- }, [upload, bucket, visibility, onUpload, onError, showPreview]);
279
+ }, [upload, bucket, onUpload, onError, showPreview]);
301
280
  const handleFiles = useCallback(async (files) => {
302
281
  const file = files[0];
303
282
  if (!file) return;
@@ -335,13 +314,13 @@ function ImageUploader({
335
314
  style: { padding: "32px 24px", textAlign: "center" },
336
315
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
337
316
  /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
338
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar a imagem" })
317
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
339
318
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
340
- 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.5 }, 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" }) }),
319
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, 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" }) }),
341
320
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
342
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste sua imagem aqui" }),
343
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
344
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
321
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste sua imagem aqui" }),
322
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
323
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
345
324
  "Tamanho m\xE1ximo: ",
346
325
  formatBytes(maxSize)
347
326
  ] })
@@ -350,41 +329,27 @@ function ImageUploader({
350
329
  }
351
330
  ),
352
331
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
353
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
354
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
355
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
332
+ preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { width: "100%", maxHeight: 200, objectFit: "contain", display: "block", background: "var(--silo-bg-hover, #f8fafc)" } }) }),
333
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
334
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
356
335
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
357
336
  ] }),
358
337
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
359
- /* @__PURE__ */ jsx(
360
- "button",
361
- {
362
- onClick: () => {
363
- setStagedFile(null);
364
- setPreview(null);
365
- },
366
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
367
- children: "Cancelar"
368
- }
369
- ),
370
- /* @__PURE__ */ jsx(
371
- "button",
372
- {
373
- onClick: () => {
374
- const f = stagedFile;
375
- setStagedFile(null);
376
- void doUpload(f, imageOpts);
377
- },
378
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
379
- children: "Enviar imagem"
380
- }
381
- )
338
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
339
+ setStagedFile(null);
340
+ setPreview(null);
341
+ }, children: "Cancelar" }),
342
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
343
+ const f = stagedFile;
344
+ setStagedFile(null);
345
+ void doUpload(f, imageOpts);
346
+ }, children: "Enviar imagem" })
382
347
  ] })
383
348
  ] }),
384
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
349
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
385
350
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
386
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel(state.status, progress) }),
387
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
351
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel(state.status, progress) }),
352
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
388
353
  progress,
389
354
  "%"
390
355
  ] })
@@ -392,61 +357,33 @@ function ImageUploader({
392
357
  /* @__PURE__ */ jsx(ProgressBar, { progress })
393
358
  ] })),
394
359
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
395
- /* @__PURE__ */ jsx(
396
- "button",
397
- {
398
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, image: imageOpts }),
399
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
400
- children: "\u25B6 Retomar envio"
401
- }
402
- ),
403
- /* @__PURE__ */ jsx(
404
- "button",
405
- {
406
- onClick: () => {
407
- abort();
408
- setPreview(null);
409
- },
410
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
411
- children: "Cancelar"
412
- }
413
- )
360
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }), children: "\u25B6 Retomar envio" }),
361
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
362
+ abort();
363
+ setPreview(null);
364
+ }, children: "Cancelar" })
414
365
  ] }),
415
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
366
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
416
367
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
417
368
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
418
369
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
419
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
370
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
420
371
  ] }),
421
- /* @__PURE__ */ jsx(
422
- "button",
423
- {
424
- onClick: () => {
425
- reset();
426
- setPreview(null);
427
- },
428
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
429
- children: "Enviar outra"
430
- }
431
- )
372
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
373
+ reset();
374
+ setPreview(null);
375
+ }, children: "Enviar outra" })
432
376
  ] }),
433
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
377
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
434
378
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
435
379
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
436
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
437
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
380
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
381
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
438
382
  ] }),
439
- /* @__PURE__ */ jsx(
440
- "button",
441
- {
442
- onClick: () => {
443
- reset();
444
- setPreview(null);
445
- },
446
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
447
- children: "Tentar novamente"
448
- }
449
- )
383
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
384
+ reset();
385
+ setPreview(null);
386
+ }, children: "Tentar novamente" })
450
387
  ] })
451
388
  ] });
452
389
  }
@@ -591,7 +528,6 @@ function uploadLabel2(status, progress) {
591
528
  function VideoUploader({
592
529
  bucket,
593
530
  expiresIn,
594
- visibility = "private",
595
531
  onUpload,
596
532
  onError,
597
533
  className = "",
@@ -618,12 +554,12 @@ function VideoUploader({
618
554
  const doUpload = useCallback(async (file, opts) => {
619
555
  if (showPreview) setPreview(URL.createObjectURL(file));
620
556
  try {
621
- const result = await upload(file, { ...bucket !== void 0 && { bucket }, visibility, video: opts });
557
+ const result = await upload(file, { ...bucket !== void 0 && { bucket }, video: opts });
622
558
  if (result) onUpload?.(result);
623
559
  } catch (err) {
624
560
  onError?.(err instanceof Error ? err : new Error(String(err)));
625
561
  }
626
- }, [upload, bucket, visibility, onUpload, onError, showPreview]);
562
+ }, [upload, bucket, onUpload, onError, showPreview]);
627
563
  const handleFiles = useCallback(async (files) => {
628
564
  const file = files[0];
629
565
  if (!file) return;
@@ -662,13 +598,13 @@ function VideoUploader({
662
598
  style: { padding: "32px 24px", textAlign: "center" },
663
599
  children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
664
600
  /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
665
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: "Clique ou arraste para trocar o v\xEDdeo" })
601
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
666
602
  ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
667
- 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.5 }, 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" }) }),
603
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, 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" }) }),
668
604
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
669
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: "Arraste seu v\xEDdeo aqui" }),
670
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
671
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
605
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: "Arraste seu v\xEDdeo aqui" }),
606
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
607
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
672
608
  "MP4, MOV, MKV, WebM",
673
609
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
674
610
  ] })
@@ -677,112 +613,70 @@ function VideoUploader({
677
613
  }
678
614
  ),
679
615
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
680
- preview && /* @__PURE__ */ jsx("div", { style: { borderRadius: 10, overflow: "hidden", border: "1px solid var(--silo-border)", background: "#000" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
681
- /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
682
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
616
+ preview && /* @__PURE__ */ jsx("div", { className: "silo-section-body", style: { background: "#000", overflow: "hidden" }, children: /* @__PURE__ */ jsx("video", { src: preview, style: { width: "100%", maxHeight: 200, display: "block" }, muted: true, playsInline: true, controls: true }) }),
617
+ /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
618
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
683
619
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
684
620
  ] }),
685
621
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
686
- /* @__PURE__ */ jsx(
687
- "button",
688
- {
689
- onClick: () => {
690
- setStagedFile(null);
691
- setPreview(null);
692
- setVideoOpts(createInitialVideoOpts(video));
693
- },
694
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
695
- children: "Cancelar"
696
- }
697
- ),
698
- /* @__PURE__ */ jsx(
699
- "button",
700
- {
701
- onClick: () => {
702
- const f = stagedFile;
703
- setStagedFile(null);
704
- void doUpload(f, videoOpts);
705
- setVideoOpts(createInitialVideoOpts(video));
706
- },
707
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
708
- children: "Enviar v\xEDdeo"
709
- }
710
- )
622
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
623
+ setStagedFile(null);
624
+ setPreview(null);
625
+ setVideoOpts(createInitialVideoOpts(video));
626
+ }, children: "Cancelar" }),
627
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: () => {
628
+ const f = stagedFile;
629
+ setStagedFile(null);
630
+ void doUpload(f, videoOpts);
631
+ setVideoOpts(createInitialVideoOpts(video));
632
+ }, children: "Enviar v\xEDdeo" })
711
633
  ] })
712
634
  ] }),
713
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: 16, borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
635
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
714
636
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
715
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel2(state.status, progress) }),
637
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
716
638
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
717
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
639
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
718
640
  progress,
719
641
  "%"
720
642
  ] }),
721
- /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "1px solid var(--silo-border)", borderRadius: 6, cursor: "pointer", fontSize: 11, color: "var(--silo-text-muted)", padding: "2px 8px" }, children: "Pausar" })
643
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
722
644
  ] })
723
645
  ] }),
724
646
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
725
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
647
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
726
648
  ] })),
727
649
  isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
728
- /* @__PURE__ */ jsx(
729
- "button",
730
- {
731
- onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, video: videoOpts }),
732
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
733
- children: "\u25B6 Retomar envio"
734
- }
735
- ),
736
- /* @__PURE__ */ jsx(
737
- "button",
738
- {
739
- onClick: () => {
740
- abort();
741
- setPreview(null);
742
- },
743
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", fontSize: 13, cursor: "pointer", color: "var(--silo-text-muted)" },
744
- children: "Cancelar"
745
- }
746
- )
650
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--success", style: { flex: 1 }, onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }), children: "\u25B6 Retomar envio" }),
651
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: () => {
652
+ abort();
653
+ setPreview(null);
654
+ }, children: "Cancelar" })
747
655
  ] }),
748
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
656
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
749
657
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
750
658
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
751
659
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
752
660
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
753
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(state.result.size) })
661
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
754
662
  ] }),
755
- /* @__PURE__ */ jsx(
756
- "button",
757
- {
758
- onClick: () => {
759
- reset();
760
- setPreview(null);
761
- },
762
- style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 },
763
- children: "Enviar outro"
764
- }
765
- )
663
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
664
+ reset();
665
+ setPreview(null);
666
+ }, children: "Enviar outro" })
766
667
  ] }),
767
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
668
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, padding: "8px 12px", borderRadius: 8, background: "rgba(34,197,94,0.06)", border: "1px solid rgba(34,197,94,0.15)" }, children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
768
669
  ] }),
769
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
670
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
770
671
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
771
672
  /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
772
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
773
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: state.error.message })
673
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
674
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: state.error.message })
774
675
  ] }),
775
- /* @__PURE__ */ jsx(
776
- "button",
777
- {
778
- onClick: () => {
779
- reset();
780
- setPreview(null);
781
- },
782
- style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 },
783
- children: "Tentar novamente"
784
- }
785
- )
676
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: () => {
677
+ reset();
678
+ setPreview(null);
679
+ }, children: "Tentar novamente" })
786
680
  ] })
787
681
  ] });
788
682
  }
@@ -810,7 +704,6 @@ function uploadLabel3(status, progress) {
810
704
  }
811
705
  function FileUploader({
812
706
  bucket,
813
- visibility = "private",
814
707
  onUpload,
815
708
  onBatchUpload,
816
709
  onError,
@@ -875,7 +768,7 @@ function FileUploader({
875
768
  const effectiveVideo = showVideoOptions ? resolvedVideo : video ?? resolvedVideo;
876
769
  if (multiple && files.length > 1) {
877
770
  try {
878
- const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
771
+ const results = await batch.upload(files, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
879
772
  onBatchUpload?.(results);
880
773
  results.forEach((r) => onUpload?.(r));
881
774
  } catch (err) {
@@ -885,13 +778,13 @@ function FileUploader({
885
778
  const file = files[0];
886
779
  if (!file) return;
887
780
  try {
888
- const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, visibility, image: effectiveImage, video: effectiveVideo });
781
+ const result = await single.upload(file, { ...bucket !== void 0 && { bucket }, image: effectiveImage, video: effectiveVideo });
889
782
  if (result) onUpload?.(result);
890
783
  } catch (err) {
891
784
  onError?.(err instanceof Error ? err : new Error(String(err)));
892
785
  }
893
786
  }
894
- }, [single, batch, multiple, bucket, visibility, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
787
+ }, [single, batch, multiple, bucket, image, video, imageOpts, videoOpts, showImageOptions, showVideoOptions, onUpload, onBatchUpload, onError]);
895
788
  const handleFiles = useCallback(async (files) => {
896
789
  const needsStaging = allowRename || showImageOptions && files.some((f) => f.type.startsWith("image/")) || showVideoOptions && files.some((f) => f.type.startsWith("video/"));
897
790
  if (needsStaging) {
@@ -932,11 +825,11 @@ function FileUploader({
932
825
  onFiles: handleFiles,
933
826
  style: { padding: "28px 24px", textAlign: "center" },
934
827
  children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
935
- 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.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
828
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "silo-text-muted", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" }) }),
936
829
  children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
937
- /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, fontSize: 15, color: "var(--silo-text)" }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
938
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "var(--silo-text-muted)" }, children: "ou clique para escolher do seu dispositivo" }),
939
- maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--silo-text-muted)" }, children: [
830
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontWeight: 700, fontSize: 15 }, children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
831
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "ou clique para escolher do seu dispositivo" }),
832
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
940
833
  "Tamanho m\xE1ximo: ",
941
834
  formatBytes(maxSize)
942
835
  ] })
@@ -945,8 +838,8 @@ function FileUploader({
945
838
  }
946
839
  ),
947
840
  staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
948
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text-muted)", marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
949
- staged.map((f, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
841
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 13, fontWeight: 600, marginBottom: 2 }, children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
842
+ staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "silo-card", children: [
950
843
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
951
844
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
952
845
  editingIndex === i ? /* @__PURE__ */ jsx(
@@ -966,28 +859,30 @@ function FileUploader({
966
859
  }
967
860
  if (e.key === "Escape") setEditingIndex(null);
968
861
  },
969
- style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg)", color: "var(--silo-text)", fontFamily: "var(--silo-font)" }
862
+ style: { width: "100%", fontSize: 13, fontWeight: 500, border: "1px solid var(--silo-accent, #6366f1)", borderRadius: 5, padding: "2px 8px", outline: "none", background: "var(--silo-bg, #f8fafc)", color: "var(--silo-text, #0f172a)", fontFamily: "var(--silo-font, inherit)" }
970
863
  }
971
864
  ) : /* @__PURE__ */ jsxs(
972
865
  "div",
973
866
  {
974
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)", cursor: allowRename ? "text" : "default" },
867
+ className: "silo-text",
868
+ style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
975
869
  onClick: () => allowRename && setEditingIndex(i),
976
870
  title: allowRename ? "Clique para renomear" : void 0,
977
871
  children: [
978
872
  effectiveName(i, staged),
979
- renames.has(i) && /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "var(--silo-accent)", fontWeight: 700 }, children: "renomeado" })
873
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
980
874
  ]
981
875
  }
982
876
  ),
983
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)", marginTop: 1 }, children: formatBytes(f.size) })
877
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
984
878
  ] }),
985
879
  allowRename && /* @__PURE__ */ jsx(
986
880
  "button",
987
881
  {
988
882
  onClick: () => setEditingIndex(i),
989
883
  title: "Renomear",
990
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, color: "var(--silo-text-muted)", padding: "0 4px", flexShrink: 0 },
884
+ className: "silo-text-muted",
885
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
991
886
  children: "\u270F\uFE0F"
992
887
  }
993
888
  ),
@@ -999,42 +894,29 @@ function FileUploader({
999
894
  if (next.length === 0) clearStaging();
1000
895
  else setStaged(next);
1001
896
  },
1002
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, color: "var(--silo-text-muted)", padding: "0 4px", lineHeight: 1, flexShrink: 0 },
897
+ className: "silo-text-muted",
898
+ style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
1003
899
  children: "\xD7"
1004
900
  }
1005
901
  )
1006
902
  ] }, i)),
1007
- showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1008
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
903
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
904
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
1009
905
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
1010
906
  ] }),
1011
- showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { style: { borderRadius: 10, border: "1px solid var(--silo-border)", overflow: "hidden" }, children: [
1012
- /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", background: "var(--silo-bg-hover, #f1f5f9)", fontSize: 12, fontWeight: 700, color: "var(--silo-text-muted)", letterSpacing: "0.04em" }, children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
907
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "silo-section-body", children: [
908
+ /* @__PURE__ */ jsx("div", { className: "silo-section-header", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
1013
909
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
1014
910
  ] }),
1015
911
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
1016
- /* @__PURE__ */ jsx(
1017
- "button",
1018
- {
1019
- onClick: clearStaging,
1020
- style: { padding: "10px 16px", borderRadius: 8, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", fontSize: 13, fontWeight: 600, cursor: "pointer" },
1021
- children: "Cancelar"
1022
- }
1023
- ),
1024
- /* @__PURE__ */ jsx(
1025
- "button",
1026
- {
1027
- onClick: handleConfirmUpload,
1028
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: "var(--silo-accent, #6366f1)", color: "#fff", fontSize: 14, fontWeight: 700, cursor: "pointer" },
1029
- children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
1030
- }
1031
- )
912
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg", onClick: clearStaging, children: "Cancelar" }),
913
+ /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--lg silo-btn--primary", style: { flex: 1 }, onClick: handleConfirmUpload, children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo" })
1032
914
  ] })
1033
915
  ] }),
1034
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "16px", borderRadius: 10, border: "1px solid var(--silo-border)", background: "var(--silo-bg)" }, children: [
916
+ isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
1035
917
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
1036
- /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "var(--silo-text)" }, children: uploadLabel3(single.state.status, singleProgress) }),
1037
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--silo-accent, #6366f1)" }, children: [
918
+ /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel3(single.state.status, singleProgress) }),
919
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
1038
920
  singleProgress,
1039
921
  "%"
1040
922
  ] })
@@ -1048,17 +930,17 @@ function FileUploader({
1048
930
  const isPaused = st.status === "paused";
1049
931
  const isDone = st.status === "done";
1050
932
  const isErr = st.status === "error";
1051
- return /* @__PURE__ */ jsxs("div", { style: { padding: "12px 14px", backgroundColor: "var(--silo-bg)", borderRadius: 10, border: "1px solid var(--silo-border)" }, children: [
1052
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, marginBottom: isDone || isErr ? 0 : 8 }, children: [
933
+ return /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", alignItems: "stretch", gap: 8, padding: "12px 14px" }, children: [
934
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
1053
935
  /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
1054
936
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1055
- /* @__PURE__ */ jsx("div", { style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--silo-text)" }, children: f.file.name }),
1056
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
937
+ /* @__PURE__ */ jsx("div", { className: "silo-text", style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
938
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11 }, children: formatBytes(f.file.size) })
1057
939
  ] }),
1058
940
  isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
1059
- isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "#ef4444", fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
1060
- !isDone && !isErr && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 700, color: isPaused ? "#f59e0b" : "var(--silo-accent, #6366f1)", flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
1061
- !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "none", background: "#10b981", color: "#fff", cursor: "pointer", fontWeight: 600 }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: 11, padding: "3px 10px", borderRadius: 6, border: "1px solid var(--silo-border)", background: "transparent", color: "var(--silo-text-muted)", cursor: "pointer" }, children: "Pausar" }) : null)
941
+ isErr && /* @__PURE__ */ jsx("span", { className: "silo-text-error", style: { fontSize: 12, fontWeight: 600, flexShrink: 0 }, children: "Erro no envio" }),
942
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: isPaused ? "silo-text-muted" : "silo-text-accent", style: { fontSize: 12, fontWeight: 700, flexShrink: 0 }, children: isPaused ? "Pausado" : `${p}%` }),
943
+ !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--success", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "3px 10px" }, onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
1062
944
  ] }),
1063
945
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
1064
946
  ] }, i);
@@ -1067,40 +949,41 @@ function FileUploader({
1067
949
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
1068
950
  "button",
1069
951
  {
952
+ className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
953
+ style: { flex: 1 },
1070
954
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
1071
- style: { flex: 1, padding: "10px", borderRadius: 8, border: "none", background: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1072
955
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
1073
956
  }
1074
957
  ),
1075
958
  /* @__PURE__ */ jsx(
1076
959
  "button",
1077
960
  {
961
+ className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
1078
962
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
1079
- style: { padding: "10px 16px", borderRadius: 8, border: "none", background: batch.state.status === "done" ? "var(--silo-accent, #6366f1)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: 13, fontWeight: 700, cursor: "pointer" },
1080
963
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
1081
964
  }
1082
965
  )
1083
966
  ] }),
1084
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, padding: "12px 14px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
967
+ batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
1085
968
  /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
1086
969
  /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "#16a34a" }, children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
1087
970
  ] })
1088
971
  ] }),
1089
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)" }, children: [
972
+ single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
1090
973
  /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
1091
974
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1092
975
  /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
1093
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: formatBytes(single.state.result.size) })
976
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
1094
977
  ] }),
1095
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(34,197,94,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, children: "Enviar outro" })
978
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(34,197,94,0.3)", color: "#16a34a", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Enviar outro" })
1096
979
  ] }),
1097
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "14px 16px", borderRadius: 10, background: "rgba(239,68,68,0.07)", border: "1px solid rgba(239,68,68,0.2)" }, children: [
980
+ single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
1098
981
  /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
1099
982
  /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
1100
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 13, color: "#ef4444" }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1101
- /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--silo-text-muted)", marginTop: 2 }, children: single.state.error.message })
983
+ /* @__PURE__ */ jsx("div", { className: "silo-text-error", style: { fontWeight: 700, fontSize: 13 }, children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
984
+ /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: single.state.error.message })
1102
985
  ] }),
1103
- /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "1px solid rgba(239,68,68,0.3)", borderRadius: 6, cursor: "pointer", fontSize: 12, fontWeight: 600, color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, children: "Tentar novamente" })
986
+ /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { borderColor: "rgba(239,68,68,0.3)", color: "#ef4444", padding: "4px 10px", flexShrink: 0 }, onClick: single.reset, children: "Tentar novamente" })
1104
987
  ] })
1105
988
  ] });
1106
989
  }
@@ -2403,36 +2286,39 @@ function parseVideoChildren(children) {
2403
2286
  sources: [],
2404
2287
  subtitles: []
2405
2288
  };
2406
- function isType(child, fn) {
2407
- if (child.type === fn) return true;
2408
- return child.type?.displayName === fn.displayName && !!fn.displayName;
2289
+ function dn(child) {
2290
+ return child.type?.displayName ?? child.type?.name ?? "";
2409
2291
  }
2410
2292
  React.Children.forEach(children, (child) => {
2411
2293
  if (!React.isValidElement(child)) return;
2412
- if (isType(child, Sources)) {
2294
+ const name = dn(child);
2295
+ if (child.type === Sources || name === "SiloSources") {
2413
2296
  const element = child;
2414
2297
  React.Children.forEach(element.props.children, (sourceChild) => {
2415
2298
  if (!React.isValidElement(sourceChild)) return;
2416
- if (!isType(sourceChild, Source)) return;
2299
+ const sn = dn(sourceChild);
2300
+ if (sourceChild.type !== Source && sn !== "SiloSource") return;
2417
2301
  const sourceElement = sourceChild;
2418
2302
  parsed.sources.push(sourceElement.props);
2419
2303
  });
2420
2304
  }
2421
- if (isType(child, Subtitles)) {
2305
+ if (child.type === Subtitles || name === "SiloSubtitles") {
2422
2306
  const element = child;
2423
2307
  React.Children.forEach(element.props.children, (subtitleChild) => {
2424
2308
  if (!React.isValidElement(subtitleChild)) return;
2425
- if (!isType(subtitleChild, Subtitle)) return;
2309
+ const sn = dn(subtitleChild);
2310
+ if (subtitleChild.type !== Subtitle && sn !== "SiloSubtitle") return;
2426
2311
  const subtitleElement = subtitleChild;
2427
2312
  parsed.subtitles.push(subtitleElement.props);
2428
2313
  });
2429
2314
  }
2430
- if (isType(child, Storyboard)) {
2315
+ if (child.type === Storyboard || name === "SiloStoryboard") {
2431
2316
  const element = child;
2432
2317
  const frames = [];
2433
2318
  React.Children.forEach(element.props.children, (frameChild) => {
2434
2319
  if (!React.isValidElement(frameChild)) return;
2435
- if (!isType(frameChild, StoryboardFrame)) return;
2320
+ const fn2 = dn(frameChild);
2321
+ if (frameChild.type !== StoryboardFrame && fn2 !== "SiloStoryboardFrame") return;
2436
2322
  const frameElement = frameChild;
2437
2323
  frames.push(frameElement.props);
2438
2324
  });
@@ -2763,20 +2649,8 @@ function FileCard({
2763
2649
  style
2764
2650
  }) {
2765
2651
  const { file, loading } = useFileStatus(fileId, { pollInterval });
2766
- const card = {
2767
- display: "flex",
2768
- flexDirection: "column",
2769
- gap: 0,
2770
- borderRadius: "var(--silo-radius, 12px)",
2771
- border: "1px solid var(--silo-border, #e2e8f0)",
2772
- background: "var(--silo-bg, #f8fafc)",
2773
- overflow: "hidden",
2774
- fontFamily: "var(--silo-font, inherit)",
2775
- width: 220,
2776
- ...style
2777
- };
2778
2652
  if (loading && !file) {
2779
- return /* @__PURE__ */ jsx("div", { className, style: { ...card, padding: 16, color: "var(--silo-text-muted, #94a3b8)", fontSize: 13 }, children: "Loading..." });
2653
+ return /* @__PURE__ */ jsx("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style: { padding: 16, ...style }, children: /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }) });
2780
2654
  }
2781
2655
  if (!file) return null;
2782
2656
  const status = file.status;
@@ -2785,8 +2659,8 @@ function FileCard({
2785
2659
  const showThumb = isImg || isVid;
2786
2660
  const progress = file.progress ?? null;
2787
2661
  const ext = file.originalName.split(".").pop()?.toUpperCase();
2788
- return /* @__PURE__ */ jsxs("div", { className, style: card, children: [
2789
- /* @__PURE__ */ jsxs("div", { style: { position: "relative", height: 130, background: "var(--silo-bg-hover, #f1f5f9)", flexShrink: 0 }, children: [
2662
+ return /* @__PURE__ */ jsxs("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style, children: [
2663
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-card__thumb-area", children: [
2790
2664
  showThumb ? /* @__PURE__ */ jsx(
2791
2665
  Thumbnail,
2792
2666
  {
@@ -2801,100 +2675,46 @@ function FileCard({
2801
2675
  /* @__PURE__ */ jsx(
2802
2676
  "span",
2803
2677
  {
2804
- style: {
2805
- position: "absolute",
2806
- top: 8,
2807
- right: 8,
2808
- fontSize: 10,
2809
- fontWeight: 700,
2810
- letterSpacing: "0.05em",
2811
- padding: "2px 7px",
2812
- borderRadius: 99,
2813
- background: "rgba(0,0,0,0.55)",
2814
- color: statusColor(status),
2815
- backdropFilter: "blur(4px)"
2816
- },
2678
+ className: "silo-file-card__badge silo-file-card__badge--status",
2679
+ style: { color: statusColor(status) },
2817
2680
  children: STATUS_LABEL[status] ?? status
2818
2681
  }
2819
2682
  ),
2820
- ext && /* @__PURE__ */ jsx(
2821
- "span",
2822
- {
2823
- style: {
2824
- position: "absolute",
2825
- top: 8,
2826
- left: 8,
2827
- fontSize: 9,
2828
- fontWeight: 700,
2829
- letterSpacing: "0.06em",
2830
- padding: "2px 6px",
2831
- borderRadius: 6,
2832
- background: "rgba(0,0,0,0.45)",
2833
- color: "#fff",
2834
- backdropFilter: "blur(4px)"
2835
- },
2836
- children: ext
2837
- }
2838
- )
2683
+ ext && /* @__PURE__ */ jsx("span", { className: "silo-file-card__badge silo-file-card__badge--ext", children: ext })
2839
2684
  ] }),
2840
- /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", display: "flex", flexDirection: "column", gap: 4 }, children: [
2841
- /* @__PURE__ */ jsx(
2842
- "span",
2843
- {
2844
- style: {
2845
- fontSize: 13,
2846
- fontWeight: 600,
2847
- color: "var(--silo-text, #0f172a)",
2848
- overflow: "hidden",
2849
- textOverflow: "ellipsis",
2850
- whiteSpace: "nowrap"
2851
- },
2852
- title: file.originalName,
2853
- children: file.originalName
2854
- }
2855
- ),
2856
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: [
2685
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-card__body", children: [
2686
+ /* @__PURE__ */ jsx("span", { className: "silo-file-card__name", title: file.originalName, children: file.originalName }),
2687
+ /* @__PURE__ */ jsxs("span", { className: "silo-file-card__meta", children: [
2857
2688
  formatBytes(file.size),
2858
2689
  file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2859
2690
  file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2860
2691
  ] }),
2861
2692
  isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
2862
2693
  /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2863
- /* @__PURE__ */ jsxs("span", { style: { fontSize: 10, color: "var(--silo-text-muted, #94a3b8)", marginTop: 2, display: "block" }, children: [
2694
+ /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 10, marginTop: 2, display: "block" }, children: [
2864
2695
  STATUS_LABEL[status],
2865
2696
  progress != null ? ` \xB7 ${progress}%` : ""
2866
2697
  ] })
2867
2698
  ] }),
2868
- actions.length > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap" }, children: [
2869
- actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { onClick: () => onPreview(fileId), style: btnStyle, children: "Preview" }),
2699
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "silo-file-card__actions", children: [
2700
+ actions.includes("preview") && onPreview && /* @__PURE__ */ jsx("button", { className: "silo-btn", onClick: () => onPreview(fileId), children: "Preview" }),
2870
2701
  actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2871
2702
  "button",
2872
2703
  {
2704
+ className: "silo-btn",
2873
2705
  onClick: () => {
2874
2706
  const url = `${file.key}`;
2875
2707
  navigator.clipboard.writeText(url).catch(() => void 0);
2876
2708
  onCopyUrl(url);
2877
2709
  },
2878
- style: btnStyle,
2879
2710
  children: "Copy URL"
2880
2711
  }
2881
2712
  ),
2882
- actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { onClick: () => onDelete(fileId), style: { ...btnStyle, color: "var(--silo-error, #ef4444)" }, children: "Delete" })
2713
+ actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--danger", onClick: () => onDelete(fileId), children: "Delete" })
2883
2714
  ] })
2884
2715
  ] })
2885
2716
  ] });
2886
2717
  }
2887
- var btnStyle = {
2888
- fontSize: 11,
2889
- fontWeight: 600,
2890
- padding: "3px 9px",
2891
- borderRadius: 6,
2892
- border: "1px solid var(--silo-border, #e2e8f0)",
2893
- background: "transparent",
2894
- color: "var(--silo-text, #0f172a)",
2895
- cursor: "pointer",
2896
- lineHeight: 1.6
2897
- };
2898
2718
  var STATUS_LABEL2 = {
2899
2719
  CREATED: "Created",
2900
2720
  UPLOADING: "Uploading",
@@ -2930,37 +2750,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2930
2750
  const isVid = file?.mimeType.startsWith("video/");
2931
2751
  const progress = file?.progress ?? null;
2932
2752
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2933
- /* @__PURE__ */ jsx(
2934
- "div",
2935
- {
2936
- onClick: onClose,
2937
- "aria-hidden": true,
2938
- style: {
2939
- position: "fixed",
2940
- inset: 0,
2941
- zIndex: 1e3,
2942
- background: "rgba(0,0,0,0.6)",
2943
- backdropFilter: "blur(6px)"
2944
- }
2945
- }
2946
- ),
2753
+ /* @__PURE__ */ jsx("div", { className: "silo-file-preview-backdrop", onClick: onClose, "aria-hidden": true }),
2947
2754
  /* @__PURE__ */ jsxs(
2948
2755
  "div",
2949
2756
  {
2757
+ className: "silo-file-preview",
2950
2758
  role: "dialog",
2951
2759
  "aria-modal": true,
2952
2760
  "aria-label": file?.originalName ?? "File preview",
2953
- style: modal,
2954
2761
  onKeyDown: (e) => {
2955
2762
  if (e.key === "Escape") onClose();
2956
2763
  },
2957
2764
  children: [
2958
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, padding: "16px 20px", borderBottom: "1px solid var(--silo-border, #e2e8f0)" }, children: [
2959
- /* @__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..." }),
2960
- /* @__PURE__ */ jsx("button", { onClick: onClose, "aria-label": "Close", style: closeBtn, children: "\u2715" })
2765
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__header", children: [
2766
+ /* @__PURE__ */ jsx("span", { className: "silo-file-preview__title", children: file?.originalName ?? "Loading..." }),
2767
+ /* @__PURE__ */ jsx("button", { className: "silo-file-preview__close", onClick: onClose, "aria-label": "Close", children: "\u2715" })
2961
2768
  ] }),
2962
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", alignItems: "center", justifyContent: "center", background: "#0f0f0f", minHeight: 240, position: "relative" }, children: [
2963
- loading && !file && /* @__PURE__ */ jsx("span", { style: { color: "#64748b", fontSize: 13 }, children: "Loading..." }),
2769
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__media", children: [
2770
+ loading && !file && /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "Loading..." }),
2964
2771
  file && isImg && url && /* @__PURE__ */ jsx(
2965
2772
  "img",
2966
2773
  {
@@ -2979,7 +2786,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2979
2786
  ),
2980
2787
  file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
2981
2788
  /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
2982
- /* @__PURE__ */ jsx("span", { style: { color: "#94a3b8", fontSize: 13 }, children: "No preview available" })
2789
+ /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "No preview available" })
2983
2790
  ] }),
2984
2791
  file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
2985
2792
  position: "absolute",
@@ -2993,24 +2800,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2993
2800
  }, children: [
2994
2801
  /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
2995
2802
  /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2996
- progress != null && /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8", fontSize: 12 }, children: [
2803
+ progress != null && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
2997
2804
  progress,
2998
2805
  "%"
2999
2806
  ] })
3000
2807
  ] })
3001
2808
  ] }),
3002
- file && /* @__PURE__ */ jsxs("div", { style: { padding: "14px 20px", borderTop: "1px solid var(--silo-border, #e2e8f0)", display: "flex", flexDirection: "column", gap: 8 }, children: [
3003
- /* @__PURE__ */ jsxs("div", { style: metaGrid, children: [
2809
+ file && /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta", children: [
2810
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta-grid", children: [
3004
2811
  /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
3005
2812
  /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
3006
- /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucket }),
2813
+ /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucketName ?? file.bucket }),
3007
2814
  /* @__PURE__ */ jsx(MetaRow, { label: "Status", value: STATUS_LABEL2[status] ?? status, highlight: status === "READY" }),
3008
2815
  file.metadata?.width && /* @__PURE__ */ jsx(MetaRow, { label: "Dimensions", value: `${file.metadata.width}\xD7${file.metadata.height}` }),
3009
2816
  file.metadata?.duration && /* @__PURE__ */ jsx(MetaRow, { label: "Duration", value: `${Math.round(file.metadata.duration)}s` }),
3010
2817
  file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
3011
2818
  /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
3012
2819
  ] }),
3013
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", marginTop: 4 }, children: [
2820
+ /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__badges", children: [
3014
2821
  file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
3015
2822
  file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
3016
2823
  file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
@@ -3018,8 +2825,9 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3018
2825
  url && /* @__PURE__ */ jsx(
3019
2826
  "button",
3020
2827
  {
2828
+ className: "silo-btn silo-btn--full",
2829
+ style: { marginTop: 4 },
3021
2830
  onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
3022
- style: { ...btnStyle2, marginTop: 4, width: "100%", textAlign: "center" },
3023
2831
  children: "Copy URL"
3024
2832
  }
3025
2833
  )
@@ -3031,64 +2839,13 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
3031
2839
  }
3032
2840
  function MetaRow({ label, value, highlight }) {
3033
2841
  return /* @__PURE__ */ jsxs(Fragment, { children: [
3034
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)", fontWeight: 500 }, children: label }),
3035
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: highlight ? "var(--silo-success, #22c55e)" : "var(--silo-text, #0f172a)", fontWeight: highlight ? 600 : 400 }, children: value })
2842
+ /* @__PURE__ */ jsx("span", { className: "silo-file-preview__meta-label", children: label }),
2843
+ /* @__PURE__ */ jsx("span", { className: `silo-file-preview__meta-value${highlight ? " silo-file-preview__meta-value--highlight" : ""}`, children: value })
3036
2844
  ] });
3037
2845
  }
3038
2846
  function Badge({ children, muted }) {
3039
- return /* @__PURE__ */ jsx("span", { style: {
3040
- fontSize: 10,
3041
- fontWeight: 700,
3042
- letterSpacing: "0.05em",
3043
- padding: "2px 7px",
3044
- borderRadius: 99,
3045
- border: "1px solid var(--silo-border, #e2e8f0)",
3046
- color: muted ? "var(--silo-text-muted, #94a3b8)" : "var(--silo-accent, #6366f1)",
3047
- background: "transparent"
3048
- }, children });
2847
+ return /* @__PURE__ */ jsx("span", { className: `silo-file-preview__badge${muted ? " silo-file-preview__badge--muted" : ""}`, children });
3049
2848
  }
3050
- var modal = {
3051
- position: "fixed",
3052
- top: "50%",
3053
- left: "50%",
3054
- transform: "translate(-50%, -50%)",
3055
- zIndex: 1001,
3056
- width: "min(92vw, 560px)",
3057
- maxHeight: "90vh",
3058
- display: "flex",
3059
- flexDirection: "column",
3060
- borderRadius: "var(--silo-radius, 16px)",
3061
- background: "var(--silo-bg, #fff)",
3062
- boxShadow: "0 24px 80px rgba(0,0,0,0.35)",
3063
- overflow: "hidden",
3064
- fontFamily: "var(--silo-font, inherit)"
3065
- };
3066
- var closeBtn = {
3067
- background: "none",
3068
- border: "none",
3069
- cursor: "pointer",
3070
- fontSize: 16,
3071
- color: "var(--silo-text-muted, #94a3b8)",
3072
- lineHeight: 1,
3073
- padding: "2px 4px",
3074
- flexShrink: 0
3075
- };
3076
- var btnStyle2 = {
3077
- fontSize: 12,
3078
- fontWeight: 600,
3079
- padding: "7px 14px",
3080
- borderRadius: 8,
3081
- border: "1px solid var(--silo-border, #e2e8f0)",
3082
- background: "transparent",
3083
- color: "var(--silo-text, #0f172a)",
3084
- cursor: "pointer"
3085
- };
3086
- var metaGrid = {
3087
- display: "grid",
3088
- gridTemplateColumns: "auto 1fr",
3089
- gap: "5px 16px",
3090
- alignItems: "baseline"
3091
- };
3092
2849
 
3093
2850
  export { Avatar, Background, DropZone, FileCard, FileIcon, FilePreview, FileUploader, ImageOptions, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoOptions, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
3094
2851
  //# sourceMappingURL=index.js.map