@kawaijs/renderer-dom 0.1.11 → 0.1.12

package/dist/components/main-menu.js

@@ -0,0 +1,257 @@
+import { SVG_ICONS } from '../icons.js';
+import { showSaveLoadModal } from '../modals/save-load-modal.js';
+import { showSettingsModal } from '../modals/settings-modal.js';
+import { showAboutModal } from '../modals/about-modal.js';
+import { showConfirmModal } from '../modals/confirm-modal.js';
+import { showGalleryModal } from '../modals/gallery-modal.js';
+import { showAchievementsModal } from '../modals/achievements-modal.js';
+import { escapeHtml } from '../utils/rich-text.js';
+export class MainMenuComponent {
+    vm;
+    rootEl;
+    options;
+    callbacks;
+    menuEl;
+    isVisible = false;
+    constructor(rootEl, vm, options, callbacks) {
+        this.rootEl = rootEl;
+        this.vm = vm;
+        this.options = options;
+        this.callbacks = callbacks;
+    }
+    mount(container) {
+        if (!this.menuEl) {
+            this.buildDOM();
+        }
+        if (this.menuEl) {
+            container.appendChild(this.menuEl);
+        }
+    }
+    show() {
+        if (!this.menuEl) {
+            this.buildDOM();
+        }
+        if (!this.menuEl)
+            return;
+        this.isVisible = true;
+        this.refresh();
+        this.menuEl.style.display = 'flex';
+        this.menuEl.classList.add('active');
+        this.options?.onOpen?.();
+    }
+    hide() {
+        if (!this.menuEl)
+            return;
+        this.isVisible = false;
+        this.menuEl.classList.remove('active');
+        this.menuEl.style.display = 'none';
+        this.options?.onClose?.();
+    }
+    isActive() {
+        return this.isVisible;
+    }
+    refresh() {
+        if (!this.menuEl)
+            return;
+        // Check if saves exist to enable/disable the "Continue" button
+        const continueBtn = this.menuEl.querySelector('button[data-action="continue"]');
+        if (continueBtn) {
+            void this.vm.getSaveManager().listSlots(6).then((slots) => {
+                const hasSaves = slots.some((s) => s !== null);
+                if (!hasSaves) {
+                    continueBtn.classList.add('disabled');
+                    continueBtn.setAttribute('aria-disabled', 'true');
+                    continueBtn.disabled = true;
+                }
+                else {
+                    continueBtn.classList.remove('disabled');
+                    continueBtn.removeAttribute('aria-disabled');
+                    continueBtn.disabled = false;
+                }
+            });
+        }
+    }
+    getDefaultMenuItems() {
+        const items = [
+            {
+                id: 'start',
+                label: 'Start Game',
+                icon: SVG_ICONS.play,
+                action: 'start'
+            },
+            {
+                id: 'continue',
+                label: 'Continue',
+                icon: SVG_ICONS.auto,
+                action: 'continue'
+            },
+            {
+                id: 'load',
+                label: 'Load Game',
+                icon: SVG_ICONS.load,
+                action: 'load'
+            }
+        ];
+        if (this.options?.galleryItems && this.options.galleryItems.length > 0) {
+            items.push({
+                id: 'gallery',
+                label: 'CG Gallery',
+                icon: SVG_ICONS.image,
+                action: 'gallery'
+            });
+        }
+        items.push({
+            id: 'achievements',
+            label: 'Achievements',
+            icon: SVG_ICONS.bookmark,
+            action: 'achievements'
+        });
+        items.push({
+            id: 'settings',
+            label: 'Preferences',
+            icon: SVG_ICONS.settings,
+            action: 'settings'
+        }, {
+            id: 'about',
+            label: 'About',
+            icon: SVG_ICONS.info,
+            action: 'about'
+        }, {
+            id: 'quit',
+            label: 'Quit',
+            icon: SVG_ICONS.power,
+            action: 'quit'
+        });
+        return items;
+    }
+    buildDOM() {
+        this.menuEl = document.createElement('div');
+        this.menuEl.className = 'kawa-main-menu';
+        this.menuEl.setAttribute('role', 'region');
+        this.menuEl.setAttribute('aria-label', 'Main Menu');
+        this.menuEl.style.display = 'none';
+        if (this.options?.backgroundUrl) {
+            const bgUrl = this.callbacks.assetResolver(this.options.backgroundUrl, 'background');
+            this.menuEl.style.backgroundImage = `url("${bgUrl}")`;
+            this.menuEl.style.backgroundSize = 'cover';
+            this.menuEl.style.backgroundPosition = 'center';
+        }
+        const backdropEl = document.createElement('div');
+        backdropEl.className = 'kawa-main-menu-backdrop';
+        const contentEl = document.createElement('div');
+        contentEl.className = 'kawa-main-menu-content';
+        const headerEl = document.createElement('div');
+        headerEl.className = 'kawa-main-menu-header';
+        if (this.options?.logoUrl) {
+            const logoEl = document.createElement('img');
+            logoEl.className = 'kawa-main-menu-logo';
+            logoEl.src = this.callbacks.assetResolver(this.options.logoUrl, 'background');
+            logoEl.alt = 'Logo';
+            headerEl.appendChild(logoEl);
+        }
+        const storyMeta = this.vm.getStory()?.meta;
+        const defaultTitle = storyMeta?.title || 'Kawaijs Visual Novel';
+        const defaultSubtitle = storyMeta?.author ? `By ${storyMeta.author}` : 'A web-native visual novel';
+        const titleEl = document.createElement('h1');
+        titleEl.className = 'kawa-main-menu-title';
+        titleEl.textContent = this.options?.title || defaultTitle;
+        headerEl.appendChild(titleEl);
+        const subEl = document.createElement('div');
+        subEl.className = 'kawa-main-menu-subtitle';
+        subEl.textContent = this.options?.subtitle ?? defaultSubtitle;
+        headerEl.appendChild(subEl);
+        const navEl = document.createElement('nav');
+        navEl.className = 'kawa-main-menu-nav';
+        navEl.setAttribute('role', 'navigation');
+        const items = this.options?.items ?? this.getDefaultMenuItems();
+        for (const item of items) {
+            if (item.condition && !item.condition())
+                continue;
+            const btn = document.createElement('button');
+            btn.type = 'button';
+            btn.className = `kawa-main-menu-btn ${item.className || ''}`.trim();
+            btn.setAttribute('data-action', typeof item.action === 'string' ? item.action : 'custom');
+            // Avoid bare ids like "start" which can collide with window/location quirks in some browsers.
+            if (item.id)
+                btn.id = `kawa-menu-${item.id}`;
+            btn.innerHTML = `${item.icon ? item.icon + ' ' : ''}<span>${escapeHtml(item.label)}</span>`;
+            if (item.action === 'continue') {
+                void this.vm.getSaveManager().listSlots(6).then((slots) => {
+                    const hasSaves = slots.some((s) => s !== null);
+                    if (!hasSaves) {
+                        btn.classList.add('disabled');
+                        btn.setAttribute('aria-disabled', 'true');
+                        btn.disabled = true;
+                    }
+                });
+            }
+            btn.addEventListener('click', (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                if (btn.classList.contains('disabled') || btn.disabled)
+                    return;
+                if (item.action === 'start') {
+                    this.callbacks.onStartNewGame();
+                    this.hide();
+                }
+                else if (item.action === 'continue') {
+                    void this.callbacks.onContinueGame().then((ok) => {
+                        if (ok)
+                            this.hide();
+                    });
+                }
+                else if (item.action === 'load') {
+                    void showSaveLoadModal(this.rootEl, this.vm, 'load', () => {
+                        this.hide();
+                    });
+                }
+                else if (item.action === 'gallery') {
+                    const galleryItems = this.options?.galleryItems ?? [];
+                    showGalleryModal(this.rootEl, this.vm, galleryItems, (path) => this.callbacks.assetResolver(path, 'background'));
+                }
+                else if (item.action === 'achievements') {
+                    showAchievementsModal(this.rootEl, this.vm, this.vm.getStory().achievements ?? []);
+                }
+                else if (item.action === 'settings') {
+                    showSettingsModal(this.rootEl, this.callbacks.getSettingsConfig());
+                }
+                else if (item.action === 'about') {
+                    showAboutModal(this.rootEl, this.options);
+                }
+                else if (item.action === 'quit') {
+                    if (this.options?.onQuit) {
+                        this.options.onQuit();
+                    }
+                    else {
+                        showConfirmModal(this.rootEl, {
+                            title: 'Quit Visual Novel',
+                            message: 'Are you sure you want to quit?',
+                            confirmText: 'Quit',
+                            cancelText: 'Cancel',
+                            onConfirm: () => {
+                                if (typeof window !== 'undefined') {
+                                    window.close();
+                                }
+                            }
+                        });
+                    }
+                }
+                else if (typeof item.action === 'function') {
+                    item.action();
+                }
+            });
+            navEl.appendChild(btn);
+        }
+        const footerEl = document.createElement('footer');
+        footerEl.className = 'kawa-main-menu-footer';
+        footerEl.innerHTML = this.options?.customFooter
+            ? escapeHtml(this.options.customFooter)
+            : `${SVG_ICONS.sakura} <span>Powered by Kawaijs Engine</span>`;
+        contentEl.appendChild(headerEl);
+        contentEl.appendChild(navEl);
+        contentEl.appendChild(footerEl);
+        this.menuEl.appendChild(backdropEl);
+        this.menuEl.appendChild(contentEl);
+    }
+}
+//# sourceMappingURL=main-menu.js.map

package/dist/components/main-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main-menu.js","sourceRoot":"","sources":["../../src/components/main-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/quick-menu.d.ts

@@ -0,0 +1,22 @@
+export interface QuickMenuCallbacks {
+    onTitle: () => void;
+    onBack: () => void;
+    onHistory: () => void;
+    onAuto: () => void;
+    onSkip: () => void;
+    onSave: () => void;
+    onLoad: () => void;
+    onSettings: () => void;
+}
+export declare class QuickMenuComponent {
+    readonly el: HTMLElement;
+    readonly titleBtn: HTMLButtonElement;
+    readonly backBtn: HTMLButtonElement;
+    readonly autoBtn: HTMLButtonElement;
+    readonly skipBtn: HTMLButtonElement;
+    constructor(callbacks: QuickMenuCallbacks);
+    setBackDisabled(disabled: boolean): void;
+    setAutoActive(active: boolean): void;
+    setSkipActive(active: boolean): void;
+}
+//# sourceMappingURL=quick-menu.d.ts.map

package/dist/components/quick-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-menu.d.ts","sourceRoot":"","sources":["../../src/components/quick-menu.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,UAAU,EAAE,MAAM,IAAI,CAAC;CACxB;AAmBD,qBAAa,kBAAkB;IAC7B,SAAgB,EAAE,EAAE,WAAW,CAAC;IAChC,SAAgB,QAAQ,EAAE,iBAAiB,CAAC;IAC5C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;IAC3C,SAAgB,OAAO,EAAE,iBAAiB,CAAC;gBAE/B,SAAS,EAAE,kBAAkB;IAwClC,eAAe,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAIxC,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;IAIpC,aAAa,CAAC,MAAM,EAAE,OAAO,GAAG,IAAI;CAG5C"}

package/dist/components/quick-menu.js

@@ -0,0 +1,59 @@
+import { SVG_ICONS } from '../icons.js';
+function wireButton(btn, html, ariaLabel, onClick) {
+    btn.type = 'button';
+    btn.className = 'kawa-btn';
+    btn.innerHTML = html;
+    btn.setAttribute('aria-label', ariaLabel);
+    btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick();
+    });
+}
+export class QuickMenuComponent {
+    el;
+    titleBtn;
+    backBtn;
+    autoBtn;
+    skipBtn;
+    constructor(callbacks) {
+        this.el = document.createElement('nav');
+        this.el.className = 'kawa-quick-menu';
+        this.el.setAttribute('role', 'toolbar');
+        this.el.setAttribute('aria-label', 'Quick Actions');
+        this.titleBtn = document.createElement('button');
+        wireButton(this.titleBtn, `${SVG_ICONS.home} <span>Title</span>`, 'Return to Title Screen', callbacks.onTitle);
+        this.backBtn = document.createElement('button');
+        wireButton(this.backBtn, `${SVG_ICONS.back} <span>Back</span>`, 'Rollback to previous dialogue', callbacks.onBack);
+        const histBtn = document.createElement('button');
+        wireButton(histBtn, `${SVG_ICONS.history} <span>History</span>`, 'Open dialogue history log', callbacks.onHistory);
+        this.autoBtn = document.createElement('button');
+        wireButton(this.autoBtn, `${SVG_ICONS.auto} <span>Auto</span>`, 'Toggle Auto Forward Mode', callbacks.onAuto);
+        this.skipBtn = document.createElement('button');
+        wireButton(this.skipBtn, `${SVG_ICONS.skip} <span>Skip</span>`, 'Toggle Fast Forward Skip Mode', callbacks.onSkip);
+        const saveBtn = document.createElement('button');
+        wireButton(saveBtn, `${SVG_ICONS.save} <span>Save</span>`, 'Open save game menu', callbacks.onSave);
+        const loadBtn = document.createElement('button');
+        wireButton(loadBtn, `${SVG_ICONS.load} <span>Load</span>`, 'Open load game menu', callbacks.onLoad);
+        const settingsBtn = document.createElement('button');
+        wireButton(settingsBtn, `${SVG_ICONS.settings} <span>Settings</span>`, 'Open Settings Menu', callbacks.onSettings);
+        this.el.appendChild(this.titleBtn);
+        this.el.appendChild(this.backBtn);
+        this.el.appendChild(histBtn);
+        this.el.appendChild(this.autoBtn);
+        this.el.appendChild(this.skipBtn);
+        this.el.appendChild(saveBtn);
+        this.el.appendChild(loadBtn);
+        this.el.appendChild(settingsBtn);
+    }
+    setBackDisabled(disabled) {
+        this.backBtn.disabled = disabled;
+    }
+    setAutoActive(active) {
+        this.autoBtn.classList.toggle('active', active);
+    }
+    setSkipActive(active) {
+        this.skipBtn.classList.toggle('active', active);
+    }
+}
+//# sourceMappingURL=quick-menu.js.map

package/dist/components/quick-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"quick-menu.js","sourceRoot":"","sources":["../../src/components/quick-menu.ts"],"names":[],"mappings":"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"}

package/dist/components/stage-layer.d.ts

@@ -0,0 +1,39 @@
+import type { AssetType } from '../types.js';
+import type { VfxState } from '@kawaijs/runtime';
+import { VfxLayerComponent } from './vfx-layer.js';
+export declare class StageLayerComponent {
+    readonly stageEl: HTMLDivElement;
+    readonly backgroundEl: HTMLDivElement;
+    readonly charactersEl: HTMLDivElement;
+    readonly vfxLayer: VfxLayerComponent;
+    readonly cgEl: HTMLDivElement;
+    readonly modeBadgeEl: HTMLDivElement;
+    private bgLayerA;
+    private bgLayerB;
+    private activeBgLayer;
+    private currentBgUrl;
+    private activeCharacters;
+    private pendingRemovals;
+    private flashTimer;
+    private readonly assetResolver;
+    constructor(assetResolver: (path: string, type: AssetType) => string);
+    updateBackground(background: string | null | undefined, transition: string | null | undefined): void;
+    updateCharacters(characters: Record<string, {
+        expression?: string;
+        position?: string;
+        transition?: string;
+        layer?: string;
+        z?: number;
+        cssAnimation?: {
+            name: string;
+            durationMs?: number;
+            token?: number;
+        };
+    }>): void;
+    updateVfx(vfxState: VfxState | null): void;
+    updateCG(cgPath: string | null): void;
+    shakeScreen(type?: 'shake' | 'vpunch' | 'hpunch'): void;
+    flashScreen(): void;
+    destroy(): void;
+}
+//# sourceMappingURL=stage-layer.d.ts.map

package/dist/components/stage-layer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stage-layer.d.ts","sourceRoot":"","sources":["../../src/components/stage-layer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAInD,qBAAa,mBAAmB;IAC9B,SAAgB,OAAO,EAAE,cAAc,CAAC;IACxC,SAAgB,YAAY,EAAE,cAAc,CAAC;IAC7C,SAAgB,YAAY,EAAE,cAAc,CAAC;IAC7C,SAAgB,QAAQ,EAAE,iBAAiB,CAAC;IAC5C,SAAgB,IAAI,EAAE,cAAc,CAAC;IACrC,SAAgB,WAAW,EAAE,cAAc,CAAC;IAE5C,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,QAAQ,CAAiB;IACjC,OAAO,CAAC,aAAa,CAAkB;IACvC,OAAO,CAAC,YAAY,CAAM;IAE1B,OAAO,CAAC,gBAAgB,CAWpB;IACJ,OAAO,CAAC,eAAe,CAAoF;IAC3G,OAAO,CAAC,UAAU,CAA8C;IAChE,OAAO,CAAC,QAAQ,CAAC,aAAa,CAA4C;gBAE9D,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,KAAK,MAAM;IAyC7D,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI;IAkDpG,gBAAgB,CACrB,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;QACE,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,CAAC,CAAC,EAAE,MAAM,CAAC;QACX,YAAY,CAAC,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,UAAU,CAAC,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAA;SAAE,CAAC;KACtE,CACF,GACA,IAAI;IAqHA,SAAS,CAAC,QAAQ,EAAE,QAAQ,GAAG,IAAI,GAAG,IAAI;IAI1C,QAAQ,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAWrC,WAAW,CAAC,IAAI,GAAE,OAAO,GAAG,QAAQ,GAAG,QAAkB,GAAG,IAAI;IAOhE,WAAW,IAAI,IAAI;IAiBnB,OAAO,IAAI,IAAI;CAYvB"}

package/dist/components/stage-layer.js

@@ -0,0 +1,253 @@
+import { VfxLayerComponent } from './vfx-layer.js';
+import { escapeHtml } from '../utils/rich-text.js';
+import { bindImageSrcFallbacks, characterAssetCandidates } from '../asset-fallbacks.js';
+export class StageLayerComponent {
+    stageEl;
+    backgroundEl;
+    charactersEl;
+    vfxLayer;
+    cgEl;
+    modeBadgeEl;
+    bgLayerA;
+    bgLayerB;
+    activeBgLayer = 'A';
+    currentBgUrl = '';
+    activeCharacters = new Map();
+    pendingRemovals = new Map();
+    flashTimer = null;
+    assetResolver;
+    constructor(assetResolver) {
+        this.assetResolver = assetResolver;
+        this.stageEl = document.createElement('div');
+        this.stageEl.className = 'kawa-stage';
+        this.stageEl.setAttribute('role', 'main');
+        this.stageEl.setAttribute('aria-label', 'Visual Novel Stage');
+        this.backgroundEl = document.createElement('div');
+        this.backgroundEl.className = 'kawa-background';
+        this.backgroundEl.setAttribute('aria-hidden', 'true');
+        this.bgLayerA = document.createElement('div');
+        this.bgLayerA.className = 'kawa-bg-layer active';
+        this.bgLayerB = document.createElement('div');
+        this.bgLayerB.className = 'kawa-bg-layer';
+        this.backgroundEl.appendChild(this.bgLayerA);
+        this.backgroundEl.appendChild(this.bgLayerB);
+        this.charactersEl = document.createElement('div');
+        this.charactersEl.className = 'kawa-characters kawa-sprites';
+        this.charactersEl.setAttribute('aria-hidden', 'true');
+        this.vfxLayer = new VfxLayerComponent();
+        this.cgEl = document.createElement('div');
+        this.cgEl.className = 'kawa-cg-layer';
+        this.cgEl.style.display = 'none';
+        this.modeBadgeEl = document.createElement('div');
+        this.modeBadgeEl.className = 'kawa-mode-badge';
+        this.modeBadgeEl.style.display = 'none';
+        this.stageEl.appendChild(this.backgroundEl);
+        this.stageEl.appendChild(this.charactersEl);
+        this.stageEl.appendChild(this.vfxLayer.el);
+        this.stageEl.appendChild(this.cgEl);
+        this.stageEl.appendChild(this.modeBadgeEl);
+    }
+    updateBackground(background, transition) {
+        if (!background) {
+            this.currentBgUrl = '';
+            this.bgLayerA.style.backgroundImage = '';
+            this.bgLayerB.style.backgroundImage = '';
+            this.bgLayerA.classList.remove('active');
+            this.bgLayerB.classList.remove('active');
+            return;
+        }
+        const transitionName = (transition ?? 'none').toLowerCase();
+        this.backgroundEl.dataset.transition = transitionName;
+        const cleanBg = background.replace(/^bg[\s_]+/i, '').trim();
+        const primaryUrl = this.assetResolver(cleanBg, 'background');
+        if (primaryUrl !== this.currentBgUrl) {
+            this.currentBgUrl = primaryUrl;
+            const crossfade = transitionName === 'fade' ||
+                transitionName === 'dissolve' ||
+                transitionName === 'wipeleft' ||
+                transitionName === 'wiperight';
+            if (crossfade) {
+                const nextLayer = this.activeBgLayer === 'A' ? this.bgLayerB : this.bgLayerA;
+                const curLayer = this.activeBgLayer === 'A' ? this.bgLayerA : this.bgLayerB;
+                nextLayer.style.backgroundImage = `url("${primaryUrl}")`;
+                // Reset wipe classes then apply for this transition
+                nextLayer.classList.remove('kawa-wipe-from-left', 'kawa-wipe-from-right');
+                curLayer.classList.remove('kawa-wipe-from-left', 'kawa-wipe-from-right');
+                if (transitionName === 'wipeleft') {
+                    nextLayer.classList.add('kawa-wipe-from-right');
+                }
+                else if (transitionName === 'wiperight') {
+                    nextLayer.classList.add('kawa-wipe-from-left');
+                }
+                nextLayer.classList.add('active');
+                curLayer.classList.remove('active');
+                this.activeBgLayer = this.activeBgLayer === 'A' ? 'B' : 'A';
+            }
+            else {
+                const curLayer = this.activeBgLayer === 'A' ? this.bgLayerA : this.bgLayerB;
+                curLayer.style.backgroundImage = `url("${primaryUrl}")`;
+                curLayer.classList.add('active');
+            }
+        }
+    }
+    updateCharacters(characters) {
+        const presentChars = new Set(Object.keys(characters));
+        // Remove characters no longer in scene
+        for (const [id, entry] of this.activeCharacters.entries()) {
+            if (!presentChars.has(id)) {
+                entry.div.style.opacity = '0';
+                entry.div.style.transform = `translateY(20px)`;
+                const timer = setTimeout(() => {
+                    entry.div.remove();
+                    this.pendingRemovals.delete(id);
+                }, 350);
+                this.pendingRemovals.set(id, { div: entry.div, timer });
+                this.activeCharacters.delete(id);
+            }
+        }
+        // Add or update active characters
+        for (const [id, charState] of Object.entries(characters)) {
+            if (this.pendingRemovals.has(id)) {
+                const pending = this.pendingRemovals.get(id);
+                clearTimeout(pending.timer);
+                pending.div.remove();
+                this.pendingRemovals.delete(id);
+            }
+            const pos = charState.position ?? 'center';
+            const expr = charState.expression;
+            const z = typeof charState.z === 'number' ? charState.z : 10;
+            const assetKey = expr ? `${id}/${expr}` : id;
+            const candidates = characterAssetCandidates(assetKey, this.assetResolver);
+            if (!this.activeCharacters.has(id)) {
+                const div = document.createElement('div');
+                div.className = `kawa-sprite kawa-pos-${pos}`;
+                div.dataset.character = id;
+                if (expr)
+                    div.dataset.expression = expr;
+                if (charState.layer)
+                    div.dataset.layer = charState.layer;
+                div.style.zIndex = String(z);
+                const img = document.createElement('img');
+                img.alt = `${id} ${expr ?? ''}`;
+                img.decoding = 'async';
+                bindImageSrcFallbacks(img, candidates, () => {
+                    img.style.display = 'none';
+                    if (!div.querySelector('.kawa-sprite-placeholder')) {
+                        const ph = document.createElement('div');
+                        ph.className = 'kawa-sprite-placeholder';
+                        ph.innerHTML = `<span class="kawa-sprite-placeholder-icon">👤</span><span class="kawa-sprite-placeholder-name">${escapeHtml(id)}</span>`;
+                        div.appendChild(ph);
+                    }
+                });
+                div.appendChild(img);
+                this.charactersEl.appendChild(div);
+                this.activeCharacters.set(id, { div, img, expression: expr, position: pos, z });
+            }
+            else {
+                const existing = this.activeCharacters.get(id);
+                // Position change
+                if (existing.position !== pos) {
+                    existing.div.className = `kawa-sprite kawa-pos-${pos}`;
+                    // re-apply css anim class if any
+                    existing.position = pos;
+                }
+                if (existing.z !== z) {
+                    existing.div.style.zIndex = String(z);
+                    existing.z = z;
+                }
+                if (charState.layer) {
+                    existing.div.dataset.layer = charState.layer;
+                }
+                // Expression change
+                if (existing.expression !== expr) {
+                    existing.img.style.display = 'block';
+                    bindImageSrcFallbacks(existing.img, candidates);
+                    existing.expression = expr;
+                    const ph = existing.div.querySelector('.kawa-sprite-placeholder');
+                    if (ph)
+                        ph.remove();
+                    if (expr) {
+                        existing.div.dataset.expression = expr;
+                    }
+                    else {
+                        delete existing.div.dataset.expression;
+                    }
+                }
+                // Sprite Animation/Transition if provided
+                if (charState.transition) {
+                    existing.div.classList.remove('kawa-anim-bounce', 'kawa-anim-shake', 'kawa-anim-nod');
+                    void existing.div.offsetWidth; // Reflow
+                    existing.div.classList.add(`kawa-anim-${charState.transition}`);
+                }
+            }
+            const entry = this.activeCharacters.get(id);
+            // CSS-first animate directive
+            if (charState.cssAnimation && charState.cssAnimation.token !== entry.animToken) {
+                const anim = charState.cssAnimation.name;
+                const className = `kawa-css-anim-${anim}`;
+                entry.div.classList.forEach((cls) => {
+                    if (cls.startsWith('kawa-css-anim-'))
+                        entry.div.classList.remove(cls);
+                });
+                void entry.div.offsetWidth;
+                entry.div.classList.add(className);
+                if (charState.cssAnimation.durationMs) {
+                    entry.div.style.animationDuration = `${charState.cssAnimation.durationMs}ms`;
+                }
+                else {
+                    entry.div.style.removeProperty('animation-duration');
+                }
+                entry.animToken = charState.cssAnimation.token;
+            }
+        }
+    }
+    updateVfx(vfxState) {
+        this.vfxLayer.setVfx(vfxState);
+    }
+    updateCG(cgPath) {
+        if (!cgPath) {
+            this.cgEl.style.display = 'none';
+            this.cgEl.style.backgroundImage = '';
+        }
+        else {
+            const url = this.assetResolver(cgPath, 'background');
+            this.cgEl.style.backgroundImage = `url("${url}")`;
+            this.cgEl.style.display = 'block';
+        }
+    }
+    shakeScreen(type = 'shake') {
+        this.stageEl.classList.remove('kawa-shake', 'kawa-vpunch', 'kawa-hpunch');
+        void this.stageEl.offsetWidth; // Force reflow
+        const cls = type === 'vpunch' ? 'kawa-vpunch' : type === 'hpunch' ? 'kawa-hpunch' : 'kawa-shake';
+        this.stageEl.classList.add(cls);
+    }
+    flashScreen() {
+        const existing = this.stageEl.querySelector('.kawa-flash-overlay');
+        if (existing)
+            existing.remove();
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+            this.flashTimer = null;
+        }
+        const flash = document.createElement('div');
+        flash.className = 'kawa-flash-overlay';
+        this.stageEl.appendChild(flash);
+        this.flashTimer = setTimeout(() => {
+            this.flashTimer = null;
+            flash.remove();
+        }, 600);
+    }
+    destroy() {
+        this.vfxLayer.destroy();
+        if (this.flashTimer) {
+            clearTimeout(this.flashTimer);
+            this.flashTimer = null;
+        }
+        for (const pending of this.pendingRemovals.values()) {
+            clearTimeout(pending.timer);
+        }
+        this.pendingRemovals.clear();
+        this.activeCharacters.clear();
+    }
+}
+//# sourceMappingURL=stage-layer.js.map