@twick/timeline 0.14.0

package/dist/index.mjs

@@ -0,0 +1,2628 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { jsx } from "react/jsx-runtime";
+import { useState, createContext, useContext, useRef, useMemo, useEffect } from "react";
+const PLAYER_STATE = {
+  REFRESH: "Refresh",
+  PLAYING: "Playing",
+  PAUSED: "Paused"
+};
+const CAPTION_STYLE = {
+  WORD_BG_HIGHLIGHT: "highlight_bg",
+  WORD_BY_WORD: "word_by_word",
+  WORD_BY_WORD_WITH_BG: "word_by_word_with_bg"
+};
+const CAPTION_STYLE_OPTIONS = {
+  [CAPTION_STYLE.WORD_BG_HIGHLIGHT]: {
+    label: "Highlight Background",
+    value: CAPTION_STYLE.WORD_BG_HIGHLIGHT
+  },
+  [CAPTION_STYLE.WORD_BY_WORD]: {
+    label: "Word by Word",
+    value: CAPTION_STYLE.WORD_BY_WORD
+  },
+  [CAPTION_STYLE.WORD_BY_WORD_WITH_BG]: {
+    label: "Word with Background",
+    value: CAPTION_STYLE.WORD_BY_WORD_WITH_BG
+  }
+};
+const CAPTION_FONT = {
+  size: 40
+};
+const CAPTION_COLOR = {
+  text: "#ffffff",
+  highlight: "#ff4081",
+  bgColor: "#8C52FF"
+};
+const WORDS_PER_PHRASE = 4;
+const TIMELINE_ACTION = {
+  NONE: "none",
+  SET_PLAYER_STATE: "setPlayerState",
+  UPDATE_PLAYER_DATA: "updatePlayerData",
+  ON_PLAYER_UPDATED: "onPlayerUpdated"
+};
+const TIMELINE_ELEMENT_TYPE = {
+  VIDEO: "video",
+  CAPTION: "caption",
+  IMAGE: "image",
+  AUDIO: "audio",
+  TEXT: "text",
+  RECT: "rect",
+  CIRCLE: "circle",
+  ICON: "icon"
+};
+const PROCESS_STATE = {
+  IDLE: "Idle",
+  PROCESSING: "Processing",
+  COMPLETED: "Completed",
+  FAILED: "Failed"
+};
+const getDecimalNumber = (num, precision = 3) => {
+  return Number(num.toFixed(precision));
+};
+const getTotalDuration = (tracks) => {
+  return (tracks || []).reduce(
+    (maxDuration, timeline) => Math.max(
+      maxDuration,
+      ((timeline == null ? void 0 : timeline.elements) || []).reduce(
+        (timelineDuration, element) => Math.max(timelineDuration, element.e),
+        0
+      )
+    ),
+    0
+  );
+};
+const generateShortUuid = () => {
+  return "xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0, v = c === "x" ? r : r & 3 | 8;
+    return v.toString(16);
+  });
+};
+const getCurrentElements = (currentTime, tracks) => {
+  const currentElements = [];
+  if (tracks == null ? void 0 : tracks.length) {
+    for (let i = 0; i < tracks.length; i++) {
+      if (tracks[i]) {
+        const elements = tracks[i].getElements();
+        for (let j = 0; j < elements.length; j++) {
+          const element = elements[j];
+          if (element.getStart() <= currentTime && element.getEnd() >= currentTime) {
+            currentElements.push(element);
+          }
+        }
+      }
+    }
+  }
+  return currentElements;
+};
+const canSplitElement = (element, currentTime) => {
+  return element.getStart() <= currentTime && element.getEnd() >= currentTime;
+};
+const isElementId = (id) => id.startsWith("e-");
+const isTrackId = (id) => id.startsWith("t-");
+const imageDimensionsCache = {};
+const videoMetaCache = {};
+const audioDurationCache = {};
+const getAudioDuration = (audioSrc) => {
+  if (audioDurationCache[audioSrc]) {
+    return Promise.resolve(audioDurationCache[audioSrc]);
+  }
+  return new Promise((resolve, reject) => {
+    const audio = document.createElement("audio");
+    audio.preload = "metadata";
+    const isSafeUrl = /^(https?:|blob:|data:audio\/)/i.test(audioSrc);
+    if (!isSafeUrl) {
+      throw new Error("Unsafe audio source URL");
+    }
+    audio.src = audioSrc;
+    audio.onloadedmetadata = () => {
+      const duration = audio.duration;
+      audioDurationCache[audioSrc] = duration;
+      resolve(duration);
+    };
+    audio.onerror = () => {
+      reject(new Error("Failed to load audio metadata"));
+    };
+  });
+};
+const concurrencyLimit = 5;
+let activeCount = 0;
+const queue = [];
+function runNext() {
+  if (queue.length === 0 || activeCount >= concurrencyLimit) return;
+  const next = queue.shift();
+  if (next) {
+    activeCount++;
+    next();
+  }
+}
+function limit(fn) {
+  return new Promise((resolve, reject) => {
+    const task = () => {
+      fn().then(resolve).catch(reject).finally(() => {
+        activeCount--;
+        runNext();
+      });
+    };
+    if (activeCount < concurrencyLimit) {
+      activeCount++;
+      task();
+    } else {
+      queue.push(task);
+    }
+  });
+}
+const loadImageDimensions = (url) => {
+  return new Promise((resolve, reject) => {
+    if (typeof document === "undefined") {
+      reject(new Error("getImageDimensions() is only available in the browser."));
+      return;
+    }
+    const img = new Image();
+    img.onload = () => {
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+    img.onerror = reject;
+    img.src = url;
+  });
+};
+const getImageDimensions = (url) => {
+  if (imageDimensionsCache[url]) {
+    return Promise.resolve(imageDimensionsCache[url]);
+  }
+  return limit(() => loadImageDimensions(url)).then((dimensions) => {
+    imageDimensionsCache[url] = dimensions;
+    return dimensions;
+  });
+};
+const getVideoMeta = (videoSrc) => {
+  if (videoMetaCache[videoSrc]) {
+    return Promise.resolve(videoMetaCache[videoSrc]);
+  }
+  return new Promise((resolve, reject) => {
+    const video = document.createElement("video");
+    video.preload = "metadata";
+    const isSafeUrl = /^(https?:|blob:|data:video\/)/i.test(videoSrc);
+    if (!isSafeUrl) {
+      reject(new Error("Unsafe video source URL"));
+      return;
+    }
+    video.src = videoSrc;
+    video.onloadedmetadata = () => {
+      const meta = {
+        width: video.videoWidth,
+        height: video.videoHeight,
+        duration: video.duration
+      };
+      videoMetaCache[videoSrc] = meta;
+      resolve(meta);
+    };
+    video.onerror = () => reject(new Error("Failed to load video metadata"));
+  });
+};
+const getObjectFitSize = (objectFit, elementSize, containerSize) => {
+  const elementAspectRatio = elementSize.width / elementSize.height;
+  const containerAspectRatio = containerSize.width / containerSize.height;
+  switch (objectFit) {
+    case "contain":
+      if (elementAspectRatio > containerAspectRatio) {
+        return {
+          width: containerSize.width,
+          height: containerSize.width / elementAspectRatio
+        };
+      } else {
+        return {
+          width: containerSize.height * elementAspectRatio,
+          height: containerSize.height
+        };
+      }
+    case "cover":
+      if (elementAspectRatio > containerAspectRatio) {
+        return {
+          width: containerSize.height * elementAspectRatio,
+          height: containerSize.height
+        };
+      } else {
+        return {
+          width: containerSize.width,
+          height: containerSize.width / elementAspectRatio
+        };
+      }
+    case "fill":
+      return {
+        width: containerSize.width,
+        height: containerSize.height
+      };
+    default:
+      return {
+        width: elementSize.width,
+        height: elementSize.height
+      };
+  }
+};
+class TrackElement {
+  constructor(type, id) {
+    __publicField(this, "id");
+    __publicField(this, "type");
+    __publicField(this, "s");
+    __publicField(this, "e");
+    __publicField(this, "trackId");
+    __publicField(this, "name");
+    __publicField(this, "animation");
+    __publicField(this, "props");
+    this.id = id ?? `e-${generateShortUuid()}`;
+    this.type = type;
+    this.props = {
+      x: 0,
+      y: 0
+    };
+  }
+  getId() {
+    return this.id;
+  }
+  getType() {
+    return this.type;
+  }
+  getStart() {
+    return this.s;
+  }
+  getEnd() {
+    return this.e;
+  }
+  getDuration() {
+    return this.e - this.s;
+  }
+  getTrackId() {
+    return this.trackId;
+  }
+  getProps() {
+    return this.props;
+  }
+  getName() {
+    return this.name;
+  }
+  getAnimation() {
+    return this.animation;
+  }
+  getPosition() {
+    var _a, _b;
+    return {
+      x: ((_a = this.props) == null ? void 0 : _a.x) ?? 0,
+      y: ((_b = this.props) == null ? void 0 : _b.y) ?? 0
+    };
+  }
+  setId(id) {
+    this.id = id;
+    return this;
+  }
+  setType(type) {
+    this.type = type;
+    return this;
+  }
+  setStart(s) {
+    this.s = Math.max(0, s);
+    return this;
+  }
+  setEnd(e) {
+    this.e = Math.max(this.s ?? 0, e);
+    return this;
+  }
+  setTrackId(trackId) {
+    this.trackId = trackId;
+    return this;
+  }
+  setName(name) {
+    this.name = name;
+    return this;
+  }
+  setAnimation(animation) {
+    this.animation = animation;
+    return this;
+  }
+  setPosition(position) {
+    this.props.x = position.x;
+    this.props.y = position.y;
+    return this;
+  }
+  setProps(props) {
+    this.props = structuredClone(props);
+    return this;
+  }
+}
+class VideoElement extends TrackElement {
+  constructor(src, parentSize) {
+    super(TIMELINE_ELEMENT_TYPE.VIDEO);
+    __publicField(this, "baseSize");
+    __publicField(this, "mediaDuration");
+    __publicField(this, "parentSize");
+    __publicField(this, "backgroundColor");
+    __publicField(this, "objectFit");
+    __publicField(this, "frameEffects");
+    __publicField(this, "frame");
+    this.objectFit = "cover";
+    this.frameEffects = [];
+    this.parentSize = parentSize;
+    this.props = {
+      src,
+      play: true,
+      playbackRate: 1,
+      time: 0,
+      mediaFilter: "none",
+      volume: 1
+    };
+  }
+  getParentSize() {
+    return this.parentSize;
+  }
+  getFrame() {
+    return this.frame;
+  }
+  getFrameEffects() {
+    return this.frameEffects;
+  }
+  getBackgroundColor() {
+    return this.backgroundColor;
+  }
+  getObjectFit() {
+    return this.objectFit;
+  }
+  getMediaDuration() {
+    return this.mediaDuration;
+  }
+  getStartAt() {
+    return this.props.time || 0;
+  }
+  getPosition() {
+    return {
+      x: this.frame.x ?? 0,
+      y: this.frame.y ?? 0
+    };
+  }
+  async updateVideoMeta(updateFrame = true) {
+    const meta = await getVideoMeta(this.props.src);
+    if (updateFrame) {
+      const baseSize = getObjectFitSize(
+        "contain",
+        { width: meta.width, height: meta.height },
+        this.parentSize
+      );
+      this.frame = {
+        ...this.frame,
+        size: [baseSize.width, baseSize.height]
+      };
+    }
+    this.mediaDuration = meta.duration;
+  }
+  setPosition(position) {
+    this.frame.x = position.x;
+    this.frame.y = position.y;
+    return this;
+  }
+  async setSrc(src) {
+    this.props.src = src;
+    await this.updateVideoMeta();
+    return this;
+  }
+  setMediaDuration(mediaDuration) {
+    this.mediaDuration = mediaDuration;
+    return this;
+  }
+  setParentSize(parentSize) {
+    this.parentSize = structuredClone(parentSize);
+    return this;
+  }
+  setObjectFit(objectFit) {
+    this.objectFit = objectFit;
+    return this;
+  }
+  setFrame(frame) {
+    this.frame = structuredClone(frame);
+    return this;
+  }
+  setPlay(play) {
+    this.props.play = play;
+    return this;
+  }
+  setPlaybackRate(playbackRate) {
+    this.props.playbackRate = playbackRate;
+    return this;
+  }
+  setStartAt(time) {
+    this.props.time = Math.max(0, time);
+    return this;
+  }
+  setMediaFilter(mediaFilter) {
+    this.props.mediaFilter = mediaFilter;
+    return this;
+  }
+  setVolume(volume) {
+    this.props.volume = volume;
+    return this;
+  }
+  setBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    return this;
+  }
+  setProps(props) {
+    this.props = {
+      play: this.props.play,
+      ...structuredClone(props),
+      src: this.props.src
+    };
+    return this;
+  }
+  setFrameEffects(frameEffects) {
+    this.frameEffects = frameEffects;
+    return this;
+  }
+  addFrameEffect(frameEffect) {
+    var _a;
+    (_a = this.frameEffects) == null ? void 0 : _a.push(frameEffect);
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitVideoElement(this);
+  }
+}
+class AudioElement extends TrackElement {
+  constructor(src) {
+    super(TIMELINE_ELEMENT_TYPE.AUDIO);
+    __publicField(this, "mediaDuration");
+    this.props = {
+      src,
+      time: 0,
+      play: true,
+      playbackRate: 1,
+      volume: 1,
+      loop: false
+    };
+  }
+  getMediaDuration() {
+    return this.mediaDuration;
+  }
+  getStartAt() {
+    return this.props.time || 0;
+  }
+  async updateAudioMeta() {
+    this.mediaDuration = await getAudioDuration(this.props.src);
+  }
+  async setSrc(src) {
+    this.props.src = src;
+    await this.updateAudioMeta();
+    return this;
+  }
+  setMediaDuration(mediaDuration) {
+    this.mediaDuration = mediaDuration;
+    return this;
+  }
+  setVolume(volume) {
+    this.props.volume = volume;
+    return this;
+  }
+  setLoop(loop) {
+    this.props.loop = loop;
+    return this;
+  }
+  setStartAt(time) {
+    this.props.time = Math.max(0, time);
+    return this;
+  }
+  setPlaybackRate(playbackRate) {
+    this.props.playbackRate = playbackRate;
+    return this;
+  }
+  setProps(props) {
+    this.props = {
+      play: this.props.play,
+      ...structuredClone(props),
+      src: this.props.src
+    };
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitAudioElement(this);
+  }
+}
+class ImageElement extends TrackElement {
+  constructor(src, parentSize) {
+    super(TIMELINE_ELEMENT_TYPE.IMAGE);
+    __publicField(this, "backgroundColor");
+    __publicField(this, "parentSize");
+    __publicField(this, "objectFit");
+    __publicField(this, "frameEffects");
+    __publicField(this, "frame");
+    this.parentSize = parentSize;
+    this.objectFit = "cover";
+    this.frameEffects = [];
+    this.props = {
+      src,
+      mediaFilter: "none"
+    };
+    this.frame = {
+      x: 0,
+      y: 0
+    };
+  }
+  getParentSize() {
+    return this.parentSize;
+  }
+  getFrame() {
+    return this.frame;
+  }
+  getFrameEffects() {
+    return this.frameEffects;
+  }
+  getBackgroundColor() {
+    return this.backgroundColor;
+  }
+  getObjectFit() {
+    return this.objectFit;
+  }
+  getPosition() {
+    return {
+      x: this.frame.x ?? 0,
+      y: this.frame.y ?? 0
+    };
+  }
+  async updateImageMeta(updateFrame = true) {
+    const meta = await getImageDimensions(this.props.src);
+    if (updateFrame) {
+      const baseSize = getObjectFitSize(
+        "contain",
+        { width: meta.width, height: meta.height },
+        this.parentSize
+      );
+      this.frame = {
+        size: [baseSize.width, baseSize.height],
+        ...this.frame
+      };
+    }
+  }
+  setPosition(position) {
+    this.frame.x = position.x;
+    this.frame.y = position.y;
+    return this;
+  }
+  async setSrc(src) {
+    this.props.src = src;
+    await this.updateImageMeta();
+    return this;
+  }
+  setObjectFit(objectFit) {
+    this.objectFit = objectFit;
+    return this;
+  }
+  setFrame(frame) {
+    this.frame = structuredClone(frame);
+    return this;
+  }
+  setParentSize(parentSize) {
+    this.parentSize = structuredClone(parentSize);
+    return this;
+  }
+  setMediaFilter(mediaFilter) {
+    this.props.mediaFilter = mediaFilter;
+    return this;
+  }
+  setBackgroundColor(backgroundColor) {
+    this.backgroundColor = backgroundColor;
+    return this;
+  }
+  setProps(props) {
+    this.props = { ...structuredClone(props), src: this.props.src };
+    return this;
+  }
+  setFrameEffects(frameEffects) {
+    this.frameEffects = frameEffects;
+    return this;
+  }
+  addFrameEffect(frameEffect) {
+    var _a;
+    (_a = this.frameEffects) == null ? void 0 : _a.push(frameEffect);
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitImageElement(this);
+  }
+}
+class TextElement extends TrackElement {
+  constructor(text) {
+    super(TIMELINE_ELEMENT_TYPE.TEXT);
+    __publicField(this, "textEffect");
+    this.props = {
+      text,
+      fill: "#888888"
+      //default-grey
+    };
+  }
+  getTextEffect() {
+    return this.textEffect;
+  }
+  getText() {
+    return this.props.text;
+  }
+  getStrokeColor() {
+    return this.props.stroke;
+  }
+  getLineWidth() {
+    return this.props.lineWidth;
+  }
+  setText(text) {
+    this.props.text = text;
+    return this;
+  }
+  setFill(fill) {
+    this.props.fill = fill;
+    return this;
+  }
+  setRotation(rotation) {
+    this.props.rotation = rotation;
+    return this;
+  }
+  setFontSize(fontSize) {
+    this.props.fontSize = fontSize;
+    return this;
+  }
+  setFontFamily(fontFamily) {
+    this.props.fontFamily = fontFamily;
+    return this;
+  }
+  setFontWeight(fontWeight) {
+    this.props.fontWeight = fontWeight;
+    return this;
+  }
+  setFontStyle(fontStyle) {
+    this.props.fontStyle = fontStyle;
+    return this;
+  }
+  setTextEffect(textEffect) {
+    this.textEffect = textEffect;
+    return this;
+  }
+  setTextAlign(textAlign) {
+    this.props.textAlign = textAlign;
+    return this;
+  }
+  setStrokeColor(stroke) {
+    this.props.stroke = stroke;
+    return this;
+  }
+  setLineWidth(lineWidth) {
+    this.props.lineWidth = lineWidth;
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitTextElement(this);
+  }
+}
+class CaptionElement extends TrackElement {
+  constructor(t, start, end) {
+    super(TIMELINE_ELEMENT_TYPE.CAPTION);
+    __publicField(this, "t");
+    this.t = t;
+    this.s = start;
+    this.e = end;
+  }
+  getText() {
+    return this.t;
+  }
+  setText(t) {
+    this.t = t;
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitCaptionElement(this);
+  }
+}
+class IconElement extends TrackElement {
+  constructor(src, size) {
+    super(TIMELINE_ELEMENT_TYPE.ICON);
+    this.props = {
+      src,
+      size
+    };
+  }
+  accept(visitor) {
+    return visitor.visitIconElement(this);
+  }
+}
+class CircleElement extends TrackElement {
+  constructor(fill, radius) {
+    super(TIMELINE_ELEMENT_TYPE.CIRCLE);
+    this.props = {
+      radius,
+      fill
+    };
+  }
+  getFill() {
+    return this.props.fill;
+  }
+  getRadius() {
+    return this.props.radius;
+  }
+  setFill(fill) {
+    this.props.fill = fill;
+    return this;
+  }
+  setRadius(radius) {
+    this.props.radius = radius;
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitCircleElement(this);
+  }
+}
+class RectElement extends TrackElement {
+  constructor(fill, size) {
+    super(TIMELINE_ELEMENT_TYPE.RECT);
+    this.props = {
+      width: size.width,
+      height: size.height,
+      fill
+    };
+  }
+  setFill(fill) {
+    this.props.fill = fill;
+    return this;
+  }
+  setSize(size) {
+    this.props.width = size.width;
+    this.props.height = size.height;
+    return this;
+  }
+  accept(visitor) {
+    return visitor.visitRectElement(this);
+  }
+}
+class ElementAnimation {
+  constructor(name) {
+    __publicField(this, "name");
+    __publicField(this, "interval");
+    __publicField(this, "intensity");
+    __publicField(this, "animate");
+    __publicField(this, "mode");
+    __publicField(this, "direction");
+    this.name = name;
+  }
+  getName() {
+    return this.name;
+  }
+  getInterval() {
+    return this.interval;
+  }
+  getIntensity() {
+    return this.intensity;
+  }
+  getAnimate() {
+    return this.animate;
+  }
+  getMode() {
+    return this.mode;
+  }
+  getDirection() {
+    return this.direction;
+  }
+  setInterval(interval) {
+    this.interval = interval;
+  }
+  setIntensity(intensity) {
+    this.intensity = intensity;
+  }
+  setAnimate(animate) {
+    this.animate = animate;
+  }
+  setMode(mode) {
+    this.mode = mode;
+  }
+  setDirection(direction) {
+    this.direction = direction;
+  }
+  toJSON() {
+    return {
+      name: this.name,
+      interval: this.interval,
+      intensity: this.intensity,
+      animate: this.animate,
+      mode: this.mode,
+      direction: this.direction
+    };
+  }
+  static fromJSON(json) {
+    const animation = new ElementAnimation(json.name);
+    animation.setInterval(json.interval);
+    animation.setIntensity(json.intensity);
+    animation.setAnimate(json.animate);
+    animation.setMode(json.mode);
+    animation.setDirection(json.direction);
+    return animation;
+  }
+}
+class ElementFrameEffect {
+  constructor(start, end) {
+    __publicField(this, "s");
+    __publicField(this, "e");
+    __publicField(this, "props");
+    this.s = start;
+    this.e = end;
+  }
+  setProps(props) {
+    this.props = props;
+  }
+  getProps() {
+    return this.props;
+  }
+  getStart() {
+    return this.s;
+  }
+  getEnd() {
+    return this.e;
+  }
+  toJSON() {
+    return {
+      s: this.s,
+      e: this.e,
+      props: this.props
+    };
+  }
+  static fromJSON(json) {
+    const effect = new ElementFrameEffect(json.s, json.e);
+    effect.setProps(json.props);
+    return effect;
+  }
+}
+class ElementTextEffect {
+  constructor(name) {
+    __publicField(this, "name");
+    __publicField(this, "duration");
+    __publicField(this, "delay");
+    __publicField(this, "bufferTime");
+    this.name = name;
+  }
+  getName() {
+    return this.name;
+  }
+  getDuration() {
+    return this.duration;
+  }
+  getDelay() {
+    return this.delay;
+  }
+  getBufferTime() {
+    return this.bufferTime;
+  }
+  setName(name) {
+    this.name = name;
+  }
+  setDuration(duration) {
+    this.duration = duration;
+  }
+  setDelay(delay) {
+    this.delay = delay;
+  }
+  setBufferTime(bufferTime) {
+    this.bufferTime = bufferTime;
+  }
+  toJSON() {
+    return {
+      name: this.name,
+      delay: this.delay,
+      duration: this.duration,
+      bufferTime: this.bufferTime
+    };
+  }
+  static fromJSON(json) {
+    const effect = new ElementTextEffect(json.name);
+    effect.setDelay(json.delay);
+    effect.setDuration(json.duration);
+    effect.setBufferTime(json.bufferTime);
+    return effect;
+  }
+}
+class ElementDeserializer {
+  static deserializeBaseElement(element, json) {
+    if (json.id) element.setId(json.id);
+    if (json.trackId) element.setTrackId(json.trackId);
+    if (json.s !== void 0) element.setStart(json.s);
+    if (json.e !== void 0) element.setEnd(json.e);
+    if (json.props) element.setProps(json.props);
+    if (json.animation) element.setAnimation(ElementAnimation.fromJSON(json.animation));
+  }
+  static deserializeVideoElement(json) {
+    var _a;
+    const parentSize = json.frame && json.frame.size ? { width: json.frame.size[0], height: json.frame.size[1] } : { width: 0, height: 0 };
+    const videoElement = new VideoElement(((_a = json.props) == null ? void 0 : _a.src) || "", parentSize);
+    ElementDeserializer.deserializeBaseElement(videoElement, json);
+    if (json.mediaDuration !== void 0) videoElement.setMediaDuration(json.mediaDuration);
+    if (json.objectFit) videoElement.setObjectFit(json.objectFit);
+    if (json.frame) videoElement.setFrame(json.frame);
+    if (json.frameEffects) videoElement.setFrameEffects(json.frameEffects.map((frameEffect) => ElementFrameEffect.fromJSON(frameEffect)));
+    if (json.backgroundColor) videoElement.setBackgroundColor(json.backgroundColor);
+    return videoElement;
+  }
+  static deserializeAudioElement(json) {
+    var _a;
+    const audioElement = new AudioElement(((_a = json.props) == null ? void 0 : _a.src) || "");
+    ElementDeserializer.deserializeBaseElement(audioElement, json);
+    if (json.mediaDuration !== void 0) audioElement.setMediaDuration(json.mediaDuration);
+    return audioElement;
+  }
+  static deserializeImageElement(json) {
+    var _a;
+    const parentSize = json.frame && json.frame.size ? { width: json.frame.size[0], height: json.frame.size[1] } : { width: 0, height: 0 };
+    const imageElement = new ImageElement(((_a = json.props) == null ? void 0 : _a.src) || "", parentSize);
+    ElementDeserializer.deserializeBaseElement(imageElement, json);
+    if (json.objectFit) imageElement.setObjectFit(json.objectFit);
+    if (json.frame) imageElement.setFrame(json.frame);
+    if (json.frameEffects) imageElement.setFrameEffects(json.frameEffects.map((frameEffect) => ElementFrameEffect.fromJSON(frameEffect)));
+    if (json.backgroundColor) imageElement.setBackgroundColor(json.backgroundColor);
+    return imageElement;
+  }
+  static deserializeTextElement(json) {
+    var _a;
+    const textElement = new TextElement(((_a = json.props) == null ? void 0 : _a.text) || "");
+    ElementDeserializer.deserializeBaseElement(textElement, json);
+    if (json.textEffect) textElement.setTextEffect(ElementTextEffect.fromJSON(json.textEffect));
+    return textElement;
+  }
+  static deserializeCaptionElement(json) {
+    const captionElement = new CaptionElement(
+      json.t || "",
+      json.s || 0,
+      json.e || 0
+    );
+    ElementDeserializer.deserializeBaseElement(captionElement, json);
+    return captionElement;
+  }
+  static deserializeIconElement(json) {
+    var _a, _b;
+    const size = ((_a = json.props) == null ? void 0 : _a.size) ? { width: json.props.size[0], height: json.props.size[1] } : { width: 0, height: 0 };
+    const iconElement = new IconElement(
+      ((_b = json.props) == null ? void 0 : _b.src) || "",
+      size
+    );
+    ElementDeserializer.deserializeBaseElement(iconElement, json);
+    return iconElement;
+  }
+  static deserializeCircleElement(json) {
+    var _a, _b;
+    const circleElement = new CircleElement(
+      ((_a = json.props) == null ? void 0 : _a.fill) || "",
+      ((_b = json.props) == null ? void 0 : _b.radius) || 0
+    );
+    ElementDeserializer.deserializeBaseElement(circleElement, json);
+    return circleElement;
+  }
+  static deserializeRectElement(json) {
+    var _a, _b, _c;
+    const rectElement = new RectElement(
+      ((_a = json.props) == null ? void 0 : _a.fill) || "",
+      {
+        width: ((_b = json.props) == null ? void 0 : _b.width) || 0,
+        height: ((_c = json.props) == null ? void 0 : _c.height) || 0
+      }
+    );
+    ElementDeserializer.deserializeBaseElement(rectElement, json);
+    return rectElement;
+  }
+  static fromJSON(json) {
+    try {
+      switch (json.type) {
+        case "video":
+          return ElementDeserializer.deserializeVideoElement(json);
+        case "audio":
+          return ElementDeserializer.deserializeAudioElement(json);
+        case "image":
+          return ElementDeserializer.deserializeImageElement(json);
+        case "text":
+          return ElementDeserializer.deserializeTextElement(json);
+        case "caption":
+          return ElementDeserializer.deserializeCaptionElement(json);
+        case "icon":
+          return ElementDeserializer.deserializeIconElement(json);
+        case "circle":
+          return ElementDeserializer.deserializeCircleElement(json);
+        case "rect":
+          return ElementDeserializer.deserializeRectElement(json);
+        default:
+          throw new Error(`Unknown element type: ${json.type}`);
+      }
+    } catch (error) {
+      console.error("Error deserializing element:", error);
+      return null;
+    }
+  }
+}
+class ElementSerializer {
+  serializeElement(element) {
+    var _a;
+    return {
+      id: element.getId(),
+      trackId: element.getTrackId(),
+      type: element.getType(),
+      name: element.getName(),
+      s: element.getStart(),
+      e: element.getEnd(),
+      props: structuredClone(element.getProps()),
+      animation: (_a = element.getAnimation()) == null ? void 0 : _a.toJSON()
+    };
+  }
+  visitVideoElement(element) {
+    var _a;
+    return {
+      ...this.serializeElement(element),
+      frame: structuredClone(element.getFrame()),
+      frameEffects: (_a = element.getFrameEffects()) == null ? void 0 : _a.map((frameEffect) => frameEffect.toJSON()),
+      backgroundColor: element.getBackgroundColor(),
+      objectFit: element.getObjectFit(),
+      mediaDuration: element.getMediaDuration()
+    };
+  }
+  visitAudioElement(element) {
+    return {
+      ...this.serializeElement(element),
+      mediaDuration: element.getMediaDuration()
+    };
+  }
+  visitImageElement(element) {
+    var _a;
+    return {
+      ...this.serializeElement(element),
+      frame: structuredClone(element.getFrame()),
+      frameEffects: (_a = element.getFrameEffects()) == null ? void 0 : _a.map((frameEffect) => frameEffect.toJSON()),
+      backgroundColor: element.getBackgroundColor(),
+      objectFit: element.getObjectFit()
+    };
+  }
+  visitTextElement(element) {
+    var _a;
+    return {
+      ...this.serializeElement(element),
+      textEffect: (_a = element.getTextEffect()) == null ? void 0 : _a.toJSON()
+    };
+  }
+  visitCaptionElement(element) {
+    return {
+      ...this.serializeElement(element),
+      t: structuredClone(element.getText())
+    };
+  }
+  visitIconElement(element) {
+    return {
+      ...this.serializeElement(element)
+    };
+  }
+  visitCircleElement(element) {
+    return {
+      ...this.serializeElement(element)
+    };
+  }
+  visitRectElement(element) {
+    return {
+      ...this.serializeElement(element)
+    };
+  }
+}
+class ValidationError extends Error {
+  constructor(message, errors, warnings = []) {
+    super(message);
+    this.errors = errors;
+    this.warnings = warnings;
+    this.name = "ValidationError";
+  }
+}
+class ElementValidator {
+  validateBasicProperties(element) {
+    const errors = [];
+    const warnings = [];
+    if (!element.getId()) {
+      errors.push("Element must have an ID");
+    }
+    if (!element.getType()) {
+      errors.push("Element must have a type");
+    }
+    if (element.getStart() === void 0 || element.getStart() === null) {
+      errors.push("Element must have a start time (s)");
+    }
+    if (element.getEnd() === void 0 || element.getEnd() === null) {
+      errors.push("Element must have an end time (e)");
+    }
+    if (element.getStart() !== void 0 && element.getEnd() !== void 0) {
+      if (element.getStart() < 0) {
+        errors.push("Start time cannot be negative");
+      }
+      if (element.getEnd() <= element.getStart()) {
+        errors.push("End time must be greater than start time");
+      }
+    }
+    if (!element.getName()) {
+      warnings.push("Element should have a name for better identification");
+    }
+    if (!element.getTrackId()) {
+      warnings.push("Element should have a track Id");
+    }
+    return { errors, warnings };
+  }
+  validateTextElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.text)) {
+      errors.push("Text element must have text content");
+    }
+    if ((props == null ? void 0 : props.fontSize) !== void 0 && props.fontSize <= 0) {
+      errors.push("Font size must be greater than 0");
+    }
+    if ((props == null ? void 0 : props.fontWeight) !== void 0 && props.fontWeight < 0) {
+      errors.push("Font weight cannot be negative");
+    }
+    return { errors, warnings };
+  }
+  validateVideoElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.src)) {
+      errors.push("Video element must have a source URL");
+    }
+    if ((props == null ? void 0 : props.volume) !== void 0 && (props.volume < 0 || props.volume > 1)) {
+      errors.push("Volume must be between 0 and 1");
+    }
+    if ((props == null ? void 0 : props.playbackRate) !== void 0 && props.playbackRate <= 0) {
+      errors.push("Playback rate must be greater than 0");
+    }
+    return { errors, warnings };
+  }
+  validateAudioElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.src)) {
+      errors.push("Audio element must have a source URL");
+    }
+    if ((props == null ? void 0 : props.volume) !== void 0 && (props.volume < 0 || props.volume > 1)) {
+      errors.push("Volume must be between 0 and 1");
+    }
+    if ((props == null ? void 0 : props.playbackRate) !== void 0 && props.playbackRate <= 0) {
+      errors.push("Playback rate must be greater than 0");
+    }
+    return { errors, warnings };
+  }
+  validateImageElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.src)) {
+      errors.push("Image element must have a source URL");
+    }
+    return { errors, warnings };
+  }
+  validateCaptionElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.text)) {
+      errors.push("Caption element must have text content");
+    }
+    return { errors, warnings };
+  }
+  validateIconElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if (!(props == null ? void 0 : props.icon)) {
+      errors.push("Icon element must have an icon name");
+    }
+    return { errors, warnings };
+  }
+  validateCircleElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if ((props == null ? void 0 : props.radius) !== void 0 && props.radius <= 0) {
+      errors.push("Circle radius must be greater than 0");
+    }
+    return { errors, warnings };
+  }
+  validateRectElement(element) {
+    const basicValidation = this.validateBasicProperties(element);
+    const errors = [...basicValidation.errors];
+    const warnings = [...basicValidation.warnings];
+    const props = element.getProps();
+    if ((props == null ? void 0 : props.width) !== void 0 && props.width <= 0) {
+      errors.push("Rectangle width must be greater than 0");
+    }
+    if ((props == null ? void 0 : props.height) !== void 0 && props.height <= 0) {
+      errors.push("Rectangle height must be greater than 0");
+    }
+    return { errors, warnings };
+  }
+  visitVideoElement(element) {
+    const validation = this.validateVideoElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Video element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitAudioElement(element) {
+    const validation = this.validateAudioElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Audio element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitImageElement(element) {
+    const validation = this.validateImageElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Image element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitTextElement(element) {
+    const validation = this.validateTextElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Text element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitCaptionElement(element) {
+    const validation = this.validateCaptionElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Caption element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitIconElement(element) {
+    const validation = this.validateIconElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Icon element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitCircleElement(element) {
+    const validation = this.validateCircleElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Circle element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+  visitRectElement(element) {
+    const validation = this.validateRectElement(element);
+    if (validation.errors.length > 0) {
+      throw new ValidationError(
+        `Rectangle element validation failed: ${validation.errors.join(", ")}`,
+        validation.errors,
+        validation.warnings
+      );
+    }
+    return true;
+  }
+}
+class TrackFriend {
+  constructor(track) {
+    this.track = track;
+  }
+  /**
+   * Add an element to the track with validation
+   * @param element The element to add
+   * @param skipValidation If true, skips validation (use with caution)
+   * @returns true if element was added successfully, throws ValidationError if validation fails
+   */
+  addElement(element, skipValidation = false) {
+    return this.track.addElementViaFriend(element, skipValidation);
+  }
+  /**
+   * Remove an element from the track
+   * @param element The element to remove
+   */
+  removeElement(element) {
+    this.track.removeElementViaFriend(element);
+  }
+  /**
+   * Update an element in the track with validation
+   * @param element The element to update
+   * @returns true if element was updated successfully, throws ValidationError if validation fails
+   */
+  updateElement(element) {
+    return this.track.updateElementViaFriend(element);
+  }
+  /**
+   * Get the track instance (for advanced operations)
+   * @returns The track instance
+   */
+  getTrack() {
+    return this.track;
+  }
+}
+class Track {
+  constructor(name, id) {
+    __publicField(this, "id");
+    __publicField(this, "name");
+    __publicField(this, "type");
+    __publicField(this, "elements");
+    __publicField(this, "validator");
+    this.name = name;
+    this.id = id ?? `t-${generateShortUuid}`;
+    this.type = "element";
+    this.elements = [];
+    this.validator = new ElementValidator();
+  }
+  /**
+   * Create a friend instance for explicit access to protected methods
+   * This implements the Friend Class Pattern
+   * @returns TrackFriend instance
+   */
+  createFriend() {
+    return new TrackFriend(this);
+  }
+  /**
+   * Friend method to add element (called by TrackFriend)
+   * @param element The element to add
+   * @param skipValidation If true, skips validation
+   * @returns true if element was added successfully
+   */
+  addElementViaFriend(element, skipValidation = false) {
+    return this.addElement(element, skipValidation);
+  }
+  /**
+   * Friend method to remove element (called by TrackFriend)
+   * @param element The element to remove
+   */
+  removeElementViaFriend(element) {
+    this.removeElement(element);
+  }
+  /**
+   * Friend method to update element (called by TrackFriend)
+   * @param element The element to update
+   * @returns true if element was updated successfully
+   */
+  updateElementViaFriend(element) {
+    return this.updateElement(element);
+  }
+  getId() {
+    return this.id;
+  }
+  getName() {
+    return this.name;
+  }
+  getType() {
+    return this.type;
+  }
+  getElements() {
+    return [...this.elements];
+  }
+  /**
+   * Validates an element
+   * @param element The element to validate
+   * @returns true if valid, throws ValidationError if invalid
+   */
+  validateElement(element) {
+    return element.accept(this.validator);
+  }
+  getTrackDuration() {
+    var _a;
+    return ((_a = this.elements) == null ? void 0 : _a.length) ? this.elements[this.elements.length - 1].getEnd() : 0;
+  }
+  /**
+   * Adds an element to the track with validation
+   * @param element The element to add
+   * @param skipValidation If true, skips validation (use with caution)
+   * @returns true if element was added successfully, throws ValidationError if validation fails
+   */
+  addElement(element, skipValidation = false) {
+    element.setTrackId(this.id);
+    if (skipValidation) {
+      this.elements.push(element);
+      return true;
+    }
+    try {
+      const isValid = this.validateElement(element);
+      if (isValid) {
+        this.elements.push(element);
+        return true;
+      }
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        throw error;
+      }
+      throw error;
+    }
+    return false;
+  }
+  removeElement(element) {
+    const index = this.elements.findIndex((e) => e.getId() === element.getId());
+    if (index !== -1) {
+      this.elements.splice(index, 1);
+    }
+  }
+  /**
+   * Updates an element in the track with validation
+   * @param element The element to update
+   * @returns true if element was updated successfully, throws ValidationError if validation fails
+   */
+  updateElement(element) {
+    try {
+      const isValid = this.validateElement(element);
+      if (isValid) {
+        const index = this.elements.findIndex(
+          (e) => e.getId() === element.getId()
+        );
+        if (index !== -1) {
+          this.elements[index] = element;
+          return true;
+        }
+      }
+    } catch (error) {
+      if (error instanceof ValidationError) {
+        throw error;
+      }
+      throw error;
+    }
+    return false;
+  }
+  getElementById(id) {
+    const element = this.elements.find((e) => e.getId() === id);
+    if (!element) return void 0;
+    return element;
+  }
+  /**
+   * Validates all elements in the track and returns combined result and per-element status
+   * @returns Object with overall isValid and array of per-element validation results
+   */
+  validateAllElements() {
+    let validResult = true;
+    const results = this.elements.map((element) => {
+      try {
+        const isValid = this.validateElement(element);
+        if (!isValid) {
+          validResult = false;
+        }
+        return { element, isValid };
+      } catch (error) {
+        if (error instanceof ValidationError) {
+          validResult = false;
+          return {
+            element,
+            isValid: false,
+            errors: error.errors,
+            warnings: error.warnings
+          };
+        }
+        return {
+          element,
+          isValid: false,
+          errors: [error instanceof Error ? error.message : "Unknown error"]
+        };
+      }
+    });
+    return { isValid: validResult, results };
+  }
+  serialize() {
+    const serializer = new ElementSerializer();
+    return {
+      id: this.id,
+      name: this.name,
+      type: this.type,
+      elements: this.elements.map(
+        (element) => element.accept(serializer)
+      )
+    };
+  }
+  static fromJSON(json) {
+    const track = new Track(json.name, json.id);
+    track.type = json.type;
+    track.elements = (json.elements || []).map(ElementDeserializer.fromJSON);
+    return track;
+  }
+}
+const _TimelineContextStore = class _TimelineContextStore {
+  constructor() {
+    __publicField(this, "storeMap");
+    this.storeMap = /* @__PURE__ */ new Map();
+  }
+  static getInstance() {
+    if (!_TimelineContextStore.instance) {
+      _TimelineContextStore.instance = new _TimelineContextStore();
+    }
+    return _TimelineContextStore.instance;
+  }
+  initializeContext(contextId) {
+    if (!this.storeMap.has(contextId)) {
+      this.storeMap.set(contextId, {
+        tracks: [],
+        version: 0,
+        elementMap: {},
+        trackMap: {},
+        captionProps: {}
+      });
+    }
+  }
+  getTimelineData(contextId) {
+    const timelineStore = this.storeMap.get(contextId);
+    return timelineStore ? {
+      tracks: timelineStore.tracks,
+      version: timelineStore.version
+    } : null;
+  }
+  setTimelineData(contextId, timelineData) {
+    this.ensureContext(contextId);
+    this.storeMap.get(contextId).tracks = timelineData.tracks;
+    this.storeMap.get(contextId).version = timelineData.version;
+    return timelineData;
+  }
+  getElementMap(contextId) {
+    this.ensureContext(contextId);
+    return this.storeMap.get(contextId).elementMap;
+  }
+  setElementMap(contextId, elementMap) {
+    this.ensureContext(contextId);
+    this.storeMap.get(contextId).elementMap = elementMap;
+  }
+  getTrackMap(contextId) {
+    this.ensureContext(contextId);
+    return this.storeMap.get(contextId).trackMap;
+  }
+  setTrackMap(contextId, trackMap) {
+    this.ensureContext(contextId);
+    this.storeMap.get(contextId).trackMap = trackMap;
+  }
+  getCaptionProps(contextId) {
+    this.ensureContext(contextId);
+    return this.storeMap.get(contextId).captionProps;
+  }
+  setCaptionProps(contextId, captionProps) {
+    this.ensureContext(contextId);
+    this.storeMap.get(contextId).captionProps = captionProps;
+  }
+  clearContext(contextId) {
+    this.storeMap.delete(contextId);
+  }
+  ensureContext(contextId) {
+    if (!this.storeMap.has(contextId)) {
+      this.initializeContext(contextId);
+    }
+  }
+};
+__publicField(_TimelineContextStore, "instance");
+let TimelineContextStore = _TimelineContextStore;
+const timelineContextStore = TimelineContextStore.getInstance();
+class ElementAdder {
+  constructor(track) {
+    __publicField(this, "track");
+    __publicField(this, "trackFriend");
+    this.track = track;
+    this.trackFriend = track.createFriend();
+  }
+  async visitVideoElement(element) {
+    await element.updateVideoMeta();
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + element.getMediaDuration());
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitAudioElement(element) {
+    await element.updateAudioMeta();
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + element.getMediaDuration());
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitImageElement(element) {
+    await element.updateImageMeta();
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitTextElement(element) {
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitCaptionElement(element) {
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitIconElement(element) {
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitCircleElement(element) {
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+  async visitRectElement(element) {
+    const elements = this.track.getElements();
+    const lastEndtime = (elements == null ? void 0 : elements.length) ? elements[elements.length - 1].getEnd() : 0;
+    if (isNaN(element.getStart())) {
+      element.setStart(lastEndtime);
+    }
+    if (isNaN(element.getEnd())) {
+      element.setEnd(element.getStart() + 1);
+    }
+    return this.trackFriend.addElement(element);
+  }
+}
+class ElementRemover {
+  constructor(track) {
+    __publicField(this, "trackFriend");
+    this.trackFriend = track.createFriend();
+  }
+  visitVideoElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitAudioElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitImageElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitTextElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitCaptionElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitIconElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitCircleElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+  visitRectElement(element) {
+    this.trackFriend.removeElement(element);
+    return true;
+  }
+}
+class ElementUpdater {
+  constructor(track) {
+    __publicField(this, "trackFriend");
+    this.trackFriend = track.createFriend();
+  }
+  visitVideoElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitAudioElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitImageElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitTextElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitCaptionElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitIconElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitCircleElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+  visitRectElement(element) {
+    return this.trackFriend.updateElement(element);
+  }
+}
+class ElementCloner {
+  cloneElementProperties(srcElement, destElement) {
+    return destElement.setName(srcElement.getName()).setType(srcElement.getType()).setStart(srcElement.getStart()).setEnd(srcElement.getEnd()).setProps(srcElement.getProps()).setAnimation(srcElement.getAnimation());
+  }
+  visitVideoElement(element) {
+    const props = element.getProps();
+    const clonedElement = new VideoElement(props.src, element.getParentSize());
+    this.cloneElementProperties(element, clonedElement);
+    clonedElement.setParentSize(element.getParentSize()).setMediaDuration(element.getMediaDuration()).setFrame(element.getFrame()).setFrameEffects(element.getFrameEffects() ?? []).setBackgroundColor(element.getBackgroundColor()).setObjectFit(element.getObjectFit());
+    return clonedElement;
+  }
+  visitAudioElement(element) {
+    const clonedElement = new AudioElement(element.getProps().src);
+    this.cloneElementProperties(element, clonedElement);
+    clonedElement.setMediaDuration(element.getMediaDuration());
+    return clonedElement;
+  }
+  visitImageElement(element) {
+    const clonedElement = new ImageElement(
+      element.getProps().src,
+      element.getParentSize()
+    );
+    this.cloneElementProperties(element, clonedElement);
+    clonedElement.setParentSize(element.getParentSize()).setFrame(element.getFrame()).setFrameEffects(element.getFrameEffects()).setBackgroundColor(element.getBackgroundColor()).setObjectFit(element.getObjectFit());
+    return clonedElement;
+  }
+  visitTextElement(element) {
+    const clonedElement = new TextElement(element.getProps().text);
+    this.cloneElementProperties(element, clonedElement);
+    clonedElement.setTextEffect(element.getTextEffect());
+    return clonedElement;
+  }
+  visitCaptionElement(element) {
+    const clonedElement = new CaptionElement(
+      element.getProps().text,
+      element.getStart(),
+      element.getEnd()
+    );
+    this.cloneElementProperties(element, clonedElement);
+    return clonedElement;
+  }
+  visitRectElement(element) {
+    const clonedElement = new RectElement(
+      element.getProps().fill,
+      element.getProps().size
+    );
+    this.cloneElementProperties(element, clonedElement);
+    return clonedElement;
+  }
+  visitCircleElement(element) {
+    const clonedElement = new CircleElement(
+      element.getProps().fill,
+      element.getProps().radius
+    );
+    this.cloneElementProperties(element, clonedElement);
+    return clonedElement;
+  }
+  visitIconElement(element) {
+    const clonedElement = new IconElement(
+      element.getProps().src,
+      element.getProps().size
+    );
+    this.cloneElementProperties(element, clonedElement);
+    return clonedElement;
+  }
+}
+class ElementSplitter {
+  constructor(splitTime) {
+    __publicField(this, "splitTime");
+    __publicField(this, "elementCloner");
+    this.splitTime = splitTime;
+    this.elementCloner = new ElementCloner();
+  }
+  visitVideoElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitVideoElement(
+      element
+    );
+    const secondElement = this.elementCloner.visitVideoElement(
+      element
+    );
+    const props = element.getProps();
+    const secondStartAt = (props.time ?? 0) + (this.splitTime - element.getStart()) * (props.playbackRate ?? 1);
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime).setStartAt(secondStartAt);
+    return { firstElement, secondElement, success: true };
+  }
+  visitAudioElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitAudioElement(
+      element
+    );
+    const secondElement = this.elementCloner.visitAudioElement(
+      element
+    );
+    const props = element.getProps();
+    const secondStartAt = (props.time ?? 0) + (this.splitTime - element.getStart()) * (props.playbackRate ?? 1);
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime).setStartAt(secondStartAt);
+    return { firstElement, secondElement, success: true };
+  }
+  visitImageElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitImageElement(
+      element
+    );
+    const secondElement = this.elementCloner.visitImageElement(
+      element
+    );
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+  visitTextElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const originalText = element.getText() || "";
+    const originalTextArray = originalText.split(" ");
+    const percentage = (this.splitTime - element.getStart()) / element.getDuration();
+    const firstElement = this.elementCloner.visitTextElement(
+      element
+    );
+    firstElement.setText(
+      originalTextArray.slice(0, Math.floor(originalTextArray.length * percentage)).join(" ")
+    );
+    firstElement.setEnd(this.splitTime);
+    const secondElement = this.elementCloner.visitTextElement(
+      element
+    );
+    secondElement.setText(
+      originalTextArray.slice(
+        Math.floor(originalTextArray.length * percentage),
+        originalTextArray.length
+      ).join(" ")
+    );
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+  visitCaptionElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const originalText = element.getText() || "";
+    const originalTextArray = originalText.split(" ");
+    const percentage = (this.splitTime - element.getStart()) / element.getDuration();
+    const firstElement = this.elementCloner.visitCaptionElement(
+      element
+    );
+    firstElement.setText(
+      originalTextArray.slice(0, Math.floor(originalTextArray.length * percentage)).join(" ")
+    );
+    firstElement.setEnd(this.splitTime);
+    const secondElement = this.elementCloner.visitCaptionElement(
+      element
+    );
+    secondElement.setText(
+      originalTextArray.slice(
+        Math.floor(originalTextArray.length * percentage),
+        originalTextArray.length
+      ).join(" ")
+    );
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+  visitRectElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitRectElement(
+      element
+    );
+    const secondElement = this.elementCloner.visitRectElement(
+      element
+    );
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+  visitCircleElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitCircleElement(element);
+    const secondElement = this.elementCloner.visitCircleElement(element);
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+  visitIconElement(element) {
+    if (!canSplitElement(element, this.splitTime)) {
+      return { firstElement: null, secondElement: null, success: false };
+    }
+    const firstElement = this.elementCloner.visitIconElement(element);
+    const secondElement = this.elementCloner.visitIconElement(element);
+    firstElement.setEnd(this.splitTime);
+    secondElement.setStart(this.splitTime);
+    return { firstElement, secondElement, success: true };
+  }
+}
+class TimelineEditor {
+  constructor(context) {
+    __publicField(this, "context");
+    this.context = context;
+    timelineContextStore.initializeContext(this.context.contextId);
+  }
+  getContext() {
+    return this.context;
+  }
+  pauseVideo() {
+    var _a;
+    if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
+      this.context.setTimelineAction(
+        TIMELINE_ACTION.SET_PLAYER_STATE,
+        PLAYER_STATE.PAUSED
+      );
+    }
+  }
+  getTimelineData() {
+    const contextId = this.context.contextId;
+    return timelineContextStore.getTimelineData(contextId);
+  }
+  getLatestVersion() {
+    const contextId = this.context.contextId;
+    const timelineData = timelineContextStore.getTimelineData(contextId);
+    return (timelineData == null ? void 0 : timelineData.version) || 0;
+  }
+  setTimelineData(tracks, version) {
+    const prevTimelineData = this.getTimelineData();
+    const updatedVersion = version ?? ((prevTimelineData == null ? void 0 : prevTimelineData.version) || 0) + 1;
+    const updatedTimelineData = {
+      tracks,
+      version: updatedVersion
+    };
+    timelineContextStore.setTimelineData(
+      this.context.contextId,
+      updatedTimelineData
+    );
+    this.updateHistory(updatedTimelineData);
+    this.context.updateChangeLog();
+    return updatedTimelineData;
+  }
+  addTrack(name) {
+    const prevTimelineData = this.getTimelineData();
+    const id = `t-${generateShortUuid()}`;
+    const track = new Track(name, id);
+    const updatedTimelines = [...(prevTimelineData == null ? void 0 : prevTimelineData.tracks) || [], track];
+    this.setTimelineData(updatedTimelines);
+    return track;
+  }
+  getTrackById(id) {
+    const prevTimelineData = this.getTimelineData();
+    const track = prevTimelineData == null ? void 0 : prevTimelineData.tracks.find((t) => t.getId() === id);
+    return track;
+  }
+  getTrackByName(name) {
+    const prevTimelineData = this.getTimelineData();
+    const track = prevTimelineData == null ? void 0 : prevTimelineData.tracks.find((t) => t.getName() === name);
+    return track;
+  }
+  removeTrackById(id) {
+    var _a;
+    const tracks = ((_a = this.getTimelineData()) == null ? void 0 : _a.tracks) || [];
+    const updatedTracks = tracks.filter((t) => t.getId() !== id);
+    this.setTimelineData(updatedTracks);
+  }
+  removeTrack(track) {
+    var _a;
+    const tracks = ((_a = this.getTimelineData()) == null ? void 0 : _a.tracks) || [];
+    const updatedTracks = tracks.filter((t) => t.getId() !== track.getId());
+    this.setTimelineData(updatedTracks);
+  }
+  /**
+   * Refresh the timeline data
+   */
+  refresh() {
+    const currentData = this.getTimelineData();
+    if (currentData) {
+      this.setTimelineData(currentData.tracks);
+    }
+  }
+  /**
+   * Add an element to a specific track using the visitor pattern
+   * @param track The track to add the element to
+   * @param element The element to add
+   * @returns Promise<boolean> true if element was added successfully
+   */
+  async addElementToTrack(track, element) {
+    if (!track) {
+      return false;
+    }
+    try {
+      const elementAdder = new ElementAdder(track);
+      const result = await element.accept(elementAdder);
+      if (result) {
+        const currentData = this.getTimelineData();
+        if (currentData) {
+          this.setTimelineData(currentData.tracks);
+        }
+      }
+      return result;
+    } catch (error) {
+      return false;
+    }
+  }
+  /**
+   * Remove an element from a specific track using the visitor pattern
+   * @param element The element to remove
+   * @returns boolean true if element was removed successfully
+   */
+  removeElement(element) {
+    const track = this.getTrackById(element.getTrackId());
+    if (!track) {
+      return false;
+    }
+    try {
+      const elementRemover = new ElementRemover(track);
+      const result = element.accept(elementRemover);
+      if (result) {
+        const currentData = this.getTimelineData();
+        if (currentData) {
+          this.setTimelineData(currentData.tracks);
+        }
+      }
+      return result;
+    } catch (error) {
+      return false;
+    }
+  }
+  /**
+   * Update an element in a specific track using the visitor pattern
+   * @param element The updated element
+   * @returns boolean true if element was updated successfully
+   */
+  updateElement(element) {
+    const track = this.getTrackById(element.getTrackId());
+    if (!track) {
+      return false;
+    }
+    try {
+      const elementUpdater = new ElementUpdater(track);
+      const result = element.accept(elementUpdater);
+      if (result) {
+        const currentData = this.getTimelineData();
+        if (currentData) {
+          this.setTimelineData(currentData.tracks);
+        }
+      }
+      return result;
+    } catch (error) {
+      return false;
+    }
+  }
+  /**
+   * Split an element at a specific time point using the visitor pattern
+   * @param element The element to split
+   * @param splitTime The time point to split at
+   * @returns SplitResult with first element, second element, and success status
+   */
+  async splitElement(element, splitTime) {
+    const track = this.getTrackById(element.getTrackId());
+    if (!track) {
+      return { firstElement: element, secondElement: null, success: false };
+    }
+    try {
+      const elementSplitter = new ElementSplitter(splitTime);
+      const result = element.accept(elementSplitter);
+      if (result.success) {
+        const elementRemover = new ElementRemover(track);
+        element.accept(elementRemover);
+        const elementAdder = new ElementAdder(track);
+        result.firstElement.accept(elementAdder);
+        result.secondElement.accept(elementAdder);
+        const currentData = this.getTimelineData();
+        if (currentData) {
+          this.setTimelineData(currentData.tracks);
+        }
+      }
+      return result;
+    } catch (error) {
+      return { firstElement: element, secondElement: null, success: false };
+    }
+  }
+  /**
+   * Clone an element using the visitor pattern
+   * @param element The element to clone
+   * @returns TrackElement | null - the cloned element or null if cloning failed
+   */
+  cloneElement(element) {
+    try {
+      const elementCloner = new ElementCloner();
+      return element.accept(elementCloner);
+    } catch (error) {
+      return null;
+    }
+  }
+  reorderTracks(tracks) {
+    this.setTimelineData(tracks);
+  }
+  updateHistory(timelineTrackData) {
+    const tracks = timelineTrackData.tracks.map((t) => t.serialize());
+    this.context.setTotalDuration(getTotalDuration(tracks));
+    const version = timelineTrackData.version;
+    this.context.setPresent({
+      tracks,
+      version
+    });
+  }
+  /**
+   * Trigger undo operation and update timeline data
+   */
+  undo() {
+    var _a;
+    const result = this.context.handleUndo();
+    if (result && result.tracks) {
+      const tracks = result.tracks.map((t) => Track.fromJSON(t));
+      timelineContextStore.setTimelineData(this.context.contextId, {
+        tracks,
+        version: result.version
+      });
+      this.context.setTotalDuration(getTotalDuration(result.tracks));
+      this.context.updateChangeLog();
+      if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
+        this.context.setTimelineAction(TIMELINE_ACTION.UPDATE_PLAYER_DATA, {
+          tracks: result.tracks,
+          version: result.version
+        });
+      }
+    }
+  }
+  /**
+   * Trigger redo operation and update timeline data
+   */
+  redo() {
+    var _a;
+    const result = this.context.handleRedo();
+    if (result && result.tracks) {
+      const tracks = result.tracks.map((t) => Track.fromJSON(t));
+      timelineContextStore.setTimelineData(this.context.contextId, {
+        tracks,
+        version: result.version
+      });
+      this.context.setTotalDuration(getTotalDuration(result.tracks));
+      this.context.updateChangeLog();
+      if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
+        this.context.setTimelineAction(TIMELINE_ACTION.UPDATE_PLAYER_DATA, {
+          tracks: result.tracks,
+          version: result.version
+        });
+      }
+    }
+  }
+  /**
+   * Reset history and clear timeline data
+   */
+  resetHistory() {
+    var _a;
+    this.context.handleResetHistory();
+    timelineContextStore.setTimelineData(this.context.contextId, {
+      tracks: [],
+      version: 0
+    });
+    this.context.setTotalDuration(0);
+    this.context.updateChangeLog();
+    if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
+      this.context.setTimelineAction(TIMELINE_ACTION.UPDATE_PLAYER_DATA, {
+        tracks: [],
+        version: 0
+      });
+    }
+  }
+  loadProject({
+    tracks,
+    version
+  }) {
+    var _a;
+    this.pauseVideo();
+    this.context.handleResetHistory();
+    const timelineTracks = tracks.map((t) => Track.fromJSON(t));
+    this.setTimelineData(timelineTracks, version);
+    if ((_a = this.context) == null ? void 0 : _a.setTimelineAction) {
+      this.context.setTimelineAction(TIMELINE_ACTION.UPDATE_PLAYER_DATA, {
+        tracks,
+        version,
+        forceUpdate: true
+      });
+    }
+  }
+}
+const MAX_HISTORY = 20;
+const deepClone = (obj) => {
+  return JSON.parse(JSON.stringify(obj));
+};
+const UndoRedoContext = createContext(
+  void 0
+);
+const STORAGE_KEY_PREFIX = "twick_undo_redo_";
+const saveToStorage = (key, state) => {
+  try {
+    localStorage.setItem(key, JSON.stringify(state));
+  } catch (error) {
+    console.warn("Failed to save undo-redo state to localStorage:", error);
+  }
+};
+const loadFromStorage = (key) => {
+  try {
+    const stored = localStorage.getItem(key);
+    if (!stored) return null;
+    return JSON.parse(stored);
+  } catch (error) {
+    console.warn("Failed to load undo-redo state from localStorage:", error);
+    return null;
+  }
+};
+const UndoRedoProvider = ({
+  children,
+  persistenceKey,
+  maxHistorySize = MAX_HISTORY
+}) => {
+  const [state, setState] = useState(() => {
+    if (persistenceKey) {
+      const stored = loadFromStorage(STORAGE_KEY_PREFIX + persistenceKey);
+      if (stored) {
+        return {
+          past: stored.past,
+          present: stored.present,
+          future: stored.future
+        };
+      }
+    }
+    return {
+      past: [],
+      present: null,
+      future: []
+    };
+  });
+  const saveState = (newState) => {
+    if (persistenceKey) {
+      saveToStorage(STORAGE_KEY_PREFIX + persistenceKey, newState);
+    }
+  };
+  const setPresent = (data) => {
+    setState((prevState) => {
+      let newPast = [...prevState.past];
+      if (prevState.present) {
+        newPast.push(deepClone(prevState.present));
+      }
+      const newState = {
+        past: newPast,
+        present: deepClone(data),
+        future: []
+        // Clear future because it's a new change
+      };
+      if (newState.past.length > maxHistorySize) {
+        newState.past.shift();
+      }
+      saveState(newState);
+      return newState;
+    });
+  };
+  const undo = () => {
+    let undoResult = null;
+    setState((prevState) => {
+      if (prevState.past.length === 0) return prevState;
+      const previous = prevState.past[prevState.past.length - 1];
+      const newState = {
+        past: prevState.past.slice(0, -1),
+        // Remove last item
+        present: previous,
+        future: prevState.present ? [deepClone(prevState.present), ...prevState.future] : prevState.future
+      };
+      undoResult = previous;
+      saveState(newState);
+      return newState;
+    });
+    return undoResult;
+  };
+  const redo = () => {
+    let redoResult = null;
+    setState((prevState) => {
+      if (prevState.future.length === 0) return prevState;
+      const next = prevState.future[0];
+      const newState = {
+        past: prevState.present ? [...prevState.past, deepClone(prevState.present)] : prevState.past,
+        present: next,
+        future: prevState.future.slice(1)
+        // Remove first item
+      };
+      if (newState.past.length > maxHistorySize) {
+        newState.past.shift();
+      }
+      redoResult = next;
+      saveState(newState);
+      return newState;
+    });
+    return redoResult;
+  };
+  const getLastPersistedState = () => {
+    if (persistenceKey) {
+      const stored = loadFromStorage(STORAGE_KEY_PREFIX + persistenceKey);
+      return (stored == null ? void 0 : stored.present) || null;
+    }
+    return null;
+  };
+  const resetHistory = () => {
+    const newState = {
+      past: [],
+      present: null,
+      future: []
+    };
+    setState(newState);
+    if (persistenceKey) {
+      localStorage.removeItem(STORAGE_KEY_PREFIX + persistenceKey);
+    }
+  };
+  const disablePersistence = () => {
+    if (persistenceKey) {
+      localStorage.removeItem(STORAGE_KEY_PREFIX + persistenceKey);
+    }
+  };
+  const contextValue = {
+    canUndo: state.past.length > 0,
+    canRedo: state.future.length > 0,
+    present: state.present,
+    setPresent,
+    undo,
+    redo,
+    resetHistory,
+    getLastPersistedState,
+    disablePersistence
+  };
+  return /* @__PURE__ */ jsx(UndoRedoContext.Provider, { value: contextValue, children });
+};
+const useUndoRedo = () => {
+  const context = useContext(UndoRedoContext);
+  if (context === void 0) {
+    throw new Error("useUndoRedo must be used within an UndoRedoProvider");
+  }
+  return context;
+};
+const editorRegistry = /* @__PURE__ */ new Map();
+if (typeof window !== "undefined") {
+  window.twickTimelineEditors = editorRegistry;
+}
+const TimelineContext = createContext(
+  void 0
+);
+const TimelineProviderInner = ({
+  contextId,
+  children,
+  initialData
+}) => {
+  const [timelineAction, setTimelineActionState] = useState({
+    type: TIMELINE_ACTION.NONE,
+    payload: null
+  });
+  const [selectedItem, setSelectedItem] = useState(
+    null
+  );
+  const [totalDuration, setTotalDuration] = useState(0);
+  const [changeLog, setChangeLog] = useState(0);
+  const undoRedoContext = useUndoRedo();
+  const dataInitialized = useRef(false);
+  const updateChangeLog = () => {
+    setChangeLog((prev) => prev + 1);
+  };
+  const editor = useMemo(() => {
+    if (editorRegistry.has(contextId)) {
+      editorRegistry.delete(contextId);
+    }
+    const newEditor = new TimelineEditor({
+      contextId,
+      setTotalDuration,
+      setPresent: undoRedoContext.setPresent,
+      handleUndo: undoRedoContext.undo,
+      handleRedo: undoRedoContext.redo,
+      handleResetHistory: undoRedoContext.resetHistory,
+      updateChangeLog,
+      setTimelineAction: (action, payload) => {
+        setTimelineActionState({ type: action, payload });
+      }
+    });
+    editorRegistry.set(contextId, newEditor);
+    return newEditor;
+  }, [contextId]);
+  const setTimelineAction = (type, payload) => {
+    setTimelineActionState({ type, payload });
+  };
+  const initialize = (data) => {
+    const lastPersistedState = undoRedoContext.getLastPersistedState();
+    if (lastPersistedState) {
+      editor.loadProject(lastPersistedState);
+      return;
+    } else {
+      editor.loadProject(data);
+    }
+  };
+  useEffect(() => {
+    if (initialData && !dataInitialized.current) {
+      initialize(initialData);
+      dataInitialized.current = true;
+    }
+  }, [initialData]);
+  const contextValue = {
+    contextId,
+    selectedItem,
+    timelineAction,
+    totalDuration,
+    changeLog,
+    present: undoRedoContext.present,
+    canUndo: undoRedoContext.canUndo,
+    canRedo: undoRedoContext.canRedo,
+    setSelectedItem,
+    setTimelineAction,
+    editor
+    // Include the editor instance
+  };
+  return /* @__PURE__ */ jsx(TimelineContext.Provider, { value: contextValue, children });
+};
+const TimelineProvider = ({
+  contextId,
+  children,
+  initialData,
+  undoRedoPersistenceKey,
+  maxHistorySize
+}) => {
+  return /* @__PURE__ */ jsx(
+    UndoRedoProvider,
+    {
+      persistenceKey: undoRedoPersistenceKey,
+      maxHistorySize,
+      children: /* @__PURE__ */ jsx(
+        TimelineProviderInner,
+        {
+          initialData,
+          contextId,
+          undoRedoPersistenceKey,
+          maxHistorySize,
+          children
+        }
+      )
+    }
+  );
+};
+const useTimelineContext = () => {
+  const context = useContext(TimelineContext);
+  if (context === void 0) {
+    throw new Error(
+      "useTimelineContext must be used within a TimelineProvider"
+    );
+  }
+  return context;
+};
+if (typeof window !== "undefined") {
+  window.Twick = {
+    Track,
+    TrackElement,
+    ElementDeserializer,
+    ElementSerializer,
+    ElementValidator,
+    ElementAdder,
+    ElementRemover,
+    ElementUpdater,
+    ElementSplitter,
+    ElementCloner,
+    TimelineEditor,
+    TimelineProvider,
+    TIMELINE_ELEMENT_TYPE,
+    // Element types
+    CaptionElement,
+    RectElement,
+    TextElement,
+    ImageElement,
+    AudioElement,
+    CircleElement,
+    IconElement,
+    VideoElement,
+    ElementAnimation,
+    ElementFrameEffect,
+    ElementTextEffect,
+    // Utility functions
+    generateShortUuid,
+    getTotalDuration,
+    getCurrentElements,
+    isTrackId,
+    isElementId
+  };
+}
+export {
+  AudioElement,
+  CAPTION_COLOR,
+  CAPTION_FONT,
+  CAPTION_STYLE,
+  CAPTION_STYLE_OPTIONS,
+  CaptionElement,
+  CircleElement,
+  ElementAdder,
+  ElementAnimation,
+  ElementCloner,
+  ElementDeserializer,
+  ElementFrameEffect,
+  ElementRemover,
+  ElementSerializer,
+  ElementSplitter,
+  ElementTextEffect,
+  ElementUpdater,
+  ElementValidator,
+  IconElement,
+  ImageElement,
+  PLAYER_STATE,
+  PROCESS_STATE,
+  RectElement,
+  TIMELINE_ACTION,
+  TIMELINE_ELEMENT_TYPE,
+  TextElement,
+  TimelineEditor,
+  TimelineProvider,
+  Track,
+  TrackElement,
+  ValidationError,
+  VideoElement,
+  WORDS_PER_PHRASE,
+  canSplitElement,
+  generateShortUuid,
+  getCurrentElements,
+  getDecimalNumber,
+  getTotalDuration,
+  isElementId,
+  isTrackId,
+  useTimelineContext
+};
+//# sourceMappingURL=index.mjs.map