@panelwave/player 1.5.0 → 1.6.1

package/fesm2022/panelwave-player.mjs

@@ -5456,6 +5456,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Manages audio playback with Web Audio API
  */
 const ROLES = ['ambient', 'music', 'voiceover', 'sfx'];
+/**
+ * Whether an audio URL must be loaded with `crossOrigin = 'anonymous'`: an
+ * http(s) file on another origin than the page. Same-origin files, data:/
+ * blob: URLs and `file:` pages (the offline self-hosting package) stay in
+ * no-CORS mode — CORS requests from a file: page fail.
+ */
+function needsCorsMode(url, pageHref = typeof location !== 'undefined' ? location.href : '') {
+    try {
+        const target = new URL(url, pageHref || undefined);
+        if (target.protocol !== 'http:' && target.protocol !== 'https:') {
+            return false;
+        }
+        const page = pageHref ? new URL(pageHref) : null;
+        if (page && page.protocol !== 'http:' && page.protocol !== 'https:') {
+            return false;
+        }
+        return !page || target.origin !== page.origin;
+    }
+    catch {
+        return false;
+    }
+}
 /**
  * Audio Engine Service
  * Provides Web Audio API-based audio playback with multiple buses.
@@ -5571,10 +5593,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
@@ -5859,9 +5881,20 @@ class AudioEngineService {
         if (!bus) {
             throw new Error(`Invalid role: ${track.role}`);
         }
-        // Create audio element
-        const audio = new Audio(track.url);
+        // Create audio element. A file from another origin (object storage, a
+        // CDN) must be fetched in CORS mode: routed through Web Audio
+        // (createMediaElementSource below), a no-CORS cross-origin element plays
+        // but outputs silence. crossOrigin has to be set before the src.
+        const audio = new Audio();
+        if (needsCorsMode(track.url)) {
+            audio.crossOrigin = 'anonymous';
+        }
+        audio.src = 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;
         }
@@ -5884,9 +5917,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();
@@ -6040,6 +6075,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
  *
@@ -6250,61 +6660,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;
@@ -11932,6 +12303,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)
          */
@@ -11987,6 +12366,7 @@ class SpeechBubblesComponent {
             changes['containerWidth'] ||
             changes['containerHeight'] ||
             changes['readingScale'] ||
+            changes['anchorTailTip'] ||
             changes['workBalloonConfig'] ||
             changes['characters'];
         if (needsRerender) {
@@ -12118,7 +12498,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) {
@@ -12129,18 +12510,37 @@ 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;
                 // Auto-grow (schema 1.8 textFit): when the text needed more room than
@@ -12183,14 +12583,28 @@ class SpeechBubblesComponent {
                 const eps = Math.max(4, 0.02 * Math.min(this.containerWidth, this.containerHeight));
                 let centerX = pos.left + grownOffsetX - bodyOffsetX * scale;
                 let centerY = pos.top + grownOffsetY - bodyOffsetY * scale;
-                if (boxLeft <= eps)
-                    centerX = visualW / 2;
-                else if (boxRight >= this.containerWidth - eps)
-                    centerX = this.containerWidth - visualW / 2;
-                if (boxTop <= eps)
-                    centerY = visualH / 2;
-                else if (boxBottom >= this.containerHeight - eps)
-                    centerY = this.containerHeight - visualH / 2;
+                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);
@@ -12279,7 +12693,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,
@@ -12294,6 +12708,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 type: Input
             }], readingScale: [{
                 type: Input
+            }], anchorTailTip: [{
+                type: Input
             }], workBalloonConfig: [{
                 type: Input
             }], characters: [{
@@ -14393,11 +14809,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               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [bubbles]=\"panel.speechBubbles ?? []\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [bubbles]=\"panelData.speechBubbles ?? []\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"], dependencies: [{ kind: "component", type: LayerRendererComponent, selector: "pw-layer-renderer", inputs: ["layer", "locale", "targetWidth", "altText", "viewMode", "viewActive", "reducedMotion", "panelId", "placementId", "readingOrderIndex", "placementZ", "placementY", "placementX"], outputs: ["layerClick"] }, { kind: "component", type: SpeechBubblesComponent, selector: "pw-speech-bubbles", inputs: ["bubbles", "locale", "containerWidth", "containerHeight", "readingScale", "workBalloonConfig", "characters"], outputs: ["bubbleClick", "bubbleAudioPlay"] }, { kind: "component", type: HotspotsOverlayComponent, selector: "pw-hotspots-overlay", inputs: ["hotspots", "bubbles", "locale", "containerWidth", "containerHeight", "context", "interactive", "showIndicators"], outputs: ["hotspotActivate"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "directive", type: PanelAnimationDirective, selector: "[pwPanelAnimation]", inputs: ["pwPanelAnimation", "pwPanelAnimationKey", "pwPanelAnimationReducedMotion", "pwPanelAnimationStatic"] }, { kind: "component", type: LockedPanelComponent, selector: "pw-locked-panel-placeholder", inputs: ["actionable"], outputs: ["activate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"leavingPanel.animations\"\n               [pwPanelAnimationKey]=\"leavingPanelId || ''\"\n               [pwPanelAnimationStatic]=\"true\">\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(leavingPanel, leavingPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                @for (layer of leavingPanel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"false\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(leavingPanelId)\"\n                    [panelId]=\"leavingPanelId\">\n                  </pw-layer-renderer>\n                }\n\n                @if (speechEnabled && leavingPanel.speechBubbles && leavingPanel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"leavingPanel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <div [class]=\"'t-frame ' + enterAnimationClass\">\n        @if (panel) {\n          <div class=\"panel-container\" tabindex=\"0\"\n               [style.width.px]=\"panelBox?.width\"\n               [style.height.px]=\"panelBox?.height\"\n               [pwPanelAnimation]=\"panel.animations\"\n               [pwPanelAnimationKey]=\"currentPanelId || ''\"\n               [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n               (click)=\"onPanelContainerClick($event, currentPanelId)\" (keydown.enter)=\"onPanelContainerClick($any($event), currentPanelId)\">\n            <!-- Everything that belongs to the artwork; a camera move transforms it as one. -->\n            <div class=\"pw-panel-camera\">\n              @if (isLocked(panel, currentPanelId)) {\n                <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n              } @else {\n                <!-- Render layers using LayerRenderer -->\n                @for (layer of panel.layers; track layer.id) {\n                  <pw-layer-renderer\n                    [layer]=\"layer\"\n                    [locale]=\"locale\"\n                    [viewMode]=\"viewMode\"\n                    [viewActive]=\"true\"\n                    [reducedMotion]=\"reducedMotion\"\n                    [targetWidth]=\"targetWidthFor(currentPanelId)\"\n                    [panelId]=\"currentPanelId || ''\"\n                    (layerClick)=\"layerClick.emit($event)\">\n                  </pw-layer-renderer>\n                }\n\n                <!-- Interactive hotspots overlay (below speech bubbles) -->\n                @if (interactive && panel.hotspots && panel.hotspots.length > 0) {\n                  <pw-hotspots-overlay\n                    [hotspots]=\"panel.hotspots\"\n                    [bubbles]=\"panel.speechBubbles ?? []\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [context]=\"variableContext\"\n                    (hotspotActivate)=\"onHotspotActivate($event, currentPanelId)\">\n                  </pw-hotspots-overlay>\n                }\n\n                <!-- Speech bubbles overlay for panel view -->\n                @if (speechEnabled && panel.speechBubbles && panel.speechBubbles.length > 0) {\n                  <pw-speech-bubbles\n                    [bubbles]=\"panel.speechBubbles\"\n                    [locale]=\"locale\"\n                    [containerWidth]=\"getContainerWidth()\"\n                    [containerHeight]=\"getContainerHeight()\"\n                    [readingScale]=\"getReadingScale()\"\n                    [workBalloonConfig]=\"workBalloonConfig\"\n                    [characters]=\"characters\">\n                  </pw-speech-bubbles>\n                }\n              }\n            </div>\n          </div>\n        } @else {\n          <div class=\"no-panel\">\n            <p>No panel to display</p>\n          </div>\n        }\n      </div>\n    </div>\n  }\n  \n  <!-- Page View -->\n  @if (viewMode === 'page' && page) {\n    <div\n      class=\"viewport-page\"\n      [style.--pw-page-aspect]=\"pageAspect\"\n      [style.--pw-stage-aspect]=\"stageAspect\"\n      [style.--pw-fit-x]=\"pageFit.x\"\n      [style.--pw-fit-y]=\"pageFit.y\"\n      [style.--pw-fit-w]=\"pageFit.w\"\n      [style.--pw-fit-h]=\"pageFit.h\">\n      <div class=\"page-stage\">\n        <!-- Outgoing page during a Page.transitions in/out change -->\n        @if (leavingPage) {\n          <div\n            [class]=\"'pt-frame-leave ' + pageLeaveClass + (pageLeaveAbove ? ' pt-frame-leave--above' : '')\"\n            [style.--pw-t-duration]=\"pageLeaveDuration\"\n            [style.--pw-t-easing]=\"pageLeaveEasing\"\n            aria-hidden=\"true\">\n            <div class=\"page-canvas\" [style.background-color]=\"pageBackgroundOf(leavingPage)\">\n              @for (placement of getLeavingPagePlacements(); track placement.panelId) {\n                <div\n                  class=\"panel-container\"\n                  [style.left.%]=\"toPercent(placement.x)\"\n                  [style.top.%]=\"toPercent(placement.y)\"\n                  [style.width.%]=\"toPercent(placement.w)\"\n                  [style.height.%]=\"toPercent(placement.h)\"\n                  [style.z-index]=\"placement.z || 0\"\n                  [style.transform]=\"getPanelTransform(placement)\"\n                  [style.transform-origin]=\"getTransformOrigin(placement)\">\n\n                  @if (isBranchHidden(placement.panelId)) {\n                    <div class=\"branch-placeholder\" aria-hidden=\"true\"></div>\n                  } @else if (getLeavingPanel(placement.panelId); as panelData) {\n                    <div class=\"panel-content\"\n                         [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                         [style.transform]=\"getPanelContentTransform(placement)\"\n                         [pwPanelAnimation]=\"panelData.animations\"\n                         [pwPanelAnimationKey]=\"placement.panelId\"\n                         [pwPanelAnimationStatic]=\"true\">\n                      <div class=\"pw-panel-camera\">\n                        @if (isLocked(panelData, placement.panelId)) {\n                          <pw-locked-panel-placeholder></pw-locked-panel-placeholder>\n                        } @else {\n                          @for (layer of panelData.layers; track layer.id) {\n                            <pw-layer-renderer\n                              [layer]=\"layer\"\n                              [locale]=\"locale\"\n                              [viewMode]=\"viewMode\"\n                              [viewActive]=\"false\"\n                              [reducedMotion]=\"reducedMotion\"\n                              [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                              [panelId]=\"placement.panelId\"\n                              [placementId]=\"placement.panelId\">\n                            </pw-layer-renderer>\n                          }\n\n                          @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                            <pw-speech-bubbles\n                              [bubbles]=\"panelData.speechBubbles\"\n                              [locale]=\"locale\"\n                              [containerWidth]=\"getPagePanelWidth(placement)\"\n                              [containerHeight]=\"getPagePanelHeight(placement)\"\n                              [readingScale]=\"getPageReadingScale(placement)\"\n                              [workBalloonConfig]=\"workBalloonConfig\"\n                              [characters]=\"characters\">\n                            </pw-speech-bubbles>\n                          }\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n\n        <div\n          [class]=\"'pt-frame ' + pageEnterClass\"\n          [style.--pw-t-duration]=\"pageEnterDuration\"\n          [style.--pw-t-easing]=\"pageEnterEasing\">\n      <div\n        class=\"page-canvas\"\n        [style.background-color]=\"pageBackgroundOf(page)\"\n        [attr.tabindex]=\"-1\"\n        (click)=\"onPanelClickWithFocus($event)\"\n        (keydown.enter)=\"onCanvasKeyboardActivate($event)\"\n        (keydown.space)=\"onCanvasKeyboardActivate($event)\">\n        \n        @for (placement of getSortedPanels(); track placement.panelId) {\n          @if (isPanelVisible(placement)) {\n            <div \n              class=\"panel-container\"\n              [class.panel-focused]=\"isPanelFocused(placement.panelId)\"\n              [style.left.%]=\"toPercent(placement.x)\"\n              [style.top.%]=\"toPercent(placement.y)\"\n              [style.width.%]=\"toPercent(placement.w)\"\n              [style.height.%]=\"toPercent(placement.h)\"\n              [style.z-index]=\"placement.z || 0\"\n              [style.transform]=\"getPanelTransform(placement)\"\n              [style.transform-origin]=\"getTransformOrigin(placement)\"\n              [attr.data-panel-id]=\"placement.panelId\"\n              [class.panel-branch-hidden]=\"isBranchHidden(placement.panelId)\"\n              [attr.aria-hidden]=\"isBranchHidden(placement.panelId) ? 'true' : null\"\n              [attr.tabindex]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 0\"\n              [attr.role]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'button'\"\n              [attr.aria-label]=\"isBranchHidden(placement.panelId) || panelHasHotspots(placement.panelId) ? null : 'Panel ' + placement.panelId\"\n              [attr.loading]=\"getImageLoadingStrategy()\"\n              (click)=\"onPanelClick($event, placement.panelId)\"\n              (keydown.enter)=\"onPanelKeyboardActivate($event, placement.panelId)\"\n              (keydown.space)=\"onPanelKeyboardActivate($event, placement.panelId)\">\n              \n              @if (isBranchHidden(placement.panelId)) {\n                <!-- Not on the reader's path (yet): a grey box keeps the page's shape. -->\n                <div class=\"branch-placeholder\"></div>\n              } @else if (getPanel(placement.panelId); as panelData) {\n                <div class=\"panel-content\"\n                     [style.clip-path]=\"getPanelContentClipPath(placement)\"\n                     [style.transform]=\"getPanelContentTransform(placement)\"\n                     [pwPanelAnimation]=\"panelData.animations\"\n                     [pwPanelAnimationKey]=\"placement.panelId\"\n                     [pwPanelAnimationReducedMotion]=\"reducedMotion\"\n                     tabindex=\"0\"\n                     (click)=\"onPanelContainerClick($event, placement.panelId)\"\n                     (keydown.enter)=\"onPanelContainerClick($any($event), placement.panelId)\">\n                  <div class=\"pw-panel-camera\">\n                    @if (isLocked(panelData, placement.panelId)) {\n                      <pw-locked-panel-placeholder\n                        [actionable]=\"true\"\n                        (activate)=\"lockedPanelActivate.emit(placement.panelId)\"></pw-locked-panel-placeholder>\n                    } @else {\n                      <!-- Render panel layers -->\n                      @for (layer of panelData.layers; track layer.id) {\n                        <pw-layer-renderer\n                          [layer]=\"layer\"\n                          [locale]=\"locale\"\n                          [altText]=\"getAltText(layer)\"\n                          [viewMode]=\"viewMode\"\n                          [reducedMotion]=\"reducedMotion\"\n                          [targetWidth]=\"targetWidthFor(placement.panelId)\"\n                          [panelId]=\"placement.panelId\"\n                          [placementId]=\"placement.panelId\"\n                          [readingOrderIndex]=\"readingOrderIndexOf(placement.panelId)\"\n                          [placementZ]=\"placement.z || 0\"\n                          [placementY]=\"placement.y\"\n                          [placementX]=\"placement.x\"\n                          (layerClick)=\"layerClick.emit($event)\">\n                        </pw-layer-renderer>\n                      }\n\n                      <!-- Interactive hotspots overlay for page view panels -->\n                      @if (interactive && panelData.hotspots && panelData.hotspots.length > 0) {\n                        <pw-hotspots-overlay\n                          [hotspots]=\"panelData.hotspots\"\n                          [bubbles]=\"panelData.speechBubbles ?? []\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [context]=\"variableContext\"\n                          (hotspotActivate)=\"onHotspotActivate($event, placement.panelId)\">\n                        </pw-hotspots-overlay>\n                      }\n\n                      <!-- Speech bubbles overlay for page view panels -->\n                      @if (speechEnabled && panelData.speechBubbles && panelData.speechBubbles.length > 0) {\n                        <pw-speech-bubbles\n                          [bubbles]=\"panelData.speechBubbles\"\n                          [locale]=\"locale\"\n                          [containerWidth]=\"getPagePanelWidth(placement)\"\n                          [containerHeight]=\"getPagePanelHeight(placement)\"\n                          [readingScale]=\"getPageReadingScale(placement)\"\n                          [workBalloonConfig]=\"workBalloonConfig\"\n                          [characters]=\"characters\">\n                        </pw-speech-bubbles>\n                      }\n                    }\n                  </div>\n                </div>\n              }\n              \n              <!-- Focus indicator for rotated panels -->\n              @if (isPanelFocused(placement.panelId)) {\n                <div class=\"focus-rect\" aria-hidden=\"true\"></div>\n              }\n            </div>\n          }\n        }\n      </div>\n        </div>\n      </div>\n    </div>\n  }\n\n  @if (viewMode === 'page' && !page) {\n    <div class=\"no-panel\">\n      <p>No page to display</p>\n    </div>\n  }\n\n  <!-- Overflow navigation arrows -->\n  @if (showOverflowArrows && panel) {\n    @if (hasOverflowLeft) {\n      <button \n        class=\"overflow-arrow overflow-left\"\n        type=\"button\"\n        aria-label=\"Navigate left\"\n        (click)=\"navigateLeft()\">\n        <pw-icon name=\"lucideChevronLeft\" />\n      </button>\n    }\n\n    @if (hasOverflowRight) {\n      <button \n        class=\"overflow-arrow overflow-right\"\n        type=\"button\"\n        aria-label=\"Navigate right\"\n        (click)=\"navigateRight()\">\n        <pw-icon name=\"lucideChevronRight\" />\n      </button>\n    }\n\n    @if (hasOverflowTop) {\n      <button \n        class=\"overflow-arrow overflow-top\"\n        type=\"button\"\n        aria-label=\"Navigate up\"\n        (click)=\"navigateUp()\">\n        <pw-icon name=\"lucideChevronUp\" />\n      </button>\n    }\n\n    @if (hasOverflowBottom) {\n      <button \n        class=\"overflow-arrow overflow-bottom\"\n        type=\"button\"\n        aria-label=\"Navigate down\"\n        (click)=\"navigateDown()\">\n        <pw-icon name=\"lucideChevronDown\" />\n      </button>\n    }\n  }\n\n  <!-- Navigation arrows (hover zones) -->\n  @if (viewMode === 'panel' || (viewMode === 'page' && page)) {\n    @if (showLeftArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-left\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Previous page' : 'Previous panel'\"\n        (click)=\"onNavigatePrevious(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronLeft\" /></span>\n      </button>\n    }\n\n    @if (showRightArrow) {\n      <button \n        class=\"nav-arrow nav-arrow-right\"\n        type=\"button\"\n        [attr.aria-label]=\"viewMode === 'page' ? 'Next page' : 'Next panel'\"\n        (click)=\"onNavigateNext(); $event.stopPropagation()\">\n        <span class=\"arrow-icon\"><pw-icon name=\"lucideChevronRight\" /></span>\n      </button>\n    }\n  }\n</div>\n", styles: [".viewport-container{position:relative;width:100%;height:100%;overflow:hidden;background-color:#1a1a1a;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.viewport-container:active{cursor:grabbing}.viewport-container.interactive{cursor:default}.viewport-content{position:absolute;top:50%;left:50%;transform-origin:center center;will-change:transform}.viewport-content.reduced-motion{transition:none!important}.panel-container{position:relative;background:transparent;width:1280px;height:720px;max-width:100%;max-height:100%}.pw-panel-camera{position:absolute;inset:0}.t-frame{position:relative;z-index:1}.t-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.t-fade-in{animation:pw-t-fade-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-in{animation:pw-t-zoom-in var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-right{animation:pw-t-from-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-left{animation:pw-t-from-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-bottom{animation:pw-t-from-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-from-top{animation:pw-t-from-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-left{animation:pw-t-to-left var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-right{animation:pw-t-to-right var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-top{animation:pw-t-to-top var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-to-bottom{animation:pw-t-to-bottom var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-in{0%{opacity:0}to{opacity:1}}@keyframes pw-t-zoom-in{0%{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes pw-t-from-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes pw-t-from-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes pw-t-from-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes pw-t-from-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes pw-t-to-left{0%{transform:translate(0)}to{transform:translate(-100%)}}@keyframes pw-t-to-right{0%{transform:translate(0)}to{transform:translate(100%)}}@keyframes pw-t-to-top{0%{transform:translateY(0)}to{transform:translateY(-100%)}}@keyframes pw-t-to-bottom{0%{transform:translateY(0)}to{transform:translateY(100%)}}.layer{position:absolute;top:0;left:0}.layer-placeholder{padding:20px;background:#0078d71a;border:1px dashed rgba(0,120,215,.3);color:#0078d7;font-size:14px}.no-panel{display:flex;align-items:center;justify-content:center;min-width:400px;min-height:300px;color:#666}.reduced-motion *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.overflow-arrow{position:absolute;z-index:100;background:#0009;color:#fff;border:none;border-radius:4px;width:40px;height:40px;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;box-shadow:0 2px 8px #0000004d}.overflow-arrow:hover{background:#000c;transform:scale(1.1)}.overflow-arrow:active{transform:scale(.95)}.overflow-left{left:20px;top:50%;transform:translateY(-50%)}.overflow-left:hover{transform:translateY(-50%) scale(1.1)}.overflow-right{right:20px;top:50%;transform:translateY(-50%)}.overflow-right:hover{transform:translateY(-50%) scale(1.1)}.overflow-top{top:20px;left:50%;transform:translate(-50%)}.overflow-top:hover{transform:translate(-50%) scale(1.1)}.overflow-bottom{bottom:20px;left:50%;transform:translate(-50%)}.overflow-bottom:hover{transform:translate(-50%) scale(1.1)}.viewport-page{width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;box-sizing:border-box;container-type:size}.page-canvas{position:relative;width:100%;aspect-ratio:var(--pw-page-aspect, 16 / 9);background:#1a1a1a;overflow:hidden}.page-stage{position:relative;width:min(100cqw,100cqh * var(--pw-stage-aspect, var(--pw-page-aspect, 1.7778)));aspect-ratio:var(--pw-stage-aspect, var(--pw-page-aspect, 16 / 9));flex:none;overflow:hidden}.page-stage .page-canvas{position:absolute;left:calc(-100% * var(--pw-fit-x, 0) / var(--pw-fit-w, 1));top:calc(-100% * var(--pw-fit-y, 0) / var(--pw-fit-h, 1));width:calc(100% / var(--pw-fit-w, 1));height:calc(100% / var(--pw-fit-h, 1));max-width:none;aspect-ratio:auto}.pt-frame{position:relative;z-index:1;width:100%;height:100%}.pt-frame-leave{position:absolute;inset:0;z-index:0;pointer-events:none}.pt-frame-leave--above{z-index:2}.pt-frame.t-fade-in,.pt-frame.t-zoom-in,.pt-frame.t-from-right,.pt-frame.t-from-left,.pt-frame.t-from-bottom,.pt-frame.t-from-top{will-change:transform,opacity}.t-fade-out{animation:pw-t-fade-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}.t-zoom-out{animation:pw-t-zoom-out var(--pw-t-duration, .4s) var(--pw-t-easing, ease) both}@keyframes pw-t-fade-out{0%{opacity:1}to{opacity:0}}@keyframes pw-t-zoom-out{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.06)}}.branch-placeholder{position:absolute;inset:0;background:#c9ccd1;border-radius:inherit}.viewport-page .panel-container.panel-branch-hidden{pointer-events:none}.viewport-page .panel-container{position:absolute;overflow:hidden;background:#000;border:1px solid rgba(255,255,255,.1);border-radius:2px;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;transform-origin:center center;outline:none}.viewport-page .panel-container:hover{border-color:#ffffff4d;cursor:pointer}.viewport-page .panel-container.panel-focused{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d74d,0 4px 12px #0006;z-index:9999!important}.focus-rect{position:absolute;inset:-4px;border:3px solid rgba(0,120,215,.9);border-radius:4px;pointer-events:none;animation:focusPulse 1.5s ease-in-out infinite}@keyframes focusPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.02)}}@media (prefers-reduced-motion: reduce){.focus-rect{animation:none}.viewport-page .panel-container{transition:none}}.viewport-page .panel-content{position:relative;width:100%;height:100%}.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);width:60px;height:120px;background:#0006;border:none;color:#fff;font-size:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;animation:fadeInArrow .2s ease}.nav-arrow:hover{background:#0009;width:70px}.nav-arrow:active{background:#000000b3;transform:translateY(-50%) scale(.95)}.nav-arrow-left{left:0;border-radius:0 8px 8px 0}.nav-arrow-right{right:0;border-radius:8px 0 0 8px}.arrow-icon{font-size:48px;line-height:1;font-weight:300}@keyframes fadeInArrow{0%{opacity:0}to{opacity:1}}@media (prefers-reduced-motion: reduce){.nav-arrow{animation:none;transition:none}}@media (max-width: 768px){.nav-arrow{width:50px;height:100px;font-size:36px}.nav-arrow:hover{width:55px}.arrow-icon{font-size:36px}}\n"] }]
+            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: [{
@@ -15603,7 +16019,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", "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 }); }
+    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,
@@ -19423,6 +19839,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
@@ -19559,6 +19976,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;
@@ -19625,6 +20043,7 @@ class PlayerShellComponent {
         this.stopAutoplayProgress();
         this.videoSequencer.reset();
         this.panelAudio.stopAll();
+        this.sequenceAudio.stopAll();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -20182,6 +20601,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
@@ -21573,6 +21995,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) {
@@ -22464,5 +22888,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