@twick/timeline 0.14.0

package/dist/index.js

@@ -0,0 +1,2630 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TwickTimeline = {}, global.jsxRuntime, global.React));
+})(this, function(exports2, jsxRuntime, react) {
+  "use strict";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);
+
+  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 = react.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] = react.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__ */ jsxRuntime.jsx(UndoRedoContext.Provider, { value: contextValue, children });
+  };
+  const useUndoRedo = () => {
+    const context = react.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 = react.createContext(
+    void 0
+  );
+  const TimelineProviderInner = ({
+    contextId,
+    children,
+    initialData
+  }) => {
+    const [timelineAction, setTimelineActionState] = react.useState({
+      type: TIMELINE_ACTION.NONE,
+      payload: null
+    });
+    const [selectedItem, setSelectedItem] = react.useState(
+      null
+    );
+    const [totalDuration, setTotalDuration] = react.useState(0);
+    const [changeLog, setChangeLog] = react.useState(0);
+    const undoRedoContext = useUndoRedo();
+    const dataInitialized = react.useRef(false);
+    const updateChangeLog = () => {
+      setChangeLog((prev) => prev + 1);
+    };
+    const editor = react.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);
+      }
+    };
+    react.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__ */ jsxRuntime.jsx(TimelineContext.Provider, { value: contextValue, children });
+  };
+  const TimelineProvider = ({
+    contextId,
+    children,
+    initialData,
+    undoRedoPersistenceKey,
+    maxHistorySize
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      UndoRedoProvider,
+      {
+        persistenceKey: undoRedoPersistenceKey,
+        maxHistorySize,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          TimelineProviderInner,
+          {
+            initialData,
+            contextId,
+            undoRedoPersistenceKey,
+            maxHistorySize,
+            children
+          }
+        )
+      }
+    );
+  };
+  const useTimelineContext = () => {
+    const context = react.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
+    };
+  }
+  exports2.AudioElement = AudioElement;
+  exports2.CAPTION_COLOR = CAPTION_COLOR;
+  exports2.CAPTION_FONT = CAPTION_FONT;
+  exports2.CAPTION_STYLE = CAPTION_STYLE;
+  exports2.CAPTION_STYLE_OPTIONS = CAPTION_STYLE_OPTIONS;
+  exports2.CaptionElement = CaptionElement;
+  exports2.CircleElement = CircleElement;
+  exports2.ElementAdder = ElementAdder;
+  exports2.ElementAnimation = ElementAnimation;
+  exports2.ElementCloner = ElementCloner;
+  exports2.ElementDeserializer = ElementDeserializer;
+  exports2.ElementFrameEffect = ElementFrameEffect;
+  exports2.ElementRemover = ElementRemover;
+  exports2.ElementSerializer = ElementSerializer;
+  exports2.ElementSplitter = ElementSplitter;
+  exports2.ElementTextEffect = ElementTextEffect;
+  exports2.ElementUpdater = ElementUpdater;
+  exports2.ElementValidator = ElementValidator;
+  exports2.IconElement = IconElement;
+  exports2.ImageElement = ImageElement;
+  exports2.PLAYER_STATE = PLAYER_STATE;
+  exports2.PROCESS_STATE = PROCESS_STATE;
+  exports2.RectElement = RectElement;
+  exports2.TIMELINE_ACTION = TIMELINE_ACTION;
+  exports2.TIMELINE_ELEMENT_TYPE = TIMELINE_ELEMENT_TYPE;
+  exports2.TextElement = TextElement;
+  exports2.TimelineEditor = TimelineEditor;
+  exports2.TimelineProvider = TimelineProvider;
+  exports2.Track = Track;
+  exports2.TrackElement = TrackElement;
+  exports2.ValidationError = ValidationError;
+  exports2.VideoElement = VideoElement;
+  exports2.WORDS_PER_PHRASE = WORDS_PER_PHRASE;
+  exports2.canSplitElement = canSplitElement;
+  exports2.generateShortUuid = generateShortUuid;
+  exports2.getCurrentElements = getCurrentElements;
+  exports2.getDecimalNumber = getDecimalNumber;
+  exports2.getTotalDuration = getTotalDuration;
+  exports2.isElementId = isElementId;
+  exports2.isTrackId = isTrackId;
+  exports2.useTimelineContext = useTimelineContext;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});
+//# sourceMappingURL=index.js.map