@panelwave/player 1.0.1 → 1.1.0

package/fesm2022/panelwave-player.mjs

@@ -7053,12 +7053,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  *   free preview.
  * - Panel-scoped rules gate exactly their `targetPanelIds` — preview does NOT
  *   override an explicit panel gate.
+ * - Chapter-scoped rules gate only the panels of their chapter(s) (`refId`);
+ *   their free preview counts panels WITHIN that chapter. They take
+ *   precedence over a work gate for those panels.
+ * - Extras-scoped rules never gate panels — they gate the extras block named
+ *   by `refId` (see `isExtraLocked`).
  * - A gated panel unlocks when the gating rule's requirement is satisfied by
  *   the reader's entitlement snapshot.
  */
 const DEFAULT_MINIMUM_AGE = 18;
-/** Does the reader's snapshot satisfy this rule's requirement? */
+/** Does the rule carry an age requirement the reader has not met? */
+function ageMissing(rule, entitlement) {
+    if (rule.entitlementType !== 'age_gate' && rule.minimumAge === undefined)
+        return false;
+    const min = rule.minimumAge ?? DEFAULT_MINIMUM_AGE;
+    return !(entitlement.ageVerified && (entitlement.age ?? 0) >= min);
+}
+/**
+ * Does the reader's snapshot satisfy this rule's requirement? A rule with a
+ * `minimumAge` needs the age AND its entitlement.
+ */
 function satisfiesRule(rule, entitlement) {
+    return !ageMissing(rule, entitlement) && hasEntitlement(rule, entitlement);
+}
+/** The entitlement part of a rule (the age part is `ageMissing`). */
+function hasEntitlement(rule, entitlement) {
     switch (rule.entitlementType) {
         case 'free':
             return true;
@@ -7074,13 +7093,17 @@ function satisfiesRule(rule, entitlement) {
                 return entitlement.purchasedProductIds.length > 0;
             return required.some((id) => entitlement.purchasedProductIds.includes(id));
         }
-        case 'age_gate': {
-            const min = rule.minimumAge ?? DEFAULT_MINIMUM_AGE;
-            return entitlement.ageVerified && (entitlement.age ?? 0) >= min;
-        }
+        case 'age_gate':
+            return true; // the age is the whole requirement (checked by ageMissing)
     }
 }
-function lockReasonFor(rule) {
+/**
+ * Why a rule locks the reader out. The age comes first: a reader who fails
+ * the age check is asked for it before being offered anything to buy.
+ */
+function lockReasonFor(rule, entitlement) {
+    if (ageMissing(rule, entitlement))
+        return 'age_verification_required';
     switch (rule.entitlementType) {
         case 'subscription':
             return 'subscription_required';
@@ -7108,36 +7131,48 @@ function evaluatePanelAccess(rules, entitlement, panel) {
         return {
             panelId: panel.id,
             locked: !ok,
-            reason: ok ? null : lockReasonFor(panelRule),
+            reason: ok ? null : lockReasonFor(panelRule, entitlement),
             appliedRuleId: panelRule.id,
             preview: false,
         };
     }
-    // 2. Work/global gate with free preview.
+    // 2. Chapter gates: only the panels of the named chapter, with the free
+    // preview counted within that chapter.
+    const chapterRule = panel.chapterId === undefined
+        ? undefined
+        : active.find((r) => r.scope === 'chapter' && (r.targetIds ?? []).includes(panel.chapterId));
+    if (chapterRule) {
+        return gateWithPreview(chapterRule, entitlement, panel.id, panel.chapterIndex ?? Number.MAX_SAFE_INTEGER);
+    }
+    // 3. Work/global gate with free preview.
     const workRule = findWorkGateRule(active);
     if (workRule) {
-        const previewCount = workRule.previewPanelCount ?? 0;
-        if (panel.index < previewCount) {
-            return {
-                panelId: panel.id,
-                locked: false,
-                reason: null,
-                appliedRuleId: workRule.id,
-                preview: true,
-            };
-        }
-        const ok = satisfiesRule(workRule, entitlement);
-        return {
-            panelId: panel.id,
-            locked: !ok,
-            reason: ok ? null : lockReasonFor(workRule),
-            appliedRuleId: workRule.id,
-            preview: false,
-        };
+        return gateWithPreview(workRule, entitlement, panel.id, panel.index);
     }
-    // 3. No gate at all — free content.
+    // 4. No gate at all — free content.
     return { panelId: panel.id, locked: false, reason: null, appliedRuleId: null, preview: false };
 }
+/** A work/chapter gate: panels before `previewPanelCount` (by `index`) are free. */
+function gateWithPreview(rule, entitlement, panelId, index) {
+    if (index < (rule.previewPanelCount ?? 0)) {
+        return { panelId, locked: false, reason: null, appliedRuleId: rule.id, preview: true };
+    }
+    const ok = satisfiesRule(rule, entitlement);
+    return {
+        panelId,
+        locked: !ok,
+        reason: ok ? null : lockReasonFor(rule, entitlement),
+        appliedRuleId: rule.id,
+        preview: false,
+    };
+}
+/** Is the extras block `extraId` locked by an extras-scoped rule? */
+function isExtraLocked(rules, entitlement, extraId) {
+    return rules.some((r) => r.isActive &&
+        r.scope === 'extras' &&
+        (r.targetIds ?? []).includes(extraId) &&
+        !satisfiesRule(r, entitlement));
+}
 /** Evaluate a whole work (panels in reading order). */
 function evaluateWorkAccess(rules, entitlement, panels) {
     return panels.map((panel) => evaluatePanelAccess(rules, entitlement, panel));
@@ -7164,8 +7199,10 @@ const KNOWN_ENTITLEMENT_TYPES = [
  * `minimumAge` written by the CMS exporter. Prefer the CMS names and fall
  * back to the originals, so a manifest from either era gates identically.
  *
- * A rule with `minimumAge`/`ageGate` but no recognised entitlement type is an
- * age gate — that is the only sane reading of a rule that names an age.
+ * `ageGate` / `minimumAge` is an age check ON TOP OF the entitlement (schema
+ * semantics). Only a rule that declares no entitlement at all but names an
+ * age becomes a pure age gate; a custom marker plus an age stays a purchase
+ * (or subscription) gate that also requires the age.
  */
 function fromManifestRule(rule, index) {
     const raw = rule;
@@ -7175,9 +7212,6 @@ function fromManifestRule(rule, index) {
     if (declared && KNOWN_ENTITLEMENT_TYPES.includes(declared)) {
         entitlementType = declared;
     }
-    else if (minimumAge !== undefined) {
-        entitlementType = 'age_gate';
-    }
     else if (declared === 'premium') {
         // Original format's subscription marker.
         entitlementType = 'subscription';
@@ -7186,10 +7220,17 @@ function fromManifestRule(rule, index) {
         // 'token', 'purchaseId', or any custom marker: treat as a purchase gate.
         entitlementType = 'purchase';
     }
+    else if (minimumAge !== undefined) {
+        // No entitlement declared, only an age: a pure age gate.
+        entitlementType = 'age_gate';
+    }
     else {
         entitlementType = 'free';
     }
-    const scope = raw['scope'] === 'extras' ? 'work' : raw['scope'];
+    // Extras-scoped rules keep their scope: they gate an extras block, never
+    // panels (mapping them onto 'work' used to lock the whole work).
+    const scope = raw['scope'];
+    const refId = raw['refId'];
     return {
         id: raw['id'] ?? `rule-${index}`,
         scope: scope ?? 'work',
@@ -7203,9 +7244,12 @@ function fromManifestRule(rule, index) {
         targetPanelIds: raw['targetPanelIds'] ??
             // A panel-scoped rule from the original format names its single target
             // in refId rather than a list.
-            (raw['scope'] === 'panel' && raw['refId']
-                ? [raw['refId']]
-                : undefined),
+            (scope === 'panel' && refId ? [refId] : undefined),
+        targetIds: (scope === 'chapter' || scope === 'extras') && refId ? [refId] : undefined,
+        name: raw['name'],
+        description: raw['description'],
+        price: raw['price'],
+        entitlementKey: raw['requireEntitlement'],
     };
 }
 /** Normalise every rule in a manifest. Returns [] when the work has no paywall. */
@@ -7215,6 +7259,14 @@ function rulesFromManifest(manifest) {
         return [];
     return rules.map(fromManifestRule);
 }
+/** Chapter id and within-chapter index per panel id (chapter-rule previews). */
+function chapterOrderFromManifest(manifest) {
+    const out = new Map();
+    for (const chapter of manifest?.chapters ?? []) {
+        Object.keys(chapter.panels ?? {}).forEach((panelId, chapterIndex) => out.set(panelId, { chapterId: chapter.id, chapterIndex }));
+    }
+    return out;
+}
 /**
  * Global reading order for preview counting: chapters in array order, and
  * within a chapter the panel declaration order.
@@ -7267,7 +7319,9 @@ class PaywallService {
     constructor() {
         this.rules = [];
         this.readingOrder = new Map();
+        this.chapterOrder = new Map();
         this.manifest = null;
+        this.products = new Map();
         this.snapshotSubject = new BehaviorSubject(ANONYMOUS_READER);
         this.snapshot$ = this.snapshotSubject.asObservable();
     }
@@ -7276,6 +7330,17 @@ class PaywallService {
         this.manifest = manifest;
         this.rules = rulesFromManifest(manifest);
         this.readingOrder = new Map(readingOrderFromManifest(manifest).map((panelId, index) => [panelId, index]));
+        this.chapterOrder = chapterOrderFromManifest(manifest);
+        this.products = PaywallService.productsFromManifest(manifest);
+    }
+    /** `paywall.products` by id (format 1.6); the first entry wins on duplicate ids. */
+    static productsFromManifest(manifest) {
+        const out = new Map();
+        for (const product of manifest?.paywall?.products ?? []) {
+            if (product?.id && !out.has(product.id))
+                out.set(product.id, product);
+        }
+        return out;
     }
     /** Replace what the reader owns (after sign-in, or a completed purchase). */
     setSnapshot(snapshot) {
@@ -7304,7 +7369,15 @@ class PaywallService {
             return { panelId, locked: false, reason: null, appliedRuleId: null, preview: false };
         }
         const index = this.readingOrder.get(panelId) ?? Number.MAX_SAFE_INTEGER;
-        return evaluatePanelAccess(this.rules, this.snapshotSubject.value, { id: panelId, index });
+        return evaluatePanelAccess(this.rules, this.snapshotSubject.value, {
+            id: panelId,
+            index,
+            ...this.chapterOrder.get(panelId),
+        });
+    }
+    /** Is this extras block locked by an extras-scoped rule the reader does not satisfy? */
+    isExtraLocked(extraId) {
+        return isExtraLocked(this.rules, this.snapshotSubject.value, extraId);
     }
     /** Convenience: may the reader open this panel? */
     canAccess(panelId) {
@@ -7313,9 +7386,11 @@ class PaywallService {
     /**
      * Describe the gate blocking a panel, or null when it is not gated.
      * The shape is the player's existing `PaywallGate`, so the overlay needs
-     * no changes to render it.
+     * no changes to render it. `locale` picks the language of product names
+     * and descriptions from `paywall.products` (fallback: the work's default
+     * locale).
      */
-    gateFor(panelId) {
+    gateFor(panelId, locale) {
         const decision = this.evaluate(panelId);
         if (!decision.locked)
             return null;
@@ -7323,14 +7398,52 @@ class PaywallService {
         const scope = rule?.scope === 'panel' ? 'panel' : rule?.scope === 'chapter' ? 'chapter' : 'work';
         return {
             scope,
-            refId: rule?.scope === 'panel' ? panelId : undefined,
+            refId: rule?.scope === 'panel' ? panelId : scope === 'chapter' ? this.chapterOrder.get(panelId)?.chapterId : undefined,
             requireEntitlement: rule?.entitlementType,
             reason: PaywallService.readerMessage(decision.reason),
             preview: rule?.previewPanelCount
                 ? { previewPanels: rule.previewPanelCount }
                 : undefined,
+            ruleId: rule?.id,
+            lockReason: decision.reason ?? undefined,
+            options: rule
+                ? PaywallService.purchaseOptions(rule, this.products, locale ?? this.defaultLocale, this.defaultLocale)
+                : [],
         };
     }
+    /**
+     * What the reader can buy to pass a rule: one option per required product
+     * (purchase) or per subscription tier (subscription). Without explicit
+     * ids, the rule's `requireEntitlement` key names the product, else the
+     * rule id. Age gates and free rules offer nothing to buy.
+     *
+     * Labels (format 1.6): an option whose id has an entry in
+     * `paywall.products` takes that entry's localized name, description and
+     * price. Otherwise it falls back to the rule's name (a single option) or
+     * the bare id (several options), and to the rule's description and price.
+     */
+    static purchaseOptions(rule, products = new Map(), locale = 'en-US', fallbackLocale = 'en-US') {
+        const type = rule.entitlementType === 'purchase' ? 'one-time' : rule.entitlementType;
+        if (type !== 'one-time' && type !== 'subscription')
+            return [];
+        const listed = type === 'one-time' ? rule.requiredProductIds : rule.subscriptionTiers;
+        const key = rule.entitlementKey !== rule.entitlementType ? rule.entitlementKey : undefined;
+        const ids = listed?.length ? listed : [key ?? rule.id];
+        return ids.map((productId) => {
+            const product = products.get(productId);
+            const name = product?.name ? resolveLocalizedString(product.name, locale, fallbackLocale) : '';
+            const description = product?.description
+                ? resolveLocalizedString(product.description, locale, fallbackLocale)
+                : '';
+            return {
+                productId,
+                name: name || (ids.length > 1 ? productId : rule.name ?? ''),
+                description: description || rule.description,
+                price: product?.price ?? rule.price,
+                type,
+            };
+        });
+    }
     /** The rule that gates a panel, for callers that need its price or name. */
     ruleFor(panelId) {
         const decision = this.evaluate(panelId);
@@ -7338,11 +7451,17 @@ class PaywallService {
             return null;
         return this.rules.find((r) => r.id === decision.appliedRuleId) ?? null;
     }
+    /** The work's default locale (product-label fallback). */
+    get defaultLocale() {
+        return this.manifest?.meta?.default_locale ?? 'en-US';
+    }
     /** Reset to a manifest-less, entitlement-less state. */
     clear() {
         this.manifest = null;
         this.rules = [];
+        this.products.clear();
         this.readingOrder.clear();
+        this.chapterOrder.clear();
         this.snapshotSubject.next(ANONYMOUS_READER);
     }
     /**
@@ -14568,6 +14687,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                 args: ['window:keydown', ['$event']]
             }] } });
 
+/**
+ * Translate a built-in UI string. Falls back to the given English text (with
+ * `{{param}}` interpolation) when no TranslateService is provided or the key
+ * is not loaded, so a public component embedded without ngx-translate never
+ * shows a raw key.
+ */
+function uiText(translate, key, english, params) {
+    const value = translate?.instant(key, params);
+    if (typeof value === 'string' && value !== key) {
+        return value;
+    }
+    return (english ?? key).replace(/\{\{\s*(\w+)\s*\}\}/g, (_m, name) => String(params?.[name] ?? ''));
+}
+
 /**
  * Paywall Overlay Component
  * Displays paywall gate UI with purchase options
@@ -14594,6 +14727,10 @@ const PAYWALL_TEXT_EN = {
     'paywall.go_back': 'Go Back',
     'paywall.maybe_later': 'Maybe Later',
     'paywall.secure_payment': 'Secure payment processing',
+    'paywall.reason_subscription_required': 'This part of the story is included with a subscription.',
+    'paywall.reason_purchase_required': 'This part of the story is available to buy.',
+    'paywall.reason_age_verification_required': 'This content is age-restricted. Confirm your age to continue.',
+    'paywall.reason_entitlement_required': 'This content requires an entitlement to access.',
 };
 /**
  * Paywall Overlay Component
@@ -14672,17 +14809,24 @@ class PaywallOverlayComponent {
         if (this.message) {
             return this.getLocalizedString(this.message);
         }
+        // A known lock reason is translated; otherwise the gate's own sentence.
+        const key = 'paywall.reason_' + this.gate?.lockReason;
+        const translated = this.t(key);
+        if (translated !== key) {
+            return translated;
+        }
         if (this.gate?.reason) {
             return this.gate.reason;
         }
         return this.t('paywall.message_default');
     }
     /**
-     * Handle purchase option selection
+     * Handle purchase option selection: `purchase` carries the product id,
+     * `action` is 'subscribe' for a subscription option, else 'purchase'.
      */
-    onPurchaseOption(productId) {
-        this.purchase.emit(productId);
-        this.action.emit('purchase');
+    onPurchaseOption(option) {
+        this.purchase.emit(option.productId);
+        this.action.emit(option.type === 'subscription' ? 'subscribe' : 'purchase');
     }
     /**
      * Handle login action
@@ -14745,18 +14889,14 @@ class PaywallOverlayComponent {
      * Manifest-provided texts (title/message/gate.reason) bypass this.
      */
     t(key, params) {
-        const value = this.translate?.instant(key, params);
-        if (typeof value === 'string' && value !== key) {
-            return value;
-        }
-        return (PAYWALL_TEXT_EN[key] ?? key).replace(/\{\{\s*(\w+)\s*\}\}/g, (_m, name) => String(params?.[name] ?? ''));
+        return uiText(this.translate, key, PAYWALL_TEXT_EN[key], params);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PaywallOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: PaywallOverlayComponent, isStandalone: true, selector: "pw-paywall-overlay", inputs: { visible: "visible", gate: "gate", purchaseOptions: "purchaseOptions", locale: "locale", title: "title", message: "message", allowPreview: "allowPreview", showLogin: "showLogin" }, outputs: { action: "action", purchase: "purchase", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Paywall Overlay -->\n<div class=\"paywall-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"paywall-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"getTitle()\">\n    <!-- Header -->\n    <div class=\"paywall-header\">\n      <h2 class=\"paywall-title\">{{ getTitle() }}</h2>\n      <button\n        class=\"close-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"t('paywall.close')\"\n        (click)=\"onDismiss()\">\n        <pw-icon name=\"lucideX\" />\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"paywall-content\">\n      <!-- Icon -->\n      <div class=\"paywall-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n        </svg>\n      </div>\n\n      <!-- Message -->\n      <p class=\"paywall-message\">{{ getMessage() }}</p>\n\n      <!-- Preview Info -->\n      @if (gate?.preview && allowPreview) {\n        <div class=\"preview-info\">\n          @if (gate?.preview?.previewPanels) {\n            <p class=\"preview-text\">\n              <pw-icon name=\"lucideCheck\" /> {{ t('paywall.preview_panels', { count: gate?.preview?.previewPanels }) }}\n            </p>\n          }\n          @if (gate?.preview?.mode) {\n            <p class=\"preview-mode\">\n              {{ t('paywall.preview_mode', { mode: gate?.preview?.mode }) }}\n            </p>\n          }\n        </div>\n      }\n\n      <!-- Purchase Options -->\n      @if (purchaseOptions.length > 0) {\n        <div class=\"purchase-options\">\n          <h3 class=\"options-title\">{{ t('paywall.choose_option') }}</h3>\n          @for (option of purchaseOptions; track option.productId) {\n            <button\n              class=\"purchase-option\"\n              type=\"button\"\n              (click)=\"onPurchaseOption(option.productId)\">\n              <div class=\"option-header\">\n                <span class=\"option-name\">{{ option.name }}</span>\n                <span class=\"option-price\">{{ formatPrice(option.price.amount, option.price.currency) }}</span>\n              </div>\n              @if (option.description) {\n                <p class=\"option-description\">{{ option.description }}</p>\n              }\n              <span class=\"option-type\">{{ getPurchaseTypeLabel(option.type) }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Login Option -->\n      @if (showLogin && !purchaseOptions.length) {\n        <button\n          class=\"login-btn\"\n          type=\"button\"\n          (click)=\"onLogin()\">\n          {{ t('paywall.sign_in') }}\n        </button>\n      }\n\n      <!-- Actions -->\n      <div class=\"paywall-actions\">\n        @if (purchaseOptions.length === 0 && !showLogin) {\n          <button\n            class=\"action-btn primary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.go_back') }}\n          </button>\n        }\n        @if (purchaseOptions.length > 0 || showLogin) {\n          <button\n            class=\"action-btn secondary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.maybe_later') }}\n          </button>\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"paywall-footer\">\n        <p class=\"footer-text\">\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          {{ t('paywall.secure_payment') }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".paywall-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.paywall-overlay.visible{opacity:1;visibility:visible}.paywall-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;transform:scale(.9);transition:transform .3s ease}.paywall-overlay.visible .paywall-modal{transform:scale(1)}.paywall-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.paywall-title{font-size:24px;font-weight:700;color:#fff;margin:0}.close-btn{background:#fff3;border:none;color:#fff;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:#ffffff4d}.paywall-content{padding:32px 24px;text-align:center}.paywall-icon{width:80px;height:80px;margin:0 auto 24px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center}.paywall-icon svg{width:48px;height:48px;color:#fff}.paywall-message{font-size:16px;line-height:1.5;color:#ffffffe6;margin:0 0 24px}.preview-info{background:#ffffff1a;border-radius:8px;padding:16px;margin-bottom:24px}.preview-text{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px}.preview-mode{font-size:12px;color:#ffffffb3;margin:0}.purchase-options{margin-bottom:24px}.options-title{font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.purchase-option{background:#fff;border:none;border-radius:12px;padding:20px;margin-bottom:12px;width:100%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}.purchase-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.purchase-option:active{transform:translateY(0)}.option-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.option-name{font-size:18px;font-weight:700;color:#333}.option-price{font-size:24px;font-weight:700;color:#667eea}.option-description{font-size:14px;color:#666;margin:0 0 8px}.option-type{display:inline-block;font-size:12px;font-weight:600;color:#4350c4;background:#667eea1a;padding:4px 12px;border-radius:12px}.login-btn{background:#fff;border:none;color:#4350c4;font-size:16px;font-weight:700;padding:16px 32px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%;margin-bottom:16px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.paywall-actions{display:flex;gap:12px;margin-bottom:24px}.action-btn{flex:1;border:none;font-size:16px;font-weight:600;padding:14px 24px;border-radius:12px;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.action-btn.primary{background:#fff;color:#667eea}.action-btn.secondary{background:#fff3;color:#fff}.action-btn:hover{transform:translateY(-2px);opacity:.9}.paywall-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.footer-text{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffffb3;margin:0}.footer-text svg{width:16px;height:16px}@media (max-width: 640px){.paywall-modal{max-width:100%;border-radius:12px}.paywall-header{padding:20px}.paywall-title{font-size:20px}.paywall-content{padding:24px 20px}.option-name{font-size:16px}.option-price{font-size:20px}}\n"], dependencies: [{ 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: PaywallOverlayComponent, isStandalone: true, selector: "pw-paywall-overlay", inputs: { visible: "visible", gate: "gate", purchaseOptions: "purchaseOptions", locale: "locale", title: "title", message: "message", allowPreview: "allowPreview", showLogin: "showLogin" }, outputs: { action: "action", purchase: "purchase", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "<!-- Paywall Overlay -->\n<div class=\"paywall-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"paywall-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"getTitle()\">\n    <!-- Header -->\n    <div class=\"paywall-header\">\n      <h2 class=\"paywall-title\">{{ getTitle() }}</h2>\n      <button\n        class=\"close-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"t('paywall.close')\"\n        (click)=\"onDismiss()\">\n        <pw-icon name=\"lucideX\" />\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"paywall-content\">\n      <!-- Icon -->\n      <div class=\"paywall-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n        </svg>\n      </div>\n\n      <!-- Message -->\n      <p class=\"paywall-message\">{{ getMessage() }}</p>\n\n      <!-- Preview Info -->\n      @if (gate?.preview && allowPreview) {\n        <div class=\"preview-info\">\n          @if (gate?.preview?.previewPanels) {\n            <p class=\"preview-text\">\n              <pw-icon name=\"lucideCheck\" /> {{ t('paywall.preview_panels', { count: gate?.preview?.previewPanels }) }}\n            </p>\n          }\n          @if (gate?.preview?.mode) {\n            <p class=\"preview-mode\">\n              {{ t('paywall.preview_mode', { mode: gate?.preview?.mode }) }}\n            </p>\n          }\n        </div>\n      }\n\n      <!-- Purchase Options -->\n      @if (purchaseOptions.length > 0) {\n        <div class=\"purchase-options\">\n          <h3 class=\"options-title\">{{ t('paywall.choose_option') }}</h3>\n          @for (option of purchaseOptions; track option.productId) {\n            <button\n              class=\"purchase-option\"\n              type=\"button\"\n              (click)=\"onPurchaseOption(option)\">\n              <div class=\"option-header\">\n                <span class=\"option-name\">{{ option.name || getPurchaseTypeLabel(option.type) }}</span>\n                @if (option.price) {\n                  <span class=\"option-price\">{{ formatPrice(option.price.amount, option.price.currency) }}</span>\n                }\n              </div>\n              @if (option.description) {\n                <p class=\"option-description\">{{ option.description }}</p>\n              }\n              @if (option.name) {\n                <span class=\"option-type\">{{ getPurchaseTypeLabel(option.type) }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Login Option -->\n      @if (showLogin) {\n        <button\n          class=\"login-btn\"\n          type=\"button\"\n          (click)=\"onLogin()\">\n          {{ t('paywall.sign_in') }}\n        </button>\n      }\n\n      <!-- Actions -->\n      <div class=\"paywall-actions\">\n        @if (purchaseOptions.length === 0 && !showLogin) {\n          <button\n            class=\"action-btn primary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.go_back') }}\n          </button>\n        }\n        @if (purchaseOptions.length > 0 || showLogin) {\n          <button\n            class=\"action-btn secondary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.maybe_later') }}\n          </button>\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"paywall-footer\">\n        <p class=\"footer-text\">\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          {{ t('paywall.secure_payment') }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".paywall-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.paywall-overlay.visible{opacity:1;visibility:visible}.paywall-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;transform:scale(.9);transition:transform .3s ease}.paywall-overlay.visible .paywall-modal{transform:scale(1)}.paywall-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.paywall-title{font-size:24px;font-weight:700;color:#fff;margin:0}.close-btn{background:#fff3;border:none;color:#fff;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:#ffffff4d}.paywall-content{padding:32px 24px;text-align:center}.paywall-icon{width:80px;height:80px;margin:0 auto 24px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center}.paywall-icon svg{width:48px;height:48px;color:#fff}.paywall-message{font-size:16px;line-height:1.5;color:#ffffffe6;margin:0 0 24px}.preview-info{background:#ffffff1a;border-radius:8px;padding:16px;margin-bottom:24px}.preview-text{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px}.preview-mode{font-size:12px;color:#ffffffb3;margin:0}.purchase-options{margin-bottom:24px}.options-title{font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.purchase-option{background:#fff;border:none;border-radius:12px;padding:20px;margin-bottom:12px;width:100%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}.purchase-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.purchase-option:active{transform:translateY(0)}.option-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.option-name{font-size:18px;font-weight:700;color:#333}.option-price{font-size:24px;font-weight:700;color:#667eea}.option-description{font-size:14px;color:#666;margin:0 0 8px}.option-type{display:inline-block;font-size:12px;font-weight:600;color:#4350c4;background:#667eea1a;padding:4px 12px;border-radius:12px}.login-btn{background:#fff;border:none;color:#4350c4;font-size:16px;font-weight:700;padding:16px 32px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%;margin-bottom:16px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.paywall-actions{display:flex;gap:12px;margin-bottom:24px}.action-btn{flex:1;border:none;font-size:16px;font-weight:600;padding:14px 24px;border-radius:12px;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.action-btn.primary{background:#fff;color:#667eea}.action-btn.secondary{background:#fff3;color:#fff}.action-btn:hover{transform:translateY(-2px);opacity:.9}.paywall-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.footer-text{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffffb3;margin:0}.footer-text svg{width:16px;height:16px}@media (max-width: 640px){.paywall-modal{max-width:100%;border-radius:12px}.paywall-header{padding:20px}.paywall-title{font-size:20px}.paywall-content{padding:24px 20px}.option-name{font-size:16px}.option-price{font-size:20px}}\n"], dependencies: [{ 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: PaywallOverlayComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-paywall-overlay', imports: [PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Paywall Overlay -->\n<div class=\"paywall-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"paywall-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"getTitle()\">\n    <!-- Header -->\n    <div class=\"paywall-header\">\n      <h2 class=\"paywall-title\">{{ getTitle() }}</h2>\n      <button\n        class=\"close-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"t('paywall.close')\"\n        (click)=\"onDismiss()\">\n        <pw-icon name=\"lucideX\" />\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"paywall-content\">\n      <!-- Icon -->\n      <div class=\"paywall-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n        </svg>\n      </div>\n\n      <!-- Message -->\n      <p class=\"paywall-message\">{{ getMessage() }}</p>\n\n      <!-- Preview Info -->\n      @if (gate?.preview && allowPreview) {\n        <div class=\"preview-info\">\n          @if (gate?.preview?.previewPanels) {\n            <p class=\"preview-text\">\n              <pw-icon name=\"lucideCheck\" /> {{ t('paywall.preview_panels', { count: gate?.preview?.previewPanels }) }}\n            </p>\n          }\n          @if (gate?.preview?.mode) {\n            <p class=\"preview-mode\">\n              {{ t('paywall.preview_mode', { mode: gate?.preview?.mode }) }}\n            </p>\n          }\n        </div>\n      }\n\n      <!-- Purchase Options -->\n      @if (purchaseOptions.length > 0) {\n        <div class=\"purchase-options\">\n          <h3 class=\"options-title\">{{ t('paywall.choose_option') }}</h3>\n          @for (option of purchaseOptions; track option.productId) {\n            <button\n              class=\"purchase-option\"\n              type=\"button\"\n              (click)=\"onPurchaseOption(option.productId)\">\n              <div class=\"option-header\">\n                <span class=\"option-name\">{{ option.name }}</span>\n                <span class=\"option-price\">{{ formatPrice(option.price.amount, option.price.currency) }}</span>\n              </div>\n              @if (option.description) {\n                <p class=\"option-description\">{{ option.description }}</p>\n              }\n              <span class=\"option-type\">{{ getPurchaseTypeLabel(option.type) }}</span>\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Login Option -->\n      @if (showLogin && !purchaseOptions.length) {\n        <button\n          class=\"login-btn\"\n          type=\"button\"\n          (click)=\"onLogin()\">\n          {{ t('paywall.sign_in') }}\n        </button>\n      }\n\n      <!-- Actions -->\n      <div class=\"paywall-actions\">\n        @if (purchaseOptions.length === 0 && !showLogin) {\n          <button\n            class=\"action-btn primary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.go_back') }}\n          </button>\n        }\n        @if (purchaseOptions.length > 0 || showLogin) {\n          <button\n            class=\"action-btn secondary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.maybe_later') }}\n          </button>\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"paywall-footer\">\n        <p class=\"footer-text\">\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          {{ t('paywall.secure_payment') }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".paywall-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.paywall-overlay.visible{opacity:1;visibility:visible}.paywall-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;transform:scale(.9);transition:transform .3s ease}.paywall-overlay.visible .paywall-modal{transform:scale(1)}.paywall-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.paywall-title{font-size:24px;font-weight:700;color:#fff;margin:0}.close-btn{background:#fff3;border:none;color:#fff;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:#ffffff4d}.paywall-content{padding:32px 24px;text-align:center}.paywall-icon{width:80px;height:80px;margin:0 auto 24px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center}.paywall-icon svg{width:48px;height:48px;color:#fff}.paywall-message{font-size:16px;line-height:1.5;color:#ffffffe6;margin:0 0 24px}.preview-info{background:#ffffff1a;border-radius:8px;padding:16px;margin-bottom:24px}.preview-text{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px}.preview-mode{font-size:12px;color:#ffffffb3;margin:0}.purchase-options{margin-bottom:24px}.options-title{font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.purchase-option{background:#fff;border:none;border-radius:12px;padding:20px;margin-bottom:12px;width:100%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}.purchase-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.purchase-option:active{transform:translateY(0)}.option-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.option-name{font-size:18px;font-weight:700;color:#333}.option-price{font-size:24px;font-weight:700;color:#667eea}.option-description{font-size:14px;color:#666;margin:0 0 8px}.option-type{display:inline-block;font-size:12px;font-weight:600;color:#4350c4;background:#667eea1a;padding:4px 12px;border-radius:12px}.login-btn{background:#fff;border:none;color:#4350c4;font-size:16px;font-weight:700;padding:16px 32px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%;margin-bottom:16px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.paywall-actions{display:flex;gap:12px;margin-bottom:24px}.action-btn{flex:1;border:none;font-size:16px;font-weight:600;padding:14px 24px;border-radius:12px;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.action-btn.primary{background:#fff;color:#667eea}.action-btn.secondary{background:#fff3;color:#fff}.action-btn:hover{transform:translateY(-2px);opacity:.9}.paywall-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.footer-text{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffffb3;margin:0}.footer-text svg{width:16px;height:16px}@media (max-width: 640px){.paywall-modal{max-width:100%;border-radius:12px}.paywall-header{padding:20px}.paywall-title{font-size:20px}.paywall-content{padding:24px 20px}.option-name{font-size:16px}.option-price{font-size:20px}}\n"] }]
+            args: [{ selector: 'pw-paywall-overlay', imports: [PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Paywall Overlay -->\n<div class=\"paywall-overlay\" [class.visible]=\"visible\" tabindex=\"-1\" (click)=\"onBackdropClick($event)\" (keydown.escape)=\"$event.stopPropagation(); onDismiss()\">\n  <div class=\"paywall-modal\" role=\"dialog\" aria-modal=\"true\" [attr.aria-label]=\"getTitle()\">\n    <!-- Header -->\n    <div class=\"paywall-header\">\n      <h2 class=\"paywall-title\">{{ getTitle() }}</h2>\n      <button\n        class=\"close-btn\"\n        type=\"button\"\n        [attr.aria-label]=\"t('paywall.close')\"\n        (click)=\"onDismiss()\">\n        <pw-icon name=\"lucideX\" />\n      </button>\n    </div>\n\n    <!-- Content -->\n    <div class=\"paywall-content\">\n      <!-- Icon -->\n      <div class=\"paywall-icon\">\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\n          <path d=\"M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z\"/>\n        </svg>\n      </div>\n\n      <!-- Message -->\n      <p class=\"paywall-message\">{{ getMessage() }}</p>\n\n      <!-- Preview Info -->\n      @if (gate?.preview && allowPreview) {\n        <div class=\"preview-info\">\n          @if (gate?.preview?.previewPanels) {\n            <p class=\"preview-text\">\n              <pw-icon name=\"lucideCheck\" /> {{ t('paywall.preview_panels', { count: gate?.preview?.previewPanels }) }}\n            </p>\n          }\n          @if (gate?.preview?.mode) {\n            <p class=\"preview-mode\">\n              {{ t('paywall.preview_mode', { mode: gate?.preview?.mode }) }}\n            </p>\n          }\n        </div>\n      }\n\n      <!-- Purchase Options -->\n      @if (purchaseOptions.length > 0) {\n        <div class=\"purchase-options\">\n          <h3 class=\"options-title\">{{ t('paywall.choose_option') }}</h3>\n          @for (option of purchaseOptions; track option.productId) {\n            <button\n              class=\"purchase-option\"\n              type=\"button\"\n              (click)=\"onPurchaseOption(option)\">\n              <div class=\"option-header\">\n                <span class=\"option-name\">{{ option.name || getPurchaseTypeLabel(option.type) }}</span>\n                @if (option.price) {\n                  <span class=\"option-price\">{{ formatPrice(option.price.amount, option.price.currency) }}</span>\n                }\n              </div>\n              @if (option.description) {\n                <p class=\"option-description\">{{ option.description }}</p>\n              }\n              @if (option.name) {\n                <span class=\"option-type\">{{ getPurchaseTypeLabel(option.type) }}</span>\n              }\n            </button>\n          }\n        </div>\n      }\n\n      <!-- Login Option -->\n      @if (showLogin) {\n        <button\n          class=\"login-btn\"\n          type=\"button\"\n          (click)=\"onLogin()\">\n          {{ t('paywall.sign_in') }}\n        </button>\n      }\n\n      <!-- Actions -->\n      <div class=\"paywall-actions\">\n        @if (purchaseOptions.length === 0 && !showLogin) {\n          <button\n            class=\"action-btn primary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.go_back') }}\n          </button>\n        }\n        @if (purchaseOptions.length > 0 || showLogin) {\n          <button\n            class=\"action-btn secondary\"\n            type=\"button\"\n            (click)=\"onDismiss()\">\n            {{ t('paywall.maybe_later') }}\n          </button>\n        }\n      </div>\n\n      <!-- Footer Info -->\n      <div class=\"paywall-footer\">\n        <p class=\"footer-text\">\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          {{ t('paywall.secure_payment') }}\n        </p>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".paywall-overlay{position:fixed;inset:0;background:#000000bf;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;padding:20px}.paywall-overlay.visible{opacity:1;visibility:visible}.paywall-modal{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:16px;max-width:500px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;transform:scale(.9);transition:transform .3s ease}.paywall-overlay.visible .paywall-modal{transform:scale(1)}.paywall-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:1px solid rgba(255,255,255,.1)}.paywall-title{font-size:24px;font-weight:700;color:#fff;margin:0}.close-btn{background:#fff3;border:none;color:#fff;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:#ffffff4d}.paywall-content{padding:32px 24px;text-align:center}.paywall-icon{width:80px;height:80px;margin:0 auto 24px;background:#ffffff26;border-radius:50%;display:flex;align-items:center;justify-content:center}.paywall-icon svg{width:48px;height:48px;color:#fff}.paywall-message{font-size:16px;line-height:1.5;color:#ffffffe6;margin:0 0 24px}.preview-info{background:#ffffff1a;border-radius:8px;padding:16px;margin-bottom:24px}.preview-text{font-size:14px;font-weight:600;color:#fff;margin:0 0 4px}.preview-mode{font-size:12px;color:#ffffffb3;margin:0}.purchase-options{margin-bottom:24px}.options-title{font-size:14px;font-weight:600;color:#fff;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.purchase-option{background:#fff;border:none;border-radius:12px;padding:20px;margin-bottom:12px;width:100%;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;text-align:left}.purchase-option:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0003}.purchase-option:active{transform:translateY(0)}.option-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.option-name{font-size:18px;font-weight:700;color:#333}.option-price{font-size:24px;font-weight:700;color:#667eea}.option-description{font-size:14px;color:#666;margin:0 0 8px}.option-type{display:inline-block;font-size:12px;font-weight:600;color:#4350c4;background:#667eea1a;padding:4px 12px;border-radius:12px}.login-btn{background:#fff;border:none;color:#4350c4;font-size:16px;font-weight:700;padding:16px 32px;border-radius:12px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;width:100%;margin-bottom:16px}.login-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0003}.paywall-actions{display:flex;gap:12px;margin-bottom:24px}.action-btn{flex:1;border:none;font-size:16px;font-weight:600;padding:14px 24px;border-radius:12px;cursor:pointer;transition:transform .2s ease,opacity .2s ease}.action-btn.primary{background:#fff;color:#667eea}.action-btn.secondary{background:#fff3;color:#fff}.action-btn:hover{transform:translateY(-2px);opacity:.9}.paywall-footer{border-top:1px solid rgba(255,255,255,.1);padding-top:16px}.footer-text{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#ffffffb3;margin:0}.footer-text svg{width:16px;height:16px}@media (max-width: 640px){.paywall-modal{max-width:100%;border-radius:12px}.paywall-header{padding:20px}.paywall-title{font-size:20px}.paywall-content{padding:24px 20px}.option-name{font-size:16px}.option-price{font-size:20px}}\n"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], gate: [{
@@ -15765,12 +15905,35 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Age Gate Component
  * Displays age verification UI for restricted content
  */
+/**
+ * Built-in English UI strings (keys under `age_gate.`), used when no
+ * TranslateService is provided or a key is not loaded. Must match the
+ * "age_gate" section of assets/i18n/en.json.
+ */
+const AGE_GATE_TEXT_EN = {
+    title: 'Age Verification Required',
+    close: 'Close',
+    warning: 'This content is restricted to users {{age}} years of age or older.',
+    prompt: 'Please enter your birth date:',
+    month: 'Month',
+    day: 'Day',
+    year: 'Year',
+    verify: 'Verify Age',
+    privacy: 'Your information is private and will not be stored.',
+    error_incomplete: 'Please enter your complete birth date.',
+    error_month: 'Please enter a valid month (1-12).',
+    error_day: 'Please enter a valid day (1-{{max}}).',
+    error_year: 'Please enter a valid year (1900-{{max}}).',
+    error_too_young: 'You must be at least {{age}} years old to access this content.',
+};
 /**
  * Age Gate Component
  * Modal overlay for age verification
  */
 class AgeGateComponent {
     constructor() {
+        /** Optional: the gate is a public component and works (in English) without ngx-translate. */
+        this.translate = inject(TranslateService, { optional: true });
         /**
          * Visibility state
          */
@@ -15821,7 +15984,11 @@ class AgeGateComponent {
         if (this.warningMessage) {
             return this.warningMessage;
         }
-        return `This content is restricted to users ${this.minimumAge} years of age or older.`;
+        return this.t('warning', { age: this.minimumAge });
+    }
+    /** Translate an `age_gate.*` UI string (English fallback). */
+    t(key, params) {
+        return uiText(this.translate, 'age_gate.' + key, AGE_GATE_TEXT_EN[key], params);
     }
     /**
      * Handle verification submit
@@ -15830,7 +15997,7 @@ class AgeGateComponent {
         this.errorMessage = '';
         // Validate inputs
         if (!this.birthMonth || !this.birthDay || !this.birthYear) {
-            this.errorMessage = 'Please enter your complete birth date.';
+            this.errorMessage = this.t('error_incomplete');
             return;
         }
         const month = parseInt(this.birthMonth, 10);
@@ -15838,30 +16005,30 @@ class AgeGateComponent {
         const year = parseInt(this.birthYear, 10);
         // Validate ranges
         if (month < 1 || month > 12) {
-            this.errorMessage = 'Please enter a valid month (1-12).';
+            this.errorMessage = this.t('error_month');
             return;
         }
         if (day < 1 || day > 31) {
-            this.errorMessage = 'Please enter a valid day (1-31).';
+            this.errorMessage = this.t('error_day', { max: 31 });
             return;
         }
         const currentYear = new Date().getFullYear();
         if (year < 1900 || year > currentYear) {
-            this.errorMessage = `Please enter a valid year (1900-${currentYear}).`;
+            this.errorMessage = this.t('error_year', { max: currentYear });
             return;
         }
         // Reject calendar-impossible dates (31 Apr, 30 Feb, 29 Feb in non-leap
         // years): new Date() would silently roll them over into the next month.
         const daysInMonth = new Date(year, month, 0).getDate();
         if (day > daysInMonth) {
-            this.errorMessage = `Please enter a valid day (1-${daysInMonth}).`;
+            this.errorMessage = this.t('error_day', { max: daysInMonth });
             return;
         }
         // Calculate age
         const birthDate = new Date(year, month - 1, day);
         const age = this.calculateAge(birthDate);
         if (age < this.minimumAge) {
-            this.errorMessage = `You must be at least ${this.minimumAge} years old to access this content.`;
+            this.errorMessage = this.t('error_too_young', { age: this.minimumAge });
             this.verify.emit({
                 verified: false,
                 age,
@@ -15906,17 +16073,26 @@ class AgeGateComponent {
         return age;
     }
     /**
-     * Get month options
+     * Month options, named in the current locale (Intl; cached per locale).
      */
     getMonthOptions() {
-        const months = [
-            'January', 'February', 'March', 'April', 'May', 'June',
-            'July', 'August', 'September', 'October', 'November', 'December'
-        ];
-        return months.map((month, index) => ({
-            value: String(index + 1),
-            label: month,
-        }));
+        if (this.monthCache?.locale !== this.locale) {
+            let format;
+            try {
+                format = new Intl.DateTimeFormat(this.locale, { month: 'long', timeZone: 'UTC' });
+            }
+            catch {
+                format = new Intl.DateTimeFormat('en-US', { month: 'long', timeZone: 'UTC' });
+            }
+            this.monthCache = {
+                locale: this.locale,
+                options: Array.from({ length: 12 }, (_, index) => ({
+                    value: String(index + 1),
+                    label: format.format(Date.UTC(2000, index, 1)),
+                })),
+            };
+        }
+        return this.monthCache.options;
     }
     /**
      * Get day options
@@ -15936,11 +16112,11 @@ 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\" aria-label=\"Age Verification\">\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\">Age Verification Required</h2>\n      @if (allowDismiss) {\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          aria-label=\"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\">Please enter your birth date:</div>\n\n        <div class=\"date-inputs\">\n          <!-- Month -->\n          <div class=\"input-group\">\n            <label for=\"birth-month\" class=\"input-label\">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\">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\">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          Verify Age\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>Your information is private and will not be stored.</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$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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: AgeGateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-age-gate', imports: [FormsModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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\" aria-label=\"Age Verification\">\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\">Age Verification Required</h2>\n      @if (allowDismiss) {\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          aria-label=\"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\">Please enter your birth date:</div>\n\n        <div class=\"date-inputs\">\n          <!-- Month -->\n          <div class=\"input-group\">\n            <label for=\"birth-month\" class=\"input-label\">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\">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\">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          Verify Age\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>Your information is private and will not be stored.</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"] }]
+            args: [{ selector: 'pw-age-gate', imports: [FormsModule, PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], minimumAge: [{
@@ -15967,8 +16143,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * priority. Opened from the toolbar's "Choices" button; follows the shell's
  * modal contract (visible input + close output).
  */
+/** English fallback for the `branch_chooser.*` keys (see assets/i18n/en.json). */
+const BRANCH_TEXT_EN = {
+    title: 'Choose your path',
+    close: 'Close',
+    option: 'Option {{n}}',
+};
 class BranchChooserComponent {
     constructor() {
+        this.translate = inject(TranslateService, { optional: true });
         /** Visible state */
         this.visible = false;
         /** Current locale (labels are already resolved by the shell). */
@@ -15980,6 +16163,10 @@ class BranchChooserComponent {
         /** Close requested without choosing. */
         this.close = new EventEmitter();
     }
+    /** Translate a `branch_chooser.*` UI string (English fallback). */
+    t(key, params) {
+        return uiText(this.translate, 'branch_chooser.' + key, BRANCH_TEXT_EN[key], params);
+    }
     onEscape() {
         if (this.visible) {
             this.close.emit();
@@ -15994,11 +16181,11 @@ class BranchChooserComponent {
         return choice.index;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: BranchChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.14", type: BranchChooserComponent, isStandalone: true, selector: "pw-branch-chooser", inputs: { visible: "visible", locale: "locale", choices: "choices" }, outputs: { choose: "choose", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible) {\n  <div\n    class=\"branch-chooser-overlay\"\n    tabindex=\"-1\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close.emit()\">\n    <div\n      class=\"branch-chooser-container\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"pw-branch-chooser-title\">\n      <div class=\"branch-chooser-header\">\n        <h2 id=\"pw-branch-chooser-title\" class=\"branch-chooser-title\">Choose your path</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          aria-label=\"Close\"\n          (click)=\"close.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <ul class=\"branch-chooser-list\">\n        @for (choice of choices; track choice.index) {\n          <li>\n            <button\n              class=\"branch-chooser-option\"\n              type=\"button\"\n              (click)=\"choose.emit(choice)\">\n              <span class=\"branch-chooser-index\" aria-hidden=\"true\">{{ choice.index + 1 }}</span>\n              <span class=\"branch-chooser-label\">{{ choice.label }}</span>\n              <span class=\"branch-chooser-arrow\" aria-hidden=\"true\"><pw-icon name=\"lucideChevronRight\" /></span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n", styles: [".branch-chooser-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;outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.branch-chooser-container{width:90%;max-width:420px;max-height:70vh;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)}}.branch-chooser-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}.branch-chooser-title{font-size:18px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.close-btn:hover,.close-btn:focus-visible{background:#ffffff1a;color:#fff;outline:none}.branch-chooser-list{list-style:none;margin:0;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.branch-chooser-option{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.branch-chooser-option:hover,.branch-chooser-option:focus-visible{background:#ffffff1f;border-color:#ffffff40;outline:none;transform:translate(2px)}.branch-chooser-index{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1f;font-size:13px;font-weight:600}.branch-chooser-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.branch-chooser-arrow{flex-shrink:0;display:inline-flex;color:#ffffff80}@media (prefers-reduced-motion: reduce){.branch-chooser-overlay,.branch-chooser-container{animation:none}.branch-chooser-option{transition:none}}\n"], dependencies: [{ 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: BranchChooserComponent, isStandalone: true, selector: "pw-branch-chooser", inputs: { visible: "visible", locale: "locale", choices: "choices" }, outputs: { choose: "choose", close: "close" }, host: { listeners: { "document:keydown.escape": "onEscape()" } }, ngImport: i0, template: "@if (visible) {\n  <div\n    class=\"branch-chooser-overlay\"\n    tabindex=\"-1\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close.emit()\">\n    <div\n      class=\"branch-chooser-container\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"pw-branch-chooser-title\">\n      <div class=\"branch-chooser-header\">\n        <h2 id=\"pw-branch-chooser-title\" class=\"branch-chooser-title\">{{ t('title') }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"t('close')\"\n          (click)=\"close.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <ul class=\"branch-chooser-list\">\n        @for (choice of choices; track choice.index) {\n          <li>\n            <button\n              class=\"branch-chooser-option\"\n              type=\"button\"\n              (click)=\"choose.emit(choice)\">\n              <span class=\"branch-chooser-index\" aria-hidden=\"true\">{{ choice.index + 1 }}</span>\n              <span class=\"branch-chooser-label\">{{ choice.label || t('option', { n: choice.index + 1 }) }}</span>\n              <span class=\"branch-chooser-arrow\" aria-hidden=\"true\"><pw-icon name=\"lucideChevronRight\" /></span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n", styles: [".branch-chooser-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;outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.branch-chooser-container{width:90%;max-width:420px;max-height:70vh;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)}}.branch-chooser-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}.branch-chooser-title{font-size:18px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.close-btn:hover,.close-btn:focus-visible{background:#ffffff1a;color:#fff;outline:none}.branch-chooser-list{list-style:none;margin:0;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.branch-chooser-option{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.branch-chooser-option:hover,.branch-chooser-option:focus-visible{background:#ffffff1f;border-color:#ffffff40;outline:none;transform:translate(2px)}.branch-chooser-index{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1f;font-size:13px;font-weight:600}.branch-chooser-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.branch-chooser-arrow{flex-shrink:0;display:inline-flex;color:#ffffff80}@media (prefers-reduced-motion: reduce){.branch-chooser-overlay,.branch-chooser-container{animation:none}.branch-chooser-option{transition:none}}\n"], dependencies: [{ 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: BranchChooserComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-branch-chooser', imports: [PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div\n    class=\"branch-chooser-overlay\"\n    tabindex=\"-1\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close.emit()\">\n    <div\n      class=\"branch-chooser-container\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"pw-branch-chooser-title\">\n      <div class=\"branch-chooser-header\">\n        <h2 id=\"pw-branch-chooser-title\" class=\"branch-chooser-title\">Choose your path</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          aria-label=\"Close\"\n          (click)=\"close.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <ul class=\"branch-chooser-list\">\n        @for (choice of choices; track choice.index) {\n          <li>\n            <button\n              class=\"branch-chooser-option\"\n              type=\"button\"\n              (click)=\"choose.emit(choice)\">\n              <span class=\"branch-chooser-index\" aria-hidden=\"true\">{{ choice.index + 1 }}</span>\n              <span class=\"branch-chooser-label\">{{ choice.label }}</span>\n              <span class=\"branch-chooser-arrow\" aria-hidden=\"true\"><pw-icon name=\"lucideChevronRight\" /></span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n", styles: [".branch-chooser-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;outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.branch-chooser-container{width:90%;max-width:420px;max-height:70vh;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)}}.branch-chooser-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}.branch-chooser-title{font-size:18px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.close-btn:hover,.close-btn:focus-visible{background:#ffffff1a;color:#fff;outline:none}.branch-chooser-list{list-style:none;margin:0;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.branch-chooser-option{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.branch-chooser-option:hover,.branch-chooser-option:focus-visible{background:#ffffff1f;border-color:#ffffff40;outline:none;transform:translate(2px)}.branch-chooser-index{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1f;font-size:13px;font-weight:600}.branch-chooser-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.branch-chooser-arrow{flex-shrink:0;display:inline-flex;color:#ffffff80}@media (prefers-reduced-motion: reduce){.branch-chooser-overlay,.branch-chooser-container{animation:none}.branch-chooser-option{transition:none}}\n"] }]
+            args: [{ selector: 'pw-branch-chooser', imports: [PwIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (visible) {\n  <div\n    class=\"branch-chooser-overlay\"\n    tabindex=\"-1\"\n    (click)=\"onBackdropClick($event)\"\n    (keydown.escape)=\"close.emit()\">\n    <div\n      class=\"branch-chooser-container\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"pw-branch-chooser-title\">\n      <div class=\"branch-chooser-header\">\n        <h2 id=\"pw-branch-chooser-title\" class=\"branch-chooser-title\">{{ t('title') }}</h2>\n        <button\n          class=\"close-btn\"\n          type=\"button\"\n          [attr.aria-label]=\"t('close')\"\n          (click)=\"close.emit()\">\n          <pw-icon name=\"lucideX\" />\n        </button>\n      </div>\n\n      <ul class=\"branch-chooser-list\">\n        @for (choice of choices; track choice.index) {\n          <li>\n            <button\n              class=\"branch-chooser-option\"\n              type=\"button\"\n              (click)=\"choose.emit(choice)\">\n              <span class=\"branch-chooser-index\" aria-hidden=\"true\">{{ choice.index + 1 }}</span>\n              <span class=\"branch-chooser-label\">{{ choice.label || t('option', { n: choice.index + 1 }) }}</span>\n              <span class=\"branch-chooser-arrow\" aria-hidden=\"true\"><pw-icon name=\"lucideChevronRight\" /></span>\n            </button>\n          </li>\n        }\n      </ul>\n    </div>\n  </div>\n}\n", styles: [".branch-chooser-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;outline:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.branch-chooser-container{width:90%;max-width:420px;max-height:70vh;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)}}.branch-chooser-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}.branch-chooser-title{font-size:18px;font-weight:600;color:#fff;margin:0}.close-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:#ffffffb3;background:transparent;border:none;border-radius:6px;cursor:pointer;transition:background .15s ease,color .15s ease}.close-btn:hover,.close-btn:focus-visible{background:#ffffff1a;color:#fff;outline:none}.branch-chooser-list{list-style:none;margin:0;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.branch-chooser-option{width:100%;display:flex;align-items:center;gap:12px;padding:14px 16px;background:#ffffff0f;border:1px solid rgba(255,255,255,.08);border-radius:10px;color:#fff;font:inherit;font-size:15px;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}.branch-chooser-option:hover,.branch-chooser-option:focus-visible{background:#ffffff1f;border-color:#ffffff40;outline:none;transform:translate(2px)}.branch-chooser-index{flex-shrink:0;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#ffffff1f;font-size:13px;font-weight:600}.branch-chooser-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}.branch-chooser-arrow{flex-shrink:0;display:inline-flex;color:#ffffff80}@media (prefers-reduced-motion: reduce){.branch-chooser-overlay,.branch-chooser-container{animation:none}.branch-chooser-option{transition:none}}\n"] }]
         }], propDecorators: { visible: [{
                 type: Input
             }], locale: [{
@@ -16607,8 +16794,11 @@ function createTranslateLoader(http) {
 class PlayerShellComponent {
     constructor() {
         /**
-         * Emitted when a reader acts on the paywall overlay. The host owns
-         * checkout — the player never talks to a payment provider itself.
+         * Emitted when a reader acts on the paywall overlay: `purchase` /
+         * `subscribe` (with the chosen option's `productId` — a product id or a
+         * subscription tier), `login` or `dismiss`. The host owns checkout — the
+         * player never talks to a payment provider itself; call
+         * `refreshEntitlements()` (or pass a new `entitlementSnapshot`) afterwards.
          */
         this.paywallAction = new EventEmitter();
         /**
@@ -16890,6 +17080,10 @@ class PlayerShellComponent {
         this.translationService = inject(TranslationService);
         this.canvasCamera = inject(CanvasCameraService);
         this.paywallService = inject(PaywallService);
+        /** ngOnInit ran: later input changes are live updates, not initial values. */
+        this.initialized = false;
+        /** The state subscriptions are set up once per instance, not per (re)load. */
+        this.stateSubscribed = false;
     }
     /**
      * Effective reduced-motion state for every transition the shell drives
@@ -16903,6 +17097,7 @@ class PlayerShellComponent {
      * Initialize component
      */
     ngOnInit() {
+        this.initialized = true;
         this.toolbarVisible = this.showToolbar;
         this.watchReducedMotion();
         this.subscribeToVideoSignals();
@@ -16913,6 +17108,100 @@ class PlayerShellComponent {
             window.addEventListener('pagehide', this.onPageHide);
         }
     }
+    /**
+     * Inputs changed after init. The first round (before ngOnInit) is skipped:
+     * ngOnInit reads every input itself, so nothing loads twice.
+     */
+    ngOnChanges(changes) {
+        if (!this.initialized) {
+            return;
+        }
+        if (changes['manifest'] || changes['manifestUrl']) {
+            // A new work: reload re-reads every other input as well.
+            void this.reload();
+            return;
+        }
+        if (changes['locale']) {
+            this.applyLocale();
+        }
+        if (changes['entitlementSnapshot']) {
+            if (!this.entitlementSnapshot && !this.httpEntitlement) {
+                this.paywallService.setSnapshot(null);
+            }
+            this.refreshEntitlements(this.entitlementSnapshot).catch(() => undefined);
+        }
+        if (changes['viewModeOverride']) {
+            this.applyViewModeOverride();
+        }
+        if (changes['showToolbar']) {
+            this.toolbarVisible = this.showToolbar;
+        }
+        if (changes['autoplay'] && this.autoplay !== this.autoplayEnabled) {
+            this.onToggleAutoplay();
+        }
+        else if ((changes['secondsPerPanel'] || changes['reducedMotion']) && this.autoplayEnabled) {
+            // Re-arm with the new timing / video start modes.
+            this.startAutoplay();
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Reload the work from the current `manifest` / `manifestUrl` inputs
+     * (also the error screen's Retry). Story state of the previous load —
+     * position, variables except persistent ones, open overlays, autoplay —
+     * is reset; the analytics session of the previous work is closed.
+     */
+    async reload() {
+        this.stopAutoplay();
+        this.autoplayEnabled = false;
+        this.videoSequencer.reset();
+        this.panelAudio.stopAll();
+        this.endAnalyticsSession();
+        this.analyticsSessionStarted = this.analyticsSessionEnded = this.workCompleteTracked = false;
+        this.lastTrackedPanelId = undefined;
+        this.closePaywall();
+        this.closeAgeGate();
+        this.tocVisible = this.settingsVisible = this.languageModalVisible = this.charactersVisible = false;
+        this.extrasVisible = this.shareVisible = this.commentsVisible = this.thumbnailsVisible = false;
+        this.actionModalVisible = this.branchChooserVisible = false;
+        this.variantOverrides.clear();
+        this.variableStore.setDefinitions([]);
+        for (const scope of ['global', 'chapter', 'page', 'session']) {
+            this.variableStore.resetScope(scope);
+        }
+        this.currentChapter = this.currentPanel = this.currentPage = this.effectivePanel = undefined;
+        this.viewMode = 'panel';
+        this.visitedPanelIds = [];
+        this.httpEntitlement = undefined;
+        this.hasError = false;
+        this.errorMessage = '';
+        await this.initializePlayer();
+    }
+    /** Content locale + GUI language follow `locale`. */
+    applyLocale() {
+        this.playerState.setLocale(this.locale);
+        this.translationService.setLanguage(this.locale);
+    }
+    /** Apply a changed `viewModeOverride` to the running view. */
+    applyViewModeOverride() {
+        const before = this.viewMode;
+        if (this.viewModeOverride === 'panel' && this.viewMode === 'page') {
+            this.viewMode = 'panel';
+            this.videoSequencer.reset();
+        }
+        else {
+            this.updateCanvasAvailability();
+        }
+        if (this.viewMode === before) {
+            return;
+        }
+        if (this.viewMode === 'canvas') {
+            this.jumpCameraToCurrentPanel();
+        }
+        if (this.autoplayEnabled) {
+            this.startAutoplay();
+        }
+    }
     /**
      * Cleanup on destroy
      */
@@ -17029,8 +17318,7 @@ class PlayerShellComponent {
                 this.variableStore.seed(context);
             }
             // Set initial locale and configure translations
-            this.playerState.setLocale(this.locale);
-            this.translationService.setLanguage(this.locale);
+            this.applyLocale();
             // Check if page view is available
             const loadedManifest = this.manifestService.getManifest();
             if (loadedManifest?.chapters) {
@@ -17065,12 +17353,19 @@ class PlayerShellComponent {
             }
             // Subscribe to state changes
             this.subscribeToStateChanges();
+            // The host's `autoplay` input decides at start; the reader's toolbar
+            // toggle takes over afterwards.
+            if (this.autoplay && !this.autoplayEnabled) {
+                this.onToggleAutoplay();
+            }
             this.loading = false;
             this.ready.emit();
         }
         catch (err) {
             this.handleError(err);
         }
+        // Async completion (e.g. a reload from ngOnChanges): repaint the OnPush view.
+        this.cdr.markForCheck();
     }
     /**
      * Configure the TrackingService from the manifest's `tracking` section:
@@ -17225,6 +17520,10 @@ class PlayerShellComponent {
      * Subscribe to state changes
      */
     subscribeToStateChanges() {
+        if (this.stateSubscribed) {
+            return;
+        }
+        this.stateSubscribed = true;
         // Listen to panel changes
         this.playerState.currentPanel$
             .pipe(takeUntil(this.destroy$))
@@ -17294,8 +17593,11 @@ class PlayerShellComponent {
      * @param transition - Optional transition to render for this panel change
      *   (already resolved against the outputPresets default). Omitted for
      *   non-adjacent jumps (TOC, initial load), which swap instantly.
+     * @param mutations - Variable mutations of the traversed edge. Applied only
+     *   once the navigation is allowed (after the paywall / age gate), so a
+     *   blocked attempt never changes story state.
      */
-    async navigateToPanel(chapterId, panelId, transition, cameraMove) {
+    async navigateToPanel(chapterId, panelId, transition, cameraMove, mutations) {
         try {
             this.viewportTransition = transition ?? null;
             // Check entitlement. A host-supplied adapter still wins — it is the
@@ -17304,10 +17606,11 @@ class PlayerShellComponent {
             if (this.entitlementAdapter) {
                 const hasAccess = await this.entitlementAdapter.hasAccess(panelId);
                 if (!hasAccess) {
-                    this.openPaywall(this.paywallService.gateFor(panelId) ?? {
+                    this.openPaywall(this.paywallService.gateFor(panelId, this.locale) ?? {
                         scope: 'panel',
                         refId: panelId,
-                        reason: 'This content requires an entitlement to access.',
+                        reason: PaywallService.readerMessage(null),
+                        lockReason: 'entitlement_required',
                     });
                     return;
                 }
@@ -17318,10 +17621,10 @@ class PlayerShellComponent {
                 // the last panel they were entitled to see.
                 if (this.paywallService.evaluate(panelId).reason === 'age_verification_required') {
                     // An age gate is answered in-player (birth date), not by checkout.
-                    this.openAgeGate(chapterId, panelId, transition, cameraMove);
+                    this.openAgeGate(chapterId, panelId, transition, cameraMove, mutations);
                     return;
                 }
-                const gate = this.paywallService.gateFor(panelId);
+                const gate = this.paywallService.gateFor(panelId, this.locale);
                 if (gate) {
                     this.openPaywall(gate);
                     return;
@@ -17335,6 +17638,10 @@ class PlayerShellComponent {
             if (!panelData) {
                 throw new Error(`Panel not found: ${panelId}`);
             }
+            // Edge `action` mutations (schema: "applied when traversing this edge").
+            if (mutations?.length) {
+                this.variableStore.applyMutations(mutations, { chapterId });
+            }
             const chapterChanged = this.currentChapter !== chapter;
             const leavingPanelId = this.getCurrentPanelId();
             this.currentChapter = chapter;
@@ -17469,7 +17776,8 @@ class PlayerShellComponent {
     buildExtrasList(manifest) {
         // Media (images / video / audio / thumbnails) resolve through the asset
         // catalog; see utils/extras-utils.ts for the ExtraBlock mapping.
-        this.extrasList = extrasFromManifest(manifest?.extras, (assetId) => this.manifestService.getAsset(assetId));
+        // An extras-scoped paywall rule the reader does not satisfy locks its block.
+        this.extrasList = extrasFromManifest(manifest?.extras, (assetId) => this.manifestService.getAsset(assetId)).map((extra) => (this.paywallService.isExtraLocked(extra.id) ? { ...extra, gated: true } : extra));
     }
     /**
      * Canvas view is available when the current chapter has a canvas layout
@@ -17529,12 +17837,7 @@ class PlayerShellComponent {
                 return;
             const result = this.flowEngine.getNextPanel(this.currentChapter.graph, currentPanelId, context, this.flowEngine.getDefaultTransition(this.manifestService.getManifest()?.settings), this.flowEngine.getDefaultCameraMove(this.manifestService.getManifest()?.settings));
             if (result.nextPanelId) {
-                // Edge `action` mutations (schema: "applied when traversing this
-                // edge") were returned by the flow engine but never applied here.
-                if (result.action?.length) {
-                    this.variableStore.applyMutations(result.action, { chapterId: this.currentChapter.id });
-                }
-                await this.navigateToPanel(this.currentChapter.id, result.nextPanelId, result.transition, result.cameraMove);
+                await this.navigateToPanel(this.currentChapter.id, result.nextPanelId, result.transition, result.cameraMove, result.action);
             }
         }
         catch (err) {
@@ -17663,16 +17966,7 @@ class PlayerShellComponent {
         else if (newMode === 'canvas') {
             this.viewMode = 'canvas';
             this.videoSequencer.reset();
-            // Land the camera on the current panel when entering canvas view.
-            if (this.currentChapter) {
-                const panelId = this.getCurrentPanelId();
-                if (panelId) {
-                    const placement = this.currentChapter.canvas?.placements?.[panelId];
-                    if (placement) {
-                        this.canvasCamera.jumpTo(this.canvasCamera.frameForPlacement(placement));
-                    }
-                }
-            }
+            this.jumpCameraToCurrentPanel();
         }
         else {
             // Switch to panel view
@@ -17685,6 +17979,14 @@ class PlayerShellComponent {
         }
         console.log('View mode:', this.viewMode);
     }
+    /** Land the canvas camera on the current panel (entering canvas view). */
+    jumpCameraToCurrentPanel() {
+        const panelId = this.getCurrentPanelId();
+        const placement = panelId ? this.currentChapter?.canvas?.placements?.[panelId] : undefined;
+        if (placement) {
+            this.canvasCamera.jumpTo(this.canvasCamera.frameForPlacement(placement));
+        }
+    }
     /**
      * Tap on a placed panel in canvas view. Traverses the matching out-edge of
      * the current panel when its condition passes (the graph still gates
@@ -17707,7 +18009,7 @@ class PlayerShellComponent {
         if (edge) {
             this.navigationAttempt.emit({ direction: 'panel', target: panelId });
             void this.navigateToPanel(this.currentChapter.id, panelId, edge.transition, edge.cameraMove ??
-                this.flowEngine.getDefaultCameraMove(this.manifestService.getManifest()?.settings));
+                this.flowEngine.getDefaultCameraMove(this.manifestService.getManifest()?.settings), edge.action);
             return;
         }
         if (this.visitedPanelIds.includes(panelId)) {
@@ -17715,6 +18017,14 @@ class PlayerShellComponent {
             void this.navigateToPanel(this.currentChapter.id, panelId);
         }
     }
+    /**
+     * The manifest actually loaded — from `manifest` or fetched via
+     * `manifestUrl`. Everything that lists the work (ToC, thumbnails) binds to
+     * this, never to the `manifest` input, which is unset for URL loading.
+     */
+    get loadedManifest() {
+        return this.manifestService.getManifest() ?? undefined;
+    }
     /** Balloon defaults for the canvas stage (same source as the viewport). */
     get manifestBalloonConfig() {
         return this.manifestService.getManifest()?.settings?.typography?.balloon_config ?? null;
@@ -17728,12 +18038,9 @@ class PlayerShellComponent {
         return this.manifestService.getManifest()?.settings?.preload ?? null;
     }
     onLocaleChange(locale) {
-        // Update content locale
+        // Content locale and GUI language stay in sync.
         this.locale = locale;
-        this.playerState.setLocale(locale);
-        // Update GUI language (sync with content locale)
-        this.translationService.setLanguage(locale);
-        console.log('Locale changed to:', locale);
+        this.applyLocale();
     }
     onToggleSpeech() {
         this.setSpeechEnabled(!this.speechEnabled);
@@ -18055,7 +18362,15 @@ class PlayerShellComponent {
      */
     handleKeyboard(event) {
         // Don't handle if user is typing in an input
-        if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
+        if (event.target instanceof HTMLInputElement ||
+            event.target instanceof HTMLTextAreaElement ||
+            event.target instanceof HTMLSelectElement) {
+            return;
+        }
+        // The paywall and the age gate block the story: no shortcut may move
+        // past them. Their own Escape handling applies (paywall: "Maybe later"
+        // dismisses; age gate: dismiss keeps the reader where they were).
+        if (this.paywallVisible || this.ageGateVisible) {
             return;
         }
         // While a dialog is open the story behind it must not react: Escape
@@ -18192,6 +18507,9 @@ class PlayerShellComponent {
      * Handle swipe gesture
      */
     onSwipe(direction) {
+        if (this.paywallVisible || this.ageGateVisible) {
+            return;
+        }
         if (direction === 'left') {
             // Swipe left = navigate forward
             if (this.viewMode === 'page') {
@@ -18589,9 +18907,11 @@ class PlayerShellComponent {
      */
     onPaywallAction(action) {
         const gate = this.paywallGate;
+        const productId = action === 'purchase' || action === 'subscribe' ? this.paywallProductId : undefined;
         if (gate) {
-            this.paywallAction.emit({ action, gate });
+            this.paywallAction.emit({ action, gate, ...(productId ? { productId } : {}) });
         }
+        this.paywallProductId = undefined;
         this.closePaywall();
     }
     /**
@@ -18608,6 +18928,10 @@ class PlayerShellComponent {
             await this.httpEntitlement.resolveEntitlement({ workId: manifest?.meta?.id ?? '' });
             this.paywallService.setSnapshot(this.httpEntitlement.getSnapshot());
         }
+        // What the host passed replaces the snapshot wholesale; an age check the
+        // reader already passed on this device still counts.
+        this.restoreAgeVerification();
+        this.buildExtrasList(this.manifestService.getManifest() ?? null);
         const gatedPanelId = this.paywallGate?.refId ?? this.getCurrentPanelId();
         if (gatedPanelId && this.paywallService.canAccess(gatedPanelId)) {
             this.closePaywall();
@@ -18616,9 +18940,9 @@ class PlayerShellComponent {
     // ── Age gate ──────────────────────────────────────────────────────────────
     static { this.AGE_VERIFIED_STORAGE_KEY = 'pw-age-verified'; }
     /** Raise the age gate for a panel and remember where the reader was going. */
-    openAgeGate(chapterId, panelId, transition, cameraMove) {
+    openAgeGate(chapterId, panelId, transition, cameraMove, mutations) {
         this.ageGateMinimumAge = this.paywallService.ruleFor(panelId)?.minimumAge ?? 18;
-        this.pendingAgeGatedNavigation = { chapterId, panelId, transition, cameraMove };
+        this.pendingAgeGatedNavigation = { chapterId, panelId, transition, cameraMove, mutations };
         this.ageGateVisible = true;
         this.cdr.markForCheck();
     }
@@ -18648,8 +18972,11 @@ class PlayerShellComponent {
         this.ageGateVisible = false;
         this.pendingAgeGatedNavigation = null;
         this.cdr.markForCheck();
-        if (pending && this.paywallService.canAccess(pending.panelId)) {
-            await this.navigateToPanel(pending.chapterId, pending.panelId, pending.transition, pending.cameraMove);
+        // Retry the move: navigateToPanel re-checks the gate, so a rule that
+        // also needs a purchase / subscription now raises the paywall (with its
+        // Buy / Subscribe options) instead of letting the reader through.
+        if (pending) {
+            await this.navigateToPanel(pending.chapterId, pending.panelId, pending.transition, pending.cameraMove, pending.mutations);
         }
     }
     persistAgeVerification(age) {
@@ -18725,41 +19052,43 @@ class PlayerShellComponent {
                 bookmark.panelId === this.getCurrentPanelId();
     }
     // ── Branch choices ────────────────────────────────────────────────────────
-    /** More than one edge leaves the current panel — the toolbar shows "Choices". */
+    /**
+     * At least two paths out of the current panel are open right now (edge
+     * conditions evaluated exactly like the chooser does) — the toolbar shows
+     * "Choices". A closed conditional edge does not count.
+     */
     get hasBranchesAhead() {
-        const panelId = this.getCurrentPanelId();
-        const edges = this.currentChapter?.graph?.edges;
-        if (!panelId || !edges) {
-            return false;
-        }
-        let count = 0;
-        for (const edge of edges) {
-            if (edge.from === panelId && ++count > 1) {
-                return true;
-            }
-        }
-        return false;
+        return this.openEdges().length > 1;
     }
-    /** Outgoing edges whose conditions pass right now, with reader-facing labels. */
-    computeBranchChoices() {
+    /** Outgoing edges of the current panel whose conditions pass right now. */
+    openEdges() {
         const chapter = this.currentChapter;
         const panelId = this.getCurrentPanelId();
-        if (!chapter?.graph || !panelId) {
+        if (!chapter || !panelId) {
             return [];
         }
+        const outgoing = chapter.graph?.edges?.filter((edge) => edge.from === panelId) ?? [];
+        if (!outgoing.some((edge) => edge.condition)) {
+            // Nothing to evaluate: skip building a variable context on every check.
+            return outgoing;
+        }
         const context = this.variableStore.createContext(chapter.id);
-        return chapter.graph.edges
-            .filter((edge) => edge.from === panelId)
-            .filter((edge) => !edge.condition || evaluateJsonLogic(edge.condition, context))
-            .map((edge, index) => ({ edge, index, label: this.branchLabel(edge, chapter, index) }));
+        return outgoing.filter((edge) => !edge.condition || evaluateJsonLogic(edge.condition, context));
     }
-    branchLabel(edge, chapter, index) {
+    /** Open outgoing edges with reader-facing labels. */
+    computeBranchChoices() {
+        const chapter = this.currentChapter;
+        return chapter
+            ? this.openEdges().map((edge, index) => ({ edge, index, label: this.branchLabel(edge, chapter) }))
+            : [];
+    }
+    branchLabel(edge, chapter) {
         const fromEdge = this.localizedText(edge.label);
         if (fromEdge) {
             return fromEdge;
         }
-        const fromTarget = this.localizedText(chapter.panels?.[edge.to]?.title);
-        return fromTarget || `Option ${index + 1}`;
+        // Neither: the chooser renders a translated "Option N".
+        return this.localizedText(chapter.panels?.[edge.to]?.title);
     }
     localizedText(value) {
         if (!value) {
@@ -18784,13 +19113,10 @@ class PlayerShellComponent {
             to: choice.edge.to,
             index: choice.index,
         });
-        if (choice.edge.action?.length) {
-            this.variableStore.applyMutations(choice.edge.action, { chapterId: chapter.id });
-        }
-        await this.navigateToPanel(chapter.id, choice.edge.to, choice.edge.transition ?? this.flowEngine.getDefaultTransition(settings), choice.edge.cameraMove ?? this.flowEngine.getDefaultCameraMove(settings));
+        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], 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)=\"ngOnInit()\">\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]=\"manifest?.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          [locale]=\"locale\"\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]=\"manifest\"\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: "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImport: i0, type: PlayerShellComponent, decorators: [{
             type: Component,
@@ -18812,7 +19138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
                         ShareModalComponent,
                         CommentsDrawerComponent,
                         PwIconComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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)=\"ngOnInit()\">\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]=\"manifest?.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          [locale]=\"locale\"\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]=\"manifest\"\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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
         }], propDecorators: { manifest: [{
                 type: Input
             }], manifestUrl: [{
@@ -18978,5 +19304,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ANONYMOUS_READER, ActionModalComponent, AgeGateComponent, AudioEngineService, BranchChooserComponent, CANVAS_PANEL_BUDGET, CanvasCameraService, CanvasStageComponent, ComicBalloon, DEFAULT_BALLOON_CONFIG, DEFAULT_STALL_TIMEOUT_MS, DEFAULT_VIDEO_MUTED, DEFAULT_VIDEO_PLAY_MODE, DEFAULT_VIDEO_START_MODE, EntitlementError, EntitlementService, ExportService, FlowEngineService, HotspotActionService, HotspotsOverlayComponent, HttpEntitlementAdapter, ImageCacheService, ManifestService, MockEntitlementAdapter, NullEntitlementAdapter, PANEL_AUDIO_LEAVE_FADE_MS, PanelAudioService, PaywallOverlayComponent, PaywallService, PlayerComponent, PlayerEvent, PlayerService, PlayerShellComponent, PlayerStateService, PluginHostService, PluginSandboxComponent, PreloadService, PwIconComponent, RESERVED_NAMESPACES, SpeechBubblesComponent, TrackingService, TranslationService, UserGestureService, VISIBILITY_THRESHOLD, VariableStoreService, VideoControllerService, VideoLayerComponent, VideoSequencerService, VisibilityService, applyVariantOverrides, balloonConfigToRenderOptions, balloonConfigToTailOptions, busForRole, createBalloon, evaluatePanelAccess, evaluateWorkAccess, findWorkGateRule, fromManifestRule, mergeBalloonConfig, readingOrderFromManifest, resolveMuted, resolvePanelVariant, resolvePanels, resolvePlayMode, resolveStartMode, resolveVideoConfig, rulesFromManifest, satisfiesRule, selectVariant, toEntitlementStatus };
+export { ANONYMOUS_READER, ActionModalComponent, AgeGateComponent, AudioEngineService, BranchChooserComponent, CANVAS_PANEL_BUDGET, CanvasCameraService, CanvasStageComponent, ComicBalloon, DEFAULT_BALLOON_CONFIG, DEFAULT_STALL_TIMEOUT_MS, DEFAULT_VIDEO_MUTED, DEFAULT_VIDEO_PLAY_MODE, DEFAULT_VIDEO_START_MODE, EntitlementError, EntitlementService, ExportService, FlowEngineService, HotspotActionService, HotspotsOverlayComponent, HttpEntitlementAdapter, ImageCacheService, ManifestService, MockEntitlementAdapter, NullEntitlementAdapter, PANEL_AUDIO_LEAVE_FADE_MS, PanelAudioService, PaywallOverlayComponent, PaywallService, PlayerComponent, PlayerEvent, PlayerService, PlayerShellComponent, PlayerStateService, PluginHostService, PluginSandboxComponent, PreloadService, PwIconComponent, RESERVED_NAMESPACES, SpeechBubblesComponent, TrackingService, TranslationService, UserGestureService, VISIBILITY_THRESHOLD, VariableStoreService, VideoControllerService, VideoLayerComponent, VideoSequencerService, VisibilityService, applyVariantOverrides, balloonConfigToRenderOptions, balloonConfigToTailOptions, busForRole, chapterOrderFromManifest, createBalloon, evaluatePanelAccess, evaluateWorkAccess, findWorkGateRule, fromManifestRule, isExtraLocked, mergeBalloonConfig, readingOrderFromManifest, resolveMuted, resolvePanelVariant, resolvePanels, resolvePlayMode, resolveStartMode, resolveVideoConfig, rulesFromManifest, satisfiesRule, selectVariant, toEntitlementStatus };
 //# sourceMappingURL=panelwave-player.mjs.map