@luna-editor/engine 0.2.0 → 0.3.1

package/dist/Player.js

@@ -10,100 +10,359 @@ 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 { PlaybackTextProvider } from "./contexts/PlaybackTextContext";
 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, onSettingsChange, className, autoplay = false, }) => {
-    var _a;
+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;
+    // 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: 1.0, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0 }, settings);
+    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, inactiveCharacterBrightness: 0.8 }, 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]);
-    const pluginManagerRef = useRef(new PluginManager());
+    // 感情エフェクト状態管理
+    const [emotionEffectState, setEmotionEffectState] = useState(null);
+    // プラグインからの感情エフェクト更新ハンドラ
+    const handleEmotionEffectUpdate = useCallback((state) => {
+        setEmotionEffectState(state);
+    }, []);
+    // 遅延初期化で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(() => {
+        pluginManager.setEmotionEffectUpdaterCallback(handleEmotionEffectUpdate);
+    }, [pluginManager, handleEmotionEffectUpdate]);
+    // DataContextへの参照を保持（プラグインがdata.get()を呼び出せるようにする）
+    const dataContextRef = useRef(null);
+    // DataContext getterを登録
+    useEffect(() => {
+        pluginManager.setDataContextGetter(() => dataContextRef.current);
+    }, [pluginManager]);
+    // プラグインのミュート状態を設定
+    useEffect(() => {
+        var _a;
+        pluginManager.setMuteAudio((_a = mergedSettings.muteAudio) !== null && _a !== void 0 ? _a : false);
+    }, [pluginManager, mergedSettings.muteAudio]);
     // 画面サイズの初期化
     const [, setScreenSize] = useScreenSizeAtom();
+    const aspectRatioContainerRef = useRef(null);
     useEffect(() => {
+        // screenSizeが明示的に指定されている場合はそれを使用（プレビュー用）
+        if (screenSizeProp) {
+            setScreenSize(screenSizeProp);
+            return;
+        }
         // クライアントサイドでのみ実行
         if (typeof window === "undefined")
             return;
+        // 初期値として一時的にウィンドウサイズを設定
         setScreenSize({ width: window.innerWidth, height: window.innerHeight });
-        // リサイズ監視
-        const handleResize = () => {
+        const container = aspectRatioContainerRef.current;
+        if (!container)
+            return;
+        // アスペクト比コンテナのサイズを監視
+        const updateScreenSize = () => {
+            const rect = container.getBoundingClientRect();
+            // サイズが0の場合はスキップ（まだレンダリングされていない）
+            if (rect.width === 0 || rect.height === 0)
+                return;
+            console.log("[Player] screenSize更新:", {
+                width: rect.width,
+                height: rect.height,
+                windowWidth: window.innerWidth,
+                windowHeight: window.innerHeight,
+            });
             setScreenSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
+                width: rect.width,
+                height: rect.height,
             });
         };
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
-    }, [setScreenSize]);
+        // 初期サイズを設定（次のフレームで実行してレンダリング完了を待つ）
+        requestAnimationFrame(() => {
+            updateScreenSize();
+        });
+        // ResizeObserverでコンテナのサイズ変更を監視
+        const resizeObserver = new ResizeObserver(() => {
+            updateScreenSize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [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 [state, setState] = useState({
-        currentBlockIndex: 0,
-        isPlaying: autoplay,
-        isEnded: false,
+    // 変数マネージャーの初期化
+    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(() => {
+        var _a;
+        return {
+            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");
+    // シナリオ開始コールバック（後でcurrentBlockが定義された後に実行）
+    const [hasStarted, setHasStarted] = useState(false);
+    // シナリオIDを追跡して、変更時に状態をリセット（プレビュー用）
+    const previousScenarioIdRef = useRef(scenario.id);
+    // シナリオが変更されたときに状態をリセット（keyを変更せずに対応）
+    useEffect(() => {
+        var _a;
+        if (previousScenarioIdRef.current !== scenario.id) {
+            const previousId = previousScenarioIdRef.current;
+            // 前のシナリオが開始されていた場合、onScenarioEndを呼び出す
+            if (hasStarted) {
+                pluginManager.callHook("onScenarioEnd", {
+                    scenarioId: previousId,
+                    scenarioName: "scenario",
+                });
+            }
+            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);
+            setHasStarted(false); // これにより次の useEffect で onScenarioStart が呼ばれる
+        }
+    }, [scenario.id, autoplay, hasStarted, pluginManager]);
     // 画像を事前読み込み
     const imagesLoaded = usePreloadImages(scenario);
+    // シナリオ内の全テキストを抽出（フォントのプリロード用）
+    // サブセットフォントの分割ファイルを事前に読み込むことで、
+    // 文字送り中のフォント切り替わりを防止
+    const allScenarioText = useMemo(() => {
+        var _a;
+        const texts = [];
+        for (const block of scenario.blocks) {
+            // dialogue, narration, fullscreen_textのcontent
+            if (block.content) {
+                texts.push(block.content);
+            }
+            // speaker name
+            if ((_a = block.speaker) === null || _a === void 0 ? void 0 : _a.name) {
+                texts.push(block.speaker.name);
+            }
+        }
+        // 重複を除去してユニークな文字のみを残す
+        const uniqueChars = [...new Set(texts.join(""))].join("");
+        return uniqueChars;
+    }, [scenario.blocks]);
+    // フォントを読み込み（シナリオ内の全テキストでプリロード）
+    const { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts, allScenarioText);
     // プラグインの読み込み状態
     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, plugin.assets);
+                    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が定義された後に実行）
-    const [hasStarted, setHasStarted] = useState(false);
     // スタイル要素の登録
     useEffect(() => {
         if (isFirstRenderComplete) {
@@ -113,35 +372,54 @@ 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({
+    }, [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;
     // バックログ機能
@@ -150,30 +428,219 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         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, startTyping]);
-    // 画像読み込み完了後、GameScreenがマウントされてから表示する
+    }, [currentBlock, previousBlock, startTyping, resetAccumulated]);
+    // 分岐ブロック自動ロード処理
+    useEffect(() => {
+        if (currentBlock && currentBlock.blockType === "conversation_branch") {
+            loadBranch(currentBlock.id);
+        }
+    }, [currentBlock, loadBranch]);
+    // プラグインフックを別のuseEffectで実行（branchStateが更新されてから）
+    useEffect(() => {
+        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 && currentBlock && !isFirstRenderComplete) {
+        if (imagesLoaded && fontsLoaded && currentBlock && !isFirstRenderComplete) {
             // requestAnimationFrameを使用してレンダリング完了を待つ
             requestAnimationFrame(() => {
                 setIsFirstRenderComplete(true);
             });
         }
-    }, [imagesLoaded, currentBlock, isFirstRenderComplete]);
-    // シナリオ開始コールバック（currentBlock定義後）
+    }, [imagesLoaded, fontsLoaded, currentBlock, isFirstRenderComplete]);
+    // シナリオ開始コールバック（currentBlock定義後、プラグインロード完了後）
     useEffect(() => {
-        if (isFirstRenderComplete && !hasStarted && currentBlock) {
+        if (isFirstRenderComplete && !hasStarted && currentBlock && pluginsLoaded) {
             setHasStarted(true);
             onScenarioStart === null || onScenarioStart === void 0 ? void 0 : onScenarioStart();
+            // プラグインのonScenarioStartフックを呼び出し
+            pluginManager.callHook("onScenarioStart", {
+                scenarioId: scenario.id,
+                scenarioName: scenario.name || "scenario",
+            });
+        }
+    }, [
+        isFirstRenderComplete,
+        hasStarted,
+        currentBlock,
+        pluginsLoaded,
+        onScenarioStart,
+        pluginManager,
+        scenario.id,
+        scenario.name,
+    ]);
+    // restartをusePlayerLogicの前に定義（分岐状態もリセット + キャンセルコールバック）
+    const restart = useCallback(() => {
+        // リスタート時はシナリオがキャンセルされたとみなす
+        if (hasStarted && !state.isEnded) {
+            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
+            // プラグインのonScenarioEndフックを呼び出し（シナリオ中断時）
+            pluginManager.callHook("onScenarioEnd", {
+                scenarioId: scenario.id,
+                scenarioName: scenario.name || "scenario",
+            });
         }
-    }, [isFirstRenderComplete, hasStarted, currentBlock, onScenarioStart]);
-    const { handleNext: handleNextInternal, handlePrevious: handlePreviousInternal, togglePlay, // eslint-disable-line @typescript-eslint/no-unused-vars
-    restart: restartInternal, displayedCharacters, } = usePlayerLogic({
+        setIsFirstRenderComplete(false);
+        setHasStarted(false); // これにより次の useEffect で onScenarioStart が呼ばれる
+        setCurrentBranchBlock(null);
+        branchNavigatorRef.current.reset();
+        resetAccumulated(); // 蓄積テキストをクリア
+        setState({
+            currentBlockIndex: 0,
+            isPlaying: autoplay,
+            isEnded: false,
+        });
+    }, [
+        autoplay,
+        hasStarted,
+        state.isEnded,
+        onScenarioCancelled,
+        resetAccumulated,
+        pluginManager,
+        scenario.id,
+        scenario.name,
+    ]);
+    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") {
@@ -199,13 +666,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,
@@ -213,7 +685,31 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         allBlocks: scenario.blocks,
         realBlockIndex,
         pluginsLoaded,
+        transitionSource,
     });
+    // ActionNode実行処理
+    useEffect(() => {
+        var _a;
+        if (currentBlock && currentBlock.blockType === "action_node") {
+            const attrs = {};
+            // attributeValuesから属性値を収集
+            if (currentBlock.attributeValues) {
+                for (const attrValue of currentBlock.attributeValues) {
+                    attrs[attrValue.attribute.name] = attrValue.value;
+                }
+            }
+            // ActionNode実行（actionNode.typeがundefinedでないことを確認）
+            if ((_a = currentBlock.actionNode) === null || _a === void 0 ? void 0 : _a.type) {
+                pluginManager.executeActionNode(currentBlock.actionNode.type, {
+                    attributes: attrs,
+                    currentBlock,
+                    currentSpeaker: undefined, // TODO: 現在の発話キャラクターを取得
+                    displayedCharacters: displayedCharacters,
+                    api: pluginManager,
+                });
+            }
+        }
+    }, [currentBlock, displayedCharacters, pluginManager]);
     // 初期履歴構築（シナリオ開始時）
     useEffect(() => {
         if (isFirstRenderComplete && actualBlockIndex >= 0) {
@@ -221,41 +717,75 @@ 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 {
             setState((prev) => (Object.assign(Object.assign({}, prev), { isEnded: true, isPlaying: false })));
+            // プラグインのonScenarioEndフックを呼び出し
+            pluginManager.callHook("onScenarioEnd", {
+                scenarioId: scenario.id,
+                scenarioName: scenario.name || "scenario",
+            });
             onEnd === null || onEnd === void 0 ? void 0 : onEnd();
             onScenarioEnd === null || onScenarioEnd === void 0 ? void 0 : onScenarioEnd();
         }
     }, [
+        currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType,
+        currentBranchBlock,
         state.currentBlockIndex,
         displayableBlockIndices.length,
         handleNextInternal,
         onEnd,
-        onScenarioEnd,
+        onScenarioEnd, // プラグインのonScenarioEndフックを呼び出し
+        pluginManager,
+        scenario.id,
+        scenario.name,
     ]);
     // 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();
+    // 現在の背景を計算
+    const currentBackground = useMemo(() => calculateCurrentBackground(actualBlockIndex), [calculateCurrentBackground, actualBlockIndex]);
+    // displayText を JSX に変換（PlaybackTextProvider 用）
+    const displayTextElement = useMemo(() => {
+        if (displayText.includes("\n")) {
+            return displayText.split("\n").map((line, index, array) => (_jsxs(React.Fragment, { children: [line, index < array.length - 1 && _jsx("br", {})] }, index)));
         }
-        setIsFirstRenderComplete(false);
-        setHasStarted(false);
-        restartInternal();
-    }, [hasStarted, state.isEnded, onScenarioCancelled, restartInternal]);
-    // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
+        return displayText;
+    }, [displayText]);
+    // DataContext の構築
+    // DataRefContext で安定した参照を提供することで、
+    // useDataAPI() を使うコンポーネントの再レンダリングを防ぐ
     const dataContext = useMemo(() => {
-        var _a, _b;
+        var _a, _b, _c;
         return ({
             playback: {
                 currentBlockIndex: actualBlockIndex,
@@ -263,7 +793,7 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
                 scenarioId: scenario.id,
                 scenarioName: scenario.name,
                 currentBlock: currentBlock || null,
-                displayText,
+                displayText: displayTextElement,
                 isTyping,
                 displayedCharacters,
             },
@@ -282,25 +812,57 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
                 seVolume: mergedSettings.seVolume,
                 voiceVolume: mergedSettings.voiceVolume,
                 skipMode: "unread",
+                selectedFontFamily: mergedSettings.selectedFontFamily,
+                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
             },
             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,
+                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
+                isLoaded: fontsLoaded,
+            },
+            emotionEffect: emotionEffectState,
         });
     }, [
+        pluginManager,
         actualBlockIndex,
         scenario,
         currentBlock,
-        displayText,
+        displayTextElement,
         isTyping,
         displayedCharacters,
         backlog,
-        settings,
+        conversationBranch.branchState,
+        mergedSettings.aspectRatio,
+        mergedSettings.autoPlaySpeed,
+        emotionEffectState,
+        mergedSettings.bgObjectFit,
+        mergedSettings.bgmVolume,
+        mergedSettings.seVolume,
+        mergedSettings.textSpeed,
+        mergedSettings.voiceVolume,
+        mergedSettings.selectedFontFamily,
+        mergedSettings.selectedUIFontFamily,
+        currentBackground,
+        fontsLoaded,
     ]);
-    // マウスホイールとタッチジェスチャーを無効化
+    // DataContextの参照を更新（プラグインがapi.data.get()を呼び出せるようにする）
     useEffect(() => {
+        dataContextRef.current = dataContext;
+    }, [dataContext]);
+    // マウスホイールとタッチジェスチャーを無効化（preventDefaultScrollがtrueの場合のみ）
+    useEffect(() => {
+        if (!preventDefaultScroll)
+            return;
         const handleWheel = (e) => {
             e.preventDefault();
         };
@@ -321,7 +883,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))
@@ -329,23 +891,42 @@ export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd,
         const [width, height] = settings.aspectRatio.split(":").map(Number);
         return `${width}/${height}`;
     };
+    const getAspectRatioValue = () => {
+        if (!(settings === null || settings === void 0 ? void 0 : settings.aspectRatio))
+            return 16 / 9;
+        const [width, height] = settings.aspectRatio.split(":").map(Number);
+        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: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, children: _jsxs(AudioProvider, { settings: {
+                        }, children: _jsx("div", { ref: aspectRatioContainerRef, className: "relative bg-white flex flex-col overflow-hidden", style: {
+                                aspectRatio: getAspectRatio(),
+                                width: `min(100vw, calc(100vh * ${getAspectRatioValue()}))`,
+                                height: `min(100vh, calc(100vw / ${getAspectRatioValue()}))`,
+                            }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, onEmotionEffectUpdate: handleEmotionEffectUpdate, children: _jsx(AudioProvider, { settings: {
                                         bgmVolume: mergedSettings.bgmVolume,
                                         seVolume: mergedSettings.seVolume,
                                         voiceVolume: mergedSettings.voiceVolume,
                                         effectVolume: mergedSettings.effectVolume,
                                         textSoundVolume: mergedSettings.textSoundVolume,
-                                    }, 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)))] }) })] }) }) }) })] }))] }));
+                                        muteAudio: (_b = mergedSettings.muteAudio) !== null && _b !== void 0 ? _b : false,
+                                    }, children: _jsxs(PlaybackTextProvider, { displayText: displayTextElement, isTyping: isTyping, 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: (_d = (_c = currentBlock.options) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 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)))] }) })] }) }) }) }) })] }))] }));
 };