@netless/app-presentation 0.1.0-beta.0

package/dist/index.js

@@ -0,0 +1,1373 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// node_modules/.pnpm/@wopjs+disposable@0.1.4/node_modules/@wopjs/disposable/dist/index.mjs
+var isAbortable = (disposable) => disposable && disposable.abortable;
+var invokeDispose = (disposable) => {
+  try {
+    if (disposable.dispose) {
+      disposable.dispose();
+    } else {
+      disposable();
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+var methods = {
+  size() {
+    return this._d.size;
+  },
+  has(disposable) {
+    return this._d.has(disposable);
+  },
+  add(disposable) {
+    const disposables = Array.isArray(disposable) ? disposable : [disposable];
+    for (const disposable2 of disposables) {
+      if (!this._d.has(disposable2)) {
+        this._d.add(disposable2);
+        if (isAbortable(disposable2)) {
+          disposable2.abortable(() => this.remove(disposable2));
+        }
+      }
+    }
+    return disposable;
+  },
+  make(executor) {
+    const disposable = executor();
+    if (disposable) {
+      return this.add(disposable);
+    }
+  },
+  remove(disposable) {
+    return this._d.delete(disposable);
+  },
+  flush(disposable) {
+    if (disposable) {
+      if (this.remove(disposable)) {
+        invokeDispose(disposable);
+      }
+    } else {
+      this.dispose();
+    }
+  }
+};
+var disposableStore = (disposables) => {
+  const disposableStore2 = () => {
+    disposableStore2._d.forEach(invokeDispose);
+    disposableStore2._d.clear();
+  };
+  disposableStore2._d = /* @__PURE__ */ new Set();
+  disposableStore2.dispose = disposableStore2;
+  const store = Object.assign(disposableStore2, methods);
+  if (disposables) {
+    store.add(disposables);
+  }
+  return store;
+};
+
+// node_modules/.pnpm/@wopjs+dom@0.1.3/node_modules/@wopjs/dom/dist/index.js
+function addEventListener(target, type, listener, options) {
+  target.addEventListener(type, listener, options);
+  return () => target.removeEventListener(type, listener, options);
+}
+var listen = addEventListener;
+
+// node_modules/.pnpm/vanilla-lazyload@17.8.5/node_modules/vanilla-lazyload/dist/lazyload.esm.js
+var runningOnBrowser = typeof window !== "undefined";
+var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
+var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
+var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
+var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
+var defaultSettings = {
+  elements_selector: ".lazy",
+  container: isBot || runningOnBrowser ? document : null,
+  threshold: 300,
+  thresholds: null,
+  data_src: "src",
+  data_srcset: "srcset",
+  data_sizes: "sizes",
+  data_bg: "bg",
+  data_bg_hidpi: "bg-hidpi",
+  data_bg_multi: "bg-multi",
+  data_bg_multi_hidpi: "bg-multi-hidpi",
+  data_bg_set: "bg-set",
+  data_poster: "poster",
+  class_applied: "applied",
+  class_loading: "loading",
+  class_loaded: "loaded",
+  class_error: "error",
+  class_entered: "entered",
+  class_exited: "exited",
+  unobserve_completed: true,
+  unobserve_entered: false,
+  cancel_on_exit: true,
+  callback_enter: null,
+  callback_exit: null,
+  callback_applied: null,
+  callback_loading: null,
+  callback_loaded: null,
+  callback_error: null,
+  callback_finish: null,
+  callback_cancel: null,
+  use_native: false,
+  restore_on_error: false
+};
+var getExtendedSettings = (customSettings) => {
+  return Object.assign({}, defaultSettings, customSettings);
+};
+var createInstance = function(classObj, options) {
+  let event;
+  const eventString = "LazyLoad::Initialized";
+  const instance = new classObj(options);
+  try {
+    event = new CustomEvent(eventString, { detail: { instance } });
+  } catch (err) {
+    event = document.createEvent("CustomEvent");
+    event.initCustomEvent(eventString, false, false, { instance });
+  }
+  window.dispatchEvent(event);
+};
+var autoInitialize = (classObj, options) => {
+  if (!options) {
+    return;
+  }
+  if (!options.length) {
+    createInstance(classObj, options);
+  } else {
+    for (let i = 0, optionsItem; optionsItem = options[i]; i += 1) {
+      createInstance(classObj, optionsItem);
+    }
+  }
+};
+var SRC = "src";
+var SRCSET = "srcset";
+var SIZES = "sizes";
+var POSTER = "poster";
+var ORIGINALS = "llOriginalAttrs";
+var DATA = "data";
+var statusLoading = "loading";
+var statusLoaded = "loaded";
+var statusApplied = "applied";
+var statusEntered = "entered";
+var statusError = "error";
+var statusNative = "native";
+var dataPrefix = "data-";
+var statusDataName = "ll-status";
+var getData = (element, attribute) => {
+  return element.getAttribute(dataPrefix + attribute);
+};
+var setData = (element, attribute, value) => {
+  const attrName = dataPrefix + attribute;
+  if (value === null) {
+    element.removeAttribute(attrName);
+    return;
+  }
+  element.setAttribute(attrName, value);
+};
+var getStatus = (element) => getData(element, statusDataName);
+var setStatus = (element, status) => setData(element, statusDataName, status);
+var resetStatus = (element) => setStatus(element, null);
+var hasEmptyStatus = (element) => getStatus(element) === null;
+var hasStatusLoading = (element) => getStatus(element) === statusLoading;
+var hasStatusError = (element) => getStatus(element) === statusError;
+var hasStatusNative = (element) => getStatus(element) === statusNative;
+var statusesAfterLoading = [statusLoading, statusLoaded, statusApplied, statusError];
+var hadStartedLoading = (element) => statusesAfterLoading.indexOf(getStatus(element)) >= 0;
+var safeCallback = (callback, arg1, arg2, arg3) => {
+  if (!callback || typeof callback !== "function") {
+    return;
+  }
+  if (arg3 !== void 0) {
+    callback(arg1, arg2, arg3);
+    return;
+  }
+  if (arg2 !== void 0) {
+    callback(arg1, arg2);
+    return;
+  }
+  callback(arg1);
+};
+var addClass = (element, className) => {
+  if (supportsClassList) {
+    element.classList.add(className);
+    return;
+  }
+  element.className += (element.className ? " " : "") + className;
+};
+var removeClass = (element, className) => {
+  if (supportsClassList) {
+    element.classList.remove(className);
+    return;
+  }
+  element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+};
+var addTempImage = (element) => {
+  element.llTempImage = document.createElement("IMG");
+};
+var deleteTempImage = (element) => {
+  delete element.llTempImage;
+};
+var getTempImage = (element) => element.llTempImage;
+var unobserve = (element, instance) => {
+  if (!instance)
+    return;
+  const observer = instance._observer;
+  if (!observer)
+    return;
+  observer.unobserve(element);
+};
+var resetObserver = (observer) => {
+  observer.disconnect();
+};
+var unobserveEntered = (element, settings, instance) => {
+  if (settings.unobserve_entered)
+    unobserve(element, instance);
+};
+var updateLoadingCount = (instance, delta) => {
+  if (!instance)
+    return;
+  instance.loadingCount += delta;
+};
+var decreaseToLoadCount = (instance) => {
+  if (!instance)
+    return;
+  instance.toLoadCount -= 1;
+};
+var setToLoadCount = (instance, value) => {
+  if (!instance)
+    return;
+  instance.toLoadCount = value;
+};
+var isSomethingLoading = (instance) => instance.loadingCount > 0;
+var haveElementsToLoad = (instance) => instance.toLoadCount > 0;
+var getSourceTags = (parentTag) => {
+  let sourceTags = [];
+  for (let i = 0, childTag; childTag = parentTag.children[i]; i += 1) {
+    if (childTag.tagName === "SOURCE") {
+      sourceTags.push(childTag);
+    }
+  }
+  return sourceTags;
+};
+var forEachPictureSource = (element, fn) => {
+  const parent = element.parentNode;
+  if (!parent || parent.tagName !== "PICTURE") {
+    return;
+  }
+  let sourceTags = getSourceTags(parent);
+  sourceTags.forEach(fn);
+};
+var forEachVideoSource = (element, fn) => {
+  let sourceTags = getSourceTags(element);
+  sourceTags.forEach(fn);
+};
+var attrsSrc = [SRC];
+var attrsSrcPoster = [SRC, POSTER];
+var attrsSrcSrcsetSizes = [SRC, SRCSET, SIZES];
+var attrsData = [DATA];
+var hasOriginalAttrs = (element) => !!element[ORIGINALS];
+var getOriginalAttrs = (element) => element[ORIGINALS];
+var deleteOriginalAttrs = (element) => delete element[ORIGINALS];
+var setOriginalsObject = (element, attributes) => {
+  if (hasOriginalAttrs(element)) {
+    return;
+  }
+  const originals = {};
+  attributes.forEach((attribute) => {
+    originals[attribute] = element.getAttribute(attribute);
+  });
+  element[ORIGINALS] = originals;
+};
+var saveOriginalBackgroundStyle = (element) => {
+  if (hasOriginalAttrs(element)) {
+    return;
+  }
+  element[ORIGINALS] = { backgroundImage: element.style.backgroundImage };
+};
+var setOrResetAttribute = (element, attrName, value) => {
+  if (!value) {
+    element.removeAttribute(attrName);
+    return;
+  }
+  element.setAttribute(attrName, value);
+};
+var restoreOriginalAttrs = (element, attributes) => {
+  if (!hasOriginalAttrs(element)) {
+    return;
+  }
+  const originals = getOriginalAttrs(element);
+  attributes.forEach((attribute) => {
+    setOrResetAttribute(element, attribute, originals[attribute]);
+  });
+};
+var restoreOriginalBgImage = (element) => {
+  if (!hasOriginalAttrs(element)) {
+    return;
+  }
+  const originals = getOriginalAttrs(element);
+  element.style.backgroundImage = originals.backgroundImage;
+};
+var manageApplied = (element, settings, instance) => {
+  addClass(element, settings.class_applied);
+  setStatus(element, statusApplied);
+  if (!instance)
+    return;
+  if (settings.unobserve_completed) {
+    unobserve(element, settings);
+  }
+  safeCallback(settings.callback_applied, element, instance);
+};
+var manageLoading = (element, settings, instance) => {
+  addClass(element, settings.class_loading);
+  setStatus(element, statusLoading);
+  if (!instance)
+    return;
+  updateLoadingCount(instance, 1);
+  safeCallback(settings.callback_loading, element, instance);
+};
+var setAttributeIfValue = (element, attrName, value) => {
+  if (!value) {
+    return;
+  }
+  element.setAttribute(attrName, value);
+};
+var setImageAttributes = (element, settings) => {
+  setAttributeIfValue(element, SIZES, getData(element, settings.data_sizes));
+  setAttributeIfValue(element, SRCSET, getData(element, settings.data_srcset));
+  setAttributeIfValue(element, SRC, getData(element, settings.data_src));
+};
+var setSourcesImg = (imgEl, settings) => {
+  forEachPictureSource(imgEl, (sourceTag) => {
+    setOriginalsObject(sourceTag, attrsSrcSrcsetSizes);
+    setImageAttributes(sourceTag, settings);
+  });
+  setOriginalsObject(imgEl, attrsSrcSrcsetSizes);
+  setImageAttributes(imgEl, settings);
+};
+var setSourcesIframe = (iframe, settings) => {
+  setOriginalsObject(iframe, attrsSrc);
+  setAttributeIfValue(iframe, SRC, getData(iframe, settings.data_src));
+};
+var setSourcesVideo = (videoEl, settings) => {
+  forEachVideoSource(videoEl, (sourceEl) => {
+    setOriginalsObject(sourceEl, attrsSrc);
+    setAttributeIfValue(sourceEl, SRC, getData(sourceEl, settings.data_src));
+  });
+  setOriginalsObject(videoEl, attrsSrcPoster);
+  setAttributeIfValue(videoEl, POSTER, getData(videoEl, settings.data_poster));
+  setAttributeIfValue(videoEl, SRC, getData(videoEl, settings.data_src));
+  videoEl.load();
+};
+var setSourcesObject = (object, settings) => {
+  setOriginalsObject(object, attrsData);
+  setAttributeIfValue(object, DATA, getData(object, settings.data_src));
+};
+var setBackground = (element, settings, instance) => {
+  const bg1xValue = getData(element, settings.data_bg);
+  const bgHiDpiValue = getData(element, settings.data_bg_hidpi);
+  const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
+  if (!bgDataValue)
+    return;
+  element.style.backgroundImage = `url("${bgDataValue}")`;
+  getTempImage(element).setAttribute(SRC, bgDataValue);
+  manageLoading(element, settings, instance);
+};
+var setMultiBackground = (element, settings, instance) => {
+  const bg1xValue = getData(element, settings.data_bg_multi);
+  const bgHiDpiValue = getData(element, settings.data_bg_multi_hidpi);
+  const bgDataValue = isHiDpi && bgHiDpiValue ? bgHiDpiValue : bg1xValue;
+  if (!bgDataValue) {
+    return;
+  }
+  element.style.backgroundImage = bgDataValue;
+  manageApplied(element, settings, instance);
+};
+var setImgsetBackground = (element, settings, instance) => {
+  const bgImgSetDataValue = getData(element, settings.data_bg_set);
+  if (!bgImgSetDataValue) {
+    return;
+  }
+  const imgSetValues = bgImgSetDataValue.split("|");
+  let bgImageValues = imgSetValues.map((value) => `image-set(${value})`);
+  element.style.backgroundImage = bgImageValues.join();
+  if (element.style.backgroundImage === "") {
+    bgImageValues = imgSetValues.map((value) => `-webkit-image-set(${value})`);
+    element.style.backgroundImage = bgImageValues.join();
+  }
+  manageApplied(element, settings, instance);
+};
+var setSourcesFunctions = {
+  IMG: setSourcesImg,
+  IFRAME: setSourcesIframe,
+  VIDEO: setSourcesVideo,
+  OBJECT: setSourcesObject
+};
+var setSourcesNative = (element, settings) => {
+  const setSourcesFunction = setSourcesFunctions[element.tagName];
+  if (!setSourcesFunction) {
+    return;
+  }
+  setSourcesFunction(element, settings);
+};
+var setSources = (element, settings, instance) => {
+  const setSourcesFunction = setSourcesFunctions[element.tagName];
+  if (!setSourcesFunction) {
+    return;
+  }
+  setSourcesFunction(element, settings);
+  manageLoading(element, settings, instance);
+};
+var elementsWithLoadEvent = ["IMG", "IFRAME", "VIDEO", "OBJECT"];
+var hasLoadEvent = (element) => elementsWithLoadEvent.indexOf(element.tagName) > -1;
+var checkFinish = (settings, instance) => {
+  if (instance && !isSomethingLoading(instance) && !haveElementsToLoad(instance)) {
+    safeCallback(settings.callback_finish, instance);
+  }
+};
+var addEventListener2 = (element, eventName, handler) => {
+  element.addEventListener(eventName, handler);
+  element.llEvLisnrs[eventName] = handler;
+};
+var removeEventListener = (element, eventName, handler) => {
+  element.removeEventListener(eventName, handler);
+};
+var hasEventListeners = (element) => {
+  return !!element.llEvLisnrs;
+};
+var addEventListeners = (element, loadHandler2, errorHandler2) => {
+  if (!hasEventListeners(element))
+    element.llEvLisnrs = {};
+  const loadEventName = element.tagName === "VIDEO" ? "loadeddata" : "load";
+  addEventListener2(element, loadEventName, loadHandler2);
+  addEventListener2(element, "error", errorHandler2);
+};
+var removeEventListeners = (element) => {
+  if (!hasEventListeners(element)) {
+    return;
+  }
+  const eventListeners = element.llEvLisnrs;
+  for (let eventName in eventListeners) {
+    const handler = eventListeners[eventName];
+    removeEventListener(element, eventName, handler);
+  }
+  delete element.llEvLisnrs;
+};
+var doneHandler = (element, settings, instance) => {
+  deleteTempImage(element);
+  updateLoadingCount(instance, -1);
+  decreaseToLoadCount(instance);
+  removeClass(element, settings.class_loading);
+  if (settings.unobserve_completed) {
+    unobserve(element, instance);
+  }
+};
+var loadHandler = (event, element, settings, instance) => {
+  const goingNative = hasStatusNative(element);
+  doneHandler(element, settings, instance);
+  addClass(element, settings.class_loaded);
+  setStatus(element, statusLoaded);
+  safeCallback(settings.callback_loaded, element, instance);
+  if (!goingNative)
+    checkFinish(settings, instance);
+};
+var errorHandler = (event, element, settings, instance) => {
+  const goingNative = hasStatusNative(element);
+  doneHandler(element, settings, instance);
+  addClass(element, settings.class_error);
+  setStatus(element, statusError);
+  safeCallback(settings.callback_error, element, instance);
+  if (settings.restore_on_error)
+    restoreOriginalAttrs(element, attrsSrcSrcsetSizes);
+  if (!goingNative)
+    checkFinish(settings, instance);
+};
+var addOneShotEventListeners = (element, settings, instance) => {
+  const elementToListenTo = getTempImage(element) || element;
+  if (hasEventListeners(elementToListenTo)) {
+    return;
+  }
+  const _loadHandler = (event) => {
+    loadHandler(event, element, settings, instance);
+    removeEventListeners(elementToListenTo);
+  };
+  const _errorHandler = (event) => {
+    errorHandler(event, element, settings, instance);
+    removeEventListeners(elementToListenTo);
+  };
+  addEventListeners(elementToListenTo, _loadHandler, _errorHandler);
+};
+var loadBackground = (element, settings, instance) => {
+  addTempImage(element);
+  addOneShotEventListeners(element, settings, instance);
+  saveOriginalBackgroundStyle(element);
+  setBackground(element, settings, instance);
+  setMultiBackground(element, settings, instance);
+  setImgsetBackground(element, settings, instance);
+};
+var loadRegular = (element, settings, instance) => {
+  addOneShotEventListeners(element, settings, instance);
+  setSources(element, settings, instance);
+};
+var load = (element, settings, instance) => {
+  if (hasLoadEvent(element)) {
+    loadRegular(element, settings, instance);
+  } else {
+    loadBackground(element, settings, instance);
+  }
+};
+var loadNative = (element, settings, instance) => {
+  element.setAttribute("loading", "lazy");
+  addOneShotEventListeners(element, settings, instance);
+  setSourcesNative(element, settings);
+  setStatus(element, statusNative);
+};
+var removeImageAttributes = (element) => {
+  element.removeAttribute(SRC);
+  element.removeAttribute(SRCSET);
+  element.removeAttribute(SIZES);
+};
+var resetSourcesImg = (element) => {
+  forEachPictureSource(element, (sourceTag) => {
+    removeImageAttributes(sourceTag);
+  });
+  removeImageAttributes(element);
+};
+var restoreImg = (imgEl) => {
+  forEachPictureSource(imgEl, (sourceEl) => {
+    restoreOriginalAttrs(sourceEl, attrsSrcSrcsetSizes);
+  });
+  restoreOriginalAttrs(imgEl, attrsSrcSrcsetSizes);
+};
+var restoreVideo = (videoEl) => {
+  forEachVideoSource(videoEl, (sourceEl) => {
+    restoreOriginalAttrs(sourceEl, attrsSrc);
+  });
+  restoreOriginalAttrs(videoEl, attrsSrcPoster);
+  videoEl.load();
+};
+var restoreIframe = (iframeEl) => {
+  restoreOriginalAttrs(iframeEl, attrsSrc);
+};
+var restoreObject = (objectEl) => {
+  restoreOriginalAttrs(objectEl, attrsData);
+};
+var restoreFunctions = {
+  IMG: restoreImg,
+  IFRAME: restoreIframe,
+  VIDEO: restoreVideo,
+  OBJECT: restoreObject
+};
+var restoreAttributes = (element) => {
+  const restoreFunction = restoreFunctions[element.tagName];
+  if (!restoreFunction) {
+    restoreOriginalBgImage(element);
+    return;
+  }
+  restoreFunction(element);
+};
+var resetClasses = (element, settings) => {
+  if (hasEmptyStatus(element) || hasStatusNative(element)) {
+    return;
+  }
+  removeClass(element, settings.class_entered);
+  removeClass(element, settings.class_exited);
+  removeClass(element, settings.class_applied);
+  removeClass(element, settings.class_loading);
+  removeClass(element, settings.class_loaded);
+  removeClass(element, settings.class_error);
+};
+var restore = (element, settings) => {
+  restoreAttributes(element);
+  resetClasses(element, settings);
+  resetStatus(element);
+  deleteOriginalAttrs(element);
+};
+var cancelLoading = (element, entry, settings, instance) => {
+  if (!settings.cancel_on_exit)
+    return;
+  if (!hasStatusLoading(element))
+    return;
+  if (element.tagName !== "IMG")
+    return;
+  removeEventListeners(element);
+  resetSourcesImg(element);
+  restoreImg(element);
+  removeClass(element, settings.class_loading);
+  updateLoadingCount(instance, -1);
+  resetStatus(element);
+  safeCallback(settings.callback_cancel, element, entry, instance);
+};
+var onEnter = (element, entry, settings, instance) => {
+  const dontLoad = hadStartedLoading(element);
+  setStatus(element, statusEntered);
+  addClass(element, settings.class_entered);
+  removeClass(element, settings.class_exited);
+  unobserveEntered(element, settings, instance);
+  safeCallback(settings.callback_enter, element, entry, instance);
+  if (dontLoad)
+    return;
+  load(element, settings, instance);
+};
+var onExit = (element, entry, settings, instance) => {
+  if (hasEmptyStatus(element))
+    return;
+  addClass(element, settings.class_exited);
+  cancelLoading(element, entry, settings, instance);
+  safeCallback(settings.callback_exit, element, entry, instance);
+};
+var tagsWithNativeLazy = ["IMG", "IFRAME", "VIDEO"];
+var shouldUseNative = (settings) => settings.use_native && "loading" in HTMLImageElement.prototype;
+var loadAllNative = (elements, settings, instance) => {
+  elements.forEach((element) => {
+    if (tagsWithNativeLazy.indexOf(element.tagName) === -1) {
+      return;
+    }
+    loadNative(element, settings, instance);
+  });
+  setToLoadCount(instance, 0);
+};
+var isIntersecting = (entry) => entry.isIntersecting || entry.intersectionRatio > 0;
+var getObserverSettings = (settings) => ({
+  root: settings.container === document ? null : settings.container,
+  rootMargin: settings.thresholds || settings.threshold + "px"
+});
+var intersectionHandler = (entries, settings, instance) => {
+  entries.forEach(
+    (entry) => isIntersecting(entry) ? onEnter(entry.target, entry, settings, instance) : onExit(entry.target, entry, settings, instance)
+  );
+};
+var observeElements = (observer, elements) => {
+  elements.forEach((element) => {
+    observer.observe(element);
+  });
+};
+var updateObserver = (observer, elementsToObserve) => {
+  resetObserver(observer);
+  observeElements(observer, elementsToObserve);
+};
+var setObserver = (settings, instance) => {
+  if (!supportsIntersectionObserver || shouldUseNative(settings)) {
+    return;
+  }
+  instance._observer = new IntersectionObserver((entries) => {
+    intersectionHandler(entries, settings, instance);
+  }, getObserverSettings(settings));
+};
+var toArray = (nodeSet) => Array.prototype.slice.call(nodeSet);
+var queryElements = (settings) => settings.container.querySelectorAll(settings.elements_selector);
+var excludeManagedElements = (elements) => toArray(elements).filter(hasEmptyStatus);
+var hasError = (element) => hasStatusError(element);
+var filterErrorElements = (elements) => toArray(elements).filter(hasError);
+var getElementsToLoad = (elements, settings) => excludeManagedElements(elements || queryElements(settings));
+var retryLazyLoad = (settings, instance) => {
+  const errorElements = filterErrorElements(queryElements(settings));
+  errorElements.forEach((element) => {
+    removeClass(element, settings.class_error);
+    resetStatus(element);
+  });
+  instance.update();
+};
+var setOnlineCheck = (settings, instance) => {
+  if (!runningOnBrowser) {
+    return;
+  }
+  instance._onlineHandler = () => {
+    retryLazyLoad(settings, instance);
+  };
+  window.addEventListener("online", instance._onlineHandler);
+};
+var resetOnlineCheck = (instance) => {
+  if (!runningOnBrowser) {
+    return;
+  }
+  window.removeEventListener("online", instance._onlineHandler);
+};
+var LazyLoad = function(customSettings, elements) {
+  const settings = getExtendedSettings(customSettings);
+  this._settings = settings;
+  this.loadingCount = 0;
+  setObserver(settings, this);
+  setOnlineCheck(settings, this);
+  this.update(elements);
+};
+LazyLoad.prototype = {
+  update: function(givenNodeset) {
+    const settings = this._settings;
+    const elementsToLoad = getElementsToLoad(givenNodeset, settings);
+    setToLoadCount(this, elementsToLoad.length);
+    if (isBot || !supportsIntersectionObserver) {
+      this.loadAll(elementsToLoad);
+      return;
+    }
+    if (shouldUseNative(settings)) {
+      loadAllNative(elementsToLoad, settings, this);
+      return;
+    }
+    updateObserver(this._observer, elementsToLoad);
+  },
+  destroy: function() {
+    if (this._observer) {
+      this._observer.disconnect();
+    }
+    resetOnlineCheck(this);
+    queryElements(this._settings).forEach((element) => {
+      deleteOriginalAttrs(element);
+    });
+    delete this._observer;
+    delete this._settings;
+    delete this._onlineHandler;
+    delete this.loadingCount;
+    delete this.toLoadCount;
+  },
+  loadAll: function(elements) {
+    const settings = this._settings;
+    const elementsToLoad = getElementsToLoad(elements, settings);
+    elementsToLoad.forEach((element) => {
+      unobserve(element, this);
+      load(element, settings, this);
+    });
+  },
+  restoreAll: function() {
+    const settings = this._settings;
+    queryElements(settings).forEach((element) => {
+      restore(element, settings);
+    });
+  }
+};
+LazyLoad.load = (element, customSettings) => {
+  const settings = getExtendedSettings(customSettings);
+  load(element, settings);
+};
+LazyLoad.resetStatus = (element) => {
+  resetStatus(element);
+};
+if (runningOnBrowser) {
+  autoInitialize(LazyLoad, window.lazyLoadOptions);
+}
+
+// src/icons/sidebar.ts
+function sidebarSVG(namespace) {
+  const NS = "http://www.w3.org/2000/svg";
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-sidebar`);
+  $svg.setAttribute("viewBox", "0 0 64 64");
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute("d", "M50 8H14c-3.309 0-6 2.691-6 6v36c0 3.309 2.691 6 6 6h36c3.309 0 6-2.691 6-6V14c0-3.309-2.691-6-6-6zM12 50V14c0-1.103.897-2 2-2h8v40h-8c-1.103 0-2-.897-2-2zm40 0c0 1.103-.897 2-2 2H26V12h24c1.103 0 2 .897 2 2z");
+  $svg.appendChild($path);
+  return $svg;
+}
+
+// src/icons/arrow-left.ts
+function arrowLeftSVG(namespace) {
+  const NS = "http://www.w3.org/2000/svg";
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-arrow-left`);
+  $svg.setAttribute("viewBox", "0 0 500 500");
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute("d", "M177.81 249.959L337.473 90.295c2.722-2.865 2.651-7.378-.143-10.1-2.793-2.65-7.163-2.65-9.956 0l-164.75 164.75c-2.793 2.793-2.793 7.306 0 10.1l164.75 164.75c2.865 2.722 7.378 2.65 10.099-.143 2.651-2.794 2.651-7.163 0-9.957L177.809 249.959z");
+  $svg.appendChild($path);
+  return $svg;
+}
+
+// src/icons/arrow-right.ts
+function arrowRightSVG(namespace) {
+  const NS = "http://www.w3.org/2000/svg";
+  const $svg = document.createElementNS(NS, "svg");
+  $svg.setAttribute("class", `${namespace}-footer-icon-arrow-right`);
+  $svg.setAttribute("viewBox", "0 0 500 500");
+  const $path = document.createElementNS(NS, "path");
+  $path.setAttribute("fill", "currentColor");
+  $path.setAttribute("d", "M322.19 250.041L162.527 409.705c-2.722 2.865-2.651 7.378.143 10.1 2.793 2.65 7.163 2.65 9.956 0l164.75-164.75c2.793-2.793 2.793-7.306 0-10.1l-164.75-164.75c-2.865-2.722-7.378-2.65-10.099.143-2.651 2.794-2.651 7.163 0 9.957l159.664 159.736z");
+  $svg.appendChild($path);
+  return $svg;
+}
+
+// src/preload.ts
+var Preload = class {
+  constructor(pages) {
+    this.pages = pages;
+    this.head = 0;
+    this.tail = 0;
+    this.timer = 0;
+    this.links = new Array(pages.length);
+    this.touch(0);
+  }
+  get done() {
+    return this.head == 0 && this.tail == this.pages.length;
+  }
+  touch(index) {
+    if (this.done)
+      return;
+    this.head = this.tail = index;
+    this.timer || (this.timer = setTimeout(this.handler.bind(this)));
+  }
+  handler() {
+    const { links } = this;
+    while (this.head > 0 && links[this.head])
+      this.head--;
+    if (!links[this.head]) {
+      const link = document.createElement("link");
+      links[this.head] = link;
+      link.rel = "preload";
+      link.as = "image";
+      link.href = this.pages[this.head].src;
+      document.head.appendChild(link);
+    }
+    while (links[this.tail])
+      this.tail++;
+    if (this.tail < this.pages.length && !links[this.tail]) {
+      const link = document.createElement("link");
+      links[this.tail] = link;
+      link.rel = "preload";
+      link.as = "image";
+      link.href = this.pages[this.tail].src;
+      document.head.appendChild(link);
+    }
+    this.timer = setTimeout(this.handler.bind(this), 2e3);
+  }
+  dispose() {
+    clearTimeout(this.timer);
+    for (const link of this.links) {
+      link && document.head.contains(link) && document.head.removeChild(link);
+    }
+    this.links.length = 0;
+  }
+};
+
+// src/presentation.ts
+var Presentation = class {
+  constructor(config) {
+    this.namespace = "netless-app-presentation";
+    this.dispose = disposableStore();
+    this.initialized = false;
+    this.showPreview = false;
+    this.pageIndex = 0;
+    this.previewLazyload = null;
+    var _a;
+    this.pages = config.pages;
+    this.preload = new Preload(this.pages);
+    this.dispose.add(this.preload);
+    this.readonly = (_a = config.readonly) != null ? _a : false;
+    this.dom = document.createElement("div");
+    this.dom.className = this.namespace;
+    this.contentDOM = document.createElement("div");
+    this.contentDOM.className = this.c("content");
+    this.previewDOM = document.createElement("div");
+    this.previewDOM.className = this.c("preview");
+    this.imageDOM = document.createElement("div");
+    this.imageDOM.className = this.c("image");
+    this.image = document.createElement("img");
+    this.whiteboardDOM = document.createElement("div");
+    this.whiteboardDOM.className = this.c("wb-view");
+    this.footerDOM = document.createElement("div");
+    this.footerDOM.className = this.c("footer");
+    this.pageNumberInputDOM = document.createElement("input");
+    this.pageNumberInputDOM.className = this.c("page-number-input");
+    this.initialize();
+  }
+  initialize() {
+    var _a;
+    if (this.initialized)
+      return;
+    this.initialized = true;
+    this.dispose.add(() => {
+      var _a2;
+      return (_a2 = this.previewLazyload) == null ? void 0 : _a2.destroy();
+    });
+    this.contentDOM.classList.toggle(this.c("readonly"), this.readonly);
+    this.dom.appendChild(this.contentDOM);
+    const previewMask = this.contentDOM.appendChild(document.createElement("div"));
+    previewMask.className = this.c("preview-mask");
+    this.dispose.add(listen(previewMask, "click", (ev) => {
+      if (this.readonly)
+        return;
+      if (ev.target == previewMask) {
+        this.togglePreview(false);
+      }
+    }));
+    this.contentDOM.appendChild(this.previewDOM);
+    this.previewDOM.classList.add("tele-fancy-scrollbar");
+    const c_previewPage = this.c("preview-page");
+    const c_previewPageName = this.c("preview-page-name");
+    for (let index = 0; index < this.pages.length; ++index) {
+      const page = this.pages[index];
+      const previewSRC = page.thumbnail || this.x_oss_process(page.src);
+      const previewPage = document.createElement("a");
+      previewPage.className = `${c_previewPage} ${this.c(`preview-page-${index}`)}`;
+      previewPage.setAttribute("href", "#");
+      previewPage.dataset.pageIndex = String(index);
+      const img = document.createElement("img");
+      img.width = page.width;
+      img.height = page.height;
+      img.dataset.src = previewSRC;
+      img.dataset.pageIndex = String(index);
+      const name = document.createElement("span");
+      name.className = c_previewPageName;
+      name.textContent = String(index + 1);
+      name.dataset.pageIndex = String(index);
+      previewPage.appendChild(img);
+      previewPage.appendChild(name);
+      this.previewDOM.appendChild(previewPage);
+    }
+    (_a = this.previewLazyload) == null ? void 0 : _a.update();
+    this.dispose.add(listen(this.previewDOM, "click", (ev) => {
+      var _a2;
+      if (this.readonly)
+        return;
+      const pageIndex = (_a2 = ev.target.dataset) == null ? void 0 : _a2.pageIndex;
+      if (pageIndex) {
+        ev.preventDefault();
+        ev.stopPropagation();
+        ev.stopImmediatePropagation();
+        this.onNewPageIndex(Number(pageIndex), "preview");
+        this.togglePreview(false);
+      }
+    }));
+    this.imageDOM.appendChild(this.image);
+    this.contentDOM.appendChild(this.imageDOM);
+    this.updateImage();
+    this.contentDOM.appendChild(this.whiteboardDOM);
+    this.footerDOM.classList.toggle(this.c("readonly"), this.readonly);
+    this.dom.appendChild(this.footerDOM);
+    const btnSidebar = document.createElement("button");
+    btnSidebar.className = `${this.c("footer-btn")} ${this.c("btn-sidebar")}`;
+    btnSidebar.appendChild(sidebarSVG(this.namespace));
+    this.footerDOM.appendChild(btnSidebar);
+    this.dispose.add(listen(btnSidebar, "click", () => {
+      if (this.readonly)
+        return;
+      this.togglePreview();
+    }));
+    const pageJumps = document.createElement("div");
+    pageJumps.className = this.c("page-jumps");
+    this.footerDOM.appendChild(pageJumps);
+    const btnPageBack = document.createElement("button");
+    btnPageBack.className = `${this.c("footer-btn")} ${this.c("btn-page-back")}`;
+    btnPageBack.appendChild(arrowLeftSVG(this.namespace));
+    pageJumps.appendChild(btnPageBack);
+    this.dispose.add(listen(btnPageBack, "click", () => {
+      if (this.readonly)
+        return;
+      if (this.pageIndex > 0)
+        this.onNewPageIndex(this.pageIndex - 1, "navigation");
+    }));
+    const btnPageNext = document.createElement("button");
+    btnPageNext.className = `${this.c("footer-btn")} ${this.c("btn-page-next")}`;
+    btnPageNext.appendChild(arrowRightSVG(this.namespace));
+    pageJumps.appendChild(btnPageNext);
+    this.dispose.add(listen(btnPageNext, "click", () => {
+      if (this.readonly)
+        return;
+      if (this.pageIndex < this.pages.length - 1)
+        this.onNewPageIndex(this.pageIndex + 1, "navigation");
+    }));
+    const pageNumber = document.createElement("div");
+    pageNumber.className = this.c("page-number");
+    this.footerDOM.appendChild(pageNumber);
+    pageNumber.appendChild(this.pageNumberInputDOM);
+    this.pageNumberInputDOM.value = String(this.pageIndex + 1);
+    this.pageNumberInputDOM.disabled = this.readonly;
+    this.dispose.add(listen(this.pageNumberInputDOM, "focus", () => {
+      if (this.readonly)
+        return;
+      this.pageNumberInputDOM.select();
+    }));
+    this.dispose.add(listen(this.pageNumberInputDOM, "change", () => {
+      if (this.readonly)
+        return;
+      if (this.pageNumberInputDOM.value) {
+        this.onNewPageIndex(Number(this.pageNumberInputDOM.value) - 1, "input");
+      }
+    }));
+    const totalPage = document.createElement("span");
+    totalPage.textContent = ` / ${this.pages.length}`;
+    pageNumber.appendChild(totalPage);
+    this.dispose.add(listen(window, "keydown", (ev) => {
+      if (this.readonly || this.isEditable(ev.target))
+        return;
+      if ((ev.key == "ArrowUp" || ev.key == "ArrowLeft") && this.pageIndex > 0)
+        this.onNewPageIndex(this.pageIndex - 1, "keydown");
+      else if ((ev.key == "ArrowDown" || ev.key == "ArrowRight") && this.pageIndex < this.pages.length - 1)
+        this.onNewPageIndex(this.pageIndex + 1, "keydown");
+    }));
+  }
+  setDOM(dom) {
+    if (this.dom == dom)
+      return;
+    dom.appendChild(this.contentDOM);
+    dom.appendChild(this.footerDOM);
+    this.dom = dom;
+  }
+  setReadonly(readonly) {
+    if (this.readonly == readonly)
+      return;
+    this.contentDOM.classList.toggle(this.c("readonly"), readonly);
+    this.footerDOM.classList.toggle(this.c("readonly"), readonly);
+    this.pageNumberInputDOM.disabled = readonly;
+    this.togglePreview(false);
+    this.readonly = readonly;
+  }
+  setPageIndex(pageIndex) {
+    if (Number.isSafeInteger(pageIndex)) {
+      this.pageIndex = pageIndex;
+      this.pageNumberInputDOM.value = String(pageIndex + 1);
+      this.updateImage();
+    }
+  }
+  togglePreview(showPreview) {
+    this.showPreview = showPreview != null ? showPreview : !this.showPreview;
+    this.contentDOM.classList.toggle(this.c("preview-active"), this.showPreview);
+    if (this.showPreview) {
+      const previewPageDOM = this.previewDOM.querySelector("." + this.c(`preview-page-${this.pageIndex}`));
+      if (previewPageDOM) {
+        this.previewLazyload || (this.previewLazyload = new LazyLoad({
+          container: this.previewDOM,
+          elements_selector: `.${this.c("preview-page>img")}`
+        }));
+        this.previewDOM.scrollTo({ top: previewPageDOM.offsetTop - 16 });
+      }
+    }
+  }
+  // [origin] means the cause:
+  // - navigation: user clicked on the left / right button on footer
+  // - input: user filled the bottom-right page number input box
+  // - preview: user clicked on the left preview menu's item
+  // - keydown: this navigation is caused by user press left or right
+  // Fastboard dispatchDocsEvent() triggers the "navigation" and "input" cause
+  onNewPageIndex(index, _origin) {
+    if (0 <= index && index < this.pages.length) {
+      this.setPageIndex(index);
+    }
+  }
+  page() {
+    return this.pages[this.pageIndex];
+  }
+  updateImage() {
+    const page = this.page();
+    if (!page) {
+      this.image.src = "";
+      return;
+    }
+    this.image.width = page.width;
+    this.image.height = page.height;
+    this.image.src = page.src;
+    this.preload.touch(this.pageIndex);
+  }
+  c(className) {
+    return `${this.namespace}-${className}`;
+  }
+  isEditable(el) {
+    if (!el)
+      return false;
+    const { tagName } = el;
+    return tagName == "INPUT" || tagName == "TEXTAREA" || tagName == "SELECT";
+  }
+  x_oss_process(src) {
+    try {
+      const url = new URL(src);
+      url.searchParams.set("x-oss-process", "image/resize,l_50");
+      return url.toString();
+    } catch (err) {
+      console.error(err);
+      return src;
+    }
+  }
+};
+
+// src/style.scss?inline
+var style_default = ".netless-app-presentation{height:100%;display:flex;flex-flow:column nowrap}.netless-app-presentation-content{position:relative;height:100%;overflow:hidden}.netless-app-presentation-preview-mask{display:none;position:absolute;z-index:200;top:0;left:0;width:100%;height:100%}.netless-app-presentation-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:#ededf0e6;box-shadow:inset -1px 0 #0000001c;transition:transform .4s;overflow:auto;overflow-y:scroll}.netless-app-presentation-preview-active .netless-app-presentation-preview-mask{display:block}.netless-app-presentation-preview-active .netless-app-presentation-preview{transform:translate(0)}.netless-app-presentation-preview-page{position:relative;display:block;width:55%;margin-bottom:10px;font-size:0;color:#0000;outline:none;border:7px solid rgba(0,0,0,0);border-radius:4px;transition:border-color .3s;user-select:none}.netless-app-presentation-preview-page:hover,.netless-app-presentation-preview-page.netless-app-presentation-preview-page-active{border-color:#444e601a}.netless-app-presentation-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-presentation-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-presentation-footer{box-sizing:border-box;height:26px;display:flex;align-items:center;padding:0 16px;border-top:1px solid #eeeef7;color:#191919}.netless-app-presentation-float-footer{width:100%;min-height:26px;position:absolute;left:0;bottom:0;z-index:2000;background:#f9f9fce6;transition:opacity .4s}.netless-app-presentation-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:#0000;transition:background .4s;cursor:pointer;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-footer-btn:hover{background:#ededf0e6}@media (hover: none){.netless-app-presentation-footer-btn:hover{background:#0000!important}}.netless-app-presentation-footer-btn>svg{width:100%;height:100%}.netless-app-presentation-footer-btn>svg:nth-of-type(2){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(1){display:none}.netless-app-presentation-footer-btn.netless-app-presentation-footer-btn-playing>svg:nth-of-type(2){display:initial}.netless-app-presentation-footer-btn~.netless-app-presentation-footer-btn{margin-left:15px}.netless-app-presentation-page-jumps{flex:1;display:flex;justify-content:center;align-items:center}.netless-app-presentation-page-number{margin-left:auto;font-size:13px;user-select:none;white-space:nowrap;word-break:keep-all}.netless-app-presentation-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:#0000;transition:background .4s;user-select:text;-webkit-tap-highlight-color:rgba(0,0,0,0)}.netless-app-presentation-page-number-input:hover,.netless-app-presentation-page-number-input:focus,.netless-app-presentation-page-number-input:active{background:#fff;box-shadow:#63636333 0 2px 8px}.netless-app-presentation-readonly.netless-app-presentation-footer{display:none}.netless-app-presentation-wb-view{position:absolute;top:0;left:0;width:100%;height:100%;z-index:100;overflow:hidden;transition:opacity .2s}.netless-app-presentation-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.netless-app-presentation-image>img{max-width:100%;max-height:100%;object-fit:contain}.telebox-color-scheme-dark .netless-app-presentation-page-number-input{color:#a6a6a8}.telebox-color-scheme-dark .netless-app-presentation-page-number-input:active,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:focus,.telebox-color-scheme-dark .netless-app-presentation-page-number-input:hover{color:#222}.telebox-color-scheme-dark .netless-app-presentation-footer{color:#a6a6a8;background:#2d2d33;border-top:none}.telebox-color-scheme-dark .netless-app-presentation-footer-btn:hover{background:#212126}.telebox-color-scheme-dark .netless-app-presentation-preview{background:#323232e6}";
+
+// src/app-presentation.ts
+var ppt2page = (ppt) => ppt ? { width: ppt.width, height: ppt.height, src: ppt.src, thumbnail: ppt.previewURL } : null;
+var createLogger = (room) => {
+  if (room && room.logger) {
+    return (...args) => room.logger.info(...args);
+  } else {
+    return (...args) => console.log(...args);
+  }
+};
+var NetlessAppPresentation = {
+  kind: "Presentation",
+  setup(context) {
+    var _a;
+    const view = context.getView();
+    if (!view)
+      throw new Error("[Presentation]: no whiteboard view, make sure you have added options.scenePath in addApp()");
+    const pages = (_a = context.getScenes()) == null ? void 0 : _a.map(({ ppt }) => ppt2page(ppt)).filter(Boolean);
+    if (!pages || pages.length === 0)
+      throw new Error("[Presentation]: empty scenes, make sure you have added options.scenes in addApp()");
+    if (pages[0].src.startsWith("ppt"))
+      throw new Error("[Presentation]: legacy dynamic PPT is unsupported, please use the projector converter and @netless/slide to render it");
+    const scenePath = context.getInitScenePath();
+    const options = context.getAppOptions() || {};
+    const log = options.log || createLogger(context.getRoom());
+    log(`[Presentation] new ${context.appId}`);
+    if (context.isAddApp) {
+      if (pages.length > 100)
+        console.warn(`[Presentation]: too many pages (${pages.length}), may cause performance issues`);
+      const room = context.getRoom();
+      if (room && room.isWritable) {
+        const scenes = room.entireScenes()[scenePath];
+        if (scenes.length < pages.length) {
+          room.putScenes(scenePath, pages.map((_, index) => ({ name: String(index + 1) })));
+        }
+      }
+    }
+    const dispose = disposableStore();
+    dispose.add(() => log(`[Presentation] dispose ${context.appId}`));
+    const page$$ = context.createStorage("page", { index: 0 });
+    let lastIndex = -1;
+    const syncPage = async (index) => {
+      if (lastIndex !== index) {
+        lastIndex = index;
+        context.dispatchAppEvent("pageStateChange", { index, length: pages.length });
+      }
+      if (!context.getIsWritable())
+        return;
+      const scenes = context.getDisplayer().entireScenes()[scenePath];
+      if (!scenes)
+        return;
+      const name = String(index + 1);
+      if (!scenes.some((scene) => scene.name === name)) {
+        await context.addPage({ scene: { name } });
+      }
+      await context.setScenePath(`${scenePath}/${name}`);
+    };
+    const jumpPage = (index) => {
+      if (!context.getIsWritable()) {
+        console.warn("[Presentation]: no permission, make sure you have test room.isWritable");
+        return false;
+      }
+      if (!(0 <= index && index < pages.length)) {
+        console.warn(`[Presentation]: page ${index + 1} out of bounds [1, ${pages.length}]`);
+        return false;
+      }
+      const scenes = context.getDisplayer().entireScenes()[scenePath];
+      if (!scenes) {
+        console.warn(`[Presentation]: no scenes found at ${scenePath}, make sure you have added options.scenePath in addApp()`);
+        return false;
+      }
+      const name = String(index + 1);
+      if (!scenes.some((scene) => scene.name === name)) {
+        context.addPage({ scene: { name } });
+      }
+      page$$.setState({ index });
+      return true;
+    };
+    const prevPage = () => jumpPage(page$$.state.index - 1);
+    const nextPage = () => jumpPage(page$$.state.index + 1);
+    const pageState = () => ({ index: page$$.state.index, length: pages.length });
+    const scaleDocsToFit = () => {
+      const { width, height } = app.page() || {};
+      if (width && height) {
+        view.moveCameraToContain({
+          originX: -width / 2,
+          originY: -height / 2,
+          width,
+          height,
+          animationMode: "immediately"
+        });
+        view.setCameraBound({
+          damping: 1,
+          maxContentMode: () => view.camera.scale,
+          minContentMode: () => view.camera.scale,
+          centerX: 0,
+          centerY: 0,
+          width,
+          height
+        });
+      }
+    };
+    syncPage(page$$.state.index);
+    dispose.add(page$$.addStateChangedListener(() => syncPage(page$$.state.index)));
+    dispose.add(context.emitter.on("roomStateChange", (state) => {
+      var _a2;
+      if ((_a2 = state.sceneState) == null ? void 0 : _a2.scenePath.endsWith("/0")) {
+        syncPage(page$$.state.index);
+      }
+    }));
+    const box = context.getBox();
+    const app = dispose.add(createPresentation(box, pages, jumpPage, page$$));
+    app.contentDOM.dataset.appPresentationVersion = "0.1.0-beta.0";
+    app.scaleDocsToFit = scaleDocsToFit;
+    app.log = log;
+    context.mountView(app.whiteboardDOM);
+    view.disableCameraTransform = true;
+    scaleDocsToFit();
+    dispose.make(() => {
+      view.callbacks.on("onSizeUpdated", scaleDocsToFit);
+      return () => view.callbacks.off("onSizeUpdated", scaleDocsToFit);
+    });
+    dispose.add(context.emitter.on("writableChange", (isWritable) => {
+      app.setReadonly(!isWritable);
+    }));
+    context.emitter.on("destroy", () => dispose());
+    const reportProgress = (progress, result) => {
+      window.postMessage({ type: "@netless/_result_save_pdf_", appId: context.appId, progress, result }, "*");
+      return result;
+    };
+    const base64url = async (url) => {
+      try {
+        const a = new URL(url);
+        a.searchParams.set("t", Date.now().toString());
+        url = a.toString();
+      } catch (e) {
+      }
+      const data = await fetch(url);
+      if (!data.ok)
+        throw new Error(`[Presentation]: failed to fetch ${url} - ${await data.text()}`);
+      const blob = await data.blob();
+      const reader = new FileReader();
+      return new Promise((resolve, reject) => {
+        reader.onload = () => resolve(reader.result);
+        reader.onerror = () => reject(reader.error);
+        reader.readAsDataURL(blob);
+      });
+    };
+    const toPdf = async () => {
+      const MAX = 1920;
+      const firstPage = pages[0];
+      const { width, height } = firstPage;
+      let pdfWidth = Math.floor(width), pdfHeight = Math.floor(height);
+      if (pdfWidth > MAX) {
+        pdfWidth = MAX;
+        pdfHeight = Math.floor(height * pdfWidth / width);
+      }
+      if (pdfHeight > MAX) {
+        pdfHeight = MAX;
+        pdfWidth = Math.floor(width * pdfHeight / height);
+      }
+      const scenes = context.getDisplayer().entireScenes()[scenePath];
+      const stage_canvas = document.createElement("canvas");
+      stage_canvas.width = pdfWidth;
+      stage_canvas.height = pdfHeight;
+      const stage = stage_canvas.getContext("2d");
+      const wb_canvas = document.createElement("canvas");
+      wb_canvas.width = pdfWidth;
+      wb_canvas.height = pdfHeight;
+      const wb = wb_canvas.getContext("2d");
+      if (!wb || !stage)
+        return reportProgress(100, null);
+      const { jsPDF } = await import('jspdf');
+      const pdf = new jsPDF({
+        format: [firstPage.width, firstPage.height],
+        orientation: firstPage.width > firstPage.height ? "l" : "p",
+        compress: true
+      });
+      for (let index = 0; index < pages.length; ++index) {
+        const { width: width2, height: height2, src } = pages[index];
+        const url = await base64url(src);
+        const img = document.createElement("img");
+        await new Promise((resolve) => {
+          img.onload = resolve;
+          img.src = url;
+        });
+        stage.drawImage(img, 0, 0);
+        wb.clearRect(0, 0, pdfWidth, pdfHeight);
+        if (scenes.some((scene) => scene.name == String(index + 1))) {
+          view.screenshotToCanvas(
+            wb,
+            `${scenePath}/${index + 1}`,
+            wb_canvas.width,
+            wb_canvas.height,
+            { centerX: 0, centerY: 0, scale: Math.min(wb_canvas.width / width2, wb_canvas.height / height2) }
+          );
+          try {
+            const wb_url = wb_canvas.toDataURL("image/png");
+            const wb_img = document.createElement("img");
+            await new Promise((resolve) => {
+              wb_img.onload = resolve;
+              wb_img.src = wb_url;
+            });
+            stage.drawImage(wb_img, 0, 0, pdfWidth, pdfHeight);
+          } catch (err) {
+            console.warn(err);
+          }
+        }
+        const output = stage_canvas.toDataURL("image/jpeg", 0.6);
+        if (index > 0)
+          pdf.addPage();
+        pdf.addImage(output, "JPEG", 0, 0, pdfWidth, pdfHeight, "", "FAST");
+        stage.clearRect(0, 0, pdfWidth, pdfHeight);
+        const progress = Math.ceil((index + 1) / pages.length * 100);
+        if (progress < 100)
+          reportProgress(progress, null);
+      }
+      const data = pdf.output("arraybuffer");
+      const title = box.title;
+      return reportProgress(100, { pdf: data, title });
+    };
+    dispose.add(listen(window, "message", (ev) => {
+      if (ev.data && ev.data.type == "@netless/_request_save_pdf_" && ev.data.appId == context.appId) {
+        toPdf().catch((err) => {
+          console.warn(err);
+          reportProgress(100, null);
+        });
+      }
+    }));
+    const controller = { app, view, context, jumpPage, prevPage, nextPage, pageState, toPdf, log };
+    dispose.add(listen(window, "message", (ev) => {
+      if (ev.data === "@netless/_presentation_") {
+        if (typeof window !== "undefined")
+          dispose.make(() => {
+            const debug = window._presentation_ || (window._presentation_ = /* @__PURE__ */ new Set());
+            debug.add(controller);
+            return () => debug.delete(controller);
+          });
+        console.log(controller);
+      }
+    }));
+    return controller;
+  }
+};
+var AppPresentation = class extends Presentation {
+  constructor(config) {
+    super(config);
+    this.jumpPage = config.jumpPage;
+  }
+  onNewPageIndex(index, origin) {
+    if (origin === "keydown" && this.box && !this.box.focus)
+      return;
+    if (this.log)
+      this.log("[Presentation] user navigate to", index + 1, `(${origin})`);
+    if (0 <= index && index < this.pages.length) {
+      this.jumpPage(index);
+    } else {
+      console.warn(`[Presentation]: page index ${index} out of bounds [0, ${this.pages.length - 1}]`);
+    }
+  }
+};
+var createPresentation = (box, pages, jumpPage, page$$) => {
+  box.mountStyles(style_default);
+  const app = new AppPresentation({ pages, readonly: box.readonly, jumpPage });
+  app.box = box;
+  box.mountContent(app.contentDOM);
+  box.mountFooter(app.footerDOM);
+  app.setPageIndex(page$$.state.index);
+  app.dispose.add(page$$.addStateChangedListener(() => {
+    app.setPageIndex(page$$.state.index);
+  }));
+  return app;
+};
+var install = (register, options = {}) => {
+  let app = NetlessAppPresentation;
+  if (options.as) {
+    app = Object.assign({}, app, { kind: options.as });
+  }
+  return register({ kind: app.kind, src: app });
+};
+
+// src/index.ts
+var version = "0.1.0-beta.0";
+
+exports.NetlessAppPresentation = NetlessAppPresentation;
+exports.Presentation = Presentation;
+exports.default = NetlessAppPresentation;
+exports.install = install;
+exports.styles = style_default;
+exports.version = version;
+//# sourceMappingURL=index.js.map