@twick/video-editor 0.15.19 → 0.15.21

package/dist/index.mjs

@@ -3,7 +3,7 @@ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { en
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useLivePlayerContext, PLAYER_STATE, LivePlayer } from "@twick/live-player";
-import { ImageElement as ImageElement$1, AudioElement, VideoElement as VideoElement$1, useTimelineContext, TIMELINE_ACTION, ElementDeserializer, getCurrentElements, CaptionElement as CaptionElement$1, getDecimalNumber, resolveIds, TrackElement, resolveId, Track, getElementIdsInRange, ValidationError, VALIDATION_ERROR_CODE, formatTimeWithFrames } from "@twick/timeline";
+import { ImageElement as ImageElement$1, AudioElement, VideoElement as VideoElement$1, useTimelineContext, TIMELINE_ACTION, ElementDeserializer, getCurrentElements, CaptionElement as CaptionElement$1, TIMELINE_ELEMENT_TYPE, getDecimalNumber, resolveIds, TrackElement, TRACK_TYPES, resolveId, Track, getElementIdsInRange, ValidationError, VALIDATION_ERROR_CODE, formatTimeWithFrames } from "@twick/timeline";
 import React, { useState, useRef, useCallback, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useId, useLayoutEffect, useInsertionEffect, Fragment, Component } from "react";
 function t(t2, e3, s2) {
   return (e3 = function(t3) {
@@ -6855,8 +6855,8 @@ const DEFAULT_TEXT_PROPS = {
   lineWidth: 0
 };
 const DEFAULT_CAPTION_PROPS = {
-  /** Font family for caption elements */
-  family: "Poppins",
+  /** Font family for caption elements (matches highlight_bg default) */
+  family: "Bangers",
   /** Font size in pixels */
   size: 48,
   /** Text fill color */
@@ -6900,7 +6900,13 @@ const ELEMENT_TYPES = {
   /** Rectangle element type */
   RECT: "rect",
   /** Circle element type */
-  CIRCLE: "circle"
+  CIRCLE: "circle",
+  /** Arrow annotation element type */
+  ARROW: "arrow",
+  /** Line annotation / shape element type */
+  LINE: "line",
+  /** Global / adjustment-layer style effect element */
+  EFFECT: "effect"
 };
 const isBrowser$2 = typeof window !== "undefined";
 const isCanvasSupported = isBrowser$2 && !!window.HTMLCanvasElement;
@@ -7644,40 +7650,44 @@ const addCaptionElement = ({
   canvasMetadata,
   lockAspectRatio = false
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J;
+  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
+  const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
+  const captionTextColor = ((_a = captionProps == null ? void 0 : captionProps.colors) == null ? void 0 : _a.text) ?? ((_b = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _b.text);
   const { x: x2, y: y2 } = convertToCanvasPosition(
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.x : ((_a = element.props) == null ? void 0 : _a.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
-    ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.y : ((_b = element.props) == null ? void 0 : _b.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
+    (applyToAll ? captionProps == null ? void 0 : captionProps.x : ((_c = element.props) == null ? void 0 : _c.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
+    (applyToAll ? captionProps == null ? void 0 : captionProps.y : ((_d = element.props) == null ? void 0 : _d.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
     canvasMetadata
   );
-  let width = ((_c = element.props) == null ? void 0 : _c.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
-  if ((_d = element.props) == null ? void 0 : _d.maxWidth) {
+  let width = ((_e2 = element.props) == null ? void 0 : _e2.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
+  if ((_f = element.props) == null ? void 0 : _f.maxWidth) {
     width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
   }
-  const caption = new Uo(((_e2 = element.props) == null ? void 0 : _e2.text) || element.t || "", {
+  const elementColors = (_g = element.props) == null ? void 0 : _g.colors;
+  const resolvedFill = (applyToAll ? captionTextColor : ((_h2 = element.props) == null ? void 0 : _h2.fill) ?? (elementColors == null ? void 0 : elementColors.text) ?? captionTextColor) ?? DEFAULT_CAPTION_PROPS.fill;
+  const caption = new Uo(((_i2 = element.props) == null ? void 0 : _i2.text) || element.t || "", {
     left: x2,
     top: y2,
     originX: "center",
     originY: "center",
-    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
+    angle: ((_j = element.props) == null ? void 0 : _j.rotation) || 0,
     fontSize: Math.round(
-      (((captionProps == null ? void 0 : captionProps.applyToAll) ? (_g = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _g.size : ((_i2 = (_h2 = element.props) == null ? void 0 : _h2.font) == null ? void 0 : _i2.size) ?? ((_j = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _j.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      ((applyToAll ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.size : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.size) ?? ((_n2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n2.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_k = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _k.family : ((_m = (_l = element.props) == null ? void 0 : _l.font) == null ? void 0 : _m.family) ?? ((_n2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _n2.family)) ?? DEFAULT_CAPTION_PROPS.family,
-    fill: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_o2 = captionProps.color) == null ? void 0 : _o2.text : ((_p = element.props) == null ? void 0 : _p.fill) ?? ((_q = captionProps.color) == null ? void 0 : _q.text)) ?? DEFAULT_CAPTION_PROPS.fill,
-    fontWeight: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_r2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r2.weight : ((_s2 = element.props) == null ? void 0 : _s2.fontWeight) ?? ((_t2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t2.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
-    stroke: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.stroke : ((_u = element.props) == null ? void 0 : _u.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
-    opacity: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.opacity : ((_v = element.props) == null ? void 0 : _v.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    fontFamily: (applyToAll ? (_o2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o2.family : ((_q = (_p = element.props) == null ? void 0 : _p.font) == null ? void 0 : _q.family) ?? ((_r2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _r2.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fill: resolvedFill,
+    fontWeight: (applyToAll ? (_s2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s2.weight : ((_u = (_t2 = element.props) == null ? void 0 : _t2.font) == null ? void 0 : _u.weight) ?? ((_v = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _v.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    stroke: (applyToAll ? captionProps == null ? void 0 : captionProps.stroke : ((_w = element.props) == null ? void 0 : _w.stroke) ?? (captionProps == null ? void 0 : captionProps.stroke)) ?? DEFAULT_CAPTION_PROPS.stroke,
+    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_x = element.props) == null ? void 0 : _x.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_w = element.props) == null ? void 0 : _w.textAlign) ?? "center",
+    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
     shadow: new Ds({
-      offsetX: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_x = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _x[0] : ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z[0]) ?? ((_A = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _A[0])) ?? ((_B = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _B[0]),
-      offsetY: ((captionProps == null ? void 0 : captionProps.applyToAll) ? (_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[1] : ((_E = (_D = element.props) == null ? void 0 : _D.shadowOffset) == null ? void 0 : _E[1]) ?? ((_F = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _F[1])) ?? ((_G = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _G[1]),
-      blur: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_H = element.props) == null ? void 0 : _H.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.shadowColor : ((_I = element.props) == null ? void 0 : _I.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: (applyToAll ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[0] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[0]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[0])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[0]),
+      offsetY: (applyToAll ? (_E = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _E[1] : ((_G = (_F = element.props) == null ? void 0 : _F.shadowOffset) == null ? void 0 : _G[1]) ?? ((_H = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _H[1])) ?? ((_I = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _I[1]),
+      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_J = element.props) == null ? void 0 : _J.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_K = element.props) == null ? void 0 : _K.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: ((captionProps == null ? void 0 : captionProps.applyToAll) ? captionProps == null ? void 0 : captionProps.lineWidth : ((_J = element.props) == null ? void 0 : _J.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
+    strokeWidth: (applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_L = element.props) == null ? void 0 : _L.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -8388,6 +8398,148 @@ const WatermarkElement = {
     };
   }
 };
+const ArrowElement = {
+  name: ELEMENT_TYPES.ARROW,
+  async add(params) {
+    var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const { x: x2, y: y2 } = convertToCanvasPosition(
+      ((_c = element.props) == null ? void 0 : _c.x) ?? 0,
+      ((_d = element.props) == null ? void 0 : _d.y) ?? 0,
+      canvasMetadata
+    );
+    const fill = ((_e2 = element.props) == null ? void 0 : _e2.fill) || "#f59e0b";
+    const radius = (((_f = element.props) == null ? void 0 : _f.radius) ?? 4) * canvasMetadata.scaleX;
+    const barWidth = baseWidth * canvasMetadata.scaleX;
+    const barHeight = baseHeight * canvasMetadata.scaleY;
+    const headSize = barHeight * 1.8;
+    const barLength = barWidth - headSize * 0.5;
+    const bar = new jr({
+      left: -barWidth / 2,
+      top: -barHeight / 2,
+      originX: "left",
+      originY: "top",
+      width: barLength,
+      height: barHeight,
+      rx: radius,
+      ry: radius,
+      fill
+    });
+    const arrowHead = new yo({
+      left: barWidth / 2 - headSize * 0.25,
+      top: 0,
+      originX: "center",
+      originY: "center",
+      width: headSize,
+      height: headSize,
+      fill,
+      angle: 90
+    });
+    const opacity = ((_g = element.props) == null ? void 0 : _g.opacity) ?? 1;
+    const group = new Ur([bar, arrowHead], {
+      left: x2,
+      top: y2,
+      originX: "center",
+      originY: "center",
+      angle: ((_h2 = element.props) == null ? void 0 : _h2.rotation) || 0,
+      opacity,
+      selectable: true,
+      hasControls: true
+    });
+    group.set(
+      "lockUniScaling",
+      lockAspectRatio ?? ((_i2 = element.props) == null ? void 0 : _i2.lockAspectRatio) ?? true
+    );
+    group.set("id", element.id);
+    group.set("zIndex", index);
+    canvas.add(group);
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b, _c;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const baseWidth = ((_a = element.props) == null ? void 0 : _a.width) ?? 220;
+    const baseHeight = ((_b = element.props) == null ? void 0 : _b.height) ?? 14;
+    const opacity = object.opacity ?? ((_c = element.props) == null ? void 0 : _c.opacity) ?? 1;
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width: baseWidth * object.scaleX,
+          height: baseHeight * object.scaleY,
+          x: x2,
+          y: y2,
+          opacity
+        }
+      }
+    };
+  }
+};
+const LineElement = {
+  name: ELEMENT_TYPES.LINE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    const lineProps = element.props ?? {};
+    const lineElement = {
+      ...element,
+      props: {
+        ...lineProps,
+        // Use fill as stroke color when a stroke is desired; otherwise rely
+        // on fill-only rendering. Avoid the generic "#000000" fallback.
+        stroke: lineProps.stroke ?? lineProps.fill,
+        // If a specific lineWidth is provided, keep it; otherwise default to 0
+        // so the stroke does not override the visual fill color.
+        lineWidth: lineProps.lineWidth ?? 0
+      }
+    };
+    await addRectElement({
+      element: lineElement,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = lineElement.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a, _b;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width: (((_a = element.props) == null ? void 0 : _a.width) ?? 0) * object.scaleX,
+          height: (((_b = element.props) == null ? void 0 : _b.height) ?? 0) * object.scaleY,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const EffectElement = {
+  name: ELEMENT_TYPES.EFFECT,
+  async add() {
+    return;
+  }
+};
 class ElementController {
   constructor() {
     __publicField2(this, "elements", /* @__PURE__ */ new Map());
@@ -8411,6 +8563,9 @@ function registerElements() {
   elementController.register(TextElement);
   elementController.register(CaptionElement);
   elementController.register(WatermarkElement);
+  elementController.register(ArrowElement);
+  elementController.register(LineElement);
+  elementController.register(EffectElement);
 }
 registerElements();
 const useTwickCanvas = ({
@@ -8765,10 +8920,18 @@ const useTwickCanvas = ({
   const sendToBack = (elementId) => applyZOrder(elementId, "back");
   const bringForward = (elementId) => applyZOrder(elementId, "forward");
   const sendBackward = (elementId) => applyZOrder(elementId, "backward");
+  const setBackgroundColor = useCallback((color2) => {
+    const canvas = twickCanvasRef.current;
+    if (canvas) {
+      canvas.backgroundColor = color2;
+      canvas.requestRenderAll();
+    }
+  }, []);
   return {
     twickCanvas,
     buildCanvas,
     resizeCanvas,
+    setBackgroundColor,
     onVideoSizeChange,
     addWatermarkToCanvas,
     addElementToCanvas,
@@ -8983,7 +9146,9 @@ const DEFAULT_ELEMENT_COLORS = {
   /** Icon element color - bright orchid */
   icon: "#A76CD4",
   /** Circle element color - deep byzantium */
-  circle: "#703D8B"
+  circle: "#703D8B",
+  /** Effect element color - cyan accent for global effects */
+  effect: "#22C3EE"
 };
 const AVAILABLE_TEXT_FONTS = {
   // Google Fonts
@@ -9290,6 +9455,7 @@ const usePlayerManager = ({
     twickCanvas,
     buildCanvas,
     resizeCanvas,
+    setBackgroundColor,
     setCanvasElements,
     bringToFront,
     sendToBack,
@@ -9366,7 +9532,7 @@ const usePlayerManager = ({
     }
   };
   useEffect(() => {
-    var _a, _b, _c, _d, _e2;
+    var _a, _b, _c, _d, _e2, _f;
     switch (timelineAction.type) {
       case TIMELINE_ACTION.UPDATE_PLAYER_DATA:
         if (videoProps) {
@@ -9376,11 +9542,12 @@ const usePlayerManager = ({
               input: {
                 properties: videoProps,
                 tracks: ((_c = timelineAction.payload) == null ? void 0 : _c.tracks) ?? [],
-                version: ((_d = timelineAction.payload) == null ? void 0 : _d.version) ?? 0
+                version: ((_d = timelineAction.payload) == null ? void 0 : _d.version) ?? 0,
+                backgroundColor: ((_e2 = timelineAction.payload) == null ? void 0 : _e2.backgroundColor) ?? "#000000"
               }
             };
             setProjectData(_latestProjectData);
-            if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
+            if (((_f = timelineAction.payload) == null ? void 0 : _f.version) === 1) {
               setTimeout(() => {
                 setPlayerUpdating(false);
               });
@@ -9398,6 +9565,7 @@ const usePlayerManager = ({
     updateCanvas,
     buildCanvas,
     resizeCanvas,
+    setBackgroundColor,
     onPlayerUpdate,
     playerUpdating,
     handleDropOnCanvas,
@@ -9634,6 +9802,7 @@ const PlayerManager = ({
   canvasMode,
   canvasConfig
 }) => {
+  var _a;
   const containerRef = useRef(null);
   const canvasRef = useRef(null);
   const durationRef = useRef(0);
@@ -9651,6 +9820,7 @@ const PlayerManager = ({
     projectData,
     updateCanvas,
     resizeCanvas,
+    setBackgroundColor,
     playerUpdating,
     onPlayerUpdate,
     buildCanvas,
@@ -9670,6 +9840,7 @@ const PlayerManager = ({
     enabled: !!handleDropOnCanvas && canvasMode
   });
   useEffect(() => {
+    var _a2;
     const container = containerRef.current;
     const canvasSize = {
       width: (container == null ? void 0 : container.clientWidth) ?? 0,
@@ -9677,7 +9848,7 @@ const PlayerManager = ({
     };
     if (canvasSize.width > 0 && canvasSize.height > 0) {
       buildCanvas({
-        backgroundColor: videoProps.backgroundColor,
+        backgroundColor: videoProps.backgroundColor ?? ((_a2 = projectData == null ? void 0 : projectData.input) == null ? void 0 : _a2.backgroundColor) ?? "#000000",
         videoSize: {
           width: videoProps.width,
           height: videoProps.height
@@ -9687,6 +9858,11 @@ const PlayerManager = ({
       });
     }
   }, [videoProps]);
+  useEffect(() => {
+    var _a2;
+    const color2 = ((_a2 = projectData == null ? void 0 : projectData.input) == null ? void 0 : _a2.backgroundColor) ?? videoProps.backgroundColor ?? "#000000";
+    setBackgroundColor(color2);
+  }, [(_a = projectData == null ? void 0 : projectData.input) == null ? void 0 : _a.backgroundColor, videoProps.backgroundColor, setBackgroundColor]);
   const handleResize = useMemo(
     () => throttle(() => {
       const container = containerRef.current;
@@ -9718,10 +9894,10 @@ const PlayerManager = ({
   useEffect(() => {
     if (!twickCanvas || !canvasMode) return;
     const onSelectionCreated = (e3) => {
-      var _a, _b;
+      var _a2, _b;
       const ev = e3 == null ? void 0 : e3.e;
       if (!ev) return;
-      const id2 = (_b = (_a = e3.target) == null ? void 0 : _a.get) == null ? void 0 : _b.call(_a, "id");
+      const id2 = (_b = (_a2 = e3.target) == null ? void 0 : _a2.get) == null ? void 0 : _b.call(_a2, "id");
       if (id2) {
         setContextMenu({ x: ev.clientX, y: ev.clientY, elementId: id2 });
       }
@@ -11154,13 +11330,25 @@ function SeekTrack({
   const containerRef = useRef(null);
   const [isDragging2, setIsDragging] = useState(false);
   const [dragPosition, setDragPosition] = useState(null);
+  const [pendingSeekTime, setPendingSeekTime] = useState(null);
   const pixelsPerSecond = 100 * zoom;
   const totalWidth = duration * pixelsPerSecond;
   const pinHeight = 2 + timelineCount * (2.75 + 0.5);
+  React.useEffect(() => {
+    if (pendingSeekTime === null) return;
+    if (Math.abs(currentTime - pendingSeekTime) < 0.05) {
+      setPendingSeekTime(null);
+    }
+  }, [currentTime, pendingSeekTime]);
   const seekPosition = useMemo(() => {
-    const position = isDragging2 && dragPosition !== null ? dragPosition : currentTime * pixelsPerSecond;
-    return Math.max(0, position);
-  }, [isDragging2, dragPosition, currentTime, pixelsPerSecond]);
+    if (isDragging2 && dragPosition !== null) {
+      return Math.max(0, dragPosition);
+    }
+    if (pendingSeekTime !== null) {
+      return Math.max(0, pendingSeekTime * pixelsPerSecond);
+    }
+    return Math.max(0, currentTime * pixelsPerSecond);
+  }, [isDragging2, dragPosition, currentTime, pendingSeekTime, pixelsPerSecond]);
   React.useEffect(() => {
     onPlayheadUpdate == null ? void 0 : onPlayheadUpdate({
       positionPx: seekPosition,
@@ -11249,6 +11437,7 @@ function SeekTrack({
       setDragPosition(xPos);
     } else {
       setDragPosition(null);
+      setPendingSeekTime(newTime);
       seekToTime(newTime);
     }
   });
@@ -18847,8 +19036,10 @@ const TrackElementView = ({
   onSelection,
   onDrag,
   allowOverlap = false,
+  onDragStateChange,
   elementColors
 }) => {
+  var _a, _b;
   const ref = useRef(null);
   const dragType = useRef(null);
   const lastPosRef = useRef(null);
@@ -18866,7 +19057,10 @@ const TrackElementView = ({
   const bind = useDrag(({ delta: [dx] }) => {
     if (!parentWidth) return;
     if (dx == 0) return;
-    setIsDragging(true);
+    if (!isDragging2) {
+      setIsDragging(true);
+      onDragStateChange == null ? void 0 : onDragStateChange(true, element);
+    }
     dragType.current = DRAG_TYPE.MOVE;
     setPosition((prev) => {
       const span = prev.end - prev.start;
@@ -18892,6 +19086,7 @@ const TrackElementView = ({
     if (dx === 0) return;
     if (isDragging2) {
       setIsDragging(false);
+      onDragStateChange == null ? void 0 : onDragStateChange(false, element);
     }
     dragType.current = DRAG_TYPE.START;
     setPosition((prev) => {
@@ -18913,6 +19108,7 @@ const TrackElementView = ({
     if (dx === 0) return;
     if (isDragging2) {
       setIsDragging(false);
+      onDragStateChange == null ? void 0 : onDragStateChange(false, element);
     }
     dragType.current = DRAG_TYPE.END;
     setPosition((prev) => {
@@ -18932,24 +19128,37 @@ const TrackElementView = ({
   const setLastPos = () => {
     lastPosRef.current = position;
   };
-  const sendUpdate = () => {
-    var _a, _b;
+  const sendUpdate = (e3) => {
+    var _a2, _b2, _c;
+    let dropPointer;
+    if (e3) {
+      if ("clientX" in e3) {
+        dropPointer = { clientX: e3.clientX, clientY: e3.clientY };
+      } else if ("changedTouches" in e3 && ((_a2 = e3.changedTouches) == null ? void 0 : _a2[0])) {
+        const t2 = e3.changedTouches[0];
+        dropPointer = { clientX: t2.clientX, clientY: t2.clientY };
+      }
+    }
     setIsDragging(false);
-    if (((_a = lastPosRef.current) == null ? void 0 : _a.start) !== position.start || ((_b = lastPosRef.current) == null ? void 0 : _b.end) !== position.end) {
-      onDrag({
-        element,
-        updates: {
-          start: getDecimalNumber(position.start),
-          end: getDecimalNumber(position.end)
-        },
-        dragType: dragType.current || ""
-      });
+    onDragStateChange == null ? void 0 : onDragStateChange(false, element);
+    const payload = {
+      element,
+      updates: {
+        start: getDecimalNumber(position.start),
+        end: getDecimalNumber(position.end)
+      },
+      dragType: dragType.current || ""
+    };
+    const didChange = ((_b2 = lastPosRef.current) == null ? void 0 : _b2.start) !== position.start || ((_c = lastPosRef.current) == null ? void 0 : _c.end) !== position.end;
+    if (didChange || dropPointer) {
+      onDrag(payload, dropPointer);
     }
   };
   const getElementColor = (elementType) => {
     const colors = elementColors || ELEMENT_COLORS;
-    if (elementType in colors) {
-      return colors[elementType];
+    const key = elementType === TIMELINE_ELEMENT_TYPE.VIDEO ? "video" : elementType === TIMELINE_ELEMENT_TYPE.AUDIO ? "audio" : elementType === TIMELINE_ELEMENT_TYPE.IMAGE ? "image" : elementType === TIMELINE_ELEMENT_TYPE.TEXT ? "text" : elementType === TIMELINE_ELEMENT_TYPE.CAPTION ? "caption" : elementType === TIMELINE_ELEMENT_TYPE.RECT ? "rect" : elementType === TIMELINE_ELEMENT_TYPE.CIRCLE ? "circle" : elementType === TIMELINE_ELEMENT_TYPE.ICON ? "icon" : elementType === TIMELINE_ELEMENT_TYPE.EFFECT ? "effect" : "element";
+    if (key in colors) {
+      return colors[key];
     }
     return ELEMENT_COLORS.element;
   };
@@ -18970,8 +19179,8 @@ const TrackElementView = ({
         setLastPos();
       }
     },
-    onMouseUp: sendUpdate,
-    onTouchEnd: sendUpdate,
+    onMouseUp: (e3) => sendUpdate(e3),
+    onTouchEnd: (e3) => sendUpdate(e3),
     onClick: (e3) => {
       if (onSelection) {
         onSelection(element, e3);
@@ -18993,7 +19202,7 @@ const TrackElementView = ({
         className: "twick-track-element-handle twick-track-element-handle-start"
       }
     ) : null,
-    /* @__PURE__ */ jsx("div", { className: "twick-track-element-content", children: element.getText ? element.getText() : element.getName() || element.getType() }),
+    /* @__PURE__ */ jsx("div", { className: "twick-track-element-content", children: element.getType() === TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType() }),
     hasHandles ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -19028,6 +19237,7 @@ const TrackBase = ({
   onItemSelection,
   onDrag,
   allowOverlap = false,
+  onDragStateChange,
   elementColors
 }) => {
   const trackRef = useRef(null);
@@ -19052,6 +19262,7 @@ const TrackBase = ({
           selectedIds,
           onSelection: onItemSelection,
           onDrag,
+          onDragStateChange,
           elementColors,
           nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : null,
           prevEnd: index > 0 ? elements[index - 1].getEnd() : 0
@@ -19226,6 +19437,67 @@ function useMarqueeSelection({
   );
   return { marquee, handleMouseDown };
 }
+function useEdgeAutoScroll({
+  isActive,
+  getMouseClientX,
+  scrollContainerRef,
+  contentWidth,
+  edgeThreshold = 60,
+  maxScrollSpeed = 20
+}) {
+  const rafRef = useRef(null);
+  useEffect(() => {
+    if (!isActive) {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      return;
+    }
+    const step = () => {
+      const el = scrollContainerRef.current;
+      if (!el) {
+        rafRef.current = requestAnimationFrame(step);
+        return;
+      }
+      const rect = el.getBoundingClientRect();
+      const mouseX = getMouseClientX();
+      const xRelative = mouseX - rect.left;
+      const viewportWidth = el.clientWidth;
+      const scrollMax = Math.max(0, contentWidth - viewportWidth);
+      let scrollSpeed = 0;
+      if (xRelative < edgeThreshold && el.scrollLeft > 0) {
+        const intensity = 1 - Math.max(0, xRelative) / edgeThreshold;
+        scrollSpeed = -maxScrollSpeed * intensity;
+      } else if (xRelative > viewportWidth - edgeThreshold && el.scrollLeft < scrollMax) {
+        const intensity = 1 - Math.max(0, viewportWidth - edgeThreshold - xRelative) / edgeThreshold;
+        scrollSpeed = maxScrollSpeed * intensity;
+      }
+      if (scrollSpeed !== 0) {
+        const newScrollLeft = Math.max(
+          0,
+          Math.min(scrollMax, el.scrollLeft + scrollSpeed)
+        );
+        el.scrollLeft = newScrollLeft;
+      }
+      rafRef.current = requestAnimationFrame(step);
+    };
+    rafRef.current = requestAnimationFrame(step);
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+    };
+  }, [
+    isActive,
+    getMouseClientX,
+    scrollContainerRef,
+    contentWidth,
+    edgeThreshold,
+    maxScrollSpeed
+  ]);
+}
 function MarqueeOverlay({ marquee }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -19256,8 +19528,25 @@ function MarqueeOverlay({ marquee }) {
     }
   );
 }
+const SEPARATOR_HEIGHT$1 = 6;
+function getTrackOrSeparatorAt(clientY, containerTop, trackHeight) {
+  const y2 = clientY - containerTop;
+  if (y2 < 0) return null;
+  const rowHeight = trackHeight + SEPARATOR_HEIGHT$1;
+  if (y2 < SEPARATOR_HEIGHT$1) {
+    return { type: "separator", separatorIndex: 0 };
+  }
+  const relativeY = y2 - SEPARATOR_HEIGHT$1;
+  const index = Math.floor(relativeY / rowHeight);
+  const remainder = relativeY % rowHeight;
+  if (remainder < trackHeight) {
+    return { type: "track", trackIndex: index };
+  }
+  return { type: "separator", separatorIndex: index + 1 };
+}
 const LABEL_WIDTH = 40;
 const TRACK_HEIGHT = 44;
+const SEPARATOR_HEIGHT = 6;
 function TimelineView({
   zoomLevel,
   selectedItem,
@@ -19270,25 +19559,81 @@ function TimelineView({
   onEmptyClick,
   onMarqueeSelect,
   onElementDrag,
+  onElementDrop,
+  onSeek,
   elementColors,
   selectedIds,
   playheadPositionPx = 0,
   isPlayheadActive = false,
   onDropOnTimeline,
   videoResolution,
-  enableDropOnTimeline = true
+  enableDropOnTimeline = true,
+  chapters = []
 }) {
   const containerRef = useRef(null);
   const seekContainerRef = useRef(null);
   const timelineContentRef = useRef(null);
   const [, setScrollLeft] = useState(0);
+  const pointerRef = useRef(null);
   const [draggedTimeline, setDraggedTimeline] = useState(null);
+  const [draggingElementId, setDraggingElementId] = useState(null);
+  const [activeDropTarget, setActiveDropTarget] = useState(null);
   const { selectedTrackElement } = useMemo(() => {
     if (selectedItem && "elements" in selectedItem) {
       return { selectedTrackElement: null };
     }
     return { selectedTrackElement: selectedItem };
   }, [selectedItem]);
+  const handleDragWithDrop = useCallback(
+    (payload, dropPointer) => {
+      var _a;
+      if (dropPointer && onElementDrop) {
+        const rect = (_a = timelineContentRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        const dropTarget = rect ? getTrackOrSeparatorAt(dropPointer.clientY, rect.top, TRACK_HEIGHT) : null;
+        onElementDrop({ ...payload, dropTarget });
+      } else {
+        onElementDrag(payload);
+      }
+    },
+    [onElementDrag, onElementDrop]
+  );
+  useEdgeAutoScroll({
+    isActive: !!draggingElementId,
+    getMouseClientX: () => {
+      var _a;
+      return ((_a = pointerRef.current) == null ? void 0 : _a.clientX) ?? 0;
+    },
+    scrollContainerRef: containerRef,
+    contentWidth: Math.max(100, duration * zoomLevel * 100)
+  });
+  useEffect(() => {
+    if (!draggingElementId) return;
+    const onMove = (e3) => {
+      var _a;
+      const pt2 = "touches" in e3 ? e3.touches[0] : e3;
+      if (pt2) {
+        pointerRef.current = { clientX: pt2.clientX, clientY: pt2.clientY };
+        const rect = (_a = timelineContentRef.current) == null ? void 0 : _a.getBoundingClientRect();
+        if (rect) {
+          setActiveDropTarget(getTrackOrSeparatorAt(pt2.clientY, rect.top, TRACK_HEIGHT));
+        }
+      }
+    };
+    const onUp = () => {
+      pointerRef.current = null;
+      setActiveDropTarget(null);
+    };
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("touchmove", onMove, { passive: true });
+    document.addEventListener("mouseup", onUp);
+    document.addEventListener("touchend", onUp);
+    return () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.removeEventListener("touchend", onUp);
+    };
+  }, [draggingElementId]);
   const timelineWidth = Math.max(100, duration * zoomLevel * 100);
   const timelineWidthPx = `${timelineWidth}px`;
   const handleScroll = (e3) => {
@@ -19385,9 +19730,36 @@ function TimelineView({
       className: "twick-timeline-scroll-container",
       onScroll: handleScroll,
       children: [
-        /* @__PURE__ */ jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative" }, children: [
+        /* @__PURE__ */ jsx("div", { style: { width: timelineWidthPx }, children: seekTrack ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", position: "relative", minHeight: 34 }, children: [
           /* @__PURE__ */ jsx("div", { className: "twick-seek-track-empty-space", onClick: onAddTrack, children: /* @__PURE__ */ jsx(Plus, { color: "white", size: 20 }) }),
-          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: seekTrack })
+          /* @__PURE__ */ jsx("div", { style: { flexGrow: 1 }, children: seekTrack }),
+          chapters.map((chapter) => {
+            const left = LABEL_WIDTH + chapter.time / Math.max(duration, 1e-3) * (timelineWidth - LABEL_WIDTH);
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                className: "btn-ghost",
+                title: chapter.title,
+                onClick: (e3) => {
+                  e3.stopPropagation();
+                  onSeek(chapter.time);
+                },
+                style: {
+                  position: "absolute",
+                  left,
+                  top: 0,
+                  height: "100%",
+                  padding: "0 4px",
+                  borderRadius: 0,
+                  borderLeft: "1px solid rgba(255,255,255,0.4)",
+                  borderRight: "none",
+                  minWidth: 0
+                },
+                children: /* @__PURE__ */ jsx("span", { style: { fontSize: 10, opacity: 0.9 }, children: chapter.title })
+              },
+              chapter.id
+            );
+          })
         ] }) : null }),
         /* @__PURE__ */ jsxs(
           "div",
@@ -19413,34 +19785,61 @@ function TimelineView({
                   }
                 }
               ),
-              /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 10 }, children: (tracks || []).map((track) => /* @__PURE__ */ jsxs("div", { className: "twick-timeline-container", children: [
-                /* @__PURE__ */ jsx("div", { className: "twick-timeline-header-container", children: /* @__PURE__ */ jsx(
-                  TrackHeader,
-                  {
-                    track,
-                    selectedIds,
-                    onSelect: handleItemSelection,
-                    onDragStart: handleTrackDragStart,
-                    onDragOver: handleTrackDragOver,
-                    onDrop: handleTrackDrop
-                  }
-                ) }),
+              /* @__PURE__ */ jsxs("div", { style: { position: "relative", zIndex: 10 }, children: [
                 /* @__PURE__ */ jsx(
-                  TrackBase,
+                  "div",
                   {
-                    track,
-                    duration,
-                    selectedItem: selectedTrackElement,
-                    selectedIds,
-                    zoom: zoomLevel,
-                    allowOverlap: false,
-                    trackWidth: timelineWidth - LABEL_WIDTH,
-                    onItemSelection: handleItemSelection,
-                    onDrag: onElementDrag,
-                    elementColors
+                    className: "twick-timeline-separator",
+                    style: {
+                      height: SEPARATOR_HEIGHT,
+                      background: (activeDropTarget == null ? void 0 : activeDropTarget.type) === "separator" && activeDropTarget.separatorIndex === 0 ? "rgba(255,255,255,0.2)" : "transparent"
+                    }
                   }
-                )
-              ] }, track.getId())) })
+                ),
+                (tracks || []).map((track, index) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsxs("div", { className: "twick-timeline-container", children: [
+                    /* @__PURE__ */ jsx("div", { className: "twick-timeline-header-container", children: /* @__PURE__ */ jsx(
+                      TrackHeader,
+                      {
+                        track,
+                        selectedIds,
+                        onSelect: handleItemSelection,
+                        onDragStart: handleTrackDragStart,
+                        onDragOver: handleTrackDragOver,
+                        onDrop: handleTrackDrop
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(
+                      TrackBase,
+                      {
+                        track,
+                        duration,
+                        selectedItem: selectedTrackElement,
+                        selectedIds,
+                        zoom: zoomLevel,
+                        allowOverlap: false,
+                        trackWidth: timelineWidth - LABEL_WIDTH,
+                        onItemSelection: handleItemSelection,
+                        onDrag: handleDragWithDrop,
+                        onDragStateChange: (isDragging2, el) => {
+                          setDraggingElementId(isDragging2 && el ? el.getId() : null);
+                        },
+                        elementColors
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "twick-timeline-separator",
+                      style: {
+                        height: SEPARATOR_HEIGHT,
+                        background: (activeDropTarget == null ? void 0 : activeDropTarget.type) === "separator" && activeDropTarget.separatorIndex === index + 1 ? "rgba(255,255,255,0.2)" : "transparent"
+                      }
+                    }
+                  )
+                ] }, track.getId()))
+              ] })
             ]
           }
         )
@@ -19497,6 +19896,75 @@ const useTimelineManager = () => {
     setSelectedItem(updatedElement);
     editor.refresh();
   };
+  const isElementTrackType = (track) => track.getType() === TRACK_TYPES.ELEMENT;
+  const wouldBeElementTrack = (el) => {
+    const elType = el.getType().toLowerCase();
+    return elType !== "video" && elType !== "image" && elType !== "audio";
+  };
+  const onElementDrop = async (params) => {
+    var _a;
+    const { element, dragType, updates, dropTarget } = params;
+    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+    if (!dropTarget) {
+      return;
+    }
+    if (dropTarget.type === "separator") {
+      if (!wouldBeElementTrack(element)) {
+        return;
+      }
+      await editor.moveElementToNewTrackAt(
+        element,
+        dropTarget.separatorIndex,
+        updates.start
+      );
+      setSelectedItem(element);
+      editor.refresh();
+      return;
+    }
+    const targetTrack = tracks[dropTarget.trackIndex];
+    if (!targetTrack) {
+      return;
+    }
+    if (!isElementTrackType(targetTrack)) {
+      return;
+    }
+    const start = updates.start;
+    const end = updates.end;
+    const elementId = element.getId();
+    const currentTrackId = element.getTrackId();
+    let hasOverlap = false;
+    const others = targetTrack.getElements().filter((el) => el.getId() !== elementId);
+    for (const other of others) {
+      const oStart = other.getStart();
+      const oEnd = other.getEnd();
+      if (start < oEnd && end > oStart) {
+        hasOverlap = true;
+        break;
+      }
+    }
+    if (hasOverlap) {
+      await editor.moveElementToNewTrackAt(
+        element,
+        dropTarget.trackIndex + 1,
+        updates.start
+      );
+      setSelectedItem(element);
+      editor.refresh();
+      return;
+    }
+    if (currentTrackId === targetTrack.getId()) {
+      onElementDrag({ element, dragType, updates });
+      return;
+    }
+    editor.removeElement(element);
+    element.setStart(updates.start);
+    element.setEnd(updates.end);
+    const added = await editor.addElementToTrack(targetTrack, element);
+    if (added) {
+      setSelectedItem(element);
+      editor.refresh();
+    }
+  };
   const timelineData = useMemo(() => editor.getTimelineData(), [changeLog]);
   const { setSeekTime, setCurrentTime } = useLivePlayerContext();
   const onReorder = (reorderedItems) => {
@@ -19519,6 +19987,7 @@ const useTimelineManager = () => {
     timelineData,
     onAddTrack,
     onElementDrag,
+    onElementDrop,
     onReorder,
     onSeek,
     onSelectionChange,
@@ -19605,7 +20074,7 @@ const TimelineManager = ({
   timelineTickConfigs,
   elementColors
 }) => {
-  var _a;
+  var _a, _b;
   const { playerState } = useLivePlayerContext();
   const { followPlayheadEnabled, editor, videoResolution, setSelectedItem } = useTimelineContext();
   const {
@@ -19615,6 +20084,7 @@ const TimelineManager = ({
     onAddTrack,
     onReorder,
     onElementDrag,
+    onElementDrop,
     onSeek
   } = useTimelineManager();
   const { selectedIds } = useTimelineContext();
@@ -19668,6 +20138,7 @@ const TimelineManager = ({
       onAddTrack,
       onReorder,
       onElementDrag,
+      onElementDrop,
       onSeek,
       onItemSelect: handleItemSelect,
       onEmptyClick: handleEmptyClick,
@@ -19675,6 +20146,7 @@ const TimelineManager = ({
       elementColors,
       playheadPositionPx: playheadState.positionPx,
       isPlayheadActive,
+      chapters: ((_a = timelineData == null ? void 0 : timelineData.metadata) == null ? void 0 : _a.chapters) ?? [],
       onDropOnTimeline: handleDropOnTimeline,
       videoResolution,
       enableDropOnTimeline: true,
@@ -19684,7 +20156,7 @@ const TimelineManager = ({
           duration: totalDuration,
           zoom: trackZoom,
           onSeek,
-          timelineCount: ((_a = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _a.length) ?? 0,
+          timelineCount: ((_b = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _b.length) ?? 0,
           timelineTickConfigs,
           onPlayheadUpdate: handlePlayheadUpdate
         }