@luna-editor/engine 0.3.0 → 0.3.2

package/dist/Player.js

@@ -24,6 +24,7 @@ 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";
@@ -39,20 +40,26 @@ 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;
+    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: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 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 [emotionEffectState, setEmotionEffectState] = useState(null);
+    // プラグインからの感情エフェクト更新ハンドラ
+    const handleEmotionEffectUpdate = useCallback((state) => {
+        setEmotionEffectState(state);
+    }, []);
     // 遅延初期化でPluginManagerを作成（毎レンダリングでnew PluginManager()が評価されるのを防ぐ）
     const pluginManagerRef = useRef(undefined);
     if (!pluginManagerRef.current) {
@@ -66,6 +73,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         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;
@@ -73,6 +90,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
     }, [pluginManager, mergedSettings.muteAudio]);
     // 画面サイズの初期化
     const [, setScreenSize] = useScreenSizeAtom();
+    const aspectRatioContainerRef = useRef(null);
     useEffect(() => {
         // screenSizeが明示的に指定されている場合はそれを使用（プレビュー用）
         if (screenSizeProp) {
@@ -82,16 +100,40 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         // クライアントサイドでのみ実行
         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);
+        // 初期サイズを設定（次のフレームで実行してレンダリング完了を待つ）
+        requestAnimationFrame(() => {
+            updateScreenSize();
+        });
+        // ResizeObserverでコンテナのサイズ変更を監視
+        const resizeObserver = new ResizeObserver(() => {
+            updateScreenSize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, [setScreenSize, screenSizeProp]);
     // 表示可能なブロックのインデックスを事前計算
     const displayableBlockIndices = useMemo(() => {
@@ -215,21 +257,34 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         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 [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({
@@ -239,12 +294,33 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
                 variables: (_a = variableManagerRef.current) === null || _a === void 0 ? void 0 : _a.getVariablesMap(),
             });
             setCurrentBranchBlock(null);
+            setHasStarted(false); // これにより次の useEffect で onScenarioStart が呼ばれる
         }
-    }, [scenario.id, autoplay]);
+    }, [scenario.id, autoplay, hasStarted, pluginManager]);
     // 画像を事前読み込み
     const imagesLoaded = usePreloadImages(scenario);
-    // フォントを読み込み
-    const { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts);
+    // シナリオ内の全テキストを抽出（フォントのプリロード用）
+    // サブセットフォントの分割ファイルを事前に読み込むことで、
+    // 文字送り中のフォント切り替わりを防止
+    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);
     // 読み込み済みプラグインのパッケージ名を追跡
@@ -266,7 +342,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
                 for (const plugin of newPlugins) {
                     if (isCancelled)
                         return;
-                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
+                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config, plugin.assets);
                     loadedPluginNamesRef.current.add(plugin.packageName);
                 }
                 if (isCancelled)
@@ -287,8 +363,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
     }, [plugins, sounds]);
     // 初回レンダリング完了フラグ
     const [isFirstRenderComplete, setIsFirstRenderComplete] = useState(false);
-    // シナリオ開始コールバック（後でcurrentBlockが定義された後に実行）
-    const [hasStarted, setHasStarted] = useState(false);
     // スタイル要素の登録
     useEffect(() => {
         if (isFirstRenderComplete) {
@@ -347,7 +421,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         return prevIdx !== undefined ? scenario.blocks[prevIdx] : null;
     }, [scenario.blocks, displayableBlockIndices, state.currentBlockIndex]);
     // usePlayerLogicに渡す実際のブロックインデックス
-    const actualBlockIndex = (_b = displayableBlockIndices[state.currentBlockIndex]) !== null && _b !== void 0 ? _b : 0;
+    const actualBlockIndex = (_a = displayableBlockIndices[state.currentBlockIndex]) !== null && _a !== void 0 ? _a : 0;
     // バックログ機能
     const backlog = useBacklog({
         scenario,
@@ -514,21 +588,40 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
             });
         }
     }, [imagesLoaded, fontsLoaded, currentBlock, isFirstRenderComplete]);
-    // シナリオ開始コールバック（currentBlock定義後）
+    // シナリオ開始コールバック（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, onScenarioStart]);
+    }, [
+        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",
+            });
         }
         setIsFirstRenderComplete(false);
-        setHasStarted(false);
+        setHasStarted(false); // これにより次の useEffect で onScenarioStart が呼ばれる
         setCurrentBranchBlock(null);
         branchNavigatorRef.current.reset();
         resetAccumulated(); // 蓄積テキストをクリア
@@ -543,6 +636,9 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         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 }),
@@ -591,6 +687,29 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         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) {
@@ -627,6 +746,11 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         }
         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();
         }
@@ -637,7 +761,10 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         displayableBlockIndices.length,
         handleNextInternal,
         onEnd,
-        onScenarioEnd,
+        onScenarioEnd, // プラグインのonScenarioEndフックを呼び出し
+        pluginManager,
+        scenario.id,
+        scenario.name,
     ]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const _handlePrevious = useCallback(() => {
@@ -647,7 +774,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
     }, [state.currentBlockIndex, handlePreviousInternal]);
     // 現在の背景を計算
     const currentBackground = useMemo(() => calculateCurrentBackground(actualBlockIndex), [calculateCurrentBackground, actualBlockIndex]);
-    // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
+    // 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)));
+        }
+        return displayText;
+    }, [displayText]);
+    // DataContext の構築
+    // DataRefContext で安定した参照を提供することで、
+    // useDataAPI() を使うコンポーネントの再レンダリングを防ぐ
     const dataContext = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -657,9 +793,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
                 scenarioId: scenario.id,
                 scenarioName: scenario.name,
                 currentBlock: currentBlock || null,
-                displayText: displayText.includes("\n")
-                    ? displayText.split("\n").map((line, index, array) => (_jsxs(React.Fragment, { children: [line, index < array.length - 1 && _jsx("br", {})] }, index)))
-                    : displayText,
+                displayText: displayTextElement,
                 isTyping,
                 displayedCharacters,
             },
@@ -678,6 +812,8 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
                 seVolume: mergedSettings.seVolume,
                 voiceVolume: mergedSettings.voiceVolume,
                 skipMode: "unread",
+                selectedFontFamily: mergedSettings.selectedFontFamily,
+                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
             },
             pluginAssets: {
                 getAssetUrl: (pluginName, filename) => {
@@ -691,30 +827,38 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
             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,
         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)
@@ -747,6 +891,12 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
         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 ||
                         !fontsLoaded ||
@@ -763,16 +913,20 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = [], sounds
                             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,
-                                        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)))] }) })] }) }) }) })] }))] }));
+                                        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)))] }) })] }) }) }) }) })] }))] }));
 };

package/dist/components/BackgroundLayer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useDataAPI } from "../contexts/DataContext";
 /**
  * iOS/macOSかどうかを判定
@@ -56,8 +56,10 @@ function getMediaType(url) {
 }
 /**
  * 背景メディアコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
  */
-const BackgroundMedia = ({ background, opacity, zIndex, useAppleFormat }) => {
+const BackgroundMedia = memo(function BackgroundMedia({ background, opacity, zIndex, useAppleFormat }) {
     var _a, _b;
     // OS判定に基づいて使用するURLを決定
     // iOS/macOS: mp4 (imageUrl)
@@ -84,7 +86,7 @@ const BackgroundMedia = ({ background, opacity, zIndex, useAppleFormat }) => {
             transition: "none", // requestAnimationFrameでアニメーション
             pointerEvents: isHighLayer ? "none" : undefined,
         }, "data-background-object-id": background.objectId, "data-background-state-id": background.stateId, "data-background-layer": layer, children: mediaType === "video" ? (_jsx("video", { src: videoUrl, className: `w-full h-full ${objectFitClass}`, autoPlay: true, muted: true, playsInline: true, loop: background.loop }, videoUrl)) : (_jsx("img", { src: background.imageUrl, alt: background.stateName, className: `w-full h-full ${objectFitClass}` }, background.imageUrl)) }));
-};
+});
 /**
  * 背景の配列が同じかどうかを比較
  */
@@ -107,7 +109,7 @@ function areBackgroundsEqual(a, b) {
  * プラグインによって置き換え可能
  * フェードイン・フェードアウト対応
  */
-export const BackgroundLayer = ({ className, }) => {
+export const BackgroundLayer = memo(({ className }) => {
     const dataAPI = useDataAPI();
     // Apple環境かどうかを判定（iOS/macOSではmp4を使用）
     const useAppleFormat = useMemo(() => isApplePlatform(), []);
@@ -214,5 +216,5 @@ export const BackgroundLayer = ({ className, }) => {
                 const zIndex = getLayerZIndex(layer, index);
                 return (_jsx(BackgroundMedia, { background: bg, opacity: fadeState.isFading ? fadeState.fadeProgress : 1, zIndex: zIndex, useAppleFormat: useAppleFormat }, `curr-${bg.objectId}-${bg.stateId}-${index}`));
             })] }));
-};
+});
 export { getMediaType };

package/dist/components/GameScreen.d.ts

@@ -1,10 +1,16 @@
-import type React from "react";
 import type { DisplayedCharacter, PublishedScenario, ScenarioBlock } from "../types";
 interface GameScreenProps {
     scenario: PublishedScenario;
     currentBlock: ScenarioBlock;
     previousBlock?: ScenarioBlock | null;
     displayedCharacters: DisplayedCharacter[];
+    inactiveCharacterBrightness?: number;
+    characterSpacing?: number;
 }
-export declare const GameScreen: React.FC<GameScreenProps>;
+/**
+ * ゲームスクリーンコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
+ */
+export declare const GameScreen: import("react").NamedExoticComponent<GameScreenProps>;
 export {};

package/dist/components/GameScreen.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCharacters, }) => {
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+/**
+ * ゲームスクリーンコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
+ */
+export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.1, }) {
     var _a;
     // キャラクターごとのフェード状態を管理
     const [fadeStates, setFadeStates] = useState(new Map());
@@ -222,6 +227,28 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
     const currentSpeaker = (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.speakerId)
         ? displayedCharacters.find((char) => char.objectId === currentBlock.speakerId)
         : null;
+    // 簡易モード用の自動配置計算
+    const calculateAutoLayout = (characters, spacing) => {
+        const total = characters.length;
+        const positions = new Map();
+        if (total === 0)
+            return positions;
+        if (total === 1) {
+            // 1人の場合は中央
+            positions.set(characters[0].objectId, { x: 0, y: 0 });
+            return positions;
+        }
+        // 複数の場合は均等配置
+        // spacing: 画面幅に対する割合（例: 0.1 = 10%）
+        // 座標系: -1（左端）〜 1（右端）
+        const totalWidth = (total - 1) * spacing * 2;
+        const startX = -totalWidth / 2;
+        characters.forEach((char, index) => {
+            const x = startX + index * spacing * 2;
+            positions.set(char.objectId, { x, y: 0 });
+        });
+        return positions;
+    };
     // キャラクター描画用のヘルパー関数
     const renderCharacter = (image, displayedChar, isCurrentSpeaker, keyPrefix) => {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -257,7 +284,7 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             // 複数キャラクター表示で、現在の話者でない場合
             if (currentSpeaker &&
                 currentSpeaker.objectId !== displayedChar.objectId) {
-                brightness = 0.8;
+                brightness = inactiveCharacterBrightness;
             }
         }
         // z-indexを決定
@@ -270,9 +297,9 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             : ((_d = image.scale) !== null && _d !== void 0 ? _d : 1);
         // 位置を決定（カスタム位置またはデフォルト位置）
         // 新座標系: x: -1=左見切れ, 0=中央, 1=右見切れ / y: -1=上見切れ, 0=中央, 1=下見切れ
-        let finalPosition = { x: 0, y: 1.0 }; // デフォルトは中央、下端
+        let finalPosition = { x: 0, y: 0 };
         if (displayedChar) {
-            // カスタム位置が設定されている場合
+            // カスタム位置が設定されている場合（詳細モード）
             if (displayedChar.positionX !== null &&
                 displayedChar.positionY !== null) {
                 finalPosition = {
@@ -280,7 +307,14 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
                     y: (_f = displayedChar.positionY) !== null && _f !== void 0 ? _f : 0,
                 };
             }
-            // カスタム位置が設定されていない場合はデフォルト位置のまま
+            else {
+                // 簡易モード: 自動配置
+                const autoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.25);
+                const autoPos = autoPositions.get(displayedChar.objectId);
+                if (autoPos) {
+                    finalPosition = autoPos;
+                }
+            }
         }
         // コンテナ相対の位置計算（パーセンテージ使用）
         // positionX: -1.0 = 完全に左に見切れ, 0.0 = 中央, 1.0 = 完全に右に見切れ
@@ -390,4 +424,4 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
                                     return null;
                                 return renderCharacter(image, null, false, "fadeout");
                             })()] }))] }) }));
-};
+});

package/dist/components/OverlayUI.d.ts

@@ -5,9 +5,8 @@ interface OverlayUIProps {
 /**
  * OverlayUI コンポーネント
  *
- * 16:9のアスペクト比を維持しながら、様々な画面サイズに対応するコンテナ
- * - スマートフォン（幅 < 1000px）: フルサイズ表示
- * - タブレット（幅 ≥ 1000px）: 70%に縮小して中央配置
+ * アスペクト比コンテナ全体に配置されるUIオーバーレイ
+ * 親コンテナ（アスペクト比コンテナ）のサイズに合わせて自動調整される
  */
 export declare const OverlayUI: React.FC<OverlayUIProps>;
 export {};

package/dist/components/OverlayUI.js

@@ -1,21 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useScreenSizeAtom } from "../atoms/screen-size";
 /**
  * OverlayUI コンポーネント
  *
- * 16:9のアスペクト比を維持しながら、様々な画面サイズに対応するコンテナ
- * - スマートフォン（幅 < 1000px）: フルサイズ表示
- * - タブレット（幅 ≥ 1000px）: 70%に縮小して中央配置
+ * アスペクト比コンテナ全体に配置されるUIオーバーレイ
+ * 親コンテナ（アスペクト比コンテナ）のサイズに合わせて自動調整される
  */
 export const OverlayUI = ({ children }) => {
-    // 16:9のアスペクト比を基準
-    let [{ height: screenHeight }] = useScreenSizeAtom();
-    let screenWidth = (screenHeight * 16) / 9;
-    // タブレット（幅1000px以上）では70%に縮小
-    const [{ width: checkWidth }] = useScreenSizeAtom();
-    if (checkWidth >= 1000) {
-        screenHeight = (screenHeight * 7) / 10;
-        screenWidth = (screenHeight * 16) / 9;
-    }
-    return (_jsx("div", { className: "absolute inset-0 pointer-events-none z-[9999] flex justify-center items-center", children: _jsx("div", { style: { width: screenWidth, height: screenHeight }, children: children }) }));
+    return (_jsx("div", { className: "absolute inset-0 pointer-events-none z-[9999]", children: _jsx("div", { className: "w-full h-full", children: children }) }));
 };

package/dist/components/PluginComponentProvider.d.ts

@@ -8,7 +8,7 @@ interface PluginComponentProviderProps {
 }
 /**
  * Wrapper component that renders a plugin-registered component or a fallback
- * All data is provided via DataContext, so no props are passed
+ * DataAPI is provided via props to avoid React context issues across different React instances
  */
 export declare function PluginComponentProvider({ type, pluginManager, fallback: FallbackComponent, }: PluginComponentProviderProps): import("react/jsx-runtime").JSX.Element;
 export {};