@twick/video-editor 0.15.13 → 0.15.15

package/dist/index.mjs

@@ -3,8 +3,8 @@ 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 { useTimelineContext, TIMELINE_ACTION, getCurrentElements, CaptionElement, ElementDeserializer, Track, getDecimalNumber, VideoElement, AudioElement, TrackElement, ValidationError, VALIDATION_ERROR_CODE } from "@twick/timeline";
-import React, { useState, useRef, useEffect, useMemo, forwardRef, createElement, createContext, useContext, useId, useCallback, useLayoutEffect, useInsertionEffect, Fragment, Component } from "react";
+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 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) {
     var e4 = function(t4, e5) {
@@ -6839,6 +6839,9 @@ class bh extends Va {
   }
 }
 t(bh, "type", "Vibrance"), t(bh, "defaults", { vibrance: 0 }), t(bh, "uniformLocations", ["uVibrance"]), tt.setClass(bh);
+var __defProp2 = Object.defineProperty;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, key + "", value);
 const DEFAULT_TEXT_PROPS = {
   /** Font family for text elements */
   family: "Poppins",
@@ -6877,7 +6880,13 @@ const CANVAS_OPERATIONS = {
   /** An item has been updated/modified on the canvas */
   ITEM_UPDATED: "ITEM_UPDATED",
   /** Caption properties have been updated */
-  CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED"
+  CAPTION_PROPS_UPDATED: "CAPTION_PROPS_UPDATED",
+  /** Watermark has been updated */
+  WATERMARK_UPDATED: "WATERMARK_UPDATED",
+  /** A new element was added via drop on canvas; payload is { element } */
+  ADDED_NEW_ELEMENT: "ADDED_NEW_ELEMENT",
+  /** Z-order changed (bring to front / send to back). Payload is { elementId, direction }. Timeline should reorder tracks. */
+  Z_ORDER_CHANGED: "Z_ORDER_CHANGED"
 };
 const ELEMENT_TYPES = {
   /** Text element type */
@@ -6953,6 +6962,26 @@ const createCanvas = ({
     canvasMetadata
   };
 };
+function measureTextWidth(text, options) {
+  if (typeof document === "undefined" || !text) return 0;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return 0;
+  const {
+    fontSize,
+    fontFamily,
+    fontStyle = "normal",
+    fontWeight = "normal"
+  } = options;
+  ctx.font = `${fontStyle} ${String(fontWeight)} ${fontSize}px ${fontFamily}`;
+  const lines = text.split("\n");
+  let maxWidth = 0;
+  for (const line of lines) {
+    const { width } = ctx.measureText(line);
+    if (width > maxWidth) maxWidth = width;
+  }
+  return Math.ceil(maxWidth);
+}
 const reorderElementsByZIndex = (canvas) => {
   if (!canvas) return;
   const backgroundColor = canvas.backgroundColor;
@@ -6963,6 +6992,49 @@ const reorderElementsByZIndex = (canvas) => {
   objects.forEach((obj) => canvas.add(obj));
   canvas.renderAll();
 };
+const changeZOrder = (canvas, elementId, direction) => {
+  var _a, _b;
+  if (!canvas) return null;
+  const objects = canvas.getObjects();
+  const sorted = [...objects].sort((a2, b2) => (a2.zIndex || 0) - (b2.zIndex || 0));
+  const idx = sorted.findIndex((obj2) => {
+    var _a2;
+    return ((_a2 = obj2.get) == null ? void 0 : _a2.call(obj2, "id")) === elementId;
+  });
+  if (idx < 0) return null;
+  const minZ = ((_a = sorted[0]) == null ? void 0 : _a.zIndex) ?? 0;
+  const maxZ = ((_b = sorted[sorted.length - 1]) == null ? void 0 : _b.zIndex) ?? 0;
+  const obj = sorted[idx];
+  if (direction === "front") {
+    obj.set("zIndex", maxZ + 1);
+    reorderElementsByZIndex(canvas);
+    return maxZ + 1;
+  }
+  if (direction === "back") {
+    obj.set("zIndex", minZ - 1);
+    reorderElementsByZIndex(canvas);
+    return minZ - 1;
+  }
+  if (direction === "forward" && idx < sorted.length - 1) {
+    const next = sorted[idx + 1];
+    const myZ = obj.zIndex ?? idx;
+    const nextZ = next.zIndex ?? idx + 1;
+    obj.set("zIndex", nextZ);
+    next.set("zIndex", myZ);
+    reorderElementsByZIndex(canvas);
+    return nextZ;
+  }
+  if (direction === "backward" && idx > 0) {
+    const prev = sorted[idx - 1];
+    const myZ = obj.zIndex ?? idx;
+    const prevZ = prev.zIndex ?? idx - 1;
+    obj.set("zIndex", prevZ);
+    prev.set("zIndex", myZ);
+    reorderElementsByZIndex(canvas);
+    return prevZ;
+  }
+  return obj.zIndex ?? idx;
+};
 const getCanvasContext = (canvas) => {
   var _a, _b, _c, _d;
   if (!canvas || !((_b = (_a = canvas.elements) == null ? void 0 : _a.lower) == null ? void 0 : _b.ctx)) return;
@@ -6983,12 +7055,31 @@ const convertToCanvasPosition = (x2, y2, canvasMetadata) => {
     y: y2 * canvasMetadata.scaleY + canvasMetadata.height / 2
   };
 };
+const getObjectCanvasCenter = (obj) => {
+  if (obj.getCenterPoint) {
+    const p2 = obj.getCenterPoint();
+    return { x: p2.x, y: p2.y };
+  }
+  return { x: obj.left ?? 0, y: obj.top ?? 0 };
+};
+const getObjectCanvasAngle = (obj) => {
+  if (typeof obj.getTotalAngle === "function") {
+    return obj.getTotalAngle();
+  }
+  return obj.angle ?? 0;
+};
 const convertToVideoPosition = (x2, y2, canvasMetadata, videoSize) => {
   return {
     x: Number((x2 / canvasMetadata.scaleX - videoSize.width / 2).toFixed(2)),
     y: Number((y2 / canvasMetadata.scaleY - videoSize.height / 2).toFixed(2))
   };
 };
+const convertToVideoDimensions = (widthCanvas, heightCanvas, canvasMetadata) => {
+  return {
+    width: Number((widthCanvas / canvasMetadata.scaleX).toFixed(2)),
+    height: Number((heightCanvas / canvasMetadata.scaleY).toFixed(2))
+  };
+};
 const getCurrentFrameEffect = (item, seekTime) => {
   var _a;
   let currentFrameEffect;
@@ -7000,6 +7091,17 @@ const getCurrentFrameEffect = (item, seekTime) => {
   }
   return currentFrameEffect;
 };
+const hexToRgba = (hex2, alpha2) => {
+  const color2 = hex2.replace(/^#/, "");
+  const fullHex = color2.length === 3 ? color2.split("").map((c2) => c2 + c2).join("") : color2;
+  if (fullHex.length !== 6) {
+    return hex2;
+  }
+  const r2 = parseInt(fullHex.slice(0, 2), 16);
+  const g2 = parseInt(fullHex.slice(2, 4), 16);
+  const b2 = parseInt(fullHex.slice(4, 6), 16);
+  return `rgba(${r2}, ${g2}, ${b2}, ${alpha2})`;
+};
 const disabledControl = new ai({
   /** X position offset */
   x: 0,
@@ -7431,40 +7533,66 @@ const addTextElement = ({
   canvas,
   canvasMetadata
 }) => {
-  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;
+  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;
   const { x: x2, y: y2 } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.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) {
-    width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
-  }
-  const text = new Uo(((_e2 = element.props) == null ? void 0 : _e2.text) || element.t || "", {
+  const fontSize = Math.floor(
+    (((_c = element.props) == null ? void 0 : _c.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
+  );
+  const fontFamily = ((_d = element.props) == null ? void 0 : _d.fontFamily) || DEFAULT_TEXT_PROPS.family;
+  const fontStyle = ((_e2 = element.props) == null ? void 0 : _e2.fontStyle) || "normal";
+  const fontWeight = ((_f = element.props) == null ? void 0 : _f.fontWeight) || "normal";
+  let width;
+  if (((_g = element.props) == null ? void 0 : _g.width) != null && element.props.width > 0) {
+    width = element.props.width * canvasMetadata.scaleX;
+    if ((_h2 = element.props) == null ? void 0 : _h2.maxWidth) {
+      width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+    }
+  } else {
+    const textContent = ((_i2 = element.props) == null ? void 0 : _i2.text) ?? element.t ?? "";
+    width = measureTextWidth(textContent, {
+      fontSize,
+      fontFamily,
+      fontStyle,
+      fontWeight
+    });
+    const padding = 4;
+    width = width + padding * 2;
+    if ((_j = element.props) == null ? void 0 : _j.maxWidth) {
+      width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
+    }
+    if (width <= 0) width = 100;
+  }
+  const backgroundColor = ((_k = element.props) == null ? void 0 : _k.backgroundColor) ? hexToRgba(
+    element.props.backgroundColor,
+    ((_l = element.props) == null ? void 0 : _l.backgroundOpacity) ?? 1
+  ) : void 0;
+  const text = new Uo(((_m = element.props) == null ? void 0 : _m.text) || element.t || "", {
     left: x2,
     top: y2,
     originX: "center",
     originY: "center",
-    angle: ((_f = element.props) == null ? void 0 : _f.rotation) || 0,
-    fontSize: Math.floor(
-      (((_g = element.props) == null ? void 0 : _g.fontSize) || DEFAULT_TEXT_PROPS.size) * canvasMetadata.scaleX
-    ),
-    fontFamily: ((_h2 = element.props) == null ? void 0 : _h2.fontFamily) || DEFAULT_TEXT_PROPS.family,
-    fontStyle: ((_i2 = element.props) == null ? void 0 : _i2.fontStyle) || "normal",
-    fontWeight: ((_j = element.props) == null ? void 0 : _j.fontWeight) || "normal",
-    fill: ((_k = element.props) == null ? void 0 : _k.fill) || DEFAULT_TEXT_PROPS.fill,
-    opacity: ((_l = element.props) == null ? void 0 : _l.opacity) ?? 1,
+    angle: ((_n2 = element.props) == null ? void 0 : _n2.rotation) || 0,
+    fontSize,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    fill: ((_o2 = element.props) == null ? void 0 : _o2.fill) || DEFAULT_TEXT_PROPS.fill,
+    opacity: ((_p = element.props) == null ? void 0 : _p.opacity) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_m = element.props) == null ? void 0 : _m.textAlign) || "center",
-    stroke: ((_n2 = element.props) == null ? void 0 : _n2.stroke) || DEFAULT_TEXT_PROPS.stroke,
-    strokeWidth: ((_o2 = element.props) == null ? void 0 : _o2.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
-    shadow: ((_p = element.props) == null ? void 0 : _p.shadowColor) ? new Ds({
-      offsetX: ((_r2 = (_q = element.props) == null ? void 0 : _q.shadowOffset) == null ? void 0 : _r2.length) && ((_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
-      offsetY: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v.length) && ((_w = element.props) == null ? void 0 : _w.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
-      blur: (((_x = element.props) == null ? void 0 : _x.shadowBlur) || 2) / 2,
-      color: (_y = element.props) == null ? void 0 : _y.shadowColor
+    textAlign: ((_q = element.props) == null ? void 0 : _q.textAlign) || "center",
+    stroke: ((_r2 = element.props) == null ? void 0 : _r2.stroke) || DEFAULT_TEXT_PROPS.stroke,
+    strokeWidth: ((_s2 = element.props) == null ? void 0 : _s2.lineWidth) || DEFAULT_TEXT_PROPS.lineWidth,
+    ...backgroundColor && { backgroundColor },
+    shadow: ((_t2 = element.props) == null ? void 0 : _t2.shadowColor) ? new Ds({
+      offsetX: ((_v = (_u = element.props) == null ? void 0 : _u.shadowOffset) == null ? void 0 : _v.length) && ((_x = (_w = element.props) == null ? void 0 : _w.shadowOffset) == null ? void 0 : _x.length) > 1 ? element.props.shadowOffset[0] / 2 : 1,
+      offsetY: ((_z = (_y = element.props) == null ? void 0 : _y.shadowOffset) == null ? void 0 : _z.length) && ((_A = element.props) == null ? void 0 : _A.shadowOffset.length) > 1 ? element.props.shadowOffset[1] / 2 : 1,
+      blur: (((_B = element.props) == null ? void 0 : _B.shadowBlur) || 2) / 2,
+      color: (_C = element.props) == null ? void 0 : _C.shadowColor
     }) : void 0
   });
   text.set("id", element.id);
@@ -7485,7 +7613,8 @@ const setImageProps = ({
   img,
   element,
   index,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = true
 }) => {
   var _a, _b, _c, _d, _e2;
   const width = (((_a = element.props) == null ? void 0 : _a.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
@@ -7505,13 +7634,15 @@ const setImageProps = ({
   img.set("selectable", true);
   img.set("hasControls", true);
   img.set("touchAction", "all");
+  img.set("lockUniScaling", lockAspectRatio);
 };
 const addCaptionElement = ({
   element,
   index,
   canvas,
   captionProps,
-  canvasMetadata
+  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;
   const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7550,6 +7681,7 @@ const addCaptionElement = ({
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
+  caption.set("lockUniScaling", lockAspectRatio);
   caption.controls.mt = disabledControl;
   caption.controls.mb = disabledControl;
   caption.controls.ml = disabledControl;
@@ -7597,7 +7729,8 @@ const addImageElement = async ({
   index,
   canvas,
   canvasMetadata,
-  currentFrameEffect
+  currentFrameEffect,
+  lockAspectRatio = true
 }) => {
   try {
     const img = await oa.fromURL(imageUrl || element.props.src || "");
@@ -7606,7 +7739,7 @@ const addImageElement = async ({
       originY: "center",
       lockMovementX: false,
       lockMovementY: false,
-      lockUniScaling: true,
+      lockUniScaling: lockAspectRatio,
       hasControls: false,
       selectable: false
     });
@@ -7617,10 +7750,11 @@ const addImageElement = async ({
         index,
         canvas,
         canvasMetadata,
-        currentFrameEffect
+        currentFrameEffect,
+        lockAspectRatio
       });
     } else {
-      setImageProps({ img, element, index, canvasMetadata });
+      setImageProps({ img, element, index, canvasMetadata, lockAspectRatio });
       canvas.add(img);
       return img;
     }
@@ -7633,7 +7767,8 @@ const addMediaGroup = ({
   index,
   canvas,
   canvasMetadata,
-  currentFrameEffect
+  currentFrameEffect,
+  lockAspectRatio = true
 }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2;
   let frameSize;
@@ -7722,6 +7857,7 @@ const addMediaGroup = ({
   group.controls.mtr = rotateControl;
   group.set("id", element.id);
   group.set("zIndex", index);
+  group.set("lockUniScaling", lockAspectRatio);
   canvas.add(group);
   return group;
 };
@@ -7729,7 +7865,8 @@ const addRectElement = ({
   element,
   index,
   canvas,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = false
 }) => {
   var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k;
   const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7767,6 +7904,7 @@ const addRectElement = ({
   });
   rect.set("id", element.id);
   rect.set("zIndex", index);
+  rect.set("lockUniScaling", lockAspectRatio);
   rect.controls.mtr = rotateControl;
   canvas.add(rect);
   return rect;
@@ -7775,9 +7913,10 @@ const addCircleElement = ({
   element,
   index,
   canvas,
-  canvasMetadata
+  canvasMetadata,
+  lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e2, _f;
+  var _a, _b, _c, _d, _e2, _f, _g;
   const { x: x2, y: y2 } = convertToCanvasPosition(
     ((_a = element.props) == null ? void 0 : _a.x) || 0,
     ((_b = element.props) == null ? void 0 : _b.y) || 0,
@@ -7793,7 +7932,9 @@ const addCircleElement = ({
     stroke: ((_e2 = element.props) == null ? void 0 : _e2.stroke) || "#000000",
     strokeWidth: (((_f = element.props) == null ? void 0 : _f.lineWidth) || 0) * canvasMetadata.scaleX,
     originX: "center",
-    originY: "center"
+    originY: "center",
+    // Respect element opacity (0–1). Defaults to fully opaque.
+    opacity: ((_g = element.props) == null ? void 0 : _g.opacity) ?? 1
   });
   circle.controls.mt = disabledControl;
   circle.controls.mb = disabledControl;
@@ -7802,6 +7943,7 @@ const addCircleElement = ({
   circle.controls.mtr = disabledControl;
   circle.set("id", element.id);
   circle.set("zIndex", index);
+  circle.set("lockUniScaling", lockAspectRatio);
   canvas.add(circle);
   return circle;
 };
@@ -7836,17 +7978,462 @@ const addBackgroundColor = ({
   canvas.add(bgRect);
   return bgRect;
 };
+const VideoElement = {
+  name: ELEMENT_TYPES.VIDEO,
+  async add(params) {
+    var _a, _b;
+    const {
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      seekTime = 0,
+      elementFrameMapRef,
+      getCurrentFrameEffect: getFrameEffect
+    } = params;
+    if (!getFrameEffect || !elementFrameMapRef) return;
+    const currentFrameEffect = getFrameEffect(element, seekTime);
+    elementFrameMapRef.current[element.id] = currentFrameEffect;
+    const snapTime = (seekTime - ((element == null ? void 0 : element.s) ?? 0)) * (((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.playbackRate) ?? 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) ?? 0);
+    await addVideoElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      currentFrameEffect,
+      snapTime
+    });
+    if (element.timelineType === "scene") {
+      await addBackgroundColor({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const scaledW = (object.width ?? 0) * (object.scaleX ?? 1);
+    const scaledH = (object.height ?? 0) * (object.scaleY ?? 1);
+    const { width: fw, height: fh2 } = convertToVideoDimensions(
+      scaledW,
+      scaledH,
+      context.canvasMetadata
+    );
+    const updatedFrameSize = [fw, fh2];
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    if (currentFrameEffect) {
+      context.elementFrameMapRef.current[element.id] = {
+        ...currentFrameEffect,
+        props: {
+          ...currentFrameEffect.props,
+          framePosition: { x: x2, y: y2 },
+          frameSize: updatedFrameSize
+        }
+      };
+      return {
+        element: {
+          ...element,
+          frameEffects: (element.frameEffects || []).map(
+            (fe2) => fe2.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+              ...fe2,
+              props: {
+                ...fe2.props,
+                framePosition: { x: x2, y: y2 },
+                frameSize: updatedFrameSize
+              }
+            } : fe2
+          )
+        }
+      };
+    }
+    const frame2 = element.frame;
+    return {
+      element: {
+        ...element,
+        frame: {
+          ...frame2,
+          rotation: getObjectCanvasAngle(object),
+          size: updatedFrameSize,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const ImageElement = {
+  name: ELEMENT_TYPES.IMAGE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addImageElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+    if (element.timelineType === "scene") {
+      await addBackgroundColor({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const currentFrameEffect = context.elementFrameMapRef.current[element.id];
+    if (object.type === "group") {
+      const scaledW2 = (object.width ?? 0) * (object.scaleX ?? 1);
+      const scaledH2 = (object.height ?? 0) * (object.scaleY ?? 1);
+      const { width: fw, height: fh2 } = convertToVideoDimensions(
+        scaledW2,
+        scaledH2,
+        context.canvasMetadata
+      );
+      const updatedFrameSize = [fw, fh2];
+      if (currentFrameEffect) {
+        context.elementFrameMapRef.current[element.id] = {
+          ...currentFrameEffect,
+          props: {
+            ...currentFrameEffect.props,
+            framePosition: { x: x2, y: y2 },
+            frameSize: updatedFrameSize
+          }
+        };
+        return {
+          element: {
+            ...element,
+            // Keep the base frame in sync with the active frame effect
+            // so visualizer `Rect {...element.frame}` reflects the same size/position.
+            frame: element.frame ? {
+              ...element.frame,
+              rotation: getObjectCanvasAngle(object),
+              size: updatedFrameSize,
+              x: x2,
+              y: y2
+            } : element.frame,
+            frameEffects: (element.frameEffects || []).map(
+              (fe2) => fe2.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
+                ...fe2,
+                props: {
+                  ...fe2.props,
+                  framePosition: { x: x2, y: y2 },
+                  frameSize: updatedFrameSize
+                }
+              } : fe2
+            )
+          }
+        };
+      }
+      const frame2 = element.frame;
+      return {
+        element: {
+          ...element,
+          frame: {
+            ...frame2,
+            rotation: getObjectCanvasAngle(object),
+            size: updatedFrameSize,
+            x: x2,
+            y: y2
+          }
+        }
+      };
+    }
+    const scaledW = (object.width ?? 0) * (object.scaleX ?? 1);
+    const scaledH = (object.height ?? 0) * (object.scaleY ?? 1);
+    const { width, height } = convertToVideoDimensions(
+      scaledW,
+      scaledH,
+      context.canvasMetadata
+    );
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          width,
+          height,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const RectElement = {
+  name: ELEMENT_TYPES.RECT,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addRectElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.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 CircleElement = {
+  name: ELEMENT_TYPES.CIRCLE,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, canvasMetadata, lockAspectRatio } = params;
+    await addCircleElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.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
+    );
+    const radius = Number(
+      ((((_a = element.props) == null ? void 0 : _a.radius) ?? 0) * object.scaleX).toFixed(2)
+    );
+    const opacity = object.opacity != null ? object.opacity : (_b = element.props) == null ? void 0 : _b.opacity;
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          rotation: getObjectCanvasAngle(object),
+          radius,
+          height: radius * 2,
+          width: radius * 2,
+          x: x2,
+          y: y2,
+          ...opacity != null && { opacity }
+        }
+      }
+    };
+  }
+};
+const TextElement = {
+  name: ELEMENT_TYPES.TEXT,
+  async add(params) {
+    const { element, index, canvas, canvasMetadata } = params;
+    await addTextElement({
+      element,
+      index,
+      canvas,
+      canvasMetadata
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    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),
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const CaptionElement = {
+  name: ELEMENT_TYPES.CAPTION,
+  async add(params) {
+    var _a;
+    const { element, index, canvas, captionProps, canvasMetadata, lockAspectRatio } = params;
+    await addCaptionElement({
+      element,
+      index,
+      canvas,
+      captionProps: captionProps ?? {},
+      canvasMetadata,
+      lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    var _a;
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    if ((_a = context.captionPropsRef.current) == null ? void 0 : _a.applyToAll) {
+      return {
+        element,
+        operation: CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED,
+        payload: {
+          element,
+          props: {
+            ...context.captionPropsRef.current,
+            x: x2,
+            y: y2
+          }
+        }
+      };
+    }
+    return {
+      element: {
+        ...element,
+        props: {
+          ...element.props,
+          x: x2,
+          y: y2
+        }
+      }
+    };
+  }
+};
+const WatermarkElement = {
+  name: "watermark",
+  async add(params) {
+    const { element, index, canvas, canvasMetadata, watermarkPropsRef } = params;
+    if (element.type === ELEMENT_TYPES.TEXT) {
+      if (watermarkPropsRef) watermarkPropsRef.current = element.props;
+      await addTextElement({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    } else if (element.type === ELEMENT_TYPES.IMAGE) {
+      await addImageElement({
+        element,
+        index,
+        canvas,
+        canvasMetadata
+      });
+    }
+  },
+  updateFromFabricObject(object, element, context) {
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      object.left,
+      object.top,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    const rotation = object.angle != null ? object.angle : void 0;
+    const opacity = object.opacity != null ? object.opacity : void 0;
+    const baseProps = element.type === ELEMENT_TYPES.TEXT ? context.watermarkPropsRef.current ?? element.props ?? {} : { ...element.props };
+    const props = element.type === ELEMENT_TYPES.IMAGE && (object.scaleX != null || object.scaleY != null) ? {
+      ...baseProps,
+      width: baseProps.width != null && object.scaleX != null ? baseProps.width * object.scaleX : baseProps.width,
+      height: baseProps.height != null && object.scaleY != null ? baseProps.height * object.scaleY : baseProps.height
+    } : baseProps;
+    const payload = {
+      position: { x: x2, y: y2 },
+      ...rotation != null && { rotation },
+      ...opacity != null && { opacity },
+      ...Object.keys(props).length > 0 && { props }
+    };
+    return {
+      element: { ...element, props: { ...element.props, x: x2, y: y2, rotation, opacity, ...props } },
+      operation: CANVAS_OPERATIONS.WATERMARK_UPDATED,
+      payload
+    };
+  }
+};
+class ElementController {
+  constructor() {
+    __publicField2(this, "elements", /* @__PURE__ */ new Map());
+  }
+  register(handler) {
+    this.elements.set(handler.name, handler);
+  }
+  get(name) {
+    return this.elements.get(name);
+  }
+  list() {
+    return Array.from(this.elements.keys());
+  }
+}
+const elementController = new ElementController();
+function registerElements() {
+  elementController.register(VideoElement);
+  elementController.register(ImageElement);
+  elementController.register(RectElement);
+  elementController.register(CircleElement);
+  elementController.register(TextElement);
+  elementController.register(CaptionElement);
+  elementController.register(WatermarkElement);
+}
+registerElements();
 const useTwickCanvas = ({
   onCanvasReady,
-  onCanvasOperation
+  onCanvasOperation,
+  /**
+   * When true, holding Shift while dragging an object will lock movement to
+   * the dominant axis (horizontal or vertical). This mirrors behavior in
+   * professional editors and improves precise alignment.
+   *
+   * Default: false (opt‑in to avoid surprising existing consumers).
+   */
+  enableShiftAxisLock = false
 }) => {
   const [twickCanvas, setTwickCanvas] = useState(null);
   const elementMap = useRef({});
+  const watermarkPropsRef = useRef(null);
   const elementFrameMap = useRef({});
   const twickCanvasRef = useRef(null);
   const videoSizeRef = useRef({ width: 1, height: 1 });
   const canvasResolutionRef = useRef({ width: 1, height: 1 });
   const captionPropsRef = useRef(null);
+  const axisLockStateRef = useRef(null);
   const canvasMetadataRef = useRef({
     width: 0,
     height: 0,
@@ -7861,6 +8448,57 @@ const useTwickCanvas = ({
       canvasMetadataRef.current.scaleY = canvasMetadataRef.current.height / videoSize.height;
     }
   };
+  const handleObjectMoving = (event) => {
+    var _a;
+    if (!enableShiftAxisLock) return;
+    const target = event == null ? void 0 : event.target;
+    const transform = event == null ? void 0 : event.transform;
+    const pointerEvent = event == null ? void 0 : event.e;
+    if (!target || !transform || !pointerEvent) {
+      axisLockStateRef.current = null;
+      return;
+    }
+    if (!pointerEvent.shiftKey) {
+      axisLockStateRef.current = null;
+      return;
+    }
+    const original = transform.original;
+    if (!original || typeof target.left !== "number" || typeof target.top !== "number") {
+      axisLockStateRef.current = null;
+      return;
+    }
+    if (!axisLockStateRef.current) {
+      const dx = Math.abs(target.left - original.left);
+      const dy = Math.abs(target.top - original.top);
+      axisLockStateRef.current = {
+        axis: dx >= dy ? "x" : "y"
+      };
+    }
+    if (axisLockStateRef.current.axis === "x") {
+      target.top = original.top;
+    } else {
+      target.left = original.left;
+    }
+    (_a = target.canvas) == null ? void 0 : _a.requestRenderAll();
+  };
+  const applyMarqueeSelectionControls = () => {
+    const canvasInstance = twickCanvasRef.current;
+    if (!canvasInstance) return;
+    const activeObject = canvasInstance.getActiveObject();
+    if (!activeObject) return;
+    if (activeObject instanceof Qo) {
+      activeObject.controls.mt = disabledControl;
+      activeObject.controls.mb = disabledControl;
+      activeObject.controls.ml = disabledControl;
+      activeObject.controls.mr = disabledControl;
+      activeObject.controls.bl = disabledControl;
+      activeObject.controls.br = disabledControl;
+      activeObject.controls.tl = disabledControl;
+      activeObject.controls.tr = disabledControl;
+      activeObject.controls.mtr = rotateControl;
+      canvasInstance.requestRenderAll();
+    }
+  };
   const buildCanvas = ({
     videoSize,
     canvasSize,
@@ -7880,6 +8518,9 @@ const useTwickCanvas = ({
     if (twickCanvasRef.current) {
       twickCanvasRef.current.off("mouse:up", handleMouseUp);
       twickCanvasRef.current.off("text:editing:exited", onTextEdit);
+      twickCanvasRef.current.off("object:moving", handleObjectMoving);
+      twickCanvasRef.current.off("selection:created", applyMarqueeSelectionControls);
+      twickCanvasRef.current.off("selection:updated", applyMarqueeSelectionControls);
       twickCanvasRef.current.dispose();
     }
     const { canvas, canvasMetadata } = createCanvas({
@@ -7897,6 +8538,9 @@ const useTwickCanvas = ({
     videoSizeRef.current = videoSize;
     canvas == null ? void 0 : canvas.on("mouse:up", handleMouseUp);
     canvas == null ? void 0 : canvas.on("text:editing:exited", onTextEdit);
+    canvas == null ? void 0 : canvas.on("object:moving", handleObjectMoving);
+    canvas == null ? void 0 : canvas.on("selection:created", applyMarqueeSelectionControls);
+    canvas == null ? void 0 : canvas.on("selection:updated", applyMarqueeSelectionControls);
     canvasResolutionRef.current = canvasSize;
     setTwickCanvas(canvas);
     twickCanvasRef.current = canvas;
@@ -7923,7 +8567,8 @@ const useTwickCanvas = ({
     if (event.target) {
       const object = event.target;
       const elementId = object.get("id");
-      if (((_a = event.transform) == null ? void 0 : _a.action) === "drag") {
+      const action = (_a = event.transform) == null ? void 0 : _a.action;
+      if (action === "drag") {
         const original = event.transform.original;
         if (object.left === original.left && object.top === original.top) {
           onCanvasOperation == null ? void 0 : onCanvasOperation(
@@ -7933,149 +8578,67 @@ const useTwickCanvas = ({
           return;
         }
       }
-      switch ((_b = event.transform) == null ? void 0 : _b.action) {
+      const context = {
+        canvasMetadata: canvasMetadataRef.current,
+        videoSize: videoSizeRef.current,
+        elementFrameMapRef: elementFrameMap,
+        captionPropsRef,
+        watermarkPropsRef
+      };
+      if (object instanceof Qo && (action === "drag" || action === "rotate")) {
+        const objects = object.getObjects();
+        for (const fabricObj of objects) {
+          const id2 = fabricObj.get("id");
+          if (!id2 || id2 === "e-watermark") continue;
+          const currentElement = elementMap.current[id2];
+          if (!currentElement) continue;
+          const handler = elementController.get(currentElement.type);
+          const result = (_b = handler == null ? void 0 : handler.updateFromFabricObject) == null ? void 0 : _b.call(
+            handler,
+            fabricObj,
+            currentElement,
+            context
+          );
+          if (result) {
+            elementMap.current[id2] = result.element;
+            onCanvasOperation == null ? void 0 : onCanvasOperation(
+              result.operation ?? CANVAS_OPERATIONS.ITEM_UPDATED,
+              result.payload ?? result.element
+            );
+          }
+        }
+        return;
+      }
+      switch (action) {
         case "drag":
         case "scale":
         case "scaleX":
         case "scaleY":
-        case "rotate":
-          const { x: x2, y: y2 } = convertToVideoPosition(
-            object.left,
-            object.top,
-            canvasMetadataRef.current,
-            videoSizeRef.current
+        case "rotate": {
+          const currentElement = elementMap.current[elementId];
+          const handler = elementController.get(
+            elementId === "e-watermark" ? "watermark" : currentElement == null ? void 0 : currentElement.type
           );
-          if (elementMap.current[elementId].type === "caption") {
-            if ((_c = captionPropsRef.current) == null ? void 0 : _c.applyToAll) {
-              onCanvasOperation == null ? void 0 : onCanvasOperation(CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED, {
-                element: elementMap.current[elementId],
-                props: {
-                  ...captionPropsRef.current,
-                  x: x2,
-                  y: y2
-                }
-              });
-            } else {
-              elementMap.current[elementId] = {
-                ...elementMap.current[elementId],
-                props: {
-                  ...elementMap.current[elementId].props,
-                  x: x2,
-                  y: y2
-                }
-              };
-              onCanvasOperation == null ? void 0 : onCanvasOperation(
-                CANVAS_OPERATIONS.ITEM_UPDATED,
-                elementMap.current[elementId]
-              );
-            }
-          } else {
-            if ((object == null ? void 0 : object.type) === "group") {
-              const currentFrameEffect = elementFrameMap.current[elementId];
-              let updatedFrameSize;
-              if (currentFrameEffect) {
-                updatedFrameSize = [
-                  currentFrameEffect.props.frameSize[0] * object.scaleX,
-                  currentFrameEffect.props.frameSize[1] * object.scaleY
-                ];
-              } else {
-                updatedFrameSize = [
-                  elementMap.current[elementId].frame.size[0] * object.scaleX,
-                  elementMap.current[elementId].frame.size[1] * object.scaleY
-                ];
-              }
-              if (currentFrameEffect) {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  frameEffects: (elementMap.current[elementId].frameEffects || []).map(
-                    (frameEffect) => frameEffect.id === (currentFrameEffect == null ? void 0 : currentFrameEffect.id) ? {
-                      ...frameEffect,
-                      props: {
-                        ...frameEffect.props,
-                        framePosition: {
-                          x: x2,
-                          y: y2
-                        },
-                        frameSize: updatedFrameSize
-                      }
-                    } : frameEffect
-                  )
-                };
-                elementFrameMap.current[elementId] = {
-                  ...elementFrameMap.current[elementId],
-                  framePosition: {
-                    x: x2,
-                    y: y2
-                  },
-                  frameSize: updatedFrameSize
-                };
-              } else {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  frame: {
-                    ...elementMap.current[elementId].frame,
-                    rotation: object.angle,
-                    size: updatedFrameSize,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              }
-            } else {
-              if ((object == null ? void 0 : object.type) === "text") {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              } else if ((object == null ? void 0 : object.type) === "circle") {
-                const radius = Number(
-                  (elementMap.current[elementId].props.radius * object.scaleX).toFixed(2)
-                );
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    radius,
-                    height: radius * 2,
-                    width: radius * 2,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              } else {
-                elementMap.current[elementId] = {
-                  ...elementMap.current[elementId],
-                  props: {
-                    ...elementMap.current[elementId].props,
-                    rotation: object.angle,
-                    width: elementMap.current[elementId].props.width * object.scaleX,
-                    height: elementMap.current[elementId].props.height * object.scaleY,
-                    x: x2,
-                    y: y2
-                  }
-                };
-              }
-            }
+          const result = (_c = handler == null ? void 0 : handler.updateFromFabricObject) == null ? void 0 : _c.call(handler, object, currentElement ?? { id: elementId, type: "text", props: {} }, context);
+          if (result) {
+            elementMap.current[elementId] = result.element;
             onCanvasOperation == null ? void 0 : onCanvasOperation(
-              CANVAS_OPERATIONS.ITEM_UPDATED,
-              elementMap.current[elementId]
+              result.operation ?? CANVAS_OPERATIONS.ITEM_UPDATED,
+              result.payload ?? result.element
             );
           }
           break;
+        }
       }
     }
   };
   const setCanvasElements = async ({
     elements,
+    watermark,
     seekTime = 0,
     captionProps,
-    cleanAndAdd = false
+    cleanAndAdd = false,
+    lockAspectRatio
   }) => {
     if (!twickCanvas || !getCanvasContext(twickCanvas)) return;
     try {
@@ -8088,21 +8651,36 @@ const useTwickCanvas = ({
         }
       }
       captionPropsRef.current = captionProps;
+      const uniqueElements = [];
+      const seenIds = /* @__PURE__ */ new Set();
+      for (const el of elements) {
+        if (!el || !el.id) continue;
+        if (seenIds.has(el.id)) continue;
+        seenIds.add(el.id);
+        uniqueElements.push(el);
+      }
       await Promise.all(
-        elements.map(async (element, index) => {
+        uniqueElements.map(async (element, index) => {
           try {
             if (!element) return;
+            const zOrder = element.zIndex ?? index;
             await addElementToCanvas({
               element,
-              index,
+              index: zOrder,
               reorder: false,
               seekTime,
-              captionProps
+              captionProps,
+              lockAspectRatio
             });
           } catch {
           }
         })
       );
+      if (watermark) {
+        addWatermarkToCanvas({
+          element: watermark
+        });
+      }
       reorderElementsByZIndex(twickCanvas);
     } catch {
     }
@@ -8112,317 +8690,1034 @@ const useTwickCanvas = ({
     index,
     reorder = true,
     seekTime,
-    captionProps
+    captionProps,
+    lockAspectRatio
   }) => {
-    var _a, _b;
+    var _a;
     if (!twickCanvas) return;
-    switch (element.type) {
-      case ELEMENT_TYPES.VIDEO:
-        const currentFrameEffect = getCurrentFrameEffect(
-          element,
-          seekTime || 0
-        );
-        elementFrameMap.current[element.id] = currentFrameEffect;
-        const snapTime = ((seekTime || 0) - ((element == null ? void 0 : element.s) || 0)) * (((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.playbackRate) || 1) + (((_b = element == null ? void 0 : element.props) == null ? void 0 : _b.time) || 0);
-        await addVideoElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current,
-          currentFrameEffect,
-          snapTime
-        });
-        if (element.timelineType === "scene") {
-          await addBackgroundColor({
-            element,
-            index,
-            canvas: twickCanvas,
-            canvasMetadata: canvasMetadataRef.current
-          });
-        }
-        break;
-      case ELEMENT_TYPES.IMAGE:
-        await addImageElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        if (element.timelineType === "scene") {
-          await addBackgroundColor({
-            element,
-            index,
-            canvas: twickCanvas,
-            canvasMetadata: canvasMetadataRef.current
-          });
-        }
-        break;
-      case ELEMENT_TYPES.RECT:
-        await addRectElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.CIRCLE:
-        await addCircleElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.TEXT:
-        await addTextElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
-      case ELEMENT_TYPES.CAPTION:
-        await addCaptionElement({
-          element,
-          index,
-          canvas: twickCanvas,
-          captionProps,
-          canvasMetadata: canvasMetadataRef.current
-        });
-        break;
+    const handler = elementController.get(element.type);
+    if (handler) {
+      await handler.add({
+        element,
+        index,
+        canvas: twickCanvas,
+        canvasMetadata: canvasMetadataRef.current,
+        seekTime,
+        captionProps: captionProps ?? null,
+        elementFrameMapRef: elementFrameMap,
+        getCurrentFrameEffect,
+        lockAspectRatio: lockAspectRatio ?? ((_a = element.props) == null ? void 0 : _a.lockAspectRatio)
+      });
     }
-    elementMap.current[element.id] = element;
+    elementMap.current[element.id] = { ...element, zIndex: element.zIndex ?? index };
     if (reorder) {
       reorderElementsByZIndex(twickCanvas);
     }
   };
-  return {
-    twickCanvas,
-    buildCanvas,
-    onVideoSizeChange,
-    addElementToCanvas,
-    setCanvasElements
-  };
-};
-const usePlayerManager = ({
-  videoProps
-}) => {
-  const [projectData, setProjectData] = useState(null);
-  const {
-    timelineAction,
-    setTimelineAction,
-    setSelectedItem,
-    editor,
-    changeLog
-  } = useTimelineContext();
-  const currentChangeLog = useRef(changeLog);
-  const prevSeekTime = useRef(0);
-  const [playerUpdating, setPlayerUpdating] = useState(false);
-  const handleCanvasReady = (_canvas) => {
-  };
-  const handleCanvasOperation = (operation, data) => {
-    if (operation === CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED) {
-      const subtitlesTrack = editor.getSubtiltesTrack();
-      subtitlesTrack == null ? void 0 : subtitlesTrack.setProps(data.props);
-      setSelectedItem(data.element);
-      editor.refresh();
-    } else {
-      const element = ElementDeserializer.fromJSON(data);
-      switch (operation) {
-        case CANVAS_OPERATIONS.ITEM_SELECTED:
-          setSelectedItem(element);
-          break;
-        case CANVAS_OPERATIONS.ITEM_UPDATED:
-          if (element) {
-            const updatedElement = editor.updateElement(element);
-            currentChangeLog.current = currentChangeLog.current + 1;
-            setSelectedItem(updatedElement);
-          }
-          break;
-      }
-    }
-  };
-  const { twickCanvas, buildCanvas, setCanvasElements } = useTwickCanvas({
-    onCanvasReady: handleCanvasReady,
-    onCanvasOperation: handleCanvasOperation
-  });
-  const updateCanvas = (seekTime) => {
-    var _a;
-    if (changeLog === currentChangeLog.current && seekTime === prevSeekTime.current) {
-      return;
+  const addWatermarkToCanvas = ({
+    element
+  }) => {
+    if (!twickCanvas) return;
+    const handler = elementController.get("watermark");
+    if (handler) {
+      handler.add({
+        element,
+        index: Object.keys(elementMap.current).length,
+        canvas: twickCanvas,
+        canvasMetadata: canvasMetadataRef.current,
+        watermarkPropsRef
+      });
+      elementMap.current[element.id] = element;
     }
-    prevSeekTime.current = seekTime;
-    const elements = getCurrentElements(
-      seekTime,
-      ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? []
-    );
-    let captionProps = {};
-    (elements || []).forEach((element) => {
-      if (element instanceof CaptionElement) {
-        const track = editor.getTrackById(element.getTrackId());
-        captionProps = (track == null ? void 0 : track.getProps()) ?? {};
-      }
-    });
-    setCanvasElements({
-      elements,
-      seekTime,
-      captionProps,
-      cleanAndAdd: true
-    });
-    currentChangeLog.current = changeLog;
   };
-  const onPlayerUpdate = (event) => {
-    var _a;
-    if (((_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.status) === "ready") {
-      setPlayerUpdating(false);
-      setTimelineAction(TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
-    }
+  const applyZOrder = (elementId, direction) => {
+    if (!twickCanvas) return false;
+    const newZIndex = changeZOrder(twickCanvas, elementId, direction);
+    if (newZIndex == null) return false;
+    const element = elementMap.current[elementId];
+    if (element) elementMap.current[elementId] = { ...element, zIndex: newZIndex };
+    onCanvasOperation == null ? void 0 : onCanvasOperation(CANVAS_OPERATIONS.Z_ORDER_CHANGED, { elementId, direction });
+    return true;
   };
-  useEffect(() => {
-    var _a, _b, _c, _d, _e2;
-    switch (timelineAction.type) {
-      case TIMELINE_ACTION.UPDATE_PLAYER_DATA:
-        if (videoProps) {
-          if (((_a = timelineAction.payload) == null ? void 0 : _a.forceUpdate) || editor.getLatestVersion() !== ((_b = projectData == null ? void 0 : projectData.input) == null ? void 0 : _b.version)) {
-            setPlayerUpdating(true);
-            const _latestProjectData = {
-              input: {
-                properties: videoProps,
-                tracks: ((_c = timelineAction.payload) == null ? void 0 : _c.tracks) ?? [],
-                version: ((_d = timelineAction.payload) == null ? void 0 : _d.version) ?? 0
-              }
-            };
-            setProjectData(_latestProjectData);
-            if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
-              setTimeout(() => {
-                setPlayerUpdating(false);
-              });
-            }
-          } else {
-            setTimelineAction(TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
-          }
-        }
-        break;
-    }
-  }, [timelineAction]);
+  const bringToFront = (elementId) => applyZOrder(elementId, "front");
+  const sendToBack = (elementId) => applyZOrder(elementId, "back");
+  const bringForward = (elementId) => applyZOrder(elementId, "forward");
+  const sendBackward = (elementId) => applyZOrder(elementId, "backward");
   return {
     twickCanvas,
-    projectData,
-    updateCanvas,
     buildCanvas,
-    onPlayerUpdate,
-    playerUpdating
+    onVideoSizeChange,
+    addWatermarkToCanvas,
+    addElementToCanvas,
+    setCanvasElements,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward
   };
 };
-const PlayerManager = ({
-  videoProps,
-  playerProps,
-  canvasMode
-}) => {
-  const { changeLog } = useTimelineContext();
-  const { twickCanvas, projectData, updateCanvas, playerUpdating, onPlayerUpdate, buildCanvas } = usePlayerManager({ videoProps });
-  const durationRef = useRef(0);
-  const {
-    playerState,
-    playerVolume,
-    seekTime,
-    setPlayerState,
-    setCurrentTime
-  } = useLivePlayerContext();
-  const containerRef = useRef(null);
-  const canvasRef = useRef(null);
-  useEffect(() => {
-    const container = containerRef.current;
-    const canvasSize = {
-      width: container == null ? void 0 : container.clientWidth,
-      height: container == null ? void 0 : container.clientHeight
-    };
-    buildCanvas({
-      backgroundColor: videoProps.backgroundColor,
-      videoSize: {
-        width: videoProps.width,
-        height: videoProps.height
-      },
-      canvasSize,
-      canvasRef: canvasRef.current
-    });
-  }, [videoProps]);
-  useEffect(() => {
-    if (twickCanvas && playerState === PLAYER_STATE.PAUSED) {
-      updateCanvas(seekTime);
-    }
-  }, [twickCanvas, playerState, seekTime, changeLog]);
-  const handleTimeUpdate = (time2) => {
-    if (durationRef.current && time2 >= durationRef.current) {
-      setCurrentTime(0);
-      setPlayerState(PLAYER_STATE.PAUSED);
-    } else {
-      setCurrentTime(time2);
-    }
-  };
-  return /* @__PURE__ */ jsxs(
-    "div",
+const VIDEO_TYPES = [
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime",
+  "video/x-msvideo",
+  "video/x-matroska"
+];
+const AUDIO_TYPES = [
+  "audio/mpeg",
+  "audio/mp3",
+  "audio/wav",
+  "audio/ogg",
+  "audio/webm",
+  "audio/aac",
+  "audio/mp4",
+  "audio/x-wav"
+];
+const IMAGE_TYPES = [
+  "image/jpeg",
+  "image/jpg",
+  "image/png",
+  "image/gif",
+  "image/webp",
+  "image/svg+xml",
+  "image/bmp"
+];
+const EXT_TO_TYPE = {
+  mp4: "video",
+  webm: "video",
+  mov: "video",
+  avi: "video",
+  mkv: "video",
+  mp3: "audio",
+  wav: "audio",
+  ogg: "audio",
+  m4a: "audio",
+  jpg: "image",
+  jpeg: "image",
+  png: "image",
+  gif: "image",
+  webp: "image",
+  svg: "image",
+  bmp: "image"
+};
+function getAssetTypeFromFile(file) {
+  var _a;
+  const mime = (file.type || "").toLowerCase();
+  const ext = (((_a = file.name) == null ? void 0 : _a.split(".").pop()) || "").toLowerCase();
+  if (VIDEO_TYPES.some((t2) => mime.includes(t2))) return "video";
+  if (AUDIO_TYPES.some((t2) => mime.includes(t2))) return "audio";
+  if (IMAGE_TYPES.some((t2) => mime.includes(t2))) return "image";
+  if (ext && EXT_TO_TYPE[ext]) return EXT_TO_TYPE[ext];
+  return null;
+}
+const INITIAL_TIMELINE_DATA = {
+  tracks: [
     {
-      className: "twick-editor-container",
-      style: {
-        aspectRatio: `${videoProps.width}/${videoProps.height}`
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "twick-editor-loading-overlay",
-            style: {
-              display: playerUpdating ? "flex" : "none"
-            },
-            children: playerUpdating ? /* @__PURE__ */ jsx("div", { className: "twick-editor-loading-spinner" }) : null
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          LivePlayer,
-          {
-            seekTime,
-            projectData,
-            quality: (playerProps == null ? void 0 : playerProps.quality) || 1,
-            videoSize: {
-              width: videoProps.width,
-              height: videoProps.height
-            },
-            onPlayerUpdate,
-            containerStyle: {
-              opacity: canvasMode ? playerState === PLAYER_STATE.PAUSED ? 0 : 1 : 1
-            },
-            onTimeUpdate: handleTimeUpdate,
-            volume: playerVolume,
-            onDurationChange: (duration) => {
-              durationRef.current = duration;
-            },
-            playing: playerState === PLAYER_STATE.PLAYING
-          }
-        ),
-        canvasMode && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: containerRef,
-            className: "twick-editor-canvas-container",
-            style: {
-              opacity: playerState === PLAYER_STATE.PAUSED ? 1 : 0
-            },
-            children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "twick-editor-canvas" })
+      type: "element",
+      id: "t-sample",
+      name: "sample",
+      elements: [
+        {
+          id: "e-sample",
+          trackId: "t-sample",
+          name: "sample",
+          type: "text",
+          s: 0,
+          e: 5,
+          props: {
+            text: "Twick Video Editor",
+            fill: "#FFFFFF"
           }
-        )
+        }
       ]
     }
-  );
+  ],
+  version: 1
 };
-function clamp$1(v2, min, max) {
-  return Math.max(min, Math.min(v2, max));
-}
-const V = {
-  toVector(v2, fallback) {
-    if (v2 === void 0) v2 = fallback;
-    return Array.isArray(v2) ? v2 : [v2, v2];
-  },
+const MIN_DURATION = 0.1;
+const TIMELINE_DROP_MEDIA_TYPE = "application/x-twick-media";
+const DRAG_TYPE = {
+  /** Drag operation is starting */
+  START: "start",
+  /** Drag operation is in progress */
+  MOVE: "move",
+  /** Drag operation has ended */
+  END: "end"
+};
+const DEFAULT_TIMELINE_ZOOM = 1.5;
+const DEFAULT_FPS = 30;
+const SNAP_THRESHOLD_PX = 10;
+const DEFAULT_TIMELINE_ZOOM_CONFIG = {
+  /** Minimum zoom level (10%) */
+  min: 0.1,
+  /** Maximum zoom level (300%) */
+  max: 3,
+  /** Zoom step increment/decrement (10%) */
+  step: 0.1,
+  /** Default zoom level (150%) */
+  default: 1.5
+};
+const DEFAULT_TIMELINE_TICK_CONFIGS = [
+  {
+    durationThreshold: 10,
+    // < 10 seconds
+    majorInterval: 1,
+    // 1s major ticks
+    minorTicks: 10
+    // 0.1s minor ticks (10 minors between majors)
+  },
+  {
+    durationThreshold: 30,
+    // < 30 seconds
+    majorInterval: 5,
+    // 5s major ticks
+    minorTicks: 5
+    // 1s minor ticks (5 minors between majors)
+  },
+  {
+    durationThreshold: 120,
+    // < 2 minutes
+    majorInterval: 10,
+    // 10s major ticks
+    minorTicks: 5
+    // 2s minor ticks (5 minors between majors)
+  },
+  {
+    durationThreshold: 300,
+    // < 5 minutes
+    majorInterval: 30,
+    // 30s major ticks
+    minorTicks: 6
+    // 5s minor ticks (6 minors between majors)
+  },
+  {
+    durationThreshold: 900,
+    // < 15 minutes
+    majorInterval: 60,
+    // 1m major ticks
+    minorTicks: 6
+    // 10s minor ticks (6 minors between majors)
+  },
+  {
+    durationThreshold: 1800,
+    // < 30 minutes
+    majorInterval: 120,
+    // 2m major ticks
+    minorTicks: 4
+    // 30s minor ticks (4 minors between majors)
+  },
+  {
+    durationThreshold: 3600,
+    // < 1 hour
+    majorInterval: 300,
+    // 5m major ticks
+    minorTicks: 5
+    // 1m minor ticks (5 minors between majors)
+  },
+  {
+    durationThreshold: 7200,
+    // < 2 hours
+    majorInterval: 600,
+    // 10m major ticks
+    minorTicks: 10
+    // 1m minor ticks (10 minors between majors)
+  },
+  {
+    durationThreshold: Infinity,
+    // >= 2 hours
+    majorInterval: 1800,
+    // 30m major ticks
+    minorTicks: 6
+    // 5m minor ticks (6 minors between majors)
+  }
+];
+const DEFAULT_ELEMENT_COLORS = {
+  /** 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
+  /** Modern sans-serif font */
+  RUBIK: "Rubik",
+  /** Clean and readable font */
+  MULISH: "Mulish",
+  /** Bold display font */
+  LUCKIEST_GUY: "Luckiest Guy",
+  /** Elegant serif font */
+  PLAYFAIR_DISPLAY: "Playfair Display",
+  /** Classic sans-serif font */
+  ROBOTO: "Roboto",
+  /** Modern geometric font */
+  POPPINS: "Poppins",
+  // Display and Decorative Fonts
+  /** Comic-style display font */
+  BANGERS: "Bangers",
+  /** Handwritten-style font */
+  BIRTHSTONE: "Birthstone",
+  /** Elegant script font */
+  CORINTHIA: "Corinthia",
+  /** Formal script font */
+  IMPERIAL_SCRIPT: "Imperial Script",
+  /** Bold outline font */
+  KUMAR_ONE_OUTLINE: "Kumar One Outline",
+  /** Light outline font */
+  LONDRI_OUTLINE: "Londrina Outline",
+  /** Casual script font */
+  MARCK_SCRIPT: "Marck Script",
+  /** Modern sans-serif font */
+  MONTSERRAT: "Montserrat",
+  /** Stylish display font */
+  PATTAYA: "Pattaya",
+  // CDN Fonts
+  /** Unique display font */
+  PERALTA: "Peralta",
+  /** Bold impact font */
+  IMPACT: "Impact",
+  /** Handwritten-style font */
+  LUMANOSIMO: "Lumanosimo",
+  /** Custom display font */
+  KAPAKANA: "Kapakana",
+  /** Handwritten font */
+  HANDYRUSH: "HandyRush",
+  /** Decorative font */
+  DASHER: "Dasher",
+  /** Signature-style font */
+  BRITTANY_SIGNATURE: "Brittany Signature"
+};
+const DEFAULT_DROP_DURATION = 5;
+function useTimelineDrop({
+  containerRef,
+  scrollContainerRef,
+  tracks,
+  duration,
+  zoomLevel,
+  labelWidth,
+  trackHeight,
+  /** Width of the track content area (timeline minus labels). Used for accurate time mapping. */
+  trackContentWidth,
+  onDrop,
+  enabled = true
+}) {
+  const [preview, setPreview] = useState(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false);
+  const computePosition = useCallback(
+    (clientX, clientY) => {
+      var _a, _b;
+      if (!containerRef.current) return null;
+      const rect = containerRef.current.getBoundingClientRect();
+      const scrollEl = (scrollContainerRef == null ? void 0 : scrollContainerRef.current) ?? containerRef.current;
+      const scrollLeft = (scrollEl == null ? void 0 : scrollEl.scrollLeft) ?? 0;
+      const viewportLeft = ((_b = (_a = scrollEl == null ? void 0 : scrollEl.getBoundingClientRect) == null ? void 0 : _a.call(scrollEl)) == null ? void 0 : _b.left) ?? rect.left;
+      const contentX = clientX - viewportLeft + scrollLeft - labelWidth;
+      const relY = clientY - rect.top;
+      const rawTrackIndex = Math.floor(relY / trackHeight);
+      const trackIndex = tracks.length === 0 ? 0 : Math.max(0, Math.min(tracks.length - 1, rawTrackIndex));
+      const pixelsPerSecond = trackContentWidth != null && trackContentWidth > 0 ? trackContentWidth / duration : 100 * zoomLevel;
+      const timeSec = Math.max(
+        0,
+        Math.min(duration, contentX / pixelsPerSecond)
+      );
+      return { trackIndex, timeSec };
+    },
+    [
+      containerRef,
+      scrollContainerRef,
+      tracks.length,
+      labelWidth,
+      trackHeight,
+      zoomLevel,
+      duration,
+      trackContentWidth
+    ]
+  );
+  const handleDragOver = useCallback(
+    (e3) => {
+      if (!enabled) return;
+      e3.preventDefault();
+      e3.stopPropagation();
+      const hasFiles = e3.dataTransfer.types.includes("Files");
+      const hasPanelMedia = e3.dataTransfer.types.includes(TIMELINE_DROP_MEDIA_TYPE);
+      if (!hasFiles && !hasPanelMedia) return;
+      e3.dataTransfer.dropEffect = "copy";
+      setIsDraggingOver(true);
+      const pos = computePosition(e3.clientX, e3.clientY);
+      if (pos) {
+        const track = tracks[pos.trackIndex] ?? null;
+        if (track || tracks.length === 0) {
+          setPreview({
+            trackIndex: pos.trackIndex,
+            timeSec: pos.timeSec,
+            widthPct: Math.min(
+              100,
+              DEFAULT_DROP_DURATION / duration * 100
+            )
+          });
+        }
+      }
+    },
+    [enabled, computePosition, tracks, duration]
+  );
+  const handleDragLeave = useCallback((e3) => {
+    if (!e3.currentTarget.contains(e3.relatedTarget)) {
+      setIsDraggingOver(false);
+      setPreview(null);
+    }
+  }, []);
+  const handleDrop = useCallback(
+    async (e3) => {
+      if (!enabled) return;
+      e3.preventDefault();
+      e3.stopPropagation();
+      setIsDraggingOver(false);
+      setPreview(null);
+      const pos = computePosition(e3.clientX, e3.clientY);
+      if (!pos || pos.trackIndex < 0) return;
+      const track = tracks[pos.trackIndex] ?? null;
+      if (e3.dataTransfer.types.includes(TIMELINE_DROP_MEDIA_TYPE)) {
+        try {
+          const data = JSON.parse(
+            e3.dataTransfer.getData(TIMELINE_DROP_MEDIA_TYPE) || "{}"
+          );
+          if (data.type && data.url) {
+            await onDrop({
+              track,
+              timeSec: pos.timeSec,
+              type: data.type,
+              url: data.url
+            });
+          }
+        } catch {
+        }
+        return;
+      }
+      const files = Array.from(e3.dataTransfer.files || []);
+      for (const file of files) {
+        const type = getAssetTypeFromFile(file);
+        if (!type) continue;
+        const blobUrl = URL.createObjectURL(file);
+        try {
+          await onDrop({
+            track,
+            timeSec: pos.timeSec,
+            type,
+            url: blobUrl
+          });
+        } finally {
+          URL.revokeObjectURL(blobUrl);
+        }
+        break;
+      }
+    },
+    [enabled, computePosition, tracks, onDrop]
+  );
+  return { preview, isDraggingOver, handleDragOver, handleDragLeave, handleDrop };
+}
+function createElementFromDrop(type, blobUrl, parentSize) {
+  switch (type) {
+    case "video":
+      return new VideoElement$1(blobUrl, parentSize);
+    case "audio":
+      return new AudioElement(blobUrl);
+    case "image":
+      return new ImageElement$1(blobUrl, parentSize);
+    default:
+      throw new Error(`Unknown asset type: ${type}`);
+  }
+}
+const usePlayerManager = ({
+  videoProps,
+  canvasConfig
+}) => {
+  const [projectData, setProjectData] = useState(null);
+  const {
+    timelineAction,
+    setTimelineAction,
+    setSelectedItem,
+    editor,
+    changeLog,
+    videoResolution
+  } = useTimelineContext();
+  const { getCurrentTime } = useLivePlayerContext();
+  const currentChangeLog = useRef(changeLog);
+  const prevSeekTime = useRef(0);
+  const [playerUpdating, setPlayerUpdating] = useState(false);
+  const handleCanvasReady = (_canvas) => {
+  };
+  const handleCanvasOperation = (operation, data) => {
+    var _a;
+    if (operation === CANVAS_OPERATIONS.ADDED_NEW_ELEMENT) {
+      if (data == null ? void 0 : data.element) {
+        setSelectedItem(data.element);
+      }
+      return;
+    }
+    if (operation === CANVAS_OPERATIONS.Z_ORDER_CHANGED) {
+      const { elementId, direction } = data ?? {};
+      if (!elementId || !direction) return;
+      const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+      const trackIndex = tracks.findIndex(
+        (t2) => t2.getElements().some((el) => el.getId() === elementId)
+      );
+      if (trackIndex < 0) return;
+      const track = tracks[trackIndex];
+      const reordered = [...tracks];
+      if (direction === "front") {
+        reordered.splice(trackIndex, 1);
+        reordered.push(track);
+      } else if (direction === "back") {
+        reordered.splice(trackIndex, 1);
+        reordered.unshift(track);
+      } else if (direction === "forward" && trackIndex < reordered.length - 1) {
+        [reordered[trackIndex], reordered[trackIndex + 1]] = [reordered[trackIndex + 1], reordered[trackIndex]];
+      } else if (direction === "backward" && trackIndex > 0) {
+        [reordered[trackIndex - 1], reordered[trackIndex]] = [reordered[trackIndex], reordered[trackIndex - 1]];
+      } else {
+        return;
+      }
+      editor.reorderTracks(reordered);
+      currentChangeLog.current = currentChangeLog.current + 1;
+      return;
+    }
+    if (operation === CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED) {
+      const captionsTrack = editor.getCaptionsTrack();
+      captionsTrack == null ? void 0 : captionsTrack.setProps(data.props);
+      setSelectedItem(data.element);
+      editor.refresh();
+    } else if (operation === CANVAS_OPERATIONS.WATERMARK_UPDATED) {
+      const w2 = editor.getWatermark();
+      if (w2 && data) {
+        if (data.position) w2.setPosition(data.position);
+        if (data.rotation != null) w2.setRotation(data.rotation);
+        if (data.opacity != null) w2.setOpacity(data.opacity);
+        if (data.props) w2.setProps(data.props);
+        editor.setWatermark(w2);
+        currentChangeLog.current = currentChangeLog.current + 1;
+      }
+    } else {
+      const element = ElementDeserializer.fromJSON(data);
+      switch (operation) {
+        case CANVAS_OPERATIONS.ITEM_SELECTED:
+          setSelectedItem(element);
+          break;
+        case CANVAS_OPERATIONS.ITEM_UPDATED:
+          if (element) {
+            const updatedElement = editor.updateElement(element);
+            currentChangeLog.current = currentChangeLog.current + 1;
+            setSelectedItem(updatedElement);
+          }
+          break;
+      }
+    }
+  };
+  const handleDropOnCanvas = useCallback(
+    async (payload) => {
+      const { type, url, canvasX, canvasY } = payload;
+      const element = createElementFromDrop(type, url, videoResolution);
+      const currentTime = getCurrentTime();
+      element.setStart(currentTime);
+      const newTrack = editor.addTrack(`Track_${Date.now()}`);
+      const result = await editor.addElementToTrack(newTrack, element);
+      if (result) {
+        setSelectedItem(element);
+        currentChangeLog.current = currentChangeLog.current + 1;
+        editor.refresh();
+        handleCanvasOperation(CANVAS_OPERATIONS.ADDED_NEW_ELEMENT, {
+          element,
+          canvasPosition: canvasX != null && canvasY != null ? { x: canvasX, y: canvasY } : void 0
+        });
+      }
+    },
+    [editor, videoResolution, getCurrentTime, setSelectedItem]
+  );
+  const {
+    twickCanvas,
+    buildCanvas,
+    setCanvasElements,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward
+  } = useTwickCanvas({
+    onCanvasReady: handleCanvasReady,
+    onCanvasOperation: handleCanvasOperation,
+    enableShiftAxisLock: (canvasConfig == null ? void 0 : canvasConfig.enableShiftAxisLock) ?? false
+  });
+  const updateCanvas = (seekTime) => {
+    var _a;
+    if (changeLog === currentChangeLog.current && seekTime === prevSeekTime.current) {
+      return;
+    }
+    prevSeekTime.current = seekTime;
+    const elements = getCurrentElements(
+      seekTime,
+      ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? []
+    );
+    let captionProps = {};
+    (elements || []).forEach((element) => {
+      if (element instanceof CaptionElement$1) {
+        const track = editor.getTrackById(element.getTrackId());
+        captionProps = (track == null ? void 0 : track.getProps()) ?? {};
+      }
+    });
+    const watermark = editor.getWatermark();
+    let watermarkElement;
+    if (watermark) {
+      const position = watermark.getPosition();
+      watermarkElement = {
+        id: watermark.getId(),
+        type: watermark.getType(),
+        props: {
+          ...watermark.getProps() || {},
+          x: (position == null ? void 0 : position.x) ?? 0,
+          y: (position == null ? void 0 : position.y) ?? 0,
+          rotation: watermark.getRotation() ?? 0,
+          opacity: watermark.getOpacity() ?? 1
+        }
+      };
+    }
+    setCanvasElements({
+      elements,
+      watermark: watermarkElement,
+      seekTime,
+      captionProps,
+      cleanAndAdd: true,
+      lockAspectRatio: canvasConfig == null ? void 0 : canvasConfig.lockAspectRatio
+    });
+    currentChangeLog.current = changeLog;
+  };
+  const onPlayerUpdate = (event) => {
+    var _a;
+    if (((_a = event == null ? void 0 : event.detail) == null ? void 0 : _a.status) === "ready") {
+      setPlayerUpdating(false);
+      setTimelineAction(TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
+    }
+  };
+  const deleteElement = (elementId) => {
+    var _a;
+    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+    for (const track of tracks) {
+      const element = track.getElementById(elementId);
+      if (element) {
+        editor.removeElement(element);
+        currentChangeLog.current = currentChangeLog.current + 1;
+        setSelectedItem(null);
+        updateCanvas(getCurrentTime());
+        return;
+      }
+    }
+  };
+  useEffect(() => {
+    var _a, _b, _c, _d, _e2;
+    switch (timelineAction.type) {
+      case TIMELINE_ACTION.UPDATE_PLAYER_DATA:
+        if (videoProps) {
+          if (((_a = timelineAction.payload) == null ? void 0 : _a.forceUpdate) || editor.getLatestVersion() !== ((_b = projectData == null ? void 0 : projectData.input) == null ? void 0 : _b.version)) {
+            setPlayerUpdating(true);
+            const _latestProjectData = {
+              input: {
+                properties: videoProps,
+                tracks: ((_c = timelineAction.payload) == null ? void 0 : _c.tracks) ?? [],
+                version: ((_d = timelineAction.payload) == null ? void 0 : _d.version) ?? 0
+              }
+            };
+            setProjectData(_latestProjectData);
+            if (((_e2 = timelineAction.payload) == null ? void 0 : _e2.version) === 1) {
+              setTimeout(() => {
+                setPlayerUpdating(false);
+              });
+            }
+          } else {
+            setTimelineAction(TIMELINE_ACTION.ON_PLAYER_UPDATED, null);
+          }
+        }
+        break;
+    }
+  }, [timelineAction]);
+  return {
+    twickCanvas,
+    projectData,
+    updateCanvas,
+    buildCanvas,
+    onPlayerUpdate,
+    playerUpdating,
+    handleDropOnCanvas,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward,
+    deleteElement
+  };
+};
+function useCanvasDrop({
+  containerRef,
+  videoSize,
+  onDrop,
+  enabled = true
+}) {
+  const handleDragOver = useCallback(
+    (e3) => {
+      if (!enabled) return;
+      e3.preventDefault();
+      e3.stopPropagation();
+      const hasFiles = e3.dataTransfer.types.includes("Files");
+      const hasPanelMedia = e3.dataTransfer.types.includes(TIMELINE_DROP_MEDIA_TYPE);
+      if (!hasFiles && !hasPanelMedia) return;
+      e3.dataTransfer.dropEffect = "copy";
+    },
+    [enabled]
+  );
+  const handleDrop = useCallback(
+    async (e3) => {
+      if (!enabled || !containerRef.current) return;
+      e3.preventDefault();
+      e3.stopPropagation();
+      let type = null;
+      let url = null;
+      if (e3.dataTransfer.types.includes(TIMELINE_DROP_MEDIA_TYPE)) {
+        try {
+          const data = JSON.parse(
+            e3.dataTransfer.getData(TIMELINE_DROP_MEDIA_TYPE) || "{}"
+          );
+          if (data.type && data.url) {
+            type = data.type;
+            url = data.url;
+          }
+        } catch {
+        }
+      }
+      if (!type || !url) {
+        const files = Array.from(e3.dataTransfer.files || []);
+        for (const file of files) {
+          const detectedType = getAssetTypeFromFile(file);
+          if (detectedType) {
+            type = detectedType;
+            url = URL.createObjectURL(file);
+            try {
+              await onDrop({
+                type,
+                url,
+                canvasX: getCanvasX(e3, containerRef.current, videoSize),
+                canvasY: getCanvasY(e3, containerRef.current, videoSize)
+              });
+            } finally {
+              URL.revokeObjectURL(url);
+            }
+            return;
+          }
+        }
+        return;
+      }
+      await onDrop({
+        type,
+        url,
+        canvasX: getCanvasX(e3, containerRef.current, videoSize),
+        canvasY: getCanvasY(e3, containerRef.current, videoSize)
+      });
+    },
+    [enabled, containerRef, videoSize, onDrop]
+  );
+  const handleDragLeave = useCallback((e3) => {
+    if (!e3.currentTarget.contains(e3.relatedTarget)) ;
+  }, []);
+  return { handleDragOver, handleDragLeave, handleDrop };
+}
+function getCanvasX(e3, container, videoSize) {
+  const rect = container.getBoundingClientRect();
+  const relX = (e3.clientX - rect.left) / rect.width;
+  return Math.max(0, Math.min(videoSize.width, relX * videoSize.width));
+}
+function getCanvasY(e3, container, videoSize) {
+  const rect = container.getBoundingClientRect();
+  const relY = (e3.clientY - rect.top) / rect.height;
+  return Math.max(0, Math.min(videoSize.height, relY * videoSize.height));
+}
+const CanvasContextMenu = ({
+  x: x2,
+  y: y2,
+  elementId,
+  onBringToFront,
+  onSendToBack,
+  onBringForward,
+  onSendBackward,
+  onDelete,
+  onClose
+}) => {
+  const menuRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (e3) => {
+      if (menuRef.current && !menuRef.current.contains(e3.target)) {
+        onClose();
+      }
+    };
+    const handleEscape = (e3) => {
+      if (e3.key === "Escape") onClose();
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [onClose]);
+  const handleAction = (fn2) => {
+    fn2(elementId);
+    onClose();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "twick-canvas-context-menu",
+      style: { left: x2, top: y2 },
+      role: "menu",
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item",
+            onClick: () => handleAction(onBringToFront),
+            role: "menuitem",
+            children: "Bring to Front"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item",
+            onClick: () => handleAction(onBringForward),
+            role: "menuitem",
+            children: "Bring Forward"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item",
+            onClick: () => handleAction(onSendBackward),
+            role: "menuitem",
+            children: "Send Backward"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item",
+            onClick: () => handleAction(onSendToBack),
+            role: "menuitem",
+            children: "Send to Back"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "twick-canvas-context-menu-separator", role: "separator" }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item twick-canvas-context-menu-item-danger",
+            onClick: () => handleAction(onDelete),
+            role: "menuitem",
+            children: "Delete"
+          }
+        )
+      ]
+    }
+  );
+};
+const PlayerManager = ({
+  videoProps,
+  playerProps,
+  canvasMode,
+  canvasConfig
+}) => {
+  const containerRef = useRef(null);
+  const canvasRef = useRef(null);
+  const durationRef = useRef(0);
+  const { changeLog } = useTimelineContext();
+  const {
+    playerState,
+    playerVolume,
+    seekTime,
+    setPlayerState,
+    setCurrentTime
+  } = useLivePlayerContext();
+  const {
+    twickCanvas,
+    projectData,
+    updateCanvas,
+    playerUpdating,
+    onPlayerUpdate,
+    buildCanvas,
+    handleDropOnCanvas,
+    bringToFront,
+    sendToBack,
+    bringForward,
+    sendBackward,
+    deleteElement
+  } = usePlayerManager({ videoProps, canvasConfig });
+  const [contextMenu, setContextMenu] = useState(null);
+  const closeContextMenu = useCallback(() => setContextMenu(null), []);
+  const { handleDragOver, handleDragLeave, handleDrop } = useCanvasDrop({
+    containerRef,
+    videoSize: { width: videoProps.width, height: videoProps.height },
+    onDrop: handleDropOnCanvas,
+    enabled: !!handleDropOnCanvas && canvasMode
+  });
+  useEffect(() => {
+    const container = containerRef.current;
+    const canvasSize = {
+      width: container == null ? void 0 : container.clientWidth,
+      height: container == null ? void 0 : container.clientHeight
+    };
+    buildCanvas({
+      backgroundColor: videoProps.backgroundColor,
+      videoSize: {
+        width: videoProps.width,
+        height: videoProps.height
+      },
+      canvasSize,
+      canvasRef: canvasRef.current
+    });
+  }, [videoProps]);
+  useEffect(() => {
+    if (twickCanvas && playerState === PLAYER_STATE.PAUSED) {
+      updateCanvas(seekTime);
+    }
+  }, [twickCanvas, playerState, seekTime, changeLog]);
+  useEffect(() => {
+    if (!twickCanvas || !canvasMode) return;
+    const onSelectionCreated = (e3) => {
+      var _a, _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");
+      if (id2) {
+        setContextMenu({ x: ev.clientX, y: ev.clientY, elementId: id2 });
+      }
+    };
+    twickCanvas.on("contextmenu", onSelectionCreated);
+    return () => {
+      twickCanvas.off("contextmenu", onSelectionCreated);
+    };
+  }, [twickCanvas, canvasMode]);
+  const handleTimeUpdate = (time2) => {
+    if (durationRef.current && time2 >= durationRef.current) {
+      setCurrentTime(0);
+      setPlayerState(PLAYER_STATE.PAUSED);
+    } else {
+      setCurrentTime(time2);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "twick-editor-container",
+      style: {
+        aspectRatio: `${videoProps.width}/${videoProps.height}`
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "twick-editor-loading-overlay",
+            style: {
+              display: playerUpdating ? "flex" : "none"
+            },
+            children: playerUpdating ? /* @__PURE__ */ jsx("div", { className: "twick-editor-loading-spinner" }) : null
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          LivePlayer,
+          {
+            seekTime,
+            projectData,
+            quality: (playerProps == null ? void 0 : playerProps.quality) || 1,
+            videoSize: {
+              width: videoProps.width,
+              height: videoProps.height
+            },
+            onPlayerUpdate,
+            containerStyle: {
+              opacity: canvasMode ? playerState === PLAYER_STATE.PAUSED ? 0 : 1 : 1
+            },
+            onTimeUpdate: handleTimeUpdate,
+            volume: playerVolume,
+            onDurationChange: (duration) => {
+              durationRef.current = duration;
+            },
+            playing: playerState === PLAYER_STATE.PLAYING
+          }
+        ),
+        canvasMode && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: containerRef,
+            className: "twick-editor-canvas-container",
+            style: {
+              opacity: playerState === PLAYER_STATE.PAUSED ? 1 : 0
+            },
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            onContextMenu: (e3) => e3.preventDefault(),
+            children: /* @__PURE__ */ jsx("canvas", { ref: canvasRef, className: "twick-editor-canvas" })
+          }
+        ),
+        contextMenu && /* @__PURE__ */ jsx(
+          CanvasContextMenu,
+          {
+            x: contextMenu.x,
+            y: contextMenu.y,
+            elementId: contextMenu.elementId,
+            onBringToFront: bringToFront,
+            onSendToBack: sendToBack,
+            onBringForward: bringForward,
+            onSendBackward: sendBackward,
+            onDelete: deleteElement,
+            onClose: closeContextMenu
+          }
+        )
+      ]
+    }
+  );
+};
+function clamp$1(v2, min, max) {
+  return Math.max(min, Math.min(v2, max));
+}
+const V = {
+  toVector(v2, fallback) {
+    if (v2 === void 0) v2 = fallback;
+    return Array.isArray(v2) ? v2 : [v2, v2];
+  },
   add(v1, v2) {
     return [v1[0] + v2[0], v1[1] + v2[1]];
   },
@@ -9751,7 +11046,8 @@ function SeekTrack({
   zoom = 1,
   onSeek,
   timelineCount = 0,
-  timelineTickConfigs
+  timelineTickConfigs,
+  onPlayheadUpdate
 }) {
   const containerRef = useRef(null);
   const [isDragging2, setIsDragging] = useState(false);
@@ -9763,6 +11059,12 @@ function SeekTrack({
     const position = isDragging2 && dragPosition !== null ? dragPosition : currentTime * pixelsPerSecond;
     return Math.max(0, position);
   }, [isDragging2, dragPosition, currentTime, pixelsPerSecond]);
+  React.useEffect(() => {
+    onPlayheadUpdate == null ? void 0 : onPlayheadUpdate({
+      positionPx: seekPosition,
+      isDragging: isDragging2
+    });
+  }, [seekPosition, isDragging2, onPlayheadUpdate]);
   const { majorIntervalSec, minorIntervalSec } = useMemo(() => {
     if (timelineTickConfigs && timelineTickConfigs.length > 0) {
       const sortedConfigs = [...timelineTickConfigs].sort((a2, b2) => a2.durationThreshold - b2.durationThreshold);
@@ -9931,7 +11233,7 @@ function SeekTrack({
               transform: `translateX(${seekPosition}px)`,
               top: 0,
               touchAction: "none",
-              transition: isDragging2 ? "none" : "transform 0.1s linear",
+              transition: isDragging2 ? "none" : "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)",
               willChange: isDragging2 ? "transform" : "auto"
             },
             children: [
@@ -9955,7 +11257,8 @@ const SeekControl = ({
   zoom,
   timelineCount,
   onSeek,
-  timelineTickConfigs
+  timelineTickConfigs,
+  onPlayheadUpdate
 }) => {
   const { currentTime } = useLivePlayerContext();
   return /* @__PURE__ */ jsx(
@@ -9966,7 +11269,8 @@ const SeekControl = ({
       zoom,
       onSeek,
       timelineCount,
-      timelineTickConfigs
+      timelineTickConfigs,
+      onPlayheadUpdate
     }
   );
 };
@@ -10075,7 +11379,21 @@ const createLucideIcon = (iconName, iconNode) => {
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const __iconNode$b = [
+const __iconNode$e = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "22", x2: "18", y1: "12", y2: "12", key: "l9bcsi" }],
+  ["line", { x1: "6", x2: "2", y1: "12", y2: "12", key: "13hhkx" }],
+  ["line", { x1: "12", x2: "12", y1: "6", y2: "2", key: "10w3f3" }],
+  ["line", { x1: "12", x2: "12", y1: "22", y2: "18", key: "15g9kq" }]
+];
+const Crosshair = createLucideIcon("crosshair", __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$d = [
   ["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" }],
@@ -10083,81 +11401,103 @@ const __iconNode$b = [
   ["circle", { cx: "15", cy: "5", r: "1", key: "19l28e" }],
   ["circle", { cx: "15", cy: "19", r: "1", key: "f4zoj3" }]
 ];
-const GripVertical = createLucideIcon("grip-vertical", __iconNode$b);
+const GripVertical = createLucideIcon("grip-vertical", __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$a = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
-const LoaderCircle = createLucideIcon("loader-circle", __iconNode$a);
+const __iconNode$c = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]];
+const LoaderCircle = createLucideIcon("loader-circle", __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$9 = [
+const __iconNode$b = [
   ["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$9);
+const Lock = createLucideIcon("lock", __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$8 = [
+const __iconNode$a = [
   ["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$8);
+const Pause = createLucideIcon("pause", __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$7 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
-const Play = createLucideIcon("play", __iconNode$7);
+const __iconNode$9 = [["polygon", { points: "6 3 20 12 6 21 6 3", key: "1oa8hb" }]];
+const Play = createLucideIcon("play", __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$6 = [
+const __iconNode$8 = [
   ["path", { d: "M5 12h14", key: "1ays0h" }],
   ["path", { d: "M12 5v14", key: "s699le" }]
 ];
-const Plus = createLucideIcon("plus", __iconNode$6);
+const Plus = createLucideIcon("plus", __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$5 = [
+const __iconNode$7 = [
   ["path", { d: "m15 14 5-5-5-5", key: "12vg1m" }],
   ["path", { d: "M20 9H9.5A5.5 5.5 0 0 0 4 14.5A5.5 5.5 0 0 0 9.5 20H13", key: "6uklza" }]
 ];
-const Redo2 = createLucideIcon("redo-2", __iconNode$5);
+const Redo2 = createLucideIcon("redo-2", __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$4 = [
+const __iconNode$6 = [
   ["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$4);
+const Scissors = createLucideIcon("scissors", __iconNode$6);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$5 = [
+  ["polygon", { points: "19 20 9 12 19 4 19 20", key: "o2sva" }],
+  ["line", { x1: "5", x2: "5", y1: "19", y2: "5", key: "1ocqjk" }]
+];
+const SkipBack = createLucideIcon("skip-back", __iconNode$5);
+/**
+ * @license lucide-react v0.511.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const __iconNode$4 = [
+  ["polygon", { points: "5 4 15 12 5 20 5 4", key: "16p6eg" }],
+  ["line", { x1: "19", x2: "19", y1: "5", y2: "19", key: "futhcm" }]
+];
+const SkipForward = createLucideIcon("skip-forward", __iconNode$4);
 /**
  * @license lucide-react v0.511.0 - ISC
  *
@@ -10210,7 +11550,7 @@ const __iconNode = [
 const ZoomOut = createLucideIcon("zoom-out", __iconNode);
 const TrackHeader = ({
   track,
-  selectedItem,
+  selectedIds,
   onDragStart,
   onDragOver,
   onDrop,
@@ -10219,9 +11559,9 @@ const TrackHeader = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `twick-track-header ${selectedItem instanceof Track && selectedItem.getId() === track.getId() ? "twick-track-header-selected" : "twick-track-header-default"}`,
+      className: `twick-track-header ${selectedIds.has(track.getId()) ? "twick-track-header-selected" : "twick-track-header-default"}`,
       draggable: true,
-      onClick: () => onSelect(track),
+      onClick: (e3) => onSelect(track, e3),
       onDragStart: (e3) => onDragStart(e3, track),
       onDragOver,
       onDrop: (e3) => onDrop(e3, track),
@@ -17258,321 +18598,124 @@ class VisualElement {
     }
     const target = this.getBaseTargetFromProps(this.props, key);
     if (target !== void 0 && !isMotionValue(target))
-      return target;
-    return this.initialValues[key] !== void 0 && valueFromInitial === void 0 ? void 0 : this.baseTarget[key];
-  }
-  on(eventName, callback) {
-    if (!this.events[eventName]) {
-      this.events[eventName] = new SubscriptionManager();
-    }
-    return this.events[eventName].add(callback);
-  }
-  notify(eventName, ...args) {
-    if (this.events[eventName]) {
-      this.events[eventName].notify(...args);
-    }
-  }
-}
-class DOMVisualElement extends VisualElement {
-  constructor() {
-    super(...arguments);
-    this.KeyframeResolver = DOMKeyframesResolver;
-  }
-  sortInstanceNodePosition(a2, b2) {
-    return a2.compareDocumentPosition(b2) & 2 ? 1 : -1;
-  }
-  getBaseTargetFromProps(props, key) {
-    return props.style ? props.style[key] : void 0;
-  }
-  removeValueFromRenderState(key, { vars, style }) {
-    delete vars[key];
-    delete style[key];
-  }
-  handleChildMotionValue() {
-    if (this.childSubscription) {
-      this.childSubscription();
-      delete this.childSubscription;
-    }
-    const { children } = this.props;
-    if (isMotionValue(children)) {
-      this.childSubscription = children.on("change", (latest) => {
-        if (this.current) {
-          this.current.textContent = `${latest}`;
-        }
-      });
-    }
-  }
-}
-function getComputedStyle(element) {
-  return window.getComputedStyle(element);
-}
-class HTMLVisualElement extends DOMVisualElement {
-  constructor() {
-    super(...arguments);
-    this.type = "html";
-    this.renderInstance = renderHTML;
-  }
-  readValueFromInstance(instance, key) {
-    if (transformProps.has(key)) {
-      const defaultType = getDefaultValueType(key);
-      return defaultType ? defaultType.default || 0 : 0;
-    } else {
-      const computedStyle = getComputedStyle(instance);
-      const value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
-      return typeof value === "string" ? value.trim() : value;
-    }
-  }
-  measureInstanceViewportBox(instance, { transformPagePoint }) {
-    return measureViewportBox(instance, transformPagePoint);
-  }
-  build(renderState, latestValues, props) {
-    buildHTMLStyles(renderState, latestValues, props.transformTemplate);
-  }
-  scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-    return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
-  }
-}
-class SVGVisualElement extends DOMVisualElement {
-  constructor() {
-    super(...arguments);
-    this.type = "svg";
-    this.isSVGTag = false;
-    this.measureInstanceViewportBox = createBox;
+      return target;
+    return this.initialValues[key] !== void 0 && valueFromInitial === void 0 ? void 0 : this.baseTarget[key];
   }
-  getBaseTargetFromProps(props, key) {
-    return props[key];
+  on(eventName, callback) {
+    if (!this.events[eventName]) {
+      this.events[eventName] = new SubscriptionManager();
+    }
+    return this.events[eventName].add(callback);
   }
-  readValueFromInstance(instance, key) {
-    if (transformProps.has(key)) {
-      const defaultType = getDefaultValueType(key);
-      return defaultType ? defaultType.default || 0 : 0;
+  notify(eventName, ...args) {
+    if (this.events[eventName]) {
+      this.events[eventName].notify(...args);
     }
-    key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
-    return instance.getAttribute(key);
   }
-  scrapeMotionValuesFromProps(props, prevProps, visualElement) {
-    return scrapeMotionValuesFromProps(props, prevProps, visualElement);
+}
+class DOMVisualElement extends VisualElement {
+  constructor() {
+    super(...arguments);
+    this.KeyframeResolver = DOMKeyframesResolver;
   }
-  build(renderState, latestValues, props) {
-    buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
+  sortInstanceNodePosition(a2, b2) {
+    return a2.compareDocumentPosition(b2) & 2 ? 1 : -1;
   }
-  renderInstance(instance, renderState, styleProp, projection) {
-    renderSVG(instance, renderState, styleProp, projection);
+  getBaseTargetFromProps(props, key) {
+    return props.style ? props.style[key] : void 0;
   }
-  mount(instance) {
-    this.isSVGTag = isSVGTag(instance.tagName);
-    super.mount(instance);
+  removeValueFromRenderState(key, { vars, style }) {
+    delete vars[key];
+    delete style[key];
   }
-}
-const createDomVisualElement = (Component2, options) => {
-  return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
-    allowProjection: Component2 !== Fragment
-  });
-};
-const createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
-  ...animations,
-  ...gestureAnimations,
-  ...drag,
-  ...layout
-}, createDomVisualElement);
-const motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
-const INITIAL_TIMELINE_DATA = {
-  tracks: [
-    {
-      type: "element",
-      id: "t-sample",
-      name: "sample",
-      elements: [
-        {
-          id: "e-sample",
-          trackId: "t-sample",
-          name: "sample",
-          type: "text",
-          s: 0,
-          e: 5,
-          props: {
-            text: "Twick Video Editor",
-            fill: "#FFFFFF"
-          }
-        }
-      ]
+  handleChildMotionValue() {
+    if (this.childSubscription) {
+      this.childSubscription();
+      delete this.childSubscription;
     }
-  ],
-  version: 1
-};
-const MIN_DURATION = 0.1;
-const DRAG_TYPE = {
-  /** Drag operation is starting */
-  START: "start",
-  /** Drag operation is in progress */
-  MOVE: "move",
-  /** Drag operation has ended */
-  END: "end"
-};
-const DEFAULT_TIMELINE_ZOOM = 1.5;
-const DEFAULT_TIMELINE_ZOOM_CONFIG = {
-  /** Minimum zoom level (10%) */
-  min: 0.1,
-  /** Maximum zoom level (300%) */
-  max: 3,
-  /** Zoom step increment/decrement (10%) */
-  step: 0.1,
-  /** Default zoom level (150%) */
-  default: 1.5
-};
-const DEFAULT_TIMELINE_TICK_CONFIGS = [
-  {
-    durationThreshold: 10,
-    // < 10 seconds
-    majorInterval: 1,
-    // 1s major ticks
-    minorTicks: 10
-    // 0.1s minor ticks (10 minors between majors)
-  },
-  {
-    durationThreshold: 30,
-    // < 30 seconds
-    majorInterval: 5,
-    // 5s major ticks
-    minorTicks: 5
-    // 1s minor ticks (5 minors between majors)
-  },
-  {
-    durationThreshold: 120,
-    // < 2 minutes
-    majorInterval: 10,
-    // 10s major ticks
-    minorTicks: 5
-    // 2s minor ticks (5 minors between majors)
-  },
-  {
-    durationThreshold: 300,
-    // < 5 minutes
-    majorInterval: 30,
-    // 30s major ticks
-    minorTicks: 6
-    // 5s minor ticks (6 minors between majors)
-  },
-  {
-    durationThreshold: 900,
-    // < 15 minutes
-    majorInterval: 60,
-    // 1m major ticks
-    minorTicks: 6
-    // 10s minor ticks (6 minors between majors)
-  },
-  {
-    durationThreshold: 1800,
-    // < 30 minutes
-    majorInterval: 120,
-    // 2m major ticks
-    minorTicks: 4
-    // 30s minor ticks (4 minors between majors)
-  },
-  {
-    durationThreshold: 3600,
-    // < 1 hour
-    majorInterval: 300,
-    // 5m major ticks
-    minorTicks: 5
-    // 1m minor ticks (5 minors between majors)
-  },
-  {
-    durationThreshold: 7200,
-    // < 2 hours
-    majorInterval: 600,
-    // 10m major ticks
-    minorTicks: 10
-    // 1m minor ticks (10 minors between majors)
-  },
-  {
-    durationThreshold: Infinity,
-    // >= 2 hours
-    majorInterval: 1800,
-    // 30m major ticks
-    minorTicks: 6
-    // 5m minor ticks (6 minors between majors)
-  }
-];
-const DEFAULT_ELEMENT_COLORS = {
-  /** 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
-  /** Modern sans-serif font */
-  RUBIK: "Rubik",
-  /** Clean and readable font */
-  MULISH: "Mulish",
-  /** Bold display font */
-  LUCKIEST_GUY: "Luckiest Guy",
-  /** Elegant serif font */
-  PLAYFAIR_DISPLAY: "Playfair Display",
-  /** Classic sans-serif font */
-  ROBOTO: "Roboto",
-  /** Modern geometric font */
-  POPPINS: "Poppins",
-  // Display and Decorative Fonts
-  /** Comic-style display font */
-  BANGERS: "Bangers",
-  /** Handwritten-style font */
-  BIRTHSTONE: "Birthstone",
-  /** Elegant script font */
-  CORINTHIA: "Corinthia",
-  /** Formal script font */
-  IMPERIAL_SCRIPT: "Imperial Script",
-  /** Bold outline font */
-  KUMAR_ONE_OUTLINE: "Kumar One Outline",
-  /** Light outline font */
-  LONDRI_OUTLINE: "Londrina Outline",
-  /** Casual script font */
-  MARCK_SCRIPT: "Marck Script",
-  /** Modern sans-serif font */
-  MONTSERRAT: "Montserrat",
-  /** Stylish display font */
-  PATTAYA: "Pattaya",
-  // CDN Fonts
-  /** Unique display font */
-  PERALTA: "Peralta",
-  /** Bold impact font */
-  IMPACT: "Impact",
-  /** Handwritten-style font */
-  LUMANOSIMO: "Lumanosimo",
-  /** Custom display font */
-  KAPAKANA: "Kapakana",
-  /** Handwritten font */
-  HANDYRUSH: "HandyRush",
-  /** Decorative font */
-  DASHER: "Dasher",
-  /** Signature-style font */
-  BRITTANY_SIGNATURE: "Brittany Signature"
+    const { children } = this.props;
+    if (isMotionValue(children)) {
+      this.childSubscription = children.on("change", (latest) => {
+        if (this.current) {
+          this.current.textContent = `${latest}`;
+        }
+      });
+    }
+  }
+}
+function getComputedStyle(element) {
+  return window.getComputedStyle(element);
+}
+class HTMLVisualElement extends DOMVisualElement {
+  constructor() {
+    super(...arguments);
+    this.type = "html";
+    this.renderInstance = renderHTML;
+  }
+  readValueFromInstance(instance, key) {
+    if (transformProps.has(key)) {
+      const defaultType = getDefaultValueType(key);
+      return defaultType ? defaultType.default || 0 : 0;
+    } else {
+      const computedStyle = getComputedStyle(instance);
+      const value = (isCSSVariableName(key) ? computedStyle.getPropertyValue(key) : computedStyle[key]) || 0;
+      return typeof value === "string" ? value.trim() : value;
+    }
+  }
+  measureInstanceViewportBox(instance, { transformPagePoint }) {
+    return measureViewportBox(instance, transformPagePoint);
+  }
+  build(renderState, latestValues, props) {
+    buildHTMLStyles(renderState, latestValues, props.transformTemplate);
+  }
+  scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+    return scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
+  }
+}
+class SVGVisualElement extends DOMVisualElement {
+  constructor() {
+    super(...arguments);
+    this.type = "svg";
+    this.isSVGTag = false;
+    this.measureInstanceViewportBox = createBox;
+  }
+  getBaseTargetFromProps(props, key) {
+    return props[key];
+  }
+  readValueFromInstance(instance, key) {
+    if (transformProps.has(key)) {
+      const defaultType = getDefaultValueType(key);
+      return defaultType ? defaultType.default || 0 : 0;
+    }
+    key = !camelCaseAttributes.has(key) ? camelToDash(key) : key;
+    return instance.getAttribute(key);
+  }
+  scrapeMotionValuesFromProps(props, prevProps, visualElement) {
+    return scrapeMotionValuesFromProps(props, prevProps, visualElement);
+  }
+  build(renderState, latestValues, props) {
+    buildSVGAttrs(renderState, latestValues, this.isSVGTag, props.transformTemplate);
+  }
+  renderInstance(instance, renderState, styleProp, projection) {
+    renderSVG(instance, renderState, styleProp, projection);
+  }
+  mount(instance) {
+    this.isSVGTag = isSVGTag(instance.tagName);
+    super.mount(instance);
+  }
+}
+const createDomVisualElement = (Component2, options) => {
+  return isSVGComponent(Component2) ? new SVGVisualElement(options) : new HTMLVisualElement(options, {
+    allowProjection: Component2 !== Fragment
+  });
 };
+const createMotionComponent = /* @__PURE__ */ createMotionComponentFactory({
+  ...animations,
+  ...gestureAnimations,
+  ...drag,
+  ...layout
+}, createDomVisualElement);
+const motion = /* @__PURE__ */ createDOMMotionComponentProxy(createMotionComponent);
 let ELEMENT_COLORS = { ...DEFAULT_ELEMENT_COLORS };
 const setElementColors = (colors) => {
   ELEMENT_COLORS = {
@@ -17587,6 +18730,7 @@ const TrackElementView = ({
   nextStart,
   prevEnd,
   selectedItem,
+  selectedIds,
   onSelection,
   onDrag,
   allowOverlap = false,
@@ -17613,8 +18757,8 @@ const TrackElementView = ({
     dragType.current = DRAG_TYPE.MOVE;
     setPosition((prev) => {
       const span = prev.end - prev.start;
-      let newStart = Math.max(0, prev.start + dx / parentWidth * duration);
-      newStart = Math.min(newStart, prev.end - MIN_DURATION);
+      let newStart = prev.start + dx / parentWidth * duration;
+      newStart = Math.max(0, Math.min(newStart, prev.end - MIN_DURATION));
       if (!allowOverlap) {
         if (prevEnd !== null && newStart < prevEnd) {
           newStart = prevEnd;
@@ -17638,8 +18782,8 @@ const TrackElementView = ({
     }
     dragType.current = DRAG_TYPE.START;
     setPosition((prev) => {
-      let newStart = Math.max(0, prev.start + dx / parentWidth * duration);
-      newStart = Math.min(newStart, prev.end - MIN_DURATION);
+      let newStart = prev.start + dx / parentWidth * duration;
+      newStart = Math.max(0, Math.min(newStart, prev.end - MIN_DURATION));
       if (prevEnd !== null && !allowOverlap && newStart < prevEnd) {
         newStart = prevEnd;
       }
@@ -17697,8 +18841,9 @@ const TrackElementView = ({
     return ELEMENT_COLORS.element;
   };
   const isSelected = useMemo(() => {
-    return (selectedItem == null ? void 0 : selectedItem.getId()) === element.getId();
-  }, [selectedItem, element]);
+    return selectedIds.has(element.getId());
+  }, [selectedIds, element]);
+  const hasHandles = (selectedItem == null ? void 0 : selectedItem.getId()) === element.getId();
   const motionProps = {
     ref,
     className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""}`,
@@ -17714,9 +18859,9 @@ const TrackElementView = ({
     },
     onMouseUp: sendUpdate,
     onTouchEnd: sendUpdate,
-    onClick: () => {
+    onClick: (e3) => {
       if (onSelection) {
-        onSelection(element);
+        onSelection(element, e3);
       }
     },
     style: {
@@ -17727,7 +18872,7 @@ const TrackElementView = ({
     }
   };
   return /* @__PURE__ */ jsx(motion.div, { ...motionProps, children: /* @__PURE__ */ jsxs("div", { style: { touchAction: "none", height: "100%" }, ...bind(), children: [
-    isSelected ? /* @__PURE__ */ jsx(
+    hasHandles ? /* @__PURE__ */ jsx(
       "div",
       {
         style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
@@ -17736,7 +18881,7 @@ const TrackElementView = ({
       }
     ) : null,
     /* @__PURE__ */ jsx("div", { className: "twick-track-element-content", children: element.getText ? element.getText() : element.getName() || element.getType() }),
-    isSelected ? /* @__PURE__ */ jsx(
+    hasHandles ? /* @__PURE__ */ jsx(
       "div",
       {
         style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
@@ -17766,6 +18911,7 @@ const TrackBase = ({
   track,
   trackWidth,
   selectedItem,
+  selectedIds,
   onItemSelection,
   onDrag,
   allowOverlap = false,
@@ -17790,6 +18936,7 @@ const TrackBase = ({
           allowOverlap,
           parentWidth: trackWidth,
           selectedItem,
+          selectedIds,
           onSelection: onItemSelection,
           onDrag,
           elementColors,
@@ -17801,6 +18948,199 @@ const TrackBase = ({
     }
   );
 };
+const DEFAULT_MARGIN = 80;
+function usePlayheadScroll(scrollContainerRef, playheadPositionPx, isActive, config) {
+  const margin = (config == null ? void 0 : config.margin) ?? DEFAULT_MARGIN;
+  const labelWidth = config == null ? void 0 : config.labelWidth;
+  const rafRef = useRef(null);
+  useEffect(() => {
+    if (!isActive || !scrollContainerRef.current) return;
+    const container = scrollContainerRef.current;
+    const contentX = labelWidth + playheadPositionPx;
+    const scrollToKeepPlayheadVisible = () => {
+      const { scrollLeft, clientWidth } = container;
+      const minVisible = scrollLeft + margin;
+      const maxVisible = scrollLeft + clientWidth - margin;
+      let newScrollLeft = null;
+      if (contentX < minVisible) {
+        newScrollLeft = Math.max(0, contentX - margin);
+      } else if (contentX > maxVisible) {
+        newScrollLeft = contentX - clientWidth + margin;
+      }
+      if (newScrollLeft !== null) {
+        container.scrollLeft = newScrollLeft;
+      }
+    };
+    const scheduleScroll = () => {
+      if (rafRef.current !== null) cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        rafRef.current = null;
+        scrollToKeepPlayheadVisible();
+      });
+    };
+    scheduleScroll();
+    return () => {
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
+      }
+    };
+  }, [
+    isActive,
+    playheadPositionPx,
+    scrollContainerRef,
+    margin,
+    labelWidth
+  ]);
+}
+const MARQUEE_THRESHOLD = 4;
+function useMarqueeSelection({
+  duration,
+  zoomLevel,
+  labelWidth,
+  trackCount,
+  trackHeight,
+  tracks,
+  containerRef,
+  onMarqueeSelect,
+  onEmptyClick
+}) {
+  const [marquee, setMarquee] = useState(null);
+  const startPosRef = useRef(null);
+  const hasDraggedRef = useRef(false);
+  const marqueeRef = useRef(marquee);
+  marqueeRef.current = marquee;
+  const pixelsPerSecond = 100 * zoomLevel;
+  const getCoords = useCallback(
+    (e3) => {
+      var _a, _b;
+      const rect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      if (!rect) return { x: 0, y: 0 };
+      return {
+        x: e3.clientX - rect.left + (((_b = containerRef.current) == null ? void 0 : _b.scrollLeft) ?? 0),
+        y: e3.clientY - rect.top
+      };
+    },
+    [containerRef]
+  );
+  const handleGlobalMouseMove = useCallback(
+    (e3) => {
+      if (!startPosRef.current) return;
+      const { x: x2, y: y2 } = getCoords(e3);
+      const dx = Math.abs(x2 - startPosRef.current.x);
+      const dy = Math.abs(y2 - startPosRef.current.y);
+      if (dx > MARQUEE_THRESHOLD || dy > MARQUEE_THRESHOLD) {
+        hasDraggedRef.current = true;
+      }
+      setMarquee((prev) => prev ? { ...prev, endX: x2, endY: y2 } : null);
+    },
+    [getCoords]
+  );
+  const handleGlobalMouseUp = useCallback(() => {
+    if (!startPosRef.current) return;
+    const currentMarquee = marqueeRef.current;
+    if (!hasDraggedRef.current || !currentMarquee) {
+      setMarquee(null);
+      startPosRef.current = null;
+      onEmptyClick();
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+      return;
+    }
+    const left = Math.min(currentMarquee.startX, currentMarquee.endX);
+    const right = Math.max(currentMarquee.startX, currentMarquee.endX);
+    const top = Math.min(currentMarquee.startY, currentMarquee.endY);
+    const bottom = Math.max(currentMarquee.startY, currentMarquee.endY);
+    const startTime = Math.max(0, (left - labelWidth) / pixelsPerSecond);
+    const endTime = Math.min(duration, (right - labelWidth) / pixelsPerSecond);
+    const rowHeight = trackHeight + 2;
+    const startTrackIdx = Math.max(0, Math.floor(top / rowHeight));
+    const endTrackIdx = Math.min(
+      trackCount - 1,
+      Math.floor(bottom / rowHeight)
+    );
+    const selectedIds = /* @__PURE__ */ new Set();
+    for (let tIdx = startTrackIdx; tIdx <= endTrackIdx; tIdx++) {
+      const track = tracks[tIdx];
+      if (!track) continue;
+      for (const el of track.getElements()) {
+        const elStart = el.getStart();
+        const elEnd = el.getEnd();
+        if (elStart < endTime && elEnd > startTime) {
+          selectedIds.add(el.getId());
+        }
+      }
+    }
+    onMarqueeSelect(selectedIds);
+    setMarquee(null);
+    startPosRef.current = null;
+    window.removeEventListener("mousemove", handleGlobalMouseMove);
+    window.removeEventListener("mouseup", handleGlobalMouseUp);
+  }, [
+    duration,
+    pixelsPerSecond,
+    labelWidth,
+    trackCount,
+    trackHeight,
+    tracks,
+    onMarqueeSelect,
+    onEmptyClick,
+    handleGlobalMouseMove
+  ]);
+  useEffect(() => {
+    if (!marquee) return;
+    window.addEventListener("mousemove", handleGlobalMouseMove);
+    window.addEventListener("mouseup", handleGlobalMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleGlobalMouseMove);
+      window.removeEventListener("mouseup", handleGlobalMouseUp);
+    };
+  }, [marquee, handleGlobalMouseMove, handleGlobalMouseUp]);
+  const handleMouseDown = useCallback(
+    (e3) => {
+      if (e3.target.closest(".twick-track-element") || e3.target.closest(".twick-track-header")) {
+        return;
+      }
+      const { x: x2, y: y2 } = getCoords(e3.nativeEvent);
+      startPosRef.current = { x: x2, y: y2 };
+      hasDraggedRef.current = false;
+      setMarquee({ startX: x2, startY: y2, endX: x2, endY: y2 });
+    },
+    [getCoords]
+  );
+  return { marquee, handleMouseDown };
+}
+function MarqueeOverlay({ marquee }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "twick-marquee-overlay",
+      style: {
+        position: "absolute",
+        inset: 0,
+        zIndex: 25,
+        pointerEvents: "none"
+      },
+      children: marquee && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "twick-marquee-rect",
+          style: {
+            position: "absolute",
+            left: Math.min(marquee.startX, marquee.endX),
+            top: Math.min(marquee.startY, marquee.endY),
+            width: Math.abs(marquee.endX - marquee.startX),
+            height: Math.abs(marquee.endY - marquee.startY),
+            border: "1px solid rgba(255, 255, 255, 0.7)",
+            backgroundColor: "rgba(255, 255, 255, 0.1)",
+            pointerEvents: "none"
+          }
+        }
+      )
+    }
+  );
+}
+const LABEL_WIDTH = 40;
+const TRACK_HEIGHT = 44;
 function TimelineView({
   zoomLevel,
   selectedItem,
@@ -17809,20 +19149,28 @@ function TimelineView({
   seekTrack,
   onAddTrack,
   onReorder,
-  onSelectionChange,
+  onItemSelect,
+  onEmptyClick,
+  onMarqueeSelect,
   onElementDrag,
-  elementColors
+  elementColors,
+  selectedIds,
+  playheadPositionPx = 0,
+  isPlayheadActive = false,
+  onDropOnTimeline,
+  videoResolution,
+  enableDropOnTimeline = true
 }) {
   const containerRef = useRef(null);
   const seekContainerRef = useRef(null);
   const timelineContentRef = useRef(null);
   const [, setScrollLeft] = useState(0);
   const [draggedTimeline, setDraggedTimeline] = useState(null);
-  const { selectedTrack, selectedTrackElement } = useMemo(() => {
+  const { selectedTrackElement } = useMemo(() => {
     if (selectedItem && "elements" in selectedItem) {
-      return { selectedTrack: selectedItem, selectedTrackElement: null };
+      return { selectedTrackElement: null };
     }
-    return { selectedTrack: null, selectedTrackElement: selectedItem };
+    return { selectedTrackElement: selectedItem };
   }, [selectedItem]);
   const timelineWidth = Math.max(100, duration * zoomLevel * 100);
   const timelineWidthPx = `${timelineWidth}px`;
@@ -17852,7 +19200,33 @@ function TimelineView({
       window.removeEventListener("resize", updateWidth);
     };
   }, [duration, zoomLevel]);
-  const labelWidth = 140;
+  usePlayheadScroll(containerRef, playheadPositionPx, isPlayheadActive, {
+    labelWidth: LABEL_WIDTH
+  });
+  const { marquee, handleMouseDown: handleMarqueeMouseDown } = useMarqueeSelection({
+    duration,
+    zoomLevel,
+    labelWidth: LABEL_WIDTH,
+    trackCount: (tracks == null ? void 0 : tracks.length) ?? 0,
+    trackHeight: TRACK_HEIGHT,
+    tracks: tracks ?? [],
+    containerRef: timelineContentRef,
+    onMarqueeSelect,
+    onEmptyClick
+  });
+  const { preview, handleDragOver, handleDragLeave, handleDrop } = useTimelineDrop({
+    containerRef: timelineContentRef,
+    scrollContainerRef: containerRef,
+    tracks: tracks ?? [],
+    duration,
+    zoomLevel,
+    labelWidth: LABEL_WIDTH,
+    trackHeight: TRACK_HEIGHT,
+    trackContentWidth: timelineWidth - LABEL_WIDTH,
+    onDrop: onDropOnTimeline ?? (async () => {
+    }),
+    enabled: enableDropOnTimeline && !!onDropOnTimeline && !!videoResolution
+  });
   const handleTrackDragStart = (e3, track) => {
     setDraggedTimeline(track);
     e3.dataTransfer.setData("application/json", JSON.stringify(track));
@@ -17884,10 +19258,8 @@ function TimelineView({
     }
     setDraggedTimeline(null);
   };
-  const handleItemSelection = (element) => {
-    if (onSelectionChange) {
-      onSelectionChange(element);
-    }
+  const handleItemSelection = (item, event) => {
+    onItemSelect(item, event);
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -17900,46 +19272,108 @@ function TimelineView({
           /* @__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 })
         ] }) : null }),
-        /* @__PURE__ */ jsx("div", { ref: timelineContentRef, style: { width: timelineWidthPx }, 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,
-              selectedItem: selectedTrack,
-              onSelect: handleItemSelection,
-              onDragStart: handleTrackDragStart,
-              onDragOver: handleTrackDragOver,
-              onDrop: handleTrackDrop
-            }
-          ) }),
-          /* @__PURE__ */ jsx(
-            TrackBase,
-            {
-              track,
-              duration,
-              selectedItem: selectedTrackElement,
-              zoom: zoomLevel,
-              allowOverlap: false,
-              trackWidth: timelineWidth - labelWidth,
-              onItemSelection: handleItemSelection,
-              onDrag: onElementDrag,
-              elementColors
-            }
-          )
-        ] }, track.getId())) })
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: timelineContentRef,
+            style: { width: timelineWidthPx, position: "relative" },
+            onMouseDown: handleMarqueeMouseDown,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave,
+            onDrop: handleDrop,
+            children: [
+              /* @__PURE__ */ jsx(MarqueeOverlay, { marquee }),
+              preview && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "twick-drop-preview",
+                  style: {
+                    position: "absolute",
+                    left: LABEL_WIDTH + preview.timeSec / duration * (timelineWidth - LABEL_WIDTH),
+                    top: preview.trackIndex * TRACK_HEIGHT + 2,
+                    width: preview.widthPct / 100 * (timelineWidth - LABEL_WIDTH),
+                    height: TRACK_HEIGHT - 4
+                  }
+                }
+              ),
+              /* @__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__ */ jsx(
+                  TrackBase,
+                  {
+                    track,
+                    duration,
+                    selectedItem: selectedTrackElement,
+                    selectedIds,
+                    zoom: zoomLevel,
+                    allowOverlap: false,
+                    trackWidth: timelineWidth - LABEL_WIDTH,
+                    onItemSelection: handleItemSelection,
+                    onDrag: onElementDrag,
+                    elementColors
+                  }
+                )
+              ] }, track.getId())) })
+            ]
+          }
+        )
       ]
     }
   );
 }
 const useTimelineManager = () => {
-  const { selectedItem, changeLog, setSelectedItem, totalDuration, editor } = useTimelineContext();
+  const { selectedItem, changeLog, setSelectedItem, totalDuration, editor, selectedIds } = useTimelineContext();
   const onElementDrag = ({
     element,
     dragType,
     updates
   }) => {
+    var _a;
+    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+    const duration = totalDuration;
+    if (dragType === DRAG_TYPE.MOVE && selectedIds.has(element.getId()) && selectedIds.size > 1) {
+      const resolved = resolveIds(selectedIds, tracks);
+      const elements = resolved.filter((item) => item instanceof TrackElement);
+      if (elements.length > 1) {
+        const minStart = Math.min(...elements.map((el) => el.getStart()));
+        const maxEnd = Math.max(...elements.map((el) => el.getEnd()));
+        const delta = updates.start - element.getStart();
+        const deltaMin = -minStart;
+        const deltaMax = duration - maxEnd;
+        const clampedDelta = Math.max(deltaMin, Math.min(deltaMax, delta));
+        for (const el of elements) {
+          const newStart = el.getStart() + clampedDelta;
+          const newEnd = el.getEnd() + clampedDelta;
+          if (el instanceof VideoElement$1 || el instanceof AudioElement) {
+            const elementProps = el.getProps();
+            const startDelta = newStart - el.getStart() * ((elementProps == null ? void 0 : elementProps.playbackRate) || 1);
+            if (el instanceof AudioElement) {
+              el.setStartAt(el.getStartAt() + startDelta);
+            } else {
+              el.setStartAt(el.getStartAt() + startDelta);
+            }
+          }
+          el.setStart(newStart);
+          el.setEnd(newEnd);
+          editor.updateElement(el);
+        }
+        setSelectedItem(element);
+        editor.refresh();
+        return;
+      }
+    }
     if (dragType === DRAG_TYPE.START) {
-      if (element instanceof VideoElement || element instanceof AudioElement) {
+      if (element instanceof VideoElement$1 || element instanceof AudioElement) {
         const elementProps = element.getProps();
         const delta = updates.start - element.getStart() * ((elementProps == null ? void 0 : elementProps.playbackRate) || 1);
         if (element instanceof AudioElement) {
@@ -17984,13 +19418,135 @@ const useTimelineManager = () => {
     totalDuration
   };
 };
+function useTimelineSelection() {
+  const { editor, selectedIds, setSelection, setSelectedItem } = useTimelineContext();
+  const handleItemSelect = useCallback(
+    (item, event) => {
+      var _a;
+      const id2 = item.getId();
+      const isMulti = event.metaKey || event.ctrlKey;
+      const isRange = event.shiftKey;
+      const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+      if (isMulti) {
+        setSelection((prev) => {
+          const next = new Set(prev);
+          if (next.has(id2)) {
+            next.delete(id2);
+          } else {
+            next.add(id2);
+          }
+          return next;
+        });
+        return;
+      }
+      if (isRange) {
+        const primaryId = selectedIds.size > 0 ? [...selectedIds][0] : null;
+        if (!primaryId) {
+          setSelectedItem(item);
+          return;
+        }
+        const primary = resolveId(primaryId, tracks);
+        if (!primary) {
+          setSelectedItem(item);
+          return;
+        }
+        if (item instanceof Track && primary instanceof Track) {
+          const trackIds = tracks.map((t2) => t2.getId());
+          const fromIdx = trackIds.indexOf(primary.getId());
+          const toIdx = trackIds.indexOf(item.getId());
+          if (fromIdx !== -1 && toIdx !== -1) {
+            const [start, end] = fromIdx <= toIdx ? [fromIdx, toIdx] : [toIdx, fromIdx];
+            const rangeIds = new Set(
+              trackIds.slice(start, end + 1)
+            );
+            setSelection((prev) => /* @__PURE__ */ new Set([...prev, ...rangeIds]));
+            return;
+          }
+        }
+        if (item instanceof TrackElement && primary instanceof TrackElement) {
+          const track = editor.getTrackById(item.getTrackId());
+          const primaryTrack = editor.getTrackById(primary.getTrackId());
+          if (track && primaryTrack && track.getId() === primaryTrack.getId()) {
+            const rangeIds = getElementIdsInRange(
+              track,
+              primary.getId(),
+              item.getId()
+            );
+            setSelection((prev) => /* @__PURE__ */ new Set([...prev, ...rangeIds]));
+            return;
+          }
+        }
+      }
+      setSelectedItem(item);
+    },
+    [editor, selectedIds, setSelection, setSelectedItem]
+  );
+  const handleEmptyClick = useCallback(() => {
+    setSelectedItem(null);
+  }, [setSelectedItem]);
+  const handleMarqueeSelect = useCallback(
+    (ids) => {
+      setSelection(ids);
+    },
+    [setSelection]
+  );
+  return { handleItemSelect, handleEmptyClick, handleMarqueeSelect };
+}
 const TimelineManager = ({
   trackZoom,
   timelineTickConfigs,
   elementColors
 }) => {
   var _a;
-  const { timelineData, totalDuration, selectedItem, onAddTrack, onReorder, onElementDrag, onSeek, onSelectionChange } = useTimelineManager();
+  const { playerState } = useLivePlayerContext();
+  const { followPlayheadEnabled, editor, videoResolution, setSelectedItem } = useTimelineContext();
+  const {
+    timelineData,
+    totalDuration,
+    selectedItem,
+    onAddTrack,
+    onReorder,
+    onElementDrag,
+    onSeek
+  } = useTimelineManager();
+  const { selectedIds } = useTimelineContext();
+  const { handleItemSelect, handleEmptyClick, handleMarqueeSelect } = useTimelineSelection();
+  const [playheadState, setPlayheadState] = useState({
+    positionPx: 0,
+    isDragging: false
+  });
+  const handlePlayheadUpdate = useCallback((state) => {
+    setPlayheadState(state);
+  }, []);
+  const isPlayheadActive = followPlayheadEnabled && playerState === PLAYER_STATE.PLAYING || playheadState.isDragging;
+  const handleDropOnTimeline = useCallback(
+    async (params) => {
+      const { track, timeSec, type, url } = params;
+      const element = createElementFromDrop(type, url, videoResolution);
+      element.setStart(timeSec);
+      const targetTrack = track ?? editor.addTrack(`Track_${Date.now()}`);
+      const tryAdd = async (t2) => {
+        var _a2;
+        try {
+          const result = await editor.addElementToTrack(t2, element);
+          if (result) {
+            setSelectedItem(element);
+            return true;
+          }
+        } catch (err) {
+          if (err instanceof ValidationError && ((_a2 = err.errors) == null ? void 0 : _a2.includes(VALIDATION_ERROR_CODE.COLLISION_ERROR))) {
+            const newTrack = editor.addTrack(`Track_${Date.now()}`);
+            return tryAdd(newTrack);
+          }
+          throw err;
+        }
+        return false;
+      };
+      await tryAdd(targetTrack);
+      editor.refresh();
+    },
+    [editor, videoResolution, setSelectedItem]
+  );
   return /* @__PURE__ */ jsx(
     TimelineView,
     {
@@ -17998,14 +19554,22 @@ const TimelineManager = ({
       zoomLevel: trackZoom,
       duration: totalDuration,
       selectedItem,
+      selectedIds,
       onDeletion: () => {
       },
       onAddTrack,
       onReorder,
       onElementDrag,
       onSeek,
-      onSelectionChange,
+      onItemSelect: handleItemSelect,
+      onEmptyClick: handleEmptyClick,
+      onMarqueeSelect: handleMarqueeSelect,
       elementColors,
+      playheadPositionPx: playheadState.positionPx,
+      isPlayheadActive,
+      onDropOnTimeline: handleDropOnTimeline,
+      videoResolution,
+      enableDropOnTimeline: true,
       seekTrack: /* @__PURE__ */ jsx(
         SeekControl,
         {
@@ -18013,7 +19577,8 @@ const TimelineManager = ({
           zoom: trackZoom,
           onSeek,
           timelineCount: ((_a = timelineData == null ? void 0 : timelineData.tracks) == null ? void 0 : _a.length) ?? 0,
-          timelineTickConfigs
+          timelineTickConfigs,
+          onPlayheadUpdate: handlePlayheadUpdate
         }
       )
     }
@@ -18043,6 +19608,7 @@ const UndoRedoControls = ({ canUndo, canRedo, onUndo, onRedo }) => {
 };
 const PlayerControls = ({
   selectedItem,
+  selectedIds = /* @__PURE__ */ new Set(),
   duration,
   currentTime,
   playerState,
@@ -18056,21 +19622,31 @@ const PlayerControls = ({
   zoomLevel = 1,
   setZoomLevel,
   className = "",
-  zoomConfig = DEFAULT_TIMELINE_ZOOM_CONFIG
+  zoomConfig = DEFAULT_TIMELINE_ZOOM_CONFIG,
+  fps = DEFAULT_FPS,
+  onSeek,
+  followPlayheadEnabled = true,
+  onFollowPlayheadToggle
 }) => {
   const MAX_ZOOM = zoomConfig.max;
   const MIN_ZOOM = zoomConfig.min;
   const ZOOM_STEP = zoomConfig.step;
-  const formatTime = useCallback((time2) => {
-    const minutes = Math.floor(time2 / 60);
-    const seconds = Math.floor(time2 % 60);
-    return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-  }, []);
+  const formatTime = useCallback(
+    (time2) => formatTimeWithFrames(time2, fps),
+    [fps]
+  );
+  const handleSeekToStart = useCallback(() => {
+    onSeek == null ? void 0 : onSeek(0);
+  }, [onSeek]);
+  const handleSeekToEnd = useCallback(() => {
+    onSeek == null ? void 0 : onSeek(duration);
+  }, [onSeek, duration]);
   const handleDelete = useCallback(() => {
-    if (selectedItem && onDelete) {
-      onDelete(selectedItem);
+    if (selectedIds.size > 0 && onDelete) {
+      onDelete();
     }
-  }, [selectedItem, onDelete]);
+  }, [selectedIds.size, onDelete]);
+  const hasSelection = selectedIds.size > 0;
   const handleSplit = useCallback(() => {
     if (selectedItem instanceof TrackElement && onSplit) {
       onSplit(selectedItem, currentTime);
@@ -18092,9 +19668,9 @@ const PlayerControls = ({
         "button",
         {
           onClick: handleDelete,
-          disabled: !selectedItem,
+          disabled: !hasSelection,
           title: "Delete",
-          className: `control-btn delete-btn ${!selectedItem ? "btn-disabled" : ""}`,
+          className: `control-btn delete-btn ${!hasSelection ? "btn-disabled" : ""}`,
           children: /* @__PURE__ */ jsx(Trash2, { className: "icon-md" })
         }
       ),
@@ -18119,6 +19695,25 @@ const PlayerControls = ({
       )
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "playback-controls", children: [
+      onFollowPlayheadToggle && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onFollowPlayheadToggle,
+          title: followPlayheadEnabled ? "Follow playhead on (click to disable)" : "Follow playhead off (click to enable)",
+          className: `control-btn ${followPlayheadEnabled ? "follow-btn-active" : ""}`,
+          children: /* @__PURE__ */ jsx(Crosshair, { className: "icon-md" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSeekToStart,
+          disabled: playerState === PLAYER_STATE.REFRESH,
+          title: "Jump to start",
+          className: "control-btn",
+          children: /* @__PURE__ */ jsx(SkipBack, { className: "icon-md" })
+        }
+      ),
       /* @__PURE__ */ jsx(
         "button",
         {
@@ -18129,6 +19724,16 @@ const PlayerControls = ({
           children: playerState === PLAYER_STATE.PLAYING ? /* @__PURE__ */ jsx(Pause, { className: "icon-lg" }) : playerState === PLAYER_STATE.REFRESH ? /* @__PURE__ */ jsx(LoaderCircle, { className: "icon-lg animate-spin" }) : /* @__PURE__ */ jsx(Play, { className: "icon-lg" })
         }
       ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleSeekToEnd,
+          disabled: playerState === PLAYER_STATE.REFRESH,
+          title: "Jump to end",
+          className: "control-btn",
+          children: /* @__PURE__ */ jsx(SkipForward, { className: "icon-md" })
+        }
+      ),
       /* @__PURE__ */ jsxs("div", { className: "time-display", children: [
         /* @__PURE__ */ jsx("span", { className: "current-time", children: formatTime(currentTime) }),
         /* @__PURE__ */ jsx("span", { className: "time-separator", children: "/" }),
@@ -18190,12 +19795,17 @@ const usePlayerControl = () => {
   };
 };
 const useTimelineControl = () => {
-  const { editor, setSelectedItem } = useTimelineContext();
+  const { editor, setSelectedItem, selectedIds } = useTimelineContext();
   const deleteItem = (item) => {
-    if (item instanceof Track) {
-      editor.removeTrack(item);
-    } else if (item instanceof TrackElement) {
-      editor.removeElement(item);
+    var _a;
+    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+    const toDelete = item !== void 0 ? [item] : resolveIds(selectedIds, tracks);
+    for (const el of toDelete) {
+      if (el instanceof Track) {
+        editor.removeTrack(el);
+      } else if (el instanceof TrackElement) {
+        editor.removeElement(el);
+      }
     }
     setSelectedItem(null);
   };
@@ -18215,32 +19825,97 @@ const useTimelineControl = () => {
     handleRedo
   };
 };
+function shouldIgnoreKeydown() {
+  const active = document.activeElement;
+  if (!active) return false;
+  const tag = active.tagName.toLowerCase();
+  if (tag === "input" || tag === "textarea") return true;
+  if (active.isContentEditable) return true;
+  return false;
+}
+function useCanvasKeyboard({
+  onDelete,
+  onUndo,
+  onRedo,
+  enabled = true
+}) {
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (e3) => {
+      if (shouldIgnoreKeydown()) return;
+      const key = e3.key.toLowerCase();
+      const hasPrimaryModifier = e3.metaKey || e3.ctrlKey;
+      if (hasPrimaryModifier) {
+        if (key === "z" && !e3.shiftKey) {
+          e3.preventDefault();
+          onUndo == null ? void 0 : onUndo();
+          return;
+        }
+        if (key === "y" || key === "z" && e3.shiftKey) {
+          e3.preventDefault();
+          onRedo == null ? void 0 : onRedo();
+          return;
+        }
+      }
+      if (!hasPrimaryModifier && (key === "delete" || key === "backspace")) {
+        e3.preventDefault();
+        onDelete == null ? void 0 : onDelete();
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [enabled, onDelete]);
+}
 const ControlManager = ({
   trackZoom,
   setTrackZoom,
-  zoomConfig
+  zoomConfig,
+  fps
 }) => {
-  const { currentTime, playerState } = useLivePlayerContext();
+  const { currentTime, playerState, setSeekTime, setCurrentTime } = useLivePlayerContext();
   const { togglePlayback } = usePlayerControl();
-  const { canRedo, canUndo, totalDuration, selectedItem } = useTimelineContext();
+  const {
+    canRedo,
+    canUndo,
+    totalDuration,
+    selectedItem,
+    selectedIds,
+    followPlayheadEnabled,
+    setFollowPlayheadEnabled
+  } = useTimelineContext();
   const { deleteItem, splitElement, handleUndo, handleRedo } = useTimelineControl();
+  useCanvasKeyboard({
+    onDelete: () => deleteItem(),
+    onUndo: () => handleUndo(),
+    onRedo: () => handleRedo()
+  });
+  const handleSeek = (time2) => {
+    const clamped = Math.max(0, Math.min(totalDuration, time2));
+    setCurrentTime(clamped);
+    setSeekTime(clamped);
+  };
   return /* @__PURE__ */ jsx("div", { className: "twick-editor-timeline-controls", children: /* @__PURE__ */ jsx(
     PlayerControls,
     {
       selectedItem,
+      selectedIds,
       duration: totalDuration,
       currentTime,
       playerState,
       togglePlayback,
       canUndo,
       canRedo,
-      onDelete: deleteItem,
+      onDelete: () => deleteItem(),
       onSplit: splitElement,
       onUndo: handleUndo,
       onRedo: handleRedo,
       zoomLevel: trackZoom,
       setZoomLevel: setTrackZoom,
-      zoomConfig
+      zoomConfig,
+      fps: fps ?? DEFAULT_FPS,
+      onSeek: handleSeek,
+      followPlayheadEnabled,
+      onFollowPlayheadToggle: () => setFollowPlayheadEnabled(!followPlayheadEnabled)
     }
   ) });
 };
@@ -18267,7 +19942,8 @@ const VideoEditor = ({
       {
         videoProps: editorConfig.videoProps,
         playerProps: editorConfig.playerProps,
-        canvasMode: editorConfig.canvasMode ?? true
+        canvasMode: editorConfig.canvasMode ?? true,
+        canvasConfig: editorConfig.canvasConfig
       }
     ),
     [editorConfig]
@@ -18285,7 +19961,8 @@ const VideoEditor = ({
         {
           trackZoom,
           setTrackZoom,
-          zoomConfig
+          zoomConfig,
+          fps: editorConfig.fps
         }
       ) : null,
       /* @__PURE__ */ jsx(
@@ -18690,6 +20367,7 @@ export {
   BaseMediaManager,
   BrowserMediaManager,
   DEFAULT_ELEMENT_COLORS,
+  DEFAULT_FPS,
   DEFAULT_TIMELINE_TICK_CONFIGS,
   DEFAULT_TIMELINE_ZOOM,
   DEFAULT_TIMELINE_ZOOM_CONFIG,
@@ -18697,7 +20375,9 @@ export {
   INITIAL_TIMELINE_DATA,
   MIN_DURATION,
   PlayerControls,
+  SNAP_THRESHOLD_PX,
   TEXT_EFFECTS,
+  TIMELINE_DROP_MEDIA_TYPE,
   TimelineManager,
   animationGifs,
   VideoEditor as default,