@twick/video-editor 0.15.26 → 0.15.28

package/dist/index.js

@@ -7,6 +7,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const livePlayer = require("@twick/live-player");
 const timeline = require("@twick/timeline");
 const React = require("react");
+const reactDom = require("react-dom");
 function t(t2, e3, s2) {
   return (e3 = function(t3) {
     var e4 = function(t4, e5) {
@@ -5945,6 +5946,9 @@ function ea() {
 function sa() {
   return !ta && (!(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0]) && (ta = ea()), ta;
 }
+function ia(t2) {
+  ta = t2;
+}
 const ra = ["filters", "resizeFilter", "src", "crossOrigin", "type"], na = ["cropX", "cropY"];
 class oa extends Li {
   static getDefaults() {
@@ -6472,13 +6476,7 @@ function Za(e3, s2) {
   return tt.setClass(r2, e3), r2;
 }
 t(Qa, "type", "ColorMatrix"), t(Qa, "defaults", Ja), t(Qa, "uniformLocations", ["uColorMatrix", "uConstants"]), tt.setClass(Qa);
-Za("Brownie", [0.5997, 0.34553, -0.27082, 0, 0.186, -0.0377, 0.86095, 0.15059, 0, -0.1449, 0.24113, -0.07441, 0.44972, 0, -0.02965, 0, 0, 0, 1, 0]);
-Za("Vintage", [0.62793, 0.32021, -0.03965, 0, 0.03784, 0.02578, 0.64411, 0.03259, 0, 0.02926, 0.0466, -0.08512, 0.52416, 0, 0.02023, 0, 0, 0, 1, 0]);
-Za("Kodachrome", [1.12855, -0.39673, -0.03992, 0, 0.24991, -0.16404, 1.08352, -0.05498, 0, 0.09698, -0.16786, -0.56034, 1.60148, 0, 0.13972, 0, 0, 0, 1, 0]);
-Za("Technicolor", [1.91252, -0.85453, -0.09155, 0, 0.04624, -0.30878, 1.76589, -0.10601, 0, -0.27589, -0.2311, -0.75018, 1.84759, 0, 0.12137, 0, 0, 0, 1, 0]);
-Za("Polaroid", [1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, 0, 0, 0, 1, 0]);
-Za("Sepia", [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0]);
-Za("BlackWhite", [1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 0, 0, 0, 1, 0]);
+const $a = Za("Brownie", [0.5997, 0.34553, -0.27082, 0, 0.186, -0.0377, 0.86095, 0.15059, 0, -0.1449, 0.24113, -0.07441, 0.44972, 0, -0.02965, 0, 0, 0, 1, 0]), th = Za("Vintage", [0.62793, 0.32021, -0.03965, 0, 0.03784, 0.02578, 0.64411, 0.03259, 0, 0.02926, 0.0466, -0.08512, 0.52416, 0, 0.02023, 0, 0, 0, 1, 0]), eh = Za("Kodachrome", [1.12855, -0.39673, -0.03992, 0, 0.24991, -0.16404, 1.08352, -0.05498, 0, 0.09698, -0.16786, -0.56034, 1.60148, 0, 0.13972, 0, 0, 0, 1, 0]), sh = Za("Technicolor", [1.91252, -0.85453, -0.09155, 0, 0.04624, -0.30878, 1.76589, -0.10601, 0, -0.27589, -0.2311, -0.75018, 1.84759, 0, 0.12137, 0, 0, 0, 1, 0]), ih = Za("Polaroid", [1.438, -0.062, -0.062, 0, 0, -0.122, 1.378, -0.122, 0, 0, -0.016, -0.016, 1.483, 0, 0, 0, 0, 0, 1, 0]), rh = Za("Sepia", [0.393, 0.769, 0.189, 0, 0, 0.349, 0.686, 0.168, 0, 0, 0.272, 0.534, 0.131, 0, 0, 0, 0, 0, 1, 0]), nh = Za("BlackWhite", [1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 1.5, 1.5, 1.5, 0, -1, 0, 0, 0, 1, 0]);
 class oh extends Va {
   constructor() {
     let t2 = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
@@ -6841,6 +6839,7 @@ class bh extends Va {
   }
 }
 t(bh, "type", "Vibrance"), t(bh, "defaults", { vibrance: 0 }), t(bh, "uniformLocations", ["uVibrance"]), tt.setClass(bh);
+var Sh = Object.freeze({ __proto__: null, BaseFilter: Va, BlackWhite: nh, BlendColor: Ga, BlendImage: Ua, Blur: qa, Brightness: Ka, Brownie: $a, ColorMatrix: Qa, Composed: oh, Contrast: ah, Convolute: ch, Gamma: uh, Grayscale: gh, HueRotation: ph, Invert: mh, Kodachrome: eh, Noise: vh$1, Pixelate: yh, Polaroid: ih, RemoveColor: _h, Resize: xh, Saturation: Ch, Sepia: rh, Technicolor: sh, Vibrance: bh, Vintage: th });
 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);
@@ -6901,6 +6900,8 @@ const ELEMENT_TYPES = {
   RECT: "rect",
   /** Circle element type */
   CIRCLE: "circle",
+  /** Emoji sticker element type */
+  EMOJI: "emoji",
   /** Arrow annotation element type */
   ARROW: "arrow",
   /** Line annotation / shape element type */
@@ -7149,6 +7150,24 @@ const rotateControl = new ai({
   /** Whether to show connection line */
   withConnection: true
 });
+const COLOR_FILTERS = {
+  SATURATED: "saturated",
+  BRIGHT: "bright",
+  VIBRANT: "vibrant",
+  RETRO: "retro",
+  BLACK_WHITE: "blackWhite",
+  SEPIA: "sepia",
+  COOL: "cool",
+  WARM: "warm",
+  CINEMATIC: "cinematic",
+  SOFT_GLOW: "softGlow",
+  MOODY: "moody",
+  DREAMY: "dreamy",
+  INVERTED: "inverted",
+  VINTAGE: "vintage",
+  DRAMATIC: "dramatic",
+  FADED: "faded"
+};
 class LRUCache {
   constructor(maxSize = 100) {
     if (maxSize <= 0) {
@@ -7532,6 +7551,275 @@ const getObjectFitSize = (objectFit, elementSize, containerSize) => {
       };
   }
 };
+const {
+  Blur,
+  Brightness,
+  ColorMatrix,
+  Contrast,
+  Grayscale,
+  HueRotation,
+  Invert,
+  Saturation,
+  Sepia
+} = Sh;
+let canvas2dFilterBackendInstalled = false;
+function ensureCanvas2dImageFilterBackend() {
+  if (canvas2dFilterBackendInstalled) return;
+  canvas2dFilterBackendInstalled = true;
+  ia(new Zo());
+}
+function getSourceBitmapSize(img) {
+  const el = img.getElement();
+  if (!el) return null;
+  const w2 = "naturalWidth" in el && el.naturalWidth > 0 ? el.naturalWidth : el.width;
+  const h2 = "naturalHeight" in el && el.naturalHeight > 0 ? el.naturalHeight : el.height;
+  if (!w2 || !h2) return null;
+  return { w: w2, h: h2 };
+}
+function applyFiltersSafe(img) {
+  ensureCanvas2dImageFilterBackend();
+  img.applyFilters();
+}
+const bright = (m2) => Math.min(1, Math.max(-1, (m2 - 1) * 0.48));
+const contr = (m2) => Math.min(1, Math.max(-1, (m2 - 1) * 0.55));
+const sat = (m2) => Math.min(1, Math.max(-1, (m2 - 1) * 0.72));
+const IDENTITY = [
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+];
+const SEPIA_MATRIX = [
+  0.393,
+  0.769,
+  0.189,
+  0,
+  0,
+  0.349,
+  0.686,
+  0.168,
+  0,
+  0,
+  0.272,
+  0.534,
+  0.131,
+  0,
+  0,
+  0,
+  0,
+  0,
+  1,
+  0
+];
+function sepiaMix(strength) {
+  const t2 = Math.min(1, Math.max(0, strength));
+  const m2 = IDENTITY.map((v2, i2) => v2 + (SEPIA_MATRIX[i2] - v2) * t2);
+  return new ColorMatrix({ matrix: m2, colorsOnly: true });
+}
+const twickBlurToFabric = (v2) => Math.min(0.22, Math.max(0, v2 * 0.045));
+function buildFilters(filterType) {
+  switch (filterType) {
+    case COLOR_FILTERS.SATURATED:
+      return {
+        filters: [
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.BRIGHT:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.VIBRANT:
+      return {
+        filters: [
+          new Saturation({ saturation: sat(1.6) }),
+          new Brightness({ brightness: bright(1.15) }),
+          new Contrast({ contrast: contr(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.RETRO:
+      return {
+        filters: [
+          sepiaMix(0.8),
+          new Contrast({ contrast: contr(1.3) }),
+          new Brightness({ brightness: bright(0.85) }),
+          new Saturation({ saturation: sat(0.8) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.BLACK_WHITE:
+      return {
+        filters: [
+          new Grayscale(),
+          new Contrast({ contrast: contr(1.25) }),
+          new Brightness({ brightness: bright(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.SEPIA:
+      return {
+        filters: [
+          new Sepia(),
+          new Contrast({ contrast: contr(1.08) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.COOL:
+      return {
+        filters: [
+          new HueRotation({ rotation: 15 / 180 }),
+          new Brightness({ brightness: bright(1.1) }),
+          new Saturation({ saturation: sat(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.WARM:
+      return {
+        filters: [
+          new HueRotation({ rotation: -15 / 180 }),
+          new Brightness({ brightness: bright(1.15) }),
+          new Saturation({ saturation: sat(1.3) }),
+          new Contrast({ contrast: contr(1.05) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.CINEMATIC:
+      return {
+        filters: [
+          new Contrast({ contrast: contr(1.4) }),
+          new Brightness({ brightness: bright(0.95) }),
+          new Saturation({ saturation: sat(0.85) }),
+          sepiaMix(0.2)
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.SOFT_GLOW:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.2) }),
+          new Contrast({ contrast: contr(0.95) }),
+          new Blur({ blur: twickBlurToFabric(1.2) }),
+          new Saturation({ saturation: sat(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.MOODY:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.05) }),
+          new Contrast({ contrast: contr(1.4) }),
+          new Saturation({ saturation: sat(0.65) }),
+          sepiaMix(0.2)
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.DREAMY:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.3) }),
+          new Blur({ blur: twickBlurToFabric(2) }),
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(0.95) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.INVERTED:
+      return {
+        filters: [
+          new Invert({ invert: true, alpha: false }),
+          new HueRotation({ rotation: 1 })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.VINTAGE:
+      return {
+        filters: [
+          sepiaMix(0.4),
+          new Saturation({ saturation: sat(1.4) }),
+          new Contrast({ contrast: contr(1.2) }),
+          new Brightness({ brightness: bright(1.1) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.DRAMATIC:
+      return {
+        filters: [
+          new Contrast({ contrast: contr(1.5) }),
+          new Brightness({ brightness: bright(0.9) }),
+          new Saturation({ saturation: sat(1.2) })
+        ],
+        opacityFactor: 1
+      };
+    case COLOR_FILTERS.FADED:
+      return {
+        filters: [
+          new Brightness({ brightness: bright(1.2) }),
+          new Saturation({ saturation: sat(0.8) }),
+          new Contrast({ contrast: contr(0.9) })
+        ],
+        opacityFactor: 0.9
+      };
+    default:
+      return { filters: [], opacityFactor: 1 };
+  }
+}
+function applyFabricMediaColorFilters(img, mediaFilter, elementOpacity) {
+  const key = (mediaFilter == null ? void 0 : mediaFilter.trim()) || "none";
+  if (key === "none") {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    applyFiltersSafe(img);
+    return;
+  }
+  const { filters: filterList, opacityFactor } = buildFilters(key);
+  if (filterList.length === 0) {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    applyFiltersSafe(img);
+    return;
+  }
+  if (!getSourceBitmapSize(img)) {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    return;
+  }
+  img.filters = filterList;
+  img.set("opacity", elementOpacity * opacityFactor);
+  try {
+    applyFiltersSafe(img);
+  } catch {
+    img.filters = [];
+    img.set("opacity", elementOpacity);
+    try {
+      applyFiltersSafe(img);
+    } catch {
+    }
+  }
+}
 const MARGIN = 10;
 const addTextElement = ({
   element,
@@ -7622,7 +7910,7 @@ const setImageProps = ({
   canvasMetadata,
   lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e2;
+  var _a, _b, _c, _d, _e2, _f;
   const width = (((_a = element.props) == null ? void 0 : _a.width) || 0) * canvasMetadata.scaleX || canvasMetadata.width;
   const height = (((_b = element.props) == null ? void 0 : _b.height) || 0) * canvasMetadata.scaleY || canvasMetadata.height;
   const { x: x2, y: y2 } = convertToCanvasPosition(
@@ -7636,11 +7924,15 @@ const setImageProps = ({
   img.set("height", height);
   img.set("left", x2);
   img.set("top", y2);
-  img.set("opacity", ((_e2 = element.props) == null ? void 0 : _e2.opacity) ?? 1);
   img.set("selectable", true);
   img.set("hasControls", true);
   img.set("touchAction", "all");
   img.set("lockUniScaling", lockAspectRatio);
+  applyFabricMediaColorFilters(
+    img,
+    (_e2 = element.props) == null ? void 0 : _e2.mediaFilter,
+    ((_f = element.props) == null ? void 0 : _f.opacity) ?? 1
+  );
 };
 const addCaptionElement = ({
   element,
@@ -7650,48 +7942,52 @@ const addCaptionElement = ({
   canvasMetadata,
   lockAspectRatio = false
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2, _p, _q, _r2, _s2, _t2, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L;
-  const applyToAll = (captionProps == null ? void 0 : captionProps.applyToAll) ?? false;
-  const captionTextColor = ((_a = captionProps == null ? void 0 : captionProps.colors) == null ? void 0 : _a.text) ?? ((_b = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _b.text);
+  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;
+  const useTrackDefaults = ((_a = element.props) == null ? void 0 : _a.useTrackDefaults) ?? true;
+  const trackColors = captionProps == null ? void 0 : captionProps.colors;
+  const elementColors = (_b = element.props) == null ? void 0 : _b.colors;
+  const resolvedColors = useTrackDefaults ? trackColors : { ...trackColors ?? {}, ...elementColors ?? {} };
+  const captionTextColor = (resolvedColors == null ? void 0 : resolvedColors.text) ?? ((_c = captionProps == null ? void 0 : captionProps.color) == null ? void 0 : _c.text);
   const { x: x2, y: y2 } = convertToCanvasPosition(
-    (applyToAll ? captionProps == null ? void 0 : captionProps.x : ((_c = element.props) == null ? void 0 : _c.x) ?? (captionProps == null ? void 0 : captionProps.x)) ?? 0,
-    (applyToAll ? captionProps == null ? void 0 : captionProps.y : ((_d = element.props) == null ? void 0 : _d.y) ?? (captionProps == null ? void 0 : captionProps.y)) ?? 0,
+    (useTrackDefaults ? captionProps == null ? void 0 : captionProps.x : (_d = element.props) == null ? void 0 : _d.x) ?? (captionProps == null ? void 0 : captionProps.x) ?? 0,
+    (useTrackDefaults ? captionProps == null ? void 0 : captionProps.y : (_e2 = element.props) == null ? void 0 : _e2.y) ?? (captionProps == null ? void 0 : captionProps.y) ?? 0,
     canvasMetadata
   );
-  let width = ((_e2 = element.props) == null ? void 0 : _e2.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
-  if ((_f = element.props) == null ? void 0 : _f.maxWidth) {
+  let width = ((_f = element.props) == null ? void 0 : _f.width) ? element.props.width * canvasMetadata.scaleX : canvasMetadata.width - 2 * MARGIN;
+  if ((_g = element.props) == null ? void 0 : _g.maxWidth) {
     width = Math.min(width, element.props.maxWidth * canvasMetadata.scaleX);
   }
-  const elementColors = (_g = element.props) == null ? void 0 : _g.colors;
-  const resolvedFill = (applyToAll ? captionTextColor : ((_h2 = element.props) == null ? void 0 : _h2.fill) ?? (elementColors == null ? void 0 : elementColors.text) ?? captionTextColor) ?? DEFAULT_CAPTION_PROPS.fill;
-  const trackColors = captionProps == null ? void 0 : captionProps.colors;
+  const resolvedFill = (useTrackDefaults ? void 0 : (_h2 = element.props) == null ? void 0 : _h2.fill) ?? captionTextColor ?? DEFAULT_CAPTION_PROPS.fill;
   const trackStroke = trackColors == null ? void 0 : trackColors.outlineColor;
   const elementStroke = (elementColors == null ? void 0 : elementColors.outlineColor) ?? ((_i2 = element.props) == null ? void 0 : _i2.stroke);
-  const resolvedStroke = (applyToAll ? trackStroke ?? elementStroke : elementStroke ?? trackStroke) ?? void 0;
-  const caption = new Uo(((_j = element.props) == null ? void 0 : _j.text) || element.t || "", {
+  const resolvedStroke = (useTrackDefaults ? trackStroke : elementStroke ?? trackStroke) ?? void 0;
+  const trackFont = (captionProps == null ? void 0 : captionProps.font) ?? {};
+  const elementFont = ((_j = element.props) == null ? void 0 : _j.font) ?? {};
+  const resolvedFont = useTrackDefaults ? trackFont : { ...trackFont, ...elementFont };
+  const caption = new Uo(((_k = element.props) == null ? void 0 : _k.text) || element.t || "", {
     left: x2,
     top: y2,
     originX: "center",
     originY: "center",
-    angle: ((_k = element.props) == null ? void 0 : _k.rotation) || 0,
+    angle: ((_l = element.props) == null ? void 0 : _l.rotation) || 0,
     fontSize: Math.round(
-      ((applyToAll ? (_l = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _l.size : ((_n2 = (_m = element.props) == null ? void 0 : _m.font) == null ? void 0 : _n2.size) ?? ((_o2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _o2.size)) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
+      ((resolvedFont == null ? void 0 : resolvedFont.size) ?? DEFAULT_CAPTION_PROPS.size) * canvasMetadata.scaleX
     ),
-    fontFamily: (applyToAll ? (_p = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _p.family : ((_r2 = (_q = element.props) == null ? void 0 : _q.font) == null ? void 0 : _r2.family) ?? ((_s2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _s2.family)) ?? DEFAULT_CAPTION_PROPS.family,
+    fontFamily: (resolvedFont == null ? void 0 : resolvedFont.family) ?? DEFAULT_CAPTION_PROPS.family,
     fill: resolvedFill,
-    fontWeight: (applyToAll ? (_t2 = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _t2.weight : ((_v = (_u = element.props) == null ? void 0 : _u.font) == null ? void 0 : _v.weight) ?? ((_w = captionProps == null ? void 0 : captionProps.font) == null ? void 0 : _w.weight)) ?? DEFAULT_CAPTION_PROPS.fontWeight,
+    fontWeight: (resolvedFont == null ? void 0 : resolvedFont.weight) ?? DEFAULT_CAPTION_PROPS.fontWeight,
     ...resolvedStroke ? { stroke: resolvedStroke } : {},
-    opacity: (applyToAll ? captionProps == null ? void 0 : captionProps.opacity : ((_x = element.props) == null ? void 0 : _x.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity)) ?? 1,
+    opacity: (useTrackDefaults ? void 0 : (_m = element.props) == null ? void 0 : _m.opacity) ?? (captionProps == null ? void 0 : captionProps.opacity) ?? 1,
     width,
     splitByGrapheme: false,
-    textAlign: ((_y = element.props) == null ? void 0 : _y.textAlign) ?? "center",
+    textAlign: ((_n2 = element.props) == null ? void 0 : _n2.textAlign) ?? "center",
     shadow: new Ds({
-      offsetX: (applyToAll ? (_z = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _z[0] : ((_B = (_A = element.props) == null ? void 0 : _A.shadowOffset) == null ? void 0 : _B[0]) ?? ((_C = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _C[0])) ?? ((_D = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _D[0]),
-      offsetY: (applyToAll ? (_E = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _E[1] : ((_G = (_F = element.props) == null ? void 0 : _F.shadowOffset) == null ? void 0 : _G[1]) ?? ((_H = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _H[1])) ?? ((_I = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _I[1]),
-      blur: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowBlur : ((_J = element.props) == null ? void 0 : _J.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur)) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
-      color: (applyToAll ? captionProps == null ? void 0 : captionProps.shadowColor : ((_K = element.props) == null ? void 0 : _K.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor)) ?? DEFAULT_CAPTION_PROPS.shadowColor
+      offsetX: (useTrackDefaults ? void 0 : (_p = (_o2 = element.props) == null ? void 0 : _o2.shadowOffset) == null ? void 0 : _p[0]) ?? ((_q = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _q[0]) ?? ((_r2 = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _r2[0]),
+      offsetY: (useTrackDefaults ? void 0 : (_t2 = (_s2 = element.props) == null ? void 0 : _s2.shadowOffset) == null ? void 0 : _t2[1]) ?? ((_u = captionProps == null ? void 0 : captionProps.shadowOffset) == null ? void 0 : _u[1]) ?? ((_v = DEFAULT_CAPTION_PROPS.shadowOffset) == null ? void 0 : _v[1]),
+      blur: (useTrackDefaults ? void 0 : (_w = element.props) == null ? void 0 : _w.shadowBlur) ?? (captionProps == null ? void 0 : captionProps.shadowBlur) ?? DEFAULT_CAPTION_PROPS.shadowBlur,
+      color: (useTrackDefaults ? void 0 : (_x = element.props) == null ? void 0 : _x.shadowColor) ?? (captionProps == null ? void 0 : captionProps.shadowColor) ?? DEFAULT_CAPTION_PROPS.shadowColor
     }),
-    strokeWidth: ((applyToAll ? captionProps == null ? void 0 : captionProps.lineWidth : ((_L = element.props) == null ? void 0 : _L.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth)) ?? DEFAULT_CAPTION_PROPS.lineWidth) * 0.025
+    strokeWidth: ((useTrackDefaults ? void 0 : (_y = element.props) == null ? void 0 : _y.lineWidth) ?? (captionProps == null ? void 0 : captionProps.lineWidth) ?? DEFAULT_CAPTION_PROPS.lineWidth) * 0.025
   });
   caption.set("id", element.id);
   caption.set("zIndex", index);
@@ -7746,8 +8042,13 @@ const addImageElement = async ({
   currentFrameEffect,
   lockAspectRatio = true
 }) => {
+  var _a, _b;
   try {
-    const img = await oa.fromURL(imageUrl || element.props.src || "");
+    const rawSrc = imageUrl || element.props.src || "";
+    const mediaFilter = (_b = (_a = element.props) == null ? void 0 : _a.mediaFilter) == null ? void 0 : _b.trim();
+    const useFilter = !!mediaFilter && mediaFilter !== "none";
+    const fromUrlOpts = useFilter && /^https?:\/\//i.test(rawSrc) ? { crossOrigin: "anonymous" } : {};
+    const img = await oa.fromURL(rawSrc, fromUrlOpts);
     img.set({
       originX: "center",
       originY: "center",
@@ -7784,7 +8085,7 @@ const addMediaGroup = ({
   currentFrameEffect,
   lockAspectRatio = true
 }) => {
-  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2;
+  var _a, _b, _c, _d, _e2, _f, _g, _h2, _i2, _j, _k, _l, _m, _n2, _o2;
   let frameSize;
   let angle;
   let framePosition;
@@ -7839,9 +8140,13 @@ const addMediaGroup = ({
     originX: "center",
     originY: "center",
     scaleX: newSize.width / img.width,
-    scaleY: newSize.height / img.height,
-    opacity: ((_n2 = element.props) == null ? void 0 : _n2.opacity) ?? 1
+    scaleY: newSize.height / img.height
   });
+  applyFabricMediaColorFilters(
+    img,
+    (_n2 = element.props) == null ? void 0 : _n2.mediaFilter,
+    ((_o2 = element.props) == null ? void 0 : _o2.opacity) ?? 1
+  );
   const { x: x2, y: y2 } = convertToCanvasPosition(
     (framePosition == null ? void 0 : framePosition.x) || 0,
     (framePosition == null ? void 0 : framePosition.y) || 0,
@@ -8327,7 +8632,8 @@ const CaptionElement = {
       context.canvasMetadata,
       context.videoSize
     );
-    if ((_a = context.captionPropsRef.current) == null ? void 0 : _a.applyToAll) {
+    const useTrackDefaults = ((_a = element.props) == null ? void 0 : _a.useTrackDefaults) ?? true;
+    if (useTrackDefaults) {
       return {
         element,
         operation: CANVAS_OPERATIONS.CAPTION_PROPS_UPDATED,
@@ -8544,6 +8850,72 @@ const EffectElement = {
     return;
   }
 };
+const EmojiElement = {
+  name: ELEMENT_TYPES.EMOJI,
+  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) ?? true
+    });
+  },
+  updateFromFabricObject(object, element, context) {
+    const canvasCenter = getObjectCanvasCenter(object);
+    const { x: x2, y: y2 } = convertToVideoPosition(
+      canvasCenter.x,
+      canvasCenter.y,
+      context.canvasMetadata,
+      context.videoSize
+    );
+    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];
+      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
+        }
+      }
+    };
+  }
+};
 class ElementController {
   constructor() {
     __publicField2(this, "elements", /* @__PURE__ */ new Map());
@@ -8565,6 +8937,7 @@ function registerElements() {
   elementController.register(RectElement);
   elementController.register(CircleElement);
   elementController.register(TextElement);
+  elementController.register(EmojiElement);
   elementController.register(CaptionElement);
   elementController.register(WatermarkElement);
   elementController.register(ArrowElement);
@@ -9149,6 +9522,8 @@ const DEFAULT_ELEMENT_COLORS = {
   animation: "#4B9B78",
   /** Icon element color - bright orchid */
   icon: "#A76CD4",
+  /** Emoji element color - warm amber */
+  emoji: "#F59E0B",
   /** Circle element color - deep byzantium */
   circle: "#703D8B",
   /** Effect element color - cyan accent for global effects */
@@ -19037,6 +19412,102 @@ const setElementColors = (colors) => {
     ...colors
   };
 };
+const VIEWPORT_MARGIN = 8;
+function clampMenuPosition(clientX, clientY, width, height) {
+  const vw2 = window.innerWidth;
+  const vh3 = window.innerHeight;
+  const maxLeft = Math.max(VIEWPORT_MARGIN, vw2 - width - VIEWPORT_MARGIN);
+  const maxTop = Math.max(VIEWPORT_MARGIN, vh3 - height - VIEWPORT_MARGIN);
+  return {
+    left: Math.min(Math.max(VIEWPORT_MARGIN, clientX), maxLeft),
+    top: Math.min(Math.max(VIEWPORT_MARGIN, clientY), maxTop)
+  };
+}
+const TrackElementContextMenu = ({
+  x: x2,
+  y: y2,
+  canSplit,
+  onSplit,
+  onDelete,
+  onClose
+}) => {
+  const menuRef = React.useRef(null);
+  const [position, setPosition] = React.useState(() => ({
+    left: x2,
+    top: y2
+  }));
+  const reposition = React.useCallback(() => {
+    const el = menuRef.current;
+    if (!el) return;
+    const { width, height } = el.getBoundingClientRect();
+    setPosition(clampMenuPosition(x2, y2, width, height));
+  }, [x2, y2]);
+  React.useLayoutEffect(() => {
+    reposition();
+  }, [reposition]);
+  React.useEffect(() => {
+    window.addEventListener("resize", reposition);
+    return () => window.removeEventListener("resize", reposition);
+  }, [reposition]);
+  React.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 wrap = (fn2) => {
+    fn2();
+    onClose();
+  };
+  const menu = /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: menuRef,
+      className: "twick-canvas-context-menu",
+      style: { left: position.left, top: position.top },
+      role: "menu",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item",
+            onClick: () => wrap(onSplit),
+            disabled: !canSplit,
+            role: "menuitem",
+            style: !canSplit ? { opacity: 0.45, cursor: "not-allowed" } : void 0,
+            children: "Split at playhead"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-canvas-context-menu-separator", role: "separator" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: "twick-canvas-context-menu-item twick-canvas-context-menu-item-danger",
+            onClick: () => wrap(onDelete),
+            role: "menuitem",
+            children: "Delete"
+          }
+        )
+      ]
+    }
+  );
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return reactDom.createPortal(menu, document.body);
+};
 const TrackElementView = ({
   element,
   parentWidth,
@@ -19049,13 +19520,20 @@ const TrackElementView = ({
   onDrag,
   allowOverlap = false,
   onDragStateChange,
-  elementColors
+  elementColors,
+  currentTime = 0,
+  onContextMenuTarget,
+  onDeleteElement,
+  onSplitElement
 }) => {
   var _a, _b;
   const ref = React.useRef(null);
   const dragType = React.useRef(null);
   const lastPosRef = React.useRef(null);
   const [isDragging2, setIsDragging] = React.useState(false);
+  const [clipMenu, setClipMenu] = React.useState(
+    null
+  );
   const [position, setPosition] = React.useState({
     start: 0,
     end: 0
@@ -19085,6 +19563,7 @@ const TrackElementView = ({
           newStart = nextStart - span;
         }
       }
+      newStart = Math.max(0, Math.min(newStart, duration - span));
       return {
         start: newStart,
         end: newStart + span
@@ -19107,6 +19586,7 @@ const TrackElementView = ({
       if (prevEnd !== null && !allowOverlap && newStart < prevEnd) {
         newStart = prevEnd;
       }
+      newStart = Math.max(0, Math.min(newStart, prev.end - MIN_DURATION));
       return {
         start: newStart,
         end: prev.end
@@ -19131,6 +19611,7 @@ const TrackElementView = ({
           newEnd = nextStart;
         }
       }
+      newEnd = Math.max(prev.start + MIN_DURATION, Math.min(newEnd, duration));
       return {
         start: prev.start,
         end: newEnd
@@ -19168,7 +19649,7 @@ const TrackElementView = ({
   };
   const getElementColor = (elementType) => {
     const colors = elementColors || ELEMENT_COLORS;
-    const key = elementType === timeline.TIMELINE_ELEMENT_TYPE.VIDEO ? "video" : elementType === timeline.TIMELINE_ELEMENT_TYPE.AUDIO ? "audio" : elementType === timeline.TIMELINE_ELEMENT_TYPE.IMAGE ? "image" : elementType === timeline.TIMELINE_ELEMENT_TYPE.TEXT ? "text" : elementType === timeline.TIMELINE_ELEMENT_TYPE.CAPTION ? "caption" : elementType === timeline.TIMELINE_ELEMENT_TYPE.RECT ? "rect" : elementType === timeline.TIMELINE_ELEMENT_TYPE.CIRCLE ? "circle" : elementType === timeline.TIMELINE_ELEMENT_TYPE.ICON ? "icon" : elementType === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? "effect" : "element";
+    const key = elementType === timeline.TIMELINE_ELEMENT_TYPE.VIDEO ? "video" : elementType === timeline.TIMELINE_ELEMENT_TYPE.AUDIO ? "audio" : elementType === timeline.TIMELINE_ELEMENT_TYPE.IMAGE ? "image" : elementType === timeline.TIMELINE_ELEMENT_TYPE.TEXT ? "text" : elementType === timeline.TIMELINE_ELEMENT_TYPE.CAPTION ? "caption" : elementType === timeline.TIMELINE_ELEMENT_TYPE.RECT ? "rect" : elementType === timeline.TIMELINE_ELEMENT_TYPE.CIRCLE ? "circle" : elementType === timeline.TIMELINE_ELEMENT_TYPE.ICON ? "icon" : elementType === timeline.TIMELINE_ELEMENT_TYPE.EMOJI ? "emoji" : elementType === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? "effect" : "element";
     if (key in colors) {
       return colors[key];
     }
@@ -19178,6 +19659,16 @@ const TrackElementView = ({
     return selectedIds.has(element.getId());
   }, [selectedIds, element]);
   const hasHandles = (selectedItem == null ? void 0 : selectedItem.getId()) === element.getId();
+  const contextActionsEnabled = Boolean(
+    onDeleteElement && onSplitElement && onContextMenuTarget
+  );
+  const handleContextMenu = (e3) => {
+    if (!contextActionsEnabled) return;
+    e3.preventDefault();
+    e3.stopPropagation();
+    onContextMenuTarget == null ? void 0 : onContextMenuTarget(element);
+    setClipMenu({ x: e3.clientX, y: e3.clientY });
+  };
   const motionProps = {
     ref,
     className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""}`,
@@ -19198,6 +19689,7 @@ const TrackElementView = ({
         onSelection(element, e3);
       }
     },
+    onContextMenu: handleContextMenu,
     style: {
       backgroundColor: getElementColor(element.getType()),
       width: `${(position.end - position.start) / duration * 100}%`,
@@ -19205,39 +19697,52 @@ const TrackElementView = ({
       touchAction: "none"
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(motion.div, { ...motionProps, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { touchAction: "none", height: "100%" }, ...bind(), children: [
-    hasHandles ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs(motion.div, { ...motionProps, children: [
+    clipMenu && contextActionsEnabled ? /* @__PURE__ */ jsxRuntime.jsx(
+      TrackElementContextMenu,
       {
-        style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
-        ...bindStartHandle(),
-        className: "twick-track-element-handle twick-track-element-handle-start"
+        x: clipMenu.x,
+        y: clipMenu.y,
+        canSplit: timeline.canSplitElement(element, currentTime),
+        onSplit: () => onSplitElement == null ? void 0 : onSplitElement(element, currentTime),
+        onDelete: () => onDeleteElement == null ? void 0 : onDeleteElement(element),
+        onClose: () => setClipMenu(null)
       }
     ) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-track-element-content", children: element.getType() === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType() }),
-    hasHandles ? /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
-        ...bindEndHandle(),
-        className: "twick-track-element-handle twick-track-element-handle-end"
-      }
-    ) : null,
-    element.getFrameEffects ? element.getFrameEffects().map((frameEffect) => {
-      return /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { touchAction: "none", height: "100%" }, ...bind(), children: [
+      hasHandles ? /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "twick-track-element-frame-effect",
-          style: {
-            backgroundColor: getElementColor("frameEffect"),
-            width: `${(frameEffect.e - frameEffect.s) / element.getDuration() * 100}%`,
-            left: `${frameEffect.s / element.getDuration() * 100}%`
-          }
-        },
-        frameEffect.s + frameEffect.e
-      );
-    }) : null
-  ] }) });
+          style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
+          ...bindStartHandle(),
+          className: "twick-track-element-handle twick-track-element-handle-start"
+        }
+      ) : null,
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-track-element-content", children: element.getType() === timeline.TIMELINE_ELEMENT_TYPE.EFFECT ? ((_b = (_a = element.getProps) == null ? void 0 : _a.call(element)) == null ? void 0 : _b.effectKey) ?? "Effect" : element.getText ? element.getText() : element.getName() || element.getType() }),
+      hasHandles ? /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          style: { touchAction: "none", zIndex: isSelected ? 100 : 1 },
+          ...bindEndHandle(),
+          className: "twick-track-element-handle twick-track-element-handle-end"
+        }
+      ) : null,
+      element.getFrameEffects ? element.getFrameEffects().map((frameEffect) => {
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "twick-track-element-frame-effect",
+            style: {
+              backgroundColor: getElementColor("frameEffect"),
+              width: `${(frameEffect.e - frameEffect.s) / element.getDuration() * 100}%`,
+              left: `${frameEffect.s / element.getDuration() * 100}%`
+            }
+          },
+          frameEffect.s + frameEffect.e
+        );
+      }) : null
+    ] })
+  ] });
 };
 const TrackBase = ({
   duration,
@@ -19250,11 +19755,21 @@ const TrackBase = ({
   onDrag,
   allowOverlap = false,
   onDragStateChange,
-  elementColors
+  elementColors,
+  currentTime,
+  onContextMenuTarget,
+  onDeleteElement,
+  onSplitElement
 }) => {
   const trackRef = React.useRef(null);
   const trackWidthStyle = `${Math.max(100, duration * zoom * 100)}px`;
-  const elements = track.getElements();
+  const elements = [...track.getElements()].sort((a2, b2) => {
+    const byStart = a2.getStart() - b2.getStart();
+    if (byStart !== 0) return byStart;
+    const byEnd = a2.getEnd() - b2.getEnd();
+    if (byEnd !== 0) return byEnd;
+    return a2.getId().localeCompare(b2.getId());
+  });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -19276,6 +19791,10 @@ const TrackBase = ({
           onDrag,
           onDragStateChange,
           elementColors,
+          currentTime,
+          onContextMenuTarget,
+          onDeleteElement,
+          onSplitElement,
           nextStart: index < elements.length - 1 ? elements[index + 1].getStart() : null,
           prevEnd: index > 0 ? elements[index - 1].getEnd() : 0
         },
@@ -19580,7 +20099,11 @@ function TimelineView({
   onDropOnTimeline,
   videoResolution,
   enableDropOnTimeline = true,
-  chapters = []
+  chapters = [],
+  currentTime = 0,
+  onContextMenuTarget,
+  onDeleteElement,
+  onSplitElement
 }) {
   const containerRef = React.useRef(null);
   const seekContainerRef = React.useRef(null);
@@ -19599,15 +20122,28 @@ function TimelineView({
   const handleDragWithDrop = React.useCallback(
     (payload, dropPointer) => {
       var _a;
-      if (dropPointer && onElementDrop) {
-        const rect = (_a = timelineContentRef.current) == null ? void 0 : _a.getBoundingClientRect();
-        const dropTarget = rect ? getTrackOrSeparatorAt(dropPointer.clientY, rect.top, TRACK_HEIGHT) : null;
-        onElementDrop({ ...payload, dropTarget });
-      } else {
+      if (!dropPointer || !onElementDrop) {
+        onElementDrag(payload);
+        return;
+      }
+      const rect = (_a = timelineContentRef.current) == null ? void 0 : _a.getBoundingClientRect();
+      const dropTarget = rect ? getTrackOrSeparatorAt(dropPointer.clientY, rect.top, TRACK_HEIGHT) : null;
+      if ((dropTarget == null ? void 0 : dropTarget.type) === "track") {
+        const elementTrackId = payload.element.getTrackId();
+        const elementTrackIndex = (tracks || []).findIndex(
+          (t2) => t2.getId() === elementTrackId
+        );
+        if (elementTrackIndex === dropTarget.trackIndex) {
+          onElementDrag(payload);
+          return;
+        }
+      } else if (!dropTarget) {
         onElementDrag(payload);
+        return;
       }
+      onElementDrop({ ...payload, dropTarget });
     },
-    [onElementDrag, onElementDrop]
+    [onElementDrag, onElementDrop, tracks]
   );
   useEdgeAutoScroll({
     isActive: !!draggingElementId,
@@ -19836,7 +20372,11 @@ function TimelineView({
                         onDragStateChange: (isDragging2, el) => {
                           setDraggingElementId(isDragging2 && el ? el.getId() : null);
                         },
-                        elementColors
+                        elementColors,
+                        currentTime,
+                        onContextMenuTarget,
+                        onDeleteElement,
+                        onSplitElement
                       }
                     )
                   ] }),
@@ -19879,13 +20419,14 @@ const useTimelineManager = () => {
         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;
-          el.setStart(newStart);
-          el.setEnd(newEnd);
-          editor.updateElement(el);
-        }
+        const batchUpdates = elements.map((el) => ({
+          elementId: el.getId(),
+          updates: {
+            s: el.getStart() + clampedDelta,
+            e: el.getEnd() + clampedDelta
+          }
+        }));
+        editor.updateElements(batchUpdates);
         setSelectedItem(element);
         editor.refresh();
         return;
@@ -19894,7 +20435,8 @@ const useTimelineManager = () => {
     if (dragType === DRAG_TYPE.START) {
       if (element instanceof timeline.VideoElement || element instanceof timeline.AudioElement) {
         const elementProps = element.getProps();
-        const delta = updates.start - element.getStart() * ((elementProps == null ? void 0 : elementProps.playbackRate) || 1);
+        const playbackRate = (elementProps == null ? void 0 : elementProps.playbackRate) || 1;
+        const delta = (updates.start - element.getStart()) * playbackRate;
         if (element instanceof timeline.AudioElement) {
           element.setStartAt(element.getStartAt() + delta);
         } else {
@@ -19902,10 +20444,10 @@ const useTimelineManager = () => {
         }
       }
     }
-    element.setStart(updates.start);
-    element.setEnd(updates.end);
-    const updatedElement = editor.updateElement(element);
-    setSelectedItem(updatedElement);
+    editor.updateElements([
+      { elementId: element.getId(), updates: { s: updates.start, e: updates.end } }
+    ]);
+    setSelectedItem(element);
     editor.refresh();
   };
   const isElementTrackType = (track) => track.getType() === timeline.TRACK_TYPES.ELEMENT;
@@ -20007,6 +20549,38 @@ const useTimelineManager = () => {
     totalDuration
   };
 };
+const useTimelineControl = () => {
+  const { editor, setSelectedItem, selectedIds } = timeline.useTimelineContext();
+  const deleteItem = (item) => {
+    var _a;
+    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
+    const toDelete = item !== void 0 ? [item] : timeline.resolveIds(selectedIds, tracks);
+    for (const el of toDelete) {
+      if (el instanceof timeline.Track) {
+        editor.removeTrack(el);
+      } else if (el instanceof timeline.TrackElement) {
+        editor.removeElement(el);
+      }
+    }
+    setSelectedItem(null);
+  };
+  const splitElement = (element, currentTime) => {
+    if (!timeline.canSplitElement(element, currentTime)) return;
+    void editor.splitElement(element, currentTime);
+  };
+  const handleUndo = () => {
+    editor.undo();
+  };
+  const handleRedo = () => {
+    editor.redo();
+  };
+  return {
+    splitElement,
+    deleteItem,
+    handleUndo,
+    handleRedo
+  };
+};
 function useTimelineSelection() {
   const { editor, selectedIds, setSelection, setSelectedItem } = timeline.useTimelineContext();
   const handleItemSelect = React.useCallback(
@@ -20087,8 +20661,9 @@ const TimelineManager = ({
   elementColors
 }) => {
   var _a, _b;
-  const { playerState } = livePlayer.useLivePlayerContext();
+  const { playerState, currentTime } = livePlayer.useLivePlayerContext();
   const { followPlayheadEnabled, editor, videoResolution, setSelectedItem } = timeline.useTimelineContext();
+  const { deleteItem, splitElement } = useTimelineControl();
   const {
     timelineData,
     totalDuration,
@@ -20109,6 +20684,12 @@ const TimelineManager = ({
     setPlayheadState(state);
   }, []);
   const isPlayheadActive = followPlayheadEnabled && playerState === livePlayer.PLAYER_STATE.PLAYING || playheadState.isDragging;
+  const handleContextMenuTarget = React.useCallback(
+    (element) => {
+      setSelectedItem(element);
+    },
+    [setSelectedItem]
+  );
   const handleDropOnTimeline = React.useCallback(
     async (params) => {
       const { track, timeSec, type, url } = params;
@@ -20156,6 +20737,10 @@ const TimelineManager = ({
       onEmptyClick: handleEmptyClick,
       onMarqueeSelect: handleMarqueeSelect,
       elementColors,
+      currentTime,
+      onContextMenuTarget: handleContextMenuTarget,
+      onDeleteElement: (el) => deleteItem(el),
+      onSplitElement: (el, t2) => splitElement(el, t2),
       playheadPositionPx: playheadState.positionPx,
       isPlayheadActive,
       chapters: ((_a = timelineData == null ? void 0 : timelineData.metadata) == null ? void 0 : _a.chapters) ?? [],
@@ -20239,11 +20824,12 @@ const PlayerControls = ({
     }
   }, [selectedIds.size, onDelete]);
   const hasSelection = selectedIds.size > 0;
+  const canSplitSelected = selectedItem instanceof timeline.TrackElement ? timeline.canSplitElement(selectedItem, currentTime) : false;
   const handleSplit = React.useCallback(() => {
-    if (selectedItem instanceof timeline.TrackElement && onSplit) {
+    if (selectedItem instanceof timeline.TrackElement && onSplit && canSplitSelected) {
       onSplit(selectedItem, currentTime);
     }
-  }, [selectedItem, onSplit, currentTime]);
+  }, [selectedItem, onSplit, currentTime, canSplitSelected]);
   const handleZoomIn = React.useCallback(() => {
     if (setZoomLevel && zoomLevel < MAX_ZOOM) {
       setZoomLevel(zoomLevel + ZOOM_STEP);
@@ -20270,9 +20856,9 @@ const PlayerControls = ({
         "button",
         {
           onClick: handleSplit,
-          disabled: !(selectedItem instanceof timeline.TrackElement),
+          disabled: !canSplitSelected,
           title: "Split",
-          className: `control-btn split-btn ${!(selectedItem instanceof timeline.TrackElement) ? "btn-disabled" : ""}`,
+          className: `control-btn split-btn ${!canSplitSelected ? "btn-disabled" : ""}`,
           children: /* @__PURE__ */ jsxRuntime.jsx(Scissors, { className: "icon-md" })
         }
       ),
@@ -20386,37 +20972,6 @@ const usePlayerControl = () => {
     togglePlayback
   };
 };
-const useTimelineControl = () => {
-  const { editor, setSelectedItem, selectedIds } = timeline.useTimelineContext();
-  const deleteItem = (item) => {
-    var _a;
-    const tracks = ((_a = editor.getTimelineData()) == null ? void 0 : _a.tracks) ?? [];
-    const toDelete = item !== void 0 ? [item] : timeline.resolveIds(selectedIds, tracks);
-    for (const el of toDelete) {
-      if (el instanceof timeline.Track) {
-        editor.removeTrack(el);
-      } else if (el instanceof timeline.TrackElement) {
-        editor.removeElement(el);
-      }
-    }
-    setSelectedItem(null);
-  };
-  const splitElement = (element, currentTime) => {
-    editor.splitElement(element, currentTime);
-  };
-  const handleUndo = () => {
-    editor.undo();
-  };
-  const handleRedo = () => {
-    editor.redo();
-  };
-  return {
-    splitElement,
-    deleteItem,
-    handleUndo,
-    handleRedo
-  };
-};
 function shouldIgnoreKeydown() {
   const active = document.activeElement;
   if (!active) return false;