@panelwave/player 1.3.0 → 1.6.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,
@@ -5428,10 +5571,10 @@ class AudioEngineService {
         }
     }
     /**
-     * Play audio track
+     * Play audio track, optionally from `offsetSeconds` into the file.
      */
-    async play(track) {
-        await this.startTrack(track, 0);
+    async play(track, offsetSeconds = 0) {
+        await this.startTrack(track, offsetSeconds);
     }
     /**
      * Stop audio track
@@ -5719,6 +5862,10 @@ class AudioEngineService {
         // Create audio element
         const audio = new Audio(track.url);
         audio.loop = track.loop || false;
+        const rate = typeof track.playbackRate === 'number' && isFinite(track.playbackRate) ? Math.max(0.25, Math.min(4, track.playbackRate)) : 1;
+        if (rate !== 1) {
+            audio.playbackRate = rate;
+        }
         if (offsetSeconds > 0) {
             audio.currentTime = offsetSeconds;
         }
@@ -5741,9 +5888,11 @@ class AudioEngineService {
             audio.addEventListener('ended', active.onEnded);
         }
         try {
-            // Apply fade in (shortened when starting mid-fade)
-            if (track.fadeIn && track.fadeIn > 0 && offsetSeconds * 1000 < track.fadeIn) {
-                await this.fadeIn(track.id, track.fadeIn - offsetSeconds * 1000, volume);
+            // Fade in (shortened when starting mid-fade). The ramp runs while the
+            // element plays — awaiting it first delayed the start by the fade.
+            const fadeMs = track.fadeIn && track.fadeIn > 0 ? track.fadeIn - offsetSeconds * 1000 : 0;
+            if (fadeMs > 0) {
+                void this.fadeIn(track.id, fadeMs, volume);
             }
             // Play audio
             await audio.play();
@@ -5897,6 +6046,381 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Audio asset resolution shared by the panel audio and timeline (sequence)
+ * audio services: catalog id → the first variant the browser can play →
+ * absolute URL, plus the asset's own role / loop hints.
+ */
+/**
+ * Resolve an audio asset; `{ error }` explains why it cannot be played (not
+ * in the catalog, not audio, no variants, no URL).
+ */
+function resolveAudioAsset(asset, assetsBase) {
+    if (!asset) {
+        return { error: 'is not in the asset catalog' };
+    }
+    if (asset.category !== 'audio') {
+        return { error: 'is not an audio asset' };
+    }
+    const audioAsset = asset;
+    const variant = pickPlayableVariant(audioAsset.variants ?? []);
+    if (!variant) {
+        return { error: 'has no audio variants' };
+    }
+    const url = resolveAssetUrl(variant.src, assetsBase, 'audio');
+    if (!url) {
+        return { error: 'has no usable URL' };
+    }
+    return { url, role: audioAsset.role, loop: variant.loop };
+}
+/**
+ * First variant the browser reports it can play; otherwise the first one
+ * (the element will surface the real error).
+ */
+function pickPlayableVariant(variants) {
+    if (variants.length <= 1) {
+        return variants[0];
+    }
+    const probe = createProbe();
+    if (!probe) {
+        return variants[0];
+    }
+    const playable = variants.find((variant) => {
+        const mime = variant.mime || guessMimeType(variant.src);
+        return mime ? probe.canPlayType(mime) !== '' : false;
+    });
+    return playable ?? variants[0];
+}
+function createProbe() {
+    if (typeof document === 'undefined') {
+        return null;
+    }
+    try {
+        const element = document.createElement('audio');
+        return typeof element.canPlayType === 'function' ? element : null;
+    }
+    catch {
+        return null;
+    }
+}
+
+/**
+ * Timeline (sequence) audio placement for the reader — the same model as the
+ * CMS editor's timeline: the work is one line of panels (chapters in order →
+ * the active format's pages → reading order), each panel lasting its
+ * `durationMs` (else the work's seconds-per-panel, else 5 s).
+ *
+ * A chapter's `sequenceAudioTracks` sit on that line relative to their
+ * chapter's start. `span` (format 1.8.0): 'page' / 'chapter' tracks cover
+ * their startPanelId..endPanelId range; a 'work' track keeps playing across
+ * chapter boundaries until endPanelId (else the work's last panel); every
+ * other track ends with its chapter.
+ *
+ * The reader does not follow a clock, so the timeline is used per panel:
+ * entering a panel tells which tracks cover it, from which offset, and
+ * whether one starts or ends inside it (`cuesForPanel`).
+ */
+const DEFAULT_PANEL_MS = 5000;
+/** Panels of a page in reading order (placement order without one). */
+function pagePanels(page) {
+    if (page.readingOrder?.length) {
+        return page.readingOrder;
+    }
+    return (page.layout?.placements ?? []).map((placement) => placement.panelId);
+}
+/** The work's panel line for a page format (null = every page). */
+function buildWorkTimeline(manifest, format, defaultPanelMs = DEFAULT_PANEL_MS) {
+    const entries = [];
+    const byPanel = new Map();
+    const chapters = new Map();
+    let t = 0;
+    for (const chapter of (manifest?.chapters ?? [])) {
+        const pages = pagesForFormat(chapter.pages, format);
+        const order = pages.length ? pages.flatMap(pagePanels) : chapterReadingOrder(chapter);
+        const chapterStart = t;
+        for (const panelId of order) {
+            const panel = chapter.panels?.[panelId];
+            if (!panel || byPanel.has(panelId)) {
+                continue;
+            }
+            const ms = typeof panel.durationMs === 'number' && panel.durationMs > 0 ? panel.durationMs : defaultPanelMs;
+            const entry = { panelId, chapterId: chapter.id, startMs: t, endMs: t + ms };
+            entries.push(entry);
+            byPanel.set(panelId, entry);
+            t += ms;
+        }
+        if (t > chapterStart) {
+            chapters.set(chapter.id, { startMs: chapterStart, endMs: t });
+        }
+    }
+    return { entries, byPanel, chapters, endMs: t };
+}
+/** Where each (format-matching, unmuted) timeline track sits on the work line. */
+function resolveTrackRanges(manifest, timeline, format) {
+    const ranges = [];
+    for (const chapter of (manifest?.chapters ?? [])) {
+        const extent = timeline.chapters.get(chapter.id);
+        if (!extent) {
+            continue; // no panels of this chapter in this format
+        }
+        for (const track of chapter.sequenceAudioTracks ?? []) {
+            if (!track?.assetId || track.muted) {
+                continue;
+            }
+            if (format && track.format && track.format !== format) {
+                continue;
+            }
+            const span = track.span ?? 'custom';
+            const first = track.startPanelId ? timeline.byPanel.get(track.startPanelId) : undefined;
+            const last = track.endPanelId ? timeline.byPanel.get(track.endPanelId) : undefined;
+            let startMs;
+            let endMs;
+            if ((span === 'page' || span === 'chapter') && first && last) {
+                startMs = first.startMs;
+                endMs = last.endMs;
+            }
+            else {
+                startMs = extent.startMs + Math.max(0, Number(track.startTime) || 0);
+                const duration = Math.max(0, Number(track.duration) || 0);
+                endMs = duration > 0 ? startMs + duration : extent.endMs;
+            }
+            if (span === 'work') {
+                endMs = last ? last.endMs : timeline.endMs;
+            }
+            else {
+                endMs = Math.min(endMs, extent.endMs);
+            }
+            if (endMs > startMs) {
+                ranges.push({ track, chapterId: chapter.id, startMs, endMs });
+            }
+        }
+    }
+    return ranges;
+}
+/** The tracks that sound while the reader is on `entry`'s panel. */
+function cuesForPanel(ranges, entry) {
+    const cues = [];
+    for (const range of ranges) {
+        if (range.startMs >= entry.endMs || range.endMs <= entry.startMs) {
+            continue;
+        }
+        const cue = {
+            range,
+            delayMs: Math.max(0, range.startMs - entry.startMs),
+            offsetMs: Math.max(0, entry.startMs - range.startMs),
+        };
+        if (range.endMs < entry.endMs) {
+            cue.stopAfterMs = range.endMs - entry.startMs;
+        }
+        cues.push(cue);
+    }
+    return cues;
+}
+
+/**
+ * Sequence Audio Service
+ *
+ * Plays a work's timeline audio (`chapters[].sequenceAudioTracks` — music,
+ * ambience, voiceover beds) while the reader moves through the panels:
+ *
+ * - entering a panel starts every track that covers it, at the right offset
+ *   (a jump into the middle of a scene picks the music up where it is);
+ * - a track keeps playing while the reader stays inside its range, so
+ *   music does not restart on every panel; leaving the range fades it out
+ *   (its `fadeOut`, else 250 ms);
+ * - a track that starts or ends inside a panel is delayed / stopped there;
+ * - `span: 'work'` tracks continue across chapter boundaries.
+ *
+ * Placement follows the CMS timeline (see sequence-audio-timeline.ts). Roles
+ * map onto the engine buses, so the reader's Audio / SFX / Speech toggles
+ * apply. Tracks refused by the autoplay policy are retried on the first
+ * user gesture.
+ */
+/** Fade when a track ends because the reader left its range (unless it has its own fadeOut). */
+const SEQUENCE_AUDIO_LEAVE_FADE_MS = 250;
+/** Engine ids are prefixed so they never collide with panel audio (asset ids). */
+const sequenceEngineId = (trackId) => `seq:${trackId}`;
+class SequenceAudioService {
+    constructor() {
+        this.engine = inject(AudioEngineService);
+        this.manifestService = inject(ManifestService);
+        this.gesture = inject(UserGestureService);
+        /** Tracks the current panel wants, by engine id. */
+        this.desired = new Map();
+        /** Refused by the autoplay policy; retried on the first gesture. */
+        this.blocked = new Set();
+        this.warned = new Set();
+        this.gestureSub = this.gesture.userHasInteracted$.subscribe((interacted) => {
+            if (interacted) {
+                this.onUserGesture();
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.gestureSub.unsubscribe();
+        this.stopAll();
+    }
+    /**
+     * Follow the reader: call on every panel change (and when the page format
+     * changes). `panelId` undefined = silence (cover, locked panel, teardown).
+     */
+    syncPanel(panelId, format) {
+        const { timeline, ranges } = this.layout(format);
+        const entry = panelId ? timeline.byPanel.get(panelId) : undefined;
+        const cues = entry ? cuesForPanel(ranges, entry) : [];
+        const next = new Map(cues.map((cue) => [sequenceEngineId(cue.range.track.id), cue]));
+        for (const [id, playing] of this.desired) {
+            if (!next.has(id)) {
+                this.release(id, this.leaveFade(playing.cue));
+                this.desired.delete(id);
+            }
+        }
+        for (const [id, cue] of next) {
+            const playing = this.desired.get(id);
+            if (playing) {
+                // Still inside its range (started, pending, blocked — or a one-shot
+                // that already ended): never restart it, only re-arm an end that
+                // falls inside this panel.
+                playing.cue = cue;
+                this.armStop(id, playing);
+                continue;
+            }
+            this.schedule(id, cue);
+        }
+    }
+    /** Stop everything this service started. */
+    stopAll() {
+        for (const id of Array.from(this.desired.keys())) {
+            this.release(id, 0);
+        }
+        this.desired.clear();
+    }
+    /** Engine ids of the tracks the current panel wants (started, pending or blocked). */
+    getDesiredTrackIds() {
+        return Array.from(this.desired.keys());
+    }
+    // ---------------------------------------------------------------------------
+    layout(format) {
+        const manifest = this.manifestService.getManifest();
+        const cache = this.layoutCache;
+        if (cache && cache.manifest === manifest && cache.format === format) {
+            return cache;
+        }
+        const seconds = Number(manifest?.settings?.ui?.secondsPerPanel);
+        const defaultMs = Number.isFinite(seconds) && seconds > 0 ? seconds * 1000 : DEFAULT_PANEL_MS;
+        const timeline = buildWorkTimeline(manifest, format, defaultMs);
+        const ranges = resolveTrackRanges(manifest, timeline, format);
+        this.layoutCache = { manifest, format, timeline, ranges };
+        return this.layoutCache;
+    }
+    schedule(id, cue) {
+        this.release(id, 0);
+        const playing = { cue };
+        this.desired.set(id, playing);
+        if (cue.delayMs > 0) {
+            playing.startTimer = setTimeout(() => {
+                playing.startTimer = undefined;
+                this.start(id, playing, 0);
+            }, cue.delayMs);
+        }
+        else {
+            this.start(id, playing, cue.offsetMs);
+        }
+        this.armStop(id, playing);
+    }
+    /** Stop the track inside this panel when its range ends here. */
+    armStop(id, playing) {
+        if (playing.stopTimer !== undefined) {
+            clearTimeout(playing.stopTimer);
+            playing.stopTimer = undefined;
+        }
+        const stopAfter = playing.cue.stopAfterMs;
+        if (stopAfter === undefined) {
+            return;
+        }
+        playing.stopTimer = setTimeout(() => {
+            playing.stopTimer = undefined;
+            if (this.desired.get(id) === playing) {
+                this.desired.delete(id);
+                this.release(id, this.leaveFade(playing.cue));
+            }
+        }, stopAfter);
+    }
+    start(id, playing, offsetMs) {
+        const track = playing.cue.range.track;
+        const resolved = resolveAudioAsset(this.manifestService.getAsset(track.assetId), this.manifestService.getManifest()?.assets?.base);
+        if ('error' in resolved) {
+            this.warnOnce(track.assetId, resolved.error);
+            return;
+        }
+        const rate = typeof track.playbackRate === 'number' && isFinite(track.playbackRate) ? Math.max(0.25, Math.min(4, track.playbackRate)) : 1;
+        this.blocked.delete(id);
+        this.engine
+            .play({
+            id,
+            url: resolved.url,
+            role: track.role,
+            loop: track.loop ?? resolved.loop ?? false,
+            volume: typeof track.volume === 'number' && isFinite(track.volume) ? Math.max(0, Math.min(2, track.volume)) : 1,
+            fadeIn: track.fadeIn,
+            fadeOut: track.fadeOut,
+            playbackRate: rate,
+        }, (offsetMs / 1000) * rate)
+            .catch((error) => {
+            if (this.isAutoplayRefusal(error) && !this.gesture.hasInteracted() && this.desired.get(id) === playing) {
+                this.blocked.add(id);
+            }
+        });
+    }
+    release(id, fadeMs) {
+        const playing = this.desired.get(id);
+        if (playing?.startTimer !== undefined) {
+            clearTimeout(playing.startTimer);
+            playing.startTimer = undefined;
+        }
+        if (playing?.stopTimer !== undefined) {
+            clearTimeout(playing.stopTimer);
+            playing.stopTimer = undefined;
+        }
+        this.blocked.delete(id);
+        if (this.engine.isActive(id)) {
+            void this.engine.stop(id, fadeMs);
+        }
+    }
+    leaveFade(cue) {
+        const fadeOut = cue.range.track.fadeOut;
+        return typeof fadeOut === 'number' && fadeOut > 0 ? fadeOut : SEQUENCE_AUDIO_LEAVE_FADE_MS;
+    }
+    onUserGesture() {
+        for (const id of Array.from(this.blocked)) {
+            this.blocked.delete(id);
+            const playing = this.desired.get(id);
+            if (playing) {
+                this.start(id, playing, playing.cue.offsetMs);
+            }
+        }
+    }
+    isAutoplayRefusal(error) {
+        const name = error?.name;
+        return name === 'NotAllowedError' || name === 'AbortError';
+    }
+    warnOnce(assetId, reason) {
+        if (this.warned.has(assetId)) {
+            return;
+        }
+        this.warned.add(assetId);
+        console.warn(`[SequenceAudioService] audio asset "${assetId}" ${reason}; timeline track skipped.`);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SequenceAudioService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SequenceAudioService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SequenceAudioService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
 /**
  * Panel Audio Service
  *
@@ -6107,61 +6631,22 @@ class PanelAudioService {
         return result;
     }
     resolveTrack(entry) {
-        const asset = this.manifestService.getAsset(entry.assetId);
-        if (!asset || asset.category !== 'audio') {
-            this.warnOnce(entry.assetId, asset ? 'is not an audio asset' : 'is not in the asset catalog');
-            return null;
-        }
-        const audioAsset = asset;
-        const variant = this.pickVariant(audioAsset.variants ?? []);
-        if (!variant) {
-            this.warnOnce(entry.assetId, 'has no audio variants');
-            return null;
-        }
-        const base = this.manifestService.getManifest()?.assets?.base;
-        const url = resolveAssetUrl(variant.src, base, 'audio');
-        if (!url) {
+        const resolved = resolveAudioAsset(this.manifestService.getAsset(entry.assetId), this.manifestService.getManifest()?.assets?.base);
+        if ('error' in resolved) {
+            if (resolved.error !== 'has no usable URL') {
+                this.warnOnce(entry.assetId, resolved.error);
+            }
             return null;
         }
         return {
             id: entry.assetId,
-            url,
-            role: busForRole(entry.role ?? audioAsset.role),
-            loop: entry.loop ?? variant.loop ?? false,
+            url: resolved.url,
+            role: busForRole(entry.role ?? resolved.role),
+            loop: entry.loop ?? resolved.loop ?? false,
             gain: this.clampGain(entry.gain),
             startAtMs: typeof entry.startAtMs === 'number' && entry.startAtMs > 0 ? entry.startAtMs : 0,
         };
     }
-    /**
-     * First variant the browser reports it can play; otherwise the first one
-     * (the element will surface the real error).
-     */
-    pickVariant(variants) {
-        if (variants.length <= 1) {
-            return variants[0];
-        }
-        const probe = this.createProbe();
-        if (!probe) {
-            return variants[0];
-        }
-        const playable = variants.find((variant) => {
-            const mime = variant.mime || guessMimeType(variant.src);
-            return mime ? probe.canPlayType(mime) !== '' : false;
-        });
-        return playable ?? variants[0];
-    }
-    createProbe() {
-        if (typeof document === 'undefined') {
-            return null;
-        }
-        try {
-            const element = document.createElement('audio');
-            return typeof element.canPlayType === 'function' ? element : null;
-        }
-        catch {
-            return null;
-        }
-    }
     clampGain(gain) {
         if (typeof gain !== 'number' || !isFinite(gain)) {
             return 1;
@@ -11789,6 +12274,14 @@ class SpeechBubblesComponent {
          * screens (phones) get smaller lettering.
          */
         this.readingScale = 1;
+        /**
+         * Page view: place a tailed balloon by its AUTHORED tail tip (the speaker
+         * on the artwork) instead of centring its body on the stored box, and keep
+         * the tail at its authored length when the MIN_LETTERING_PX floor boosts
+         * the balloon — the CMS editor's page view rule (PanelRenderer), which the
+         * lettered PDF must reproduce. Panel view keeps the centre placement.
+         */
+        this.anchorTailTip = false;
         /**
          * Work-level balloon config defaults (from settings.typography.balloon_config)
          */
@@ -11807,6 +12300,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;
@@ -11836,6 +12337,7 @@ class SpeechBubblesComponent {
             changes['containerWidth'] ||
             changes['containerHeight'] ||
             changes['readingScale'] ||
+            changes['anchorTailTip'] ||
             changes['workBalloonConfig'] ||
             changes['characters'];
         if (needsRerender) {
@@ -11938,11 +12440,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');
@@ -11965,7 +12469,8 @@ class SpeechBubblesComponent {
                 // NOT proportionally with the authored shape box (which would blow
                 // text up on large screens). Capped so a balloon never exceeds its
                 // panel container, and clamped against broken measurements.
-                let scale = Math.min(4, Math.max(0.25, this.readingScale || 1));
+                const baseScale = Math.min(4, Math.max(0.25, this.readingScale || 1));
+                let scale = baseScale;
                 // Never letter below MIN_LETTERING_PX: on a page shown small the balloon
                 // grows just enough (still anchored and kept inside the panel below).
                 if (config.fontSize > 0) {
@@ -11976,39 +12481,101 @@ class SpeechBubblesComponent {
                 // The SVG can run a little wider than maxWidth (stroke, tail), so narrow
                 // by the remaining overshoot for up to three passes.
                 let maxWidth = Number(renderOpts['maxWidth']) || svgWidth;
+                let usedOpts = renderOpts;
                 for (let pass = 0; pass < 3 && svgWidth > 0 && this.containerWidth > 0 && svgWidth * scale > this.containerWidth + 0.5; pass++) {
                     const narrower = Math.max(40, Math.floor(maxWidth * (this.containerWidth / (svgWidth * scale)) * 0.99));
                     if (narrower >= maxWidth)
                         break;
                     maxWidth = narrower;
-                    result = new ComicBalloon(balloonContainer, { ...renderOpts, maxWidth, maxHeight: 0 }).render(text, tailOpts);
+                    usedOpts = { ...renderOpts, maxWidth, maxHeight: 0 };
+                    result = new ComicBalloon(balloonContainer, usedOpts).render(text, tailOpts);
                     svgWidth = result.svg?.style.width ? parseFloat(result.svg.style.width) : maxWidth;
                     svgHeight = result.svg?.style.height ? parseFloat(result.svg.style.height) : svgHeight;
                 }
                 if (svgWidth > 0 && svgHeight > 0) {
                     scale = Math.max(0.25, Math.min(scale, this.containerWidth / svgWidth, this.containerHeight / svgHeight));
                 }
+                // Page view (anchorTailTip): the tail tip stays on the AUTHORED tip
+                // and a readability boost above the base scale grows only the body —
+                // the tail is rendered at length / boost so its visible length stays
+                // authored (the editor's tail counter-scaling). Connectors keep the
+                // centre rule: the editor glues them onto their target balloon.
+                const tailLength = Number(tailOpts?.length) || 50;
+                const cornerRadius = Number(renderOpts['cornerRadius'] ?? 0.45) || 0;
+                const tipAnchored = this.anchorTailTip && !!tailOpts && tailOpts.position !== undefined
+                    && config.balloonType !== 'connector';
+                let renderedTailLength = tailLength;
+                if (tipAnchored && scale > baseScale * 1.001) {
+                    renderedTailLength = tailLength * baseScale / scale;
+                    result = new ComicBalloon(balloonContainer, usedOpts)
+                        .render(text, { ...tailOpts, length: renderedTailLength });
+                    svgWidth = result.svg?.style.width ? parseFloat(result.svg.style.width) : svgWidth;
+                    svgHeight = result.svg?.style.height ? parseFloat(result.svg.style.height) : svgHeight;
+                }
                 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;
-                if (boxLeft <= eps)
-                    centerX = visualW / 2;
-                else if (boxRight >= this.containerWidth - eps)
-                    centerX = this.containerWidth - visualW / 2;
-                if (boxTop <= eps)
-                    centerY = visualH / 2;
-                else if (boxBottom >= this.containerHeight - eps)
-                    centerY = this.containerHeight - visualH / 2;
+                let centerX = pos.left + grownOffsetX - bodyOffsetX * scale;
+                let centerY = pos.top + grownOffsetY - bodyOffsetY * scale;
+                if (tipAnchored) {
+                    // Authored tip: the stored box with the tail at the base scale
+                    // (the editor's tip before its re-measure and boost). The rendered
+                    // balloon's own tip, relative to its body centre, lands on it — a
+                    // grown or boosted body moves away from the speaker, the tip stays.
+                    const authoredW = boxRight - boxLeft > 1 ? boxRight - boxLeft : config.maxWidth * baseScale;
+                    const authoredH = boxBottom - boxTop > 1 ? boxBottom - boxTop : config.maxHeight * baseScale;
+                    const tip = tailConfigToTip({ cx: (boxLeft + boxRight) / 2, cy: (boxTop + boxBottom) / 2, width: authoredW, height: authoredH }, { position: Number(tailOpts.position), length: tailLength * baseScale }, cornerRadius);
+                    const localTip = tailConfigToTip({ cx: 0, cy: 0, width: result.width, height: result.height }, { position: Number(tailOpts.position), length: renderedTailLength }, cornerRadius);
+                    centerX = tip.x - (localTip.x + bodyOffsetX) * scale;
+                    centerY = tip.y - (localTip.y + bodyOffsetY) * scale;
+                }
+                else {
+                    if (boxLeft <= eps)
+                        centerX = visualW / 2;
+                    else if (boxRight >= this.containerWidth - eps)
+                        centerX = this.containerWidth - visualW / 2;
+                    if (boxTop <= eps)
+                        centerY = visualH / 2;
+                    else if (boxBottom >= this.containerHeight - eps)
+                        centerY = this.containerHeight - visualH / 2;
+                }
                 // A balloon bigger than its authored box (small screens) must not be
                 // pushed across the panel border and clipped: keep it inside the panel.
                 centerX = clampCenter(centerX, visualW, this.containerWidth);
@@ -12049,6 +12616,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)
@@ -12058,7 +12664,7 @@ class SpeechBubblesComponent {
         this.bubbleClick.emit(bubble);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpeechBubblesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SpeechBubblesComponent, isStandalone: true, selector: "pw-speech-bubbles", inputs: { bubbles: "bubbles", locale: "locale", containerWidth: "containerWidth", containerHeight: "containerHeight", readingScale: "readingScale", workBalloonConfig: "workBalloonConfig", characters: "characters" }, outputs: { bubbleClick: "bubbleClick", bubbleAudioPlay: "bubbleAudioPlay" }, usesOnChanges: true, ngImport: i0, template: "<!-- Speech bubbles are rendered imperatively via ComicBalloon SVG renderer -->\n<div class=\"speech-bubbles-container\"></div>\n", styles: [":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}.speech-bubbles-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.speech-bubble-wrapper{position:absolute;pointer-events:auto;cursor:pointer;z-index:10;animation:bubbleAppear .3s ease-out}.speech-bubble-wrapper:focus{outline:2px solid rgba(0,120,255,.6);outline-offset:4px;border-radius:4px}.speech-bubble-wrapper:hover{filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.balloon-container{display:inline-block;position:relative}.balloon-container :deep(.comic-balloon-svg){display:block;overflow:visible}@keyframes bubbleAppear{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.14", type: SpeechBubblesComponent, isStandalone: true, selector: "pw-speech-bubbles", inputs: { bubbles: "bubbles", locale: "locale", containerWidth: "containerWidth", containerHeight: "containerHeight", readingScale: "readingScale", anchorTailTip: "anchorTailTip", workBalloonConfig: "workBalloonConfig", characters: "characters" }, outputs: { bubbleClick: "bubbleClick", bubbleAudioPlay: "bubbleAudioPlay" }, usesOnChanges: true, ngImport: i0, template: "<!-- Speech bubbles are rendered imperatively via ComicBalloon SVG renderer -->\n<div class=\"speech-bubbles-container\"></div>\n", styles: [":host{display:block;position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:20}.speech-bubbles-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.speech-bubble-wrapper{position:absolute;pointer-events:auto;cursor:pointer;z-index:10;animation:bubbleAppear .3s ease-out}.speech-bubble-wrapper:focus{outline:2px solid rgba(0,120,255,.6);outline-offset:4px;border-radius:4px}.speech-bubble-wrapper:hover{filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}.balloon-container{display:inline-block;position:relative}.balloon-container :deep(.comic-balloon-svg){display:block;overflow:visible}@keyframes bubbleAppear{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SpeechBubblesComponent, decorators: [{
             type: Component,
@@ -12073,6 +12679,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], readingScale: [{
                 type: Input
+            }], anchorTailTip: [{
+                type: Input
             }], workBalloonConfig: [{
                 type: Input
             }], characters: [{
@@ -12100,6 +12708,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 +12762,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 +12886,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 +13244,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 +13318,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 +14247,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 +14268,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 +14780,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                              [anchorTailTip]=\"true\"\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                          [anchorTailTip]=\"true\"\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", "anchorTailTip", "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                              [anchorTailTip]=\"true\"\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                          [anchorTailTip]=\"true\"\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 +15990,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", "anchorTailTip", "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 +16502,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 +16585,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();
@@ -19091,6 +19810,7 @@ class PlayerShellComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.audioEngine = inject(AudioEngineService);
         this.panelAudio = inject(PanelAudioService);
+        this.sequenceAudio = inject(SequenceAudioService);
         /**
          * Reading order per panel id (1-based, across chapters), computed once per
          * manifest. Reported as `panelOrder` on panel_view / funnel events and as
@@ -19227,6 +19947,7 @@ class PlayerShellComponent {
         this.autoplayEnabled = false;
         this.videoSequencer.reset();
         this.panelAudio.stopAll();
+        this.sequenceAudio.stopAll();
         this.endAnalyticsSession();
         this.analyticsSessionStarted = this.analyticsSessionEnded = this.workCompleteTracked = false;
         this.lastTrackedPanelId = undefined;
@@ -19293,6 +20014,7 @@ class PlayerShellComponent {
         this.stopAutoplayProgress();
         this.videoSequencer.reset();
         this.panelAudio.stopAll();
+        this.sequenceAudio.stopAll();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -19850,6 +20572,9 @@ class PlayerShellComponent {
             (isLockedPanel(panel) || (panelId !== undefined && this.paywallService.isPanelLocked(panelId)));
         // Under the cover the story has not started yet: no panel audio.
         this.panelAudio.syncPanel(panelId, locked || this.coverVisible ? undefined : panel, this.variableContext);
+        // Timeline music/ambience follows the reader's position on the work line
+        // (silent under the cover and on locked panels too).
+        this.sequenceAudio.syncPanel(locked || this.coverVisible ? undefined : panelId, this.activePageFormat);
     }
     /**
      * Hotspot activated in the viewport (click or keyboard): execute its
@@ -21241,6 +21966,8 @@ class PlayerShellComponent {
             return;
         }
         this.activePageFormat = next;
+        // The format decides the panel line timeline audio is placed on.
+        this.syncPanelAudio();
         if (this.viewMode === 'page') {
             const page = this.findPageContainingPanel();
             if (page && page.id !== this.currentPage?.id) {
@@ -22132,5 +22859,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANONYMOUS_READER, ActionModalComponent, AgeGateComponent, AssetUrlService, AudioEngineService, BranchChooserComponent, CANVAS_PANEL_BUDGET, CanvasCameraService, CanvasStageComponent, ComicBalloon, DEFAULT_BALLOON_CONFIG, DEFAULT_PAGE_BACKGROUND, DEFAULT_STALL_TIMEOUT_MS, DEFAULT_VIDEO_MUTED, DEFAULT_VIDEO_PLAY_MODE, DEFAULT_VIDEO_START_MODE, EntitlementError, EntitlementService, ExportService, FlowEngineService, HotspotActionService, HotspotsOverlayComponent, HttpEntitlementAdapter, ImageCacheService, LOCATION_PARAMS, ManifestService, MockEntitlementAdapter, NullEntitlementAdapter, PANEL_AUDIO_LEAVE_FADE_MS, PanelAudioService, PaywallOverlayComponent, PaywallService, PlayerComponent, PlayerEvent, PlayerService, PlayerShellComponent, PlayerStateService, PluginHostService, PluginSandboxComponent, PreloadService, PwIconComponent, RESERVED_NAMESPACES, SpeechBubblesComponent, THUMBNAIL_WIDTH, TrackingService, TranslationService, UserGestureService, VISIBILITY_THRESHOLD, VariableStoreService, VideoControllerService, VideoLayerComponent, VideoSequencerService, VisibilityService, applyVariantOverrides, balloonConfigToRenderOptions, balloonConfigToTailOptions, busForRole, chapterOrderFromManifest, coverImageSrc, createBalloon, evaluatePanelAccess, evaluateWorkAccess, findWorkGateRule, fromManifestRule, isExtraLocked, isLockedPanel, locationUrl, mergeBalloonConfig, pageAspectRatio, pageFormatOf, pageFormatsOf, pagesForFormat, panelThumbnailSrc, parseLocationSearch, pickPageFormat, rankPageFormats, readingOrderFromManifest, resolveMuted, resolvePageBackground, resolvePanelVariant, resolvePanels, resolvePlayMode, resolveStartMode, resolveVideoConfig, rulesFromManifest, satisfiesRule, screenClassFor, selectVariant, toEntitlementStatus };
+export { ANONYMOUS_READER, ActionModalComponent, AgeGateComponent, AssetUrlService, AudioEngineService, BranchChooserComponent, CANVAS_PANEL_BUDGET, CanvasCameraService, CanvasStageComponent, ComicBalloon, DEFAULT_BALLOON_CONFIG, DEFAULT_PAGE_BACKGROUND, DEFAULT_STALL_TIMEOUT_MS, DEFAULT_VIDEO_MUTED, DEFAULT_VIDEO_PLAY_MODE, DEFAULT_VIDEO_START_MODE, EntitlementError, EntitlementService, ExportService, FlowEngineService, HotspotActionService, HotspotsOverlayComponent, HttpEntitlementAdapter, ImageCacheService, LOCATION_PARAMS, ManifestService, MockEntitlementAdapter, NullEntitlementAdapter, PANEL_AUDIO_LEAVE_FADE_MS, PanelAudioService, PaywallOverlayComponent, PaywallService, PlayerComponent, PlayerEvent, PlayerService, PlayerShellComponent, PlayerStateService, PluginHostService, PluginSandboxComponent, PreloadService, PwIconComponent, RESERVED_NAMESPACES, SEQUENCE_AUDIO_LEAVE_FADE_MS, SequenceAudioService, SpeechBubblesComponent, THUMBNAIL_WIDTH, TrackingService, TranslationService, UserGestureService, VISIBILITY_THRESHOLD, VariableStoreService, VideoControllerService, VideoLayerComponent, VideoSequencerService, VisibilityService, applyVariantOverrides, balloonConfigToRenderOptions, balloonConfigToTailOptions, buildWorkTimeline, busForRole, chapterOrderFromManifest, coverImageSrc, createBalloon, cuesForPanel, evaluatePanelAccess, evaluateWorkAccess, findWorkGateRule, fromManifestRule, isExtraLocked, isLockedPanel, locationUrl, mergeBalloonConfig, pageAspectRatio, pageFormatOf, pageFormatsOf, pagesForFormat, panelThumbnailSrc, parseLocationSearch, pickPageFormat, rankPageFormats, readingOrderFromManifest, resolveMuted, resolvePageBackground, resolvePanelVariant, resolvePanels, resolvePlayMode, resolveStartMode, resolveTrackRanges, resolveVideoConfig, rulesFromManifest, satisfiesRule, screenClassFor, selectVariant, toEntitlementStatus };
 //# sourceMappingURL=panelwave-player.mjs.map