@panelwave/player 1.1.0 → 1.2.0

package/fesm2022/panelwave-player.mjs

@@ -4,12 +4,11 @@ import { BehaviorSubject, throwError, of, Subject, takeUntil } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { map, catchError, distinctUntilChanged } from 'rxjs/operators';
 import jsonLogic from 'json-logic-js';
-import * as i1$1 from '@ngx-translate/core';
-import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import { DomSanitizer } from '@angular/platform-browser';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i1$2 from '@angular/forms';
+import * as i1$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 
 /**
@@ -8767,8 +8766,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
 class TranslationService {
     constructor() {
         this.translate = inject(TranslateService);
-        // Set default language - translations will be loaded via HTTP
-        this.translate.setDefaultLang('en');
+        // Fallback language - translations will be loaded via HTTP.
+        // setFallbackLang / getCurrentLang / getFallbackLang exist in
+        // ngx-translate 17 and 18 (the default* aliases are gone in 18).
+        this.translate.setFallbackLang('en');
         this.translate.use('en');
     }
     /**
@@ -8789,7 +8790,7 @@ class TranslationService {
      * Get current GUI language
      */
     getCurrentLanguage() {
-        return this.translate.currentLang || this.translate.defaultLang || 'en';
+        return this.translate.getCurrentLang() || this.translate.getFallbackLang() || 'en';
     }
     /**
      * Extract language code from locale code
@@ -13854,11 +13855,11 @@ class ToolbarComponent {
         this.close.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ToolbarComponent, isStandalone: true, selector: "pw-toolbar", inputs: { locale: "locale", availableLocales: "availableLocales", viewMode: "viewMode", pageViewAvailable: "pageViewAvailable", speechEnabled: "speechEnabled", audioEnabled: "audioEnabled", sfxEnabled: "sfxEnabled", autoplayEnabled: "autoplayEnabled", secondsPerPanel: "secondsPerPanel", autoplayProgress: "autoplayProgress", thumbnailsVisible: "thumbnailsVisible", hasAlternatives: "hasAlternatives", hasBranches: "hasBranches", liked: "liked", bookmarked: "bookmarked", showSocial: "showSocial", visible: "visible" }, outputs: { toggleView: "toggleView", localeChange: "localeChange", toggleSpeech: "toggleSpeech", toggleAudio: "toggleAudio", toggleSfx: "toggleSfx", toggleAutoplay: "toggleAutoplay", secondsPerPanelChange: "secondsPerPanelChange", toggleThumbnails: "toggleThumbnails", openToc: "openToc", openSettings: "openSettings", openCharacters: "openCharacters", cycleAlternative: "cycleAlternative", showBranches: "showBranches", openExtras: "openExtras", like: "like", bookmark: "bookmark", share: "share", openComments: "openComments", close: "close", openLanguage: "openLanguage" }, ngImport: i0, template: "<div class=\"toolbar-container\" [class.visible]=\"visible\">\n  <div class=\"toolbar\">\n    <!-- Left section: View and navigation controls -->\n    <div class=\"toolbar-section toolbar-left\">\n      <!-- View toggle (page/panel) -->\n      <button\n        class=\"toolbar-btn\"\n        [class.disabled]=\"!pageViewAvailable\"\n        [disabled]=\"!pageViewAvailable\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.view_toggle' | translate\"\n        [attr.title]=\"'toolbar.view_toggle' | translate\"\n        (click)=\"onToggleView()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"viewMode === 'page' ? 'lucideLayoutGrid' : viewMode === 'canvas' ? 'lucideGlobe' : 'lucideSquare'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.view' | translate }}</span>\n      </button>\n\n      <!-- Language selector -->\n      @if (availableLocales.length > 1) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.select_language' | translate\"\n          (click)=\"openLanguage.emit()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n          <span class=\"btn-label\">{{ locale }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Center section: Content controls -->\n    <div class=\"toolbar-section toolbar-center\">\n      <!-- Speech bubbles toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"speechEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.speech_toggle' | translate\"\n        [attr.aria-pressed]=\"speechEnabled\"\n        [attr.title]=\"'toolbar.speech_toggle' | translate\"\n        (click)=\"onToggleSpeech()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMessageSquare\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.speech' | translate }}</span>\n      </button>\n\n      <!-- Audio toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"audioEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.audio_toggle' | translate\"\n        [attr.aria-pressed]=\"audioEnabled\"\n        [attr.title]=\"'toolbar.audio_toggle' | translate\"\n        (click)=\"onToggleAudio()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"audioEnabled ? 'lucideVolume2' : 'lucideVolumeX'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.audio' | translate }}</span>\n      </button>\n\n      <!-- SFX toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"sfxEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.sfx_toggle' | translate\"\n        [attr.aria-pressed]=\"sfxEnabled\"\n        [attr.title]=\"'toolbar.sfx_toggle' | translate\"\n        (click)=\"onToggleSfx()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMusic\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.sfx' | translate }}</span>\n      </button>\n\n      <!-- Autoplay control -->\n      <div class=\"toolbar-dropdown\">\n        <button\n          class=\"toolbar-btn toggle-btn autoplay-btn\"\n          [class.active]=\"autoplayEnabled\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.autoplay_toggle' | translate\"\n          [attr.aria-pressed]=\"autoplayEnabled\"\n          [attr.title]=\"'toolbar.autoplay_toggle' | translate\"\n          (click)=\"onToggleAutoplay()\">\n          <span class=\"btn-icon\"><pw-icon [name]=\"autoplayEnabled ? 'lucidePause' : 'lucidePlay'\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.autoplay' | translate }}</span>\n          @if (autoplayEnabled) {\n            <div class=\"autoplay-progress-bar\">\n              <div class=\"autoplay-progress-fill\" [style.width.%]=\"autoplayProgress\"></div>\n            </div>\n          }\n        </button>\n\n        @if (autoplayEnabled) {\n          <div class=\"autoplay-controls\">\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.decrease_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(-1)\">\n              -\n            </button>\n            <span class=\"control-value\">{{ 'toolbar.seconds' | translate: {value: secondsPerPanel} }}</span>\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.increase_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(1)\">\n              +\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Thumbnails toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"thumbnailsVisible\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.thumbs_toggle' | translate\"\n        [attr.aria-pressed]=\"thumbnailsVisible\"\n        [attr.title]=\"'toolbar.thumbs_toggle' | translate\"\n        (click)=\"onToggleThumbnails()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideImages\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.thumbs' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Right section: Navigation and info controls -->\n    <div class=\"toolbar-section toolbar-right\">\n      <!-- Table of Contents -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.toc_open' | translate\"\n        [attr.title]=\"'toolbar.toc_open' | translate\"\n        (click)=\"onOpenToc()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideList\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.toc' | translate }}</span>\n      </button>\n\n      <!-- Settings -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.settings_open' | translate\"\n        [attr.title]=\"'toolbar.settings_open' | translate\"\n        (click)=\"onOpenSettings()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSettings\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.settings' | translate }}</span>\n      </button>\n\n      <!-- Characters -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.characters_open' | translate\"\n        [attr.title]=\"'toolbar.characters_open' | translate\"\n        (click)=\"onOpenCharacters()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideUsers\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.characters' | translate }}</span>\n      </button>\n\n      <!-- Alternatives (if available) -->\n      @if (hasAlternatives) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.alt_label' | translate\"\n          [attr.title]=\"'toolbar.alt_cycle' | translate\"\n          (click)=\"onCycleAlternative()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideRefreshCw\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.alt' | translate }}</span>\n        </button>\n      }\n\n      <!-- Branch indicator (if choices ahead) -->\n      @if (hasBranches) {\n        <button\n          class=\"toolbar-btn branch-indicator\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.choices_label' | translate\"\n          [attr.title]=\"'toolbar.choices_view' | translate\"\n          (click)=\"onShowBranches()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideSplit\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.choices' | translate }}</span>\n        </button>\n      }\n\n      <!-- Extras -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.extras' | translate\"\n        [attr.title]=\"'toolbar.extras_open' | translate\"\n        (click)=\"onOpenExtras()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSparkles\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.extras' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Social cluster (rightmost) -->\n    @if (showSocial) {\n      <div class=\"toolbar-section toolbar-social\">\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"liked\"\n          [attr.aria-pressed]=\"liked\"\n          [attr.aria-label]=\"'toolbar.like' | translate\"\n          [attr.title]=\"(liked ? 'toolbar.like_remove' : 'toolbar.like_work') | translate\"\n          (click)=\"onLike()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideHeart\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"bookmarked\"\n          [attr.aria-pressed]=\"bookmarked\"\n          [attr.aria-label]=\"'toolbar.bookmark' | translate\"\n          [attr.title]=\"(bookmarked ? 'toolbar.bookmark_remove' : 'toolbar.bookmark_panel') | translate\"\n          (click)=\"onBookmark()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideBookmark\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.share' | translate\"\n          [attr.title]=\"'toolbar.share_panel' | translate\"\n          (click)=\"onShare()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.comments' | translate\"\n          [attr.title]=\"'toolbar.comments_view' | translate\"\n          (click)=\"onOpenComments()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n        </button>\n      </div>\n    }\n\n    <!-- Close button -->\n    <button\n      class=\"toolbar-btn close-btn\"\n      type=\"button\"\n      [attr.aria-label]=\"'toolbar.close' | translate\"\n      [attr.title]=\"'toolbar.close' | translate\"\n      (click)=\"onClose()\">\n      <span class=\"btn-icon\"><pw-icon name=\"lucideX\" /></span>\n    </button>\n  </div>\n</div>\n", styles: [".toolbar-container{position:fixed;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.7) 70%,transparent);padding:24px 16px 16px;transform:translateY(100%);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:visible}.toolbar-container.visible{transform:translateY(0);opacity:1;pointer-events:auto;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;align-items:center;gap:8px;max-width:1400px;margin:0 auto;overflow-x:auto;overflow-y:visible;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.toolbar::-webkit-scrollbar{height:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.toolbar-section{display:flex;align-items:center;gap:6px;flex-shrink:0}.toolbar-left{margin-right:8px}.toolbar-center{flex:1 0 auto;justify-content:center}.toolbar-right{margin-left:8px}.toolbar-social{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:40px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.toolbar-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}.toolbar-btn:active{background:#ffffff26;transform:translateY(0)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toolbar-btn:disabled:hover{background:#ffffff1a;border-color:#fff3}.toolbar-btn.toggle-btn.active{background:#0078d7cc;border-color:#0078d7}.toolbar-btn.toggle-btn.active:hover{background:#0078d7e6}.toolbar-btn.icon-only{padding:8px;min-width:40px;justify-content:center}.toolbar-btn.icon-only .btn-label{display:none}.toolbar-btn.close-btn{margin-left:8px;background:#ff00004d;border-color:#ff000080}.toolbar-btn.close-btn:hover{background:#ff000080;border-color:#ff0000b3}.toolbar-btn.branch-indicator{background:#ffa5004d;border-color:#ffa50080;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-icon{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-label{font-size:13px;line-height:1}.toolbar-dropdown{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px}.dropdown-menu{position:absolute;bottom:100%;left:0;margin-bottom:8px;min-width:120px;background:#1e1e1ef2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;box-shadow:0 4px 12px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:block;width:100%;padding:8px 12px;font-size:14px;color:#ffffffe6;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:background .2s ease}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.active{background:#0078d780;font-weight:600}.autoplay-controls{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:6px}.control-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#fff3}.control-btn:active{background:#ffffff26;transform:scale(.95)}.control-value{min-width:40px;text-align:center;font-size:13px;font-weight:600;color:#ffffffe6}@media (max-width: 768px){.toolbar-container{padding:16px 8px 8px}.toolbar{gap:4px;padding:4px}.toolbar-section{gap:4px}.toolbar-btn{padding:6px 10px;min-height:36px;font-size:12px}.btn-icon{font-size:16px}.btn-label{font-size:11px}.toolbar-center .btn-label,.toolbar-right .btn-label{display:none}.toolbar-btn{padding:6px 8px;min-width:36px;justify-content:center}.toolbar-left .toolbar-btn{padding:6px 10px}.toolbar-left .btn-label{display:inline}.autoplay-controls{padding:4px 6px;gap:4px}.control-btn{width:24px;height:24px;font-size:14px}.control-value{min-width:32px;font-size:11px}.toolbar-social{margin-left:8px;padding-left:8px}}@media (min-width: 769px) and (max-width: 1024px){.toolbar-btn{padding:7px 11px;min-height:38px}.btn-icon{font-size:17px}.btn-label{font-size:12px}}@media (prefers-reduced-motion: reduce){.toolbar-container,.toolbar-btn,.dropdown-menu,.dropdown-item,.control-btn{transition:none;animation:none}.toolbar-container.visible{animation:none}.toolbar-btn:hover{transform:none}.toolbar-btn.branch-indicator{animation:none}}.toolbar-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.dropdown-item:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:-2px}@media (prefers-contrast: high){.toolbar-btn{border-width:2px}.toolbar-btn.toggle-btn.active{background:#0078d7}}.autoplay-btn{position:relative;overflow:visible}.autoplay-progress-bar{position:absolute;bottom:-4px;left:4px;right:4px;height:3px;background:#fff3;border-radius:2px;overflow:hidden}.autoplay-progress-fill{height:100%;background:linear-gradient(90deg,#0078d7cc,#00b4ffe6);border-radius:2px;transition:width .1s linear;box-shadow:0 0 8px #00b4ff80}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ToolbarComponent, isStandalone: true, selector: "pw-toolbar", inputs: { locale: "locale", availableLocales: "availableLocales", viewMode: "viewMode", pageViewAvailable: "pageViewAvailable", speechEnabled: "speechEnabled", audioEnabled: "audioEnabled", sfxEnabled: "sfxEnabled", autoplayEnabled: "autoplayEnabled", secondsPerPanel: "secondsPerPanel", autoplayProgress: "autoplayProgress", thumbnailsVisible: "thumbnailsVisible", hasAlternatives: "hasAlternatives", hasBranches: "hasBranches", liked: "liked", bookmarked: "bookmarked", showSocial: "showSocial", visible: "visible" }, outputs: { toggleView: "toggleView", localeChange: "localeChange", toggleSpeech: "toggleSpeech", toggleAudio: "toggleAudio", toggleSfx: "toggleSfx", toggleAutoplay: "toggleAutoplay", secondsPerPanelChange: "secondsPerPanelChange", toggleThumbnails: "toggleThumbnails", openToc: "openToc", openSettings: "openSettings", openCharacters: "openCharacters", cycleAlternative: "cycleAlternative", showBranches: "showBranches", openExtras: "openExtras", like: "like", bookmark: "bookmark", share: "share", openComments: "openComments", close: "close", openLanguage: "openLanguage" }, ngImport: i0, template: "<div class=\"toolbar-container\" [class.visible]=\"visible\">\n  <div class=\"toolbar\">\n    <!-- Left section: View and navigation controls -->\n    <div class=\"toolbar-section toolbar-left\">\n      <!-- View toggle (page/panel) -->\n      <button\n        class=\"toolbar-btn\"\n        [class.disabled]=\"!pageViewAvailable\"\n        [disabled]=\"!pageViewAvailable\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.view_toggle' | translate\"\n        [attr.title]=\"'toolbar.view_toggle' | translate\"\n        (click)=\"onToggleView()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"viewMode === 'page' ? 'lucideLayoutGrid' : viewMode === 'canvas' ? 'lucideGlobe' : 'lucideSquare'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.view' | translate }}</span>\n      </button>\n\n      <!-- Language selector -->\n      @if (availableLocales.length > 1) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.select_language' | translate\"\n          (click)=\"openLanguage.emit()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n          <span class=\"btn-label\">{{ locale }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Center section: Content controls -->\n    <div class=\"toolbar-section toolbar-center\">\n      <!-- Speech bubbles toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"speechEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.speech_toggle' | translate\"\n        [attr.aria-pressed]=\"speechEnabled\"\n        [attr.title]=\"'toolbar.speech_toggle' | translate\"\n        (click)=\"onToggleSpeech()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMessageSquare\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.speech' | translate }}</span>\n      </button>\n\n      <!-- Audio toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"audioEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.audio_toggle' | translate\"\n        [attr.aria-pressed]=\"audioEnabled\"\n        [attr.title]=\"'toolbar.audio_toggle' | translate\"\n        (click)=\"onToggleAudio()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"audioEnabled ? 'lucideVolume2' : 'lucideVolumeX'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.audio' | translate }}</span>\n      </button>\n\n      <!-- SFX toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"sfxEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.sfx_toggle' | translate\"\n        [attr.aria-pressed]=\"sfxEnabled\"\n        [attr.title]=\"'toolbar.sfx_toggle' | translate\"\n        (click)=\"onToggleSfx()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMusic\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.sfx' | translate }}</span>\n      </button>\n\n      <!-- Autoplay control -->\n      <div class=\"toolbar-dropdown\">\n        <button\n          class=\"toolbar-btn toggle-btn autoplay-btn\"\n          [class.active]=\"autoplayEnabled\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.autoplay_toggle' | translate\"\n          [attr.aria-pressed]=\"autoplayEnabled\"\n          [attr.title]=\"'toolbar.autoplay_toggle' | translate\"\n          (click)=\"onToggleAutoplay()\">\n          <span class=\"btn-icon\"><pw-icon [name]=\"autoplayEnabled ? 'lucidePause' : 'lucidePlay'\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.autoplay' | translate }}</span>\n          @if (autoplayEnabled) {\n            <div class=\"autoplay-progress-bar\">\n              <div class=\"autoplay-progress-fill\" [style.width.%]=\"autoplayProgress\"></div>\n            </div>\n          }\n        </button>\n\n        @if (autoplayEnabled) {\n          <div class=\"autoplay-controls\">\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.decrease_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(-1)\">\n              -\n            </button>\n            <span class=\"control-value\">{{ 'toolbar.seconds' | translate: {value: secondsPerPanel} }}</span>\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.increase_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(1)\">\n              +\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Thumbnails toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"thumbnailsVisible\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.thumbs_toggle' | translate\"\n        [attr.aria-pressed]=\"thumbnailsVisible\"\n        [attr.title]=\"'toolbar.thumbs_toggle' | translate\"\n        (click)=\"onToggleThumbnails()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideImages\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.thumbs' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Right section: Navigation and info controls -->\n    <div class=\"toolbar-section toolbar-right\">\n      <!-- Table of Contents -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.toc_open' | translate\"\n        [attr.title]=\"'toolbar.toc_open' | translate\"\n        (click)=\"onOpenToc()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideList\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.toc' | translate }}</span>\n      </button>\n\n      <!-- Settings -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.settings_open' | translate\"\n        [attr.title]=\"'toolbar.settings_open' | translate\"\n        (click)=\"onOpenSettings()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSettings\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.settings' | translate }}</span>\n      </button>\n\n      <!-- Characters -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.characters_open' | translate\"\n        [attr.title]=\"'toolbar.characters_open' | translate\"\n        (click)=\"onOpenCharacters()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideUsers\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.characters' | translate }}</span>\n      </button>\n\n      <!-- Alternatives (if available) -->\n      @if (hasAlternatives) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.alt_label' | translate\"\n          [attr.title]=\"'toolbar.alt_cycle' | translate\"\n          (click)=\"onCycleAlternative()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideRefreshCw\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.alt' | translate }}</span>\n        </button>\n      }\n\n      <!-- Branch indicator (if choices ahead) -->\n      @if (hasBranches) {\n        <button\n          class=\"toolbar-btn branch-indicator\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.choices_label' | translate\"\n          [attr.title]=\"'toolbar.choices_view' | translate\"\n          (click)=\"onShowBranches()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideSplit\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.choices' | translate }}</span>\n        </button>\n      }\n\n      <!-- Extras -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.extras' | translate\"\n        [attr.title]=\"'toolbar.extras_open' | translate\"\n        (click)=\"onOpenExtras()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSparkles\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.extras' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Social cluster (rightmost) -->\n    @if (showSocial) {\n      <div class=\"toolbar-section toolbar-social\">\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"liked\"\n          [attr.aria-pressed]=\"liked\"\n          [attr.aria-label]=\"'toolbar.like' | translate\"\n          [attr.title]=\"(liked ? 'toolbar.like_remove' : 'toolbar.like_work') | translate\"\n          (click)=\"onLike()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideHeart\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"bookmarked\"\n          [attr.aria-pressed]=\"bookmarked\"\n          [attr.aria-label]=\"'toolbar.bookmark' | translate\"\n          [attr.title]=\"(bookmarked ? 'toolbar.bookmark_remove' : 'toolbar.bookmark_panel') | translate\"\n          (click)=\"onBookmark()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideBookmark\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.share' | translate\"\n          [attr.title]=\"'toolbar.share_panel' | translate\"\n          (click)=\"onShare()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.comments' | translate\"\n          [attr.title]=\"'toolbar.comments_view' | translate\"\n          (click)=\"onOpenComments()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n        </button>\n      </div>\n    }\n\n    <!-- Close button -->\n    <button\n      class=\"toolbar-btn close-btn\"\n      type=\"button\"\n      [attr.aria-label]=\"'toolbar.close' | translate\"\n      [attr.title]=\"'toolbar.close' | translate\"\n      (click)=\"onClose()\">\n      <span class=\"btn-icon\"><pw-icon name=\"lucideX\" /></span>\n    </button>\n  </div>\n</div>\n", styles: [".toolbar-container{position:fixed;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.7) 70%,transparent);padding:24px 16px 16px;transform:translateY(100%);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:visible}.toolbar-container.visible{transform:translateY(0);opacity:1;pointer-events:auto;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;align-items:center;gap:8px;max-width:1400px;margin:0 auto;overflow-x:auto;overflow-y:visible;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.toolbar::-webkit-scrollbar{height:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.toolbar-section{display:flex;align-items:center;gap:6px;flex-shrink:0}.toolbar-left{margin-right:8px}.toolbar-center{flex:1 0 auto;justify-content:center}.toolbar-right{margin-left:8px}.toolbar-social{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:40px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.toolbar-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}.toolbar-btn:active{background:#ffffff26;transform:translateY(0)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toolbar-btn:disabled:hover{background:#ffffff1a;border-color:#fff3}.toolbar-btn.toggle-btn.active{background:#0078d7cc;border-color:#0078d7}.toolbar-btn.toggle-btn.active:hover{background:#0078d7e6}.toolbar-btn.icon-only{padding:8px;min-width:40px;justify-content:center}.toolbar-btn.icon-only .btn-label{display:none}.toolbar-btn.close-btn{margin-left:8px;background:#ff00004d;border-color:#ff000080}.toolbar-btn.close-btn:hover{background:#ff000080;border-color:#ff0000b3}.toolbar-btn.branch-indicator{background:#ffa5004d;border-color:#ffa50080;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-icon{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-label{font-size:13px;line-height:1}.toolbar-dropdown{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px}.dropdown-menu{position:absolute;bottom:100%;left:0;margin-bottom:8px;min-width:120px;background:#1e1e1ef2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;box-shadow:0 4px 12px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:block;width:100%;padding:8px 12px;font-size:14px;color:#ffffffe6;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:background .2s ease}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.active{background:#0078d780;font-weight:600}.autoplay-controls{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:6px}.control-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#fff3}.control-btn:active{background:#ffffff26;transform:scale(.95)}.control-value{min-width:40px;text-align:center;font-size:13px;font-weight:600;color:#ffffffe6}@media (max-width: 768px){.toolbar-container{padding:16px 8px 8px}.toolbar{gap:4px;padding:4px}.toolbar-section{gap:4px}.toolbar-btn{padding:6px 10px;min-height:36px;font-size:12px}.btn-icon{font-size:16px}.btn-label{font-size:11px}.toolbar-center .btn-label,.toolbar-right .btn-label{display:none}.toolbar-btn{padding:6px 8px;min-width:36px;justify-content:center}.toolbar-left .toolbar-btn{padding:6px 10px}.toolbar-left .btn-label{display:inline}.autoplay-controls{padding:4px 6px;gap:4px}.control-btn{width:24px;height:24px;font-size:14px}.control-value{min-width:32px;font-size:11px}.toolbar-social{margin-left:8px;padding-left:8px}}@media (min-width: 769px) and (max-width: 1024px){.toolbar-btn{padding:7px 11px;min-height:38px}.btn-icon{font-size:17px}.btn-label{font-size:12px}}@media (prefers-reduced-motion: reduce){.toolbar-container,.toolbar-btn,.dropdown-menu,.dropdown-item,.control-btn{transition:none;animation:none}.toolbar-container.visible{animation:none}.toolbar-btn:hover{transform:none}.toolbar-btn.branch-indicator{animation:none}}.toolbar-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.dropdown-item:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:-2px}@media (prefers-contrast: high){.toolbar-btn{border-width:2px}.toolbar-btn.toggle-btn.active{background:#0078d7}}.autoplay-btn{position:relative;overflow:visible}.autoplay-progress-bar{position:absolute;bottom:-4px;left:4px;right:4px;height:3px;background:#fff3;border-radius:2px;overflow:hidden}.autoplay-progress-fill{height:100%;background:linear-gradient(90deg,#0078d7cc,#00b4ffe6);border-radius:2px;transition:width .1s linear;box-shadow:0 0 8px #00b4ff80}\n"], dependencies: [{ kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-toolbar', imports: [TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar-container\" [class.visible]=\"visible\">\n  <div class=\"toolbar\">\n    <!-- Left section: View and navigation controls -->\n    <div class=\"toolbar-section toolbar-left\">\n      <!-- View toggle (page/panel) -->\n      <button\n        class=\"toolbar-btn\"\n        [class.disabled]=\"!pageViewAvailable\"\n        [disabled]=\"!pageViewAvailable\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.view_toggle' | translate\"\n        [attr.title]=\"'toolbar.view_toggle' | translate\"\n        (click)=\"onToggleView()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"viewMode === 'page' ? 'lucideLayoutGrid' : viewMode === 'canvas' ? 'lucideGlobe' : 'lucideSquare'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.view' | translate }}</span>\n      </button>\n\n      <!-- Language selector -->\n      @if (availableLocales.length > 1) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.select_language' | translate\"\n          (click)=\"openLanguage.emit()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n          <span class=\"btn-label\">{{ locale }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Center section: Content controls -->\n    <div class=\"toolbar-section toolbar-center\">\n      <!-- Speech bubbles toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"speechEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.speech_toggle' | translate\"\n        [attr.aria-pressed]=\"speechEnabled\"\n        [attr.title]=\"'toolbar.speech_toggle' | translate\"\n        (click)=\"onToggleSpeech()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMessageSquare\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.speech' | translate }}</span>\n      </button>\n\n      <!-- Audio toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"audioEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.audio_toggle' | translate\"\n        [attr.aria-pressed]=\"audioEnabled\"\n        [attr.title]=\"'toolbar.audio_toggle' | translate\"\n        (click)=\"onToggleAudio()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"audioEnabled ? 'lucideVolume2' : 'lucideVolumeX'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.audio' | translate }}</span>\n      </button>\n\n      <!-- SFX toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"sfxEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.sfx_toggle' | translate\"\n        [attr.aria-pressed]=\"sfxEnabled\"\n        [attr.title]=\"'toolbar.sfx_toggle' | translate\"\n        (click)=\"onToggleSfx()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMusic\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.sfx' | translate }}</span>\n      </button>\n\n      <!-- Autoplay control -->\n      <div class=\"toolbar-dropdown\">\n        <button\n          class=\"toolbar-btn toggle-btn autoplay-btn\"\n          [class.active]=\"autoplayEnabled\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.autoplay_toggle' | translate\"\n          [attr.aria-pressed]=\"autoplayEnabled\"\n          [attr.title]=\"'toolbar.autoplay_toggle' | translate\"\n          (click)=\"onToggleAutoplay()\">\n          <span class=\"btn-icon\"><pw-icon [name]=\"autoplayEnabled ? 'lucidePause' : 'lucidePlay'\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.autoplay' | translate }}</span>\n          @if (autoplayEnabled) {\n            <div class=\"autoplay-progress-bar\">\n              <div class=\"autoplay-progress-fill\" [style.width.%]=\"autoplayProgress\"></div>\n            </div>\n          }\n        </button>\n\n        @if (autoplayEnabled) {\n          <div class=\"autoplay-controls\">\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.decrease_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(-1)\">\n              -\n            </button>\n            <span class=\"control-value\">{{ 'toolbar.seconds' | translate: {value: secondsPerPanel} }}</span>\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.increase_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(1)\">\n              +\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Thumbnails toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"thumbnailsVisible\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.thumbs_toggle' | translate\"\n        [attr.aria-pressed]=\"thumbnailsVisible\"\n        [attr.title]=\"'toolbar.thumbs_toggle' | translate\"\n        (click)=\"onToggleThumbnails()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideImages\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.thumbs' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Right section: Navigation and info controls -->\n    <div class=\"toolbar-section toolbar-right\">\n      <!-- Table of Contents -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.toc_open' | translate\"\n        [attr.title]=\"'toolbar.toc_open' | translate\"\n        (click)=\"onOpenToc()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideList\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.toc' | translate }}</span>\n      </button>\n\n      <!-- Settings -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.settings_open' | translate\"\n        [attr.title]=\"'toolbar.settings_open' | translate\"\n        (click)=\"onOpenSettings()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSettings\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.settings' | translate }}</span>\n      </button>\n\n      <!-- Characters -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.characters_open' | translate\"\n        [attr.title]=\"'toolbar.characters_open' | translate\"\n        (click)=\"onOpenCharacters()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideUsers\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.characters' | translate }}</span>\n      </button>\n\n      <!-- Alternatives (if available) -->\n      @if (hasAlternatives) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.alt_label' | translate\"\n          [attr.title]=\"'toolbar.alt_cycle' | translate\"\n          (click)=\"onCycleAlternative()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideRefreshCw\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.alt' | translate }}</span>\n        </button>\n      }\n\n      <!-- Branch indicator (if choices ahead) -->\n      @if (hasBranches) {\n        <button\n          class=\"toolbar-btn branch-indicator\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.choices_label' | translate\"\n          [attr.title]=\"'toolbar.choices_view' | translate\"\n          (click)=\"onShowBranches()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideSplit\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.choices' | translate }}</span>\n        </button>\n      }\n\n      <!-- Extras -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.extras' | translate\"\n        [attr.title]=\"'toolbar.extras_open' | translate\"\n        (click)=\"onOpenExtras()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSparkles\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.extras' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Social cluster (rightmost) -->\n    @if (showSocial) {\n      <div class=\"toolbar-section toolbar-social\">\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"liked\"\n          [attr.aria-pressed]=\"liked\"\n          [attr.aria-label]=\"'toolbar.like' | translate\"\n          [attr.title]=\"(liked ? 'toolbar.like_remove' : 'toolbar.like_work') | translate\"\n          (click)=\"onLike()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideHeart\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"bookmarked\"\n          [attr.aria-pressed]=\"bookmarked\"\n          [attr.aria-label]=\"'toolbar.bookmark' | translate\"\n          [attr.title]=\"(bookmarked ? 'toolbar.bookmark_remove' : 'toolbar.bookmark_panel') | translate\"\n          (click)=\"onBookmark()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideBookmark\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.share' | translate\"\n          [attr.title]=\"'toolbar.share_panel' | translate\"\n          (click)=\"onShare()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.comments' | translate\"\n          [attr.title]=\"'toolbar.comments_view' | translate\"\n          (click)=\"onOpenComments()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n        </button>\n      </div>\n    }\n\n    <!-- Close button -->\n    <button\n      class=\"toolbar-btn close-btn\"\n      type=\"button\"\n      [attr.aria-label]=\"'toolbar.close' | translate\"\n      [attr.title]=\"'toolbar.close' | translate\"\n      (click)=\"onClose()\">\n      <span class=\"btn-icon\"><pw-icon name=\"lucideX\" /></span>\n    </button>\n  </div>\n</div>\n", styles: [".toolbar-container{position:fixed;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.7) 70%,transparent);padding:24px 16px 16px;transform:translateY(100%);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:visible}.toolbar-container.visible{transform:translateY(0);opacity:1;pointer-events:auto;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;align-items:center;gap:8px;max-width:1400px;margin:0 auto;overflow-x:auto;overflow-y:visible;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.toolbar::-webkit-scrollbar{height:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.toolbar-section{display:flex;align-items:center;gap:6px;flex-shrink:0}.toolbar-left{margin-right:8px}.toolbar-center{flex:1 0 auto;justify-content:center}.toolbar-right{margin-left:8px}.toolbar-social{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:40px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.toolbar-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}.toolbar-btn:active{background:#ffffff26;transform:translateY(0)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toolbar-btn:disabled:hover{background:#ffffff1a;border-color:#fff3}.toolbar-btn.toggle-btn.active{background:#0078d7cc;border-color:#0078d7}.toolbar-btn.toggle-btn.active:hover{background:#0078d7e6}.toolbar-btn.icon-only{padding:8px;min-width:40px;justify-content:center}.toolbar-btn.icon-only .btn-label{display:none}.toolbar-btn.close-btn{margin-left:8px;background:#ff00004d;border-color:#ff000080}.toolbar-btn.close-btn:hover{background:#ff000080;border-color:#ff0000b3}.toolbar-btn.branch-indicator{background:#ffa5004d;border-color:#ffa50080;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-icon{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-label{font-size:13px;line-height:1}.toolbar-dropdown{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px}.dropdown-menu{position:absolute;bottom:100%;left:0;margin-bottom:8px;min-width:120px;background:#1e1e1ef2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;box-shadow:0 4px 12px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:block;width:100%;padding:8px 12px;font-size:14px;color:#ffffffe6;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:background .2s ease}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.active{background:#0078d780;font-weight:600}.autoplay-controls{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:6px}.control-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#fff3}.control-btn:active{background:#ffffff26;transform:scale(.95)}.control-value{min-width:40px;text-align:center;font-size:13px;font-weight:600;color:#ffffffe6}@media (max-width: 768px){.toolbar-container{padding:16px 8px 8px}.toolbar{gap:4px;padding:4px}.toolbar-section{gap:4px}.toolbar-btn{padding:6px 10px;min-height:36px;font-size:12px}.btn-icon{font-size:16px}.btn-label{font-size:11px}.toolbar-center .btn-label,.toolbar-right .btn-label{display:none}.toolbar-btn{padding:6px 8px;min-width:36px;justify-content:center}.toolbar-left .toolbar-btn{padding:6px 10px}.toolbar-left .btn-label{display:inline}.autoplay-controls{padding:4px 6px;gap:4px}.control-btn{width:24px;height:24px;font-size:14px}.control-value{min-width:32px;font-size:11px}.toolbar-social{margin-left:8px;padding-left:8px}}@media (min-width: 769px) and (max-width: 1024px){.toolbar-btn{padding:7px 11px;min-height:38px}.btn-icon{font-size:17px}.btn-label{font-size:12px}}@media (prefers-reduced-motion: reduce){.toolbar-container,.toolbar-btn,.dropdown-menu,.dropdown-item,.control-btn{transition:none;animation:none}.toolbar-container.visible{animation:none}.toolbar-btn:hover{transform:none}.toolbar-btn.branch-indicator{animation:none}}.toolbar-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.dropdown-item:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:-2px}@media (prefers-contrast: high){.toolbar-btn{border-width:2px}.toolbar-btn.toggle-btn.active{background:#0078d7}}.autoplay-btn{position:relative;overflow:visible}.autoplay-progress-bar{position:absolute;bottom:-4px;left:4px;right:4px;height:3px;background:#fff3;border-radius:2px;overflow:hidden}.autoplay-progress-fill{height:100%;background:linear-gradient(90deg,#0078d7cc,#00b4ffe6);border-radius:2px;transition:width .1s linear;box-shadow:0 0 8px #00b4ff80}\n"] }]
+            args: [{ selector: 'pw-toolbar', imports: [TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toolbar-container\" [class.visible]=\"visible\">\n  <div class=\"toolbar\">\n    <!-- Left section: View and navigation controls -->\n    <div class=\"toolbar-section toolbar-left\">\n      <!-- View toggle (page/panel) -->\n      <button\n        class=\"toolbar-btn\"\n        [class.disabled]=\"!pageViewAvailable\"\n        [disabled]=\"!pageViewAvailable\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.view_toggle' | translate\"\n        [attr.title]=\"'toolbar.view_toggle' | translate\"\n        (click)=\"onToggleView()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"viewMode === 'page' ? 'lucideLayoutGrid' : viewMode === 'canvas' ? 'lucideGlobe' : 'lucideSquare'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.view' | translate }}</span>\n      </button>\n\n      <!-- Language selector -->\n      @if (availableLocales.length > 1) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.select_language' | translate\"\n          (click)=\"openLanguage.emit()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n          <span class=\"btn-label\">{{ locale }}</span>\n        </button>\n      }\n    </div>\n\n    <!-- Center section: Content controls -->\n    <div class=\"toolbar-section toolbar-center\">\n      <!-- Speech bubbles toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"speechEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.speech_toggle' | translate\"\n        [attr.aria-pressed]=\"speechEnabled\"\n        [attr.title]=\"'toolbar.speech_toggle' | translate\"\n        (click)=\"onToggleSpeech()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMessageSquare\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.speech' | translate }}</span>\n      </button>\n\n      <!-- Audio toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"audioEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.audio_toggle' | translate\"\n        [attr.aria-pressed]=\"audioEnabled\"\n        [attr.title]=\"'toolbar.audio_toggle' | translate\"\n        (click)=\"onToggleAudio()\">\n        <span class=\"btn-icon\"><pw-icon [name]=\"audioEnabled ? 'lucideVolume2' : 'lucideVolumeX'\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.audio' | translate }}</span>\n      </button>\n\n      <!-- SFX toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"sfxEnabled\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.sfx_toggle' | translate\"\n        [attr.aria-pressed]=\"sfxEnabled\"\n        [attr.title]=\"'toolbar.sfx_toggle' | translate\"\n        (click)=\"onToggleSfx()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideMusic\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.sfx' | translate }}</span>\n      </button>\n\n      <!-- Autoplay control -->\n      <div class=\"toolbar-dropdown\">\n        <button\n          class=\"toolbar-btn toggle-btn autoplay-btn\"\n          [class.active]=\"autoplayEnabled\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.autoplay_toggle' | translate\"\n          [attr.aria-pressed]=\"autoplayEnabled\"\n          [attr.title]=\"'toolbar.autoplay_toggle' | translate\"\n          (click)=\"onToggleAutoplay()\">\n          <span class=\"btn-icon\"><pw-icon [name]=\"autoplayEnabled ? 'lucidePause' : 'lucidePlay'\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.autoplay' | translate }}</span>\n          @if (autoplayEnabled) {\n            <div class=\"autoplay-progress-bar\">\n              <div class=\"autoplay-progress-fill\" [style.width.%]=\"autoplayProgress\"></div>\n            </div>\n          }\n        </button>\n\n        @if (autoplayEnabled) {\n          <div class=\"autoplay-controls\">\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.decrease_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(-1)\">\n              -\n            </button>\n            <span class=\"control-value\">{{ 'toolbar.seconds' | translate: {value: secondsPerPanel} }}</span>\n            <button\n              class=\"control-btn\"\n              type=\"button\"\n              [attr.aria-label]=\"'toolbar.increase_speed' | translate\"\n              (click)=\"adjustSecondsPerPanel(1)\">\n              +\n            </button>\n          </div>\n        }\n      </div>\n\n      <!-- Thumbnails toggle -->\n      <button\n        class=\"toolbar-btn toggle-btn\"\n        [class.active]=\"thumbnailsVisible\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.thumbs_toggle' | translate\"\n        [attr.aria-pressed]=\"thumbnailsVisible\"\n        [attr.title]=\"'toolbar.thumbs_toggle' | translate\"\n        (click)=\"onToggleThumbnails()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideImages\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.thumbs' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Right section: Navigation and info controls -->\n    <div class=\"toolbar-section toolbar-right\">\n      <!-- Table of Contents -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.toc_open' | translate\"\n        [attr.title]=\"'toolbar.toc_open' | translate\"\n        (click)=\"onOpenToc()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideList\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.toc' | translate }}</span>\n      </button>\n\n      <!-- Settings -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.settings_open' | translate\"\n        [attr.title]=\"'toolbar.settings_open' | translate\"\n        (click)=\"onOpenSettings()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSettings\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.settings' | translate }}</span>\n      </button>\n\n      <!-- Characters -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.characters_open' | translate\"\n        [attr.title]=\"'toolbar.characters_open' | translate\"\n        (click)=\"onOpenCharacters()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideUsers\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.characters' | translate }}</span>\n      </button>\n\n      <!-- Alternatives (if available) -->\n      @if (hasAlternatives) {\n        <button\n          class=\"toolbar-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.alt_label' | translate\"\n          [attr.title]=\"'toolbar.alt_cycle' | translate\"\n          (click)=\"onCycleAlternative()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideRefreshCw\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.alt' | translate }}</span>\n        </button>\n      }\n\n      <!-- Branch indicator (if choices ahead) -->\n      @if (hasBranches) {\n        <button\n          class=\"toolbar-btn branch-indicator\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.choices_label' | translate\"\n          [attr.title]=\"'toolbar.choices_view' | translate\"\n          (click)=\"onShowBranches()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideSplit\" /></span>\n          <span class=\"btn-label\">{{ 'toolbar.choices' | translate }}</span>\n        </button>\n      }\n\n      <!-- Extras -->\n      <button\n        class=\"toolbar-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"'toolbar.extras' | translate\"\n        [attr.title]=\"'toolbar.extras_open' | translate\"\n        (click)=\"onOpenExtras()\">\n        <span class=\"btn-icon\"><pw-icon name=\"lucideSparkles\" /></span>\n        <span class=\"btn-label\">{{ 'toolbar.extras' | translate }}</span>\n      </button>\n    </div>\n\n    <!-- Social cluster (rightmost) -->\n    @if (showSocial) {\n      <div class=\"toolbar-section toolbar-social\">\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"liked\"\n          [attr.aria-pressed]=\"liked\"\n          [attr.aria-label]=\"'toolbar.like' | translate\"\n          [attr.title]=\"(liked ? 'toolbar.like_remove' : 'toolbar.like_work') | translate\"\n          (click)=\"onLike()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideHeart\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [class.active]=\"bookmarked\"\n          [attr.aria-pressed]=\"bookmarked\"\n          [attr.aria-label]=\"'toolbar.bookmark' | translate\"\n          [attr.title]=\"(bookmarked ? 'toolbar.bookmark_remove' : 'toolbar.bookmark_panel') | translate\"\n          (click)=\"onBookmark()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideBookmark\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.share' | translate\"\n          [attr.title]=\"'toolbar.share_panel' | translate\"\n          (click)=\"onShare()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n        </button>\n\n        <button\n          class=\"toolbar-btn icon-only\"\n          type=\"button\"\n          [attr.aria-label]=\"'toolbar.comments' | translate\"\n          [attr.title]=\"'toolbar.comments_view' | translate\"\n          (click)=\"onOpenComments()\">\n          <span class=\"btn-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n        </button>\n      </div>\n    }\n\n    <!-- Close button -->\n    <button\n      class=\"toolbar-btn close-btn\"\n      type=\"button\"\n      [attr.aria-label]=\"'toolbar.close' | translate\"\n      [attr.title]=\"'toolbar.close' | translate\"\n      (click)=\"onClose()\">\n      <span class=\"btn-icon\"><pw-icon name=\"lucideX\" /></span>\n    </button>\n  </div>\n</div>\n", styles: [".toolbar-container{position:fixed;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.7) 70%,transparent);padding:24px 16px 16px;transform:translateY(100%);opacity:0;transition:all .3s cubic-bezier(.4,0,.2,1);pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);overflow:visible}.toolbar-container.visible{transform:translateY(0);opacity:1;pointer-events:auto;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;align-items:center;gap:8px;max-width:1400px;margin:0 auto;overflow-x:auto;overflow-y:visible;padding:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}.toolbar::-webkit-scrollbar{height:6px}.toolbar::-webkit-scrollbar-track{background:transparent}.toolbar::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.toolbar-section{display:flex;align-items:center;gap:6px;flex-shrink:0}.toolbar-left{margin-right:8px}.toolbar-center{flex:1 0 auto;justify-content:center}.toolbar-right{margin-left:8px}.toolbar-social{margin-left:16px;padding-left:16px;border-left:1px solid rgba(255,255,255,.2)}.toolbar-btn{display:flex;align-items:center;gap:6px;padding:8px 12px;min-height:40px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.toolbar-btn:hover{background:#fff3;border-color:#ffffff4d;transform:translateY(-1px)}.toolbar-btn:active{background:#ffffff26;transform:translateY(0)}.toolbar-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.toolbar-btn:disabled:hover{background:#ffffff1a;border-color:#fff3}.toolbar-btn.toggle-btn.active{background:#0078d7cc;border-color:#0078d7}.toolbar-btn.toggle-btn.active:hover{background:#0078d7e6}.toolbar-btn.icon-only{padding:8px;min-width:40px;justify-content:center}.toolbar-btn.icon-only .btn-label{display:none}.toolbar-btn.close-btn{margin-left:8px;background:#ff00004d;border-color:#ff000080}.toolbar-btn.close-btn:hover{background:#ff000080;border-color:#ff0000b3}.toolbar-btn.branch-indicator{background:#ffa5004d;border-color:#ffa50080;animation:pulse 2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.btn-icon{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-label{font-size:13px;line-height:1}.toolbar-dropdown{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:8px}.dropdown-menu{position:absolute;bottom:100%;left:0;margin-bottom:8px;min-width:120px;background:#1e1e1ef2;border:1px solid rgba(255,255,255,.2);border-radius:6px;padding:4px;box-shadow:0 4px 12px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{display:block;width:100%;padding:8px 12px;font-size:14px;color:#ffffffe6;background:transparent;border:none;border-radius:4px;cursor:pointer;text-align:left;transition:background .2s ease}.dropdown-item:hover{background:#ffffff1a}.dropdown-item.active{background:#0078d780;font-weight:600}.autoplay-controls{display:flex;align-items:center;gap:6px;padding:6px 8px;background:#0006;border:1px solid rgba(255,255,255,.2);border-radius:6px}.control-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease}.control-btn:hover{background:#fff3}.control-btn:active{background:#ffffff26;transform:scale(.95)}.control-value{min-width:40px;text-align:center;font-size:13px;font-weight:600;color:#ffffffe6}@media (max-width: 768px){.toolbar-container{padding:16px 8px 8px}.toolbar{gap:4px;padding:4px}.toolbar-section{gap:4px}.toolbar-btn{padding:6px 10px;min-height:36px;font-size:12px}.btn-icon{font-size:16px}.btn-label{font-size:11px}.toolbar-center .btn-label,.toolbar-right .btn-label{display:none}.toolbar-btn{padding:6px 8px;min-width:36px;justify-content:center}.toolbar-left .toolbar-btn{padding:6px 10px}.toolbar-left .btn-label{display:inline}.autoplay-controls{padding:4px 6px;gap:4px}.control-btn{width:24px;height:24px;font-size:14px}.control-value{min-width:32px;font-size:11px}.toolbar-social{margin-left:8px;padding-left:8px}}@media (min-width: 769px) and (max-width: 1024px){.toolbar-btn{padding:7px 11px;min-height:38px}.btn-icon{font-size:17px}.btn-label{font-size:12px}}@media (prefers-reduced-motion: reduce){.toolbar-container,.toolbar-btn,.dropdown-menu,.dropdown-item,.control-btn{transition:none;animation:none}.toolbar-container.visible{animation:none}.toolbar-btn:hover{transform:none}.toolbar-btn.branch-indicator{animation:none}}.toolbar-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.dropdown-item:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:-2px}@media (prefers-contrast: high){.toolbar-btn{border-width:2px}.toolbar-btn.toggle-btn.active{background:#0078d7}}.autoplay-btn{position:relative;overflow:visible}.autoplay-progress-bar{position:absolute;bottom:-4px;left:4px;right:4px;height:3px;background:#fff3;border-radius:2px;overflow:hidden}.autoplay-progress-fill{height:100%;background:linear-gradient(90deg,#0078d7cc,#00b4ffe6);border-radius:2px;transition:width .1s linear;box-shadow:0 0 8px #00b4ff80}\n"] }]
         }], propDecorators: { locale: [{
                 type: Input
             }], availableLocales: [{
@@ -13989,11 +13990,11 @@ class LanguageModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LanguageModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LanguageModalComponent, isStandalone: true, selector: "pw-language-modal", inputs: { visible: "visible", currentLocale: "currentLocale", availableLocales: "availableLocales" }, outputs: { closeModal: "closeModal", localeSelected: "localeSelected" }, ngImport: i0, template: "@if (visible) {\n  <div \n    class=\"language-overlay\" \n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onBackdropKeydown($event)\"\n    tabindex=\"-1\">\n    <div class=\"language-container\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"language-title\">\n      <!-- Header -->\n      <div class=\"language-header\">\n        <h2 id=\"language-title\" class=\"language-title\">\n          {{ 'toolbar.select_language' | translate }}\n        </h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"closeModal.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Language list -->\n      <div class=\"language-content\">\n        <div class=\"language-list\">\n          @for (locale of availableLocales; track locale) {\n            <button\n              class=\"language-item\"\n              [class.active]=\"locale === currentLocale\"\n              type=\"button\"\n              (click)=\"onSelectLocale(locale)\">\n              <span class=\"language-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n              <span class=\"language-name\">{{ locale }}</span>\n              @if (locale === currentLocale) {\n                <span class=\"language-check\"><pw-icon name=\"lucideCheck\" /></span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".language-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.language-container{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px #00000080;max-width:400px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.language-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.language-title{margin:0;font-size:20px;font-weight:600;color:#fff}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffffb3;font-size:20px;cursor:pointer;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{transform:scale(.95)}.language-content{padding:16px;overflow-y:auto;flex:1}.language-list{display:flex;flex-direction:column;gap:8px}.language-item{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffe6;font-size:16px;cursor:pointer;transition:all .2s ease;text-align:left}.language-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(4px)}.language-item:active{transform:translate(4px) scale(.98)}.language-item.active{background:#0078d74d;border-color:#0078d780;color:#fff}.language-icon{font-size:24px;flex-shrink:0}.language-name{flex:1;font-weight:500}.language-check{font-size:18px;color:#00c864;flex-shrink:0}.language-content::-webkit-scrollbar{width:8px}.language-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.language-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.language-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.language-container{max-width:100%;max-height:60vh}.language-header{padding:20px}.language-title{font-size:18px}.language-item{padding:14px;font-size:15px}}@media (prefers-reduced-motion: reduce){.language-overlay,.language-container,.language-item,.close-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: LanguageModalComponent, isStandalone: true, selector: "pw-language-modal", inputs: { visible: "visible", currentLocale: "currentLocale", availableLocales: "availableLocales" }, outputs: { closeModal: "closeModal", localeSelected: "localeSelected" }, ngImport: i0, template: "@if (visible) {\n  <div \n    class=\"language-overlay\" \n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onBackdropKeydown($event)\"\n    tabindex=\"-1\">\n    <div class=\"language-container\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"language-title\">\n      <!-- Header -->\n      <div class=\"language-header\">\n        <h2 id=\"language-title\" class=\"language-title\">\n          {{ 'toolbar.select_language' | translate }}\n        </h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"closeModal.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Language list -->\n      <div class=\"language-content\">\n        <div class=\"language-list\">\n          @for (locale of availableLocales; track locale) {\n            <button\n              class=\"language-item\"\n              [class.active]=\"locale === currentLocale\"\n              type=\"button\"\n              (click)=\"onSelectLocale(locale)\">\n              <span class=\"language-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n              <span class=\"language-name\">{{ locale }}</span>\n              @if (locale === currentLocale) {\n                <span class=\"language-check\"><pw-icon name=\"lucideCheck\" /></span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".language-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.language-container{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px #00000080;max-width:400px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.language-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.language-title{margin:0;font-size:20px;font-weight:600;color:#fff}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffffb3;font-size:20px;cursor:pointer;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{transform:scale(.95)}.language-content{padding:16px;overflow-y:auto;flex:1}.language-list{display:flex;flex-direction:column;gap:8px}.language-item{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffe6;font-size:16px;cursor:pointer;transition:all .2s ease;text-align:left}.language-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(4px)}.language-item:active{transform:translate(4px) scale(.98)}.language-item.active{background:#0078d74d;border-color:#0078d780;color:#fff}.language-icon{font-size:24px;flex-shrink:0}.language-name{flex:1;font-weight:500}.language-check{font-size:18px;color:#00c864;flex-shrink:0}.language-content::-webkit-scrollbar{width:8px}.language-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.language-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.language-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.language-container{max-width:100%;max-height:60vh}.language-header{padding:20px}.language-title{font-size:18px}.language-item{padding:14px;font-size:15px}}@media (prefers-reduced-motion: reduce){.language-overlay,.language-container,.language-item,.close-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: LanguageModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-language-modal', imports: [TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div \n    class=\"language-overlay\" \n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onBackdropKeydown($event)\"\n    tabindex=\"-1\">\n    <div class=\"language-container\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"language-title\">\n      <!-- Header -->\n      <div class=\"language-header\">\n        <h2 id=\"language-title\" class=\"language-title\">\n          {{ 'toolbar.select_language' | translate }}\n        </h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"closeModal.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Language list -->\n      <div class=\"language-content\">\n        <div class=\"language-list\">\n          @for (locale of availableLocales; track locale) {\n            <button\n              class=\"language-item\"\n              [class.active]=\"locale === currentLocale\"\n              type=\"button\"\n              (click)=\"onSelectLocale(locale)\">\n              <span class=\"language-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n              <span class=\"language-name\">{{ locale }}</span>\n              @if (locale === currentLocale) {\n                <span class=\"language-check\"><pw-icon name=\"lucideCheck\" /></span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".language-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.language-container{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px #00000080;max-width:400px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.language-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.language-title{margin:0;font-size:20px;font-weight:600;color:#fff}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffffb3;font-size:20px;cursor:pointer;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{transform:scale(.95)}.language-content{padding:16px;overflow-y:auto;flex:1}.language-list{display:flex;flex-direction:column;gap:8px}.language-item{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffe6;font-size:16px;cursor:pointer;transition:all .2s ease;text-align:left}.language-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(4px)}.language-item:active{transform:translate(4px) scale(.98)}.language-item.active{background:#0078d74d;border-color:#0078d780;color:#fff}.language-icon{font-size:24px;flex-shrink:0}.language-name{flex:1;font-weight:500}.language-check{font-size:18px;color:#00c864;flex-shrink:0}.language-content::-webkit-scrollbar{width:8px}.language-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.language-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.language-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.language-container{max-width:100%;max-height:60vh}.language-header{padding:20px}.language-title{font-size:18px}.language-item{padding:14px;font-size:15px}}@media (prefers-reduced-motion: reduce){.language-overlay,.language-container,.language-item,.close-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-language-modal', imports: [TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div \n    class=\"language-overlay\" \n    (click)=\"onBackdropClick($event)\"\n    (keydown)=\"onBackdropKeydown($event)\"\n    tabindex=\"-1\">\n    <div class=\"language-container\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"language-title\">\n      <!-- Header -->\n      <div class=\"language-header\">\n        <h2 id=\"language-title\" class=\"language-title\">\n          {{ 'toolbar.select_language' | translate }}\n        </h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"closeModal.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Language list -->\n      <div class=\"language-content\">\n        <div class=\"language-list\">\n          @for (locale of availableLocales; track locale) {\n            <button\n              class=\"language-item\"\n              [class.active]=\"locale === currentLocale\"\n              type=\"button\"\n              (click)=\"onSelectLocale(locale)\">\n              <span class=\"language-icon\"><pw-icon name=\"lucideGlobe\" /></span>\n              <span class=\"language-name\">{{ locale }}</span>\n              @if (locale === currentLocale) {\n                <span class=\"language-check\"><pw-icon name=\"lucideCheck\" /></span>\n              }\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".language-overlay{position:fixed;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.language-container{background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border:1px solid rgba(255,255,255,.1);border-radius:12px;box-shadow:0 8px 32px #00000080;max-width:400px;width:100%;max-height:80vh;display:flex;flex-direction:column;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.language-header{display:flex;align-items:center;justify-content:space-between;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.language-title{margin:0;font-size:20px;font-weight:600;color:#fff}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#ffffffb3;font-size:20px;cursor:pointer;border-radius:6px;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{transform:scale(.95)}.language-content{padding:16px;overflow-y:auto;flex:1}.language-list{display:flex;flex-direction:column;gap:8px}.language-item{display:flex;align-items:center;gap:12px;padding:16px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#ffffffe6;font-size:16px;cursor:pointer;transition:all .2s ease;text-align:left}.language-item:hover{background:#ffffff1a;border-color:#fff3;transform:translate(4px)}.language-item:active{transform:translate(4px) scale(.98)}.language-item.active{background:#0078d74d;border-color:#0078d780;color:#fff}.language-icon{font-size:24px;flex-shrink:0}.language-name{flex:1;font-weight:500}.language-check{font-size:18px;color:#00c864;flex-shrink:0}.language-content::-webkit-scrollbar{width:8px}.language-content::-webkit-scrollbar-track{background:#ffffff0d;border-radius:4px}.language-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.language-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}@media (max-width: 768px){.language-container{max-width:100%;max-height:60vh}.language-header{padding:20px}.language-title{font-size:18px}.language-item{padding:14px;font-size:15px}}@media (prefers-reduced-motion: reduce){.language-overlay,.language-container,.language-item,.close-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], currentLocale: [{
@@ -14659,11 +14660,11 @@ class TocOverlayComponent {
         return this.filteredChapters[this.selectedChapterIndex];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TocOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TocOverlayComponent, isStandalone: true, selector: "pw-toc-overlay", inputs: { manifest: "manifest", chapters: "chapters", currentChapterId: "currentChapterId", currentPanelId: "currentPanelId", locale: "locale", baseUrl: "baseUrl", visible: "visible" }, outputs: { navigate: "navigate", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"toc-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onClose()\">\n    <div class=\"toc-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Table of Contents\">\n      <!-- Header -->\n      <div class=\"toc-header\">\n        <h2 class=\"toc-title\">{{ 'toc.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toc.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Search -->\n      <div class=\"toc-search\">\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          [placeholder]=\"'toc.search_chapters' | translate\"\n          [attr.aria-label]=\"'toc.search_label' | translate\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange()\" />\n        <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n      </div>\n\n      <!-- Content -->\n      <div class=\"toc-content\">\n        <!-- Chapter list -->\n        <div class=\"chapter-list\" role=\"list\">\n          @for (chapter of filteredChapters; track chapter.id; let i = $index) {\n            <div\n              class=\"chapter-item\"\n              [class.selected]=\"i === selectedChapterIndex\"\n              [class.current]=\"isCurrentChapter(chapter)\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              (click)=\"selectChapter(i)\"\n              (keydown.enter)=\"selectChapter(i)\">\n              \n              <!-- Chapter header -->\n              <div class=\"chapter-header\" tabindex=\"0\" (click)=\"navigateToChapter(chapter)\" (keydown.enter)=\"navigateToChapter(chapter)\">\n                <span class=\"chapter-number\">{{ i + 1 }}</span>\n                <h3 class=\"chapter-title\">{{ getChapterTitle(chapter) }}</h3>\n                @if (isCurrentChapter(chapter)) {\n                  <span class=\"current-badge\">{{ 'toc.current' | translate }}</span>\n                }\n              </div>\n\n              <!-- Panel list (if chapter selected) -->\n              @if (i === selectedChapterIndex) {\n                <div class=\"panel-list\">\n                  <!-- If chapter has pages, group by pages -->\n                  @if (hasPages(chapter)) {\n                    @for (page of getPages(chapter); track page.id) {\n                      <div class=\"page-group\">\n                        <div class=\"page-header\">\n                          <span class=\"page-title\">{{ getPageTitle(page) }}</span>\n                        </div>\n                        <div class=\"panels-grid\">\n                          @for (panelItem of getPanelsForPage(chapter, page); track panelItem.id) {\n                            <button\n                              class=\"panel-card\"\n                              [class.current]=\"isCurrentPanel(panelItem.id)\"\n                              type=\"button\"\n                              (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                              \n                              @if (getThumbnailUrl(panelItem.panel)) {\n                                <div class=\"panel-thumbnail\">\n                                  <img \n                                    [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                    [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                    loading=\"lazy\" />\n                                  @if (isCurrentPanel(panelItem.id)) {\n                                    <div class=\"current-overlay\">\n                                      <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                    </div>\n                                  }\n                                </div>\n                              } @else {\n                                <div class=\"panel-thumbnail placeholder\">\n                                  <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                                </div>\n                              }\n                              \n                              <div class=\"panel-info\">\n                                <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                              </div>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- No pages, show all panels directly -->\n                    <div class=\"panels-grid\">\n                      @for (panelItem of getPanels(chapter); track panelItem.id) {\n                        <button\n                          class=\"panel-card\"\n                          [class.current]=\"isCurrentPanel(panelItem.id)\"\n                          type=\"button\"\n                          (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                          \n                          @if (getThumbnailUrl(panelItem.panel)) {\n                            <div class=\"panel-thumbnail\">\n                              <img \n                                [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                loading=\"lazy\" />\n                              @if (isCurrentPanel(panelItem.id)) {\n                                <div class=\"current-overlay\">\n                                  <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                </div>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"panel-thumbnail placeholder\">\n                              <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                            </div>\n                          }\n                          \n                          <div class=\"panel-info\">\n                            <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                          </div>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredChapters.length === 0) {\n            <div class=\"empty-state\">\n              <p>{{ 'toc.no_results' | translate: {query: searchQuery} }}</p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"toc-footer\">\n        <p class=\"footer-hint\">\n          <kbd>\u2191</kbd> <kbd>\u2193</kbd> {{ 'toc.keyboard_hint_nav' | translate }}\n          <kbd>Enter</kbd> {{ 'toc.keyboard_hint_select' | translate }}\n          <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'toc.keyboard_hint_close' | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".toc-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toc-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toc-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.toc-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.toc-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.toc-content{flex:1;overflow-y:auto;padding:16px 0}.toc-content::-webkit-scrollbar{width:8px}.toc-content::-webkit-scrollbar-track{background:#ffffff0d}.toc-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.toc-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.chapter-list{display:flex;flex-direction:column;gap:8px;padding:0 24px}.chapter-item{border-radius:8px;transition:background .2s ease}.chapter-item.selected{background:#ffffff0d}.chapter-item.current{background:#0078d71a}.chapter-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:8px;transition:all .2s ease}.chapter-header:hover{background:#ffffff1a}.chapter-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:600;color:#fff;background:#ffffff1a;border-radius:6px;flex-shrink:0}.chapter-item.current .chapter-number{background:#0078d7cc}.chapter-title{flex:1;font-size:16px;font-weight:500;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-badge{padding:4px 8px;font-size:11px;font-weight:600;color:#fff;background:#0078d7cc;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.panel-list{padding:12px 16px 16px 60px;display:flex;flex-direction:column;gap:16px}.page-group{display:flex;flex-direction:column;gap:12px}.page-header{padding:8px 12px;background:#ffffff0d;border-left:3px solid rgba(0,120,215,.6);border-radius:4px}.page-title{font-size:13px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.panel-card{display:flex;flex-direction:column;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;overflow:hidden;padding:0}.panel-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.panel-card:active{transform:translateY(0)}.panel-card.current{border-color:#0078d7cc;box-shadow:0 0 0 1px #0078d74d}.panel-thumbnail{position:relative;width:100%;aspect-ratio:4 / 3;background:#0000004d;overflow:hidden;display:flex;align-items:center;justify-content:center}.panel-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.panel-thumbnail.placeholder{background:linear-gradient(135deg,#0078d71a,#00b4781a)}.placeholder-icon{font-size:32px;opacity:.4}.current-overlay{position:absolute;inset:0;background:#0078d74d;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.current-icon{font-size:24px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.panel-info{padding:8px 10px;display:flex;flex-direction:column;gap:4px}.panel-title{font-size:12px;font-weight:500;color:#ffffffe6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.toc-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 768px){.toc-container{width:95%;max-height:90vh}.toc-header{padding:16px 20px}.toc-title{font-size:18px}.toc-search{padding:12px 20px}.chapter-list{padding:0 20px}.chapter-header{padding:10px 12px;gap:10px}.chapter-number{width:28px;height:28px;font-size:13px}.chapter-title{font-size:15px}.panel-list{padding:10px 12px 12px 48px;gap:12px}.page-header{padding:6px 10px}.page-title{font-size:12px}.panels-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.panel-thumbnail{aspect-ratio:3 / 2}.placeholder-icon{font-size:24px}.current-icon{font-size:20px}.panel-info{padding:6px 8px}.panel-title{font-size:11px}.toc-footer{padding:12px 20px}.footer-hint{font-size:11px;gap:12px}}.close-btn:focus-visible,.search-input:focus-visible,.panel-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.toc-overlay,.toc-container,.close-btn,.chapter-header,.panel-card{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: TocOverlayComponent, isStandalone: true, selector: "pw-toc-overlay", inputs: { manifest: "manifest", chapters: "chapters", currentChapterId: "currentChapterId", currentPanelId: "currentPanelId", locale: "locale", baseUrl: "baseUrl", visible: "visible" }, outputs: { navigate: "navigate", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"toc-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onClose()\">\n    <div class=\"toc-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Table of Contents\">\n      <!-- Header -->\n      <div class=\"toc-header\">\n        <h2 class=\"toc-title\">{{ 'toc.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toc.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Search -->\n      <div class=\"toc-search\">\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          [placeholder]=\"'toc.search_chapters' | translate\"\n          [attr.aria-label]=\"'toc.search_label' | translate\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange()\" />\n        <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n      </div>\n\n      <!-- Content -->\n      <div class=\"toc-content\">\n        <!-- Chapter list -->\n        <div class=\"chapter-list\" role=\"list\">\n          @for (chapter of filteredChapters; track chapter.id; let i = $index) {\n            <div\n              class=\"chapter-item\"\n              [class.selected]=\"i === selectedChapterIndex\"\n              [class.current]=\"isCurrentChapter(chapter)\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              (click)=\"selectChapter(i)\"\n              (keydown.enter)=\"selectChapter(i)\">\n              \n              <!-- Chapter header -->\n              <div class=\"chapter-header\" tabindex=\"0\" (click)=\"navigateToChapter(chapter)\" (keydown.enter)=\"navigateToChapter(chapter)\">\n                <span class=\"chapter-number\">{{ i + 1 }}</span>\n                <h3 class=\"chapter-title\">{{ getChapterTitle(chapter) }}</h3>\n                @if (isCurrentChapter(chapter)) {\n                  <span class=\"current-badge\">{{ 'toc.current' | translate }}</span>\n                }\n              </div>\n\n              <!-- Panel list (if chapter selected) -->\n              @if (i === selectedChapterIndex) {\n                <div class=\"panel-list\">\n                  <!-- If chapter has pages, group by pages -->\n                  @if (hasPages(chapter)) {\n                    @for (page of getPages(chapter); track page.id) {\n                      <div class=\"page-group\">\n                        <div class=\"page-header\">\n                          <span class=\"page-title\">{{ getPageTitle(page) }}</span>\n                        </div>\n                        <div class=\"panels-grid\">\n                          @for (panelItem of getPanelsForPage(chapter, page); track panelItem.id) {\n                            <button\n                              class=\"panel-card\"\n                              [class.current]=\"isCurrentPanel(panelItem.id)\"\n                              type=\"button\"\n                              (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                              \n                              @if (getThumbnailUrl(panelItem.panel)) {\n                                <div class=\"panel-thumbnail\">\n                                  <img \n                                    [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                    [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                    loading=\"lazy\" />\n                                  @if (isCurrentPanel(panelItem.id)) {\n                                    <div class=\"current-overlay\">\n                                      <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                    </div>\n                                  }\n                                </div>\n                              } @else {\n                                <div class=\"panel-thumbnail placeholder\">\n                                  <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                                </div>\n                              }\n                              \n                              <div class=\"panel-info\">\n                                <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                              </div>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- No pages, show all panels directly -->\n                    <div class=\"panels-grid\">\n                      @for (panelItem of getPanels(chapter); track panelItem.id) {\n                        <button\n                          class=\"panel-card\"\n                          [class.current]=\"isCurrentPanel(panelItem.id)\"\n                          type=\"button\"\n                          (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                          \n                          @if (getThumbnailUrl(panelItem.panel)) {\n                            <div class=\"panel-thumbnail\">\n                              <img \n                                [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                loading=\"lazy\" />\n                              @if (isCurrentPanel(panelItem.id)) {\n                                <div class=\"current-overlay\">\n                                  <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                </div>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"panel-thumbnail placeholder\">\n                              <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                            </div>\n                          }\n                          \n                          <div class=\"panel-info\">\n                            <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                          </div>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredChapters.length === 0) {\n            <div class=\"empty-state\">\n              <p>{{ 'toc.no_results' | translate: {query: searchQuery} }}</p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"toc-footer\">\n        <p class=\"footer-hint\">\n          <kbd>\u2191</kbd> <kbd>\u2193</kbd> {{ 'toc.keyboard_hint_nav' | translate }}\n          <kbd>Enter</kbd> {{ 'toc.keyboard_hint_select' | translate }}\n          <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'toc.keyboard_hint_close' | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".toc-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toc-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toc-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.toc-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.toc-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.toc-content{flex:1;overflow-y:auto;padding:16px 0}.toc-content::-webkit-scrollbar{width:8px}.toc-content::-webkit-scrollbar-track{background:#ffffff0d}.toc-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.toc-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.chapter-list{display:flex;flex-direction:column;gap:8px;padding:0 24px}.chapter-item{border-radius:8px;transition:background .2s ease}.chapter-item.selected{background:#ffffff0d}.chapter-item.current{background:#0078d71a}.chapter-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:8px;transition:all .2s ease}.chapter-header:hover{background:#ffffff1a}.chapter-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:600;color:#fff;background:#ffffff1a;border-radius:6px;flex-shrink:0}.chapter-item.current .chapter-number{background:#0078d7cc}.chapter-title{flex:1;font-size:16px;font-weight:500;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-badge{padding:4px 8px;font-size:11px;font-weight:600;color:#fff;background:#0078d7cc;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.panel-list{padding:12px 16px 16px 60px;display:flex;flex-direction:column;gap:16px}.page-group{display:flex;flex-direction:column;gap:12px}.page-header{padding:8px 12px;background:#ffffff0d;border-left:3px solid rgba(0,120,215,.6);border-radius:4px}.page-title{font-size:13px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.panel-card{display:flex;flex-direction:column;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;overflow:hidden;padding:0}.panel-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.panel-card:active{transform:translateY(0)}.panel-card.current{border-color:#0078d7cc;box-shadow:0 0 0 1px #0078d74d}.panel-thumbnail{position:relative;width:100%;aspect-ratio:4 / 3;background:#0000004d;overflow:hidden;display:flex;align-items:center;justify-content:center}.panel-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.panel-thumbnail.placeholder{background:linear-gradient(135deg,#0078d71a,#00b4781a)}.placeholder-icon{font-size:32px;opacity:.4}.current-overlay{position:absolute;inset:0;background:#0078d74d;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.current-icon{font-size:24px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.panel-info{padding:8px 10px;display:flex;flex-direction:column;gap:4px}.panel-title{font-size:12px;font-weight:500;color:#ffffffe6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.toc-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 768px){.toc-container{width:95%;max-height:90vh}.toc-header{padding:16px 20px}.toc-title{font-size:18px}.toc-search{padding:12px 20px}.chapter-list{padding:0 20px}.chapter-header{padding:10px 12px;gap:10px}.chapter-number{width:28px;height:28px;font-size:13px}.chapter-title{font-size:15px}.panel-list{padding:10px 12px 12px 48px;gap:12px}.page-header{padding:6px 10px}.page-title{font-size:12px}.panels-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.panel-thumbnail{aspect-ratio:3 / 2}.placeholder-icon{font-size:24px}.current-icon{font-size:20px}.panel-info{padding:6px 8px}.panel-title{font-size:11px}.toc-footer{padding:12px 20px}.footer-hint{font-size:11px;gap:12px}}.close-btn:focus-visible,.search-input:focus-visible,.panel-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.toc-overlay,.toc-container,.close-btn,.chapter-header,.panel-card{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: TocOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-toc-overlay', imports: [FormsModule, TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"toc-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onClose()\">\n    <div class=\"toc-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Table of Contents\">\n      <!-- Header -->\n      <div class=\"toc-header\">\n        <h2 class=\"toc-title\">{{ 'toc.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toc.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Search -->\n      <div class=\"toc-search\">\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          [placeholder]=\"'toc.search_chapters' | translate\"\n          [attr.aria-label]=\"'toc.search_label' | translate\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange()\" />\n        <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n      </div>\n\n      <!-- Content -->\n      <div class=\"toc-content\">\n        <!-- Chapter list -->\n        <div class=\"chapter-list\" role=\"list\">\n          @for (chapter of filteredChapters; track chapter.id; let i = $index) {\n            <div\n              class=\"chapter-item\"\n              [class.selected]=\"i === selectedChapterIndex\"\n              [class.current]=\"isCurrentChapter(chapter)\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              (click)=\"selectChapter(i)\"\n              (keydown.enter)=\"selectChapter(i)\">\n              \n              <!-- Chapter header -->\n              <div class=\"chapter-header\" tabindex=\"0\" (click)=\"navigateToChapter(chapter)\" (keydown.enter)=\"navigateToChapter(chapter)\">\n                <span class=\"chapter-number\">{{ i + 1 }}</span>\n                <h3 class=\"chapter-title\">{{ getChapterTitle(chapter) }}</h3>\n                @if (isCurrentChapter(chapter)) {\n                  <span class=\"current-badge\">{{ 'toc.current' | translate }}</span>\n                }\n              </div>\n\n              <!-- Panel list (if chapter selected) -->\n              @if (i === selectedChapterIndex) {\n                <div class=\"panel-list\">\n                  <!-- If chapter has pages, group by pages -->\n                  @if (hasPages(chapter)) {\n                    @for (page of getPages(chapter); track page.id) {\n                      <div class=\"page-group\">\n                        <div class=\"page-header\">\n                          <span class=\"page-title\">{{ getPageTitle(page) }}</span>\n                        </div>\n                        <div class=\"panels-grid\">\n                          @for (panelItem of getPanelsForPage(chapter, page); track panelItem.id) {\n                            <button\n                              class=\"panel-card\"\n                              [class.current]=\"isCurrentPanel(panelItem.id)\"\n                              type=\"button\"\n                              (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                              \n                              @if (getThumbnailUrl(panelItem.panel)) {\n                                <div class=\"panel-thumbnail\">\n                                  <img \n                                    [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                    [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                    loading=\"lazy\" />\n                                  @if (isCurrentPanel(panelItem.id)) {\n                                    <div class=\"current-overlay\">\n                                      <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                    </div>\n                                  }\n                                </div>\n                              } @else {\n                                <div class=\"panel-thumbnail placeholder\">\n                                  <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                                </div>\n                              }\n                              \n                              <div class=\"panel-info\">\n                                <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                              </div>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- No pages, show all panels directly -->\n                    <div class=\"panels-grid\">\n                      @for (panelItem of getPanels(chapter); track panelItem.id) {\n                        <button\n                          class=\"panel-card\"\n                          [class.current]=\"isCurrentPanel(panelItem.id)\"\n                          type=\"button\"\n                          (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                          \n                          @if (getThumbnailUrl(panelItem.panel)) {\n                            <div class=\"panel-thumbnail\">\n                              <img \n                                [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                loading=\"lazy\" />\n                              @if (isCurrentPanel(panelItem.id)) {\n                                <div class=\"current-overlay\">\n                                  <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                </div>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"panel-thumbnail placeholder\">\n                              <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                            </div>\n                          }\n                          \n                          <div class=\"panel-info\">\n                            <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                          </div>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredChapters.length === 0) {\n            <div class=\"empty-state\">\n              <p>{{ 'toc.no_results' | translate: {query: searchQuery} }}</p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"toc-footer\">\n        <p class=\"footer-hint\">\n          <kbd>\u2191</kbd> <kbd>\u2193</kbd> {{ 'toc.keyboard_hint_nav' | translate }}\n          <kbd>Enter</kbd> {{ 'toc.keyboard_hint_select' | translate }}\n          <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'toc.keyboard_hint_close' | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".toc-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toc-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toc-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.toc-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.toc-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.toc-content{flex:1;overflow-y:auto;padding:16px 0}.toc-content::-webkit-scrollbar{width:8px}.toc-content::-webkit-scrollbar-track{background:#ffffff0d}.toc-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.toc-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.chapter-list{display:flex;flex-direction:column;gap:8px;padding:0 24px}.chapter-item{border-radius:8px;transition:background .2s ease}.chapter-item.selected{background:#ffffff0d}.chapter-item.current{background:#0078d71a}.chapter-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:8px;transition:all .2s ease}.chapter-header:hover{background:#ffffff1a}.chapter-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:600;color:#fff;background:#ffffff1a;border-radius:6px;flex-shrink:0}.chapter-item.current .chapter-number{background:#0078d7cc}.chapter-title{flex:1;font-size:16px;font-weight:500;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-badge{padding:4px 8px;font-size:11px;font-weight:600;color:#fff;background:#0078d7cc;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.panel-list{padding:12px 16px 16px 60px;display:flex;flex-direction:column;gap:16px}.page-group{display:flex;flex-direction:column;gap:12px}.page-header{padding:8px 12px;background:#ffffff0d;border-left:3px solid rgba(0,120,215,.6);border-radius:4px}.page-title{font-size:13px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.panel-card{display:flex;flex-direction:column;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;overflow:hidden;padding:0}.panel-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.panel-card:active{transform:translateY(0)}.panel-card.current{border-color:#0078d7cc;box-shadow:0 0 0 1px #0078d74d}.panel-thumbnail{position:relative;width:100%;aspect-ratio:4 / 3;background:#0000004d;overflow:hidden;display:flex;align-items:center;justify-content:center}.panel-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.panel-thumbnail.placeholder{background:linear-gradient(135deg,#0078d71a,#00b4781a)}.placeholder-icon{font-size:32px;opacity:.4}.current-overlay{position:absolute;inset:0;background:#0078d74d;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.current-icon{font-size:24px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.panel-info{padding:8px 10px;display:flex;flex-direction:column;gap:4px}.panel-title{font-size:12px;font-weight:500;color:#ffffffe6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.toc-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 768px){.toc-container{width:95%;max-height:90vh}.toc-header{padding:16px 20px}.toc-title{font-size:18px}.toc-search{padding:12px 20px}.chapter-list{padding:0 20px}.chapter-header{padding:10px 12px;gap:10px}.chapter-number{width:28px;height:28px;font-size:13px}.chapter-title{font-size:15px}.panel-list{padding:10px 12px 12px 48px;gap:12px}.page-header{padding:6px 10px}.page-title{font-size:12px}.panels-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.panel-thumbnail{aspect-ratio:3 / 2}.placeholder-icon{font-size:24px}.current-icon{font-size:20px}.panel-info{padding:6px 8px}.panel-title{font-size:11px}.toc-footer{padding:12px 20px}.footer-hint{font-size:11px;gap:12px}}.close-btn:focus-visible,.search-input:focus-visible,.panel-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.toc-overlay,.toc-container,.close-btn,.chapter-header,.panel-card{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-toc-overlay', imports: [FormsModule, TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"toc-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onClose()\">\n    <div class=\"toc-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Table of Contents\">\n      <!-- Header -->\n      <div class=\"toc-header\">\n        <h2 class=\"toc-title\">{{ 'toc.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'toc.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Search -->\n      <div class=\"toc-search\">\n        <input\n          type=\"text\"\n          class=\"search-input\"\n          [placeholder]=\"'toc.search_chapters' | translate\"\n          [attr.aria-label]=\"'toc.search_label' | translate\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange()\" />\n        <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n      </div>\n\n      <!-- Content -->\n      <div class=\"toc-content\">\n        <!-- Chapter list -->\n        <div class=\"chapter-list\" role=\"list\">\n          @for (chapter of filteredChapters; track chapter.id; let i = $index) {\n            <div\n              class=\"chapter-item\"\n              [class.selected]=\"i === selectedChapterIndex\"\n              [class.current]=\"isCurrentChapter(chapter)\"\n              role=\"listitem\"\n              tabindex=\"0\"\n              (click)=\"selectChapter(i)\"\n              (keydown.enter)=\"selectChapter(i)\">\n              \n              <!-- Chapter header -->\n              <div class=\"chapter-header\" tabindex=\"0\" (click)=\"navigateToChapter(chapter)\" (keydown.enter)=\"navigateToChapter(chapter)\">\n                <span class=\"chapter-number\">{{ i + 1 }}</span>\n                <h3 class=\"chapter-title\">{{ getChapterTitle(chapter) }}</h3>\n                @if (isCurrentChapter(chapter)) {\n                  <span class=\"current-badge\">{{ 'toc.current' | translate }}</span>\n                }\n              </div>\n\n              <!-- Panel list (if chapter selected) -->\n              @if (i === selectedChapterIndex) {\n                <div class=\"panel-list\">\n                  <!-- If chapter has pages, group by pages -->\n                  @if (hasPages(chapter)) {\n                    @for (page of getPages(chapter); track page.id) {\n                      <div class=\"page-group\">\n                        <div class=\"page-header\">\n                          <span class=\"page-title\">{{ getPageTitle(page) }}</span>\n                        </div>\n                        <div class=\"panels-grid\">\n                          @for (panelItem of getPanelsForPage(chapter, page); track panelItem.id) {\n                            <button\n                              class=\"panel-card\"\n                              [class.current]=\"isCurrentPanel(panelItem.id)\"\n                              type=\"button\"\n                              (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                              \n                              @if (getThumbnailUrl(panelItem.panel)) {\n                                <div class=\"panel-thumbnail\">\n                                  <img \n                                    [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                    [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                    loading=\"lazy\" />\n                                  @if (isCurrentPanel(panelItem.id)) {\n                                    <div class=\"current-overlay\">\n                                      <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                    </div>\n                                  }\n                                </div>\n                              } @else {\n                                <div class=\"panel-thumbnail placeholder\">\n                                  <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                                </div>\n                              }\n                              \n                              <div class=\"panel-info\">\n                                <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                              </div>\n                            </button>\n                          }\n                        </div>\n                      </div>\n                    }\n                  } @else {\n                    <!-- No pages, show all panels directly -->\n                    <div class=\"panels-grid\">\n                      @for (panelItem of getPanels(chapter); track panelItem.id) {\n                        <button\n                          class=\"panel-card\"\n                          [class.current]=\"isCurrentPanel(panelItem.id)\"\n                          type=\"button\"\n                          (click)=\"navigateToPanel(chapter, panelItem.id)\">\n                          \n                          @if (getThumbnailUrl(panelItem.panel)) {\n                            <div class=\"panel-thumbnail\">\n                              <img \n                                [src]=\"getThumbnailUrl(panelItem.panel)\" \n                                [alt]=\"getPanelTitle(panelItem.panel, panelItem.id)\"\n                                loading=\"lazy\" />\n                              @if (isCurrentPanel(panelItem.id)) {\n                                <div class=\"current-overlay\">\n                                  <span class=\"current-icon\"><pw-icon name=\"lucidePlay\" /></span>\n                                </div>\n                              }\n                            </div>\n                          } @else {\n                            <div class=\"panel-thumbnail placeholder\">\n                              <span class=\"placeholder-icon\"><pw-icon name=\"lucideImage\" /></span>\n                            </div>\n                          }\n                          \n                          <div class=\"panel-info\">\n                            <span class=\"panel-title\">{{ getPanelTitle(panelItem.panel, panelItem.id) }}</span>\n                          </div>\n                        </button>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n\n          @if (filteredChapters.length === 0) {\n            <div class=\"empty-state\">\n              <p>{{ 'toc.no_results' | translate: {query: searchQuery} }}</p>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Footer -->\n      <div class=\"toc-footer\">\n        <p class=\"footer-hint\">\n          <kbd>\u2191</kbd> <kbd>\u2193</kbd> {{ 'toc.keyboard_hint_nav' | translate }}\n          <kbd>Enter</kbd> {{ 'toc.keyboard_hint_select' | translate }}\n          <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'toc.keyboard_hint_close' | translate }}\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".toc-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.toc-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.toc-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.toc-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.toc-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.toc-content{flex:1;overflow-y:auto;padding:16px 0}.toc-content::-webkit-scrollbar{width:8px}.toc-content::-webkit-scrollbar-track{background:#ffffff0d}.toc-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.toc-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.chapter-list{display:flex;flex-direction:column;gap:8px;padding:0 24px}.chapter-item{border-radius:8px;transition:background .2s ease}.chapter-item.selected{background:#ffffff0d}.chapter-item.current{background:#0078d71a}.chapter-header{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;border-radius:8px;transition:all .2s ease}.chapter-header:hover{background:#ffffff1a}.chapter-number{display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:14px;font-weight:600;color:#fff;background:#ffffff1a;border-radius:6px;flex-shrink:0}.chapter-item.current .chapter-number{background:#0078d7cc}.chapter-title{flex:1;font-size:16px;font-weight:500;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.current-badge{padding:4px 8px;font-size:11px;font-weight:600;color:#fff;background:#0078d7cc;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.panel-list{padding:12px 16px 16px 60px;display:flex;flex-direction:column;gap:16px}.page-group{display:flex;flex-direction:column;gap:12px}.page-header{padding:8px 12px;background:#ffffff0d;border-left:3px solid rgba(0,120,215,.6);border-radius:4px}.page-title{font-size:13px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.panels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.panel-card{display:flex;flex-direction:column;background:#ffffff0d;border:2px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease;overflow:hidden;padding:0}.panel-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.panel-card:active{transform:translateY(0)}.panel-card.current{border-color:#0078d7cc;box-shadow:0 0 0 1px #0078d74d}.panel-thumbnail{position:relative;width:100%;aspect-ratio:4 / 3;background:#0000004d;overflow:hidden;display:flex;align-items:center;justify-content:center}.panel-thumbnail img{width:100%;height:100%;object-fit:cover;display:block}.panel-thumbnail.placeholder{background:linear-gradient(135deg,#0078d71a,#00b4781a)}.placeholder-icon{font-size:32px;opacity:.4}.current-overlay{position:absolute;inset:0;background:#0078d74d;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.current-icon{font-size:24px;color:#fff;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.panel-info{padding:8px 10px;display:flex;flex-direction:column;gap:4px}.panel-title{font-size:12px;font-weight:500;color:#ffffffe6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.toc-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:16px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 768px){.toc-container{width:95%;max-height:90vh}.toc-header{padding:16px 20px}.toc-title{font-size:18px}.toc-search{padding:12px 20px}.chapter-list{padding:0 20px}.chapter-header{padding:10px 12px;gap:10px}.chapter-number{width:28px;height:28px;font-size:13px}.chapter-title{font-size:15px}.panel-list{padding:10px 12px 12px 48px;gap:12px}.page-header{padding:6px 10px}.page-title{font-size:12px}.panels-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}.panel-thumbnail{aspect-ratio:3 / 2}.placeholder-icon{font-size:24px}.current-icon{font-size:20px}.panel-info{padding:6px 8px}.panel-title{font-size:11px}.toc-footer{padding:12px 20px}.footer-hint{font-size:11px;gap:12px}}.close-btn:focus-visible,.search-input:focus-visible,.panel-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.toc-overlay,.toc-container,.close-btn,.chapter-header,.panel-card{animation:none;transition:none}}\n"] }]
         }], propDecorators: { manifest: [{
                 type: Input
             }], chapters: [{
@@ -15219,11 +15220,11 @@ class SettingsModalComponent {
         return variable.max;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SettingsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SettingsModalComponent, isStandalone: true, selector: "pw-settings-modal", inputs: { preferences: "preferences", availableLocales: "availableLocales", locale: "locale", variables: "variables", variableValues: "variableValues", visible: "visible" }, outputs: { preferencesChange: "preferencesChange", localeChange: "localeChange", variableChange: "variableChange", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"settings-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); cancel()\">\n    <div class=\"settings-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Settings\">\n      <!-- Header -->\n      <div class=\"settings-header\">\n        <h2 class=\"settings-title\">{{ 'settings.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"cancel()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Tabs -->\n      <div class=\"settings-tabs\" role=\"tablist\">\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'preferences'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'preferences'\"\n          (click)=\"switchTab('preferences')\">\n          {{ 'settings.preferences' | translate }}\n        </button>\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'variables'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'variables'\"\n          (click)=\"switchTab('variables')\">\n          {{ 'settings.variables' | translate }}\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"settings-content\">\n        <!-- Preferences Tab -->\n        @if (activeTab === 'preferences') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.language' | translate }}</h3>\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"locale-select\">{{ 'settings.interface_language' | translate }}</label>\n                <select\n                  id=\"locale-select\"\n                  class=\"setting-select\"\n                  [ngModel]=\"locale\"\n                  (ngModelChange)=\"updateLocale($event)\">\n                  @for (loc of availableLocales; track loc) {\n                    <option [value]=\"loc\">{{ loc }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.display' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.mangaMode\"\n                    (ngModelChange)=\"updatePreference('mangaMode', $event)\" />\n                  <span>{{ 'settings.manga_mode' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.reducedMotion\"\n                    (ngModelChange)=\"updatePreference('reducedMotion', $event)\" />\n                  <span>{{ 'settings.reduced_motion' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.highContrast\"\n                    (ngModelChange)=\"updatePreference('highContrast', $event)\" />\n                  <span>{{ 'settings.high_contrast' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.content' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.speech\"\n                    (ngModelChange)=\"updatePreference('speech', $event)\" />\n                  <span>{{ 'settings.show_speech_bubbles' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.audio' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.audio\"\n                    (ngModelChange)=\"updatePreference('audio', $event)\" />\n                  <span>{{ 'settings.enable_audio' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.sfx\"\n                    (ngModelChange)=\"updatePreference('sfx', $event)\" />\n                  <span>{{ 'settings.enable_sfx' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.autoplay' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.autoplay\"\n                    (ngModelChange)=\"updatePreference('autoplay', $event)\" />\n                  <span>{{ 'settings.enable_autoplay' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"seconds-input\">{{ 'settings.seconds_per_panel' | translate }}</label>\n                <div class=\"number-input\">\n                  <input\n                    id=\"seconds-input\"\n                    type=\"number\"\n                    class=\"setting-number\"\n                    min=\"0.5\"\n                    max=\"120\"\n                    step=\"0.5\"\n                    [ngModel]=\"preferences.secondsPerPanel\"\n                    (ngModelChange)=\"updatePreference('secondsPerPanel', $event)\" />\n                  <span class=\"input-unit\">{{ 'settings.seconds_unit' | translate }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"settings-actions\">\n              <button\n                class=\"action-btn secondary\"\n                type=\"button\"\n                (click)=\"resetPreferences()\">\n                {{ 'settings.reset_defaults' | translate }}\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Variables Tab -->\n        @if (activeTab === 'variables') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            @if (getPublicVariables().length > 0) {\n              <div class=\"settings-section\">\n                <h3 class=\"section-title\">{{ 'settings.public_variables' | translate }}</h3>\n                \n                @for (variable of getPublicVariables(); track variable.id) {\n                  <div class=\"setting-item variable-item\">\n                    <span class=\"setting-label\">{{ variable.id }}</span>\n                    \n                    <!-- Boolean Variable -->\n                    @if (isBoolean(variable)) {\n                      <label class=\"toggle-label\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"setting-checkbox\"\n                          [checked]=\"getVariableValue(variable)\"\n                          (change)=\"updateVariable(variable.id, $any($event.target).checked)\" />\n                        <span>{{ getVariableValue(variable) ? ('settings.enabled' | translate) : ('settings.disabled' | translate) }}</span>\n                      </label>\n                    }\n\n                    <!-- Number Variable -->\n                    @if (isNumber(variable)) {\n                      <div class=\"number-input\">\n                        <input\n                          type=\"number\"\n                          class=\"setting-number\"\n                          [min]=\"getMin(variable)\"\n                          [max]=\"getMax(variable)\"\n                          [value]=\"getVariableValue(variable)\"\n                          (input)=\"updateVariable(variable.id, $any($event.target).valueAsNumber)\" />\n                        <button\n                          class=\"reset-btn-small\"\n                          type=\"button\"\n                          [attr.title]=\"'settings.reset_to_default' | translate\"\n                          (click)=\"resetVariable(variable)\">\n                          <pw-icon name=\"lucideRotateCcw\" />\n                        </button>\n                      </div>\n                    }\n\n                    <!-- Enum Variable -->\n                    @if (isEnum(variable)) {\n                      <select\n                        class=\"setting-select\"\n                        [value]=\"getVariableValue(variable)\"\n                        (change)=\"updateVariable(variable.id, $any($event.target).value)\">\n                        @for (option of getEnumOptions(variable); track option) {\n                          <option [value]=\"option\">{{ option }}</option>\n                        }\n                      </select>\n                    }\n\n                    <!-- String Variable -->\n                    @if (isString(variable)) {\n                      <input\n                        type=\"text\"\n                        class=\"setting-text\"\n                        [value]=\"getVariableValue(variable)\"\n                        (input)=\"updateVariable(variable.id, $any($event.target).value)\" />\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"settings-actions\">\n                <button\n                  class=\"action-btn secondary\"\n                  type=\"button\"\n                  (click)=\"resetAllVariables()\">\n                  {{ 'settings.reset_all_variables' | translate }}\n                </button>\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <p>{{ 'settings.no_variables' | translate }}</p>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"settings-footer\">\n        <button\n          class=\"action-btn secondary\"\n          type=\"button\"\n          (click)=\"cancel()\">\n          {{ 'settings.cancel' | translate }}\n        </button>\n        <button\n          class=\"action-btn primary\"\n          type=\"button\"\n          (click)=\"save()\">\n          {{ 'settings.save_changes' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".settings-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-container{width:90%;max-width:700px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.settings-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.tab-btn{flex:1;padding:14px 20px;font-size:15px;font-weight:500;color:#fff9;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#fffc;background:#ffffff0d}.tab-btn.active{color:#fff;border-bottom-color:#0078d7cc}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:#ffffff0d}.settings-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tab-panel{display:flex;flex-direction:column;gap:24px}.settings-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:16px;font-weight:600;color:#ffffffe6;margin:0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.setting-item{display:flex;flex-direction:column;gap:8px}.setting-item.variable-item{padding:12px;background:#ffffff05;border-radius:8px}.setting-label{font-size:14px;color:#fffc;display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-label:has(.setting-checkbox){padding:8px;border-radius:6px;transition:background .2s ease}.setting-label:has(.setting-checkbox):hover{background:#ffffff0d}.setting-checkbox{width:20px;height:20px;cursor:pointer;accent-color:rgba(0,120,215,.8)}.setting-select{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;cursor:pointer;transition:all .2s ease}.setting-select:hover{background:#ffffff14;border-color:#ffffff4d}.setting-select:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.number-input{display:flex;align-items:center;gap:8px}.setting-number{flex:1;padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-number:hover{background:#ffffff14;border-color:#ffffff4d}.setting-number:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.input-unit{font-size:13px;color:#ffffff80;white-space:nowrap}.setting-text{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-text:hover{background:#ffffff14;border-color:#ffffff4d}.setting-text:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.toggle-label{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .2s ease}.toggle-label:hover{background:#ffffff0d}.reset-btn-small{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff9;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.reset-btn-small:hover{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.settings-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 20px;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{color:#fff;background:#0078d7cc}.action-btn.primary:hover{background:#0078d7e6;transform:translateY(-1px);box-shadow:0 2px 8px #0078d74d}.action-btn.primary:active{transform:translateY(0)}.action-btn.secondary{color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.action-btn.secondary:hover{background:#ffffff26;border-color:#ffffff4d}.action-btn.secondary:active{background:#ffffff1a}@media (max-width: 768px){.settings-container{width:95%;max-height:90vh}.settings-header{padding:16px 20px}.settings-title{font-size:18px}.settings-content{padding:20px}.tab-panel{gap:20px}.settings-section{gap:14px}.section-title{font-size:15px}.setting-label{font-size:13px}.settings-footer{padding:14px 20px;flex-wrap:wrap}.action-btn{flex:1;min-width:120px}}.close-btn:focus-visible,.tab-btn:focus-visible,.setting-select:focus-visible,.setting-number:focus-visible,.setting-text:focus-visible,.action-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.settings-overlay,.settings-container,.close-btn,.tab-btn,.setting-label,.action-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$2.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: SettingsModalComponent, isStandalone: true, selector: "pw-settings-modal", inputs: { preferences: "preferences", availableLocales: "availableLocales", locale: "locale", variables: "variables", variableValues: "variableValues", visible: "visible" }, outputs: { preferencesChange: "preferencesChange", localeChange: "localeChange", variableChange: "variableChange", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"settings-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); cancel()\">\n    <div class=\"settings-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Settings\">\n      <!-- Header -->\n      <div class=\"settings-header\">\n        <h2 class=\"settings-title\">{{ 'settings.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"cancel()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Tabs -->\n      <div class=\"settings-tabs\" role=\"tablist\">\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'preferences'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'preferences'\"\n          (click)=\"switchTab('preferences')\">\n          {{ 'settings.preferences' | translate }}\n        </button>\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'variables'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'variables'\"\n          (click)=\"switchTab('variables')\">\n          {{ 'settings.variables' | translate }}\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"settings-content\">\n        <!-- Preferences Tab -->\n        @if (activeTab === 'preferences') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.language' | translate }}</h3>\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"locale-select\">{{ 'settings.interface_language' | translate }}</label>\n                <select\n                  id=\"locale-select\"\n                  class=\"setting-select\"\n                  [ngModel]=\"locale\"\n                  (ngModelChange)=\"updateLocale($event)\">\n                  @for (loc of availableLocales; track loc) {\n                    <option [value]=\"loc\">{{ loc }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.display' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.mangaMode\"\n                    (ngModelChange)=\"updatePreference('mangaMode', $event)\" />\n                  <span>{{ 'settings.manga_mode' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.reducedMotion\"\n                    (ngModelChange)=\"updatePreference('reducedMotion', $event)\" />\n                  <span>{{ 'settings.reduced_motion' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.highContrast\"\n                    (ngModelChange)=\"updatePreference('highContrast', $event)\" />\n                  <span>{{ 'settings.high_contrast' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.content' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.speech\"\n                    (ngModelChange)=\"updatePreference('speech', $event)\" />\n                  <span>{{ 'settings.show_speech_bubbles' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.audio' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.audio\"\n                    (ngModelChange)=\"updatePreference('audio', $event)\" />\n                  <span>{{ 'settings.enable_audio' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.sfx\"\n                    (ngModelChange)=\"updatePreference('sfx', $event)\" />\n                  <span>{{ 'settings.enable_sfx' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.autoplay' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.autoplay\"\n                    (ngModelChange)=\"updatePreference('autoplay', $event)\" />\n                  <span>{{ 'settings.enable_autoplay' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"seconds-input\">{{ 'settings.seconds_per_panel' | translate }}</label>\n                <div class=\"number-input\">\n                  <input\n                    id=\"seconds-input\"\n                    type=\"number\"\n                    class=\"setting-number\"\n                    min=\"0.5\"\n                    max=\"120\"\n                    step=\"0.5\"\n                    [ngModel]=\"preferences.secondsPerPanel\"\n                    (ngModelChange)=\"updatePreference('secondsPerPanel', $event)\" />\n                  <span class=\"input-unit\">{{ 'settings.seconds_unit' | translate }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"settings-actions\">\n              <button\n                class=\"action-btn secondary\"\n                type=\"button\"\n                (click)=\"resetPreferences()\">\n                {{ 'settings.reset_defaults' | translate }}\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Variables Tab -->\n        @if (activeTab === 'variables') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            @if (getPublicVariables().length > 0) {\n              <div class=\"settings-section\">\n                <h3 class=\"section-title\">{{ 'settings.public_variables' | translate }}</h3>\n                \n                @for (variable of getPublicVariables(); track variable.id) {\n                  <div class=\"setting-item variable-item\">\n                    <span class=\"setting-label\">{{ variable.id }}</span>\n                    \n                    <!-- Boolean Variable -->\n                    @if (isBoolean(variable)) {\n                      <label class=\"toggle-label\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"setting-checkbox\"\n                          [checked]=\"getVariableValue(variable)\"\n                          (change)=\"updateVariable(variable.id, $any($event.target).checked)\" />\n                        <span>{{ getVariableValue(variable) ? ('settings.enabled' | translate) : ('settings.disabled' | translate) }}</span>\n                      </label>\n                    }\n\n                    <!-- Number Variable -->\n                    @if (isNumber(variable)) {\n                      <div class=\"number-input\">\n                        <input\n                          type=\"number\"\n                          class=\"setting-number\"\n                          [min]=\"getMin(variable)\"\n                          [max]=\"getMax(variable)\"\n                          [value]=\"getVariableValue(variable)\"\n                          (input)=\"updateVariable(variable.id, $any($event.target).valueAsNumber)\" />\n                        <button\n                          class=\"reset-btn-small\"\n                          type=\"button\"\n                          [attr.title]=\"'settings.reset_to_default' | translate\"\n                          (click)=\"resetVariable(variable)\">\n                          <pw-icon name=\"lucideRotateCcw\" />\n                        </button>\n                      </div>\n                    }\n\n                    <!-- Enum Variable -->\n                    @if (isEnum(variable)) {\n                      <select\n                        class=\"setting-select\"\n                        [value]=\"getVariableValue(variable)\"\n                        (change)=\"updateVariable(variable.id, $any($event.target).value)\">\n                        @for (option of getEnumOptions(variable); track option) {\n                          <option [value]=\"option\">{{ option }}</option>\n                        }\n                      </select>\n                    }\n\n                    <!-- String Variable -->\n                    @if (isString(variable)) {\n                      <input\n                        type=\"text\"\n                        class=\"setting-text\"\n                        [value]=\"getVariableValue(variable)\"\n                        (input)=\"updateVariable(variable.id, $any($event.target).value)\" />\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"settings-actions\">\n                <button\n                  class=\"action-btn secondary\"\n                  type=\"button\"\n                  (click)=\"resetAllVariables()\">\n                  {{ 'settings.reset_all_variables' | translate }}\n                </button>\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <p>{{ 'settings.no_variables' | translate }}</p>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"settings-footer\">\n        <button\n          class=\"action-btn secondary\"\n          type=\"button\"\n          (click)=\"cancel()\">\n          {{ 'settings.cancel' | translate }}\n        </button>\n        <button\n          class=\"action-btn primary\"\n          type=\"button\"\n          (click)=\"save()\">\n          {{ 'settings.save_changes' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".settings-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-container{width:90%;max-width:700px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.settings-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.tab-btn{flex:1;padding:14px 20px;font-size:15px;font-weight:500;color:#fff9;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#fffc;background:#ffffff0d}.tab-btn.active{color:#fff;border-bottom-color:#0078d7cc}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:#ffffff0d}.settings-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tab-panel{display:flex;flex-direction:column;gap:24px}.settings-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:16px;font-weight:600;color:#ffffffe6;margin:0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.setting-item{display:flex;flex-direction:column;gap:8px}.setting-item.variable-item{padding:12px;background:#ffffff05;border-radius:8px}.setting-label{font-size:14px;color:#fffc;display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-label:has(.setting-checkbox){padding:8px;border-radius:6px;transition:background .2s ease}.setting-label:has(.setting-checkbox):hover{background:#ffffff0d}.setting-checkbox{width:20px;height:20px;cursor:pointer;accent-color:rgba(0,120,215,.8)}.setting-select{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;cursor:pointer;transition:all .2s ease}.setting-select:hover{background:#ffffff14;border-color:#ffffff4d}.setting-select:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.number-input{display:flex;align-items:center;gap:8px}.setting-number{flex:1;padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-number:hover{background:#ffffff14;border-color:#ffffff4d}.setting-number:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.input-unit{font-size:13px;color:#ffffff80;white-space:nowrap}.setting-text{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-text:hover{background:#ffffff14;border-color:#ffffff4d}.setting-text:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.toggle-label{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .2s ease}.toggle-label:hover{background:#ffffff0d}.reset-btn-small{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff9;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.reset-btn-small:hover{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.settings-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 20px;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{color:#fff;background:#0078d7cc}.action-btn.primary:hover{background:#0078d7e6;transform:translateY(-1px);box-shadow:0 2px 8px #0078d74d}.action-btn.primary:active{transform:translateY(0)}.action-btn.secondary{color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.action-btn.secondary:hover{background:#ffffff26;border-color:#ffffff4d}.action-btn.secondary:active{background:#ffffff1a}@media (max-width: 768px){.settings-container{width:95%;max-height:90vh}.settings-header{padding:16px 20px}.settings-title{font-size:18px}.settings-content{padding:20px}.tab-panel{gap:20px}.settings-section{gap:14px}.section-title{font-size:15px}.setting-label{font-size:13px}.settings-footer{padding:14px 20px;flex-wrap:wrap}.action-btn{flex:1;min-width:120px}}.close-btn:focus-visible,.tab-btn:focus-visible,.setting-select:focus-visible,.setting-number:focus-visible,.setting-text:focus-visible,.action-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.settings-overlay,.settings-container,.close-btn,.tab-btn,.setting-label,.action-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1$1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: SettingsModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-settings-modal', imports: [FormsModule, TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"settings-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); cancel()\">\n    <div class=\"settings-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Settings\">\n      <!-- Header -->\n      <div class=\"settings-header\">\n        <h2 class=\"settings-title\">{{ 'settings.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"cancel()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Tabs -->\n      <div class=\"settings-tabs\" role=\"tablist\">\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'preferences'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'preferences'\"\n          (click)=\"switchTab('preferences')\">\n          {{ 'settings.preferences' | translate }}\n        </button>\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'variables'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'variables'\"\n          (click)=\"switchTab('variables')\">\n          {{ 'settings.variables' | translate }}\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"settings-content\">\n        <!-- Preferences Tab -->\n        @if (activeTab === 'preferences') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.language' | translate }}</h3>\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"locale-select\">{{ 'settings.interface_language' | translate }}</label>\n                <select\n                  id=\"locale-select\"\n                  class=\"setting-select\"\n                  [ngModel]=\"locale\"\n                  (ngModelChange)=\"updateLocale($event)\">\n                  @for (loc of availableLocales; track loc) {\n                    <option [value]=\"loc\">{{ loc }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.display' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.mangaMode\"\n                    (ngModelChange)=\"updatePreference('mangaMode', $event)\" />\n                  <span>{{ 'settings.manga_mode' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.reducedMotion\"\n                    (ngModelChange)=\"updatePreference('reducedMotion', $event)\" />\n                  <span>{{ 'settings.reduced_motion' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.highContrast\"\n                    (ngModelChange)=\"updatePreference('highContrast', $event)\" />\n                  <span>{{ 'settings.high_contrast' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.content' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.speech\"\n                    (ngModelChange)=\"updatePreference('speech', $event)\" />\n                  <span>{{ 'settings.show_speech_bubbles' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.audio' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.audio\"\n                    (ngModelChange)=\"updatePreference('audio', $event)\" />\n                  <span>{{ 'settings.enable_audio' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.sfx\"\n                    (ngModelChange)=\"updatePreference('sfx', $event)\" />\n                  <span>{{ 'settings.enable_sfx' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.autoplay' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.autoplay\"\n                    (ngModelChange)=\"updatePreference('autoplay', $event)\" />\n                  <span>{{ 'settings.enable_autoplay' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"seconds-input\">{{ 'settings.seconds_per_panel' | translate }}</label>\n                <div class=\"number-input\">\n                  <input\n                    id=\"seconds-input\"\n                    type=\"number\"\n                    class=\"setting-number\"\n                    min=\"0.5\"\n                    max=\"120\"\n                    step=\"0.5\"\n                    [ngModel]=\"preferences.secondsPerPanel\"\n                    (ngModelChange)=\"updatePreference('secondsPerPanel', $event)\" />\n                  <span class=\"input-unit\">{{ 'settings.seconds_unit' | translate }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"settings-actions\">\n              <button\n                class=\"action-btn secondary\"\n                type=\"button\"\n                (click)=\"resetPreferences()\">\n                {{ 'settings.reset_defaults' | translate }}\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Variables Tab -->\n        @if (activeTab === 'variables') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            @if (getPublicVariables().length > 0) {\n              <div class=\"settings-section\">\n                <h3 class=\"section-title\">{{ 'settings.public_variables' | translate }}</h3>\n                \n                @for (variable of getPublicVariables(); track variable.id) {\n                  <div class=\"setting-item variable-item\">\n                    <span class=\"setting-label\">{{ variable.id }}</span>\n                    \n                    <!-- Boolean Variable -->\n                    @if (isBoolean(variable)) {\n                      <label class=\"toggle-label\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"setting-checkbox\"\n                          [checked]=\"getVariableValue(variable)\"\n                          (change)=\"updateVariable(variable.id, $any($event.target).checked)\" />\n                        <span>{{ getVariableValue(variable) ? ('settings.enabled' | translate) : ('settings.disabled' | translate) }}</span>\n                      </label>\n                    }\n\n                    <!-- Number Variable -->\n                    @if (isNumber(variable)) {\n                      <div class=\"number-input\">\n                        <input\n                          type=\"number\"\n                          class=\"setting-number\"\n                          [min]=\"getMin(variable)\"\n                          [max]=\"getMax(variable)\"\n                          [value]=\"getVariableValue(variable)\"\n                          (input)=\"updateVariable(variable.id, $any($event.target).valueAsNumber)\" />\n                        <button\n                          class=\"reset-btn-small\"\n                          type=\"button\"\n                          [attr.title]=\"'settings.reset_to_default' | translate\"\n                          (click)=\"resetVariable(variable)\">\n                          <pw-icon name=\"lucideRotateCcw\" />\n                        </button>\n                      </div>\n                    }\n\n                    <!-- Enum Variable -->\n                    @if (isEnum(variable)) {\n                      <select\n                        class=\"setting-select\"\n                        [value]=\"getVariableValue(variable)\"\n                        (change)=\"updateVariable(variable.id, $any($event.target).value)\">\n                        @for (option of getEnumOptions(variable); track option) {\n                          <option [value]=\"option\">{{ option }}</option>\n                        }\n                      </select>\n                    }\n\n                    <!-- String Variable -->\n                    @if (isString(variable)) {\n                      <input\n                        type=\"text\"\n                        class=\"setting-text\"\n                        [value]=\"getVariableValue(variable)\"\n                        (input)=\"updateVariable(variable.id, $any($event.target).value)\" />\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"settings-actions\">\n                <button\n                  class=\"action-btn secondary\"\n                  type=\"button\"\n                  (click)=\"resetAllVariables()\">\n                  {{ 'settings.reset_all_variables' | translate }}\n                </button>\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <p>{{ 'settings.no_variables' | translate }}</p>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"settings-footer\">\n        <button\n          class=\"action-btn secondary\"\n          type=\"button\"\n          (click)=\"cancel()\">\n          {{ 'settings.cancel' | translate }}\n        </button>\n        <button\n          class=\"action-btn primary\"\n          type=\"button\"\n          (click)=\"save()\">\n          {{ 'settings.save_changes' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".settings-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-container{width:90%;max-width:700px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.settings-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.tab-btn{flex:1;padding:14px 20px;font-size:15px;font-weight:500;color:#fff9;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#fffc;background:#ffffff0d}.tab-btn.active{color:#fff;border-bottom-color:#0078d7cc}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:#ffffff0d}.settings-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tab-panel{display:flex;flex-direction:column;gap:24px}.settings-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:16px;font-weight:600;color:#ffffffe6;margin:0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.setting-item{display:flex;flex-direction:column;gap:8px}.setting-item.variable-item{padding:12px;background:#ffffff05;border-radius:8px}.setting-label{font-size:14px;color:#fffc;display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-label:has(.setting-checkbox){padding:8px;border-radius:6px;transition:background .2s ease}.setting-label:has(.setting-checkbox):hover{background:#ffffff0d}.setting-checkbox{width:20px;height:20px;cursor:pointer;accent-color:rgba(0,120,215,.8)}.setting-select{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;cursor:pointer;transition:all .2s ease}.setting-select:hover{background:#ffffff14;border-color:#ffffff4d}.setting-select:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.number-input{display:flex;align-items:center;gap:8px}.setting-number{flex:1;padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-number:hover{background:#ffffff14;border-color:#ffffff4d}.setting-number:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.input-unit{font-size:13px;color:#ffffff80;white-space:nowrap}.setting-text{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-text:hover{background:#ffffff14;border-color:#ffffff4d}.setting-text:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.toggle-label{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .2s ease}.toggle-label:hover{background:#ffffff0d}.reset-btn-small{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff9;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.reset-btn-small:hover{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.settings-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 20px;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{color:#fff;background:#0078d7cc}.action-btn.primary:hover{background:#0078d7e6;transform:translateY(-1px);box-shadow:0 2px 8px #0078d74d}.action-btn.primary:active{transform:translateY(0)}.action-btn.secondary{color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.action-btn.secondary:hover{background:#ffffff26;border-color:#ffffff4d}.action-btn.secondary:active{background:#ffffff1a}@media (max-width: 768px){.settings-container{width:95%;max-height:90vh}.settings-header{padding:16px 20px}.settings-title{font-size:18px}.settings-content{padding:20px}.tab-panel{gap:20px}.settings-section{gap:14px}.section-title{font-size:15px}.setting-label{font-size:13px}.settings-footer{padding:14px 20px;flex-wrap:wrap}.action-btn{flex:1;min-width:120px}}.close-btn:focus-visible,.tab-btn:focus-visible,.setting-select:focus-visible,.setting-number:focus-visible,.setting-text:focus-visible,.action-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.settings-overlay,.settings-container,.close-btn,.tab-btn,.setting-label,.action-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-settings-modal', imports: [FormsModule, TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"settings-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); cancel()\">\n    <div class=\"settings-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Settings\">\n      <!-- Header -->\n      <div class=\"settings-header\">\n        <h2 class=\"settings-title\">{{ 'settings.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'settings.close' | translate\"\n          (click)=\"cancel()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Tabs -->\n      <div class=\"settings-tabs\" role=\"tablist\">\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'preferences'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'preferences'\"\n          (click)=\"switchTab('preferences')\">\n          {{ 'settings.preferences' | translate }}\n        </button>\n        <button\n          class=\"tab-btn\"\n          [class.active]=\"activeTab === 'variables'\"\n          type=\"button\"\n          role=\"tab\"\n          [attr.aria-selected]=\"activeTab === 'variables'\"\n          (click)=\"switchTab('variables')\">\n          {{ 'settings.variables' | translate }}\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"settings-content\">\n        <!-- Preferences Tab -->\n        @if (activeTab === 'preferences') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.language' | translate }}</h3>\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"locale-select\">{{ 'settings.interface_language' | translate }}</label>\n                <select\n                  id=\"locale-select\"\n                  class=\"setting-select\"\n                  [ngModel]=\"locale\"\n                  (ngModelChange)=\"updateLocale($event)\">\n                  @for (loc of availableLocales; track loc) {\n                    <option [value]=\"loc\">{{ loc }}</option>\n                  }\n                </select>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.display' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.mangaMode\"\n                    (ngModelChange)=\"updatePreference('mangaMode', $event)\" />\n                  <span>{{ 'settings.manga_mode' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.reducedMotion\"\n                    (ngModelChange)=\"updatePreference('reducedMotion', $event)\" />\n                  <span>{{ 'settings.reduced_motion' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.highContrast\"\n                    (ngModelChange)=\"updatePreference('highContrast', $event)\" />\n                  <span>{{ 'settings.high_contrast' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.content' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.speech\"\n                    (ngModelChange)=\"updatePreference('speech', $event)\" />\n                  <span>{{ 'settings.show_speech_bubbles' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.audio' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.audio\"\n                    (ngModelChange)=\"updatePreference('audio', $event)\" />\n                  <span>{{ 'settings.enable_audio' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.sfx\"\n                    (ngModelChange)=\"updatePreference('sfx', $event)\" />\n                  <span>{{ 'settings.enable_sfx' | translate }}</span>\n                </label>\n              </div>\n            </div>\n\n            <div class=\"settings-section\">\n              <h3 class=\"section-title\">{{ 'settings.autoplay' | translate }}</h3>\n              \n              <div class=\"setting-item\">\n                <label class=\"setting-label\">\n                  <input\n                    type=\"checkbox\"\n                    class=\"setting-checkbox\"\n                    [ngModel]=\"preferences.autoplay\"\n                    (ngModelChange)=\"updatePreference('autoplay', $event)\" />\n                  <span>{{ 'settings.enable_autoplay' | translate }}</span>\n                </label>\n              </div>\n\n              <div class=\"setting-item\">\n                <label class=\"setting-label\" for=\"seconds-input\">{{ 'settings.seconds_per_panel' | translate }}</label>\n                <div class=\"number-input\">\n                  <input\n                    id=\"seconds-input\"\n                    type=\"number\"\n                    class=\"setting-number\"\n                    min=\"0.5\"\n                    max=\"120\"\n                    step=\"0.5\"\n                    [ngModel]=\"preferences.secondsPerPanel\"\n                    (ngModelChange)=\"updatePreference('secondsPerPanel', $event)\" />\n                  <span class=\"input-unit\">{{ 'settings.seconds_unit' | translate }}</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"settings-actions\">\n              <button\n                class=\"action-btn secondary\"\n                type=\"button\"\n                (click)=\"resetPreferences()\">\n                {{ 'settings.reset_defaults' | translate }}\n              </button>\n            </div>\n          </div>\n        }\n\n        <!-- Variables Tab -->\n        @if (activeTab === 'variables') {\n          <div class=\"tab-panel\" role=\"tabpanel\">\n            @if (getPublicVariables().length > 0) {\n              <div class=\"settings-section\">\n                <h3 class=\"section-title\">{{ 'settings.public_variables' | translate }}</h3>\n                \n                @for (variable of getPublicVariables(); track variable.id) {\n                  <div class=\"setting-item variable-item\">\n                    <span class=\"setting-label\">{{ variable.id }}</span>\n                    \n                    <!-- Boolean Variable -->\n                    @if (isBoolean(variable)) {\n                      <label class=\"toggle-label\">\n                        <input\n                          type=\"checkbox\"\n                          class=\"setting-checkbox\"\n                          [checked]=\"getVariableValue(variable)\"\n                          (change)=\"updateVariable(variable.id, $any($event.target).checked)\" />\n                        <span>{{ getVariableValue(variable) ? ('settings.enabled' | translate) : ('settings.disabled' | translate) }}</span>\n                      </label>\n                    }\n\n                    <!-- Number Variable -->\n                    @if (isNumber(variable)) {\n                      <div class=\"number-input\">\n                        <input\n                          type=\"number\"\n                          class=\"setting-number\"\n                          [min]=\"getMin(variable)\"\n                          [max]=\"getMax(variable)\"\n                          [value]=\"getVariableValue(variable)\"\n                          (input)=\"updateVariable(variable.id, $any($event.target).valueAsNumber)\" />\n                        <button\n                          class=\"reset-btn-small\"\n                          type=\"button\"\n                          [attr.title]=\"'settings.reset_to_default' | translate\"\n                          (click)=\"resetVariable(variable)\">\n                          <pw-icon name=\"lucideRotateCcw\" />\n                        </button>\n                      </div>\n                    }\n\n                    <!-- Enum Variable -->\n                    @if (isEnum(variable)) {\n                      <select\n                        class=\"setting-select\"\n                        [value]=\"getVariableValue(variable)\"\n                        (change)=\"updateVariable(variable.id, $any($event.target).value)\">\n                        @for (option of getEnumOptions(variable); track option) {\n                          <option [value]=\"option\">{{ option }}</option>\n                        }\n                      </select>\n                    }\n\n                    <!-- String Variable -->\n                    @if (isString(variable)) {\n                      <input\n                        type=\"text\"\n                        class=\"setting-text\"\n                        [value]=\"getVariableValue(variable)\"\n                        (input)=\"updateVariable(variable.id, $any($event.target).value)\" />\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"settings-actions\">\n                <button\n                  class=\"action-btn secondary\"\n                  type=\"button\"\n                  (click)=\"resetAllVariables()\">\n                  {{ 'settings.reset_all_variables' | translate }}\n                </button>\n              </div>\n            } @else {\n              <div class=\"empty-state\">\n                <p>{{ 'settings.no_variables' | translate }}</p>\n              </div>\n            }\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"settings-footer\">\n        <button\n          class=\"action-btn secondary\"\n          type=\"button\"\n          (click)=\"cancel()\">\n          {{ 'settings.cancel' | translate }}\n        </button>\n        <button\n          class=\"action-btn primary\"\n          type=\"button\"\n          (click)=\"save()\">\n          {{ 'settings.save_changes' | translate }}\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".settings-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.settings-container{width:90%;max-width:700px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.settings-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.settings-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.settings-tabs{display:flex;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.tab-btn{flex:1;padding:14px 20px;font-size:15px;font-weight:500;color:#fff9;background:transparent;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#fffc;background:#ffffff0d}.tab-btn.active{color:#fff;border-bottom-color:#0078d7cc}.settings-content{flex:1;overflow-y:auto;padding:24px}.settings-content::-webkit-scrollbar{width:8px}.settings-content::-webkit-scrollbar-track{background:#ffffff0d}.settings-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.tab-panel{display:flex;flex-direction:column;gap:24px}.settings-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:16px;font-weight:600;color:#ffffffe6;margin:0;padding-bottom:8px;border-bottom:1px solid rgba(255,255,255,.1)}.setting-item{display:flex;flex-direction:column;gap:8px}.setting-item.variable-item{padding:12px;background:#ffffff05;border-radius:8px}.setting-label{font-size:14px;color:#fffc;display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.setting-label:has(.setting-checkbox){padding:8px;border-radius:6px;transition:background .2s ease}.setting-label:has(.setting-checkbox):hover{background:#ffffff0d}.setting-checkbox{width:20px;height:20px;cursor:pointer;accent-color:rgba(0,120,215,.8)}.setting-select{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;cursor:pointer;transition:all .2s ease}.setting-select:hover{background:#ffffff14;border-color:#ffffff4d}.setting-select:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.number-input{display:flex;align-items:center;gap:8px}.setting-number{flex:1;padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-number:hover{background:#ffffff14;border-color:#ffffff4d}.setting-number:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.input-unit{font-size:13px;color:#ffffff80;white-space:nowrap}.setting-text{padding:10px 14px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none;transition:all .2s ease}.setting-text:hover{background:#ffffff14;border-color:#ffffff4d}.setting-text:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.toggle-label{display:flex;align-items:center;gap:10px;padding:8px;border-radius:6px;cursor:pointer;transition:background .2s ease}.toggle-label:hover{background:#ffffff0d}.reset-btn-small{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff9;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;flex-shrink:0}.reset-btn-small:hover{color:#fff;background:#ffffff1a;border-color:#ffffff4d}.settings-actions{display:flex;justify-content:flex-end;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.empty-state{padding:40px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.settings-footer{display:flex;justify-content:flex-end;gap:12px;padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 20px;font-size:14px;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none}.action-btn.primary{color:#fff;background:#0078d7cc}.action-btn.primary:hover{background:#0078d7e6;transform:translateY(-1px);box-shadow:0 2px 8px #0078d74d}.action-btn.primary:active{transform:translateY(0)}.action-btn.secondary{color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2)}.action-btn.secondary:hover{background:#ffffff26;border-color:#ffffff4d}.action-btn.secondary:active{background:#ffffff1a}@media (max-width: 768px){.settings-container{width:95%;max-height:90vh}.settings-header{padding:16px 20px}.settings-title{font-size:18px}.settings-content{padding:20px}.tab-panel{gap:20px}.settings-section{gap:14px}.section-title{font-size:15px}.setting-label{font-size:13px}.settings-footer{padding:14px 20px;flex-wrap:wrap}.action-btn{flex:1;min-width:120px}}.close-btn:focus-visible,.tab-btn:focus-visible,.setting-select:focus-visible,.setting-number:focus-visible,.setting-text:focus-visible,.action-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.settings-overlay,.settings-container,.close-btn,.tab-btn,.setting-label,.action-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { preferences: [{
                 type: Input
             }], availableLocales: [{
@@ -15544,11 +15545,11 @@ class CharacterRosterComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CharacterRosterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CharacterRosterComponent, isStandalone: true, selector: "pw-character-roster", inputs: { characters: "characters", locale: "locale", baseUrl: "baseUrl", visible: "visible" }, outputs: { characterSelect: "characterSelect", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"roster-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"roster-container\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"currentView === 'list' ? 'Character Roster' : 'Character Details'\">\n      \n      <!-- LIST VIEW -->\n      @if (currentView === 'list') {\n        <!-- Header -->\n        <div class=\"roster-header\">\n          <h2 class=\"roster-title\">{{ 'character_roster.title' | translate }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"roster-search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [placeholder]=\"'character_roster.search' | translate\"\n            [attr.aria-label]=\"'character_roster.search_label' | translate\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange()\" />\n          <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n        </div>\n\n        <!-- Character grid -->\n        <div class=\"roster-content\">\n        @if (filteredCharacters.length > 0) {\n          <div class=\"character-grid\" role=\"list\">\n            @for (character of filteredCharacters; track character.id) {\n              <button\n                class=\"character-card\"\n                type=\"button\"\n                role=\"listitem\"\n                (click)=\"selectCharacter(character)\">\n                \n                <!-- Avatar -->\n                <div class=\"character-avatar\">\n                  @if (getAvatarUrl(character)) {\n                    <img\n                      [src]=\"getAvatarUrl(character)\"\n                      [alt]=\"getCharacterName(character)\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getInitials(character) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Info -->\n                <div class=\"character-info\">\n                  <h3 class=\"character-name\">{{ getCharacterName(character) }}</h3>\n                  @if (character['role']) {\n                    <p class=\"character-role\">{{ character['role'] }}</p>\n                  }\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'character_roster.no_results' | translate: {query: searchQuery} }}</p>\n          </div>\n        }\n      </div>\n\n        <!-- Footer -->\n        <div class=\"roster-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_roster.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n      <!-- DETAIL VIEW -->\n      @if (currentView === 'detail' && selectedCharacter) {\n        <!-- Header with back button -->\n        <div class=\"roster-header\">\n          <button\n            class=\"back-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.back_to_list' | translate\"\n            (click)=\"backToList()\">\n            {{ 'character_roster.back_to_list' | translate }}\n          </button>\n          <h2 class=\"roster-title\">{{ getCharacterName(selectedCharacter) }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_sheet.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Content -->\n        <div class=\"sheet-content\">\n          <!-- Portrait -->\n          <div class=\"portrait-section\">\n            <div class=\"portrait-container\">\n              @if (getAvatarUrl(selectedCharacter)) {\n                <img\n                  [src]=\"getAvatarUrl(selectedCharacter)\"\n                  [alt]=\"getCharacterName(selectedCharacter)\"\n                  class=\"portrait-image\" />\n              } @else {\n                <div class=\"portrait-placeholder\">\n                  {{ getInitials(selectedCharacter) }}\n                </div>\n              }\n            </div>\n\n            <!-- Role badge -->\n            @if (selectedCharacter['role']) {\n              <div class=\"role-badge\">\n                {{ selectedCharacter['role'] }}\n              </div>\n            }\n\n            <!-- Voice sample button -->\n            @if (hasVoiceSample(selectedCharacter)) {\n              <button\n                class=\"voice-btn\"\n                [class.playing]=\"isPlaying\"\n                type=\"button\"\n                [attr.aria-label]=\"(isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate\"\n                (click)=\"playVoiceSample(selectedCharacter)\">\n                <span class=\"voice-icon\"><pw-icon [name]=\"isPlaying ? 'lucidePause' : 'lucideVolume2'\" /></span>\n                <span class=\"voice-label\">{{ (isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate }}</span>\n              </button>\n            }\n          </div>\n\n          <!-- Bio -->\n          <div class=\"bio-section\">\n            <h3 class=\"bio-title\">Biography</h3>\n            @if (getCharacterBio(selectedCharacter)) {\n              <div class=\"bio-content\">\n                {{ getCharacterBio(selectedCharacter) }}\n              </div>\n            } @else {\n              <p class=\"bio-empty\">No biography available.</p>\n            }\n          </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"sheet-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_sheet.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".roster-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.roster-container{width:90%;max-width:900px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.roster-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.roster-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.roster-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.roster-content{flex:1;overflow-y:auto;padding:24px}.roster-content::-webkit-scrollbar{width:8px}.roster-content::-webkit-scrollbar-track{background:#ffffff0d}.roster-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.roster-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.character-card{display:flex;flex-direction:column;align-items:center;padding:20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.character-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.character-card:active{transform:translateY(-2px)}.character-avatar{width:120px;height:120px;margin-bottom:16px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d);border:2px solid rgba(255,255,255,.2)}.character-info{width:100%}.character-name{font-size:16px;font-weight:600;color:#ffffffe6;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-role{font-size:13px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.roster-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 1024px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.character-card{padding:16px}.character-avatar{width:100px;height:100px;margin-bottom:12px}.avatar-placeholder{font-size:30px}.character-name{font-size:15px}.character-role{font-size:12px}}@media (max-width: 768px){.roster-container{width:95%;max-height:90vh}.roster-header{padding:16px 20px}.roster-title{font-size:18px}.roster-search{padding:12px 20px}.roster-content{padding:20px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.character-card{padding:14px}.character-avatar{width:90px;height:90px;margin-bottom:10px}.avatar-placeholder{font-size:28px}.character-name{font-size:14px}.character-role{font-size:11px}.empty-state{padding:40px 20px}.roster-footer{padding:12px 20px}}.close-btn:focus-visible,.search-input:focus-visible,.character-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.back-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.back-btn:hover{background:#ffffff26;border-color:#ffffff4d}.back-btn:active{transform:scale(.95)}.sheet-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.portrait-section{display:flex;flex-direction:column;align-items:center;gap:16px}.portrait-container{width:200px;height:200px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.2);background:#ffffff0d}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#ffffff80;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.role-badge{padding:6px 16px;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:20px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.voice-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.voice-btn:hover{background:#ffffff26;border-color:#ffffff4d}.voice-btn.playing{background:#0078d74d;border-color:#0078d780}.voice-icon{font-size:18px}.bio-section{display:flex;flex-direction:column;gap:12px}.bio-title{margin:0;font-size:18px;font-weight:600;color:#ffffffe6;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.bio-content{color:#fffc;font-size:15px;line-height:1.6;white-space:pre-wrap}.bio-empty{color:#ffffff80;font-style:italic;margin:0}.sheet-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0003}@media (prefers-reduced-motion: reduce){.roster-overlay,.roster-container,.close-btn,.back-btn,.character-card,.voice-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CharacterRosterComponent, isStandalone: true, selector: "pw-character-roster", inputs: { characters: "characters", locale: "locale", baseUrl: "baseUrl", visible: "visible" }, outputs: { characterSelect: "characterSelect", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"roster-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"roster-container\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"currentView === 'list' ? 'Character Roster' : 'Character Details'\">\n      \n      <!-- LIST VIEW -->\n      @if (currentView === 'list') {\n        <!-- Header -->\n        <div class=\"roster-header\">\n          <h2 class=\"roster-title\">{{ 'character_roster.title' | translate }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"roster-search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [placeholder]=\"'character_roster.search' | translate\"\n            [attr.aria-label]=\"'character_roster.search_label' | translate\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange()\" />\n          <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n        </div>\n\n        <!-- Character grid -->\n        <div class=\"roster-content\">\n        @if (filteredCharacters.length > 0) {\n          <div class=\"character-grid\" role=\"list\">\n            @for (character of filteredCharacters; track character.id) {\n              <button\n                class=\"character-card\"\n                type=\"button\"\n                role=\"listitem\"\n                (click)=\"selectCharacter(character)\">\n                \n                <!-- Avatar -->\n                <div class=\"character-avatar\">\n                  @if (getAvatarUrl(character)) {\n                    <img\n                      [src]=\"getAvatarUrl(character)\"\n                      [alt]=\"getCharacterName(character)\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getInitials(character) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Info -->\n                <div class=\"character-info\">\n                  <h3 class=\"character-name\">{{ getCharacterName(character) }}</h3>\n                  @if (character['role']) {\n                    <p class=\"character-role\">{{ character['role'] }}</p>\n                  }\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'character_roster.no_results' | translate: {query: searchQuery} }}</p>\n          </div>\n        }\n      </div>\n\n        <!-- Footer -->\n        <div class=\"roster-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_roster.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n      <!-- DETAIL VIEW -->\n      @if (currentView === 'detail' && selectedCharacter) {\n        <!-- Header with back button -->\n        <div class=\"roster-header\">\n          <button\n            class=\"back-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.back_to_list' | translate\"\n            (click)=\"backToList()\">\n            {{ 'character_roster.back_to_list' | translate }}\n          </button>\n          <h2 class=\"roster-title\">{{ getCharacterName(selectedCharacter) }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_sheet.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Content -->\n        <div class=\"sheet-content\">\n          <!-- Portrait -->\n          <div class=\"portrait-section\">\n            <div class=\"portrait-container\">\n              @if (getAvatarUrl(selectedCharacter)) {\n                <img\n                  [src]=\"getAvatarUrl(selectedCharacter)\"\n                  [alt]=\"getCharacterName(selectedCharacter)\"\n                  class=\"portrait-image\" />\n              } @else {\n                <div class=\"portrait-placeholder\">\n                  {{ getInitials(selectedCharacter) }}\n                </div>\n              }\n            </div>\n\n            <!-- Role badge -->\n            @if (selectedCharacter['role']) {\n              <div class=\"role-badge\">\n                {{ selectedCharacter['role'] }}\n              </div>\n            }\n\n            <!-- Voice sample button -->\n            @if (hasVoiceSample(selectedCharacter)) {\n              <button\n                class=\"voice-btn\"\n                [class.playing]=\"isPlaying\"\n                type=\"button\"\n                [attr.aria-label]=\"(isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate\"\n                (click)=\"playVoiceSample(selectedCharacter)\">\n                <span class=\"voice-icon\"><pw-icon [name]=\"isPlaying ? 'lucidePause' : 'lucideVolume2'\" /></span>\n                <span class=\"voice-label\">{{ (isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate }}</span>\n              </button>\n            }\n          </div>\n\n          <!-- Bio -->\n          <div class=\"bio-section\">\n            <h3 class=\"bio-title\">Biography</h3>\n            @if (getCharacterBio(selectedCharacter)) {\n              <div class=\"bio-content\">\n                {{ getCharacterBio(selectedCharacter) }}\n              </div>\n            } @else {\n              <p class=\"bio-empty\">No biography available.</p>\n            }\n          </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"sheet-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_sheet.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".roster-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.roster-container{width:90%;max-width:900px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.roster-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.roster-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.roster-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.roster-content{flex:1;overflow-y:auto;padding:24px}.roster-content::-webkit-scrollbar{width:8px}.roster-content::-webkit-scrollbar-track{background:#ffffff0d}.roster-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.roster-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.character-card{display:flex;flex-direction:column;align-items:center;padding:20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.character-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.character-card:active{transform:translateY(-2px)}.character-avatar{width:120px;height:120px;margin-bottom:16px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d);border:2px solid rgba(255,255,255,.2)}.character-info{width:100%}.character-name{font-size:16px;font-weight:600;color:#ffffffe6;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-role{font-size:13px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.roster-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 1024px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.character-card{padding:16px}.character-avatar{width:100px;height:100px;margin-bottom:12px}.avatar-placeholder{font-size:30px}.character-name{font-size:15px}.character-role{font-size:12px}}@media (max-width: 768px){.roster-container{width:95%;max-height:90vh}.roster-header{padding:16px 20px}.roster-title{font-size:18px}.roster-search{padding:12px 20px}.roster-content{padding:20px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.character-card{padding:14px}.character-avatar{width:90px;height:90px;margin-bottom:10px}.avatar-placeholder{font-size:28px}.character-name{font-size:14px}.character-role{font-size:11px}.empty-state{padding:40px 20px}.roster-footer{padding:12px 20px}}.close-btn:focus-visible,.search-input:focus-visible,.character-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.back-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.back-btn:hover{background:#ffffff26;border-color:#ffffff4d}.back-btn:active{transform:scale(.95)}.sheet-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.portrait-section{display:flex;flex-direction:column;align-items:center;gap:16px}.portrait-container{width:200px;height:200px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.2);background:#ffffff0d}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#ffffff80;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.role-badge{padding:6px 16px;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:20px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.voice-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.voice-btn:hover{background:#ffffff26;border-color:#ffffff4d}.voice-btn.playing{background:#0078d74d;border-color:#0078d780}.voice-icon{font-size:18px}.bio-section{display:flex;flex-direction:column;gap:12px}.bio-title{margin:0;font-size:18px;font-weight:600;color:#ffffffe6;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.bio-content{color:#fffc;font-size:15px;line-height:1.6;white-space:pre-wrap}.bio-empty{color:#ffffff80;font-style:italic;margin:0}.sheet-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0003}@media (prefers-reduced-motion: reduce){.roster-overlay,.roster-container,.close-btn,.back-btn,.character-card,.voice-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CharacterRosterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-character-roster', imports: [FormsModule, TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"roster-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"roster-container\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"currentView === 'list' ? 'Character Roster' : 'Character Details'\">\n      \n      <!-- LIST VIEW -->\n      @if (currentView === 'list') {\n        <!-- Header -->\n        <div class=\"roster-header\">\n          <h2 class=\"roster-title\">{{ 'character_roster.title' | translate }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"roster-search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [placeholder]=\"'character_roster.search' | translate\"\n            [attr.aria-label]=\"'character_roster.search_label' | translate\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange()\" />\n          <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n        </div>\n\n        <!-- Character grid -->\n        <div class=\"roster-content\">\n        @if (filteredCharacters.length > 0) {\n          <div class=\"character-grid\" role=\"list\">\n            @for (character of filteredCharacters; track character.id) {\n              <button\n                class=\"character-card\"\n                type=\"button\"\n                role=\"listitem\"\n                (click)=\"selectCharacter(character)\">\n                \n                <!-- Avatar -->\n                <div class=\"character-avatar\">\n                  @if (getAvatarUrl(character)) {\n                    <img\n                      [src]=\"getAvatarUrl(character)\"\n                      [alt]=\"getCharacterName(character)\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getInitials(character) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Info -->\n                <div class=\"character-info\">\n                  <h3 class=\"character-name\">{{ getCharacterName(character) }}</h3>\n                  @if (character['role']) {\n                    <p class=\"character-role\">{{ character['role'] }}</p>\n                  }\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'character_roster.no_results' | translate: {query: searchQuery} }}</p>\n          </div>\n        }\n      </div>\n\n        <!-- Footer -->\n        <div class=\"roster-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_roster.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n      <!-- DETAIL VIEW -->\n      @if (currentView === 'detail' && selectedCharacter) {\n        <!-- Header with back button -->\n        <div class=\"roster-header\">\n          <button\n            class=\"back-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.back_to_list' | translate\"\n            (click)=\"backToList()\">\n            {{ 'character_roster.back_to_list' | translate }}\n          </button>\n          <h2 class=\"roster-title\">{{ getCharacterName(selectedCharacter) }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_sheet.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Content -->\n        <div class=\"sheet-content\">\n          <!-- Portrait -->\n          <div class=\"portrait-section\">\n            <div class=\"portrait-container\">\n              @if (getAvatarUrl(selectedCharacter)) {\n                <img\n                  [src]=\"getAvatarUrl(selectedCharacter)\"\n                  [alt]=\"getCharacterName(selectedCharacter)\"\n                  class=\"portrait-image\" />\n              } @else {\n                <div class=\"portrait-placeholder\">\n                  {{ getInitials(selectedCharacter) }}\n                </div>\n              }\n            </div>\n\n            <!-- Role badge -->\n            @if (selectedCharacter['role']) {\n              <div class=\"role-badge\">\n                {{ selectedCharacter['role'] }}\n              </div>\n            }\n\n            <!-- Voice sample button -->\n            @if (hasVoiceSample(selectedCharacter)) {\n              <button\n                class=\"voice-btn\"\n                [class.playing]=\"isPlaying\"\n                type=\"button\"\n                [attr.aria-label]=\"(isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate\"\n                (click)=\"playVoiceSample(selectedCharacter)\">\n                <span class=\"voice-icon\"><pw-icon [name]=\"isPlaying ? 'lucidePause' : 'lucideVolume2'\" /></span>\n                <span class=\"voice-label\">{{ (isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate }}</span>\n              </button>\n            }\n          </div>\n\n          <!-- Bio -->\n          <div class=\"bio-section\">\n            <h3 class=\"bio-title\">Biography</h3>\n            @if (getCharacterBio(selectedCharacter)) {\n              <div class=\"bio-content\">\n                {{ getCharacterBio(selectedCharacter) }}\n              </div>\n            } @else {\n              <p class=\"bio-empty\">No biography available.</p>\n            }\n          </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"sheet-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_sheet.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".roster-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.roster-container{width:90%;max-width:900px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.roster-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.roster-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.roster-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.roster-content{flex:1;overflow-y:auto;padding:24px}.roster-content::-webkit-scrollbar{width:8px}.roster-content::-webkit-scrollbar-track{background:#ffffff0d}.roster-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.roster-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.character-card{display:flex;flex-direction:column;align-items:center;padding:20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.character-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.character-card:active{transform:translateY(-2px)}.character-avatar{width:120px;height:120px;margin-bottom:16px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d);border:2px solid rgba(255,255,255,.2)}.character-info{width:100%}.character-name{font-size:16px;font-weight:600;color:#ffffffe6;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-role{font-size:13px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.roster-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 1024px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.character-card{padding:16px}.character-avatar{width:100px;height:100px;margin-bottom:12px}.avatar-placeholder{font-size:30px}.character-name{font-size:15px}.character-role{font-size:12px}}@media (max-width: 768px){.roster-container{width:95%;max-height:90vh}.roster-header{padding:16px 20px}.roster-title{font-size:18px}.roster-search{padding:12px 20px}.roster-content{padding:20px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.character-card{padding:14px}.character-avatar{width:90px;height:90px;margin-bottom:10px}.avatar-placeholder{font-size:28px}.character-name{font-size:14px}.character-role{font-size:11px}.empty-state{padding:40px 20px}.roster-footer{padding:12px 20px}}.close-btn:focus-visible,.search-input:focus-visible,.character-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.back-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.back-btn:hover{background:#ffffff26;border-color:#ffffff4d}.back-btn:active{transform:scale(.95)}.sheet-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.portrait-section{display:flex;flex-direction:column;align-items:center;gap:16px}.portrait-container{width:200px;height:200px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.2);background:#ffffff0d}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#ffffff80;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.role-badge{padding:6px 16px;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:20px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.voice-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.voice-btn:hover{background:#ffffff26;border-color:#ffffff4d}.voice-btn.playing{background:#0078d74d;border-color:#0078d780}.voice-icon{font-size:18px}.bio-section{display:flex;flex-direction:column;gap:12px}.bio-title{margin:0;font-size:18px;font-weight:600;color:#ffffffe6;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.bio-content{color:#fffc;font-size:15px;line-height:1.6;white-space:pre-wrap}.bio-empty{color:#ffffff80;font-style:italic;margin:0}.sheet-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0003}@media (prefers-reduced-motion: reduce){.roster-overlay,.roster-container,.close-btn,.back-btn,.character-card,.voice-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-character-roster', imports: [FormsModule, TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"roster-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"roster-container\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"currentView === 'list' ? 'Character Roster' : 'Character Details'\">\n      \n      <!-- LIST VIEW -->\n      @if (currentView === 'list') {\n        <!-- Header -->\n        <div class=\"roster-header\">\n          <h2 class=\"roster-title\">{{ 'character_roster.title' | translate }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Search -->\n        <div class=\"roster-search\">\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [placeholder]=\"'character_roster.search' | translate\"\n            [attr.aria-label]=\"'character_roster.search_label' | translate\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange()\" />\n          <span class=\"search-icon\"><pw-icon name=\"lucideSearch\" /></span>\n        </div>\n\n        <!-- Character grid -->\n        <div class=\"roster-content\">\n        @if (filteredCharacters.length > 0) {\n          <div class=\"character-grid\" role=\"list\">\n            @for (character of filteredCharacters; track character.id) {\n              <button\n                class=\"character-card\"\n                type=\"button\"\n                role=\"listitem\"\n                (click)=\"selectCharacter(character)\">\n                \n                <!-- Avatar -->\n                <div class=\"character-avatar\">\n                  @if (getAvatarUrl(character)) {\n                    <img\n                      [src]=\"getAvatarUrl(character)\"\n                      [alt]=\"getCharacterName(character)\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getInitials(character) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Info -->\n                <div class=\"character-info\">\n                  <h3 class=\"character-name\">{{ getCharacterName(character) }}</h3>\n                  @if (character['role']) {\n                    <p class=\"character-role\">{{ character['role'] }}</p>\n                  }\n                </div>\n              </button>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'character_roster.no_results' | translate: {query: searchQuery} }}</p>\n          </div>\n        }\n      </div>\n\n        <!-- Footer -->\n        <div class=\"roster-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_roster.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n      <!-- DETAIL VIEW -->\n      @if (currentView === 'detail' && selectedCharacter) {\n        <!-- Header with back button -->\n        <div class=\"roster-header\">\n          <button\n            class=\"back-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_roster.back_to_list' | translate\"\n            (click)=\"backToList()\">\n            {{ 'character_roster.back_to_list' | translate }}\n          </button>\n          <h2 class=\"roster-title\">{{ getCharacterName(selectedCharacter) }}</h2>\n          <button\n            class=\"close-btn\"\n            type=\"button\"\n            [attr.aria-label]=\"'character_sheet.close' | translate\"\n            (click)=\"onClose()\">\n            <pw-icon name=\"lucideX\" />\n          </button>\n        </div>\n\n        <!-- Content -->\n        <div class=\"sheet-content\">\n          <!-- Portrait -->\n          <div class=\"portrait-section\">\n            <div class=\"portrait-container\">\n              @if (getAvatarUrl(selectedCharacter)) {\n                <img\n                  [src]=\"getAvatarUrl(selectedCharacter)\"\n                  [alt]=\"getCharacterName(selectedCharacter)\"\n                  class=\"portrait-image\" />\n              } @else {\n                <div class=\"portrait-placeholder\">\n                  {{ getInitials(selectedCharacter) }}\n                </div>\n              }\n            </div>\n\n            <!-- Role badge -->\n            @if (selectedCharacter['role']) {\n              <div class=\"role-badge\">\n                {{ selectedCharacter['role'] }}\n              </div>\n            }\n\n            <!-- Voice sample button -->\n            @if (hasVoiceSample(selectedCharacter)) {\n              <button\n                class=\"voice-btn\"\n                [class.playing]=\"isPlaying\"\n                type=\"button\"\n                [attr.aria-label]=\"(isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate\"\n                (click)=\"playVoiceSample(selectedCharacter)\">\n                <span class=\"voice-icon\"><pw-icon [name]=\"isPlaying ? 'lucidePause' : 'lucideVolume2'\" /></span>\n                <span class=\"voice-label\">{{ (isPlaying ? 'character_sheet.stop_voice' : 'character_sheet.play_voice') | translate }}</span>\n              </button>\n            }\n          </div>\n\n          <!-- Bio -->\n          <div class=\"bio-section\">\n            <h3 class=\"bio-title\">Biography</h3>\n            @if (getCharacterBio(selectedCharacter)) {\n              <div class=\"bio-content\">\n                {{ getCharacterBio(selectedCharacter) }}\n              </div>\n            } @else {\n              <p class=\"bio-empty\">No biography available.</p>\n            }\n          </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"sheet-footer\">\n          <p class=\"footer-hint\">\n            <kbd>{{ 'common.esc' | translate }}</kbd> {{ 'character_sheet.keyboard_hint' | translate }}\n          </p>\n        </div>\n      }\n\n    </div>\n  </div>\n}\n", styles: [".roster-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.roster-container{width:90%;max-width:900px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.roster-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.roster-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.roster-search{position:relative;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.search-input{width:100%;padding:10px 40px 10px 16px;font-size:14px;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;transition:all .2s ease}.search-input::placeholder{color:#fff6}.search-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.search-icon{position:absolute;right:36px;top:50%;transform:translateY(-50%);font-size:16px;pointer-events:none;opacity:.5}.roster-content{flex:1;overflow-y:auto;padding:24px}.roster-content::-webkit-scrollbar{width:8px}.roster-content::-webkit-scrollbar-track{background:#ffffff0d}.roster-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.roster-content::-webkit-scrollbar-thumb:hover{background:#ffffff4d}.character-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}.character-card{display:flex;flex-direction:column;align-items:center;padding:20px;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:12px;cursor:pointer;transition:all .2s ease;text-align:center}.character-card:hover{background:#ffffff14;border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.character-card:active{transform:translateY(-2px)}.character-avatar{width:120px;height:120px;margin-bottom:16px;border-radius:50%;overflow:hidden;flex-shrink:0}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d);border:2px solid rgba(255,255,255,.2)}.character-info{width:100%}.character-name{font-size:16px;font-weight:600;color:#ffffffe6;margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.character-role{font-size:13px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.roster-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-hint{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffff80;margin:0}.footer-hint kbd{padding:4px 8px;font-size:11px;font-family:monospace;color:#fffc;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px}@media (max-width: 1024px){.character-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.character-card{padding:16px}.character-avatar{width:100px;height:100px;margin-bottom:12px}.avatar-placeholder{font-size:30px}.character-name{font-size:15px}.character-role{font-size:12px}}@media (max-width: 768px){.roster-container{width:95%;max-height:90vh}.roster-header{padding:16px 20px}.roster-title{font-size:18px}.roster-search{padding:12px 20px}.roster-content{padding:20px}.character-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.character-card{padding:14px}.character-avatar{width:90px;height:90px;margin-bottom:10px}.avatar-placeholder{font-size:28px}.character-name{font-size:14px}.character-role{font-size:11px}.empty-state{padding:40px 20px}.roster-footer{padding:12px 20px}}.close-btn:focus-visible,.search-input:focus-visible,.character-card:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}.back-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap}.back-btn:hover{background:#ffffff26;border-color:#ffffff4d}.back-btn:active{transform:scale(.95)}.sheet-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.portrait-section{display:flex;flex-direction:column;align-items:center;gap:16px}.portrait-container{width:200px;height:200px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.2);background:#ffffff0d}.portrait-image{width:100%;height:100%;object-fit:cover}.portrait-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:64px;font-weight:700;color:#ffffff80;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.role-badge{padding:6px 16px;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:20px;color:#fff;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.voice-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.voice-btn:hover{background:#ffffff26;border-color:#ffffff4d}.voice-btn.playing{background:#0078d74d;border-color:#0078d780}.voice-icon{font-size:18px}.bio-section{display:flex;flex-direction:column;gap:12px}.bio-title{margin:0;font-size:18px;font-weight:600;color:#ffffffe6;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:8px}.bio-content{color:#fffc;font-size:15px;line-height:1.6;white-space:pre-wrap}.bio-empty{color:#ffffff80;font-style:italic;margin:0}.sheet-footer{padding:16px 24px;border-top:1px solid rgba(255,255,255,.1);background:#0003}@media (prefers-reduced-motion: reduce){.roster-overlay,.roster-container,.close-btn,.back-btn,.character-card,.voice-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { characters: [{
                 type: Input
             }], locale: [{
@@ -15813,11 +15814,11 @@ class ExtrasViewerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ExtrasViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ExtrasViewerComponent, isStandalone: true, selector: "pw-extras-viewer", inputs: { extras: "extras", initialExtraId: "initialExtraId", locale: "locale", baseUrl: "baseUrl", visible: "visible", hasPremiumAccess: "hasPremiumAccess" }, outputs: { purchase: "purchase", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"extras-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"extras-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Extras Viewer\">\n      <!-- Header -->\n      <div class=\"extras-header\">\n        <h2 class=\"extras-title\">{{ 'extras.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'extras.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Filters -->\n      <div class=\"extras-filters\">\n        <button\n          class=\"filter-btn\"\n          [class.active]=\"filterType === 'all'\"\n          type=\"button\"\n          (click)=\"setFilter('all')\">\n          {{ 'extras.all' | translate }} ({{ extras.length }})\n        </button>\n        @if (getExtrasByType('cover') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'cover'\"\n            type=\"button\"\n            (click)=\"setFilter('cover')\">\n            {{ getTypeName('cover') }} ({{ getExtrasByType('cover') }})\n          </button>\n        }\n        @if (getExtrasByType('art') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'art'\"\n            type=\"button\"\n            (click)=\"setFilter('art')\">\n            {{ getTypeName('art') }} ({{ getExtrasByType('art') }})\n          </button>\n        }\n        @if (getExtrasByType('bts') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'bts'\"\n            type=\"button\"\n            (click)=\"setFilter('bts')\">\n            {{ getTypeName('bts') }} ({{ getExtrasByType('bts') }})\n          </button>\n        }\n        @if (getExtrasByType('interview') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'interview'\"\n            type=\"button\"\n            (click)=\"setFilter('interview')\">\n            {{ getTypeName('interview') }} ({{ getExtrasByType('interview') }})\n          </button>\n        }\n        @if (getExtrasByType('other') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'other'\"\n            type=\"button\"\n            (click)=\"setFilter('other')\">\n            {{ getTypeName('other') }} ({{ getExtrasByType('other') }})\n          </button>\n        }\n      </div>\n\n      <!-- Gallery Grid -->\n      <div class=\"extras-content\">\n        @if (getFilteredExtras().length > 0) {\n          <div class=\"extras-grid\" role=\"list\">\n            @for (extra of getFilteredExtras(); track extra.id) {\n              <div class=\"extra-card\" role=\"listitem\">\n                <button\n                  class=\"extra-thumbnail\"\n                  [class.locked]=\"!isAccessible(extra)\"\n                  type=\"button\"\n                  (click)=\"openExtra(extra)\">\n                  \n                  @if (getThumbnailUrl(extra)) {\n                    <img\n                      [src]=\"getThumbnailUrl(extra)\"\n                      [alt]=\"getExtraTitle(extra)\"\n                      class=\"thumbnail-image\" />\n                  } @else {\n                    <div class=\"thumbnail-placeholder\">\n                      <pw-icon [name]=\"getMediaIcon(extra)\" />\n                    </div>\n                  }\n\n                  <!-- Lock overlay for gated content -->\n                  @if (!isAccessible(extra)) {\n                    <div class=\"lock-overlay\">\n                      <span class=\"lock-icon\"><pw-icon name=\"lucideLock\" /></span>\n                      <span class=\"lock-text\">{{ 'extras.locked_premium' | translate }}</span>\n                    </div>\n                  }\n\n                  <!-- Media type badge -->\n                  <div class=\"media-badge\">\n                    <pw-icon [name]=\"getMediaIcon(extra)\" />\n                  </div>\n                </button>\n\n                <div class=\"extra-info\">\n                  <h3 class=\"extra-title\">{{ getExtraTitle(extra) }}</h3>\n                  @if (getExtraDescription(extra)) {\n                    <p class=\"extra-description\">{{ getExtraDescription(extra) }}</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'extras.no_extras' | translate }}</p>\n          </div>\n        }\n      </div>\n\n      <!-- Detail View -->\n      @if (selectedExtra) {\n        <div class=\"detail-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); closeDetail()\">\n          <div class=\"detail-container\">\n            <!-- Detail Header -->\n            <div class=\"detail-header\">\n              <h3 class=\"detail-title\">{{ getExtraTitle(selectedExtra) }}</h3>\n              <button\n                class=\"close-btn\"\n                type=\"button\"\n                [attr.aria-label]=\"'extras.close_detail' | translate\"\n                (click)=\"closeDetail()\">\n                <pw-icon name=\"lucideX\" />\n              </button>\n            </div>\n\n            <!-- Detail Content -->\n            <div class=\"detail-content\">\n              @if ((selectedExtra.mediaType === 'image' || !selectedExtra.mediaType) && getAssetUrl(selectedExtra)) {\n                <img\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  [alt]=\"getExtraTitle(selectedExtra)\"\n                  class=\"detail-image\" />\n              }\n\n              @if (selectedExtra.mediaType === 'video') {\n                <video\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-video\">\n                  {{ 'extras.video_not_supported' | translate }}\n                </video>\n              }\n\n              @if (selectedExtra.mediaType === 'audio') {\n                <audio\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-audio\">\n                  {{ 'extras.audio_not_supported' | translate }}\n                </audio>\n              }\n\n              @if (selectedExtra.mediaType === 'document' && getAssetUrl(selectedExtra)) {\n                <a\n                  class=\"action-btn detail-document-link\"\n                  [href]=\"getAssetUrl(selectedExtra)\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  {{ 'extras.open_document' | translate }}\n                </a>\n              }\n\n              @if (getExtraDescription(selectedExtra)) {\n                <div class=\"detail-description\">\n                  {{ getExtraDescription(selectedExtra) }}\n                </div>\n              }\n            </div>\n\n            <!-- Detail Footer -->\n            <div class=\"detail-footer\">\n              <button\n                class=\"action-btn\"\n                type=\"button\"\n                (click)=\"closeDetail()\">\n                {{ 'extras.close_button' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Paywall Notice (for gated content without access) -->\n      @if (!hasPremiumAccess && hasGatedExtras()) {\n        <div class=\"paywall-notice\">\n          <p class=\"notice-text\">\n            <span class=\"notice-icon\"><pw-icon name=\"lucideLock\" /></span>\n            {{ 'extras.premium_notice' | translate }}\n          </p>\n          <button\n            class=\"upgrade-btn\"\n            type=\"button\"\n            (click)=\"onPurchase()\">\n            {{ 'extras.upgrade_now' | translate }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".extras-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.extras-container{width:90%;max-width:1000px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.extras-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.extras-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.extras-filters{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}.extras-filters::-webkit-scrollbar{height:4px}.extras-filters::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.filter-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffb3;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.filter-btn:hover{background:#ffffff1a;border-color:#fff3}.filter-btn.active{color:#fff;background:#0078d780;border-color:#0078d7b3}.extras-content{flex:1;overflow-y:auto;padding:24px}.extras-content::-webkit-scrollbar{width:8px}.extras-content::-webkit-scrollbar-track{background:#ffffff0d}.extras-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.extra-card{display:flex;flex-direction:column;gap:12px}.extra-thumbnail{position:relative;aspect-ratio:3 / 4;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;padding:0}.extra-thumbnail:hover{border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.extra-thumbnail.locked{cursor:not-allowed}.extra-thumbnail.locked:hover{transform:none;box-shadow:none}.thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#0078d71a,#00b4781a)}.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.lock-icon{font-size:32px}.lock-text{font-size:12px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.media-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#0009;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.extra-info{display:flex;flex-direction:column;gap:4px}.extra-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.extra-description{font-size:12px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.detail-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000000e6;animation:fadeIn .2s ease}.detail-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.detail-title{font-size:18px;font-weight:600;color:#fff;margin:0}.detail-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center}.detail-image,.detail-video{max-width:100%;max-height:60vh;border-radius:8px}.detail-audio{width:100%;max-width:500px}.detail-description{font-size:14px;line-height:1.6;color:#fffc;white-space:pre-wrap;text-align:center;max-width:600px}.detail-footer{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#ffffff26;border-color:#ffffff4d}.paywall-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#ffa5001a;border-top:1px solid rgba(255,165,0,.3);flex-shrink:0}.notice-text{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffffe6;margin:0}.notice-icon{font-size:16px}.upgrade-btn{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:#ffa500cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.upgrade-btn:hover{background:#ffa500e6;transform:translateY(-1px);box-shadow:0 2px 8px #ffa5004d}@media (max-width: 768px){.extras-container{width:95%}.extras-header{padding:16px 20px}.extras-title{font-size:18px}.extras-filters{padding:12px 20px}.extras-content{padding:20px}.extras-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.extra-title{font-size:13px}.extra-description{font-size:11px}.detail-container{width:95%}.detail-header{padding:14px 18px}.detail-title{font-size:16px}.detail-content{padding:16px}.paywall-notice{flex-direction:column;align-items:flex-start;gap:12px}.upgrade-btn{width:100%}}.close-btn:focus-visible,.filter-btn:focus-visible,.extra-thumbnail:focus-visible,.action-btn:focus-visible,.upgrade-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.extras-overlay,.extras-container,.detail-overlay,.detail-container,.close-btn,.filter-btn,.extra-thumbnail,.action-btn,.upgrade-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ExtrasViewerComponent, isStandalone: true, selector: "pw-extras-viewer", inputs: { extras: "extras", initialExtraId: "initialExtraId", locale: "locale", baseUrl: "baseUrl", visible: "visible", hasPremiumAccess: "hasPremiumAccess" }, outputs: { purchase: "purchase", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, usesOnChanges: true, ngImport: i0, template: "@if (visible) {\n  <div class=\"extras-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"extras-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Extras Viewer\">\n      <!-- Header -->\n      <div class=\"extras-header\">\n        <h2 class=\"extras-title\">{{ 'extras.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'extras.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Filters -->\n      <div class=\"extras-filters\">\n        <button\n          class=\"filter-btn\"\n          [class.active]=\"filterType === 'all'\"\n          type=\"button\"\n          (click)=\"setFilter('all')\">\n          {{ 'extras.all' | translate }} ({{ extras.length }})\n        </button>\n        @if (getExtrasByType('cover') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'cover'\"\n            type=\"button\"\n            (click)=\"setFilter('cover')\">\n            {{ getTypeName('cover') }} ({{ getExtrasByType('cover') }})\n          </button>\n        }\n        @if (getExtrasByType('art') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'art'\"\n            type=\"button\"\n            (click)=\"setFilter('art')\">\n            {{ getTypeName('art') }} ({{ getExtrasByType('art') }})\n          </button>\n        }\n        @if (getExtrasByType('bts') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'bts'\"\n            type=\"button\"\n            (click)=\"setFilter('bts')\">\n            {{ getTypeName('bts') }} ({{ getExtrasByType('bts') }})\n          </button>\n        }\n        @if (getExtrasByType('interview') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'interview'\"\n            type=\"button\"\n            (click)=\"setFilter('interview')\">\n            {{ getTypeName('interview') }} ({{ getExtrasByType('interview') }})\n          </button>\n        }\n        @if (getExtrasByType('other') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'other'\"\n            type=\"button\"\n            (click)=\"setFilter('other')\">\n            {{ getTypeName('other') }} ({{ getExtrasByType('other') }})\n          </button>\n        }\n      </div>\n\n      <!-- Gallery Grid -->\n      <div class=\"extras-content\">\n        @if (getFilteredExtras().length > 0) {\n          <div class=\"extras-grid\" role=\"list\">\n            @for (extra of getFilteredExtras(); track extra.id) {\n              <div class=\"extra-card\" role=\"listitem\">\n                <button\n                  class=\"extra-thumbnail\"\n                  [class.locked]=\"!isAccessible(extra)\"\n                  type=\"button\"\n                  (click)=\"openExtra(extra)\">\n                  \n                  @if (getThumbnailUrl(extra)) {\n                    <img\n                      [src]=\"getThumbnailUrl(extra)\"\n                      [alt]=\"getExtraTitle(extra)\"\n                      class=\"thumbnail-image\" />\n                  } @else {\n                    <div class=\"thumbnail-placeholder\">\n                      <pw-icon [name]=\"getMediaIcon(extra)\" />\n                    </div>\n                  }\n\n                  <!-- Lock overlay for gated content -->\n                  @if (!isAccessible(extra)) {\n                    <div class=\"lock-overlay\">\n                      <span class=\"lock-icon\"><pw-icon name=\"lucideLock\" /></span>\n                      <span class=\"lock-text\">{{ 'extras.locked_premium' | translate }}</span>\n                    </div>\n                  }\n\n                  <!-- Media type badge -->\n                  <div class=\"media-badge\">\n                    <pw-icon [name]=\"getMediaIcon(extra)\" />\n                  </div>\n                </button>\n\n                <div class=\"extra-info\">\n                  <h3 class=\"extra-title\">{{ getExtraTitle(extra) }}</h3>\n                  @if (getExtraDescription(extra)) {\n                    <p class=\"extra-description\">{{ getExtraDescription(extra) }}</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'extras.no_extras' | translate }}</p>\n          </div>\n        }\n      </div>\n\n      <!-- Detail View -->\n      @if (selectedExtra) {\n        <div class=\"detail-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); closeDetail()\">\n          <div class=\"detail-container\">\n            <!-- Detail Header -->\n            <div class=\"detail-header\">\n              <h3 class=\"detail-title\">{{ getExtraTitle(selectedExtra) }}</h3>\n              <button\n                class=\"close-btn\"\n                type=\"button\"\n                [attr.aria-label]=\"'extras.close_detail' | translate\"\n                (click)=\"closeDetail()\">\n                <pw-icon name=\"lucideX\" />\n              </button>\n            </div>\n\n            <!-- Detail Content -->\n            <div class=\"detail-content\">\n              @if ((selectedExtra.mediaType === 'image' || !selectedExtra.mediaType) && getAssetUrl(selectedExtra)) {\n                <img\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  [alt]=\"getExtraTitle(selectedExtra)\"\n                  class=\"detail-image\" />\n              }\n\n              @if (selectedExtra.mediaType === 'video') {\n                <video\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-video\">\n                  {{ 'extras.video_not_supported' | translate }}\n                </video>\n              }\n\n              @if (selectedExtra.mediaType === 'audio') {\n                <audio\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-audio\">\n                  {{ 'extras.audio_not_supported' | translate }}\n                </audio>\n              }\n\n              @if (selectedExtra.mediaType === 'document' && getAssetUrl(selectedExtra)) {\n                <a\n                  class=\"action-btn detail-document-link\"\n                  [href]=\"getAssetUrl(selectedExtra)\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  {{ 'extras.open_document' | translate }}\n                </a>\n              }\n\n              @if (getExtraDescription(selectedExtra)) {\n                <div class=\"detail-description\">\n                  {{ getExtraDescription(selectedExtra) }}\n                </div>\n              }\n            </div>\n\n            <!-- Detail Footer -->\n            <div class=\"detail-footer\">\n              <button\n                class=\"action-btn\"\n                type=\"button\"\n                (click)=\"closeDetail()\">\n                {{ 'extras.close_button' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Paywall Notice (for gated content without access) -->\n      @if (!hasPremiumAccess && hasGatedExtras()) {\n        <div class=\"paywall-notice\">\n          <p class=\"notice-text\">\n            <span class=\"notice-icon\"><pw-icon name=\"lucideLock\" /></span>\n            {{ 'extras.premium_notice' | translate }}\n          </p>\n          <button\n            class=\"upgrade-btn\"\n            type=\"button\"\n            (click)=\"onPurchase()\">\n            {{ 'extras.upgrade_now' | translate }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".extras-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.extras-container{width:90%;max-width:1000px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.extras-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.extras-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.extras-filters{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}.extras-filters::-webkit-scrollbar{height:4px}.extras-filters::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.filter-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffb3;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.filter-btn:hover{background:#ffffff1a;border-color:#fff3}.filter-btn.active{color:#fff;background:#0078d780;border-color:#0078d7b3}.extras-content{flex:1;overflow-y:auto;padding:24px}.extras-content::-webkit-scrollbar{width:8px}.extras-content::-webkit-scrollbar-track{background:#ffffff0d}.extras-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.extra-card{display:flex;flex-direction:column;gap:12px}.extra-thumbnail{position:relative;aspect-ratio:3 / 4;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;padding:0}.extra-thumbnail:hover{border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.extra-thumbnail.locked{cursor:not-allowed}.extra-thumbnail.locked:hover{transform:none;box-shadow:none}.thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#0078d71a,#00b4781a)}.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.lock-icon{font-size:32px}.lock-text{font-size:12px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.media-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#0009;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.extra-info{display:flex;flex-direction:column;gap:4px}.extra-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.extra-description{font-size:12px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.detail-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000000e6;animation:fadeIn .2s ease}.detail-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.detail-title{font-size:18px;font-weight:600;color:#fff;margin:0}.detail-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center}.detail-image,.detail-video{max-width:100%;max-height:60vh;border-radius:8px}.detail-audio{width:100%;max-width:500px}.detail-description{font-size:14px;line-height:1.6;color:#fffc;white-space:pre-wrap;text-align:center;max-width:600px}.detail-footer{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#ffffff26;border-color:#ffffff4d}.paywall-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#ffa5001a;border-top:1px solid rgba(255,165,0,.3);flex-shrink:0}.notice-text{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffffe6;margin:0}.notice-icon{font-size:16px}.upgrade-btn{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:#ffa500cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.upgrade-btn:hover{background:#ffa500e6;transform:translateY(-1px);box-shadow:0 2px 8px #ffa5004d}@media (max-width: 768px){.extras-container{width:95%}.extras-header{padding:16px 20px}.extras-title{font-size:18px}.extras-filters{padding:12px 20px}.extras-content{padding:20px}.extras-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.extra-title{font-size:13px}.extra-description{font-size:11px}.detail-container{width:95%}.detail-header{padding:14px 18px}.detail-title{font-size:16px}.detail-content{padding:16px}.paywall-notice{flex-direction:column;align-items:flex-start;gap:12px}.upgrade-btn{width:100%}}.close-btn:focus-visible,.filter-btn:focus-visible,.extra-thumbnail:focus-visible,.action-btn:focus-visible,.upgrade-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.extras-overlay,.extras-container,.detail-overlay,.detail-container,.close-btn,.filter-btn,.extra-thumbnail,.action-btn,.upgrade-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ExtrasViewerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-extras-viewer', imports: [TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"extras-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"extras-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Extras Viewer\">\n      <!-- Header -->\n      <div class=\"extras-header\">\n        <h2 class=\"extras-title\">{{ 'extras.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'extras.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Filters -->\n      <div class=\"extras-filters\">\n        <button\n          class=\"filter-btn\"\n          [class.active]=\"filterType === 'all'\"\n          type=\"button\"\n          (click)=\"setFilter('all')\">\n          {{ 'extras.all' | translate }} ({{ extras.length }})\n        </button>\n        @if (getExtrasByType('cover') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'cover'\"\n            type=\"button\"\n            (click)=\"setFilter('cover')\">\n            {{ getTypeName('cover') }} ({{ getExtrasByType('cover') }})\n          </button>\n        }\n        @if (getExtrasByType('art') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'art'\"\n            type=\"button\"\n            (click)=\"setFilter('art')\">\n            {{ getTypeName('art') }} ({{ getExtrasByType('art') }})\n          </button>\n        }\n        @if (getExtrasByType('bts') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'bts'\"\n            type=\"button\"\n            (click)=\"setFilter('bts')\">\n            {{ getTypeName('bts') }} ({{ getExtrasByType('bts') }})\n          </button>\n        }\n        @if (getExtrasByType('interview') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'interview'\"\n            type=\"button\"\n            (click)=\"setFilter('interview')\">\n            {{ getTypeName('interview') }} ({{ getExtrasByType('interview') }})\n          </button>\n        }\n        @if (getExtrasByType('other') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'other'\"\n            type=\"button\"\n            (click)=\"setFilter('other')\">\n            {{ getTypeName('other') }} ({{ getExtrasByType('other') }})\n          </button>\n        }\n      </div>\n\n      <!-- Gallery Grid -->\n      <div class=\"extras-content\">\n        @if (getFilteredExtras().length > 0) {\n          <div class=\"extras-grid\" role=\"list\">\n            @for (extra of getFilteredExtras(); track extra.id) {\n              <div class=\"extra-card\" role=\"listitem\">\n                <button\n                  class=\"extra-thumbnail\"\n                  [class.locked]=\"!isAccessible(extra)\"\n                  type=\"button\"\n                  (click)=\"openExtra(extra)\">\n                  \n                  @if (getThumbnailUrl(extra)) {\n                    <img\n                      [src]=\"getThumbnailUrl(extra)\"\n                      [alt]=\"getExtraTitle(extra)\"\n                      class=\"thumbnail-image\" />\n                  } @else {\n                    <div class=\"thumbnail-placeholder\">\n                      <pw-icon [name]=\"getMediaIcon(extra)\" />\n                    </div>\n                  }\n\n                  <!-- Lock overlay for gated content -->\n                  @if (!isAccessible(extra)) {\n                    <div class=\"lock-overlay\">\n                      <span class=\"lock-icon\"><pw-icon name=\"lucideLock\" /></span>\n                      <span class=\"lock-text\">{{ 'extras.locked_premium' | translate }}</span>\n                    </div>\n                  }\n\n                  <!-- Media type badge -->\n                  <div class=\"media-badge\">\n                    <pw-icon [name]=\"getMediaIcon(extra)\" />\n                  </div>\n                </button>\n\n                <div class=\"extra-info\">\n                  <h3 class=\"extra-title\">{{ getExtraTitle(extra) }}</h3>\n                  @if (getExtraDescription(extra)) {\n                    <p class=\"extra-description\">{{ getExtraDescription(extra) }}</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'extras.no_extras' | translate }}</p>\n          </div>\n        }\n      </div>\n\n      <!-- Detail View -->\n      @if (selectedExtra) {\n        <div class=\"detail-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); closeDetail()\">\n          <div class=\"detail-container\">\n            <!-- Detail Header -->\n            <div class=\"detail-header\">\n              <h3 class=\"detail-title\">{{ getExtraTitle(selectedExtra) }}</h3>\n              <button\n                class=\"close-btn\"\n                type=\"button\"\n                [attr.aria-label]=\"'extras.close_detail' | translate\"\n                (click)=\"closeDetail()\">\n                <pw-icon name=\"lucideX\" />\n              </button>\n            </div>\n\n            <!-- Detail Content -->\n            <div class=\"detail-content\">\n              @if ((selectedExtra.mediaType === 'image' || !selectedExtra.mediaType) && getAssetUrl(selectedExtra)) {\n                <img\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  [alt]=\"getExtraTitle(selectedExtra)\"\n                  class=\"detail-image\" />\n              }\n\n              @if (selectedExtra.mediaType === 'video') {\n                <video\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-video\">\n                  {{ 'extras.video_not_supported' | translate }}\n                </video>\n              }\n\n              @if (selectedExtra.mediaType === 'audio') {\n                <audio\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-audio\">\n                  {{ 'extras.audio_not_supported' | translate }}\n                </audio>\n              }\n\n              @if (selectedExtra.mediaType === 'document' && getAssetUrl(selectedExtra)) {\n                <a\n                  class=\"action-btn detail-document-link\"\n                  [href]=\"getAssetUrl(selectedExtra)\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  {{ 'extras.open_document' | translate }}\n                </a>\n              }\n\n              @if (getExtraDescription(selectedExtra)) {\n                <div class=\"detail-description\">\n                  {{ getExtraDescription(selectedExtra) }}\n                </div>\n              }\n            </div>\n\n            <!-- Detail Footer -->\n            <div class=\"detail-footer\">\n              <button\n                class=\"action-btn\"\n                type=\"button\"\n                (click)=\"closeDetail()\">\n                {{ 'extras.close_button' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Paywall Notice (for gated content without access) -->\n      @if (!hasPremiumAccess && hasGatedExtras()) {\n        <div class=\"paywall-notice\">\n          <p class=\"notice-text\">\n            <span class=\"notice-icon\"><pw-icon name=\"lucideLock\" /></span>\n            {{ 'extras.premium_notice' | translate }}\n          </p>\n          <button\n            class=\"upgrade-btn\"\n            type=\"button\"\n            (click)=\"onPurchase()\">\n            {{ 'extras.upgrade_now' | translate }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".extras-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.extras-container{width:90%;max-width:1000px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.extras-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.extras-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.extras-filters{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}.extras-filters::-webkit-scrollbar{height:4px}.extras-filters::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.filter-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffb3;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.filter-btn:hover{background:#ffffff1a;border-color:#fff3}.filter-btn.active{color:#fff;background:#0078d780;border-color:#0078d7b3}.extras-content{flex:1;overflow-y:auto;padding:24px}.extras-content::-webkit-scrollbar{width:8px}.extras-content::-webkit-scrollbar-track{background:#ffffff0d}.extras-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.extra-card{display:flex;flex-direction:column;gap:12px}.extra-thumbnail{position:relative;aspect-ratio:3 / 4;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;padding:0}.extra-thumbnail:hover{border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.extra-thumbnail.locked{cursor:not-allowed}.extra-thumbnail.locked:hover{transform:none;box-shadow:none}.thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#0078d71a,#00b4781a)}.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.lock-icon{font-size:32px}.lock-text{font-size:12px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.media-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#0009;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.extra-info{display:flex;flex-direction:column;gap:4px}.extra-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.extra-description{font-size:12px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.detail-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000000e6;animation:fadeIn .2s ease}.detail-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.detail-title{font-size:18px;font-weight:600;color:#fff;margin:0}.detail-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center}.detail-image,.detail-video{max-width:100%;max-height:60vh;border-radius:8px}.detail-audio{width:100%;max-width:500px}.detail-description{font-size:14px;line-height:1.6;color:#fffc;white-space:pre-wrap;text-align:center;max-width:600px}.detail-footer{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#ffffff26;border-color:#ffffff4d}.paywall-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#ffa5001a;border-top:1px solid rgba(255,165,0,.3);flex-shrink:0}.notice-text{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffffe6;margin:0}.notice-icon{font-size:16px}.upgrade-btn{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:#ffa500cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.upgrade-btn:hover{background:#ffa500e6;transform:translateY(-1px);box-shadow:0 2px 8px #ffa5004d}@media (max-width: 768px){.extras-container{width:95%}.extras-header{padding:16px 20px}.extras-title{font-size:18px}.extras-filters{padding:12px 20px}.extras-content{padding:20px}.extras-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.extra-title{font-size:13px}.extra-description{font-size:11px}.detail-container{width:95%}.detail-header{padding:14px 18px}.detail-title{font-size:16px}.detail-content{padding:16px}.paywall-notice{flex-direction:column;align-items:flex-start;gap:12px}.upgrade-btn{width:100%}}.close-btn:focus-visible,.filter-btn:focus-visible,.extra-thumbnail:focus-visible,.action-btn:focus-visible,.upgrade-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.extras-overlay,.extras-container,.detail-overlay,.detail-container,.close-btn,.filter-btn,.extra-thumbnail,.action-btn,.upgrade-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-extras-viewer', imports: [TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"extras-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"extras-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Extras Viewer\">\n      <!-- Header -->\n      <div class=\"extras-header\">\n        <h2 class=\"extras-title\">{{ 'extras.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'extras.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Filters -->\n      <div class=\"extras-filters\">\n        <button\n          class=\"filter-btn\"\n          [class.active]=\"filterType === 'all'\"\n          type=\"button\"\n          (click)=\"setFilter('all')\">\n          {{ 'extras.all' | translate }} ({{ extras.length }})\n        </button>\n        @if (getExtrasByType('cover') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'cover'\"\n            type=\"button\"\n            (click)=\"setFilter('cover')\">\n            {{ getTypeName('cover') }} ({{ getExtrasByType('cover') }})\n          </button>\n        }\n        @if (getExtrasByType('art') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'art'\"\n            type=\"button\"\n            (click)=\"setFilter('art')\">\n            {{ getTypeName('art') }} ({{ getExtrasByType('art') }})\n          </button>\n        }\n        @if (getExtrasByType('bts') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'bts'\"\n            type=\"button\"\n            (click)=\"setFilter('bts')\">\n            {{ getTypeName('bts') }} ({{ getExtrasByType('bts') }})\n          </button>\n        }\n        @if (getExtrasByType('interview') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'interview'\"\n            type=\"button\"\n            (click)=\"setFilter('interview')\">\n            {{ getTypeName('interview') }} ({{ getExtrasByType('interview') }})\n          </button>\n        }\n        @if (getExtrasByType('other') > 0) {\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"filterType === 'other'\"\n            type=\"button\"\n            (click)=\"setFilter('other')\">\n            {{ getTypeName('other') }} ({{ getExtrasByType('other') }})\n          </button>\n        }\n      </div>\n\n      <!-- Gallery Grid -->\n      <div class=\"extras-content\">\n        @if (getFilteredExtras().length > 0) {\n          <div class=\"extras-grid\" role=\"list\">\n            @for (extra of getFilteredExtras(); track extra.id) {\n              <div class=\"extra-card\" role=\"listitem\">\n                <button\n                  class=\"extra-thumbnail\"\n                  [class.locked]=\"!isAccessible(extra)\"\n                  type=\"button\"\n                  (click)=\"openExtra(extra)\">\n                  \n                  @if (getThumbnailUrl(extra)) {\n                    <img\n                      [src]=\"getThumbnailUrl(extra)\"\n                      [alt]=\"getExtraTitle(extra)\"\n                      class=\"thumbnail-image\" />\n                  } @else {\n                    <div class=\"thumbnail-placeholder\">\n                      <pw-icon [name]=\"getMediaIcon(extra)\" />\n                    </div>\n                  }\n\n                  <!-- Lock overlay for gated content -->\n                  @if (!isAccessible(extra)) {\n                    <div class=\"lock-overlay\">\n                      <span class=\"lock-icon\"><pw-icon name=\"lucideLock\" /></span>\n                      <span class=\"lock-text\">{{ 'extras.locked_premium' | translate }}</span>\n                    </div>\n                  }\n\n                  <!-- Media type badge -->\n                  <div class=\"media-badge\">\n                    <pw-icon [name]=\"getMediaIcon(extra)\" />\n                  </div>\n                </button>\n\n                <div class=\"extra-info\">\n                  <h3 class=\"extra-title\">{{ getExtraTitle(extra) }}</h3>\n                  @if (getExtraDescription(extra)) {\n                    <p class=\"extra-description\">{{ getExtraDescription(extra) }}</p>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        } @else {\n          <div class=\"empty-state\">\n            <p>{{ 'extras.no_extras' | translate }}</p>\n          </div>\n        }\n      </div>\n\n      <!-- Detail View -->\n      @if (selectedExtra) {\n        <div class=\"detail-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); closeDetail()\">\n          <div class=\"detail-container\">\n            <!-- Detail Header -->\n            <div class=\"detail-header\">\n              <h3 class=\"detail-title\">{{ getExtraTitle(selectedExtra) }}</h3>\n              <button\n                class=\"close-btn\"\n                type=\"button\"\n                [attr.aria-label]=\"'extras.close_detail' | translate\"\n                (click)=\"closeDetail()\">\n                <pw-icon name=\"lucideX\" />\n              </button>\n            </div>\n\n            <!-- Detail Content -->\n            <div class=\"detail-content\">\n              @if ((selectedExtra.mediaType === 'image' || !selectedExtra.mediaType) && getAssetUrl(selectedExtra)) {\n                <img\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  [alt]=\"getExtraTitle(selectedExtra)\"\n                  class=\"detail-image\" />\n              }\n\n              @if (selectedExtra.mediaType === 'video') {\n                <video\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-video\">\n                  {{ 'extras.video_not_supported' | translate }}\n                </video>\n              }\n\n              @if (selectedExtra.mediaType === 'audio') {\n                <audio\n                  [src]=\"getAssetUrl(selectedExtra)\"\n                  controls\n                  class=\"detail-audio\">\n                  {{ 'extras.audio_not_supported' | translate }}\n                </audio>\n              }\n\n              @if (selectedExtra.mediaType === 'document' && getAssetUrl(selectedExtra)) {\n                <a\n                  class=\"action-btn detail-document-link\"\n                  [href]=\"getAssetUrl(selectedExtra)\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\">\n                  {{ 'extras.open_document' | translate }}\n                </a>\n              }\n\n              @if (getExtraDescription(selectedExtra)) {\n                <div class=\"detail-description\">\n                  {{ getExtraDescription(selectedExtra) }}\n                </div>\n              }\n            </div>\n\n            <!-- Detail Footer -->\n            <div class=\"detail-footer\">\n              <button\n                class=\"action-btn\"\n                type=\"button\"\n                (click)=\"closeDetail()\">\n                {{ 'extras.close_button' | translate }}\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Paywall Notice (for gated content without access) -->\n      @if (!hasPremiumAccess && hasGatedExtras()) {\n        <div class=\"paywall-notice\">\n          <p class=\"notice-text\">\n            <span class=\"notice-icon\"><pw-icon name=\"lucideLock\" /></span>\n            {{ 'extras.premium_notice' | translate }}\n          </p>\n          <button\n            class=\"upgrade-btn\"\n            type=\"button\"\n            (click)=\"onPurchase()\">\n            {{ 'extras.upgrade_now' | translate }}\n          </button>\n        </div>\n      }\n    </div>\n  </div>\n}\n", styles: [".extras-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.extras-container{width:90%;max-width:1000px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.extras-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.extras-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.extras-filters{display:flex;gap:8px;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);overflow-x:auto;flex-shrink:0;scrollbar-width:thin}.extras-filters::-webkit-scrollbar{height:4px}.extras-filters::-webkit-scrollbar-thumb{background:#fff3;border-radius:2px}.filter-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffb3;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:20px;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.filter-btn:hover{background:#ffffff1a;border-color:#fff3}.filter-btn.active{color:#fff;background:#0078d780;border-color:#0078d7b3}.extras-content{flex:1;overflow-y:auto;padding:24px}.extras-content::-webkit-scrollbar{width:8px}.extras-content::-webkit-scrollbar-track{background:#ffffff0d}.extras-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.extras-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px}.extra-card{display:flex;flex-direction:column;gap:12px}.extra-thumbnail{position:relative;aspect-ratio:3 / 4;background:#ffffff08;border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden;cursor:pointer;transition:all .2s ease;padding:0}.extra-thumbnail:hover{border-color:#fff3;transform:translateY(-4px);box-shadow:0 4px 12px #0000004d}.extra-thumbnail.locked{cursor:not-allowed}.extra-thumbnail.locked:hover{transform:none;box-shadow:none}.thumbnail-image{width:100%;height:100%;object-fit:cover;display:block}.thumbnail-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;background:linear-gradient(135deg,#0078d71a,#00b4781a)}.lock-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:#000c;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.lock-icon{font-size:32px}.lock-text{font-size:12px;font-weight:600;color:#ffffffe6;text-transform:uppercase;letter-spacing:.5px}.media-badge{position:absolute;top:8px;right:8px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:14px;background:#0009;border-radius:6px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.extra-info{display:flex;flex-direction:column;gap:4px}.extra-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.extra-description{font-size:12px;color:#fff9;margin:0;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.empty-state{padding:60px 24px;text-align:center}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.detail-overlay{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#000000e6;animation:fadeIn .2s ease}.detail-container{width:90%;max-width:800px;max-height:85vh;background:#1a1a1a;border-radius:12px;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}.detail-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.detail-title{font-size:18px;font-weight:600;color:#fff;margin:0}.detail-content{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;align-items:center}.detail-image,.detail-video{max-width:100%;max-height:60vh;border-radius:8px}.detail-audio{width:100%;max-width:500px}.detail-description{font-size:14px;line-height:1.6;color:#fffc;white-space:pre-wrap;text-align:center;max-width:600px}.detail-footer{display:flex;justify-content:flex-end;padding:16px 20px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.action-btn{padding:10px 24px;font-size:14px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.action-btn:hover{background:#ffffff26;border-color:#ffffff4d}.paywall-notice{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px;background:#ffa5001a;border-top:1px solid rgba(255,165,0,.3);flex-shrink:0}.notice-text{display:flex;align-items:center;gap:8px;font-size:13px;color:#ffffffe6;margin:0}.notice-icon{font-size:16px}.upgrade-btn{padding:8px 20px;font-size:13px;font-weight:600;color:#fff;background:#ffa500cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.upgrade-btn:hover{background:#ffa500e6;transform:translateY(-1px);box-shadow:0 2px 8px #ffa5004d}@media (max-width: 768px){.extras-container{width:95%}.extras-header{padding:16px 20px}.extras-title{font-size:18px}.extras-filters{padding:12px 20px}.extras-content{padding:20px}.extras-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}.extra-title{font-size:13px}.extra-description{font-size:11px}.detail-container{width:95%}.detail-header{padding:14px 18px}.detail-title{font-size:16px}.detail-content{padding:16px}.paywall-notice{flex-direction:column;align-items:flex-start;gap:12px}.upgrade-btn{width:100%}}.close-btn:focus-visible,.filter-btn:focus-visible,.extra-thumbnail:focus-visible,.action-btn:focus-visible,.upgrade-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.extras-overlay,.extras-container,.detail-overlay,.detail-container,.close-btn,.filter-btn,.extra-thumbnail,.action-btn,.upgrade-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { extras: [{
                 type: Input
             }], initialExtraId: [{
@@ -16112,7 +16113,7 @@ class AgeGateComponent {
         return years;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgeGateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AgeGateComponent, isStandalone: true, selector: "pw-age-gate", inputs: { visible: "visible", minimumAge: "minimumAge", locale: "locale", warningMessage: "warningMessage", allowDismiss: "allowDismiss" }, outputs: { verify: "verify", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Age Gate Overlay -->\n<div class=\"age-gate-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"age-gate-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t('title')\">\n    <!-- Header -->\n    <div class=\"age-gate-header\">\n      <div class=\"warning-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n        </svg>\n      </div>\n      <h2 class=\"age-gate-title\">{{ t('title') }}</h2>\n      @if (allowDismiss) {\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"t('close')\"\n          (click)=\"onDismiss()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      }\n    </div>\n\n    <!-- Content -->\n    <div class=\"age-gate-content\">\n      <!-- Warning Message -->\n      <p class=\"warning-message\">{{ getWarningMessage() }}</p>\n\n      <!-- Birth Date Form -->\n      <form class=\"birth-date-form\" (ngSubmit)=\"onSubmit()\">\n        <div class=\"form-label\">{{ t('prompt') }}</div>\n\n        <div class=\"date-inputs\">\n          <!-- Month -->\n          <div class=\"input-group\">\n            <label for=\"birth-month\" class=\"input-label\">{{ t('month') }}</label>\n            <select\n              id=\"birth-month\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthMonth\"\n              name=\"birthMonth\"\n              required>\n              <option value=\"\">--</option>\n              @for (month of getMonthOptions(); track month.value) {\n                <option [value]=\"month.value\">{{ month.label }}</option>\n              }\n            </select>\n          </div>\n\n          <!-- Day -->\n          <div class=\"input-group\">\n            <label for=\"birth-day\" class=\"input-label\">{{ t('day') }}</label>\n            <select\n              id=\"birth-day\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthDay\"\n              name=\"birthDay\"\n              required>\n              <option value=\"\">--</option>\n              @for (day of getDayOptions(); track day) {\n                <option [value]=\"day\">{{ day }}</option>\n              }\n            </select>\n          </div>\n\n          <!-- Year -->\n          <div class=\"input-group\">\n            <label for=\"birth-year\" class=\"input-label\">{{ t('year') }}</label>\n            <select\n              id=\"birth-year\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthYear\"\n              name=\"birthYear\"\n              required>\n              <option value=\"\">----</option>\n              @for (year of getYearOptions(); track year) {\n                <option [value]=\"year\">{{ year }}</option>\n              }\n            </select>\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (errorMessage) {\n          <div class=\"error-message\" role=\"alert\">\n            {{ errorMessage }}\n          </div>\n        }\n\n        <!-- Submit Button -->\n        <button\n          type=\"submit\"\n          class=\"verify-btn\">\n          {{ t('verify') }}\n        </button>\n      </form>\n\n      <!-- Privacy Notice -->\n      <div class=\"privacy-notice\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <path d=\"M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z\"/>\n        </svg>\n        <span>{{ t('privacy') }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".age-gate-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.age-gate-overlay.visible{opacity:1;visibility:visible}.age-gate-modal{background:#1a1a1a;border:2px solid #ffa500;border-radius:12px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #ffa5004d;transform:scale(.9);transition:transform .3s ease}.age-gate-overlay.visible .age-gate-modal{transform:scale(1)}.age-gate-header{position:relative;padding:32px 24px 24px;text-align:center;border-bottom:1px solid rgba(255,165,0,.2)}.warning-icon{width:64px;height:64px;margin:0 auto 16px;background:#ffa50026;border-radius:50%;display:flex;align-items:center;justify-content:center}.warning-icon svg{width:36px;height:36px;color:orange}.age-gate-title{font-size:24px;font-weight:700;color:orange;margin:0}.close-btn{position:absolute;top:16px;right:16px;background:#ffffff1a;border:none;color:orange;font-size:24px;width:36px;height:36px;border-radius:50%;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.close-btn:hover{background:#fff3}.age-gate-content{padding:32px 24px}.warning-message{font-size:16px;line-height:1.6;color:#ffffffe6;text-align:center;margin:0 0 32px}.birth-date-form{margin-bottom:24px}.form-label{font-size:14px;font-weight:600;color:#fffc;text-align:center;margin-bottom:16px}.date-inputs{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:12px;margin-bottom:16px}.input-group{display:flex;flex-direction:column}.input-label{font-size:12px;font-weight:600;color:#fff9;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.date-input{background:#ffffff1a;border:1px solid rgba(255,165,0,.3);color:#fff;font-size:16px;padding:12px;border-radius:8px;transition:border-color .2s ease,background .2s ease}.date-input:focus{outline:none;border-color:orange;background:#ffffff26}.date-input option{background:#1a1a1a;color:#fff}.error-message{background:#dc354526;border:1px solid #dc3545;border-radius:8px;color:#ff6b7a;font-size:14px;padding:12px;margin-bottom:16px;text-align:center}.verify-btn{background:linear-gradient(135deg,orange,#ff8c00);border:none;color:#fff;font-size:16px;font-weight:700;padding:16px 32px;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%}.verify-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ffa5004d}.verify-btn:active{transform:translateY(0)}.verify-btn:disabled{opacity:.5;cursor:not-allowed}.privacy-notice{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}.privacy-notice svg{width:16px;height:16px;color:#ffffff80;flex-shrink:0}.privacy-notice span{font-size:12px;color:#ffffff80}@media (max-width: 640px){.age-gate-modal{max-width:100%;border-radius:8px}.age-gate-header{padding:24px 20px 20px}.age-gate-title{font-size:20px}.age-gate-content{padding:24px 20px}.date-inputs{grid-template-columns:1fr;gap:16px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: AgeGateComponent, isStandalone: true, selector: "pw-age-gate", inputs: { visible: "visible", minimumAge: "minimumAge", locale: "locale", warningMessage: "warningMessage", allowDismiss: "allowDismiss" }, outputs: { verify: "verify", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Age Gate Overlay -->\n<div class=\"age-gate-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"age-gate-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"t('title')\">\n    <!-- Header -->\n    <div class=\"age-gate-header\">\n      <div class=\"warning-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"/>\n        </svg>\n      </div>\n      <h2 class=\"age-gate-title\">{{ t('title') }}</h2>\n      @if (allowDismiss) {\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"t('close')\"\n          (click)=\"onDismiss()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      }\n    </div>\n\n    <!-- Content -->\n    <div class=\"age-gate-content\">\n      <!-- Warning Message -->\n      <p class=\"warning-message\">{{ getWarningMessage() }}</p>\n\n      <!-- Birth Date Form -->\n      <form class=\"birth-date-form\" (ngSubmit)=\"onSubmit()\">\n        <div class=\"form-label\">{{ t('prompt') }}</div>\n\n        <div class=\"date-inputs\">\n          <!-- Month -->\n          <div class=\"input-group\">\n            <label for=\"birth-month\" class=\"input-label\">{{ t('month') }}</label>\n            <select\n              id=\"birth-month\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthMonth\"\n              name=\"birthMonth\"\n              required>\n              <option value=\"\">--</option>\n              @for (month of getMonthOptions(); track month.value) {\n                <option [value]=\"month.value\">{{ month.label }}</option>\n              }\n            </select>\n          </div>\n\n          <!-- Day -->\n          <div class=\"input-group\">\n            <label for=\"birth-day\" class=\"input-label\">{{ t('day') }}</label>\n            <select\n              id=\"birth-day\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthDay\"\n              name=\"birthDay\"\n              required>\n              <option value=\"\">--</option>\n              @for (day of getDayOptions(); track day) {\n                <option [value]=\"day\">{{ day }}</option>\n              }\n            </select>\n          </div>\n\n          <!-- Year -->\n          <div class=\"input-group\">\n            <label for=\"birth-year\" class=\"input-label\">{{ t('year') }}</label>\n            <select\n              id=\"birth-year\"\n              class=\"date-input\"\n              [(ngModel)]=\"birthYear\"\n              name=\"birthYear\"\n              required>\n              <option value=\"\">----</option>\n              @for (year of getYearOptions(); track year) {\n                <option [value]=\"year\">{{ year }}</option>\n              }\n            </select>\n          </div>\n        </div>\n\n        <!-- Error Message -->\n        @if (errorMessage) {\n          <div class=\"error-message\" role=\"alert\">\n            {{ errorMessage }}\n          </div>\n        }\n\n        <!-- Submit Button -->\n        <button\n          type=\"submit\"\n          class=\"verify-btn\">\n          {{ t('verify') }}\n        </button>\n      </form>\n\n      <!-- Privacy Notice -->\n      <div class=\"privacy-notice\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 16\" fill=\"currentColor\">\n          <path d=\"M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z\"/>\n        </svg>\n        <span>{{ t('privacy') }}</span>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".age-gate-overlay{position:fixed;inset:0;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.age-gate-overlay.visible{opacity:1;visibility:visible}.age-gate-modal{background:#1a1a1a;border:2px solid #ffa500;border-radius:12px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #ffa5004d;transform:scale(.9);transition:transform .3s ease}.age-gate-overlay.visible .age-gate-modal{transform:scale(1)}.age-gate-header{position:relative;padding:32px 24px 24px;text-align:center;border-bottom:1px solid rgba(255,165,0,.2)}.warning-icon{width:64px;height:64px;margin:0 auto 16px;background:#ffa50026;border-radius:50%;display:flex;align-items:center;justify-content:center}.warning-icon svg{width:36px;height:36px;color:orange}.age-gate-title{font-size:24px;font-weight:700;color:orange;margin:0}.close-btn{position:absolute;top:16px;right:16px;background:#ffffff1a;border:none;color:orange;font-size:24px;width:36px;height:36px;border-radius:50%;cursor:pointer;transition:background .2s ease;display:flex;align-items:center;justify-content:center;padding:0}.close-btn:hover{background:#fff3}.age-gate-content{padding:32px 24px}.warning-message{font-size:16px;line-height:1.6;color:#ffffffe6;text-align:center;margin:0 0 32px}.birth-date-form{margin-bottom:24px}.form-label{font-size:14px;font-weight:600;color:#fffc;text-align:center;margin-bottom:16px}.date-inputs{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:12px;margin-bottom:16px}.input-group{display:flex;flex-direction:column}.input-label{font-size:12px;font-weight:600;color:#fff9;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.date-input{background:#ffffff1a;border:1px solid rgba(255,165,0,.3);color:#fff;font-size:16px;padding:12px;border-radius:8px;transition:border-color .2s ease,background .2s ease}.date-input:focus{outline:none;border-color:orange;background:#ffffff26}.date-input option{background:#1a1a1a;color:#fff}.error-message{background:#dc354526;border:1px solid #dc3545;border-radius:8px;color:#ff6b7a;font-size:14px;padding:12px;margin-bottom:16px;text-align:center}.verify-btn{background:linear-gradient(135deg,orange,#ff8c00);border:none;color:#fff;font-size:16px;font-weight:700;padding:16px 32px;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%}.verify-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ffa5004d}.verify-btn:active{transform:translateY(0)}.verify-btn:disabled{opacity:.5;cursor:not-allowed}.privacy-notice{display:flex;align-items:center;justify-content:center;gap:8px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1)}.privacy-notice svg{width:16px;height:16px;color:#ffffff80;flex-shrink:0}.privacy-notice span{font-size:12px;color:#ffffff80}@media (max-width: 640px){.age-gate-modal{max-width:100%;border-radius:8px}.age-gate-header{padding:24px 20px 20px}.age-gate-title{font-size:20px}.age-gate-content{padding:24px 20px}.date-inputs{grid-template-columns:1fr;gap:16px}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgeGateComponent, decorators: [{
             type: Component,
@@ -16501,11 +16502,11 @@ class ShareModalComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ShareModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ShareModalComponent, isStandalone: true, selector: "pw-share-modal", inputs: { shareUrl: "shareUrl", shareTitle: "shareTitle", shareDescription: "shareDescription", visible: "visible", shareable: "shareable" }, outputs: { close: "close", share: "share" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, ngImport: i0, template: "@if (visible) {\n  <div class=\"share-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"share-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Share\">\n      <!-- Header -->\n      <div class=\"share-header\">\n        <h2 class=\"share-title\">{{ 'share.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'share.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"share-content\">\n        @if (!shareable) {\n          <!-- Not shareable message -->\n          <div class=\"not-shareable\">\n            <span class=\"warning-icon\"><pw-icon name=\"lucideTriangleAlert\" /></span>\n            <p>{{ 'share.not_shareable' | translate }}</p>\n          </div>\n        } @else {\n          <!-- Copy Link -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.copy_link' | translate }}</h3>\n            <div class=\"link-container\">\n              <input\n                type=\"text\"\n                class=\"link-input\"\n                [value]=\"shareUrl\"\n                readonly\n                [attr.aria-label]=\"'share.share_url' | translate\" />\n              <button\n                class=\"copy-btn\"\n                [class.success]=\"copySuccess\"\n                type=\"button\"\n                (click)=\"copyLink()\">\n                <pw-icon [name]=\"copySuccess ? 'lucideCheck' : 'lucideClipboard'\" />\n                {{ copySuccess ? ('share.copied' | translate) : ('share.copy' | translate) }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Native Share (if supported) -->\n          @if (isNativeShareSupported) {\n            <div class=\"share-section\">\n              <button\n                class=\"native-share-btn\"\n                type=\"button\"\n                (click)=\"useNativeShare()\">\n                <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n                <span class=\"btn-label\">{{ 'share.share_via' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Social Share Buttons -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.social_media' | translate }}</h3>\n            <div class=\"social-buttons\">\n              <button\n                class=\"social-btn twitter\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.twitter' | translate)\"\n                (click)=\"shareOnTwitter()\">\n                <span class=\"social-icon\">\uD835\uDD4F</span>\n                <span class=\"social-label\">{{ 'share.twitter' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn facebook\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.facebook' | translate)\"\n                (click)=\"shareOnFacebook()\">\n                <span class=\"social-icon\">f</span>\n                <span class=\"social-label\">{{ 'share.facebook' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn reddit\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.reddit' | translate)\"\n                (click)=\"shareOnReddit()\">\n                <span class=\"social-icon\">\u25B2</span>\n                <span class=\"social-label\">{{ 'share.reddit' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn email\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share via ' + ('share.email' | translate)\"\n                (click)=\"shareViaEmail()\">\n                <span class=\"social-icon\"><pw-icon name=\"lucideMail\" /></span>\n                <span class=\"social-label\">{{ 'share.email' | translate }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- QR Code -->\n          <div class=\"share-section\">\n            <button\n              class=\"qr-toggle-btn\"\n              type=\"button\"\n              (click)=\"toggleQrCode()\">\n              <span class=\"btn-icon\"><pw-icon [name]=\"showQrCode ? 'lucideChevronDown' : 'lucideChevronRight'\" /></span>\n              <span class=\"btn-label\">{{ showQrCode ? ('share.hide_qr' | translate) : ('share.show_qr' | translate) }}</span>\n            </button>\n\n            @if (showQrCode) {\n              <div class=\"qr-code-container\">\n                @if (qrCodeDataUrl) {\n                  <img\n                    [src]=\"qrCodeDataUrl\"\n                    [alt]=\"'share.qr_code' | translate\"\n                    class=\"qr-code-image\" />\n                  <p class=\"qr-hint\">{{ 'share.scan_mobile' | translate }}</p>\n                } @else {\n                  <div class=\"qr-loading\">{{ 'share.generating_qr' | translate }}</div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Share Info -->\n          <div class=\"share-info\">\n            <p class=\"info-text\">\n              <pw-icon name=\"lucideInfo\" /> {{ 'share.share_info' | translate }}\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".share-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-container{width:90%;max-width:500px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.share-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.share-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.share-content::-webkit-scrollbar{width:8px}.share-content::-webkit-scrollbar-track{background:#ffffff0d}.share-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.not-shareable{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.warning-icon{font-size:48px}.not-shareable p{font-size:14px;color:#ffffffb3;margin:0}.share-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;text-transform:uppercase;letter-spacing:.5px}.link-container{display:flex;gap:8px}.link-input{flex:1;padding:10px 14px;font-size:13px;font-family:monospace;color:#fffc;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none}.link-input:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.copy-btn{padding:10px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#ffffff26;border-color:#ffffff4d}.copy-btn.success{background:#00b4784d;border-color:#00b47880;color:#fff}.native-share-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;color:#ffffffe6;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:8px;cursor:pointer;transition:all .2s ease}.native-share-btn:hover{background:#0078d766;border-color:#0078d799;transform:translateY(-1px)}.social-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.social-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease}.social-btn:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.social-btn:active{transform:translateY(0)}.social-icon{font-size:24px;font-weight:700;line-height:1}.social-label{font-size:12px;font-weight:500;color:#fffc}.social-btn.twitter{background:#1d9bf01a;border-color:#1d9bf04d}.social-btn.twitter:hover{background:#1d9bf033;border-color:#1d9bf080}.social-btn.facebook{background:#1877f21a;border-color:#1877f24d}.social-btn.facebook:hover{background:#1877f233;border-color:#1877f280}.social-btn.reddit{background:#ff45001a;border-color:#ff45004d}.social-btn.reddit:hover{background:#ff450033;border-color:#ff450080}.social-btn.email{background:#8080801a;border-color:#8080804d}.social-btn.email:hover{background:#80808033;border-color:#80808080}.qr-toggle-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;transition:all .2s ease}.qr-toggle-btn:hover{background:#ffffff1a;border-color:#fff3}.btn-icon{font-size:14px;line-height:1}.btn-label{line-height:1}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;animation:fadeIn .2s ease}.qr-code-image{width:200px;height:200px;border-radius:8px;background:#fff;padding:8px}.qr-hint{font-size:12px;color:#fff9;margin:0}.qr-loading{padding:40px;font-size:13px;color:#ffffff80}.share-info{padding:12px 16px;background:#0078d71a;border:1px solid rgba(0,120,215,.2);border-radius:6px}.info-text{font-size:12px;line-height:1.5;color:#ffffffb3;margin:0}@media (max-width: 480px){.share-container{width:95%}.share-header{padding:16px 20px}.share-title{font-size:18px}.share-content{padding:20px;gap:20px}.social-buttons{grid-template-columns:1fr}.qr-code-image{width:180px;height:180px}}.close-btn:focus-visible,.copy-btn:focus-visible,.native-share-btn:focus-visible,.social-btn:focus-visible,.qr-toggle-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.share-overlay,.share-container,.qr-code-container,.close-btn,.copy-btn,.social-btn,.qr-toggle-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: ShareModalComponent, isStandalone: true, selector: "pw-share-modal", inputs: { shareUrl: "shareUrl", shareTitle: "shareTitle", shareDescription: "shareDescription", visible: "visible", shareable: "shareable" }, outputs: { close: "close", share: "share" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, ngImport: i0, template: "@if (visible) {\n  <div class=\"share-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"share-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Share\">\n      <!-- Header -->\n      <div class=\"share-header\">\n        <h2 class=\"share-title\">{{ 'share.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'share.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"share-content\">\n        @if (!shareable) {\n          <!-- Not shareable message -->\n          <div class=\"not-shareable\">\n            <span class=\"warning-icon\"><pw-icon name=\"lucideTriangleAlert\" /></span>\n            <p>{{ 'share.not_shareable' | translate }}</p>\n          </div>\n        } @else {\n          <!-- Copy Link -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.copy_link' | translate }}</h3>\n            <div class=\"link-container\">\n              <input\n                type=\"text\"\n                class=\"link-input\"\n                [value]=\"shareUrl\"\n                readonly\n                [attr.aria-label]=\"'share.share_url' | translate\" />\n              <button\n                class=\"copy-btn\"\n                [class.success]=\"copySuccess\"\n                type=\"button\"\n                (click)=\"copyLink()\">\n                <pw-icon [name]=\"copySuccess ? 'lucideCheck' : 'lucideClipboard'\" />\n                {{ copySuccess ? ('share.copied' | translate) : ('share.copy' | translate) }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Native Share (if supported) -->\n          @if (isNativeShareSupported) {\n            <div class=\"share-section\">\n              <button\n                class=\"native-share-btn\"\n                type=\"button\"\n                (click)=\"useNativeShare()\">\n                <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n                <span class=\"btn-label\">{{ 'share.share_via' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Social Share Buttons -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.social_media' | translate }}</h3>\n            <div class=\"social-buttons\">\n              <button\n                class=\"social-btn twitter\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.twitter' | translate)\"\n                (click)=\"shareOnTwitter()\">\n                <span class=\"social-icon\">\uD835\uDD4F</span>\n                <span class=\"social-label\">{{ 'share.twitter' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn facebook\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.facebook' | translate)\"\n                (click)=\"shareOnFacebook()\">\n                <span class=\"social-icon\">f</span>\n                <span class=\"social-label\">{{ 'share.facebook' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn reddit\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.reddit' | translate)\"\n                (click)=\"shareOnReddit()\">\n                <span class=\"social-icon\">\u25B2</span>\n                <span class=\"social-label\">{{ 'share.reddit' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn email\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share via ' + ('share.email' | translate)\"\n                (click)=\"shareViaEmail()\">\n                <span class=\"social-icon\"><pw-icon name=\"lucideMail\" /></span>\n                <span class=\"social-label\">{{ 'share.email' | translate }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- QR Code -->\n          <div class=\"share-section\">\n            <button\n              class=\"qr-toggle-btn\"\n              type=\"button\"\n              (click)=\"toggleQrCode()\">\n              <span class=\"btn-icon\"><pw-icon [name]=\"showQrCode ? 'lucideChevronDown' : 'lucideChevronRight'\" /></span>\n              <span class=\"btn-label\">{{ showQrCode ? ('share.hide_qr' | translate) : ('share.show_qr' | translate) }}</span>\n            </button>\n\n            @if (showQrCode) {\n              <div class=\"qr-code-container\">\n                @if (qrCodeDataUrl) {\n                  <img\n                    [src]=\"qrCodeDataUrl\"\n                    [alt]=\"'share.qr_code' | translate\"\n                    class=\"qr-code-image\" />\n                  <p class=\"qr-hint\">{{ 'share.scan_mobile' | translate }}</p>\n                } @else {\n                  <div class=\"qr-loading\">{{ 'share.generating_qr' | translate }}</div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Share Info -->\n          <div class=\"share-info\">\n            <p class=\"info-text\">\n              <pw-icon name=\"lucideInfo\" /> {{ 'share.share_info' | translate }}\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".share-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-container{width:90%;max-width:500px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.share-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.share-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.share-content::-webkit-scrollbar{width:8px}.share-content::-webkit-scrollbar-track{background:#ffffff0d}.share-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.not-shareable{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.warning-icon{font-size:48px}.not-shareable p{font-size:14px;color:#ffffffb3;margin:0}.share-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;text-transform:uppercase;letter-spacing:.5px}.link-container{display:flex;gap:8px}.link-input{flex:1;padding:10px 14px;font-size:13px;font-family:monospace;color:#fffc;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none}.link-input:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.copy-btn{padding:10px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#ffffff26;border-color:#ffffff4d}.copy-btn.success{background:#00b4784d;border-color:#00b47880;color:#fff}.native-share-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;color:#ffffffe6;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:8px;cursor:pointer;transition:all .2s ease}.native-share-btn:hover{background:#0078d766;border-color:#0078d799;transform:translateY(-1px)}.social-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.social-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease}.social-btn:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.social-btn:active{transform:translateY(0)}.social-icon{font-size:24px;font-weight:700;line-height:1}.social-label{font-size:12px;font-weight:500;color:#fffc}.social-btn.twitter{background:#1d9bf01a;border-color:#1d9bf04d}.social-btn.twitter:hover{background:#1d9bf033;border-color:#1d9bf080}.social-btn.facebook{background:#1877f21a;border-color:#1877f24d}.social-btn.facebook:hover{background:#1877f233;border-color:#1877f280}.social-btn.reddit{background:#ff45001a;border-color:#ff45004d}.social-btn.reddit:hover{background:#ff450033;border-color:#ff450080}.social-btn.email{background:#8080801a;border-color:#8080804d}.social-btn.email:hover{background:#80808033;border-color:#80808080}.qr-toggle-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;transition:all .2s ease}.qr-toggle-btn:hover{background:#ffffff1a;border-color:#fff3}.btn-icon{font-size:14px;line-height:1}.btn-label{line-height:1}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;animation:fadeIn .2s ease}.qr-code-image{width:200px;height:200px;border-radius:8px;background:#fff;padding:8px}.qr-hint{font-size:12px;color:#fff9;margin:0}.qr-loading{padding:40px;font-size:13px;color:#ffffff80}.share-info{padding:12px 16px;background:#0078d71a;border:1px solid rgba(0,120,215,.2);border-radius:6px}.info-text{font-size:12px;line-height:1.5;color:#ffffffb3;margin:0}@media (max-width: 480px){.share-container{width:95%}.share-header{padding:16px 20px}.share-title{font-size:18px}.share-content{padding:20px;gap:20px}.social-buttons{grid-template-columns:1fr}.qr-code-image{width:180px;height:180px}}.close-btn:focus-visible,.copy-btn:focus-visible,.native-share-btn:focus-visible,.social-btn:focus-visible,.qr-toggle-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.share-overlay,.share-container,.qr-code-container,.close-btn,.copy-btn,.social-btn,.qr-toggle-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: ShareModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-share-modal', imports: [TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"share-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"share-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Share\">\n      <!-- Header -->\n      <div class=\"share-header\">\n        <h2 class=\"share-title\">{{ 'share.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'share.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"share-content\">\n        @if (!shareable) {\n          <!-- Not shareable message -->\n          <div class=\"not-shareable\">\n            <span class=\"warning-icon\"><pw-icon name=\"lucideTriangleAlert\" /></span>\n            <p>{{ 'share.not_shareable' | translate }}</p>\n          </div>\n        } @else {\n          <!-- Copy Link -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.copy_link' | translate }}</h3>\n            <div class=\"link-container\">\n              <input\n                type=\"text\"\n                class=\"link-input\"\n                [value]=\"shareUrl\"\n                readonly\n                [attr.aria-label]=\"'share.share_url' | translate\" />\n              <button\n                class=\"copy-btn\"\n                [class.success]=\"copySuccess\"\n                type=\"button\"\n                (click)=\"copyLink()\">\n                <pw-icon [name]=\"copySuccess ? 'lucideCheck' : 'lucideClipboard'\" />\n                {{ copySuccess ? ('share.copied' | translate) : ('share.copy' | translate) }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Native Share (if supported) -->\n          @if (isNativeShareSupported) {\n            <div class=\"share-section\">\n              <button\n                class=\"native-share-btn\"\n                type=\"button\"\n                (click)=\"useNativeShare()\">\n                <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n                <span class=\"btn-label\">{{ 'share.share_via' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Social Share Buttons -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.social_media' | translate }}</h3>\n            <div class=\"social-buttons\">\n              <button\n                class=\"social-btn twitter\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.twitter' | translate)\"\n                (click)=\"shareOnTwitter()\">\n                <span class=\"social-icon\">\uD835\uDD4F</span>\n                <span class=\"social-label\">{{ 'share.twitter' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn facebook\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.facebook' | translate)\"\n                (click)=\"shareOnFacebook()\">\n                <span class=\"social-icon\">f</span>\n                <span class=\"social-label\">{{ 'share.facebook' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn reddit\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.reddit' | translate)\"\n                (click)=\"shareOnReddit()\">\n                <span class=\"social-icon\">\u25B2</span>\n                <span class=\"social-label\">{{ 'share.reddit' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn email\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share via ' + ('share.email' | translate)\"\n                (click)=\"shareViaEmail()\">\n                <span class=\"social-icon\"><pw-icon name=\"lucideMail\" /></span>\n                <span class=\"social-label\">{{ 'share.email' | translate }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- QR Code -->\n          <div class=\"share-section\">\n            <button\n              class=\"qr-toggle-btn\"\n              type=\"button\"\n              (click)=\"toggleQrCode()\">\n              <span class=\"btn-icon\"><pw-icon [name]=\"showQrCode ? 'lucideChevronDown' : 'lucideChevronRight'\" /></span>\n              <span class=\"btn-label\">{{ showQrCode ? ('share.hide_qr' | translate) : ('share.show_qr' | translate) }}</span>\n            </button>\n\n            @if (showQrCode) {\n              <div class=\"qr-code-container\">\n                @if (qrCodeDataUrl) {\n                  <img\n                    [src]=\"qrCodeDataUrl\"\n                    [alt]=\"'share.qr_code' | translate\"\n                    class=\"qr-code-image\" />\n                  <p class=\"qr-hint\">{{ 'share.scan_mobile' | translate }}</p>\n                } @else {\n                  <div class=\"qr-loading\">{{ 'share.generating_qr' | translate }}</div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Share Info -->\n          <div class=\"share-info\">\n            <p class=\"info-text\">\n              <pw-icon name=\"lucideInfo\" /> {{ 'share.share_info' | translate }}\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".share-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-container{width:90%;max-width:500px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.share-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.share-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.share-content::-webkit-scrollbar{width:8px}.share-content::-webkit-scrollbar-track{background:#ffffff0d}.share-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.not-shareable{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.warning-icon{font-size:48px}.not-shareable p{font-size:14px;color:#ffffffb3;margin:0}.share-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;text-transform:uppercase;letter-spacing:.5px}.link-container{display:flex;gap:8px}.link-input{flex:1;padding:10px 14px;font-size:13px;font-family:monospace;color:#fffc;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none}.link-input:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.copy-btn{padding:10px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#ffffff26;border-color:#ffffff4d}.copy-btn.success{background:#00b4784d;border-color:#00b47880;color:#fff}.native-share-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;color:#ffffffe6;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:8px;cursor:pointer;transition:all .2s ease}.native-share-btn:hover{background:#0078d766;border-color:#0078d799;transform:translateY(-1px)}.social-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.social-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease}.social-btn:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.social-btn:active{transform:translateY(0)}.social-icon{font-size:24px;font-weight:700;line-height:1}.social-label{font-size:12px;font-weight:500;color:#fffc}.social-btn.twitter{background:#1d9bf01a;border-color:#1d9bf04d}.social-btn.twitter:hover{background:#1d9bf033;border-color:#1d9bf080}.social-btn.facebook{background:#1877f21a;border-color:#1877f24d}.social-btn.facebook:hover{background:#1877f233;border-color:#1877f280}.social-btn.reddit{background:#ff45001a;border-color:#ff45004d}.social-btn.reddit:hover{background:#ff450033;border-color:#ff450080}.social-btn.email{background:#8080801a;border-color:#8080804d}.social-btn.email:hover{background:#80808033;border-color:#80808080}.qr-toggle-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;transition:all .2s ease}.qr-toggle-btn:hover{background:#ffffff1a;border-color:#fff3}.btn-icon{font-size:14px;line-height:1}.btn-label{line-height:1}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;animation:fadeIn .2s ease}.qr-code-image{width:200px;height:200px;border-radius:8px;background:#fff;padding:8px}.qr-hint{font-size:12px;color:#fff9;margin:0}.qr-loading{padding:40px;font-size:13px;color:#ffffff80}.share-info{padding:12px 16px;background:#0078d71a;border:1px solid rgba(0,120,215,.2);border-radius:6px}.info-text{font-size:12px;line-height:1.5;color:#ffffffb3;margin:0}@media (max-width: 480px){.share-container{width:95%}.share-header{padding:16px 20px}.share-title{font-size:18px}.share-content{padding:20px;gap:20px}.social-buttons{grid-template-columns:1fr}.qr-code-image{width:180px;height:180px}}.close-btn:focus-visible,.copy-btn:focus-visible,.native-share-btn:focus-visible,.social-btn:focus-visible,.qr-toggle-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.share-overlay,.share-container,.qr-code-container,.close-btn,.copy-btn,.social-btn,.qr-toggle-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-share-modal', imports: [TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"share-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"share-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Share\">\n      <!-- Header -->\n      <div class=\"share-header\">\n        <h2 class=\"share-title\">{{ 'share.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'share.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Content -->\n      <div class=\"share-content\">\n        @if (!shareable) {\n          <!-- Not shareable message -->\n          <div class=\"not-shareable\">\n            <span class=\"warning-icon\"><pw-icon name=\"lucideTriangleAlert\" /></span>\n            <p>{{ 'share.not_shareable' | translate }}</p>\n          </div>\n        } @else {\n          <!-- Copy Link -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.copy_link' | translate }}</h3>\n            <div class=\"link-container\">\n              <input\n                type=\"text\"\n                class=\"link-input\"\n                [value]=\"shareUrl\"\n                readonly\n                [attr.aria-label]=\"'share.share_url' | translate\" />\n              <button\n                class=\"copy-btn\"\n                [class.success]=\"copySuccess\"\n                type=\"button\"\n                (click)=\"copyLink()\">\n                <pw-icon [name]=\"copySuccess ? 'lucideCheck' : 'lucideClipboard'\" />\n                {{ copySuccess ? ('share.copied' | translate) : ('share.copy' | translate) }}\n              </button>\n            </div>\n          </div>\n\n          <!-- Native Share (if supported) -->\n          @if (isNativeShareSupported) {\n            <div class=\"share-section\">\n              <button\n                class=\"native-share-btn\"\n                type=\"button\"\n                (click)=\"useNativeShare()\">\n                <span class=\"btn-icon\"><pw-icon name=\"lucideShare2\" /></span>\n                <span class=\"btn-label\">{{ 'share.share_via' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Social Share Buttons -->\n          <div class=\"share-section\">\n            <h3 class=\"section-title\">{{ 'share.social_media' | translate }}</h3>\n            <div class=\"social-buttons\">\n              <button\n                class=\"social-btn twitter\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.twitter' | translate)\"\n                (click)=\"shareOnTwitter()\">\n                <span class=\"social-icon\">\uD835\uDD4F</span>\n                <span class=\"social-label\">{{ 'share.twitter' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn facebook\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.facebook' | translate)\"\n                (click)=\"shareOnFacebook()\">\n                <span class=\"social-icon\">f</span>\n                <span class=\"social-label\">{{ 'share.facebook' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn reddit\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share on ' + ('share.reddit' | translate)\"\n                (click)=\"shareOnReddit()\">\n                <span class=\"social-icon\">\u25B2</span>\n                <span class=\"social-label\">{{ 'share.reddit' | translate }}</span>\n              </button>\n\n              <button\n                class=\"social-btn email\"\n                type=\"button\"\n                [attr.aria-label]=\"'Share via ' + ('share.email' | translate)\"\n                (click)=\"shareViaEmail()\">\n                <span class=\"social-icon\"><pw-icon name=\"lucideMail\" /></span>\n                <span class=\"social-label\">{{ 'share.email' | translate }}</span>\n              </button>\n            </div>\n          </div>\n\n          <!-- QR Code -->\n          <div class=\"share-section\">\n            <button\n              class=\"qr-toggle-btn\"\n              type=\"button\"\n              (click)=\"toggleQrCode()\">\n              <span class=\"btn-icon\"><pw-icon [name]=\"showQrCode ? 'lucideChevronDown' : 'lucideChevronRight'\" /></span>\n              <span class=\"btn-label\">{{ showQrCode ? ('share.hide_qr' | translate) : ('share.show_qr' | translate) }}</span>\n            </button>\n\n            @if (showQrCode) {\n              <div class=\"qr-code-container\">\n                @if (qrCodeDataUrl) {\n                  <img\n                    [src]=\"qrCodeDataUrl\"\n                    [alt]=\"'share.qr_code' | translate\"\n                    class=\"qr-code-image\" />\n                  <p class=\"qr-hint\">{{ 'share.scan_mobile' | translate }}</p>\n                } @else {\n                  <div class=\"qr-loading\">{{ 'share.generating_qr' | translate }}</div>\n                }\n              </div>\n            }\n          </div>\n\n          <!-- Share Info -->\n          <div class=\"share-info\">\n            <p class=\"info-text\">\n              <pw-icon name=\"lucideInfo\" /> {{ 'share.share_info' | translate }}\n            </p>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n", styles: [".share-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.share-container{width:90%;max-width:500px;max-height:85vh;background:#1a1a1a;border-radius:12px;box-shadow:0 8px 32px #0006;display:flex;flex-direction:column;overflow:hidden;animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.share-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.share-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.close-btn:active{background:#ffffff26;transform:scale(.95)}.share-content{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:24px}.share-content::-webkit-scrollbar{width:8px}.share-content::-webkit-scrollbar-track{background:#ffffff0d}.share-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.not-shareable{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 20px;text-align:center}.warning-icon{font-size:48px}.not-shareable p{font-size:14px;color:#ffffffb3;margin:0}.share-section{display:flex;flex-direction:column;gap:12px}.section-title{font-size:14px;font-weight:600;color:#ffffffe6;margin:0;text-transform:uppercase;letter-spacing:.5px}.link-container{display:flex;gap:8px}.link-input{flex:1;padding:10px 14px;font-size:13px;font-family:monospace;color:#fffc;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:6px;outline:none}.link-input:focus{border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.copy-btn{padding:10px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease;white-space:nowrap}.copy-btn:hover{background:#ffffff26;border-color:#ffffff4d}.copy-btn.success{background:#00b4784d;border-color:#00b47880;color:#fff}.native-share-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;font-size:14px;font-weight:500;color:#ffffffe6;background:#0078d74d;border:1px solid rgba(0,120,215,.5);border-radius:8px;cursor:pointer;transition:all .2s ease}.native-share-btn:hover{background:#0078d766;border-color:#0078d799;transform:translateY(-1px)}.social-buttons{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.social-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 12px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;cursor:pointer;transition:all .2s ease}.social-btn:hover{background:#ffffff1a;border-color:#fff3;transform:translateY(-2px)}.social-btn:active{transform:translateY(0)}.social-icon{font-size:24px;font-weight:700;line-height:1}.social-label{font-size:12px;font-weight:500;color:#fffc}.social-btn.twitter{background:#1d9bf01a;border-color:#1d9bf04d}.social-btn.twitter:hover{background:#1d9bf033;border-color:#1d9bf080}.social-btn.facebook{background:#1877f21a;border-color:#1877f24d}.social-btn.facebook:hover{background:#1877f233;border-color:#1877f280}.social-btn.reddit{background:#ff45001a;border-color:#ff45004d}.social-btn.reddit:hover{background:#ff450033;border-color:#ff450080}.social-btn.email{background:#8080801a;border-color:#8080804d}.social-btn.email:hover{background:#80808033;border-color:#80808080}.qr-toggle-btn{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:6px;cursor:pointer;transition:all .2s ease}.qr-toggle-btn:hover{background:#ffffff1a;border-color:#fff3}.btn-icon{font-size:14px;line-height:1}.btn-label{line-height:1}.qr-code-container{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:8px;animation:fadeIn .2s ease}.qr-code-image{width:200px;height:200px;border-radius:8px;background:#fff;padding:8px}.qr-hint{font-size:12px;color:#fff9;margin:0}.qr-loading{padding:40px;font-size:13px;color:#ffffff80}.share-info{padding:12px 16px;background:#0078d71a;border:1px solid rgba(0,120,215,.2);border-radius:6px}.info-text{font-size:12px;line-height:1.5;color:#ffffffb3;margin:0}@media (max-width: 480px){.share-container{width:95%}.share-header{padding:16px 20px}.share-title{font-size:18px}.share-content{padding:20px;gap:20px}.social-buttons{grid-template-columns:1fr}.qr-code-image{width:180px;height:180px}}.close-btn:focus-visible,.copy-btn:focus-visible,.native-share-btn:focus-visible,.social-btn:focus-visible,.qr-toggle-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.share-overlay,.share-container,.qr-code-container,.close-btn,.copy-btn,.social-btn,.qr-toggle-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { shareUrl: [{
                 type: Input
             }], shareTitle: [{
@@ -16744,11 +16745,11 @@ class CommentsDrawerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CommentsDrawerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CommentsDrawerComponent, isStandalone: true, selector: "pw-comments-drawer", inputs: { comments: "comments", visible: "visible", loading: "loading", currentPage: "currentPage", totalPages: "totalPages", hasMore: "hasMore", isAuthenticated: "isAuthenticated" }, outputs: { postComment: "postComment", loadMore: "loadMore", likeComment: "likeComment", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, ngImport: i0, template: "@if (visible) {\n  <div class=\"drawer-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Comments\">\n      <!-- Header -->\n      <div class=\"drawer-header\">\n        <h2 class=\"drawer-title\">{{ 'comments.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'comments.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Comment Composer (Top) -->\n      @if (isAuthenticated) {\n        <div class=\"comment-composer\">\n          <textarea\n            class=\"composer-input\"\n            [placeholder]=\"'comments.write_comment' | translate\"\n            rows=\"3\"\n            [(ngModel)]=\"newCommentContent\"\n            [attr.aria-label]=\"'comments.new_comment_label' | translate\"></textarea>\n          <div class=\"composer-actions\">\n            <button\n              class=\"post-btn\"\n              type=\"button\"\n              [disabled]=\"!newCommentContent.trim()\"\n              (click)=\"submitComment()\">\n              {{ 'comments.post_comment' | translate }}\n            </button>\n          </div>\n        </div>\n      } @else {\n        <div class=\"auth-notice\">\n          <p>{{ 'comments.sign_in' | translate }}</p>\n        </div>\n      }\n\n      <!-- Comments List -->\n      <div class=\"comments-content\">\n        @if (loading && comments.length === 0) {\n          <div class=\"loading-state\">\n            <div class=\"loading-spinner\"></div>\n            <p>{{ 'comments.loading' | translate }}</p>\n          </div>\n        } @else if (comments.length === 0) {\n          <div class=\"empty-state\">\n            <span class=\"empty-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n            <p>{{ 'comments.no_comments' | translate }}</p>\n          </div>\n        } @else {\n          <div class=\"comments-list\">\n            @for (comment of comments; track comment.id) {\n              <div class=\"comment-item\">\n                <!-- Avatar -->\n                <div class=\"comment-avatar\">\n                  @if (comment.authorAvatar) {\n                    <img\n                      [src]=\"comment.authorAvatar\"\n                      [alt]=\"comment.author\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getAuthorInitials(comment.author) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Content -->\n                <div class=\"comment-content\">\n                  <div class=\"comment-header\">\n                    <span class=\"comment-author\">{{ comment.author }}</span>\n                    <span class=\"comment-timestamp\">{{ formatTimestamp(comment.timestamp) }}</span>\n                  </div>\n\n                  <p class=\"comment-text\">{{ comment.content }}</p>\n\n                  <!-- Actions -->\n                  <div class=\"comment-actions\">\n                    @if (isAuthenticated) {\n                      <button\n                        class=\"action-btn\"\n                        [class.active]=\"comment.isLiked\"\n                        type=\"button\"\n                        (click)=\"onLikeComment(comment)\">\n                        <pw-icon name=\"lucideHeart\" />\n                        @if (comment.likes && comment.likes > 0) {\n                          <span>{{ comment.likes }}</span>\n                        }\n                      </button>\n\n                      <button\n                        class=\"action-btn\"\n                        type=\"button\"\n                        (click)=\"startReply(comment)\">\n                        {{ 'comments.reply' | translate }}\n                      </button>\n                    }\n                  </div>\n\n                  <!-- Replies -->\n                  @if (comment.replies && comment.replies.length > 0) {\n                    <div class=\"comment-replies\">\n                      @for (reply of comment.replies; track reply.id) {\n                        <div class=\"reply-item\">\n                          <div class=\"comment-avatar small\">\n                            @if (reply.authorAvatar) {\n                              <img\n                                [src]=\"reply.authorAvatar\"\n                                [alt]=\"reply.author\"\n                                class=\"avatar-image\" />\n                            } @else {\n                              <div class=\"avatar-placeholder\">\n                                {{ getAuthorInitials(reply.author) }}\n                              </div>\n                            }\n                          </div>\n\n                          <div class=\"comment-content\">\n                            <div class=\"comment-header\">\n                              <span class=\"comment-author\">{{ reply.author }}</span>\n                              <span class=\"comment-timestamp\">{{ formatTimestamp(reply.timestamp) }}</span>\n                            </div>\n                            <p class=\"comment-text\">{{ reply.content }}</p>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <!-- Reply Composer -->\n                  @if (showReplyComposer && replyTarget?.id === comment.id) {\n                    <div class=\"reply-composer\">\n                      <textarea\n                        class=\"composer-input\"\n                        [placeholder]=\"'comments.write_reply' | translate\"\n                        rows=\"2\"\n                        [(ngModel)]=\"replyContent\"\n                        [attr.aria-label]=\"'comments.reply_label' | translate\"></textarea>\n                      <div class=\"composer-actions\">\n                        <button\n                          class=\"cancel-btn\"\n                          type=\"button\"\n                          (click)=\"cancelReply()\">\n                          {{ 'comments.cancel' | translate }}\n                        </button>\n                        <button\n                          class=\"post-btn\"\n                          type=\"button\"\n                          [disabled]=\"!replyContent.trim()\"\n                          (click)=\"submitReply()\">\n                          {{ 'comments.reply' | translate }}\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Load More -->\n          @if (hasMore) {\n            <div class=\"load-more\">\n              @if (loading) {\n                <div class=\"loading-spinner small\"></div>\n              } @else {\n                <button\n                  class=\"load-more-btn\"\n                  type=\"button\"\n                  (click)=\"onLoadMore()\">\n                  {{ 'comments.load_more' | translate }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"drawer-footer\">\n        <p class=\"footer-text\">\n          {{ comments.length }} {{ comments.length === 1 ? ('comments.comment_count_singular' | translate) : ('comments.comment_count_plural' | translate) }}\n          @if (totalPages > 1) {\n            <span> \u2022 {{ 'comments.page_of' | translate: {current: currentPage, total: totalPages} }}</span>\n          }\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;background:#00000080;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-container{width:90%;max-width:450px;background:#1a1a1a;box-shadow:-4px 0 16px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.drawer-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.comment-composer{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.composer-input{width:100%;padding:12px;font-size:14px;line-height:1.5;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;resize:vertical;font-family:inherit;transition:all .2s ease}.composer-input::placeholder{color:#fff6}.composer-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.composer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.post-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#fff;background:#0078d7cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.post-btn:hover:not(:disabled){background:#0078d7e6;transform:translateY(-1px)}.post-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.cancel-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#ffffff26}.auth-notice{padding:16px 24px;background:#ffa5001a;border-bottom:1px solid rgba(255,165,0,.2);flex-shrink:0}.auth-notice p{font-size:13px;color:#fffc;margin:0;text-align:center}.comments-content{flex:1;overflow-y:auto;padding:16px 24px}.comments-content::-webkit-scrollbar{width:8px}.comments-content::-webkit-scrollbar-track{background:#ffffff0d}.comments-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:24px;height:24px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:14px;color:#ffffff80;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center}.empty-icon{font-size:48px}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.comments-list{display:flex;flex-direction:column;gap:20px}.comment-item{display:flex;gap:12px}.comment-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden}.comment-avatar.small{width:32px;height:32px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.comment-avatar.small .avatar-placeholder{font-size:12px}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.comment-author{font-size:14px;font-weight:600;color:#ffffffe6}.comment-timestamp{font-size:12px;color:#ffffff80}.comment-text{font-size:14px;line-height:1.5;color:#fffc;margin:0 0 8px;word-wrap:break-word}.comment-actions{display:flex;gap:12px;margin-top:8px}.action-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;color:#fff9;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.action-btn:hover{color:#ffffffe6;background:#ffffff1a}.action-btn.active{color:#ff4d6d}.comment-replies{margin-top:12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:16px}.reply-item{display:flex;gap:10px}.reply-composer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.load-more{display:flex;justify-content:center;padding:16px 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.1)}.load-more-btn{padding:10px 20px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.load-more-btn:hover{background:#ffffff26;border-color:#ffffff4d}.drawer-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-text{font-size:12px;color:#ffffff80;margin:0;text-align:center}@media (max-width: 768px){.drawer-container{width:100%;max-width:none}.drawer-header{padding:16px 20px}.drawer-title{font-size:18px}.comment-composer,.auth-notice,.comments-content{padding:14px 20px}.comment-avatar{width:36px;height:36px}.comment-avatar.small{width:28px;height:28px}.avatar-placeholder{font-size:13px}.comment-avatar.small .avatar-placeholder{font-size:11px}}.close-btn:focus-visible,.composer-input:focus-visible,.post-btn:focus-visible,.cancel-btn:focus-visible,.action-btn:focus-visible,.load-more-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.drawer-overlay,.drawer-container,.loading-spinner,.close-btn,.post-btn,.cancel-btn,.action-btn,.load-more-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: CommentsDrawerComponent, isStandalone: true, selector: "pw-comments-drawer", inputs: { comments: "comments", visible: "visible", loading: "loading", currentPage: "currentPage", totalPages: "totalPages", hasMore: "hasMore", isAuthenticated: "isAuthenticated" }, outputs: { postComment: "postComment", loadMore: "loadMore", likeComment: "likeComment", close: "close" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, ngImport: i0, template: "@if (visible) {\n  <div class=\"drawer-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Comments\">\n      <!-- Header -->\n      <div class=\"drawer-header\">\n        <h2 class=\"drawer-title\">{{ 'comments.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'comments.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Comment Composer (Top) -->\n      @if (isAuthenticated) {\n        <div class=\"comment-composer\">\n          <textarea\n            class=\"composer-input\"\n            [placeholder]=\"'comments.write_comment' | translate\"\n            rows=\"3\"\n            [(ngModel)]=\"newCommentContent\"\n            [attr.aria-label]=\"'comments.new_comment_label' | translate\"></textarea>\n          <div class=\"composer-actions\">\n            <button\n              class=\"post-btn\"\n              type=\"button\"\n              [disabled]=\"!newCommentContent.trim()\"\n              (click)=\"submitComment()\">\n              {{ 'comments.post_comment' | translate }}\n            </button>\n          </div>\n        </div>\n      } @else {\n        <div class=\"auth-notice\">\n          <p>{{ 'comments.sign_in' | translate }}</p>\n        </div>\n      }\n\n      <!-- Comments List -->\n      <div class=\"comments-content\">\n        @if (loading && comments.length === 0) {\n          <div class=\"loading-state\">\n            <div class=\"loading-spinner\"></div>\n            <p>{{ 'comments.loading' | translate }}</p>\n          </div>\n        } @else if (comments.length === 0) {\n          <div class=\"empty-state\">\n            <span class=\"empty-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n            <p>{{ 'comments.no_comments' | translate }}</p>\n          </div>\n        } @else {\n          <div class=\"comments-list\">\n            @for (comment of comments; track comment.id) {\n              <div class=\"comment-item\">\n                <!-- Avatar -->\n                <div class=\"comment-avatar\">\n                  @if (comment.authorAvatar) {\n                    <img\n                      [src]=\"comment.authorAvatar\"\n                      [alt]=\"comment.author\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getAuthorInitials(comment.author) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Content -->\n                <div class=\"comment-content\">\n                  <div class=\"comment-header\">\n                    <span class=\"comment-author\">{{ comment.author }}</span>\n                    <span class=\"comment-timestamp\">{{ formatTimestamp(comment.timestamp) }}</span>\n                  </div>\n\n                  <p class=\"comment-text\">{{ comment.content }}</p>\n\n                  <!-- Actions -->\n                  <div class=\"comment-actions\">\n                    @if (isAuthenticated) {\n                      <button\n                        class=\"action-btn\"\n                        [class.active]=\"comment.isLiked\"\n                        type=\"button\"\n                        (click)=\"onLikeComment(comment)\">\n                        <pw-icon name=\"lucideHeart\" />\n                        @if (comment.likes && comment.likes > 0) {\n                          <span>{{ comment.likes }}</span>\n                        }\n                      </button>\n\n                      <button\n                        class=\"action-btn\"\n                        type=\"button\"\n                        (click)=\"startReply(comment)\">\n                        {{ 'comments.reply' | translate }}\n                      </button>\n                    }\n                  </div>\n\n                  <!-- Replies -->\n                  @if (comment.replies && comment.replies.length > 0) {\n                    <div class=\"comment-replies\">\n                      @for (reply of comment.replies; track reply.id) {\n                        <div class=\"reply-item\">\n                          <div class=\"comment-avatar small\">\n                            @if (reply.authorAvatar) {\n                              <img\n                                [src]=\"reply.authorAvatar\"\n                                [alt]=\"reply.author\"\n                                class=\"avatar-image\" />\n                            } @else {\n                              <div class=\"avatar-placeholder\">\n                                {{ getAuthorInitials(reply.author) }}\n                              </div>\n                            }\n                          </div>\n\n                          <div class=\"comment-content\">\n                            <div class=\"comment-header\">\n                              <span class=\"comment-author\">{{ reply.author }}</span>\n                              <span class=\"comment-timestamp\">{{ formatTimestamp(reply.timestamp) }}</span>\n                            </div>\n                            <p class=\"comment-text\">{{ reply.content }}</p>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <!-- Reply Composer -->\n                  @if (showReplyComposer && replyTarget?.id === comment.id) {\n                    <div class=\"reply-composer\">\n                      <textarea\n                        class=\"composer-input\"\n                        [placeholder]=\"'comments.write_reply' | translate\"\n                        rows=\"2\"\n                        [(ngModel)]=\"replyContent\"\n                        [attr.aria-label]=\"'comments.reply_label' | translate\"></textarea>\n                      <div class=\"composer-actions\">\n                        <button\n                          class=\"cancel-btn\"\n                          type=\"button\"\n                          (click)=\"cancelReply()\">\n                          {{ 'comments.cancel' | translate }}\n                        </button>\n                        <button\n                          class=\"post-btn\"\n                          type=\"button\"\n                          [disabled]=\"!replyContent.trim()\"\n                          (click)=\"submitReply()\">\n                          {{ 'comments.reply' | translate }}\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Load More -->\n          @if (hasMore) {\n            <div class=\"load-more\">\n              @if (loading) {\n                <div class=\"loading-spinner small\"></div>\n              } @else {\n                <button\n                  class=\"load-more-btn\"\n                  type=\"button\"\n                  (click)=\"onLoadMore()\">\n                  {{ 'comments.load_more' | translate }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"drawer-footer\">\n        <p class=\"footer-text\">\n          {{ comments.length }} {{ comments.length === 1 ? ('comments.comment_count_singular' | translate) : ('comments.comment_count_plural' | translate) }}\n          @if (totalPages > 1) {\n            <span> \u2022 {{ 'comments.page_of' | translate: {current: currentPage, total: totalPages} }}</span>\n          }\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;background:#00000080;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-container{width:90%;max-width:450px;background:#1a1a1a;box-shadow:-4px 0 16px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.drawer-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.comment-composer{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.composer-input{width:100%;padding:12px;font-size:14px;line-height:1.5;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;resize:vertical;font-family:inherit;transition:all .2s ease}.composer-input::placeholder{color:#fff6}.composer-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.composer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.post-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#fff;background:#0078d7cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.post-btn:hover:not(:disabled){background:#0078d7e6;transform:translateY(-1px)}.post-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.cancel-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#ffffff26}.auth-notice{padding:16px 24px;background:#ffa5001a;border-bottom:1px solid rgba(255,165,0,.2);flex-shrink:0}.auth-notice p{font-size:13px;color:#fffc;margin:0;text-align:center}.comments-content{flex:1;overflow-y:auto;padding:16px 24px}.comments-content::-webkit-scrollbar{width:8px}.comments-content::-webkit-scrollbar-track{background:#ffffff0d}.comments-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:24px;height:24px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:14px;color:#ffffff80;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center}.empty-icon{font-size:48px}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.comments-list{display:flex;flex-direction:column;gap:20px}.comment-item{display:flex;gap:12px}.comment-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden}.comment-avatar.small{width:32px;height:32px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.comment-avatar.small .avatar-placeholder{font-size:12px}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.comment-author{font-size:14px;font-weight:600;color:#ffffffe6}.comment-timestamp{font-size:12px;color:#ffffff80}.comment-text{font-size:14px;line-height:1.5;color:#fffc;margin:0 0 8px;word-wrap:break-word}.comment-actions{display:flex;gap:12px;margin-top:8px}.action-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;color:#fff9;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.action-btn:hover{color:#ffffffe6;background:#ffffff1a}.action-btn.active{color:#ff4d6d}.comment-replies{margin-top:12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:16px}.reply-item{display:flex;gap:10px}.reply-composer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.load-more{display:flex;justify-content:center;padding:16px 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.1)}.load-more-btn{padding:10px 20px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.load-more-btn:hover{background:#ffffff26;border-color:#ffffff4d}.drawer-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-text{font-size:12px;color:#ffffff80;margin:0;text-align:center}@media (max-width: 768px){.drawer-container{width:100%;max-width:none}.drawer-header{padding:16px 20px}.drawer-title{font-size:18px}.comment-composer,.auth-notice,.comments-content{padding:14px 20px}.comment-avatar{width:36px;height:36px}.comment-avatar.small{width:28px;height:28px}.avatar-placeholder{font-size:13px}.comment-avatar.small .avatar-placeholder{font-size:11px}}.close-btn:focus-visible,.composer-input:focus-visible,.post-btn:focus-visible,.cancel-btn:focus-visible,.action-btn:focus-visible,.load-more-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.drawer-overlay,.drawer-container,.loading-spinner,.close-btn,.post-btn,.cancel-btn,.action-btn,.load-more-btn{animation:none;transition:none}}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: CommentsDrawerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-comments-drawer', imports: [FormsModule, TranslateModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"drawer-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Comments\">\n      <!-- Header -->\n      <div class=\"drawer-header\">\n        <h2 class=\"drawer-title\">{{ 'comments.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'comments.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Comment Composer (Top) -->\n      @if (isAuthenticated) {\n        <div class=\"comment-composer\">\n          <textarea\n            class=\"composer-input\"\n            [placeholder]=\"'comments.write_comment' | translate\"\n            rows=\"3\"\n            [(ngModel)]=\"newCommentContent\"\n            [attr.aria-label]=\"'comments.new_comment_label' | translate\"></textarea>\n          <div class=\"composer-actions\">\n            <button\n              class=\"post-btn\"\n              type=\"button\"\n              [disabled]=\"!newCommentContent.trim()\"\n              (click)=\"submitComment()\">\n              {{ 'comments.post_comment' | translate }}\n            </button>\n          </div>\n        </div>\n      } @else {\n        <div class=\"auth-notice\">\n          <p>{{ 'comments.sign_in' | translate }}</p>\n        </div>\n      }\n\n      <!-- Comments List -->\n      <div class=\"comments-content\">\n        @if (loading && comments.length === 0) {\n          <div class=\"loading-state\">\n            <div class=\"loading-spinner\"></div>\n            <p>{{ 'comments.loading' | translate }}</p>\n          </div>\n        } @else if (comments.length === 0) {\n          <div class=\"empty-state\">\n            <span class=\"empty-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n            <p>{{ 'comments.no_comments' | translate }}</p>\n          </div>\n        } @else {\n          <div class=\"comments-list\">\n            @for (comment of comments; track comment.id) {\n              <div class=\"comment-item\">\n                <!-- Avatar -->\n                <div class=\"comment-avatar\">\n                  @if (comment.authorAvatar) {\n                    <img\n                      [src]=\"comment.authorAvatar\"\n                      [alt]=\"comment.author\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getAuthorInitials(comment.author) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Content -->\n                <div class=\"comment-content\">\n                  <div class=\"comment-header\">\n                    <span class=\"comment-author\">{{ comment.author }}</span>\n                    <span class=\"comment-timestamp\">{{ formatTimestamp(comment.timestamp) }}</span>\n                  </div>\n\n                  <p class=\"comment-text\">{{ comment.content }}</p>\n\n                  <!-- Actions -->\n                  <div class=\"comment-actions\">\n                    @if (isAuthenticated) {\n                      <button\n                        class=\"action-btn\"\n                        [class.active]=\"comment.isLiked\"\n                        type=\"button\"\n                        (click)=\"onLikeComment(comment)\">\n                        <pw-icon name=\"lucideHeart\" />\n                        @if (comment.likes && comment.likes > 0) {\n                          <span>{{ comment.likes }}</span>\n                        }\n                      </button>\n\n                      <button\n                        class=\"action-btn\"\n                        type=\"button\"\n                        (click)=\"startReply(comment)\">\n                        {{ 'comments.reply' | translate }}\n                      </button>\n                    }\n                  </div>\n\n                  <!-- Replies -->\n                  @if (comment.replies && comment.replies.length > 0) {\n                    <div class=\"comment-replies\">\n                      @for (reply of comment.replies; track reply.id) {\n                        <div class=\"reply-item\">\n                          <div class=\"comment-avatar small\">\n                            @if (reply.authorAvatar) {\n                              <img\n                                [src]=\"reply.authorAvatar\"\n                                [alt]=\"reply.author\"\n                                class=\"avatar-image\" />\n                            } @else {\n                              <div class=\"avatar-placeholder\">\n                                {{ getAuthorInitials(reply.author) }}\n                              </div>\n                            }\n                          </div>\n\n                          <div class=\"comment-content\">\n                            <div class=\"comment-header\">\n                              <span class=\"comment-author\">{{ reply.author }}</span>\n                              <span class=\"comment-timestamp\">{{ formatTimestamp(reply.timestamp) }}</span>\n                            </div>\n                            <p class=\"comment-text\">{{ reply.content }}</p>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <!-- Reply Composer -->\n                  @if (showReplyComposer && replyTarget?.id === comment.id) {\n                    <div class=\"reply-composer\">\n                      <textarea\n                        class=\"composer-input\"\n                        [placeholder]=\"'comments.write_reply' | translate\"\n                        rows=\"2\"\n                        [(ngModel)]=\"replyContent\"\n                        [attr.aria-label]=\"'comments.reply_label' | translate\"></textarea>\n                      <div class=\"composer-actions\">\n                        <button\n                          class=\"cancel-btn\"\n                          type=\"button\"\n                          (click)=\"cancelReply()\">\n                          {{ 'comments.cancel' | translate }}\n                        </button>\n                        <button\n                          class=\"post-btn\"\n                          type=\"button\"\n                          [disabled]=\"!replyContent.trim()\"\n                          (click)=\"submitReply()\">\n                          {{ 'comments.reply' | translate }}\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Load More -->\n          @if (hasMore) {\n            <div class=\"load-more\">\n              @if (loading) {\n                <div class=\"loading-spinner small\"></div>\n              } @else {\n                <button\n                  class=\"load-more-btn\"\n                  type=\"button\"\n                  (click)=\"onLoadMore()\">\n                  {{ 'comments.load_more' | translate }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"drawer-footer\">\n        <p class=\"footer-text\">\n          {{ comments.length }} {{ comments.length === 1 ? ('comments.comment_count_singular' | translate) : ('comments.comment_count_plural' | translate) }}\n          @if (totalPages > 1) {\n            <span> \u2022 {{ 'comments.page_of' | translate: {current: currentPage, total: totalPages} }}</span>\n          }\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;background:#00000080;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-container{width:90%;max-width:450px;background:#1a1a1a;box-shadow:-4px 0 16px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.drawer-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.comment-composer{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.composer-input{width:100%;padding:12px;font-size:14px;line-height:1.5;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;resize:vertical;font-family:inherit;transition:all .2s ease}.composer-input::placeholder{color:#fff6}.composer-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.composer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.post-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#fff;background:#0078d7cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.post-btn:hover:not(:disabled){background:#0078d7e6;transform:translateY(-1px)}.post-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.cancel-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#ffffff26}.auth-notice{padding:16px 24px;background:#ffa5001a;border-bottom:1px solid rgba(255,165,0,.2);flex-shrink:0}.auth-notice p{font-size:13px;color:#fffc;margin:0;text-align:center}.comments-content{flex:1;overflow-y:auto;padding:16px 24px}.comments-content::-webkit-scrollbar{width:8px}.comments-content::-webkit-scrollbar-track{background:#ffffff0d}.comments-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:24px;height:24px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:14px;color:#ffffff80;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center}.empty-icon{font-size:48px}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.comments-list{display:flex;flex-direction:column;gap:20px}.comment-item{display:flex;gap:12px}.comment-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden}.comment-avatar.small{width:32px;height:32px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.comment-avatar.small .avatar-placeholder{font-size:12px}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.comment-author{font-size:14px;font-weight:600;color:#ffffffe6}.comment-timestamp{font-size:12px;color:#ffffff80}.comment-text{font-size:14px;line-height:1.5;color:#fffc;margin:0 0 8px;word-wrap:break-word}.comment-actions{display:flex;gap:12px;margin-top:8px}.action-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;color:#fff9;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.action-btn:hover{color:#ffffffe6;background:#ffffff1a}.action-btn.active{color:#ff4d6d}.comment-replies{margin-top:12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:16px}.reply-item{display:flex;gap:10px}.reply-composer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.load-more{display:flex;justify-content:center;padding:16px 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.1)}.load-more-btn{padding:10px 20px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.load-more-btn:hover{background:#ffffff26;border-color:#ffffff4d}.drawer-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-text{font-size:12px;color:#ffffff80;margin:0;text-align:center}@media (max-width: 768px){.drawer-container{width:100%;max-width:none}.drawer-header{padding:16px 20px}.drawer-title{font-size:18px}.comment-composer,.auth-notice,.comments-content{padding:14px 20px}.comment-avatar{width:36px;height:36px}.comment-avatar.small{width:28px;height:28px}.avatar-placeholder{font-size:13px}.comment-avatar.small .avatar-placeholder{font-size:11px}}.close-btn:focus-visible,.composer-input:focus-visible,.post-btn:focus-visible,.cancel-btn:focus-visible,.action-btn:focus-visible,.load-more-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.drawer-overlay,.drawer-container,.loading-spinner,.close-btn,.post-btn,.cancel-btn,.action-btn,.load-more-btn{animation:none;transition:none}}\n"] }]
+            args: [{ selector: 'pw-comments-drawer', imports: [FormsModule, TranslatePipe, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div class=\"drawer-overlay\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown)=\"onBackdropKeydown($event)\">\n    <div class=\"drawer-container\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Comments\">\n      <!-- Header -->\n      <div class=\"drawer-header\">\n        <h2 class=\"drawer-title\">{{ 'comments.title' | translate }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"'comments.close' | translate\"\n          (click)=\"onClose()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <!-- Comment Composer (Top) -->\n      @if (isAuthenticated) {\n        <div class=\"comment-composer\">\n          <textarea\n            class=\"composer-input\"\n            [placeholder]=\"'comments.write_comment' | translate\"\n            rows=\"3\"\n            [(ngModel)]=\"newCommentContent\"\n            [attr.aria-label]=\"'comments.new_comment_label' | translate\"></textarea>\n          <div class=\"composer-actions\">\n            <button\n              class=\"post-btn\"\n              type=\"button\"\n              [disabled]=\"!newCommentContent.trim()\"\n              (click)=\"submitComment()\">\n              {{ 'comments.post_comment' | translate }}\n            </button>\n          </div>\n        </div>\n      } @else {\n        <div class=\"auth-notice\">\n          <p>{{ 'comments.sign_in' | translate }}</p>\n        </div>\n      }\n\n      <!-- Comments List -->\n      <div class=\"comments-content\">\n        @if (loading && comments.length === 0) {\n          <div class=\"loading-state\">\n            <div class=\"loading-spinner\"></div>\n            <p>{{ 'comments.loading' | translate }}</p>\n          </div>\n        } @else if (comments.length === 0) {\n          <div class=\"empty-state\">\n            <span class=\"empty-icon\"><pw-icon name=\"lucideMessageCircle\" /></span>\n            <p>{{ 'comments.no_comments' | translate }}</p>\n          </div>\n        } @else {\n          <div class=\"comments-list\">\n            @for (comment of comments; track comment.id) {\n              <div class=\"comment-item\">\n                <!-- Avatar -->\n                <div class=\"comment-avatar\">\n                  @if (comment.authorAvatar) {\n                    <img\n                      [src]=\"comment.authorAvatar\"\n                      [alt]=\"comment.author\"\n                      class=\"avatar-image\" />\n                  } @else {\n                    <div class=\"avatar-placeholder\">\n                      {{ getAuthorInitials(comment.author) }}\n                    </div>\n                  }\n                </div>\n\n                <!-- Content -->\n                <div class=\"comment-content\">\n                  <div class=\"comment-header\">\n                    <span class=\"comment-author\">{{ comment.author }}</span>\n                    <span class=\"comment-timestamp\">{{ formatTimestamp(comment.timestamp) }}</span>\n                  </div>\n\n                  <p class=\"comment-text\">{{ comment.content }}</p>\n\n                  <!-- Actions -->\n                  <div class=\"comment-actions\">\n                    @if (isAuthenticated) {\n                      <button\n                        class=\"action-btn\"\n                        [class.active]=\"comment.isLiked\"\n                        type=\"button\"\n                        (click)=\"onLikeComment(comment)\">\n                        <pw-icon name=\"lucideHeart\" />\n                        @if (comment.likes && comment.likes > 0) {\n                          <span>{{ comment.likes }}</span>\n                        }\n                      </button>\n\n                      <button\n                        class=\"action-btn\"\n                        type=\"button\"\n                        (click)=\"startReply(comment)\">\n                        {{ 'comments.reply' | translate }}\n                      </button>\n                    }\n                  </div>\n\n                  <!-- Replies -->\n                  @if (comment.replies && comment.replies.length > 0) {\n                    <div class=\"comment-replies\">\n                      @for (reply of comment.replies; track reply.id) {\n                        <div class=\"reply-item\">\n                          <div class=\"comment-avatar small\">\n                            @if (reply.authorAvatar) {\n                              <img\n                                [src]=\"reply.authorAvatar\"\n                                [alt]=\"reply.author\"\n                                class=\"avatar-image\" />\n                            } @else {\n                              <div class=\"avatar-placeholder\">\n                                {{ getAuthorInitials(reply.author) }}\n                              </div>\n                            }\n                          </div>\n\n                          <div class=\"comment-content\">\n                            <div class=\"comment-header\">\n                              <span class=\"comment-author\">{{ reply.author }}</span>\n                              <span class=\"comment-timestamp\">{{ formatTimestamp(reply.timestamp) }}</span>\n                            </div>\n                            <p class=\"comment-text\">{{ reply.content }}</p>\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  }\n\n                  <!-- Reply Composer -->\n                  @if (showReplyComposer && replyTarget?.id === comment.id) {\n                    <div class=\"reply-composer\">\n                      <textarea\n                        class=\"composer-input\"\n                        [placeholder]=\"'comments.write_reply' | translate\"\n                        rows=\"2\"\n                        [(ngModel)]=\"replyContent\"\n                        [attr.aria-label]=\"'comments.reply_label' | translate\"></textarea>\n                      <div class=\"composer-actions\">\n                        <button\n                          class=\"cancel-btn\"\n                          type=\"button\"\n                          (click)=\"cancelReply()\">\n                          {{ 'comments.cancel' | translate }}\n                        </button>\n                        <button\n                          class=\"post-btn\"\n                          type=\"button\"\n                          [disabled]=\"!replyContent.trim()\"\n                          (click)=\"submitReply()\">\n                          {{ 'comments.reply' | translate }}\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Load More -->\n          @if (hasMore) {\n            <div class=\"load-more\">\n              @if (loading) {\n                <div class=\"loading-spinner small\"></div>\n              } @else {\n                <button\n                  class=\"load-more-btn\"\n                  type=\"button\"\n                  (click)=\"onLoadMore()\">\n                  {{ 'comments.load_more' | translate }}\n                </button>\n              }\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"drawer-footer\">\n        <p class=\"footer-text\">\n          {{ comments.length }} {{ comments.length === 1 ? ('comments.comment_count_singular' | translate) : ('comments.comment_count_plural' | translate) }}\n          @if (totalPages > 1) {\n            <span> \u2022 {{ 'comments.page_of' | translate: {current: currentPage, total: totalPages} }}</span>\n          }\n        </p>\n      </div>\n    </div>\n  </div>\n}\n", styles: [".drawer-overlay{position:fixed;inset:0;z-index:200;display:flex;align-items:stretch;justify-content:flex-end;background:#00000080;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.drawer-container{width:90%;max-width:450px;background:#1a1a1a;box-shadow:-4px 0 16px #0000004d;display:flex;flex-direction:column;overflow:hidden;animation:slideInRight .3s cubic-bezier(.4,0,.2,1)}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.drawer-title{font-size:20px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:20px;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.close-btn:hover{background:#ffffff1a;color:#fff}.comment-composer{padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}.composer-input{width:100%;padding:12px;font-size:14px;line-height:1.5;color:#fff;background:#ffffff0d;border:1px solid rgba(255,255,255,.2);border-radius:8px;outline:none;resize:vertical;font-family:inherit;transition:all .2s ease}.composer-input::placeholder{color:#fff6}.composer-input:focus{background:#ffffff14;border-color:#0078d7cc;box-shadow:0 0 0 3px #0078d733}.composer-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}.post-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#fff;background:#0078d7cc;border:none;border-radius:6px;cursor:pointer;transition:all .2s ease}.post-btn:hover:not(:disabled){background:#0078d7e6;transform:translateY(-1px)}.post-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.cancel-btn{padding:8px 16px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.cancel-btn:hover{background:#ffffff26}.auth-notice{padding:16px 24px;background:#ffa5001a;border-bottom:1px solid rgba(255,165,0,.2);flex-shrink:0}.auth-notice p{font-size:13px;color:#fffc;margin:0;text-align:center}.comments-content{flex:1;overflow-y:auto;padding:16px 24px}.comments-content::-webkit-scrollbar{width:8px}.comments-content::-webkit-scrollbar-track{background:#ffffff0d}.comments-content::-webkit-scrollbar-thumb{background:#fff3;border-radius:4px}.loading-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px}.loading-spinner{width:40px;height:40px;border:3px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner.small{width:24px;height:24px;border-width:2px}@keyframes spin{to{transform:rotate(360deg)}}.loading-state p{font-size:14px;color:#ffffff80;margin:0}.empty-state{display:flex;flex-direction:column;align-items:center;gap:16px;padding:60px 20px;text-align:center}.empty-icon{font-size:48px}.empty-state p{font-size:14px;color:#ffffff80;margin:0}.comments-list{display:flex;flex-direction:column;gap:20px}.comment-item{display:flex;gap:12px}.comment-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;overflow:hidden}.comment-avatar.small{width:32px;height:32px}.avatar-image{width:100%;height:100%;object-fit:cover;display:block}.avatar-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#ffffffe6;background:linear-gradient(135deg,#0078d74d,#00b4784d)}.comment-avatar.small .avatar-placeholder{font-size:12px}.comment-content{flex:1;min-width:0}.comment-header{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}.comment-author{font-size:14px;font-weight:600;color:#ffffffe6}.comment-timestamp{font-size:12px;color:#ffffff80}.comment-text{font-size:14px;line-height:1.5;color:#fffc;margin:0 0 8px;word-wrap:break-word}.comment-actions{display:flex;gap:12px;margin-top:8px}.action-btn{display:flex;align-items:center;gap:4px;padding:4px 8px;font-size:12px;font-weight:500;color:#fff9;background:transparent;border:none;border-radius:4px;cursor:pointer;transition:all .2s ease}.action-btn:hover{color:#ffffffe6;background:#ffffff1a}.action-btn.active{color:#ff4d6d}.comment-replies{margin-top:12px;padding-left:12px;border-left:2px solid rgba(255,255,255,.1);display:flex;flex-direction:column;gap:16px}.reply-item{display:flex;gap:10px}.reply-composer{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1)}.load-more{display:flex;justify-content:center;padding:16px 0;margin-top:16px;border-top:1px solid rgba(255,255,255,.1)}.load-more-btn{padding:10px 20px;font-size:13px;font-weight:500;color:#ffffffe6;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:6px;cursor:pointer;transition:all .2s ease}.load-more-btn:hover{background:#ffffff26;border-color:#ffffff4d}.drawer-footer{padding:12px 24px;border-top:1px solid rgba(255,255,255,.1);flex-shrink:0}.footer-text{font-size:12px;color:#ffffff80;margin:0;text-align:center}@media (max-width: 768px){.drawer-container{width:100%;max-width:none}.drawer-header{padding:16px 20px}.drawer-title{font-size:18px}.comment-composer,.auth-notice,.comments-content{padding:14px 20px}.comment-avatar{width:36px;height:36px}.comment-avatar.small{width:28px;height:28px}.avatar-placeholder{font-size:13px}.comment-avatar.small .avatar-placeholder{font-size:11px}}.close-btn:focus-visible,.composer-input:focus-visible,.post-btn:focus-visible,.cancel-btn:focus-visible,.action-btn:focus-visible,.load-more-btn:focus-visible{outline:2px solid rgba(0,120,215,.8);outline-offset:2px}@media (prefers-reduced-motion: reduce){.drawer-overlay,.drawer-container,.loading-spinner,.close-btn,.post-btn,.cancel-btn,.action-btn,.load-more-btn{animation:none;transition:none}}\n"] }]
         }], propDecorators: { comments: [{
                 type: Input
             }], visible: [{
@@ -16859,7 +16860,8 @@ class PlayerShellComponent {
          */
         this.ready = new EventEmitter();
         /**
-         * Panel changed
+         * The current panel changed. Carries the panel's id (`panelId`, its key in
+         * `chapter.panels`) and the id of the panel before it (`previousPanelId`).
          */
         this.panelChange = new EventEmitter();
         /**
@@ -17159,6 +17161,7 @@ class PlayerShellComponent {
         this.endAnalyticsSession();
         this.analyticsSessionStarted = this.analyticsSessionEnded = this.workCompleteTracked = false;
         this.lastTrackedPanelId = undefined;
+        this.lastPanelChangeId = undefined;
         this.closePaywall();
         this.closeAgeGate();
         this.tocVisible = this.settingsVisible = this.languageModalVisible = this.charactersVisible = false;
@@ -17470,9 +17473,7 @@ class PlayerShellComponent {
      * one-time `work_complete` signal.
      */
     trackPanelView(panel, chapter) {
-        // Panels don't carry their own id — resolve it from the chapter's map
-        // (same identity lookup as getCurrentPanelId).
-        const panelId = Object.entries(chapter.panels ?? {}).find(([, p]) => p === panel)?.[0];
+        const panelId = this.panelIdOf(panel, chapter);
         if (!panelId || panelId === this.lastTrackedPanelId) {
             return;
         }
@@ -17490,6 +17491,14 @@ class PlayerShellComponent {
             });
         }
     }
+    /**
+     * A panel's id: its key in `chapter.panels`. Panels don't reliably carry
+     * their own id (`Panel.id` is optional in the format), so resolve it by
+     * identity, as getCurrentPanelId() does.
+     */
+    panelIdOf(panel, chapter) {
+        return Object.entries(chapter.panels ?? {}).find(([, p]) => p === panel)?.[0];
+    }
     /** An end panel (no outgoing edges) of the manifest's last chapter. */
     isEndOfWork(panelId, chapter) {
         const chapters = this.manifestService.getManifest()?.chapters ?? [];
@@ -17533,7 +17542,16 @@ class PlayerShellComponent {
                 // Resolve variants before emitting so consumers (and the
                 // tracked event) see the effective panel state.
                 this.refreshResolvedPanels();
-                this.panelChange.emit({ panel, chapter: this.currentChapter });
+                // Panels are keyed by id in chapter.panels; the lookup always hits
+                // for a panel the shell navigated to ('' only guards the type).
+                const panelId = this.panelIdOf(panel, this.currentChapter) ?? '';
+                this.panelChange.emit({
+                    panel,
+                    chapter: this.currentChapter,
+                    panelId,
+                    previousPanelId: this.lastPanelChangeId,
+                });
+                this.lastPanelChangeId = panelId || undefined;
                 this.trackPanelView(panel, this.currentChapter);
             }
         });
@@ -19116,12 +19134,12 @@ class PlayerShellComponent {
         await this.navigateToPanel(chapter.id, choice.edge.to, choice.edge.transition ?? this.flowEngine.getDefaultTransition(settings), choice.edge.cameraMove ?? this.flowEngine.getDefaultCameraMove(settings), choice.edge.action);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PlayerShellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: PlayerShellComponent, isStandalone: true, selector: "pw-player-shell", inputs: { manifest: "manifest", manifestUrl: "manifestUrl", entitlementAdapter: "entitlementAdapter", entitlementSnapshot: "entitlementSnapshot", entitlementEndpoint: "entitlementEndpoint", readerToken: "readerToken", initialVariables: "initialVariables", locale: "locale", initialChapterId: "initialChapterId", initialPanelId: "initialPanelId", autoplay: "autoplay", secondsPerPanel: "secondsPerPanel", reducedMotion: "reducedMotion", showToolbar: "showToolbar", viewModeOverride: "viewModeOverride" }, outputs: { paywallAction: "paywallAction", ageVerified: "ageVerified", likeChange: "likeChange", bookmarkChange: "bookmarkChange", ready: "ready", panelChange: "panelChange", chapterChange: "chapterChange", error: "error", localeChange: "localeChange", variableChange: "variableChange", navigationAttempt: "navigationAttempt", cameraChange: "cameraChange" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, providers: [CanvasCameraService], usesOnChanges: true, ngImport: i0, template: "<div class=\"player-shell\" [class.has-error]=\"hasError\">\n  <!-- Loading state -->\n  @if (loading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\"></div>\n      <p class=\"loading-text\">{{ 'loading.text' | translate }}</p>\n    </div>\n  }\n\n  <!-- Error state -->\n  @if (hasError && !loading) {\n    <div class=\"error-container\">\n      <div class=\"error-icon\"><pw-icon name=\"lucideTriangleAlert\" /></div>\n      <h2 class=\"error-title\">{{ 'error.title' | translate }}</h2>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button class=\"retry-button\" type=\"button\" (click)=\"reload()\">\n        {{ 'error.retry' | translate }}\n      </button>\n    </div>\n  }\n\n  <!-- Main player -->\n  @if (!loading && !hasError && currentPanel) {\n    <div class=\"player-content\">\n      <!-- Viewport (panel / page view) -->\n      @if (viewMode !== 'canvas') {\n        <pw-viewport\n          [transition]=\"viewportTransition\"\n          [panel]=\"effectivePanel || currentPanel\"\n          [page]=\"currentPage || null\"\n          [panels]=\"resolvedPanels\"\n          [graph]=\"currentChapter?.graph || null\"\n          [currentPanelId]=\"getCurrentPanelId() || null\"\n          [viewMode]=\"viewMode\"\n          [reducedMotion]=\"motionReduced\"\n          [locale]=\"locale\"\n          [interactive]=\"true\"\n          [showOverflowArrows]=\"true\"\n          [speechEnabled]=\"speechEnabled\"\n          [preload]=\"manifestPreloadSettings\"\n          [variableContext]=\"variableContext\"\n          (viewportClick)=\"onViewportClick()\"\n          (swipe)=\"onSwipe($event)\"\n          (navigatePrevious)=\"navigatePrevious()\"\n          (navigateNext)=\"navigateNext()\"\n          (hotspotActivate)=\"onHotspotActivate($event)\"\n          (deadClick)=\"onDeadClick($event)\">\n        </pw-viewport>\n      }\n\n      <!-- Canvas stage (infinite-canvas view, schema 1.4) -->\n      @if (viewMode === 'canvas') {\n        <pw-canvas-stage\n          [canvas]=\"currentChapter?.canvas || null\"\n          [panels]=\"resolvedPanels\"\n          [graph]=\"currentChapter?.graph || null\"\n          [currentPanelId]=\"getCurrentPanelId() || null\"\n          [visitedPanelIds]=\"visitedPanelIds\"\n          [locale]=\"locale\"\n          [variableContext]=\"variableContext\"\n          [speechEnabled]=\"speechEnabled\"\n          [workBalloonConfig]=\"manifestBalloonConfig\"\n          [characters]=\"manifestCharacters\"\n          [reducedMotion]=\"motionReduced\"\n          [interactive]=\"true\"\n          [preload]=\"manifestPreloadSettings\"\n          (panelTap)=\"onCanvasPanelTap($event)\"\n          (navigateNext)=\"navigateNext()\"\n          (navigatePrevious)=\"navigatePrevious()\"\n          (viewportClick)=\"onViewportClick()\"\n          (hotspotActivate)=\"onHotspotActivate($event)\"\n          (cameraChange)=\"cameraChange.emit($event)\">\n        </pw-canvas-stage>\n      }\n\n      <!-- Full Toolbar -->\n      <pw-toolbar\n        [visible]=\"toolbarVisible\"\n        [locale]=\"locale\"\n        [availableLocales]=\"availableLocales\"\n        [viewMode]=\"viewMode\"\n        [pageViewAvailable]=\"pageViewAvailable\"\n        [speechEnabled]=\"speechEnabled\"\n        [audioEnabled]=\"audioEnabled\"\n        [sfxEnabled]=\"sfxEnabled\"\n        [autoplayEnabled]=\"autoplayEnabled\"\n        [autoplayProgress]=\"autoplayProgress\"\n        [secondsPerPanel]=\"secondsPerPanel\"\n        [thumbnailsVisible]=\"thumbnailsVisible\"\n        [hasAlternatives]=\"!!(currentPanel && currentPanel.variants && currentPanel.variants.length)\"\n        [hasBranches]=\"hasBranchesAhead\"\n        [showSocial]=\"true\"\n        [liked]=\"liked\"\n        [bookmarked]=\"bookmarked\"\n        (toggleView)=\"onToggleView()\"\n        (localeChange)=\"onLocaleChange($event)\"\n        (toggleSpeech)=\"onToggleSpeech()\"\n        (toggleAudio)=\"onToggleAudio()\"\n        (toggleSfx)=\"onToggleSfx()\"\n        (toggleAutoplay)=\"onToggleAutoplay()\"\n        (secondsPerPanelChange)=\"onSecondsPerPanelChange($event)\"\n        (toggleThumbnails)=\"onToggleThumbnails()\"\n        (openToc)=\"onOpenToc()\"\n        (openSettings)=\"onOpenSettings()\"\n        (openLanguage)=\"languageModalVisible = true\"\n        (openCharacters)=\"onOpenCharacters()\"\n        (cycleAlternative)=\"onCycleAlternative()\"\n        (showBranches)=\"onShowBranches()\"\n        (openExtras)=\"onOpenExtras()\"\n        (like)=\"onLike()\"\n        (bookmark)=\"onBookmark()\"\n        (share)=\"onShare()\"\n        (openComments)=\"onOpenComments()\"\n        (close)=\"toggleToolbar()\">\n      </pw-toolbar>\n\n      <!-- Thumbnail Strip -->\n      <pw-thumbnail-strip\n        [visible]=\"thumbnailsVisible\"\n        [chapters]=\"loadedManifest?.chapters || []\"\n        [currentChapterId]=\"currentChapter?.id\"\n        [currentPanelId]=\"getCurrentPanelId()\"\n        [baseUrl]=\"''\"\n        [lockedPanels]=\"[]\"\n        (navigate)=\"onThumbnailNavigate($event)\"\n        (close)=\"onThumbnailsClose()\">\n      </pw-thumbnail-strip>\n\n      <!-- Active variant indicator -->\n      @if (activeVariantId) {\n        <div class=\"variant-active\" role=\"status\" aria-live=\"polite\"\n             [attr.aria-label]=\"'Active panel variant: ' + activeVariantId\">\n          {{ activeVariantId }}\n        </div>\n      }\n\n      <!-- PanelWave floating icon -->\n      @if (!toolbarVisible) {\n        <button \n          class=\"floating-icon\"\n          type=\"button\"\n          aria-label=\"Show toolbar\"\n          (click)=\"toggleToolbar()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>\n          </svg>\n        </button>\n      }\n\n      <!-- Modals -->\n      @if (paywallVisible && paywallGate) {\n        <pw-paywall-overlay\n          [visible]=\"paywallVisible\"\n          [gate]=\"paywallGate\"\n          [purchaseOptions]=\"paywallGate.options || []\"\n          [locale]=\"locale\"\n          (purchase)=\"paywallProductId = $event\"\n          (action)=\"onPaywallAction($event)\"\n          (close)=\"closePaywall()\">\n        </pw-paywall-overlay>\n      }\n\n      @if (ageGateVisible) {\n        <pw-age-gate\n          [visible]=\"ageGateVisible\"\n          [minimumAge]=\"ageGateMinimumAge\"\n          [locale]=\"locale\"\n          [allowDismiss]=\"true\"\n          (verify)=\"onAgeGateVerify($event)\"\n          (close)=\"closeAgeGate()\">\n        </pw-age-gate>\n      }\n\n      @if (branchChooserVisible) {\n        <pw-branch-chooser\n          [visible]=\"branchChooserVisible\"\n          [locale]=\"locale\"\n          [choices]=\"branchChoices\"\n          (choose)=\"onBranchChosen($event)\"\n          (close)=\"branchChooserVisible = false\">\n        </pw-branch-chooser>\n      }\n\n      @if (tocVisible) {\n        <pw-toc-overlay\n          [visible]=\"tocVisible\"\n          [manifest]=\"loadedManifest\"\n          [currentChapterId]=\"currentChapter?.id\"\n          [currentPanelId]=\"getCurrentPanelId()\"\n          [locale]=\"locale\"\n          [baseUrl]=\"''\"\n          (navigate)=\"onTocNavigate($event)\"\n          (close)=\"tocVisible = false\">\n        </pw-toc-overlay>\n      }\n\n      @if (settingsVisible) {\n        <pw-settings-modal\n          [visible]=\"settingsVisible\"\n          [variables]=\"variableDefinitions\"\n          [variableValues]=\"settingsVariableValues\"\n          [availableLocales]=\"availableLocales\"\n          [locale]=\"locale\"\n          [preferences]=\"settingsPreferences\"\n          (preferencesChange)=\"onPreferencesChange($event)\"\n          (variableChange)=\"onSettingsVariableChange($event)\"\n          (close)=\"settingsVisible = false\">\n        </pw-settings-modal>\n      }\n\n      @if (languageModalVisible) {\n        <pw-language-modal\n          [visible]=\"languageModalVisible\"\n          [currentLocale]=\"locale\"\n          [availableLocales]=\"availableLocales\"\n          (localeSelected)=\"onLocaleChange($event)\"\n          (closeModal)=\"languageModalVisible = false\">\n        </pw-language-modal>\n      }\n\n      @if (charactersVisible) {\n        <pw-character-roster\n          [visible]=\"charactersVisible\"\n          [characters]=\"characters\"\n          [locale]=\"locale\"\n          [baseUrl]=\"''\"\n          (close)=\"charactersVisible = false\">\n        </pw-character-roster>\n      }\n\n      @if (extrasVisible) {\n        <pw-extras-viewer\n          [visible]=\"extrasVisible\"\n          [extras]=\"extrasList\"\n          [initialExtraId]=\"extrasInitialId\"\n          [locale]=\"locale\"\n          (close)=\"extrasVisible = false; extrasInitialId = undefined\">\n        </pw-extras-viewer>\n      }\n\n      @if (actionModalVisible) {\n        <pw-action-modal\n          [visible]=\"actionModalVisible\"\n          [locale]=\"locale\"\n          [title]=\"actionModalTitle\"\n          [content]=\"actionModalContent\"\n          (close)=\"actionModalVisible = false\">\n        </pw-action-modal>\n      }\n\n      @if (shareVisible) {\n        <pw-share-modal\n          [visible]=\"shareVisible\"\n          [shareable]=\"currentPanel.shareable ?? true\"\n          (close)=\"shareVisible = false\">\n        </pw-share-modal>\n      }\n\n      @if (commentsVisible) {\n        <pw-comments-drawer\n          [visible]=\"commentsVisible\"\n          (close)=\"commentsVisible = false\">\n        </pw-comments-drawer>\n      }\n    </div>\n  }\n</div>\n", styles: [".player-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#000;color:#fff}.player-shell.has-error{background:#1a1a1a}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:#ffffffb3;margin:0}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;text-align:center;gap:16px}.error-icon{font-size:64px;line-height:1}.error-title{font-size:24px;font-weight:600;margin:0;color:#fff}.error-message{font-size:16px;color:#ffffffb3;margin:0;max-width:500px}.retry-button{margin-top:16px;padding:12px 24px;font-size:16px;font-weight:500;color:#fff;background:#0078d7;border:none;border-radius:4px;cursor:pointer;transition:background .2s ease}.retry-button:hover{background:#005a9e}.retry-button:active{background:#004578}.player-content{position:relative;width:100%;height:100%}.toolbar-container{position:absolute;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:24px 16px 16px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;justify-content:center;align-items:center;gap:12px;max-width:1200px;margin:0 auto}.toolbar-button{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toolbar-button:hover{background:#fff3;border-color:#ffffff4d}.toolbar-button:active{background:#ffffff26;transform:scale(.98)}.button-icon{font-size:18px;line-height:1}.button-label{font-size:14px}.variant-active{position:absolute;bottom:20px;left:20px;z-index:50;padding:4px 10px;font-size:12px;font-weight:600;color:#fff;background:#0078d7d9;border-radius:12px;box-shadow:0 2px 8px #0000004d;pointer-events:none}.floating-icon{position:absolute;bottom:20px;right:20px;z-index:50;width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;background:#0078d7e6;border:none;border-radius:50%;box-shadow:0 4px 12px #0000004d;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.floating-icon:hover{background:#0078d7;transform:scale(1.1);box-shadow:0 6px 16px #0006}.floating-icon:active{transform:scale(1.05)}.floating-icon svg{width:24px;height:24px}@media (max-width: 768px){.toolbar-container{padding:16px 12px 12px}.toolbar{gap:8px}.toolbar-button{padding:8px 12px;font-size:12px}.button-label{display:none}.button-icon{font-size:16px}.floating-icon{width:48px;height:48px;bottom:16px;right:16px}.floating-icon svg{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){.toolbar-container{animation:none}.loading-spinner{animation:none;border-top-color:#ffffff4d}.toolbar-button:active,.floating-icon:hover{transform:none}}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ViewportComponent, selector: "pw-viewport", inputs: ["panel", "page", "panels", "viewMode", "currentPanelId", "locale", "variableContext", "panX", "panY", "zoom", "reducedMotion", "transition", "interactive", "showOverflowArrows", "enableViewportCulling", "enableLazyLoading", "workBalloonConfig", "characters", "speechEnabled", "graph", "preload"], outputs: ["viewportClick", "performanceMetrics", "transformChange", "layerClick", "swipe", "navigatePrevious", "navigateNext", "panelFocus", "hotspotActivate", "deadClick"] }, { kind: "component", type: CanvasStageComponent, selector: "pw-canvas-stage", inputs: ["canvas", "panels", "graph", "currentPanelId", "visitedPanelIds", "locale", "variableContext", "speechEnabled", "workBalloonConfig", "characters", "reducedMotion", "interactive", "preload"], outputs: ["panelTap", "navigateNext", "navigatePrevious", "viewportClick", "hotspotActivate", "cameraChange"] }, { kind: "component", type: ToolbarComponent, selector: "pw-toolbar", inputs: ["locale", "availableLocales", "viewMode", "pageViewAvailable", "speechEnabled", "audioEnabled", "sfxEnabled", "autoplayEnabled", "secondsPerPanel", "autoplayProgress", "thumbnailsVisible", "hasAlternatives", "hasBranches", "liked", "bookmarked", "showSocial", "visible"], outputs: ["toggleView", "localeChange", "toggleSpeech", "toggleAudio", "toggleSfx", "toggleAutoplay", "secondsPerPanelChange", "toggleThumbnails", "openToc", "openSettings", "openCharacters", "cycleAlternative", "showBranches", "openExtras", "like", "bookmark", "share", "openComments", "close", "openLanguage"] }, { kind: "component", type: ThumbnailStripComponent, selector: "pw-thumbnail-strip", inputs: ["chapters", "currentChapterId", "currentPanelId", "baseUrl", "visible", "lockedPanels"], outputs: ["navigate", "close"] }, { kind: "component", type: TocOverlayComponent, selector: "pw-toc-overlay", inputs: ["manifest", "chapters", "currentChapterId", "currentPanelId", "locale", "baseUrl", "visible"], outputs: ["navigate", "close"] }, { kind: "component", type: PaywallOverlayComponent, selector: "pw-paywall-overlay", inputs: ["visible", "gate", "purchaseOptions", "locale", "title", "message", "allowPreview", "showLogin"], outputs: ["action", "purchase", "close"] }, { kind: "component", type: SettingsModalComponent, selector: "pw-settings-modal", inputs: ["preferences", "availableLocales", "locale", "variables", "variableValues", "visible"], outputs: ["preferencesChange", "localeChange", "variableChange", "close"] }, { kind: "component", type: LanguageModalComponent, selector: "pw-language-modal", inputs: ["visible", "currentLocale", "availableLocales"], outputs: ["closeModal", "localeSelected"] }, { kind: "component", type: CharacterRosterComponent, selector: "pw-character-roster", inputs: ["characters", "locale", "baseUrl", "visible"], outputs: ["characterSelect", "close"] }, { kind: "component", type: ExtrasViewerComponent, selector: "pw-extras-viewer", inputs: ["extras", "initialExtraId", "locale", "baseUrl", "visible", "hasPremiumAccess"], outputs: ["purchase", "close"] }, { kind: "component", type: ActionModalComponent, selector: "pw-action-modal", inputs: ["visible", "locale", "title", "content"], outputs: ["close"] }, { kind: "component", type: AgeGateComponent, selector: "pw-age-gate", inputs: ["visible", "minimumAge", "locale", "warningMessage", "allowDismiss"], outputs: ["verify", "close"] }, { kind: "component", type: BranchChooserComponent, selector: "pw-branch-chooser", inputs: ["visible", "locale", "choices"], outputs: ["choose", "close"] }, { kind: "component", type: ShareModalComponent, selector: "pw-share-modal", inputs: ["shareUrl", "shareTitle", "shareDescription", "visible", "shareable"], outputs: ["close", "share"] }, { kind: "component", type: CommentsDrawerComponent, selector: "pw-comments-drawer", inputs: ["comments", "visible", "loading", "currentPage", "totalPages", "hasMore", "isAuthenticated"], outputs: ["postComment", "loadMore", "likeComment", "close"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: PlayerShellComponent, isStandalone: true, selector: "pw-player-shell", inputs: { manifest: "manifest", manifestUrl: "manifestUrl", entitlementAdapter: "entitlementAdapter", entitlementSnapshot: "entitlementSnapshot", entitlementEndpoint: "entitlementEndpoint", readerToken: "readerToken", initialVariables: "initialVariables", locale: "locale", initialChapterId: "initialChapterId", initialPanelId: "initialPanelId", autoplay: "autoplay", secondsPerPanel: "secondsPerPanel", reducedMotion: "reducedMotion", showToolbar: "showToolbar", viewModeOverride: "viewModeOverride" }, outputs: { paywallAction: "paywallAction", ageVerified: "ageVerified", likeChange: "likeChange", bookmarkChange: "bookmarkChange", ready: "ready", panelChange: "panelChange", chapterChange: "chapterChange", error: "error", localeChange: "localeChange", variableChange: "variableChange", navigationAttempt: "navigationAttempt", cameraChange: "cameraChange" }, host: { listeners: { "window:keydown": "handleKeyboard($event)" } }, providers: [CanvasCameraService], usesOnChanges: true, ngImport: i0, template: "<div class=\"player-shell\" [class.has-error]=\"hasError\">\n  <!-- Loading state -->\n  @if (loading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-spinner\"></div>\n      <p class=\"loading-text\">{{ 'loading.text' | translate }}</p>\n    </div>\n  }\n\n  <!-- Error state -->\n  @if (hasError && !loading) {\n    <div class=\"error-container\">\n      <div class=\"error-icon\"><pw-icon name=\"lucideTriangleAlert\" /></div>\n      <h2 class=\"error-title\">{{ 'error.title' | translate }}</h2>\n      <p class=\"error-message\">{{ errorMessage }}</p>\n      <button class=\"retry-button\" type=\"button\" (click)=\"reload()\">\n        {{ 'error.retry' | translate }}\n      </button>\n    </div>\n  }\n\n  <!-- Main player -->\n  @if (!loading && !hasError && currentPanel) {\n    <div class=\"player-content\">\n      <!-- Viewport (panel / page view) -->\n      @if (viewMode !== 'canvas') {\n        <pw-viewport\n          [transition]=\"viewportTransition\"\n          [panel]=\"effectivePanel || currentPanel\"\n          [page]=\"currentPage || null\"\n          [panels]=\"resolvedPanels\"\n          [graph]=\"currentChapter?.graph || null\"\n          [currentPanelId]=\"getCurrentPanelId() || null\"\n          [viewMode]=\"viewMode\"\n          [reducedMotion]=\"motionReduced\"\n          [locale]=\"locale\"\n          [interactive]=\"true\"\n          [showOverflowArrows]=\"true\"\n          [speechEnabled]=\"speechEnabled\"\n          [preload]=\"manifestPreloadSettings\"\n          [variableContext]=\"variableContext\"\n          (viewportClick)=\"onViewportClick()\"\n          (swipe)=\"onSwipe($event)\"\n          (navigatePrevious)=\"navigatePrevious()\"\n          (navigateNext)=\"navigateNext()\"\n          (hotspotActivate)=\"onHotspotActivate($event)\"\n          (deadClick)=\"onDeadClick($event)\">\n        </pw-viewport>\n      }\n\n      <!-- Canvas stage (infinite-canvas view, schema 1.4) -->\n      @if (viewMode === 'canvas') {\n        <pw-canvas-stage\n          [canvas]=\"currentChapter?.canvas || null\"\n          [panels]=\"resolvedPanels\"\n          [graph]=\"currentChapter?.graph || null\"\n          [currentPanelId]=\"getCurrentPanelId() || null\"\n          [visitedPanelIds]=\"visitedPanelIds\"\n          [locale]=\"locale\"\n          [variableContext]=\"variableContext\"\n          [speechEnabled]=\"speechEnabled\"\n          [workBalloonConfig]=\"manifestBalloonConfig\"\n          [characters]=\"manifestCharacters\"\n          [reducedMotion]=\"motionReduced\"\n          [interactive]=\"true\"\n          [preload]=\"manifestPreloadSettings\"\n          (panelTap)=\"onCanvasPanelTap($event)\"\n          (navigateNext)=\"navigateNext()\"\n          (navigatePrevious)=\"navigatePrevious()\"\n          (viewportClick)=\"onViewportClick()\"\n          (hotspotActivate)=\"onHotspotActivate($event)\"\n          (cameraChange)=\"cameraChange.emit($event)\">\n        </pw-canvas-stage>\n      }\n\n      <!-- Full Toolbar -->\n      <pw-toolbar\n        [visible]=\"toolbarVisible\"\n        [locale]=\"locale\"\n        [availableLocales]=\"availableLocales\"\n        [viewMode]=\"viewMode\"\n        [pageViewAvailable]=\"pageViewAvailable\"\n        [speechEnabled]=\"speechEnabled\"\n        [audioEnabled]=\"audioEnabled\"\n        [sfxEnabled]=\"sfxEnabled\"\n        [autoplayEnabled]=\"autoplayEnabled\"\n        [autoplayProgress]=\"autoplayProgress\"\n        [secondsPerPanel]=\"secondsPerPanel\"\n        [thumbnailsVisible]=\"thumbnailsVisible\"\n        [hasAlternatives]=\"!!(currentPanel && currentPanel.variants && currentPanel.variants.length)\"\n        [hasBranches]=\"hasBranchesAhead\"\n        [showSocial]=\"true\"\n        [liked]=\"liked\"\n        [bookmarked]=\"bookmarked\"\n        (toggleView)=\"onToggleView()\"\n        (localeChange)=\"onLocaleChange($event)\"\n        (toggleSpeech)=\"onToggleSpeech()\"\n        (toggleAudio)=\"onToggleAudio()\"\n        (toggleSfx)=\"onToggleSfx()\"\n        (toggleAutoplay)=\"onToggleAutoplay()\"\n        (secondsPerPanelChange)=\"onSecondsPerPanelChange($event)\"\n        (toggleThumbnails)=\"onToggleThumbnails()\"\n        (openToc)=\"onOpenToc()\"\n        (openSettings)=\"onOpenSettings()\"\n        (openLanguage)=\"languageModalVisible = true\"\n        (openCharacters)=\"onOpenCharacters()\"\n        (cycleAlternative)=\"onCycleAlternative()\"\n        (showBranches)=\"onShowBranches()\"\n        (openExtras)=\"onOpenExtras()\"\n        (like)=\"onLike()\"\n        (bookmark)=\"onBookmark()\"\n        (share)=\"onShare()\"\n        (openComments)=\"onOpenComments()\"\n        (close)=\"toggleToolbar()\">\n      </pw-toolbar>\n\n      <!-- Thumbnail Strip -->\n      <pw-thumbnail-strip\n        [visible]=\"thumbnailsVisible\"\n        [chapters]=\"loadedManifest?.chapters || []\"\n        [currentChapterId]=\"currentChapter?.id\"\n        [currentPanelId]=\"getCurrentPanelId()\"\n        [baseUrl]=\"''\"\n        [lockedPanels]=\"[]\"\n        (navigate)=\"onThumbnailNavigate($event)\"\n        (close)=\"onThumbnailsClose()\">\n      </pw-thumbnail-strip>\n\n      <!-- Active variant indicator -->\n      @if (activeVariantId) {\n        <div class=\"variant-active\" role=\"status\" aria-live=\"polite\"\n             [attr.aria-label]=\"'Active panel variant: ' + activeVariantId\">\n          {{ activeVariantId }}\n        </div>\n      }\n\n      <!-- PanelWave floating icon -->\n      @if (!toolbarVisible) {\n        <button \n          class=\"floating-icon\"\n          type=\"button\"\n          aria-label=\"Show toolbar\"\n          (click)=\"toggleToolbar()\">\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n            <path d=\"M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z\"/>\n          </svg>\n        </button>\n      }\n\n      <!-- Modals -->\n      @if (paywallVisible && paywallGate) {\n        <pw-paywall-overlay\n          [visible]=\"paywallVisible\"\n          [gate]=\"paywallGate\"\n          [purchaseOptions]=\"paywallGate.options || []\"\n          [locale]=\"locale\"\n          (purchase)=\"paywallProductId = $event\"\n          (action)=\"onPaywallAction($event)\"\n          (close)=\"closePaywall()\">\n        </pw-paywall-overlay>\n      }\n\n      @if (ageGateVisible) {\n        <pw-age-gate\n          [visible]=\"ageGateVisible\"\n          [minimumAge]=\"ageGateMinimumAge\"\n          [locale]=\"locale\"\n          [allowDismiss]=\"true\"\n          (verify)=\"onAgeGateVerify($event)\"\n          (close)=\"closeAgeGate()\">\n        </pw-age-gate>\n      }\n\n      @if (branchChooserVisible) {\n        <pw-branch-chooser\n          [visible]=\"branchChooserVisible\"\n          [locale]=\"locale\"\n          [choices]=\"branchChoices\"\n          (choose)=\"onBranchChosen($event)\"\n          (close)=\"branchChooserVisible = false\">\n        </pw-branch-chooser>\n      }\n\n      @if (tocVisible) {\n        <pw-toc-overlay\n          [visible]=\"tocVisible\"\n          [manifest]=\"loadedManifest\"\n          [currentChapterId]=\"currentChapter?.id\"\n          [currentPanelId]=\"getCurrentPanelId()\"\n          [locale]=\"locale\"\n          [baseUrl]=\"''\"\n          (navigate)=\"onTocNavigate($event)\"\n          (close)=\"tocVisible = false\">\n        </pw-toc-overlay>\n      }\n\n      @if (settingsVisible) {\n        <pw-settings-modal\n          [visible]=\"settingsVisible\"\n          [variables]=\"variableDefinitions\"\n          [variableValues]=\"settingsVariableValues\"\n          [availableLocales]=\"availableLocales\"\n          [locale]=\"locale\"\n          [preferences]=\"settingsPreferences\"\n          (preferencesChange)=\"onPreferencesChange($event)\"\n          (variableChange)=\"onSettingsVariableChange($event)\"\n          (close)=\"settingsVisible = false\">\n        </pw-settings-modal>\n      }\n\n      @if (languageModalVisible) {\n        <pw-language-modal\n          [visible]=\"languageModalVisible\"\n          [currentLocale]=\"locale\"\n          [availableLocales]=\"availableLocales\"\n          (localeSelected)=\"onLocaleChange($event)\"\n          (closeModal)=\"languageModalVisible = false\">\n        </pw-language-modal>\n      }\n\n      @if (charactersVisible) {\n        <pw-character-roster\n          [visible]=\"charactersVisible\"\n          [characters]=\"characters\"\n          [locale]=\"locale\"\n          [baseUrl]=\"''\"\n          (close)=\"charactersVisible = false\">\n        </pw-character-roster>\n      }\n\n      @if (extrasVisible) {\n        <pw-extras-viewer\n          [visible]=\"extrasVisible\"\n          [extras]=\"extrasList\"\n          [initialExtraId]=\"extrasInitialId\"\n          [locale]=\"locale\"\n          (close)=\"extrasVisible = false; extrasInitialId = undefined\">\n        </pw-extras-viewer>\n      }\n\n      @if (actionModalVisible) {\n        <pw-action-modal\n          [visible]=\"actionModalVisible\"\n          [locale]=\"locale\"\n          [title]=\"actionModalTitle\"\n          [content]=\"actionModalContent\"\n          (close)=\"actionModalVisible = false\">\n        </pw-action-modal>\n      }\n\n      @if (shareVisible) {\n        <pw-share-modal\n          [visible]=\"shareVisible\"\n          [shareable]=\"currentPanel.shareable ?? true\"\n          (close)=\"shareVisible = false\">\n        </pw-share-modal>\n      }\n\n      @if (commentsVisible) {\n        <pw-comments-drawer\n          [visible]=\"commentsVisible\"\n          (close)=\"commentsVisible = false\">\n        </pw-comments-drawer>\n      }\n    </div>\n  }\n</div>\n", styles: [".player-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#000;color:#fff}.player-shell.has-error{background:#1a1a1a}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.loading-spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.1);border-top-color:#fff;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:16px;color:#ffffffb3;margin:0}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:24px;text-align:center;gap:16px}.error-icon{font-size:64px;line-height:1}.error-title{font-size:24px;font-weight:600;margin:0;color:#fff}.error-message{font-size:16px;color:#ffffffb3;margin:0;max-width:500px}.retry-button{margin-top:16px;padding:12px 24px;font-size:16px;font-weight:500;color:#fff;background:#0078d7;border:none;border-radius:4px;cursor:pointer;transition:background .2s ease}.retry-button:hover{background:#005a9e}.retry-button:active{background:#004578}.player-content{position:relative;width:100%;height:100%}.toolbar-container{position:absolute;bottom:0;left:0;right:0;z-index:100;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);padding:24px 16px 16px;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(100%);opacity:0}to{transform:translateY(0);opacity:1}}.toolbar{display:flex;justify-content:center;align-items:center;gap:12px;max-width:1200px;margin:0 auto}.toolbar-button{display:flex;align-items:center;gap:8px;padding:10px 16px;font-size:14px;font-weight:500;color:#fff;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:4px;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.toolbar-button:hover{background:#fff3;border-color:#ffffff4d}.toolbar-button:active{background:#ffffff26;transform:scale(.98)}.button-icon{font-size:18px;line-height:1}.button-label{font-size:14px}.variant-active{position:absolute;bottom:20px;left:20px;z-index:50;padding:4px 10px;font-size:12px;font-weight:600;color:#fff;background:#0078d7d9;border-radius:12px;box-shadow:0 2px 8px #0000004d;pointer-events:none}.floating-icon{position:absolute;bottom:20px;right:20px;z-index:50;width:56px;height:56px;display:flex;align-items:center;justify-content:center;color:#fff;background:#0078d7e6;border:none;border-radius:50%;box-shadow:0 4px 12px #0000004d;cursor:pointer;transition:all .2s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.floating-icon:hover{background:#0078d7;transform:scale(1.1);box-shadow:0 6px 16px #0006}.floating-icon:active{transform:scale(1.05)}.floating-icon svg{width:24px;height:24px}@media (max-width: 768px){.toolbar-container{padding:16px 12px 12px}.toolbar{gap:8px}.toolbar-button{padding:8px 12px;font-size:12px}.button-label{display:none}.button-icon{font-size:16px}.floating-icon{width:48px;height:48px;bottom:16px;right:16px}.floating-icon svg{width:20px;height:20px}}@media (prefers-reduced-motion: reduce){.toolbar-container{animation:none}.loading-spinner{animation:none;border-top-color:#ffffff4d}.toolbar-button:active,.floating-icon:hover{transform:none}}\n"], dependencies: [{ kind: "component", type: ViewportComponent, selector: "pw-viewport", inputs: ["panel", "page", "panels", "viewMode", "currentPanelId", "locale", "variableContext", "panX", "panY", "zoom", "reducedMotion", "transition", "interactive", "showOverflowArrows", "enableViewportCulling", "enableLazyLoading", "workBalloonConfig", "characters", "speechEnabled", "graph", "preload"], outputs: ["viewportClick", "performanceMetrics", "transformChange", "layerClick", "swipe", "navigatePrevious", "navigateNext", "panelFocus", "hotspotActivate", "deadClick"] }, { kind: "component", type: CanvasStageComponent, selector: "pw-canvas-stage", inputs: ["canvas", "panels", "graph", "currentPanelId", "visitedPanelIds", "locale", "variableContext", "speechEnabled", "workBalloonConfig", "characters", "reducedMotion", "interactive", "preload"], outputs: ["panelTap", "navigateNext", "navigatePrevious", "viewportClick", "hotspotActivate", "cameraChange"] }, { kind: "component", type: ToolbarComponent, selector: "pw-toolbar", inputs: ["locale", "availableLocales", "viewMode", "pageViewAvailable", "speechEnabled", "audioEnabled", "sfxEnabled", "autoplayEnabled", "secondsPerPanel", "autoplayProgress", "thumbnailsVisible", "hasAlternatives", "hasBranches", "liked", "bookmarked", "showSocial", "visible"], outputs: ["toggleView", "localeChange", "toggleSpeech", "toggleAudio", "toggleSfx", "toggleAutoplay", "secondsPerPanelChange", "toggleThumbnails", "openToc", "openSettings", "openCharacters", "cycleAlternative", "showBranches", "openExtras", "like", "bookmark", "share", "openComments", "close", "openLanguage"] }, { kind: "component", type: ThumbnailStripComponent, selector: "pw-thumbnail-strip", inputs: ["chapters", "currentChapterId", "currentPanelId", "baseUrl", "visible", "lockedPanels"], outputs: ["navigate", "close"] }, { kind: "component", type: TocOverlayComponent, selector: "pw-toc-overlay", inputs: ["manifest", "chapters", "currentChapterId", "currentPanelId", "locale", "baseUrl", "visible"], outputs: ["navigate", "close"] }, { kind: "component", type: PaywallOverlayComponent, selector: "pw-paywall-overlay", inputs: ["visible", "gate", "purchaseOptions", "locale", "title", "message", "allowPreview", "showLogin"], outputs: ["action", "purchase", "close"] }, { kind: "component", type: SettingsModalComponent, selector: "pw-settings-modal", inputs: ["preferences", "availableLocales", "locale", "variables", "variableValues", "visible"], outputs: ["preferencesChange", "localeChange", "variableChange", "close"] }, { kind: "component", type: LanguageModalComponent, selector: "pw-language-modal", inputs: ["visible", "currentLocale", "availableLocales"], outputs: ["closeModal", "localeSelected"] }, { kind: "component", type: CharacterRosterComponent, selector: "pw-character-roster", inputs: ["characters", "locale", "baseUrl", "visible"], outputs: ["characterSelect", "close"] }, { kind: "component", type: ExtrasViewerComponent, selector: "pw-extras-viewer", inputs: ["extras", "initialExtraId", "locale", "baseUrl", "visible", "hasPremiumAccess"], outputs: ["purchase", "close"] }, { kind: "component", type: ActionModalComponent, selector: "pw-action-modal", inputs: ["visible", "locale", "title", "content"], outputs: ["close"] }, { kind: "component", type: AgeGateComponent, selector: "pw-age-gate", inputs: ["visible", "minimumAge", "locale", "warningMessage", "allowDismiss"], outputs: ["verify", "close"] }, { kind: "component", type: BranchChooserComponent, selector: "pw-branch-chooser", inputs: ["visible", "locale", "choices"], outputs: ["choose", "close"] }, { kind: "component", type: ShareModalComponent, selector: "pw-share-modal", inputs: ["shareUrl", "shareTitle", "shareDescription", "visible", "shareable"], outputs: ["close", "share"] }, { kind: "component", type: CommentsDrawerComponent, selector: "pw-comments-drawer", inputs: ["comments", "visible", "loading", "currentPage", "totalPages", "hasMore", "isAuthenticated"], outputs: ["postComment", "loadMore", "likeComment", "close"] }, { kind: "component", type: PwIconComponent, selector: "pw-icon", inputs: ["name"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PlayerShellComponent, decorators: [{
             type: Component,
             args: [{ selector: 'pw-player-shell', providers: [CanvasCameraService], imports: [
-                        TranslateModule,
+                        TranslatePipe,
                         ViewportComponent,
                         CanvasStageComponent,
                         ToolbarComponent,