@kawaijs/renderer-dom 0.1.11 → 0.1.12

package/dist/renderer.js

@@ -1,125 +1,126 @@
-export function defaultAssetResolver(path, type) {
-    if (path.startsWith('http://') ||
-        path.startsWith('https://') ||
-        path.startsWith('data:') ||
-        path.startsWith('/') ||
-        path.startsWith('./')) {
-        return path;
-    }
-    if (type === 'background') {
-        const clean = path.replace(/^bg[\s_]+/i, '').trim();
-        return clean.includes('.') ? `assets/backgrounds/${clean}` : `assets/backgrounds/${clean}.svg`;
-    }
-    if (type === 'character') {
-        const clean = path.replace(/_/g, '/').replace(/\s+/g, '/').trim();
-        return clean.includes('.') ? `assets/characters/${clean}` : `assets/characters/${clean}.svg`;
-    }
-    if (type === 'audio') {
-        return path.includes('.') ? `assets/audio/${path}` : `assets/audio/${path}.mp3`;
-    }
-    return path;
-}
-/**
- * Preload all background and character assets mentioned in a story to eliminate visual flashes.
- */
-export function preloadStoryAssets(story, assetResolver = defaultAssetResolver) {
-    if (typeof window === 'undefined')
-        return;
-    const bgSet = new Set();
-    const charSet = new Set();
+import { AudioManager } from '@kawaijs/audio';
+import { SVG_ICONS } from './icons.js';
+import { defaultAssetResolver } from './types.js';
+import { StageLayerComponent } from './components/stage-layer.js';
+import { DialogueBoxComponent } from './components/dialogue-box.js';
+import { ChoiceMenuComponent } from './components/choice-menu.js';
+import { QuickMenuComponent } from './components/quick-menu.js';
+import { MainMenuComponent } from './components/main-menu.js';
+import { HotspotLayerComponent } from './components/hotspot-layer.js';
+import { showSaveLoadModal } from './modals/save-load-modal.js';
+import { showSettingsModal } from './modals/settings-modal.js';
+import { showHistoryModal } from './modals/history-modal.js';
+import { showAboutModal } from './modals/about-modal.js';
+import { showGalleryModal } from './modals/gallery-modal.js';
+import { showInputModal } from './modals/input-modal.js';
+import { escapeHtml } from './utils/rich-text.js';
+import { ViewportAdapter } from './layout/viewport-adapter.js';
+import { applyDocumentShareMeta, buildSceneShareMeta, resolveShareAssetUrl } from './share-meta.js';
+import { bindSwipeControls } from './touch.js';
+export * from './icons.js';
+export * from './types.js';
+export * from './asset-fallbacks.js';
+export * from './utils/rich-text.js';
+export * from './utils/focus-trap.js';
+export * from './layout/viewport-adapter.js';
+export * from './modals/save-load-modal.js';
+export * from './modals/settings-modal.js';
+export * from './modals/history-modal.js';
+export * from './modals/about-modal.js';
+export * from './modals/gallery-modal.js';
+export * from './modals/achievements-modal.js';
+export * from './modals/confirm-modal.js';
+export * from './modals/input-modal.js';
+export * from './components/main-menu.js';
+export * from './components/dialogue-box.js';
+export * from './components/choice-menu.js';
+export * from './components/quick-menu.js';
+export * from './components/stage-layer.js';
+export * from './components/vfx-layer.js';
+export * from './share-meta.js';
+export * from './embed.js';
+export * from './touch.js';
+export function extractGalleryItems(story) {
+    if (!story || !story.labels)
+        return [];
+    const itemsMap = new Map();
     for (const label of Object.values(story.labels)) {
         for (const inst of label) {
-            if (inst.type === 'scene' && inst.background) {
-                const clean = inst.background.replace(/^bg[\s_]+/i, '').trim();
-                bgSet.add(clean);
-            }
-            else if (inst.type === 'show') {
-                const key = inst.expression ? `${inst.character}/${inst.expression}` : inst.character;
-                charSet.add(key);
+            if (inst.type === 'cg' && inst.image) {
+                const id = inst.unlockId ?? inst.image;
+                if (!itemsMap.has(id)) {
+                    const rawBase = (inst.unlockId || inst.image).split(/[/\\]/).pop() || '';
+                    const cleanName = rawBase.replace(/^cg[\s_]+/i, '').replace(/\.[^/.]+$/, '').replace(/[_-]+/g, ' ');
+                    const title = cleanName ? cleanName.charAt(0).toUpperCase() + cleanName.slice(1) : 'Event CG';
+                    itemsMap.set(id, {
+                        id,
+                        title,
+                        image: inst.image
+                    });
+                }
             }
         }
     }
-    for (const bg of bgSet) {
-        const img = new Image();
-        img.src = assetResolver(bg, 'background');
-    }
-    for (const char of charSet) {
-        const img = new Image();
-        img.src = assetResolver(char, 'character');
-    }
-}
-export const SVG_ICONS = {
-    back: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>',
-    history: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 15"/></svg>',
-    save: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>',
-    load: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>',
-    auto: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>',
-    skip: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" y1="5" x2="19" y2="19"/></svg>',
-    settings: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
-    volumeOn: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"/></svg>',
-    volumeMute: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>',
-    trash: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
-    close: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
-    arrowDown: '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>',
-    replay: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/></svg>'
-};
-/**
- * Parses inline rich text markup: {b}...{/b}, {i}...{/i}, {color=#hex}...{/color}, {size=1.2em}...{/size}
- */
-export function formatRichText(raw) {
-    let formatted = raw
-        .replace(/&/g, '&amp;')
-        .replace(/</g, '&lt;')
-        .replace(/>/g, '&gt;');
-    // {b}...{/b}
-    formatted = formatted.replace(/\{b\}(.*?)\{\/b\}/gi, '<strong class="kawa-bold">$1</strong>');
-    // {i}...{/i}
-    formatted = formatted.replace(/\{i\}(.*?)\{\/i\}/gi, '<em class="kawa-italic">$1</em>');
-    // {color=#hex}...{/color}
-    formatted = formatted.replace(/\{color=([^}]+)\}(.*?)\{\/color\}/gi, '<span style="color:$1">$2</span>');
-    // {size=1.2em}...{/size}
-    formatted = formatted.replace(/\{size=([^}]+)\}(.*?)\{\/size\}/gi, '<span style="font-size:$1">$2</span>');
-    return formatted;
+    return Array.from(itemsMap.values());
 }
 export class DOMRenderer {
     vm;
     container;
+    options;
     typewriterSpeed;
     autoDelayMs;
+    musicVolume;
+    soundVolume;
     assetResolver;
+    mainMenuOptions;
+    audioManager;
     rootEl;
-    stageEl;
-    backgroundEl;
-    bgLayerA;
-    bgLayerB;
-    activeBgLayer = 'A';
-    currentBgUrl = '';
-    charactersEl;
-    activeCharacters = new Map();
-    modeBadgeEl;
-    dialogueBoxEl;
-    speakerTagEl;
-    dialogueTextEl;
-    choiceContainerEl;
-    backBtnEl;
-    autoBtnEl;
-    skipBtnEl;
-    currentTypewriterInterval = null;
-    isTypewriting = false;
-    fullCurrentText = '';
-    isChoicePending = false;
+    stageLayer;
+    dialogueBox;
+    choiceMenu;
+    hotspotLayer;
+    quickMenu;
+    mainMenu;
+    viewportAdapter;
+    appliedStyleTargets = new Set();
     isAutoMode = false;
     isSkipMode = false;
     autoTimer = null;
     skipInterval = null;
+    pauseTimer = null;
+    errorToastTimer = null;
+    advanceLockUntil = 0;
+    destroyed = false;
     unsubscribeVMState;
+    unsubscribeCamera;
+    unsubscribeAudio;
+    unsubscribeError;
     boundKeyHandler;
+    touchControls;
     constructor(vm, options) {
         this.vm = vm;
         this.container = options.container;
+        this.options = options;
         this.typewriterSpeed = options.typewriterSpeed ?? 20;
         this.autoDelayMs = options.autoDelayMs ?? 1800;
         this.assetResolver = options.assetResolver ?? defaultAssetResolver;
+        let finalMainMenu = options.mainMenu;
+        if (options.embed) {
+            finalMainMenu = { ...finalMainMenu, enabled: false };
+        }
+        if (finalMainMenu?.enabled !== false && (!finalMainMenu?.galleryItems || finalMainMenu.galleryItems.length === 0)) {
+            const autoItems = extractGalleryItems(this.vm.getStory());
+            if (autoItems.length > 0) {
+                finalMainMenu = {
+                    ...finalMainMenu,
+                    galleryItems: autoItems
+                };
+            }
+        }
+        this.mainMenuOptions = finalMainMenu;
+        this.audioManager = options.audioManager ?? (typeof window !== 'undefined' ? new AudioManager() : undefined);
+        this.musicVolume = this.audioManager?.getMusicVolume?.() ?? 0.8;
+        this.soundVolume = this.audioManager?.getSoundVolume?.() ?? 1.0;
         // Load saved settings if present
         if (typeof localStorage !== 'undefined') {
             try {
@@ -130,6 +131,14 @@ export class DOMRenderer {
                         this.typewriterSpeed = parsed.typewriterSpeed;
                     if (typeof parsed.autoDelayMs === 'number')
                         this.autoDelayMs = parsed.autoDelayMs;
+                    if (typeof parsed.musicVolume === 'number') {
+                        this.musicVolume = parsed.musicVolume;
+                        this.audioManager?.setMusicVolume(this.musicVolume);
+                    }
+                    if (typeof parsed.soundVolume === 'number') {
+                        this.soundVolume = parsed.soundVolume;
+                        this.audioManager?.setSoundVolume(this.soundVolume);
+                    }
                 }
             }
             catch { }
@@ -138,47 +147,152 @@ export class DOMRenderer {
         this.bindEvents();
         this.unsubscribeVMState = this.vm.onStateChange((state) => {
             this.render(state);
+            this.syncUrlLabel(state);
+            this.syncShareMeta(state);
+        });
+        this.unsubscribeCamera = this.vm.onCameraEvent((e) => {
+            if (e.action === 'flash') {
+                this.flashScreen();
+            }
+            else {
+                this.shakeScreen(e.action);
+            }
+        });
+        this.unsubscribeAudio = this.vm.onAudioEvent((event) => {
+            if (!this.audioManager)
+                return;
+            if (event.action === 'play' && event.track) {
+                const url = this.assetResolver(event.track, 'audio');
+                if (event.channel === 'music') {
+                    this.audioManager.playMusic?.(url, { fadein: event.fade, loop: event.loop });
+                }
+                else if (event.channel === 'sound') {
+                    this.audioManager.playSound?.(url);
+                }
+                else if (event.channel === 'voice') {
+                    this.audioManager.playVoice?.(url);
+                }
+            }
+            else if (event.action === 'stop') {
+                if (event.channel === 'music') {
+                    this.audioManager.stopMusic?.({ fadeout: event.fade });
+                }
+                else if (event.channel === 'sound') {
+                    this.audioManager.stopSound?.();
+                }
+                else if (event.channel === 'voice') {
+                    this.audioManager.stopVoice?.();
+                }
+            }
+        });
+        this.unsubscribeError = this.vm.onError((err) => {
+            this.showErrorToast(err.message);
+            this.options.onError?.(err);
         });
-        // Render current initial state
-        this.render(this.vm.getState());
+        // Default: Show Ren'Py-style Main Menu before entering story, unless explicitly disabled
+        if (this.mainMenuOptions?.enabled !== false) {
+            this.showMainMenu();
+        }
+        else {
+            this.render(this.vm.getState());
+        }
     }
     destroy() {
+        if (this.destroyed)
+            return;
+        this.destroyed = true;
         if (this.unsubscribeVMState) {
             this.unsubscribeVMState();
+            this.unsubscribeVMState = undefined;
+        }
+        if (this.unsubscribeCamera) {
+            this.unsubscribeCamera();
+            this.unsubscribeCamera = undefined;
+        }
+        if (this.unsubscribeAudio) {
+            this.unsubscribeAudio();
+            this.unsubscribeAudio = undefined;
+        }
+        if (this.audioManager && typeof this.audioManager.destroy === 'function') {
+            this.audioManager.destroy();
+        }
+        if (this.unsubscribeError) {
+            this.unsubscribeError();
+            this.unsubscribeError = undefined;
         }
-        if (this.currentTypewriterInterval) {
-            clearInterval(this.currentTypewriterInterval);
+        if (this.dialogueBox) {
+            this.dialogueBox.destroy();
+        }
+        if (this.hotspotLayer) {
+            this.hotspotLayer.destroy();
+        }
+        if (this.stageLayer) {
+            this.stageLayer.destroy();
+        }
+        if (this.viewportAdapter) {
+            this.viewportAdapter.destroy();
+            this.viewportAdapter = undefined;
         }
         if (this.autoTimer) {
             clearTimeout(this.autoTimer);
+            this.autoTimer = null;
         }
         if (this.skipInterval) {
             clearInterval(this.skipInterval);
+            this.skipInterval = null;
+        }
+        if (this.pauseTimer) {
+            clearTimeout(this.pauseTimer);
+            this.pauseTimer = null;
+        }
+        if (this.errorToastTimer) {
+            clearTimeout(this.errorToastTimer);
+            this.errorToastTimer = null;
         }
         if (this.boundKeyHandler && typeof window !== 'undefined') {
             window.removeEventListener('keydown', this.boundKeyHandler);
+            this.boundKeyHandler = undefined;
+        }
+        if (this.touchControls) {
+            this.touchControls.destroy();
+            this.touchControls = undefined;
         }
         this.container.innerHTML = '';
     }
+    showErrorToast(message) {
+        const existing = this.rootEl.querySelector('.kawa-error-toast');
+        if (existing)
+            existing.remove();
+        if (this.errorToastTimer) {
+            clearTimeout(this.errorToastTimer);
+            this.errorToastTimer = null;
+        }
+        const toast = document.createElement('div');
+        toast.className = 'kawa-error-toast';
+        toast.setAttribute('role', 'alert');
+        toast.innerHTML = `
+      <span>⚠️</span>
+      <span class="kawa-error-toast-msg">${escapeHtml(message)}</span>
+      <button type="button" class="kawa-error-toast-close" aria-label="Dismiss error">${SVG_ICONS.close}</button>
+    `;
+        toast.querySelector('.kawa-error-toast-close')?.addEventListener('click', () => {
+            toast.remove();
+        });
+        this.rootEl.appendChild(toast);
+        this.errorToastTimer = window.setTimeout(() => {
+            this.errorToastTimer = null;
+            if (toast.parentElement)
+                toast.remove();
+        }, 8000);
+    }
+    getViewportAdapter() {
+        return this.viewportAdapter;
+    }
     shakeScreen(type = 'shake') {
-        if (!this.stageEl)
-            return;
-        this.stageEl.classList.remove('kawa-shake', 'kawa-vpunch', 'kawa-hpunch');
-        // Trigger reflow
-        void this.stageEl.offsetWidth;
-        const cls = type === 'vpunch' ? 'kawa-vpunch' : type === 'hpunch' ? 'kawa-hpunch' : 'kawa-shake';
-        this.stageEl.classList.add(cls);
+        this.stageLayer.shakeScreen(type);
     }
     flashScreen() {
-        if (!this.stageEl)
-            return;
-        const existing = this.stageEl.querySelector('.kawa-flash-overlay');
-        if (existing)
-            existing.remove();
-        const flash = document.createElement('div');
-        flash.className = 'kawa-flash-overlay';
-        this.stageEl.appendChild(flash);
-        setTimeout(() => flash.remove(), 600);
+        this.stageLayer.flashScreen();
     }
     toggleAutoMode(force) {
         this.isAutoMode = force !== undefined ? force : !this.isAutoMode;
@@ -186,7 +300,7 @@ export class DOMRenderer {
             this.toggleSkipMode(false);
         }
         this.updateModeUI();
-        if (this.isAutoMode && !this.isTypewriting) {
+        if (this.isAutoMode && !this.dialogueBox.getIsTypewriting()) {
             this.scheduleAutoAdvance();
         }
         else if (!this.isAutoMode && this.autoTimer) {
@@ -200,23 +314,33 @@ export class DOMRenderer {
             this.toggleAutoMode(false);
         }
         this.updateModeUI();
+        // Suspend decorative particle loops while skipping to cut CPU during fast-forward.
+        this.stageLayer.vfxLayer.setSuspended(this.isSkipMode);
         if (this.isSkipMode) {
             if (this.autoTimer) {
                 clearTimeout(this.autoTimer);
                 this.autoTimer = null;
             }
             if (!this.skipInterval) {
+                // Coalesce advances (~10/s) instead of hammering every 55ms.
                 this.skipInterval = window.setInterval(() => {
+                    if (this.destroyed) {
+                        this.toggleSkipMode(false);
+                        return;
+                    }
                     const state = this.vm.getState();
-                    if (state.isFinished || (state.choices && state.choices.length > 0)) {
+                    if (state.isFinished ||
+                        (state.choices && state.choices.length > 0) ||
+                        (state.hotspots && state.hotspots.length > 0) ||
+                        state.pendingInput) {
                         this.toggleSkipMode(false);
                         return;
                     }
-                    if (this.isTypewriting) {
-                        this.finishTypewriter();
+                    if (this.dialogueBox.getIsTypewriting()) {
+                        this.dialogueBox.finishTypewriter();
                     }
                     this.vm.next();
-                }, 55);
+                }, 100);
             }
         }
         else {
@@ -226,25 +350,91 @@ export class DOMRenderer {
             }
         }
     }
+    showMainMenu() {
+        if (this.isAutoMode)
+            this.toggleAutoMode(false);
+        if (this.isSkipMode)
+            this.toggleSkipMode(false);
+        this.mainMenu.show();
+    }
+    hideMainMenu() {
+        this.mainMenu.hide();
+    }
+    isMainMenuActive() {
+        return this.mainMenu.isActive();
+    }
+    startNewGame() {
+        // Ignore residual click-through from the Start button onto the stage (Opera / touchpads).
+        this.advanceLockUntil = Date.now() + 350;
+        this.vm.start();
+        this.hideMainMenu();
+        this.mainMenuOptions?.onStart?.();
+    }
+    async continueLatestGame() {
+        const saveManager = this.vm.getSaveManager();
+        const slots = await saveManager.listSlots(10);
+        const validSlots = slots.filter((s) => s !== null);
+        if (validSlots.length === 0)
+            return false;
+        validSlots.sort((a, b) => b.timestamp - a.timestamp);
+        const latest = validSlots[0];
+        const ok = await this.vm.load(latest.id);
+        if (ok) {
+            this.hideMainMenu();
+            return true;
+        }
+        return false;
+    }
+    async showSaveLoadModal(mode) {
+        await showSaveLoadModal(this.rootEl, this.vm, mode, () => {
+            this.hideMainMenu();
+        });
+    }
+    showSettingsModal() {
+        showSettingsModal(this.rootEl, {
+            typewriterSpeed: this.typewriterSpeed,
+            autoDelayMs: this.autoDelayMs,
+            musicVolume: this.musicVolume,
+            soundVolume: this.soundVolume,
+            onSettingsChange: (s) => {
+                this.typewriterSpeed = s.typewriterSpeed;
+                this.autoDelayMs = s.autoDelayMs;
+                if (s.musicVolume !== undefined) {
+                    this.musicVolume = s.musicVolume;
+                    this.audioManager?.setMusicVolume(this.musicVolume);
+                }
+                if (s.soundVolume !== undefined) {
+                    this.soundVolume = s.soundVolume;
+                    this.audioManager?.setSoundVolume(this.soundVolume);
+                }
+                this.dialogueBox.setTypewriterSpeed(this.typewriterSpeed);
+                this.saveSettings();
+            }
+        });
+    }
+    showHistoryModal() {
+        showHistoryModal(this.rootEl, this.vm);
+    }
+    showAboutModal() {
+        showAboutModal(this.rootEl, this.mainMenuOptions);
+    }
+    showGalleryModal() {
+        const galleryItems = this.mainMenuOptions?.galleryItems ?? [];
+        showGalleryModal(this.rootEl, this.vm, galleryItems, (path) => this.assetResolver(path, 'background'));
+    }
     updateModeUI() {
-        if (this.autoBtnEl) {
-            this.autoBtnEl.classList.toggle('active', this.isAutoMode);
+        this.quickMenu.setAutoActive(this.isAutoMode);
+        this.quickMenu.setSkipActive(this.isSkipMode);
+        if (this.isSkipMode) {
+            this.stageLayer.modeBadgeEl.innerHTML = `${SVG_ICONS.skip} SKIP`;
+            this.stageLayer.modeBadgeEl.style.display = 'inline-flex';
         }
-        if (this.skipBtnEl) {
-            this.skipBtnEl.classList.toggle('active', this.isSkipMode);
+        else if (this.isAutoMode) {
+            this.stageLayer.modeBadgeEl.innerHTML = `${SVG_ICONS.auto} AUTO`;
+            this.stageLayer.modeBadgeEl.style.display = 'inline-flex';
         }
-        if (this.modeBadgeEl) {
-            if (this.isSkipMode) {
-                this.modeBadgeEl.innerHTML = `${SVG_ICONS.skip} SKIP`;
-                this.modeBadgeEl.style.display = 'inline-flex';
-            }
-            else if (this.isAutoMode) {
-                this.modeBadgeEl.innerHTML = `${SVG_ICONS.auto} AUTO`;
-                this.modeBadgeEl.style.display = 'inline-flex';
-            }
-            else {
-                this.modeBadgeEl.style.display = 'none';
-            }
+        else {
+            this.stageLayer.modeBadgeEl.style.display = 'none';
         }
     }
     scheduleAutoAdvance() {
@@ -255,14 +445,20 @@ export class DOMRenderer {
         if (!this.isAutoMode)
             return;
         const state = this.vm.getState();
-        if (state.isFinished || (state.choices && state.choices.length > 0)) {
+        if (state.isFinished ||
+            (state.choices && state.choices.length > 0) ||
+            (state.hotspots && state.hotspots.length > 0) ||
+            state.pendingInput) {
             return;
         }
         const duration = Math.max(800, this.autoDelayMs + (state.dialogue?.text.length ?? 0) * 15);
         this.autoTimer = window.setTimeout(() => {
             if (this.isAutoMode) {
                 const cur = this.vm.getState();
-                if (!cur.isFinished && (!cur.choices || cur.choices.length === 0)) {
+                if (!cur.isFinished &&
+                    (!cur.choices || cur.choices.length === 0) &&
+                    (!cur.hotspots || cur.hotspots.length === 0) &&
+                    !cur.pendingInput) {
                     this.vm.next();
                 }
             }
@@ -272,155 +468,137 @@ export class DOMRenderer {
         this.container.innerHTML = '';
         this.rootEl = document.createElement('div');
         this.rootEl.className = 'kawa-root';
-        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');
-        // Mode Badge (Auto / Skip indicator)
-        this.modeBadgeEl = document.createElement('div');
-        this.modeBadgeEl.className = 'kawa-mode-badge';
-        this.modeBadgeEl.style.display = 'none';
+        this.rootEl.style.touchAction = 'manipulation';
+        if (this.options.embed) {
+            this.rootEl.classList.add('kawa-embed');
+            this.rootEl.dataset.kawaEmbed = '1';
+        }
+        this.stageLayer = new StageLayerComponent(this.assetResolver);
         const uiLayerEl = document.createElement('div');
         uiLayerEl.className = 'kawa-ui-layer';
-        // Choice Container
-        this.choiceContainerEl = document.createElement('div');
-        this.choiceContainerEl.className = 'kawa-choice-container kawa-choices';
-        this.choiceContainerEl.setAttribute('role', 'group');
-        this.choiceContainerEl.setAttribute('aria-label', 'Choices');
-        this.choiceContainerEl.style.display = 'none';
-        // Dialogue Box
-        this.dialogueBoxEl = document.createElement('div');
-        this.dialogueBoxEl.className = 'kawa-dialogue-box kawa-dialogue';
-        this.dialogueBoxEl.setAttribute('role', 'region');
-        this.dialogueBoxEl.setAttribute('aria-label', 'Dialogue');
-        this.dialogueBoxEl.setAttribute('tabindex', '0');
-        this.speakerTagEl = document.createElement('div');
-        this.speakerTagEl.className = 'kawa-speaker-tag kawa-speaker';
-        this.dialogueTextEl = document.createElement('div');
-        this.dialogueTextEl.className = 'kawa-dialogue-text kawa-text';
-        this.dialogueTextEl.setAttribute('aria-live', 'polite');
-        const indicatorEl = document.createElement('div');
-        indicatorEl.className = 'kawa-continue-indicator';
-        indicatorEl.setAttribute('aria-hidden', 'true');
-        indicatorEl.innerHTML = SVG_ICONS.arrowDown;
-        this.dialogueBoxEl.appendChild(this.speakerTagEl);
-        this.dialogueBoxEl.appendChild(this.dialogueTextEl);
-        this.dialogueBoxEl.appendChild(indicatorEl);
-        // Quick Menu
-        const quickMenuEl = document.createElement('nav');
-        quickMenuEl.className = 'kawa-quick-menu';
-        quickMenuEl.setAttribute('role', 'toolbar');
-        quickMenuEl.setAttribute('aria-label', 'Game Menu');
-        this.backBtnEl = document.createElement('button');
-        this.backBtnEl.className = 'kawa-btn';
-        this.backBtnEl.innerHTML = `${SVG_ICONS.back} <span>Back</span>`;
-        this.backBtnEl.setAttribute('aria-label', 'Rollback to previous dialogue');
-        const histBtn = document.createElement('button');
-        histBtn.className = 'kawa-btn';
-        histBtn.innerHTML = `${SVG_ICONS.history} <span>History</span>`;
-        histBtn.setAttribute('aria-label', 'Open dialogue history log');
-        histBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.showHistoryModal();
-        });
-        this.autoBtnEl = document.createElement('button');
-        this.autoBtnEl.className = 'kawa-btn';
-        this.autoBtnEl.innerHTML = `${SVG_ICONS.auto} <span>Auto</span>`;
-        this.autoBtnEl.setAttribute('aria-label', 'Toggle Auto Forward Mode');
-        this.autoBtnEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleAutoMode();
-        });
-        this.skipBtnEl = document.createElement('button');
-        this.skipBtnEl.className = 'kawa-btn';
-        this.skipBtnEl.innerHTML = `${SVG_ICONS.skip} <span>Skip</span>`;
-        this.skipBtnEl.setAttribute('aria-label', 'Toggle Fast Forward Skip Mode');
-        this.skipBtnEl.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.toggleSkipMode();
-        });
-        const saveBtn = document.createElement('button');
-        saveBtn.className = 'kawa-btn';
-        saveBtn.innerHTML = `${SVG_ICONS.save} <span>Save</span>`;
-        saveBtn.setAttribute('aria-label', 'Open save game menu');
-        saveBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.showSaveLoadModal('save');
+        this.choiceMenu = this.options.components?.createChoiceMenu
+            ? this.options.components.createChoiceMenu({
+                onSelect: (index) => {
+                    this.vm.choose(index);
+                }
+            })
+            : new ChoiceMenuComponent({
+                onSelect: (index) => {
+                    this.vm.choose(index);
+                }
+            });
+        this.hotspotLayer = new HotspotLayerComponent((id) => {
+            this.vm.selectHotspot(id);
         });
-        const loadBtn = document.createElement('button');
-        loadBtn.className = 'kawa-btn';
-        loadBtn.innerHTML = `${SVG_ICONS.load} <span>Load</span>`;
-        loadBtn.setAttribute('aria-label', 'Open load game menu');
-        loadBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.showSaveLoadModal('load');
+        this.dialogueBox = this.options.components?.createDialogueBox
+            ? this.options.components.createDialogueBox(this.typewriterSpeed)
+            : new DialogueBoxComponent(this.typewriterSpeed);
+        this.quickMenu = new QuickMenuComponent({
+            onTitle: () => this.showMainMenu(),
+            onBack: () => {
+                if (this.isAutoMode)
+                    this.toggleAutoMode(false);
+                if (this.isSkipMode)
+                    this.toggleSkipMode(false);
+                this.vm.rollback();
+            },
+            onHistory: () => this.showHistoryModal(),
+            onAuto: () => this.toggleAutoMode(),
+            onSkip: () => this.toggleSkipMode(),
+            onSave: () => void this.showSaveLoadModal('save'),
+            onLoad: () => void this.showSaveLoadModal('load'),
+            onSettings: () => this.showSettingsModal()
         });
-        const settingsBtn = document.createElement('button');
-        settingsBtn.className = 'kawa-btn';
-        settingsBtn.innerHTML = `${SVG_ICONS.settings} <span>Settings</span>`;
-        settingsBtn.setAttribute('aria-label', 'Open Settings Menu');
-        settingsBtn.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.showSettingsModal();
+        if (this.options.features?.quickMenu === false || this.options.embed) {
+            this.quickMenu.el.style.display = 'none';
+        }
+        uiLayerEl.appendChild(this.choiceMenu.el);
+        uiLayerEl.appendChild(this.dialogueBox.el);
+        uiLayerEl.appendChild(this.quickMenu.el);
+        this.stageLayer.stageEl.appendChild(uiLayerEl);
+        this.stageLayer.stageEl.appendChild(this.hotspotLayer.el);
+        this.mainMenu = new MainMenuComponent(this.rootEl, this.vm, this.mainMenuOptions, {
+            onStartNewGame: () => this.startNewGame(),
+            onContinueGame: () => this.continueLatestGame(),
+            assetResolver: this.assetResolver,
+            getSettingsConfig: () => ({
+                typewriterSpeed: this.typewriterSpeed,
+                autoDelayMs: this.autoDelayMs,
+                musicVolume: this.musicVolume,
+                soundVolume: this.soundVolume,
+                onSettingsChange: (s) => {
+                    this.typewriterSpeed = s.typewriterSpeed;
+                    this.autoDelayMs = s.autoDelayMs;
+                    if (s.musicVolume !== undefined) {
+                        this.musicVolume = s.musicVolume;
+                        this.audioManager?.setMusicVolume(this.musicVolume);
+                    }
+                    if (s.soundVolume !== undefined) {
+                        this.soundVolume = s.soundVolume;
+                        this.audioManager?.setSoundVolume(this.soundVolume);
+                    }
+                    this.dialogueBox.setTypewriterSpeed(this.typewriterSpeed);
+                    this.saveSettings();
+                }
+            })
         });
-        quickMenuEl.appendChild(this.backBtnEl);
-        quickMenuEl.appendChild(histBtn);
-        quickMenuEl.appendChild(this.autoBtnEl);
-        quickMenuEl.appendChild(this.skipBtnEl);
-        quickMenuEl.appendChild(saveBtn);
-        quickMenuEl.appendChild(loadBtn);
-        quickMenuEl.appendChild(settingsBtn);
-        uiLayerEl.appendChild(this.choiceContainerEl);
-        uiLayerEl.appendChild(this.dialogueBoxEl);
-        uiLayerEl.appendChild(quickMenuEl);
-        this.stageEl.appendChild(this.backgroundEl);
-        this.stageEl.appendChild(this.charactersEl);
-        this.stageEl.appendChild(this.modeBadgeEl);
-        this.stageEl.appendChild(uiLayerEl);
-        this.rootEl.appendChild(this.stageEl);
+        this.mainMenu.mount(this.stageLayer.stageEl);
+        this.rootEl.appendChild(this.stageLayer.stageEl);
         this.container.appendChild(this.rootEl);
+        this.viewportAdapter = new ViewportAdapter(this.container, this.stageLayer.stageEl, this.options.virtualCanvas);
     }
     bindEvents() {
-        // Clicking on dialogue advances or finishes typewriter
-        this.dialogueBoxEl.addEventListener('click', () => {
-            if (this.isAutoMode) {
-                this.toggleAutoMode(false);
-            }
-            if (this.isSkipMode) {
-                this.toggleSkipMode(false);
+        // Clicking on stage or dialogue box advances or finishes typewriter
+        this.stageLayer.stageEl.addEventListener('click', (e) => {
+            if (this.isMainMenuActive())
+                return;
+            const target = e.target;
+            if (target.closest('button') ||
+                target.closest('.kawa-quick-menu') ||
+                target.closest('.kawa-choice-container') ||
+                target.closest('.kawa-hotspot-layer') ||
+                target.closest('.kawa-modal-overlay') ||
+                target.closest('.kawa-ending-card')) {
+                return;
             }
-            this.handleUserAdvance();
-        });
-        this.backBtnEl.addEventListener('click', (e) => {
-            e.stopPropagation();
             if (this.isAutoMode)
                 this.toggleAutoMode(false);
             if (this.isSkipMode)
                 this.toggleSkipMode(false);
-            this.vm.rollback();
+            this.handleUserAdvance();
         });
         // Keyboard controls
         this.boundKeyHandler = (e) => {
+            const confirm = this.rootEl.querySelector('.kawa-confirm-overlay');
+            if (confirm) {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    confirm.remove();
+                }
+                return;
+            }
+            const lightbox = this.rootEl.querySelector('.kawa-gallery-lightbox');
+            if (lightbox) {
+                if (e.key === 'Escape') {
+                    e.preventDefault();
+                    lightbox.remove();
+                }
+                return;
+            }
             const modal = this.rootEl.querySelector('.kawa-modal-overlay');
             if (modal) {
                 if (e.key === 'Escape')
                     modal.remove();
                 return;
             }
+            if (this.isMainMenuActive()) {
+                return;
+            }
             if (e.code === 'Space' || e.code === 'Enter') {
-                if (document.activeElement && document.activeElement.tagName === 'BUTTON') {
+                if (document.activeElement &&
+                    (document.activeElement.tagName === 'BUTTON' ||
+                        document.activeElement.tagName === 'INPUT' ||
+                        document.activeElement.tagName === 'TEXTAREA')) {
                     return;
                 }
                 e.preventDefault();
@@ -441,15 +619,16 @@ export class DOMRenderer {
             else if (e.key === 'a' || e.key === 'A') {
                 this.toggleAutoMode();
             }
-            else if (e.key === 'Tab' || e.key === 'Control') {
+            else if (e.key === 'Control') {
+                // Ctrl toggles skip (Ren'Py-style). Tab is left for accessibility focus navigation.
                 e.preventDefault();
                 this.toggleSkipMode();
             }
             else if (e.key === 's' || e.key === 'S') {
-                this.showSaveLoadModal('save');
+                void this.showSaveLoadModal('save');
             }
             else if (e.key === 'l' || e.key === 'L') {
-                this.showSaveLoadModal('load');
+                void this.showSaveLoadModal('load');
             }
             else if (e.key === 'h' || e.key === 'H') {
                 this.showHistoryModal();
@@ -457,514 +636,244 @@ export class DOMRenderer {
             else if (e.key === 'p' || e.key === 'P' || e.key === 'o' || e.key === 'O') {
                 this.showSettingsModal();
             }
+            else if (e.key === 'Escape') {
+                this.showMainMenu();
+            }
         };
         if (typeof window !== 'undefined') {
             window.addEventListener('keydown', this.boundKeyHandler);
         }
+        // Mobile: swipe left = advance, swipe right = rollback
+        if (this.options.features?.touchGestures !== false) {
+            this.touchControls = bindSwipeControls(this.stageLayer.stageEl, {
+                onSwipeLeft: () => {
+                    if (this.isMainMenuActive())
+                        return;
+                    if (this.isAutoMode)
+                        this.toggleAutoMode(false);
+                    if (this.isSkipMode)
+                        this.toggleSkipMode(false);
+                    this.handleUserAdvance();
+                },
+                onSwipeRight: () => {
+                    if (this.isMainMenuActive())
+                        return;
+                    if (this.isAutoMode)
+                        this.toggleAutoMode(false);
+                    if (this.isSkipMode)
+                        this.toggleSkipMode(false);
+                    if (this.vm.canRollback())
+                        this.vm.rollback();
+                }
+            });
+        }
     }
     handleUserAdvance() {
-        if (this.isTypewriting) {
-            this.finishTypewriter();
+        if (this.isMainMenuActive())
+            return;
+        if (this.vm.getState().pendingInput)
+            return;
+        if (this.dialogueBox.getIsTypewriting()) {
+            this.dialogueBox.finishTypewriter();
+            const debounce = this.options.features?.advanceDebounceMs ?? 220;
+            this.advanceLockUntil = Date.now() + Math.max(0, debounce);
+            return;
         }
-        else {
-            this.vm.next();
+        if (Date.now() < this.advanceLockUntil) {
+            return;
+        }
+        const state = this.vm.getState();
+        if (state.choices && state.choices.length > 0) {
+            return;
+        }
+        if (state.hotspots && state.hotspots.length > 0) {
+            return;
         }
+        this.vm.next();
     }
-    render(state) {
-        this.isChoicePending = false;
-        this.backBtnEl.disabled = !this.vm.canRollback();
-        // 1. Dual-Layer Background Crossfading
-        if (state.visual.background) {
-            this.backgroundEl.dataset.transition = state.visual.transition ?? 'none';
-            const rawBg = state.visual.background;
-            const cleanBg = rawBg.replace(/^bg[\s_]+/i, '').trim();
-            const baseName = cleanBg.replace(/\.(svg|png|jpg|jpeg|webp)$/i, '');
-            const primaryUrl = this.assetResolver(cleanBg, 'background');
-            if (primaryUrl !== this.currentBgUrl) {
-                this.currentBgUrl = primaryUrl;
-                const incomingLayer = this.activeBgLayer === 'A' ? this.bgLayerB : this.bgLayerA;
-                const outgoingLayer = this.activeBgLayer === 'A' ? this.bgLayerA : this.bgLayerB;
-                incomingLayer.style.backgroundImage = `url("${primaryUrl}")`;
-                incomingLayer.classList.add('active');
-                outgoingLayer.classList.remove('active');
-                this.activeBgLayer = this.activeBgLayer === 'A' ? 'B' : 'A';
-                // Verify and fallback if image fails to load
-                const testImg = new Image();
-                testImg.onerror = () => {
-                    const fallbackPng = this.assetResolver(`${baseName}.png`, 'background');
-                    const img2 = new Image();
-                    img2.onload = () => {
-                        incomingLayer.style.backgroundImage = `url("${fallbackPng}")`;
-                    };
-                    img2.onerror = () => {
-                        incomingLayer.style.backgroundImage = 'radial-gradient(ellipse at center, #334155 0%, #0f172a 100%)';
-                    };
-                    img2.src = fallbackPng;
-                };
-                testImg.src = primaryUrl;
-            }
+    syncUrlLabel(state) {
+        if (!this.options.syncUrlLabel || typeof window === 'undefined' || typeof history === 'undefined') {
+            return;
         }
-        else {
-            this.currentBgUrl = '';
-            this.bgLayerA.classList.remove('active');
-            this.bgLayerB.classList.remove('active');
-        }
-        // 2. Character Sprites DOM Reconciliation
-        const currentChars = state.visual.characters;
-        const currentIds = new Set(Object.keys(currentChars));
-        // Remove sprites no longer active
-        for (const [id, record] of this.activeCharacters.entries()) {
-            if (!currentIds.has(id)) {
-                record.div.remove();
-                this.activeCharacters.delete(id);
-            }
+        const label = state.currentLabel;
+        if (!label || label.startsWith('__'))
+            return;
+        try {
+            const url = new URL(window.location.href);
+            if (url.searchParams.get('at') === label)
+                return;
+            url.searchParams.delete('label');
+            url.searchParams.set('at', label);
+            history.replaceState(null, '', `${url.pathname}${url.search}${url.hash}`);
         }
-        // Add or update active sprites
-        for (const [charId, charState] of Object.entries(currentChars)) {
-            const posClass = `kawa-pos-${charState.position ?? 'center'}`;
-            const charAssetKey = charState.expression ? `${charId}/${charState.expression}` : charId;
-            const primarySpriteUrl = this.assetResolver(charAssetKey, 'character');
-            let existing = this.activeCharacters.get(charId);
-            if (!existing) {
-                const spriteDiv = document.createElement('div');
-                spriteDiv.className = `kawa-sprite ${posClass}`;
-                spriteDiv.dataset.character = charId;
-                if (charState.expression) {
-                    spriteDiv.dataset.expression = charState.expression;
-                }
-                const img = document.createElement('img');
-                img.src = primarySpriteUrl;
-                img.alt = `${charId} ${charState.expression ?? ''}`;
-                let fallbackStep = 0;
-                img.onerror = () => {
-                    fallbackStep++;
-                    if (fallbackStep === 1) {
-                        img.src = this.assetResolver(`${charAssetKey}.svg`, 'character');
-                    }
-                    else if (fallbackStep === 2 && charState.expression) {
-                        img.src = this.assetResolver(`${charId}_${charState.expression}`, 'character');
-                    }
-                    else if (fallbackStep === 3 && charState.expression) {
-                        img.src = this.assetResolver(`${charId}_${charState.expression}.svg`, 'character');
-                    }
-                    else {
-                        img.style.display = 'none';
-                        spriteDiv.style.width = '220px';
-                        spriteDiv.style.height = '420px';
-                        spriteDiv.style.background = 'rgba(244, 63, 94, 0.25)';
-                        spriteDiv.style.border = '2px dashed #f43f5e';
-                        spriteDiv.style.borderRadius = '16px';
-                        spriteDiv.style.display = 'flex';
-                        spriteDiv.style.alignItems = 'center';
-                        spriteDiv.style.justifyContent = 'center';
-                        spriteDiv.style.color = '#ffffff';
-                        spriteDiv.style.fontWeight = '600';
-                        spriteDiv.style.fontSize = '1.1rem';
-                        spriteDiv.textContent = `${charId}\n(${charState.expression ?? 'normal'})`;
+        catch {
+            // ignore malformed URL environments
+        }
+    }
+    syncShareMeta(state) {
+        const share = this.options.share;
+        if (!share && !this.options.syncUrlLabel)
+            return;
+        const pageUrl = typeof window !== 'undefined' ? window.location.href : undefined;
+        const meta = buildSceneShareMeta(this.vm.getStory(), state, share, pageUrl);
+        applyDocumentShareMeta({
+            ...meta,
+            image: meta.image ? resolveShareAssetUrl(meta.image) : undefined
+        }, share);
+    }
+    applyThemeAndStyles(state) {
+        if (state.theme) {
+            this.rootEl.dataset.kawaTheme = state.theme;
+        }
+        else {
+            delete this.rootEl.dataset.kawaTheme;
+        }
+        const nextTargets = new Set(Object.keys(state.styleClasses ?? {}));
+        for (const target of this.appliedStyleTargets) {
+            if (!nextTargets.has(target)) {
+                this.rootEl.classList.forEach((cls) => {
+                    if (cls.startsWith(`kawa-style-${target}-`)) {
+                        this.rootEl.classList.remove(cls);
                     }
-                };
-                spriteDiv.appendChild(img);
-                this.charactersEl.appendChild(spriteDiv);
-                existing = {
-                    div: spriteDiv,
-                    img,
-                    expression: charState.expression,
-                    position: charState.position
-                };
-                this.activeCharacters.set(charId, existing);
+                });
             }
-            else {
-                existing.div.className = `kawa-sprite ${posClass}`;
-                if (charState.expression) {
-                    existing.div.dataset.expression = charState.expression;
-                }
-                else {
-                    delete existing.div.dataset.expression;
-                }
-                if (existing.expression !== charState.expression) {
-                    existing.expression = charState.expression;
-                    existing.img.style.display = 'block';
-                    existing.img.src = primarySpriteUrl;
+        }
+        for (const [target, name] of Object.entries(state.styleClasses ?? {})) {
+            const prefix = `kawa-style-${target}-`;
+            this.rootEl.classList.forEach((cls) => {
+                if (cls.startsWith(prefix) && cls !== `${prefix}${name}`) {
+                    this.rootEl.classList.remove(cls);
                 }
-            }
+            });
+            this.rootEl.classList.add(`${prefix}${name}`);
         }
-        // Render dialogue
-        if (state.dialogue) {
-            this.dialogueBoxEl.style.display = 'block';
-            if (state.dialogue.speakerDisplayName) {
-                this.speakerTagEl.style.display = 'inline-block';
-                this.speakerTagEl.textContent = state.dialogue.speakerDisplayName;
-                if (state.dialogue.speakerColor) {
-                    this.speakerTagEl.style.backgroundColor = state.dialogue.speakerColor;
+        this.appliedStyleTargets = nextTargets;
+    }
+    render(state) {
+        this.quickMenu.setBackDisabled(!this.vm.canRollback());
+        this.applyThemeAndStyles(state);
+        // Timed pause: auto-advance after pendingPauseMs (click still skips via handleUserAdvance)
+        if (this.pauseTimer) {
+            clearTimeout(this.pauseTimer);
+            this.pauseTimer = null;
+        }
+        if (state.pendingPauseMs != null && state.pendingPauseMs > 0 && !state.isFinished) {
+            const delay = state.pendingPauseMs;
+            this.pauseTimer = window.setTimeout(() => {
+                this.pauseTimer = null;
+                if (this.destroyed)
+                    return;
+                const cur = this.vm.getState();
+                if (cur.pendingPauseMs != null && !cur.isFinished) {
+                    this.vm.next();
                 }
-            }
-            else {
-                this.speakerTagEl.style.display = 'none';
-            }
-            this.startTypewriter(state.dialogue.text);
+            }, delay);
+        }
+        // 1. Background scene
+        this.stageLayer.updateBackground(state.visual.background, state.visual.transition);
+        // 2. Character sprites
+        this.stageLayer.updateCharacters(state.visual.characters);
+        // 3. VFX & Atmospheric Layer
+        this.stageLayer.updateVfx(state.visual.vfx);
+        // 4. Fullscreen CG Layer
+        this.stageLayer.updateCG(state.visual.activeCG);
+        // 5. Branching Choice Menu
+        this.choiceMenu.render(state.choices);
+        // 5b. CG / stage hotspots
+        this.hotspotLayer.render(state.hotspots);
+        // 6. Dialogue Box (respect `window hide` / `window show`)
+        if (state.windowVisible === false) {
+            this.dialogueBox.render(null);
         }
         else {
-            this.dialogueBoxEl.style.display = 'none';
+            this.dialogueBox.render(state.dialogue, () => {
+                if (this.isAutoMode &&
+                    !state.isFinished &&
+                    (!state.choices || state.choices.length === 0) &&
+                    (!state.hotspots || state.hotspots.length === 0) &&
+                    !state.pendingInput) {
+                    this.scheduleAutoAdvance();
+                }
+            });
         }
-        // Render choices
-        if (state.choices && state.choices.length > 0) {
-            if (this.isAutoMode)
-                this.toggleAutoMode(false);
-            if (this.isSkipMode)
-                this.toggleSkipMode(false);
-            this.choiceContainerEl.innerHTML = '';
-            this.choiceContainerEl.style.display = 'flex';
-            this.choiceContainerEl.style.pointerEvents = 'auto';
-            this.choiceContainerEl.style.opacity = '1';
-            state.choices.forEach((choice, index) => {
-                const btn = document.createElement('button');
-                btn.className = 'kawa-choice-btn kawa-choice';
-                btn.textContent = choice.text;
-                btn.addEventListener('click', (e) => {
-                    e.stopPropagation();
-                    if (this.isChoicePending)
-                        return;
-                    this.isChoicePending = true;
-                    this.choiceContainerEl.style.pointerEvents = 'none';
-                    this.choiceContainerEl.style.opacity = '0.5';
-                    this.vm.choose(index);
+        // 6b. Text input prompt (`input var "prompt"`)
+        if (state.pendingInput) {
+            if (!this.rootEl.querySelector('.kawa-input-overlay')) {
+                const prompt = state.pendingInput.prompt;
+                const current = typeof state.variables[state.pendingInput.variable] === 'string'
+                    ? String(state.variables[state.pendingInput.variable])
+                    : '';
+                showInputModal(this.rootEl, {
+                    prompt,
+                    defaultValue: current,
+                    onSubmit: (value) => this.vm.submitInput(value)
                 });
-                this.choiceContainerEl.appendChild(btn);
-            });
+            }
         }
         else {
-            this.choiceContainerEl.style.display = 'none';
+            this.rootEl.querySelector('.kawa-input-overlay')?.remove();
         }
-        // Render Ending Card if Story is Finished
+        // 7. Ending Screen if finished
         if (state.isFinished) {
-            if (this.isAutoMode)
-                this.toggleAutoMode(false);
-            if (this.isSkipMode)
-                this.toggleSkipMode(false);
-            this.choiceContainerEl.style.display = 'none';
-            const existingEnd = this.rootEl.querySelector('.kawa-ending-card');
-            if (!existingEnd) {
-                const endCard = document.createElement('div');
-                endCard.className = 'kawa-ending-card';
-                endCard.innerHTML = `
-          <div class="kawa-ending-title">The End</div>
-          <div class="kawa-ending-subtitle">Story complete! Thank you for playing.</div>
-          <div style="display:flex;gap:12px;margin-top:16px;">
-            <button class="kawa-btn kawa-btn-replay">${SVG_ICONS.replay} Play Again</button>
-            <button class="kawa-btn kawa-btn-load-end">${SVG_ICONS.load} Load Slot</button>
-          </div>
-        `;
-                endCard.querySelector('.kawa-btn-replay')?.addEventListener('click', () => {
-                    this.vm.jump('start');
-                });
-                endCard.querySelector('.kawa-btn-load-end')?.addEventListener('click', () => {
-                    this.showSaveLoadModal('load');
-                });
-                this.rootEl.appendChild(endCard);
-            }
+            this.renderEndingCard();
         }
         else {
-            const existingEnd = this.rootEl.querySelector('.kawa-ending-card');
-            if (existingEnd)
-                existingEnd.remove();
+            const endingEl = this.stageLayer.stageEl.querySelector('.kawa-ending-card');
+            if (endingEl)
+                endingEl.remove();
         }
     }
-    startTypewriter(text) {
-        if (this.currentTypewriterInterval) {
-            clearInterval(this.currentTypewriterInterval);
-        }
-        if (this.autoTimer) {
-            clearTimeout(this.autoTimer);
-            this.autoTimer = null;
-        }
-        this.fullCurrentText = text;
-        if (this.typewriterSpeed <= 0 || this.isSkipMode) {
-            this.dialogueTextEl.innerHTML = formatRichText(text);
-            this.isTypewriting = false;
-            if (this.isAutoMode)
-                this.scheduleAutoAdvance();
+    renderEndingCard() {
+        // Don't remount — recreating replayed the pop animation and looked like a jump.
+        if (this.stageLayer.stageEl.querySelector('.kawa-ending-card')) {
             return;
         }
-        this.isTypewriting = true;
-        let index = 0;
-        this.dialogueTextEl.innerHTML = '';
-        this.currentTypewriterInterval = window.setInterval(() => {
-            index += 1;
-            this.dialogueTextEl.innerHTML = formatRichText(this.fullCurrentText.slice(0, index));
-            if (index >= this.fullCurrentText.length) {
-                this.finishTypewriter();
-            }
-        }, this.typewriterSpeed);
-    }
-    finishTypewriter() {
-        if (this.currentTypewriterInterval) {
-            clearInterval(this.currentTypewriterInterval);
-            this.currentTypewriterInterval = null;
-        }
-        this.dialogueTextEl.innerHTML = formatRichText(this.fullCurrentText);
-        this.isTypewriting = false;
-        if (this.isAutoMode) {
-            this.scheduleAutoAdvance();
-        }
-    }
-    showSettingsModal() {
-        const existing = this.rootEl.querySelector('.kawa-modal-overlay');
-        if (existing)
-            existing.remove();
-        const overlay = document.createElement('div');
-        overlay.className = 'kawa-modal-overlay';
-        const card = document.createElement('div');
-        card.className = 'kawa-modal-card';
-        card.setAttribute('role', 'dialog');
-        card.setAttribute('aria-modal', 'true');
-        card.setAttribute('aria-label', 'Settings');
-        const header = document.createElement('div');
-        header.className = 'kawa-modal-header';
-        const title = document.createElement('div');
-        title.className = 'kawa-modal-title';
-        title.innerHTML = `${SVG_ICONS.settings} <span>Settings</span>`;
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'kawa-btn';
-        closeBtn.innerHTML = `${SVG_ICONS.close} <span>Close</span>`;
-        closeBtn.setAttribute('aria-label', 'Close settings modal');
-        closeBtn.addEventListener('click', () => overlay.remove());
-        header.appendChild(title);
-        header.appendChild(closeBtn);
-        const body = document.createElement('div');
-        body.className = 'kawa-modal-body kawa-settings-group';
-        // 1. Text Speed Slider
-        const speedRow = document.createElement('div');
-        speedRow.className = 'kawa-setting-row';
-        const speedVal = this.typewriterSpeed;
-        speedRow.innerHTML = `
-      <div class="kawa-setting-header">
-        <span>Text Speed</span>
-        <span class="kawa-setting-value" id="kawa-speed-val">${speedVal === 0 ? 'Instant' : `${speedVal}ms`}</span>
-      </div>
-      <input type="range" class="kawa-slider" id="kawa-speed-slider" min="0" max="60" step="5" value="${speedVal}">
+        const endingCard = document.createElement('div');
+        endingCard.className = 'kawa-ending-card';
+        endingCard.setAttribute('role', 'alert');
+        endingCard.setAttribute('aria-label', 'Story Finished');
+        endingCard.innerHTML = `
+      <div class="kawa-ending-title">The End</div>
+      <div class="kawa-ending-subtitle">Thank you for playing!</div>
     `;
-        const speedInput = speedRow.querySelector('#kawa-speed-slider');
-        const speedValEl = speedRow.querySelector('#kawa-speed-val');
-        speedInput.addEventListener('input', () => {
-            this.typewriterSpeed = Number(speedInput.value);
-            speedValEl.textContent = this.typewriterSpeed === 0 ? 'Instant' : `${this.typewriterSpeed}ms`;
-            this.saveSettings();
+        const restartBtn = document.createElement('button');
+        restartBtn.type = 'button';
+        restartBtn.className = 'kawa-choice-btn kawa-ending-btn';
+        restartBtn.style.marginTop = '16px';
+        restartBtn.innerHTML = `${SVG_ICONS.replay} Play Again`;
+        restartBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            endingCard.remove();
+            this.startNewGame();
         });
-        // 2. Auto Forward Delay Slider
-        const autoRow = document.createElement('div');
-        autoRow.className = 'kawa-setting-row';
-        const autoVal = (this.autoDelayMs / 1000).toFixed(1);
-        autoRow.innerHTML = `
-      <div class="kawa-setting-header">
-        <span>Auto Forward Delay</span>
-        <span class="kawa-setting-value" id="kawa-auto-val">${autoVal}s</span>
-      </div>
-      <input type="range" class="kawa-slider" id="kawa-auto-slider" min="500" max="5000" step="250" value="${this.autoDelayMs}">
-    `;
-        const autoInput = autoRow.querySelector('#kawa-auto-slider');
-        const autoValEl = autoRow.querySelector('#kawa-auto-val');
-        autoInput.addEventListener('input', () => {
-            this.autoDelayMs = Number(autoInput.value);
-            autoValEl.textContent = `${(this.autoDelayMs / 1000).toFixed(1)}s`;
-            this.saveSettings();
+        const menuBtn = document.createElement('button');
+        menuBtn.type = 'button';
+        menuBtn.className = 'kawa-choice-btn kawa-ending-btn';
+        menuBtn.style.marginTop = '10px';
+        menuBtn.innerHTML = `${SVG_ICONS.home} Main Menu`;
+        menuBtn.addEventListener('click', (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            endingCard.remove();
+            this.showMainMenu();
         });
-        // 3. Audio Volume Sliders
-        const musicRow = document.createElement('div');
-        musicRow.className = 'kawa-setting-row';
-        musicRow.innerHTML = `
-      <div class="kawa-setting-header">
-        <span>${SVG_ICONS.volumeOn} Music Volume</span>
-        <span class="kawa-setting-value" id="kawa-music-val">80%</span>
-      </div>
-      <input type="range" class="kawa-slider" id="kawa-music-slider" min="0" max="100" step="5" value="80">
-    `;
-        const sfxRow = document.createElement('div');
-        sfxRow.className = 'kawa-setting-row';
-        sfxRow.innerHTML = `
-      <div class="kawa-setting-header">
-        <span>${SVG_ICONS.volumeOn} SFX Volume</span>
-        <span class="kawa-setting-value" id="kawa-sfx-val">100%</span>
-      </div>
-      <input type="range" class="kawa-slider" id="kawa-sfx-slider" min="0" max="100" step="5" value="100">
-    `;
-        body.appendChild(speedRow);
-        body.appendChild(autoRow);
-        body.appendChild(musicRow);
-        body.appendChild(sfxRow);
-        card.appendChild(header);
-        card.appendChild(body);
-        overlay.appendChild(card);
-        this.rootEl.appendChild(overlay);
+        endingCard.appendChild(restartBtn);
+        endingCard.appendChild(menuBtn);
+        this.stageLayer.stageEl.appendChild(endingCard);
     }
     saveSettings() {
         if (typeof localStorage !== 'undefined') {
             try {
                 localStorage.setItem('kawaijs_settings', JSON.stringify({
                     typewriterSpeed: this.typewriterSpeed,
-                    autoDelayMs: this.autoDelayMs
+                    autoDelayMs: this.autoDelayMs,
+                    musicVolume: this.musicVolume,
+                    soundVolume: this.soundVolume
                 }));
             }
             catch { }
         }
     }
-    async showSaveLoadModal(mode) {
-        const existing = this.rootEl.querySelector('.kawa-modal-overlay');
-        if (existing)
-            existing.remove();
-        const overlay = document.createElement('div');
-        overlay.className = 'kawa-modal-overlay';
-        const card = document.createElement('div');
-        card.className = 'kawa-modal-card';
-        card.setAttribute('role', 'dialog');
-        card.setAttribute('aria-modal', 'true');
-        card.setAttribute('aria-label', mode === 'save' ? 'Save Game' : 'Load Game');
-        const header = document.createElement('div');
-        header.className = 'kawa-modal-header';
-        const title = document.createElement('div');
-        title.className = 'kawa-modal-title';
-        title.innerHTML = `${mode === 'save' ? SVG_ICONS.save : SVG_ICONS.load} <span>${mode === 'save' ? 'Save Game' : 'Load Game'}</span>`;
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'kawa-btn';
-        closeBtn.innerHTML = `${SVG_ICONS.close} <span>Close</span>`;
-        closeBtn.setAttribute('aria-label', 'Close modal');
-        closeBtn.addEventListener('click', () => overlay.remove());
-        header.appendChild(title);
-        header.appendChild(closeBtn);
-        const body = document.createElement('div');
-        body.className = 'kawa-modal-body';
-        const grid = document.createElement('div');
-        grid.className = 'kawa-slots-grid';
-        const saveManager = this.vm.getSaveManager();
-        const slots = await saveManager.listSlots(6);
-        slots.forEach((slot, idx) => {
-            const slotNum = String(idx + 1);
-            const slotCard = document.createElement('div');
-            slotCard.className = 'kawa-slot-card';
-            const slotHeader = document.createElement('div');
-            slotHeader.className = 'kawa-slot-header';
-            const badge = document.createElement('span');
-            badge.className = 'kawa-slot-badge';
-            badge.textContent = `Slot ${slotNum}`;
-            const timeSpan = document.createElement('span');
-            timeSpan.className = 'kawa-slot-time';
-            timeSpan.textContent = slot ? new Date(slot.timestamp).toLocaleString() : 'Empty';
-            slotHeader.appendChild(badge);
-            slotHeader.appendChild(timeSpan);
-            slotCard.appendChild(slotHeader);
-            if (slot) {
-                const preview = document.createElement('div');
-                preview.className = 'kawa-slot-preview';
-                preview.textContent = slot.previewText || `Label: ${slot.snapshot.state.currentLabel}`;
-                slotCard.appendChild(preview);
-            }
-            else {
-                const emptyText = document.createElement('div');
-                emptyText.className = 'kawa-slot-empty-text';
-                emptyText.textContent = 'No save data';
-                slotCard.appendChild(emptyText);
-            }
-            const actions = document.createElement('div');
-            actions.className = 'kawa-slot-actions';
-            if (mode === 'save') {
-                const saveActionBtn = document.createElement('button');
-                saveActionBtn.className = 'kawa-slot-btn kawa-slot-btn-save';
-                saveActionBtn.innerHTML = `${SVG_ICONS.save} Save Here`;
-                saveActionBtn.setAttribute('aria-label', `Save to slot ${slotNum}`);
-                saveActionBtn.addEventListener('click', async () => {
-                    await this.vm.save(slotNum);
-                    overlay.remove();
-                    this.showSaveLoadModal('save');
-                });
-                actions.appendChild(saveActionBtn);
-            }
-            else {
-                if (slot) {
-                    const loadActionBtn = document.createElement('button');
-                    loadActionBtn.className = 'kawa-slot-btn kawa-slot-btn-load';
-                    loadActionBtn.innerHTML = `${SVG_ICONS.load} Load`;
-                    loadActionBtn.setAttribute('aria-label', `Load slot ${slotNum}`);
-                    loadActionBtn.addEventListener('click', async () => {
-                        const ok = await this.vm.load(slotNum);
-                        if (ok)
-                            overlay.remove();
-                    });
-                    actions.appendChild(loadActionBtn);
-                }
-            }
-            if (slot) {
-                const delBtn = document.createElement('button');
-                delBtn.className = 'kawa-slot-btn kawa-slot-btn-del';
-                delBtn.innerHTML = SVG_ICONS.trash;
-                delBtn.title = 'Delete Save';
-                delBtn.setAttribute('aria-label', `Delete slot ${slotNum}`);
-                delBtn.addEventListener('click', async () => {
-                    await saveManager.deleteSlot(slotNum);
-                    overlay.remove();
-                    this.showSaveLoadModal(mode);
-                });
-                actions.appendChild(delBtn);
-            }
-            slotCard.appendChild(actions);
-            grid.appendChild(slotCard);
-        });
-        body.appendChild(grid);
-        card.appendChild(header);
-        card.appendChild(body);
-        overlay.appendChild(card);
-        this.rootEl.appendChild(overlay);
-    }
-    showHistoryModal() {
-        const existing = this.rootEl.querySelector('.kawa-modal-overlay');
-        if (existing)
-            existing.remove();
-        const overlay = document.createElement('div');
-        overlay.className = 'kawa-modal-overlay';
-        const card = document.createElement('div');
-        card.className = 'kawa-modal-card';
-        card.setAttribute('role', 'dialog');
-        card.setAttribute('aria-modal', 'true');
-        card.setAttribute('aria-label', 'Dialogue History');
-        const header = document.createElement('div');
-        header.className = 'kawa-modal-header';
-        const title = document.createElement('div');
-        title.className = 'kawa-modal-title';
-        title.innerHTML = `${SVG_ICONS.history} <span>Dialogue History</span>`;
-        const closeBtn = document.createElement('button');
-        closeBtn.className = 'kawa-btn';
-        closeBtn.innerHTML = `${SVG_ICONS.close} <span>Close</span>`;
-        closeBtn.setAttribute('aria-label', 'Close history modal');
-        closeBtn.addEventListener('click', () => overlay.remove());
-        header.appendChild(title);
-        header.appendChild(closeBtn);
-        const body = document.createElement('div');
-        body.className = 'kawa-modal-body';
-        const entries = this.vm.getHistoryManager().getEntries();
-        if (entries.length === 0) {
-            const emptyMsg = document.createElement('div');
-            emptyMsg.textContent = 'No dialogue history yet.';
-            emptyMsg.style.opacity = '0.6';
-            body.appendChild(emptyMsg);
-        }
-        else {
-            for (const entry of entries) {
-                const item = document.createElement('div');
-                item.className = 'kawa-history-item';
-                if (entry.speakerDisplayName) {
-                    const spk = document.createElement('div');
-                    spk.className = 'kawa-history-speaker';
-                    spk.textContent = entry.speakerDisplayName;
-                    item.appendChild(spk);
-                }
-                const txt = document.createElement('div');
-                txt.innerHTML = formatRichText(entry.text);
-                item.appendChild(txt);
-                body.appendChild(item);
-            }
-        }
-        card.appendChild(header);
-        card.appendChild(body);
-        overlay.appendChild(card);
-        this.rootEl.appendChild(overlay);
-    }
 }
 //# sourceMappingURL=renderer.js.map