@twick/studio 0.15.24 → 0.15.26

package/dist/index.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, createElement, useState, useEffect, useRef, useCallback, createContext, useContext, useMemo } from "react";
-import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, TIMELINE_ELEMENT_TYPE, EffectElement, CAPTION_STYLE, CaptionElement, TRACK_TYPES, LineElement, ArrowElement, RectElement, CircleElement, ElementTextEffect, ElementAnimation, CAPTION_STYLE_OPTIONS, exportChaptersAsYouTube, exportChaptersAsJSON, getCaptionLanguages, exportCaptionsAsSRT, exportCaptionsAsVTT, PLAYER_STATE } from "@twick/timeline";
+import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, TIMELINE_ELEMENT_TYPE, EffectElement, computeCaptionGeometry, CAPTION_STYLE, CaptionElement, TRACK_TYPES, LineElement, ArrowElement, RectElement, CircleElement, ElementTextEffect, ElementAnimation, CAPTION_STYLE_OPTIONS, exportChaptersAsYouTube, exportChaptersAsJSON, getCaptionLanguages, exportCaptionsAsSRT, exportCaptionsAsVTT, PLAYER_STATE } from "@twick/timeline";
 import { AudioElement as AudioElement2, CAPTION_COLOR, CAPTION_FONT, CAPTION_STYLE as CAPTION_STYLE2, CAPTION_STYLE_OPTIONS as CAPTION_STYLE_OPTIONS2, CaptionElement as CaptionElement2, CircleElement as CircleElement2, ElementAdder, ElementAnimation as ElementAnimation2, ElementCloner, ElementDeserializer, ElementFrameEffect, ElementRemover, ElementSerializer, ElementSplitter, ElementTextEffect as ElementTextEffect2, ElementUpdater, ElementValidator, INITIAL_TIMELINE_DATA, IconElement, ImageElement as ImageElement2, PROCESS_STATE, RectElement as RectElement2, TIMELINE_ACTION, TIMELINE_ELEMENT_TYPE as TIMELINE_ELEMENT_TYPE2, TextElement as TextElement2, TimelineEditor, TimelineProvider, Track as Track2, TrackElement as TrackElement2, VideoElement as VideoElement2, WORDS_PER_PHRASE, generateShortUuid, getCurrentElements, getTotalDuration, isElementId, isTrackId, useTimelineContext as useTimelineContext2 } from "@twick/timeline";
 import VideoEditor, { useEditorManager, BrowserMediaManager, TIMELINE_DROP_MEDIA_TYPE, throttle, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
 import { ANIMATIONS as ANIMATIONS2, BaseMediaManager, BrowserMediaManager as BrowserMediaManager2, PlayerControls, TEXT_EFFECTS as TEXT_EFFECTS2, TimelineManager, default as default2, animationGifs, getAnimationGif, setElementColors, useEditorManager as useEditorManager2, usePlayerControl, useTimelineControl } from "@twick/video-editor";
@@ -3029,10 +3029,10 @@ const TEXT_STYLE_PRESETS = [
     applyBackground: false
   },
   {
-    id: "impact-caption",
-    label: "Impact Caption",
+    id: "bold-caption",
+    label: "Bold Caption",
     description: "Bold white with strong outline",
-    fontFamily: AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: AVAILABLE_TEXT_FONTS.ROBOTO,
     fontSize: 34,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -3132,7 +3132,7 @@ const TEXT_STYLE_PRESETS = [
     id: "cta-pill",
     label: "CTA Pill",
     description: "Call-to-action pill",
-    fontFamily: AVAILABLE_TEXT_FONTS.IMPACT,
+    fontFamily: AVAILABLE_TEXT_FONTS.LUCKIEST_GUY,
     fontSize: 28,
     fontWeight: 700,
     textColor: "#FFFFFF",
@@ -4672,6 +4672,16 @@ function EffectStylePanelContainer({
     }
   );
 }
+const formatTime = (seconds) => {
+  if (!Number.isFinite(seconds) || seconds < 0) return "0:00.00";
+  const totalMs = Math.round(seconds * 1e3);
+  const totalSeconds = Math.floor(totalMs / 1e3);
+  const minutes = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  const ms = Math.floor(totalMs % 1e3 / 10);
+  const pad = (n, l = 2) => String(n).padStart(l, "0");
+  return `${minutes}:${pad(secs)}.${pad(ms)}`;
+};
 function CaptionsPanel({
   captions,
   addCaption,
@@ -4679,54 +4689,102 @@ function CaptionsPanel({
   deleteCaption,
   updateCaption
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("h3", { className: "panel-title", children: "Captions" }),
-    captions.map((caption, i) => /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "panel-section gap-2",
-        children: [
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "Enter caption text",
-              value: caption.t,
-              onChange: (e) => updateCaption(i, { ...caption, t: e.target.value }),
-              className: "input-dark"
-            }
-          ) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex-container justify-between", children: [
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => splitCaption(i),
-                className: "btn-ghost",
-                title: "Split caption",
-                children: /* @__PURE__ */ jsx(Scissors, { className: "icon-sm" })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: () => deleteCaption(i),
-                className: "btn-ghost",
-                title: "Delete caption",
-                children: /* @__PURE__ */ jsx(Trash2, { className: "icon-sm", color: "var(--color-red-500)" })
-              }
-            )
-          ] })
-        ]
-      },
-      i
-    )),
-    /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("button", { onClick: addCaption, className: "btn-primary w-full", title: "Add caption", children: "Add" }) })
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container captions-panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "captions-panel-header", children: [
+      /* @__PURE__ */ jsx("h3", { className: "panel-title", children: "Captions" }),
+      /* @__PURE__ */ jsxs("div", { className: "captions-panel-header-meta", children: [
+        captions.length === 0 ? /* @__PURE__ */ jsx("span", { className: "captions-panel-count", children: "No captions yet" }) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: addCaption,
+            className: "btn-primary captions-panel-add-button",
+            title: "Add caption",
+            children: "Add caption"
+          }
+        )
+      ] })
+    ] }),
+    captions.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "panel-section captions-panel-empty", children: [
+      /* @__PURE__ */ jsx("p", { className: "captions-panel-empty-title", children: "Start your first caption" }),
+      /* @__PURE__ */ jsx("p", { className: "captions-panel-empty-subtitle", children: "Use the button above to add the first caption block for the active track." }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: addCaption,
+          className: "btn-primary captions-panel-empty-button",
+          title: "Add first caption",
+          children: "Add caption"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx("div", { className: "panel-section captions-panel-list", children: captions.map((caption, i) => {
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "captions-panel-item",
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "captions-panel-item-header", children: [
+              /* @__PURE__ */ jsx("span", { className: "captions-panel-time captions-panel-time-start", children: formatTime(caption.s) }),
+              /* @__PURE__ */ jsx("span", { className: "captions-panel-time captions-panel-time-end", children: formatTime(caption.e) })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "captions-panel-item-body", children: [
+              /* @__PURE__ */ jsx(
+                "textarea",
+                {
+                  placeholder: "Enter caption text",
+                  value: caption.t,
+                  onChange: (e) => updateCaption(i, { ...caption, t: e.target.value }),
+                  className: "input-dark captions-panel-textarea"
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { className: "captions-panel-actions", children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => splitCaption(i),
+                    className: "btn-ghost captions-panel-action-button",
+                    title: "Split caption at midpoint",
+                    children: /* @__PURE__ */ jsx(Scissors, { className: "icon-sm" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => deleteCaption(i),
+                    className: "btn-ghost captions-panel-action-button",
+                    title: "Delete caption",
+                    children: /* @__PURE__ */ jsx(
+                      Trash2,
+                      {
+                        className: "icon-sm",
+                        color: "var(--color-red-500)"
+                      }
+                    )
+                  }
+                )
+              ] })
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
   ] });
 }
+const HIGHLIGHT_BG_FONT_SIZE = 46;
+const WORD_BY_WORD_FONT_SIZE = 46;
+const WORD_BY_WORD_WITH_BG_FONT_SIZE = 46;
+const OUTLINE_ONLY_FONT_SIZE = 42;
+const SOFT_BOX_FONT_SIZE = 40;
+const HIGHLIGHT_BG_GEOMETRY = computeCaptionGeometry(HIGHLIGHT_BG_FONT_SIZE, CAPTION_STYLE.WORD_BG_HIGHLIGHT);
+const WORD_BY_WORD_GEOMETRY = computeCaptionGeometry(WORD_BY_WORD_FONT_SIZE, CAPTION_STYLE.WORD_BY_WORD);
+const WORD_BY_WORD_WITH_BG_GEOMETRY = computeCaptionGeometry(WORD_BY_WORD_WITH_BG_FONT_SIZE, CAPTION_STYLE.WORD_BY_WORD_WITH_BG);
+const OUTLINE_ONLY_GEOMETRY = computeCaptionGeometry(OUTLINE_ONLY_FONT_SIZE, CAPTION_STYLE.OUTLINE_ONLY);
+const SOFT_BOX_GEOMETRY = computeCaptionGeometry(SOFT_BOX_FONT_SIZE, CAPTION_STYLE.SOFT_BOX);
 const CAPTION_PROPS = {
   [CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
     font: {
-      size: 46,
+      size: HIGHLIGHT_BG_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4735,15 +4793,16 @@ const CAPTION_PROPS = {
       highlight: "#ff4081",
       bgColor: "#444444"
     },
-    lineWidth: 0.35,
+    lineWidth: HIGHLIGHT_BG_GEOMETRY.lineWidth,
+    rectProps: HIGHLIGHT_BG_GEOMETRY.rectProps,
     stroke: "#000000",
     fontWeight: 700,
-    shadowOffset: [-3, 3],
+    shadowOffset: [-1, 1],
     shadowColor: "#000000"
   },
   [CAPTION_STYLE.WORD_BY_WORD]: {
     font: {
-      size: 46,
+      size: WORD_BY_WORD_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4752,15 +4811,16 @@ const CAPTION_PROPS = {
       highlight: "#ff4081",
       bgColor: "#444444"
     },
-    lineWidth: 0.35,
+    lineWidth: WORD_BY_WORD_GEOMETRY.lineWidth,
+    rectProps: WORD_BY_WORD_GEOMETRY.rectProps,
     stroke: "#000000",
-    shadowOffset: [-2, 2],
+    shadowOffset: [-1, 1],
     shadowColor: "#000000",
     shadowBlur: 5
   },
   [CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
     font: {
-      size: 46,
+      size: WORD_BY_WORD_WITH_BG_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4769,14 +4829,15 @@ const CAPTION_PROPS = {
       highlight: "#ff4081",
       bgColor: "#444444"
     },
-    lineWidth: 0.35,
-    shadowOffset: [-2, 2],
+    lineWidth: WORD_BY_WORD_WITH_BG_GEOMETRY.lineWidth,
+    rectProps: WORD_BY_WORD_WITH_BG_GEOMETRY.rectProps,
+    shadowOffset: [-1, 1],
     shadowColor: "#000000",
     shadowBlur: 5
   },
   [CAPTION_STYLE.OUTLINE_ONLY]: {
     font: {
-      size: 42,
+      size: OUTLINE_ONLY_FONT_SIZE,
       weight: 600,
       family: "Arial"
     },
@@ -4785,7 +4846,8 @@ const CAPTION_PROPS = {
       highlight: "#ff4081",
       bgColor: "#000000"
     },
-    lineWidth: 0.5,
+    lineWidth: OUTLINE_ONLY_GEOMETRY.lineWidth,
+    rectProps: OUTLINE_ONLY_GEOMETRY.rectProps,
     stroke: "#000000",
     fontWeight: 600,
     shadowOffset: [0, 0],
@@ -4794,7 +4856,7 @@ const CAPTION_PROPS = {
   },
   [CAPTION_STYLE.SOFT_BOX]: {
     font: {
-      size: 40,
+      size: SOFT_BOX_FONT_SIZE,
       weight: 600,
       family: "Montserrat"
     },
@@ -4803,7 +4865,8 @@ const CAPTION_PROPS = {
       highlight: "#ff4081",
       bgColor: "#333333"
     },
-    lineWidth: 0.2,
+    lineWidth: SOFT_BOX_GEOMETRY.lineWidth,
+    rectProps: SOFT_BOX_GEOMETRY.rectProps,
     stroke: "#000000",
     fontWeight: 600,
     shadowOffset: [-1, 1],
@@ -6322,6 +6385,116 @@ const CAPTION_COLOR2 = {
   bgColor: "#8C52FF",
   outlineColor: "#000000"
 };
+const CAPTION_STYLE_COLOR_META = {
+  // Word background highlight - white text on colored pill
+  highlight_bg: {
+    // Text color, and background pill color used in animation.
+    usedColors: ["text", "bgColor"],
+    labels: {
+      text: "Text Color",
+      bgColor: "Highlight Background"
+    }
+  },
+  // Simple word-by-word – text only
+  word_by_word: {
+    // Visualizer uses text as fill + outlineColor for stroke, and highlight for active word.
+    usedColors: ["text", "highlight", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Word-by-word with a phrase bar background
+  word_by_word_with_bg: {
+    // Text color (fill), highlight for active word, outlineColor (stroke), bgColor used by phrase rect.
+    usedColors: ["text", "highlight", "bgColor", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      bgColor: "Bar Background",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Classic outlined text
+  outline_only: {
+    // Outline-only style: fill + outline color; highlight not used in animation.
+    usedColors: ["text", "outlineColor"],
+    labels: {
+      text: "Fill Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Soft rounded box behind text
+  soft_box: {
+    usedColors: ["text", "bgColor", "highlight", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      highlight: "Highlight Color",
+      bgColor: "Box Background",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Broadcast style lower-third bar
+  lower_third: {
+    // Title text, bar background, highlight color and outline color.
+    usedColors: ["text", "bgColor", "outlineColor"],
+    labels: {
+      text: "Title Text Color",
+      bgColor: "Bar Background",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Typewriter – text only
+  typewriter: {
+    // Text color and outline color (stroke) used by visualizer; highlight not animated.
+    usedColors: ["text", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Karaoke – base text plus active word highlight
+  karaoke: {
+    // Base text color, active word highlight color, outline color.
+    usedColors: ["text", "highlight", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Karaoke-word – single active word, previous words dimmed
+  "karaoke-word": {
+    // Same color needs as karaoke.
+    usedColors: ["text", "highlight", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  },
+  // Pop / scale – text only
+  pop_scale: {
+    // Text color, highlight color for active word, and outline color; no background.
+    usedColors: ["text", "highlight", "outlineColor"],
+    labels: {
+      text: "Text Color",
+      highlight: "Highlight Color",
+      outlineColor: "Outline Color"
+    }
+  }
+};
+const DEFAULT_COLOR_META = {
+  usedColors: ["text", "bgColor", "outlineColor"],
+  labels: {
+    text: "Text Color",
+    bgColor: "Background Color",
+    outlineColor: "Outline Color"
+  }
+};
+const CAPTION_FONTS = Object.values(AVAILABLE_TEXT_FONTS);
 function CaptionPropPanel({
   selectedElement,
   updateElement
@@ -6339,24 +6512,42 @@ function CaptionPropPanel({
     bgColor: CAPTION_COLOR2.bgColor,
     outlineColor: CAPTION_COLOR2.outlineColor
   });
+  const [useHighlight, setUseHighlight] = useState(true);
+  const [useOutline, setUseOutline] = useState(true);
   const track = selectedElement instanceof CaptionElement ? editor.getTrackById(selectedElement.getTrackId()) : null;
   const trackProps = (track == null ? void 0 : track.getProps()) ?? {};
   const applyToAll = (trackProps == null ? void 0 : trackProps.applyToAll) ?? false;
   const handleUpdateCaption = (updates) => {
     const captionElement = selectedElement;
     if (!captionElement) return;
+    const nextFontSize = updates.fontSize ?? fontSize;
+    const geometry = computeCaptionGeometry(nextFontSize, updates.style ?? (capStyle == null ? void 0 : capStyle.value) ?? "");
+    const highlightEnabled = updates.useHighlightOverride ?? useHighlight;
+    const outlineEnabled = updates.useOutlineOverride ?? useOutline;
+    const rawNextColors = updates.colors ?? colors;
+    let effectiveColors = { ...rawNextColors };
+    if (!highlightEnabled) {
+      const { highlight, ...rest } = effectiveColors;
+      effectiveColors = rest;
+    }
+    if (!outlineEnabled) {
+      const { outlineColor, ...rest } = effectiveColors;
+      effectiveColors = rest;
+    }
     if (applyToAll && track) {
       const nextFont = {
-        size: updates.fontSize ?? fontSize,
+        size: nextFontSize,
         family: updates.fontFamily ?? fontFamily
       };
-      const nextColors = updates.colors ?? colors;
+      const nextColors = effectiveColors;
       const nextCapStyle = updates.style ?? (capStyle == null ? void 0 : capStyle.value);
       track.setProps({
         ...trackProps,
         capStyle: nextCapStyle,
         font: { ...(trackProps == null ? void 0 : trackProps.font) ?? {}, ...nextFont },
-        colors: nextColors
+        colors: nextColors,
+        lineWidth: geometry.lineWidth,
+        rectProps: geometry.rectProps
       });
       editor.refresh();
     } else {
@@ -6365,10 +6556,11 @@ function CaptionPropPanel({
         ...elementProps,
         capStyle: updates.style ?? (capStyle == null ? void 0 : capStyle.value),
         font: {
-          size: updates.fontSize ?? fontSize,
+          size: nextFontSize,
           family: updates.fontFamily ?? fontFamily
         },
-        colors: updates.colors ?? colors
+        colors: effectiveColors,
+        lineWidth: geometry.lineWidth
       });
       updateElement == null ? void 0 : updateElement(captionElement);
     }
@@ -6394,11 +6586,62 @@ function CaptionPropPanel({
         bgColor: (c == null ? void 0 : c.bgColor) ?? CAPTION_COLOR2.bgColor,
         outlineColor: (c == null ? void 0 : c.outlineColor) ?? CAPTION_COLOR2.outlineColor
       });
+      setUseHighlight((c == null ? void 0 : c.highlight) != null);
+      setUseOutline((c == null ? void 0 : c.outlineColor) != null);
     }
   }, [selectedElement, applyToAll, changeLog]);
   if (!(selectedElement instanceof CaptionElement)) {
     return null;
   }
+  const currentStyleKey = capStyle == null ? void 0 : capStyle.value;
+  const currentColorMeta = currentStyleKey && CAPTION_STYLE_COLOR_META[currentStyleKey] || DEFAULT_COLOR_META;
+  const defaultColorLabels = {
+    text: "Text Color",
+    bgColor: "Background Color",
+    highlight: "Highlight Color",
+    outlineColor: "Outline Color"
+  };
+  const renderColorControl = (key) => {
+    if (key === "highlight" && !useHighlight) {
+      return null;
+    }
+    if (key === "outlineColor" && !useOutline) {
+      return null;
+    }
+    const label = currentColorMeta.labels[key] ?? defaultColorLabels[key];
+    const value = colors[key];
+    const handleChange = (next) => {
+      const nextColors = { ...colors, [key]: next };
+      setColors(nextColors);
+      handleUpdateCaption({ colors: nextColors });
+    };
+    if (value == null) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-small", children: label }),
+      /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "color",
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            className: "color-picker"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            className: "color-text"
+          }
+        )
+      ] })
+    ] }, key);
+  };
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
     /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Caption Style" }),
@@ -6445,7 +6688,7 @@ function CaptionPropPanel({
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Font" }),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         "select",
         {
           value: fontFamily,
@@ -6455,111 +6698,59 @@ function CaptionPropPanel({
             handleUpdateCaption({ fontFamily: value });
           },
           className: "select-dark w-full",
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "Bangers", children: "Bangers" }),
-            /* @__PURE__ */ jsx("option", { value: "Arial", children: "Arial" }),
-            /* @__PURE__ */ jsx("option", { value: "Helvetica", children: "Helvetica" }),
-            /* @__PURE__ */ jsx("option", { value: "Times New Roman", children: "Times New Roman" })
-          ]
+          children: CAPTION_FONTS.map((font) => /* @__PURE__ */ jsx("option", { value: font, children: font }, font))
         }
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Colors" }),
       /* @__PURE__ */ jsxs("div", { className: "color-section", children: [
-        /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Text Color" }),
-          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: colors.text,
-                onChange: (e) => {
-                  const newColors = { ...colors, text: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-picker"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: colors.text,
-                onChange: (e) => {
-                  const newColors = { ...colors, text: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-text"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Color" }),
-          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: colors.bgColor,
-                onChange: (e) => {
-                  const newColors = { ...colors, bgColor: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-picker"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: colors.bgColor,
-                onChange: (e) => {
-                  const newColors = { ...colors, bgColor: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-text"
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Outline Color" }),
-          /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "color",
-                value: colors.outlineColor,
-                onChange: (e) => {
-                  const newColors = { ...colors, outlineColor: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-picker"
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              "input",
-              {
-                type: "text",
-                value: colors.outlineColor,
-                onChange: (e) => {
-                  const newColors = { ...colors, outlineColor: e.target.value };
-                  setColors(newColors);
-                  handleUpdateCaption({ colors: newColors });
-                },
-                className: "color-text"
-              }
-            )
-          ] })
-        ] })
+        currentColorMeta.usedColors.includes("highlight") && /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: useHighlight,
+              onChange: (e) => {
+                const enabled = e.target.checked;
+                setUseHighlight(enabled);
+                const nextColors = enabled ? { ...colors, highlight: colors.highlight || CAPTION_COLOR2.highlight } : { ...colors };
+                setColors(nextColors);
+                handleUpdateCaption({
+                  colors: nextColors,
+                  useHighlightOverride: enabled
+                });
+              },
+              className: "checkbox-purple"
+            }
+          ),
+          "Use Highlight Color"
+        ] }) }),
+        currentColorMeta.usedColors.includes("outlineColor") && /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: useOutline,
+              onChange: (e) => {
+                const enabled = e.target.checked;
+                setUseOutline(enabled);
+                const nextColors = enabled ? {
+                  ...colors,
+                  outlineColor: colors.outlineColor || CAPTION_COLOR2.outlineColor
+                } : { ...colors };
+                setColors(nextColors);
+                handleUpdateCaption({
+                  colors: nextColors,
+                  useOutlineOverride: enabled
+                });
+              },
+              className: "checkbox-purple"
+            }
+          ),
+          "Use Outline Color"
+        ] }) }),
+        currentColorMeta.usedColors.map((key) => renderColorControl(key))
       ] })
     ] })
   ] });
@@ -6753,6 +6944,8 @@ function GenerateCaptionsPanel({
   const [isGenerating, setIsGenerating] = useState(false);
   const [pollingStatus, setPollingStatus] = useState("idle");
   const [errorMessage, setErrorMessage] = useState(null);
+  const [selectedLanguage, setSelectedLanguage] = useState("auto");
+  const [wordsPerPhrase, setWordsPerPhrase] = useState(4);
   const pollingIntervalRef = useRef(null);
   const currentReqIdRef = useRef(null);
   useEffect(() => {
@@ -6813,7 +7006,12 @@ function GenerateCaptionsPanel({
     setPollingStatus("polling");
     const videoElement = selectedElement;
     try {
-      const reqId = await onGenerateCaptions(videoElement);
+      const language = selectedLanguage === "auto" ? void 0 : selectedLanguage;
+      const reqId = await onGenerateCaptions(
+        videoElement,
+        language,
+        wordsPerPhrase
+      );
       if (!reqId) {
         setPollingStatus("error");
         setIsGenerating(false);
@@ -6872,6 +7070,46 @@ function GenerateCaptionsPanel({
       /* @__PURE__ */ jsx(Volume2, { className: "empty-state-icon" }),
       /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate captions" })
     ] }) }) }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", htmlFor: "caption-language", children: "Audio Language" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          id: "caption-language",
+          className: "select-dark",
+          value: selectedLanguage,
+          onChange: (e) => setSelectedLanguage(e.target.value),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto (detect)" }),
+            /* @__PURE__ */ jsx("option", { value: "english", children: "English" }),
+            /* @__PURE__ */ jsx("option", { value: "italian", children: "Italian" }),
+            /* @__PURE__ */ jsx("option", { value: "spanish", children: "Spanish" }),
+            /* @__PURE__ */ jsx("option", { value: "portuguese", children: "Portuguese" }),
+            /* @__PURE__ */ jsx("option", { value: "french", children: "French" }),
+            /* @__PURE__ */ jsx("option", { value: "german", children: "German" }),
+            /* @__PURE__ */ jsx("option", { value: "turkish", children: "Turkish" }),
+            /* @__PURE__ */ jsx("option", { value: "indonesian", children: "Indonesian" }),
+            /* @__PURE__ */ jsx("option", { value: "hindi", children: "Hindi" })
+          ]
+        }
+      )
+    ] }),
+    !isLoading && containsAudio === true && /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", htmlFor: "caption-words-per-phrase", children: "Words per phrase" }),
+      /* @__PURE__ */ jsx(
+        "select",
+        {
+          id: "caption-words-per-phrase",
+          className: "select-dark",
+          value: String(wordsPerPhrase),
+          onChange: (e) => setWordsPerPhrase(Number(e.target.value) || 4),
+          children: Array.from({ length: 10 }).map((_, index) => {
+            const value = index + 1;
+            return /* @__PURE__ */ jsx("option", { value, children: value }, value);
+          })
+        }
+      )
+    ] }),
     !isLoading && isGenerating && pollingStatus === "polling" && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
       /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Generating captions... Please wait" })
@@ -7407,15 +7645,6 @@ const useStudioOperation = (studioConfig) => {
     const fileName = `${(projectName || "chapters").replace(/\.json$/i, "")}.${format === "youtube" ? "txt" : "json"}`;
     await saveAsFile(content, "text/plain", fileName);
   };
-  const onGenerateCaptions = async (videoElement) => {
-    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
-      const service = studioConfig.captionGenerationService;
-      const reqId = await service.generateCaptions(videoElement, present);
-      return reqId;
-    }
-    alert("Generate captions not supported in demo mode");
-    return null;
-  };
   const addCaptionsToTimeline = (captions) => {
     var _a;
     const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.updateProjectWithCaptions(captions);
@@ -7440,7 +7669,6 @@ const useStudioOperation = (studioConfig) => {
     onNewProject,
     onExportCaptions,
     onExportChapters,
-    onGenerateCaptions,
     addCaptionsToTimeline,
     getCaptionstatus
   };
@@ -7549,12 +7777,14 @@ function TwickStudio({ studioConfig }) {
 const useGenerateCaptions = (studioConfig) => {
   var _a;
   const { editor, present } = useTimelineContext();
-  const onGenerateCaptions = async (videoElement) => {
+  const onGenerateCaptions = async (videoElement, language, wordsPerPhrase) => {
     if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
       const service = studioConfig.captionGenerationService;
       const reqId = await service.generateCaptions(
         videoElement,
-        present
+        present,
+        language,
+        wordsPerPhrase
       );
       return reqId;
     }