@luna-editor/engine 0.4.5 → 0.5.0

package/dist/Player.js

@@ -24,7 +24,6 @@ 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,17 +38,10 @@ import { ComponentType } from "./sdk";
 import { convertBranchBlockToScenarioBlock } from "./utils/branchBlockConverter";
 import { BranchNavigator } from "./utils/branchNavigator";
 import { VariableManager } from "./utils/variableManager";
-const EMPTY_PLUGINS = [];
-const EMPTY_SOUNDS = [];
-export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGINS, sounds = EMPTY_SOUNDS, onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, onSettingsChange, className, autoplay = false, preventDefaultScroll = true, screenSize: screenSizeProp, disableKeyboardNavigation = false, }) => {
+export const Player = ({ scenario, 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: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0, inactiveCharacterBrightness: 0.8 }, 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 }, settings);
     // プラグインからの設定更新ハンドラ
     const handleSettingsUpdate = useCallback((updatedSettings) => {
         var _a, _b;
@@ -92,7 +84,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
     }, [pluginManager, mergedSettings.muteAudio]);
     // 画面サイズの初期化
     const [, setScreenSize] = useScreenSizeAtom();
-    const aspectRatioContainerRef = useRef(null);
     useEffect(() => {
         // screenSizeが明示的に指定されている場合はそれを使用（プレビュー用）
         if (screenSizeProp) {
@@ -102,40 +93,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         // クライアントサイドでのみ実行
         if (typeof window === "undefined")
             return;
-        // 初期値として一時的にウィンドウサイズを設定
         setScreenSize({ width: window.innerWidth, height: window.innerHeight });
-        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,
-            });
+        // リサイズ監視
+        const handleResize = () => {
             setScreenSize({
-                width: rect.width,
-                height: rect.height,
+                width: window.innerWidth,
+                height: window.innerHeight,
             });
         };
-        // 初期サイズを設定（次のフレームで実行してレンダリング完了を待つ）
-        requestAnimationFrame(() => {
-            updateScreenSize();
-        });
-        // ResizeObserverでコンテナのサイズ変更を監視
-        const resizeObserver = new ResizeObserver(() => {
-            updateScreenSize();
-        });
-        resizeObserver.observe(container);
-        return () => {
-            resizeObserver.disconnect();
-        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
     }, [setScreenSize, screenSizeProp]);
     // 表示可能なブロックのインデックスを事前計算
     const displayableBlockIndices = useMemo(() => {
@@ -146,6 +113,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
             "fullscreen_text",
             "click_wait",
             "time_wait",
+            "action_node",
         ];
         const indices = scenario.blocks
             .map((block, index) => ({ block, index }))
@@ -301,28 +269,8 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
     }, [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 { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts);
     // プラグインの読み込み状態
     const [pluginsLoaded, setPluginsLoaded] = useState(false);
     // 読み込み済みプラグインのパッケージ名を追跡
@@ -344,7 +292,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 for (const plugin of newPlugins) {
                     if (isCancelled)
                         return;
-                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config, plugin.assets, plugin.plugin);
+                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
                     loadedPluginNamesRef.current.add(plugin.packageName);
                 }
                 if (isCancelled)
@@ -361,9 +309,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         loadPlugins();
         return () => {
             isCancelled = true;
-            // Strict Mode再マウント時にPluginManagerインスタンスが変わる場合に備えて
-            // ロード済みリストをクリアし、新しいインスタンスで再ロードされるようにする
-            loadedPluginNamesRef.current.clear();
         };
     }, [plugins, sounds]);
     // 初回レンダリング完了フラグ
@@ -604,16 +549,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 scenarioName: scenario.name || "scenario",
             });
         }
-    }, [
-        isFirstRenderComplete,
-        hasStarted,
-        currentBlock,
-        pluginsLoaded,
-        onScenarioStart,
-        pluginManager,
-        scenario.id,
-        scenario.name,
-    ]);
+    }, [isFirstRenderComplete, hasStarted, currentBlock, pluginsLoaded, onScenarioStart, pluginManager, scenario.id, scenario.name]);
     // restartをusePlayerLogicの前に定義（分岐状態もリセット + キャンセルコールバック）
     const restart = useCallback(() => {
         // リスタート時はシナリオがキャンセルされたとみなす
@@ -645,6 +581,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         scenario.id,
         scenario.name,
     ]);
+    // プラグインからシナリオを中断するためのコールバック
+    const cancelScenario = useCallback(() => {
+        if (hasStarted && !state.isEnded) {
+            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
+            pluginManager.callHook("onScenarioEnd", {
+                scenarioId: scenario.id,
+                scenarioName: scenario.name || "scenario",
+            });
+        }
+    }, [hasStarted, state.isEnded, onScenarioCancelled, 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) => {
@@ -766,10 +712,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         displayableBlockIndices.length,
         handleNextInternal,
         onEnd,
-        onScenarioEnd, // プラグインのonScenarioEndフックを呼び出し
-        pluginManager,
-        scenario.id,
-        scenario.name,
+        onScenarioEnd,
     ]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const _handlePrevious = useCallback(() => {
@@ -779,16 +722,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
     }, [state.currentBlockIndex, handlePreviousInternal]);
     // 現在の背景を計算
     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)));
-        }
-        return displayText;
-    }, [displayText]);
-    // DataContext の構築
-    // DataRefContext で安定した参照を提供することで、
-    // useDataAPI() を使うコンポーネントの再レンダリングを防ぐ
+    // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
     const dataContext = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -798,7 +732,9 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 scenarioId: scenario.id,
                 scenarioName: scenario.name,
                 currentBlock: currentBlock || null,
-                displayText: displayTextElement,
+                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,
             },
@@ -817,8 +753,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 seVolume: mergedSettings.seVolume,
                 voiceVolume: mergedSettings.voiceVolume,
                 skipMode: "unread",
-                selectedFontFamily: mergedSettings.selectedFontFamily,
-                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
             },
             pluginAssets: {
                 getAssetUrl: (pluginName, filename) => {
@@ -832,7 +766,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
             fonts: {
                 fonts: (_c = scenario.fonts) !== null && _c !== void 0 ? _c : [],
                 selectedFontFamily: mergedSettings.selectedFontFamily,
-                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
                 isLoaded: fontsLoaded,
             },
             emotionEffect: emotionEffectState,
@@ -842,7 +775,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         actualBlockIndex,
         scenario,
         currentBlock,
-        displayTextElement,
+        displayText,
         isTyping,
         displayedCharacters,
         backlog,
@@ -856,7 +789,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         mergedSettings.textSpeed,
         mergedSettings.voiceVolume,
         mergedSettings.selectedFontFamily,
-        mergedSettings.selectedUIFontFamily,
         currentBackground,
         fontsLoaded,
     ]);
@@ -896,12 +828,6 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         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 ||
@@ -918,20 +844,16 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                             touchAction: "none",
                             userSelect: "none",
                             WebkitUserSelect: "none",
-                        }, 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: {
+                        }, 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, onEmotionEffectUpdate: handleEmotionEffectUpdate, onCancelScenario: cancelScenario, children: _jsxs(AudioProvider, { settings: {
                                         bgmVolume: mergedSettings.bgmVolume,
                                         seVolume: mergedSettings.seVolume,
                                         voiceVolume: mergedSettings.voiceVolume,
                                         effectVolume: mergedSettings.effectVolume,
                                         textSoundVolume: mergedSettings.textSoundVolume,
                                         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)))] }) })] }) }) }) }) })] }))] }));
+                                    }, 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 { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useDataAPI } from "../contexts/DataContext";
 /**
  * iOS/macOSかどうかを判定
@@ -56,10 +56,8 @@ function getMediaType(url) {
 }
 /**
  * 背景メディアコンポーネント
- * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
- * これにより displayText の更新による不要な再描画を防止
  */
-const BackgroundMedia = memo(function BackgroundMedia({ background, opacity, zIndex, useAppleFormat }) {
+const BackgroundMedia = ({ background, opacity, zIndex, useAppleFormat }) => {
     var _a, _b;
     // OS判定に基づいて使用するURLを決定
     // iOS/macOS: mp4 (imageUrl)
@@ -86,7 +84,7 @@ const BackgroundMedia = memo(function BackgroundMedia({ background, opacity, zIn
             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)) }));
-});
+};
 /**
  * 背景の配列が同じかどうかを比較
  */
@@ -109,7 +107,7 @@ function areBackgroundsEqual(a, b) {
  * プラグインによって置き換え可能
  * フェードイン・フェードアウト対応
  */
-export const BackgroundLayer = memo(({ className }) => {
+export const BackgroundLayer = ({ className, }) => {
     const dataAPI = useDataAPI();
     // Apple環境かどうかを判定（iOS/macOSではmp4を使用）
     const useAppleFormat = useMemo(() => isApplePlatform(), []);
@@ -216,5 +214,5 @@ export const BackgroundLayer = memo(({ 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,16 +1,10 @@
+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;
 }
-/**
- * ゲームスクリーンコンポーネント
- * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
- * これにより displayText の更新による不要な再描画を防止
- */
-export declare const GameScreen: import("react").NamedExoticComponent<GameScreenProps>;
+export declare const GameScreen: React.FC<GameScreenProps>;
 export {};

package/dist/components/GameScreen.js

@@ -1,11 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-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, }) {
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCharacters, }) => {
     var _a;
     // キャラクターごとのフェード状態を管理
     const [fadeStates, setFadeStates] = useState(new Map());
@@ -227,28 +222,6 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
     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;
@@ -284,7 +257,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             // 複数キャラクター表示で、現在の話者でない場合
             if (currentSpeaker &&
                 currentSpeaker.objectId !== displayedChar.objectId) {
-                brightness = inactiveCharacterBrightness;
+                brightness = 0.8;
             }
         }
         // z-indexを決定
@@ -297,9 +270,9 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             : ((_d = image.scale) !== null && _d !== void 0 ? _d : 1);
         // 位置を決定（カスタム位置またはデフォルト位置）
         // 新座標系: x: -1=左見切れ, 0=中央, 1=右見切れ / y: -1=上見切れ, 0=中央, 1=下見切れ
-        let finalPosition = { x: 0, y: 0 };
+        let finalPosition = { x: 0, y: 1.0 }; // デフォルトは中央、下端
         if (displayedChar) {
-            // カスタム位置が設定されている場合（詳細モード）
+            // カスタム位置が設定されている場合
             if (displayedChar.positionX !== null &&
                 displayedChar.positionY !== null) {
                 finalPosition = {
@@ -307,14 +280,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                     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 = 完全に右に見切れ
@@ -424,4 +390,4 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                                     return null;
                                 return renderCharacter(image, null, false, "fadeout");
                             })()] }))] }) }));
-});
+};

package/dist/components/OverlayUI.d.ts

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

package/dist/components/OverlayUI.js

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

package/dist/components/PluginComponentProvider.js

@@ -20,7 +20,7 @@ export function PluginComponentProvider({ type, pluginManager, fallback: Fallbac
         return () => {
             unsubscribe();
         };
-    }, [dataAPI]);
+    }, [dataAPI, type]);
     const Component = pluginManager.getComponent(type);
     if (Component) {
         // Pass DataAPI as prop to avoid context issues

package/dist/contexts/DataContext.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from "react";
 import type { DataAPI, DataContext, EmotionEffectState, PlayerSettingsData } from "../sdk";
 type SettingsUpdater = (settings: Partial<PlayerSettingsData>) => void;
 type EmotionEffectUpdater = (state: EmotionEffectState | null) => void;
+type ScenarioCanceller = () => void;
 /**
  * データプロバイダー
  * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
@@ -19,6 +20,7 @@ export declare const DataProvider: React.FC<{
     data: DataContext;
     onSettingsUpdate?: SettingsUpdater;
     onEmotionEffectUpdate?: EmotionEffectUpdater;
+    onCancelScenario?: ScenarioCanceller;
     children: ReactNode;
 }>;
 /**

package/dist/contexts/DataContext.js

@@ -1,11 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from "react";
 const DataContextInstance = createContext(null);
-// データへの参照を共有するContext（Context value自体は変わらない）
-const DataRefContext = createContext(null);
 const SubscribersContext = createContext(null);
 const SettingsUpdaterContext = createContext(null);
 const EmotionEffectUpdaterContext = createContext(null);
+const ScenarioCancellerContext = createContext(null);
 /**
  * データプロバイダー
  * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
@@ -19,15 +18,9 @@ const EmotionEffectUpdaterContext = createContext(null);
  * </DataProvider>
  * ```
  */
-export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, children }) => {
+export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, onCancelScenario, children }) => {
     const subscribers = useMemo(() => new Map(), []);
     const previousDataRef = useRef(data);
-    // 安定したデータ参照ホルダー（Context valueとして提供）
-    // オブジェクト自体の参照は変わらず、currentプロパティを更新
-    // これにより、useContextを使うコンポーネントは再レンダリングされない
-    const dataRefHolder = useMemo(() => ({ current: data }), [data]);
-    // dataが変わるたびにcurrentを更新
-    dataRefHolder.current = data;
     // データ変更時に購読者に通知
     useEffect(() => {
         const prevData = previousDataRef.current;
@@ -61,38 +54,31 @@ export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, ch
         }
         previousDataRef.current = data;
     }, [data, subscribers]);
-    return (_jsx(SubscribersContext.Provider, { value: subscribers, children: _jsx(SettingsUpdaterContext.Provider, { value: onSettingsUpdate !== null && onSettingsUpdate !== void 0 ? onSettingsUpdate : null, children: _jsx(EmotionEffectUpdaterContext.Provider, { value: onEmotionEffectUpdate !== null && onEmotionEffectUpdate !== void 0 ? onEmotionEffectUpdate : null, children: _jsx(DataRefContext.Provider, { value: dataRefHolder, children: _jsx(DataContextInstance.Provider, { value: data, children: children }) }) }) }) }));
+    return (_jsx(SubscribersContext.Provider, { value: subscribers, children: _jsx(SettingsUpdaterContext.Provider, { value: onSettingsUpdate !== null && onSettingsUpdate !== void 0 ? onSettingsUpdate : null, children: _jsx(EmotionEffectUpdaterContext.Provider, { value: onEmotionEffectUpdate !== null && onEmotionEffectUpdate !== void 0 ? onEmotionEffectUpdate : null, children: _jsx(ScenarioCancellerContext.Provider, { value: onCancelScenario !== null && onCancelScenario !== void 0 ? onCancelScenario : null, children: _jsx(DataContextInstance.Provider, { value: data, children: children }) }) }) }) }));
 };
 /**
  * DataAPI実装を提供するフック
  * プラグインから呼び出される
  */
 export function useDataAPI() {
-    var _a;
-    // DataRefContextから安定したデータ参照を取得
-    // これはContext valueが変わらないので、再レンダリングを引き起こさない
-    const dataRefHolder = useContext(DataRefContext);
+    const data = useContext(DataContextInstance);
     const subscribers = useContext(SubscribersContext);
     const settingsUpdater = useContext(SettingsUpdaterContext);
     const emotionEffectUpdater = useContext(EmotionEffectUpdaterContext);
-    // 注意: usePlaybackTextOptional()をここで呼ぶと、PlaybackTextContextの更新で
-    // useDataAPIを使う全コンポーネントが再レンダリングされてしまう
-    // 代わりに、displayTextが必要なコンポーネントはusePlaybackText()を直接使う
-    if (!dataRefHolder || !subscribers) {
+    const scenarioCanceller = useContext(ScenarioCancellerContext);
+    if (!data || !subscribers) {
         throw new Error("useDataAPI must be used within DataProvider");
     }
     const get = useCallback((key, property) => {
-        const currentData = dataRefHolder.current;
         if (property !== undefined) {
-            const value = currentData[key];
+            const value = data[key];
             if (value && typeof value === "object" && property in value) {
                 return value[property];
             }
             return undefined;
         }
-        return currentData[key];
-    }, [dataRefHolder.current] // 依存配列を空にして、get関数を安定化
-    );
+        return data[key];
+    }, [data]);
     const subscribe = useCallback((key, callback) => {
         var _a;
         const subscriberKey = key;
@@ -158,13 +144,12 @@ export function useDataAPI() {
     }, [updateSettings]);
     const getBlockOption = useCallback((key) => {
         var _a;
-        const currentBlock = (_a = dataRefHolder.current.playback) === null || _a === void 0 ? void 0 : _a.currentBlock;
+        const currentBlock = (_a = data.playback) === null || _a === void 0 ? void 0 : _a.currentBlock;
         if (!(currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.options)) {
             return undefined;
         }
         return currentBlock.options[key];
-    }, [(_a = dataRefHolder.current.playback) === null || _a === void 0 ? void 0 : _a.currentBlock] // 依存配列を空にして安定化
-    );
+    }, [data]);
     const updateEmotionEffect = useCallback((state) => {
         if (emotionEffectUpdater) {
             emotionEffectUpdater(state);
@@ -173,6 +158,14 @@ export function useDataAPI() {
             console.warn("updateEmotionEffect called but no emotion effect updater provided");
         }
     }, [emotionEffectUpdater]);
+    const cancelScenario = useCallback(() => {
+        if (scenarioCanceller) {
+            scenarioCanceller();
+        }
+        else {
+            console.warn("cancelScenario called but no scenario canceller provided");
+        }
+    }, [scenarioCanceller]);
     return useMemo(() => ({
         get,
         subscribe,
@@ -184,6 +177,7 @@ export function useDataAPI() {
         setVolumes,
         getBlockOption,
         updateEmotionEffect,
+        cancelScenario,
     }), [
         get,
         subscribe,
@@ -195,5 +189,6 @@ export function useDataAPI() {
         setVolumes,
         getBlockOption,
         updateEmotionEffect,
+        cancelScenario,
     ]);
 }