@geekapps/silo-elements-nextjs 0.3.3 → 0.3.5

package/dist/index.js

@@ -400,50 +400,50 @@ var VIDEO_CODECS = [
   {
     value: "h264",
     label: "H.264",
-    description: "Compatibilidade universal \u2014 funciona em todos os players, browsers e Smart TVs."
+    sublabel: "Compat\xEDvel com tudo",
+    description: "Funciona em qualquer dispositivo \u2014 celulares, Smart TVs, navegadores antigos e novos. A escolha mais segura se voc\xEA n\xE3o sabe onde o v\xEDdeo ser\xE1 assistido."
   },
   {
     value: "h265",
     label: "H.265",
-    description: "50% menor que H.264 com a mesma qualidade. Requer player moderno."
+    sublabel: "Menor tamanho",
+    description: "Arquivo at\xE9 50% menor que H.264 com a mesma qualidade de imagem. Requer dispositivo moderno (2016+). Ideal para v\xEDdeos longos ou em alta resolu\xE7\xE3o."
   },
   {
     value: "av1",
     label: "AV1",
-    description: "M\xE1xima efici\xEAncia \u2014 at\xE9 50% menor que H.265. Chrome 70+, Firefox 67+, Safari 17+.",
-    warning: "N\xE3o suportado em iPhones antigos (iOS < 16) e Smart TVs antigas."
+    sublabel: "M\xE1x. efici\xEAncia",
+    description: "O codec mais eficiente dispon\xEDvel \u2014 arquivo at\xE9 50% menor que H.265. Exige navegador recente (Chrome 70+, Firefox 67+, Safari 17+).",
+    warning: "N\xE3o funciona em iPhones com iOS abaixo de 16 nem em Smart TVs mais antigas. Use H.264 se precisar de compatibilidade ampla."
   }
 ];
 var AUDIO_SIMPLE = [
   {
     value: "passthrough",
-    label: "Preservar original",
+    label: "Manter original",
     badge: "Recomendado",
-    description: "Copia o \xE1udio sem reencodar quando compat\xEDvel com HLS (AAC, AC3, E-AC3). Converte para AAC est\xE9reo como fallback."
+    description: "Mant\xE9m o \xE1udio exatamente como est\xE1 no arquivo original, sem perdas. Se o formato n\xE3o for compat\xEDvel com streaming, converte automaticamente para AAC est\xE9reo."
   },
   {
     value: "aac",
     label: "AAC",
-    description: "Compatibilidade m\xE1xima. Funciona em todos os players e dispositivos."
+    description: "Formato mais compat\xEDvel do mercado \u2014 funciona em absolutamente todos os players, celulares e Smart TVs."
   },
   {
     value: "opus",
     label: "Opus",
-    description: "Melhor efici\xEAncia que AAC. Suportado em Chrome, Firefox e Android. N\xE3o suportado em Safari/iOS."
+    description: "Melhor qualidade que AAC no mesmo tamanho. Funciona em Chrome, Firefox e Android. N\xE3o suportado no Safari/iPhone."
   }
 ];
 var AUDIO_ADVANCED_CODEC = [
-  { value: "passthrough", label: "Original", description: "Passthrough quando HLS-compat\xEDvel, AAC como fallback." },
-  { value: "aac", label: "AAC", description: "Compatibilidade m\xE1xima." },
-  { value: "opus", label: "Opus", description: "Melhor efici\xEAncia que AAC. Chrome/Firefox/Android." },
-  { value: "ac3", label: "AC3", description: "Dolby Digital. Compat\xEDvel com HLS e home theaters." },
-  { value: "eac3", label: "E-AC3", description: "Dolby Digital Plus. Suporta Atmos. Netflix, Disney+, Apple TV+." }
+  { value: "passthrough", label: "Original", description: "Copia sem reprocessar quando compat\xEDvel (mant\xE9m AC3, E-AC3, Dolby Atmos). AAC est\xE9reo como fallback." },
+  { value: "aac", label: "AAC", description: "Compatibilidade m\xE1xima com todos os dispositivos." },
+  { value: "opus", label: "Opus", description: "Qualidade superior ao AAC. Chrome/Firefox/Android." }
 ];
 var AUDIO_CHANNELS = [
   { value: "original", label: "Original", description: "Mant\xE9m os canais do arquivo fonte." },
-  { value: "stereo", label: "Est\xE9reo", description: "2.0 \u2014 compat\xEDvel com todos os dispositivos." },
-  { value: "5.1", label: "5.1", description: "Surround 5.1." },
-  { value: "7.1", label: "7.1", description: "Surround 7.1." }
+  { value: "stereo", label: "Est\xE9reo (2.0)", description: "Dois canais \u2014 compat\xEDvel com fones e qualquer dispositivo." },
+  { value: "5.1", label: "Surround 5.1", description: "Seis canais. Ideal para home theaters." }
 ];
 var RESOLUTIONS = ["144", "240", "360", "480", "720", "1080", "1440", "2160"];
 var RESOLUTION_LABELS = {
@@ -451,35 +451,61 @@ var RESOLUTION_LABELS = {
   "240": "240p",
   "360": "360p",
   "480": "480p",
-  "720": "720p",
-  "1080": "1080p",
-  "1440": "1440p",
-  "2160": "4K"
+  "720": "720p HD",
+  "1080": "1080p Full HD",
+  "1440": "1440p 2K",
+  "2160": "4K UHD"
 };
-function optBtnStyle(active) {
-  return active ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid rgba(255,255,255,0.2)", background: "rgba(255,255,255,0.06)", color: "rgba(255,255,255,0.8)", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" };
+function btn(active, disabled = false) {
+  if (disabled) return {
+    border: "1px solid rgba(255,255,255,0.08)",
+    background: "rgba(255,255,255,0.03)",
+    color: "rgba(255,255,255,0.2)",
+    padding: "4px 10px",
+    borderRadius: 6,
+    fontSize: 12,
+    fontWeight: 600,
+    cursor: "not-allowed"
+  };
+  return active ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" } : { border: "1px solid rgba(255,255,255,0.15)", background: "rgba(255,255,255,0.05)", color: "rgba(255,255,255,0.7)", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer" };
 }
-function SectionLabel({ children }) {
-  return /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.35)" }, children });
+function Label({ children }) {
+  return /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 7, color: "rgba(255,255,255,0.28)" }, children });
 }
 function Hint({ children }) {
-  return /* @__PURE__ */ jsx("p", { style: { marginTop: 5, fontSize: 11, color: "rgba(255,255,255,0.4)", lineHeight: 1.5 }, children });
+  return /* @__PURE__ */ jsx("p", { style: { marginTop: 5, fontSize: 11, color: "rgba(255,255,255,0.38)", lineHeight: 1.55 }, children });
 }
-function Warning({ children }) {
-  return /* @__PURE__ */ jsx("div", { style: { marginTop: 5, display: "flex", gap: 5, background: "rgba(251,191,36,0.08)", border: "1px solid rgba(251,191,36,0.2)", borderRadius: 6, padding: "5px 8px" }, children: /* @__PURE__ */ jsxs("span", { style: { fontSize: 11, color: "#fbbf24", lineHeight: 1.5 }, children: [
-    "\u26A0 ",
-    children
-  ] }) });
+function Warn({ children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 6, display: "flex", gap: 6, background: "rgba(251,191,36,0.07)", border: "1px solid rgba(251,191,36,0.18)", borderRadius: 7, padding: "6px 10px" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, flexShrink: 0 }, children: "\u26A0" }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "#fbbf24", lineHeight: 1.55 }, children })
+  ] });
 }
-function Toggle({ checked, onToggle, label, hint }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "flex-start", gap: 8, cursor: "pointer", userSelect: "none" }, onClick: onToggle, children: [
-    /* @__PURE__ */ jsx("span", { style: { position: "relative", display: "inline-block", width: 32, height: 18, borderRadius: 9, flexShrink: 0, marginTop: 1, background: checked ? "#6366f1" : "rgba(255,255,255,0.15)", transition: "background 150ms" }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 2, left: checked ? 16 : 2, width: 14, height: 14, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,.3)", transition: "left 150ms" } }) }),
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: label }),
-      hint && /* @__PURE__ */ jsx("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.4)", marginTop: 1, lineHeight: 1.4 }, children: hint })
-    ] })
+function Note({ children }) {
+  return /* @__PURE__ */ jsxs("div", { style: { marginTop: 6, display: "flex", gap: 6, background: "rgba(99,102,241,0.07)", border: "1px solid rgba(99,102,241,0.18)", borderRadius: 7, padding: "6px 10px" }, children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 12, flexShrink: 0 }, children: "\u2139" }),
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(165,180,252,0.9)", lineHeight: 1.55 }, children })
   ] });
 }
+function Toggle({ checked, onToggle, label, hint, disabled }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { display: "flex", alignItems: "flex-start", gap: 8, cursor: disabled ? "not-allowed" : "pointer", userSelect: "none", opacity: disabled ? 0.4 : 1 },
+      onClick: () => !disabled && onToggle(),
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { position: "relative", display: "inline-block", width: 32, height: 18, borderRadius: 9, flexShrink: 0, marginTop: 1, background: checked && !disabled ? "#6366f1" : "rgba(255,255,255,0.12)", transition: "background 150ms" }, children: /* @__PURE__ */ jsx("span", { style: { position: "absolute", top: 2, left: checked && !disabled ? 16 : 2, width: 14, height: 14, borderRadius: "50%", background: "#fff", boxShadow: "0 1px 3px rgba(0,0,0,.3)", transition: "left 150ms" } }) }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: disabled ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.85)" }, children: label }),
+          hint && /* @__PURE__ */ jsx("p", { style: { fontSize: 11, color: "rgba(255,255,255,0.35)", marginTop: 2, lineHeight: 1.5 }, children: hint })
+        ] })
+      ]
+    }
+  );
+}
+function Divider() {
+  return /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(255,255,255,0.06)", margin: "2px 0" } });
+}
 function VideoOptions({ value, onChange, style }) {
   const [advanced, setAdvanced] = useState(false);
   const codec = value.codec ?? "h264";
@@ -490,7 +516,10 @@ function VideoOptions({ value, onChange, style }) {
   const audioChannels = value.audioChannels ?? "original";
   const preserveAtmos = value.preserveAtmos ?? true;
   const hdrMode = value.hdr ?? "preserve";
-  const selectedVideoCodec = VIDEO_CODECS.find((c) => c.value === codec);
+  const hdrSupported = codec === "h265" || codec === "av1";
+  const showAtmosOpt = audioCodec === "passthrough";
+  const showAtmosWarn = audioCodec === "aac" || audioCodec === "opus";
+  const selectedCodec = VIDEO_CODECS.find((c) => c.value === codec);
   function toggleRes(r) {
     if (isAuto) {
       onChange({ ...value, transcoding: [r] });
@@ -499,130 +528,172 @@ function VideoOptions({ value, onChange, style }) {
     const next = selectedRes.includes(r) ? selectedRes.filter((x) => x !== r) : [...selectedRes, r];
     onChange({ ...value, transcoding: next.length === 0 ? "auto" : next });
   }
-  const showAtmosOption = audioCodec === "eac3" || audioCodec === "passthrough";
-  const showAtmosWarning = audioCodec === "aac" || audioCodec === "opus" || audioCodec === "ac3";
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", style, children: [
-    /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(SectionLabel, { children: "Codec de v\xEDdeo" }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: VIDEO_CODECS.map((c) => /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: () => onChange({ ...value, codec: c.value }),
-          style: optBtnStyle(codec === c.value),
-          children: c.label
-        },
-        c.value
-      )) }),
-      selectedVideoCodec && /* @__PURE__ */ jsx(Hint, { children: selectedVideoCodec.description }),
-      selectedVideoCodec?.warning && /* @__PURE__ */ jsx(Warning, { children: selectedVideoCodec.warning })
-    ] }),
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-5", style, children: [
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(SectionLabel, { children: "Resolu\xE7\xF5es" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
-        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: optBtnStyle(isAuto), children: "Auto" }),
-        RESOLUTIONS.map((r) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => toggleRes(r), style: optBtnStyle(!isAuto && selectedRes.includes(r)), children: RESOLUTION_LABELS[r] }, r))
-      ] }),
-      isAuto && /* @__PURE__ */ jsx(Hint, { children: "Gera todas as resolu\xE7\xF5es at\xE9 a resolu\xE7\xE3o original do v\xEDdeo." })
-    ] }),
-    !advanced && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "\xC1udio" }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: AUDIO_SIMPLE.map((a) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(Label, { children: "Formato de v\xEDdeo" }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap mb-1", children: VIDEO_CODECS.map((c) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            onClick: () => onChange({ ...value, audioCodec: a.value }),
-            style: optBtnStyle(audioCodec === a.value),
-            children: [
-              a.label,
-              "badge" in a && a.badge ? /* @__PURE__ */ jsx("span", { style: { marginLeft: 5, fontSize: 9, fontWeight: 700, background: "rgba(255,255,255,0.15)", borderRadius: 4, padding: "1px 4px", verticalAlign: "middle" }, children: a.badge }) : null
-            ]
+            onClick: () => onChange({ ...value, codec: c.value }),
+            style: btn(codec === c.value),
+            children: c.label
           },
-          a.value
+          c.value
         )) }),
-        /* @__PURE__ */ jsx(Hint, { children: AUDIO_SIMPLE.find((a) => a.value === audioCodec)?.description })
+        selectedCodec && /* @__PURE__ */ jsxs(Hint, { children: [
+          /* @__PURE__ */ jsxs("strong", { style: { color: "rgba(255,255,255,0.55)" }, children: [
+            selectedCodec.sublabel,
+            "."
+          ] }),
+          " ",
+          selectedCodec.description
+        ] }),
+        "warning" in (selectedCodec ?? {}) && selectedCodec.warning && /* @__PURE__ */ jsx(Warn, { children: selectedCodec.warning })
       ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "HDR" }),
-        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx(
-          Toggle,
-          {
-            checked: hdrMode === "preserve",
-            onToggle: () => onChange({ ...value, hdr: hdrMode === "preserve" ? "sdr" : "preserve" }),
-            label: "Preservar HDR",
-            hint: "Mant\xE9m HDR10, HDR10+, HLG e Dolby Vision quando o codec de sa\xEDda suporta (H.265 e AV1). Ignorado para H.264."
-          }
-        ) })
+      /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx(Label, { children: "Vers\xF5es de qualidade (resolu\xE7\xF5es)" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap mb-1", children: [
+          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, transcoding: "auto" }), style: btn(isAuto), children: "Autom\xE1tico" }),
+          RESOLUTIONS.map((r) => /* @__PURE__ */ jsx("button", { type: "button", onClick: () => toggleRes(r), style: btn(!isAuto && selectedRes.includes(r)), children: RESOLUTION_LABELS[r] }, r))
+        ] }),
+        /* @__PURE__ */ jsx(Hint, { children: isAuto ? "Gera automaticamente todas as vers\xF5es at\xE9 a qualidade original do v\xEDdeo." : "Somente as vers\xF5es selecionadas ser\xE3o geradas." })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: { opacity: hdrSupported ? 1 : 0.45 }, children: [
+        /* @__PURE__ */ jsx(Label, { children: "Imagem HDR (alto contraste e cores vibrantes)" }),
+        !advanced ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              checked: hdrMode === "preserve",
+              onToggle: () => onChange({ ...value, hdr: hdrMode === "preserve" ? "sdr" : "preserve" }),
+              label: "Manter imagem HDR do v\xEDdeo original",
+              hint: "Preserva HDR10, HDR10+, HLG e Dolby Vision. S\xF3 funciona com H.265 ou AV1.",
+              disabled: !hdrSupported
+            }
+          ),
+          !hdrSupported && /* @__PURE__ */ jsx(Warn, { children: "O H.264 n\xE3o suporta HDR. Se o v\xEDdeo for HDR, a imagem ser\xE1 convertida automaticamente para SDR. Para manter o HDR, escolha H.265 ou AV1." })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap mb-1", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => hdrSupported && onChange({ ...value, hdr: "preserve" }), style: btn(hdrMode === "preserve" && hdrSupported, !hdrSupported), children: "Manter HDR" }),
+            /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, hdr: "sdr" }), style: btn(hdrMode === "sdr" || !hdrSupported), children: "Converter para SDR" })
+          ] }),
+          !hdrSupported ? /* @__PURE__ */ jsx(Warn, { children: "O H.264 n\xE3o suporta HDR. O v\xEDdeo ser\xE1 convertido para SDR automaticamente. Escolha H.265 ou AV1 para manter o HDR." }) : /* @__PURE__ */ jsx(Hint, { children: hdrMode === "preserve" ? "HDR10, HDR10+, HLG e Dolby Vision preservados. Em telas sem HDR o v\xEDdeo funciona normalmente." : "Convertido para SDR padr\xE3o \u2014 compat\xEDvel com qualquer tela." })
+        ] })
       ] })
     ] }),
-    advanced && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "Codec de \xE1udio" }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: AUDIO_ADVANCED_CODEC.map((a) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "\xC1udio" }),
+      !advanced ? /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap mb-1", children: AUDIO_SIMPLE.map((a) => /* @__PURE__ */ jsxs(
           "button",
           {
             type: "button",
             onClick: () => onChange({ ...value, audioCodec: a.value }),
-            style: optBtnStyle(audioCodec === a.value),
-            children: a.label
+            style: btn(audioCodec === a.value),
+            children: [
+              a.label,
+              "badge" in a && a.badge ? /* @__PURE__ */ jsx("span", { style: { marginLeft: 5, fontSize: 9, fontWeight: 700, background: "rgba(255,255,255,0.15)", borderRadius: 4, padding: "1px 4px", verticalAlign: "middle" }, children: a.badge }) : null
+            ]
           },
           a.value
         )) }),
-        /* @__PURE__ */ jsx(Hint, { children: AUDIO_ADVANCED_CODEC.find((a) => a.value === audioCodec)?.description }),
-        showAtmosWarning && /* @__PURE__ */ jsx(Warning, { children: "Este codec n\xE3o preserva Dolby Atmos. Use E-AC3 ou Original para manter Atmos." })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "Canais" }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: AUDIO_CHANNELS.map((c) => /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => onChange({ ...value, audioChannels: c.value }),
-            style: optBtnStyle(audioChannels === c.value),
-            children: c.label
-          },
-          c.value
-        )) }),
-        /* @__PURE__ */ jsx(Hint, { children: AUDIO_CHANNELS.find((c) => c.value === audioChannels)?.description })
-      ] }),
-      showAtmosOption && /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "Atmos" }),
-        /* @__PURE__ */ jsx(
-          Toggle,
-          {
-            checked: preserveAtmos,
-            onToggle: () => onChange({ ...value, preserveAtmos: !preserveAtmos }),
-            label: "Preservar Dolby Atmos quando dispon\xEDvel",
-            hint: "Mant\xE9m os metadados Atmos no E-AC3 de sa\xEDda. Efetivo somente com codec E-AC3 ou Original."
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(SectionLabel, { children: "HDR" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5 flex-wrap", children: [
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, hdr: "preserve" }), style: optBtnStyle(hdrMode === "preserve"), children: "Preservar HDR" }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onChange({ ...value, hdr: "sdr" }), style: optBtnStyle(hdrMode === "sdr"), children: "Converter para SDR" })
+        /* @__PURE__ */ jsx(Hint, { children: AUDIO_SIMPLE.find((a) => a.value === audioCodec)?.description })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Formato de \xE1udio (codec)" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap mb-1", children: AUDIO_ADVANCED_CODEC.map((a) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({ ...value, audioCodec: a.value }),
+              style: btn(audioCodec === a.value),
+              children: a.label
+            },
+            a.value
+          )) }),
+          /* @__PURE__ */ jsx(Hint, { children: AUDIO_ADVANCED_CODEC.find((a) => a.value === audioCodec)?.description }),
+          showAtmosWarn && /* @__PURE__ */ jsxs(Warn, { children: [
+            "Este formato n\xE3o suporta Dolby Atmos. Use ",
+            /* @__PURE__ */ jsx("strong", { children: "Dolby Digital Plus (E-AC3)" }),
+            " ou ",
+            /* @__PURE__ */ jsx("strong", { children: "Original" }),
+            " para manter o som espacial 3D."
+          ] })
         ] }),
-        /* @__PURE__ */ jsx(Hint, { children: hdrMode === "preserve" ? "HDR10, HDR10+, HLG e Dolby Vision s\xE3o preservados com H.265 e AV1. H.264 ignora HDR." : "Tonemapping para SDR \u2014 compat\xEDvel com todos os displays." })
-      ] })
+        /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Canais de \xE1udio" }),
+          /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap mb-1", children: AUDIO_CHANNELS.map((c) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => onChange({ ...value, audioChannels: c.value }),
+              style: btn(audioChannels === c.value),
+              children: c.label
+            },
+            c.value
+          )) }),
+          /* @__PURE__ */ jsx(Hint, { children: AUDIO_CHANNELS.find((c) => c.value === audioChannels)?.description })
+        ] }),
+        showAtmosOpt && /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsx(Label, { children: "Dolby Atmos (som espacial 3D)" }),
+          /* @__PURE__ */ jsx(
+            Toggle,
+            {
+              checked: preserveAtmos,
+              onToggle: () => onChange({ ...value, preserveAtmos: !preserveAtmos }),
+              label: "Manter Dolby Atmos quando dispon\xEDvel no arquivo",
+              hint: "Funciona somente com Dolby Digital Plus (E-AC3) ou Original."
+            }
+          ),
+          !preserveAtmos && /* @__PURE__ */ jsx(Note, { children: "Com Atmos desativado, o \xE1udio ser\xE1 mixado em surround convencional sem informa\xE7\xE3o espacial." })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          checked: value.separateAudio ?? false,
+          onToggle: () => onChange({ ...value, separateAudio: !value.separateAudio }),
+          label: "Exportar faixa de \xE1udio separada",
+          hint: "Gera tamb\xE9m um arquivo de \xE1udio independente do v\xEDdeo."
+        }
+      )
     ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx(SectionLabel, { children: "Recursos" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2.5", children: [
-        /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => onChange({ ...value, thumbnails: !(value.thumbnails ?? true) }), label: "Gerar thumbnails" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => onChange({ ...value, storyboard: !value.storyboard }), label: "Gerar storyboard" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => onChange({ ...value, autoCaptions: !value.autoCaptions }), label: "Legendas autom\xE1ticas (IA)" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.separateAudio ?? false, onToggle: () => onChange({ ...value, separateAudio: !value.separateAudio }), label: "Separar faixa de \xE1udio" })
-      ] })
+      /* @__PURE__ */ jsx(Label, { children: "Miniaturas (thumbnails)" }),
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          checked: value.thumbnails ?? true,
+          onToggle: () => onChange({ ...value, thumbnails: !(value.thumbnails ?? true) }),
+          label: "Gerar miniaturas automaticamente",
+          hint: "Imagens de pr\xE9via usadas em players, listas e compartilhamentos. Recomendado manter ativo."
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(Label, { children: "Storyboard" }),
+      /* @__PURE__ */ jsx(
+        Toggle,
+        {
+          checked: value.storyboard ?? false,
+          onToggle: () => onChange({ ...value, storyboard: !value.storyboard }),
+          label: "Gerar storyboard para pr\xE9-visualiza\xE7\xE3o",
+          hint: "Mostra frames do v\xEDdeo ao passar o mouse na barra de progresso do player. Aumenta levemente o tempo de processamento."
+        }
+      )
     ] }),
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
         onClick: () => setAdvanced((v) => !v),
-        style: { alignSelf: "flex-start", fontSize: 11, color: "rgba(255,255,255,0.35)", background: "none", border: "none", cursor: "pointer", padding: 0, textDecoration: "underline", textUnderlineOffset: 3 },
-        children: advanced ? "\u2190 Modo simples" : "Op\xE7\xF5es avan\xE7adas \u2192"
+        style: { alignSelf: "flex-start", fontSize: 11, color: "rgba(255,255,255,0.3)", background: "none", border: "none", cursor: "pointer", padding: 0, textDecoration: "underline", textUnderlineOffset: 3 },
+        children: advanced ? "\u2190 Voltar ao modo simples" : "Configura\xE7\xF5es avan\xE7adas de \xE1udio e HDR \u2192"
       }
     )
   ] });
@@ -1461,6 +1532,7 @@ function Video({
   const ageRatingTextRef = useRef(null);
   const ageRatingShownRef = useRef(false);
   const ageRatingQueuedRef = useRef(false);
+  const ageRatingPendingRef = useRef(false);
   const [clickIcon, setClickIcon] = useState(null);
   const clickIconTimerRef = useRef(null);
   const clickIconRef = useRef(null);
@@ -1610,7 +1682,13 @@ function Video({
     gsap.to(el, {
       opacity: controlsVisible ? 1 : 0,
       duration: 0.2,
-      ease: "power1.inOut"
+      ease: "power1.inOut",
+      onComplete: () => {
+        if (!controlsVisible && ageRatingPendingRef.current) {
+          ageRatingPendingRef.current = false;
+          showAgeRatingRef.current?.();
+        }
+      }
     });
     el.style.pointerEvents = controlsVisible ? "" : "none";
     if (player) {
@@ -1686,7 +1764,7 @@ function Video({
       if (!wrap) return;
       if (ageRatingTlRef.current) ageRatingTlRef.current.kill();
       const HOLD = 12;
-      const tl = gsap.timeline({ delay: 0.6 });
+      const tl = gsap.timeline({ delay: 0.3 });
       tl.fromTo(wrap, { opacity: 0 }, { opacity: 1, duration: 0.5, ease: "power2.out" });
       if (icon) {
         tl.fromTo(
@@ -1719,7 +1797,7 @@ function Video({
       }
       const shouldShow = !ageRatingShownRef.current || ageRatingQueuedRef.current;
       ageRatingQueuedRef.current = false;
-      if (shouldShow) showAgeRating();
+      if (shouldShow) ageRatingPendingRef.current = true;
       setHasPlayed(true);
       showControlsTemporarily();
     };
@@ -3318,7 +3396,20 @@ function Video({
             activeCue && /* @__PURE__ */ jsx(
               "div",
               {
-                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"}`,
+                className: "pointer-events-none absolute inset-x-0 z-40 flex justify-center px-4",
+                style: {
+                  bottom: (() => {
+                    if (preview) {
+                      const frameW = preview.cue.w ?? 160;
+                      const frameH = preview.cue.h ?? 90;
+                      const thumbH = Math.round(200 * (frameH / frameW));
+                      return `${80 + thumbH + 32 + 10}px`;
+                    }
+                    if (controlsVisible) return "5rem";
+                    return "1rem";
+                  })(),
+                  transition: "bottom 0.2s ease"
+                },
                 children: /* @__PURE__ */ jsx(
                   "div",
                   {