@netless/app-slide 0.3.0-canary.12 → 0.3.0-canary.13

package/dist/main.mjs

@@ -348,39 +348,39 @@ xe.wrap = function(e) {
 var Z = It, X = De.exports, Re = Object.hasOwnProperty, Ve = /* @__PURE__ */ Object.create(null);
 for (var le in Z)
   Re.call(Z, le) && (Ve[Z[le]] = le);
-var _ = Fe.exports = {
+var y = Fe.exports = {
   to: {},
   get: {}
 };
-_.get = function(e) {
+y.get = function(e) {
   var t = e.substring(0, 3).toLowerCase(), s, r;
   switch (t) {
     case "hsl":
-      s = _.get.hsl(e), r = "hsl";
+      s = y.get.hsl(e), r = "hsl";
       break;
     case "hwb":
-      s = _.get.hwb(e), r = "hwb";
+      s = y.get.hwb(e), r = "hwb";
       break;
     default:
-      s = _.get.rgb(e), r = "rgb";
+      s = y.get.rgb(e), r = "rgb";
       break;
   }
   return s ? { model: r, value: s } : null;
 };
-_.get.rgb = function(e) {
+y.get.rgb = function(e) {
   if (!e)
     return null;
-  var t = /^#([a-f0-9]{3,4})$/i, s = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i, r = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/, o = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/, i = /^(\w+)$/, a = [0, 0, 0, 1], n, l, c;
+  var t = /^#([a-f0-9]{3,4})$/i, s = /^#([a-f0-9]{6})([a-f0-9]{2})?$/i, r = /^rgba?\(\s*([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)(?=[\s,])\s*(?:,\s*)?([+-]?\d+)\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/, o = /^rgba?\(\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*,?\s*([+-]?[\d\.]+)\%\s*(?:[,|\/]\s*([+-]?[\d\.]+)(%?)\s*)?\)$/, i = /^(\w+)$/, a = [0, 0, 0, 1], n, l, p;
   if (n = e.match(s)) {
-    for (c = n[2], n = n[1], l = 0; l < 3; l++) {
-      var h = l * 2;
-      a[l] = parseInt(n.slice(h, h + 2), 16);
+    for (p = n[2], n = n[1], l = 0; l < 3; l++) {
+      var c = l * 2;
+      a[l] = parseInt(n.slice(c, c + 2), 16);
     }
-    c && (a[3] = parseInt(c, 16) / 255);
+    p && (a[3] = parseInt(p, 16) / 255);
   } else if (n = e.match(t)) {
-    for (n = n[1], c = n[3], l = 0; l < 3; l++)
+    for (n = n[1], p = n[3], l = 0; l < 3; l++)
       a[l] = parseInt(n[l] + n[l], 16);
-    c && (a[3] = parseInt(c + c, 16) / 255);
+    p && (a[3] = parseInt(p + p, 16) / 255);
   } else if (n = e.match(r)) {
     for (l = 0; l < 3; l++)
       a[l] = parseInt(n[l + 1], 0);
@@ -395,7 +395,7 @@ _.get.rgb = function(e) {
     a[l] = N(a[l], 0, 255);
   return a[3] = N(a[3], 0, 1), a;
 };
-_.get.hsl = function(e) {
+y.get.hsl = function(e) {
   if (!e)
     return null;
   var t = /^hsla?\(\s*([+-]?(?:\d{0,3}\.)?\d+)(?:deg)?\s*,?\s*([+-]?[\d\.]+)%\s*,?\s*([+-]?[\d\.]+)%\s*(?:[,|\/]\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/, s = e.match(t);
@@ -405,7 +405,7 @@ _.get.hsl = function(e) {
   }
   return null;
 };
-_.get.hwb = function(e) {
+y.get.hwb = function(e) {
   if (!e)
     return null;
   var t = /^hwb\(\s*([+-]?\d{0,3}(?:\.\d+)?)(?:deg)?\s*,\s*([+-]?[\d\.]+)%\s*,\s*([+-]?[\d\.]+)%\s*(?:,\s*([+-]?(?=\.\d|\d)(?:0|[1-9]\d*)?(?:\.\d*)?(?:[eE][+-]?\d+)?)\s*)?\)$/, s = e.match(t);
@@ -415,27 +415,27 @@ _.get.hwb = function(e) {
   }
   return null;
 };
-_.to.hex = function() {
+y.to.hex = function() {
   var e = X(arguments);
   return "#" + se(e[0]) + se(e[1]) + se(e[2]) + (e[3] < 1 ? se(Math.round(e[3] * 255)) : "");
 };
-_.to.rgb = function() {
+y.to.rgb = function() {
   var e = X(arguments);
   return e.length < 4 || e[3] === 1 ? "rgb(" + Math.round(e[0]) + ", " + Math.round(e[1]) + ", " + Math.round(e[2]) + ")" : "rgba(" + Math.round(e[0]) + ", " + Math.round(e[1]) + ", " + Math.round(e[2]) + ", " + e[3] + ")";
 };
-_.to.rgb.percent = function() {
+y.to.rgb.percent = function() {
   var e = X(arguments), t = Math.round(e[0] / 255 * 100), s = Math.round(e[1] / 255 * 100), r = Math.round(e[2] / 255 * 100);
   return e.length < 4 || e[3] === 1 ? "rgb(" + t + "%, " + s + "%, " + r + "%)" : "rgba(" + t + "%, " + s + "%, " + r + "%, " + e[3] + ")";
 };
-_.to.hsl = function() {
+y.to.hsl = function() {
   var e = X(arguments);
   return e.length < 4 || e[3] === 1 ? "hsl(" + e[0] + ", " + e[1] + "%, " + e[2] + "%)" : "hsla(" + e[0] + ", " + e[1] + "%, " + e[2] + "%, " + e[3] + ")";
 };
-_.to.hwb = function() {
+y.to.hwb = function() {
   var e = X(arguments), t = "";
   return e.length >= 4 && e[3] !== 1 && (t = ", " + e[3]), "hwb(" + e[0] + ", " + e[1] + "%, " + e[2] + "%" + t + ")";
 };
-_.to.keyword = function(e) {
+y.to.keyword = function(e) {
   return Ve[e.slice(0, 3)];
 };
 function N(e, t, s) {
@@ -452,7 +452,7 @@ function g(e) {
 }
 function Ee(e, t) {
   const s = g(e);
-  return w(s, t), s;
+  return _(s, t), s;
 }
 function F(e, t) {
   return e.appendChild(t);
@@ -460,7 +460,7 @@ function F(e, t) {
 function b(e) {
   return `${H}-${e}`;
 }
-function w(e, t) {
+function _(e, t) {
   e.className = b(t);
 }
 function zt(e) {
@@ -576,55 +576,55 @@ function qt() {
   const i = (d) => {
     o = d;
   };
-  let a = !1, n = !1, l = 0, c = 0;
-  const h = g("div");
-  w(h, "footer");
-  const p = g("button");
-  w(p, "btn-sidebar"), p.classList.add(b("footer-btn")), p.appendChild(Ft(H)), p.onclick = function() {
+  let a = !1, n = !1, l = 0, p = 0;
+  const c = g("div");
+  _(c, "footer");
+  const h = g("button");
+  _(h, "btn-sidebar"), h.classList.add(b("footer-btn")), h.appendChild(Ft(H)), h.onclick = function() {
     a || s();
-  }, p.style.display = "none", h.appendChild(p);
-  const S = g("div");
-  w(S, "page-jumps");
+  }, h.style.display = "none", c.appendChild(h);
+  const v = g("div");
+  _(v, "page-jumps");
   const E = g("button");
-  w(E, "btn-page-back"), E.classList.add(b("footer-btn")), E.appendChild(Dt(H)), E.onclick = function() {
+  _(E, "btn-page-back"), E.classList.add(b("footer-btn")), E.appendChild(Dt(H)), E.onclick = function() {
     a || e(l - 1);
-  }, S.appendChild(E);
-  const v = g("button");
-  w(v, "btn-page-play"), v.classList.add(b("footer-btn")), v.appendChild(Rt(H)), v.appendChild(Vt(H));
+  }, v.appendChild(E);
+  const m = g("button");
+  _(m, "btn-page-play"), m.classList.add(b("footer-btn")), m.appendChild(Rt(H)), m.appendChild(Vt(H));
   let V = 0;
-  v.onclick = function() {
-    a || (v.classList.add(b("footer-btn-playing")), o(), clearTimeout(V), V = setTimeout(() => {
-      v.classList.remove(b("footer-btn-playing"));
+  m.onclick = function() {
+    a || (m.classList.add(b("footer-btn-playing")), o(), clearTimeout(V), V = setTimeout(() => {
+      m.classList.remove(b("footer-btn-playing"));
     }, 500));
-  }, S.appendChild(v);
+  }, v.appendChild(m);
   const L = g("button");
-  w(L, "btn-page-next"), L.classList.add(b("footer-btn")), L.appendChild(Ut(H)), L.onclick = function() {
+  _(L, "btn-page-next"), L.classList.add(b("footer-btn")), L.appendChild(Ut(H)), L.onclick = function() {
     a || e(l + 1);
-  }, S.appendChild(L);
+  }, v.appendChild(L);
   const A = g("div");
-  w(A, "page-number");
-  const k = g("input");
-  w(k, "page-number-input"), k.value = String(l + 1), k.onchange = function() {
-    a || k.value && e(Number(k.value) - 1);
+  _(A, "page-number");
+  const S = g("input");
+  _(S, "page-number-input"), S.value = String(l + 1), S.onchange = function() {
+    a || S.value && e(Number(S.value) - 1);
   };
   const f = g("span");
-  w(f, "total-page"), f.textContent = " / ", A.appendChild(k), A.appendChild(f), h.appendChild(S), h.appendChild(A);
-  const y = b("readonly");
+  _(f, "total-page"), f.textContent = " / ", A.appendChild(S), A.appendChild(f), c.appendChild(v), c.appendChild(A);
+  const k = b("readonly");
   function I(d) {
-    a !== d && (a = d, h.classList.toggle(y, a), k.disabled = a);
+    a !== d && (a = d, c.classList.toggle(k, a), S.disabled = a);
   }
   function z(d) {
-    n !== d && (n = d, p.style.display = n ? "" : "none");
+    n !== d && (n = d, h.style.display = n ? "" : "none");
   }
   function U(d, q = !1) {
-    (q || l !== d) && (l = d, k.value = String(l + 1));
+    (q || l !== d) && (l = d, S.value = String(l + 1));
   }
   function W(d) {
-    c !== d && (c = d, f.textContent = ` / ${c}`);
+    p !== d && (p = d, f.textContent = ` / ${p}`);
   }
   return {
-    $footer: h,
-    $pageNumberInput: k,
+    $footer: c,
+    $pageNumberInput: S,
     set_readonly: I,
     set_sidebar: z,
     set_page_index: U,
@@ -683,14 +683,14 @@ const P = typeof window < "u", Be = P && !("onscroll" in window) || typeof navig
     else
       for (let s = 0, r; r = t[s]; s += 1)
         $e(e, r);
-}, $ = "src", ue = "srcset", pe = "sizes", Je = "poster", Y = "llOriginalAttrs", Ze = "data", he = "loading", Ke = "loaded", Qe = "applied", jt = "entered", fe = "error", Xe = "native", Ye = "data-", et = "ll-status", m = (e, t) => e.getAttribute(Ye + t), Gt = (e, t, s) => {
+}, $ = "src", ue = "srcset", pe = "sizes", Je = "poster", Y = "llOriginalAttrs", Ze = "data", he = "loading", Ke = "loaded", Qe = "applied", jt = "entered", fe = "error", Xe = "native", Ye = "data-", et = "ll-status", w = (e, t) => e.getAttribute(Ye + t), Gt = (e, t, s) => {
   var r = Ye + t;
   if (s === null) {
     e.removeAttribute(r);
     return;
   }
   e.setAttribute(r, s);
-}, ee = (e) => m(e, et), R = (e, t) => Gt(e, et, t), oe = (e) => R(e, null), ge = (e) => ee(e) === null, Wt = (e) => ee(e) === he, Jt = (e) => ee(e) === fe, be = (e) => ee(e) === Xe, Zt = [he, Ke, Qe, fe], Kt = (e) => Zt.indexOf(ee(e)) >= 0, T = (e, t, s, r) => {
+}, ee = (e) => w(e, et), R = (e, t) => Gt(e, et, t), oe = (e) => R(e, null), ge = (e) => ee(e) === null, Wt = (e) => ee(e) === he, Jt = (e) => ee(e) === fe, be = (e) => ee(e) === Xe, Zt = [he, Ke, Qe, fe], Kt = (e) => Zt.indexOf(ee(e)) >= 0, T = (e, t, s, r) => {
   if (!!e) {
     if (r !== void 0) {
       e(t, s, r);
@@ -779,27 +779,27 @@ const P = typeof window < "u", Be = P && !("onscroll" in window) || typeof navig
 }, M = (e, t, s) => {
   !s || e.setAttribute(t, s);
 }, Le = (e, t) => {
-  M(e, pe, m(e, t.data_sizes)), M(e, ue, m(e, t.data_srcset)), M(e, $, m(e, t.data_src));
+  M(e, pe, w(e, t.data_sizes)), M(e, ue, w(e, t.data_srcset)), M(e, $, w(e, t.data_src));
 }, is = (e, t) => {
   me(e, (s) => {
     j(s, Q), Le(s, t);
   }), j(e, Q), Le(e, t);
 }, ls = (e, t) => {
-  j(e, ae), M(e, $, m(e, t.data_src));
+  j(e, ae), M(e, $, w(e, t.data_src));
 }, cs = (e, t) => {
   ot(e, (s) => {
-    j(s, ae), M(s, $, m(s, t.data_src));
-  }), j(e, nt), M(e, Je, m(e, t.data_poster)), M(e, $, m(e, t.data_src)), e.load();
+    j(s, ae), M(s, $, w(s, t.data_src));
+  }), j(e, nt), M(e, Je, w(e, t.data_poster)), M(e, $, w(e, t.data_src)), e.load();
 }, ds = (e, t) => {
-  j(e, at), M(e, Ze, m(e, t.data_src));
+  j(e, at), M(e, Ze, w(e, t.data_src));
 }, us = (e, t, s) => {
-  const r = m(e, t.data_bg), o = m(e, t.data_bg_hidpi), i = Ge && o ? o : r;
+  const r = w(e, t.data_bg), o = w(e, t.data_bg_hidpi), i = Ge && o ? o : r;
   !i || (e.style.backgroundImage = `url("${i}")`, tt(e).setAttribute($, i), dt(e, t, s));
 }, ps = (e, t, s) => {
-  const r = m(e, t.data_bg_multi), o = m(e, t.data_bg_multi_hidpi), i = Ge && o ? o : r;
+  const r = w(e, t.data_bg_multi), o = w(e, t.data_bg_multi_hidpi), i = Ge && o ? o : r;
   !i || (e.style.backgroundImage = i, ct(e, t, s));
 }, hs = (e, t, s) => {
-  const r = m(e, t.data_bg_set);
+  const r = w(e, t.data_bg_set);
   if (!r)
     return;
   const o = r.split("|");
@@ -981,65 +981,65 @@ function Ks() {
     e = f;
   };
   let s = !1, r = !1, o = !1, i = [], a = 0;
-  const n = b("readonly"), l = b("preview-active"), c = g("div");
-  w(c, "content");
+  const n = b("readonly"), l = b("preview-active"), p = g("div");
+  _(p, "content");
+  const c = g("div");
+  _(c, "preview-mask"), c.onclick = function(k) {
+    r || k.target === c && m(!1);
+  }, F(p, c);
   const h = g("div");
-  w(h, "preview-mask"), h.onclick = function(y) {
-    r || y.target === h && v(!1);
-  }, F(c, h);
-  const p = g("div");
-  w(p, "preview"), p.classList.add(b("tele-fancy-scrollbar")), p.onclick = function(y) {
+  _(h, "preview"), h.classList.add(b("tele-fancy-scrollbar")), h.onclick = function(k) {
     var z;
     if (r)
       return;
-    const I = (z = y.target.dataset) == null ? void 0 : z.pageIndex;
-    I && (y.preventDefault(), y.stopPropagation(), y.stopImmediatePropagation(), e(Number(I)), v(!1));
-  }, F(c, p);
-  const S = new te({
-    container: p,
+    const I = (z = k.target.dataset) == null ? void 0 : z.pageIndex;
+    I && (k.preventDefault(), k.stopPropagation(), k.stopImmediatePropagation(), e(Number(I)), m(!1));
+  }, F(p, h);
+  const v = new te({
+    container: h,
     elements_selector: `.${b("preview-page>img")}`
   });
   function E(f) {
-    r !== f && (r = f, c.classList.toggle(n, r));
+    r !== f && (r = f, p.classList.toggle(n, r));
   }
-  function v(f) {
-    o !== f && (o = f, c.classList.toggle(l, o));
+  function m(f) {
+    o !== f && (o = f, p.classList.toggle(l, o));
   }
   function V(f) {
     if (i !== f) {
       i = f;
-      const y = b("preview-page"), I = b("preview-page-name");
+      const k = b("preview-page"), I = b("preview-page-name");
       i.forEach((z, U) => {
         const W = String(U), d = g("a");
-        d.className = y + " " + b(`preview-page-${U}`), d.href = "#", d.dataset.pageIndex = W;
+        d.className = k + " " + b(`preview-page-${U}`), d.href = "#", d.dataset.pageIndex = W;
         const q = g("span");
         q.className = I, q.textContent = String(U + 1), q.dataset.pageIndex = W;
         const B = g("img");
-        B.width = z.width, B.height = z.height, B.src = z.thumbnail, B.alt = `page-${U}`, B.dataset.pageIndex = W, F(d, B), F(d, q), F(p, d);
-      }), s || S.update();
+        B.width = z.width, B.height = z.height, B.src = z.thumbnail, B.alt = `page-${U}`, B.dataset.pageIndex = W, F(d, B), F(d, q), F(h, d);
+      }), s || v.update();
     }
   }
-  function L(f, y = !1) {
-    if (y || a !== f) {
+  function L(f, k = !1) {
+    if (k || a !== f) {
       a = f;
-      const I = p.querySelector(
+      const I = h.querySelector(
         `.${b(`preview-page-${a}`)}`
       );
-      I && p.scrollTo({ top: I.offsetTop - 16 });
+      I && h.scrollTo({ top: I.offsetTop - 16 });
     }
   }
   function A() {
-    s = !0, S.destroy();
+    s = !0, v.destroy();
   }
-  function k() {
+  function S() {
     return o;
   }
   return {
-    $content: c,
-    $preview: p,
+    $content: p,
+    $preview: h,
     set_readonly: E,
-    set_active: v,
-    get_active: k,
+    set_active: m,
+    get_active: S,
     set_pages: V,
     on_new_page_index: t,
     set_page_index: L,
@@ -1084,10 +1084,10 @@ const ke = class {
     this._infoPromise = s, ke.fetchSlideInfo(t).then(({ preview: n, slide: l }) => {
       if (!this._destroyed) {
         if (this._slideCount = l.slideCount, n) {
-          const { taskId: c, url: h } = t, { slideCount: p } = l, { width: S, height: E } = n, v = qe(c, h), V = Array.from({ length: p }, (L, A) => ({
-            width: S,
+          const { taskId: p, url: c } = t, { slideCount: h } = l, { width: v, height: E } = n, m = qe(p, c), V = Array.from({ length: h }, (L, A) => ({
+            width: v,
             height: E,
-            thumbnail: `${v}/preview/${A + 1}.png`
+            thumbnail: `${m}/preview/${A + 1}.png`
           }));
           this.sidebar.set_pages(V), this.footer.set_sidebar(!0);
         }
@@ -1156,55 +1156,55 @@ const C = class {
 };
 let J = C;
 u(J, "active", /* @__PURE__ */ new Set()), u(J, "roomLogger", null);
-function Xs({ context: e, viewer: t, sideEffect: s, logger: r }) {
-  const o = r.info.bind(r);
-  let i = null;
-  t.prepare(({ width: c, height: h, slideCount: p }) => {
-    e.destroyed || (c && e.box.setStageRatio(h / c), i = e.createWhiteBoardView({ size: p }), i.setBaseRect({ width: c, height: h }), l());
+function Xs({ context: e, storage: t, viewer: s, sideEffect: r, logger: o }) {
+  const i = o.info.bind(o);
+  let a = null;
+  s.prepare(({ width: c, height: h, slideCount: v }) => {
+    e.destroyed || (c && e.box.setStageRatio(h / c), a = e.createWhiteBoardView({ size: v }), a.setBaseRect({ width: c, height: h }), p());
   });
-  const { slide: a } = t;
-  function n(c = e.storage.state.state) {
+  const { slide: n } = s;
+  function l(c = t.state.state) {
     return JSON.stringify(c);
   }
-  function l() {
-    if (e.storage.state.state)
-      o("[Slide] restore " + n()), a.setSlideState(e.storage.state.state);
+  function p() {
+    if (t.state.state)
+      i("[Slide] restore " + l()), n.setSlideState(t.state.state);
     else if (e.isAddApp)
-      o("[Slide] kick start"), a.renderSlide(1);
+      i("[Slide] kick start"), n.renderSlide(1);
     else {
-      o("[Slide] wait for restore");
-      const c = s.add(() => {
-        const p = setInterval(() => {
-          e.storage.state.state || (o("[Slide] timeout"), a.renderSlide(1));
+      i("[Slide] wait for restore");
+      const c = r.add(() => {
+        const v = setInterval(() => {
+          t.state.state || (i("[Slide] timeout"), n.renderSlide(1));
         }, 15e3);
-        return () => clearInterval(p);
-      }), h = s.push(
-        e.storage.on("stateChanged", () => {
-          e.storage.state.state && (o("[Slide] restore " + n()), a.setSlideState(e.storage.state.state), s.flush(h), s.flush(c));
+        return () => clearInterval(v);
+      }), h = r.push(
+        t.on("stateChanged", () => {
+          t.state.state && (i("[Slide] restore " + l()), n.setSlideState(t.state.state), r.flush(h), r.flush(c));
         })
       );
     }
   }
-  a.on("stateChange", () => {
-    e.isWritable && e.storage.setState({ state: a.slideState });
-  }), a.on("syncDispatch", (c) => {
-    e.isWritable && (o("[Slide] dispatch " + n(Ie(c, "uuid"))), e.dispatchMagixEvent("syncDispatch", c));
-  }), s.push(
+  n.on("stateChange", () => {
+    e.isWritable && t.setState({ state: n.slideState });
+  }), n.on("syncDispatch", (c) => {
+    e.isWritable && (i("[Slide] dispatch " + l(Ie(c, "uuid"))), e.dispatchMagixEvent("syncDispatch", c));
+  }), r.push(
     e.addMagixEventListener(
       "syncDispatch",
       ({ payload: c }) => {
-        o("[Slide] receive " + n(Ie(c, "uuid"))), a.emit("syncReceive", c);
+        i("[Slide] receive " + l(Ie(c, "uuid"))), n.emit("syncReceive", c);
       },
       { fireSelfEventAfterCommit: !0 }
     )
-  ), a.on("slideChange", (c) => {
-    e.isWritable && i && (o("[Slide] page to " + c), i.jumpPage(c - 1));
-  }), t.setReadonly(!e.isWritable), s.push(
+  ), n.on("slideChange", (c) => {
+    e.isWritable && a && (i("[Slide] page to " + c), a.jumpPage(c - 1));
+  }), s.setReadonly(!e.isWritable), r.push(
     e.emitter.on("writableChange", (c) => {
-      t.setReadonly(!c);
+      s.setReadonly(!c);
     })
-  ), s.addEventListener(window, "keydown", (c) => {
-    e.box.focus && ((c.key === "ArrowUp" || c.key === "ArrowLeft") && t.slide.prevStep(), (c.key === "ArrowRight" || c.key === "ArrowDown") && t.slide.nextStep());
+  ), r.addEventListener(window, "keydown", (c) => {
+    e.box.focus && ((c.key === "ArrowUp" || c.key === "ArrowLeft") && s.slide.prevStep(), (c.key === "ArrowRight" || c.key === "ArrowDown") && s.slide.nextStep());
   });
 }
 function sr(e) {
@@ -1213,51 +1213,51 @@ function sr(e) {
   const o = new O(s);
   return r.appendChild(document.createElement("style")).textContent = O.styles, r.appendChild(o.$content), r.appendChild(o.$footer), t.appendChild(r), o.prepare(() => o.slide.renderSlide(1)), o;
 }
-const rr = /* @__PURE__ */ ce.usePlugin.bind(ce), or = "0.3.0-canary.12", nr = {
+const rr = /* @__PURE__ */ ce.usePlugin.bind(ce), or = "0.3.0-canary.13", nr = {
   kind: "Slide",
   setup(e) {
-    var a, n;
-    console.log("[Slide] setup @ 0.3.0-canary.12 (" + e.appId + ")");
+    var n, l;
+    console.log("[Slide] setup @ 0.3.0-canary.13 (" + e.appId + ")");
     const t = new J(e);
-    if (t.info("[Slide] setup @ 0.3.0-canary.12"), !e.storage.state.taskId)
+    if (t.info("[Slide] setup @ 0.3.0-canary.13"), !e.attributes.taskId)
       throw new Error("[Slide] no taskId");
-    const s = e.getAppOptions() || {}, r = s.renderOptions || {}, o = new Me(), i = new O({
+    const s = e.createStorage("slide", e.attributes), r = e.getAppOptions() || {}, o = r.renderOptions || {}, i = new Me(), a = new O({
       interactive: !0,
       mode: "interactive",
       enableGlobalClick: !0,
       timestamp: Ot(e),
-      logger: s.logger || t,
+      logger: r.logger || t,
       renderOptions: {
-        minFPS: r.minFPS || 25,
-        maxFPS: r.maxFPS || 30,
-        autoFPS: (a = r.autoFPS) != null ? a : !0,
-        autoResolution: (n = r.autoResolution) != null ? n : !0,
-        resolution: r.resolution,
-        maxResolutionLevel: r.maxResolutionLevel,
-        transactionBgColor: r.transactionBgColor || Ue(e.box.$content)
+        minFPS: o.minFPS || 25,
+        maxFPS: o.maxFPS || 30,
+        autoFPS: (n = o.autoFPS) != null ? n : !0,
+        autoResolution: (l = o.autoResolution) != null ? l : !0,
+        resolution: o.resolution,
+        maxResolutionLevel: o.maxResolutionLevel,
+        transactionBgColor: o.transactionBgColor || Ue(e.box.$content)
       },
-      rtcAudio: s.rtcAudio,
-      useLocalCache: s.useLocalCache,
-      resourceTimeout: s.resourceTimeout,
-      loaderDelegate: s.loaderDelegate,
-      navigatorDelegate: s.navigatorDelegate,
-      fixedFrameSize: s.fixedFrameSize,
-      taskId: e.storage.state.taskId,
-      url: e.storage.state.url
+      rtcAudio: r.rtcAudio,
+      useLocalCache: r.useLocalCache,
+      resourceTimeout: r.resourceTimeout,
+      loaderDelegate: r.loaderDelegate,
+      navigatorDelegate: r.navigatorDelegate,
+      fixedFrameSize: r.fixedFrameSize,
+      taskId: s.state.taskId,
+      url: s.state.url
     });
-    return Object.assign(i, { context: e, logger: t }), o.push(Te.set(e.appId, i)), o.push(i.events.on("freeze", () => t.info("[Slide] freeze"))), o.push(i.events.on("unfreeze", () => t.info("[Slide] unfreeze"))), o.push(
-      i.events.on(
+    return Object.assign(a, { context: e, logger: t }), i.push(Te.set(e.appId, a)), i.push(a.events.on("freeze", () => t.info("[Slide] freeze"))), i.push(a.events.on("unfreeze", () => t.info("[Slide] unfreeze"))), i.push(
+      a.events.on(
         "prepareError",
-        (l) => t.info("[Slide] fetch slide info failed: " + l.message)
+        (p) => t.info("[Slide] fetch slide info failed: " + p.message)
       )
-    ), o.push(
-      i.events.on(
+    ), i.push(
+      a.events.on(
         "renderError",
-        ({ error: l, index: c }) => t.info(`[Slide] render failed [${c}]: ${l.message}`)
+        ({ error: p, index: c }) => t.info(`[Slide] render failed [${c}]: ${p.message}`)
       )
-    ), e.box.mountStyles(O.styles), e.box.mountStage(i.$slide), e.box.mountFooter(i.$footer), e.box.mountContent(i.$content), o.push(() => i.destroy()), Xs({ context: e, viewer: i, sideEffect: o, logger: t }), e.emitter.on("destroy", () => {
-      t.info("[Slide] destroy"), t.destroy(), o.flushAll();
-    }), i;
+    ), e.box.mountStyles(O.styles), e.box.mountStage(a.$slide), e.box.mountFooter(a.$footer), e.box.mountContent(a.$content), i.push(() => a.destroy()), Xs({ context: e, storage: s, viewer: a, sideEffect: i, logger: t }), e.emitter.on("destroy", () => {
+      t.info("[Slide] destroy"), t.destroy(), i.flushAll();
+    }), a;
   }
 };
 export {