@netless/app-slide 0.0.55 → 0.0.58

package/dist/main.es.js

@@ -17,99 +17,6 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-function clamp$1(value, min, max) {
-  return Math.min(Math.max(value, min), max);
-}
-function isObj(obj) {
-  return typeof obj === "object" && obj !== null;
-}
-function deepClone(obj) {
-  return JSON.parse(JSON.stringify(obj));
-}
-class Logger {
-  constructor(enable) {
-    this.enable = enable;
-    this.apps = {};
-    this.level = "debug";
-    this._onMessage = (ev) => {
-      if (isObj(ev.data)) {
-        if (typeof ev.data.slide === "boolean") {
-          this.enable = ev.data.slide;
-        } else if (ev.data.slide === "__instance") {
-          console.log(this);
-        }
-      }
-    };
-    window.addEventListener("message", this._onMessage);
-  }
-  log(...args) {
-    if (this.enable) {
-      console.log(...args);
-    }
-  }
-  verbose(...args) {
-    if (this.enable && this.level === "verbose") {
-      console.log(...args);
-    }
-  }
-  dispose(appId) {
-    this.enable = false;
-    delete this.apps[appId];
-    window.removeEventListener("message", this._onMessage);
-  }
-}
-const logger = new Logger(false);
-const log = logger.log.bind(logger);
-const verbose = logger.verbose.bind(logger);
-let useFreezer = false;
-const FreezerLength = 2;
-const apps = {
-  map: new Map(),
-  queue: [],
-  validateQueue() {
-    log("[Slide] freezer: validate", this.queue);
-    while (this.queue.length > FreezerLength) {
-      const appId = this.queue.pop();
-      const slide = this.map.get(appId);
-      if (slide) {
-        log("[Slide] freezer: validate-freeze", appId, this.queue);
-        slide.freeze();
-      }
-    }
-  },
-  set(appId, slide) {
-    log("[Slide] freezer: add", appId, this.queue);
-    this.map.set(appId, slide);
-    if (!this.queue.includes(appId)) {
-      this.queue.unshift(appId);
-    }
-    this.validateQueue();
-  },
-  delete(appId) {
-    log("[Slide] freezer: delete", appId, this.queue);
-    this.map.delete(appId);
-    this.queue = this.queue.filter((id) => id !== appId);
-  },
-  focus(appId) {
-    const slide = this.map.get(appId);
-    const index = this.queue.indexOf(appId);
-    if (index > -1) {
-      this.queue.splice(index, 1);
-    }
-    this.queue.unshift(appId);
-    this.validateQueue();
-    log("[Slide] freezer: focus", appId, this.queue);
-    if (slide) {
-      slide.unfreeze();
-    }
-  }
-};
-const addHooks = (emitter) => {
-  useFreezer = true;
-  emitter.on("focus", ({ appId }) => {
-    apps.focus(appId);
-  });
-};
 const e = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789", s = e.length, t = Array(20), r = () => {
   for (let r2 = 0; r2 < 20; r2++)
     t[r2] = e.charAt(Math.random() * s);
@@ -117,7 +24,7 @@ const e = "!#%()*+,-./:;=?@[]^_`{|}~ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqr
 };
 class o {
   constructor() {
-    this.disposers = new Map();
+    this.disposers = /* @__PURE__ */ new Map();
   }
   add(e2, s2 = r()) {
     return this.flush(s2), this.disposers.set(s2, e2()), s2;
@@ -165,27 +72,6 @@ class o {
     }), this.disposers.clear();
   }
 }
-function isObject(val) {
-  return val != null && typeof val === "object" && !Array.isArray(val);
-}
-function ensureAttributes(context, initAttrs) {
-  let attrs = context.getAttributes();
-  if (!attrs) {
-    context.setAttributes(initAttrs);
-    attrs = context.getAttributes();
-  }
-  if (!attrs) {
-    throw new Error("[NetlessAppMonaco] No attributes");
-  }
-  if (isObject(initAttrs)) {
-    Object.keys(initAttrs).forEach((key) => {
-      if (!Object.prototype.hasOwnProperty.call(attrs, key)) {
-        context.updateAttributes([key], initAttrs[key]);
-      }
-    });
-  }
-  return attrs;
-}
 var Slide = function(t2) {
   var e2 = {};
   function n(i) {
@@ -203,7 +89,7 @@ var Slide = function(t2) {
       return t3;
     if (4 & e3 && typeof t3 == "object" && t3 && t3.__esModule)
       return t3;
-    var i = Object.create(null);
+    var i = /* @__PURE__ */ Object.create(null);
     if (n.r(i), Object.defineProperty(i, "default", { enumerable: true, value: t3 }), 2 & e3 && typeof t3 != "string")
       for (var r2 in t3)
         n.d(i, r2, function(e4) {
@@ -239,7 +125,7 @@ var Slide = function(t2) {
   function u() {
     this._events = new o2(), this._eventsCount = 0;
   }
-  Object.create && (o2.prototype = Object.create(null), new o2().__proto__ || (r2 = false)), u.prototype.eventNames = function() {
+  Object.create && (o2.prototype = /* @__PURE__ */ Object.create(null), new o2().__proto__ || (r2 = false)), u.prototype.eventNames = function() {
     var t3, e3, n2 = [];
     if (this._eventsCount === 0)
       return n2;
@@ -6052,7 +5938,7 @@ var Slide = function(t2) {
   function u() {
     this._events = new o2(), this._eventsCount = 0;
   }
-  Object.create && (o2.prototype = Object.create(null), new o2().__proto__ || (r2 = false)), u.prototype.eventNames = function() {
+  Object.create && (o2.prototype = /* @__PURE__ */ Object.create(null), new o2().__proto__ || (r2 = false)), u.prototype.eventNames = function() {
     var t3, e3, n2 = [];
     if (this._eventsCount === 0)
       return n2;
@@ -12251,7 +12137,7 @@ var Slide = function(t2) {
     } };
   }
   function Wo(t3, e3) {
-    const n2 = e3.isWebGL2, i2 = new WeakMap();
+    const n2 = e3.isWebGL2, i2 = /* @__PURE__ */ new WeakMap();
     return { get: function(t4) {
       return t4.isInterleavedBufferAttribute && (t4 = t4.data), i2.get(t4);
     }, remove: function(e4) {
@@ -12583,7 +12469,7 @@ var Slide = function(t2) {
     };
   }
   function es(t3) {
-    let e3 = new WeakMap();
+    let e3 = /* @__PURE__ */ new WeakMap();
     function n2(t4, e4) {
       return e4 === pt ? t4.mapping = ct : e4 === ft && (t4.mapping = dt), t4;
     }
@@ -12612,7 +12498,7 @@ var Slide = function(t2) {
       }
       return r3;
     }, dispose: function() {
-      e3 = new WeakMap();
+      e3 = /* @__PURE__ */ new WeakMap();
     } };
   }
   function ns(t3) {
@@ -12649,7 +12535,7 @@ var Slide = function(t2) {
     } };
   }
   function is(t3, e3, n2, i2) {
-    const r3 = {}, o3 = new WeakMap();
+    const r3 = {}, o3 = /* @__PURE__ */ new WeakMap();
     function s3(t4) {
       const a3 = t4.target;
       a3.index !== null && e3.remove(a3.index);
@@ -12788,7 +12674,7 @@ var Slide = function(t2) {
     } };
   }
   function us(t3, e3, n2, i2) {
-    let r3 = new WeakMap();
+    let r3 = /* @__PURE__ */ new WeakMap();
     function o3(t4) {
       const e4 = t4.target;
       e4.removeEventListener("dispose", o3), n2.remove(e4.instanceMatrix), e4.instanceColor !== null && n2.remove(e4.instanceColor);
@@ -12797,7 +12683,7 @@ var Slide = function(t2) {
       const s3 = i2.render.frame, a2 = t4.geometry, l2 = e3.get(t4, a2);
       return r3.get(l2) !== s3 && (e3.update(l2), r3.set(l2, s3)), t4.isInstancedMesh && (t4.hasEventListener("dispose", o3) === false && t4.addEventListener("dispose", o3), n2.update(t4.instanceMatrix, 34962), t4.instanceColor !== null && n2.update(t4.instanceColor, 34962)), l2;
     }, dispose: function() {
-      r3 = new WeakMap();
+      r3 = /* @__PURE__ */ new WeakMap();
     } };
   }
   Zo.physical = { uniforms: Po([Zo.standard.uniforms, { clearcoat: { value: 0 }, clearcoatMap: { value: null }, clearcoatRoughness: { value: 0 }, clearcoatRoughnessMap: { value: null }, clearcoatNormalScale: { value: new ei(1, 1) }, clearcoatNormalMap: { value: null }, sheen: { value: new Dr(0) }, transmission: { value: 0 }, transmissionMap: { value: null }, transmissionSamplerSize: { value: new ei() }, transmissionSamplerMap: { value: null }, thickness: { value: 0 }, thicknessMap: { value: null }, attenuationDistance: { value: 0 }, attenuationColor: { value: new Dr(0) } }]), vertexShader: qo.meshphysical_vert, fragmentShader: qo.meshphysical_frag };
@@ -13451,7 +13337,7 @@ var Slide = function(t2) {
     }, programs: s3 };
   }
   function Da() {
-    let t3 = new WeakMap();
+    let t3 = /* @__PURE__ */ new WeakMap();
     return { get: function(e3) {
       let n2 = t3.get(e3);
       return n2 === void 0 && (n2 = {}, t3.set(e3, n2)), n2;
@@ -13460,7 +13346,7 @@ var Slide = function(t2) {
     }, update: function(e3, n2, i2) {
       t3.get(e3)[n2] = i2;
     }, dispose: function() {
-      t3 = new WeakMap();
+      t3 = /* @__PURE__ */ new WeakMap();
     } };
   }
   function Fa(t3, e3) {
@@ -13498,12 +13384,12 @@ var Slide = function(t2) {
     } };
   }
   function ka(t3) {
-    let e3 = new WeakMap();
+    let e3 = /* @__PURE__ */ new WeakMap();
     return { get: function(n2, i2) {
       let r3;
       return e3.has(n2) === false ? (r3 = new Ua(t3), e3.set(n2, [r3])) : i2 >= e3.get(n2).length ? (r3 = new Ua(t3), e3.get(n2).push(r3)) : r3 = e3.get(n2)[i2], r3;
     }, dispose: function() {
-      e3 = new WeakMap();
+      e3 = /* @__PURE__ */ new WeakMap();
     } };
   }
   function Ga() {
@@ -13640,12 +13526,12 @@ var Slide = function(t2) {
     } };
   }
   function Wa(t3, e3) {
-    let n2 = new WeakMap();
+    let n2 = /* @__PURE__ */ new WeakMap();
     return { get: function(i2, r3 = 0) {
       let o3;
       return n2.has(i2) === false ? (o3 = new Va(t3, e3), n2.set(i2, [o3])) : r3 >= n2.get(i2).length ? (o3 = new Va(t3, e3), n2.get(i2).push(o3)) : o3 = n2.get(i2)[r3], o3;
     }, dispose: function() {
-      n2 = new WeakMap();
+      n2 = /* @__PURE__ */ new WeakMap();
     } };
   }
   class Xa extends Rr {
@@ -13983,7 +13869,7 @@ var Slide = function(t2) {
     } };
   }
   function Ja(t3, e3, n2, i2, r3, o3, s3) {
-    const a2 = r3.isWebGL2, l2 = r3.maxTextures, u2 = r3.maxCubemapSize, h2 = r3.maxTextureSize, c2 = r3.maxSamples, d2 = new WeakMap();
+    const a2 = r3.isWebGL2, l2 = r3.maxTextures, u2 = r3.maxCubemapSize, h2 = r3.maxTextureSize, c2 = r3.maxSamples, d2 = /* @__PURE__ */ new WeakMap();
     let p2, f2 = false;
     try {
       f2 = typeof OffscreenCanvas != "undefined" && new OffscreenCanvas(1, 1).getContext("2d") !== null;
@@ -14460,7 +14346,7 @@ var Slide = function(t2) {
       super();
       const n2 = this, i2 = t3.state;
       let r3 = null, o3 = 1, s3 = null, a2 = "local-floor", l2 = null, u2 = null, h2 = null, c2 = null;
-      const d2 = [], p2 = new Map(), f2 = new Lo();
+      const d2 = [], p2 = /* @__PURE__ */ new Map(), f2 = new Lo();
       f2.layers.enable(1), f2.viewport = new li();
       const m2 = new Lo();
       m2.layers.enable(2), m2.viewport = new li();
@@ -14870,7 +14756,7 @@ var Slide = function(t2) {
       e4.isScene !== true && (e4 = j2);
       const i3 = Z2.get(t4), r4 = d2.state.lights, o4 = d2.state.shadowsArray, s4 = r4.state.version, a3 = et2.getParameters(t4, r4.state, o4, e4, n3), l3 = et2.getProgramCacheKey(a3);
       let u3 = i3.programs;
-      i3.environment = t4.isMeshStandardMaterial ? e4.environment : null, i3.fog = e4.fog, i3.envMap = K2.get(t4.envMap || i3.environment), u3 === void 0 && (t4.addEventListener("dispose", wt2), u3 = new Map(), i3.programs = u3);
+      i3.environment = t4.isMeshStandardMaterial ? e4.environment : null, i3.fog = e4.fog, i3.envMap = K2.get(t4.envMap || i3.environment), u3 === void 0 && (t4.addEventListener("dispose", wt2), u3 = /* @__PURE__ */ new Map(), i3.programs = u3);
       let h3 = u3.get(l3);
       if (h3 !== void 0) {
         if (i3.currentProgram === h3 && i3.lightsStateVersion === s4)
@@ -22440,7 +22326,7 @@ var Slide = function(t2) {
       i2 === void 0 ? console.warn("PixiJS Deprecation Warning: ", e3 + "\nDeprecated since v" + t3) : (i2 = i2.split("\n").splice(n2).join("\n"), console.groupCollapsed ? (console.groupCollapsed("%cPixiJS Deprecation Warning: %c%s", "color:#614108;background:#fffbe6", "font-weight:normal;color:#614108;background:#fffbe6", e3 + "\nDeprecated since v" + t3), console.warn(i2), console.groupEnd()) : (console.warn("PixiJS Deprecation Warning: ", e3 + "\nDeprecated since v" + t3), console.warn(i2))), Yv[e3] = true;
     }
   }
-  var Jv = {}, Kv = Object.create(null), $v = Object.create(null);
+  var Jv = {}, Kv = /* @__PURE__ */ Object.create(null), $v = /* @__PURE__ */ Object.create(null);
   function Qv() {
     var t3;
     for (t3 in Kv)
@@ -28216,7 +28102,7 @@ var Slide = function(t2) {
       return n2.dropShadow && (m2 += n2.dropShadowDistance), new t3(e3, n2, p2, m2, l2, u2, f2 + n2.leading, h2, s3);
     }, t3.wordWrap = function(e3, n2, i2) {
       i2 === void 0 && (i2 = t3._canvas);
-      for (var r3 = i2.getContext("2d"), o3 = 0, s3 = "", a2 = "", l2 = Object.create(null), u2 = n2.letterSpacing, h2 = n2.whiteSpace, c2 = t3.collapseSpaces(h2), d2 = t3.collapseNewlines(h2), p2 = !c2, f2 = n2.wordWrapWidth + u2, m2 = t3.tokenize(e3), g2 = 0; g2 < m2.length; g2++) {
+      for (var r3 = i2.getContext("2d"), o3 = 0, s3 = "", a2 = "", l2 = /* @__PURE__ */ Object.create(null), u2 = n2.letterSpacing, h2 = n2.whiteSpace, c2 = t3.collapseSpaces(h2), d2 = t3.collapseNewlines(h2), p2 = !c2, f2 = n2.wordWrapWidth + u2, m2 = t3.tokenize(e3), g2 = 0; g2 < m2.length; g2++) {
         var v2 = m2[g2];
         if (t3.isNewline(v2)) {
           if (!d2) {
@@ -30188,7 +30074,7 @@ void main() {
     calcFps() {
       requestAnimationFrame((t3) => {
         const e3 = t3 - this.prevTime;
-        this.valueTotal += e3, this.times += 1, this.times > 20 && (this.value = Math.floor(800 * this.times / this.valueTotal), this.valueTotal = 0, this.times = 0, this.destroyed || this.emit("update", this.value)), this.prevTime = t3, this.destroyed || this.calcFps();
+        this.valueTotal += e3, this.times += 1, this.times > 20 && (this.value = Math.floor(1e3 * this.times / this.valueTotal), this.valueTotal = 0, this.times = 0, this.destroyed || this.emit("update", this.value)), this.prevTime = t3, this.destroyed || this.calcFps();
       });
     }
     destroy() {
@@ -30399,7 +30285,7 @@ void main() {
             if (n2 && !n2.applied) {
               if (!(n2.triggerTime <= this.timestamp))
                 break;
-              n2.fn(), n2.applied = true, t5 = this.callbackList.length;
+              n2.running = true, n2.fn(), n2.applied = true, t5 = this.callbackList.length;
             }
           }
         }
@@ -30407,11 +30293,11 @@ void main() {
     }
     setTimeout(t3, e3) {
       const n2 = iM(), i2 = this.timestamp + Math.max(e3 || 16, 16);
-      return this.callbackList.push({ fn: t3, triggerTime: i2, id: n2, applied: false }), this.callbackList.sort((t4, e4) => t4.triggerTime - e4.triggerTime), n2;
+      return this.callbackList.push({ fn: t3, triggerTime: i2, id: n2, applied: false, running: false }), this.callbackList.sort((t4, e4) => t4.triggerTime - e4.triggerTime), n2;
     }
     clearTimeout(t3) {
       const e3 = this.callbackList.findIndex((e4) => e4.id === t3);
-      e3 >= 0 && this.callbackList.splice(e3, 1);
+      e3 >= 0 && !this.callbackList[e3].running && this.callbackList.splice(e3, 1);
     }
     delay(t3) {
       return new Promise((e3) => {
@@ -30459,7 +30345,7 @@ void main() {
   };
   class aM {
     constructor(t3) {
-      this.gifs = Object.create(null), this.textures = Object.create(null), this.frames = Object.create(null), this.spriteSheets = [], this.loader = t3;
+      this.gifs = /* @__PURE__ */ Object.create(null), this.textures = /* @__PURE__ */ Object.create(null), this.frames = /* @__PURE__ */ Object.create(null), this.spriteSheets = [], this.loader = t3;
     }
     getTexture(t3) {
       return this.textures[t3] || null;
@@ -30492,7 +30378,7 @@ void main() {
       });
     }
     destroy() {
-      this.spriteSheets.forEach((t3) => t3.destroy(true)), this.spriteSheets = [], this.gifs = Object.create(null), this.textures = Object.create(null), this.frames = Object.create(null);
+      this.spriteSheets.forEach((t3) => t3.destroy(true)), this.spriteSheets = [], this.gifs = /* @__PURE__ */ Object.create(null), this.textures = /* @__PURE__ */ Object.create(null), this.frames = /* @__PURE__ */ Object.create(null);
     }
   }
   var lM = n(3), uM = n.n(lM);
@@ -30590,7 +30476,7 @@ void main() {
   };
   class gM {
     constructor() {
-      this.imgElements = [], this.svgElements = [], this.idToHashMap = Object.create(null), this.textures = Object.create(null), this.graphics = [], this.hashToIdMap = Object.create(null);
+      this.imgElements = [], this.svgElements = [], this.idToHashMap = /* @__PURE__ */ Object.create(null), this.textures = /* @__PURE__ */ Object.create(null), this.graphics = [], this.hashToIdMap = /* @__PURE__ */ Object.create(null);
     }
     render(t3, e3, n2) {
       return mM(this, void 0, void 0, function* () {
@@ -30687,7 +30573,7 @@ void main() {
       Object.keys(this.textures).forEach((t3) => {
         var e3;
         (e3 = this.textures[t3]) === null || e3 === void 0 || e3.texture.destroy(true);
-      }), this.textures = Object.create(null), this.imgElements.forEach((t3) => fM.collectObject(t3)), this.svgElements.forEach((t3) => pM.collectObject(t3)), this.graphics = [];
+      }), this.textures = /* @__PURE__ */ Object.create(null), this.imgElements.forEach((t3) => fM.collectObject(t3)), this.svgElements.forEach((t3) => pM.collectObject(t3)), this.graphics = [];
     }
   }
   class vM {
@@ -30706,7 +30592,10 @@ void main() {
   }
   class _M {
     constructor(t3) {
-      this.eventHub = t3, this.targets = Object.create(null);
+      this.eventHub = t3, this.targets = /* @__PURE__ */ Object.create(null);
+    }
+    getTargets() {
+      return Object.keys(this.targets).map((t3) => this.targets[t3]);
     }
     addTarget(t3, e3) {
       this.targets[t3] = e3;
@@ -30717,10 +30606,10 @@ void main() {
     getTarget(t3, e3, n2 = { type: "el", index: 0, id: "" }) {
       var i2, r3;
       let o3 = this.targets[t3.id];
-      return t3.type !== "shape" ? o3 : (t3.type === "shape" && t3.txEl && (o3 = (i2 = o3 == null ? void 0 : o3.getTextElement(t3.txEl.type, t3.txEl.range)) !== null && i2 !== void 0 ? i2 : null), t3.type === "shape" && t3.bg && n2.index === 0 && (e3 = false, o3 = (r3 = o3 == null ? void 0 : o3.getBgElement()) !== null && r3 !== void 0 ? r3 : null, this.eventHub.emit("IterateTimeNodeEnd", n2.id)), e3 && o3 ? o3.getIterateEntry(n2.type, n2.index, n2.id) : o3);
+      return t3.type !== "shape" ? o3 : (t3.type === "shape" && t3.txEl && (o3 = (i2 = o3 == null ? void 0 : o3.getTextElement(t3.txEl.type, t3.txEl.range)) !== null && i2 !== void 0 ? i2 : null), t3.type === "shape" && t3.bg && n2.index === 0 && (e3 = false, o3 = (r3 = o3 == null ? void 0 : o3.getBgElement()) !== null && r3 !== void 0 ? r3 : null, this.eventHub.emit("IterateTimeNodeEnd", n2.id)), e3 && o3 ? o3.getIterateEntry(n2.type, n2.index, n2.id) : (o3 || this.eventHub.emit("IterateTimeNodeEnd", n2.id), o3));
     }
     clearTargets() {
-      this.targets = Object.create(null);
+      this.targets = /* @__PURE__ */ Object.create(null);
     }
   }
   class yM {
@@ -30841,10 +30730,28 @@ void main() {
   class SM {
     constructor(t3, e3, n2) {
       var i2, r3, o3, s3, a2, l2;
-      this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new d_(0, 0, 1, 1), this.pptX = 0, this.pptY = 0, this.presetSubType = 0, this.designWidth = 0, this.designHeight = 0, this.designX = 0, this.designY = 0, this.hasPreset = false, this.container = new ty(), this.ctx = e3, this.style = new wM(this.container, t3.hardHidden), this.designGlobalPosition = { x: n2.x + ((r3 = (i2 = t3.position) === null || i2 === void 0 ? void 0 : i2.x) !== null && r3 !== void 0 ? r3 : 0), y: n2.y + ((s3 = (o3 = t3.position) === null || o3 === void 0 ? void 0 : o3.y) !== null && s3 !== void 0 ? s3 : 0) }, (t3.hlinkClick || t3.hlinkHover) && (this.hyperlink = new TM(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((l2 = this.hyperlink) === null || l2 === void 0 || l2.addAction(t3.hlinkClick, "click"))), this.ctx.clock.waitUntil(() => !!this.container.width, 3e3).then(() => {
-        this.designWidth = this.designWidth || this.container.width;
-      }), this.ctx.clock.waitUntil(() => !!this.container.height, 3e3).then(() => {
-        this.designHeight = this.designHeight || this.container.height;
+      this.scaleExt = { x: 1, y: 1 }, this.scaleOrigin = { x: 1, y: 1 }, this.designScale = { x: 1, y: 1 }, this.bound = new d_(0, 0, 1, 1), this.pptX = 0, this.pptY = 0, this.presetSubType = 0, this.designWidth = 0, this.designHeight = 0, this.designX = 0, this.designY = 0, this.hasPreset = false, this.container = new ty(), this.ctx = e3, this.style = new wM(this.container, t3.hardHidden), this.designGlobalPosition = { x: n2.x + ((r3 = (i2 = t3.position) === null || i2 === void 0 ? void 0 : i2.x) !== null && r3 !== void 0 ? r3 : 0), y: n2.y + ((s3 = (o3 = t3.position) === null || o3 === void 0 ? void 0 : o3.y) !== null && s3 !== void 0 ? s3 : 0) }, (t3.hlinkClick || t3.hlinkHover) && (this.hyperlink = new TM(this.container, this.ctx), t3.hlinkHover && ((a2 = this.hyperlink) === null || a2 === void 0 || a2.addAction(t3.hlinkHover, "hover")), t3.hlinkClick && ((l2 = this.hyperlink) === null || l2 === void 0 || l2.addAction(t3.hlinkClick, "click"))), this.ctx.clock.waitUntil(() => {
+        try {
+          return !!this.container.width;
+        } catch (t4) {
+          return false;
+        }
+      }, 3e3).then(() => {
+        try {
+          this.designWidth = this.designWidth || this.container.width;
+        } catch (t4) {
+        }
+      }), this.ctx.clock.waitUntil(() => {
+        try {
+          return !!this.container.height;
+        } catch (t4) {
+          return false;
+        }
+      }, 3e3).then(() => {
+        try {
+          this.designHeight = this.designHeight || this.container.height;
+        } catch (t4) {
+        }
       });
     }
     updateScale() {
@@ -31038,6 +30945,8 @@ void main() {
     }
     clearOnSlideChange() {
     }
+    initOnReuse() {
+    }
     getTextElement() {
       return null;
     }
@@ -31066,28 +30975,33 @@ void main() {
     }
   }
   class UM {
-    constructor(t3, e3, n2, i2, r3, o3, s3, a2, l2) {
-      this.ctx = t3, this.type = e3, this.lineWidth = n2, this.width = i2, this.fillColor = r3, this.renderContainer = new ty(), this.ghcTextureId = `${o3}-text-p${s3}-l${a2}-u${l2}-underLine`;
+    constructor(t3, e3, n2, i2, r3, o3, s3, a2, l2, u2, h2) {
+      this.ctx = t3, this.type = e3, this.lineWidth = n2, this.width = i2, this.height = r3, this.fillColor = o3, this.isHorz = s3, this.renderContainer = new ty(), this.ghcTextureId = `${a2}-text-p${l2}-l${u2}-u${h2}-underLine`;
     }
     createPaths() {
       if (this.type === "ww")
         return null;
       {
-        const t3 = `M 0,0 L ${9525 * this.width},0`;
-        return { paths: [{ id: iM(), path: t3, fill: "norm", hasStroke: true, scale: { x: 1, y: 1 }, hash: uM()(t3) }], width: this.width, height: this.lineWidth };
+        console.log("line width", this.lineWidth);
+        let t3 = `M 0,0 L ${9525 * this.width},0`, [e3, n2] = [this.width, this.lineWidth];
+        return this.isHorz || (t3 = "M 0,0 L 0," + 9525 * this.height, [e3, n2] = [this.lineWidth, this.height]), { paths: [{ id: iM(), path: t3, fill: "norm", hasStroke: true, scale: { x: 1, y: 1 }, hash: uM()(t3) }], width: e3, height: n2 };
       }
     }
+    getLineStyle() {
+      const t3 = { width: this.lineWidth };
+      return this.type === "dotted" && (t3.dash = "" + this.lineWidth), t3;
+    }
     preRender() {
       const t3 = this.createPaths();
       if (t3) {
         const { paths: e3, width: n2, height: i2 } = t3, r3 = e3.reduce((t4, e4) => t4 + e4.hash, "");
-        this.ctx.graphicsTexture.addGraphics(this.ghcTextureId, e3, r3, { x: 0, y: 0 }, n2, i2, { width: this.lineWidth }, this.ctx.objectPoolGroup, false, null, this.fillColor);
+        this.ctx.graphicsTexture.addGraphics(this.ghcTextureId, e3, r3, { x: 0, y: 0 }, n2, i2, this.getLineStyle(), this.ctx.objectPoolGroup, false, null, this.fillColor);
       }
     }
     render() {
       if (this.ghcTextureId) {
         const t3 = this.ctx.graphicsTexture.getGraphicsData(this.ghcTextureId);
-        t3 && (this.sprite = new OT(), this.sprite.texture = t3.texture, this.sprite.pivot.x = t3.pivot.x, this.sprite.texture = t3.texture);
+        t3 && (this.sprite = new OT(), this.sprite.texture = t3.texture, this.sprite.pivot.x = t3.pivot.x);
       }
     }
     destroy() {
@@ -31477,7 +31391,7 @@ void main(void){
 `), { arg: e3 });
     }
   }
-  const cA = [aA], dA = { clrChange: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.001;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= arg2.a;\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n", changeBulletColor: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.4;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= ceil(texColor.a);\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n" };
+  const cA = [aA], dA = { clrChange: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    float epsilon = 0.001;\n    vec3 colorDiff = arg1.rgb - (texColor.rgb / max(texColor.a, 0.0000000001));\n    float colorDistance = length(colorDiff);\n    if (colorDistance < epsilon) {\n        arg2.rgb *= arg2.a;\n        return arg2;\n    } else {\n        return texColor;\n    }\n}\n", changeBulletColor: "\nvec4 transform(vec4 texColor, vec4 arg1, vec4 arg2) {\n    if (texColor.a == 0.0) {\n        return texColor;\n    } else {\n        return arg2;\n    }\n}\n" };
   class pA extends Gx {
     constructor(t3, e3, n2) {
       var i2;
@@ -31523,10 +31437,10 @@ void main(void){
   }
   class vA {
     constructor(t3, e3, n2, i2, r3) {
-      this.ctx = t3, this.fillStyle = e3, this.width = n2, this.height = i2, this.config = r3, this.clonedObjects = [], this._displayObject = null, this._displayObject = this.createDisplayObject();
+      this.ctx = t3, this.fillStyle = e3, this.width = n2, this.height = i2, this.config = r3, this.clonedObjects = [], this._displayObject = null;
     }
     get displayObject() {
-      return this._displayObject;
+      return this._displayObject || (this._displayObject = this.createDisplayObject()), this._displayObject;
     }
     set displayObject(t3) {
       this._displayObject && this._displayObject.destroy({ children: true, texture: true }), this._displayObject = t3;
@@ -31621,8 +31535,12 @@ void main(void){
     constructor(t3, e3, n2) {
       var i2;
       super(t3, e3, n2), this.textureContainer = new ty(), this.underline = null, this.cacheSprite = new OT();
-      const { shapeId: r3, paragraphIndex: o3, lineIndex: s3, unitIndex: a2, lineHeight: l2, width: u2, underLine: h2, fill: c2 } = t3, d2 = ((i2 = c2 == null ? void 0 : c2.fill) === null || i2 === void 0 ? void 0 : i2.fillType) === "solidFill" ? c2.fill.color : null;
-      h2 && (this.underline = new UM(e3, h2.type, l2 / 16, u2, d2, r3, o3, s3, a2)), this.textGraphics = this.createTextGraphics(), this.textFill = this.createTextFill(), this.strokeGraphics = this.createStrokeGraphics(), this.strokeFill = this.createStrokeFill();
+      const { shapeId: r3, paragraphIndex: o3, lineIndex: s3, unitIndex: a2, lineHeight: l2, width: u2, underLine: h2, fill: c2, height: d2, isHorz: p2, lineWidth: f2 } = t3, m2 = ((i2 = c2 == null ? void 0 : c2.fill) === null || i2 === void 0 ? void 0 : i2.fillType) === "solidFill" ? c2.fill.color : null;
+      if (h2) {
+        const t4 = p2 ? l2 / 16 : f2 / 16;
+        this.underline = new UM(e3, h2.type, t4, u2, d2, m2, p2, r3, o3, s3, a2);
+      }
+      this.textGraphics = this.createTextGraphics(), this.textFill = this.createTextFill(), this.strokeGraphics = this.createStrokeGraphics(), this.strokeFill = this.createStrokeFill();
     }
     createStrokeFill() {
       const { stroke: t3, lineWidth: e3, lineHeight: n2 } = this.json;
@@ -31637,8 +31555,12 @@ void main(void){
       return t3 ? new vA(this.ctx, e3 == null ? void 0 : e3.fill, n2, Math.max(r3, i2), { useFilter: false, useSlideBackgroundFill: false }) : new vA(this.ctx, e3 == null ? void 0 : e3.fill, r3, i2, { useFilter: false, useSlideBackgroundFill: false });
     }
     createTextGraphics() {
-      const { fill: t3, content: e3 } = this.json, n2 = (t3 == null ? void 0 : t3.key) ? { fillType: "blipFill", src: t3.key, filters: [{ type: "changeBulletColor", args: ["#000000", "#FFA500"] }] } : void 0;
-      return new vA(this.ctx, n2, (t3 == null ? void 0 : t3.width) || 0, (t3 == null ? void 0 : t3.height) || 0, { useFilter: e3 === "\u25FE", useSlideBackgroundFill: false });
+      var t3;
+      const { fill: e3, content: n2 } = this.json;
+      let i2 = "#000000";
+      ((t3 = e3 == null ? void 0 : e3.fill) === null || t3 === void 0 ? void 0 : t3.fillType) === "solidFill" && (i2 = e3.fill.color);
+      const r3 = (e3 == null ? void 0 : e3.key) ? { fillType: "blipFill", src: e3.key, filters: [{ type: "changeBulletColor", args: ["#000000", i2] }] } : void 0;
+      return new vA(this.ctx, r3, (e3 == null ? void 0 : e3.width) || 0, (e3 == null ? void 0 : e3.height) || 0, { useFilter: n2 === "\u25FE", useSlideBackgroundFill: false });
     }
     getIterateEntry() {
       return null;
@@ -31670,7 +31592,7 @@ void main(void){
       }
       if (this.textGraphics.displayObject) {
         const e4 = this.textGraphics.displayObject;
-        if (e4.scale.x = 0.5, e4.scale.y = 0.5, r3 ? e4.position.y = h2 > 0 ? h2 : 0 : e4.position.x = u2, f2) {
+        if (e4.scale.x = 0.5, e4.scale.y = 0.5, r3 && (e4.position.y = h2 > 0 ? h2 : 0), f2) {
           const n3 = this.textFill.displayObject;
           if (n3)
             n3.mask = e4, n3.addChild(e4), n3.position.x = -u2, e4.position.x += u2, t3 = true, this.textureContainer.addChild(n3);
@@ -31696,7 +31618,7 @@ void main(void){
           r3 ? e4.position.y = h2 > 0 ? h2 : 0 : e4.position.x = u2, this.textureContainer.addChild(e4);
       }
       if (this.underline && (this.underline.render(), this.underline.sprite)) {
-        this.underline.sprite.position.y = o3 ? o3 - n2 / 16 : i2, this.underline.sprite.position.x = 0;
+        r3 ? (this.underline.sprite.position.y = o3 ? o3 - n2 / 16 : i2, this.underline.sprite.position.x = 0) : (this.underline.sprite.position.x = 0, this.underline.sprite.position.y = 0), document.body.appendChild(this.ctx.renderer.plugins.extract.image(this.underline.sprite));
         const t4 = this.textFill.getClonedDisplayObject();
         t4 ? (t4.mask = this.underline.sprite, t4.addChild(this.underline.sprite), this.textureContainer.addChild(t4)) : this.textureContainer.addChild(this.underline.sprite);
       }
@@ -32015,6 +31937,11 @@ void main(void){
       }
       if (n2.join("") !== "MLLLC")
         return false;
+      for (let t4 = 0; t4 < 3; t4++) {
+        const e4 = i2[t4], n3 = i2[t4 + 1];
+        if (e4.x !== n3.x && e4.y !== n3.y)
+          return false;
+      }
       const r3 = i2.slice(0, 4).reduce((t4, e4) => t4 + e4.x, 0) / 4, o3 = i2.slice(0, 4).reduce((t4, e4) => t4 + e4.y, 0) / 4;
       if (Number.isNaN(r3) || Number.isNaN(o3))
         return false;
@@ -32089,7 +32016,7 @@ void main(void){
         });
       }, this.json = t3, this.json.fillStyle && this.json.fillStyle.fillType === "groupFill" && i2 && (this.json.fillStyle = i2), this.id = t3.id;
       const { fillStyle: o3, lineStyle: s3 } = this.json;
-      this.container.name = t3.id, this.renderContainer.name = t3.id + "-render-container", this.backgroundFill = this.createBackgroundFill(), this.backgroundGraphics = this.createBackgroundGraphics(), this.strokeFill = this.createStrokeFill(), this.strokeGraphics = this.createStrokeGraphics(), this.ctx.timingTargets.addTarget(this.id, this), (o3 == null ? void 0 : o3.fillType) === "solidFill" && (this.fillColorFilter.currentColor = o3.color, this.fillColorFilter.designColor = o3.color), ((r3 = s3 == null ? void 0 : s3.fill) === null || r3 === void 0 ? void 0 : r3.fillType) === "solidFill" && (this.strokeColorFilter.currentColor = s3.fill.color, this.strokeColorFilter.designColor = s3.fill.color), this.updateTransform(this.json), t3.textBody && (this.text = new EA(t3.textBody, this.ctx, t3.textBody.iterateType, { x: this.designGlobalPosition.x, y: this.designGlobalPosition.y })), this.container.hitArea = new g_(1, 1, this.json.width, this.json.height);
+      this.container.name = t3.id, this.renderContainer.name = t3.id + "-render-container", this.generateArrowList(), this.backgroundFill = this.createBackgroundFill(), this.backgroundGraphics = this.createBackgroundGraphics(), this.strokeFill = this.createStrokeFill(), this.strokeGraphics = this.createStrokeGraphics(), this.ctx.timingTargets.addTarget(this.id, this), (o3 == null ? void 0 : o3.fillType) === "solidFill" && (this.fillColorFilter.currentColor = o3.color, this.fillColorFilter.designColor = o3.color), ((r3 = s3 == null ? void 0 : s3.fill) === null || r3 === void 0 ? void 0 : r3.fillType) === "solidFill" && (this.strokeColorFilter.currentColor = s3.fill.color, this.strokeColorFilter.designColor = s3.fill.color), this.updateTransform(this.json), t3.textBody && (this.text = new EA(t3.textBody, this.ctx, t3.textBody.iterateType, { x: this.designGlobalPosition.x, y: this.designGlobalPosition.y })), this.container.hitArea = new g_(1, 1, this.json.width, this.json.height);
     }
     get interactiveContainer() {
       return this.renderContainer;
@@ -32119,7 +32046,7 @@ void main(void){
       return this;
     }
     getIterateEntry(t3, e3, n2) {
-      return t3 === "el" || e3 === 0 ? this : this.text ? this.text.getIterateEntry(e3 - 1, n2) || null : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null);
+      return t3 === "el" ? e3 === 0 ? this : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null) : this.text ? this.text.getIterateEntry(e3 - 1, n2) || null : (this.ctx.eventHub.emit("IterateTimeNodeEnd", n2), null);
     }
     createStrokeGraphics() {
       var t3, e3, n2, i2;
@@ -32127,8 +32054,8 @@ void main(void){
       return s3 && ((e3 = s3.fill) === null || e3 === void 0 ? void 0 : e3.fillType) !== "noFill" ? new OA(r3 + "-path-graphics", this.ctx, (n2 = o3 == null ? void 0 : o3.paths) !== null && n2 !== void 0 ? n2 : [], (i2 = o3 == null ? void 0 : o3.hash) !== null && i2 !== void 0 ? i2 : "", u2 || { x: 0, y: 0 }, h2, c2, s3, false, null, d2) : null;
     }
     createStrokeFill() {
-      const { geometry: t3, lineStyle: e3, width: n2, height: i2 } = this.json, r3 = (t3 == null ? void 0 : t3.lineTransform) || NA, o3 = Object(l.isNumber)(e3 == null ? void 0 : e3.width) ? e3.width : 1;
-      return new vA(this.ctx, e3 == null ? void 0 : e3.fill, (r3.width || n2) + o3, (r3.height || i2) + o3, { useFilter: false, useSlideBackgroundFill: false });
+      const [t3, e3] = this.calculateFillObjectOffset(), { geometry: n2, lineStyle: i2, width: r3, height: o3 } = this.json, s3 = (n2 == null ? void 0 : n2.lineTransform) || NA, a2 = Object(l.isNumber)(i2 == null ? void 0 : i2.width) ? i2.width : 1;
+      return new vA(this.ctx, i2 == null ? void 0 : i2.fill, (s3.width || r3) + a2 + t3, Math.max((s3.height || o3) + a2, e3), { useFilter: false, useSlideBackgroundFill: false });
     }
     createBackgroundGraphics() {
       var t3;
@@ -32141,14 +32068,14 @@ void main(void){
       return new vA(this.ctx, n2, (a2.width || i2) + ((t3 = o3 == null ? void 0 : o3.width) !== null && t3 !== void 0 ? t3 : 0), (a2.height || r3) + ((e3 = o3 == null ? void 0 : o3.width) !== null && e3 !== void 0 ? e3 : 0), { useFilter: false, useSlideBackgroundFill: this.json.useBgFill });
     }
     createBackground() {
-      var t3, e3, n2, i2, r3, o3, s3;
-      const { pivot: a2, width: l2, height: u2 } = ((t3 = this.json.geometry) === null || t3 === void 0 ? void 0 : t3.fillTransform) || NA, { displayObject: h2 } = this.backgroundFill;
-      h2 ? (this.json.useBgFill && this.backgroundGraphics ? (this.needCacheAsBitMap = true, h2.mask = this.backgroundGraphics.displayObject, h2.pivot.x = ((n2 = this.json.position) === null || n2 === void 0 ? void 0 : n2.x) || 0, h2.pivot.y = ((i2 = this.json.position) === null || i2 === void 0 ? void 0 : i2.y) || 0) : ((r3 = this.json.fillStyle) === null || r3 === void 0 ? void 0 : r3.fillType) === "gifFill" ? (h2.height = u2 || this.designHeight, h2.width = l2 || this.designWidth, h2 instanceof jE && h2.play(), ((o3 = this.backgroundGraphics) === null || o3 === void 0 ? void 0 : o3.isNeedMask(h2.width, h2.height)) && (h2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && h2.addChild(this.backgroundGraphics.displayObject))) : ((s3 = this.backgroundGraphics) === null || s3 === void 0 ? void 0 : s3.isNeedMask(h2.width, h2.height)) && (this.needCacheAsBitMap = true, h2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && h2.addChild(this.backgroundGraphics.displayObject)), h2.x = a2.x, h2.y = a2.y, this.container.addChild(h2)) : this.backgroundFill.hasFill && ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.displayObject) && this.container.addChild(this.backgroundGraphics.displayObject);
+      var t3, e3, n2, i2, r3, o3, s3, a2;
+      const { pivot: l2, width: u2, height: h2 } = ((t3 = this.json.geometry) === null || t3 === void 0 ? void 0 : t3.fillTransform) || NA, { displayObject: c2 } = this.backgroundFill;
+      c2 ? (this.json.useBgFill && ((n2 = this.backgroundGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) ? (this.needCacheAsBitMap = true, c2.mask = this.backgroundGraphics.displayObject, c2.pivot.x = ((i2 = this.json.position) === null || i2 === void 0 ? void 0 : i2.x) || 0, c2.pivot.y = ((r3 = this.json.position) === null || r3 === void 0 ? void 0 : r3.y) || 0, this.container.addChild(this.backgroundGraphics.displayObject)) : ((o3 = this.json.fillStyle) === null || o3 === void 0 ? void 0 : o3.fillType) === "gifFill" ? (c2.height = h2 || this.designHeight, c2.width = u2 || this.designWidth, c2 instanceof jE && c2.play(), ((s3 = this.backgroundGraphics) === null || s3 === void 0 ? void 0 : s3.isNeedMask(c2.width, c2.height)) && (c2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && this.container.addChild(this.backgroundGraphics.displayObject))) : ((a2 = this.backgroundGraphics) === null || a2 === void 0 ? void 0 : a2.isNeedMask(c2.width, c2.height)) && (this.needCacheAsBitMap = true, c2.mask = this.backgroundGraphics.displayObject, this.backgroundGraphics.displayObject && this.container.addChild(this.backgroundGraphics.displayObject)), c2.x = l2.x, c2.y = l2.y, this.container.addChild(c2)) : this.backgroundFill.hasFill && ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.displayObject) && this.container.addChild(this.backgroundGraphics.displayObject);
     }
     createPathFill() {
       var t3, e3, n2;
-      const { displayObject: i2 } = this.strokeFill, r3 = (t3 = this.strokeGraphics) === null || t3 === void 0 ? void 0 : t3.displayObject;
-      i2 ? (((e3 = this.strokeGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(i2.width, i2.height)) && r3 && (this.needCacheAsBitMap = true, i2.pivot.x = r3.pivot.x, i2.pivot.y = r3.pivot.y, r3.pivot.x = 0, r3.pivot.y = 0, i2.mask = r3, i2.addChild(r3)), this.container.addChild(i2)) : this.strokeFill.hasFill && ((n2 = this.strokeGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) && this.container.addChild(this.strokeGraphics.displayObject);
+      const { displayObject: i2 } = this.strokeFill, r3 = (t3 = this.strokeGraphics) === null || t3 === void 0 ? void 0 : t3.displayObject, [o3, s3] = this.calculateFillObjectOffset();
+      i2 ? (((e3 = this.strokeGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(i2.width, i2.height)) && r3 && (this.needCacheAsBitMap = true, i2.pivot.x = r3.pivot.x, i2.pivot.y = r3.pivot.y, r3.pivot.x = 0, r3.pivot.y = 0, i2.mask = r3, i2.addChild(r3), i2.position.x = -o3 / 2, i2.position.y = -s3 / 2, r3.position.x = o3 / 2, r3.position.y = s3 / 2), this.container.addChild(i2)) : this.strokeFill.hasFill && ((n2 = this.strokeGraphics) === null || n2 === void 0 ? void 0 : n2.displayObject) && this.container.addChild(this.strokeGraphics.displayObject);
     }
     createFilledPathMask() {
       var t3, e3, n2;
@@ -32164,27 +32091,38 @@ void main(void){
       }
     }
     createArrow() {
-      this.arrowList.forEach((t3) => {
-        const e3 = this.ctx.graphicsTexture.getGraphicsData(t3.graphicsId);
-        if (e3) {
-          const n2 = new ty(), { texture: i2, pivot: r3 } = e3, o3 = new OT(i2);
-          o3.pivot.x = r3.x, o3.pivot.y = r3.y, n2.addChild(o3), n2.position.x = t3.position.x, n2.position.y = t3.position.y, n2.pivot.x = t3.pivot.x, n2.pivot.y = t3.pivot.y, n2.rotation = t3.rotate / 180 * Math.PI, this.container.addChild(n2);
-        }
+      if (!this.arrowList.length)
+        return;
+      const t3 = new ty(), e3 = this.strokeFill.getClonedDisplayObject(), [n2, i2] = this.calculateFillObjectOffset();
+      this.arrowList.forEach((e4) => {
+        const n3 = this.ctx.graphicsTexture.getGraphicsData(e4.graphicsId);
+        if (n3) {
+          const { texture: i3 } = n3, r4 = new OT(i3);
+          r4.pivot.x = e4.pivot.x, r4.pivot.y = e4.pivot.y, r4.position.x = e4.position.x + e4.pivot.x, r4.position.y = e4.position.y + e4.pivot.y, r4.rotation = e4.rotate / 180 * Math.PI, t3.addChild(r4);
+        }
+      }), this.arrowRenderTexture = Hy.create({ width: t3.width, height: t3.height, resolution: 1 }), this.ctx.renderer.render(t3, { renderTexture: this.arrowRenderTexture });
+      const r3 = new OT();
+      r3.texture = this.arrowRenderTexture, e3 && (e3.mask = r3, e3.position.x = -n2 / 2, e3.position.y = -i2 / 2, r3.position.x = -n2 / 2, r3.position.y = -i2 / 2, this.container.addChild(e3), this.container.addChild(r3));
+    }
+    generateArrowList() {
+      var t3, e3;
+      const { lineArrowList: n2, lineStyle: i2, id: r3 } = this.json, o3 = ((t3 = i2 == null ? void 0 : i2.fill) === null || t3 === void 0 ? void 0 : t3.fillType) === "solidFill" ? i2.fill.color : null;
+      (e3 = n2 || []) === null || e3 === void 0 || e3.forEach((t4, e4) => {
+        var n3, s3;
+        const a2 = new IA(Object.assign(Object.assign({}, t4), { fillStyle: i2 == null ? void 0 : i2.fill, lineWidth: (n3 = i2 == null ? void 0 : i2.width) !== null && n3 !== void 0 ? n3 : 0 }));
+        a2.graphicsId = `${r3}-arrow-${e4}-graphics`, a2.textureId = `${r3}-arrow-${e4}-fill`, this.ctx.graphicsTexture.addGraphics(a2.graphicsId, (s3 = a2.paths) !== null && s3 !== void 0 ? s3 : [], a2.hash, { x: 0, y: 0 }, a2.width, a2.height, void 0, this.ctx.objectPoolGroup, true, o3, null), this.arrowList.push(a2);
       });
     }
+    calculateFillObjectOffset() {
+      let [t3, e3] = [0, 0];
+      return this.arrowList.length && (t3 = this.arrowList.reduce((t4, e4) => Math.max(t4, e4.width), 0), e3 = this.arrowList.reduce((t4, e4) => Math.max(t4, e4.height), 0)), [t3, e3];
+    }
     preRender(t3) {
       var e3, n2, i2;
-      const { lineArrowList: r3, lineStyle: o3, id: s3, geometry: a2 } = this.json, { width: l2, height: u2 } = (a2 == null ? void 0 : a2.lineTransform) || NA, h2 = l2 || this.json.width, c2 = u2 || this.json.height, d2 = ((e3 = a2 == null ? void 0 : a2.paths) === null || e3 === void 0 ? void 0 : e3.filter((t4) => t4.fill !== "none" && t4.fill !== "norm")) || [], p2 = ((n2 = o3 == null ? void 0 : o3.fill) === null || n2 === void 0 ? void 0 : n2.fillType) === "solidFill" ? o3.fill.color : null;
+      const { lineStyle: r3, geometry: o3 } = this.json, { width: s3, height: a2 } = (o3 == null ? void 0 : o3.lineTransform) || NA, l2 = s3 || this.json.width, u2 = a2 || this.json.height, h2 = ((e3 = o3 == null ? void 0 : o3.paths) === null || e3 === void 0 ? void 0 : e3.filter((t4) => t4.fill !== "none" && t4.fill !== "norm")) || [], c2 = ((n2 = r3 == null ? void 0 : r3.fill) === null || n2 === void 0 ? void 0 : n2.fillType) === "solidFill" ? r3.fill.color : null;
       t3.addSubMTask(() => LA(this, void 0, void 0, function* () {
-        for (const t4 of d2)
-          this.ctx.graphicsTexture.addGraphics(t4.id, [t4], t4.hash, ((a2 == null ? void 0 : a2.lineTransform) || NA).pivot, h2, c2, o3, this.ctx.objectPoolGroup, true, null, p2);
-      })), t3.addSubMTask(() => LA(this, void 0, void 0, function* () {
-        var t4;
-        (t4 = r3 || []) === null || t4 === void 0 || t4.forEach((t5, e4) => {
-          var n3, i3;
-          const r4 = new IA(Object.assign(Object.assign({}, t5), { fillStyle: o3 == null ? void 0 : o3.fill, lineWidth: (n3 = o3 == null ? void 0 : o3.width) !== null && n3 !== void 0 ? n3 : 0 }));
-          r4.graphicsId = `${s3}-arrow-${e4}-graphics`, r4.textureId = `${s3}-arrow-${e4}-fill`, this.ctx.graphicsTexture.addGraphics(r4.graphicsId, (i3 = r4.paths) !== null && i3 !== void 0 ? i3 : [], r4.hash, r4.pivot || { x: 0, y: 0 }, r4.width, r4.height, void 0, this.ctx.objectPoolGroup, true, p2, null), this.arrowList.push(r4);
-        });
+        for (const t4 of h2)
+          this.ctx.graphicsTexture.addGraphics(t4.id, [t4], t4.hash, ((o3 == null ? void 0 : o3.lineTransform) || NA).pivot, l2, u2, r3, this.ctx.objectPoolGroup, true, null, c2);
       })), (i2 = this.text) === null || i2 === void 0 || i2.createParagraphs(this.json.id, t3);
     }
     subClassRender() {
@@ -32219,7 +32157,7 @@ void main(void){
           }
           this.renderContainer.addChild(this.container);
         }
-        if (this.needCacheAsBitMap && (this.renderContainer.cacheAsBitmap = !!this.json.cacheAsBitMap), this.json.id === "background" && this.ctx.hasBackgroundFillShape) {
+        if (this.needCacheAsBitMap, this.json.id === "background" && this.ctx.hasBackgroundFillShape) {
           const t5 = Hy.create({ width: this.json.width, height: this.json.height, resolution: Math.ceil(this.ctx.renderer.resolution) });
           this.ctx.renderer.render(this.renderContainer, { renderTexture: t5 }), this.ctx.bgTexture = t5;
         }
@@ -32227,9 +32165,11 @@ void main(void){
     }
     clearOnSlideChange() {
     }
+    initOnReuse() {
+    }
     destroy() {
-      var t3, e3, n2;
-      (t3 = this.text) === null || t3 === void 0 || t3.destroy(), this.fillColorFilter.destroy(), this.strokeColorFilter.destroy(), this.backgroundFill.destroy(), (e3 = this.backgroundGraphics) === null || e3 === void 0 || e3.destroy(), this.strokeFill.destroy(), (n2 = this.strokeGraphics) === null || n2 === void 0 || n2.destroy(), this.renderContainer.destroy(), this.arrowList = [];
+      var t3, e3, n2, i2;
+      (t3 = this.text) === null || t3 === void 0 || t3.destroy(), this.fillColorFilter.destroy(), this.strokeColorFilter.destroy(), this.backgroundFill.destroy(), (e3 = this.backgroundGraphics) === null || e3 === void 0 || e3.destroy(), this.strokeFill.destroy(), (n2 = this.strokeGraphics) === null || n2 === void 0 || n2.destroy(), this.renderContainer.destroy(), (i2 = this.arrowRenderTexture) === null || i2 === void 0 || i2.destroy(true), this.arrowList = [];
     }
   }
   var FA = function(t3, e3, n2, i2) {
@@ -32335,8 +32275,8 @@ void main(void){
     }
     setControllerPosition() {
       var t3;
-      const { target: e3 } = this, { stageWidth: n2, stageHeight: i2 } = this.ctx, r3 = e3.getGlobalPosition(), o3 = 1 / Number((t3 = this.container) === null || t3 === void 0 ? void 0 : t3.getAttribute("data-scale"));
-      r3.y = r3.y + this.height - 50, r3.x = Math.max(r3.x, 0), r3.x = Math.min(r3.x, n2 - 300 * o3), r3.y = Math.max(r3.y, 0), r3.y = Math.min(r3.y, i2 - 50), BA(this.mediaController, { height: "50px", borderRadius: "25px", width: "300px", flexDirection: "row", alignItems: "center", position: "absolute", left: r3.x + "px", top: r3.y + "px", display: "none", background: "#fff", zIndex: "2", border: "1px solid #ccc", transform: `scale(${o3})`, transformOrigin: "0 100%" });
+      const { target: e3 } = this, { stageWidth: n2, stageHeight: i2 } = this.ctx, r3 = e3.getGlobalPosition(), o3 = Number((t3 = this.container) === null || t3 === void 0 ? void 0 : t3.getAttribute("data-scale")), s3 = n2 * o3, a2 = 1 / o3 * (300 > s3 ? s3 / 300 : 1);
+      r3.y = r3.y + this.height - 50, r3.x = Math.max(r3.x, 0), r3.x = Math.min(r3.x, n2 - 300 * a2), r3.y = Math.max(r3.y, 0), r3.y = Math.min(r3.y, i2 - 50), BA(this.mediaController, { height: "50px", borderRadius: "25px", width: "300px", flexDirection: "row", alignItems: "center", position: "absolute", left: r3.x + "px", top: r3.y + "px", display: "none", background: "#fff", zIndex: "2", border: "1px solid #ccc", transform: `scale(${a2})`, transformOrigin: "0 100%" });
     }
     createMediaController() {
       this.setControllerPosition(), this.createButton();
@@ -32550,7 +32490,7 @@ void main(void){
   }
   class jA extends DA {
     constructor(t3, e3, n2, i2) {
-      super(Object.assign(Object.assign({}, t3), { type: "Shape", useBgFill: false, textRotateWithShape: true, isPicture: true }), e3, n2, i2), this.cmd = new xM(this), this.media = t3 == null ? void 0 : t3.media, this.picFill = new vA(this.ctx, t3.picFill, t3.width, t3.height, { useFilter: false, useSlideBackgroundFill: false });
+      super(Object.assign(Object.assign({}, t3), { type: "Shape", useBgFill: false, textRotateWithShape: true, isPicture: true }), e3, n2, i2), this.isInteractiveOutside = false, this.cmd = new xM(this), this.media = t3 == null ? void 0 : t3.media, this.picFill = new vA(this.ctx, t3.picFill, t3.width, t3.height, { useFilter: false, useSlideBackgroundFill: false });
     }
     applyCommand(t3, e3) {
       var n2, i2, r3, o3, s3;
@@ -32569,9 +32509,11 @@ void main(void){
       const { displayObject: o3 } = this.picFill;
       if (o3) {
         const s3 = (t3 = this.backgroundGraphics) === null || t3 === void 0 ? void 0 : t3.getClonedDisplayObject();
-        ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(o3.width, o3.height)) && s3 && (o3.mask = s3, this.container.addChild(s3)), o3.width = this.designWidth, o3.height = this.designHeight, o3 instanceof jE && o3.play(), this.container.addChild(o3), ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "video" && this.media.src ? (this.mediaPlayer = new GA({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, target: o3, container: this.container, canvasElement: this.ctx.view }), (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.sprite) : ((r3 = this.media) === null || r3 === void 0 ? void 0 : r3.type) === "audio" && this.media.src && (this.mediaPlayer = new zA({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, target: o3, canvasElement: this.ctx.view })), this.mediaPlayer && (o3.interactive = true, o3.on("mouseover", () => {
+        ((e3 = this.backgroundGraphics) === null || e3 === void 0 ? void 0 : e3.isNeedMask(o3.width, o3.height)) && s3 && (o3.mask = s3, this.container.addChild(s3)), o3.width = this.designWidth, o3.height = this.designHeight, o3 instanceof jE && this.ctx.slideScopeEventHub.once("slide-render", (t4) => {
+          this.ctx.slideIndex === t4 && o3.play();
+        }), this.container.addChild(o3), ((n2 = this.media) === null || n2 === void 0 ? void 0 : n2.type) === "video" && this.media.src ? (this.mediaPlayer = new GA({ id: this.json.id + "-video", ctx: this.ctx, video: this.media, height: this.designHeight, width: this.designWidth, target: o3, container: this.container, canvasElement: this.ctx.view }), (i2 = this.mediaPlayer) === null || i2 === void 0 || i2.sprite) : ((r3 = this.media) === null || r3 === void 0 ? void 0 : r3.type) === "audio" && this.media.src && (this.mediaPlayer = new zA({ id: this.json.id + "-audio", ctx: this.ctx, audio: this.media, height: this.designHeight, width: this.designWidth, target: o3, canvasElement: this.ctx.view })), this.mediaPlayer && (this.isInteractiveOutside = this.container.interactive, this.container.interactive = true, this.container.on("mouseover", () => {
           this.mediaPlayer.showController();
-        }), o3.on("mouseout", () => {
+        }), this.container.on("mouseout", () => {
           this.mediaPlayer.hideController();
         }, false));
       }
@@ -32583,10 +32525,13 @@ void main(void){
       this.renderPic();
     }
     clearOnSlideChange() {
-      super.clearOnSlideChange(), this.mediaPlayer && (this.picFill.displayObject && (this.picFill.displayObject.interactive = false), this.mediaPlayer.stop());
+      super.clearOnSlideChange(), this.mediaPlayer && (this.container.interactive = false, this.mediaPlayer.stop(), this.mediaPlayer.hideController());
+    }
+    initOnReuse() {
+      super.initOnReuse(), this.mediaPlayer && (this.container.interactive = true);
     }
     destroy() {
-      this.mediaPlayer && (this.picFill.displayObject && (this.picFill.displayObject.interactive = false), this.mediaPlayer.destroy(), this.mediaPlayer = void 0), this.picFill.destroy();
+      this.mediaPlayer && (this.picFill.displayObject && !this.isInteractiveOutside && (this.container.interactive = false), this.mediaPlayer.destroy(), this.mediaPlayer = void 0), this.picFill.destroy();
     }
   }
   var VA = function(t3, e3, n2, i2) {
@@ -32660,6 +32605,9 @@ void main(void){
     clearOnSlideChange() {
       this.children.forEach((t3) => t3.clearOnSlideChange());
     }
+    initOnReuse() {
+      this.children.forEach((t3) => t3.initOnReuse());
+    }
     destroy() {
       this.cacheSprite && this.cacheSprite.destroy({ texture: true }), this.children.forEach((t3) => t3.destroy()), this.container.destroy({ children: true, texture: true, baseTexture: true }), this.cacheContainer.destroy({ children: true, texture: true, baseTexture: true });
     }
@@ -33055,9 +33003,7 @@ void main(void){
         const i2 = e3 / t4, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2);
         this.timingTarget && r3 && (this.timingTarget.ppt_x = r3.x + this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = r3.y + +this.timingTarget.design_ppt_y);
       }, this.onSeekToStart = () => {
-        var t4, e3, n2;
-        const i2 = (e3 = (t4 = this.commonTimeNode.json) === null || t4 === void 0 ? void 0 : t4.spd) !== null && e3 !== void 0 ? e3 : 1, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2 > 0 ? 0 : 1);
-        this.timingTarget && r3 && (this.timingTarget.ppt_x = r3.x + this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = r3.y + this.timingTarget.design_ppt_y);
+        this.timingTarget && (this.timingTarget.ppt_x = this.timingTarget.design_ppt_x, this.timingTarget.ppt_y = this.timingTarget.design_ppt_y);
       }, this.onSeekToEnd = () => {
         var t4, e3, n2;
         const i2 = (e3 = (t4 = this.commonTimeNode.json) === null || t4 === void 0 ? void 0 : t4.spd) !== null && e3 !== void 0 ? e3 : 1, r3 = (n2 = this.path) === null || n2 === void 0 ? void 0 : n2.getPoint(i2 > 0 ? 1 : 0);
@@ -33132,8 +33078,10 @@ void main(void){
   }
   class mR extends JA {
     constructor(t3) {
-      super(t3), this.isConflict = false, this.activeWhenConflict = "next", this.startColorString = null, this.currentColorString = "#FFFFFFFF", this.onTimelineStart = (t4) => {
-        t4.isReverse || this.updateCurrentValue(), this.from.isInit() || this.from.fromHexString(this.currentColorString), this.to.isInit() || this.from.by(this.by, this.to);
+      super(t3), this.isConflict = false, this.activeWhenConflict = "next", this.isTimelineStart = false, this.startColorString = null, this.currentColorString = "#FFFFFFFF", this.onTimelineStart = (t4) => {
+        if (this.isTimelineStart)
+          return;
+        this.isTimelineStart = true, t4.isReverse || this.updateCurrentValue(), this.from.isInit() || this.from.fromHexString(this.currentColorString), this.to.isInit() || this.from.by(this.by, this.to);
         const [e3] = this.json.cBhvr.attrList[0].split(".");
         YA(this.timingTarget, e3 + ".on", "true");
       }, this.onTimeNodeEnd = () => {
@@ -33141,6 +33089,7 @@ void main(void){
           const [t4] = this.json.cBhvr.attrList[0].split(".");
           YA(this.timingTarget, t4 + ".on", "false");
         }
+        this.isTimelineStart = false;
       }, this.onSeekToStart = () => {
         var t4;
         if (this.timingTarget && (this.onTimeUpdate({ duration: 1, delta: 0 }), ((t4 = this.timingTarget.fill) === null || t4 === void 0 ? void 0 : t4.designColor.toUpperCase()) === this.from.toHexString().toUpperCase())) {
@@ -33156,7 +33105,7 @@ void main(void){
         const n2 = t4 / e3;
         this.to.interpolationFrom(this.from, n2, this.target), this.timingTarget && YA(this.timingTarget, this.json.cBhvr.attrList[0], this.target.toHexString());
       }, this.onSeekToEnd = () => {
-        this.onTimeUpdate({ duration: 1, delta: 1 });
+        this.isTimelineStart || this.onTimelineStart({ isReverse: false, activeCount: 0, id: "" }), this.onTimeUpdate({ duration: 1, delta: 1 });
       }, this.json.clrSpc === "rgb" ? (this.from = new MM(this.json.from), this.to = new MM(this.json.to), this.by = new MM(this.json.by), this.target = new MM()) : (this.from = new EM(this.json.from), this.to = new EM(this.json.to), this.by = new EM(this.json.by), this.target = new EM()), this.commonTimeNode.on("timeNodeStart", this.onTimeNodeStart), this.commonTimeNode.on("timeNodeCreate", this.onTimeNodeStart), this.commonTimeNode.on("timelineStart", this.onTimelineStart), this.commonTimeNode.on("timeNodeEnd", this.onTimeNodeEnd), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate);
     }
     get modifyAttrKey() {
@@ -33216,7 +33165,7 @@ void main(void){
         this.isApplied = false;
       }), this.commonTimeNode.on("timeNodeEnd", () => {
         this.isApplied = false;
-      }), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate);
+      }), this.commonTimeNode.on("timeUpdate", this.onTimeUpdate), this.commonTimeNode.on("seekToStart", this.onSeekToStart), this.commonTimeNode.on("seekToEnd", this.onSeekToEnd);
     }
     get modifyAttrKey() {
       var t3, e3, n2, i2;
@@ -33288,7 +33237,7 @@ void main(void){
     constructor(t3) {
       var e3, n2;
       super(), this.uuid = Date.now().toString(32) + Math.random().toString(32).substring(2), this.isSub = false, this.isShadow = false, this.startCount = 0, this.applyCount = 0, this.isReverse = false, this.isConflictDispose = false, this.isIterateEnd = false, this.parentTimeNode = null, this.isActive = false, this.isDestroy = false, this.shouldSeekOnStart = false, this.repeatTimeoutId = "", this.iterateShadows = [], this.isEndEventsEmitted = false, this.tmFilter = [], this.timeDelta = 0, this.isIterate = false, this.iterateType = "el", this.iterateIndex = 0, this.children = [], this.subList = [], this.duration = 0, this.isNegativeSpeed = false, this.handleEndCond = () => {
-        this.isActive && (this.isActive = false, this.dispose());
+        this.isActive && (this.isActive = false, this.seekToEnd(false, true));
       }, this.handleActive = (t4 = true) => {
         if (this.isActive = true, this.applyCount += 1, this.json.iterate || this.emit("timeNodeStart", { id: this.uuid, activeCount: this.applyCount, isReverse: this.isReverse }), this.startCount > 0 && this.json.restart) {
           if (this.json.restart === "never")
@@ -33441,25 +33390,26 @@ void main(void){
     isNatureTimeEnd() {
       return this.duration >= 0 && this.timeDelta >= this.duration;
     }
-    setPreStyle() {
-      if (!this.json.presetClass)
-        return;
+    findTargets() {
       const t3 = [], e3 = (n2) => {
         n2.forEach((n3) => {
           var i2, r3, o3;
           n3.cBhvr && n3.cBhvr.target && t3.findIndex((t4) => t4.id === n3.cBhvr.target.id) < 0 && t3.push(n3.cBhvr.target), ((r3 = (i2 = n3 == null ? void 0 : n3.cBhvr) === null || i2 === void 0 ? void 0 : i2.ctn) === null || r3 === void 0 ? void 0 : r3.childTnLst) && n3.cBhvr.ctn.childTnLst.length > 0 && e3(n3.cBhvr.ctn.childTnLst), ((o3 = n3 == null ? void 0 : n3.ctn) === null || o3 === void 0 ? void 0 : o3.childTnLst) && n3.ctn.childTnLst.length > 0 && e3(n3.ctn.childTnLst);
         });
       };
-      e3(this.json.childTnLst || []), t3.forEach((t4) => {
+      return e3(this.json.childTnLst || []), t3;
+    }
+    setPreStyle() {
+      this.json.presetClass && this.findTargets().forEach((t3) => {
         if (this.json.iterate) {
-          let e4 = 0, n2 = true;
+          let e3 = 0, n2 = true;
           for (; n2; ) {
-            const i2 = this.ctx.timingTargets.getTarget(t4, true, { type: this.json.iterate.type, index: e4, id: "" });
-            i2 && (this.setPreStyleForTarget(i2), e4 += 1), n2 = !!i2;
+            const i2 = this.ctx.timingTargets.getTarget(t3, true, { type: this.json.iterate.type, index: e3, id: "" });
+            i2 && (this.setPreStyleForTarget(i2), e3 += 1), n2 = !!i2;
           }
         } else {
-          const e4 = this.ctx.timingTargets.getTarget(t4, false);
-          e4 && this.setPreStyleForTarget(e4);
+          const e3 = this.ctx.timingTargets.getTarget(t3, false);
+          e3 && this.setPreStyleForTarget(e3);
         }
       });
     }
@@ -33643,10 +33593,10 @@ void main(void){
     }
     resetAllInteractiveSeq() {
       var t3;
-      ((t3 = this.tmRoot) === null || t3 === void 0 ? void 0 : t3.commonTimeNode.children.filter((t4) => {
+      (((t3 = this.tmRoot) === null || t3 === void 0 ? void 0 : t3.commonTimeNode.children.filter((t4) => {
         var e3, n2, i2;
         return ((e3 = t4.json) === null || e3 === void 0 ? void 0 : e3.type) === "seq" && ((i2 = (n2 = t4.json) === null || n2 === void 0 ? void 0 : n2.ctn) === null || i2 === void 0 ? void 0 : i2.nodeType) === "interactiveSeq";
-      })).forEach((t4) => {
+      })) || []).forEach((t4) => {
         t4.setCurrentStep(0, "start");
       });
     }
@@ -33689,7 +33639,7 @@ void main(void){
       return !!t3 && (t3.type === "Picture" || t3.type === "Shape" ? t3.useBgFill : !(!t3.children || !Object(l.isArray)(t3.children)) && t3.children.some((t4) => this.detectUseBackgroundFill(t4)));
     }
     initOnReuse() {
-      this.globalEventHub.on("c:prev slide", () => {
+      super.initOnReuse(), this.globalEventHub.on("c:prev slide", () => {
         this.ctx.eventHub.emit(zR.requestPrevSlide);
       }), this.globalEventHub.on("c:next slide", () => {
         this.ctx.eventHub.emit(zR.requestNextSlide);
@@ -33730,7 +33680,9 @@ void main(void){
     }
     clearOnTransactionEnd() {
       var t3, e3;
-      (t3 = this.timing) === null || t3 === void 0 || t3.resetAllInteractiveSeq(), (e3 = this.timing) === null || e3 === void 0 || e3.destroy(), this.timing = void 0;
+      this.ctx.timingTargets.getTargets().forEach((t4) => {
+        t4.hasPreset = false;
+      }), (t3 = this.timing) === null || t3 === void 0 || t3.resetAllInteractiveSeq(), (e3 = this.timing) === null || e3 === void 0 || e3.destroy(), this.timing = void 0;
     }
     destroy() {
       var t3, e3;
@@ -33757,11 +33709,11 @@ void main(void){
     }
     nextStep() {
       var t3;
-      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? this.globalEventHub.emit("shape slide onNext") : this.ctx.eventHub.emit(zR.requestNextSlide);
+      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? (this.globalEventHub.emit("shape slide onStopAudio"), this.globalEventHub.emit("shape slide onNext")) : this.ctx.eventHub.emit(zR.requestNextSlide);
     }
     prevStep() {
       var t3;
-      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? this.globalEventHub.emit("shape slide onPrev") : this.ctx.eventHub.emit(zR.requestPrevSlide);
+      this.hasTiming() && ((t3 = this.timing) === null || t3 === void 0 ? void 0 : t3.hasMainSeq()) ? (this.globalEventHub.emit("shape slide onStopAudio"), this.globalEventHub.emit("shape slide onPrev")) : this.ctx.eventHub.emit(zR.requestPrevSlide);
     }
     applyInteractiveAction(t3) {
       var e3;
@@ -33938,7 +33890,7 @@ void main(void){
   };
   class kR {
     constructor(t3, e3, n2, i2, r3, o3, s3) {
-      this.loader = t3, this.mode = e3, this.renderer = n2, this.ticker = i2, this.view = r3, this.clock = o3, this.objPoolGroup = s3, this.currentStageIndex = 0, this.cacheCount = BR.isDesktop() ? 2 : 1, this.stageStates = Object.create(null), this.stageJsons = Object.create(null), this.stageCtxs = Object.create(null), this.stageImpls = Object.create(null), this.taskId = "", this.url = "", this.microTaskManager = new RR(i2);
+      this.loader = t3, this.mode = e3, this.renderer = n2, this.ticker = i2, this.view = r3, this.clock = o3, this.objPoolGroup = s3, this.currentStageIndex = 0, this.cacheCount = BR.isDesktop() ? 2 : 1, this.stageStates = /* @__PURE__ */ Object.create(null), this.stageJsons = /* @__PURE__ */ Object.create(null), this.stageCtxs = /* @__PURE__ */ Object.create(null), this.stageImpls = /* @__PURE__ */ Object.create(null), this.taskId = "", this.url = "", this.microTaskManager = new RR(i2);
     }
     setSnapshotCache(t3) {
       this.snapshotCache = t3;
@@ -33949,7 +33901,7 @@ void main(void){
     createCtx(t3) {
       const { task: e3 } = this.stageStates[t3];
       e3.addMTask(() => {
-        const e4 = new aM(this.loader), n2 = new a.a(), i2 = { mode: this.mode, renderer: this.renderer, graphicsTexture: new gM(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new _M(n2), eventHub: n2, view: this.view, medias: Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new vM(), clock: this.clock, spriteTexture: e4, slideIndex: t3, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false };
+        const e4 = new aM(this.loader), n2 = new a.a(), i2 = { mode: this.mode, renderer: this.renderer, graphicsTexture: new gM(), stageWidth: 0, stageHeight: 0, ticker: this.ticker, timingTargets: new _M(n2), eventHub: n2, view: this.view, medias: /* @__PURE__ */ Object.create(null), lastViewedIndex: 0, conflictTimeNodeManager: new vM(), clock: this.clock, spriteTexture: e4, slideIndex: t3, objectPoolGroup: this.objPoolGroup, hasBackgroundFillShape: false, slideScopeEventHub: new a.a() };
         return this.stageCtxs[t3] = i2, Promise.resolve();
       });
     }
@@ -34081,7 +34033,7 @@ void main(void){
       }, this.fps.on("update", (t4) => {
         if (t4 < this.config.minFPS) {
           if (this.config.autoResolution) {
-            const t5 = this.scale * this.config.resolution * 0.7, e4 = this.app.renderer.resolution, n3 = Math.max(t5, e4 - 0.1);
+            const t5 = 0.7 * this.scale, e4 = this.app.renderer.resolution, n3 = Math.max(t5, e4 - 0.1);
             n3 >= t5 && this.updateResolution(n3);
           }
           if (this.config.autoFPS) {
@@ -34152,12 +34104,16 @@ void main(void){
           const n3 = t3.toString() + (this.isForward || e3 ? "-start" : "-end"), r4 = yield (i2 = this.snapshotCache) === null || i2 === void 0 ? void 0 : i2.getItem(n3);
           u2 = r4 || this.getBase64(this.currentStage);
         }
-        r3.container.visible = false, this.app.stage.addChild(r3.container), this.prevSlideBase64 && u2 && r3.json.transition && r3.json.transition.type && l2 && r3 && (yield this.playTransaction(this.prevSlideBase64, u2, r3.json.transition, l2, r3), this.prevSlideBase64 = null), this.isForward ? yield r3.startTiming() : r3.setMainSeqApplied(), this.updateResolution(this.config.resolution * this.scale), r3.container.visible = true, l2 && (l2.setMainSeqStep(0, "start"), l2.clearOnTransactionEnd(), this.app.stage.removeChild(l2.container)), this.emit(zR.renderEnd, t3), this.emit(zR.slideChange, t3), this.preload(t3 + 1).catch(() => {
+        r3.container.visible = false, this.app.stage.addChild(r3.container);
+        let { transition: h2 } = r3.json;
+        !this.isForward && (l2 == null ? void 0 : l2.json.transition) && (h2 = l2.json.transition), this.prevSlideBase64 && u2 && h2 && h2.type && l2 && r3 && (yield this.playTransaction(this.prevSlideBase64, u2, h2, l2, r3), this.prevSlideBase64 = null), this.isForward ? yield r3.startTiming() : r3.setMainSeqApplied(), this.updateResolution(this.config.resolution * this.scale), r3.container.visible = true, l2 && (l2.setMainSeqStep(0, "start"), l2.clearOnTransactionEnd(), this.app.stage.removeChild(l2.container)), r3.ctx.slideScopeEventHub.emit("slide-render", r3.ctx.slideIndex), this.emit(zR.renderEnd, t3), this.emit(zR.slideChange, t3), this.preload(t3 + 1).catch(() => {
         }), this.preload(t3 - 1).catch(() => {
         });
       });
     }
     getBase64(t3) {
+      if (!t3.container.transform)
+        return null;
       const e3 = Hy.create({ width: this.designWidth, height: this.designHeight, resolution: 1 });
       this.app.renderer.render(t3.container, { renderTexture: e3 });
       const n2 = this.app.renderer.plugins.extract.base64(e3, "image/jpeg");
@@ -34191,7 +34147,9 @@ void main(void){
     }
     updateResolution(t3) {
       this.app.ticker.addOnce(() => {
-        const e3 = BR.isDesktop() ? t3 : 1;
+        let e3 = BR.isDesktop() ? t3 : 1;
+        for (; e3 * this.designWidth > 5120 || e3 * this.designHeight > 5120; )
+          e3 -= 0.1;
         this.app.renderer.resolution = e3, this.app.renderer.plugins.interaction.resolution = this.app.renderer.resolution, this.app.renderer.resize(this.designWidth, this.designHeight);
       });
     }
@@ -34261,7 +34219,7 @@ void main(void){
       this.app.ticker.start();
     }
     getSnapshot() {
-      return this.currentStage ? this.getBase64(this.currentStage) : "";
+      return this.currentStage && this.getBase64(this.currentStage) || "";
     }
     createSnapshotForNextSlide(t3) {
       var e3, n2;
@@ -34329,7 +34287,7 @@ void main(void){
       return true;
     var i2 = (n2 = (e3 = t3) === null || e3 === void 0 ? void 0 : e3.ownerDocument) === null || n2 === void 0 ? void 0 : n2.defaultView;
     return !!(i2 && t3 instanceof i2.Element);
-  }, tP = typeof window != "undefined" ? window : {}, eP = new WeakMap(), nP = /auto|scroll/, iP = /^tb|vertical/, rP = /msie|trident/i.test(tP.navigator && tP.navigator.userAgent), oP = function(t3) {
+  }, tP = typeof window != "undefined" ? window : {}, eP = /* @__PURE__ */ new WeakMap(), nP = /auto|scroll/, iP = /^tb|vertical/, rP = /msie|trident/i.test(tP.navigator && tP.navigator.userAgent), oP = function(t3) {
     return parseFloat(t3 || "0");
   }, sP = function(t3, e3, n2) {
     return t3 === void 0 && (t3 = 0), e3 === void 0 && (e3 = 0), n2 === void 0 && (n2 = false), new ZR((n2 ? e3 : t3) || 0, (n2 ? t3 : e3) || 0);
@@ -34475,7 +34433,7 @@ void main(void){
     }, t3;
   }(), EP = function(t3, e3) {
     this.activeTargets = [], this.skippedTargets = [], this.observationTargets = [], this.observer = t3, this.callback = e3;
-  }, MP = new WeakMap(), AP = function(t3, e3) {
+  }, MP = /* @__PURE__ */ new WeakMap(), AP = function(t3, e3) {
     for (var n2 = 0; n2 < t3.length; n2 += 1)
       if (t3[n2].target === e3)
         return n2;
@@ -34649,7 +34607,7 @@ void main(void){
       });
     }
     return t3.prototype.replaceIdleTask = function() {
-      for (var t4, e3 = this, n2 = new Set(), i2 = 0, r3 = this.tasks.length; i2 < r3; i2++)
+      for (var t4, e3 = this, n2 = /* @__PURE__ */ new Set(), i2 = 0, r3 = this.tasks.length; i2 < r3; i2++)
         this.tasks[i2].state === "idle" && ((t4 = this.tasks[i2 + 1]) === null || t4 === void 0 ? void 0 : t4.state) === "idle" && n2.add(i2);
       Array.from(n2).forEach(function(t5) {
         e3.tasks.splice(t5, 1);
@@ -35629,11 +35587,13 @@ void main(void){
     return t3.prototype.createStats = function() {
       var t4 = this;
       this.stateId = setInterval(function() {
-        t4.player.view && (t4.controller.runTimeFps.setValue(t4.player.runtime.fps), t4.controller.runTimeResolution.setValue(t4.player.view.width + "*" + t4.player.view.height));
+        t4.player.view && (t4.controller.runTimeFps.setValue(t4.player.fps.value), t4.controller.drawCall.setValue(t4.player.runtime.drawCall), t4.controller.runTimeResolution.setValue(t4.player.view.width + "*" + t4.player.view.height));
       }, 500);
     }, t3.prototype.createControllerGUI = function() {
       var t4, e3, n2, i2, r3, o3 = new GC({ autoPlace: true, closed: true });
-      return o3.domElement.style.opacity = ".6", o3.domElement.style.transformOrigin = "100% 0", o3.domElement.style.transform = "scale(1.4)", this.target.appendChild(o3.domElement), o3.domElement.style.position = "absolute", o3.domElement.style.right = "0", o3.domElement.style.top = "0", o3.domElement.style.zIndex = "2", this.controller = { runTimeFps: o3.add({ FPS: 0 }, "FPS", 0), runTimeResolution: o3.add({ "\u5206\u8FA8\u7387": "" }, "\u5206\u8FA8\u7387", ""), autoResolution: o3.add({ "\u81EA\u52A8\u5206\u8FA8\u7387": (t4 = this.data.autoResolution) !== null && t4 !== void 0 && t4 }, "\u81EA\u52A8\u5206\u8FA8\u7387", true), autoFps: o3.add({ "\u81EA\u52A8fps": (e3 = this.data.autoFPS) === null || e3 === void 0 || e3 }, "\u81EA\u52A8fps", true), moreCalculation: o3.add({ "\u989D\u5916\u8BA1\u7B97": 0 }, "\u989D\u5916\u8BA1\u7B97", 0, 100), minFPS: o3.add({ "\u6700\u4F4Efps": (n2 = this.data.minFPS) !== null && n2 !== void 0 ? n2 : 40 }, "\u6700\u4F4Efps", 0, 60), maxFPS: o3.add({ "\u6700\u9AD8fps": (i2 = this.data.maxFPS) !== null && i2 !== void 0 ? i2 : 50 }, "\u6700\u9AD8fps", 0, 60), resolution: o3.add({ "\u76EE\u6807\u5206\u8FA8\u500D\u7387": (r3 = this.data.resolution) !== null && r3 !== void 0 ? r3 : window.devicePixelRatio }, "\u76EE\u6807\u5206\u8FA8\u500D\u7387", 0.5, 4) }, this.controller.runTimeFps.disabled = true, this.controller.runTimeResolution.disabled = true, o3;
+      o3.domElement.style.opacity = ".6", o3.domElement.style.transformOrigin = "100% 0", o3.domElement.style.transform = "scale(1)", this.target.appendChild(o3.domElement), o3.domElement.style.position = "absolute", o3.domElement.style.right = "0", o3.domElement.style.top = "0", o3.domElement.style.zIndex = "2";
+      var s3 = o3.add({ FPS: 0 }, "FPS", 0), a2 = o3.add({ drawCall: 0 }, "drawCall", 0), l2 = o3.add({ "\u5206\u8FA8\u7387": "" }, "\u5206\u8FA8\u7387", ""), u2 = o3.add({ "\u989D\u5916\u8BA1\u7B97": 0 }, "\u989D\u5916\u8BA1\u7B97", 0, 200), h2 = o3.addFolder("renderOptions");
+      return this.controller = { runTimeResolution: l2, runTimeFps: s3, drawCall: a2, moreCalculation: u2, minFPS: h2.add({ "\u6700\u4F4Efps": (t4 = this.data.minFPS) !== null && t4 !== void 0 ? t4 : 40 }, "\u6700\u4F4Efps", 0, 60), maxFPS: h2.add({ "\u6700\u9AD8fps": (e3 = this.data.maxFPS) !== null && e3 !== void 0 ? e3 : 50 }, "\u6700\u9AD8fps", 0, 60), resolution: h2.add({ "\u76EE\u6807\u5206\u8FA8\u500D\u7387": (n2 = this.data.resolution) !== null && n2 !== void 0 ? n2 : window.devicePixelRatio }, "\u76EE\u6807\u5206\u8FA8\u500D\u7387", 0.5, 6), autoResolution: h2.add({ "\u81EA\u52A8\u5206\u8FA8\u7387": (i2 = this.data.autoResolution) !== null && i2 !== void 0 && i2 }, "\u81EA\u52A8\u5206\u8FA8\u7387", true), autoFps: h2.add({ "\u81EA\u52A8fps": (r3 = this.data.autoFPS) === null || r3 === void 0 || r3 }, "\u81EA\u52A8fps", true), transactionBgColor: h2.addColor({ "\u5207\u9875\u80CC\u666F\u8272": this.data.transactionBgColor }, "\u5207\u9875\u80CC\u666F\u8272") }, this.controller.runTimeFps.disabled = true, this.controller.runTimeResolution.disabled = true, o3;
     }, t3.prototype.addEventListener = function() {
       var t4, e3 = this;
       this.controller.autoFps.onChange(function(t5) {
@@ -35646,6 +35606,8 @@ void main(void){
         e3.data.autoResolution = t5, e3.player.updateConfig(e3.data);
       }), this.controller.resolution.onChange(function(t5) {
         e3.data.resolution = t5, e3.player.updateConfig(e3.data);
+      }), this.controller.transactionBgColor.onChange(function(t5) {
+        e3.data.transactionBgColor = t5, e3.player.updateConfig(e3.data);
       }), this.controller.moreCalculation.onChange(function(n2) {
         t4 && e3.player.app.ticker.remove(t4), n2 > 0 && (t4 = function() {
           for (var t5 = ""; t5.length < 8e3 * n2; )
@@ -35674,7 +35636,7 @@ void main(void){
     }, t3;
   }(), jC = function() {
     function t3() {
-      this.autoUnlock = Object.create(null), this.locks = Object.create(null);
+      this.autoUnlock = /* @__PURE__ */ Object.create(null), this.locks = /* @__PURE__ */ Object.create(null);
     }
     return t3.prototype.addLock = function(t4, e3) {
       var n2 = this;
@@ -35821,27 +35783,32 @@ void main(void){
       });
     });
   }
-  var $C = { syncDispatch: "syncDispatch", syncReceive: "syncReceive", renderStart: "renderStart", renderEnd: "renderEnd", renderError: "renderError", slideChange: "slideChange", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", animateStart: "animateStart", animateEnd: "animateEnd", stateChange: "stateChange" }, QC = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: Object.create(null), interactiveSeqState: Object.create(null) }, tI = "";
+  var $C = { syncDispatch: "syncDispatch", syncReceive: "syncReceive", renderStart: "renderStart", renderEnd: "renderEnd", renderError: "renderError", slideChange: "slideChange", mainSeqStepStart: "mainSeqStepStart", mainSeqStepEnd: "mainSeqStepEnd", animateStart: "animateStart", animateEnd: "animateEnd", stateChange: "stateChange" }, QC = { taskId: "", url: "", currentSlideIndex: -1, mainSeqStep: -1, mainSeqState: null, mediaState: /* @__PURE__ */ Object.create(null), interactiveSeqState: /* @__PURE__ */ Object.create(null) }, tI = "";
   try {
-    tI = "0.2.1";
+    tI = "0.2.6";
   } catch (t3) {
     tI = "dev";
   }
   var eI = function(t3) {
     function e3(e4) {
       var n2 = t3.call(this) || this;
-      return n2.iosResetCache = [], n2.needClearCacheImage = false, n2.version = tI, n2.__slideState = Object(l.cloneDeep)(QC), n2.isUserInput = false, n2.resize = false, n2.isAnimating = false, n2.renderingTaskManager = new LP(), n2.isLoading = false, n2.interactive = true, n2.frameWidth = 1, n2.frameHeight = 1, n2.frame = document.createElement("div"), n2.medianController = document.createElement("div"), n2.frameResizeObserver = new ZC(function() {
+      return n2.iosResetCache = [], n2.needClearCacheImage = false, n2.version = tI, n2.__slideState = Object(l.cloneDeep)(QC), n2.userInputTime = 0, n2.isSyncingSlideState = false, n2.resize = false, n2.isAnimating = false, n2.renderingTaskManager = new LP(), n2.isLoading = false, n2.interactive = true, n2.frameWidth = 1, n2.frameHeight = 1, n2.frame = document.createElement("div"), n2.medianController = document.createElement("div"), n2.frameResizeObserver = new ZC(function() {
         return n2.frameResizeHandler();
       }), n2.timestamp = function() {
         return Date.now();
-      }, n2.mode = "local", n2.enableGlobalClick = false, n2.log = "", n2.logId = "", n2.lastEmitedState = null, n2.playerController = null, n2.lock = new jC(), n2.isInitResized = false, n2.cacheImage = document.createElement("img"), n2.isFrowning = false, n2.isReleasing = false, n2.designWidth = 0, n2.designHeight = 0, n2._slideCount = 0, n2.userInputHandle = function() {
-        n2.isUserInput = true, setTimeout(function() {
-          n2.isUserInput = false;
-        }, 100);
-      }, n2.handleViewClick = function(t4) {
+      }, n2.mode = "local", n2.enableGlobalClick = false, n2.log = "", n2.logId = "", n2.lastEmitedState = null, n2.playerController = null, n2.lock = new jC(), n2.isInitResized = false, n2.cacheImage = document.createElement("img"), n2.isFrowning = false, n2.isReleasing = false, n2.isTouchStart = false, n2.touchStartId = void 0, n2.designWidth = 0, n2.designHeight = 0, n2._slideCount = 0, n2.userInputHandle = function() {
+        n2.userInputTime = Date.now();
+      }, n2.handleViewClick = function() {
         setTimeout(function() {
-          !n2.isUserInput && n2.enableGlobalClick && n2.nextStep();
+          var t4 = Date.now();
+          Math.abs(t4 - n2.userInputTime) > 500 && n2.enableGlobalClick && n2.nextStep();
         });
+      }, n2.handleViewTouchStart = function() {
+        window.clearTimeout(n2.touchStartId), n2.isTouchStart = true, n2.touchStartId = setTimeout(function() {
+          n2.isTouchStart = false;
+        }, 350);
+      }, n2.handleViewTouchEnd = function() {
+        n2.isTouchStart && (n2.isTouchStart = false, n2.handleViewClick());
       }, n2.persistLog = function() {
         return XC(n2, void 0, void 0, function() {
           var t4, e5;
@@ -35943,44 +35910,44 @@ void main(void){
       }), n2.renderingTaskManager.eventHub.on("task-error", function(t4) {
         var e5 = t4.error, i2 = t4.task;
         n2.emit($C.renderError, { error: e5, index: i2.slideIndex });
-      }), window.addEventListener("__slide_log__", n2.handleLogDownload), window.addEventListener("__slide_state__", n2.handleSlideStateLog), window.addEventListener("__slide_ref__", n2.handleSlideRef), n2.persistLogId = window.setInterval(n2.persistLog, 5e3), n2.resizeView = Object(l.debounce)(n2.resizeView.bind(n2), 50), n2.player = n2.initPlayer(e4), n2.player.view && n2.frame.appendChild(n2.player.view), n2;
+      }), window.addEventListener("__slide_log__", n2.handleLogDownload), window.addEventListener("__slide_state__", n2.handleSlideStateLog), window.addEventListener("__slide_ref__", n2.handleSlideRef), n2.persistLogId = window.setInterval(n2.persistLog, 5e3), n2.resizeView = Object(l.debounce)(n2.resizeView.bind(n2), 50), n2.player = n2.initPlayer(e4), (e4 == null ? void 0 : e4.controller) && n2.createController(), n2.player.view && n2.frame.appendChild(n2.player.view), n2.handleViewClick = Object(l.debounce)(n2.handleViewClick, 300), n2;
     }
     return VC(e3, t3), e3.prototype.initPlayer = function(t4) {
-      var e4, n2 = this, i2 = new jR(this.mode);
-      return i2.setInteractive(this.interactive), i2.updateConfig(t4.renderOptions || {}), i2.on(zR.renderStart, function(t5) {
-        n2.isLoading = true, n2.emit($C.renderStart, t5);
-      }), i2.on(zR.renderEnd, function(t5) {
-        n2.isLoading = false, n2.player && (n2.designHeight = n2.player.designHeight, n2.designWidth = n2.player.designWidth, n2.cacheImage.style.width = n2.player.designWidth + "px", n2.cacheImage.style.height = n2.player.designHeight + "px", n2._slideCount = n2.player.slideCount), n2.emit($C.renderEnd, t5);
-      }), i2.on(zR.slideChange, function(t5) {
-        n2.__slideState.currentSlideIndex = t5, n2.emit($C.slideChange, t5);
-      }), i2.on(zR.mainSeqStateChange, function(t5) {
-        n2.__slideState.mainSeqState = t5, n2.emitStateChange();
-      }), i2.on(zR.mainSeqStepChange, function(t5) {
-        n2.__slideState.mainSeqStep = t5, n2.emitStateChange();
-      }), i2.on(zR.interactiveSeqStateChange, function(t5) {
-        var e5 = t5.id, i3 = t5.state;
-        n2.__slideState.interactiveSeqState[e5] = i3, n2.emitStateChange();
-      }), i2.on(zR.animateStart, function() {
-        n2.isAnimating !== true && (n2.isAnimating = true, n2.emit($C.animateStart));
-      }), i2.on(zR.animateEnd, function() {
-        n2.isAnimating !== false && (n2.isAnimating = false, n2.emit($C.animateEnd));
-      }), i2.on(zR.interactiveSeqAction, function(t5) {
-        var e5 = t5.action, i3 = t5.seqId;
-        n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "interactiveAnim", action: e5, seqId: i3 }), n2.emitStateChange();
-      }), i2.on(zR.mainSeqStepStart, function(t5) {
-        n2.emit($C.mainSeqStepStart, t5);
-      }), i2.on(zR.mainSeqStepEnd, function(t5) {
-        n2.emit($C.mainSeqStepEnd, t5);
-      }), i2.on(zR.mediaPlay, function(t5) {
-        var e5 = { type: "play", time: n2.timestamp() - 1e3 * t5.time };
-        n2.__slideState.mediaState[t5.id] = e5, n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaPlay", id: t5.id, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.mediaPause, function(t5) {
+      var e4, n2, i2, r3 = this, o3 = new jR(this.mode);
+      return o3.setInteractive(this.interactive), o3.updateConfig(t4.renderOptions || {}), o3.on(zR.renderStart, function(t5) {
+        r3.isLoading = true, r3.emit($C.renderStart, t5);
+      }), o3.on(zR.renderEnd, function(t5) {
+        r3.isLoading = false, r3.player && (r3.designHeight = r3.player.designHeight, r3.designWidth = r3.player.designWidth, r3.cacheImage.style.width = r3.player.designWidth + "px", r3.cacheImage.style.height = r3.player.designHeight + "px", r3._slideCount = r3.player.slideCount), r3.emit($C.renderEnd, t5);
+      }), o3.on(zR.slideChange, function(t5) {
+        r3.__slideState.currentSlideIndex = t5, r3.emit($C.slideChange, t5);
+      }), o3.on(zR.mainSeqStateChange, function(t5) {
+        r3.__slideState.mainSeqState = t5, r3.emitStateChange();
+      }), o3.on(zR.mainSeqStepChange, function(t5) {
+        r3.__slideState.mainSeqStep = t5, r3.emitStateChange();
+      }), o3.on(zR.interactiveSeqStateChange, function(t5) {
+        var e5 = t5.id, n3 = t5.state;
+        r3.__slideState.interactiveSeqState[e5] = n3, r3.emitStateChange();
+      }), o3.on(zR.animateStart, function() {
+        r3.isAnimating !== true && (r3.isAnimating = true, r3.emit($C.animateStart));
+      }), o3.on(zR.animateEnd, function() {
+        r3.isAnimating !== false && (r3.isAnimating = false, r3.emit($C.animateEnd));
+      }), o3.on(zR.interactiveSeqAction, function(t5) {
+        var e5 = t5.action, n3 = t5.seqId;
+        r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "interactiveAnim", action: e5, seqId: n3 }), r3.emitStateChange();
+      }), o3.on(zR.mainSeqStepStart, function(t5) {
+        r3.emit($C.mainSeqStepStart, t5);
+      }), o3.on(zR.mainSeqStepEnd, function(t5) {
+        r3.emit($C.mainSeqStepEnd, t5);
+      }), o3.on(zR.mediaPlay, function(t5) {
+        var e5 = { type: "play", time: r3.timestamp() - 1e3 * t5.time };
+        r3.__slideState.mediaState[t5.id] = e5, r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaPlay", id: t5.id, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.mediaPause, function(t5) {
         var e5 = { type: "pause", time: t5.time };
-        n2.__slideState.mediaState[t5.id] = e5, n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaPause", id: t5.id, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.mediaSeek, function(t5) {
+        r3.__slideState.mediaState[t5.id] = e5, r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaPause", id: t5.id, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.mediaSeek, function(t5) {
         var e5 = { type: "pause", time: 0 };
-        t5.isPlaying ? (e5.type = "play", n2.__slideState.mediaState[t5.id] ? e5.time = n2.__slideState.mediaState[t5.id].time - 1e3 * t5.time : e5.time = n2.timestamp() - 1e3 * t5.time, n2.__slideState.mediaState[t5.id] = e5) : (e5.type = "pause", e5.time = t5.time, n2.__slideState.mediaState[t5.id] = e5), n2.emitSyncDispatch({ slideIndex: n2.__slideState.currentSlideIndex, type: "mediaSeek", id: t5.id, time: t5.time, state: e5 }), n2.emitStateChange();
-      }), i2.on(zR.requestPrevSlide, this.handlePrevSlide), i2.on(zR.requestNextSlide, this.handleNextSlide), i2.on(zR.requestGotoSlide, this.handleGotoSlide), (e4 = i2.view) === null || e4 === void 0 || e4.addEventListener("click", this.handleViewClick), i2.on(zR.userInput, this.userInputHandle), (t4 == null ? void 0 : t4.controller) && this.createController(), i2;
+        t5.isPlaying ? (e5.type = "play", r3.__slideState.mediaState[t5.id] ? e5.time = r3.__slideState.mediaState[t5.id].time - 1e3 * t5.time : e5.time = r3.timestamp() - 1e3 * t5.time, r3.__slideState.mediaState[t5.id] = e5) : (e5.type = "pause", e5.time = t5.time, r3.__slideState.mediaState[t5.id] = e5), r3.emitSyncDispatch({ slideIndex: r3.__slideState.currentSlideIndex, type: "mediaSeek", id: t5.id, time: t5.time, state: e5 }), r3.emitStateChange();
+      }), o3.on(zR.requestPrevSlide, this.handlePrevSlide), o3.on(zR.requestNextSlide, this.handleNextSlide), o3.on(zR.requestGotoSlide, this.handleGotoSlide), (e4 = o3.view) === null || e4 === void 0 || e4.addEventListener("touchend", this.handleViewTouchEnd), (n2 = o3.view) === null || n2 === void 0 || n2.addEventListener("touchstart", this.handleViewTouchStart), (i2 = o3.view) === null || i2 === void 0 || i2.addEventListener("click", this.handleViewClick), o3.on(zR.userInput, this.userInputHandle), o3;
     }, e3.prototype.createController = function() {
       this.player && (this.playerController = new HC({ player: this.player, params: this.player.config || {}, target: this.frame }));
     }, e3.prototype.setMedianControllerAttribute = function() {
@@ -36003,7 +35970,7 @@ void main(void){
         return qC(this, function(s3) {
           switch (s3.label) {
             case 0:
-              return this.log += "=== stateChange receive [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(t4, null, 2), this.log += "\n\n", t4.taskId && t4.taskId !== this.__slideState.taskId && (this.__slideState.taskId = t4.taskId, (e4 = this.player) === null || e4 === void 0 || e4.setResourceData(t4.taskId, this.__slideState.url)), t4.url && t4.url !== this.__slideState.url && (this.__slideState.url = t4.url, (n2 = this.player) === null || n2 === void 0 || n2.setResourceData(this.__slideState.taskId, t4.url)), Number.isInteger(t4.currentSlideIndex) && t4.currentSlideIndex !== this.__slideState.currentSlideIndex ? (this.__slideState.currentSlideIndex = t4.currentSlideIndex, [4, this.doRenderSlide(t4.currentSlideIndex)]) : [3, 2];
+              return this.isSyncingSlideState = true, this.log += "=== stateChange receive [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(t4, null, 2), this.log += "\n\n", t4.taskId && t4.taskId !== this.__slideState.taskId && (this.__slideState.taskId = t4.taskId, (e4 = this.player) === null || e4 === void 0 || e4.setResourceData(t4.taskId, this.__slideState.url)), t4.url && t4.url !== this.__slideState.url && (this.__slideState.url = t4.url, (n2 = this.player) === null || n2 === void 0 || n2.setResourceData(this.__slideState.taskId, t4.url)), Number.isInteger(t4.currentSlideIndex) && t4.currentSlideIndex !== this.__slideState.currentSlideIndex ? (this.__slideState.currentSlideIndex = t4.currentSlideIndex, [4, this.doRenderSlide(t4.currentSlideIndex)]) : [3, 2];
             case 1:
               s3.sent(), s3.label = 2;
             case 2:
@@ -36012,7 +35979,7 @@ void main(void){
                 return ((e5 = o3.player) === null || e5 === void 0 ? void 0 : e5.currentIndex) === t4.currentSlideIndex && ((n3 = o3.player) === null || n3 === void 0 ? void 0 : n3.currentStage);
               }, 3e3)];
             case 3:
-              return s3.sent(), r3 = false, Number.isInteger(t4.mainSeqStep) && t4.mainSeqStep !== this.__slideState.mainSeqStep && (r3 = true, this.__slideState.mainSeqStep = t4.mainSeqStep), t4.mainSeqState && t4.mainSeqState !== this.__slideState.mainSeqState && (r3 = true, this.__slideState.mainSeqState = t4.mainSeqState), r3 && this.setMainSeqStep(this.__slideState.mainSeqStep, this.__slideState.mainSeqState === "idle" ? "start" : "end"), t4.mediaState && (this.initMedia(t4), this.__slideState.mediaState = t4.mediaState), t4.interactiveSeqState && (this.initInteractiveSeq(t4), this.__slideState.interactiveSeqState = t4.interactiveSeqState), [2];
+              return s3.sent(), r3 = false, Number.isInteger(t4.mainSeqStep) && t4.mainSeqStep !== this.__slideState.mainSeqStep && (r3 = true, this.__slideState.mainSeqStep = t4.mainSeqStep), t4.mainSeqState && t4.mainSeqState !== this.__slideState.mainSeqState && (r3 = true, this.__slideState.mainSeqState = t4.mainSeqState), r3 && this.setMainSeqStep(this.__slideState.mainSeqStep, this.__slideState.mainSeqState === "idle" ? "start" : "end"), t4.mediaState && (this.initMedia(t4), this.__slideState.mediaState = t4.mediaState), t4.interactiveSeqState && (this.initInteractiveSeq(t4), this.__slideState.interactiveSeqState = t4.interactiveSeqState), this.isSyncingSlideState = false, [2];
           }
         });
       });
@@ -36105,21 +36072,21 @@ void main(void){
     }, e3.prototype.poseRenderSlide = function(t4, e4) {
       this.isLoading = true, this.mode === "interactive" ? this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "renderSlide", index: t4, isForward: e4 }) : this.mode === "sync" ? (this.doRenderSlide(t4, e4), this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "renderSlide", index: t4, isForward: e4 })) : this.doRenderSlide(t4, e4);
     }, e3.prototype.doRenderSlide = function(t4, e4) {
-      var n2, i2 = this;
+      var n2, i2, r3, o3 = this;
       if (e4 === void 0 && (e4 = true), !this.player)
         return Promise.resolve();
       if (this.needCreateNewPlayer() && (this.iosResetCache = [], this.iosNewPlayer = this.initPlayer(this.config), this.iosNewPlayer.setResourceData(this.__slideState.taskId, this.__slideState.url)), this.iosNewPlayer) {
-        var r3 = this.player.getSnapshot();
-        this.cacheImage.src = r3, this.frame.appendChild(this.cacheImage), this.player.destroy(), this.player = this.iosNewPlayer, this.iosNewPlayer = void 0, this.needClearCacheImage = true, ((n2 = this == null ? void 0 : this.player) === null || n2 === void 0 ? void 0 : n2.view) && (this.player.view.style.visibility = "hidden", this.frame.appendChild(this.player.view));
+        var s3 = this.player.getSnapshot();
+        this.cacheImage.src = s3, this.frame.appendChild(this.cacheImage), this.player.destroy(), (n2 = this.playerController) === null || n2 === void 0 || n2.destroy(), this.player = this.iosNewPlayer, this.iosNewPlayer = void 0, ((i2 = this.config) === null || i2 === void 0 ? void 0 : i2.controller) && this.createController(), this.needClearCacheImage = true, ((r3 = this == null ? void 0 : this.player) === null || r3 === void 0 ? void 0 : r3.view) && (this.player.view.style.visibility = "hidden", this.frame.appendChild(this.player.view));
       }
-      var o3 = Math.random().toString(32).substr(2);
+      var a2 = Math.random().toString(32).substr(2);
       return this.player.isForward = e4, this.renderingTaskManager.addTask(function() {
-        return i2._renderSlide(t4);
-      }, t4, o3), new Promise(function(t5) {
-        i2.renderingTaskManager.eventHub.once("task-end-" + o3, t5);
+        return o3._renderSlide(t4);
+      }, t4, a2), new Promise(function(t5) {
+        o3.renderingTaskManager.eventHub.once("task-end-" + a2, t5);
       });
     }, e3.prototype.nextStep = function() {
-      !this.isLoading && this.player && (this.player.mainSeqHasNextStep() ? this.mode === "interactive" ? this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "nextStep", next: this.player.mainSeqStep() + 1 }) : this.mode === "sync" ? (this.doNextStep(), this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "nextStep", next: this.player.mainSeqStep() })) : this.doNextStep() : this.handleNextSlide());
+      !this.isLoading && this.player && this.interactive && (this.player.mainSeqHasNextStep() ? this.mode === "interactive" ? this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "nextStep", next: this.player.mainSeqStep() + 1 }) : this.mode === "sync" ? (this.doNextStep(), this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "nextStep", next: this.player.mainSeqStep() })) : this.doNextStep() : this.handleNextSlide());
     }, e3.prototype.doNextStep = function() {
       if (this.player) {
         this.player.nextStep();
@@ -36127,7 +36094,7 @@ void main(void){
         this.__slideState.mainSeqStep = t4, this.emitStateChange();
       }
     }, e3.prototype.prevStep = function() {
-      !this.isLoading && this.player && (this.player.mainSeqHasPrevStep() ? this.mode === "interactive" ? this.emitSyncDispatch({ type: "prevStep", slideIndex: this.__slideState.currentSlideIndex, next: this.player.mainSeqStep() - 1 }) : this.mode === "sync" ? (this.doPrevStep(), this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "prevStep", next: this.player.mainSeqStep() })) : this.doPrevStep() : this.handlePrevSlide());
+      !this.isLoading && this.player && this.interactive && (this.player.mainSeqHasPrevStep() ? this.mode === "interactive" ? this.emitSyncDispatch({ type: "prevStep", slideIndex: this.__slideState.currentSlideIndex, next: this.player.mainSeqStep() - 1 }) : this.mode === "sync" ? (this.doPrevStep(), this.emitSyncDispatch({ slideIndex: this.__slideState.currentSlideIndex, type: "prevStep", next: this.player.mainSeqStep() })) : this.doPrevStep() : this.handlePrevSlide());
     }, e3.prototype.doPrevStep = function() {
       if (this.player) {
         this.player.prevStep();
@@ -36137,7 +36104,7 @@ void main(void){
     }, e3.prototype.isSlideStateReady = function(t4) {
       return t4.taskId.length > 0 && t4.url.length > 0 && t4.currentSlideIndex > 0;
     }, e3.prototype.emitStateChange = function() {
-      if (this.mode !== "local") {
+      if (this.mode !== "local" && !this.isSyncingSlideState) {
         var t4 = this.slideState;
         !Object(l.isEqual)(this.lastEmitedState, t4) && this.isSlideStateReady(t4) && (this.lastEmitedState = t4, this.emit($C.stateChange, t4), this.log += "=== stateChange dispatch [" + new Date().toISOString() + "] ===\n", this.log += JSON.stringify(this.slideState, null, 2), this.log += "\n\n");
       }
@@ -36180,23 +36147,23 @@ void main(void){
         });
       });
     }, e3.prototype.release = function() {
-      var t4;
+      var t4, e4;
       return XC(this, void 0, void 0, function() {
-        var e4, n2, i2, r3, o3 = this;
-        return qC(this, function(s3) {
-          switch (s3.label) {
+        var n2, i2, r3, o3, s3 = this;
+        return qC(this, function(a2) {
+          switch (a2.label) {
             case 0:
               if (this.isReleasing)
                 return [2, KC(function() {
-                  return !o3.isReleasing;
+                  return !s3.isReleasing;
                 }, 6e4)];
-              for (n2 in this.isReleasing = true, this.player = this.initPlayer(this.config), this.player.view && (this.frame.appendChild(this.player.view), this.player.view.style.visibility = "hidden"), e4 = this.__slideState, this.__slideState = Object(l.cloneDeep)(QC), e4.mediaState)
-                (i2 = e4.mediaState[n2]).type === "play" && (r3 = Math.max((t4 = i2.frozenTime) !== null && t4 !== void 0 ? t4 : 0, i2.time), i2.time = this.timestamp() - (r3 - i2.time), i2.frozenTime = void 0);
-              return [4, this.setSlideState(e4)];
+              for (i2 in this.isReleasing = true, this.player = this.initPlayer(this.config), ((t4 = this.config) === null || t4 === void 0 ? void 0 : t4.controller) && this.createController(), this.player.view && (this.frame.appendChild(this.player.view), this.player.view.style.visibility = "hidden"), n2 = this.__slideState, this.__slideState = Object(l.cloneDeep)(QC), n2.mediaState)
+                (r3 = n2.mediaState[i2]).type === "play" && (o3 = Math.max((e4 = r3.frozenTime) !== null && e4 !== void 0 ? e4 : 0, r3.time), r3.time = this.timestamp() - (o3 - r3.time), r3.frozenTime = void 0);
+              return [4, this.setSlideState(n2)];
             case 1:
-              return s3.sent(), [4, this.player.clock.delay(333)];
+              return a2.sent(), [4, this.player.clock.delay(333)];
             case 2:
-              s3.sent(), this.player.view && (this.player.view.style.visibility = "visible");
+              a2.sent(), this.player.view && (this.player.view.style.visibility = "visible");
               try {
                 this.frame.removeChild(this.cacheImage);
               } catch (t5) {
@@ -36210,7 +36177,7 @@ void main(void){
       this.playerController && this.playerController.destroy(), this.frameResizeObserver.disconnect(), (t4 = this.player) === null || t4 === void 0 || t4.removeAllListeners(), (e4 = this.player) === null || e4 === void 0 || e4.destroy(), (n2 = this.player) === null || n2 === void 0 || n2.removeAllListeners(), window.removeEventListener("__slide_log__", this.handleLogDownload), window.removeEventListener("__slide_state__", this.handleSlideStateLog), window.removeEventListener("__slide_ref__", this.handleSlideRef), window.clearInterval(this.persistLogId), YC && YC.removeItem(this.logId).catch(function() {
       });
       try {
-        ((i2 = this.player) === null || i2 === void 0 ? void 0 : i2.view) && this.anchor.removeChild(this.player.view);
+        ((i2 = this.player) === null || i2 === void 0 ? void 0 : i2.view) && this.anchor.removeChild(this.player.view), this.anchor.removeChild(this.frame);
       } catch (t5) {
       }
     }, e3.disposeLocalCache = function() {
@@ -36218,6 +36185,15 @@ void main(void){
     }, e3;
   }(a.a);
 }]);
+function clamp$1(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function isObj(obj) {
+  return typeof obj === "object" && obj !== null;
+}
+function deepClone(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
 var colorString = { exports: {} };
 var colorName = {
   "aliceblue": [240, 248, 255],
@@ -36575,6 +36551,41 @@ function hexDouble(num) {
   return str.length < 2 ? "0" + str : str;
 }
 var ColorString = colorString.exports;
+class Logger {
+  constructor(enable) {
+    this.enable = enable;
+    this.apps = {};
+    this.level = "debug";
+    this._onMessage = (ev) => {
+      if (isObj(ev.data)) {
+        if (typeof ev.data.slide === "boolean") {
+          this.enable = ev.data.slide;
+        } else if (ev.data.slide === "__instance") {
+          console.log(this);
+        }
+      }
+    };
+    window.addEventListener("message", this._onMessage);
+  }
+  log(...args) {
+    if (this.enable) {
+      console.log(...args);
+    }
+  }
+  verbose(...args) {
+    if (this.enable && this.level === "verbose") {
+      console.log(...args);
+    }
+  }
+  dispose(appId) {
+    this.enable = false;
+    delete this.apps[appId];
+    window.removeEventListener("message", this._onMessage);
+  }
+}
+const logger = new Logger(false);
+const log = logger.log.bind(logger);
+const verbose = logger.verbose.bind(logger);
 function guessBgColor(el) {
   try {
     const bg = window.getComputedStyle(el).backgroundColor;
@@ -36671,29 +36682,21 @@ class SlideController {
           payload: event
         };
         log("[Slide] dispatch", event);
-        this.room.dispatchMagixEvent(this.channel, payload);
+        this.context.dispatchMagixEvent(Slide.SLIDE_EVENTS.syncDispatch, payload);
       }
     };
     this.magixEventListener = (ev) => {
-      if (ev.event === this.channel && isObj(ev.payload)) {
-        const { type, payload } = ev.payload;
-        if (type === Slide.SLIDE_EVENTS.syncDispatch) {
-          this.syncStateOnce();
-          log("[Slide] receive", payload);
-          this.slide.emit(Slide.SLIDE_EVENTS.syncReceive, payload);
-        }
+      const { type, payload } = ev.payload;
+      if (type === Slide.SLIDE_EVENTS.syncDispatch) {
+        this.syncStateOnce();
+        log("[Slide] receive", payload);
+        this.slide.emit(Slide.SLIDE_EVENTS.syncReceive, payload);
       }
     };
     this.onStateChange = (state) => {
       if (this.context.getIsWritable()) {
         verbose("[Slide] state change", JSON.stringify(state, null, 2));
-        this.context.updateAttributes(["state"], state);
-      }
-    };
-    this.onSeeked = () => {
-      const state = this.context.getAttributes().state;
-      if (state) {
-        this.slide.setSlideState(deepClone(state));
+        this.context.storage.setState({ state });
       }
     };
     this.pollCount = 0;
@@ -36758,7 +36761,6 @@ class SlideController {
     this.onTransitionEnd = onTransitionEnd;
     this.onError = onError;
     this.context = context;
-    this.channel = `channel-${context.appId}`;
     this.room = context.getRoom();
     this.player = this.room ? void 0 : context.getDisplayer();
     this.slide = this.createSlide(anchor);
@@ -36798,17 +36800,9 @@ class SlideController {
       });
       return disposer;
     });
-    this.sideEffect.add(() => {
-      context.emitter.on("seek", this.onSeeked);
-      return () => context.emitter.off("seek", this.onSeeked);
-    });
-    this.sideEffect.add(() => {
-      const displayer = context.getDisplayer();
-      displayer.addMagixEventListener(this.channel, this.magixEventListener, {
-        fireSelfEventAfterCommit: true
-      });
-      return () => displayer.removeMagixEventListener(this.channel);
-    });
+    this.sideEffect.add(() => context.addMagixEventListener(Slide.SLIDE_EVENTS.syncDispatch, this.magixEventListener, {
+      fireSelfEventAfterCommit: true
+    }));
     slide.on(Slide.SLIDE_EVENTS.slideChange, this.onPageChanged);
     slide.on(Slide.SLIDE_EVENTS.renderStart, this.onTransitionStart);
     slide.on(Slide.SLIDE_EVENTS.renderEnd, this.onTransitionEnd);
@@ -36821,7 +36815,7 @@ class SlideController {
   }
   syncStateOnce() {
     if (this.syncStateOnceFlag) {
-      const { state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.getAttributes());
+      const { state } = __spreadValues(__spreadValues({}, EmptyAttributes), this.context.storage.state);
       if (state) {
         log("[Slide] sync with state (once)", deepClone(state));
         this.slide.setSlideState(deepClone(state));
@@ -37794,6 +37788,9 @@ class DocsViewer {
         $pageNumberInput.disabled = true;
       }
       this.$pageNumberInput = $pageNumberInput;
+      this.sideEffect.addEventListener($pageNumberInput, "focus", () => {
+        $pageNumberInput.select();
+      });
       this.sideEffect.addEventListener($pageNumberInput, "change", () => {
         if (this.readonly) {
           return;
@@ -37836,7 +37833,7 @@ class DocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
-const ClickThroughAppliances = new Set(["clicker"]);
+const ClickThroughAppliances = /* @__PURE__ */ new Set(["clicker"]);
 class SlideDocsViewer {
   constructor({ box, view, mountSlideController, mountWhiteboard }) {
     this.slideController = null;
@@ -37980,7 +37977,56 @@ class SlideDocsViewer {
     return `${this.namespace}-${className}`;
   }
 }
-var styles = ".netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-slide-footer-btn:hover{background:transparent!important}}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-slide-page-number-input{border:none;outline:none;width:1.5em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly.netless-app-slide-footer{display:none}.telebox-color-scheme-dark .netless-app-slide-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-slide-page-number-input:active,.telebox-color-scheme-dark .netless-app-slide-page-number-input:focus,.telebox-color-scheme-dark .netless-app-slide-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-slide-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-slide-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-slide-preview{background:rgba(50,50,50,.9)}.netless-app-slide-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-slide-slide canvas{transform:scale(var(--netless-app-slide-scale, 1))}\n";
+let useFreezer = false;
+const FreezerLength = 2;
+const apps = {
+  map: /* @__PURE__ */ new Map(),
+  queue: [],
+  validateQueue() {
+    log("[Slide] freezer: validate", this.queue);
+    while (this.queue.length > FreezerLength) {
+      const appId = this.queue.pop();
+      const slide = this.map.get(appId);
+      if (slide) {
+        log("[Slide] freezer: validate-freeze", appId, this.queue);
+        slide.freeze();
+      }
+    }
+  },
+  set(appId, slide) {
+    log("[Slide] freezer: add", appId, this.queue);
+    this.map.set(appId, slide);
+    if (!this.queue.includes(appId)) {
+      this.queue.unshift(appId);
+    }
+    this.validateQueue();
+  },
+  delete(appId) {
+    log("[Slide] freezer: delete", appId, this.queue);
+    this.map.delete(appId);
+    this.queue = this.queue.filter((id) => id !== appId);
+  },
+  focus(appId) {
+    const slide = this.map.get(appId);
+    const index = this.queue.indexOf(appId);
+    if (index > -1) {
+      this.queue.splice(index, 1);
+    }
+    this.queue.unshift(appId);
+    this.validateQueue();
+    log("[Slide] freezer: focus", appId, this.queue);
+    if (slide) {
+      slide.unfreeze();
+    }
+  }
+};
+const addHooks = (emitter) => {
+  useFreezer = true;
+  emitter.on("focus", ({ appId }) => {
+    apps.focus(appId);
+  });
+};
+var styles = ".netless-app-slide-content{position:relative;height:100%;overflow:hidden}.netless-app-slide-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-slide-preview{display:flex;flex-direction:column;align-items:center;position:absolute;z-index:300;top:0;left:0;width:33%;max-width:200px;height:100%;padding-top:10px;transform:translate(-100%);background:rgba(237,237,240,.9);box-shadow:inset -1px 0 #0000001c;transition:transform .4s}.netless-app-slide-preview-active .netless-app-slide-preview-mask{display:block}.netless-app-slide-preview-active .netless-app-slide-preview{transform:translate(0)}.netless-app-slide-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:transparent;outline:none;border:7px solid transparent;border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-slide-preview-page:hover,.netless-app-slide-preview-page.netless-app-slide-preview-page-active{border-color:#444e601a}.netless-app-slide-preview-page>img{width:100%;height:auto;box-sizing:border-box;border:1px solid rgba(0,0,0,.5);border-radius:1px;background-color:#fff;box-shadow:0 2px 8px #0000004d}.netless-app-slide-preview-page-name{position:absolute;top:1px;left:-10px;transform:translate(-100%);text-align:right;font-size:12px;color:#5f5f5f;user-select:none}.netless-app-slide-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-slide-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:rgba(249,249,252,.9);transition:opacity .4s}.netless-app-slide-footer-btn{box-sizing:border-box;width:26px;height:26px;font-size:0;margin:0;padding:3px;border:none;border-radius:1px;outline:none;color:currentColor;background:transparent;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-footer-btn:hover{background:rgba(237,237,240,.9)}@media (hover: none){.netless-app-slide-footer-btn:hover{background:transparent!important}}.netless-app-slide-footer-btn>svg{width:100%;height:100%}.netless-app-slide-footer-btn>svg:nth-of-type(2){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-slide-footer-btn.netless-app-slide-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-slide-footer-btn~.netless-app-slide-footer-btn{margin-left:15px}.netless-app-slide-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-slide-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-slide-page-number-input{border:none;outline:none;width:3em;margin:0;padding:0 2px;text-align:right;font-size:13px;line-height:1;font-weight:400;font-family:inherit;border-radius:2px;color:currentColor;background:transparent;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-slide-page-number-input:hover,.netless-app-slide-page-number-input:focus,.netless-app-slide-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-slide-readonly.netless-app-slide-footer{display:none}.telebox-color-scheme-dark .netless-app-slide-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-slide-page-number-input:active,.telebox-color-scheme-dark .netless-app-slide-page-number-input:focus,.telebox-color-scheme-dark .netless-app-slide-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-slide-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-slide-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-slide-preview{background:rgba(50,50,50,.9)}.netless-app-slide-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden}.netless-app-slide-slide{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-slide-slide canvas{transform:scale(var(--netless-app-slide-scale, 1))}\n";
 function previewSlide({
   container,
   taskId,
@@ -38137,16 +38183,15 @@ class SlidePreviewer {
     return `${this.namespace}-${className}`;
   }
 }
-const version = "0.0.55";
+const version = "0.0.58";
 const SlideApp = {
   kind: "Slide",
   setup(context) {
     console.log("[Slide] setup @ " + version);
     if (context.getIsWritable()) {
-      ensureAttributes(context, EmptyAttributes);
+      context.storage.ensureState(EmptyAttributes);
     }
-    const attributes = context.getAttributes();
-    if (!(attributes == null ? void 0 : attributes.taskId)) {
+    if (!context.storage.state.taskId) {
       throw new Error("[Slide] no taskId");
     }
     const view = context.getView();
@@ -38184,7 +38229,15 @@ const SlideApp = {
       if (useFreezer)
         apps.set(context.appId, slideController);
       ((_a = logger.apps)[_b = context.appId] || (_a[_b] = {})).controller = slideController;
-      slideController.readyPromise.then(options.onReady);
+      slideController.readyPromise.then(options.onReady).then(() => {
+        const room2 = context.getRoom();
+        let synced = false;
+        if (room2 && context.getIsWritable()) {
+          syncSceneWithSlide(room2, context, slideController.slide, baseScenePath);
+          synced = true;
+        }
+        log("[Slide] page to", slideController.slide.slideState.currentSlideIndex, synced);
+      });
       return slideController;
     };
     docsViewer = new SlideDocsViewer({
@@ -38225,6 +38278,56 @@ const SlideApp = {
       }
     });
     docsViewer.mount();
+    return {
+      slide: () => {
+        var _a;
+        return (_a = docsViewer == null ? void 0 : docsViewer.slideController) == null ? void 0 : _a.slide;
+      },
+      nextStep: () => {
+        var _a;
+        if (docsViewer && docsViewer.slideController) {
+          (_a = docsViewer == null ? void 0 : docsViewer.slideController) == null ? void 0 : _a.slide.nextStep();
+          return true;
+        }
+        return false;
+      },
+      prevStep: () => {
+        var _a;
+        if (docsViewer && docsViewer.slideController) {
+          (_a = docsViewer == null ? void 0 : docsViewer.slideController) == null ? void 0 : _a.slide.prevStep();
+          return true;
+        }
+        return false;
+      },
+      position: () => {
+        const controller = docsViewer == null ? void 0 : docsViewer.slideController;
+        if (controller) {
+          return [controller.page, controller.pageCount];
+        }
+      },
+      nextPage: () => {
+        const controller = docsViewer == null ? void 0 : docsViewer.slideController;
+        if (controller) {
+          const { page, pageCount } = controller;
+          if (pageCount > 0 && page < pageCount) {
+            controller.jumpToPage(page + 1);
+            return true;
+          }
+        }
+        return false;
+      },
+      prevPage: () => {
+        const controller = docsViewer == null ? void 0 : docsViewer.slideController;
+        if (controller) {
+          const { page, pageCount } = controller;
+          if (pageCount > 0 && page > 1) {
+            controller.jumpToPage(page - 1);
+            return true;
+          }
+        }
+        return false;
+      }
+    };
   }
 };
 export { DefaultUrl, FreezerLength, SlidePreviewer, addHooks, apps, SlideApp as default, previewSlide, version };