@twick/studio 0.15.19 → 0.15.20

package/dist/index.js

@@ -560,7 +560,8 @@ const toolCategories = [
   { id: "text", name: "Text", icon: "Type", description: "Add text elements" },
   { id: "circle", name: "Circle", icon: "Circle", description: "Add a circle element" },
   { id: "rect", name: "Rect", icon: "Rect", description: "Add a rectangle element" },
-  { id: "caption", name: "Caption", icon: "MessageSquare", description: "Manage captions" }
+  { id: "caption", name: "Caption", icon: "MessageSquare", description: "Manage captions" },
+  { id: "generate-media", name: "Generate", icon: "Wand2", description: "Generate image or video with AI" }
 ];
 const getIcon = (iconName) => {
   switch (iconName) {
@@ -584,6 +585,8 @@ const getIcon = (iconName) => {
       return Square;
     case "MessageSquare":
       return MessageSquare;
+    case "Wand2":
+      return WandSparkles;
     default:
       return Plus;
   }
@@ -2828,6 +2831,42 @@ const CAPTION_PROPS = {
     shadowOffset: [-2, 2],
     shadowColor: "#000000",
     shadowBlur: 5
+  },
+  [timeline.CAPTION_STYLE.OUTLINE_ONLY]: {
+    font: {
+      size: 42,
+      weight: 600,
+      family: "Arial"
+    },
+    colors: {
+      text: "#ffffff",
+      highlight: "#ff4081",
+      bgColor: "#000000"
+    },
+    lineWidth: 0.5,
+    stroke: "#000000",
+    fontWeight: 600,
+    shadowOffset: [0, 0],
+    shadowColor: "#000000",
+    shadowBlur: 0
+  },
+  [timeline.CAPTION_STYLE.SOFT_BOX]: {
+    font: {
+      size: 40,
+      weight: 600,
+      family: "Montserrat"
+    },
+    colors: {
+      text: "#ffffff",
+      highlight: "#ff4081",
+      bgColor: "#333333"
+    },
+    lineWidth: 0.2,
+    stroke: "#000000",
+    fontWeight: 600,
+    shadowOffset: [-1, 1],
+    shadowColor: "rgba(0,0,0,0.3)",
+    shadowBlur: 3
   }
 };
 const useCaptionsPanel = () => {
@@ -2917,13 +2956,324 @@ function CaptionsPanelContainer() {
   const captionsPanelProps = useCaptionsPanel();
   return /* @__PURE__ */ jsxRuntime.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;
+  const { getCurrentTime } = livePlayer.useLivePlayerContext();
+  const [tab, setTab] = react.useState("image");
+  const [prompt2, setPrompt] = react.useState("");
+  const [selectedEndpointId, setSelectedEndpointId] = react.useState("");
+  const [isGenerating, setIsGenerating] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [status, setStatus] = react.useState(null);
+  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) ?? "";
+  react.useEffect(() => {
+    if (!selectedEndpointId && defaultEndpointId) {
+      setSelectedEndpointId(defaultEndpointId);
+    }
+  }, [tab, defaultEndpointId, selectedEndpointId]);
+  const pollStatus = react.useCallback(
+    async (requestId) => {
+      const service = tab === "image" ? imageService : videoService;
+      if (!service) return;
+      const interval = setInterval(async () => {
+        try {
+          const result = await service.getRequestStatus(requestId);
+          if (result.status === "completed" && result.url) {
+            clearInterval(interval);
+            setIsGenerating(false);
+            setStatus(null);
+            setError(null);
+            const currentTime = getCurrentTime();
+            const duration = result.duration ?? DEFAULT_IMAGE_DURATION;
+            if (tab === "image") {
+              const element = new timeline.ImageElement(result.url, videoResolution);
+              element.setStart(currentTime);
+              element.setEnd(currentTime + duration);
+              addElement(element);
+            } else {
+              const element = new timeline.VideoElement(result.url, videoResolution);
+              element.setStart(currentTime);
+              element.setEnd(currentTime + duration);
+              addElement(element);
+            }
+          } else if (result.status === "failed") {
+            clearInterval(interval);
+            setIsGenerating(false);
+            setStatus(null);
+            setError(result.error ?? "Generation failed");
+          }
+        } catch {
+        }
+      }, 3e3);
+      return () => clearInterval(interval);
+    },
+    [tab, imageService, videoService, getCurrentTime, videoResolution, addElement]
+  );
+  const handleGenerate = react.useCallback(async () => {
+    if (!prompt2.trim()) {
+      setError("Enter a prompt");
+      return;
+    }
+    if (tab === "image" && !imageService) {
+      setError("Image generation not configured");
+      return;
+    }
+    if (tab === "video" && !videoService) {
+      setError("Video generation not configured");
+      return;
+    }
+    setIsGenerating(true);
+    setError(null);
+    setStatus("Starting...");
+    try {
+      const endpointId = selectedEndpointId || defaultEndpointId;
+      if (tab === "image" && imageService) {
+        const requestId = await imageService.generateImage({
+          provider: "fal",
+          endpointId,
+          prompt: prompt2.trim()
+        });
+        if (requestId) {
+          setStatus("Generating image...");
+          pollStatus(requestId);
+        }
+      } else if (tab === "video" && videoService) {
+        const requestId = await videoService.generateVideo({
+          provider: "fal",
+          endpointId,
+          prompt: prompt2.trim()
+        });
+        if (requestId) {
+          setStatus("Generating video (this may take several minutes)...");
+          pollStatus(requestId);
+        }
+      }
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Generation failed";
+      setError(msg);
+      setIsGenerating(false);
+      setStatus(null);
+    }
+  }, [
+    tab,
+    prompt2,
+    selectedEndpointId,
+    defaultEndpointId,
+    imageService,
+    videoService,
+    pollStatus
+  ]);
+  if (!hasAnyService) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Image and video generation require configuration. Add imageGenerationService and videoGenerationService to StudioConfig." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `btn-ghost ${tab === "image" ? "active" : ""}`,
+          onClick: () => setTab("image"),
+          disabled: !imageService,
+          children: "Image"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: `btn-ghost ${tab === "video" ? "active" : ""}`,
+          onClick: () => setTab("video"),
+          disabled: !videoService,
+          children: "Video"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm mb-1", children: "Model" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          className: "w-full p-2 border rounded",
+          value: selectedEndpointId,
+          onChange: (e) => setSelectedEndpointId(e.target.value),
+          disabled: isGenerating,
+          children: endpoints.map((ep) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: ep.endpointId, children: ep.label }, ep.endpointId))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "block text-sm mb-1", children: "Prompt" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          className: "w-full p-2 border rounded min-h-[80px]",
+          value: prompt2,
+          onChange: (e) => setPrompt(e.target.value),
+          placeholder: "Describe the image or video you want...",
+          disabled: isGenerating
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-red-600 text-sm", children: error }),
+    status && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2 text-sm text-gray-600", children: status }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: "btn-primary w-full",
+        onClick: handleGenerate,
+        disabled: isGenerating || !prompt2.trim(),
+        children: isGenerating ? "Generating..." : `Generate ${tab}`
+      }
+    )
+  ] }) });
+}
 const ElementPanelContainer = ({
   selectedTool,
   videoResolution,
   selectedElement,
   addElement,
   updateElement,
-  uploadConfig
+  uploadConfig,
+  studioConfig
 }) => {
   const addNewElement = async (element) => {
     await addElement(element);
@@ -2994,6 +3344,17 @@ const ElementPanelContainer = ({
         );
       case "caption":
         return /* @__PURE__ */ jsxRuntime.jsx(CaptionsPanelContainer, {});
+      case "generate-media":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          GenerateMediaPanelContainer,
+          {
+            videoResolution,
+            selectedElement,
+            addElement: addNewElement,
+            updateElement,
+            studioConfig
+          }
+        );
       default:
         return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
           /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
@@ -3468,6 +3829,258 @@ function Animation({
     })() })
   ] });
 }
+const CAPTION_FONT = {
+  size: 40,
+  family: "Bangers"
+};
+const CAPTION_COLOR = {
+  text: "#ffffff",
+  highlight: "#ff4081",
+  bgColor: "#8C52FF",
+  outlineColor: "#000000"
+};
+function CaptionPropPanel({
+  selectedElement,
+  updateElement
+}) {
+  const { editor, changeLog } = timeline.useTimelineContext();
+  const captionRef = react.useRef(null);
+  const [capStyle, setCapStyle] = react.useState(
+    timeline.CAPTION_STYLE_OPTIONS[timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT]
+  );
+  const [fontSize, setFontSize] = react.useState(CAPTION_FONT.size);
+  const [fontFamily, setFontFamily] = react.useState(CAPTION_FONT.family);
+  const [colors, setColors] = react.useState({
+    text: CAPTION_COLOR.text,
+    highlight: CAPTION_COLOR.highlight,
+    bgColor: CAPTION_COLOR.bgColor,
+    outlineColor: CAPTION_COLOR.outlineColor
+  });
+  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;
+    if (applyToAll && track) {
+      const nextFont = {
+        size: updates.fontSize ?? fontSize,
+        family: updates.fontFamily ?? fontFamily
+      };
+      const nextColors = updates.colors ?? colors;
+      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
+      });
+      editor.refresh();
+    } else {
+      const elementProps = captionElement.getProps() ?? {};
+      captionElement.setProps({
+        ...elementProps,
+        capStyle: updates.style ?? (capStyle == null ? void 0 : capStyle.value),
+        font: {
+          size: updates.fontSize ?? fontSize,
+          family: updates.fontFamily ?? fontFamily
+        },
+        colors: updates.colors ?? colors
+      });
+      updateElement == null ? void 0 : updateElement(captionElement);
+    }
+  };
+  react.useEffect(() => {
+    var _a, _b;
+    const captionElement = selectedElement;
+    if (captionElement) {
+      if (captionRef.current) {
+        captionRef.current.value = captionElement == null ? void 0 : captionElement.getText();
+      }
+      const props = applyToAll ? trackProps : captionElement.getProps() ?? {};
+      const _capStyle = props == null ? void 0 : props.capStyle;
+      if (_capStyle && _capStyle in timeline.CAPTION_STYLE_OPTIONS) {
+        setCapStyle(timeline.CAPTION_STYLE_OPTIONS[_capStyle]);
+      }
+      setFontSize(((_a = props == null ? void 0 : props.font) == null ? void 0 : _a.size) ?? CAPTION_FONT.size);
+      setFontFamily(((_b = props == null ? void 0 : props.font) == null ? void 0 : _b.family) ?? CAPTION_FONT.family);
+      const c = props == null ? void 0 : props.colors;
+      setColors({
+        text: (c == null ? void 0 : c.text) ?? CAPTION_COLOR.text,
+        highlight: (c == null ? void 0 : c.highlight) ?? CAPTION_COLOR.highlight,
+        bgColor: (c == null ? void 0 : c.bgColor) ?? CAPTION_COLOR.bgColor,
+        outlineColor: (c == null ? void 0 : c.outlineColor) ?? CAPTION_COLOR.outlineColor
+      });
+    }
+  }, [selectedElement, applyToAll, changeLog]);
+  if (!(selectedElement instanceof timeline.CaptionElement)) {
+    return null;
+  }
+  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" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          value: capStyle.value,
+          onChange: (e) => {
+            const val = e.target.value;
+            if (val in timeline.CAPTION_STYLE_OPTIONS) {
+              setCapStyle(timeline.CAPTION_STYLE_OPTIONS[val]);
+            }
+            handleUpdateCaption({ style: e.target.value });
+          },
+          className: "select-dark w-full",
+          children: Object.values(timeline.CAPTION_STYLE_OPTIONS).map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Font Size" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "slider-container", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "range",
+            min: "8",
+            max: "72",
+            step: "1",
+            value: fontSize,
+            onChange: (e) => {
+              const value = Number(e.target.value);
+              setFontSize(value);
+              handleUpdateCaption({ fontSize: value });
+            },
+            className: "slider-purple"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "slider-value", children: [
+          fontSize,
+          "px"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Font" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: fontFamily,
+          onChange: (e) => {
+            const value = e.target.value;
+            setFontFamily(value);
+            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" })
+          ]
+        }
+      )
+    ] }),
+    /* @__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"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
 const MIN_DB = -60;
 const MAX_DB = 6;
 function linearToDb(linear) {
@@ -3915,6 +4528,7 @@ function TextPropsPanel({
     )
   ] });
 }
+const DEFAULT_CANVAS_BACKGROUND = "#000000";
 function PropertiesPanelContainer({
   selectedElement,
   updateElement,
@@ -3924,26 +4538,66 @@ function PropertiesPanelContainer({
   pollingIntervalMs,
   videoResolution
 }) {
+  const { editor, present } = timeline.useTimelineContext();
+  const backgroundColor = (present == null ? void 0 : present.backgroundColor) ?? editor.getBackgroundColor() ?? DEFAULT_CANVAS_BACKGROUND;
+  const handleBackgroundColorChange = react.useCallback(
+    (value) => {
+      editor.setBackgroundColor(value);
+    },
+    [editor]
+  );
   const title = selectedElement instanceof timeline.TextElement ? selectedElement.getText() : (selectedElement == null ? void 0 : selectedElement.getName()) || (selectedElement == null ? void 0 : selectedElement.getType()) || "Element";
   return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: "properties-panel", "aria-label": "Element properties inspector", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "properties-header", children: [
       !selectedElement && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Composition" }),
-      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Edit from the captions panel" }),
+      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Caption" }),
       selectedElement && selectedElement.getType() !== "caption" && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: title })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "prop-content", children: [
       !selectedElement && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-title", children: "Canvas & Render" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-group", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "property-section", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "property-label", children: "Size" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "properties-size-readonly", children: [
-            videoResolution.width,
-            " × ",
-            videoResolution.height
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "properties-group", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "property-section", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "property-label", children: "Size" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "properties-size-readonly", children: [
+              videoResolution.width,
+              " × ",
+              videoResolution.height
+            ] })
+          ] }),
+          /* @__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: backgroundColor,
+                  onChange: (e) => handleBackgroundColorChange(e.target.value),
+                  className: "color-picker"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "text",
+                  value: backgroundColor,
+                  onChange: (e) => handleBackgroundColorChange(e.target.value),
+                  className: "color-text"
+                }
+              )
+            ] })
           ] })
-        ] }) })
+        ] })
       ] }),
-      selectedElement && selectedElement.getType() === "caption" ? null : selectedElement && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
+      selectedElement instanceof timeline.CaptionElement && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        CaptionPropPanel,
+        {
+          selectedElement,
+          updateElement
+        }
+      ) }),
+      selectedElement && !(selectedElement instanceof timeline.CaptionElement) && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (() => {
         const isText = selectedElement instanceof timeline.TextElement;
         const isVideo = selectedElement instanceof timeline.VideoElement;
         const isAudio = selectedElement instanceof timeline.AudioElement;
@@ -4105,7 +4759,7 @@ function TwickStudio({ studioConfig }) {
     addElement,
     updateElement
   } = useStudioManager();
-  const { videoResolution, setVideoResolution } = timeline.useTimelineContext();
+  const { editor, present, videoResolution, setVideoResolution } = timeline.useTimelineContext();
   const {
     onNewProject,
     onLoadProject,
@@ -4119,16 +4773,20 @@ function TwickStudio({ studioConfig }) {
     pollingIntervalMs
   } = useGenerateCaptions(studioConfig);
   const twickStudiConfig = react.useMemo(
-    () => ({
-      canvasMode: true,
-      ...studioConfig || {},
-      videoProps: {
-        ...(studioConfig == null ? void 0 : studioConfig.videoProps) || {},
-        width: videoResolution.width,
-        height: videoResolution.height
-      }
-    }),
-    [videoResolution, studioConfig]
+    () => {
+      var _a2;
+      return {
+        canvasMode: true,
+        ...studioConfig || {},
+        videoProps: {
+          ...(studioConfig == null ? void 0 : studioConfig.videoProps) || {},
+          width: videoResolution.width,
+          height: videoResolution.height,
+          backgroundColor: (present == null ? void 0 : present.backgroundColor) ?? editor.getBackgroundColor() ?? ((_a2 = studioConfig == null ? void 0 : studioConfig.videoProps) == null ? void 0 : _a2.backgroundColor)
+        }
+      };
+    },
+    [videoResolution, studioConfig, present == null ? void 0 : present.backgroundColor, editor]
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MediaProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "studio-container", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -4158,7 +4816,8 @@ function TwickStudio({ studioConfig }) {
           selectedElement,
           addElement,
           updateElement,
-          uploadConfig: twickStudiConfig.uploadConfig
+          uploadConfig: twickStudiConfig.uploadConfig,
+          studioConfig: twickStudiConfig
         }
       ) }),
       /* @__PURE__ */ jsxRuntime.jsx("main", { className: "main-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsxRuntime.jsx(