@twick/video-editor 0.15.27 → 0.15.29

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,7 +7150,25 @@ const rotateControl = new ai({
   /** Whether to show connection line */
   withConnection: true
 });
-class LRUCache {
+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"
+};
+let LRUCache$1 = class LRUCache {
   constructor(maxSize = 100) {
     if (maxSize <= 0) {
       throw new Error("maxSize must be greater than 0");
@@ -7209,10 +7228,10 @@ class LRUCache {
   get size() {
     return this.cache.size;
   }
-}
-class VideoFrameExtractor {
+};
+let VideoFrameExtractor$1 = class VideoFrameExtractor {
   constructor(options = {}) {
-    this.frameCache = new LRUCache(
+    this.frameCache = new LRUCache$1(
       options.maxCacheSize ?? 50
     );
     this.videoElements = /* @__PURE__ */ new Map();
@@ -7478,16 +7497,16 @@ class VideoFrameExtractor {
     this.videoElements.clear();
     this.frameCache.clear();
   }
-}
-let defaultExtractor = null;
-function getDefaultVideoFrameExtractor(options) {
-  if (!defaultExtractor) {
-    defaultExtractor = new VideoFrameExtractor(options);
+};
+let defaultExtractor$1 = null;
+function getDefaultVideoFrameExtractor$1(options) {
+  if (!defaultExtractor$1) {
+    defaultExtractor$1 = new VideoFrameExtractor$1(options);
   }
-  return defaultExtractor;
+  return defaultExtractor$1;
 }
-async function getThumbnailCached(videoUrl, seekTime = 0.1, playbackRate) {
-  const extractor = getDefaultVideoFrameExtractor(
+async function getThumbnailCached$1(videoUrl, seekTime = 0.1, playbackRate) {
+  const extractor = getDefaultVideoFrameExtractor$1(
     void 0
   );
   return extractor.getFrame(videoUrl, seekTime);
@@ -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);
@@ -7718,7 +8014,7 @@ const addVideoElement = async ({
 }) => {
   var _a;
   try {
-    const thumbnailUrl = await getThumbnailCached(
+    const thumbnailUrl = await getThumbnailCached$1(
       ((_a = element == null ? void 0 : element.props) == null ? void 0 : _a.src) || "",
       snapTime
     );
@@ -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 */
@@ -9204,6 +9579,7 @@ function useTimelineDrop({
   zoomLevel,
   labelWidth,
   trackHeight,
+  separatorHeight = 0,
   /** Width of the track content area (timeline minus labels). Used for accurate time mapping. */
   trackContentWidth,
   onDrop,
@@ -9221,7 +9597,9 @@ function useTimelineDrop({
       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 rowHeight = trackHeight + separatorHeight;
+      const yFromFirstTrack = Math.max(0, relY - separatorHeight);
+      const rawTrackIndex = Math.floor(yFromFirstTrack / Math.max(1, rowHeight));
       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(
@@ -9236,6 +9614,7 @@ function useTimelineDrop({
       tracks.length,
       labelWidth,
       trackHeight,
+      separatorHeight,
       zoomLevel,
       duration,
       trackContentWidth
@@ -19037,66 +19416,766 @@ const setElementColors = (colors) => {
     ...colors
   };
 };
-const TrackElementView = ({
-  element,
-  parentWidth,
-  duration,
-  nextStart,
-  prevEnd,
-  selectedItem,
-  selectedIds,
-  onSelection,
-  onDrag,
-  allowOverlap = false,
-  onDragStateChange,
-  elementColors
+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
 }) => {
-  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 [position, setPosition] = React.useState({
-    start: 0,
-    end: 0
-  });
+  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(() => {
-    setPosition({
-      start: element.getStart(),
-      end: element.getEnd()
-    });
-  }, [element.getStart(), element.getEnd(), parentWidth, duration]);
-  const bind = useDrag(({ delta: [dx] }) => {
-    if (!parentWidth) return;
-    if (dx == 0) return;
-    if (!isDragging2) {
-      setIsDragging(true);
-      onDragStateChange == null ? void 0 : onDragStateChange(true, element);
+    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"
+          }
+        )
+      ]
     }
-    dragType.current = DRAG_TYPE.MOVE;
-    setPosition((prev) => {
-      const span = prev.end - prev.start;
-      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;
-        } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
-          newStart = nextStart - span;
+  );
+  if (typeof document === "undefined") {
+    return null;
+  }
+  return reactDom.createPortal(menu, document.body);
+};
+const waveformCache = /* @__PURE__ */ new Map();
+const buildCacheKey = (src, bucketCount) => `${src}::${bucketCount}`;
+const getSeed = (src) => {
+  let seed = 2166136261;
+  for (let i2 = 0; i2 < src.length; i2 += 1) {
+    seed ^= src.charCodeAt(i2);
+    seed = Math.imul(seed, 16777619);
+  }
+  return seed >>> 0;
+};
+const generateFallbackPeaks = (bucketCount, seed) => {
+  const peaks = new Float32Array(bucketCount);
+  let randomState = seed || 123456789;
+  for (let i2 = 0; i2 < bucketCount; i2 += 1) {
+    randomState = 1103515245 * randomState + 12345 >>> 0;
+    const noise = randomState % 1e3 / 1e3;
+    const shape = 0.35 + 0.65 * Math.abs(Math.sin(i2 * 0.21 + noise * 2.7));
+    peaks[i2] = Math.max(0.08, Math.min(1, shape));
+  }
+  return peaks;
+};
+const computePeaks = (channelData, bucketCount) => {
+  const peaks = new Float32Array(bucketCount);
+  const step = Math.max(1, Math.floor(channelData.length / bucketCount));
+  for (let i2 = 0; i2 < bucketCount; i2 += 1) {
+    const start = i2 * step;
+    const end = Math.min(channelData.length, start + step);
+    let peak = 0;
+    for (let j2 = start; j2 < end; j2 += 1) {
+      const sample = Math.abs(channelData[j2]);
+      if (sample > peak) {
+        peak = sample;
+      }
+    }
+    peaks[i2] = peak;
+  }
+  return peaks;
+};
+const AudioWaveform = ({ src, widthPx, heightPx, label }) => {
+  const canvasRef = React.useRef(null);
+  const [peaks, setPeaks] = React.useState(null);
+  const bucketCount = React.useMemo(
+    () => Math.max(32, Math.min(2048, Math.floor(widthPx / 3))),
+    [widthPx]
+  );
+  React.useEffect(() => {
+    let isCancelled = false;
+    const controller = new AbortController();
+    const loadWaveform = async () => {
+      if (!src) {
+        setPeaks(generateFallbackPeaks(bucketCount, 1));
+        return;
+      }
+      const cacheKey = buildCacheKey(src, bucketCount);
+      const cached = waveformCache.get(cacheKey);
+      if (cached) {
+        setPeaks(cached);
+        return;
+      }
+      try {
+        const response = await fetch(src, { signal: controller.signal });
+        if (!response.ok) {
+          throw new Error(`Failed to fetch audio (${response.status})`);
+        }
+        const arrayBuffer = await response.arrayBuffer();
+        const audioCtx = new AudioContext();
+        const audioBuffer = await audioCtx.decodeAudioData(arrayBuffer.slice(0));
+        const channelData = audioBuffer.getChannelData(0);
+        const computed = computePeaks(channelData, bucketCount);
+        waveformCache.set(cacheKey, computed);
+        if (!isCancelled) {
+          setPeaks(computed);
+        }
+        await audioCtx.close();
+      } catch {
+        if (!isCancelled) {
+          setPeaks(generateFallbackPeaks(bucketCount, getSeed(src)));
         }
       }
-      return {
-        start: newStart,
-        end: newStart + span
-      };
-    });
-  });
-  const bindStartHandle = useDrag(({ delta: [dx], event }) => {
-    if (event) {
-      event.stopPropagation();
-    }
-    if (dx === 0) return;
-    if (isDragging2) {
+    };
+    loadWaveform();
+    return () => {
+      isCancelled = true;
+      controller.abort();
+    };
+  }, [src, bucketCount]);
+  React.useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      return;
+    }
+    const dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.max(1, Math.floor(widthPx * dpr));
+    canvas.height = Math.max(1, Math.floor(heightPx * dpr));
+    canvas.style.width = `${widthPx}px`;
+    canvas.style.height = `${heightPx}px`;
+    const context = canvas.getContext("2d");
+    if (!context) {
+      return;
+    }
+    context.setTransform(dpr, 0, 0, dpr, 0, 0);
+    context.clearRect(0, 0, widthPx, heightPx);
+    const centerY = Math.floor(heightPx / 2) + 0.5;
+    context.strokeStyle = "rgba(255, 255, 255, 0.18)";
+    context.lineWidth = 1;
+    context.beginPath();
+    context.moveTo(0, centerY);
+    context.lineTo(widthPx, centerY);
+    context.stroke();
+    if (!peaks || peaks.length === 0) {
+      return;
+    }
+    const maxHeight = Math.max(6, heightPx - 10);
+    let peakMax = 1e-3;
+    for (let i2 = 0; i2 < peaks.length; i2 += 1) {
+      peakMax = Math.max(peakMax, peaks[i2]);
+    }
+    const gap = 1;
+    const barWidth = Math.max(1, Math.floor(widthPx / peaks.length) - gap);
+    context.fillStyle = "rgba(255, 255, 255, 0.95)";
+    for (let i2 = 0; i2 < peaks.length; i2 += 1) {
+      const normalized = peaks[i2] / peakMax;
+      const waveHeight = Math.max(2, normalized * maxHeight);
+      const x2 = i2 * (barWidth + gap);
+      if (x2 > widthPx) {
+        break;
+      }
+      const y2 = (heightPx - waveHeight) / 2;
+      context.fillRect(x2, y2, barWidth, waveHeight);
+    }
+  }, [widthPx, heightPx, peaks]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "twick-audio-waveform-root", "aria-label": "Audio waveform", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("canvas", { ref: canvasRef, className: "twick-audio-waveform-canvas" }),
+    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "twick-audio-waveform-label", children: label }) : null
+  ] });
+};
+class LRUCache2 {
+  constructor(maxSize = 100) {
+    if (maxSize <= 0) {
+      throw new Error("maxSize must be greater than 0");
+    }
+    this.maxSize = maxSize;
+    this.cache = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Get a value from the cache.
+   * Moves the item to the end (most recently used).
+   */
+  get(key) {
+    const value = this.cache.get(key);
+    if (value === void 0) {
+      return void 0;
+    }
+    this.cache.delete(key);
+    this.cache.set(key, value);
+    return value;
+  }
+  /**
+   * Set a value in the cache.
+   * If cache is full, removes the least recently used item.
+   */
+  set(key, value) {
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    } else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      if (firstKey !== void 0) {
+        this.cache.delete(firstKey);
+      }
+    }
+    this.cache.set(key, value);
+  }
+  /**
+   * Check if a key exists in the cache.
+   */
+  has(key) {
+    return this.cache.has(key);
+  }
+  /**
+   * Delete a key from the cache.
+   */
+  delete(key) {
+    return this.cache.delete(key);
+  }
+  /**
+   * Clear all entries from the cache.
+   */
+  clear() {
+    this.cache.clear();
+  }
+  /**
+   * Get the current size of the cache.
+   */
+  get size() {
+    return this.cache.size;
+  }
+}
+class VideoFrameExtractor2 {
+  constructor(options = {}) {
+    this.frameCache = new LRUCache2(
+      options.maxCacheSize ?? 50
+    );
+    this.videoElements = /* @__PURE__ */ new Map();
+    this.maxVideoElements = options.maxVideoElements ?? 5;
+    this.loadTimeout = options.loadTimeout ?? 15e3;
+    this.jpegQuality = options.jpegQuality ?? 0.8;
+    this.playbackRate = options.playbackRate ?? 1;
+  }
+  /**
+   * Get a frame thumbnail from a video at a specific time.
+   * Uses caching and reuses video elements for optimal performance.
+   * Uses 0.1s instead of 0 when seekTime is 0, since frames at t=0 are often blank.
+   *
+   * @param videoUrl - The URL of the video
+   * @param seekTime - The time in seconds to extract the frame (0 is treated as 0.1)
+   * @returns Promise resolving to a thumbnail image URL (data URL or blob URL)
+   */
+  async getFrame(videoUrl, seekTime = 0.1) {
+    const effectiveSeekTime = seekTime === 0 ? 0.1 : seekTime;
+    const cacheKey = this.getCacheKey(videoUrl, effectiveSeekTime);
+    const cached = this.frameCache.get(cacheKey);
+    if (cached) {
+      return cached;
+    }
+    const videoState = await this.getVideoElement(videoUrl);
+    const thumbnail = await this.extractFrame(videoState.video, effectiveSeekTime);
+    this.frameCache.set(cacheKey, thumbnail);
+    return thumbnail;
+  }
+  /**
+   * Get or create a video element for the given URL.
+   * Reuses existing elements and manages cleanup.
+   */
+  async getVideoElement(videoUrl) {
+    let videoState = this.videoElements.get(videoUrl);
+    if (videoState && videoState.isReady) {
+      videoState.lastUsed = Date.now();
+      return videoState;
+    }
+    if (videoState && videoState.isLoading && videoState.loadPromise) {
+      await videoState.loadPromise;
+      if (videoState.isReady) {
+        videoState.lastUsed = Date.now();
+        return videoState;
+      }
+    }
+    if (this.videoElements.size >= this.maxVideoElements) {
+      this.cleanupOldVideoElements();
+    }
+    videoState = await this.createVideoElement(videoUrl);
+    this.videoElements.set(videoUrl, videoState);
+    videoState.lastUsed = Date.now();
+    return videoState;
+  }
+  /**
+   * Create and initialize a new video element.
+   */
+  async createVideoElement(videoUrl) {
+    const video = document.createElement("video");
+    video.crossOrigin = "anonymous";
+    video.muted = true;
+    video.playsInline = true;
+    video.autoplay = false;
+    video.preload = "auto";
+    video.playbackRate = this.playbackRate;
+    video.style.position = "absolute";
+    video.style.left = "-9999px";
+    video.style.top = "-9999px";
+    video.style.width = "1px";
+    video.style.height = "1px";
+    video.style.opacity = "0";
+    video.style.pointerEvents = "none";
+    video.style.zIndex = "-1";
+    const state = {
+      video,
+      isReady: false,
+      isLoading: true,
+      loadPromise: null,
+      lastUsed: Date.now()
+    };
+    state.loadPromise = new Promise((resolve, reject) => {
+      let timeoutId;
+      const cleanup = () => {
+        if (timeoutId) clearTimeout(timeoutId);
+      };
+      const handleError = () => {
+        var _a;
+        cleanup();
+        state.isLoading = false;
+        reject(new Error(`Failed to load video: ${((_a = video.error) == null ? void 0 : _a.message) || "Unknown error"}`));
+      };
+      const handleLoadedMetadata = () => {
+        cleanup();
+        state.isReady = true;
+        state.isLoading = false;
+        resolve();
+      };
+      video.addEventListener("error", handleError, { once: true });
+      video.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
+      timeoutId = window.setTimeout(() => {
+        cleanup();
+        state.isLoading = false;
+        reject(new Error("Video loading timed out"));
+      }, this.loadTimeout);
+      video.src = videoUrl;
+      document.body.appendChild(video);
+    });
+    try {
+      await state.loadPromise;
+    } catch (error) {
+      if (video.parentNode) {
+        video.remove();
+      }
+      throw error;
+    }
+    return state;
+  }
+  /**
+   * Extract a frame from a video at the specified time.
+   */
+  async extractFrame(video, seekTime) {
+    return new Promise((resolve, reject) => {
+      video.pause();
+      const timeThreshold = 0.1;
+      if (Math.abs(video.currentTime - seekTime) < timeThreshold) {
+        try {
+          const canvas = document.createElement("canvas");
+          const width = video.videoWidth || 640;
+          const height = video.videoHeight || 360;
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.drawImage(video, 0, 0, width, height);
+          try {
+            const dataUrl = canvas.toDataURL("image/jpeg", this.jpegQuality);
+            resolve(dataUrl);
+          } catch {
+            canvas.toBlob(
+              (blob) => {
+                if (!blob) {
+                  reject(new Error("Failed to create Blob"));
+                  return;
+                }
+                const blobUrl = URL.createObjectURL(blob);
+                resolve(blobUrl);
+              },
+              "image/jpeg",
+              this.jpegQuality
+            );
+          }
+          return;
+        } catch (err) {
+          reject(new Error(`Error creating thumbnail: ${err}`));
+          return;
+        }
+      }
+      const handleSeeked = () => {
+        try {
+          const canvas = document.createElement("canvas");
+          const width = video.videoWidth || 640;
+          const height = video.videoHeight || 360;
+          canvas.width = width;
+          canvas.height = height;
+          const ctx = canvas.getContext("2d");
+          if (!ctx) {
+            reject(new Error("Failed to get canvas context"));
+            return;
+          }
+          ctx.drawImage(video, 0, 0, width, height);
+          try {
+            const dataUrl = canvas.toDataURL("image/jpeg", this.jpegQuality);
+            resolve(dataUrl);
+          } catch {
+            canvas.toBlob(
+              (blob) => {
+                if (!blob) {
+                  reject(new Error("Failed to create Blob"));
+                  return;
+                }
+                const blobUrl = URL.createObjectURL(blob);
+                resolve(blobUrl);
+              },
+              "image/jpeg",
+              this.jpegQuality
+            );
+          }
+        } catch (err) {
+          reject(new Error(`Error creating thumbnail: ${err}`));
+        }
+      };
+      video.addEventListener("seeked", handleSeeked, { once: true });
+      const playPromise = video.play();
+      if (playPromise !== void 0) {
+        playPromise.then(() => {
+          video.currentTime = seekTime;
+        }).catch(() => {
+          video.currentTime = seekTime;
+        });
+      } else {
+        video.currentTime = seekTime;
+      }
+    });
+  }
+  /**
+   * Generate cache key for a video URL and seek time.
+   */
+  getCacheKey(videoUrl, seekTime) {
+    const roundedTime = Math.round(seekTime * 100) / 100;
+    return `${videoUrl}:${roundedTime}`;
+  }
+  /**
+   * Cleanup least recently used video elements.
+   */
+  cleanupOldVideoElements() {
+    if (this.videoElements.size < this.maxVideoElements) {
+      return;
+    }
+    const entries = Array.from(this.videoElements.entries());
+    entries.sort((a2, b2) => a2[1].lastUsed - b2[1].lastUsed);
+    const toRemove = entries.slice(0, entries.length - this.maxVideoElements + 1);
+    for (const [url, state] of toRemove) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+      this.videoElements.delete(url);
+    }
+  }
+  /**
+   * Clear the frame cache.
+   */
+  clearCache() {
+    this.frameCache.clear();
+  }
+  /**
+   * Remove a specific video element and clear its cached frames.
+   */
+  removeVideo(videoUrl) {
+    const state = this.videoElements.get(videoUrl);
+    if (state) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+      this.videoElements.delete(videoUrl);
+    }
+    this.frameCache.clear();
+  }
+  /**
+   * Dispose of all video elements and clear caches.
+   * Removes all video elements from the DOM and clears both the frame cache
+   * and video element cache. Call this when the extractor is no longer needed
+   * to prevent memory leaks.
+   */
+  dispose() {
+    for (const state of this.videoElements.values()) {
+      if (state.video.parentNode) {
+        state.video.remove();
+      }
+    }
+    this.videoElements.clear();
+    this.frameCache.clear();
+  }
+}
+let defaultExtractor = null;
+function getDefaultVideoFrameExtractor(options) {
+  if (!defaultExtractor) {
+    defaultExtractor = new VideoFrameExtractor2(options);
+  }
+  return defaultExtractor;
+}
+async function getThumbnailCached(videoUrl, seekTime = 0.1, playbackRate) {
+  const extractor = getDefaultVideoFrameExtractor(
+    void 0
+  );
+  return extractor.getFrame(videoUrl, seekTime);
+}
+const MAX_THUMBNAILS_PER_CLIP = 24;
+const MIN_THUMBNAIL_WIDTH = 40;
+const MAX_THUMBNAIL_WIDTH = 96;
+const videoThumbCache = /* @__PURE__ */ new Map();
+const inFlightVideoThumbs = /* @__PURE__ */ new Map();
+const getThumbCacheKey = (src, seekTime) => `${src}:${Math.round(seekTime * 100) / 100}`;
+const getCachedVideoThumbnail = async (src, seekTime) => {
+  const key = getThumbCacheKey(src, seekTime);
+  const cached = videoThumbCache.get(key);
+  if (cached) {
+    return cached;
+  }
+  const inFlight = inFlightVideoThumbs.get(key);
+  if (inFlight) {
+    return inFlight;
+  }
+  const request = getThumbnailCached(src, seekTime).then((thumb) => {
+    videoThumbCache.set(key, thumb);
+    inFlightVideoThumbs.delete(key);
+    return thumb;
+  }).catch(() => {
+    inFlightVideoThumbs.delete(key);
+    throw new Error("Thumbnail extraction failed");
+  });
+  inFlightVideoThumbs.set(key, request);
+  return request;
+};
+const runWithConcurrencyLimit = async (tasks, concurrency) => {
+  const active = /* @__PURE__ */ new Set();
+  for (const task of tasks) {
+    const promise = task();
+    active.add(promise);
+    promise.finally(() => active.delete(promise));
+    if (active.size >= concurrency) {
+      await Promise.race(active);
+    }
+  }
+  await Promise.all(active);
+};
+const getThumbnailCount = (widthPx, heightPx) => {
+  const targetThumbWidth = Math.max(
+    MIN_THUMBNAIL_WIDTH,
+    Math.min(MAX_THUMBNAIL_WIDTH, Math.round(heightPx * 1.5))
+  );
+  return Math.max(
+    1,
+    Math.min(MAX_THUMBNAILS_PER_CLIP, Math.ceil(widthPx / targetThumbWidth))
+  );
+};
+const ImageTimelineStrip = ({ src, widthPx, heightPx }) => {
+  const count = React.useMemo(() => getThumbnailCount(widthPx, heightPx), [widthPx, heightPx]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-media-strip twick-media-strip-image", "aria-hidden": "true", children: Array.from({ length: count }, (_2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src,
+      className: "twick-media-strip-thumb",
+      alt: "",
+      draggable: false
+    },
+    `${src}-${index}`
+  )) });
+};
+const VideoTimelineStrip = ({
+  src,
+  widthPx,
+  heightPx,
+  durationSec,
+  mediaOffsetSec = 0,
+  playbackRate = 1,
+  mediaDurationSec
+}) => {
+  const count = React.useMemo(() => getThumbnailCount(widthPx, heightPx), [widthPx, heightPx]);
+  const [thumbs, setThumbs] = React.useState({});
+  const slots = React.useMemo(() => {
+    const timelineDuration = Math.max(1e-3, durationSec);
+    return Array.from({ length: count }, (_2, index) => {
+      const progress2 = count === 1 ? 0 : index / (count - 1);
+      const timelineTime = progress2 * timelineDuration;
+      let mediaTime = Math.max(0, mediaOffsetSec + timelineTime * playbackRate);
+      if (typeof mediaDurationSec === "number" && mediaDurationSec > 0) {
+        mediaTime = Math.min(mediaTime, Math.max(0, mediaDurationSec - 0.05));
+      }
+      return mediaTime;
+    });
+  }, [count, durationSec, mediaOffsetSec, playbackRate, mediaDurationSec]);
+  React.useEffect(() => {
+    let cancelled = false;
+    const loadThumbs = async () => {
+      const nextThumbs = {};
+      const tasks = slots.map((seekTime, index) => async () => {
+        try {
+          const thumb = await getCachedVideoThumbnail(src, seekTime);
+          nextThumbs[index] = thumb;
+        } catch {
+        }
+      });
+      await runWithConcurrencyLimit(tasks, 3);
+      if (!cancelled) {
+        setThumbs(nextThumbs);
+      }
+    };
+    loadThumbs();
+    return () => {
+      cancelled = true;
+    };
+  }, [src, slots]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "twick-media-strip twick-media-strip-video", "aria-hidden": "true", children: slots.map((_2, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: thumbs[index],
+      className: "twick-media-strip-thumb",
+      alt: "",
+      draggable: false
+    },
+    `${src}-${index}`
+  )) });
+};
+const TrackElementView = ({
+  element,
+  parentWidth,
+  duration,
+  nextStart,
+  prevEnd,
+  selectedItem,
+  selectedIds,
+  onSelection,
+  onDrag,
+  allowOverlap = false,
+  onDragStateChange,
+  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
+  });
+  React.useEffect(() => {
+    setPosition({
+      start: element.getStart(),
+      end: element.getEnd()
+    });
+  }, [element.getStart(), element.getEnd(), parentWidth, duration]);
+  const bind = useDrag(({ delta: [dx] }) => {
+    if (!parentWidth) return;
+    if (dx == 0) return;
+    if (!isDragging2) {
+      setIsDragging(true);
+      onDragStateChange == null ? void 0 : onDragStateChange(true, element);
+    }
+    dragType.current = DRAG_TYPE.MOVE;
+    setPosition((prev) => {
+      const span = prev.end - prev.start;
+      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;
+        } else if (nextStart !== null && !allowOverlap && newStart + span > nextStart) {
+          newStart = nextStart - span;
+        }
+      }
+      newStart = Math.max(0, Math.min(newStart, duration - span));
+      return {
+        start: newStart,
+        end: newStart + span
+      };
+    });
+  });
+  const bindStartHandle = useDrag(({ delta: [dx], event }) => {
+    if (event) {
+      event.stopPropagation();
+    }
+    if (dx === 0) return;
+    if (isDragging2) {
       setIsDragging(false);
       onDragStateChange == null ? void 0 : onDragStateChange(false, element);
     }
@@ -19107,6 +20186,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 +20211,7 @@ const TrackElementView = ({
           newEnd = nextStart;
         }
       }
+      newEnd = Math.max(prev.start + MIN_DURATION, Math.min(newEnd, duration));
       return {
         start: prev.start,
         end: newEnd
@@ -19168,7 +20249,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];
     }
@@ -19177,10 +20258,32 @@ const TrackElementView = ({
   const isSelected = React.useMemo(() => {
     return selectedIds.has(element.getId());
   }, [selectedIds, element]);
+  const isAudioElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.AUDIO;
+  const isVideoElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.VIDEO;
+  const isImageElement = element.getType() === timeline.TIMELINE_ELEMENT_TYPE.IMAGE;
+  const elementLabel = 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();
+  const mediaSrc = (isAudioElement || isVideoElement || isImageElement) && element.getSrc ? element.getSrc() : void 0;
+  const mediaOffsetSec = isVideoElement && element.getStartAt ? element.getStartAt() : 0;
+  const playbackRate = isVideoElement && element.getPlaybackRate ? element.getPlaybackRate() : 1;
+  const mediaDurationSec = isVideoElement && element.getMediaDuration ? element.getMediaDuration() : void 0;
+  const elementWidthPx = Math.max(
+    1,
+    (position.end - position.start) / Math.max(duration, MIN_DURATION) * parentWidth
+  );
   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" : ""}`,
+    className: `twick-track-element ${isSelected ? "twick-track-element-selected" : "twick-track-element-default"} ${isDragging2 ? "twick-track-element-dragging" : ""} ${isAudioElement ? "twick-track-element-audio" : ""}`,
     onMouseDown: (e3) => {
       if (e3.target === ref.current) {
         setLastPos();
@@ -19198,6 +20301,7 @@ const TrackElementView = ({
         onSelection(element, e3);
       }
     },
+    onContextMenu: handleContextMenu,
     style: {
       backgroundColor: getElementColor(element.getType()),
       width: `${(position.end - position.start) / duration * 100}%`,
@@ -19205,39 +20309,84 @@ 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 ${isAudioElement ? "twick-track-element-content-audio" : ""}`,
+          children: isAudioElement ? /* @__PURE__ */ jsxRuntime.jsx(
+            AudioWaveform,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46,
+              label: elementLabel
+            }
+          ) : isVideoElement && mediaSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+            VideoTimelineStrip,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46,
+              durationSec: Math.max(0, element.getDuration()),
+              mediaOffsetSec,
+              playbackRate,
+              mediaDurationSec
+            }
+          ) : isImageElement && mediaSrc ? /* @__PURE__ */ jsxRuntime.jsx(
+            ImageTimelineStrip,
+            {
+              src: mediaSrc,
+              widthPx: elementWidthPx,
+              heightPx: 46
+            }
+          ) : elementLabel
+        }
+      ),
+      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 +20399,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 +20435,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
         },
@@ -19339,6 +20502,7 @@ function useMarqueeSelection({
   labelWidth,
   trackCount,
   trackHeight,
+  separatorHeight = 2,
   tracks,
   containerRef,
   onMarqueeSelect,
@@ -19392,7 +20556,7 @@ function useMarqueeSelection({
     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 rowHeight = trackHeight + separatorHeight;
     const startTrackIdx = Math.max(0, Math.floor(top / rowHeight));
     const endTrackIdx = Math.min(
       trackCount - 1,
@@ -19421,6 +20585,7 @@ function useMarqueeSelection({
     labelWidth,
     trackCount,
     trackHeight,
+    separatorHeight,
     tracks,
     onMarqueeSelect,
     onEmptyClick,
@@ -19557,7 +20722,7 @@ function getTrackOrSeparatorAt(clientY, containerTop, trackHeight) {
   return { type: "separator", separatorIndex: index + 1 };
 }
 const LABEL_WIDTH = 40;
-const TRACK_HEIGHT = 44;
+const TRACK_HEIGHT = 52;
 const SEPARATOR_HEIGHT = 6;
 function TimelineView({
   zoomLevel,
@@ -19580,7 +20745,11 @@ function TimelineView({
   onDropOnTimeline,
   videoResolution,
   enableDropOnTimeline = true,
-  chapters = []
+  chapters = [],
+  currentTime = 0,
+  onContextMenuTarget,
+  onDeleteElement,
+  onSplitElement
 }) {
   const containerRef = React.useRef(null);
   const seekContainerRef = React.useRef(null);
@@ -19696,6 +20865,7 @@ function TimelineView({
     labelWidth: LABEL_WIDTH,
     trackCount: (tracks == null ? void 0 : tracks.length) ?? 0,
     trackHeight: TRACK_HEIGHT,
+    separatorHeight: SEPARATOR_HEIGHT,
     tracks: tracks ?? [],
     containerRef: timelineContentRef,
     onMarqueeSelect,
@@ -19709,6 +20879,7 @@ function TimelineView({
     zoomLevel,
     labelWidth: LABEL_WIDTH,
     trackHeight: TRACK_HEIGHT,
+    separatorHeight: SEPARATOR_HEIGHT,
     trackContentWidth: timelineWidth - LABEL_WIDTH,
     onDrop: onDropOnTimeline ?? (async () => {
     }),
@@ -19804,7 +20975,7 @@ function TimelineView({
                   style: {
                     position: "absolute",
                     left: LABEL_WIDTH + preview.timeSec / duration * (timelineWidth - LABEL_WIDTH),
-                    top: preview.trackIndex * TRACK_HEIGHT + 2,
+                    top: SEPARATOR_HEIGHT + preview.trackIndex * (TRACK_HEIGHT + SEPARATOR_HEIGHT) + 2,
                     width: preview.widthPct / 100 * (timelineWidth - LABEL_WIDTH),
                     height: TRACK_HEIGHT - 4
                   }
@@ -19849,7 +21020,11 @@ function TimelineView({
                         onDragStateChange: (isDragging2, el) => {
                           setDraggingElementId(isDragging2 && el ? el.getId() : null);
                         },
-                        elementColors
+                        elementColors,
+                        currentTime,
+                        onContextMenuTarget,
+                        onDeleteElement,
+                        onSplitElement
                       }
                     )
                   ] }),
@@ -19908,7 +21083,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 {
@@ -20021,6 +21197,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(
@@ -20101,8 +21309,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,
@@ -20123,6 +21332,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;
@@ -20170,6 +21385,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) ?? [],
@@ -20253,11 +21472,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);
@@ -20284,9 +21504,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" })
         }
       ),
@@ -20400,37 +21620,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;