@luna-editor/engine 0.1.0 → 0.3.0

package/dist/Player.js

@@ -10,33 +10,75 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { useScreenSizeAtom } from "./atoms/screen-size";
+import { BackgroundLayer } from "./components/BackgroundLayer";
+import { ClickWaitIndicator } from "./components/ClickWaitIndicator";
+import { ConversationBranchBox } from "./components/ConversationBranchBox";
 import { DialogueBox } from "./components/DialogueBox";
 import { EndScreen } from "./components/EndScreen";
+import { FullscreenTextBox } from "./components/FullscreenTextBox";
 import { GameScreen } from "./components/GameScreen";
 import { OverlayUI } from "./components/OverlayUI";
 import { PluginComponentProvider } from "./components/PluginComponentProvider";
+import { TimeWaitIndicator } from "./components/TimeWaitIndicator";
+import { AudioProvider } from "./contexts/AudioContext";
 import { DataProvider } from "./contexts/DataContext";
 import { useBacklog } from "./hooks/useBacklog";
+import { useConversationBranch } from "./hooks/useConversationBranch";
+import { useFontLoader } from "./hooks/useFontLoader";
 import { usePlayerLogic } from "./hooks/usePlayerLogic";
 import { setGlobalUIAPI } from "./hooks/usePluginAPI";
 import { usePluginEvents } from "./hooks/usePluginEvents";
 import { usePreloadImages } from "./hooks/usePreloadImages";
+import { useSoundPlayer } from "./hooks/useSoundPlayer";
 import { useTypewriter } from "./hooks/useTypewriter";
 import { PluginManager } from "./plugin/PluginManager";
 import { ComponentType } from "./sdk";
-export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, className, autoplay = false, }) => {
-    var _a;
-    const pluginManagerRef = useRef(new PluginManager());
+import { convertBranchBlockToScenarioBlock } from "./utils/branchBlockConverter";
+import { BranchNavigator } from "./utils/branchNavigator";
+import { VariableManager } from "./utils/variableManager";
+export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds = [], onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, onSettingsChange, className, autoplay = false, preventDefaultScroll = true, screenSize: screenSizeProp, disableKeyboardNavigation = false, }) => {
+    var _a, _b, _c, _d, _e;
+    // scenario.blocks が存在しない場合は空の配列を使用
+    const scenario = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, scenarioProp), { blocks: (_a = scenarioProp.blocks) !== null && _a !== void 0 ? _a : [] }));
+    }, [scenarioProp]);
+    // デフォルト値とマージ
+    const mergedSettings = Object.assign({ textSpeed: 80, autoPlaySpeed: 3, bgmVolume: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0 }, settings);
+    // プラグインからの設定更新ハンドラ
+    const handleSettingsUpdate = useCallback((updatedSettings) => {
+        var _a, _b;
+        const newSettings = Object.assign(Object.assign({ aspectRatio: (_a = settings === null || settings === void 0 ? void 0 : settings.aspectRatio) !== null && _a !== void 0 ? _a : "16:9", bgObjectFit: (_b = settings === null || settings === void 0 ? void 0 : settings.bgObjectFit) !== null && _b !== void 0 ? _b : "cover" }, settings), updatedSettings);
+        onSettingsChange === null || onSettingsChange === void 0 ? void 0 : onSettingsChange(newSettings);
+    }, [settings, onSettingsChange]);
+    // 遅延初期化でPluginManagerを作成（毎レンダリングでnew PluginManager()が評価されるのを防ぐ）
+    const pluginManagerRef = useRef(undefined);
+    if (!pluginManagerRef.current) {
+        pluginManagerRef.current = new PluginManager();
+    }
+    // 以降の参照用（undefinedにならないことを保証）
+    const pluginManager = pluginManagerRef.current;
+    const handleChoiceSelectionRef = useRef(null);
     // グローバルUIAPIを初期化（プラグインコンポーネントから使用可能にする）
     useEffect(() => {
-        const uiAPI = pluginManagerRef.current.getUIAPI();
-        setGlobalUIAPI(uiAPI, pluginManagerRef.current);
-    }, []);
+        const uiAPI = pluginManager.getUIAPI();
+        setGlobalUIAPI(uiAPI, pluginManager);
+    }, [pluginManager]);
+    // プラグインのミュート状態を設定
+    useEffect(() => {
+        var _a;
+        pluginManager.setMuteAudio((_a = mergedSettings.muteAudio) !== null && _a !== void 0 ? _a : false);
+    }, [pluginManager, mergedSettings.muteAudio]);
     // 画面サイズの初期化
     const [, setScreenSize] = useScreenSizeAtom();
     useEffect(() => {
+        // screenSizeが明示的に指定されている場合はそれを使用（プレビュー用）
+        if (screenSizeProp) {
+            setScreenSize(screenSizeProp);
+            return;
+        }
         // クライアントサイドでのみ実行
         if (typeof window === "undefined")
             return;
@@ -50,47 +92,199 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         };
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
-    }, [setScreenSize]);
+    }, [setScreenSize, screenSizeProp]);
     // 表示可能なブロックのインデックスを事前計算
     const displayableBlockIndices = useMemo(() => {
-        const supportedBlockTypes = ["dialogue", "narration"];
-        return scenario.blocks
+        const supportedBlockTypes = [
+            "dialogue",
+            "narration",
+            "conversation_branch",
+            "fullscreen_text",
+            "click_wait",
+            "time_wait",
+        ];
+        const indices = scenario.blocks
             .map((block, index) => ({ block, index }))
             .filter(({ block }) => supportedBlockTypes.includes(block.blockType))
             .map(({ index }) => index);
+        return indices;
     }, [scenario.blocks]);
+    // 変数マネージャーの初期化
+    const variableManagerRef = useRef(scenario.variables && scenario.variables.length > 0
+        ? new VariableManager(scenario.variables)
+        : null);
+    // メディアタイプを判定するヘルパー関数
+    const getMediaType = useCallback((url) => {
+        var _a, _b;
+        const extension = (_b = (_a = url.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+        if (["mp4", "webm", "ogg", "mov", "avi", "mkv"].includes(extension)) {
+            return "video";
+        }
+        if (extension === "gif") {
+            return "gif";
+        }
+        return "image";
+    }, []);
+    // 現在の背景状態を計算（character_entranceパターンに倣う）
+    // background_groupの場合は複数の背景を配列で返す
+    const calculateCurrentBackground = useCallback((upToBlockIndex) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        let currentBackgroundBlock = null;
+        let previousBackgroundBlock = null;
+        let backgroundGroupBlock = null;
+        // 現在のブロックまでを逆順で走査して、最後のbackground_changeまたはbackground_groupを見つける
+        // background_changeが先に見つかった場合、background_groupは無視する（背景がリセットされる）
+        for (let i = upToBlockIndex; i >= 0; i--) {
+            const block = scenario.blocks[i];
+            // background_groupの場合
+            if (block.blockType === "background_group" &&
+                block.backgroundGroupItems &&
+                block.backgroundGroupItems.length > 0) {
+                // すでにbackground_changeが見つかっている場合は無視
+                // （background_changeがbackground_groupより後にあるので、背景はリセットされている）
+                if (currentBackgroundBlock) {
+                    break;
+                }
+                backgroundGroupBlock = block;
+                break;
+            }
+            // imageUrlが存在し、かつ空文字列でないことを確認
+            const imageUrl = (_a = block.backgroundState) === null || _a === void 0 ? void 0 : _a.imageUrl;
+            if (block.blockType === "background_change" &&
+                imageUrl &&
+                imageUrl.trim() !== "") {
+                if (!currentBackgroundBlock) {
+                    currentBackgroundBlock = block;
+                }
+                else if (!previousBackgroundBlock) {
+                    previousBackgroundBlock = block;
+                    break; // 2つ見つかったら終了
+                }
+            }
+        }
+        // background_groupが見つかった場合（background_changeより後にない場合のみ）
+        if (backgroundGroupBlock) {
+            return ((_c = (_b = backgroundGroupBlock.backgroundGroupItems) === null || _b === void 0 ? void 0 : _b.filter((item) => !!item.state.imageUrl && item.state.imageUrl.trim() !== "").map((item) => {
+                var _a, _b;
+                return ({
+                    objectId: item.objectId,
+                    stateId: item.stateId,
+                    objectName: item.object.name,
+                    stateName: item.state.name,
+                    imageUrl: item.state.imageUrl,
+                    webmUrl: (_a = item.state.webmUrl) !== null && _a !== void 0 ? _a : null,
+                    objectFit: item.objectFit,
+                    loop: item.loop,
+                    mediaType: getMediaType(item.state.imageUrl),
+                    opacity: item.opacity,
+                    layer: (_b = item.layer) !== null && _b !== void 0 ? _b : "background",
+                });
+            })) !== null && _c !== void 0 ? _c : []);
+        }
+        if (!currentBackgroundBlock) {
+            return [];
+        }
+        const imageUrl = (_e = (_d = currentBackgroundBlock.backgroundState) === null || _d === void 0 ? void 0 : _d.imageUrl) !== null && _e !== void 0 ? _e : "";
+        // 前の背景ブロックのfadeDurationを使用（前の背景→現在の背景へのフェード時間）
+        // ブロックに設定がない場合はデフォルト値を使用
+        const previousOptions = previousBackgroundBlock === null || previousBackgroundBlock === void 0 ? void 0 : previousBackgroundBlock.options;
+        const blockFadeDuration = typeof (previousOptions === null || previousOptions === void 0 ? void 0 : previousOptions.fadeDuration) === "number"
+            ? previousOptions.fadeDuration
+            : 0;
+        const fadeDuration = blockFadeDuration > 0
+            ? blockFadeDuration
+            : mergedSettings.defaultBackgroundFadeDuration;
+        return [
+            {
+                objectId: (_f = currentBackgroundBlock.backgroundObjectId) !== null && _f !== void 0 ? _f : "",
+                stateId: (_g = currentBackgroundBlock.backgroundStateId) !== null && _g !== void 0 ? _g : "",
+                objectName: (_j = (_h = currentBackgroundBlock.backgroundObject) === null || _h === void 0 ? void 0 : _h.name) !== null && _j !== void 0 ? _j : "",
+                stateName: (_l = (_k = currentBackgroundBlock.backgroundState) === null || _k === void 0 ? void 0 : _k.name) !== null && _l !== void 0 ? _l : "",
+                imageUrl: imageUrl,
+                webmUrl: (_o = (_m = currentBackgroundBlock.backgroundState) === null || _m === void 0 ? void 0 : _m.webmUrl) !== null && _o !== void 0 ? _o : null,
+                objectFit: (_p = currentBackgroundBlock.backgroundObjectFit) !== null && _p !== void 0 ? _p : "cover",
+                loop: (_q = currentBackgroundBlock.backgroundLoop) !== null && _q !== void 0 ? _q : true,
+                mediaType: getMediaType(imageUrl),
+                fadeDuration,
+                opacity: 1.0,
+                layer: "background",
+            },
+        ];
+    }, [
+        scenario.blocks,
+        getMediaType,
+        mergedSettings.defaultBackgroundFadeDuration,
+    ]);
     const [state, setState] = useState({
         currentBlockIndex: 0,
         isPlaying: autoplay,
         isEnded: false,
+        variables: (_a = variableManagerRef.current) === null || _a === void 0 ? void 0 : _a.getVariablesMap(),
     });
+    const [currentBranchBlock, setCurrentBranchBlock] = useState(null);
+    // 遷移の種類を追跡（クリック、自動、時間待ちなど）
+    const [transitionSource, setTransitionSource] = useState("click");
+    // シナリオIDを追跡して、変更時に状態をリセット（プレビュー用）
+    const previousScenarioIdRef = useRef(scenario.id);
+    // シナリオが変更されたときに状態をリセット（keyを変更せずに対応）
+    useEffect(() => {
+        var _a;
+        if (previousScenarioIdRef.current !== scenario.id) {
+            previousScenarioIdRef.current = scenario.id;
+            // 状態をリセット
+            setState({
+                currentBlockIndex: 0,
+                isPlaying: autoplay,
+                isEnded: false,
+                variables: (_a = variableManagerRef.current) === null || _a === void 0 ? void 0 : _a.getVariablesMap(),
+            });
+            setCurrentBranchBlock(null);
+        }
+    }, [scenario.id, autoplay]);
     // 画像を事前読み込み
     const imagesLoaded = usePreloadImages(scenario);
+    // フォントを読み込み
+    const { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts);
     // プラグインの読み込み状態
     const [pluginsLoaded, setPluginsLoaded] = useState(false);
+    // 読み込み済みプラグインのパッケージ名を追跡
+    const loadedPluginNamesRef = useRef(new Set());
     // プラグインの読み込み
+    // biome-ignore lint/correctness/useExhaustiveDependencies: pluginManagerは安定した参照なので依存配列から除外しても安全
     useEffect(() => {
+        let isCancelled = false;
         const loadPlugins = () => __awaiter(void 0, void 0, void 0, function* () {
-            console.log("Loading plugins:", plugins);
-            setPluginsLoaded(false);
-            for (const plugin of plugins) {
-                console.log("Loading plugin:", plugin.packageName);
-                yield pluginManagerRef.current.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
+            // 作品のサウンドデータをPluginManagerに設定
+            if (sounds.length > 0) {
+                pluginManager.setWorkSounds(sounds);
+            }
+            // 未読み込みのプラグインのみを抽出
+            const newPlugins = plugins.filter((plugin) => !loadedPluginNamesRef.current.has(plugin.packageName));
+            // 新しいプラグインがある場合のみローディング状態にする
+            if (newPlugins.length > 0) {
+                setPluginsLoaded(false);
+                for (const plugin of newPlugins) {
+                    if (isCancelled)
+                        return;
+                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
+                    loadedPluginNamesRef.current.add(plugin.packageName);
+                }
+                if (isCancelled)
+                    return;
+                pluginManager.callHook("onInit");
+                pluginManager.showUI(ComponentType.DialogueBox);
+                // 全てのアセットプリロードが完了するまで待機
+                yield pluginManager.waitForPreloads();
+            }
+            if (!isCancelled) {
+                setPluginsLoaded(true);
             }
-            // プラグイン初期化フック - すべてのプラグインの読み込み完了後に実行
-            console.log("Calling onInit hook");
-            pluginManagerRef.current.callHook("onInit");
-            // DialogueBoxの初期状態を表示に設定
-            pluginManagerRef.current.showUI(ComponentType.DialogueBox);
-            setPluginsLoaded(true);
-            console.log("All plugins loaded successfully");
         });
         loadPlugins();
         return () => {
-            const manager = pluginManagerRef.current;
-            manager.cleanup();
+            isCancelled = true;
         };
-    }, [plugins]);
+    }, [plugins, sounds]);
     // 初回レンダリング完了フラグ
     const [isFirstRenderComplete, setIsFirstRenderComplete] = useState(false);
     // シナリオ開始コールバック（後でcurrentBlockが定義された後に実行）
@@ -104,58 +298,222 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
             // data-character-id属性を持つ最初のキャラクター要素を取得
             const characterSpriteElement = document.querySelector("[data-character-id]");
             const gameScreenElement = document.querySelector(".h-screen.w-full");
-            console.log("🔍 [StyleAPI] Element registration:", {
-                speakerNameElement: !!speakerNameElement,
-                dialogueElement: !!dialogueElement,
-                characterSpriteElement: !!characterSpriteElement,
-                gameScreenElement: !!gameScreenElement,
-            });
             if (speakerNameElement) {
-                pluginManagerRef.current.registerStyleElement("speakerName", speakerNameElement);
+                pluginManager.registerStyleElement("speakerName", speakerNameElement);
             }
             if (dialogueElement) {
-                pluginManagerRef.current.registerStyleElement("dialogueBox", dialogueElement);
-                pluginManagerRef.current.registerStyleElement("scenarioBlockContent", dialogueElement);
+                pluginManager.registerStyleElement("dialogueBox", dialogueElement);
+                pluginManager.registerStyleElement("scenarioBlockContent", dialogueElement);
             }
             if (characterSpriteElement) {
-                pluginManagerRef.current.registerStyleElement("characterSprite", characterSpriteElement);
+                pluginManager.registerStyleElement("characterSprite", characterSpriteElement);
             }
             if (gameScreenElement) {
-                pluginManagerRef.current.registerStyleElement("gameScreen", gameScreenElement);
-                pluginManagerRef.current.registerStyleElement("background", gameScreenElement);
+                pluginManager.registerStyleElement("gameScreen", gameScreenElement);
+                pluginManager.registerStyleElement("background", gameScreenElement);
             }
         }
-    }, [isFirstRenderComplete]);
-    const { displayText, isTyping, skipTyping, startTyping } = useTypewriter({
-        speed: 80,
+    }, [pluginManager, isFirstRenderComplete]);
+    // Fullscreen text要素の登録（ブロックタイプがfullscreen_textの時のみ）
+    useEffect(() => {
+        if (!isFirstRenderComplete)
+            return;
+        // 少し遅延させてDOMが更新されるのを待つ
+        const timeoutId = setTimeout(() => {
+            const fullscreenOverlay = document.querySelector("[data-fullscreen-text-element]");
+            const fullscreenContainer = document.querySelector("[data-fullscreen-text-container]");
+            if (fullscreenOverlay) {
+                pluginManager.registerStyleElement("fullscreenTextOverlay", fullscreenOverlay);
+            }
+            if (fullscreenContainer) {
+                pluginManager.registerStyleElement("fullscreenTextContainer", fullscreenContainer);
+            }
+        }, 100);
+        return () => clearTimeout(timeoutId);
+    }, [pluginManager, isFirstRenderComplete]);
+    const { displayText, isTyping, skipTyping, startTyping, resetAccumulated } = useTypewriter({
+        speed: mergedSettings.textSpeed,
     });
-    // 現在の表示可能なブロックを取得
-    const currentBlock = displayableBlockIndices[state.currentBlockIndex] !== undefined
-        ? scenario.blocks[displayableBlockIndices[state.currentBlockIndex]]
-        : undefined;
+    // 現在の表示可能なブロックを取得（分岐ブロックが優先）
+    const currentBlock = currentBranchBlock ||
+        (displayableBlockIndices[state.currentBlockIndex] !== undefined
+            ? scenario.blocks[displayableBlockIndices[state.currentBlockIndex]]
+            : undefined);
+    // 前のブロックを取得（フェード処理用）
+    const previousBlock = useMemo(() => {
+        if (state.currentBlockIndex <= 0)
+            return null;
+        const prevIdx = displayableBlockIndices[state.currentBlockIndex - 1];
+        return prevIdx !== undefined ? scenario.blocks[prevIdx] : null;
+    }, [scenario.blocks, displayableBlockIndices, state.currentBlockIndex]);
     // usePlayerLogicに渡す実際のブロックインデックス
-    const actualBlockIndex = (_a = displayableBlockIndices[state.currentBlockIndex]) !== null && _a !== void 0 ? _a : 0;
+    const actualBlockIndex = (_b = displayableBlockIndices[state.currentBlockIndex]) !== null && _b !== void 0 ? _b : 0;
     // バックログ機能
     const backlog = useBacklog({
         scenario,
         currentBlockIndex: actualBlockIndex,
         currentBlock: currentBlock || null,
     });
+    // サウンド再生機能
+    // actualBlockIndexの前後にあるサウンドブロックを処理するため、
+    // 表示ブロックに到達する直前のサウンドブロックを取得
+    const soundBlocksToProcess = useMemo(() => {
+        const blocks = [];
+        const currentDisplayableIdx = displayableBlockIndices[state.currentBlockIndex];
+        if (currentDisplayableIdx === undefined)
+            return blocks;
+        // 前の表示可能ブロックのインデックスを取得
+        const prevDisplayableIdx = state.currentBlockIndex > 0
+            ? displayableBlockIndices[state.currentBlockIndex - 1]
+            : -1;
+        // 前の表示ブロックから現在の表示ブロックまでの間にあるサウンドブロックを収集
+        for (let i = prevDisplayableIdx + 1; i < currentDisplayableIdx; i++) {
+            const block = scenario.blocks[i];
+            if (block.blockType === "bgm_play" ||
+                block.blockType === "se_play" ||
+                block.blockType === "bgm_stop") {
+                blocks.push(block);
+            }
+        }
+        return blocks;
+    }, [scenario.blocks, displayableBlockIndices, state.currentBlockIndex]);
+    // サウンド再生フック
+    useSoundPlayer({
+        soundBlocks: soundBlocksToProcess,
+        isFirstRenderComplete,
+        muteAudio: mergedSettings.muteAudio,
+    });
+    // 会話分岐機能
+    const branchNavigatorRef = useRef(new BranchNavigator());
+    const conversationBranch = useConversationBranch({
+        apiBaseUrl: typeof window !== "undefined" ? window.location.origin : "",
+        variableManager: variableManagerRef.current,
+        scenario,
+    });
+    // conversationBranchから安定した参照を抽出
+    const { loadBranch, selectChoice, getSelectedChoiceFullData, branchState } = conversationBranch;
+    // 選択肢選択処理
+    const handleChoiceSelection = useCallback((choiceId) => {
+        selectChoice(choiceId);
+        const selectedChoice = getSelectedChoiceFullData(choiceId);
+        if (selectedChoice) {
+            branchNavigatorRef.current.startBranchNavigation(selectedChoice);
+            pluginManager.callHook("onChoiceSelected", {
+                choiceId,
+                choiceText: selectedChoice.choiceText,
+            });
+            const firstBranchBlock = branchNavigatorRef.current.nextBranchBlock();
+            if (firstBranchBlock) {
+                setCurrentBranchBlock(convertBranchBlockToScenarioBlock(firstBranchBlock));
+            }
+        }
+        else {
+            console.error("[ConversationBranch] No choice data found for:", choiceId);
+        }
+    }, [pluginManager, selectChoice, getSelectedChoiceFullData]);
+    // handleChoiceSelectionRefを更新
+    handleChoiceSelectionRef.current = handleChoiceSelection;
+    // window.playerAPIとPluginManagerのコールバックを設定
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            window.playerAPI = {
+                selectChoice: (choiceId) => {
+                    var _a;
+                    (_a = handleChoiceSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(handleChoiceSelectionRef, choiceId);
+                },
+            };
+        }
+        pluginManager.setSelectChoiceCallback((choiceId) => {
+            var _a;
+            (_a = handleChoiceSelectionRef.current) === null || _a === void 0 ? void 0 : _a.call(handleChoiceSelectionRef, choiceId);
+        });
+        pluginManager.setGetBranchStateCallback(() => {
+            return branchState;
+        });
+        return () => {
+            if (typeof window !== "undefined") {
+                delete window.playerAPI;
+            }
+        };
+    }, [pluginManager, branchState]);
     // ダイアログ表示とアクションノード実行のuseEffectを分離
     useEffect(() => {
         if (currentBlock) {
-            startTyping(currentBlock.content || "");
+            // fullscreen_text は独自のタイプライターを使うので、displayTextをクリアしてスキップ
+            if (currentBlock.blockType === "fullscreen_text") {
+                startTyping("");
+                return;
+            }
+            let content = currentBlock.content || "";
+            if (variableManagerRef.current &&
+                (currentBlock.blockType === "dialogue" ||
+                    currentBlock.blockType === "narration")) {
+                content = variableManagerRef.current.interpolateText(content);
+            }
+            // 前のブロックのcontinueModeをチェック
+            const previousOptions = previousBlock === null || previousBlock === void 0 ? void 0 : previousBlock.options;
+            let continueMode = false;
+            if (previousOptions === null || previousOptions === void 0 ? void 0 : previousOptions.continueMode) {
+                const mode = previousOptions.continueMode;
+                if (mode === "continue" || mode === "continueWithNewline") {
+                    continueMode = mode;
+                }
+            }
+            const isContinuableBlock = currentBlock.blockType === "dialogue" ||
+                currentBlock.blockType === "narration";
+            if (continueMode && isContinuableBlock) {
+                startTyping(content, continueMode);
+            }
+            else {
+                resetAccumulated();
+                startTyping(content, false);
+            }
+        }
+    }, [currentBlock, previousBlock, startTyping, resetAccumulated]);
+    // 分岐ブロック自動ロード処理
+    useEffect(() => {
+        if (currentBlock && currentBlock.blockType === "conversation_branch") {
+            loadBranch(currentBlock.id);
         }
-    }, [currentBlock, startTyping]);
-    // 画像読み込み完了後、GameScreenがマウントされてから表示する
+    }, [currentBlock, loadBranch]);
+    // プラグインフックを別のuseEffectで実行（branchStateが更新されてから）
     useEffect(() => {
-        if (imagesLoaded && currentBlock && !isFirstRenderComplete) {
+        if (currentBlock &&
+            currentBlock.blockType === "conversation_branch" &&
+            branchState.isActive) {
+            pluginManager.callHook("onBranchStart", {
+                branchBlockId: currentBlock.id,
+                choices: branchState.currentChoices,
+            });
+            // 変数分岐の場合は自動で選択された分岐に進む
+            if (branchState.branchType === "variable") {
+                if (branchState.selectedChoiceId) {
+                    handleChoiceSelection(branchState.selectedChoiceId);
+                }
+                else if (branchState.errorState === "NO_MATCHING_CONDITION") {
+                    console.error("変数分岐: いずれの条件にも一致しませんでした。シナリオが停止します。");
+                }
+            }
+        }
+    }, [
+        pluginManager,
+        currentBlock,
+        branchState.isActive,
+        branchState.currentChoices,
+        branchState.branchType,
+        branchState.selectedChoiceId,
+        branchState.errorState,
+        handleChoiceSelection,
+    ]);
+    // 画像とフォント読み込み完了後、GameScreenがマウントされてから表示する
+    useEffect(() => {
+        if (imagesLoaded && fontsLoaded && currentBlock && !isFirstRenderComplete) {
             // requestAnimationFrameを使用してレンダリング完了を待つ
             requestAnimationFrame(() => {
                 setIsFirstRenderComplete(true);
             });
         }
-    }, [imagesLoaded, currentBlock, isFirstRenderComplete]);
+    }, [imagesLoaded, fontsLoaded, currentBlock, isFirstRenderComplete]);
     // シナリオ開始コールバック（currentBlock定義後）
     useEffect(() => {
         if (isFirstRenderComplete && !hasStarted && currentBlock) {
@@ -163,8 +521,30 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
             onScenarioStart === null || onScenarioStart === void 0 ? void 0 : onScenarioStart();
         }
     }, [isFirstRenderComplete, hasStarted, currentBlock, onScenarioStart]);
-    const { handleNext: handleNextInternal, handlePrevious: handlePreviousInternal, togglePlay, // eslint-disable-line @typescript-eslint/no-unused-vars
-    restart: restartInternal, displayedCharacters, } = usePlayerLogic({
+    // restartをusePlayerLogicの前に定義（分岐状態もリセット + キャンセルコールバック）
+    const restart = useCallback(() => {
+        // リスタート時はシナリオがキャンセルされたとみなす
+        if (hasStarted && !state.isEnded) {
+            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
+        }
+        setIsFirstRenderComplete(false);
+        setHasStarted(false);
+        setCurrentBranchBlock(null);
+        branchNavigatorRef.current.reset();
+        resetAccumulated(); // 蓄積テキストをクリア
+        setState({
+            currentBlockIndex: 0,
+            isPlaying: autoplay,
+            isEnded: false,
+        });
+    }, [
+        autoplay,
+        hasStarted,
+        state.isEnded,
+        onScenarioCancelled,
+        resetAccumulated,
+    ]);
+    const { handleNext: handleNextInternal, handlePrevious: handlePreviousInternal, togglePlay: _togglePlay, restart: _restartInternal, displayedCharacters, } = usePlayerLogic({
         state: Object.assign(Object.assign({}, state), { currentBlockIndex: actualBlockIndex }),
         setState: (newState) => {
             if (typeof newState === "function") {
@@ -190,13 +570,18 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         onEnd,
         onScenarioEnd,
         autoplay,
+        branchState: branchState,
+        branchNavigator: branchNavigatorRef.current,
+        customRestart: restart,
+        variableManager: variableManagerRef.current,
+        disableKeyboardNavigation,
     });
     // プラグインイベント処理
     const realBlockIndex = currentBlock
         ? scenario.blocks.indexOf(currentBlock)
         : 0;
     usePluginEvents({
-        pluginManager: pluginManagerRef.current,
+        pluginManager: pluginManager,
         currentBlock,
         displayedCharacters,
         blockIndex: state.currentBlockIndex,
@@ -204,6 +589,7 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         allBlocks: scenario.blocks,
         realBlockIndex,
         pluginsLoaded,
+        transitionSource,
     });
     // 初期履歴構築（シナリオ開始時）
     useEffect(() => {
@@ -212,8 +598,31 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         }
     }, [isFirstRenderComplete, actualBlockIndex, backlog]);
     // ハンドラーをラップして表示可能インデックスで動作するように
-    const handleNext = useCallback(() => {
-        if (state.currentBlockIndex < displayableBlockIndices.length - 1) {
+    const handleNext = useCallback((source = "click") => {
+        // time_waitブロックはクリックで遷移できないようにする
+        if (source === "click" && (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait") {
+            return;
+        }
+        // 遷移元を設定
+        setTransitionSource(source);
+        if (currentBranchBlock &&
+            branchNavigatorRef.current.hasMoreBranchBlocks()) {
+            const nextBranchBlock = branchNavigatorRef.current.nextBranchBlock();
+            if (nextBranchBlock) {
+                setCurrentBranchBlock(convertBranchBlockToScenarioBlock(nextBranchBlock));
+            }
+            else {
+                setCurrentBranchBlock(null);
+                branchNavigatorRef.current.reset();
+                handleNextInternal();
+            }
+        }
+        else if (currentBranchBlock) {
+            setCurrentBranchBlock(null);
+            branchNavigatorRef.current.reset();
+            handleNextInternal();
+        }
+        else if (state.currentBlockIndex < displayableBlockIndices.length - 1) {
             handleNextInternal();
         }
         else {
@@ -222,6 +631,8 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
             onScenarioEnd === null || onScenarioEnd === void 0 ? void 0 : onScenarioEnd();
         }
     }, [
+        currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType,
+        currentBranchBlock,
         state.currentBlockIndex,
         displayableBlockIndices.length,
         handleNextInternal,
@@ -229,24 +640,16 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         onScenarioEnd,
     ]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const handlePrevious = useCallback(() => {
+    const _handlePrevious = useCallback(() => {
         if (state.currentBlockIndex > 0) {
             handlePreviousInternal();
         }
     }, [state.currentBlockIndex, handlePreviousInternal]);
-    // restartをラップして、firstRenderCompleteもリセット
-    const restart = useCallback(() => {
-        // リスタート時はシナリオがキャンセルされたとみなす
-        if (hasStarted && !state.isEnded) {
-            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
-        }
-        setIsFirstRenderComplete(false);
-        setHasStarted(false);
-        restartInternal();
-    }, [hasStarted, state.isEnded, onScenarioCancelled, restartInternal]);
+    // 現在の背景を計算
+    const currentBackground = useMemo(() => calculateCurrentBackground(actualBlockIndex), [calculateCurrentBackground, actualBlockIndex]);
     // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
     const dataContext = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         return ({
             playback: {
                 currentBlockIndex: actualBlockIndex,
@@ -254,7 +657,9 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
                 scenarioId: scenario.id,
                 scenarioName: scenario.name,
                 currentBlock: currentBlock || null,
-                displayText,
+                displayText: displayText.includes("\n")
+                    ? displayText.split("\n").map((line, index, array) => (_jsxs(React.Fragment, { children: [line, index < array.length - 1 && _jsx("br", {})] }, index)))
+                    : displayText,
                 isTyping,
                 displayedCharacters,
             },
@@ -265,22 +670,32 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
                 clearLogs: backlog.clearLogs,
             },
             settings: {
-                aspectRatio: (_a = settings === null || settings === void 0 ? void 0 : settings.aspectRatio) !== null && _a !== void 0 ? _a : "16:9",
-                bgObjectFit: (_b = settings === null || settings === void 0 ? void 0 : settings.bgObjectFit) !== null && _b !== void 0 ? _b : "contain",
-                textSpeed: 5,
-                autoPlaySpeed: 3,
-                bgmVolume: 0.8,
-                seVolume: 1.0,
-                voiceVolume: 1.0,
+                aspectRatio: (_a = mergedSettings.aspectRatio) !== null && _a !== void 0 ? _a : "16:9",
+                bgObjectFit: (_b = mergedSettings.bgObjectFit) !== null && _b !== void 0 ? _b : "contain",
+                textSpeed: mergedSettings.textSpeed,
+                autoPlaySpeed: mergedSettings.autoPlaySpeed,
+                bgmVolume: mergedSettings.bgmVolume,
+                seVolume: mergedSettings.seVolume,
+                voiceVolume: mergedSettings.voiceVolume,
                 skipMode: "unread",
             },
             pluginAssets: {
                 getAssetUrl: (pluginName, filename) => {
-                    return pluginManagerRef.current.getPluginAssetUrl(pluginName, filename);
+                    return pluginManager.getPluginAssetUrl(pluginName, filename);
                 },
             },
+            branchData: conversationBranch.branchState,
+            branchHistory: [],
+            background: currentBackground.length > 0 ? currentBackground[0] : null,
+            backgrounds: currentBackground,
+            fonts: {
+                fonts: (_c = scenario.fonts) !== null && _c !== void 0 ? _c : [],
+                selectedFontFamily: mergedSettings.selectedFontFamily,
+                isLoaded: fontsLoaded,
+            },
         });
     }, [
+        pluginManager,
         actualBlockIndex,
         scenario,
         currentBlock,
@@ -288,10 +703,22 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         isTyping,
         displayedCharacters,
         backlog,
-        settings,
+        conversationBranch.branchState,
+        mergedSettings.aspectRatio,
+        mergedSettings.autoPlaySpeed,
+        mergedSettings.bgObjectFit,
+        mergedSettings.bgmVolume,
+        mergedSettings.seVolume,
+        mergedSettings.textSpeed,
+        mergedSettings.voiceVolume,
+        mergedSettings.selectedFontFamily,
+        currentBackground,
+        fontsLoaded,
     ]);
-    // マウスホイールとタッチジェスチャーを無効化
+    // マウスホイールとタッチジェスチャーを無効化（preventDefaultScrollがtrueの場合のみ）
     useEffect(() => {
+        if (!preventDefaultScroll)
+            return;
         const handleWheel = (e) => {
             e.preventDefault();
         };
@@ -312,7 +739,7 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
             document.removeEventListener("touchmove", handleTouchMove);
             document.removeEventListener("gesturestart", handleGestureStart);
         };
-    }, []);
+    }, [preventDefaultScroll]);
     // アスペクト比を計算
     const getAspectRatio = () => {
         if (!(settings === null || settings === void 0 ? void 0 : settings.aspectRatio))
@@ -321,16 +748,31 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         return `${width}/${height}`;
     };
     // 条件付きレンダリングを JSX で処理（フックの後、early return なし）
-    return (_jsxs(_Fragment, { children: [!currentBlock && !state.isEnded && (_jsx("div", { className: clsx("flex items-center justify-center p-8", className), children: _jsx("p", { className: "text-gray-500", children: "\u30B7\u30CA\u30EA\u30AA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093" }) })), state.isEnded && (_jsx(EndScreen, { scenarioName: scenario.name, onRestart: restart, className: className })), currentBlock && !state.isEnded && (_jsxs(_Fragment, { children: [(!imagesLoaded || !isFirstRenderComplete) && (_jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center z-50", className), style: {
+    return (_jsxs(_Fragment, { children: [!currentBlock && !state.isEnded && (_jsx("div", { className: clsx("flex items-center justify-center p-8", className), children: _jsx("p", { className: "text-gray-500", children: "\u30B7\u30CA\u30EA\u30AA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093" }) })), state.isEnded && (_jsx(EndScreen, { scenarioName: scenario.name, onRestart: restart, className: className })), currentBlock && !state.isEnded && (_jsxs(_Fragment, { children: [(!imagesLoaded ||
+                        !fontsLoaded ||
+                        !isFirstRenderComplete ||
+                        !pluginsLoaded) && (_jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center z-50", className), style: {
                             touchAction: "none",
                             userSelect: "none",
                             WebkitUserSelect: "none",
-                        } })), _jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center", className, (!imagesLoaded || !isFirstRenderComplete) && "opacity-0"), onClick: handleNext, style: {
+                        } })), _jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center", className, (!imagesLoaded ||
+                            !fontsLoaded ||
+                            !isFirstRenderComplete ||
+                            !pluginsLoaded) &&
+                            "opacity-0"), onClick: () => handleNext("click"), style: {
                             touchAction: "none",
                             userSelect: "none",
                             WebkitUserSelect: "none",
-                        }, children: _jsx("div", { className: "relative bg-white flex flex-col w-full overflow-hidden h-full", style: { aspectRatio: getAspectRatio() }, children: _jsxs(DataProvider, { data: dataContext, children: [_jsx("div", { className: "h-full", children: _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, displayedCharacters: displayedCharacters }) }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManagerRef.current, fallback: DialogueBox }), pluginManagerRef.current
-                                                    .getRegisteredComponents()
-                                                    .filter((type) => type !== ComponentType.DialogueBox) // DialogueBoxは既に上でレンダリング済み
-                                                    .map((componentType) => (_jsx(PluginComponentProvider, { type: componentType, pluginManager: pluginManagerRef.current }, componentType)))] }) })] }) }) })] }))] }));
+                        }, children: _jsx("div", { className: "relative bg-white flex flex-col w-full overflow-hidden h-full", style: { aspectRatio: getAspectRatio() }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, children: _jsxs(AudioProvider, { settings: {
+                                        bgmVolume: mergedSettings.bgmVolume,
+                                        seVolume: mergedSettings.seVolume,
+                                        voiceVolume: mergedSettings.voiceVolume,
+                                        effectVolume: mergedSettings.effectVolume,
+                                        textSoundVolume: mergedSettings.textSoundVolume,
+                                        muteAudio: (_c = mergedSettings.muteAudio) !== null && _c !== void 0 ? _c : false,
+                                    }, children: [_jsxs("div", { className: "h-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.Background, pluginManager: pluginManager, fallback: BackgroundLayer }, "background"), _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, previousBlock: previousBlock, displayedCharacters: displayedCharacters }, "game-screen")] }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManager, fallback: DialogueBox }, "dialogue-box"), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "conversation_branch" && (_jsx(PluginComponentProvider, { type: ComponentType.ConversationBranch, pluginManager: pluginManager, fallback: ConversationBranchBox }, "conversation-branch")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "fullscreen_text" && (_jsx(FullscreenTextBox, { onComplete: () => handleNext("click") }, "fullscreen-text")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "click_wait" && (_jsx(ClickWaitIndicator, {}, "click-wait")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait" && (_jsx(TimeWaitIndicator, { duration: (_e = (_d = currentBlock.options) === null || _d === void 0 ? void 0 : _d.duration) !== null && _e !== void 0 ? _e : 1, onComplete: () => handleNext("time_wait") }, "time-wait")), pluginManager
+                                                        .getRegisteredComponents()
+                                                        .filter((type) => type !== ComponentType.DialogueBox &&
+                                                        type !== ComponentType.ConversationBranch)
+                                                        .map((componentType) => (_jsx(PluginComponentProvider, { type: componentType, pluginManager: pluginManager }, componentType)))] }) })] }) }) }) })] }))] }));
 };