@geekapps/silo-elements-nextjs 0.2.36 → 0.2.38

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 (20) hide show
  1. package/dist/FileUploader.js +145 -166
  2. package/dist/FileUploader.js.map +1 -1
  3. package/dist/ImageUploader.js +121 -100
  4. package/dist/ImageUploader.js.map +1 -1
  5. package/dist/MediaUploader.js +403 -359
  6. package/dist/MediaUploader.js.map +1 -1
  7. package/dist/VideoPlayer.js +12 -12
  8. package/dist/VideoPlayer.js.map +1 -1
  9. package/dist/VideoUploader.js +151 -125
  10. package/dist/VideoUploader.js.map +1 -1
  11. package/dist/components/DropZone.js +4 -4
  12. package/dist/components/DropZone.js.map +1 -1
  13. package/dist/components/ProgressBar.js +8 -2
  14. package/dist/components/ProgressBar.js.map +1 -1
  15. package/dist/index.d.ts +1 -1
  16. package/dist/index.js +593 -533
  17. package/dist/index.js.map +1 -1
  18. package/dist/styles.css +2 -1
  19. package/package.json +6 -6
  20. package/styles.css +2 -0
package/dist/index.js CHANGED
@@ -94,9 +94,9 @@ function DropZone({
94
94
  ...style
95
95
  };
96
96
  const cls = [
97
- "silo-dropzone",
98
- dragging ? "silo-dropzone--dragging" : "",
99
- disabled ? "silo-dropzone--disabled" : "",
97
+ "silo-border-2 silo-border-dashed silo-border-slate-200 silo-rounded-xl silo-bg-slate-50 silo-text-slate-900 silo-cursor-pointer silo-outline-none silo-transition-colors silo-duration-150",
98
+ dragging ? "silo-border-indigo-500 silo-bg-slate-100" : "hover:silo-border-indigo-500 hover:silo-bg-slate-100",
99
+ disabled ? "silo-opacity-50 silo-cursor-not-allowed" : "",
100
100
  className
101
101
  ].filter(Boolean).join(" ");
102
102
  return /* @__PURE__ */ jsxs(
@@ -125,7 +125,7 @@ function DropZone({
125
125
  type: "file",
126
126
  accept,
127
127
  multiple,
128
- style: { display: "none" },
128
+ className: "hidden",
129
129
  onChange: handleChange,
130
130
  disabled
131
131
  }
@@ -139,13 +139,19 @@ function ProgressBar({ progress, className = "", style }) {
139
139
  return /* @__PURE__ */ jsx(
140
140
  "div",
141
141
  {
142
- className: `silo-progress-track${className ? ` ${className}` : ""}`,
142
+ className: `h-1 rounded-full bg-slate-200 overflow-hidden${className ? ` ${className}` : ""}`,
143
143
  style,
144
144
  role: "progressbar",
145
145
  "aria-valuenow": progress,
146
146
  "aria-valuemin": 0,
147
147
  "aria-valuemax": 100,
148
- children: /* @__PURE__ */ jsx("div", { className: "silo-progress-fill", style: { width: `${progress}%` } })
148
+ children: /* @__PURE__ */ jsx(
149
+ "div",
150
+ {
151
+ className: "h-full rounded-full bg-indigo-500 transition-[width] duration-200 ease-linear",
152
+ style: { width: `${progress}%` }
153
+ }
154
+ )
149
155
  }
150
156
  );
151
157
  }
@@ -158,60 +164,38 @@ var FORMATS = [
158
164
  function ImageOptions({ value, onChange, style }) {
159
165
  const fmt = value.format ?? "webp";
160
166
  const optimize = value.optimize ?? true;
161
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 10, ...style }, children: [
167
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", style, children: [
162
168
  /* @__PURE__ */ jsxs("div", { children: [
163
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Formato de sa\xEDda" }),
164
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: FORMATS.map((f) => /* @__PURE__ */ jsx(
169
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Formato de sa\xEDda" }),
170
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: FORMATS.map((f) => /* @__PURE__ */ jsx(
165
171
  "button",
166
172
  {
167
173
  type: "button",
168
174
  onClick: () => onChange({ ...value, format: f.value }),
169
175
  title: f.hint,
170
- style: {
171
- padding: "4px 12px",
172
- borderRadius: 6,
173
- border: `1px solid ${fmt === f.value ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
174
- background: fmt === f.value ? "var(--silo-accent, #6366f1)" : "transparent",
175
- color: fmt === f.value ? "#fff" : "var(--silo-text, #0f172a)",
176
- fontSize: 12,
177
- fontWeight: 600,
178
- cursor: "pointer"
179
- },
176
+ className: `py-1 px-3 rounded-md text-xs font-semibold cursor-pointer transition-colors border${fmt === f.value ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`,
180
177
  children: f.label
181
178
  },
182
179
  f.value
183
180
  )) })
184
181
  ] }),
185
- /* @__PURE__ */ jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", userSelect: "none" }, children: [
182
+ /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 cursor-pointer select-none", children: [
186
183
  /* @__PURE__ */ jsx(
187
184
  "span",
188
185
  {
189
186
  onClick: () => onChange({ ...value, optimize: !optimize }),
190
- style: {
191
- width: 36,
192
- height: 20,
193
- borderRadius: 10,
194
- background: optimize ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
195
- position: "relative",
196
- flexShrink: 0,
197
- transition: "background 0.15s",
198
- cursor: "pointer"
199
- },
200
- children: /* @__PURE__ */ jsx("span", { style: {
201
- position: "absolute",
202
- top: 2,
203
- left: optimize ? 18 : 2,
204
- width: 16,
205
- height: 16,
206
- borderRadius: "50%",
207
- background: "#fff",
208
- transition: "left 0.15s",
209
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
210
- } })
187
+ className: `relative w-9 h-5 rounded-full shrink-0 cursor-pointer transition-colors duration-150${optimize ? "bg-indigo-500" : "bg-slate-200"}`,
188
+ children: /* @__PURE__ */ jsx(
189
+ "span",
190
+ {
191
+ className: "absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-[left] duration-150",
192
+ style: { left: optimize ? "18px" : "2px" }
193
+ }
194
+ )
211
195
  }
212
196
  ),
213
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: "var(--silo-text, #0f172a)", fontWeight: 500 }, children: "Otimizar tamanho" }),
214
- /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #94a3b8)" }, children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
197
+ /* @__PURE__ */ jsx("span", { className: "text-xs text-slate-900 font-medium", children: "Otimizar tamanho" }),
198
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: optimize ? "Qualidade 85 \u2014 menor tamanho" : "Qualidade m\xE1xima" })
215
199
  ] })
216
200
  ] });
217
201
  }
@@ -289,19 +273,14 @@ function ImageUploader({
289
273
  }, [showImageOptions, image, imageOpts, doUpload, showPreview]);
290
274
  const containerStyle = {
291
275
  ...vars,
292
- display: "flex",
293
- flexDirection: "column",
294
- gap: "12px",
295
- width: "100%",
296
- fontFamily: "var(--silo-font)",
297
276
  ...style
298
277
  };
299
278
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
300
279
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
301
280
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
302
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
303
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
304
- return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
281
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
282
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
283
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
305
284
  /* @__PURE__ */ jsx(
306
285
  DropZone,
307
286
  {
@@ -312,15 +291,15 @@ function ImageUploader({
312
291
  disabled: disabled || isUploading,
313
292
  onFiles: handleFiles,
314
293
  style: { padding: "32px 24px", textAlign: "center" },
315
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
316
- /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", style: { maxWidth: "100%", maxHeight: 200, borderRadius: 8, objectFit: "contain" } }),
317
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar a imagem" })
318
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
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" }) }),
294
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
295
+ /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "max-w-full max-h-[200px] rounded-lg object-contain" }),
296
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar a imagem" })
297
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
298
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", 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" }) }),
320
299
  children ?? /* @__PURE__ */ jsxs(Fragment, { 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: [
300
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste sua imagem aqui" }),
301
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
302
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
324
303
  "Tamanho m\xE1ximo: ",
325
304
  formatBytes(maxSize)
326
305
  ] })
@@ -329,61 +308,103 @@ function ImageUploader({
329
308
  }
330
309
  ),
331
310
  showImageOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
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" }),
311
+ preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: /* @__PURE__ */ jsx("img", { src: preview, alt: "Pr\xE9-visualiza\xE7\xE3o", className: "w-full max-h-[200px] object-contain block bg-slate-50" }) }),
312
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
313
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
335
314
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
336
315
  ] }),
337
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
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" })
316
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
317
+ /* @__PURE__ */ jsx(
318
+ "button",
319
+ {
320
+ className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
321
+ onClick: () => {
322
+ setStagedFile(null);
323
+ setPreview(null);
324
+ },
325
+ children: "Cancelar"
326
+ }
327
+ ),
328
+ /* @__PURE__ */ jsx(
329
+ "button",
330
+ {
331
+ className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer transition-opacity hover:opacity-90",
332
+ onClick: () => {
333
+ const f = stagedFile;
334
+ setStagedFile(null);
335
+ void doUpload(f, imageOpts);
336
+ },
337
+ children: "Enviar imagem"
338
+ }
339
+ )
347
340
  ] })
348
341
  ] }),
349
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
350
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, 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: [
342
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
343
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
344
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel(state.status, progress) }),
345
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
353
346
  progress,
354
347
  "%"
355
348
  ] })
356
349
  ] }),
357
350
  /* @__PURE__ */ jsx(ProgressBar, { progress })
358
351
  ] })),
359
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
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" })
352
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
353
+ /* @__PURE__ */ jsx(
354
+ "button",
355
+ {
356
+ className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90",
357
+ onClick: () => resume({ ...bucket !== void 0 && { bucket }, image: imageOpts }),
358
+ children: "\u25B6 Retomar envio"
359
+ }
360
+ ),
361
+ /* @__PURE__ */ jsx(
362
+ "button",
363
+ {
364
+ className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
365
+ onClick: () => {
366
+ abort();
367
+ setPreview(null);
368
+ },
369
+ children: "Cancelar"
370
+ }
371
+ )
365
372
  ] }),
366
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
367
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
368
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
369
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Imagem enviada com sucesso!" }),
370
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
373
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
374
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
375
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
376
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Imagem enviada com sucesso!" }),
377
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
371
378
  ] }),
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" })
379
+ /* @__PURE__ */ jsx(
380
+ "button",
381
+ {
382
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
383
+ onClick: () => {
384
+ reset();
385
+ setPreview(null);
386
+ },
387
+ children: "Enviar outra"
388
+ }
389
+ )
376
390
  ] }),
377
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
378
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
379
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
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 })
391
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
392
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
393
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
394
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar a imagem" }),
395
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
382
396
  ] }),
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" })
397
+ /* @__PURE__ */ jsx(
398
+ "button",
399
+ {
400
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
401
+ onClick: () => {
402
+ reset();
403
+ setPreview(null);
404
+ },
405
+ children: "Tentar novamente"
406
+ }
407
+ )
387
408
  ] })
388
409
  ] });
389
410
  }
@@ -402,6 +423,27 @@ var RESOLUTION_LABELS = {
402
423
  "1440": "1440p",
403
424
  "2160": "4K"
404
425
  };
426
+ function optionBtnCls(active) {
427
+ return `py-1 px-2.5 rounded-md text-xs font-semibold cursor-pointer transition-colors border ${active ? "border-indigo-500 bg-indigo-500 text-white" : "border-slate-200 bg-transparent text-slate-900 hover:bg-slate-100"}`;
428
+ }
429
+ function Toggle({ checked, onToggle, label }) {
430
+ return /* @__PURE__ */ jsxs("label", { className: "inline-flex items-center gap-1.5 cursor-pointer select-none text-xs text-slate-900 font-medium", onClick: onToggle, children: [
431
+ /* @__PURE__ */ jsx(
432
+ "span",
433
+ {
434
+ className: `relative inline-block w-8 h-[18px] rounded-full shrink-0 cursor-pointer transition-colors duration-150${checked ? "bg-indigo-500" : "bg-slate-200"}`,
435
+ children: /* @__PURE__ */ jsx(
436
+ "span",
437
+ {
438
+ className: "absolute top-0.5 w-3.5 h-3.5 rounded-full bg-white shadow-sm transition-[left] duration-150",
439
+ style: { left: checked ? "16px" : "2px" }
440
+ }
441
+ )
442
+ }
443
+ ),
444
+ label
445
+ ] });
446
+ }
405
447
  function VideoOptions({ value, onChange, style }) {
406
448
  const codec = value.codec ?? "h264";
407
449
  const transcoding = value.transcoding ?? "auto";
@@ -418,76 +460,31 @@ function VideoOptions({ value, onChange, style }) {
418
460
  function toggleFeature(key) {
419
461
  onChange({ ...value, [key]: !value[key] });
420
462
  }
421
- const btn = (active) => ({
422
- padding: "4px 10px",
423
- borderRadius: 6,
424
- border: `1px solid ${active ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)"}`,
425
- background: active ? "var(--silo-accent, #6366f1)" : "transparent",
426
- color: active ? "#fff" : "var(--silo-text, #0f172a)",
427
- fontSize: 12,
428
- fontWeight: 600,
429
- cursor: "pointer"
430
- });
431
- const toggle = (on) => ({
432
- display: "inline-flex",
433
- alignItems: "center",
434
- gap: 6,
435
- cursor: "pointer",
436
- userSelect: "none",
437
- fontSize: 12,
438
- color: "var(--silo-text, #0f172a)",
439
- fontWeight: 500
440
- });
441
- function Toggle({ checked, onToggle, label }) {
442
- return /* @__PURE__ */ jsxs("label", { style: toggle(), onClick: onToggle, children: [
443
- /* @__PURE__ */ jsx("span", { style: {
444
- width: 32,
445
- height: 18,
446
- borderRadius: 9,
447
- flexShrink: 0,
448
- background: checked ? "var(--silo-accent, #6366f1)" : "var(--silo-border, #e2e8f0)",
449
- position: "relative",
450
- transition: "background 0.15s",
451
- cursor: "pointer"
452
- }, children: /* @__PURE__ */ jsx("span", { style: {
453
- position: "absolute",
454
- top: 2,
455
- left: checked ? 16 : 2,
456
- width: 14,
457
- height: 14,
458
- borderRadius: "50%",
459
- background: "#fff",
460
- transition: "left 0.15s",
461
- boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
462
- } }) }),
463
- label
464
- ] });
465
- }
466
- return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, ...style }, children: [
463
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
467
464
  /* @__PURE__ */ jsxs("div", { children: [
468
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Codec" }),
469
- /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: CODECS.map((c) => /* @__PURE__ */ jsx(
465
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Codec" }),
466
+ /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
470
467
  "button",
471
468
  {
472
469
  type: "button",
473
470
  title: c.hint,
474
471
  onClick: () => onChange({ ...value, codec: c.value }),
475
- style: btn(codec === c.value),
472
+ className: optionBtnCls(codec === c.value),
476
473
  children: c.label
477
474
  },
478
475
  c.value
479
476
  )) })
480
477
  ] }),
481
478
  /* @__PURE__ */ jsxs("div", { children: [
482
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 6 }, children: "Resolu\xE7\xF5es" }),
483
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 6, flexWrap: "wrap" }, children: [
484
- /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Auto" }),
479
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-1.5", children: "Resolu\xE7\xF5es" }),
480
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
481
+ /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), className: optionBtnCls(isAuto), children: "Auto" }),
485
482
  RESOLUTIONS.map((r) => /* @__PURE__ */ jsx(
486
483
  "button",
487
484
  {
488
485
  type: "button",
489
486
  onClick: () => toggleRes(r),
490
- style: btn(!isAuto && selectedRes.includes(r)),
487
+ className: optionBtnCls(!isAuto && selectedRes.includes(r)),
491
488
  children: RESOLUTION_LABELS[r]
492
489
  },
493
490
  r
@@ -495,8 +492,8 @@ function VideoOptions({ value, onChange, style }) {
495
492
  ] })
496
493
  ] }),
497
494
  /* @__PURE__ */ jsxs("div", { children: [
498
- /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, color: "var(--silo-text-muted, #64748b)", letterSpacing: "0.05em", textTransform: "uppercase", marginBottom: 8 }, children: "Recursos" }),
499
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
495
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] font-bold text-slate-500 uppercase tracking-[0.05em] mb-2", children: "Recursos" }),
496
+ /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
500
497
  /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
501
498
  /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
502
499
  /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
@@ -573,19 +570,14 @@ function VideoUploader({
573
570
  }, [showVideoOptions, video, videoOpts, doUpload, showPreview]);
574
571
  const containerStyle = {
575
572
  ...vars,
576
- display: "flex",
577
- flexDirection: "column",
578
- gap: "12px",
579
- width: "100%",
580
- fontFamily: "var(--silo-font)",
581
573
  ...style
582
574
  };
583
575
  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
584
576
  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
585
577
  const isPaused = state.status === "idle" && preview !== null && !stagedFile;
586
- if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
587
- if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
588
- return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
578
+ if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(state.error, reset) });
579
+ if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(state.result) });
580
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
589
581
  /* @__PURE__ */ jsx(
590
582
  DropZone,
591
583
  {
@@ -596,15 +588,15 @@ function VideoUploader({
596
588
  disabled: disabled || isUploading,
597
589
  onFiles: handleFiles,
598
590
  style: { padding: "32px 24px", textAlign: "center" },
599
- children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
600
- /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: 180, borderRadius: 8 }, muted: true, playsInline: true }),
601
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: "Clique ou arraste para trocar o v\xEDdeo" })
602
- ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 8 }, children: [
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" }) }),
591
+ children: preview && !isUploading && !stagedFile ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
592
+ /* @__PURE__ */ jsx("video", { src: preview, className: "max-w-full max-h-[180px] rounded-lg", muted: true, playsInline: true }),
593
+ /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "Clique ou arraste para trocar o v\xEDdeo" })
594
+ ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
595
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", 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" }) }),
604
596
  children ?? /* @__PURE__ */ jsxs(Fragment, { 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: [
597
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: "Arraste seu v\xEDdeo aqui" }),
598
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
599
+ /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
608
600
  "MP4, MOV, MKV, WebM",
609
601
  maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
610
602
  ] })
@@ -613,70 +605,119 @@ function VideoUploader({
613
605
  }
614
606
  ),
615
607
  showVideoOptions && stagedFile && !isUploading && state.status !== "done" && /* @__PURE__ */ jsxs(Fragment, { children: [
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" }),
608
+ preview && /* @__PURE__ */ jsx("div", { className: "border border-slate-200 rounded-xl overflow-hidden bg-black", children: /* @__PURE__ */ jsx("video", { src: preview, className: "w-full max-h-[200px] block", muted: true, playsInline: true, controls: true }) }),
609
+ /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
610
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
619
611
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
620
612
  ] }),
621
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
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" })
613
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
614
+ /* @__PURE__ */ jsx(
615
+ "button",
616
+ {
617
+ className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
618
+ onClick: () => {
619
+ setStagedFile(null);
620
+ setPreview(null);
621
+ setVideoOpts(createInitialVideoOpts(video));
622
+ },
623
+ children: "Cancelar"
624
+ }
625
+ ),
626
+ /* @__PURE__ */ jsx(
627
+ "button",
628
+ {
629
+ className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer hover:opacity-90",
630
+ onClick: () => {
631
+ const f = stagedFile;
632
+ setStagedFile(null);
633
+ void doUpload(f, videoOpts);
634
+ setVideoOpts(createInitialVideoOpts(video));
635
+ },
636
+ children: "Enviar v\xEDdeo"
637
+ }
638
+ )
633
639
  ] })
634
640
  ] }),
635
- isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
636
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
637
- /* @__PURE__ */ jsx("span", { className: "silo-text", style: { fontSize: 13, fontWeight: 600 }, children: uploadLabel2(state.status, progress) }),
638
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, alignItems: "center" }, children: [
639
- /* @__PURE__ */ jsxs("span", { className: "silo-text-accent", style: { fontSize: 13, fontWeight: 700 }, children: [
641
+ isUploading && (renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
642
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
643
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel2(state.status, progress) }),
644
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 items-center", children: [
645
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
640
646
  progress,
641
647
  "%"
642
648
  ] }),
643
- /* @__PURE__ */ jsx("button", { className: "silo-btn", style: { fontSize: 11, padding: "2px 8px" }, onClick: pause, children: "Pausar" })
649
+ /* @__PURE__ */ jsx(
650
+ "button",
651
+ {
652
+ className: "inline-flex items-center justify-center text-[11px] font-semibold py-0.5 px-2 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
653
+ onClick: pause,
654
+ children: "Pausar"
655
+ }
656
+ )
644
657
  ] })
645
658
  ] }),
646
659
  /* @__PURE__ */ jsx(ProgressBar, { progress }),
647
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 11 }, children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
660
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400", children: "O processamento do v\xEDdeo come\xE7a automaticamente ap\xF3s o envio" })
648
661
  ] })),
649
- isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
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" })
662
+ isPaused && /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
663
+ /* @__PURE__ */ jsx(
664
+ "button",
665
+ {
666
+ className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90",
667
+ onClick: () => resume({ ...bucket !== void 0 && { bucket }, video: videoOpts }),
668
+ children: "\u25B6 Retomar envio"
669
+ }
670
+ ),
671
+ /* @__PURE__ */ jsx(
672
+ "button",
673
+ {
674
+ className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100",
675
+ onClick: () => {
676
+ abort();
677
+ setPreview(null);
678
+ },
679
+ children: "Cancelar"
680
+ }
681
+ )
655
682
  ] }),
656
- state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { flexDirection: "column", gap: 8, padding: "14px 16px" }, children: [
657
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
658
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
659
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
660
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "V\xEDdeo enviado com sucesso!" }),
661
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(state.result.size) })
683
+ state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
684
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
685
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
686
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
687
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "V\xEDdeo enviado com sucesso!" }),
688
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(state.result.size) })
662
689
  ] }),
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" })
690
+ /* @__PURE__ */ jsx(
691
+ "button",
692
+ {
693
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
694
+ onClick: () => {
695
+ reset();
696
+ setPreview(null);
697
+ },
698
+ children: "Enviar outro"
699
+ }
700
+ )
667
701
  ] }),
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." })
702
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-500 px-3 py-2 rounded-lg bg-green-500/[0.06] border border-green-500/15", children: "\u{1F3AC} Seu v\xEDdeo est\xE1 sendo processado em segundo plano. Isso pode levar alguns minutos dependendo do tamanho." })
669
703
  ] }),
670
- state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
671
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
672
- /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
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 })
704
+ state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
705
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
706
+ /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
707
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o v\xEDdeo" }),
708
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: state.error.message })
675
709
  ] }),
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" })
710
+ /* @__PURE__ */ jsx(
711
+ "button",
712
+ {
713
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
714
+ onClick: () => {
715
+ reset();
716
+ setPreview(null);
717
+ },
718
+ children: "Tentar novamente"
719
+ }
720
+ )
680
721
  ] })
681
722
  ] });
682
723
  }
@@ -729,11 +770,6 @@ function FileUploader({
729
770
  const vars = themeToVars(t);
730
771
  const containerStyle = {
731
772
  ...vars,
732
- display: "flex",
733
- flexDirection: "column",
734
- gap: "12px",
735
- width: "100%",
736
- fontFamily: "var(--silo-font)",
737
773
  ...style
738
774
  };
739
775
  const single = useMultipartUpload(bucket);
@@ -810,9 +846,9 @@ function FileUploader({
810
846
  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
811
847
  const isUploading = isSingleUploading || isBatchUploading;
812
848
  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
813
- if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
814
- if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
815
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
849
+ if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderError(single.state.error, single.reset) });
850
+ if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3 w-full", style: containerStyle, children: renderSuccess(single.state.result) });
851
+ return /* @__PURE__ */ jsxs("div", { className: `flex flex-col gap-3 w-full${className ? ` ${className}` : ""}`, style: containerStyle, children: [
816
852
  !isBatch && !staged && /* @__PURE__ */ jsx(
817
853
  DropZone,
818
854
  {
@@ -824,12 +860,12 @@ function FileUploader({
824
860
  disabled: disabled || isUploading,
825
861
  onFiles: handleFiles,
826
862
  style: { padding: "28px 24px", textAlign: "center" },
827
- children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
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" }) }),
863
+ children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2", children: [
864
+ renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", className: "text-slate-400 opacity-50", 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" }) }),
829
865
  children ?? /* @__PURE__ */ jsxs(Fragment, { 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: [
866
+ /* @__PURE__ */ jsx("span", { className: "text-slate-900 font-bold text-[15px]", children: multiple ? "Arraste seus arquivos aqui" : "Arraste seu arquivo aqui" }),
867
+ /* @__PURE__ */ jsx("span", { className: "text-slate-500 text-[13px]", children: "ou clique para escolher do seu dispositivo" }),
868
+ maxSize && /* @__PURE__ */ jsxs("span", { className: "text-slate-400 text-[12px]", children: [
833
869
  "Tamanho m\xE1ximo: ",
834
870
  formatBytes(maxSize)
835
871
  ] })
@@ -837,11 +873,11 @@ function FileUploader({
837
873
  ] })
838
874
  }
839
875
  ),
840
- staged && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, 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: [
843
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20, flexShrink: 0 }, children: getFileIcon(f.type) }),
844
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
876
+ staged && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
877
+ /* @__PURE__ */ jsx("div", { className: "text-slate-500 text-[13px] font-semibold mb-0.5", children: staged.length === 1 ? "1 arquivo selecionado" : `${staged.length} arquivos selecionados` }),
878
+ staged.map((f, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-slate-50 rounded-xl border border-slate-200", children: [
879
+ /* @__PURE__ */ jsx("span", { className: "text-xl shrink-0", children: getFileIcon(f.type) }),
880
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
845
881
  editingIndex === i ? /* @__PURE__ */ jsx(
846
882
  "input",
847
883
  {
@@ -859,30 +895,28 @@ function FileUploader({
859
895
  }
860
896
  if (e.key === "Escape") setEditingIndex(null);
861
897
  },
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)" }
898
+ className: "w-full text-[13px] font-medium border border-indigo-500 rounded-md py-0.5 px-2 outline-none bg-slate-50 text-slate-900"
863
899
  }
864
900
  ) : /* @__PURE__ */ jsxs(
865
901
  "div",
866
902
  {
867
- className: "silo-text",
868
- style: { fontSize: 13, fontWeight: 600, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", cursor: allowRename ? "text" : "default" },
903
+ className: `text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap${allowRename ? "cursor-text" : "cursor-default"}`,
869
904
  onClick: () => allowRename && setEditingIndex(i),
870
905
  title: allowRename ? "Clique para renomear" : void 0,
871
906
  children: [
872
907
  effectiveName(i, staged),
873
- renames.has(i) && /* @__PURE__ */ jsx("span", { className: "silo-text-accent", style: { marginLeft: 6, fontSize: 10, fontWeight: 700 }, children: "renomeado" })
908
+ renames.has(i) && /* @__PURE__ */ jsx("span", { className: "text-indigo-500 ml-1.5 text-[10px] font-bold", children: "renomeado" })
874
909
  ]
875
910
  }
876
911
  ),
877
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 11, marginTop: 1 }, children: formatBytes(f.size) })
912
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400 mt-0.5", children: formatBytes(f.size) })
878
913
  ] }),
879
914
  allowRename && /* @__PURE__ */ jsx(
880
915
  "button",
881
916
  {
882
917
  onClick: () => setEditingIndex(i),
883
918
  title: "Renomear",
884
- className: "silo-text-muted",
885
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 14, padding: "0 4px", flexShrink: 0 },
919
+ className: "text-slate-400 bg-none border-none cursor-pointer text-sm px-1 shrink-0 hover:text-slate-600",
886
920
  children: "\u270F\uFE0F"
887
921
  }
888
922
  ),
@@ -894,63 +928,75 @@ function FileUploader({
894
928
  if (next.length === 0) clearStaging();
895
929
  else setStaged(next);
896
930
  },
897
- className: "silo-text-muted",
898
- style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, padding: "0 4px", lineHeight: 1, flexShrink: 0 },
931
+ className: "text-slate-400 bg-none border-none cursor-pointer text-lg px-1 leading-none shrink-0 hover:text-slate-600",
899
932
  children: "\xD7"
900
933
  }
901
934
  )
902
935
  ] }, i)),
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" }),
936
+ showImageOptions && staged.some((f) => f.type.startsWith("image/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
937
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F5BC}\uFE0F Configura\xE7\xF5es de imagem" }),
905
938
  /* @__PURE__ */ jsx(ImageOptions, { value: imageOpts, onChange: setImageOpts, style: { padding: "12px 14px" } })
906
939
  ] }),
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" }),
940
+ showVideoOptions && staged.some((f) => f.type.startsWith("video/")) && /* @__PURE__ */ jsxs("div", { className: "border border-slate-200 rounded-xl overflow-hidden", children: [
941
+ /* @__PURE__ */ jsx("div", { className: "px-3.5 py-2 bg-slate-100 text-[12px] font-bold text-slate-500 tracking-[0.04em]", children: "\u{1F3AC} Configura\xE7\xF5es de v\xEDdeo" }),
909
942
  /* @__PURE__ */ jsx(VideoOptions, { value: videoOpts, onChange: setVideoOpts, style: { padding: "12px 14px" } })
910
943
  ] }),
911
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 4 }, children: [
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" })
944
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2 mt-1", children: [
945
+ /* @__PURE__ */ jsx(
946
+ "button",
947
+ {
948
+ className: "inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
949
+ onClick: clearStaging,
950
+ children: "Cancelar"
951
+ }
952
+ ),
953
+ /* @__PURE__ */ jsx(
954
+ "button",
955
+ {
956
+ className: "flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent bg-indigo-500 text-white cursor-pointer transition-opacity hover:opacity-90",
957
+ onClick: handleConfirmUpload,
958
+ children: staged.length > 1 ? `Enviar ${staged.length} arquivos` : "Enviar arquivo"
959
+ }
960
+ )
914
961
  ] })
915
962
  ] }),
916
- isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "silo-card", style: { flexDirection: "column", gap: 8, padding: 16 }, children: [
917
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, 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: [
963
+ isSingleUploading && !isBatch && (renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 px-3 py-4 bg-slate-50 rounded-xl border border-slate-200", children: [
964
+ /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center", children: [
965
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] font-semibold text-slate-900", children: uploadLabel3(single.state.status, singleProgress) }),
966
+ /* @__PURE__ */ jsxs("span", { className: "text-[13px] font-bold text-indigo-500", children: [
920
967
  singleProgress,
921
968
  "%"
922
969
  ] })
923
970
  ] }),
924
971
  /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
925
972
  ] })),
926
- isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
973
+ isBatch && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
927
974
  batch.state.files.map((f, i) => {
928
975
  const st = f.status;
929
976
  const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
930
977
  const isPaused = st.status === "paused";
931
978
  const isDone = st.status === "done";
932
979
  const isErr = st.status === "error";
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: [
935
- /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: getFileIcon(f.file.type) }),
936
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
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) })
980
+ return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-stretch gap-2 px-3.5 py-3 bg-slate-50 rounded-xl border border-slate-200", children: [
981
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
982
+ /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: getFileIcon(f.file.type) }),
983
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
984
+ /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: f.file.name }),
985
+ /* @__PURE__ */ jsx("div", { className: "text-[11px] text-slate-400", children: formatBytes(f.file.size) })
939
986
  ] }),
940
- isDone && /* @__PURE__ */ jsx("span", { style: { fontSize: 18, flexShrink: 0 }, children: "\u2705" }),
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)
987
+ isDone && /* @__PURE__ */ jsx("span", { className: "text-lg shrink-0", children: "\u2705" }),
988
+ isErr && /* @__PURE__ */ jsx("span", { className: "text-[12px] font-semibold text-red-500 shrink-0", children: "Erro no envio" }),
989
+ !isDone && !isErr && /* @__PURE__ */ jsx("span", { className: `text-[12px] font-bold shrink-0${isPaused ? "text-slate-400" : "text-indigo-500"}`, children: isPaused ? "Pausado" : `${p}%` }),
990
+ !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border-transparent bg-emerald-500 text-white cursor-pointer hover:opacity-90", onClick: () => batch.resumeFile(f.fileId), children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { className: "inline-flex items-center justify-center gap-1.5 text-[11px] font-semibold py-0.5 px-2.5 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer hover:bg-slate-100", onClick: () => batch.pauseFile(f.fileId), children: "Pausar" }) : null)
944
991
  ] }),
945
992
  !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
946
993
  ] }, i);
947
994
  }),
948
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
995
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
949
996
  batch.state.status !== "done" && /* @__PURE__ */ jsx(
950
997
  "button",
951
998
  {
952
- className: `silo-btn silo-btn--lg${isBatchUploading ? " silo-btn--warning" : " silo-btn--success"}`,
953
- style: { flex: 1 },
999
+ className: `flex-1 inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90${isBatchUploading ? "bg-amber-500" : "bg-emerald-500"}`,
954
1000
  onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
955
1001
  children: isBatchUploading ? "\u23F8 Pausar tudo" : "\u25B6 Retomar tudo"
956
1002
  }
@@ -958,32 +1004,46 @@ function FileUploader({
958
1004
  /* @__PURE__ */ jsx(
959
1005
  "button",
960
1006
  {
961
- className: `silo-btn silo-btn--lg${batch.state.status === "done" ? " silo-btn--primary" : " silo-btn--danger"}`,
1007
+ className: `inline-flex items-center justify-center gap-1.5 text-sm font-bold py-2.5 px-4 rounded-xl border-transparent text-white cursor-pointer hover:opacity-90${batch.state.status === "done" ? "bg-indigo-500" : "bg-red-500/90"}`,
962
1008
  onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
963
1009
  children: batch.state.status === "done" ? "Enviar mais arquivos" : "Cancelar"
964
1010
  }
965
1011
  )
966
1012
  ] }),
967
- batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 10 }, children: [
968
- /* @__PURE__ */ jsx("span", { style: { fontSize: 20 }, children: "\u{1F389}" }),
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!` })
1013
+ batch.state.status === "done" && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-3 py-2.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
1014
+ /* @__PURE__ */ jsx("span", { className: "text-xl", children: "\u{1F389}" }),
1015
+ /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-green-700", children: batch.state.files.length === 1 ? "Arquivo enviado com sucesso!" : `${batch.state.files.length} arquivos enviados com sucesso!` })
970
1016
  ] })
971
1017
  ] }),
972
- single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--success", style: { gap: 12, padding: "14px 16px" }, children: [
973
- /* @__PURE__ */ jsx("span", { style: { fontSize: 24 }, children: "\u2705" }),
974
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
975
- /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: 14, color: "#16a34a" }, children: "Arquivo enviado com sucesso!" }),
976
- /* @__PURE__ */ jsx("div", { className: "silo-text-muted", style: { fontSize: 12, marginTop: 2 }, children: formatBytes(single.state.result.size) })
1018
+ single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-green-500/[0.08] rounded-xl border border-green-500/20", children: [
1019
+ /* @__PURE__ */ jsx("span", { className: "text-2xl", children: "\u2705" }),
1020
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1021
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-sm text-green-700", children: "Arquivo enviado com sucesso!" }),
1022
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: formatBytes(single.state.result.size) })
977
1023
  ] }),
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" })
1024
+ /* @__PURE__ */ jsx(
1025
+ "button",
1026
+ {
1027
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-green-500/30 text-green-700 bg-transparent cursor-pointer hover:bg-green-500/10 shrink-0",
1028
+ onClick: single.reset,
1029
+ children: "Enviar outro"
1030
+ }
1031
+ )
979
1032
  ] }),
980
- single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "silo-card silo-card--error", style: { gap: 12, padding: "14px 16px" }, children: [
981
- /* @__PURE__ */ jsx("span", { style: { fontSize: 22 }, children: "\u26A0\uFE0F" }),
982
- /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
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 })
1033
+ single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-4 py-3.5 bg-red-500/[0.07] rounded-xl border border-red-500/20", children: [
1034
+ /* @__PURE__ */ jsx("span", { className: "text-[22px]", children: "\u26A0\uFE0F" }),
1035
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
1036
+ /* @__PURE__ */ jsx("div", { className: "font-bold text-[13px] text-red-500", children: "N\xE3o foi poss\xEDvel enviar o arquivo" }),
1037
+ /* @__PURE__ */ jsx("div", { className: "text-[12px] text-slate-400 mt-0.5", children: single.state.error.message })
985
1038
  ] }),
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" })
1039
+ /* @__PURE__ */ jsx(
1040
+ "button",
1041
+ {
1042
+ className: "inline-flex items-center justify-center text-xs font-semibold py-1 px-2.5 rounded-lg border border-red-500/30 text-red-500 bg-transparent cursor-pointer hover:bg-red-500/10 shrink-0",
1043
+ onClick: single.reset,
1044
+ children: "Tentar novamente"
1045
+ }
1046
+ )
987
1047
  ] })
988
1048
  ] });
989
1049
  }
@@ -1011,80 +1071,64 @@ function MediaUploader({
1011
1071
  const vars = themeToVars(t);
1012
1072
  const containerStyle = {
1013
1073
  ...vars,
1014
- display: "flex",
1015
- flexDirection: "column",
1016
- gap: "0",
1017
- width: "100%",
1018
- fontFamily: "var(--silo-font)",
1019
- border: "1px solid var(--silo-border)",
1020
- borderRadius: "var(--silo-radius)",
1021
- overflow: "hidden",
1022
- backgroundColor: "var(--silo-bg)",
1023
1074
  ...style
1024
1075
  };
1025
- return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
1026
- /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1027
- "button",
1028
- {
1029
- onClick: () => setActiveTab(tab),
1030
- style: {
1031
- flex: 1,
1032
- padding: "10px 8px",
1033
- background: "none",
1034
- border: "none",
1035
- borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
1036
- cursor: "pointer",
1037
- fontSize: "13px",
1038
- fontWeight: activeTab === tab ? 600 : 400,
1039
- color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
1040
- transition: "color 0.15s, border-color 0.15s",
1041
- display: "flex",
1042
- alignItems: "center",
1043
- justifyContent: "center",
1044
- gap: "6px"
1045
- },
1046
- children: [
1047
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1048
- /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1049
- ]
1050
- },
1051
- tab
1052
- )) }),
1053
- /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
1054
- activeTab === "image" && /* @__PURE__ */ jsx(
1055
- ImageUploader,
1056
- {
1057
- ...shared,
1058
- ...imageProps,
1059
- ...theme !== void 0 && { theme },
1060
- ...onUpload !== void 0 && { onUpload },
1061
- ...onError !== void 0 && { onError }
1062
- }
1063
- ),
1064
- activeTab === "video" && /* @__PURE__ */ jsx(
1065
- VideoUploader,
1066
- {
1067
- ...shared,
1068
- ...videoProps,
1069
- ...theme !== void 0 && { theme },
1070
- ...onUpload !== void 0 && { onUpload },
1071
- ...onError !== void 0 && { onError }
1072
- }
1073
- ),
1074
- activeTab === "file" && /* @__PURE__ */ jsx(
1075
- FileUploader,
1076
- {
1077
- ...shared,
1078
- ...fileProps,
1079
- multiple: true,
1080
- ...theme !== void 0 && { theme },
1081
- ...onUpload !== void 0 && { onUpload },
1082
- ...onBatchUpload !== void 0 && { onBatchUpload },
1083
- ...onError !== void 0 && { onError }
1084
- }
1085
- )
1086
- ] })
1087
- ] });
1076
+ return /* @__PURE__ */ jsxs(
1077
+ "div",
1078
+ {
1079
+ className: `flex flex-col w-full border border-slate-200 rounded-xl overflow-hidden bg-slate-50${className ? ` ${className}` : ""}`,
1080
+ style: containerStyle,
1081
+ children: [
1082
+ /* @__PURE__ */ jsx("div", { className: "flex border-b border-slate-200", children: tabs.map((tab) => /* @__PURE__ */ jsxs(
1083
+ "button",
1084
+ {
1085
+ onClick: () => setActiveTab(tab),
1086
+ className: `flex-1 flex items-center justify-center gap-1.5 py-2.5 px-2 bg-transparent border-none border-b-2 cursor-pointer text-[13px] transition-colors duration-150${activeTab === tab ? "border-b-indigo-500 font-semibold text-indigo-500" : "border-b-transparent font-normal text-slate-400 hover:text-slate-600"}`,
1087
+ style: { borderBottom: `2px solid ${activeTab === tab ? "#6366f1" : "transparent"}` },
1088
+ children: [
1089
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
1090
+ /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
1091
+ ]
1092
+ },
1093
+ tab
1094
+ )) }),
1095
+ /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
1096
+ activeTab === "image" && /* @__PURE__ */ jsx(
1097
+ ImageUploader,
1098
+ {
1099
+ ...shared,
1100
+ ...imageProps,
1101
+ ...theme !== void 0 && { theme },
1102
+ ...onUpload !== void 0 && { onUpload },
1103
+ ...onError !== void 0 && { onError }
1104
+ }
1105
+ ),
1106
+ activeTab === "video" && /* @__PURE__ */ jsx(
1107
+ VideoUploader,
1108
+ {
1109
+ ...shared,
1110
+ ...videoProps,
1111
+ ...theme !== void 0 && { theme },
1112
+ ...onUpload !== void 0 && { onUpload },
1113
+ ...onError !== void 0 && { onError }
1114
+ }
1115
+ ),
1116
+ activeTab === "file" && /* @__PURE__ */ jsx(
1117
+ FileUploader,
1118
+ {
1119
+ ...shared,
1120
+ ...fileProps,
1121
+ multiple: true,
1122
+ ...theme !== void 0 && { theme },
1123
+ ...onUpload !== void 0 && { onUpload },
1124
+ ...onBatchUpload !== void 0 && { onBatchUpload },
1125
+ ...onError !== void 0 && { onError }
1126
+ }
1127
+ )
1128
+ ] })
1129
+ ]
1130
+ }
1131
+ );
1088
1132
  }
1089
1133
  var AUTO_QUALITY = {
1090
1134
  id: "auto",
@@ -1794,7 +1838,7 @@ function Video({
1794
1838
  "div",
1795
1839
  {
1796
1840
  ref: containerRef,
1797
- className: `@container mx-auto w-full max-w-6xl ${className ?? ""}`,
1841
+ className: `@container mx-auto w-full max-w-6xl${className ?? ""}`,
1798
1842
  children: /* @__PURE__ */ jsxs(
1799
1843
  "div",
1800
1844
  {
@@ -1864,7 +1908,7 @@ function Video({
1864
1908
  {
1865
1909
  ref: chromeRef,
1866
1910
  onClick: togglePlay,
1867
- className: `absolute inset-0 z-30 flex flex-col transition-opacity duration-200 ${isFullscreen ? "justify-between" : "justify-end"} ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1911
+ className: `absolute inset-0 z-30 flex flex-col transition-opacity duration-200${isFullscreen ? "justify-between" : "justify-end"}${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1868
1912
  children: [
1869
1913
  isFullscreen && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
1870
1914
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
@@ -1920,7 +1964,7 @@ function Video({
1920
1964
  },
1921
1965
  className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1922
1966
  children: [
1923
- /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1967
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1924
1968
  /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
1925
1969
  quality.label,
1926
1970
  quality.id === "auto" ? " (ABR)" : ""
@@ -1954,7 +1998,7 @@ function Video({
1954
1998
  },
1955
1999
  className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1956
2000
  children: [
1957
- /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2001
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1958
2002
  /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
1959
2003
  ]
1960
2004
  },
@@ -1994,7 +2038,7 @@ function Video({
1994
2038
  {
1995
2039
  type: "button",
1996
2040
  onClick: () => setSubtitleStyle((st) => ({ ...st, size: s })),
1997
- className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.size === s ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
2041
+ className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition${subtitleStyle.size === s ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
1998
2042
  children: s === "small" ? "P" : s === "medium" ? "M" : s === "large" ? "G" : "GG"
1999
2043
  },
2000
2044
  s
@@ -2007,7 +2051,7 @@ function Video({
2007
2051
  {
2008
2052
  type: "button",
2009
2053
  onClick: () => setSubtitleStyle((st) => ({ ...st, color: val })),
2010
- className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ring-1 ${subtitleStyle.color === val ? "ring-white/40" : "ring-transparent hover:ring-white/15"}`,
2054
+ className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ring-1${subtitleStyle.color === val ? "ring-white/40" : "ring-transparent hover:ring-white/15"}`,
2011
2055
  style: { color },
2012
2056
  children: label
2013
2057
  },
@@ -2021,7 +2065,7 @@ function Video({
2021
2065
  {
2022
2066
  type: "button",
2023
2067
  onClick: () => setSubtitleStyle((st) => ({ ...st, bg: val })),
2024
- className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition ${subtitleStyle.bg === val ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
2068
+ className: `flex-1 rounded-lg py-1.5 text-xs font-medium transition${subtitleStyle.bg === val ? "bg-white/20 text-white" : "text-white/45 hover:bg-white/10"}`,
2025
2069
  children: label
2026
2070
  },
2027
2071
  val
@@ -2052,7 +2096,7 @@ function Video({
2052
2096
  },
2053
2097
  className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2054
2098
  children: [
2055
- /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2099
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2056
2100
  /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2057
2101
  ]
2058
2102
  },
@@ -2083,7 +2127,7 @@ function Video({
2083
2127
  },
2084
2128
  className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2085
2129
  children: [
2086
- /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2130
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2087
2131
  /* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
2088
2132
  ]
2089
2133
  },
@@ -2182,7 +2226,7 @@ function Video({
2182
2226
  {
2183
2227
  type: "button",
2184
2228
  onClick: () => setSubtitleMode((m) => m === "off" ? parsed.subtitles[0]?.srclang ?? "off" : "off"),
2185
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2229
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${subtitleMode !== "off" ? "text-white" : "text-white/60"}`,
2186
2230
  "aria-label": "Captions",
2187
2231
  children: /* @__PURE__ */ jsx(Captions, { className: "size-4 @sm:size-5" })
2188
2232
  }
@@ -2195,7 +2239,7 @@ function Video({
2195
2239
  setSettingsOpen((v) => !v);
2196
2240
  setSettingsTab("root");
2197
2241
  },
2198
- className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10 ${settingsOpen ? "text-white" : "text-white/60"}`,
2242
+ className: `grid size-8 place-items-center rounded transition hover:text-white/80 @sm:size-10${settingsOpen ? "text-white" : "text-white/60"}`,
2199
2243
  "aria-label": "Settings",
2200
2244
  children: /* @__PURE__ */ jsx(Settings, { className: "size-4 @sm:size-5" })
2201
2245
  }
@@ -2251,7 +2295,7 @@ function Video({
2251
2295
  activeCue && /* @__PURE__ */ jsx(
2252
2296
  "div",
2253
2297
  {
2254
- className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200 ${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
2298
+ className: `pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4 transition-all duration-200${controlsVisible ? "bottom-20 @sm:bottom-24 @lg:bottom-28" : "bottom-4 @sm:bottom-6"}`,
2255
2299
  children: /* @__PURE__ */ jsx(
2256
2300
  "div",
2257
2301
  {
@@ -2402,7 +2446,7 @@ function formatTime(seconds) {
2402
2446
  }
2403
2447
  return `${minutes}:${String(secs).padStart(2, "0")}`;
2404
2448
  }
2405
- var RADIUS = { full: "50%", md: "12px", sm: "6px" };
2449
+ var RADIUS = { full: "9999px", md: "12px", sm: "6px" };
2406
2450
  function Avatar({
2407
2451
  fileKey,
2408
2452
  bucket,
@@ -2415,35 +2459,41 @@ function Avatar({
2415
2459
  }) {
2416
2460
  const { url } = useSignedUrl(fileKey ?? null);
2417
2461
  const [error, setError] = useState(false);
2418
- const radius = RADIUS[shape];
2419
2462
  const base = {
2420
2463
  width: size,
2421
2464
  height: size,
2422
- borderRadius: radius,
2423
- overflow: "hidden",
2424
- display: "inline-flex",
2425
- alignItems: "center",
2426
- justifyContent: "center",
2427
- flexShrink: 0,
2465
+ borderRadius: RADIUS[shape],
2428
2466
  fontSize: size * 0.38,
2429
- fontWeight: 600,
2430
- userSelect: "none",
2431
- background: "var(--silo-bg, #e2e8f0)",
2432
- color: "var(--silo-text-muted, #64748b)",
2467
+ flexShrink: 0,
2433
2468
  ...style
2434
2469
  };
2435
2470
  if (url && !error) {
2436
- return /* @__PURE__ */ jsx("span", { className, style: base, children: /* @__PURE__ */ jsx(
2437
- "img",
2471
+ return /* @__PURE__ */ jsx(
2472
+ "span",
2438
2473
  {
2439
- src: url,
2440
- alt,
2441
- style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
2442
- onError: () => setError(true)
2474
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold${className}`,
2475
+ style: base,
2476
+ children: /* @__PURE__ */ jsx(
2477
+ "img",
2478
+ {
2479
+ src: url,
2480
+ alt,
2481
+ className: "w-full h-full object-cover block",
2482
+ onError: () => setError(true)
2483
+ }
2484
+ )
2443
2485
  }
2444
- ) });
2486
+ );
2445
2487
  }
2446
- return /* @__PURE__ */ jsx("span", { className, style: base, "aria-label": alt, children: initials ? initials.slice(0, 2).toUpperCase() : "?" });
2488
+ return /* @__PURE__ */ jsx(
2489
+ "span",
2490
+ {
2491
+ className: `overflow-hidden inline-flex items-center justify-center bg-slate-200 text-slate-500 select-none font-semibold${className}`,
2492
+ style: base,
2493
+ "aria-label": alt,
2494
+ children: initials ? initials.slice(0, 2).toUpperCase() : "?"
2495
+ }
2496
+ );
2447
2497
  }
2448
2498
  function Thumbnail({
2449
2499
  fileKey,
@@ -2453,7 +2503,7 @@ function Thumbnail({
2453
2503
  width = "100%",
2454
2504
  height = 160,
2455
2505
  fit = "cover",
2456
- borderRadius = "var(--silo-radius, 12px)",
2506
+ borderRadius = "12px",
2457
2507
  placeholder,
2458
2508
  className = "",
2459
2509
  style,
@@ -2472,16 +2522,16 @@ function Thumbnail({
2472
2522
  display: "flex",
2473
2523
  alignItems: "center",
2474
2524
  justifyContent: "center",
2475
- background: "var(--silo-bg, #f1f5f9)",
2525
+ background: "#f1f5f9",
2476
2526
  position: "relative",
2477
2527
  flexShrink: 0,
2478
2528
  ...style
2479
2529
  };
2480
2530
  if (loading) {
2481
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted, #94a3b8)", fontSize: 12 }, children: "..." }) });
2531
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { className: "text-[12px] text-slate-400", children: "..." }) });
2482
2532
  }
2483
2533
  if (error || !url) {
2484
- return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 28 }, children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2534
+ return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { className: "text-[28px]", children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
2485
2535
  }
2486
2536
  if (isVideo) {
2487
2537
  return /* @__PURE__ */ jsxs("span", { className, style: wrapper, children: [
@@ -2495,20 +2545,7 @@ function Thumbnail({
2495
2545
  onError: () => setError(true)
2496
2546
  }
2497
2547
  ),
2498
- /* @__PURE__ */ jsx(
2499
- "span",
2500
- {
2501
- style: {
2502
- position: "absolute",
2503
- inset: 0,
2504
- display: "flex",
2505
- alignItems: "center",
2506
- justifyContent: "center",
2507
- pointerEvents: "none"
2508
- },
2509
- children: /* @__PURE__ */ jsx("span", { style: { fontSize: 24, opacity: 0.85 }, children: "\u25B6" })
2510
- }
2511
- )
2548
+ /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx("span", { className: "text-[24px] opacity-85", children: "\u25B6" }) })
2512
2549
  ] });
2513
2550
  }
2514
2551
  return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx(
@@ -2545,15 +2582,11 @@ function Background({
2545
2582
  "div",
2546
2583
  {
2547
2584
  "aria-hidden": true,
2548
- style: {
2549
- position: "absolute",
2550
- inset: 0,
2551
- background: overlay,
2552
- pointerEvents: "none"
2553
- }
2585
+ className: "absolute inset-0 pointer-events-none",
2586
+ style: { background: overlay }
2554
2587
  }
2555
2588
  ),
2556
- children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
2589
+ children && /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
2557
2590
  ] });
2558
2591
  }
2559
2592
  function FileIcon({
@@ -2571,47 +2604,28 @@ function FileIcon({
2571
2604
  return /* @__PURE__ */ jsxs(
2572
2605
  "span",
2573
2606
  {
2574
- className,
2575
- style: {
2576
- display: "inline-flex",
2577
- flexDirection: "column",
2578
- alignItems: "center",
2579
- gap: 4,
2580
- fontFamily: "var(--silo-font, inherit)",
2581
- ...style
2582
- },
2607
+ className: `inline-flex flex-col items-center gap-1${className}`,
2608
+ style,
2583
2609
  children: [
2584
2610
  /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: icon }),
2585
2611
  ext && /* @__PURE__ */ jsx(
2586
2612
  "span",
2587
2613
  {
2588
- style: {
2589
- fontSize: iconSize * 0.22,
2590
- fontWeight: 700,
2591
- color: "var(--silo-text-muted, #64748b)",
2592
- letterSpacing: "0.04em",
2593
- textTransform: "uppercase"
2594
- },
2614
+ className: "font-bold text-slate-500 uppercase tracking-wide",
2615
+ style: { fontSize: iconSize * 0.22 },
2595
2616
  children: ext
2596
2617
  }
2597
2618
  ),
2598
2619
  showName && name && /* @__PURE__ */ jsx(
2599
2620
  "span",
2600
2621
  {
2601
- style: {
2602
- fontSize: 12,
2603
- color: "var(--silo-text, #0f172a)",
2604
- maxWidth: iconSize * 3,
2605
- overflow: "hidden",
2606
- textOverflow: "ellipsis",
2607
- whiteSpace: "nowrap",
2608
- textAlign: "center"
2609
- },
2622
+ className: "text-xs text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap text-center",
2623
+ style: { maxWidth: iconSize * 3 },
2610
2624
  title: name,
2611
2625
  children: name
2612
2626
  }
2613
2627
  ),
2614
- showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #64748b)" }, children: formatBytes(size) })
2628
+ showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-500", children: formatBytes(size) })
2615
2629
  ]
2616
2630
  }
2617
2631
  );
@@ -2628,12 +2642,12 @@ var STATUS_LABEL = {
2628
2642
  CANCELLED: "Cancelled"
2629
2643
  };
2630
2644
  var STATUS_COLOR = {
2631
- READY: "var(--silo-success, #22c55e)",
2632
- FAILED: "var(--silo-error, #ef4444)",
2633
- CANCELLED: "var(--silo-error, #ef4444)"
2645
+ READY: "#22c55e",
2646
+ FAILED: "#ef4444",
2647
+ CANCELLED: "#ef4444"
2634
2648
  };
2635
2649
  function statusColor(status) {
2636
- return STATUS_COLOR[status] ?? "var(--silo-accent, #6366f1)";
2650
+ return STATUS_COLOR[status] ?? "#6366f1";
2637
2651
  }
2638
2652
  function isProcessing(status) {
2639
2653
  return ["UPLOADING", "INGESTING", "QUEUED", "PROCESSING", "SYNCING"].includes(status);
@@ -2650,7 +2664,14 @@ function FileCard({
2650
2664
  }) {
2651
2665
  const { file, loading } = useFileStatus(fileId, { pollInterval });
2652
2666
  if (loading && !file) {
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..." }) });
2667
+ return /* @__PURE__ */ jsx(
2668
+ "div",
2669
+ {
2670
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px] p-4${className}`,
2671
+ style,
2672
+ children: /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." })
2673
+ }
2674
+ );
2654
2675
  }
2655
2676
  if (!file) return null;
2656
2677
  const status = file.status;
@@ -2659,61 +2680,89 @@ function FileCard({
2659
2680
  const showThumb = isImg || isVid;
2660
2681
  const progress = file.progress ?? null;
2661
2682
  const ext = file.originalName.split(".").pop()?.toUpperCase();
2662
- return /* @__PURE__ */ jsxs("div", { className: `silo-file-card${className ? ` ${className}` : ""}`, style, children: [
2663
- /* @__PURE__ */ jsxs("div", { className: "silo-file-card__thumb-area", children: [
2664
- showThumb ? /* @__PURE__ */ jsx(
2665
- Thumbnail,
2666
- {
2667
- fileKey: file.key,
2668
- mimeType: file.mimeType,
2669
- width: "100%",
2670
- height: 130,
2671
- borderRadius: "0",
2672
- style: { display: "block" }
2673
- }
2674
- ) : /* @__PURE__ */ jsx("div", { style: { height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2675
- /* @__PURE__ */ jsx(
2676
- "span",
2677
- {
2678
- className: "silo-file-card__badge silo-file-card__badge--status",
2679
- style: { color: statusColor(status) },
2680
- children: STATUS_LABEL[status] ?? status
2681
- }
2682
- ),
2683
- ext && /* @__PURE__ */ jsx("span", { className: "silo-file-card__badge silo-file-card__badge--ext", children: ext })
2684
- ] }),
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: [
2688
- formatBytes(file.size),
2689
- file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2690
- file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2691
- ] }),
2692
- isProcessing(status) && /* @__PURE__ */ jsxs("div", { style: { marginTop: 4 }, children: [
2693
- /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2694
- /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 10, marginTop: 2, display: "block" }, children: [
2695
- STATUS_LABEL[status],
2696
- progress != null ? ` \xB7 ${progress}%` : ""
2683
+ return /* @__PURE__ */ jsxs(
2684
+ "div",
2685
+ {
2686
+ className: `flex flex-col rounded-xl border border-slate-200 bg-slate-50 overflow-hidden w-[220px]${className}`,
2687
+ style,
2688
+ children: [
2689
+ /* @__PURE__ */ jsxs("div", { className: "relative h-[130px] bg-slate-100 shrink-0", children: [
2690
+ showThumb ? /* @__PURE__ */ jsx(
2691
+ Thumbnail,
2692
+ {
2693
+ fileKey: file.key,
2694
+ mimeType: file.mimeType,
2695
+ width: "100%",
2696
+ height: 130,
2697
+ borderRadius: "0",
2698
+ style: { display: "block" }
2699
+ }
2700
+ ) : /* @__PURE__ */ jsx("div", { className: "h-full flex items-center justify-center", children: /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 44 }) }),
2701
+ /* @__PURE__ */ jsx(
2702
+ "span",
2703
+ {
2704
+ className: "absolute top-2 right-2 text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full backdrop-blur-sm bg-black/55",
2705
+ style: { color: statusColor(status) },
2706
+ children: STATUS_LABEL[status] ?? status
2707
+ }
2708
+ ),
2709
+ ext && /* @__PURE__ */ jsx("span", { className: "absolute top-2 left-2 text-[9px] font-bold tracking-[0.06em] py-0.5 px-1.5 rounded-md backdrop-blur-sm bg-black/45 text-white uppercase", children: ext })
2710
+ ] }),
2711
+ /* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 flex flex-col gap-1", children: [
2712
+ /* @__PURE__ */ jsx(
2713
+ "span",
2714
+ {
2715
+ className: "text-[13px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap",
2716
+ title: file.originalName,
2717
+ children: file.originalName
2718
+ }
2719
+ ),
2720
+ /* @__PURE__ */ jsxs("span", { className: "text-[11px] text-slate-400", children: [
2721
+ formatBytes(file.size),
2722
+ file.metadata?.width && file.metadata?.height ? ` \xB7 ${file.metadata.width}\xD7${file.metadata.height}` : "",
2723
+ file.metadata?.duration ? ` \xB7 ${Math.round(file.metadata.duration)}s` : ""
2724
+ ] }),
2725
+ isProcessing(status) && /* @__PURE__ */ jsxs("div", { className: "mt-1", children: [
2726
+ /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }),
2727
+ /* @__PURE__ */ jsxs("span", { className: "text-[10px] text-slate-400 mt-0.5 block", children: [
2728
+ STATUS_LABEL[status],
2729
+ progress != null ? ` \xB7 ${progress}%` : ""
2730
+ ] })
2731
+ ] }),
2732
+ actions.length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 mt-1.5 flex-wrap", children: [
2733
+ actions.includes("preview") && onPreview && /* @__PURE__ */ jsx(
2734
+ "button",
2735
+ {
2736
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2737
+ onClick: () => onPreview(fileId),
2738
+ children: "Preview"
2739
+ }
2740
+ ),
2741
+ actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2742
+ "button",
2743
+ {
2744
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100",
2745
+ onClick: () => {
2746
+ const url = `${file.key}`;
2747
+ navigator.clipboard.writeText(url).catch(() => void 0);
2748
+ onCopyUrl(url);
2749
+ },
2750
+ children: "Copy URL"
2751
+ }
2752
+ ),
2753
+ actions.includes("delete") && onDelete && /* @__PURE__ */ jsx(
2754
+ "button",
2755
+ {
2756
+ className: "inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1 px-3 rounded-lg border-transparent bg-red-500/10 text-red-500 cursor-pointer transition-colors hover:bg-red-500/20",
2757
+ onClick: () => onDelete(fileId),
2758
+ children: "Delete"
2759
+ }
2760
+ )
2761
+ ] })
2697
2762
  ] })
2698
- ] }),
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" }),
2701
- actions.includes("copy-url") && onCopyUrl && /* @__PURE__ */ jsx(
2702
- "button",
2703
- {
2704
- className: "silo-btn",
2705
- onClick: () => {
2706
- const url = `${file.key}`;
2707
- navigator.clipboard.writeText(url).catch(() => void 0);
2708
- onCopyUrl(url);
2709
- },
2710
- children: "Copy URL"
2711
- }
2712
- ),
2713
- actions.includes("delete") && onDelete && /* @__PURE__ */ jsx("button", { className: "silo-btn silo-btn--danger", onClick: () => onDelete(fileId), children: "Delete" })
2714
- ] })
2715
- ] })
2716
- ] });
2763
+ ]
2764
+ }
2765
+ );
2717
2766
  }
2718
2767
  var STATUS_LABEL2 = {
2719
2768
  CREATED: "Created",
@@ -2750,11 +2799,18 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2750
2799
  const isVid = file?.mimeType.startsWith("video/");
2751
2800
  const progress = file?.progress ?? null;
2752
2801
  return /* @__PURE__ */ jsxs(Fragment, { children: [
2753
- /* @__PURE__ */ jsx("div", { className: "silo-file-preview-backdrop", onClick: onClose, "aria-hidden": true }),
2802
+ /* @__PURE__ */ jsx(
2803
+ "div",
2804
+ {
2805
+ className: "fixed inset-0 z-[1000] bg-black/60 backdrop-blur-md",
2806
+ onClick: onClose,
2807
+ "aria-hidden": true
2808
+ }
2809
+ ),
2754
2810
  /* @__PURE__ */ jsxs(
2755
2811
  "div",
2756
2812
  {
2757
- className: "silo-file-preview",
2813
+ className: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[1001] w-[min(92vw,560px)] max-h-[90vh] flex flex-col rounded-2xl bg-white shadow-[0_24px_80px_rgba(0,0,0,0.35)] overflow-hidden",
2758
2814
  role: "dialog",
2759
2815
  "aria-modal": true,
2760
2816
  "aria-label": file?.originalName ?? "File preview",
@@ -2762,18 +2818,26 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2762
2818
  if (e.key === "Escape") onClose();
2763
2819
  },
2764
2820
  children: [
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" })
2821
+ /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 px-5 py-4 border-b border-slate-200", children: [
2822
+ /* @__PURE__ */ jsx("span", { className: "flex-1 text-[14px] font-semibold text-slate-900 overflow-hidden text-ellipsis whitespace-nowrap", children: file?.originalName ?? "Loading..." }),
2823
+ /* @__PURE__ */ jsx(
2824
+ "button",
2825
+ {
2826
+ className: "bg-none border-none cursor-pointer text-base text-slate-400 leading-none p-0.5 px-1 shrink-0 hover:text-slate-600 transition-colors",
2827
+ onClick: onClose,
2828
+ "aria-label": "Close",
2829
+ children: "\u2715"
2830
+ }
2831
+ )
2768
2832
  ] }),
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..." }),
2833
+ /* @__PURE__ */ jsxs("div", { className: "flex-1 flex items-center justify-center bg-[#0f0f0f] min-h-[240px] relative", children: [
2834
+ loading && !file && /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "Loading..." }),
2771
2835
  file && isImg && url && /* @__PURE__ */ jsx(
2772
2836
  "img",
2773
2837
  {
2774
2838
  src: url,
2775
2839
  alt: file.originalName,
2776
- style: { maxWidth: "100%", maxHeight: 420, objectFit: "contain", display: "block" }
2840
+ className: "max-w-full max-h-[420px] object-contain block"
2777
2841
  }
2778
2842
  ),
2779
2843
  file && isVid && url && /* @__PURE__ */ jsx(
@@ -2781,33 +2845,24 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2781
2845
  {
2782
2846
  src: url,
2783
2847
  controls: true,
2784
- style: { maxWidth: "100%", maxHeight: 420, display: "block" }
2848
+ className: "max-w-full max-h-[420px] block"
2785
2849
  }
2786
2850
  ),
2787
- file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 12, padding: 40 }, children: [
2851
+ file && !isImg && !isVid && /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3 p-10", children: [
2788
2852
  /* @__PURE__ */ jsx(FileIcon, { mimeType: file.mimeType, name: file.originalName, iconSize: 64 }),
2789
- /* @__PURE__ */ jsx("span", { className: "silo-text-muted", style: { fontSize: 13 }, children: "No preview available" })
2853
+ /* @__PURE__ */ jsx("span", { className: "text-[13px] text-slate-400", children: "No preview available" })
2790
2854
  ] }),
2791
- file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { style: {
2792
- position: "absolute",
2793
- inset: 0,
2794
- display: "flex",
2795
- flexDirection: "column",
2796
- alignItems: "center",
2797
- justifyContent: "center",
2798
- gap: 12,
2799
- background: "rgba(0,0,0,0.65)"
2800
- }, children: [
2801
- /* @__PURE__ */ jsx("span", { style: { color: "#fff", fontSize: 14, fontWeight: 600 }, children: STATUS_LABEL2[status] }),
2802
- /* @__PURE__ */ jsx("div", { style: { width: 200 }, children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2803
- progress != null && /* @__PURE__ */ jsxs("span", { className: "silo-text-muted", style: { fontSize: 12 }, children: [
2855
+ file && isProcessing2(status) && /* @__PURE__ */ jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center gap-3 bg-black/65", children: [
2856
+ /* @__PURE__ */ jsx("span", { className: "text-white text-[14px] font-semibold", children: STATUS_LABEL2[status] }),
2857
+ /* @__PURE__ */ jsx("div", { className: "w-[200px]", children: /* @__PURE__ */ jsx(ProgressBar, { progress: progress ?? 0 }) }),
2858
+ progress != null && /* @__PURE__ */ jsxs("span", { className: "text-[12px] text-slate-400", children: [
2804
2859
  progress,
2805
2860
  "%"
2806
2861
  ] })
2807
2862
  ] })
2808
2863
  ] }),
2809
- file && /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta", children: [
2810
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__meta-grid", children: [
2864
+ file && /* @__PURE__ */ jsxs("div", { className: "px-5 py-3.5 border-t border-slate-200 flex flex-col gap-2", children: [
2865
+ /* @__PURE__ */ jsxs("div", { className: "grid gap-x-4 gap-y-1.5 items-baseline", style: { gridTemplateColumns: "auto 1fr" }, children: [
2811
2866
  /* @__PURE__ */ jsx(MetaRow, { label: "Size", value: formatBytes(file.size) }),
2812
2867
  /* @__PURE__ */ jsx(MetaRow, { label: "Type", value: file.mimeType }),
2813
2868
  /* @__PURE__ */ jsx(MetaRow, { label: "Bucket", value: file.bucketName ?? file.bucket }),
@@ -2817,7 +2872,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2817
2872
  file.metadata?.videoCodec && /* @__PURE__ */ jsx(MetaRow, { label: "Codec", value: file.metadata.videoCodec }),
2818
2873
  /* @__PURE__ */ jsx(MetaRow, { label: "Uploaded", value: formatDate(file.createdAt) })
2819
2874
  ] }),
2820
- /* @__PURE__ */ jsxs("div", { className: "silo-file-preview__badges", children: [
2875
+ /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap mt-1", children: [
2821
2876
  file.metadata?.hasHls && /* @__PURE__ */ jsx(Badge, { children: "HLS" }),
2822
2877
  file.metadata?.hasAv1 && /* @__PURE__ */ jsx(Badge, { children: "AV1" }),
2823
2878
  file.isPrivate ? /* @__PURE__ */ jsx(Badge, { muted: true, children: "Private" }) : /* @__PURE__ */ jsx(Badge, { children: "Public" })
@@ -2825,8 +2880,7 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2825
2880
  url && /* @__PURE__ */ jsx(
2826
2881
  "button",
2827
2882
  {
2828
- className: "silo-btn silo-btn--full",
2829
- style: { marginTop: 4 },
2883
+ className: "w-full inline-flex items-center justify-center gap-1.5 text-xs font-semibold py-1.5 px-3 rounded-lg border border-slate-200 bg-transparent text-slate-900 cursor-pointer transition-colors hover:bg-slate-100 mt-1",
2830
2884
  onClick: () => navigator.clipboard.writeText(url).catch(() => void 0),
2831
2885
  children: "Copy URL"
2832
2886
  }
@@ -2839,12 +2893,18 @@ function FilePreview({ fileId, onClose, pollInterval = 3e3 }) {
2839
2893
  }
2840
2894
  function MetaRow({ label, value, highlight }) {
2841
2895
  return /* @__PURE__ */ jsxs(Fragment, { children: [
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 })
2896
+ /* @__PURE__ */ jsx("span", { className: "text-[11px] text-slate-400 font-medium", children: label }),
2897
+ /* @__PURE__ */ jsx("span", { className: `text-[12px]${highlight ? "text-green-500 font-semibold" : "text-slate-900"}`, children: value })
2844
2898
  ] });
2845
2899
  }
2846
2900
  function Badge({ children, muted }) {
2847
- return /* @__PURE__ */ jsx("span", { className: `silo-file-preview__badge${muted ? " silo-file-preview__badge--muted" : ""}`, children });
2901
+ return /* @__PURE__ */ jsx(
2902
+ "span",
2903
+ {
2904
+ className: `inline-flex text-[10px] font-bold tracking-[0.05em] py-0.5 px-2 rounded-full border border-slate-200${muted ? "text-slate-400" : "text-indigo-500"}`,
2905
+ children
2906
+ }
2907
+ );
2848
2908
  }
2849
2909
 
2850
2910
  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 };