@twick/studio 0.15.13 → 0.15.15

package/dist/index.mjs

@@ -3,9 +3,9 @@ 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, createContext, useContext, useCallback, useMemo } from "react";
-import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, IconElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation, PLAYER_STATE } from "@twick/timeline";
-import { AudioElement as AudioElement2, CAPTION_COLOR, CAPTION_FONT, CAPTION_STYLE as CAPTION_STYLE2, CAPTION_STYLE_OPTIONS, 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 as IconElement2, ImageElement as ImageElement2, PROCESS_STATE, RectElement as RectElement2, TIMELINE_ACTION, TIMELINE_ELEMENT_TYPE, TextElement as TextElement2, TimelineEditor, TimelineProvider, Track as Track2, TrackElement as TrackElement2, VideoElement as VideoElement2, WORDS_PER_PHRASE, generateShortUuid, getCurrentElements, getTotalDuration, isElementId, isTrackId } from "@twick/timeline";
-import VideoEditor, { useEditorManager, BrowserMediaManager, AVAILABLE_TEXT_FONTS, TEXT_EFFECTS, ANIMATIONS } from "@twick/video-editor";
+import { useTimelineContext, TrackElement, Track, ImageElement, AudioElement, VideoElement, TextElement, RectElement, CircleElement, CAPTION_STYLE, CaptionElement, ElementTextEffect, ElementAnimation, PLAYER_STATE } from "@twick/timeline";
+import { AudioElement as AudioElement2, CAPTION_COLOR, CAPTION_FONT, CAPTION_STYLE as CAPTION_STYLE2, CAPTION_STYLE_OPTIONS, 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, 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, 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";
 import { useLivePlayerContext } from "@twick/live-player";
 import { LivePlayer, LivePlayerProvider, PLAYER_STATE as PLAYER_STATE2, generateId, getBaseProject, useLivePlayerContext as useLivePlayerContext2 } from "@twick/live-player";
@@ -114,49 +114,103 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$u = [
-  ["rect", { width: "18", height: "14", x: "3", y: "5", rx: "2", ry: "2", key: "12ruh7" }],
-  ["path", { d: "M7 15h4M15 15h2M7 11h2M13 11h4", key: "1ueiar" }]
+const __iconNode$y = [
+  ["path", { d: "M17 12H7", key: "16if0g" }],
+  ["path", { d: "M19 18H5", key: "18s9l3" }],
+  ["path", { d: "M21 6H3", key: "1jwq7v" }]
 ];
-const Captions = createLucideIcon("captions", __iconNode$u);
+const AlignCenter = createLucideIcon("align-center", __iconNode$y);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$t = [
+const __iconNode$x = [
+  ["path", { d: "M15 12H3", key: "6jk70r" }],
+  ["path", { d: "M17 18H3", key: "1amg6g" }],
+  ["path", { d: "M21 6H3", key: "1jwq7v" }]
+];
+const AlignLeft = createLucideIcon("align-left", __iconNode$x);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$w = [
+  ["path", { d: "M21 12H9", key: "dn1m92" }],
+  ["path", { d: "M21 18H7", key: "1ygte8" }],
+  ["path", { d: "M21 6H3", key: "1jwq7v" }]
+];
+const AlignRight = createLucideIcon("align-right", __iconNode$w);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$v = [
+  [
+    "path",
+    { d: "M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8", key: "mg9rjx" }
+  ]
+];
+const Bold = createLucideIcon("bold", __iconNode$v);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$u = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("chevron-down", __iconNode$u);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$t = [["path", { d: "m9 18 6-6-6-6", key: "mthhwq" }]];
+const ChevronRight = createLucideIcon("chevron-right", __iconNode$t);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$s = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m9 12 2 2 4-4", key: "dzmm74" }]
 ];
-const CircleCheck = createLucideIcon("circle-check", __iconNode$t);
+const CircleCheck = createLucideIcon("circle-check", __iconNode$s);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$s = [
+const __iconNode$r = [
   ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
   ["path", { d: "m15 9-6 6", key: "1uzhvr" }],
   ["path", { d: "m9 9 6 6", key: "z0biqf" }]
 ];
-const CircleX = createLucideIcon("circle-x", __iconNode$s);
+const CircleX = createLucideIcon("circle-x", __iconNode$r);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$r = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-const Circle = createLucideIcon("circle", __iconNode$r);
+const __iconNode$q = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+const Circle = createLucideIcon("circle", __iconNode$q);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$q = [
+const __iconNode$p = [
   [
     "path",
     { d: "M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z", key: "1tn4o7" }
@@ -165,139 +219,172 @@ const __iconNode$q = [
   ["path", { d: "m12.4 3.4 3.1 4", key: "6hsd6n" }],
   ["path", { d: "M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z", key: "ltgou9" }]
 ];
-const Clapperboard = createLucideIcon("clapperboard", __iconNode$q);
+const Clapperboard = createLucideIcon("clapperboard", __iconNode$p);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$p = [
+const __iconNode$o = [
   ["path", { d: "M12 15V3", key: "m9g1x1" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }],
   ["path", { d: "m7 10 5 5 5-5", key: "brsn70" }]
 ];
-const Download = createLucideIcon("download", __iconNode$p);
+const Download = createLucideIcon("download", __iconNode$o);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$o = [
+const __iconNode$n = [
   ["path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z", key: "1rqfz7" }],
   ["path", { d: "M14 2v4a2 2 0 0 0 2 2h4", key: "tnqrlb" }]
 ];
-const File = createLucideIcon("file", __iconNode$o);
+const File = createLucideIcon("file", __iconNode$n);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$n = [
+const __iconNode$m = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
   ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
   ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
 ];
-const Image = createLucideIcon("image", __iconNode$n);
+const Image = createLucideIcon("image", __iconNode$m);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$m = [
-  ["path", { d: "M6 16c5 0 7-8 12-8a4 4 0 0 1 0 8c-5 0-7-8-12-8a4 4 0 1 0 0 8", key: "18ogeb" }]
+const __iconNode$l = [
+  ["line", { x1: "19", x2: "10", y1: "4", y2: "4", key: "15jd3p" }],
+  ["line", { x1: "14", x2: "5", y1: "20", y2: "20", key: "bu0au3" }],
+  ["line", { x1: "15", x2: "9", y1: "4", y2: "20", key: "uljnxc" }]
 ];
-const Infinity = createLucideIcon("infinity", __iconNode$m);
+const Italic = createLucideIcon("italic", __iconNode$l);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$l = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$l);
+const __iconNode$k = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __iconNode$k);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$k = [
+const __iconNode$j = [
   ["path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z", key: "1lielz" }]
 ];
-const MessageSquare = createLucideIcon("message-square", __iconNode$k);
+const MessageSquare = createLucideIcon("message-square", __iconNode$j);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$j = [
+const __iconNode$i = [
+  ["circle", { cx: "8", cy: "18", r: "4", key: "1fc0mg" }],
+  ["path", { d: "M12 18V2l7 4", key: "g04rme" }]
+];
+const Music2 = createLucideIcon("music-2", __iconNode$i);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$h = [
   ["path", { d: "M9 18V5l12-2v13", key: "1jmyc2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["circle", { cx: "18", cy: "16", r: "3", key: "1hluhg" }]
 ];
-const Music = createLucideIcon("music", __iconNode$j);
+const Music = createLucideIcon("music", __iconNode$h);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$i = [
+const __iconNode$g = [
   ["rect", { x: "14", y: "4", width: "4", height: "16", rx: "1", key: "zuxfzm" }],
   ["rect", { x: "6", y: "4", width: "4", height: "16", rx: "1", key: "1okwgv" }]
 ];
-const Pause = createLucideIcon("pause", __iconNode$i);
+const Pause = createLucideIcon("pause", __iconNode$g);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$h = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$h);
+const __iconNode$f = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __iconNode$f);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$g = [
+const __iconNode$e = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$g);
+const Plus = createLucideIcon("plus", __iconNode$e);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$f = [
+const __iconNode$d = [
   ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }]
 ];
-const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$f);
+const RectangleHorizontal = createLucideIcon("rectangle-horizontal", __iconNode$d);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$e = [
+const __iconNode$c = [
   ["rect", { width: "12", height: "20", x: "6", y: "2", rx: "2", key: "1oxtiu" }]
 ];
-const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$e);
+const RectangleVertical = createLucideIcon("rectangle-vertical", __iconNode$c);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$d = [
+const __iconNode$b = [
+  [
+    "path",
+    {
+      d: "M21.3 15.3a2.4 2.4 0 0 1 0 3.4l-2.6 2.6a2.4 2.4 0 0 1-3.4 0L2.7 8.7a2.41 2.41 0 0 1 0-3.4l2.6-2.6a2.41 2.41 0 0 1 3.4 0Z",
+      key: "icamh8"
+    }
+  ],
+  ["path", { d: "m14.5 12.5 2-2", key: "inckbg" }],
+  ["path", { d: "m11.5 9.5 2-2", key: "fmmyf7" }],
+  ["path", { d: "m8.5 6.5 2-2", key: "vc6u1g" }],
+  ["path", { d: "m17.5 15.5 2-2", key: "wo5hmg" }]
+];
+const Ruler = createLucideIcon("ruler", __iconNode$b);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$a = [
   [
     "path",
     {
@@ -308,56 +395,28 @@ const __iconNode$d = [
   ["path", { d: "M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7", key: "1ydtos" }],
   ["path", { d: "M7 3v4a1 1 0 0 0 1 1h7", key: "t51u73" }]
 ];
-const Save = createLucideIcon("save", __iconNode$d);
+const Save = createLucideIcon("save", __iconNode$a);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$c = [
+const __iconNode$9 = [
   ["circle", { cx: "6", cy: "6", r: "3", key: "1lh9wr" }],
   ["path", { d: "M8.12 8.12 12 12", key: "1alkpv" }],
   ["path", { d: "M20 4 8.12 15.88", key: "xgtan2" }],
   ["circle", { cx: "6", cy: "18", r: "3", key: "fqmcym" }],
   ["path", { d: "M14.8 14.8 20 20", key: "ptml3r" }]
 ];
-const Scissors = createLucideIcon("scissors", __iconNode$c);
-/**
- * @license lucide-react v0.511.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$b = [
-  ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
-  ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-];
-const Search = createLucideIcon("search", __iconNode$b);
-/**
- * @license lucide-react v0.511.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode$a = [
-  [
-    "path",
-    {
-      d: "M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z",
-      key: "1qme2f"
-    }
-  ],
-  ["circle", { cx: "12", cy: "12", r: "3", key: "1v7zrd" }]
-];
-const Settings = createLucideIcon("settings", __iconNode$a);
+const Scissors = createLucideIcon("scissors", __iconNode$9);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$9 = [
+const __iconNode$8 = [
   [
     "path",
     {
@@ -370,62 +429,62 @@ const __iconNode$9 = [
   ["path", { d: "M4 17v2", key: "vumght" }],
   ["path", { d: "M5 18H3", key: "zchphs" }]
 ];
-const Sparkles = createLucideIcon("sparkles", __iconNode$9);
+const Sparkles = createLucideIcon("sparkles", __iconNode$8);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$8 = [
+const __iconNode$7 = [
   ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }]
 ];
-const Square = createLucideIcon("square", __iconNode$8);
+const Square = createLucideIcon("square", __iconNode$7);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$7 = [
+const __iconNode$6 = [
   ["path", { d: "M3 6h18", key: "d0wm0j" }],
   ["path", { d: "M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6", key: "4alrt4" }],
   ["path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2", key: "v07s0e" }],
   ["line", { x1: "10", x2: "10", y1: "11", y2: "17", key: "1uufr5" }],
   ["line", { x1: "14", x2: "14", y1: "11", y2: "17", key: "xtxkd" }]
 ];
-const Trash2 = createLucideIcon("trash-2", __iconNode$7);
+const Trash2 = createLucideIcon("trash-2", __iconNode$6);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$6 = [
+const __iconNode$5 = [
   ["path", { d: "M12 4v16", key: "1654pz" }],
   ["path", { d: "M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2", key: "e0r10z" }],
   ["path", { d: "M9 20h6", key: "s66wpe" }]
 ];
-const Type = createLucideIcon("type", __iconNode$6);
+const Type = createLucideIcon("type", __iconNode$5);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$5 = [
+const __iconNode$4 = [
   ["path", { d: "M12 3v12", key: "1x0j5s" }],
   ["path", { d: "m17 8-5-5-5 5", key: "7q97r8" }],
   ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4", key: "ih7n3h" }]
 ];
-const Upload = createLucideIcon("upload", __iconNode$5);
+const Upload = createLucideIcon("upload", __iconNode$4);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$4 = [
+const __iconNode$3 = [
   [
     "path",
     {
@@ -435,14 +494,14 @@ const __iconNode$4 = [
   ],
   ["rect", { x: "2", y: "6", width: "14", height: "12", rx: "2", key: "158x01" }]
 ];
-const Video = createLucideIcon("video", __iconNode$4);
+const Video = createLucideIcon("video", __iconNode$3);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$3 = [
+const __iconNode$2 = [
   [
     "path",
     {
@@ -453,14 +512,14 @@ const __iconNode$3 = [
   ["path", { d: "M16 9a5 5 0 0 1 0 6", key: "1q6k2b" }],
   ["path", { d: "M19.364 18.364a9 9 0 0 0 0-12.728", key: "ijwkga" }]
 ];
-const Volume2 = createLucideIcon("volume-2", __iconNode$3);
+const Volume2 = createLucideIcon("volume-2", __iconNode$2);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$2 = [
+const __iconNode$1 = [
   [
     "path",
     {
@@ -471,14 +530,14 @@ const __iconNode$2 = [
   ["line", { x1: "22", x2: "16", y1: "9", y2: "15", key: "1ewh16" }],
   ["line", { x1: "16", x2: "22", y1: "9", y2: "15", key: "5ykzw1" }]
 ];
-const VolumeX = createLucideIcon("volume-x", __iconNode$2);
+const VolumeX = createLucideIcon("volume-x", __iconNode$1);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$1 = [
+const __iconNode = [
   [
     "path",
     {
@@ -494,41 +553,22 @@ const __iconNode$1 = [
   ["path", { d: "M21 16h-4", key: "1cnmox" }],
   ["path", { d: "M11 3H9", key: "1obp7u" }]
 ];
-const WandSparkles = createLucideIcon("wand-sparkles", __iconNode$1);
-/**
- * @license lucide-react v0.511.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-const __iconNode = [
-  [
-    "path",
-    {
-      d: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z",
-      key: "1xq2db"
-    }
-  ]
-];
-const Zap = createLucideIcon("zap", __iconNode);
+const WandSparkles = createLucideIcon("wand-sparkles", __iconNode);
 const toolCategories = [
-  { id: "video", name: "Video", icon: "Video", description: "Video" },
-  { id: "image", name: "Image", icon: "Image", description: "Image" },
-  { id: "audio", name: "Audio", icon: "Audio", description: "Audio" },
-  { id: "text", name: "Text", icon: "Type", description: "Add text elements", shortcut: "T" },
-  { id: "icon", name: "Icons", icon: "Icon", description: "Icon Element", shortcut: "I" },
-  { id: "circle", name: "Circle", icon: "Circle", description: "Circle Element", shortcut: "C" },
-  { id: "rect", name: "Rect", icon: "Rect", description: "Rect Element" },
-  { id: "subtitle", name: "Subtitles", icon: "MessageSquare", description: "Manage subtitles", shortcut: "S" }
+  { id: "video", name: "Video", icon: "Video", description: "Add a video element" },
+  { id: "image", name: "Image", icon: "Image", description: "Add an image element" },
+  { id: "audio", name: "Audio", icon: "Audio", description: "Add an audio element" },
+  { 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" }
 ];
-const getIcon$1 = (iconName) => {
+const getIcon = (iconName) => {
   switch (iconName) {
     case "Plus":
       return Plus;
     case "Type":
       return Type;
-    case "Icon":
-      return Infinity;
     case "Upload":
       return Upload;
     case "Square":
@@ -554,14 +594,16 @@ function Toolbar({ selectedTool, setSelectedTool }) {
     setSelectedTool(toolId);
   };
   return /* @__PURE__ */ jsx("div", { className: "sidebar", children: toolCategories.map((tool) => {
-    const Icon2 = getIcon$1(tool.icon);
+    const Icon2 = getIcon(tool.icon);
     const isSelected = selectedTool === tool.id;
+    const tooltipText = `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`;
     return /* @__PURE__ */ jsxs(
       "div",
       {
         onClick: () => handleToolSelect(tool.id),
         className: `toolbar-btn ${isSelected ? "active" : ""}`,
-        title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
+        title: tooltipText,
+        "data-tooltip": tooltipText,
         children: [
           /* @__PURE__ */ jsx(Icon2, { className: "icon-sm" }),
           /* @__PURE__ */ jsx("span", { className: "toolbar-label", children: tool.name })
@@ -608,28 +650,29 @@ const StudioHeader = ({
   return /* @__PURE__ */ jsxs("header", { className: "header", children: [
     /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsx(Clapperboard, { className: "icon-lg accent-purple" }),
-      /* @__PURE__ */ jsx("h1", { className: "text-gradient", children: "Twick Studio" })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "flex-container", style: { gap: "0.5rem" }, children: [
-      /* @__PURE__ */ jsx("span", { className: "text-sm opacity-80", children: "Orientation" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: `btn-ghost ${orientation === "vertical" ? "btn-primary" : ""}`,
-          title: "Portrait (720×1280)",
-          onClick: () => handleOrientationChange("vertical"),
-          children: /* @__PURE__ */ jsx(RectangleVertical, { className: "icon-sm" })
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          className: `btn-ghost ${orientation === "horizontal" ? "btn-primary" : ""}`,
-          title: "Landscape (1280×720)",
-          onClick: () => handleOrientationChange("horizontal"),
-          children: /* @__PURE__ */ jsx(RectangleHorizontal, { className: "icon-sm" })
-        }
-      )
+      /* @__PURE__ */ jsx("h1", { className: "text-gradient", children: "Twick Studio" }),
+      /* @__PURE__ */ jsx("div", { className: "header-separator" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-container", style: { gap: "0.5rem" }, children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm opacity-80", children: "Orientation" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `btn-ghost ${orientation === "vertical" ? "btn-primary" : ""}`,
+            title: "Portrait (720×1280)",
+            onClick: () => handleOrientationChange("vertical"),
+            children: /* @__PURE__ */ jsx(RectangleVertical, { className: "icon-sm" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: `btn-ghost ${orientation === "horizontal" ? "btn-primary" : ""}`,
+            title: "Landscape (1280×720)",
+            onClick: () => handleOrientationChange("horizontal"),
+            children: /* @__PURE__ */ jsx(RectangleHorizontal, { className: "icon-sm" })
+          }
+        )
+      ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
       /* @__PURE__ */ jsxs(
@@ -1181,8 +1224,16 @@ const AudioPanel = ({
         return /* @__PURE__ */ jsx(
           "div",
           {
+            draggable: true,
             onDoubleClick: () => onItemSelect(item),
-            className: "media-list-item",
+            onDragStart: (e) => {
+              e.dataTransfer.setData(
+                TIMELINE_DROP_MEDIA_TYPE,
+                JSON.stringify({ type: "audio", url: item.url })
+              );
+              e.dataTransfer.effectAllowed = "copy";
+            },
+            className: "media-list-item media-item-draggable",
             children: /* @__PURE__ */ jsxs("div", { className: "media-list-content", children: [
               /* @__PURE__ */ jsx(
                 "button",
@@ -1284,18 +1335,26 @@ function ImagePanel({
       /* @__PURE__ */ jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
         "div",
         {
+          draggable: true,
           onDoubleClick: () => onItemSelect(item),
-          className: "media-item",
+          onDragStart: (e) => {
+            e.dataTransfer.setData(
+              TIMELINE_DROP_MEDIA_TYPE,
+              JSON.stringify({ type: "image", url: item.url })
+            );
+            e.dataTransfer.effectAllowed = "copy";
+          },
+          className: "media-item media-item-draggable",
           children: [
             /* @__PURE__ */ jsx("img", { src: item.url, alt: "", className: "media-item-content" }),
-            /* @__PURE__ */ jsx("div", { className: "media-actions", children: /* @__PURE__ */ jsx(
+            /* @__PURE__ */ jsx("div", { className: "media-actions media-actions-corner", children: /* @__PURE__ */ jsx(
               "button",
               {
                 onClick: (e) => {
                   e.stopPropagation();
                   onItemSelect(item, true);
                 },
-                className: "media-action-btn media-action-btn-primary",
+                className: "media-action-btn",
                 children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
               }
             ) })
@@ -1413,8 +1472,16 @@ function VideoPanel({
       /* @__PURE__ */ jsx("div", { className: "media-grid", children: (items || []).map((item) => /* @__PURE__ */ jsxs(
         "div",
         {
+          draggable: true,
           onDoubleClick: () => onItemSelect(item),
-          className: "media-item",
+          onDragStart: (e) => {
+            e.dataTransfer.setData(
+              TIMELINE_DROP_MEDIA_TYPE,
+              JSON.stringify({ type: "video", url: item.url })
+            );
+            e.dataTransfer.effectAllowed = "copy";
+          },
+          className: "media-item media-item-draggable",
           children: [
             /* @__PURE__ */ jsx(
               "video",
@@ -1431,32 +1498,34 @@ function VideoPanel({
                 }
               }
             ),
-            /* @__PURE__ */ jsx("div", { className: "media-actions", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onItemSelect(item, true);
-                },
-                className: "media-action-btn media-action-btn-primary",
-                children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
-              }
-            ) }),
-            /* @__PURE__ */ jsx("div", { className: "media-actions media-actions-corner", children: /* @__PURE__ */ jsx(
-              "button",
-              {
-                onClick: (e) => {
-                  var _a, _b;
-                  e.stopPropagation();
-                  const videoEl = (_b = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector("video");
-                  if (videoEl) {
-                    togglePlayPause(item, videoEl);
-                  }
-                },
-                className: "media-action-btn",
-                children: playingVideo === item.id ? /* @__PURE__ */ jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsx(Play, { className: "icon-sm" })
-              }
-            ) })
+            /* @__PURE__ */ jsxs("div", { className: "media-actions media-actions-corner", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    var _a, _b;
+                    e.stopPropagation();
+                    const videoEl = (_b = (_a = e.currentTarget.parentElement) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.querySelector("video");
+                    if (videoEl) {
+                      togglePlayPause(item, videoEl);
+                    }
+                  },
+                  className: "media-action-btn",
+                  children: playingVideo === item.id ? /* @__PURE__ */ jsx(Pause, { className: "icon-sm" }) : /* @__PURE__ */ jsx(Play, { className: "icon-sm" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onItemSelect(item, true);
+                  },
+                  className: "media-action-btn",
+                  children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
+                }
+              )
+            ] })
           ]
         },
         item.id
@@ -1527,6 +1596,9 @@ function TextPanel({
   applyShadow,
   shadowColor,
   strokeWidth,
+  applyBackground,
+  backgroundColor,
+  backgroundOpacity,
   fonts,
   operation,
   setTextContent,
@@ -1539,6 +1611,9 @@ function TextPanel({
   setApplyShadow,
   setShadowColor,
   setStrokeWidth,
+  setApplyBackground,
+  setBackgroundColor,
+  setBackgroundOpacity,
   handleApplyChanges
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
@@ -1707,7 +1782,70 @@ function TextPanel({
         /* @__PURE__ */ jsx("span", { className: "slider-value", children: strokeWidth })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
+    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Background" }),
+      /* @__PURE__ */ jsxs("div", { className: "color-section", children: [
+        /* @__PURE__ */ jsx("div", { className: "checkbox-control", children: /* @__PURE__ */ jsxs("label", { className: "checkbox-label", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: applyBackground,
+              onChange: (e) => setApplyBackground(e.target.checked),
+              className: "checkbox-purple"
+            }
+          ),
+          "Apply Background"
+        ] }) }),
+        applyBackground && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__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: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-picker"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "text",
+                  value: backgroundColor,
+                  onChange: (e) => setBackgroundColor(e.target.value),
+                  className: "color-text"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
+            /* @__PURE__ */ jsx("label", { className: "label-small", children: "Background Opacity" }),
+            /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "1",
+                  step: 0.1,
+                  value: backgroundOpacity,
+                  onChange: (e) => setBackgroundOpacity(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              ),
+              /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
+                Math.round(backgroundOpacity * 100),
+                "%"
+              ] })
+            ] })
+          ] })
+        ] })
+      ] })
+    ] }),
+    operation !== "Apply Changes" && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
 const DEFAULT_TEXT_PROPS = {
@@ -1741,53 +1879,134 @@ const useTextPanel = ({
   const [applyShadow, setApplyShadow] = useState(DEFAULT_TEXT_PROPS.applyShadow);
   const [shadowColor, setShadowColor] = useState(DEFAULT_TEXT_PROPS.shadowColor);
   const [strokeWidth, setStrokeWidth] = useState(DEFAULT_TEXT_PROPS.strokeWidth);
+  const [applyBackground, setApplyBackground] = useState(false);
+  const [backgroundColor, setBackgroundColor] = useState("#FACC15");
+  const [backgroundOpacity, setBackgroundOpacity] = useState(1);
   const fonts = Object.values(AVAILABLE_TEXT_FONTS);
-  const handleApplyChanges = async () => {
-    let textElement;
-    if (selectedElement instanceof TextElement) {
-      textElement = selectedElement;
-      textElement.setText(textContent);
-      textElement.setFontSize(fontSize);
-      textElement.setFontFamily(selectedFont);
-      textElement.setFontWeight(isBold ? 700 : 400);
-      textElement.setFontStyle(isItalic ? "italic" : "normal");
-      textElement.setFill(textColor);
-      textElement.setStrokeColor(strokeColor);
-      textElement.setLineWidth(strokeWidth);
-      textElement.setTextAlign(DEFAULT_TEXT_PROPS.textAlign);
-      if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
-      } else {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor: void 0,
-          shadowOffset: void 0,
-          shadowBlur: void 0,
-          shadowOpacity: void 0
-        });
-      }
-      updateElement(textElement);
+  const applyLiveChangesToExistingText = (overrides = {}) => {
+    if (!(selectedElement instanceof TextElement)) {
+      return;
+    }
+    const textElement = selectedElement;
+    const nextState = {
+      textContent,
+      fontSize,
+      selectedFont,
+      isBold,
+      isItalic,
+      textColor,
+      strokeColor,
+      strokeWidth,
+      applyShadow,
+      shadowColor,
+      applyBackground,
+      backgroundColor,
+      backgroundOpacity,
+      ...overrides
+    };
+    textElement.setText(nextState.textContent);
+    textElement.setFontSize(nextState.fontSize);
+    textElement.setFontFamily(nextState.selectedFont);
+    textElement.setFontWeight(nextState.isBold ? 700 : 400);
+    textElement.setFontStyle(nextState.isItalic ? "italic" : "normal");
+    textElement.setFill(nextState.textColor);
+    textElement.setStrokeColor(nextState.strokeColor);
+    textElement.setLineWidth(nextState.strokeWidth);
+    textElement.setTextAlign(DEFAULT_TEXT_PROPS.textAlign);
+    const nextProps = { ...textElement.getProps() };
+    if (nextState.applyShadow) {
+      nextProps.shadowColor = nextState.shadowColor;
+      nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+      nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+      nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
     } else {
-      textElement = new TextElement(textContent).setFontSize(fontSize).setFontFamily(selectedFont).setFontWeight(isBold ? 700 : 400).setFontStyle(isItalic ? "italic" : "normal").setFill(textColor).setStrokeColor(strokeColor).setLineWidth(strokeWidth).setTextAlign("center");
-      if (applyShadow) {
-        textElement.setProps({
-          ...textElement.getProps(),
-          shadowColor,
-          shadowOffset: DEFAULT_TEXT_PROPS.shadowOffset,
-          shadowBlur: DEFAULT_TEXT_PROPS.shadowBlur,
-          shadowOpacity: DEFAULT_TEXT_PROPS.shadowOpacity
-        });
-      }
-      await addElement(textElement);
+      nextProps.shadowColor = void 0;
+      nextProps.shadowOffset = void 0;
+      nextProps.shadowBlur = void 0;
+      nextProps.shadowOpacity = void 0;
+    }
+    if (nextState.applyBackground) {
+      nextProps.backgroundColor = nextState.backgroundColor;
+      nextProps.backgroundOpacity = nextState.backgroundOpacity;
+    } else {
+      nextProps.backgroundColor = void 0;
+      nextProps.backgroundOpacity = void 0;
     }
+    textElement.setProps(nextProps);
+    updateElement(textElement);
   };
-  useEffect(() => {
+  const handleTextContentChange = (text) => {
+    setTextContent(text);
+    applyLiveChangesToExistingText({ textContent: text });
+  };
+  const handleFontSizeChange = (size) => {
+    setFontSize(size);
+    applyLiveChangesToExistingText({ fontSize: size });
+  };
+  const handleSelectedFontChange = (font) => {
+    setSelectedFont(font);
+    applyLiveChangesToExistingText({ selectedFont: font });
+  };
+  const handleIsBoldChange = (bold) => {
+    setIsBold(bold);
+    applyLiveChangesToExistingText({ isBold: bold });
+  };
+  const handleIsItalicChange = (italic) => {
+    setIsItalic(italic);
+    applyLiveChangesToExistingText({ isItalic: italic });
+  };
+  const handleTextColorChange = (color) => {
+    setTextColor(color);
+    applyLiveChangesToExistingText({ textColor: color });
+  };
+  const handleStrokeColorChange = (color) => {
+    setStrokeColor(color);
+    applyLiveChangesToExistingText({ strokeColor: color });
+  };
+  const handleStrokeWidthChange = (width) => {
+    setStrokeWidth(width);
+    applyLiveChangesToExistingText({ strokeWidth: width });
+  };
+  const handleApplyShadowChange = (shadow) => {
+    setApplyShadow(shadow);
+    applyLiveChangesToExistingText({ applyShadow: shadow });
+  };
+  const handleShadowColorChange = (color) => {
+    setShadowColor(color);
+    applyLiveChangesToExistingText({ shadowColor: color });
+  };
+  const handleApplyBackgroundChange = (apply) => {
+    setApplyBackground(apply);
+    applyLiveChangesToExistingText({ applyBackground: apply });
+  };
+  const handleBackgroundColorChange = (color) => {
+    setBackgroundColor(color);
+    applyLiveChangesToExistingText({ backgroundColor: color });
+  };
+  const handleBackgroundOpacityChange = (opacity) => {
+    setBackgroundOpacity(opacity);
+    applyLiveChangesToExistingText({ backgroundOpacity: opacity });
+  };
+  const handleApplyChanges = async () => {
+    if (selectedElement instanceof TextElement) {
+      return;
+    }
+    const textElement = new TextElement(textContent).setFontSize(fontSize).setFontFamily(selectedFont).setFontWeight(isBold ? 700 : 400).setFontStyle(isItalic ? "italic" : "normal").setFill(textColor).setStrokeColor(strokeColor).setLineWidth(strokeWidth).setTextAlign("center");
+    const nextProps = { ...textElement.getProps() };
+    if (applyShadow) {
+      nextProps.shadowColor = shadowColor;
+      nextProps.shadowOffset = DEFAULT_TEXT_PROPS.shadowOffset;
+      nextProps.shadowBlur = DEFAULT_TEXT_PROPS.shadowBlur;
+      nextProps.shadowOpacity = DEFAULT_TEXT_PROPS.shadowOpacity;
+    }
+    if (applyBackground) {
+      nextProps.backgroundColor = backgroundColor;
+      nextProps.backgroundOpacity = backgroundOpacity;
+    }
+    textElement.setProps(nextProps);
+    await addElement(textElement);
+  };
+  useEffect(() => {
     if (selectedElement instanceof TextElement) {
       setTextContent(selectedElement.getText());
       const textProps = selectedElement.getProps();
@@ -1803,6 +2022,12 @@ const useTextPanel = ({
       if (hasShadow) {
         setShadowColor(textProps.shadowColor ?? DEFAULT_TEXT_PROPS.shadowColor);
       }
+      const hasBackground = textProps.backgroundColor != null && textProps.backgroundColor !== "";
+      setApplyBackground(hasBackground);
+      if (hasBackground) {
+        setBackgroundColor(textProps.backgroundColor ?? "#FACC15");
+        setBackgroundOpacity(textProps.backgroundOpacity ?? 1);
+      }
     } else {
       setTextContent(DEFAULT_TEXT_PROPS.text);
       setFontSize(DEFAULT_TEXT_PROPS.fontSize);
@@ -1814,6 +2039,9 @@ const useTextPanel = ({
       setStrokeWidth(DEFAULT_TEXT_PROPS.strokeWidth);
       setApplyShadow(DEFAULT_TEXT_PROPS.applyShadow);
       setShadowColor(DEFAULT_TEXT_PROPS.shadowColor);
+      setApplyBackground(false);
+      setBackgroundColor("#FACC15");
+      setBackgroundOpacity(1);
     }
   }, [selectedElement]);
   return {
@@ -1829,16 +2057,22 @@ const useTextPanel = ({
     strokeWidth,
     fonts,
     operation: selectedElement instanceof TextElement ? "Apply Changes" : "Add Text",
-    setTextContent,
-    setFontSize,
-    setSelectedFont,
-    setIsBold,
-    setIsItalic,
-    setTextColor,
-    setStrokeColor,
-    setApplyShadow,
-    setShadowColor,
-    setStrokeWidth,
+    setTextContent: handleTextContentChange,
+    setFontSize: handleFontSizeChange,
+    setSelectedFont: handleSelectedFontChange,
+    setIsBold: handleIsBoldChange,
+    setIsItalic: handleIsItalicChange,
+    setTextColor: handleTextColorChange,
+    setStrokeColor: handleStrokeColorChange,
+    setApplyShadow: handleApplyShadowChange,
+    setShadowColor: handleShadowColorChange,
+    setStrokeWidth: handleStrokeWidthChange,
+    applyBackground,
+    backgroundColor,
+    backgroundOpacity,
+    setApplyBackground: handleApplyBackgroundChange,
+    setBackgroundColor: handleBackgroundColorChange,
+    setBackgroundOpacity: handleBackgroundOpacityChange,
     handleApplyChanges
   };
 };
@@ -1846,227 +2080,14 @@ function TextPanelContainer(props) {
   const textPanelProps = useTextPanel(props);
   return /* @__PURE__ */ jsx(TextPanel, { ...textPanelProps });
 }
-const SearchInput = ({
-  searchQuery,
-  setSearchQuery
-}) => {
-  return /* @__PURE__ */ jsxs("div", { className: "search-container", children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "text",
-        placeholder: "Search media...",
-        value: searchQuery,
-        onChange: (e) => setSearchQuery(e.target.value),
-        className: "input search-input w-full"
-      }
-    ),
-    /* @__PURE__ */ jsx(Search, { className: "search-icon" })
-  ] });
-};
-function IconPanel({
-  icons,
-  loading,
-  totalIcons,
-  searchQuery,
-  handleSearch,
-  handleSelection,
-  handleDownloadIcon,
-  handleLoadMore
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Icon Library" }),
-    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(SearchInput, { searchQuery, setSearchQuery: handleSearch }) }),
-    /* @__PURE__ */ jsxs("div", { className: "media-content", children: [
-      totalIcons > 0 && /* @__PURE__ */ jsxs("div", { className: "media-count", children: [
-        "Showing ",
-        icons.length,
-        " of ",
-        totalIcons,
-        " icons"
-      ] }),
-      loading && icons.length === 0 ? /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
-        /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
-        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Loading icons..." })
-      ] }) }) : /* @__PURE__ */ jsx("div", { className: "icon-grid", children: (icons || []).map((icon, index) => /* @__PURE__ */ jsxs("div", { className: "icon-item", children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => handleSelection(icon),
-            className: "icon-content",
-            dangerouslySetInnerHTML: { __html: icon.svg }
-          }
-        ),
-        /* @__PURE__ */ jsxs("div", { className: "icon-actions", children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleSelection(icon);
-              },
-              className: "icon-action-btn",
-              title: "Add to timeline",
-              children: /* @__PURE__ */ jsx(Plus, { className: "icon-sm" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              onClick: (e) => {
-                e.stopPropagation();
-                handleDownloadIcon(icon);
-              },
-              className: "icon-action-btn",
-              title: "Download SVG",
-              children: /* @__PURE__ */ jsx(Download, { className: "icon-sm" })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: "icon-name", children: icon.name })
-      ] }, index)) }),
-      !loading && icons.length === 0 && searchQuery && /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
-        /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "No icons found" }),
-        /* @__PURE__ */ jsx("p", { className: "empty-state-subtext", children: "Try a different search term" })
-      ] }) }),
-      !loading && totalIcons && icons.length < totalIcons && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: handleLoadMore,
-          disabled: loading,
-          className: "btn-primary",
-          children: "Load More Icons"
-        }
-      ) })
-    ] })
-  ] });
-}
-const ICONS_PER_PAGE = 20;
-const useIconPanel = ({
-  selectedElement,
-  addElement,
-  updateElement
-}) => {
-  const [icons, setIcons] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-  const [totalIcons, setTotalIcons] = useState(0);
-  const [searchQuery, setSearchQuery] = useState("");
-  const currentQuery = useRef("");
-  const fetchIcons = async (query, reset = false) => {
-    try {
-      setLoading(true);
-      const newPage = reset ? 1 : page;
-      const start = (newPage - 1) * ICONS_PER_PAGE;
-      const url = `https://api.iconify.design/search?query=${query}&limit=${ICONS_PER_PAGE}&offset=${start}`;
-      const response = await fetch(url);
-      const data = await response.json();
-      const iconData = data.icons || [];
-      const total = data.total || 0;
-      setTotalIcons(total);
-      const formattedIcons = await Promise.all(
-        iconData.map(async (icon) => {
-          const svgUrl = `https://api.iconify.design/${icon}.svg`;
-          try {
-            const svgResponse = await fetch(svgUrl);
-            const svg = await svgResponse.text();
-            return { name: icon, svg };
-          } catch (e) {
-            console.error(`Error fetching SVG for ${icon}:`, e);
-            return null;
-          }
-        })
-      );
-      const validIcons = formattedIcons.filter((icon) => icon !== null);
-      if (reset) {
-        setIcons(validIcons);
-      } else {
-        setIcons([...icons, ...validIcons]);
-      }
-      setHasMore(start + validIcons.length < total);
-      if (!reset) {
-        setPage(newPage + 1);
-      } else {
-        setPage(2);
-      }
-    } catch (error) {
-      console.error("Error fetching icons:", error);
-    } finally {
-      setLoading(false);
-    }
-  };
-  useEffect(() => {
-    fetchIcons("media", true);
-  }, []);
-  const handleSearch = (query) => {
-    currentQuery.current = query;
-    setSearchQuery(query);
-    fetchIcons(query, true);
-  };
-  const handleSelection = (icon) => {
-    const svgBlob = new Blob([icon.svg], { type: "image/svg+xml" });
-    const url = URL.createObjectURL(svgBlob);
-    let iconElement;
-    if (selectedElement instanceof IconElement) {
-      iconElement = selectedElement;
-      iconElement.setSrc(url);
-      iconElement.setName(icon.name);
-      updateElement == null ? void 0 : updateElement(iconElement);
-    } else {
-      iconElement = new IconElement(url, {
-        width: 100,
-        height: 100
-      });
-      iconElement.setName(icon.name);
-      addElement == null ? void 0 : addElement(iconElement);
-    }
-    URL.revokeObjectURL(url);
-  };
-  const handleDownloadIcon = (icon) => {
-    const blob = new Blob([icon.svg], { type: "image/svg+xml" });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = `${icon.name}.svg`;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    URL.revokeObjectURL(url);
-  };
-  const handleLoadMore = () => {
-    fetchIcons(currentQuery.current, false);
-  };
-  return {
-    icons,
-    loading,
-    hasMore,
-    totalIcons,
-    searchQuery,
-    handleSearch,
-    handleSelection,
-    handleDownloadIcon,
-    handleLoadMore
-  };
-};
-function IconPanelContainer(props) {
-  const iconPanelProps = useIconPanel({
-    selectedElement: props.selectedElement ?? null,
-    addElement: props.addElement,
-    updateElement: props.updateElement
-  });
-  return /* @__PURE__ */ jsx(IconPanel, { ...iconPanelProps });
-}
 function RectPanel({
   cornerRadius,
   fillColor,
-  opacity,
   strokeColor,
   lineWidth,
   operation,
   setCornerRadius,
   setFillColor,
-  setOpacity,
   setStrokeColor,
   setLineWidth,
   handleApplyChanges
@@ -2116,26 +2137,6 @@ function RectPanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
-      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "100",
-            value: opacity,
-            onChange: (e) => setOpacity(Number(e.target.value)),
-            className: "slider-purple"
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
-          opacity,
-          "%"
-        ] })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Stroke Color" }),
       /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
@@ -2179,7 +2180,7 @@ function RectPanel({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
+    operation !== "Apply Changes" && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       "button",
       {
         onClick: handleApplyChanges,
@@ -2192,6 +2193,7 @@ function RectPanel({
 const DEFAULT_RECT_PROPS = {
   cornerRadius: 0,
   fillColor: "#3b82f6",
+  // UI uses 0–100%; element opacity is 0–1
   opacity: 100,
   strokeColor: "#000000",
   lineWidth: 0
@@ -2206,25 +2208,56 @@ const useRectPanel = ({
   const [opacity, setOpacity] = useState(DEFAULT_RECT_PROPS.opacity);
   const [strokeColor, setStrokeColor] = useState(DEFAULT_RECT_PROPS.strokeColor);
   const [lineWidth, setLineWidth] = useState(DEFAULT_RECT_PROPS.lineWidth);
+  const applyLiveChangesToExistingRect = (overrides = {}) => {
+    if (!(selectedElement instanceof RectElement)) {
+      return;
+    }
+    const rectElement = selectedElement;
+    const nextCornerRadius = overrides.cornerRadius ?? cornerRadius;
+    const nextFillColor = overrides.fillColor ?? fillColor;
+    const nextOpacityPercent = overrides.opacity ?? opacity;
+    const nextStrokeColor = overrides.strokeColor ?? strokeColor;
+    const nextLineWidth = overrides.lineWidth ?? lineWidth;
+    rectElement.setCornerRadius(nextCornerRadius);
+    rectElement.setFill(nextFillColor);
+    rectElement.setOpacity(nextOpacityPercent / 100);
+    rectElement.setStrokeColor(nextStrokeColor);
+    rectElement.setLineWidth(nextLineWidth);
+    updateElement == null ? void 0 : updateElement(rectElement);
+  };
+  const handleCornerRadiusChange = (radius) => {
+    setCornerRadius(radius);
+    applyLiveChangesToExistingRect({ cornerRadius: radius });
+  };
+  const handleFillColorChange = (color) => {
+    setFillColor(color);
+    applyLiveChangesToExistingRect({ fillColor: color });
+  };
+  const handleOpacityChange = (nextOpacity) => {
+    setOpacity(nextOpacity);
+    applyLiveChangesToExistingRect({ opacity: nextOpacity });
+  };
+  const handleStrokeColorChange = (color) => {
+    setStrokeColor(color);
+    applyLiveChangesToExistingRect({ strokeColor: color });
+  };
+  const handleLineWidthChange = (width) => {
+    setLineWidth(width);
+    applyLiveChangesToExistingRect({ lineWidth: width });
+  };
   const handleApplyChanges = () => {
-    let rectElement;
     if (selectedElement instanceof RectElement) {
-      rectElement = selectedElement;
-      rectElement.setCornerRadius(cornerRadius);
-      rectElement.setOpacity(opacity);
-      rectElement.setStrokeColor(strokeColor);
-      rectElement.setLineWidth(lineWidth);
-      updateElement == null ? void 0 : updateElement(rectElement);
-    } else {
-      rectElement = new RectElement(fillColor, { width: 200, height: 200 }).setCornerRadius(cornerRadius).setOpacity(opacity).setStrokeColor(strokeColor).setLineWidth(lineWidth);
-      addElement == null ? void 0 : addElement(rectElement);
+      return;
     }
+    const rectElement = new RectElement(fillColor, { width: 200, height: 200 }).setCornerRadius(cornerRadius).setOpacity(opacity / 100).setStrokeColor(strokeColor).setLineWidth(lineWidth);
+    addElement == null ? void 0 : addElement(rectElement);
   };
   useEffect(() => {
     if (selectedElement instanceof RectElement) {
       setCornerRadius(selectedElement.getCornerRadius() ?? DEFAULT_RECT_PROPS.cornerRadius);
       setFillColor(selectedElement.getFill() ?? DEFAULT_RECT_PROPS.fillColor);
-      setOpacity(selectedElement.getOpacity() ?? DEFAULT_RECT_PROPS.opacity);
+      const elementOpacity = selectedElement.getOpacity();
+      setOpacity(elementOpacity != null ? elementOpacity * 100 : DEFAULT_RECT_PROPS.opacity);
       setStrokeColor(selectedElement.getStrokeColor() ?? DEFAULT_RECT_PROPS.strokeColor);
       setLineWidth(selectedElement.getLineWidth() ?? DEFAULT_RECT_PROPS.lineWidth);
     }
@@ -2236,11 +2269,11 @@ const useRectPanel = ({
     strokeColor,
     lineWidth,
     operation: selectedElement instanceof RectElement ? "Apply Changes" : "Add Rectangle",
-    setCornerRadius,
-    setFillColor,
-    setOpacity,
-    setStrokeColor,
-    setLineWidth,
+    setCornerRadius: handleCornerRadiusChange,
+    setFillColor: handleFillColorChange,
+    setOpacity: handleOpacityChange,
+    setStrokeColor: handleStrokeColorChange,
+    setLineWidth: handleLineWidthChange,
     handleApplyChanges
   };
 };
@@ -2255,13 +2288,11 @@ function RectPanelContainer(props) {
 function CirclePanel({
   radius,
   fillColor,
-  opacity,
   strokeColor,
   lineWidth,
   operation,
   setRadius,
   setFillColor,
-  setOpacity,
   setStrokeColor,
   setLineWidth,
   handleApplyChanges
@@ -2311,26 +2342,6 @@ function CirclePanel({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
-      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "100",
-            value: opacity,
-            onChange: (e) => setOpacity(Number(e.target.value)),
-            className: "slider-purple"
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
-          opacity,
-          "%"
-        ] })
-      ] })
-    ] }),
     /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
       /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Stroke Color" }),
       /* @__PURE__ */ jsxs("div", { className: "color-inputs", children: [
@@ -2374,12 +2385,13 @@ function CirclePanel({
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
+    operation !== "Apply Changes" && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx("button", { onClick: handleApplyChanges, className: "btn-primary w-full", children: operation }) })
   ] });
 }
 const DEFAULT_CIRCLE_PROPS = {
   radius: 50,
   fillColor: "#3b82f6",
+  // UI uses 0–100%; element opacity is 0–1
   opacity: 100,
   strokeColor: "#000000",
   lineWidth: 0
@@ -2394,26 +2406,56 @@ const useCirclePanel = ({
   const [opacity, setOpacity] = useState(DEFAULT_CIRCLE_PROPS.opacity);
   const [strokeColor, setStrokeColor] = useState(DEFAULT_CIRCLE_PROPS.strokeColor);
   const [lineWidth, setLineWidth] = useState(DEFAULT_CIRCLE_PROPS.lineWidth);
+  const applyLiveChangesToExistingCircle = (overrides = {}) => {
+    if (!(selectedElement instanceof CircleElement)) {
+      return;
+    }
+    const circleElement = selectedElement;
+    const nextRadius = overrides.radius ?? radius;
+    const nextFillColor = overrides.fillColor ?? fillColor;
+    const nextOpacityPercent = overrides.opacity ?? opacity;
+    const nextStrokeColor = overrides.strokeColor ?? strokeColor;
+    const nextLineWidth = overrides.lineWidth ?? lineWidth;
+    circleElement.setRadius(nextRadius);
+    circleElement.setFill(nextFillColor);
+    circleElement.setOpacity(nextOpacityPercent / 100);
+    circleElement.setStrokeColor(nextStrokeColor);
+    circleElement.setLineWidth(nextLineWidth);
+    updateElement == null ? void 0 : updateElement(circleElement);
+  };
+  const handleRadiusChange = (nextRadius) => {
+    setRadius(nextRadius);
+    applyLiveChangesToExistingCircle({ radius: nextRadius });
+  };
+  const handleFillColorChange = (color) => {
+    setFillColor(color);
+    applyLiveChangesToExistingCircle({ fillColor: color });
+  };
+  const handleOpacityChange = (nextOpacity) => {
+    setOpacity(nextOpacity);
+    applyLiveChangesToExistingCircle({ opacity: nextOpacity });
+  };
+  const handleStrokeColorChange = (color) => {
+    setStrokeColor(color);
+    applyLiveChangesToExistingCircle({ strokeColor: color });
+  };
+  const handleLineWidthChange = (width) => {
+    setLineWidth(width);
+    applyLiveChangesToExistingCircle({ lineWidth: width });
+  };
   const handleApplyChanges = () => {
-    let circleElement;
     if (selectedElement instanceof CircleElement) {
-      circleElement = selectedElement;
-      circleElement.setRadius(radius);
-      circleElement.setFill(fillColor);
-      circleElement.setOpacity(opacity);
-      circleElement.setStrokeColor(strokeColor);
-      circleElement.setLineWidth(lineWidth);
-      updateElement == null ? void 0 : updateElement(circleElement);
-    } else {
-      circleElement = new CircleElement(fillColor, radius).setOpacity(opacity).setStrokeColor(strokeColor).setLineWidth(lineWidth);
-      addElement == null ? void 0 : addElement(circleElement);
+      return;
     }
+    const circleElement = new CircleElement(fillColor, radius).setOpacity(opacity / 100).setStrokeColor(strokeColor).setLineWidth(lineWidth);
+    addElement == null ? void 0 : addElement(circleElement);
   };
   useEffect(() => {
     if (selectedElement instanceof CircleElement) {
       setRadius(selectedElement.getRadius() ?? DEFAULT_CIRCLE_PROPS.radius);
       setFillColor(selectedElement.getFill() ?? DEFAULT_CIRCLE_PROPS.fillColor);
-      setOpacity(selectedElement.getOpacity() ?? DEFAULT_CIRCLE_PROPS.opacity);
+      const elementOpacity = selectedElement.getOpacity();
+      setOpacity(elementOpacity != null ? elementOpacity * 100 : DEFAULT_CIRCLE_PROPS.opacity);
       setStrokeColor(selectedElement.getStrokeColor() ?? DEFAULT_CIRCLE_PROPS.strokeColor);
       setLineWidth(selectedElement.getLineWidth() ?? DEFAULT_CIRCLE_PROPS.lineWidth);
     }
@@ -2425,11 +2467,11 @@ const useCirclePanel = ({
     strokeColor,
     lineWidth,
     operation: selectedElement instanceof CircleElement ? "Apply Changes" : "Add Circle",
-    setRadius,
-    setFillColor,
-    setOpacity,
-    setStrokeColor,
-    setLineWidth,
+    setRadius: handleRadiusChange,
+    setFillColor: handleFillColorChange,
+    setOpacity: handleOpacityChange,
+    setStrokeColor: handleStrokeColorChange,
+    setLineWidth: handleLineWidthChange,
     handleApplyChanges
   };
 };
@@ -2441,16 +2483,16 @@ function CirclePanelContainer(props) {
   });
   return /* @__PURE__ */ jsx(CirclePanel, { ...circlePanelProps });
 }
-function SubtitlesPanel({
-  subtitles,
-  addSubtitle,
-  splitSubtitle,
-  deleteSubtitle,
-  updateSubtitle
+function CaptionsPanel({
+  captions,
+  addCaption,
+  splitCaption,
+  deleteCaption,
+  updateCaption
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("h3", { className: "panel-title", children: "Subtitles" }),
-    subtitles.map((subtitle, i) => /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx("h3", { className: "panel-title", children: "Captions" }),
+    captions.map((caption, i) => /* @__PURE__ */ jsxs(
       "div",
       {
         className: "panel-section gap-2",
@@ -2459,9 +2501,9 @@ function SubtitlesPanel({
             "input",
             {
               type: "text",
-              placeholder: "Enter subtitle text",
-              value: subtitle.t,
-              onChange: (e) => updateSubtitle(i, { ...subtitle, t: e.target.value }),
+              placeholder: "Enter caption text",
+              value: caption.t,
+              onChange: (e) => updateCaption(i, { ...caption, t: e.target.value }),
               className: "input-dark"
             }
           ) }),
@@ -2469,18 +2511,18 @@ function SubtitlesPanel({
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => splitSubtitle(i),
+                onClick: () => splitCaption(i),
                 className: "btn-ghost",
-                title: "Split subtitle",
+                title: "Split caption",
                 children: /* @__PURE__ */ jsx(Scissors, { className: "icon-sm" })
               }
             ),
             /* @__PURE__ */ jsx(
               "button",
               {
-                onClick: () => deleteSubtitle(i),
+                onClick: () => deleteCaption(i),
                 className: "btn-ghost",
-                title: "Delete subtitle",
+                title: "Delete caption",
                 children: /* @__PURE__ */ jsx(Trash2, { className: "icon-sm", color: "var(--color-red-500)" })
               }
             )
@@ -2489,7 +2531,7 @@ function SubtitlesPanel({
       },
       i
     )),
-    /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("button", { onClick: addSubtitle, className: "btn-primary w-full", title: "Add subtitle", children: "Add" }) })
+    /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("button", { onClick: addCaption, className: "btn-primary w-full", title: "Add caption", children: "Add" }) })
   ] });
 }
 const CAPTION_PROPS = {
@@ -2544,16 +2586,16 @@ const CAPTION_PROPS = {
     shadowBlur: 5
   }
 };
-const useSubtitlesPanel = () => {
-  const [subtitles, setSubtitles] = useState([]);
-  const subtitlesTrack = useRef(null);
+const useCaptionsPanel = () => {
+  const [captions, setCaptions] = useState([]);
+  const captionsTrack = useRef(null);
   const { editor } = useTimelineContext();
-  const fetchSubtitles = async () => {
-    const editorSubtitlesTrack = editor.getSubtiltesTrack();
-    if (editorSubtitlesTrack) {
-      subtitlesTrack.current = editorSubtitlesTrack;
-      setSubtitles(
-        editorSubtitlesTrack.getElements().map((element) => ({
+  const fetchCaptions = async () => {
+    const editorCaptionsTrack = editor.getCaptionsTrack();
+    if (editorCaptionsTrack) {
+      captionsTrack.current = editorCaptionsTrack;
+      setCaptions(
+        editorCaptionsTrack.getElements().map((element) => ({
           s: element.getStart(),
           e: element.getEnd(),
           t: element.getText()
@@ -2562,12 +2604,12 @@ const useSubtitlesPanel = () => {
     }
   };
   useEffect(() => {
-    fetchSubtitles();
+    fetchCaptions();
   }, []);
-  const checkSubtitlesTrack = () => {
+  const checkCaptionsTrack = () => {
     var _a;
-    if (!subtitlesTrack.current) {
-      subtitlesTrack.current = editor.addTrack("Subtitles", "caption");
+    if (!captionsTrack.current) {
+      captionsTrack.current = editor.addTrack("Caption", "caption");
       const props = {
         capStyle: CAPTION_STYLE.WORD_BG_HIGHLIGHT,
         ...CAPTION_PROPS[CAPTION_STYLE.WORD_BG_HIGHLIGHT],
@@ -2575,61 +2617,61 @@ const useSubtitlesPanel = () => {
         y: 200,
         applyToAll: true
       };
-      (_a = subtitlesTrack.current) == null ? void 0 : _a.setProps(props);
+      (_a = captionsTrack.current) == null ? void 0 : _a.setProps(props);
     }
   };
-  const addSubtitle = () => {
-    const newSubtitle = { s: 0, e: 0, t: "New Subtitle" };
-    if (subtitles.length > 0) {
-      newSubtitle.s = subtitles[subtitles.length - 1].e;
-    }
-    newSubtitle.e = newSubtitle.s + 1;
-    setSubtitles([...subtitles, newSubtitle]);
-    checkSubtitlesTrack();
+  const addCaption = () => {
+    const newCaption = { s: 0, e: 0, t: "New Caption" };
+    if (captions.length > 0) {
+      newCaption.s = captions[captions.length - 1].e;
+    }
+    newCaption.e = newCaption.s + 1;
+    setCaptions([...captions, newCaption]);
+    checkCaptionsTrack();
     const captionElement = new CaptionElement(
-      newSubtitle.t,
-      newSubtitle.s,
-      newSubtitle.e
+      newCaption.t,
+      newCaption.s,
+      newCaption.e
     );
-    editor.addElementToTrack(subtitlesTrack.current, captionElement);
+    editor.addElementToTrack(captionsTrack.current, captionElement);
   };
-  const splitSubtitle = async (index) => {
-    if (subtitlesTrack.current) {
-      const element = subtitlesTrack.current.getElements()[index];
+  const splitCaption = async (index) => {
+    if (captionsTrack.current) {
+      const element = captionsTrack.current.getElements()[index];
       const splitResult = await editor.splitElement(
         element,
         element.getStart() + element.getDuration() / 2
       );
       if (splitResult.success) {
-        fetchSubtitles();
+        fetchCaptions();
       }
     }
   };
-  const deleteSubtitle = (index) => {
-    setSubtitles(subtitles.filter((_, i) => i !== index));
-    if (subtitlesTrack.current) {
-      editor.removeElement(subtitlesTrack.current.getElements()[index]);
+  const deleteCaption = (index) => {
+    setCaptions(captions.filter((_, i) => i !== index));
+    if (captionsTrack.current) {
+      editor.removeElement(captionsTrack.current.getElements()[index]);
     }
   };
-  const updateSubtitle = (index, subtitle) => {
-    setSubtitles(subtitles.map((sub, i) => i === index ? subtitle : sub));
-    if (subtitlesTrack.current) {
-      const element = subtitlesTrack.current.getElements()[index];
-      element.setText(subtitle.t);
+  const updateCaption = (index, caption) => {
+    setCaptions(captions.map((sub, i) => i === index ? caption : sub));
+    if (captionsTrack.current) {
+      const element = captionsTrack.current.getElements()[index];
+      element.setText(caption.t);
       editor.updateElement(element);
     }
   };
   return {
-    subtitles,
-    addSubtitle,
-    splitSubtitle,
-    deleteSubtitle,
-    updateSubtitle
+    captions,
+    addCaption,
+    splitCaption,
+    deleteCaption,
+    updateCaption
   };
 };
-function SubtitlesPanelContainer() {
-  const subtitlesPanelProps = useSubtitlesPanel();
-  return /* @__PURE__ */ jsx(SubtitlesPanel, { ...subtitlesPanelProps });
+function CaptionsPanelContainer() {
+  const captionsPanelProps = useCaptionsPanel();
+  return /* @__PURE__ */ jsx(CaptionsPanel, { ...captionsPanelProps });
 }
 const ElementPanelContainer = ({
   selectedTool,
@@ -2682,16 +2724,6 @@ const ElementPanelContainer = ({
             updateElement
           }
         );
-      case "icon":
-        return /* @__PURE__ */ jsx(
-          IconPanelContainer,
-          {
-            videoResolution,
-            selectedElement,
-            addElement: addNewElement,
-            updateElement
-          }
-        );
       case "rect":
         return /* @__PURE__ */ jsx(
           RectPanelContainer,
@@ -2712,8 +2744,8 @@ const ElementPanelContainer = ({
             updateElement
           }
         );
-      case "subtitle":
-        return /* @__PURE__ */ jsx(SubtitlesPanelContainer, {});
+      case "caption":
+        return /* @__PURE__ */ jsx(CaptionsPanelContainer, {});
       default:
         return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
           /* @__PURE__ */ jsx(WandSparkles, { className: "empty-state-icon" }),
@@ -2723,159 +2755,37 @@ const ElementPanelContainer = ({
   };
   return renderLibrary();
 };
-const propsCategories = /* @__PURE__ */ new Map([
-  [
-    "element-props",
-    {
-      id: "element-props",
-      name: "Properties",
-      icon: "Settings",
-      description: "Element Properties"
-    }
-  ],
-  [
-    "animations",
-    {
-      id: "animations",
-      name: "Animations",
-      icon: "Zap",
-      description: "Animations"
-    }
-  ],
-  [
-    "text-effects",
-    {
-      id: "text-effects",
-      name: "Text Effects",
-      icon: "SparklesIcon",
-      description: "Text Effects"
-    }
-  ],
-  [
-    "color-effects",
-    {
-      id: "color-effects",
-      name: "Color Effects",
-      icon: "Image",
-      description: "Color Effects"
-    }
-  ],
-  [
-    "playback-props",
-    {
-      id: "playback-props",
-      name: "Playback Props",
-      icon: "Music",
-      description: "Playback Properties"
-    }
-  ],
-  [
-    "subtitle-style",
-    {
-      id: "subtitle-style",
-      name: "Subtitle Style",
-      icon: "MessageSquare",
-      description: "Subtitle Style"
-    }
-  ],
-  [
-    "generate-subtitles",
-    {
-      id: "generate-subtitles",
-      name: "Generate Subtitles",
-      icon: "Subtitles",
-      description: "Generate Subtitles"
-    }
-  ]
-]);
-const getIcon = (iconName) => {
-  switch (iconName) {
-    case "Type":
-      return Type;
-    case "Infinity":
-      return Infinity;
-    case "Image":
-      return Image;
-    case "Music":
-      return Music;
-    case "Subtitles":
-      return Captions;
-    case "MessageSquare":
-      return MessageSquare;
-    case "Settings":
-      return Settings;
-    case "SparklesIcon":
-      return Sparkles;
-    case "Zap":
-      return Zap;
-    default:
-      return Plus;
-  }
-};
-function PropsToolbar({
-  selectedElement,
-  selectedProp,
-  setSelectedProp
-}) {
-  const availableSections = useMemo(() => {
-    const sections = [];
-    if (selectedElement instanceof TextElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-      sections.push(propsCategories.get("text-effects"));
-    } else if (selectedElement instanceof ImageElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-      sections.push(propsCategories.get("color-effects"));
-    } else if (selectedElement instanceof VideoElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-      sections.push(propsCategories.get("color-effects"));
-      sections.push(propsCategories.get("playback-props"));
-      sections.push(propsCategories.get("generate-subtitles"));
-    } else if (selectedElement instanceof AudioElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("playback-props"));
-    } else if (selectedElement instanceof CircleElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-    } else if (selectedElement instanceof RectElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-    } else if (selectedElement instanceof IconElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-    } else if (selectedElement instanceof CaptionElement) {
-      sections.push(propsCategories.get("element-props"));
-      sections.push(propsCategories.get("animations"));
-      sections.push(propsCategories.get("subtitle-style"));
-    }
-    return sections;
-  }, [selectedElement]);
-  useEffect(() => {
-    if (availableSections == null ? void 0 : availableSections.length) {
-      if (availableSections.map((section) => section.id).indexOf(selectedProp) === -1) {
-        setSelectedProp(availableSections[0].id);
-      }
-    }
-  }, [availableSections]);
-  return /* @__PURE__ */ jsx("div", { className: "sidebar", children: availableSections.map((tool) => {
-    const Icon2 = getIcon(tool.icon);
-    const isSelected = selectedProp === tool.id;
-    return /* @__PURE__ */ jsxs(
+function PropertyRow({ label, children, secondary }) {
+  return /* @__PURE__ */ jsxs("div", { className: "property-row", children: [
+    /* @__PURE__ */ jsx("div", { className: "property-row-label", children: /* @__PURE__ */ jsx("span", { className: "property-label", children: label }) }),
+    /* @__PURE__ */ jsx("div", { className: "property-row-control", children }),
+    secondary && /* @__PURE__ */ jsx("div", { className: "property-row-secondary", children: secondary })
+  ] });
+}
+function AccordionItem({ title, icon, children, isOpen, onToggle }) {
+  return /* @__PURE__ */ jsxs("div", { className: "accordion-item", children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
-        onClick: () => setSelectedProp(tool.id),
-        className: `toolbar-btn ${isSelected ? "active" : ""}`,
-        title: `${tool.name}${tool.shortcut ? ` (${tool.shortcut})` : ""}`,
+        onClick: onToggle,
+        className: "accordion-header",
         children: [
-          /* @__PURE__ */ jsx(Icon2, { className: "icon-sm" }),
-          /* @__PURE__ */ jsx("span", { className: "props-toolbar-label", children: tool.name })
+          /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
+            /* @__PURE__ */ jsx("div", { className: "accent-purple", children: icon }),
+            /* @__PURE__ */ jsx("span", { className: "property-title", children: title })
+          ] }),
+          isOpen ? /* @__PURE__ */ jsx(ChevronDown, { className: "icon-sm accent-purple" }) : /* @__PURE__ */ jsx(ChevronRight, { className: "icon-sm accent-purple" })
         ]
-      },
-      tool.id
-    );
-  }) });
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `accordion-content ${isOpen ? "expanded" : ""}`,
+        children: /* @__PURE__ */ jsx("div", { className: "accordion-panel", children })
+      }
+    )
+  ] });
 }
 function ElementProps({ selectedElement, updateElement }) {
   const opacity = (selectedElement == null ? void 0 : selectedElement.getOpacity()) || 1;
@@ -2899,77 +2809,134 @@ function ElementProps({ selectedElement, updateElement }) {
       updateElement == null ? void 0 : updateElement(selectedElement);
     }
   };
+  const handleDimensionsChange = (width, height) => {
+    if (!selectedElement) return;
+    if (selectedElement instanceof RectElement) {
+      const size = selectedElement.getSize();
+      selectedElement.setSize({ width: width ?? size.width, height: height ?? size.height });
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    } else if (selectedElement instanceof CircleElement) {
+      const dims = {
+        width: selectedElement.getRadius() * 2,
+        height: selectedElement.getRadius() * 2
+      };
+      const newDiameter = width !== void 0 && width !== dims.width ? width : height ?? dims.height;
+      selectedElement.setRadius(newDiameter / 2);
+      updateElement == null ? void 0 : updateElement(selectedElement);
+    }
+  };
+  const hasShapeDimensions = selectedElement instanceof RectElement || selectedElement instanceof CircleElement;
+  let dimensions = null;
+  if (selectedElement instanceof RectElement) {
+    dimensions = selectedElement.getSize();
+  } else if (selectedElement instanceof CircleElement) {
+    const r = selectedElement.getRadius();
+    dimensions = { width: r * 2, height: r * 2 };
+  }
+  const [isTransformOpen, setIsTransformOpen] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "All Properties" }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Position" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex-container", children: [
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "label-small", children: "X" }),
-          /* @__PURE__ */ jsx(
-            "input",
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Properties" }),
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        title: "Transform",
+        icon: /* @__PURE__ */ jsx(Ruler, { className: "icon-sm" }),
+        isOpen: isTransformOpen,
+        onToggle: () => setIsTransformOpen((open) => !open),
+        children: /* @__PURE__ */ jsxs("div", { className: "properties-group", children: [
+          /* @__PURE__ */ jsxs("div", { className: "property-section", children: [
+            /* @__PURE__ */ jsx(PropertyRow, { label: "Position X", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: position.x ?? 0,
+                onChange: (e) => handlePositionChange({ x: Number(e.target.value) }),
+                className: "input-dark"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PropertyRow, { label: "Position Y", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: position.y ?? 0,
+                onChange: (e) => handlePositionChange({ y: Number(e.target.value) }),
+                className: "input-dark"
+              }
+            ) })
+          ] }),
+          hasShapeDimensions && dimensions && /* @__PURE__ */ jsxs("div", { className: "property-section", children: [
+            /* @__PURE__ */ jsx(PropertyRow, { label: "Width", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                value: Math.round(dimensions.width),
+                onChange: (e) => handleDimensionsChange(
+                  Number(e.target.value),
+                  dimensions.height
+                ),
+                className: "input-dark"
+              }
+            ) }),
+            /* @__PURE__ */ jsx(PropertyRow, { label: "Height", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: 1,
+                value: Math.round(dimensions.height),
+                onChange: (e) => handleDimensionsChange(
+                  dimensions.width,
+                  Number(e.target.value)
+                ),
+                className: "input-dark"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(
+            PropertyRow,
             {
-              type: "number",
-              value: position.x ?? 0,
-              onChange: (e) => handlePositionChange({ x: Number(e.target.value) }),
-              className: "input-dark"
+              label: "Opacity",
+              secondary: /* @__PURE__ */ jsxs("span", { children: [
+                Math.round((opacity ?? 1) * 100),
+                "%"
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "100",
+                  value: (opacity ?? 1) * 100,
+                  onChange: (e) => handleOpacityChange(Number(e.target.value) / 100),
+                  className: "slider-purple"
+                }
+              )
             }
-          )
-        ] }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("label", { className: "label-small", children: "Y" }),
-          /* @__PURE__ */ jsx(
-            "input",
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(
+            PropertyRow,
             {
-              type: "number",
-              value: position.y ?? 0,
-              onChange: (e) => handlePositionChange({ y: Number(e.target.value) }),
-              className: "input-dark"
+              label: "Rotation",
+              secondary: /* @__PURE__ */ jsxs("span", { children: [
+                Math.round(rotation ?? 0),
+                "°"
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: "0",
+                  max: "360",
+                  value: rotation ?? 0,
+                  onChange: (e) => handleRotationChange(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              )
             }
-          )
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Opacity" }),
-      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "100",
-            value: (opacity ?? 1) * 100,
-            onChange: (e) => handleOpacityChange(Number(e.target.value) / 100),
-            className: "slider-purple"
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
-          Math.round((opacity ?? 1) * 100),
-          "%"
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Rotation" }),
-      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "360",
-            value: rotation ?? 0,
-            onChange: (e) => handleRotationChange(Number(e.target.value)),
-            className: "slider-purple"
-          }
-        ),
-        /* @__PURE__ */ jsxs("span", { className: "slider-value", children: [
-          rotation ?? 0,
-          "°"
+          ) })
         ] })
-      ] })
-    ] })
+      }
+    )
   ] });
 }
 function TextEffects({
@@ -3000,70 +2967,72 @@ function TextEffects({
     selectedElement.setTextEffect(effect);
     updateElement == null ? void 0 : updateElement(selectedElement);
   };
+  const [isEffectsOpen, setIsEffectsOpen] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
     /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Text Effects" }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Text Effect Type" }),
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          value: (currentEffect == null ? void 0 : currentEffect.getName()) || "",
-          onChange: (e) => handleUpdateEffect({ name: e.target.value }),
-          className: "select-dark w-full",
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: "No Effect" }),
-            TEXT_EFFECTS.map((effect) => /* @__PURE__ */ jsx("option", { value: effect.name, children: effect.name.charAt(0).toUpperCase() + effect.name.slice(1) }, effect.name))
-          ]
-        }
-      )
-    ] }),
-    currentEffect && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Delay (seconds)" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            min: "0",
-            max: "5",
-            step: "0.1",
-            value: currentEffect.getDelay() ?? 0,
-            onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
-            className: "input-dark"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Duration (seconds)" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            min: "0.1",
-            max: "10",
-            step: "0.1",
-            value: currentEffect.getDuration() ?? 1,
-            onChange: (e) => handleUpdateEffect({ duration: Number(e.target.value) }),
-            className: "input-dark"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-        /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Buffer Time (seconds)" }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "number",
-            min: "0.05",
-            max: "1",
-            step: "0.05",
-            value: currentEffect.getBufferTime() ?? 0.1,
-            onChange: (e) => handleUpdateEffect({ bufferTime: Number(e.target.value) }),
-            className: "input-dark"
-          }
-        )
-      ] })
-    ] })
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        title: "Effects",
+        icon: /* @__PURE__ */ jsx(Sparkles, { className: "icon-sm" }),
+        isOpen: isEffectsOpen,
+        onToggle: () => setIsEffectsOpen((open) => !open),
+        children: /* @__PURE__ */ jsxs("div", { className: "properties-group", children: [
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(PropertyRow, { label: "Preset", children: /* @__PURE__ */ jsxs(
+            "select",
+            {
+              value: (currentEffect == null ? void 0 : currentEffect.getName()) || "",
+              onChange: (e) => handleUpdateEffect({ name: e.target.value }),
+              className: "select-dark w-full",
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: "No Effect" }),
+                TEXT_EFFECTS.map((effect) => /* @__PURE__ */ jsx("option", { value: effect.name, children: effect.name.charAt(0).toUpperCase() + effect.name.slice(1) }, effect.name))
+              ]
+            }
+          ) }) }),
+          currentEffect && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(PropertyRow, { label: "Delay (s)", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: "0",
+                max: "5",
+                step: "0.1",
+                value: currentEffect.getDelay() ?? 0,
+                onChange: (e) => handleUpdateEffect({ delay: Number(e.target.value) }),
+                className: "input-dark"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(PropertyRow, { label: "Duration (s)", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: "0.1",
+                max: "10",
+                step: "0.1",
+                value: currentEffect.getDuration() ?? 1,
+                onChange: (e) => handleUpdateEffect({ duration: Number(e.target.value) }),
+                className: "input-dark"
+              }
+            ) }) }),
+            /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(PropertyRow, { label: "Buffer (s)", children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                min: "0.05",
+                max: "1",
+                step: "0.05",
+                value: currentEffect.getBufferTime() ?? 0.1,
+                onChange: (e) => handleUpdateEffect({
+                  bufferTime: Number(e.target.value)
+                }),
+                className: "input-dark"
+              }
+            ) }) })
+          ] })
+        ] })
+      }
+    )
   ] });
 }
 function Animation({
@@ -3251,37 +3220,95 @@ function Animation({
     })() })
   ] });
 }
+const MIN_DB = -60;
+const MAX_DB = 6;
+function linearToDb(linear) {
+  if (linear <= 0) return MIN_DB;
+  const db = 20 * Math.log10(linear);
+  return Math.max(MIN_DB, Math.min(MAX_DB, db));
+}
+function dbToLinear(db) {
+  if (db <= MIN_DB) return 0;
+  const linear = Math.pow(10, db / 20);
+  return Math.min(linear, Math.pow(10, MAX_DB / 20));
+}
+const PLAYBACK_RATE_MIN = 0.25;
+const PLAYBACK_RATE_MAX = 2;
+const PLAYBACK_RATE_STEP = 0.25;
 function PlaybackPropsPanel({
   selectedElement,
   updateElement
 }) {
   const elementProps = (selectedElement == null ? void 0 : selectedElement.getProps()) || {};
-  const { volume } = elementProps;
+  const volumeLinear = elementProps.volume ?? 1;
+  const volumeDb = linearToDb(volumeLinear);
+  const playbackRate = elementProps.playbackRate ?? 1;
   const handleUpdateElement = (props) => {
     if (selectedElement) {
       updateElement == null ? void 0 : updateElement(selectedElement == null ? void 0 : selectedElement.setProps({ ...elementProps, ...props }));
     }
   };
+  const handleVolumeDbChange = (db) => {
+    handleUpdateElement({ volume: dbToLinear(db) });
+  };
+  const handlePlaybackRateChange = (rate) => {
+    handleUpdateElement({ playbackRate: rate });
+  };
+  const [isPlaybackOpen, setIsPlaybackOpen] = useState(false);
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Playback Properties" }),
-    /* @__PURE__ */ jsxs("div", { className: "panel-section", children: [
-      /* @__PURE__ */ jsx("label", { className: "label-dark", children: "Volume" }),
-      /* @__PURE__ */ jsxs("div", { className: "slider-container", children: [
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            type: "range",
-            min: "0",
-            max: "3",
-            step: 0.1,
-            value: volume ?? 0,
-            onChange: (e) => handleUpdateElement({ volume: Number(e.target.value) }),
-            className: "slider-purple"
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "slider-value", children: volume ?? 0 })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Playback" }),
+    /* @__PURE__ */ jsx(
+      AccordionItem,
+      {
+        title: "Playback",
+        icon: /* @__PURE__ */ jsx(Music2, { className: "icon-sm" }),
+        isOpen: isPlaybackOpen,
+        onToggle: () => setIsPlaybackOpen((open) => !open),
+        children: /* @__PURE__ */ jsxs("div", { className: "properties-group", children: [
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(
+            PropertyRow,
+            {
+              label: "Playback rate",
+              secondary: /* @__PURE__ */ jsxs("span", { children: [
+                playbackRate,
+                "×"
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: PLAYBACK_RATE_MIN,
+                  max: PLAYBACK_RATE_MAX,
+                  step: PLAYBACK_RATE_STEP,
+                  value: playbackRate,
+                  onChange: (e) => handlePlaybackRateChange(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(
+            PropertyRow,
+            {
+              label: "Volume",
+              secondary: /* @__PURE__ */ jsx("span", { children: volumeDb <= MIN_DB ? "−∞" : `${Math.round(volumeDb)} dB` }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: MIN_DB,
+                  max: MAX_DB,
+                  step: 1,
+                  value: volumeDb,
+                  onChange: (e) => handleVolumeDbChange(Number(e.target.value)),
+                  className: "slider-purple"
+                }
+              )
+            }
+          ) })
+        ] })
+      }
+    )
   ] });
 }
 const hasAudio = async (src) => {
@@ -3370,11 +3397,11 @@ const saveAsFile = (content, type, name) => {
   a.click();
   URL.revokeObjectURL(url);
 };
-function GenerateSubtitlesPanel({
+function GenerateCaptionsPanel({
   selectedElement,
-  addSubtitlesToTimeline,
-  onGenerateSubtitles,
-  getSubtitleStatus
+  addCaptionsToTimeline,
+  onGenerateCaptions,
+  getCaptionstatus
 }) {
   const [containsAudio, setContainsAudio] = useState(null);
   const [isLoading, setIsLoading] = useState(true);
@@ -3397,7 +3424,7 @@ function GenerateSubtitlesPanel({
     }
   };
   const startPolling = async (reqId) => {
-    if (!getSubtitleStatus) {
+    if (!getCaptionstatus) {
       return;
     }
     setPollingStatus("polling");
@@ -3405,12 +3432,12 @@ function GenerateSubtitlesPanel({
     setErrorMessage(null);
     const poll = async () => {
       try {
-        const response = await getSubtitleStatus(reqId);
+        const response = await getCaptionstatus(reqId);
         if (response.status === "completed") {
           stopPolling();
           setPollingStatus("success");
           setIsGenerating(false);
-          addSubtitlesToTimeline(response.subtitles || []);
+          addCaptionsToTimeline(response.captions || []);
           setTimeout(() => {
             setPollingStatus("idle");
           }, 3e3);
@@ -3419,32 +3446,32 @@ function GenerateSubtitlesPanel({
           stopPolling();
           setPollingStatus("error");
           setIsGenerating(false);
-          setErrorMessage(response.error || "Failed to generate subtitles");
-          console.error("Error generating subtitles:", response.error);
+          setErrorMessage(response.error || "Failed to generate captions");
+          console.error("Error generating captions:", response.error);
         }
       } catch (error) {
         stopPolling();
         setPollingStatus("error");
         setIsGenerating(false);
-        setErrorMessage(error instanceof Error ? error.message : "Failed to get subtitle status");
-        console.error("Error polling for subtitles:", error);
+        setErrorMessage(error instanceof Error ? error.message : "Failed to get caption status");
+        console.error("Error polling for captions:", error);
       }
     };
     await poll();
     pollingIntervalRef.current = setInterval(poll, 2e3);
   };
-  const handleGenerateSubtitles = async () => {
+  const handleGenerateCaptions = async () => {
     if (!(selectedElement instanceof VideoElement)) {
       return;
     }
     const videoElement = selectedElement;
     try {
-      const reqId = await onGenerateSubtitles(videoElement);
+      const reqId = await onGenerateCaptions(videoElement);
       if (!reqId) {
         setPollingStatus("error");
         setIsGenerating(false);
-        setErrorMessage("Failed to start subtitle generation");
-        console.error("Error generating subtitles: Failed to start subtitle generation");
+        setErrorMessage("Failed to start caption generation");
+        console.error("Error generating captions: Failed to start caption generation");
         return;
       }
       currentReqIdRef.current = reqId;
@@ -3452,8 +3479,8 @@ function GenerateSubtitlesPanel({
     } catch (error) {
       setPollingStatus("error");
       setIsGenerating(false);
-      setErrorMessage(error instanceof Error ? error.message : "Failed to start subtitle generation");
-      console.error("Error generating subtitles:", error);
+      setErrorMessage(error instanceof Error ? error.message : "Failed to start caption generation");
+      console.error("Error generating captions:", error);
     }
   };
   const checkAudio = async () => {
@@ -3485,7 +3512,7 @@ function GenerateSubtitlesPanel({
     setErrorMessage(null);
   }, [selectedElement]);
   return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
-    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Generate Subtitles Panel" }),
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Generate Captions Panel" }),
     isLoading && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
       /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Checking for audio..." })
@@ -3496,85 +3523,228 @@ function GenerateSubtitlesPanel({
     ] }) }) }),
     !isLoading && containsAudio === true && pollingStatus === "idle" && !isGenerating && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(Volume2, { className: "empty-state-icon" }),
-      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate subtitles" })
+      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Audio detected! You can now generate captions" })
     ] }) }) }),
     !isLoading && isGenerating && pollingStatus === "polling" && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(LoaderCircle, { className: "empty-state-icon animate-spin" }),
-      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Generating subtitles... Please wait" })
+      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Generating captions... Please wait" })
     ] }) }) }),
     !isLoading && pollingStatus === "success" && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(CircleCheck, { className: "empty-state-icon", color: "var(--color-green-500)" }),
-      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Subtitles generated successfully!" })
+      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: "Captions generated successfully!" })
     ] }) }) }),
     !isLoading && pollingStatus === "error" && /* @__PURE__ */ jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxs("div", { className: "empty-state-content", children: [
       /* @__PURE__ */ jsx(CircleX, { className: "empty-state-icon", color: "var(--color-red-500)" }),
-      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: errorMessage || "Failed to generate subtitles" })
+      /* @__PURE__ */ jsx("p", { className: "empty-state-text", children: errorMessage || "Failed to generate captions" })
     ] }) }) }),
     !isLoading && /* @__PURE__ */ jsx("div", { className: "flex panel-section", children: /* @__PURE__ */ jsx(
       "button",
       {
-        onClick: handleGenerateSubtitles,
+        onClick: handleGenerateCaptions,
         disabled: !containsAudio || isGenerating,
         className: "btn-primary w-full",
-        children: isGenerating ? "Generating..." : "Generate Subtitles"
+        children: isGenerating ? "Generating..." : "Generate Captions"
       }
     ) })
   ] });
 }
-function PropertiesPanelContainer({
-  selectedProp,
+function TextPropsPanel({
   selectedElement,
-  updateElement,
-  addSubtitlesToTimeline,
-  onGenerateSubtitles,
-  getSubtitleStatus
+  updateElement
 }) {
-  if (!selectedElement) {
-    return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Select Element to see properties" }) }) });
-  }
-  if (selectedElement.getType() === "caption") {
-    return /* @__PURE__ */ jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Not available for sub-title" }) }) });
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    selectedProp === "element-props" && /* @__PURE__ */ jsx(
-      ElementProps,
-      {
-        selectedElement,
-        updateElement
-      }
-    ),
-    selectedProp === "playback-props" && /* @__PURE__ */ jsx(
-      PlaybackPropsPanel,
-      {
-        selectedElement,
-        updateElement
-      }
-    ),
-    selectedProp === "text-effects" && /* @__PURE__ */ jsx(
-      TextEffects,
-      {
-        selectedElement,
-        updateElement
-      }
-    ),
-    selectedProp === "animations" && /* @__PURE__ */ jsx(
-      Animation,
-      {
-        selectedElement,
-        updateElement
-      }
-    ),
-    selectedProp === "generate-subtitles" && /* @__PURE__ */ jsx(
-      GenerateSubtitlesPanel,
+  if (!(selectedElement instanceof TextElement)) return null;
+  const textProps = selectedElement.getProps() || {};
+  const [isTypographyOpen, setIsTypographyOpen] = useState(false);
+  const currentAlign = textProps.textAlign ?? "center";
+  const currentWeight = textProps.fontWeight ?? 400;
+  const isBold = currentWeight >= 600;
+  const isItalic = textProps.fontStyle === "italic";
+  const handleUpdate = (patch) => {
+    if (!selectedElement) return;
+    const next = { ...textProps, ...patch };
+    selectedElement.setProps(next);
+    updateElement == null ? void 0 : updateElement(selectedElement);
+  };
+  const toggleBold = () => {
+    handleUpdate({ fontWeight: isBold ? 400 : 700 });
+  };
+  const toggleItalic = () => {
+    handleUpdate({ fontStyle: isItalic ? "normal" : "italic" });
+  };
+  const setAlign = (align) => {
+    handleUpdate({ textAlign: align });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+    /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Typography" }),
+    /* @__PURE__ */ jsx(
+      AccordionItem,
       {
-        selectedElement,
-        addSubtitlesToTimeline,
-        onGenerateSubtitles,
-        getSubtitleStatus
+        title: "Typography",
+        icon: /* @__PURE__ */ jsx(Type, { className: "icon-sm" }),
+        isOpen: isTypographyOpen,
+        onToggle: () => setIsTypographyOpen((open) => !open),
+        children: /* @__PURE__ */ jsxs("div", { className: "properties-group", children: [
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsx(
+            PropertyRow,
+            {
+              label: "Font size",
+              secondary: /* @__PURE__ */ jsxs("span", { children: [
+                textProps.fontSize ?? 48,
+                "px"
+              ] }),
+              children: /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "range",
+                  min: 8,
+                  max: 160,
+                  value: textProps.fontSize ?? 48,
+                  onChange: (e) => handleUpdate({ fontSize: Number(e.target.value) }),
+                  className: "slider-purple"
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsxs(PropertyRow, { label: "Style", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `form-btn ${isBold ? "active" : ""}`,
+                onClick: toggleBold,
+                title: "Bold",
+                children: /* @__PURE__ */ jsx(Bold, { className: "icon-sm" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `form-btn ${isItalic ? "active" : ""}`,
+                onClick: toggleItalic,
+                title: "Italic",
+                children: /* @__PURE__ */ jsx(Italic, { className: "icon-sm" })
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "property-section", children: /* @__PURE__ */ jsxs(PropertyRow, { label: "Align", children: [
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `form-btn ${currentAlign === "left" ? "active" : ""}`,
+                onClick: () => setAlign("left"),
+                title: "Align left",
+                children: /* @__PURE__ */ jsx(AlignLeft, { className: "icon-sm" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `form-btn ${currentAlign === "center" ? "active" : ""}`,
+                onClick: () => setAlign("center"),
+                title: "Align center",
+                children: /* @__PURE__ */ jsx(AlignCenter, { className: "icon-sm" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: `form-btn ${currentAlign === "right" ? "active" : ""}`,
+                onClick: () => setAlign("right"),
+                title: "Align right",
+                children: /* @__PURE__ */ jsx(AlignRight, { className: "icon-sm" })
+              }
+            )
+          ] }) })
+        ] })
       }
     )
   ] });
 }
+function PropertiesPanelContainer({
+  selectedElement,
+  updateElement,
+  addCaptionsToTimeline,
+  onGenerateCaptions,
+  getCaptionstatus,
+  videoResolution
+}) {
+  const title = selectedElement instanceof TextElement ? selectedElement.getText() : (selectedElement == null ? void 0 : selectedElement.getName()) || (selectedElement == null ? void 0 : selectedElement.getType()) || "Element";
+  return /* @__PURE__ */ jsxs("aside", { className: "properties-panel", "aria-label": "Element properties inspector", children: [
+    /* @__PURE__ */ jsxs("div", { className: "properties-header", children: [
+      !selectedElement && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Composition" }),
+      selectedElement && selectedElement.getType() === "caption" && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: "Subtitles are edited from the captions panel" }),
+      selectedElement && selectedElement.getType() !== "caption" && /* @__PURE__ */ jsx("h3", { className: "properties-title", children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "prop-content", children: [
+      !selectedElement && /* @__PURE__ */ jsxs("div", { className: "panel-container", children: [
+        /* @__PURE__ */ jsx("div", { className: "panel-title", children: "Canvas & Render" }),
+        /* @__PURE__ */ jsx("div", { className: "properties-group", children: /* @__PURE__ */ jsxs("div", { className: "property-section", children: [
+          /* @__PURE__ */ jsx("span", { className: "property-label", children: "Size" }),
+          /* @__PURE__ */ jsxs("span", { className: "properties-size-readonly", children: [
+            videoResolution.width,
+            " × ",
+            videoResolution.height
+          ] })
+        ] }) })
+      ] }),
+      selectedElement && selectedElement.getType() === "caption" ? null : selectedElement && /* @__PURE__ */ jsx(Fragment, { children: (() => {
+        const isText = selectedElement instanceof TextElement;
+        const isVideo = selectedElement instanceof VideoElement;
+        const isAudio = selectedElement instanceof AudioElement;
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          isText && /* @__PURE__ */ jsx(
+            TextPropsPanel,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
+          !isAudio && /* @__PURE__ */ jsx(
+            ElementProps,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
+          (isVideo || isAudio) && /* @__PURE__ */ jsx(
+            PlaybackPropsPanel,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
+          isText && /* @__PURE__ */ jsx(
+            TextEffects,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
+          !isAudio && /* @__PURE__ */ jsx(
+            Animation,
+            {
+              selectedElement,
+              updateElement
+            }
+          ),
+          isVideo && /* @__PURE__ */ jsx(
+            GenerateCaptionsPanel,
+            {
+              selectedElement,
+              addCaptionsToTimeline,
+              onGenerateCaptions,
+              getCaptionstatus
+            }
+          )
+        ] });
+      })() })
+    ] })
+  ] });
+}
 const useStudioOperation = (studioConfig) => {
   const { editor, present, videoResolution } = useTimelineContext();
   const { setSeekTime, setPlayerState } = useLivePlayerContext();
@@ -3637,30 +3807,30 @@ const useStudioOperation = (studioConfig) => {
       alert("Export video not supported in demo mode");
     }
   };
-  const onGenerateSubtitles = async (videoElement) => {
-    if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
-      const service = studioConfig.subtitleGenerationService;
-      const reqId = await service.generateSubtitles(videoElement, present);
+  const onGenerateCaptions = async (videoElement) => {
+    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
+      const service = studioConfig.captionGenerationService;
+      const reqId = await service.generateCaptions(videoElement, present);
       return reqId;
     }
-    alert("Generate subtitles not supported in demo mode");
+    alert("Generate captions not supported in demo mode");
     return null;
   };
-  const addSubtitlesToTimeline = (subtitles) => {
+  const addCaptionsToTimeline = (captions) => {
     var _a;
-    const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) == null ? void 0 : _a.updateProjectWithSubtitles(subtitles);
+    const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.updateProjectWithCaptions(captions);
     if (updatedProjectJSON) {
       editor.loadProject(updatedProjectJSON);
     }
   };
-  const getSubtitleStatus = async (reqId) => {
-    if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
-      const service = studioConfig.subtitleGenerationService;
+  const getCaptionstatus = async (reqId) => {
+    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
+      const service = studioConfig.captionGenerationService;
       return await service.getRequestStatus(reqId);
     }
     return {
       status: "failed",
-      error: "Subtitle generation service not found"
+      error: "Caption generation service not found"
     };
   };
   return {
@@ -3668,48 +3838,9 @@ const useStudioOperation = (studioConfig) => {
     onSaveProject,
     onExportVideo,
     onNewProject,
-    onGenerateSubtitles,
-    addSubtitlesToTimeline,
-    getSubtitleStatus
-  };
-};
-const useGenerateSubtitles = (studioConfig) => {
-  const { editor, present } = useTimelineContext();
-  const onGenerateSubtitles = async (videoElement) => {
-    if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
-      const service = studioConfig.subtitleGenerationService;
-      const reqId = await service.generateSubtitles(
-        videoElement,
-        present
-      );
-      return reqId;
-    }
-    alert("Generate subtitles not supported in demo mode");
-    return null;
-  };
-  const addSubtitlesToTimeline = (subtitles) => {
-    var _a;
-    const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) == null ? void 0 : _a.updateProjectWithSubtitles(
-      subtitles
-    );
-    if (updatedProjectJSON) {
-      editor.loadProject(updatedProjectJSON);
-    }
-  };
-  const getSubtitleStatus = async (reqId) => {
-    if (studioConfig == null ? void 0 : studioConfig.subtitleGenerationService) {
-      const service = studioConfig.subtitleGenerationService;
-      return await service.getRequestStatus(reqId);
-    }
-    return {
-      status: "failed",
-      error: "Subtitle generation service not found"
-    };
-  };
-  return {
-    onGenerateSubtitles,
-    addSubtitlesToTimeline,
-    getSubtitleStatus
+    onGenerateCaptions,
+    addCaptionsToTimeline,
+    getCaptionstatus
   };
 };
 function TwickStudio({ studioConfig }) {
@@ -3717,8 +3848,6 @@ function TwickStudio({ studioConfig }) {
   const {
     selectedTool,
     setSelectedTool,
-    selectedProp,
-    setSelectedProp,
     selectedElement,
     addElement,
     updateElement
@@ -3730,7 +3859,7 @@ function TwickStudio({ studioConfig }) {
     onSaveProject,
     onExportVideo
   } = useStudioOperation(studioConfig);
-  const { onGenerateSubtitles, addSubtitlesToTimeline, getSubtitleStatus } = useGenerateSubtitles(studioConfig);
+  const { onGenerateCaptions, addCaptionsToTimeline, getCaptionstatus } = useGenerateCaptions(studioConfig);
   const twickStudiConfig = useMemo(
     () => ({
       canvasMode: true,
@@ -3762,7 +3891,7 @@ function TwickStudio({ studioConfig }) {
           setSelectedTool
         }
       ),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "studio-left-panel", children: /* @__PURE__ */ jsx(
         ElementPanelContainer,
         {
           videoResolution,
@@ -3772,7 +3901,7 @@ function TwickStudio({ studioConfig }) {
           addElement,
           updateElement
         }
-      ),
+      ) }),
       /* @__PURE__ */ jsx("main", { className: "main-container", children: /* @__PURE__ */ jsx("div", { className: "canvas-wrapper", children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -3783,28 +3912,59 @@ function TwickStudio({ studioConfig }) {
           children: /* @__PURE__ */ jsx(VideoEditor, { editorConfig: twickStudiConfig })
         }
       ) }) }),
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx("div", { className: "studio-right-panel", children: /* @__PURE__ */ jsx(
         PropertiesPanelContainer,
         {
-          selectedProp,
           selectedElement,
           updateElement,
-          addSubtitlesToTimeline,
-          onGenerateSubtitles,
-          getSubtitleStatus
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        PropsToolbar,
-        {
-          selectedElement,
-          selectedProp,
-          setSelectedProp
+          addCaptionsToTimeline,
+          onGenerateCaptions,
+          getCaptionstatus,
+          videoResolution
         }
-      )
+      ) })
     ] })
   ] }) });
 }
+const useGenerateCaptions = (studioConfig) => {
+  const { editor, present } = useTimelineContext();
+  const onGenerateCaptions = async (videoElement) => {
+    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
+      const service = studioConfig.captionGenerationService;
+      const reqId = await service.generateCaptions(
+        videoElement,
+        present
+      );
+      return reqId;
+    }
+    alert("Generate captions not supported in demo mode");
+    return null;
+  };
+  const addCaptionsToTimeline = (captions) => {
+    var _a;
+    const updatedProjectJSON = (_a = studioConfig == null ? void 0 : studioConfig.captionGenerationService) == null ? void 0 : _a.updateProjectWithCaptions(
+      captions
+    );
+    if (updatedProjectJSON) {
+      editor.loadProject(updatedProjectJSON);
+    }
+  };
+  const getCaptionstatus = async (reqId) => {
+    if (studioConfig == null ? void 0 : studioConfig.captionGenerationService) {
+      const service = studioConfig.captionGenerationService;
+      return await service.getRequestStatus(reqId);
+    }
+    return {
+      status: "failed",
+      error: "Caption generation service not found"
+    };
+  };
+  return {
+    onGenerateCaptions,
+    addCaptionsToTimeline,
+    getCaptionstatus
+  };
+};
 export {
   ANIMATIONS2 as ANIMATIONS,
   AudioElement2 as AudioElement,
@@ -3817,6 +3977,7 @@ export {
   CAPTION_STYLE2 as CAPTION_STYLE,
   CAPTION_STYLE_OPTIONS,
   CaptionElement2 as CaptionElement,
+  CaptionsPanel,
   CircleElement2 as CircleElement,
   CirclePanel,
   ElementAdder,
@@ -3831,8 +3992,7 @@ export {
   ElementUpdater,
   ElementValidator,
   INITIAL_TIMELINE_DATA,
-  IconElement2 as IconElement,
-  IconPanel,
+  IconElement,
   ImageElement2 as ImageElement,
   ImagePanel,
   LivePlayer,
@@ -3843,7 +4003,6 @@ export {
   RectElement2 as RectElement,
   RectPanel,
   StudioHeader,
-  SubtitlesPanel,
   TEXT_EFFECTS2 as TEXT_EFFECTS,
   TIMELINE_ACTION,
   TIMELINE_ELEMENT_TYPE,
@@ -3872,10 +4031,11 @@ export {
   isTrackId,
   setElementColors,
   useEditorManager2 as useEditorManager,
-  useGenerateSubtitles,
+  useGenerateCaptions,
   useLivePlayerContext2 as useLivePlayerContext,
   usePlayerControl,
   useStudioManager,
+  useTimelineContext2 as useTimelineContext,
   useTimelineControl
 };
 //# sourceMappingURL=index.mjs.map