@twick/studio 0.14.7 → 0.14.9

package/dist/index.js

@@ -110,23 +110,15 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    */
-  const __iconNode$o = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-  const Check = createLucideIcon("check", __iconNode$o);
+  const __iconNode$o = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
+  const Circle = createLucideIcon("circle", __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$n = [["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }]];
-  const Circle = createLucideIcon("circle", __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$m = [
+  const __iconNode$n = [
     [
       "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" }
@@ -135,119 +127,119 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["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$m);
+  const Clapperboard = createLucideIcon("clapperboard", __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$l = [
+  const __iconNode$m = [
     ["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$l);
+  const Download = createLucideIcon("download", __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$k = [
+  const __iconNode$l = [
     ["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$k);
+  const File = createLucideIcon("file", __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$j = [
+  const __iconNode$k = [
     ["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$j);
+  const Image = createLucideIcon("image", __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$i = [
+  const __iconNode$j = [
     ["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 Infinity = createLucideIcon("infinity", __iconNode$i);
+  const Infinity = createLucideIcon("infinity", __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$h = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$h);
+  const __iconNode$i = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+  const LoaderCircle = createLucideIcon("loader-circle", __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$g = [
+  const __iconNode$h = [
     ["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$g);
+  const MessageSquare = createLucideIcon("message-square", __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$f = [
+  const __iconNode$g = [
     ["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$f);
+  const Music = createLucideIcon("music", __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$e = [
+  const __iconNode$f = [
     ["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$e);
+  const Pause = createLucideIcon("pause", __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$d = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-  const Play = createLucideIcon("play", __iconNode$d);
+  const __iconNode$e = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+  const Play = createLucideIcon("play", __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$c = [
+  const __iconNode$d = [
     ["path", { d: "M5 12h14", key: "1ays0h" }],
     ["path", { d: "M12 5v14", key: "s699le" }]
   ];
-  const Plus = createLucideIcon("plus", __iconNode$c);
+  const Plus = createLucideIcon("plus", __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$b = [
+  const __iconNode$c = [
     [
       "path",
       {
@@ -258,7 +250,21 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ["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$b);
+  const Save = createLucideIcon("save", __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 = [
+    ["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$b);
   /**
    * @license lucide-react v0.511.0 - ISC
    *
@@ -436,8 +442,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     { 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: "rect", name: "Rect", icon: "Rect", description: "Rect Element" },
+    { id: "subtitle", name: "Subtitles", icon: "MessageSquare", description: "Manage subtitles", shortcut: "S" }
   ];
   const getIcon$1 = (iconName) => {
     switch (iconName) {
@@ -560,34 +566,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const useStudioManager = () => {
     const [selectedProp, setSelectedProp] = react.useState("element-props");
-    const { editor, selectedItem, setSelectedItem } = timeline.useTimelineContext();
+    const { selectedItem } = timeline.useTimelineContext();
+    const { addElement, updateElement } = VideoEditor.useEditorManager();
     const selectedElement = selectedItem instanceof timeline.TrackElement ? selectedItem : null;
     const [selectedTool, setSelectedTool] = react.useState("none");
     const isToolChanged = react.useRef(false);
-    const addElement = (element) => {
-      if (selectedItem instanceof timeline.Track) {
-        editor.addElementToTrack(selectedItem, element);
-      } else {
-        const newTrack = editor.addTrack("Track");
-        editor.addElementToTrack(newTrack, element);
-      }
-    };
-    const updateElement = (element) => {
-      const updatedElement = editor.updateElement(element);
-      editor.refresh();
-      setSelectedItem(updatedElement);
-    };
     react.useEffect(() => {
       if (selectedItem instanceof timeline.TrackElement) {
         setSelectedTool(selectedItem.getType());
         isToolChanged.current = true;
       } else if (selectedItem instanceof timeline.Track) ;
       else {
-        if (isToolChanged.current) {
-          setSelectedTool("none");
-        } else {
-          setSelectedTool("video");
-        }
+        setSelectedTool("video");
       }
     }, [selectedItem]);
     return {
@@ -600,131 +590,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       updateElement
     };
   };
-  function SubtitlesPanel() {
-    const [subtitles, setSubtitles] = react.useState([]);
-    const handleGenerate = () => {
-      console.log("Generating subtitles...");
-    };
-    const handleAdd = () => {
-      const newId = (subtitles.length + 1).toString();
-      const lastEnd = subtitles.length > 0 ? subtitles[subtitles.length - 1].end : 0;
-      const newSubtitle = {
-        id: newId,
-        start: lastEnd,
-        end: lastEnd + 1,
-        text: ""
-      };
-      setSubtitles([...subtitles, newSubtitle]);
-    };
-    const handleDelete = (id) => {
-      setSubtitles(subtitles.filter((sub) => sub.id !== id));
-    };
-    const handleSave = (id) => {
-      console.log("Saving subtitle:", id);
-    };
-    const handleUpdateSubtitle = (id, field, value) => {
-      setSubtitles(subtitles.map(
-        (sub) => sub.id === id ? { ...sub, [field]: value } : sub
-      ));
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: "Subtitles" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleGenerate,
-            className: "btn-primary",
-            children: "Generate"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            onClick: handleAdd,
-            className: "btn-primary",
-            children: "Add"
-          }
-        )
-      ] }) }),
-      subtitles.map((subtitle) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          className: "panel-section",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container", children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "Start" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "number",
-                    min: "0",
-                    step: "0.1",
-                    value: subtitle.start,
-                    onChange: (e) => handleUpdateSubtitle(subtitle.id, "start", Number(e.target.value)),
-                    className: "input-dark"
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-small", children: "End" }),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "input",
-                  {
-                    type: "number",
-                    min: "0",
-                    step: "0.1",
-                    value: subtitle.end,
-                    onChange: (e) => handleUpdateSubtitle(subtitle.id, "end", Number(e.target.value)),
-                    className: "input-dark"
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("label", { className: "label-dark", children: "Subtitle Text" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  type: "text",
-                  placeholder: "Enter subtitle text",
-                  value: subtitle.text,
-                  onChange: (e) => handleUpdateSubtitle(subtitle.id, "text", e.target.value),
-                  className: "input-dark"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container justify-between", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => handleDelete(subtitle.id),
-                  className: "btn-danger",
-                  title: "Delete subtitle",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-sm" })
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  onClick: () => handleSave(subtitle.id),
-                  className: "btn-primary",
-                  title: "Save subtitle",
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Check, { className: "icon-sm" })
-                }
-              )
-            ] })
-          ]
-        },
-        subtitle.id
-      )),
-      subtitles.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "No subtitles yet" }),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-subtext", children: 'Click "Add" to create your first subtitle' })
-      ] }) }) })
-    ] });
-  }
   const FileInput = ({
     acceptFileTypes,
     onFileLoad,
@@ -2394,9 +2259,198 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     });
     return /* @__PURE__ */ jsxRuntime.jsx(CirclePanel, { ...circlePanelProps });
   }
+  function SubtitlesPanel({
+    subtitles,
+    addSubtitle,
+    splitSubtitle,
+    deleteSubtitle,
+    updateSubtitle
+  }) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel-container", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "panel-title", children: "Subtitles" }),
+      subtitles.map((subtitle, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "panel-section gap-2",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                type: "text",
+                placeholder: "Enter subtitle text",
+                value: subtitle.t,
+                onChange: (e) => updateSubtitle(i, { ...subtitle, t: e.target.value }),
+                className: "input-dark"
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-container justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => splitSubtitle(i),
+                  className: "btn-ghost",
+                  title: "Split subtitle",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-sm" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => deleteSubtitle(i),
+                  className: "btn-ghost",
+                  title: "Delete subtitle",
+                  children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "icon-sm", color: "var(--color-red-500)" })
+                }
+              )
+            ] })
+          ]
+        },
+        i
+      )),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-section", children: /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: addSubtitle, className: "btn-primary w-full", title: "Add subtitle", children: "Add" }) })
+    ] });
+  }
+  const CAPTION_PROPS = {
+    [timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
+      font: {
+        size: 50,
+        weight: 700,
+        family: "Bangers"
+      },
+      colors: {
+        text: "#ffffff",
+        highlight: "#ff4081",
+        bgColor: "#444444"
+      },
+      lineWidth: 0.35,
+      stroke: "#000000",
+      fontWeight: 700,
+      shadowOffset: [-3, 3],
+      shadowColor: "#000000"
+    },
+    [timeline.CAPTION_STYLE.WORD_BY_WORD]: {
+      font: {
+        size: 50,
+        weight: 700,
+        family: "Bangers"
+      },
+      colors: {
+        text: "#ffffff",
+        highlight: "#ff4081",
+        bgColor: "#444444"
+      },
+      lineWidth: 0.35,
+      stroke: "#000000",
+      shadowOffset: [-2, 2],
+      shadowColor: "#000000",
+      shadowBlur: 5
+    },
+    [timeline.CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
+      font: {
+        size: 50,
+        weight: 700,
+        family: "Bangers"
+      },
+      colors: {
+        text: "#ffffff",
+        highlight: "#ff4081",
+        bgColor: "#444444"
+      },
+      lineWidth: 0.35,
+      shadowOffset: [-2, 2],
+      shadowColor: "#000000",
+      shadowBlur: 5
+    }
+  };
+  const useSubtitlesPanel = () => {
+    const [subtitles, setSubtitles] = react.useState([]);
+    const subtitlesTrack = react.useRef(null);
+    const { editor } = timeline.useTimelineContext();
+    const fetchSubtitles = async () => {
+      const editorSubtitlesTrack = editor.getSubtiltesTrack();
+      if (editorSubtitlesTrack) {
+        subtitlesTrack.current = editorSubtitlesTrack;
+        setSubtitles(
+          editorSubtitlesTrack.getElements().map((element) => ({
+            s: element.getStart(),
+            e: element.getEnd(),
+            t: element.getText()
+          }))
+        );
+      }
+    };
+    react.useEffect(() => {
+      fetchSubtitles();
+    }, []);
+    const checkSubtitlesTrack = () => {
+      var _a;
+      if (!subtitlesTrack.current) {
+        subtitlesTrack.current = editor.addTrack("Subtitles", "caption");
+        const props = {
+          capStyle: timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT,
+          ...CAPTION_PROPS[timeline.CAPTION_STYLE.WORD_BG_HIGHLIGHT],
+          x: 0,
+          y: 200,
+          applyToAll: true
+        };
+        (_a = subtitlesTrack.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 captionElement = new timeline.CaptionElement(
+        newSubtitle.t,
+        newSubtitle.s,
+        newSubtitle.e
+      );
+      editor.addElementToTrack(subtitlesTrack.current, captionElement);
+    };
+    const splitSubtitle = async (index) => {
+      if (subtitlesTrack.current) {
+        const element = subtitlesTrack.current.getElements()[index];
+        const splitResult = await editor.splitElement(
+          element,
+          element.getStart() + element.getDuration() / 2
+        );
+        if (splitResult.success) {
+          fetchSubtitles();
+        }
+      }
+    };
+    const deleteSubtitle = (index) => {
+      setSubtitles(subtitles.filter((_, i) => i !== index));
+      if (subtitlesTrack.current) {
+        editor.removeElement(subtitlesTrack.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);
+        editor.updateElement(element);
+      }
+    };
+    return {
+      subtitles,
+      addSubtitle,
+      splitSubtitle,
+      deleteSubtitle,
+      updateSubtitle
+    };
+  };
+  function SubtitlesPanelContainer() {
+    const subtitlesPanelProps = useSubtitlesPanel();
+    return /* @__PURE__ */ jsxRuntime.jsx(SubtitlesPanel, { ...subtitlesPanelProps });
+  }
   const ElementPanelContainer = ({
     selectedTool,
-    setSelectedTool,
     videoResolution,
     selectedElement,
     addElement,
@@ -2404,9 +2458,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => {
     const addNewElement = async (element) => {
       await addElement(element);
-      if (!["image", "video", "audio"].includes(selectedTool)) {
-        setSelectedTool("none");
-      }
     };
     const renderLibrary = () => {
       switch (selectedTool) {
@@ -2480,11 +2531,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
             }
           );
         case "subtitle":
-          return /* @__PURE__ */ jsxRuntime.jsx(SubtitlesPanel, {});
+          return /* @__PURE__ */ jsxRuntime.jsx(SubtitlesPanelContainer, {});
         default:
           return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "empty-state", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "empty-state-content", children: [
             /* @__PURE__ */ jsxRuntime.jsx(WandSparkles, { className: "empty-state-icon" }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Select a Tool to Begin" })
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "empty-state-text", children: "Select an element from toolbar" })
           ] }) }) });
       }
     };
@@ -3033,6 +3084,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     if (!selectedElement) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Select Element to see properties" }) }) });
     }
+    if (selectedElement.getType() === "caption") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel-container", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "properties-header", children: /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "properties-title", children: "Not available for sub-title" }) }) });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       selectedProp === "element-props" && /* @__PURE__ */ jsxRuntime.jsx(
         ElementProps,