@internetarchive/bookreader 5.0.0-88-alpha.7 → 5.0.0-88-alpha.9

package/dist/esm/BookReader/Mode2UpLit.js

@@ -0,0 +1,1020 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _decorate(e, r, t, i) { var o = _getDecoratorsApi(); if (i) for (var n = 0; n < i.length; n++) o = i[n](o); var s = r(function (e) { o.initializeInstanceElements(e, a.elements); }, t), a = o.decorateClass(_coalesceClassElements(s.d.map(_createElementDescriptor)), e); return o.initializeClassElements(s.F, a.elements), o.runClassFinishers(s.F, a.finishers); }
+function _getDecoratorsApi() { _getDecoratorsApi = function _getDecoratorsApi() { return e; }; var e = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function initializeInstanceElements(e, r) { ["method", "field"].forEach(function (t) { r.forEach(function (r) { r.kind === t && "own" === r.placement && this.defineClassElement(e, r); }, this); }, this); }, initializeClassElements: function initializeClassElements(e, r) { var t = e.prototype; ["method", "field"].forEach(function (i) { r.forEach(function (r) { var o = r.placement; if (r.kind === i && ("static" === o || "prototype" === o)) { var n = "static" === o ? e : t; this.defineClassElement(n, r); } }, this); }, this); }, defineClassElement: function defineClassElement(e, r) { var t = r.descriptor; if ("field" === r.kind) { var i = r.initializer; t = { enumerable: t.enumerable, writable: t.writable, configurable: t.configurable, value: void 0 === i ? void 0 : i.call(e) }; } Object.defineProperty(e, r.key, t); }, decorateClass: function decorateClass(e, r) { var t = [], i = [], o = { static: [], prototype: [], own: [] }; if (e.forEach(function (e) { this.addElementPlacement(e, o); }, this), e.forEach(function (e) { if (!_hasDecorators(e)) return t.push(e); var r = this.decorateElement(e, o); t.push(r.element), t.push.apply(t, r.extras), i.push.apply(i, r.finishers); }, this), !r) return { elements: t, finishers: i }; var n = this.decorateConstructor(t, r); return i.push.apply(i, n.finishers), n.finishers = i, n; }, addElementPlacement: function addElementPlacement(e, r, t) { var i = r[e.placement]; if (!t && -1 !== i.indexOf(e.key)) throw new TypeError("Duplicated element (" + e.key + ")"); i.push(e.key); }, decorateElement: function decorateElement(e, r) { for (var t = [], i = [], o = e.decorators, n = o.length - 1; n >= 0; n--) { var s = r[e.placement]; s.splice(s.indexOf(e.key), 1); var a = this.fromElementDescriptor(e), l = this.toElementFinisherExtras((0, o[n])(a) || a); e = l.element, this.addElementPlacement(e, r), l.finisher && i.push(l.finisher); var c = l.extras; if (c) { for (var p = 0; p < c.length; p++) this.addElementPlacement(c[p], r); t.push.apply(t, c); } } return { element: e, finishers: i, extras: t }; }, decorateConstructor: function decorateConstructor(e, r) { for (var t = [], i = r.length - 1; i >= 0; i--) { var o = this.fromClassDescriptor(e), n = this.toClassDescriptor((0, r[i])(o) || o); if (void 0 !== n.finisher && t.push(n.finisher), void 0 !== n.elements) { e = n.elements; for (var s = 0; s < e.length - 1; s++) for (var a = s + 1; a < e.length; a++) if (e[s].key === e[a].key && e[s].placement === e[a].placement) throw new TypeError("Duplicated element (" + e[s].key + ")"); } } return { elements: e, finishers: t }; }, fromElementDescriptor: function fromElementDescriptor(e) { var r = { kind: e.kind, key: e.key, placement: e.placement, descriptor: e.descriptor }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), "field" === e.kind && (r.initializer = e.initializer), r; }, toElementDescriptors: function toElementDescriptors(e) { if (void 0 !== e) return _toArray(e).map(function (e) { var r = this.toElementDescriptor(e); return this.disallowProperty(e, "finisher", "An element descriptor"), this.disallowProperty(e, "extras", "An element descriptor"), r; }, this); }, toElementDescriptor: function toElementDescriptor(e) { var r = e.kind + ""; if ("method" !== r && "field" !== r) throw new TypeError('An element descriptor\'s .kind property must be either "method" or "field", but a decorator created an element descriptor with .kind "' + r + '"'); var t = _toPropertyKey(e.key), i = e.placement + ""; if ("static" !== i && "prototype" !== i && "own" !== i) throw new TypeError('An element descriptor\'s .placement property must be one of "static", "prototype" or "own", but a decorator created an element descriptor with .placement "' + i + '"'); var o = e.descriptor; this.disallowProperty(e, "elements", "An element descriptor"); var n = { kind: r, key: t, placement: i, descriptor: Object.assign({}, o) }; return "field" !== r ? this.disallowProperty(e, "initializer", "A method descriptor") : (this.disallowProperty(o, "get", "The property descriptor of a field descriptor"), this.disallowProperty(o, "set", "The property descriptor of a field descriptor"), this.disallowProperty(o, "value", "The property descriptor of a field descriptor"), n.initializer = e.initializer), n; }, toElementFinisherExtras: function toElementFinisherExtras(e) { return { element: this.toElementDescriptor(e), finisher: _optionalCallableProperty(e, "finisher"), extras: this.toElementDescriptors(e.extras) }; }, fromClassDescriptor: function fromClassDescriptor(e) { var r = { kind: "class", elements: e.map(this.fromElementDescriptor, this) }; return Object.defineProperty(r, Symbol.toStringTag, { value: "Descriptor", configurable: !0 }), r; }, toClassDescriptor: function toClassDescriptor(e) { var r = e.kind + ""; if ("class" !== r) throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator created a class descriptor with .kind "' + r + '"'); this.disallowProperty(e, "key", "A class descriptor"), this.disallowProperty(e, "placement", "A class descriptor"), this.disallowProperty(e, "descriptor", "A class descriptor"), this.disallowProperty(e, "initializer", "A class descriptor"), this.disallowProperty(e, "extras", "A class descriptor"); var t = _optionalCallableProperty(e, "finisher"); return { elements: this.toElementDescriptors(e.elements), finisher: t }; }, runClassFinishers: function runClassFinishers(e, r) { for (var t = 0; t < r.length; t++) { var i = (0, r[t])(e); if (void 0 !== i) { if ("function" != typeof i) throw new TypeError("Finishers must return a constructor."); e = i; } } return e; }, disallowProperty: function disallowProperty(e, r, t) { if (void 0 !== e[r]) throw new TypeError(t + " can't have a ." + r + " property."); } }; return e; }
+function _createElementDescriptor(e) { var r, t = _toPropertyKey(e.key); "method" === e.kind ? r = { value: e.value, writable: !0, configurable: !0, enumerable: !1 } : "get" === e.kind ? r = { get: e.value, configurable: !0, enumerable: !1 } : "set" === e.kind ? r = { set: e.value, configurable: !0, enumerable: !1 } : "field" === e.kind && (r = { configurable: !0, writable: !0, enumerable: !0 }); var i = { kind: "field" === e.kind ? "field" : "method", key: t, placement: e.static ? "static" : "field" === e.kind ? "own" : "prototype", descriptor: r }; return e.decorators && (i.decorators = e.decorators), "field" === e.kind && (i.initializer = e.value), i; }
+function _coalesceGetterSetter(e, r) { void 0 !== e.descriptor.get ? r.descriptor.get = e.descriptor.get : r.descriptor.set = e.descriptor.set; }
+function _coalesceClassElements(e) { for (var r = [], isSameElement = function isSameElement(e) { return "method" === e.kind && e.key === o.key && e.placement === o.placement; }, t = 0; t < e.length; t++) { var i, o = e[t]; if ("method" === o.kind && (i = r.find(isSameElement))) { if (_isDataDescriptor(o.descriptor) || _isDataDescriptor(i.descriptor)) { if (_hasDecorators(o) || _hasDecorators(i)) throw new ReferenceError("Duplicated methods (" + o.key + ") can't be decorated."); i.descriptor = o.descriptor; } else { if (_hasDecorators(o)) { if (_hasDecorators(i)) throw new ReferenceError("Decorators can't be placed on different accessors with for the same property (" + o.key + ")."); i.decorators = o.decorators; } _coalesceGetterSetter(o, i); } } else r.push(o); } return r; }
+function _hasDecorators(e) { return e.decorators && e.decorators.length; }
+function _isDataDescriptor(e) { return void 0 !== e && !(void 0 === e.value && void 0 === e.writable); }
+function _optionalCallableProperty(e, r) { var t = e[r]; if (void 0 !== t && "function" != typeof t) throw new TypeError("Expected '" + r + "' to be a function"); return t; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toArray(r) { return _arrayWithHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _superPropGet(t, e, o, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), e, o); return 2 & r && "function" == typeof p ? function (t) { return p.apply(o, t); } : p; }
+function _get() { return _get = "undefined" != typeof Reflect && Reflect.get ? Reflect.get.bind() : function (e, t, r) { var p = _superPropBase(e, t); if (p) { var n = Object.getOwnPropertyDescriptor(p, t); return n.get ? n.get.call(arguments.length < 3 ? e : r) : n.value; } }, _get.apply(null, arguments); }
+function _superPropBase(t, o) { for (; !{}.hasOwnProperty.call(t, o) && null !== (t = _getPrototypeOf(t));); return t; }
+function _getPrototypeOf(t) { return _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function (t) { return t.__proto__ || Object.getPrototypeOf(t); }, _getPrototypeOf(t); }
+// @ts-check
+import { customElement, property, query } from 'lit/decorators.js';
+import { LitElement, html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { ModeSmoothZoom } from './ModeSmoothZoom';
+import { arrChanged, promisifyEvent } from './utils';
+import { HTMLDimensionsCacher } from "./utils/HTMLDimensionsCacher";
+import { PageModel } from './BookModel';
+import { ModeCoordinateSpace } from './ModeCoordinateSpace';
+/** @typedef {import('./BookModel').BookModel} BookModel */
+/** @typedef {import('./BookModel').PageIndex} PageIndex */
+/** @typedef {import('./ModeSmoothZoom').SmoothZoomable} SmoothZoomable */
+/** @typedef {import('./PageContainer').PageContainer} PageContainer */
+/** @typedef {import('../BookReader').default} BookReader */
+
+// I _have_ to make this globally public, otherwise it won't let me call
+// its constructor :/
+/** @implements {SmoothZoomable} */
+export var Mode2UpLit = _decorate(null, function (_initialize, _LitElement) {
+  class Mode2UpLit extends _LitElement {
+    /****************************************/
+    /************** PROPERTIES **************/
+    /****************************************/
+
+    /** @type {BookReader} */
+
+    /************** BOOK-RELATED PROPERTIES **************/
+
+    /** @type {BookModel} */
+
+    /************** SCALE-RELATED PROPERTIES **************/
+
+    /** @type {ModeCoordinateSpace} Manage conversion between coordinates */
+
+    /** @type {import('./options').AutoFitValues} */
+
+    /************** VIRTUAL-FLIPPING PROPERTIES **************/
+
+    /** ms for flip animation */
+
+    /** @type {PageModel[]} */
+
+    /** @type {PageModel | null} */
+
+    /** @type {PageModel | null} */
+
+    /** @type {PageModel[]} */
+
+    /** @type {Record<PageIndex, PageContainer>} position in inches */
+
+    /** @type {{ direction: 'left' | 'right', pagesFlipping: [PageIndex, PageIndex], pagesFlippingCount: number }} */
+
+    /** @private cache this value */
+
+    /************** DOM-RELATED PROPERTIES **************/
+
+    /** @type {HTMLElement} */
+
+    /** @type {HTMLElement} */
+
+    /** @type {HTMLElement} */
+
+    /** @param {PageModel} page */
+
+    /** @param {PageModel} page */
+
+    /**
+     * @param {PageModel | null} pageLeft
+     * @param {PageModel | null} pageRight
+     */
+
+    /** @type {HTMLDimensionsCacher} Cache things like clientWidth to reduce repaints */
+
+    /************** CONSTANT PROPERTIES **************/
+
+    /** How much to zoom when zoom button pressed */
+
+    /** How thick a page is in the real world, as an estimate for the leafs */
+
+    /****************************************/
+    /************** PUBLIC API **************/
+    /****************************************/
+
+    /************** MAIN PUBLIC METHODS **************/
+
+    /**
+     * @param {PageIndex} index
+     * TODO Remove smooth option from everywhere.
+     */
+
+    /********************************************/
+    /************** INTERNAL STUFF **************/
+    /********************************************/
+
+    /************** LIFE CYCLE **************/
+
+    /**
+     * @param {BookModel} book
+     * @param {BookReader} br
+     */
+    constructor(book, br) {
+      super();
+      _initialize(this);
+      this.book = book;
+
+      /** @type {BookReader} */
+      this.br = br;
+    }
+
+    /** @override */
+
+    /** @override */
+
+    /** @override */
+
+    /** @override */
+
+    /************** LIT CONFIGS **************/
+
+    /** @override */
+
+    /************** RENDERING **************/
+
+    /** @override */
+
+    /** @param {PageModel} page */
+
+    /**
+     * @param {PageIndex} startIndex
+     */
+
+    /** @param {PageModel} page */
+
+    /**
+     * @param {'left' | 'right'} side
+     * Renders the current leaf edges, as well as any "moving" leaf edges,
+     * i.e. leaf edges that are currently being flipped. Uses a custom element
+     * to render br-leaf-edges.
+     **/
+
+    /**
+     * @returns {PageModel[]}
+     */
+
+    /**
+     * @param {PageModel} page
+     * @param {import('./options').AutoFitValues} autoFit
+     */
+
+    /**
+     * @param {PageModel} page
+     * @param {number} scale
+     * @returns {{x: number, y: number}}
+     */
+
+    /************** VIRTUAL FLIPPING LOGIC **************/
+
+    /**
+     * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
+     */
+
+    /**
+     * @param {'left' | 'right' | 'next' | 'prev' | PageIndex | PageModel | {left: PageModel | null, right: PageModel | null}} nextSpread
+     * @returns {{left: PageModel | null, right: PageModel | null}}
+     */
+
+    /************** INPUT HANDLERS **************/
+
+    /**
+     * @param {MouseEvent} ev
+     */
+  }
+  return {
+    F: Mode2UpLit,
+    d: [{
+      kind: "field",
+      key: "br",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Object
+      })],
+      key: "book",
+      value: void 0
+    }, {
+      kind: "field",
+      key: "coordSpace",
+      value() {
+        return new ModeCoordinateSpace(this);
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "scale",
+      value() {
+        return 1;
+      }
+    }, {
+      kind: "field",
+      key: "initialScale",
+      value() {
+        return 1;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String
+      })],
+      key: "autoFit",
+      value() {
+        return 'auto';
+      }
+    }, {
+      kind: "field",
+      key: "flipSpeed",
+      value() {
+        return 400;
+      }
+    }, {
+      kind: "field",
+      decorators: [query('.br-mode-2up__leafs--flipping')],
+      key: "$flippingEdges",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Array,
+        hasChanged: arrChanged
+      })],
+      key: "visiblePages",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "get",
+      key: "pageLeft",
+      value: function value() {
+        return this.visiblePages.find(p => p.pageSide == 'L');
+      }
+    }, {
+      kind: "get",
+      key: "pageRight",
+      value: function value() {
+        return this.visiblePages.find(p => p.pageSide == 'R');
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Array
+      })],
+      key: "renderedPages",
+      value() {
+        return [];
+      }
+    }, {
+      kind: "field",
+      key: "pageContainerCache",
+      value() {
+        return {};
+      }
+    }, {
+      kind: "field",
+      key: "activeFlip",
+      value() {
+        return null;
+      }
+    }, {
+      kind: "field",
+      key: "_leftCoverWidth",
+      value() {
+        return 0;
+      }
+    }, {
+      kind: "get",
+      key: "$container",
+      value: function value() {
+        return this;
+      }
+    }, {
+      kind: "get",
+      key: "$visibleWorld",
+      value: function value() {
+        return this.$book;
+      }
+    }, {
+      kind: "field",
+      decorators: [query('.br-mode-2up__book')],
+      key: "$book",
+      value: void 0
+    }, {
+      kind: "get",
+      key: "positions",
+      value: function value() {
+        return this.computePositions(this.pageLeft, this.pageRight);
+      }
+    }, {
+      kind: "method",
+      key: "computePageHeight",
+      value: function computePageHeight(page) {
+        return this.book.getMedianPageSizeInches().height;
+      }
+    }, {
+      kind: "method",
+      key: "computePageWidth",
+      value: function computePageWidth(page) {
+        return page.widthInches * this.computePageHeight(page) / page.heightInches;
+      }
+    }, {
+      kind: "method",
+      key: "computePositions",
+      value: function computePositions(pageLeft, pageRight) {
+        var _pageLeft$index, _this$activeFlip, _pageRight$index, _this$activeFlip2;
+        var computePageWidth = this.computePageWidth.bind(this);
+        var numLeafs = this.book.getNumLeafs();
+        var movingPagesWidth = this.activeFlip ? Math.ceil(this.activeFlip.pagesFlippingCount / 2) * this.PAGE_THICKNESS_IN : 0;
+        var leftPagesCount = this.book.pageProgression == 'lr' ? (_pageLeft$index = pageLeft === null || pageLeft === void 0 ? void 0 : pageLeft.index) !== null && _pageLeft$index !== void 0 ? _pageLeft$index : 0 : !pageLeft ? 0 : numLeafs - pageLeft.index;
+
+        // Everything is relative to the gutter
+        var gutter = this._leftCoverWidth + leftPagesCount * this.PAGE_THICKNESS_IN;
+        var pageLeftEnd = gutter;
+        var pageLeftWidth = !pageLeft ? computePageWidth(pageRight.right) : computePageWidth(pageLeft);
+        var pageLeftStart = gutter - pageLeftWidth;
+        var leafEdgesLeftEnd = pageLeftStart; // leafEdgesLeftStart + leafEdgesLeftMainWidth + leafEdgesLeftMovingWidth;
+        var leafEdgesLeftMovingWidth = ((_this$activeFlip = this.activeFlip) === null || _this$activeFlip === void 0 ? void 0 : _this$activeFlip.direction) != 'left' ? 0 : movingPagesWidth;
+        var leafEdgesLeftMainWidth = Math.ceil(leftPagesCount / 2) * this.PAGE_THICKNESS_IN - leafEdgesLeftMovingWidth;
+        var leafEdgesLeftFullWidth = leafEdgesLeftMovingWidth + leafEdgesLeftMainWidth;
+        var leafEdgesLeftMovingStart = leafEdgesLeftEnd - leafEdgesLeftMovingWidth;
+        var leafEdgesLeftStart = leafEdgesLeftMovingStart - leafEdgesLeftMainWidth;
+        var pageRightStart = gutter;
+        var pageRightWidth = !pageRight ? 0 : computePageWidth(pageRight);
+        var pageRightEnd = pageRightStart + pageRightWidth;
+        var rightPagesCount = this.book.pageProgression == 'lr' ? !pageRight ? 0 : numLeafs - pageRight.index : (_pageRight$index = pageRight === null || pageRight === void 0 ? void 0 : pageRight.index) !== null && _pageRight$index !== void 0 ? _pageRight$index : 0;
+        var leafEdgesRightStart = pageRightEnd;
+        var leafEdgesRightMovingWidth = ((_this$activeFlip2 = this.activeFlip) === null || _this$activeFlip2 === void 0 ? void 0 : _this$activeFlip2.direction) != 'right' ? 0 : movingPagesWidth;
+        var leafEdgesRightMainStart = leafEdgesRightStart + leafEdgesRightMovingWidth;
+        var leafEdgesRightMainWidth = Math.ceil(rightPagesCount / 2) * this.PAGE_THICKNESS_IN - leafEdgesRightMovingWidth;
+        var leafEdgesRightEnd = leafEdgesRightStart + leafEdgesRightMainWidth + leafEdgesRightMovingWidth;
+        var leafEdgesRightFullWidth = leafEdgesRightMovingWidth + leafEdgesRightMainWidth;
+        var spreadWidth = pageRightEnd - pageLeftStart;
+        var bookWidth = leafEdgesRightEnd - leafEdgesLeftStart;
+        return {
+          leafEdgesLeftStart,
+          leafEdgesLeftMainWidth,
+          leafEdgesLeftMovingStart,
+          leafEdgesLeftMovingWidth,
+          leafEdgesLeftEnd,
+          leafEdgesLeftFullWidth,
+          pageLeftStart,
+          pageLeftWidth,
+          pageLeftEnd,
+          gutter,
+          pageRightStart,
+          pageRightWidth,
+          pageRightEnd,
+          leafEdgesRightStart,
+          leafEdgesRightMovingWidth,
+          leafEdgesRightMainStart,
+          leafEdgesRightMainWidth,
+          leafEdgesRightEnd,
+          leafEdgesRightFullWidth,
+          spreadWidth,
+          bookWidth
+        };
+      }
+    }, {
+      kind: "field",
+      key: "htmlDimensionsCacher",
+      value() {
+        return new HTMLDimensionsCacher(this);
+      }
+    }, {
+      kind: "field",
+      key: "smoothZoomer",
+      value() {
+        return new ModeSmoothZoom(this);
+      }
+    }, {
+      kind: "field",
+      key: "ZOOM_FACTOR",
+      value() {
+        return 1.1;
+      }
+    }, {
+      kind: "field",
+      key: "PAGE_THICKNESS_IN",
+      value() {
+        return 0.002;
+      }
+    }, {
+      kind: "method",
+      key: "jumpToIndex",
+      value: (function () {
+        var _jumpToIndex = _asyncToGenerator(function* (index) {
+          var {
+            smooth = true
+          } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          yield this.flipAnimation(index, {
+            animate: smooth
+          });
+        });
+        function jumpToIndex(_x) {
+          return _jumpToIndex.apply(this, arguments);
+        }
+        return jumpToIndex;
+      }())
+    }, {
+      kind: "method",
+      key: "zoomIn",
+      value: function zoomIn() {
+        this.scale *= this.ZOOM_FACTOR;
+      }
+    }, {
+      kind: "method",
+      key: "zoomOut",
+      value: function zoomOut() {
+        this.scale *= 1 / this.ZOOM_FACTOR;
+      }
+    }, {
+      kind: "method",
+      key: "firstUpdated",
+      value: function firstUpdated(changedProps) {
+        _superPropGet(Mode2UpLit, "firstUpdated", this, 3)([changedProps]);
+        this.htmlDimensionsCacher.updateClientSizes();
+        this.smoothZoomer.attach();
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        _superPropGet(Mode2UpLit, "connectedCallback", this, 3)([]);
+        this.htmlDimensionsCacher.attachResizeListener();
+        this.smoothZoomer.attach();
+      }
+    }, {
+      kind: "method",
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        this.htmlDimensionsCacher.detachResizeListener();
+        this.smoothZoomer.detach();
+        _superPropGet(Mode2UpLit, "disconnectedCallback", this, 3)([]);
+      }
+    }, {
+      kind: "method",
+      key: "updated",
+      value: function updated(changedProps) {
+        // this.X is the new value
+        // changedProps.get('X') is the old value
+        if (changedProps.has('book')) {
+          this._leftCoverWidth = this.computePageWidth(this.book.getPage(this.book.pageProgression == 'lr' ? 0 : -1));
+        }
+        if (changedProps.has('visiblePages')) {
+          this.renderedPages = this.computeRenderedPages();
+          this.br.displayedIndices = this.visiblePages.map(p => p.index);
+          this.br.updateFirstIndex(this.br.displayedIndices[0]);
+          this.br._components.navbar.updateNavIndexThrottled();
+        }
+        if (changedProps.has('autoFit')) {
+          if (this.autoFit != 'none') {
+            this.resizeViaAutofit();
+          }
+        }
+        if (changedProps.has('scale')) {
+          var oldVal = changedProps.get('scale');
+          this.recenter();
+          this.smoothZoomer.updateViewportOnZoom(this.scale, oldVal);
+        }
+      }
+    }, {
+      kind: "method",
+      key: "createRenderRoot",
+      value: function createRenderRoot() {
+        // Disable shadow DOM; that would require a huge rejiggering of CSS
+        return this;
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        return html(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      <div class=\"br-mode-2up__book\" @mouseup=", ">\n        ", "\n        ", "\n        ", "\n      </div>"])), this.handlePageClick, this.renderLeafEdges('left'), this.renderedPages.map(p => this.renderPage(p)), this.renderLeafEdges('right'));
+      }
+    }, {
+      kind: "field",
+      key: "createPageContainer",
+      value() {
+        return page => {
+          return this.pageContainerCache[page.index] || (this.pageContainerCache[page.index] =
+          // @ts-ignore I know it's protected, TS! But Mode2Up and BookReader are friends.
+          this.br._createPageContainer(page.index));
+        };
+      }
+    }, {
+      kind: "method",
+      key: "initFirstRender",
+      value: function initFirstRender(startIndex) {
+        var page = this.book.getPage(startIndex);
+        var spread = page.spread;
+        this.visiblePages = (this.book.pageProgression == 'lr' ? [spread.left, spread.right] : [spread.right, spread.left]).filter(p => p);
+        this.htmlDimensionsCacher.updateClientSizes();
+        this.resizeViaAutofit(page);
+        this.initialScale = this.scale;
+      }
+    }, {
+      kind: "field",
+      key: "renderPage",
+      value() {
+        return page => {
+          var wToR = this.coordSpace.worldUnitsToRenderedPixels;
+          var wToV = this.coordSpace.worldUnitsToVisiblePixels;
+          var width = wToR(this.computePageWidth(page));
+          var height = wToR(this.computePageHeight(page));
+          var isVisible = this.visiblePages.map(p => p.index).includes(page.index);
+          var positions = this.computePositions(page.spread.left, page.spread.right);
+          var pageContainerEl = this.createPageContainer(page).update({
+            dimensions: {
+              width,
+              height,
+              top: 0,
+              left: wToR(page.pageSide == 'L' ? positions.pageLeftStart : positions.pageLeftEnd)
+            },
+            reduce: page.width / wToV(this.computePageWidth(page))
+          }).$container[0];
+          pageContainerEl.classList.toggle('BRpage-visible', isVisible);
+          return pageContainerEl;
+        };
+      }
+    }, {
+      kind: "field",
+      key: "renderLeafEdges",
+      value() {
+        return side => {
+          var _this$activeFlip3;
+          if (!this.visiblePages.length) return html(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral([""])));
+          var fullWidthIn = side == 'left' ? this.positions.leafEdgesLeftFullWidth : this.positions.leafEdgesRightFullWidth;
+          if (!fullWidthIn) return html(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral([""])));
+          var wToR = this.coordSpace.worldUnitsToRenderedPixels;
+          var height = wToR(this.computePageHeight(this.visiblePages[0]));
+          var hasMovingPages = ((_this$activeFlip3 = this.activeFlip) === null || _this$activeFlip3 === void 0 ? void 0 : _this$activeFlip3.direction) == side;
+          var leftmostPage = this.book.getPage(this.book.pageProgression == 'lr' ? 0 : this.book.getNumLeafs() - 1);
+          var rightmostPage = this.book.getPage(this.book.pageProgression == 'lr' ? this.book.getNumLeafs() - 1 : 0);
+          var numPagesFlipping = hasMovingPages ? this.activeFlip.pagesFlippingCount : 0;
+          var range = side == 'left' ? [leftmostPage.index, this.pageLeft.goLeft(numPagesFlipping).index] : [this.pageRight.goRight(numPagesFlipping).index, rightmostPage.index];
+          var mainEdgesStyle = {
+            width: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftMainWidth : this.positions.leafEdgesRightMainWidth), "px"),
+            height: "".concat(height, "px"),
+            left: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftStart : this.positions.leafEdgesRightMainStart), "px")
+          };
+          var mainEdges = html(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      <br-leaf-edges\n        leftIndex=", "\n        rightIndex=", "\n        .book=", "\n        .pageClickHandler=", "\n        side=", "\n        class=\"br-mode-2up__leafs br-mode-2up__leafs--", "\"\n        style=", "\n      ></br-leaf-edges>\n    "])), range[0], range[1], this.book, index => this.br.jumpToIndex(index), side, side, styleMap(mainEdgesStyle));
+          if (hasMovingPages) {
+            var width = wToR(side == 'left' ? this.positions.leafEdgesLeftMovingWidth : this.positions.leafEdgesRightMovingWidth);
+            var style = {
+              width: "".concat(width, "px"),
+              height: "".concat(height, "px"),
+              left: "".concat(wToR(side == 'left' ? this.positions.leafEdgesLeftMovingStart : this.positions.leafEdgesRightStart), "px"),
+              pointerEvents: 'none',
+              transformOrigin: "".concat(wToR(side == 'left' ? this.positions.pageLeftWidth : -this.positions.pageRightWidth) + width / 2, "px 0")
+            };
+            var movingEdges = html(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n        <br-leaf-edges\n          leftIndex=", "\n          rightIndex=", "\n          .book=", "\n          side=", "\n          class=\"br-mode-2up__leafs br-mode-2up__leafs--", " br-mode-2up__leafs--flipping\"\n          style=", "\n        ></br-leaf-edges>\n      "])), this.activeFlip.pagesFlipping[0], this.activeFlip.pagesFlipping[1], this.book, side, side, styleMap(style));
+            return side == 'left' ? html(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["", "", ""])), mainEdges, movingEdges) : html(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["", "", ""])), movingEdges, mainEdges);
+          } else {
+            return mainEdges;
+          }
+        };
+      }
+    }, {
+      kind: "method",
+      key: "resizeViaAutofit",
+      value: function resizeViaAutofit() {
+        var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.visiblePages[0];
+        this.scale = this.computeScale(page, this.autoFit);
+      }
+    }, {
+      kind: "method",
+      key: "recenter",
+      value: function recenter() {
+        var page = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.visiblePages[0];
+        var translate = this.computeTranslate(page, this.scale);
+        this.$book.style.transform = "translateX(".concat(translate.x, "px) translateY(").concat(translate.y, "px) scale(").concat(this.scale, ")");
+      }
+    }, {
+      kind: "method",
+      key: "computeRenderedPages",
+      value: function computeRenderedPages() {
+        var _this$visiblePages$, _this$visiblePages$2, _this$visiblePages, _this$visiblePages2;
+        // Also render 2 pages before/after
+        // @ts-ignore TS doesn't understand the filtering out of null values
+        return [(_this$visiblePages$ = this.visiblePages[0]) === null || _this$visiblePages$ === void 0 || (_this$visiblePages$ = _this$visiblePages$.prev) === null || _this$visiblePages$ === void 0 ? void 0 : _this$visiblePages$.prev, (_this$visiblePages$2 = this.visiblePages[0]) === null || _this$visiblePages$2 === void 0 ? void 0 : _this$visiblePages$2.prev, ...this.visiblePages, (_this$visiblePages = this.visiblePages[this.visiblePages.length - 1]) === null || _this$visiblePages === void 0 ? void 0 : _this$visiblePages.next, (_this$visiblePages2 = this.visiblePages[this.visiblePages.length - 1]) === null || _this$visiblePages2 === void 0 || (_this$visiblePages2 = _this$visiblePages2.next) === null || _this$visiblePages2 === void 0 ? void 0 : _this$visiblePages2.next].filter(p => p)
+        // Never render more than 10 pages! Usually means something is wrong
+        .slice(0, 10);
+      }
+    }, {
+      kind: "method",
+      key: "computeScale",
+      value: function computeScale(page, autoFit) {
+        if (!page) return 1;
+        var spread = page.spread;
+        var bookWidth = this.computePositions(spread.left, spread.right).bookWidth;
+        var bookHeight = this.computePageHeight(spread.left || spread.right);
+        var BOOK_PADDING_PX = 10;
+        var curScale = this.scale;
+        this.scale = 1; // Need this temporarily
+        var widthScale = this.coordSpace.renderedPixelsToWorldUnits(this.htmlDimensionsCacher.clientWidth - 2 * BOOK_PADDING_PX) / bookWidth;
+        var heightScale = this.coordSpace.renderedPixelsToWorldUnits(this.htmlDimensionsCacher.clientHeight - 2 * BOOK_PADDING_PX) / bookHeight;
+        this.scale = curScale;
+        var realScale = 1;
+        var scale = realScale;
+        if (autoFit == 'width') {
+          scale = widthScale;
+        } else if (autoFit == 'height') {
+          scale = heightScale;
+        } else if (autoFit == 'auto') {
+          scale = Math.min(widthScale, heightScale);
+        } else if (autoFit == 'none') {
+          scale = this.scale;
+        } else {
+          // Should be impossible
+          throw new Error("Invalid autoFit value: ".concat(autoFit));
+        }
+        return scale;
+      }
+    }, {
+      kind: "method",
+      key: "computeTranslate",
+      value: function computeTranslate(page) {
+        var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : this.scale;
+        if (!page) return {
+          x: 0,
+          y: 0
+        };
+        var spread = page.spread;
+        // Default to real size if it fits, otherwise default to full height
+        var positions = this.computePositions(spread.left, spread.right);
+        var bookWidth = positions.bookWidth;
+        var bookHeight = this.computePageHeight(spread.left || spread.right);
+        var visibleBookWidth = this.coordSpace.worldUnitsToRenderedPixels(bookWidth) * scale;
+        var visibleBookHeight = this.coordSpace.worldUnitsToRenderedPixels(bookHeight) * scale;
+        var leftOffset = this.coordSpace.worldUnitsToRenderedPixels(-positions.leafEdgesLeftStart) * scale;
+        var translateX = (this.htmlDimensionsCacher.clientWidth - visibleBookWidth) / 2 + leftOffset;
+        var translateY = (this.htmlDimensionsCacher.clientHeight - visibleBookHeight) / 2;
+        return {
+          x: Math.max(leftOffset, translateX),
+          y: Math.max(0, translateY)
+        };
+      }
+    }, {
+      kind: "method",
+      key: "flipAnimation",
+      value: (function () {
+        var _flipAnimation = _asyncToGenerator(function* (nextSpread) {
+          var _ref, _curSpread$left$index, _curSpread$left, _nextSpread$left$inde, _nextSpread$left;
+          var {
+            animate = true
+          } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          var curSpread = (_ref = this.pageLeft || this.pageRight) === null || _ref === void 0 ? void 0 : _ref.spread;
+          if (!curSpread) {
+            // Nothings been actually rendered yet! Will be corrected during initFirstRender
+            return;
+          }
+          nextSpread = this.parseNextSpread(nextSpread);
+          if (this.activeFlip || !nextSpread) return;
+          var progression = this.book.pageProgression;
+          var curLeftIndex = (_curSpread$left$index = (_curSpread$left = curSpread.left) === null || _curSpread$left === void 0 ? void 0 : _curSpread$left.index) !== null && _curSpread$left$index !== void 0 ? _curSpread$left$index : progression == 'lr' ? -1 : this.book.getNumLeafs();
+          var nextLeftIndex = (_nextSpread$left$inde = (_nextSpread$left = nextSpread.left) === null || _nextSpread$left === void 0 ? void 0 : _nextSpread$left.index) !== null && _nextSpread$left$inde !== void 0 ? _nextSpread$left$inde : progression == 'lr' ? -1 : this.book.getNumLeafs();
+          if (curLeftIndex == nextLeftIndex) return;
+          var renderedIndices = this.renderedPages.map(p => p.index);
+          /** @type {PageContainer[]} */
+          var nextPageContainers = [];
+          for (var page of [nextSpread.left, nextSpread.right]) {
+            if (!page) continue;
+            nextPageContainers.push(this.createPageContainer(page));
+            if (!renderedIndices.includes(page.index)) {
+              this.renderedPages.push(page);
+            }
+          }
+          var curTranslate = this.computeTranslate(curSpread.left || curSpread.right, this.scale);
+          var idealNextTranslate = this.computeTranslate(nextSpread.left || nextSpread.right, this.scale);
+          var translateDiff = Math.sqrt((idealNextTranslate.x - curTranslate.x) ** 2 + (idealNextTranslate.y - curTranslate.y) ** 2);
+          var nextTranslate = "translate(".concat(idealNextTranslate.x, "px, ").concat(idealNextTranslate.y, "px)");
+          if (translateDiff < 50) {
+            var _this$$book$style$tra;
+            var activeTranslate = (_this$$book$style$tra = this.$book.style.transform.match(/translate\([^)]+\)/)) === null || _this$$book$style$tra === void 0 ? void 0 : _this$$book$style$tra[0];
+            if (activeTranslate) {
+              nextTranslate = activeTranslate;
+            }
+          }
+          var newTransform = "".concat(nextTranslate, " scale(").concat(this.scale, ")");
+          if (animate && 'animate' in Element.prototype) {
+            // This table is used to determine the direction of the flip animation:
+            //    | < | >
+            // lr | L | R
+            // rl | R | L
+            var direction = progression == 'lr' ? nextLeftIndex > curLeftIndex ? 'right' : 'left' : nextLeftIndex > curLeftIndex ? 'left' : 'right';
+            this.activeFlip = {
+              direction,
+              pagesFlipping: [curLeftIndex, nextLeftIndex],
+              pagesFlippingCount: Math.abs(nextLeftIndex - curLeftIndex)
+            };
+            this.classList.add("br-mode-2up--flipping-".concat(direction));
+            this.classList.add("BRpageFlipping");
+
+            // Wait for lit update cycle to finish so that entering pages are rendered
+            this.requestUpdate();
+            yield this.updateComplete;
+            this.visiblePages.map(p => this.pageContainerCache[p.index].$container).forEach($c => $c.addClass('BRpage-exiting'));
+            nextPageContainers.forEach(c => c.$container.addClass('BRpage-entering'));
+
+            /** @type {KeyframeAnimationOptions} */
+            var animationStyle = {
+              duration: this.flipSpeed + this.activeFlip.pagesFlippingCount,
+              easing: 'ease-in',
+              fill: 'none'
+            };
+            var bookCenteringAnimation = this.$book.animate([{
+              transform: newTransform
+            }], animationStyle);
+            var edgeTranslationAnimation = this.$flippingEdges.animate([{
+              transform: "rotateY(0deg)"
+            }, {
+              transform: direction == 'left' ? "rotateY(-180deg)" : "rotateY(180deg)"
+            }], animationStyle);
+            var exitingPageAnimation = direction == 'left' ? this.querySelector('.BRpage-exiting[data-side=L]').animate([{
+              transform: "rotateY(0deg)"
+            }, {
+              transform: "rotateY(180deg)"
+            }], animationStyle) : this.querySelector('.BRpage-exiting[data-side=R]').animate([{
+              transform: "rotateY(0deg)"
+            }, {
+              transform: "rotateY(-180deg)"
+            }], animationStyle);
+            var enteringPageAnimation = direction == 'left' ? this.querySelector('.BRpage-entering[data-side=R]').animate([{
+              transform: "rotateY(-180deg)"
+            }, {
+              transform: "rotateY(0deg)"
+            }], animationStyle) : this.querySelector('.BRpage-entering[data-side=L]').animate([{
+              transform: "rotateY(180deg)"
+            }, {
+              transform: "rotateY(0deg)"
+            }], animationStyle);
+            bookCenteringAnimation.play();
+            edgeTranslationAnimation.play();
+            exitingPageAnimation.play();
+            enteringPageAnimation.play();
+            nextPageContainers.forEach(c => c.$container.addClass('BRpage-visible'));
+            yield Promise.race([promisifyEvent(bookCenteringAnimation, 'finish'), promisifyEvent(edgeTranslationAnimation, 'finish'), promisifyEvent(exitingPageAnimation, 'finish'), promisifyEvent(enteringPageAnimation, 'finish')]);
+            this.classList.remove("br-mode-2up--flipping-".concat(direction));
+            this.classList.remove("BRpageFlipping");
+            this.visiblePages.map(p => this.pageContainerCache[p.index].$container).forEach($c => $c.removeClass('BRpage-exiting BRpage-visible'));
+            nextPageContainers.forEach(c => c.$container.removeClass('BRpage-entering'));
+            this.activeFlip = null;
+          }
+          this.$book.style.transform = newTransform;
+          this.visiblePages = (progression == 'lr' ? [nextSpread.left, nextSpread.right] : [nextSpread.right, nextSpread.left]).filter(x => x);
+        });
+        function flipAnimation(_x2) {
+          return _flipAnimation.apply(this, arguments);
+        }
+        return flipAnimation;
+      }())
+    }, {
+      kind: "method",
+      key: "parseNextSpread",
+      value: function parseNextSpread(nextSpread) {
+        if (nextSpread == 'next') {
+          nextSpread = this.book.pageProgression == 'lr' ? 'right' : 'left';
+        } else if (nextSpread == 'prev') {
+          nextSpread = this.book.pageProgression == 'lr' ? 'left' : 'right';
+        }
+        var curSpread = (this.pageLeft || this.pageRight).spread;
+        if (nextSpread == 'left') {
+          var _curSpread$left2;
+          nextSpread = (_curSpread$left2 = curSpread.left) === null || _curSpread$left2 === void 0 || (_curSpread$left2 = _curSpread$left2.findLeft({
+            combineConsecutiveUnviewables: true
+          })) === null || _curSpread$left2 === void 0 ? void 0 : _curSpread$left2.spread;
+        } else if (nextSpread == 'right') {
+          var _curSpread$right;
+          nextSpread = (_curSpread$right = curSpread.right) === null || _curSpread$right === void 0 || (_curSpread$right = _curSpread$right.findRight({
+            combineConsecutiveUnviewables: true
+          })) === null || _curSpread$right === void 0 ? void 0 : _curSpread$right.spread;
+        }
+        if (typeof nextSpread == 'number') {
+          nextSpread = this.book.getPage(nextSpread).spread;
+        }
+        if (nextSpread instanceof PageModel) {
+          nextSpread = nextSpread.spread;
+        }
+        return nextSpread;
+      }
+    }, {
+      kind: "field",
+      key: "handlePageClick",
+      value() {
+        return ev => {
+          // right click
+          if (ev.which == 3 && this.br.protected) {
+            return false;
+          }
+          if (ev.which != 1) return;
+          var $page = $(ev.target).closest('.BRpagecontainer');
+          if (!$page.length) return;
+          if ($page.data('side') == 'L') {
+            this.flipAnimation('left');
+          } else if ($page.data('side') == 'R') {
+            this.flipAnimation('right');
+          }
+        };
+      }
+    }]
+  };
+}, LitElement);
+export var LeafEdges = _decorate(null, function (_initialize2, _LitElement2) {
+  class LeafEdges extends _LitElement2 {
+    constructor() {
+      super(...arguments);
+      _initialize2(this);
+    }
+  }
+  return {
+    F: LeafEdges,
+    d: [{
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "leftIndex",
+      value() {
+        return 0;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: Number
+      })],
+      key: "rightIndex",
+      value() {
+        return 0;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        type: String
+      })],
+      key: "side",
+      value() {
+        return 'left';
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false
+      })],
+      key: "book",
+      value() {
+        return null;
+      }
+    }, {
+      kind: "field",
+      decorators: [property({
+        attribute: false,
+        type: Function
+      })],
+      key: "pageClickHandler",
+      value() {
+        return null;
+      }
+    }, {
+      kind: "field",
+      decorators: [query('.br-leaf-edges__bar')],
+      key: "$hoverBar",
+      value: void 0
+    }, {
+      kind: "field",
+      decorators: [query('.br-leaf-edges__label')],
+      key: "$hoverLabel",
+      value: void 0
+    }, {
+      kind: "get",
+      key: "pageWidthPercent",
+      value: /** @type {'left' | 'right'} */
+
+      /** @type {BookModel} */
+
+      /** @type {(index: PageIndex) => void} */
+
+      function value() {
+        return 100 * 1 / (this.rightIndex - this.leftIndex + 1);
+      }
+    }, {
+      kind: "method",
+      key: "render",
+      value: function render() {
+        return html(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n      <div\n        class=\"br-leaf-edges__bar\"\n        style=\"", "\"\n      ></div>\n      <div class=\"br-leaf-edges__label\">Page</div>"])), styleMap({
+          width: "".concat(this.pageWidthPercent, "%")
+        }));
+      }
+    }, {
+      kind: "method",
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        _superPropGet(LeafEdges, "connectedCallback", this, 3)([]);
+        this.addEventListener('mouseenter', this.onMouseEnter);
+        this.addEventListener('mouseleave', this.onMouseLeave);
+        this.addEventListener('click', this.onClick);
+      }
+    }, {
+      kind: "method",
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        _superPropGet(LeafEdges, "disconnectedCallback", this, 3)([]);
+        this.addEventListener('mouseenter', this.onMouseEnter);
+        this.removeEventListener('mousemove', this.onMouseMove);
+        this.removeEventListener('mouseleave', this.onMouseLeave);
+      }
+
+      /** @override */
+    }, {
+      kind: "method",
+      key: "createRenderRoot",
+      value: function createRenderRoot() {
+        // Disable shadow DOM; that would require a huge rejiggering of CSS
+        return this;
+      }
+
+      /**
+       * @param {MouseEvent} e
+       */
+    }, {
+      kind: "field",
+      key: "onMouseEnter",
+      value() {
+        return e => {
+          this.addEventListener('mousemove', this.onMouseMove);
+          this.$hoverBar.style.display = 'block';
+          this.$hoverLabel.style.display = 'block';
+        };
+      }
+    }, {
+      kind: "field",
+      key: "onMouseMove",
+      value() {
+        return e => {
+          this.$hoverBar.style.left = "".concat(e.offsetX, "px");
+          if (this.side == 'right') {
+            this.$hoverLabel.style.left = "".concat(e.offsetX, "px");
+          } else {
+            this.$hoverLabel.style.right = "".concat(this.offsetWidth - e.offsetX, "px");
+          }
+          this.$hoverLabel.style.top = "".concat(e.offsetY, "px");
+          var index = this.mouseEventToPageIndex(e);
+          this.$hoverLabel.textContent = this.book.getPageName(index);
+        };
+      }
+    }, {
+      kind: "field",
+      key: "onMouseLeave",
+      value() {
+        return e => {
+          this.removeEventListener('mousemove', this.onMouseMove);
+          this.$hoverBar.style.display = 'none';
+          this.$hoverLabel.style.display = 'none';
+        };
+      }
+    }, {
+      kind: "field",
+      key: "onClick",
+      value() {
+        return e => {
+          this.pageClickHandler(this.mouseEventToPageIndex(e));
+        };
+      }
+    }, {
+      kind: "method",
+      key: "mouseEventToPageIndex",
+      value:
+      /**
+       * @param {MouseEvent} e
+       */
+      /**
+       * @param {MouseEvent} e
+       */
+      /**
+       * @param {MouseEvent} e
+       */
+      /**
+       * @param {MouseEvent} e
+       * @returns {PageIndex}
+       */
+      function mouseEventToPageIndex(e) {
+        return Math.floor(this.leftIndex + e.offsetX / this.offsetWidth * (this.rightIndex - this.leftIndex + 1));
+      }
+    }]
+  };
+}, LitElement);
+customElements.define('br-mode-2up', Mode2UpLit);
+customElements.define('br-leaf-edges', LeafEdges);