@panelwave/player 1.3.0 → 1.5.0

package/fesm2022/panelwave-player.mjs

@@ -2191,6 +2191,7 @@ const DEFAULT_BALLOON_CONFIG = {
     cornerRadius: 0.5,
     maxWidth: 120,
     maxHeight: 80,
+    textFit: 'grow',
     fontFamily: "'Ames Italic', sans-serif",
     fontSize: 12,
     strokeWidth: 2,
@@ -2238,6 +2239,7 @@ function balloonConfigToRenderOptions(config) {
     return {
         maxWidth: config.maxWidth,
         maxHeight: config.maxHeight,
+        textFit: config.textFit === 'fixed' ? 'fixed' : 'grow',
         cornerRadius: type === 'rectangle' || type === 'narrator' ? 0 : config.cornerRadius,
         sharpCorners: type === 'narrator',
         isThought: type === 'thought',
@@ -2363,6 +2365,82 @@ function tailTipToTailConfig(bounds, tipX, tipY, cornerRadius) {
     const length = Math.round(Math.max(0, tipDist - edgeDist));
     return { position, length };
 }
+/**
+ * Edges the authored box touches (within `eps`) on the panel, plus the edges
+ * a caption type is glued to by definition: the cut Panel-Top variants always
+ * keep the top (the cut edge IS the panel border), the corner variants their side.
+ */
+function grownBodyGlue(authored, panel, balloonType, eps) {
+    const glue = {};
+    if (panel) {
+        const e = eps ?? Math.max(4, 0.02 * Math.min(panel.width, panel.height));
+        if (authored.x <= panel.x + e)
+            glue.left = true;
+        else if (authored.x + authored.width >= panel.x + panel.width - e)
+            glue.right = true;
+        if (authored.y <= panel.y + e)
+            glue.top = true;
+        else if (authored.y + authored.height >= panel.y + panel.height - e)
+            glue.bottom = true;
+    }
+    if (balloonType === 'cutTop' || balloonType === 'cutTopLeft' || balloonType === 'cutTopRight') {
+        glue.top = true;
+        glue.bottom = false;
+        if (balloonType === 'cutTopLeft') {
+            glue.left = true;
+            glue.right = false;
+        }
+        if (balloonType === 'cutTopRight') {
+            glue.right = true;
+            glue.left = false;
+        }
+    }
+    return glue;
+}
+/**
+ * Rect of a grown body (`grown` size) so that
+ * 1. a tail balloon keeps its tail tip where the authored box put it (the
+ *    body moves away from the speaker, the tail keeps angle and length);
+ * 2. glued edges stay on the panel border (overrides 1 on that axis);
+ * 3. a tailless, unglued balloon keeps its centre;
+ * 4. the body stays inside `panel` when one is given (centred on an axis it
+ *    cannot fit) — this is the only rule that may move the tail tip.
+ * Returns the authored rect itself when the size did not change.
+ */
+function placeGrownBody(authored, grown, tail, cornerRadius, panel, glue = {}) {
+    if (Math.abs(grown.width - authored.width) < 0.5 && Math.abs(grown.height - authored.height) < 0.5) {
+        return { ...authored };
+    }
+    const cx = authored.x + authored.width / 2;
+    const cy = authored.y + authored.height / 2;
+    let x = cx - grown.width / 2;
+    let y = cy - grown.height / 2;
+    if (tail) {
+        const tipAuthored = tailConfigToTip({ cx, cy, width: authored.width, height: authored.height }, tail, cornerRadius);
+        const tipGrown = tailConfigToTip({ cx, cy, width: grown.width, height: grown.height }, tail, cornerRadius);
+        x += tipAuthored.x - tipGrown.x;
+        y += tipAuthored.y - tipGrown.y;
+    }
+    if (glue.left)
+        x = authored.x;
+    else if (glue.right)
+        x = authored.x + authored.width - grown.width;
+    if (glue.top)
+        y = authored.y;
+    else if (glue.bottom)
+        y = authored.y + authored.height - grown.height;
+    if (panel) {
+        if (grown.width >= panel.width)
+            x = panel.x + (panel.width - grown.width) / 2;
+        else
+            x = Math.min(panel.x + panel.width - grown.width, Math.max(panel.x, x));
+        if (grown.height >= panel.height)
+            y = panel.y + (panel.height - grown.height) / 2;
+        else
+            y = Math.min(panel.y + panel.height - grown.height, Math.max(panel.y, y));
+    }
+    return { x, y, width: grown.width, height: grown.height };
+}
 
 // SYNCED FROM panelwave-cms/apps/cms-frontend/src/app/core/utils/comic-balloon.ts — DO NOT EDIT HERE.
 // Edit the CMS copy, then run in panelwave-cms: npm run sync:balloon
@@ -2375,6 +2453,17 @@ function tailTipToTailConfig(bounds, tipX, tipY, cornerRadius) {
  * reader/preview render balloons exactly like the editor — edit here, then
  * run `npm run sync:balloon` in panelwave-cms.
  */
+/**
+ * Largest proportional growth factor per dimension (2 = each side may double).
+ * Text that still does not fit at this width is given its natural height.
+ */
+const BALLOON_GROWTH_MAX = 2;
+/**
+ * Safety margin on the measured text height when deciding whether a grown
+ * body fits: the editor canvas wraps text with Canvas2D `measureText`, the
+ * engine with DOM layout, and the two can differ by a hair at a line break.
+ */
+const GROWTH_SLACK = 1.02;
 class ComicBalloon {
     constructor(container, options = {}) {
         this.svg = null;
@@ -2391,6 +2480,7 @@ class ComicBalloon {
             // maxHeight (default 0). Only a missing/non-finite value falls back to 140.
             maxWidth: typeof options.maxWidth === 'number' && Number.isFinite(options.maxWidth) ? options.maxWidth : 140,
             maxHeight: options.maxHeight || 0,
+            textFit: options.textFit === 'fixed' ? 'fixed' : 'grow',
             padding: options.padding || { top: 14, right: 18, bottom: 14, left: 18 },
             strokeWidth: options.strokeWidth || 2,
             strokeColor: options.strokeColor || '#000',
@@ -2424,9 +2514,7 @@ class ComicBalloon {
         this.svg.setAttribute('class', 'comic-balloon-svg');
         // Use the same padding as the canvas drawBalloonText (padding = 14 on each side)
         const textPadding = 14;
-        const availableTextWidth = this.options.maxWidth > 0
-            ? this.options.maxWidth - textPadding * 2
-            : 140 - textPadding * 2;
+        const availableWidthFor = (bodyWidth) => bodyWidth > 0 ? bodyWidth - textPadding * 2 : 140 - textPadding * 2;
         // Text styles shared by the measuring element and the rendered text, so
         // both wrap identically. Everything that inherits is pinned: the rendered
         // text inherits from the host page (player shell, editor), the measuring
@@ -2444,30 +2532,81 @@ class ComicBalloon {
       white-space: pre-wrap;
       word-wrap: break-word;
     `;
-        // Create a temporary text element to measure
+        // Create a temporary text element to measure (re-used for every probe of
+        // the growth search below, so one DOM node serves all measurements).
         const tempDiv = document.createElement('div');
         tempDiv.style.cssText = `
       position: absolute;
       visibility: hidden;
-      width: ${availableTextWidth}px;
+      width: ${availableWidthFor(this.options.maxWidth)}px;
       ${textStyle}
     `;
         tempDiv.innerHTML = text;
         document.body.appendChild(tempDiv);
-        // Measure text
-        const textWidth = Math.min(tempDiv.scrollWidth, availableTextWidth);
-        const textHeight = tempDiv.scrollHeight;
-        document.body.removeChild(tempDiv);
-        // Calculate balloon dimensions
         let extraPad = 0;
         if (this.options.isShout)
             extraPad = Math.round(this.options.fontSize * 0.4);
         if (this.options.isThought)
             extraPad = Math.round(this.options.fontSize * 0.4);
-        const naturalWidth = textWidth + this.options.padding.left + this.options.padding.right + extraPad * 2;
-        const naturalHeight = textHeight + this.options.padding.top + this.options.padding.bottom + extraPad * 2;
-        const balloonWidth = this.options.maxWidth > 0 ? this.options.maxWidth : naturalWidth;
-        const balloonHeight = this.options.maxHeight > 0 ? this.options.maxHeight : naturalHeight;
+        const padW = this.options.padding.left + this.options.padding.right + extraPad * 2;
+        const padH = this.options.padding.top + this.options.padding.bottom + extraPad * 2;
+        /** Text block size when wrapped inside a body of the given width. */
+        const measureAt = (bodyWidth) => {
+            const available = availableWidthFor(bodyWidth);
+            tempDiv.style.width = `${available}px`;
+            return { textWidth: Math.min(tempDiv.scrollWidth, available), textHeight: tempDiv.scrollHeight };
+        };
+        /** Body height the text needs inside a body of the given width. */
+        const naturalHeightAt = (bodyWidth) => measureAt(bodyWidth).textHeight + padH;
+        // Measure at the authored width
+        let { textWidth, textHeight } = measureAt(this.options.maxWidth);
+        // Calculate balloon dimensions
+        const naturalWidth = textWidth + padW;
+        let naturalHeight = textHeight + padH;
+        const authoredWidth = this.options.maxWidth > 0 ? this.options.maxWidth : naturalWidth;
+        const authoredHeight = this.options.maxHeight > 0 ? this.options.maxHeight : naturalHeight;
+        let balloonWidth = authoredWidth;
+        let balloonHeight = authoredHeight;
+        let growth = 1;
+        // Auto-grow: the authored size is the floor. When the text needs more
+        // room, grow proportionally (the shape keeps its aspect ratio; a wider
+        // body takes fewer lines) up to BALLOON_GROWTH_MAX, else keep that width
+        // and take the natural height — the text always ends up inside the body.
+        if (this.options.textFit !== 'fixed'
+            && this.options.maxWidth > 0 && this.options.maxHeight > 0
+            && naturalHeight * GROWTH_SLACK > authoredHeight + 0.5) {
+            // Ovals are narrower at the top and bottom lines than at the middle,
+            // so a grown oval gets half a line height of vertical room (a quarter
+            // line above and below the block); rectangles need none. Growth is
+            // proportional, so this also widens the body a little.
+            const isOval = this.options.isThought || this.options.isShout || this.options.cornerRadius > 0;
+            const ovalRoom = isOval ? 0.5 * this.options.fontSize * this.options.lineHeight : 0;
+            const fits = (s) => naturalHeightAt(authoredWidth * s) * GROWTH_SLACK + ovalRoom <= authoredHeight * s + 0.5;
+            if (fits(BALLOON_GROWTH_MAX)) {
+                // Binary search for the smallest factor that fits (monotone: wider = fewer lines).
+                let lo = 1;
+                let hi = BALLOON_GROWTH_MAX;
+                for (let i = 0; i < 6; i++) {
+                    const mid = (lo + hi) / 2;
+                    if (fits(mid))
+                        hi = mid;
+                    else
+                        lo = mid;
+                }
+                growth = hi;
+                balloonWidth = Math.ceil(authoredWidth * growth);
+                balloonHeight = Math.ceil(authoredHeight * growth);
+            }
+            else {
+                growth = BALLOON_GROWTH_MAX;
+                balloonWidth = Math.ceil(authoredWidth * growth);
+                balloonHeight = Math.ceil(naturalHeightAt(balloonWidth) * GROWTH_SLACK + ovalRoom);
+            }
+            ({ textWidth, textHeight } = measureAt(balloonWidth));
+            naturalHeight = textHeight + padH;
+        }
+        document.body.removeChild(tempDiv);
+        const grown = balloonWidth > authoredWidth + 0.5 || balloonHeight > authoredHeight + 0.5;
         const cx = balloonWidth / 2;
         const cy = balloonHeight / 2;
         const rx = balloonWidth / 2;
@@ -2644,6 +2783,10 @@ class ComicBalloon {
         return {
             width: balloonWidth,
             height: balloonHeight,
+            authoredWidth,
+            authoredHeight,
+            grown,
+            growth,
             textOverflows: this.options.maxHeight > 0 && naturalHeight > balloonHeight + 0.5,
             svg: this.svg,
             balloon: this,
@@ -11807,6 +11950,14 @@ class SpeechBubblesComponent {
         this.bubbleAudioPlay = new EventEmitter();
         /** Rendered balloon containers, keyed by bubble ID */
         this.renderedBalloons = new Map();
+        /**
+         * Font specs ("15px 'Ames Italic', sans-serif") whose loading this overlay
+         * already requested. Web fonts load lazily on first use, so the first
+         * render may have measured with a fallback face while document.fonts.ready
+         * had long resolved (no font was in flight yet). Each new spec is loaded
+         * explicitly and the balloons re-render once it arrives.
+         */
+        this.fontsRequested = new Set();
         /** ResizeObserver for container size tracking */
         this.resizeObserver = null;
         this.initialized = false;
@@ -11938,11 +12089,13 @@ class SpeechBubblesComponent {
             return;
         if (this.containerWidth <= 0 || this.containerHeight <= 0)
             return;
+        const fontSpecs = new Set();
         for (const bubble of this.bubbles) {
             const text = this.getLocalizedText(bubble);
             if (!text)
                 continue;
             const config = this.resolveEffectiveConfig(bubble);
+            fontSpecs.add(`${config.fontSize}px ${config.fontFamily}`);
             const pos = this.computeBubblePosition(bubble);
             // Create wrapper div for positioning
             const wrapper = document.createElement('div');
@@ -11990,17 +12143,46 @@ class SpeechBubblesComponent {
                 }
                 const visualW = svgWidth * scale;
                 const visualH = svgHeight * scale;
-                // Anchor at the shape box's center — but edges the authored box
-                // touches stay glued to the panel border (narrator / Panel-Top
-                // caption boxes keep sitting exactly on the border even though the
-                // visual size no longer equals the stored box).
+                // Auto-grow (schema 1.8 textFit): when the text needed more room than
+                // the authored size, the engine grew the body. Place the grown body
+                // so the tail tip stays on the speaker (the body moves away from it)
+                // — the same rule the CMS editor applies; glued caption edges and the
+                // panel clamp below still win. Offsets are in balloon px, scaled.
+                let grownOffsetX = 0;
+                let grownOffsetY = 0;
+                if (result.grown) {
+                    const authoredRect = {
+                        x: -result.authoredWidth / 2, y: -result.authoredHeight / 2,
+                        width: result.authoredWidth, height: result.authoredHeight,
+                    };
+                    const tail = tailOpts && tailOpts.position !== undefined
+                        ? { position: tailOpts.position, length: tailOpts.length }
+                        : null;
+                    const placed = placeGrownBody(authoredRect, { width: result.width, height: result.height }, tail, Number(renderOpts['cornerRadius']) || 0, null);
+                    grownOffsetX = (placed.x + placed.width / 2) * scale;
+                    grownOffsetY = (placed.y + placed.height / 2) * scale;
+                    wrapper.setAttribute('data-grown', 'true');
+                }
+                // The stored box is the balloon BODY (the editor stores the body, not
+                // the tail). The SVG's viewBox also holds the tail and the stroke
+                // padding, so its centre is not the body's: offset of the body centre
+                // from the SVG centre, in balloon px (the body starts at viewBox 0,0).
+                const vb = (result.svg?.getAttribute('viewBox') ?? '').split(/\s+/).map(Number);
+                const hasViewBox = vb.length === 4 && vb.every((v) => Number.isFinite(v));
+                const bodyOffsetX = hasViewBox ? (-vb[0] + result.width / 2) - svgWidth / 2 : 0;
+                const bodyOffsetY = hasViewBox ? (-vb[1] + result.height / 2) - svgHeight / 2 : 0;
+                // Anchor the body at the shape box's center (shifted for a grown
+                // body) — but edges the authored box touches stay glued to the panel
+                // border (narrator / Panel-Top caption boxes keep sitting exactly on
+                // the border even though the visual size no longer equals the stored
+                // box). centerX/centerY are where the SVG's centre goes.
                 const boxLeft = (bubble.shape?.x ?? 0) * this.containerWidth;
                 const boxTop = (bubble.shape?.y ?? 0) * this.containerHeight;
                 const boxRight = boxLeft + (bubble.shape?.w ?? 0) * this.containerWidth;
                 const boxBottom = boxTop + (bubble.shape?.h ?? 0) * this.containerHeight;
                 const eps = Math.max(4, 0.02 * Math.min(this.containerWidth, this.containerHeight));
-                let centerX = pos.left;
-                let centerY = pos.top;
+                let centerX = pos.left + grownOffsetX - bodyOffsetX * scale;
+                let centerY = pos.top + grownOffsetY - bodyOffsetY * scale;
                 if (boxLeft <= eps)
                     centerX = visualW / 2;
                 else if (boxRight >= this.containerWidth - eps)
@@ -12049,6 +12231,45 @@ class SpeechBubblesComponent {
                 console.warn(`[pw-speech-bubbles] Failed to render balloon "${bubble.id}":`, e);
             }
         }
+        this.ensureFontsLoaded(fontSpecs);
+    }
+    /**
+     * Request every font spec the balloons use that was not requested before;
+     * re-render once a face that was not yet available arrives, so balloons
+     * measured with a fallback face are laid out again with the real one.
+     */
+    ensureFontsLoaded(specs) {
+        if (typeof document === 'undefined' || !document.fonts?.load)
+            return;
+        const pending = [];
+        for (const spec of specs) {
+            if (this.fontsRequested.has(spec))
+                continue;
+            this.fontsRequested.add(spec);
+            let available = false;
+            try {
+                available = document.fonts.check(spec);
+            }
+            catch {
+                available = false;
+            }
+            if (available)
+                continue;
+            try {
+                pending.push(document.fonts.load(spec));
+            }
+            catch {
+                // Unparseable spec (custom family string): nothing to wait for.
+            }
+        }
+        if (pending.length === 0)
+            return;
+        Promise.allSettled(pending).then((results) => {
+            const loadedAny = results.some((r) => r.status === 'fulfilled' && Array.isArray(r.value) && r.value.length > 0);
+            if (loadedAny && this.initialized) {
+                this.renderAllBalloons();
+            }
+        });
     }
     /**
      * Handle bubble click (called from template for any fallback interaction)
@@ -12100,6 +12321,11 @@ class HotspotsOverlayComponent {
          * Hotspots of the current panel (manifest shape)
          */
         this.hotspots = [];
+        /**
+         * The panel's speech bubbles: a choice hotspot whose label is already
+         * lettered as a bubble keeps its invisible area under `display: auto`.
+         */
+        this.bubbles = [];
         /**
          * Current locale for label resolution
          */
@@ -12149,8 +12375,17 @@ class HotspotsOverlayComponent {
         const goTos = (this.hotspots ?? []).filter((h) => h.action?.type === 'goTo');
         const targets = new Set(goTos.map((h) => h.action.to));
         const isChoice = new Set(targets.size > 1 ? goTos.map((h) => h.id) : []);
+        // A choice whose label is already lettered as a speech bubble of the panel
+        // (an authored "choice" caption sitting on the hotspot) stays an invisible
+        // area under auto — the balloon IS the button; drawing the label again
+        // would show the text twice.
+        const bubbleTexts = new Set((this.bubbles ?? [])
+            .map((b) => this.resolveLocalized(b.text).trim().toLowerCase())
+            .filter((t) => t.length > 0));
+        const letteredAsBubble = (h) => bubbleTexts.has(this.resolveLocalized(h.label).trim().toLowerCase());
         this.choiceIds = new Set((this.hotspots ?? [])
-            .filter((h) => h.display === 'button' || ((h.display ?? 'auto') === 'auto' && isChoice.has(h.id)))
+            .filter((h) => h.display === 'button'
+            || ((h.display ?? 'auto') === 'auto' && isChoice.has(h.id) && !letteredAsBubble(h)))
             .map((h) => h.id));
     }
     /** The visible button text of a choice hotspot (its label), or '' for plain areas. */
@@ -12264,13 +12499,15 @@ class HotspotsOverlayComponent {
         return Math.min(1, Math.max(0, v));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HotspotsOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: HotspotsOverlayComponent, isStandalone: true, selector: "pw-hotspots-overlay", inputs: { hotspots: "hotspots", locale: "locale", containerWidth: "containerWidth", containerHeight: "containerHeight", context: "context", interactive: "interactive", showIndicators: "showIndicators" }, outputs: { hotspotActivate: "hotspotActivate" }, usesOnChanges: true, ngImport: i0, template: "<svg\n  class=\"hotspots-svg\"\n  [class.non-interactive]=\"!interactive\"\n  [attr.viewBox]=\"'0 0 ' + containerWidth + ' ' + containerHeight\"\n  preserveAspectRatio=\"none\"\n  aria-hidden=\"false\"\n>\n  @for (h of visibleHotspots; track h.id) {\n    <g\n      class=\"hotspot-shape\"\n      [class.choice]=\"choiceIds.has(h.id)\"\n      [class.indicator]=\"showIndicators && !choiceIds.has(h.id)\"\n      [attr.role]=\"interactive ? 'button' : null\"\n      [attr.tabindex]=\"interactive ? 0 : null\"\n      [attr.aria-label]=\"resolveLabel(h)\"\n      (click)=\"onShapeClick(h, $event)\"\n      (keydown)=\"onKeyDown(h, $event)\"\n    >\n      @switch (h.shape.type) {\n        @case ('rect') {\n          <rect\n            [attr.x]=\"rectAttrs($any(h.shape)).x\"\n            [attr.y]=\"rectAttrs($any(h.shape)).y\"\n            [attr.width]=\"rectAttrs($any(h.shape)).width\"\n            [attr.height]=\"rectAttrs($any(h.shape)).height\"\n            rx=\"6\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"circleAttrs($any(h.shape)).cx\"\n            [attr.cy]=\"circleAttrs($any(h.shape)).cy\"\n            [attr.r]=\"circleAttrs($any(h.shape)).r\"\n          />\n        }\n        @case ('polygon') {\n          <polygon [attr.points]=\"polygonPoints($any(h.shape))\" />\n        }\n      }\n      @if (choiceText(h); as text) {\n        <!-- A choice: its label is the button text (decorative; the g carries the accessible name). -->\n        <foreignObject\n          class=\"hotspot-label-box\"\n          [attr.x]=\"boundsOf(h.shape).x\"\n          [attr.y]=\"boundsOf(h.shape).y\"\n          [attr.width]=\"boundsOf(h.shape).width\"\n          [attr.height]=\"boundsOf(h.shape).height\"\n          aria-hidden=\"true\">\n          <xhtml:div class=\"hotspot-label\" [style.font-size.px]=\"choiceFontSize(h)\">{{ text }}</xhtml:div>\n        </foreignObject>\n      }\n    </g>\n  }\n</svg>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.hotspots-svg{width:100%;height:100%;display:block}.hotspot-shape rect,.hotspot-shape circle,.hotspot-shape polygon{fill:#fff0;stroke:transparent;stroke-width:2;pointer-events:auto;cursor:pointer}.hotspots-svg.non-interactive .hotspot-shape rect,.hotspots-svg.non-interactive .hotspot-shape circle,.hotspots-svg.non-interactive .hotspot-shape polygon{pointer-events:none;cursor:default}.hotspot-shape:hover rect,.hotspot-shape:focus-visible rect,.hotspot-shape:hover circle,.hotspot-shape:focus-visible circle,.hotspot-shape:hover polygon,.hotspot-shape:focus-visible polygon{stroke:#ffffffd9;fill:#ffffff14}.hotspot-shape:focus{outline:none}.hotspot-shape.choice rect,.hotspot-shape.choice circle,.hotspot-shape.choice polygon{fill:#0a1114b8;stroke:#ffffffd9;stroke-width:1.5}.hotspot-shape.choice:hover rect,.hotspot-shape.choice:focus-visible rect,.hotspot-shape.choice:hover circle,.hotspot-shape.choice:focus-visible circle,.hotspot-shape.choice:hover polygon,.hotspot-shape.choice:focus-visible polygon{fill:#0a1114e0;stroke:#fff;stroke-width:2.5}.hotspot-label-box{pointer-events:none;overflow:visible}.hotspot-label{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 .6em;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;line-height:1.15;text-align:center;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.6)}.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:hotspot-pulse 2.4s ease-in-out infinite}@keyframes hotspot-pulse{0%,to{stroke:#fff0}50%{stroke:#ffffff73}}@media (prefers-reduced-motion: reduce){.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: HotspotsOverlayComponent, isStandalone: true, selector: "pw-hotspots-overlay", inputs: { hotspots: "hotspots", bubbles: "bubbles", locale: "locale", containerWidth: "containerWidth", containerHeight: "containerHeight", context: "context", interactive: "interactive", showIndicators: "showIndicators" }, outputs: { hotspotActivate: "hotspotActivate" }, usesOnChanges: true, ngImport: i0, template: "<svg\n  class=\"hotspots-svg\"\n  [class.non-interactive]=\"!interactive\"\n  [attr.viewBox]=\"'0 0 ' + containerWidth + ' ' + containerHeight\"\n  preserveAspectRatio=\"none\"\n  aria-hidden=\"false\"\n>\n  @for (h of visibleHotspots; track h.id) {\n    <g\n      class=\"hotspot-shape\"\n      [class.choice]=\"choiceIds.has(h.id)\"\n      [class.indicator]=\"showIndicators && !choiceIds.has(h.id)\"\n      [attr.role]=\"interactive ? 'button' : null\"\n      [attr.tabindex]=\"interactive ? 0 : null\"\n      [attr.aria-label]=\"resolveLabel(h)\"\n      (click)=\"onShapeClick(h, $event)\"\n      (keydown)=\"onKeyDown(h, $event)\"\n    >\n      @switch (h.shape.type) {\n        @case ('rect') {\n          <rect\n            [attr.x]=\"rectAttrs($any(h.shape)).x\"\n            [attr.y]=\"rectAttrs($any(h.shape)).y\"\n            [attr.width]=\"rectAttrs($any(h.shape)).width\"\n            [attr.height]=\"rectAttrs($any(h.shape)).height\"\n            rx=\"6\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"circleAttrs($any(h.shape)).cx\"\n            [attr.cy]=\"circleAttrs($any(h.shape)).cy\"\n            [attr.r]=\"circleAttrs($any(h.shape)).r\"\n          />\n        }\n        @case ('polygon') {\n          <polygon [attr.points]=\"polygonPoints($any(h.shape))\" />\n        }\n      }\n      @if (choiceText(h); as text) {\n        <!-- A choice: its label is the button text (decorative; the g carries the accessible name). -->\n        <foreignObject\n          class=\"hotspot-label-box\"\n          [attr.x]=\"boundsOf(h.shape).x\"\n          [attr.y]=\"boundsOf(h.shape).y\"\n          [attr.width]=\"boundsOf(h.shape).width\"\n          [attr.height]=\"boundsOf(h.shape).height\"\n          aria-hidden=\"true\">\n          <xhtml:div class=\"hotspot-label\" [style.font-size.px]=\"choiceFontSize(h)\">{{ text }}</xhtml:div>\n        </foreignObject>\n      }\n    </g>\n  }\n</svg>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.hotspots-svg{width:100%;height:100%;display:block}.hotspot-shape rect,.hotspot-shape circle,.hotspot-shape polygon{fill:#fff0;stroke:transparent;stroke-width:2;pointer-events:auto;cursor:pointer}.hotspots-svg.non-interactive .hotspot-shape rect,.hotspots-svg.non-interactive .hotspot-shape circle,.hotspots-svg.non-interactive .hotspot-shape polygon{pointer-events:none;cursor:default}.hotspot-shape:hover rect,.hotspot-shape:focus-visible rect,.hotspot-shape:hover circle,.hotspot-shape:focus-visible circle,.hotspot-shape:hover polygon,.hotspot-shape:focus-visible polygon{stroke:#ffffffd9;fill:#ffffff14}.hotspot-shape:focus{outline:none}.hotspot-shape.choice rect,.hotspot-shape.choice circle,.hotspot-shape.choice polygon{fill:#0a1114b8;stroke:#ffffffd9;stroke-width:1.5}.hotspot-shape.choice:hover rect,.hotspot-shape.choice:focus-visible rect,.hotspot-shape.choice:hover circle,.hotspot-shape.choice:focus-visible circle,.hotspot-shape.choice:hover polygon,.hotspot-shape.choice:focus-visible polygon{fill:#0a1114e0;stroke:#fff;stroke-width:2.5}.hotspot-label-box{pointer-events:none;overflow:visible}.hotspot-label{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 .6em;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;line-height:1.15;text-align:center;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.6)}.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:hotspot-pulse 2.4s ease-in-out infinite}@keyframes hotspot-pulse{0%,to{stroke:#fff0}50%{stroke:#ffffff73}}@media (prefers-reduced-motion: reduce){.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:none}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: HotspotsOverlayComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-hotspots-overlay', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  class=\"hotspots-svg\"\n  [class.non-interactive]=\"!interactive\"\n  [attr.viewBox]=\"'0 0 ' + containerWidth + ' ' + containerHeight\"\n  preserveAspectRatio=\"none\"\n  aria-hidden=\"false\"\n>\n  @for (h of visibleHotspots; track h.id) {\n    <g\n      class=\"hotspot-shape\"\n      [class.choice]=\"choiceIds.has(h.id)\"\n      [class.indicator]=\"showIndicators && !choiceIds.has(h.id)\"\n      [attr.role]=\"interactive ? 'button' : null\"\n      [attr.tabindex]=\"interactive ? 0 : null\"\n      [attr.aria-label]=\"resolveLabel(h)\"\n      (click)=\"onShapeClick(h, $event)\"\n      (keydown)=\"onKeyDown(h, $event)\"\n    >\n      @switch (h.shape.type) {\n        @case ('rect') {\n          <rect\n            [attr.x]=\"rectAttrs($any(h.shape)).x\"\n            [attr.y]=\"rectAttrs($any(h.shape)).y\"\n            [attr.width]=\"rectAttrs($any(h.shape)).width\"\n            [attr.height]=\"rectAttrs($any(h.shape)).height\"\n            rx=\"6\"\n          />\n        }\n        @case ('circle') {\n          <circle\n            [attr.cx]=\"circleAttrs($any(h.shape)).cx\"\n            [attr.cy]=\"circleAttrs($any(h.shape)).cy\"\n            [attr.r]=\"circleAttrs($any(h.shape)).r\"\n          />\n        }\n        @case ('polygon') {\n          <polygon [attr.points]=\"polygonPoints($any(h.shape))\" />\n        }\n      }\n      @if (choiceText(h); as text) {\n        <!-- A choice: its label is the button text (decorative; the g carries the accessible name). -->\n        <foreignObject\n          class=\"hotspot-label-box\"\n          [attr.x]=\"boundsOf(h.shape).x\"\n          [attr.y]=\"boundsOf(h.shape).y\"\n          [attr.width]=\"boundsOf(h.shape).width\"\n          [attr.height]=\"boundsOf(h.shape).height\"\n          aria-hidden=\"true\">\n          <xhtml:div class=\"hotspot-label\" [style.font-size.px]=\"choiceFontSize(h)\">{{ text }}</xhtml:div>\n        </foreignObject>\n      }\n    </g>\n  }\n</svg>\n", styles: [":host{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:15}.hotspots-svg{width:100%;height:100%;display:block}.hotspot-shape rect,.hotspot-shape circle,.hotspot-shape polygon{fill:#fff0;stroke:transparent;stroke-width:2;pointer-events:auto;cursor:pointer}.hotspots-svg.non-interactive .hotspot-shape rect,.hotspots-svg.non-interactive .hotspot-shape circle,.hotspots-svg.non-interactive .hotspot-shape polygon{pointer-events:none;cursor:default}.hotspot-shape:hover rect,.hotspot-shape:focus-visible rect,.hotspot-shape:hover circle,.hotspot-shape:focus-visible circle,.hotspot-shape:hover polygon,.hotspot-shape:focus-visible polygon{stroke:#ffffffd9;fill:#ffffff14}.hotspot-shape:focus{outline:none}.hotspot-shape.choice rect,.hotspot-shape.choice circle,.hotspot-shape.choice polygon{fill:#0a1114b8;stroke:#ffffffd9;stroke-width:1.5}.hotspot-shape.choice:hover rect,.hotspot-shape.choice:focus-visible rect,.hotspot-shape.choice:hover circle,.hotspot-shape.choice:focus-visible circle,.hotspot-shape.choice:hover polygon,.hotspot-shape.choice:focus-visible polygon{fill:#0a1114e0;stroke:#fff;stroke-width:2.5}.hotspot-label-box{pointer-events:none;overflow:visible}.hotspot-label{box-sizing:border-box;width:100%;height:100%;display:flex;align-items:center;justify-content:center;padding:0 .6em;color:#fff;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-weight:600;line-height:1.15;text-align:center;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,.6)}.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:hotspot-pulse 2.4s ease-in-out infinite}@keyframes hotspot-pulse{0%,to{stroke:#fff0}50%{stroke:#ffffff73}}@media (prefers-reduced-motion: reduce){.hotspot-shape.indicator rect,.hotspot-shape.indicator circle,.hotspot-shape.indicator polygon{animation:none}}\n"] }]
         }], propDecorators: { hotspots: [{
                 type: Input
+            }], bubbles: [{
+                type: Input
             }], locale: [{
                 type: Input
             }], containerWidth: [{
@@ -12620,6 +12857,63 @@ class ViewportComponent {
          */
         this.focus = NO_FOCUS_TRANSFORM;
         this.focusFrame = null;
+        /**
+         * Panel-view box: the largest box of the panel's artwork aspect that fits
+         * the viewport, so the panel fills the screen and speech bubbles (normalised
+         * to the panel) land on the artwork. Null before the first measurement
+         * (the stylesheet's default box applies).
+         */
+        this.panelBox = null;
+    }
+    /**
+     * Aspect ratio (w / h) of the current panel's artwork: its background
+     * image's largest variant, else the first image or video asset with known
+     * dimensions, else 16:9 — the same reference the CMS editor sizes its
+     * panel-view content rect from.
+     */
+    get panelAspect() {
+        const layers = this.panel?.layers ?? [];
+        const candidates = [
+            ...layers.filter((l) => (l.z ?? 0) === 0 && l.kind === 'image'),
+            ...layers.filter((l) => l.kind === 'image' || l.kind === 'video'),
+        ];
+        for (const layer of candidates) {
+            const assetId = layer.assetId;
+            if (!assetId)
+                continue;
+            const asset = this.manifestService.getAsset(assetId);
+            let w = 0;
+            let h = 0;
+            for (const v of asset?.variants ?? []) {
+                if ((v.w ?? 0) > w && (v.h ?? 0) > 0) {
+                    w = v.w ?? 0;
+                    h = v.h ?? 0;
+                }
+            }
+            if (!(w > 0 && h > 0) && (asset?.width ?? 0) > 0 && (asset?.height ?? 0) > 0) {
+                w = asset.width;
+                h = asset.height;
+            }
+            if (w > 0 && h > 0)
+                return w / h;
+        }
+        return 16 / 9;
+    }
+    /** Largest box of `aspect` inside a viewport (0 when the viewport is unmeasured). */
+    static fitBox(viewportWidth, viewportHeight, aspect) {
+        if (!(viewportWidth > 0) || !(viewportHeight > 0) || !(aspect > 0))
+            return null;
+        const width = Math.min(viewportWidth, viewportHeight * aspect);
+        return { width: Math.round(width), height: Math.round(width / aspect) };
+    }
+    /**
+     * Page view shows a panel's whole artwork in its box, as the editor does;
+     * the placement's visible area (vx/vy/vw/vh) only crops on compact screens
+     * (phones), where the page's panels run edge to edge.
+     */
+    isCompactHost() {
+        const width = this.elementRef.nativeElement.getBoundingClientRect().width;
+        return width > 0 && width < COMPACT_PAGE_WIDTH;
     }
     /** Recompute the focus placement once the current panel is laid out. */
     scheduleFocusUpdate() {
@@ -12637,18 +12931,39 @@ class ViewportComponent {
     /** Measure viewport + panel box and place the panel on its focus rect. */
     updateFocusTransform() {
         let next = NO_FOCUS_TRANSFORM;
-        if (this.viewMode === 'panel' && this.panel?.formatViews) {
+        let changed = false;
+        if (this.viewMode === 'panel' && this.panel) {
             const host = this.elementRef.nativeElement;
             const viewport = host.querySelector('.viewport-container') ?? host;
-            const box = host.querySelector('.t-frame .panel-container');
-            if (box) {
-                const rect = pickFocusRect(this.panel.formatViews, viewport.clientWidth, viewport.clientHeight);
-                next = focusTransform(box.offsetWidth, box.offsetHeight, viewport.clientWidth, viewport.clientHeight, rect);
+            // The panel fills the viewport at its artwork's aspect. On a compact
+            // screen (phone) with a focus rect, the panel is enlarged so that the
+            // rect fills the screen instead — a larger image part on a small
+            // screen — and the crop is centred on the rect below.
+            const aspect = this.panelAspect;
+            const rect = this.panel.formatViews && this.isCompactHost()
+                ? pickFocusRect(this.panel.formatViews, viewport.clientWidth, viewport.clientHeight)
+                : null;
+            const box = rect && rect.w > 0 && rect.h > 0
+                ? ViewportComponent.fitBox(viewport.clientWidth / rect.w, viewport.clientHeight / rect.h, aspect)
+                : ViewportComponent.fitBox(viewport.clientWidth, viewport.clientHeight, aspect);
+            if (box && (box.width !== this.panelBox?.width || box.height !== this.panelBox?.height)) {
+                this.panelBox = box;
+                changed = true;
+            }
+            if (rect && box) {
+                next = focusTransform(box.width, box.height, viewport.clientWidth, viewport.clientHeight, rect);
             }
         }
         if (next.offsetX !== this.focus.offsetX || next.offsetY !== this.focus.offsetY || next.scale !== this.focus.scale) {
             this.focus = next;
+            changed = true;
+        }
+        if (changed) {
             this.cdr.markForCheck();
+            // Bubble/hotspot overlays read the container size through input
+            // bindings; the resized box needs one more pass to reach them.
+            if (typeof requestAnimationFrame !== 'undefined')
+                requestAnimationFrame(() => this.cdr.markForCheck());
         }
     }
     ngOnChanges(changes) {
@@ -13545,8 +13860,10 @@ class ViewportComponent {
         const vy = placement.vy ?? 0;
         const vw = placement.vw ?? 1;
         const vh = placement.vh ?? 1;
-        // If full panel is visible, no clipping needed
-        if (vx === 0 && vy === 0 && vw === 1 && vh === 1) {
+        // If full panel is visible, no clipping needed; on screens that are not
+        // compact the whole artwork is shown anyway (the visible area is a hint
+        // for small screens, see isCompactHost).
+        if ((vx === 0 && vy === 0 && vw === 1 && vh === 1) || !this.isCompactHost()) {
             return 'none';
         }
         // Calculate inset values as percentages
@@ -13564,8 +13881,8 @@ class ViewportComponent {
     getPanelContentTransform(placement) {
         const vx = placement.vx ?? 0;
         const vy = placement.vy ?? 0;
-        // If no offset, return none
-        if (vx === 0 && vy === 0) {
+        // If no offset, return none (and never shift on screens that are not compact)
+        if ((vx === 0 && vy === 0) || !this.isCompactHost()) {
             return 'none';
         }
         // Translate content by negative offset to show the visible portion
@@ -14076,11 +14393,11 @@ class ViewportComponent {
         console.groupEnd();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ViewportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ViewportComponent, isStandalone: true, selector: "pw-viewport", inputs: { panel: "panel", page: "page", pageBackground: "pageBackground", panels: "panels", hiddenPanelIds: "hiddenPanelIds", preloadTargets: "preloadTargets", viewMode: "viewMode", currentPanelId: "currentPanelId", locale: "locale", variableContext: "variableContext", panX: "panX", panY: "panY", zoom: "zoom", reducedMotion: "reducedMotion", transition: "transition", interactive: "interactive", showOverflowArrows: "showOverflowArrows", enableViewportCulling: "enableViewportCulling", enableLazyLoading: "enableLazyLoading", workBalloonConfig: "workBalloonConfig", characters: "characters", speechEnabled: "speechEnabled", graph: "graph", preload: "preload" }, outputs: { viewportClick: "viewportClick", performanceMetrics: "performanceMetrics", transformChange: "transformChange", layerClick: "layerClick", swipe: "swipe", navigatePrevious: "navigatePrevious", navigateNext: "navigateNext", panelDoubleClick: "panelDoubleClick", panelFocus: "panelFocus", hotspotActivate: "hotspotActivate", deadClick: "deadClick", lockedPanelActivate: "lockedPanelActivate" }, host: { listeners: { "window:resize": "onWindowResize()", "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "wheel": "onWheel($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "touchcancel": "onTouchEnd($event)", "keydown.tab": "onKeydownTab($event)", "keydown.arrowRight": "onKeydownNext($event)", "keydown.arrowDown": "onKeydownNext($event)", "keydown.arrowLeft": "onKeydownPrevious($event)", "keydown.arrowUp": "onKeydownPrevious($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div \n  class=\"viewport-container\"\n  [class]=\"getViewModeClass()\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [class.interactive]=\"interactive\"\n  [style.background-color]=\"getViewportBackground()\"\n  role=\"region\"\n  [attr.aria-label]=\"viewMode === 'page' ? 'Page viewport' : 'Panel viewport'\"\n  tabindex=\"0\"\n  (click)=\"onViewportClick($event)\"\n  (keydown.enter)=\"onKeyboardActivate($event)\"\n  (keydown.space)=\"onKeyboardActivate($event)\"\n  (mousemove)=\"onViewportMouseMove($event)\"\n  (dblclick)=\"onViewportDoubleClick($event)\"\n  (mouseleave)=\"onViewportMouseLeave()\">\n  \n  <!-- Panel View -->\n  @if (viewMode === 'panel') {\n    <div\n      class=\"viewport-content\"\n      [style.transform]=\"getTransformStyle()\"\n      [style.transition]=\"reducedMotion ? 'none' : 'transform 0.3s ease'\"\n      [style.--pw-t-duration]=\"transitionDuration\"\n      [style.--pw-t-easing]=\"transitionEasing\">\n\n      <!-- Outgoing panel during a manifest edge transition -->\n      @if (leavingPanel) {\n        <div [class]=\"'t-frame-leave ' + leaveAnimationClass\" aria-hidden=\"true\">\n          <!-- The outgoing panel holds the end state of its animation. -->\n          <div class=\"panel-container\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"], dependencies: [{ kind: "component", type: LayerRendererComponent, selector: "pw-layer-renderer", inputs: ["layer", "locale", "targetWidth", "altText", "viewMode", "viewActive", "reducedMotion", "panelId", "placementId", "readingOrderIndex", "placementZ", "placementY", "placementX"], outputs: ["layerClick"] }, { kind: "component", type: SpeechBubblesComponent, selector: "pw-speech-bubbles", inputs: ["bubbles", "locale", "containerWidth", "containerHeight", "readingScale", "workBalloonConfig", "characters"], outputs: ["bubbleClick", "bubbleAudioPlay"] }, { kind: "component", type: HotspotsOverlayComponent, selector: "pw-hotspots-overlay", inputs: ["hotspots", "locale", "containerWidth", "containerHeight", "context", "interactive", "showIndicators"], outputs: ["hotspotActivate"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "directive", type: PanelAnimationDirective, selector: "[pwPanelAnimation]", inputs: ["pwPanelAnimation", "pwPanelAnimationKey", "pwPanelAnimationReducedMotion", "pwPanelAnimationStatic"] }, { kind: "component", type: LockedPanelComponent, selector: "pw-locked-panel-placeholder", inputs: ["actionable"], outputs: ["activate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ViewportComponent, isStandalone: true, selector: "pw-viewport", inputs: { panel: "panel", page: "page", pageBackground: "pageBackground", panels: "panels", hiddenPanelIds: "hiddenPanelIds", preloadTargets: "preloadTargets", viewMode: "viewMode", currentPanelId: "currentPanelId", locale: "locale", variableContext: "variableContext", panX: "panX", panY: "panY", zoom: "zoom", reducedMotion: "reducedMotion", transition: "transition", interactive: "interactive", showOverflowArrows: "showOverflowArrows", enableViewportCulling: "enableViewportCulling", enableLazyLoading: "enableLazyLoading", workBalloonConfig: "workBalloonConfig", characters: "characters", speechEnabled: "speechEnabled", graph: "graph", preload: "preload" }, outputs: { viewportClick: "viewportClick", performanceMetrics: "performanceMetrics", transformChange: "transformChange", layerClick: "layerClick", swipe: "swipe", navigatePrevious: "navigatePrevious", navigateNext: "navigateNext", panelDoubleClick: "panelDoubleClick", panelFocus: "panelFocus", hotspotActivate: "hotspotActivate", deadClick: "deadClick", lockedPanelActivate: "lockedPanelActivate" }, host: { listeners: { "window:resize": "onWindowResize()", "mousedown": "onMouseDown($event)", "document:mousemove": "onMouseMove($event)", "document:mouseup": "onMouseUp($event)", "wheel": "onWheel($event)", "touchstart": "onTouchStart($event)", "touchmove": "onTouchMove($event)", "touchend": "onTouchEnd($event)", "touchcancel": "onTouchEnd($event)", "keydown.tab": "onKeydownTab($event)", "keydown.arrowRight": "onKeydownNext($event)", "keydown.arrowDown": "onKeydownNext($event)", "keydown.arrowLeft": "onKeydownPrevious($event)", "keydown.arrowUp": "onKeydownPrevious($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div \n  class=\"viewport-container\"\n  [class]=\"getViewModeClass()\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [class.interactive]=\"interactive\"\n  [style.background-color]=\"getViewportBackground()\"\n  role=\"region\"\n  [attr.aria-label]=\"viewMode === 'page' ? 'Page viewport' : 'Panel viewport'\"\n  tabindex=\"0\"\n  (click)=\"onViewportClick($event)\"\n  (keydown.enter)=\"onKeyboardActivate($event)\"\n  (keydown.space)=\"onKeyboardActivate($event)\"\n  (mousemove)=\"onViewportMouseMove($event)\"\n  (dblclick)=\"onViewportDoubleClick($event)\"\n  (mouseleave)=\"onViewportMouseLeave()\">\n  \n  <!-- Panel View -->\n  @if (viewMode === 'panel') {\n    <div\n      class=\"viewport-content\"\n      [style.transform]=\"getTransformStyle()\"\n      [style.transition]=\"reducedMotion ? 'none' : 'transform 0.3s ease'\"\n      [style.--pw-t-duration]=\"transitionDuration\"\n      [style.--pw-t-easing]=\"transitionEasing\">\n\n      <!-- Outgoing panel during a manifest edge transition -->\n      @if (leavingPanel) {\n        <div [class]=\"'t-frame-leave ' + leaveAnimationClass\" aria-hidden=\"true\">\n          <!-- The outgoing panel holds the end state of its animation. -->\n          <div class=\"panel-container\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [bubbles]=\"panel.speechBubbles ?? []\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [bubbles]=\"panelData.speechBubbles ?? []\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"], dependencies: [{ kind: "component", type: LayerRendererComponent, selector: "pw-layer-renderer", inputs: ["layer", "locale", "targetWidth", "altText", "viewMode", "viewActive", "reducedMotion", "panelId", "placementId", "readingOrderIndex", "placementZ", "placementY", "placementX"], outputs: ["layerClick"] }, { kind: "component", type: SpeechBubblesComponent, selector: "pw-speech-bubbles", inputs: ["bubbles", "locale", "containerWidth", "containerHeight", "readingScale", "workBalloonConfig", "characters"], outputs: ["bubbleClick", "bubbleAudioPlay"] }, { kind: "component", type: HotspotsOverlayComponent, selector: "pw-hotspots-overlay", inputs: ["hotspots", "bubbles", "locale", "containerWidth", "containerHeight", "context", "interactive", "showIndicators"], outputs: ["hotspotActivate"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "directive", type: PanelAnimationDirective, selector: "[pwPanelAnimation]", inputs: ["pwPanelAnimation", "pwPanelAnimationKey", "pwPanelAnimationReducedMotion", "pwPanelAnimationStatic"] }, { kind: "component", type: LockedPanelComponent, selector: "pw-locked-panel-placeholder", inputs: ["actionable"], outputs: ["activate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ViewportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-viewport', imports: [LayerRendererComponent, SpeechBubblesComponent, HotspotsOverlayComponent, PwIconComponent, PanelAnimationDirective, LockedPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"viewport-container\"\n  [class]=\"getViewModeClass()\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [class.interactive]=\"interactive\"\n  [style.background-color]=\"getViewportBackground()\"\n  role=\"region\"\n  [attr.aria-label]=\"viewMode === 'page' ? 'Page viewport' : 'Panel viewport'\"\n  tabindex=\"0\"\n  (click)=\"onViewportClick($event)\"\n  (keydown.enter)=\"onKeyboardActivate($event)\"\n  (keydown.space)=\"onKeyboardActivate($event)\"\n  (mousemove)=\"onViewportMouseMove($event)\"\n  (dblclick)=\"onViewportDoubleClick($event)\"\n  (mouseleave)=\"onViewportMouseLeave()\">\n  \n  <!-- Panel View -->\n  @if (viewMode === 'panel') {\n    <div\n      class=\"viewport-content\"\n      [style.transform]=\"getTransformStyle()\"\n      [style.transition]=\"reducedMotion ? 'none' : 'transform 0.3s ease'\"\n      [style.--pw-t-duration]=\"transitionDuration\"\n      [style.--pw-t-easing]=\"transitionEasing\">\n\n      <!-- Outgoing panel during a manifest edge transition -->\n      @if (leavingPanel) {\n        <div [class]=\"'t-frame-leave ' + leaveAnimationClass\" aria-hidden=\"true\">\n          <!-- The outgoing panel holds the end state of its animation. -->\n          <div class=\"panel-container\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"] }]
+            args: [{ selector: 'pw-viewport', imports: [LayerRendererComponent, SpeechBubblesComponent, HotspotsOverlayComponent, PwIconComponent, PanelAnimationDirective, LockedPanelComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"viewport-container\"\n  [class]=\"getViewModeClass()\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [class.interactive]=\"interactive\"\n  [style.background-color]=\"getViewportBackground()\"\n  role=\"region\"\n  [attr.aria-label]=\"viewMode === 'page' ? 'Page viewport' : 'Panel viewport'\"\n  tabindex=\"0\"\n  (click)=\"onViewportClick($event)\"\n  (keydown.enter)=\"onKeyboardActivate($event)\"\n  (keydown.space)=\"onKeyboardActivate($event)\"\n  (mousemove)=\"onViewportMouseMove($event)\"\n  (dblclick)=\"onViewportDoubleClick($event)\"\n  (mouseleave)=\"onViewportMouseLeave()\">\n  \n  <!-- Panel View -->\n  @if (viewMode === 'panel') {\n    <div\n      class=\"viewport-content\"\n      [style.transform]=\"getTransformStyle()\"\n      [style.transition]=\"reducedMotion ? 'none' : 'transform 0.3s ease'\"\n      [style.--pw-t-duration]=\"transitionDuration\"\n      [style.--pw-t-easing]=\"transitionEasing\">\n\n      <!-- Outgoing panel during a manifest edge transition -->\n      @if (leavingPanel) {\n        <div [class]=\"'t-frame-leave ' + leaveAnimationClass\" aria-hidden=\"true\">\n          <!-- The outgoing panel holds the end state of its animation. -->\n          <div class=\"panel-container\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [bubbles]=\"panel.speechBubbles ?? []\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [bubbles]=\"panelData.speechBubbles ?? []\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"] }]
         }], propDecorators: { panel: [{
                 type: Input
             }], page: [{
@@ -15286,7 +15603,7 @@ class CanvasStageComponent {
         return Math.hypot(points[1].x - points[0].x, points[1].y - points[0].y);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CanvasStageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CanvasStageComponent, isStandalone: true, selector: "pw-canvas-stage", inputs: { canvas: "canvas", panels: "panels", graph: "graph", currentPanelId: "currentPanelId", visitedPanelIds: "visitedPanelIds", locale: "locale", variableContext: "variableContext", speechEnabled: "speechEnabled", workBalloonConfig: "workBalloonConfig", characters: "characters", reducedMotion: "reducedMotion", interactive: "interactive", preload: "preload" }, outputs: { panelTap: "panelTap", navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", viewportClick: "viewportClick", hotspotActivate: "hotspotActivate", cameraChange: "cameraChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"canvas-viewport\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [style]=\"backgroundStyle()\"\n  role=\"region\"\n  aria-label=\"Canvas viewport\"\n  tabindex=\"0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (wheel)=\"onWheel($event)\">\n\n  <div class=\"canvas-world\" [style.transform]=\"worldTransform\">\n\n    <!-- Tiled/stretched backdrop covering the canvas bounds -->\n    @if (worldBackgroundStyle(); as bgStyle) {\n      <div class=\"canvas-backdrop\" [style]=\"bgStyle\" aria-hidden=\"true\"></div>\n    }\n\n    <!-- Non-panel set dressing -->\n    @for (decoration of visibleDecorations; track decoration.assetId + decoration.x + decoration.y) {\n      <img\n        class=\"canvas-decoration\"\n        [src]=\"assetUrl(decoration.assetId)\"\n        [style]=\"decorationStyle(decoration)\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        loading=\"lazy\" />\n    }\n\n    <!-- Placed panels (virtualized) -->\n    @for (entry of stagePlacements; track trackPlacement($index, entry)) {\n      <div\n        class=\"canvas-panel\"\n        [class.current]=\"isCurrent(entry.panelId)\"\n        [class.unrevealed]=\"!entry.revealed\"\n        [style]=\"placementStyle(entry)\"\n        [attr.data-panel-id]=\"entry.panelId\"\n        [pwPanelAnimation]=\"entry.revealed ? entry.panel.animations : null\"\n        [pwPanelAnimationKey]=\"entry.panelId\"\n        [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n        [attr.aria-hidden]=\"isCurrent(entry.panelId) ? null : true\"\n        [attr.inert]=\"isCurrent(entry.panelId) ? null : ''\">\n\n        @if (entry.revealed) {\n          <!-- The panel's artwork; a panel camera move (PanelAnimations) transforms it as one. -->\n          <div class=\"pw-panel-camera\">\n            @if (isLocked(entry.panel, entry.panelId)) {\n              <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n            } @else {\n              @for (layer of entry.panel.layers; track layer.id) {\n                <pw-layer-renderer\n                  [layer]=\"layer\"\n                  [locale]=\"locale\"\n                  viewMode=\"panel\"\n                  [viewActive]=\"isCurrent(entry.panelId)\"\n                  [reducedMotion]=\"reducedMotion\"\n                  [targetWidth]=\"targetWidthFor(entry.panelId)\"\n                  [panelId]=\"entry.panelId\">\n                </pw-layer-renderer>\n              }\n\n              <!-- Hotspots are interactive on the CURRENT panel (the one the\n                   camera frames); other panels show them render-only, and a\n                   tap there keeps its panel-navigation meaning. -->\n              @if (entry.panel.hotspots && entry.panel.hotspots.length > 0) {\n                <pw-hotspots-overlay\n                  [hotspots]=\"entry.panel.hotspots\"\n                  [locale]=\"locale\"\n                  [containerWidth]=\"entry.placement.w\"\n                  [containerHeight]=\"entry.placement.h\"\n                  [context]=\"variableContext\"\n                  [interactive]=\"interactive && isCurrent(entry.panelId)\"\n                  (hotspotActivate)=\"hotspotActivate.emit({ hotspot: $event.hotspot, x: $event.x, y: $event.y, panelId: entry.panelId })\">\n                </pw-hotspots-overlay>\n              }\n\n              @if (speechEnabled && entry.panel.speechBubbles && entry.panel.speechBubbles.length > 0) {\n                <pw-speech-bubbles\n                  [bubbles]=\"entry.panel.speechBubbles\"\n                  [locale]=\"locale\"\n                  [containerWidth]=\"entry.placement.w\"\n                  [containerHeight]=\"entry.placement.h\"\n                  [readingScale]=\"getReadingScale()\"\n                  [workBalloonConfig]=\"workBalloonConfig\"\n                  [characters]=\"characters\">\n                </pw-speech-bubbles>\n              }\n            }\n          </div>\n        } @else {\n          <!-- Unrevealed panel: dark veil, no content (spoiler protection) -->\n          <div class=\"canvas-panel-veil\" aria-hidden=\"true\"></div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.canvas-viewport{position:relative;width:100%;height:100%;overflow:hidden;background-color:#101014;touch-action:none;cursor:grab;outline:none}.canvas-viewport:active{cursor:grabbing}.canvas-world{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0;will-change:transform}.canvas-backdrop{position:absolute;pointer-events:none}.canvas-decoration{position:absolute;pointer-events:none;max-width:none}.canvas-panel{position:absolute;overflow:hidden;background:#000;contain:layout paint;content-visibility:auto;box-shadow:0 8px 40px #0000008c}.canvas-panel.current{box-shadow:0 0 0 2px #ffffff2e,0 8px 48px #0009}.pw-panel-camera{position:absolute;inset:0}.canvas-panel-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1e1e26eb,#0a0a0efa)}.reduced-motion .canvas-world{will-change:auto}\n"], dependencies: [{ kind: "component", type: LayerRendererComponent, selector: "pw-layer-renderer", inputs: ["layer", "locale", "targetWidth", "altText", "viewMode", "viewActive", "reducedMotion", "panelId", "placementId", "readingOrderIndex", "placementZ", "placementY", "placementX"], outputs: ["layerClick"] }, { kind: "component", type: SpeechBubblesComponent, selector: "pw-speech-bubbles", inputs: ["bubbles", "locale", "containerWidth", "containerHeight", "readingScale", "workBalloonConfig", "characters"], outputs: ["bubbleClick", "bubbleAudioPlay"] }, { kind: "component", type: HotspotsOverlayComponent, selector: "pw-hotspots-overlay", inputs: ["hotspots", "locale", "containerWidth", "containerHeight", "context", "interactive", "showIndicators"], outputs: ["hotspotActivate"] }, { kind: "directive", type: PanelAnimationDirective, selector: "[pwPanelAnimation]", inputs: ["pwPanelAnimation", "pwPanelAnimationKey", "pwPanelAnimationReducedMotion", "pwPanelAnimationStatic"] }, { kind: "component", type: LockedPanelComponent, selector: "pw-locked-panel-placeholder", inputs: ["actionable"], outputs: ["activate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CanvasStageComponent, isStandalone: true, selector: "pw-canvas-stage", inputs: { canvas: "canvas", panels: "panels", graph: "graph", currentPanelId: "currentPanelId", visitedPanelIds: "visitedPanelIds", locale: "locale", variableContext: "variableContext", speechEnabled: "speechEnabled", workBalloonConfig: "workBalloonConfig", characters: "characters", reducedMotion: "reducedMotion", interactive: "interactive", preload: "preload" }, outputs: { panelTap: "panelTap", navigateNext: "navigateNext", navigatePrevious: "navigatePrevious", viewportClick: "viewportClick", hotspotActivate: "hotspotActivate", cameraChange: "cameraChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"canvas-viewport\"\n  [class.reduced-motion]=\"reducedMotion\"\n  [style]=\"backgroundStyle()\"\n  role=\"region\"\n  aria-label=\"Canvas viewport\"\n  tabindex=\"0\"\n  (pointerdown)=\"onPointerDown($event)\"\n  (pointermove)=\"onPointerMove($event)\"\n  (pointerup)=\"onPointerUp($event)\"\n  (pointercancel)=\"onPointerUp($event)\"\n  (wheel)=\"onWheel($event)\">\n\n  <div class=\"canvas-world\" [style.transform]=\"worldTransform\">\n\n    <!-- Tiled/stretched backdrop covering the canvas bounds -->\n    @if (worldBackgroundStyle(); as bgStyle) {\n      <div class=\"canvas-backdrop\" [style]=\"bgStyle\" aria-hidden=\"true\"></div>\n    }\n\n    <!-- Non-panel set dressing -->\n    @for (decoration of visibleDecorations; track decoration.assetId + decoration.x + decoration.y) {\n      <img\n        class=\"canvas-decoration\"\n        [src]=\"assetUrl(decoration.assetId)\"\n        [style]=\"decorationStyle(decoration)\"\n        alt=\"\"\n        aria-hidden=\"true\"\n        loading=\"lazy\" />\n    }\n\n    <!-- Placed panels (virtualized) -->\n    @for (entry of stagePlacements; track trackPlacement($index, entry)) {\n      <div\n        class=\"canvas-panel\"\n        [class.current]=\"isCurrent(entry.panelId)\"\n        [class.unrevealed]=\"!entry.revealed\"\n        [style]=\"placementStyle(entry)\"\n        [attr.data-panel-id]=\"entry.panelId\"\n        [pwPanelAnimation]=\"entry.revealed ? entry.panel.animations : null\"\n        [pwPanelAnimationKey]=\"entry.panelId\"\n        [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n        [attr.aria-hidden]=\"isCurrent(entry.panelId) ? null : true\"\n        [attr.inert]=\"isCurrent(entry.panelId) ? null : ''\">\n\n        @if (entry.revealed) {\n          <!-- The panel's artwork; a panel camera move (PanelAnimations) transforms it as one. -->\n          <div class=\"pw-panel-camera\">\n            @if (isLocked(entry.panel, entry.panelId)) {\n              <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n            } @else {\n              @for (layer of entry.panel.layers; track layer.id) {\n                <pw-layer-renderer\n                  [layer]=\"layer\"\n                  [locale]=\"locale\"\n                  viewMode=\"panel\"\n                  [viewActive]=\"isCurrent(entry.panelId)\"\n                  [reducedMotion]=\"reducedMotion\"\n                  [targetWidth]=\"targetWidthFor(entry.panelId)\"\n                  [panelId]=\"entry.panelId\">\n                </pw-layer-renderer>\n              }\n\n              <!-- Hotspots are interactive on the CURRENT panel (the one the\n                   camera frames); other panels show them render-only, and a\n                   tap there keeps its panel-navigation meaning. -->\n              @if (entry.panel.hotspots && entry.panel.hotspots.length > 0) {\n                <pw-hotspots-overlay\n                  [hotspots]=\"entry.panel.hotspots\"\n                  [locale]=\"locale\"\n                  [containerWidth]=\"entry.placement.w\"\n                  [containerHeight]=\"entry.placement.h\"\n                  [context]=\"variableContext\"\n                  [interactive]=\"interactive && isCurrent(entry.panelId)\"\n                  (hotspotActivate)=\"hotspotActivate.emit({ hotspot: $event.hotspot, x: $event.x, y: $event.y, panelId: entry.panelId })\">\n                </pw-hotspots-overlay>\n              }\n\n              @if (speechEnabled && entry.panel.speechBubbles && entry.panel.speechBubbles.length > 0) {\n                <pw-speech-bubbles\n                  [bubbles]=\"entry.panel.speechBubbles\"\n                  [locale]=\"locale\"\n                  [containerWidth]=\"entry.placement.w\"\n                  [containerHeight]=\"entry.placement.h\"\n                  [readingScale]=\"getReadingScale()\"\n                  [workBalloonConfig]=\"workBalloonConfig\"\n                  [characters]=\"characters\">\n                </pw-speech-bubbles>\n              }\n            }\n          </div>\n        } @else {\n          <!-- Unrevealed panel: dark veil, no content (spoiler protection) -->\n          <div class=\"canvas-panel-veil\" aria-hidden=\"true\"></div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;height:100%}.canvas-viewport{position:relative;width:100%;height:100%;overflow:hidden;background-color:#101014;touch-action:none;cursor:grab;outline:none}.canvas-viewport:active{cursor:grabbing}.canvas-world{position:absolute;top:0;left:0;width:0;height:0;transform-origin:0 0;will-change:transform}.canvas-backdrop{position:absolute;pointer-events:none}.canvas-decoration{position:absolute;pointer-events:none;max-width:none}.canvas-panel{position:absolute;overflow:hidden;background:#000;contain:layout paint;content-visibility:auto;box-shadow:0 8px 40px #0000008c}.canvas-panel.current{box-shadow:0 0 0 2px #ffffff2e,0 8px 48px #0009}.pw-panel-camera{position:absolute;inset:0}.canvas-panel-veil{position:absolute;inset:0;background:radial-gradient(ellipse at center,#1e1e26eb,#0a0a0efa)}.reduced-motion .canvas-world{will-change:auto}\n"], dependencies: [{ kind: "component", type: LayerRendererComponent, selector: "pw-layer-renderer", inputs: ["layer", "locale", "targetWidth", "altText", "viewMode", "viewActive", "reducedMotion", "panelId", "placementId", "readingOrderIndex", "placementZ", "placementY", "placementX"], outputs: ["layerClick"] }, { kind: "component", type: SpeechBubblesComponent, selector: "pw-speech-bubbles", inputs: ["bubbles", "locale", "containerWidth", "containerHeight", "readingScale", "workBalloonConfig", "characters"], outputs: ["bubbleClick", "bubbleAudioPlay"] }, { kind: "component", type: HotspotsOverlayComponent, selector: "pw-hotspots-overlay", inputs: ["hotspots", "bubbles", "locale", "containerWidth", "containerHeight", "context", "interactive", "showIndicators"], outputs: ["hotspotActivate"] }, { kind: "directive", type: PanelAnimationDirective, selector: "[pwPanelAnimation]", inputs: ["pwPanelAnimation", "pwPanelAnimationKey", "pwPanelAnimationReducedMotion", "pwPanelAnimationStatic"] }, { kind: "component", type: LockedPanelComponent, selector: "pw-locked-panel-placeholder", inputs: ["actionable"], outputs: ["activate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CanvasStageComponent, decorators: [{
             type: Component,
@@ -15798,6 +16115,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Thumbnail Strip Component
  * Displays panel thumbnails for navigation
  */
+/** Two id lists hold the same ids in the same order. */
+function sameIds(a, b) {
+    if (a === b)
+        return true;
+    if (!a || !b || a.length !== b.length)
+        return false;
+    return a.every((id, i) => id === b[i]);
+}
 /**
  * Thumbnail Strip Component
  * Horizontal strip for quick navigation: the cover, then per chapter a
@@ -15873,6 +16198,13 @@ class ThumbnailStripComponent {
      * Handle changes
      */
     ngOnChanges(changes) {
+        // Hosts may hand over a fresh but equal array on every change detection
+        // (e.g. a getter). Treating that as a change would rebuild the strip and
+        // snap it back to the current panel while the reader scrolls it.
+        const ids = changes['currentPanelIds'];
+        if (ids && !ids.firstChange && sameIds(ids.previousValue, ids.currentValue)) {
+            delete changes['currentPanelIds'];
+        }
         const rebuild = ['chapters', 'currentChapterId', 'currentPanelId', 'currentPanelIds', 'lockedPanels', 'coverThumbnail', 'coverCurrent', 'locale'];
         if (rebuild.some((key) => changes[key])) {
             this.buildThumbnailItems();