@geekapps/silo-elements-nextjs 0.3.2 → 0.3.4

package/dist/index.js

@@ -396,7 +396,7 @@ function ImageUploader({
     ] })
   ] });
 }
-var CODECS = [
+var VIDEO_CODECS = [
   {
     value: "h264",
     label: "H.264",
@@ -405,15 +405,46 @@ var CODECS = [
   {
     value: "h265",
     label: "H.265",
-    description: "50% menor que H.264 com a mesma qualidade. Requer player moderno (Chrome, Safari, Firefox)."
+    description: "50% menor que H.264 com a mesma qualidade. Requer player moderno."
   },
   {
     value: "av1",
     label: "AV1",
-    description: "M\xE1xima efici\xEAncia \u2014 at\xE9 50% menor que H.265. Suportado no Chrome, Firefox e Safari 17+.",
-    warning: "AV1 n\xE3o \xE9 suportado em iPhones mais antigos (iOS < 16) e Smart TVs antigas."
+    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."
   }
 ];
+var AUDIO_SIMPLE = [
+  {
+    value: "passthrough",
+    label: "Preservar 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."
+  },
+  {
+    value: "aac",
+    label: "AAC",
+    description: "Compatibilidade m\xE1xima. Funciona em todos os players e dispositivos."
+  },
+  {
+    value: "opus",
+    label: "Opus",
+    description: "Melhor efici\xEAncia que AAC. Suportado em Chrome, Firefox e Android. N\xE3o suportado em Safari/iOS."
+  }
+];
+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+." }
+];
+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." }
+];
 var RESOLUTIONS = ["144", "240", "360", "480", "720", "1080", "1440", "2160"];
 var RESOLUTION_LABELS = {
   "144": "144p",
@@ -426,20 +457,40 @@ var RESOLUTION_LABELS = {
   "2160": "4K"
 };
 function optBtnStyle(active) {
-  return active ? { border: "1px solid #6366f1", background: "#6366f1", color: "#fff", padding: "4px 10px", borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: "pointer", minWidth: 36 } : { 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", minWidth: 36 };
+  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 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 Hint({ children }) {
+  return /* @__PURE__ */ jsx("p", { style: { marginTop: 5, fontSize: 11, color: "rgba(255,255,255,0.4)", lineHeight: 1.5 }, children });
 }
-function Toggle({ checked, onToggle, label }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "inline-flex", alignItems: "center", 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, cursor: "pointer", 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__ */ jsx("span", { style: { fontSize: 12, fontWeight: 500, color: "rgba(255,255,255,0.85)" }, children: label })
+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 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 VideoOptions({ value, onChange, style }) {
+  const [advanced, setAdvanced] = useState(false);
   const codec = value.codec ?? "h264";
   const transcoding = value.transcoding ?? "auto";
   const isAuto = transcoding === "auto";
   const selectedRes = isAuto ? [] : transcoding;
-  const selectedCodec = CODECS.find((c) => c.value === codec) ?? CODECS[0];
+  const audioCodec = value.audioCodec ?? "passthrough";
+  const audioChannels = value.audioChannels ?? "original";
+  const preserveAtmos = value.preserveAtmos ?? true;
+  const hdrMode = value.hdr ?? "preserve";
+  const selectedVideoCodec = VIDEO_CODECS.find((c) => c.value === codec);
   function toggleRes(r) {
     if (isAuto) {
       onChange({ ...value, transcoding: [r] });
@@ -448,13 +499,12 @@ 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 });
   }
-  function toggleFeature(key) {
-    onChange({ ...value, [key]: !value[key] });
-  }
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", style, children: [
+  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("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Codec de v\xEDdeo" }),
-      /* @__PURE__ */ jsx("div", { className: "flex gap-1.5 flex-wrap", children: CODECS.map((c) => /* @__PURE__ */ jsx(
+      /* @__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",
@@ -464,38 +514,117 @@ function VideoOptions({ value, onChange, style }) {
         },
         c.value
       )) }),
-      /* @__PURE__ */ jsx("div", { style: { marginTop: 6, fontSize: 11, color: "rgba(255,255,255,0.45)", lineHeight: 1.5 }, children: selectedCodec.description }),
-      selectedCodec.warning && /* @__PURE__ */ jsx("div", { style: { marginTop: 5, display: "flex", alignItems: "flex-start", 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 ",
-        selectedCodec.warning
-      ] }) })
+      selectedVideoCodec && /* @__PURE__ */ jsx(Hint, { children: selectedVideoCodec.description }),
+      selectedVideoCodec?.warning && /* @__PURE__ */ jsx(Warning, { children: selectedVideoCodec.warning })
     ] }),
     /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 6, color: "rgba(255,255,255,0.4)" }, children: "Resolu\xE7\xF5es" }),
+      /* @__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(
+        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(
+          "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
+            ]
+          },
+          a.value
+        )) }),
+        /* @__PURE__ */ jsx(Hint, { children: AUDIO_SIMPLE.find((a) => a.value === audioCodec)?.description })
+      ] }),
+      /* @__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."
+          }
+        ) })
+      ] })
+    ] }),
+    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(
+          "button",
+          {
+            type: "button",
+            onClick: () => onChange({ ...value, audioCodec: a.value }),
+            style: optBtnStyle(audioCodec === a.value),
+            children: a.label
+          },
+          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: () => toggleRes(r),
-            style: optBtnStyle(!isAuto && selectedRes.includes(r)),
-            children: RESOLUTION_LABELS[r]
+            onClick: () => onChange({ ...value, audioChannels: c.value }),
+            style: optBtnStyle(audioChannels === c.value),
+            children: c.label
           },
-          r
-        ))
+          c.value
+        )) }),
+        /* @__PURE__ */ jsx(Hint, { children: AUDIO_CHANNELS.find((c) => c.value === audioChannels)?.description })
       ] }),
-      isAuto && /* @__PURE__ */ jsx("div", { style: { marginTop: 6, fontSize: 11, color: "rgba(255,255,255,0.35)", lineHeight: 1.5 }, children: "Modo autom\xE1tico: gera todas as resolu\xE7\xF5es at\xE9 a resolu\xE7\xE3o original do v\xEDdeo." })
+      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: 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", { children: [
-      /* @__PURE__ */ jsx("div", { style: { fontSize: 11, fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.05em", marginBottom: 8, color: "var(--silo-text-muted)" }, children: "Recursos" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx(Toggle, { checked: value.thumbnails ?? true, onToggle: () => toggleFeature("thumbnails"), label: "Gerar thumbnails" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.storyboard ?? false, onToggle: () => toggleFeature("storyboard"), label: "Gerar storyboard" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.autoCaptions ?? false, onToggle: () => toggleFeature("autoCaptions"), label: "Legendas autom\xE1ticas (IA)" }),
-        /* @__PURE__ */ jsx(Toggle, { checked: value.separateAudio ?? false, onToggle: () => toggleFeature("separateAudio"), label: "Separar faixa de \xE1udio" })
+      /* @__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(
+      "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"
+      }
+    )
   ] });
 }
 var DEFAULT_VIDEO_OPTS = {
@@ -1330,6 +1459,9 @@ function Video({
   const ageRatingWrapRef = useRef(null);
   const ageRatingIconRef = useRef(null);
   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);
@@ -1404,9 +1536,6 @@ function Video({
         setControlsVisible(false);
       }, 2400);
     }
-    if (video?.paused) {
-      showAgeRatingRef.current?.();
-    }
   }, [autoHideControls]);
   useEffect(() => {
     if (!containerRef.current) return;
@@ -1482,7 +1611,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) {
@@ -1558,7 +1693,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(
@@ -1577,7 +1712,9 @@ function Video({
         );
       }
       tl.to({}, { duration: HOLD });
-      tl.to(wrap, { opacity: 0, duration: 0.7, ease: "power2.inOut" });
+      tl.to(wrap, { opacity: 0, duration: 0.7, ease: "power2.inOut", onComplete: () => {
+        ageRatingShownRef.current = true;
+      } });
       ageRatingTlRef.current = tl;
     };
     showAgeRatingRef.current = showAgeRating;
@@ -1587,10 +1724,10 @@ function Video({
         window.clearTimeout(ageRatingPauseTimerRef.current);
         ageRatingPauseTimerRef.current = null;
       }
-      setHasPlayed((prev) => {
-        if (!prev) showAgeRating();
-        return true;
-      });
+      const shouldShow = !ageRatingShownRef.current || ageRatingQueuedRef.current;
+      ageRatingQueuedRef.current = false;
+      if (shouldShow) ageRatingPendingRef.current = true;
+      setHasPlayed(true);
       showControlsTemporarily();
     };
     const onPause = () => {
@@ -1600,7 +1737,7 @@ function Video({
       if (parsed.ageRating?.data) {
         if (ageRatingPauseTimerRef.current) window.clearTimeout(ageRatingPauseTimerRef.current);
         ageRatingPauseTimerRef.current = window.setTimeout(() => {
-          showAgeRating();
+          ageRatingQueuedRef.current = true;
           ageRatingPauseTimerRef.current = null;
         }, 60 * 1e3);
       }
@@ -3188,7 +3325,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",
                   {