@twick/video-editor 0.14.3 → 0.14.4

package/dist/index.js

@@ -6936,10 +6936,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     objects.forEach((obj) => canvas.add(obj));
     canvas.renderAll();
   };
+  const getCanvasContext = (canvas) => {
+    var _a2, _b, _c, _d;
+    if (!canvas || !((_b = (_a2 = canvas.elements) == null ? void 0 : _a2.lower) == null ? void 0 : _b.ctx)) return;
+    return (_d = (_c = canvas.elements) == null ? void 0 : _c.lower) == null ? void 0 : _d.ctx;
+  };
   const clearCanvas = (canvas) => {
-    if (!canvas) return;
-    canvas.clear();
-    canvas.renderAll();
+    try {
+      if (!canvas || !getCanvasContext(canvas)) return;
+      canvas.clear();
+      canvas.renderAll();
+    } catch (error) {
+      console.warn("Error clearing canvas:", error);
+    }
   };
   const convertToCanvasPosition = (x2, y2, canvasMetadata) => {
     return {
@@ -7085,7 +7094,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       timeoutId = window.setTimeout(() => {
         cleanup();
         reject(new Error("Video loading timed out"));
-      }, 5e3);
+      }, 15e3);
       video.src = videoUrl;
       document.body.appendChild(video);
     });
@@ -7136,7 +7145,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     canvas,
     canvasMetadata
   }) => {
-    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v;
+    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w;
     const { x: x2, y: y2 } = convertToCanvasPosition(
       ((_a2 = element.props) == null ? void 0 : _a2.x) || 0,
       ((_b = element.props) == null ? void 0 : _b.y) || 0,
@@ -7155,15 +7164,16 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       fontStyle: ((_g = element.props) == null ? void 0 : _g.fontStyle) || "normal",
       fontWeight: ((_h = element.props) == null ? void 0 : _h.fontWeight) || "normal",
       fill: ((_i2 = element.props) == null ? void 0 : _i2.fill) || DEFAULT_TEXT_PROPS.fill,
+      opacity: ((_j = element.props) == null ? void 0 : _j.opacity) ?? 1,
       skipWrapping: false,
-      textAlign: ((_j = element.props) == null ? void 0 : _j.textAlign) || "center",
-      stroke: ((_k = element.props) == null ? void 0 : _k.stroke) || DEFAULT_TEXT_PROPS.stroke,
-      strokeWidth: ((_l = element.props) == null ? void 0 : _l.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-      shadow: ((_m = element.props) == null ? void 0 : _m.shadowColor) ? new ds({
-        offsetX: ((_o2 = (_n2 = element.props) == null ? void 0 : _n2.shadowOffset) == null ? void 0 : _o2.length) && ((_q = (_p = element.props) == null ? void 0 : _p.shadowOffset) == null ? void 0 : _q.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-        offsetY: ((_s2 = (_r2 = element.props) == null ? void 0 : _r2.shadowOffset) == null ? void 0 : _s2.length) && ((_t2 = element.props) == null ? void 0 : _t2.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-        blur: (((_u = element.props) == null ? void 0 : _u.shadowBlur) || 2) / 2,
-        color: (_v = element.props) == null ? void 0 : _v.shadowColor
+      textAlign: ((_k = element.props) == null ? void 0 : _k.textAlign) || "center",
+      stroke: ((_l = element.props) == null ? void 0 : _l.stroke) || DEFAULT_TEXT_PROPS.stroke,
+      strokeWidth: ((_m = element.props) == null ? void 0 : _m.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+      shadow: ((_n2 = element.props) == null ? void 0 : _n2.shadowColor) ? new ds({
+        offsetX: ((_p = (_o2 = element.props) == null ? void 0 : _o2.shadowOffset) == null ? void 0 : _p.length) && ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+        offsetY: ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) && ((_u = element.props) == null ? void 0 : _u.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+        blur: (((_v = element.props) == null ? void 0 : _v.shadowBlur) || 2) / 2,
+        color: (_w = element.props) == null ? void 0 : _w.shadowColor
       }) : void 0
     });
     text.set("id", element.id);
@@ -7186,7 +7196,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     index,
     canvasMetadata
   }) => {
-    var _a2, _b, _c, _d;
+    var _a2, _b, _c, _d, _e2;
     const width = (((_a2 = element.props) == null ? void 0 : _a2.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
     const height = (((_b = element.props) == null ? void 0 : _b.height) || 0) * canvasMetadata.scaleY || canvasMetadata.height;
     const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7201,6 +7211,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     img.set("height", height);
     img.set("left", x2);
     img.set("top", y2);
+    img.set("opacity", ((_e2 = element.props) == null ? void 0 : _e2.opacity) ?? 1);
     img.set("selectable", true);
     img.set("hasControls", true);
     img.set("touchAction", "all");
@@ -7212,7 +7223,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     captionProps,
     canvasMetadata
   }) => {
-    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z;
+    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A;
     const { x: x2, y: y2 } = convertToCanvasPosition(
       ((_b = (_a2 = element.props) == null ? void 0 : _a2.pos) == null ? void 0 : _b.x) || ((_c = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _c.x) || 0,
       ((_e2 = (_d = element.props) == null ? void 0 : _d.pos) == null ? void 0 : _e2.y) || ((_f = captionProps == null ? void 0 : captionProps.pos) == null ? void 0 : _f.y) || 0,
@@ -7231,13 +7242,14 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       fill: ((_o2 = element.props) == null ? void 0 : _o2.fill) || ((_p = captionProps.color) == null ? void 0 : _p.text) || DEFAULT_CAPTION_PROPS.fill,
       fontWeight: DEFAULT_CAPTION_PROPS.fontWeight,
       stroke: ((_q = element.props) == null ? void 0 : _q.stroke) || DEFAULT_CAPTION_PROPS.stroke,
+      opacity: ((_r2 = element.props) == null ? void 0 : _r2.opacity) ?? 1,
       shadow: new ds({
-        offsetX: ((_s2 = (_r2 = element.props) == null ? void 0 : _r2.shadowOffset) == null ? void 0 : _s2[0]) || ((_t2 = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _t2[0]),
-        offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v[1]) || ((_w = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _w[1]),
-        blur: ((_x = element.props) == null ? void 0 : _x.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
-        color: ((_y = element.props) == null ? void 0 : _y.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
+        offsetX: ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2[0]) || ((_u = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _u[0]),
+        offsetY: ((_w = (_v = element.props) == null ? void 0 : _v.shadowOffset) == null ? void 0 : _w[1]) || ((_x = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _x[1]),
+        blur: ((_y = element.props) == null ? void 0 : _y.shadowBlur) || DEFAULT_CAPTION_PROPS.shadowBlur,
+        color: ((_z = element.props) == null ? void 0 : _z.shadowColor) || DEFAULT_CAPTION_PROPS.shadowColor
       }),
-      strokeWidth: ((_z = element.props) == null ? void 0 : _z.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
+      strokeWidth: ((_A = element.props) == null ? void 0 : _A.lineWidth) || DEFAULT_CAPTION_PROPS.lineWidth
     });
     caption.set("id", element.id);
     caption.set("zIndex", index);
@@ -7328,7 +7340,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     canvasMetadata,
     currentFrameEffect
   }) => {
-    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m;
+    var _a2, _b, _c, _d, _e2, _f, _g, _h, _i2, _j, _k, _l, _m, _n2;
     let frameSize;
     let angle;
     let framePosition;
@@ -7383,7 +7395,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       originX: "center",
       originY: "center",
       scaleX: newSize.width / img.width,
-      scaleY: newSize.height / img.height
+      scaleY: newSize.height / img.height,
+      opacity: ((_n2 = element.props) == null ? void 0 : _n2.opacity) ?? 1
     });
     const { x: x2, y: y2 } = convertToCanvasPosition(
       (framePosition == null ? void 0 : framePosition.x) || 0,
@@ -7503,6 +7516,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     const elementFrameMap = React.useRef({});
     const twickCanvasRef = React.useRef(null);
     const videoSizeRef = React.useRef({ width: 1, height: 1 });
+    const canvasResolutionRef = React.useRef({ width: 1, height: 1 });
     const canvasMetadataRef = React.useRef({
       width: 0,
       height: 0,
@@ -7526,9 +7540,13 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       selectionLineWidth = 2,
       uniScaleTransform = true,
       enableRetinaScaling = true,
-      touchZoomThreshold = 10
+      touchZoomThreshold = 10,
+      forceBuild = false
     }) => {
       if (!canvasRef) return;
+      if (!forceBuild && canvasResolutionRef.current.width === canvasSize.width && canvasResolutionRef.current.height === canvasSize.height) {
+        return;
+      }
       if (twickCanvasRef.current) {
         console.log("Destroying twickCanvas");
         twickCanvasRef.current.off("mouse:up", handleMouseUp);
@@ -7548,6 +7566,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       canvasMetadataRef.current = canvasMetadata;
       videoSizeRef.current = videoSize;
       canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
+      canvasResolutionRef.current = canvasSize;
       setTwickCanvas(canvas);
       twickCanvasRef.current = canvas;
       if (onCanvasReady) {
@@ -7688,13 +7707,18 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       captionProps,
       cleanAndAdd = false
     }) => {
-      if (!twickCanvas) {
-        console.warn("Canvas not initialized");
+      if (!twickCanvas || !getCanvasContext(twickCanvas)) {
+        console.warn("Canvas not properly initialized");
         return;
       }
       try {
-        if (cleanAndAdd) {
+        if (cleanAndAdd && getCanvasContext(twickCanvas)) {
+          const backgroundColor = twickCanvas.backgroundColor;
           clearCanvas(twickCanvas);
+          if (backgroundColor) {
+            twickCanvas.backgroundColor = backgroundColor;
+            twickCanvas.renderAll();
+          }
         }
         await Promise.all(
           elements.map(async (element, index) => {
@@ -7826,7 +7850,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
           break;
         case CANVAS_OPERATIONS.ITEM_UPDATED:
           if (element) {
-            editor.updateElement(element);
+            const updatedElement = editor.updateElement(element);
+            setSelectedItem(updatedElement);
           }
           break;
       }
@@ -7909,6 +7934,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         height: container == null ? void 0 : container.clientHeight
       };
       buildCanvas({
+        backgroundColor: videoProps.backgroundColor,
         videoSize: {
           width: videoProps.width,
           height: videoProps.height
@@ -9568,7 +9594,7 @@ This message will only show in development mode. It won't appear in production.
    * This source code is licensed under the ISC license.
    * See the LICENSE file in the root directory of this source tree.
    */
-  const __iconNode$a = [
+  const __iconNode$b = [
     ["circle", { cx: "9", cy: "12", r: "1", key: "1vctgf" }],
     ["circle", { cx: "9", cy: "5", r: "1", key: "hp0tcf" }],
     ["circle", { cx: "9", cy: "19", r: "1", key: "fkjjf6" }],
@@ -9576,45 +9602,56 @@ This message will only show in development mode. It won't appear in production.
     ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
     ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
   ];
-  const GripVertical = createLucideIcon("grip-vertical", __iconNode$a);
+  const GripVertical = createLucideIcon("grip-vertical", __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$9 = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-  const LoaderCircle = createLucideIcon("loader-circle", __iconNode$9);
+  const __iconNode$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+  const LoaderCircle = createLucideIcon("loader-circle", __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$8 = [
+  const __iconNode$9 = [
     ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
     ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
   ];
-  const Lock = createLucideIcon("lock", __iconNode$8);
+  const Lock = createLucideIcon("lock", __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$7 = [
+  const __iconNode$8 = [
     ["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$7);
+  const Pause = createLucideIcon("pause", __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$7 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+  const Play = createLucideIcon("play", __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$6 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-  const Play = createLucideIcon("play", __iconNode$6);
+  const __iconNode$6 = [
+    ["path", { d: "M5 12h14", key: "1ays0h" }],
+    ["path", { d: "M12 5v14", key: "s699le" }]
+  ];
+  const Plus = createLucideIcon("plus", __iconNode$6);
   /**
    * @license lucide-react v0.511.0 - ISC
    *
@@ -16893,30 +16930,34 @@ This message will only show in development mode. It won't appear in production.
   };
   const DEFAULT_TIMELINE_ZOOM = 1.5;
   const DEFAULT_ELEMENT_COLORS = {
-    /** Fragment element color */
-    fragment: "#111111",
-    /** Video element color - muted deep violet */
-    video: "#4B2E83",
-    /** Caption element color - faded violet/blue */
-    caption: "#5C5470",
-    /** Image element color - earthy brown-orange */
-    image: "#805A38",
-    /** Audio element color - dark muted teal-green */
-    audio: "#3C665B",
-    /** Text element color - dusty steel blue */
-    text: "#375A7F",
-    /** Generic element color - muted berry purple */
-    element: "#6B3A5B",
-    /** Rectangle element color - desaturated deep indigo */
-    rect: "#4C3A72",
-    /** Frame effect color - dusty rose/maroon */
-    frameEffect: "#703C57",
-    /** Filters color - muted twilight purple */
-    filters: "#5A4C82",
-    /** Transition color - toasted copper */
-    transition: "#7A573A",
-    /** Animation color - slate pine green */
-    animation: "#32645C"
+    /** Fragment element color - deep charcoal matching UI background */
+    fragment: "#1A1A1A",
+    /** Video element color - vibrant royal purple */
+    video: "#8B5FBF",
+    /** Caption element color - soft wisteria purple */
+    caption: "#9B8ACE",
+    /** Image element color - warm copper accent */
+    image: "#D4956C",
+    /** Audio element color - deep teal */
+    audio: "#3D8B8B",
+    /** Text element color - medium lavender */
+    text: "#8D74C4",
+    /** Generic element color - muted amethyst */
+    element: "#7B68B8",
+    /** Rectangle element color - deep indigo */
+    rect: "#5B4B99",
+    /** Frame effect color - rich magenta */
+    frameEffect: "#B55B9C",
+    /** Filters color - periwinkle blue */
+    filters: "#7A89D4",
+    /** Transition color - burnished bronze */
+    transition: "#BE8157",
+    /** Animation color - muted emerald */
+    animation: "#4B9B78",
+    /** Icon element color - bright orchid */
+    icon: "#A76CD4",
+    /** Circle element color - deep byzantium */
+    circle: "#703D8B"
   };
   const AVAILABLE_TEXT_FONTS = {
     // Google Fonts
@@ -16968,6 +17009,12 @@ This message will only show in development mode. It won't appear in production.
     BRITTANY_SIGNATURE: "Brittany Signature"
   };
   let ELEMENT_COLORS = { ...DEFAULT_ELEMENT_COLORS };
+  const setElementColors = (colors) => {
+    ELEMENT_COLORS = {
+      ...DEFAULT_ELEMENT_COLORS,
+      ...colors
+    };
+  };
   const TrackElementView = ({
     element,
     parentWidth,
@@ -17002,10 +17049,12 @@ This message will only show in development mode. It won't appear in production.
         const span = prev.end - prev.start;
         let newStart = Math.max(0, prev.start + dx / parentWidth * duration);
         newStart = Math.min(newStart, prev.end - MIN_DURATION);
-        if (prevEnd !== null && !allowOverlap && newStart < prevEnd) {
-          newStart = prevEnd;
-        } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
-          newStart = nextStart - span;
+        if (!allowOverlap) {
+          if (prevEnd !== null && newStart < prevEnd) {
+            newStart = prevEnd;
+          } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
+            newStart = nextStart - span;
+          }
         }
         return {
           start: newStart,
@@ -17046,8 +17095,10 @@ This message will only show in development mode. It won't appear in production.
       setPosition((prev) => {
         let newEnd = prev.end + dx / parentWidth * duration;
         newEnd = Math.max(newEnd, prev.start + MIN_DURATION);
-        if (nextStart !== null && !allowOverlap && newEnd > nextStart) {
-          newEnd = nextStart;
+        if (!allowOverlap) {
+          if (nextStart !== null && newEnd > nextStart) {
+            newEnd = nextStart;
+          }
         }
         return {
           start: prev.start,
@@ -17084,11 +17135,19 @@ This message will only show in development mode. It won't appear in production.
     const motionProps = {
       ref,
       className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""}`,
-      onMouseDown: setLastPos,
-      onTouchStart: setLastPos,
+      onMouseDown: (e2) => {
+        if (e2.target === ref.current) {
+          setLastPos();
+        }
+      },
+      onTouchStart: (e2) => {
+        if (e2.target === ref.current) {
+          setLastPos();
+        }
+      },
       onMouseUp: sendUpdate,
       onTouchEnd: sendUpdate,
-      onDoubleClick: () => {
+      onClick: () => {
         if (onSelection) {
           onSelection(element);
         }
@@ -17104,7 +17163,7 @@ This message will only show in development mode. It won't appear in production.
       isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: { touchAction: "none" },
+          style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
           ...bindStartHandle(),
           className: "twick-track-element-handle twick-track-element-handle-start"
         }
@@ -17113,7 +17172,7 @@ This message will only show in development mode. It won't appear in production.
       isSelected ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          style: { touchAction: "none" },
+          style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
           ...bindEndHandle(),
           className: "twick-track-element-handle twick-track-element-handle-end"
         }
@@ -17165,7 +17224,7 @@ This message will only show in development mode. It won't appear in production.
             selectedItem,
             onSelection: onItemSelection,
             onDrag,
-            nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : duration,
+            nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : null,
             prevEnd: index > 0 ? elements[index - 1].getEnd() : 0
           },
           element.getId()
@@ -17179,6 +17238,7 @@ This message will only show in development mode. It won't appear in production.
     duration,
     tracks,
     seekTrack,
+    onAddTrack,
     onReorder,
     onSelectionChange,
     onElementDrag
@@ -17268,7 +17328,7 @@ This message will only show in development mode. It won't appear in production.
         onScroll: handleScroll,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", position: "relative" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-seek-track-empty-space" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-seek-track-empty-space", onClick: onAddTrack, children: /* @__PURE__ */ jsxRuntime.jsx(Plus, { color: "white", size: 20 }) }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { style: { flexGrow: 1 }, children: seekTrack })
           ] }) : null }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { ref: timelineContentRef, style: { width: timelineWidthPx }, children: (tracks || []).map((track) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-timeline-container", children: [
@@ -17302,13 +17362,7 @@ This message will only show in development mode. It won't appear in production.
     );
   }
   const useTimelineManager = () => {
-    const {
-      selectedItem,
-      changeLog,
-      setSelectedItem,
-      totalDuration,
-      editor
-    } = timeline.useTimelineContext();
+    const { selectedItem, changeLog, setSelectedItem, totalDuration, editor } = timeline.useTimelineContext();
     const onElementDrag = ({
       element,
       dragType,
@@ -17327,7 +17381,8 @@ This message will only show in development mode. It won't appear in production.
       }
       element.setStart(updates.start);
       element.setEnd(updates.end);
-      editor.updateElement(element);
+      const updatedElement = editor.updateElement(element);
+      setSelectedItem(updatedElement);
     };
     const timelineData = React.useMemo(() => {
       const timelineDataFromEditor = editor.getTimelineData();
@@ -17344,8 +17399,14 @@ This message will only show in development mode. It won't appear in production.
     const onSelectionChange = (selectedItem2) => {
       setSelectedItem(selectedItem2);
     };
+    const onAddTrack = () => {
+      var _a2;
+      const tracks = ((_a2 = editor.getTimelineData()) == null ? void 0 : _a2.tracks) || [];
+      editor.addTrack(`Track_${tracks.length + 1}`);
+    };
     return {
       timelineData,
+      onAddTrack,
       onElementDrag,
       onReorder,
       onSeek,
@@ -17359,7 +17420,7 @@ This message will only show in development mode. It won't appear in production.
     trackZoom
   }) => {
     var _a2;
-    const { timelineData, totalDuration, selectedItem, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
+    const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
     return /* @__PURE__ */ jsxRuntime.jsx(
       TimelineView,
       {
@@ -17370,6 +17431,7 @@ This message will only show in development mode. It won't appear in production.
         selectedItem,
         onDeletion: () => {
         },
+        onAddTrack,
         onReorder,
         onElementDrag,
         onSeek,
@@ -17408,6 +17470,9 @@ This message will only show in development mode. It won't appear in production.
       )
     ] });
   };
+  const MAX_ZOOM = 3;
+  const MIN_ZOOM = 0.5;
+  const ZOOM_STEP = 0.25;
   const PlayerControls = ({
     selectedItem,
     duration,
@@ -17420,6 +17485,8 @@ This message will only show in development mode. It won't appear in production.
     onRedo,
     onSplit,
     onDelete,
+    zoomLevel = 1,
+    setZoomLevel,
     className = ""
   }) => {
     const formatTime = React.useCallback((time2) => {
@@ -17437,61 +17504,92 @@ This message will only show in development mode. It won't appear in production.
         onSplit(selectedItem, currentTime);
       }
     }, [selectedItem, onSplit, currentTime]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: `player-controls player-controls-card-vertical ${className}`,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "edit-controls player-controls-edit-controls", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: `control-btn delete-btn player-controls-delete-btn${!!selectedItem ? " active" : " btn-disabled"}`,
-                onClick: handleDelete,
-                disabled: !selectedItem,
-                title: "Delete",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { size: 18, strokeWidth: 2 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: `control-btn split-btn player-controls-split-btn${selectedItem instanceof timeline.TrackElement ? " active" : " btn-disabled"}`,
-                onClick: handleSplit,
-                title: "Split",
-                children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { size: 18, strokeWidth: 2 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              UndoRedoControls,
-              {
-                canUndo,
-                canRedo,
-                onUndo,
-                onRedo
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "playback-controls player-controls-playback-controls", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: `control-btn play-pause-btn player-controls-play-pause-btn${playerState === livePlayer.PLAYER_STATE.PLAYING ? " playing" : ""}${playerState === livePlayer.PLAYER_STATE.REFRESH ? " refreshing" : ""}`,
-                onClick: togglePlayback,
-                title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
-                disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
-                children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { size: 28, strokeWidth: 2 }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { size: 28, strokeWidth: 2, className: "refreshing-spinner" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { size: 28, strokeWidth: 2 })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "time-display player-controls-time-display", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "current-time", children: formatTime(currentTime) }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "time-separator player-controls-time-separator", children: "|" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "total-time player-controls-total-time", children: formatTime(duration) })
-            ] })
-          ] })
-        ]
-      }
-    );
+    const handleZoomIn = React.useCallback(() => {
+      if (setZoomLevel && zoomLevel < MAX_ZOOM) {
+        setZoomLevel(zoomLevel + ZOOM_STEP);
+      }
+    }, [zoomLevel, setZoomLevel]);
+    const handleZoomOut = React.useCallback(() => {
+      if (setZoomLevel && zoomLevel > MIN_ZOOM) {
+        setZoomLevel(zoomLevel - ZOOM_STEP);
+      }
+    }, [zoomLevel, setZoomLevel]);
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-16 bg-gray-800 border-t border-gray-700 p-4 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleDelete,
+              disabled: !selectedItem,
+              title: "Delete",
+              className: `btn btn-ghost ${!!selectedItem ? "text-red-400 hover:text-red-300" : "text-gray-500 cursor-not-allowed"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Trash2, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleSplit,
+              disabled: !(selectedItem instanceof timeline.TrackElement),
+              title: "Split",
+              className: `btn btn-ghost ${selectedItem instanceof timeline.TrackElement ? "text-purple-400 hover:text-purple-300" : "text-gray-500 cursor-not-allowed"}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            UndoRedoControls,
+            {
+              canUndo,
+              canRedo,
+              onUndo,
+              onRedo
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: togglePlayback,
+            disabled: playerState === livePlayer.PLAYER_STATE.REFRESH,
+            title: playerState === livePlayer.PLAYER_STATE.PLAYING ? "Pause" : playerState === livePlayer.PLAYER_STATE.REFRESH ? "Refreshing" : "Play",
+            className: "btn btn-ghost text-white",
+            children: playerState === livePlayer.PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsxRuntime.jsx(Pause, { className: "w-6 h-6" }) : playerState === livePlayer.PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsxRuntime.jsx(LoaderCircle, { className: "w-6 h-6 animate-spin" }) : /* @__PURE__ */ jsxRuntime.jsx(Play, { className: "w-6 h-6" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-gray-300", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: formatTime(currentTime) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-500", children: "/" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: formatTime(duration) })
+        ] })
+      ] }),
+      setZoomLevel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleZoomOut,
+            disabled: zoomLevel <= MIN_ZOOM,
+            title: "Zoom Out",
+            className: `btn btn-ghost ${zoomLevel > MIN_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { className: "w-5 h-5" })
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-sm text-gray-300 font-medium min-w-[3rem] text-center", children: [
+          Math.round(zoomLevel * 100),
+          "%"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: handleZoomIn,
+            disabled: zoomLevel >= MAX_ZOOM,
+            title: "Zoom In",
+            className: `btn btn-ghost ${zoomLevel < MAX_ZOOM ? "text-gray-300 hover:text-white" : "text-gray-500 cursor-not-allowed"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { className: "w-5 h-5" })
+          }
+        )
+      ] })
+    ] }) });
   };
   const usePlayerControl = () => {
     const { playerState, setPlayerState } = livePlayer.useLivePlayerContext();
@@ -17519,59 +17617,15 @@ This message will only show in development mode. It won't appear in production.
       togglePlayback
     };
   };
-  const MAX_ZOOM = 3;
-  const MIN_ZOOM = 0.5;
-  const ZOOM_STEP = 0.25;
-  const TimelineZoom = ({
-    zoomLevel,
-    setZoomLevel,
-    minZoom = MIN_ZOOM,
-    maxZoom = MAX_ZOOM,
-    zoomStep = ZOOM_STEP
-  }) => {
-    const handleZoomIn = () => {
-      if (zoomLevel < maxZoom) {
-        setZoomLevel(zoomLevel + zoomStep);
-      }
-    };
-    const handleZoomOut = () => {
-      if (zoomLevel > minZoom) {
-        setZoomLevel(zoomLevel - zoomStep);
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-track-zoom-container", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(ZoomOut, { size: 28, onClick: handleZoomOut }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-zoom-slider", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "twick-zoom-slider-track",
-            style: {
-              width: `${(zoomLevel - minZoom) / (maxZoom - minZoom) * 100}%`
-            }
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: "twick-zoom-slider-thumb",
-            style: {
-              left: `calc(${(zoomLevel - minZoom) / (maxZoom - minZoom) * 100}%)`
-            }
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(ZoomIn, { size: 28, onClick: handleZoomIn })
-    ] });
-  };
   const useTimelineControl = () => {
-    const { editor } = timeline.useTimelineContext();
+    const { editor, setSelectedItem } = timeline.useTimelineContext();
     const deleteItem = (item) => {
       if (item instanceof timeline.Track) {
         editor.removeTrack(item);
       } else if (item instanceof timeline.TrackElement) {
         editor.removeElement(item);
       }
+      setSelectedItem(null);
     };
     const splitElement = (element, currentTime) => {
       editor.splitElement(element, currentTime);
@@ -17597,25 +17651,24 @@ This message will only show in development mode. It won't appear in production.
     const { togglePlayback } = usePlayerControl();
     const { canRedo, canUndo, totalDuration, selectedItem } = timeline.useTimelineContext();
     const { deleteItem, splitElement, handleUndo, handleRedo } = useTimelineControl();
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-timeline-controls", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        PlayerControls,
-        {
-          selectedItem,
-          duration: totalDuration,
-          currentTime,
-          playerState,
-          togglePlayback,
-          canUndo,
-          canRedo,
-          onDelete: deleteItem,
-          onSplit: splitElement,
-          onUndo: handleUndo,
-          onRedo: handleRedo
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(TimelineZoom, { zoomLevel: trackZoom, setZoomLevel: setTrackZoom })
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-editor-timeline-controls", children: /* @__PURE__ */ jsxRuntime.jsx(
+      PlayerControls,
+      {
+        selectedItem,
+        duration: totalDuration,
+        currentTime,
+        playerState,
+        togglePlayback,
+        canUndo,
+        canRedo,
+        onDelete: deleteItem,
+        onSplit: splitElement,
+        onUndo: handleUndo,
+        onRedo: handleRedo,
+        zoomLevel: trackZoom,
+        setZoomLevel: setTrackZoom
+      }
+    ) });
   };
   const VideoEditor = ({
     leftPanel,
@@ -17626,27 +17679,26 @@ This message will only show in development mode. It won't appear in production.
     defaultPlayControls = true
   }) => {
     const [trackZoom, setTrackZoom] = React.useState(DEFAULT_TIMELINE_ZOOM);
+    const useMemoizedPlayerManager = React.useMemo(
+      () => /* @__PURE__ */ jsxRuntime.jsx(
+        PlayerManager,
+        {
+          videoProps: editorConfig.videoProps,
+          canvasMode: editorConfig.canvasMode ?? true
+        }
+      ),
+      [editorConfig]
+    );
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-main-container", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-view-section", children: [
         leftPanel ? leftPanel : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          PlayerManager,
-          {
-            videoProps: editorConfig.videoProps,
-            canvasMode: editorConfig.canvasMode ?? true
-          }
-        ),
+        useMemoizedPlayerManager,
         rightPanel ? rightPanel : /* @__PURE__ */ jsxRuntime.jsx("div", {})
       ] }),
       bottomPanel ? bottomPanel : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-editor-timeline-section", children: [
         playControls ? playControls : defaultPlayControls ? /* @__PURE__ */ jsxRuntime.jsx(ControlManager, { trackZoom, setTrackZoom }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          TimelineManager,
-          {
-            trackZoom
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx(TimelineManager, { trackZoom })
       ] })
     ] });
   };
@@ -17817,7 +17869,7 @@ This message will only show in development mode. It won't appear in production.
         request.onsuccess = async () => {
           let items = request.result;
           const filteredItems = items.filter((item) => {
-            const matchesQuery = item.url.toLowerCase().includes(options.query.toLowerCase());
+            const matchesQuery = item.url.toLowerCase().includes((options.query || "").toLowerCase());
             const matchesType = !options.type || item.type === options.type;
             const matchesMetadata = !options.metadata || Object.entries(options.metadata).every(
               ([key, value]) => {
@@ -17871,9 +17923,14 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "fade",
       interval: 1,
+      duration: 1,
+      intensity: 1,
       animate: "enter",
       options: {
-        animate: ["enter", "exit", "both"]
+        animate: ["enter", "exit", "both"],
+        interval: [0.1, 5],
+        duration: [0.1, 5],
+        intensity: [0.1, 2]
       },
       getSample: () => {
         return animationGifs.fade;
@@ -17882,11 +17939,16 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "rise",
       interval: 1,
+      duration: 1,
+      intensity: 1,
       animate: "enter",
       direction: "up",
       options: {
         animate: ["enter", "exit", "both"],
-        direction: ["up", "down"]
+        direction: ["up", "down", "left", "right", "center"],
+        interval: [0.1, 5],
+        duration: [0.1, 5],
+        intensity: [1, 300]
       },
       getSample: (animation) => {
         return (animation == null ? void 0 : animation.direction) === "down" ? animationGifs["rise-down"] : animationGifs["rise-up"];
@@ -17895,9 +17957,14 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "blur",
       interval: 1,
+      duration: 1,
+      intensity: 1,
       animate: "enter",
       options: {
-        animate: ["enter", "exit", "both"]
+        animate: ["enter", "exit", "both"],
+        interval: [0.1, 5],
+        duration: [0.1, 5],
+        intensity: [0.1, 100]
       },
       getSample: () => {
         return animationGifs.blur;
@@ -17906,11 +17973,16 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "breathe",
       interval: 1,
+      duration: 1,
+      intensity: 1,
       mode: "in",
       animate: "enter",
       options: {
         animate: ["enter", "exit", "both"],
-        mode: ["in", "out"]
+        mode: ["in", "out"],
+        interval: [0.1, 5],
+        duration: [0.1, 5],
+        intensity: [0.1, 2]
       },
       getSample: (animation) => {
         return (animation == null ? void 0 : animation.mode) === "out" ? animationGifs["breathe-out"] : animationGifs["breathe-in"];
@@ -17919,9 +17991,14 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "succession",
       interval: 1,
+      duration: 1,
+      intensity: 1,
       animate: "enter",
       options: {
-        animate: ["enter", "exit", "both"]
+        animate: ["enter", "exit", "both"],
+        interval: [0.1, 5],
+        duration: [0.1, 5],
+        intensity: [0.1, 2]
       },
       getSample: () => {
         return animationGifs.succession;
@@ -17932,6 +18009,7 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "typewriter",
       delay: 0,
+      duration: 1,
       bufferTime: 0.1,
       getSample: () => {
         return "";
@@ -17940,6 +18018,7 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "erase",
       delay: 0,
+      duration: 1,
       bufferTime: 0.1,
       getSample: () => {
         return "";
@@ -17948,6 +18027,7 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "elastic",
       delay: 0,
+      duration: 1,
       bufferTime: 0.1,
       getSample: () => {
         return "";
@@ -17956,6 +18036,7 @@ This message will only show in development mode. It won't appear in production.
     {
       name: "stream-word",
       delay: 0,
+      duration: 1,
       bufferTime: 0.1,
       getSample: () => {
         return "";
@@ -17977,6 +18058,7 @@ This message will only show in development mode. It won't appear in production.
   exports2.animationGifs = animationGifs;
   exports2.default = VideoEditor;
   exports2.getAnimationGif = getAnimationGif;
+  exports2.setElementColors = setElementColors;
   exports2.usePlayerControl = usePlayerControl;
   exports2.useTimelineControl = useTimelineControl;
   Object.defineProperties(exports2, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });