@twick/studio 0.15.23 → 0.15.25

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";
@@ -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],
@@ -4908,141 +4971,13 @@ function CaptionsPanelContainer() {
   const captionsPanelProps = useCaptionsPanel();
   return /* @__PURE__ */ jsx(CaptionsPanel, { ...captionsPanelProps });
 }
-const FAL_IMAGE_ENDPOINTS = [
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux-pro/kontext",
-    label: "FLUX.1 Kontext [pro]",
-    description: "Professional image generation with context-aware editing",
-    popularity: 5,
-    category: "image",
-    inputAsset: ["image"],
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux/dev",
-    label: "FLUX.1 [dev]",
-    description: "High-quality image generation",
-    popularity: 5,
-    category: "image",
-    minSteps: 1,
-    maxSteps: 50,
-    defaultSteps: 28,
-    minGuidanceScale: 1,
-    maxGuidanceScale: 20,
-    defaultGuidanceScale: 3.5,
-    hasSeed: true
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/flux/schnell",
-    label: "FLUX.1 [schnell]",
-    description: "Ultra-fast image generation",
-    popularity: 4,
-    category: "image",
-    defaultSteps: 4,
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/gemini-25-flash-image",
-    label: "Gemini 2.5 Flash Image",
-    description: "Rapid text-to-image generation",
-    popularity: 5,
-    category: "image",
-    availableDimensions: [
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" },
-      { width: 1024, height: 768, label: "1024x768 (4:3)" },
-      { width: 768, height: 1024, label: "768x1024 (3:4)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/ideogram/v3",
-    label: "Ideogram V3",
-    description: "Advanced text-to-image with superior text rendering",
-    popularity: 5,
-    category: "image",
-    hasSeed: true,
-    hasNegativePrompt: true
-  }
-];
-const FAL_VIDEO_ENDPOINTS = [
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3",
-    label: "Veo 3",
-    description: "Google Veo 3 text-to-video",
-    popularity: 5,
-    category: "video",
-    availableDurations: [4, 6, 8],
-    defaultDuration: 8,
-    availableDimensions: [
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3/fast",
-    label: "Veo 3 Fast",
-    description: "Accelerated Veo 3 text-to-video",
-    popularity: 5,
-    category: "video",
-    availableDurations: [4, 6, 8],
-    defaultDuration: 8,
-    availableDimensions: [
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/veo3/image-to-video",
-    label: "Veo 3 Image-to-Video",
-    description: "Animate images with Veo 3",
-    popularity: 5,
-    category: "video",
-    inputAsset: ["image"],
-    availableDurations: [8],
-    defaultDuration: 8
-  },
-  {
-    provider: "fal",
-    endpointId: "fal-ai/kling-video/v2.5-turbo/pro/text-to-video",
-    label: "Kling 2.5 Turbo Pro",
-    description: "Text-to-video with fluid motion",
-    popularity: 5,
-    category: "video",
-    availableDurations: [5, 10],
-    defaultDuration: 5,
-    availableDimensions: [
-      { width: 1024, height: 576, label: "1024x576 (16:9)" },
-      { width: 576, height: 1024, label: "576x1024 (9:16)" },
-      { width: 1024, height: 1024, label: "1024x1024 (1:1)" }
-    ]
-  }
-];
 const DEFAULT_IMAGE_DURATION = 5;
 function GenerateMediaPanelContainer({
   videoResolution,
   addElement,
   studioConfig
 }) {
-  var _a;
+  var _a, _b, _c;
   const { getCurrentTime } = useLivePlayerContext();
   const [tab, setTab] = useState("image");
   const [prompt2, setPrompt] = useState("");
@@ -5053,8 +4988,12 @@ function GenerateMediaPanelContainer({
   const imageService = studioConfig == null ? void 0 : studioConfig.imageGenerationService;
   const videoService = studioConfig == null ? void 0 : studioConfig.videoGenerationService;
   const hasAnyService = !!imageService || !!videoService;
-  const endpoints = tab === "image" ? FAL_IMAGE_ENDPOINTS : FAL_VIDEO_ENDPOINTS;
-  const defaultEndpointId = ((_a = endpoints[0]) == null ? void 0 : _a.endpointId) ?? "";
+  const imageModels = ((_a = imageService == null ? void 0 : imageService.getAvailableModels) == null ? void 0 : _a.call(imageService)) ?? [];
+  const videoModels = ((_b = videoService == null ? void 0 : videoService.getAvailableModels) == null ? void 0 : _b.call(videoService)) ?? [];
+  const endpoints = tab === "image" ? imageModels : videoModels;
+  const defaultEndpointId = ((_c = endpoints[0]) == null ? void 0 : _c.endpointId) ?? "";
+  const selectedEndpoint = endpoints.find((endpoint) => endpoint.endpointId === selectedEndpointId) ?? endpoints[0];
+  const selectedProvider = selectedEndpoint == null ? void 0 : selectedEndpoint.provider;
   useEffect(() => {
     if (!selectedEndpointId && defaultEndpointId) {
       setSelectedEndpointId(defaultEndpointId);
@@ -5116,9 +5055,16 @@ function GenerateMediaPanelContainer({
     setStatus("Starting...");
     try {
       const endpointId = selectedEndpointId || defaultEndpointId;
+      const provider = selectedProvider;
+      if (!endpointId || !provider) {
+        setError("No model is configured for this tab");
+        setIsGenerating(false);
+        setStatus(null);
+        return;
+      }
       if (tab === "image" && imageService) {
         const requestId = await imageService.generateImage({
-          provider: "fal",
+          provider,
           endpointId,
           prompt: prompt2.trim()
         });
@@ -5128,7 +5074,7 @@ function GenerateMediaPanelContainer({
         }
       } else if (tab === "video" && videoService) {
         const requestId = await videoService.generateVideo({
-          provider: "fal",
+          provider,
           endpointId,
           prompt: prompt2.trim()
         });
@@ -5150,7 +5096,8 @@ function GenerateMediaPanelContainer({
     defaultEndpointId,
     imageService,
     videoService,
-    pollStatus
+    pollStatus,
+    selectedProvider
   ]);
   if (!hasAnyService) {
     return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Image and video generation require configuration. Add imageGenerationService and videoGenerationService to StudioConfig." }) });
@@ -6438,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
@@ -6455,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 {
@@ -6481,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);
     }
@@ -6510,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" }),
@@ -6561,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,
@@ -6571,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))
       ] })
     ] })
   ] });