@twick/studio 0.15.24 → 0.15.25

package/dist/index.js

@@ -4671,6 +4671,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,
@@ -4678,54 +4688,102 @@ function CaptionsPanel({
   deleteCaption,
   updateCaption
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: "Captions" }),
-    captions.map((caption, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "panel-section gap-2",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
-            "input",
-            {
-              type: "text",
-              placeholder: "Enter caption text",
-              value: caption.t,
-              onChange: (e) => updateCaption(i, { ...caption, t: e.target.value }),
-              className: "input-dark"
-            }
-          ) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container justify-between", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => splitCaption(i),
-                className: "btn-ghost",
-                title: "Split caption",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-sm" })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: () => deleteCaption(i),
-                className: "btn-ghost",
-                title: "Delete caption",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-sm", color: "var(--color-red-500)" })
-              }
-            )
-          ] })
-        ]
-      },
-      i
-    )),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: addCaption, className: "btn-primary w-full", title: "Add caption", children: "Add" }) })
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container captions-panel", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-header", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: "Captions" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-header-meta", children: [
+        captions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-count", children: "No captions yet" }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: addCaption,
+            className: "btn-primary captions-panel-add-button",
+            title: "Add caption",
+            children: "Add caption"
+          }
+        )
+      ] })
+    ] }),
+    captions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section captions-panel-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "captions-panel-empty-title", children: "Start your first caption" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "captions-panel-empty-subtitle", children: "Use the button above to add the first caption block for the active track." }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: addCaption,
+          className: "btn-primary captions-panel-empty-button",
+          title: "Add first caption",
+          children: "Add caption"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section captions-panel-list", children: captions.map((caption, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "captions-panel-item",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-item-header", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-time captions-panel-time-start", children: formatTime(caption.s) }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "captions-panel-time captions-panel-time-end", children: formatTime(caption.e) })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "captions-panel-item-body", children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "captions-panel-actions", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => splitCaption(i),
+                    className: "btn-ghost captions-panel-action-button",
+                    title: "Split caption at midpoint",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-sm" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: () => deleteCaption(i),
+                    className: "btn-ghost captions-panel-action-button",
+                    title: "Delete caption",
+                    children: /* @__PURE__ */ jsxRuntime.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 = timeline.computeCaptionGeometry(HIGHLIGHT_BG_FONT_SIZE, timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT);
+const WORD_BY_WORD_GEOMETRY = timeline.computeCaptionGeometry(WORD_BY_WORD_FONT_SIZE, timeline.CAPTION_STYLE.WORD_BY_WORD);
+const WORD_BY_WORD_WITH_BG_GEOMETRY = timeline.computeCaptionGeometry(WORD_BY_WORD_WITH_BG_FONT_SIZE, timeline.CAPTION_STYLE.WORD_BY_WORD_WITH_BG);
+const OUTLINE_ONLY_GEOMETRY = timeline.computeCaptionGeometry(OUTLINE_ONLY_FONT_SIZE, timeline.CAPTION_STYLE.OUTLINE_ONLY);
+const SOFT_BOX_GEOMETRY = timeline.computeCaptionGeometry(SOFT_BOX_FONT_SIZE, timeline.CAPTION_STYLE.SOFT_BOX);
 const CAPTION_PROPS = {
   [timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
     font: {
-      size: 46,
+      size: HIGHLIGHT_BG_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4734,15 +4792,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"
   },
   [timeline.CAPTION_STYLE.WORD_BY_WORD]: {
     font: {
-      size: 46,
+      size: WORD_BY_WORD_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4751,15 +4810,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
   },
   [timeline.CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
     font: {
-      size: 46,
+      size: WORD_BY_WORD_WITH_BG_FONT_SIZE,
       weight: 700,
       family: "Bangers"
     },
@@ -4768,14 +4828,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
   },
   [timeline.CAPTION_STYLE.OUTLINE_ONLY]: {
     font: {
-      size: 42,
+      size: OUTLINE_ONLY_FONT_SIZE,
       weight: 600,
       family: "Arial"
     },
@@ -4784,7 +4845,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],
@@ -4793,7 +4855,7 @@ const CAPTION_PROPS = {
   },
   [timeline.CAPTION_STYLE.SOFT_BOX]: {
     font: {
-      size: 40,
+      size: SOFT_BOX_FONT_SIZE,
       weight: 600,
       family: "Montserrat"
     },
@@ -4802,7 +4864,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],
@@ -6321,6 +6384,116 @@ const CAPTION_COLOR = {
   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(VideoEditor.AVAILABLE_TEXT_FONTS);
 function CaptionPropPanel({
   selectedElement,
   updateElement
@@ -6338,24 +6511,42 @@ function CaptionPropPanel({
     bgColor: CAPTION_COLOR.bgColor,
     outlineColor: CAPTION_COLOR.outlineColor
   });
+  const [useHighlight, setUseHighlight] = react.useState(true);
+  const [useOutline, setUseOutline] = react.useState(true);
   const track = selectedElement instanceof timeline.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 = timeline.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 {
@@ -6364,10 +6555,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);
     }
@@ -6393,11 +6585,62 @@ function CaptionPropPanel({
         bgColor: (c == null ? void 0 : c.bgColor) ?? CAPTION_COLOR.bgColor,
         outlineColor: (c == null ? void 0 : c.outlineColor) ?? CAPTION_COLOR.outlineColor
       });
+      setUseHighlight((c == null ? void 0 : c.highlight) != null);
+      setUseOutline((c == null ? void 0 : c.outlineColor) != null);
     }
   }, [selectedElement, applyToAll, changeLog]);
   if (!(selectedElement instanceof timeline.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__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "color",
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            className: "color-picker"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value,
+            onChange: (e) => handleChange(e.target.value),
+            className: "color-text"
+          }
+        )
+      ] })
+    ] }, key);
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Caption Style" }),
@@ -6444,7 +6687,7 @@ function CaptionPropPanel({
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Font" }),
-      /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.jsx(
         "select",
         {
           value: fontFamily,
@@ -6454,111 +6697,59 @@ function CaptionPropPanel({
             handleUpdateCaption({ fontFamily: value });
           },
           className: "select-dark w-full",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Bangers", children: "Bangers" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Arial", children: "Arial" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Helvetica", children: "Helvetica" }),
-            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "Times New Roman", children: "Times New Roman" })
-          ]
+          children: CAPTION_FONTS.map((font) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: font, children: font }, font))
         }
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Colors" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-section", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Text Color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Background Color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "color-control", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Outline Color" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "color-inputs", children: [
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: useHighlight,
+              onChange: (e) => {
+                const enabled = e.target.checked;
+                setUseHighlight(enabled);
+                const nextColors = enabled ? { ...colors, highlight: colors.highlight || CAPTION_COLOR.highlight } : { ...colors };
+                setColors(nextColors);
+                handleUpdateCaption({
+                  colors: nextColors,
+                  useHighlightOverride: enabled
+                });
+              },
+              className: "checkbox-purple"
+            }
+          ),
+          "Use Highlight Color"
+        ] }) }),
+        currentColorMeta.usedColors.includes("outlineColor") && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: useOutline,
+              onChange: (e) => {
+                const enabled = e.target.checked;
+                setUseOutline(enabled);
+                const nextColors = enabled ? {
+                  ...colors,
+                  outlineColor: colors.outlineColor || CAPTION_COLOR.outlineColor
+                } : { ...colors };
+                setColors(nextColors);
+                handleUpdateCaption({
+                  colors: nextColors,
+                  useOutlineOverride: enabled
+                });
+              },
+              className: "checkbox-purple"
+            }
+          ),
+          "Use Outline Color"
+        ] }) }),
+        currentColorMeta.usedColors.map((key) => renderColorControl(key))
       ] })
     ] })
   ] });