@zinejs/core 0.9.1 → 0.9.2

package/dist/{cssRenderer-Deskm2ND.js → cssRenderer-CTaM4cAj.js}

@@ -36,58 +36,63 @@ var i = class {
 	#d = 0;
 	#f = 0;
 	#p = 0;
-	#m = !1;
+	#m = "contain";
 	#h = 0;
+	#g = !1;
+	#_ = 0;
 	mount(e) {
 		let t = e.ownerDocument;
-		return this.#e = e, this.#t = t.createElement("div"), this.#t.className = "zine-clip", this.#t.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;", this.#n = t.createElement("div"), this.#n.className = "zine-viewport", this.#n.style.cssText = "position:absolute;inset:0;transform-origin:0 0;", this.#r = t.createElement("div"), this.#r.className = "zine-book", this.#r.style.cssText = "position:absolute;inset:0;perspective:2000px;transform-style:preserve-3d;", this.#i = this.#x(t, "zine-page-left", "left:0;"), this.#a = this.#x(t, "zine-page-right", "right:0;"), this.#o = t.createElement("div"), this.#o.className = "zine-leaf", this.#o.style.cssText = "position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;display:none;", this.#s = t.createElement("canvas"), this.#s.className = "zine-leaf-front", this.#s.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;", this.#c = t.createElement("canvas"), this.#c.className = "zine-leaf-back", this.#c.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);", this.#l = t.createElement("div"), this.#l.className = "zine-leaf-shadow", this.#l.style.cssText = "position:absolute;inset:0;opacity:0;pointer-events:none;", this.#l.style.background = r("forward"), this.#o.append(this.#s, this.#c, this.#l), this.#r.append(this.#i, this.#a, this.#o), this.#n.append(this.#r), this.#t.append(this.#n), e.append(this.#t), Promise.resolve();
+		return this.#e = e, this.#t = t.createElement("div"), this.#t.className = "zine-clip", this.#t.style.cssText = "position:relative;width:100%;height:100%;overflow:hidden;", this.#n = t.createElement("div"), this.#n.className = "zine-viewport", this.#n.style.cssText = "position:absolute;inset:0;transform-origin:0 0;", this.#r = t.createElement("div"), this.#r.className = "zine-book", this.#r.style.cssText = "position:absolute;inset:0;perspective:2000px;transform-style:preserve-3d;", this.#i = this.#w(t, "zine-page-left", "left:0;"), this.#a = this.#w(t, "zine-page-right", "right:0;"), this.#o = t.createElement("div"), this.#o.className = "zine-leaf", this.#o.style.cssText = "position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;display:none;", this.#s = t.createElement("canvas"), this.#s.className = "zine-leaf-front", this.#s.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;", this.#c = t.createElement("canvas"), this.#c.className = "zine-leaf-back", this.#c.style.cssText = "position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);", this.#l = t.createElement("div"), this.#l.className = "zine-leaf-shadow", this.#l.style.cssText = "position:absolute;inset:0;opacity:0;pointer-events:none;", this.#l.style.background = r("forward"), this.#o.append(this.#s, this.#c, this.#l), this.#r.append(this.#i, this.#a, this.#o), this.#n.append(this.#r), this.#t.append(this.#n), e.append(this.#t), Promise.resolve();
 	}
 	destroy() {
 		this.#t?.remove(), this.#e = null;
 	}
 	renderSpread(e, t, r) {
-		r?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#S(this.#i, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#S(this.#i, t.left), this.#S(this.#a, t.right)), this.#m = r?.fill ?? !1, this.#h = this.#m ? 0 : n(t), this.#_(t), this.#v(), this.#g(this.#h), this.#o.style.display = "none", this.#o.style.transform = "", this.#l.style.opacity = "0";
+		r?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#T(this.#i, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#T(this.#i, t.left), this.#T(this.#a, t.right)), this.#g = r?.fill ?? !1, r?.fit && (this.#m = r.fit), this.#_ = this.#g ? 0 : n(t), this.#y(t), this.#x(), this.#v(this.#_), this.#o.style.display = "none", this.#o.style.transform = "", this.#l.style.opacity = "0";
 	}
 	beginFlip(e, t, i, a) {
-		a?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#o.style.width = "100%", this.#o.style.left = "0", this.#o.style.transformOrigin = i === "forward" ? "left center" : "right center", this.#S(this.#i, t.right ?? t.left), this.#S(this.#s, e.right ?? e.left), this.#S(this.#c, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#o.style.width = "50%", i === "forward" ? (this.#S(this.#i, e.left), this.#S(this.#a, t.right), this.#S(this.#s, e.right), this.#S(this.#c, t.left), this.#o.style.left = "50%", this.#o.style.transformOrigin = "left center") : (this.#S(this.#a, e.right), this.#S(this.#i, t.left), this.#S(this.#s, e.left), this.#S(this.#c, t.right), this.#o.style.left = "0", this.#o.style.transformOrigin = "right center")), this.#u = a?.fill ? 0 : n(e), this.#d = a?.fill ? 0 : n(t), this.#m = a?.fill ?? !1, this.#_(t), this.#v(), this.#g(this.#u), this.#o.style.display = "block", this.#o.style.transform = "rotateY(0deg)", this.#l.style.background = r(i), this.#l.style.opacity = "0";
+		a?.fill ? (this.#i.style.width = "100%", this.#a.style.display = "none", this.#o.style.width = "100%", this.#o.style.left = "0", this.#o.style.transformOrigin = i === "forward" ? "left center" : "right center", this.#T(this.#i, t.right ?? t.left), this.#T(this.#s, e.right ?? e.left), this.#T(this.#c, t.right ?? t.left)) : (this.#i.style.width = "50%", this.#a.style.display = "", this.#o.style.width = "50%", i === "forward" ? (this.#T(this.#i, e.left), this.#T(this.#a, t.right), this.#T(this.#s, e.right), this.#T(this.#c, t.left), this.#o.style.left = "50%", this.#o.style.transformOrigin = "left center") : (this.#T(this.#a, e.right), this.#T(this.#i, t.left), this.#T(this.#s, e.left), this.#T(this.#c, t.right), this.#o.style.left = "0", this.#o.style.transformOrigin = "right center")), this.#u = a?.fill ? 0 : n(e), this.#d = a?.fill ? 0 : n(t), this.#g = a?.fill ?? !1, a?.fit && (this.#m = a.fit), this.#y(t), this.#x(), this.#v(this.#u), this.#o.style.display = "block", this.#o.style.transform = "rotateY(0deg)", this.#l.style.background = r(i), this.#l.style.opacity = "0";
 	}
 	setFlipProgress(n, r) {
 		let i = e(n), a = i.angle * t;
-		this.#g(this.#u + (this.#d - this.#u) * n), this.#o.style.display = "block", this.#o.style.transform = `rotateY(${r === "forward" ? -a : a}deg)`, this.#l.style.opacity = String(i.shadowAlpha);
+		this.#v(this.#u + (this.#d - this.#u) * n), this.#o.style.display = "block", this.#o.style.transform = `rotateY(${r === "forward" ? -a : a}deg)`, this.#l.style.opacity = String(i.shadowAlpha);
 	}
-	#g(e) {
-		let t = e * (this.#p / 4);
+	#v(e) {
+		let t = e * (this.#h / 4);
 		this.#r.style.transform = t ? `translateX(${t}px)` : "";
 	}
-	#_(e) {
+	#y(e) {
 		let t = e.left ?? e.right;
-		t && t.height && (this.#f = t.width / t.height);
+		t && t.height && (this.#f = t.width / t.height, this.#p === 0 && (this.#p = this.#f));
 	}
-	#v() {
-		let e = this.#y();
-		this.#p = e.width;
+	#b() {
+		return this.#m === "fill" && this.#p > 0 ? this.#p : this.#f;
+	}
+	#x() {
+		let e = this.#S();
+		this.#h = e.width;
 		let t = this.#r.style;
 		t.inset = "auto", t.left = `${e.x}px`, t.top = `${e.y}px`, t.width = `${e.width}px`, t.height = `${e.height}px`;
 	}
-	#y() {
-		let e = this.#e?.clientWidth ?? 0, t = this.#e?.clientHeight ?? 0;
-		if (this.#f <= 0 || e <= 0 || t <= 0) return {
+	#S() {
+		let e = this.#e?.clientWidth ?? 0, t = this.#e?.clientHeight ?? 0, n = this.#b();
+		if (n <= 0 || e <= 0 || t <= 0) return {
 			x: 0,
 			y: 0,
 			width: e,
 			height: t
 		};
-		let n = (this.#m ? 1 : 2) * this.#f, r = e, i = t;
-		return n > e / t ? i = e / n : r = t * n, {
-			x: (e - r) / 2,
-			y: (t - i) / 2,
-			width: r,
-			height: i
+		let r = (this.#g ? 1 : 2) * n, i = e, a = t;
+		return r > e / t ? a = e / r : i = t * r, {
+			x: (e - i) / 2,
+			y: (t - a) / 2,
+			width: i,
+			height: a
 		};
 	}
-	#b() {
-		let e = this.#y();
-		return this.#h === 0 ? e : {
+	#C() {
+		let e = this.#S();
+		return this.#_ === 0 ? e : {
 			x: e.x + e.width / 4,
 			y: e.y,
 			width: e.width / 2,
@@ -98,7 +103,7 @@ var i = class {
 		this.#n.style.transform = `translate(${t}px, ${n}px) scale(${e})`;
 	}
 	measure() {
-		let e = this.#e, t = e?.clientWidth ?? 0, n = e?.clientHeight ?? 0, r = this.#f > 0, i = r ? this.#y() : void 0, a = r ? this.#b() : void 0, o = a ? (e) => ({
+		let e = this.#e, t = e?.clientWidth ?? 0, n = e?.clientHeight ?? 0, r = this.#f > 0, i = r ? this.#S() : void 0, a = r ? this.#C() : void 0, o = a ? (e) => ({
 			x: a.x * e,
 			y: a.y * e,
 			width: a.width * e,
@@ -111,14 +116,15 @@ var i = class {
 			pageHeight: n,
 			book: i,
 			content: a,
-			screenAt: o
+			screenAt: o,
+			containerAspect: this.#p > 0 ? (this.#g ? 1 : 2) * this.#p : void 0
 		};
 	}
-	#x(e, t, n) {
+	#w(e, t, n) {
 		let r = e.createElement("canvas");
 		return r.className = t, r.style.cssText = `position:absolute;top:0;width:50%;height:100%;${n}`, r;
 	}
-	#S(e, t) {
+	#T(e, t) {
 		let n = e.getContext("2d");
 		if (t === null) {
 			n?.clearRect(0, 0, e.width, e.height);
@@ -130,4 +136,4 @@ var i = class {
 //#endregion
 export { i as CssRenderer };
 
-//# sourceMappingURL=cssRenderer-Deskm2ND.js.map
+//# sourceMappingURL=cssRenderer-CTaM4cAj.js.map

package/dist/cssRenderer-CTaM4cAj.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cssRenderer-CTaM4cAj.js","names":["#container","#clip","#viewport","#book","#pageLeft","#makeCanvas","#pageRight","#leaf","#leafFront","#leafBack","#leafShadow","#paint","#fill","#fit","#contentShift","#trackAspect","#layoutBook","#applyShift","#fromShiftUnit","#toShiftUnit","#bookW","#pageAspect","#docAspect","#bookBox","#drawAspect","#contentBox"],"sources":["../src/geometry/flipProgressToPose.ts","../src/renderer/cssRenderer.ts"],"sourcesContent":["export interface FlipPose {\n  /** Turning-page rotation about the spine, radians: 0 (flat/open) → π (fully turned). */\n  angle: number;\n  /** Mesh cylinder-wrap curl, 0..1 — flat at the ends, peaks edge-on at t=0.5. CSS renderer ignores it. */\n  curl: number;\n  /** Fold-shadow intensity, 0..1 — peaks edge-on at t=0.5. */\n  shadowAlpha: number;\n}\n\n/**\n * Map a 0→1 flip progress to a renderer-neutral fold pose.\n *\n * Linear in `t` on purpose — easing belongs to the animator that produces `t`,\n * so seeking to a fixed progress (e.g. the 0/.25/.5/.75/1 visual-regression stops)\n * is deterministic. The CSS renderer consumes `angle` as a spine `rotateY`; the\n * WebGL2 renderer additionally bends its mesh by `curl`.\n */\nexport function flipProgressToPose(t: number): FlipPose {\n  const clamped = t < 0 ? 0 : t > 1 ? 1 : t;\n  const arc = Math.sin(clamped * Math.PI);\n  return {\n    angle: clamped * Math.PI,\n    curl: arc,\n    shadowAlpha: arc,\n  };\n}\n","import { flipProgressToPose } from '../geometry/flipProgressToPose';\nimport type { Spread } from '../engine/spread';\nimport type {\n  FlipDirection,\n  LayoutMetrics,\n  PageContent,\n  Renderer,\n  RenderOptions,\n  SpreadContent,\n} from './types';\n\nconst RAD_TO_DEG = 180 / Math.PI;\n\n/** How far to shift a spread to centre a lone page, in units of a quarter container width:\n *  -1 = only a right page (cover), +1 = only a left page (back), 0 = a full spread. */\nfunction shiftUnit(content: SpreadContent): number {\n  const lone = (content.left === null) !== (content.right === null);\n  return lone ? (content.right !== null ? -1 : 1) : 0;\n}\n\n/**\n * Layered gradients painted over the turning leaf to fake paper depth on the flat\n * fold: a crease shadow at the spine, a soft curve sheen, and a free-edge shade.\n * The spine is the leaf's pivot edge — left for a forward flip, right for backward.\n */\nfunction foldOverlay(direction: FlipDirection): string {\n  const dir = direction === 'forward' ? 'to right' : 'to left';\n  return [\n    `linear-gradient(${dir}, rgba(0,0,0,0.6), rgba(0,0,0,0.15) 40%, rgba(0,0,0,0) 60%)`,\n    `linear-gradient(${dir}, transparent 40%, rgba(255,255,255,0.32) 66%, transparent 90%)`,\n    `linear-gradient(${dir}, transparent 66%, rgba(0,0,0,0.35))`,\n  ].join(',');\n}\n\n/**\n * Baseline renderer: a 2-panel CSS-3D fold. Runs on every browser, no GPU. Pages\n * are <canvas> elements; the turning leaf (front + back faces, backface-hidden)\n * rotates about the spine driven by flipProgressToPose(), with a gradient shadow\n * overlay for depth. `beginFlip` stages the surfaces; `setFlipProgress` animates.\n */\nexport class CssRenderer implements Renderer {\n  #container: HTMLElement | null = null;\n  #clip!: HTMLDivElement;\n  #viewport!: HTMLDivElement;\n  #book!: HTMLDivElement;\n  #pageLeft!: HTMLCanvasElement;\n  #pageRight!: HTMLCanvasElement;\n  #leaf!: HTMLDivElement;\n  #leafFront!: HTMLCanvasElement;\n  #leafBack!: HTMLCanvasElement;\n  #leafShadow!: HTMLDivElement;\n  // Lone-page centering, interpolated across a flip (see the WebGL renderer).\n  #fromShiftUnit = 0;\n  #toShiftUnit = 0;\n  // Book aspect fit: the spread is letterboxed to the page aspect (see the WebGL renderer).\n  #pageAspect = 0;\n  // First page's aspect, latched: the container is sized to this document-wide so off-size pages\n  // do not resize it. `contain` letterboxes them within it; `fill` stretches them to it.\n  #docAspect = 0;\n  #fit: 'contain' | 'fill' = 'contain';\n  #bookW = 0;\n  #fill = false;\n  #contentShift = 0; // shiftUnit of the current static spread (nonzero = lone page, centered)\n\n  mount(container: HTMLElement): Promise<void> {\n    const doc = container.ownerDocument;\n    this.#container = container;\n\n    // Fixed-size clip box; NOT transformed, so zoom can't scale the crop region.\n    this.#clip = doc.createElement('div');\n    this.#clip.className = 'zine-clip';\n    this.#clip.style.cssText = 'position:relative;width:100%;height:100%;overflow:hidden;';\n\n    // Transform target for zoom/pan; lives inside the clip.\n    this.#viewport = doc.createElement('div');\n    this.#viewport.className = 'zine-viewport';\n    this.#viewport.style.cssText = 'position:absolute;inset:0;transform-origin:0 0;';\n\n    this.#book = doc.createElement('div');\n    this.#book.className = 'zine-book';\n    this.#book.style.cssText =\n      'position:absolute;inset:0;perspective:2000px;transform-style:preserve-3d;';\n\n    this.#pageLeft = this.#makeCanvas(doc, 'zine-page-left', 'left:0;');\n    this.#pageRight = this.#makeCanvas(doc, 'zine-page-right', 'right:0;');\n\n    this.#leaf = doc.createElement('div');\n    this.#leaf.className = 'zine-leaf';\n    this.#leaf.style.cssText =\n      'position:absolute;top:0;width:50%;height:100%;transform-style:preserve-3d;display:none;';\n\n    this.#leafFront = doc.createElement('canvas');\n    this.#leafFront.className = 'zine-leaf-front';\n    this.#leafFront.style.cssText =\n      'position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;';\n\n    this.#leafBack = doc.createElement('canvas');\n    this.#leafBack.className = 'zine-leaf-back';\n    this.#leafBack.style.cssText =\n      'position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;transform:rotateY(180deg);';\n\n    this.#leafShadow = doc.createElement('div');\n    this.#leafShadow.className = 'zine-leaf-shadow';\n    this.#leafShadow.style.cssText = 'position:absolute;inset:0;opacity:0;pointer-events:none;';\n    this.#leafShadow.style.background = foldOverlay('forward'); // default; beginFlip sets per direction\n\n    this.#leaf.append(this.#leafFront, this.#leafBack, this.#leafShadow);\n    this.#book.append(this.#pageLeft, this.#pageRight, this.#leaf);\n    this.#viewport.append(this.#book);\n    this.#clip.append(this.#viewport);\n    container.append(this.#clip);\n\n    return Promise.resolve();\n  }\n\n  destroy(): void {\n    this.#clip?.remove();\n    this.#container = null;\n  }\n\n  renderSpread(_spread: Spread, content: SpreadContent, options?: RenderOptions): void {\n    if (options?.fill) {\n      // Single-page mode: the lone page fills the container; hide the other panel.\n      this.#pageLeft.style.width = '100%';\n      this.#pageRight.style.display = 'none';\n      this.#paint(this.#pageLeft, content.right ?? content.left);\n    } else {\n      this.#pageLeft.style.width = '50%';\n      this.#pageRight.style.display = '';\n      this.#paint(this.#pageLeft, content.left);\n      this.#paint(this.#pageRight, content.right);\n    }\n    this.#fill = options?.fill ?? false;\n    if (options?.fit) this.#fit = options.fit;\n    this.#contentShift = this.#fill ? 0 : shiftUnit(content);\n    this.#trackAspect(content);\n    this.#layoutBook();\n    this.#applyShift(this.#contentShift);\n    // A fresh spread cancels any in-progress flip.\n    this.#leaf.style.display = 'none';\n    this.#leaf.style.transform = '';\n    this.#leafShadow.style.opacity = '0';\n  }\n\n  beginFlip(\n    from: SpreadContent,\n    to: SpreadContent,\n    direction: FlipDirection,\n    options?: RenderOptions,\n  ): void {\n    if (options?.fill) {\n      // Single-page: a full-width leaf turns about one edge, revealing `to` underneath.\n      this.#pageLeft.style.width = '100%';\n      this.#pageRight.style.display = 'none';\n      this.#leaf.style.width = '100%';\n      this.#leaf.style.left = '0';\n      this.#leaf.style.transformOrigin = direction === 'forward' ? 'left center' : 'right center';\n      this.#paint(this.#pageLeft, to.right ?? to.left);\n      this.#paint(this.#leafFront, from.right ?? from.left);\n      this.#paint(this.#leafBack, to.right ?? to.left);\n    } else {\n      this.#pageLeft.style.width = '50%';\n      this.#pageRight.style.display = '';\n      this.#leaf.style.width = '50%';\n      if (direction === 'forward') {\n        // Right page lifts and swings left about the spine. Left stays; right reveals `to`.\n        this.#paint(this.#pageLeft, from.left);\n        this.#paint(this.#pageRight, to.right);\n        this.#paint(this.#leafFront, from.right);\n        this.#paint(this.#leafBack, to.left);\n        this.#leaf.style.left = '50%';\n        this.#leaf.style.transformOrigin = 'left center';\n      } else {\n        // Left page swings right about its right edge. Right stays; left reveals `to`.\n        this.#paint(this.#pageRight, from.right);\n        this.#paint(this.#pageLeft, to.left);\n        this.#paint(this.#leafFront, from.left);\n        this.#paint(this.#leafBack, to.right);\n        this.#leaf.style.left = '0';\n        this.#leaf.style.transformOrigin = 'right center';\n      }\n    }\n    this.#fromShiftUnit = options?.fill ? 0 : shiftUnit(from);\n    this.#toShiftUnit = options?.fill ? 0 : shiftUnit(to);\n    this.#fill = options?.fill ?? false;\n    if (options?.fit) this.#fit = options.fit;\n    this.#trackAspect(to);\n    this.#layoutBook();\n    this.#applyShift(this.#fromShiftUnit);\n    this.#leaf.style.display = 'block';\n    this.#leaf.style.transform = 'rotateY(0deg)';\n    this.#leafShadow.style.background = foldOverlay(direction);\n    this.#leafShadow.style.opacity = '0';\n  }\n\n  setFlipProgress(t: number, direction: FlipDirection): void {\n    const pose = flipProgressToPose(t);\n    const deg = pose.angle * RAD_TO_DEG;\n    this.#applyShift(this.#fromShiftUnit + (this.#toShiftUnit - this.#fromShiftUnit) * t);\n    this.#leaf.style.display = 'block';\n    this.#leaf.style.transform = `rotateY(${direction === 'forward' ? -deg : deg}deg)`;\n    this.#leafShadow.style.opacity = String(pose.shadowAlpha);\n  }\n\n  #applyShift(unit: number): void {\n    const px = unit * (this.#bookW / 4);\n    this.#book.style.transform = px ? `translateX(${px}px)` : '';\n  }\n\n  /** Remember the current spread's page aspect (for drawing) and latch the first page's aspect (for\n   *  the container). The container follows #docAspect so off-size pages do not resize it. */\n  #trackAspect(content: SpreadContent): void {\n    const p = content.left ?? content.right;\n    if (p && p.height) {\n      this.#pageAspect = p.width / p.height;\n      if (this.#docAspect === 0) this.#docAspect = this.#pageAspect;\n    }\n  }\n\n  /** Aspect the book is drawn at: the current page under `contain` (letterboxed within the stable\n   *  container), or the document aspect under `fill` (fills it, stretching off-size pages). */\n  #drawAspect(): number {\n    return this.#fit === 'fill' && this.#docAspect > 0 ? this.#docAspect : this.#pageAspect;\n  }\n\n  /** Letterbox the 2-page book to the page aspect, centered in the container, so pages\n   *  fill their halves without stretching; the surround is the container background. */\n  #layoutBook(): void {\n    const b = this.#bookBox();\n    this.#bookW = b.width;\n    const s = this.#book.style;\n    s.inset = 'auto';\n    s.left = `${b.x}px`;\n    s.top = `${b.y}px`;\n    s.width = `${b.width}px`;\n    s.height = `${b.height}px`;\n  }\n\n  /** The fitted book rect in container px (letterbox aware) — a stable 2-page area. */\n  #bookBox(): { x: number; y: number; width: number; height: number } {\n    const cw = this.#container?.clientWidth ?? 0;\n    const ch = this.#container?.clientHeight ?? 0;\n    const aspect = this.#drawAspect();\n    if (aspect <= 0 || cw <= 0 || ch <= 0) return { x: 0, y: 0, width: cw, height: ch };\n    const ba = (this.#fill ? 1 : 2) * aspect;\n    let bw = cw;\n    let bh = ch;\n    if (ba > cw / ch) bh = cw / ba;\n    else bw = ch * ba;\n    return { x: (cw - bw) / 2, y: (ch - bh) / 2, width: bw, height: bh };\n  }\n\n  /** Where the current spread is actually painted: the book, or its centered half for a lone\n   *  page (mirrors #applyShift). This is what the engine hit-tests against. */\n  #contentBox(): { x: number; y: number; width: number; height: number } {\n    const b = this.#bookBox();\n    return this.#contentShift !== 0 ? { x: b.x + b.width / 4, y: b.y, width: b.width / 2, height: b.height } : b;\n  }\n\n  setViewTransform(scale: number, x: number, y: number): void {\n    this.#viewport.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;\n  }\n\n  measure(): LayoutMetrics {\n    const el = this.#container;\n    const w = el?.clientWidth ?? 0;\n    const h = el?.clientHeight ?? 0;\n    const known = this.#pageAspect > 0;\n    const book = known ? this.#bookBox() : undefined;\n    const content = known ? this.#contentBox() : undefined;\n    // The shift lives on #book, inside the scaled #viewport, so unlike the WebGL2 renderer it\n    // magnifies along with everything else and the whole box simply scales.\n    const screenAt = content\n      ? (scale: number): { x: number; y: number; width: number; height: number } => ({\n          x: content.x * scale,\n          y: content.y * scale,\n          width: content.width * scale,\n          height: content.height * scale,\n        })\n      : undefined;\n    return {\n      containerWidth: w,\n      containerHeight: h,\n      pageWidth: w / 2,\n      pageHeight: h,\n      book,\n      content,\n      screenAt,\n      containerAspect: this.#docAspect > 0 ? (this.#fill ? 1 : 2) * this.#docAspect : undefined,\n    };\n  }\n\n  #makeCanvas(doc: Document, className: string, extra: string): HTMLCanvasElement {\n    const c = doc.createElement('canvas');\n    c.className = className;\n    c.style.cssText = `position:absolute;top:0;width:50%;height:100%;${extra}`;\n    return c;\n  }\n\n  #paint(canvas: HTMLCanvasElement, content: PageContent | null): void {\n    const ctx = canvas.getContext('2d');\n    if (content === null) {\n      ctx?.clearRect(0, 0, canvas.width, canvas.height);\n      return;\n    }\n    canvas.width = content.width;\n    canvas.height = content.height;\n    ctx?.drawImage(content, 0, 0);\n  }\n}\n"],"mappings":"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"}

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export { Zine } from './zine';
 export type { ZineOptions, ZoomOptions, SearchHit } from './zine';
+export { defaultStrings } from './strings';
+export type { ZineStrings } from './strings';
 export { defineControl, getControl, DEFAULT_ITEMS } from './controls/registry';
 export type { ControlContext, ControlDef, ControlItem, ControlsColorScheme, ControlsOptions, ControlsPosition, } from './controls/types';
 export { ImageSource } from './source/imageSource';