@luna-editor/engine 0.5.12 → 0.5.14

package/dist/Player.js

@@ -16,6 +16,7 @@ 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";
@@ -33,6 +34,7 @@ import { usePluginEvents } from "./hooks/usePluginEvents";
 import { usePreloadImages } from "./hooks/usePreloadImages";
 import { useSoundPlayer } from "./hooks/useSoundPlayer";
 import { useTypewriter } from "./hooks/useTypewriter";
+import { useVoice } from "./hooks/useVoice";
 import { PluginManager } from "./plugin/PluginManager";
 import { ComponentType } from "./sdk";
 import { convertBranchBlockToScenarioBlock } from "./utils/branchBlockConverter";
@@ -40,7 +42,7 @@ 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: scenarioProp, settings, plugins = EMPTY_PLUGINS, sounds = EMPTY_SOUNDS, onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, onSettingsChange, className, autoplay = false, preventDefaultScroll = true, screenSize: screenSizeProp, disableKeyboardNavigation = false, hideEndScreen = false, }) => {
     var _a, _b, _c, _d;
     // scenario.blocks が存在しない場合は空の配列を使用
     const scenario = useMemo(() => {
@@ -409,7 +411,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         }, 100);
         return () => clearTimeout(timeoutId);
     }, [pluginManager, isFirstRenderComplete]);
-    const { displayText, isTyping, skipTyping, startTyping, resetAccumulated } = useTypewriter({
+    const { displayText, isTyping, skipTyping, startTyping, resetAccumulated, reset: resetTypewriter, } = useTypewriter({
         speed: mergedSettings.textSpeed,
     });
     // 現在の表示可能なブロックを取得（分岐ブロックが優先）
@@ -456,11 +458,37 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         return blocks;
     }, [scenario.blocks, displayableBlockIndices, state.currentBlockIndex]);
     // サウンド再生フック
-    useSoundPlayer({
+    const { stopAll: stopAllSounds } = useSoundPlayer({
         soundBlocks: soundBlocksToProcess,
         isFirstRenderComplete,
         muteAudio: mergedSettings.muteAudio,
     });
+    // パートボイス再生
+    const { playVoice, stopVoice } = useVoice();
+    // currentBlockが変更されたらパートボイスを再生
+    useEffect(() => {
+        var _a;
+        if (!isFirstRenderComplete)
+            return;
+        if (!currentBlock)
+            return;
+        if (state.isEnded)
+            return;
+        if ((currentBlock.blockType === "dialogue" ||
+            currentBlock.blockType === "narration") &&
+            ((_a = currentBlock.partVoice) === null || _a === void 0 ? void 0 : _a.url)) {
+            playVoice(currentBlock.partVoice.url);
+        }
+        else {
+            stopVoice();
+        }
+    }, [
+        currentBlock,
+        isFirstRenderComplete,
+        state.isEnded,
+        playVoice,
+        stopVoice,
+    ]);
     // 会話分岐機能
     const branchNavigatorRef = useRef(new BranchNavigator());
     const conversationBranch = useConversationBranch({
@@ -514,6 +542,10 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
             }
         };
     }, [pluginManager, branchState]);
+    // キャラクター登場フェード待ち管理（refはここで宣言、検出ロジックはdisplayedCharacters定義後）
+    const isWaitingForEntranceRef = useRef(false);
+    const pendingTypingRef = useRef(null);
+    const prevCharIdSetRef = useRef(new Set());
     // ダイアログ表示とアクションノード実行のuseEffectを分離
     useEffect(() => {
         if (currentBlock && isFirstRenderComplete && pluginsLoaded) {
@@ -539,15 +571,33 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
             }
             const isContinuableBlock = currentBlock.blockType === "dialogue" ||
                 currentBlock.blockType === "narration";
-            if (continueMode && isContinuableBlock) {
-                startTyping(content, continueMode);
+            const doTyping = () => {
+                if (continueMode && isContinuableBlock) {
+                    startTyping(content, continueMode);
+                }
+                else {
+                    resetAccumulated();
+                    startTyping(content, false);
+                }
+            };
+            // キャラクター登場フェード中はタイピング開始を遅延し、既存テキストを即クリア
+            if (isWaitingForEntranceRef.current) {
+                resetTypewriter();
+                pendingTypingRef.current = doTyping;
             }
             else {
-                resetAccumulated();
-                startTyping(content, false);
+                doTyping();
             }
         }
-    }, [currentBlock, previousBlock, startTyping, resetAccumulated, isFirstRenderComplete, pluginsLoaded]);
+    }, [
+        currentBlock,
+        previousBlock,
+        startTyping,
+        resetAccumulated,
+        resetTypewriter,
+        isFirstRenderComplete,
+        pluginsLoaded,
+    ]);
     // 分岐ブロック自動ロード処理
     useEffect(() => {
         if (currentBlock && currentBlock.blockType === "conversation_branch") {
@@ -624,6 +674,9 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 scenarioName: scenario.name || "scenario",
             });
         }
+        // リスタート時にすべての音声を停止
+        stopAllSounds();
+        stopVoice();
         setIsFirstRenderComplete(false);
         setHasStarted(false); // これにより次の useEffect で onScenarioStart が呼ばれる
         setCurrentBranchBlock(null);
@@ -643,6 +696,8 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         pluginManager,
         scenario.id,
         scenario.name,
+        stopAllSounds,
+        stopVoice,
     ]);
     // プラグインからシナリオを中断するためのコールバック
     const cancelScenario = useCallback(() => {
@@ -653,7 +708,14 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                 scenarioName: scenario.name || "scenario",
             });
         }
-    }, [hasStarted, state.isEnded, onScenarioCancelled, pluginManager, scenario.id, scenario.name]);
+    }, [
+        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) => {
@@ -685,7 +747,28 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         customRestart: restart,
         variableManager: variableManagerRef.current,
         disableKeyboardNavigation,
+        onStopAllSounds: useCallback(() => {
+            stopAllSounds();
+            stopVoice();
+        }, [stopAllSounds, stopVoice]),
     });
+    // レンダーフェーズでキャラクター構成の変化を検出（useEffectより前に実行される）
+    const currentCharIdSet = useMemo(() => new Set(displayedCharacters.map((c) => c.objectId)), [displayedCharacters]);
+    const prevCharIds = prevCharIdSetRef.current;
+    const hasCharacterCompositionChange = currentCharIdSet.size !== prevCharIds.size ||
+        [...currentCharIdSet].some((id) => !prevCharIds.has(id)) ||
+        [...prevCharIds].some((id) => !currentCharIdSet.has(id));
+    if (hasCharacterCompositionChange) {
+        isWaitingForEntranceRef.current = true;
+        prevCharIdSetRef.current = currentCharIdSet;
+    }
+    const handleEntranceComplete = useCallback(() => {
+        isWaitingForEntranceRef.current = false;
+        if (pendingTypingRef.current) {
+            pendingTypingRef.current();
+            pendingTypingRef.current = null;
+        }
+    }, []);
     // プラグインイベント処理
     const realBlockIndex = currentBlock
         ? scenario.blocks.indexOf(currentBlock)
@@ -760,6 +843,9 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         }
         else {
             setState((prev) => (Object.assign(Object.assign({}, prev), { isEnded: true, isPlaying: false })));
+            // シナリオ終了時にすべての音声を停止
+            stopAllSounds();
+            stopVoice();
             // プラグインのonScenarioEndフックを呼び出し
             pluginManager.callHook("onScenarioEnd", {
                 scenarioId: scenario.id,
@@ -776,9 +862,11 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         handleNextInternal,
         onEnd,
         onScenarioEnd, // プラグインのonScenarioEndフックを呼び出し
+        stopVoice,
         pluginManager,
         scenario.id,
         scenario.name,
+        stopAllSounds,
     ]);
     // プラグインからAUTO再生を制御するためのコールバック
     const toggleAutoPlay = useCallback(() => {
@@ -798,13 +886,26 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         if (!hasStarted || state.isEnded)
             return;
         setState((prev) => (Object.assign(Object.assign({}, prev), { isEnded: true, isPlaying: false })));
+        // スキップ時にすべての音声を停止
+        stopAllSounds();
+        stopVoice();
         pluginManager.callHook("onScenarioEnd", {
             scenarioId: scenario.id,
             scenarioName: scenario.name || "scenario",
         });
         onScenarioEnd === null || onScenarioEnd === void 0 ? void 0 : onScenarioEnd();
         onEnd === null || onEnd === void 0 ? void 0 : onEnd();
-    }, [hasStarted, state.isEnded, pluginManager, scenario.id, scenario.name, onScenarioEnd, onEnd]);
+    }, [
+        hasStarted,
+        state.isEnded,
+        stopAllSounds,
+        stopVoice,
+        pluginManager,
+        scenario.id,
+        scenario.name,
+        onScenarioEnd,
+        onEnd,
+    ]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const _handlePrevious = useCallback(() => {
         if (state.currentBlockIndex > 0) {
@@ -967,7 +1068,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
         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" }) })), currentBlock && !state.isEnded && (_jsxs(_Fragment, { children: [(!imagesLoaded ||
+    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 && !hideEndScreen && (_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: {
@@ -1000,7 +1101,7 @@ export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGI
                                         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, inactiveCharacterBrightness: mergedSettings.inactiveCharacterBrightness, characterSpacing: mergedSettings.characterSpacing }, "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
+                                    }, 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, inactiveCharacterBrightness: mergedSettings.inactiveCharacterBrightness, characterSpacing: mergedSettings.characterSpacing, onEntranceComplete: handleEntranceComplete }, "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)

package/dist/components/DialogueBox.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { useDataAPI } from "../contexts/DataContext";
 import { getFontFamilyStyle } from "../hooks/useFontLoader";
 export const DialogueBox = () => {
-    var _a, _b;
+    var _a, _b, _c;
     const dataAPI = useDataAPI();
     const currentBlock = dataAPI.get("playback", "currentBlock");
     const content = dataAPI.get("playback", "displayText") || "";
@@ -24,13 +24,15 @@ export const DialogueBox = () => {
     if (!content) {
         return null;
     }
-    const speakerName = (_a = currentBlock.speaker) === null || _a === void 0 ? void 0 : _a.name;
-    const currentSpeakerId = (_b = currentBlock.speaker) === null || _b === void 0 ? void 0 : _b.id;
+    // 話者不明（speakerId=null）の台詞ブロックでは「？？？」を表示
+    const isUnknownSpeaker = !currentBlock.speaker && currentBlock.blockType === "dialogue";
+    const speakerName = (_b = (_a = currentBlock.speaker) === null || _a === void 0 ? void 0 : _a.name) !== null && _b !== void 0 ? _b : (isUnknownSpeaker ? "？？？" : undefined);
+    const currentSpeakerId = (_c = currentBlock.speaker) === null || _c === void 0 ? void 0 : _c.id;
     // 話者の位置を特定
     const speakerCharacter = displayedCharacters.find((char) => char.objectId === currentSpeakerId);
-    // 位置に基づいて名前表示のクラスを決定
+    // 位置に基づいて名前表示のクラスを決定（話者不明は中央固定）
     const getNamePositionClass = () => {
-        if (!(speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.positionX))
+        if (isUnknownSpeaker || !(speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.positionX))
             return "justify-center";
         const positionX = speakerCharacter.positionX;
         if (positionX < 0.33)
@@ -39,5 +41,5 @@ export const DialogueBox = () => {
             return "justify-end -mr-[5%]"; // 右側
         return "justify-center"; // 中央
     };
-    return (_jsx("div", { className: "absolute bottom-[5%] max-w-[60%] mx-auto h-[25%] left-0 right-0 bg-amber-50 border-4 rounded-xl border-amber-800 z-10 pointer-events-auto", style: { zIndex: 1000 }, "data-dialogue-element": true, children: _jsxs("div", { className: "relative space-y-3", children: [speakerName && (_jsx("div", { className: `flex items-center space-x-2 ${getNamePositionClass()}`, children: _jsx("div", { className: "bg-amber-950 text-white rounded-xl relative -top-5 w-full max-w-30 text-center border-4 border-amber-50 shadow-lg", "data-speaker-name-element": true, children: _jsx("span", { className: "font-bold text-lg", children: speakerName }) }) })), _jsx("div", { className: "absolute top-0 p-4 leading-relaxed text-2xl text-black", style: { fontFamily: fontFamilyStyle }, children: content }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "text-white/60 text-sm animate-pulse", children: "\u25BC" }) })] }) }));
+    return (_jsxs("div", { className: "absolute bottom-[5%] max-w-[60%] mx-auto left-0 right-0 pointer-events-auto", style: { zIndex: 1000 }, "data-dialogue-element": true, children: [speakerName && (_jsx("div", { className: `flex ${getNamePositionClass()} px-4`, children: _jsx("div", { className: "bg-amber-950 text-white rounded-xl text-center px-4 py-0.5 border-4 border-amber-50 shadow-lg translate-y-3", "data-speaker-name-element": true, children: _jsx("span", { className: "font-bold text-lg", children: speakerName }) }) })), _jsxs("div", { className: `bg-amber-50 border-4 rounded-xl border-amber-800 p-4 ${speakerName ? "pt-5" : ""}`, children: [_jsx("div", { className: "leading-relaxed text-2xl text-black", style: { fontFamily: fontFamilyStyle }, children: content }), _jsx("div", { className: "flex justify-end mt-1", children: _jsx("div", { className: "text-amber-800/60 text-sm animate-pulse", children: "\u25BC" }) })] })] }));
 };

package/dist/components/GameScreen.d.ts

@@ -6,6 +6,8 @@ interface GameScreenProps {
     displayedCharacters: DisplayedCharacter[];
     inactiveCharacterBrightness?: number;
     characterSpacing?: number;
+    /** キャラクター登場フェード完了時のコールバック */
+    onEntranceComplete?: () => void;
 }
 /**
  * ゲームスクリーンコンポーネント

package/dist/components/GameScreen.js

@@ -5,7 +5,7 @@ import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "re
  * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
  * これにより displayText の更新による不要な再描画を防止
  */
-export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.2, }) {
+export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.2, onEntranceComplete, }) {
     var _a;
     // キャラクターごとのフェード状態を管理
     const [fadeStates, setFadeStates] = useState(new Map());
@@ -24,9 +24,13 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
     const pendingEntranceRef = useRef([]);
     // 退場キャラの最終位置を保存（auto-layout再計算に依存しないため）
     const exitPositionsRef = useRef(new Map());
-    // 登場・退場の検出
-    useEffect(() => {
-        var _a, _b;
+    // スライド方向を保存（登場・退場アニメーション用）
+    const slideDirectionsRef = useRef(new Map());
+    // 登場・退場の検出（差分ベース: 追加/削除されたキャラだけをアニメーション）
+    // useLayoutEffect: ブラウザ描画前に実行し、キャラがopacity=1で一瞬表示されるフラッシュを防ぐ
+    // biome-ignore lint/correctness/useExhaustiveDependencies: アニメーション検出はdisplayedCharactersの変更のみをトリガーとし、他の依存はrefで管理
+    useLayoutEffect(() => {
+        var _a, _b, _c, _d, _e, _f, _g;
         const currentIds = new Set(displayedCharacters.map((c) => c.objectId));
         const prevIds = prevDisplayedCharIdsRef.current;
         const prevChars = prevDisplayedCharsRef.current;
@@ -34,29 +38,62 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
         if (prevIds.size === 0 && prevChars.length === 0) {
             prevDisplayedCharIdsRef.current = currentIds;
             prevDisplayedCharsRef.current = displayedCharacters;
+            onEntranceComplete === null || onEntranceComplete === void 0 ? void 0 : onEntranceComplete();
             return;
         }
-        // キャラ構成が変わったか判定（IDセットまたはentityStateIdの変化）
-        const hasChange = currentIds.size !== prevIds.size ||
-            [...currentIds].some((id) => !prevIds.has(id)) ||
-            [...prevIds].some((id) => !currentIds.has(id));
-        if (!hasChange) {
+        // 前のブロックと現在のブロックの間にある character_exit / character_entrance ブロックを検索
+        let exitBlockOptions = null;
+        let entranceBlockOptions = null;
+        let hasNonAdditiveEntrance = false;
+        if (previousBlock && currentBlock) {
+            const blocks = scenario.blocks;
+            const prevIdx = blocks.findIndex((b) => b.id === previousBlock.id);
+            const curIdx = blocks.findIndex((b) => b.id === currentBlock.id);
+            if (prevIdx >= 0 && curIdx >= 0) {
+                for (let i = prevIdx + 1; i <= curIdx; i++) {
+                    const b = blocks[i];
+                    if (b.blockType === "character_exit" && b.options) {
+                        exitBlockOptions = b.options;
+                    }
+                    if (b.blockType === "character_entrance") {
+                        if (b.options) {
+                            entranceBlockOptions = b.options;
+                        }
+                        if (((_a = b.options) === null || _a === void 0 ? void 0 : _a.additive) !== true) {
+                            hasNonAdditiveEntrance = true;
+                        }
+                    }
+                }
+            }
+        }
+        // 非追加モードのentranceがある場合: 全員退場→全員登場（従来動作）
+        // 追加モード/exitのみの場合: 差分のみアニメーション
+        let enteringIds;
+        let exitingIds;
+        if (hasNonAdditiveEntrance) {
+            // 全差し替え: 前回の全キャラが退場、現在の全キャラが登場
+            exitingIds = [...prevIds];
+            enteringIds = [...currentIds];
+        }
+        else {
+            // 差分検出: 追加されたキャラ / 削除されたキャラのみ
+            enteringIds = [...currentIds].filter((id) => !prevIds.has(id));
+            exitingIds = [...prevIds].filter((id) => !currentIds.has(id));
+        }
+        if (enteringIds.length === 0 && exitingIds.length === 0) {
             prevDisplayedCharsRef.current = displayedCharacters;
             return;
         }
-        // キャラ構成が変わった場合: 前回の全キャラを退場、現在の全キャラを登場
-        // これにより同じキャラが含まれていても必ずフェードイン/アウトが発生
-        const allExitChars = [...prevChars];
-        const allEnterIds = [...currentIds];
-        // 退場フェードアウト開始
-        if (allExitChars.length > 0) {
+        // 退場キャラの処理: フェードアウトを適用
+        const exitChars = prevChars.filter((c) => exitingIds.includes(c.objectId));
+        if (exitChars.length > 0) {
             const now = performance.now();
-            // 退場キャラの現在の位置を保存
-            for (const char of allExitChars) {
+            for (const char of exitChars) {
+                // 位置を保存
                 if (char.positionX !== null && char.positionY !== null) {
                     exitPositionsRef.current.set(char.objectId, {
-                        x: (_a = char.positionX) !== null && _a !== void 0 ? _a : 0,
-                        y: (_b = char.positionY) !== null && _b !== void 0 ? _b : 0,
+                        x: (_b = char.positionX) !== null && _b !== void 0 ? _b : 0,
+                        y: (_c = char.positionY) !== null && _c !== void 0 ? _c : 0,
                     });
                 }
                 else {
@@ -66,39 +103,96 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                         exitPositionsRef.current.set(char.objectId, pos);
                     }
                 }
-            }
-            setExitingCharacters((prev) => [...prev, ...allExitChars]);
-            const newFades = new Map(entranceFades);
-            for (const char of allExitChars) {
-                newFades.set(char.objectId, 1);
                 entranceFadeStartRef.current.set(char.objectId, now);
+                // スライド: character_exit ブロックの anim: フラグがある場合のみ
+                const animKey = `anim:${char.objectId}`;
+                if ((exitBlockOptions === null || exitBlockOptions === void 0 ? void 0 : exitBlockOptions[animKey]) === true) {
+                    const dirKey = `dir:${char.objectId}`;
+                    const dirVal = exitBlockOptions[dirKey];
+                    const validDirs = ["left", "right", "up", "down"];
+                    const dir = typeof dirVal === "string" &&
+                        validDirs.includes(dirVal)
+                        ? dirVal
+                        : ((_e = (_d = exitPositionsRef.current.get(char.objectId)) === null || _d === void 0 ? void 0 : _d.x) !== null && _e !== void 0 ? _e : 0) < 0
+                            ? "left"
+                            : "right";
+                    slideDirectionsRef.current.set(char.objectId, dir);
+                }
             }
-            setEntranceFades(newFades);
+            setExitingCharacters((prev) => [...prev, ...exitChars]);
+            setEntranceFades((prev) => {
+                const newFades = new Map(prev);
+                for (const char of exitChars) {
+                    newFades.set(char.objectId, 1);
+                }
+                return newFades;
+            });
         }
-        // 登場フェードイン開始（退場完了を待ってから）
-        if (allEnterIds.length > 0) {
-            const delay = allExitChars.length > 0 ? ENTRANCE_FADE_DURATION + 300 : 0;
-            pendingEntranceRef.current = allEnterIds;
-            setTimeout(() => {
-                const ids = pendingEntranceRef.current;
-                if (ids.length === 0)
-                    return;
-                pendingEntranceRef.current = [];
+        // 登場キャラの処理: 全登場キャラにフェードインを適用
+        if (enteringIds.length > 0) {
+            // スライド: character_entrance ブロックの anim: フラグがある場合のみ
+            const enterAutoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.2);
+            for (const id of enteringIds) {
+                const animKey = `anim:${id}`;
+                if ((entranceBlockOptions === null || entranceBlockOptions === void 0 ? void 0 : entranceBlockOptions[animKey]) === true) {
+                    const dirKey = `dir:${id}`;
+                    const dirVal = entranceBlockOptions[dirKey];
+                    const validDirs = ["left", "right", "up", "down"];
+                    if (typeof dirVal === "string" &&
+                        validDirs.includes(dirVal)) {
+                        slideDirectionsRef.current.set(id, dirVal);
+                    }
+                    else {
+                        const char = displayedCharacters.find((c) => c.objectId === id);
+                        let x = 0;
+                        if ((char === null || char === void 0 ? void 0 : char.positionX) !== null && (char === null || char === void 0 ? void 0 : char.positionX) !== undefined) {
+                            x = char.positionX;
+                        }
+                        else {
+                            x = (_g = (_f = enterAutoPositions.get(id)) === null || _f === void 0 ? void 0 : _f.x) !== null && _g !== void 0 ? _g : 0;
+                        }
+                        slideDirectionsRef.current.set(id, x < 0 ? "left" : "right");
+                    }
+                }
+            }
+            if (exitChars.length > 0) {
+                // 退場アニメーション完了を待ってから登場フェードイン開始
+                const delay = ENTRANCE_FADE_DURATION + 300;
+                pendingEntranceRef.current = enteringIds;
+                setTimeout(() => {
+                    const ids = pendingEntranceRef.current;
+                    if (ids.length === 0)
+                        return;
+                    pendingEntranceRef.current = [];
+                    const now = performance.now();
+                    setEntranceFades((prev) => {
+                        const newFades = new Map(prev);
+                        for (const id of ids) {
+                            newFades.set(id, 0);
+                            entranceFadeStartRef.current.set(id, now);
+                        }
+                        return newFades;
+                    });
+                }, delay);
+            }
+            else {
+                // 退場なし: 即座にフェードイン開始（setTimeoutを使わず1フレーム目から opacity=0）
                 const now = performance.now();
                 setEntranceFades((prev) => {
                     const newFades = new Map(prev);
-                    for (const id of ids) {
+                    for (const id of enteringIds) {
                         newFades.set(id, 0);
                         entranceFadeStartRef.current.set(id, now);
                     }
                     return newFades;
                 });
-            }, delay);
+            }
         }
         prevDisplayedCharIdsRef.current = currentIds;
         prevDisplayedCharsRef.current = displayedCharacters;
-    }, [displayedCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [displayedCharacters]);
     // 登場・退場フェードのアニメーションループ
+    // biome-ignore lint/correctness/useExhaustiveDependencies: アニメーションループはフェード状態と退場キャラの変更のみで制御
     useEffect(() => {
         if (entranceFades.size === 0)
             return;
@@ -140,6 +234,10 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             else {
                 setEntranceFades(new Map());
                 entranceFadeStartRef.current.clear();
+                // 登場フェード完了を通知（保留中の登場がない場合のみ）
+                if (pendingEntranceRef.current.length === 0) {
+                    onEntranceComplete === null || onEntranceComplete === void 0 ? void 0 : onEntranceComplete();
+                }
             }
         };
         entranceAnimFrameRef.current = requestAnimationFrame(animate);
@@ -148,7 +246,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
                 cancelAnimationFrame(entranceAnimFrameRef.current);
             }
         };
-    }, [entranceFades.size > 0, exitingCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
+    }, [entranceFades.size > 0, exitingCharacters]);
     // コンテナサイズを取得（ResizeObserverで確実に取得）
     const containerRef = useRef(null);
     const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -367,24 +465,28 @@ 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;
+        var _a, _b;
         const positions = new Map();
-        if (total === 0)
+        if (characters.length === 0)
             return positions;
-        if (total === 1) {
-            // 1人の場合は中央
+        // スロットベース配置: layoutSlotCountがあればそれをスロット数として使用
+        const slotCount = (_b = (_a = characters[0]) === null || _a === void 0 ? void 0 : _a.layoutSlotCount) !== null && _b !== void 0 ? _b : characters.length;
+        if (slotCount === 1) {
             positions.set(characters[0].objectId, { x: 0, y: 0 });
             return positions;
         }
-        // 複数の場合は均等配置
-        // spacing: 画面幅に対する割合（例: 0.1 = 10%）
-        // 座標系: -1（左端）〜 1（右端）
-        const totalWidth = (total - 1) * spacing * 2;
+        // 2人の場合は間隔を少し広めに（最低0.3）
+        const effectiveSpacing = slotCount === 2 ? Math.max(spacing, 0.3) : spacing;
+        // スロット数に基づいた均等配置
+        const totalWidth = (slotCount - 1) * effectiveSpacing * 2;
         const startX = -totalWidth / 2;
         characters.forEach((char, index) => {
-            const x = startX + index * spacing * 2;
+            var _a;
+            // layoutSlotIndexがあればそのスロット位置を使用、なければ配列順
+            const slotIndex = (_a = char.layoutSlotIndex) !== null && _a !== void 0 ? _a : index;
+            const x = startX + slotIndex * effectiveSpacing * 2;
             positions.set(char.objectId, { x, y: 0 });
         });
         return positions;
@@ -443,6 +545,32 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
             !isExitingChar) {
             opacity = 0;
         }
+        // スライドアニメーション: opacity に連動してスライドオフセットを計算
+        let slideOffsetX = 0;
+        let slideOffsetY = 0;
+        const slideDir = slideDirectionsRef.current.get(image.objectId);
+        if (slideDir &&
+            (entranceFadeOpacity !== undefined ||
+                pendingEntranceRef.current.includes(image.objectId))) {
+            const remaining = 1 - (entranceFadeOpacity !== null && entranceFadeOpacity !== void 0 ? entranceFadeOpacity : 0);
+            const easedOffset = remaining * remaining;
+            const maxHorizontal = containerSize.width * 0.3;
+            const maxVertical = containerSize.height * 0.3;
+            switch (slideDir) {
+                case "left":
+                    slideOffsetX = -maxHorizontal * easedOffset;
+                    break;
+                case "right":
+                    slideOffsetX = maxHorizontal * easedOffset;
+                    break;
+                case "up":
+                    slideOffsetY = -maxVertical * easedOffset;
+                    break;
+                case "down":
+                    slideOffsetY = maxVertical * easedOffset;
+                    break;
+            }
+        }
         // 明るさを決定
         let brightness = 1;
         if (displayedCharacters.length > 0 && displayedChar) {
@@ -540,7 +668,7 @@ export const GameScreen = memo(function GameScreen({ scenario, currentBlock, pre
         return (_jsx("div", { style: Object.assign({ position: "absolute", visibility: shouldDisplay ? "visible" : "hidden", opacity: opacity, filter: `brightness(${brightness})`, zIndex: zIndex, 
                 // CharacterEditDialogと完全に同じ: left/topを0にしてtransformで位置制御
                 // translate(%)は画像サイズに対する割合
-                left: 0, top: 0, transform: `translate(${leftPx}px, ${topPx}px) translate(${translateXPercent}%, ${translateYPercent}%)`, transition: fadeState ? "none" : undefined }, cropMaskStyle), "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", decoding: "sync", style: {
+                left: 0, top: 0, transform: `translate(${leftPx + slideOffsetX}px, ${topPx + slideOffsetY}px) translate(${translateXPercent}%, ${translateYPercent}%)`, transition: fadeState ? "none" : undefined }, cropMaskStyle), "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", decoding: "sync", style: {
                             height: `${baseHeight}px`,
                             width: "auto",
                             objectFit: "contain",

package/dist/contexts/DataContext.js

@@ -24,7 +24,7 @@ const SkipScenarioContext = createContext(null);
  * </DataProvider>
  * ```
  */
-export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, onCancelScenario, onToggleAutoPlay, onSetAutoPlay, onSkipToNext, onSkipScenario, children }) => {
+export const DataProvider = ({ data, onSettingsUpdate, onEmotionEffectUpdate, onCancelScenario, onToggleAutoPlay, onSetAutoPlay, onSkipToNext, onSkipScenario, children, }) => {
     const subscribers = useMemo(() => new Map(), []);
     const previousDataRef = useRef(data);
     // 安定したデータ参照ホルダー（Context valueとして提供）

package/dist/hooks/useBacklog.js

@@ -117,7 +117,7 @@ export function useBacklog({ scenario, currentBlockIndex, currentBlock, }) {
                 processedBlocks.current.add(currentBlockIndex);
             }
         }
-    }, [currentBlock, currentBlockIndex, addLogEntry]);
+    }, [currentBlock, currentBlockIndex, addLogEntry, scenario.blocks]);
     // シナリオ変更時にリセット
     // biome-ignore lint/correctness/useExhaustiveDependencies: scenario.idの変更を検知してログをクリアする意図的な依存
     useEffect(() => {

package/dist/hooks/useImagePreloader.d.ts

@@ -0,0 +1,5 @@
+import type { DisplayedCharacter } from "../types";
+export declare const useImagePreloader: (
+  displayedCharacters: DisplayedCharacter[],
+  singleImageUrl?: string
+) => boolean;

package/dist/hooks/useImagePreloader.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+export var useImagePreloader = function (displayedCharacters, singleImageUrl) {
+  var _a = useState(true),
+    isLoading = _a[0],
+    setIsLoading = _a[1];
+  useEffect(
+    function () {
+      var imageUrls = [];
+      // 複数キャラクター表示の場合
+      if (displayedCharacters.length > 0) {
+        displayedCharacters.forEach(function (char) {
+          if (char.entityState.imageUrl) {
+            imageUrls.push(char.entityState.imageUrl);
+          }
+        });
+      } else if (singleImageUrl) {
+        // 単一キャラクター表示の場合
+        imageUrls.push(singleImageUrl);
+      }
+      // 画像がない場合は即座に完了
+      if (imageUrls.length === 0) {
+        setIsLoading(false);
+        return;
+      }
+      setIsLoading(true);
+      // すべての画像を並列でプリロード
+      var loadPromises = imageUrls.map(function (url) {
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            return resolve();
+          };
+          img.onerror = function () {
+            return reject(new Error("Failed to load image: ".concat(url)));
+          };
+          img.src = url;
+        });
+      });
+      // すべての画像の読み込みを待つ
+      Promise.all(loadPromises)
+        .then(function () {
+          setIsLoading(false);
+        })
+        .catch(function (error) {
+          console.error("Image preload error:", error);
+          // エラーが発生しても続行
+          setIsLoading(false);
+        });
+    },
+    [displayedCharacters, singleImageUrl]
+  );
+  return isLoading;
+};

package/dist/hooks/usePlayerLogic.d.ts

@@ -16,8 +16,9 @@ interface UsePlayerLogicProps {
     customRestart?: () => void;
     variableManager?: VariableManager | null;
     disableKeyboardNavigation?: boolean;
+    onStopAllSounds?: () => void;
 }
-export declare const usePlayerLogic: ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, branchState, branchNavigator: _branchNavigator, customRestart, variableManager, disableKeyboardNavigation, }: UsePlayerLogicProps) => {
+export declare const usePlayerLogic: ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, branchState, branchNavigator: _branchNavigator, customRestart, variableManager, disableKeyboardNavigation, onStopAllSounds, }: UsePlayerLogicProps) => {
     handleNext: () => void;
     handlePrevious: () => void;
     togglePlay: () => void;

package/dist/hooks/usePlayerLogic.js

@@ -1,114 +1,150 @@
 import { useCallback, useEffect, useMemo } from "react";
+// character_entranceブロックからキャラクターデータを生成するヘルパー
+const mapEntranceCharacters = (block) => {
+    if (!block.characters)
+        return [];
+    const opts = block.options;
+    const layoutSlotCount = opts && typeof opts.layoutSlotCount === "number"
+        ? opts.layoutSlotCount
+        : undefined;
+    return block.characters.map((char) => {
+        const slotKey = `slot:${char.objectId}`;
+        const slotVal = opts === null || opts === void 0 ? void 0 : opts[slotKey];
+        const layoutSlotIndex = typeof slotVal === "number" ? slotVal : undefined;
+        return {
+            objectId: char.objectId,
+            entityStateId: char.entityStateId,
+            positionX: char.positionX,
+            positionY: char.positionY,
+            zIndex: char.zIndex,
+            scale: char.scale,
+            cropLeft: char.cropLeft,
+            cropRight: char.cropRight,
+            cropFade: char.cropFade,
+            object: char.object,
+            entityState: char.entityState,
+            baseBodyState: char.baseBodyState,
+            layoutSlotCount,
+            layoutSlotIndex,
+        };
+    });
+};
 // ブロックインデックスから表示すべきキャラクター状態を計算する純粋関数
 const calculateDisplayedCharacters = (blocks, currentIndex) => {
+    var _a, _b, _c, _d;
     let characters = [];
-    // 現在位置から前方向に探索して、最後のcharacter_entranceまたはcharacter_exitを見つける
+    // 後方探索: 最初の非追加モードのcharacter_entranceを見つける（リセットポイント）
+    let startIndex = 0;
     for (let i = currentIndex; i >= 0; i--) {
         const block = blocks[i];
         if (block.blockType === "character_entrance") {
-            // character_entranceを見つけたら、そこから現在位置までのキャラクター状態を構築
-            // character_entranceから現在位置までのブロックを処理
-            for (let j = i; j <= currentIndex; j++) {
-                const processBlock = blocks[j];
-                switch (processBlock.blockType) {
-                    case "character_entrance":
-                        if (processBlock.characters) {
-                            const newCharacters = processBlock.characters.map((char) => ({
-                                objectId: char.objectId,
-                                entityStateId: char.entityStateId,
-                                positionX: char.positionX,
-                                positionY: char.positionY,
-                                zIndex: char.zIndex,
-                                scale: char.scale,
-                                cropLeft: char.cropLeft,
-                                cropRight: char.cropRight,
-                                cropFade: char.cropFade,
-                                object: char.object,
-                                entityState: char.entityState,
-                                // レイヤー機能用
-                                baseBodyState: char.baseBodyState,
-                            }));
-                            characters = [
-                                ...characters.filter((existing) => !newCharacters.some((newChar) => newChar.objectId === existing.objectId)),
-                                ...newCharacters,
-                            ];
-                        }
-                        break;
-                    case "dialogue":
-                        if (processBlock.speakerId && processBlock.speakerStateId) {
-                            characters = characters.map((char) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                return char.objectId === processBlock.speakerId
-                                    ? Object.assign(Object.assign({}, char), { entityStateId: processBlock.speakerStateId || "", entityState: {
-                                            id: (_a = processBlock.speakerStateId) !== null && _a !== void 0 ? _a : "",
-                                            name: ((_b = processBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name) || "",
-                                            imageUrl: ((_c = processBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl) || null,
-                                            cropArea: ((_d = processBlock.speakerState) === null || _d === void 0 ? void 0 : _d.cropArea) || null,
-                                            scale: (_e = processBlock.speakerState) === null || _e === void 0 ? void 0 : _e.scale,
-                                            translateX: (_f = processBlock.speakerState) === null || _f === void 0 ? void 0 : _f.translateX,
-                                            translateY: (_g = processBlock.speakerState) === null || _g === void 0 ? void 0 : _g.translateY,
-                                            isDefault: (_h = processBlock.speakerState) === null || _h === void 0 ? void 0 : _h.isDefault,
-                                            // speakerStateにレイヤー情報があればそれを使用、なければ既存を保持
-                                            layers: (_k = (_j = processBlock.speakerState) === null || _j === void 0 ? void 0 : _j.layers) !== null && _k !== void 0 ? _k : char.entityState.layers,
-                                        }, 
-                                        // baseBodyStateを保持
-                                        baseBodyState: char.baseBodyState }) : char;
-                            });
-                        }
-                        break;
-                    case "character_state_change":
-                        // 状態変更ブロック: 登場済みキャラクターの状態のみを変更（位置は維持）
-                        // characters配列がある場合はそれを使用（複数キャラクター対応）
-                        if (processBlock.characters && processBlock.characters.length > 0) {
-                            for (const stateChange of processBlock.characters) {
-                                characters = characters.map((char) => {
-                                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-                                    return char.objectId === stateChange.objectId
-                                        ? Object.assign(Object.assign({}, char), { entityStateId: stateChange.entityStateId, entityState: {
-                                                id: stateChange.entityStateId,
-                                                name: ((_a = stateChange.entityState) === null || _a === void 0 ? void 0 : _a.name) || "",
-                                                imageUrl: ((_b = stateChange.entityState) === null || _b === void 0 ? void 0 : _b.imageUrl) || null,
-                                                cropArea: ((_c = stateChange.entityState) === null || _c === void 0 ? void 0 : _c.cropArea) || null,
-                                                scale: (_d = stateChange.entityState) === null || _d === void 0 ? void 0 : _d.scale,
-                                                translateX: (_e = stateChange.entityState) === null || _e === void 0 ? void 0 : _e.translateX,
-                                                translateY: (_f = stateChange.entityState) === null || _f === void 0 ? void 0 : _f.translateY,
-                                                isDefault: (_g = stateChange.entityState) === null || _g === void 0 ? void 0 : _g.isDefault,
-                                                layers: (_j = (_h = stateChange.entityState) === null || _h === void 0 ? void 0 : _h.layers) !== null && _j !== void 0 ? _j : char.entityState.layers,
-                                            }, 
-                                            // baseBodyStateと位置情報を保持
-                                            baseBodyState: char.baseBodyState }) : char;
-                                });
-                            }
-                        }
-                        else if (processBlock.speakerId && processBlock.speakerStateId) {
-                            // speakerId/speakerStateIdを使用した単一キャラクター状態変更（インラインエディタ形式）
-                            characters = characters.map((char) => {
-                                var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-                                return char.objectId === processBlock.speakerId
-                                    ? Object.assign(Object.assign({}, char), { entityStateId: processBlock.speakerStateId || "", entityState: {
-                                            id: (_a = processBlock.speakerStateId) !== null && _a !== void 0 ? _a : "",
-                                            name: ((_b = processBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name) || "",
-                                            imageUrl: ((_c = processBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl) || null,
-                                            cropArea: ((_d = processBlock.speakerState) === null || _d === void 0 ? void 0 : _d.cropArea) || null,
-                                            scale: (_e = processBlock.speakerState) === null || _e === void 0 ? void 0 : _e.scale,
-                                            translateX: (_f = processBlock.speakerState) === null || _f === void 0 ? void 0 : _f.translateX,
-                                            translateY: (_g = processBlock.speakerState) === null || _g === void 0 ? void 0 : _g.translateY,
-                                            isDefault: (_h = processBlock.speakerState) === null || _h === void 0 ? void 0 : _h.isDefault,
-                                            layers: (_k = (_j = processBlock.speakerState) === null || _j === void 0 ? void 0 : _j.layers) !== null && _k !== void 0 ? _k : char.entityState.layers,
-                                        }, 
-                                        // baseBodyStateと位置情報を保持
-                                        baseBodyState: char.baseBodyState }) : char;
-                            });
-                        }
-                        break;
+            const isAdditive = ((_a = block.options) === null || _a === void 0 ? void 0 : _a.additive) === true;
+            if (!isAdditive) {
+                startIndex = i;
+                break;
+            }
+        }
+    }
+    // startIndexから現在位置まで前方処理
+    for (let j = startIndex; j <= currentIndex; j++) {
+        const processBlock = blocks[j];
+        switch (processBlock.blockType) {
+            case "character_entrance": {
+                const isAdditive = ((_b = processBlock.options) === null || _b === void 0 ? void 0 : _b.additive) === true;
+                const newCharacters = mapEntranceCharacters(processBlock);
+                if (newCharacters.length === 0)
+                    break;
+                if (isAdditive) {
+                    // 追加モード: 既存キャラに追加（同一objectIdは上書き）
+                    characters = [
+                        ...characters.filter((existing) => !newCharacters.some((nc) => nc.objectId === existing.objectId)),
+                        ...newCharacters,
+                    ];
+                }
+                else {
+                    // 全差し替え（従来動作）
+                    characters = newCharacters;
+                }
+                break;
+            }
+            case "character_exit": {
+                // 指定されたキャラクターを表示リストから削除
+                if (processBlock.characters && processBlock.characters.length > 0) {
+                    const exitIds = new Set(processBlock.characters.map((c) => c.objectId));
+                    // 退場前のスロット総数を保存（残りキャラの位置を維持するため）
+                    const prevSlotCount = (_d = (_c = characters[0]) === null || _c === void 0 ? void 0 : _c.layoutSlotCount) !== null && _d !== void 0 ? _d : characters.length;
+                    // 各キャラにスロット情報を付与してからフィルタ
+                    characters = characters
+                        .map((c, idx) => {
+                        var _a;
+                        return (Object.assign(Object.assign({}, c), { layoutSlotCount: prevSlotCount, layoutSlotIndex: (_a = c.layoutSlotIndex) !== null && _a !== void 0 ? _a : idx }));
+                    })
+                        .filter((c) => !exitIds.has(c.objectId));
                 }
+                break;
             }
-            break; // 最初のcharacter_entranceを見つけたら終了
+            case "dialogue":
+                if (processBlock.speakerId && processBlock.speakerStateId) {
+                    characters = characters.map((char) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        return char.objectId === processBlock.speakerId
+                            ? Object.assign(Object.assign({}, char), { entityStateId: processBlock.speakerStateId || "", entityState: {
+                                    id: (_a = processBlock.speakerStateId) !== null && _a !== void 0 ? _a : "",
+                                    name: ((_b = processBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name) || "",
+                                    imageUrl: ((_c = processBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl) || null,
+                                    cropArea: ((_d = processBlock.speakerState) === null || _d === void 0 ? void 0 : _d.cropArea) || null,
+                                    scale: (_e = processBlock.speakerState) === null || _e === void 0 ? void 0 : _e.scale,
+                                    translateX: (_f = processBlock.speakerState) === null || _f === void 0 ? void 0 : _f.translateX,
+                                    translateY: (_g = processBlock.speakerState) === null || _g === void 0 ? void 0 : _g.translateY,
+                                    isDefault: (_h = processBlock.speakerState) === null || _h === void 0 ? void 0 : _h.isDefault,
+                                    layers: (_k = (_j = processBlock.speakerState) === null || _j === void 0 ? void 0 : _j.layers) !== null && _k !== void 0 ? _k : char.entityState.layers,
+                                }, baseBodyState: char.baseBodyState }) : char;
+                    });
+                }
+                break;
+            case "character_state_change":
+                if (processBlock.characters && processBlock.characters.length > 0) {
+                    for (const stateChange of processBlock.characters) {
+                        characters = characters.map((char) => {
+                            var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+                            return char.objectId === stateChange.objectId
+                                ? Object.assign(Object.assign({}, char), { entityStateId: stateChange.entityStateId, entityState: {
+                                        id: stateChange.entityStateId,
+                                        name: ((_a = stateChange.entityState) === null || _a === void 0 ? void 0 : _a.name) || "",
+                                        imageUrl: ((_b = stateChange.entityState) === null || _b === void 0 ? void 0 : _b.imageUrl) || null,
+                                        cropArea: ((_c = stateChange.entityState) === null || _c === void 0 ? void 0 : _c.cropArea) || null,
+                                        scale: (_d = stateChange.entityState) === null || _d === void 0 ? void 0 : _d.scale,
+                                        translateX: (_e = stateChange.entityState) === null || _e === void 0 ? void 0 : _e.translateX,
+                                        translateY: (_f = stateChange.entityState) === null || _f === void 0 ? void 0 : _f.translateY,
+                                        isDefault: (_g = stateChange.entityState) === null || _g === void 0 ? void 0 : _g.isDefault,
+                                        layers: (_j = (_h = stateChange.entityState) === null || _h === void 0 ? void 0 : _h.layers) !== null && _j !== void 0 ? _j : char.entityState.layers,
+                                    }, baseBodyState: char.baseBodyState }) : char;
+                        });
+                    }
+                }
+                else if (processBlock.speakerId && processBlock.speakerStateId) {
+                    characters = characters.map((char) => {
+                        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                        return char.objectId === processBlock.speakerId
+                            ? Object.assign(Object.assign({}, char), { entityStateId: processBlock.speakerStateId || "", entityState: {
+                                    id: (_a = processBlock.speakerStateId) !== null && _a !== void 0 ? _a : "",
+                                    name: ((_b = processBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name) || "",
+                                    imageUrl: ((_c = processBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl) || null,
+                                    cropArea: ((_d = processBlock.speakerState) === null || _d === void 0 ? void 0 : _d.cropArea) || null,
+                                    scale: (_e = processBlock.speakerState) === null || _e === void 0 ? void 0 : _e.scale,
+                                    translateX: (_f = processBlock.speakerState) === null || _f === void 0 ? void 0 : _f.translateX,
+                                    translateY: (_g = processBlock.speakerState) === null || _g === void 0 ? void 0 : _g.translateY,
+                                    isDefault: (_h = processBlock.speakerState) === null || _h === void 0 ? void 0 : _h.isDefault,
+                                    layers: (_k = (_j = processBlock.speakerState) === null || _j === void 0 ? void 0 : _j.layers) !== null && _k !== void 0 ? _k : char.entityState.layers,
+                                }, baseBodyState: char.baseBodyState }) : char;
+                    });
+                }
+                break;
         }
     }
     return characters;
 };
-export const usePlayerLogic = ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, branchState, branchNavigator: _branchNavigator, customRestart, variableManager, disableKeyboardNavigation = false, }) => {
+export const usePlayerLogic = ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, branchState, branchNavigator: _branchNavigator, customRestart, variableManager, disableKeyboardNavigation = false, onStopAllSounds, }) => {
     const isLastBlock = state.currentBlockIndex === scenario.blocks.length - 1;
     // 現在のインデックスに基づいて表示すべきキャラクターを計算
     const displayedCharacters = useMemo(() => calculateDisplayedCharacters(scenario.blocks, state.currentBlockIndex), [scenario.blocks, state.currentBlockIndex]);
@@ -132,6 +168,7 @@ export const usePlayerLogic = ({ state, setState, scenario, isTyping, currentBlo
         }
         if (isLastBlock) {
             setState((prev) => (Object.assign(Object.assign({}, prev), { isEnded: true, isPlaying: false })));
+            onStopAllSounds === null || onStopAllSounds === void 0 ? void 0 : onStopAllSounds();
             onEnd === null || onEnd === void 0 ? void 0 : onEnd();
             onScenarioEnd === null || onScenarioEnd === void 0 ? void 0 : onScenarioEnd();
             if (typeof window !== "undefined") {
@@ -161,6 +198,7 @@ export const usePlayerLogic = ({ state, setState, scenario, isTyping, currentBlo
         isLastBlock,
         onEnd,
         onScenarioEnd,
+        onStopAllSounds,
         isTyping,
         currentBlock,
         skipTyping,

package/dist/hooks/useSoundPlayer.js

@@ -107,7 +107,8 @@ export const useSoundPlayer = ({ soundBlocks, isFirstRenderComplete, muteAudio =
             stopBGM();
         }
         const audio = new Audio(sound.url);
-        audio.loop = sound.loop;
+        // BGMは常にループ再生
+        audio.loop = isBGMSound ? true : sound.loop;
         applyVolume(audio, block);
         const category = block.sound.soundType.category;
         // エラーハンドリング（イベントリスナーを保持してクリーンアップ可能にする）

package/dist/plugin/luna-react.d.ts

@@ -0,0 +1,41 @@
+/**
+ * プラグインAPIからReactインスタンスを設定
+ */
+export declare function setReactRuntime(react: any): void;
+/**
+ * JSX Transform用のjsx関数
+ */
+export declare function jsx(type: any, props: any, key?: any): any;
+/**
+ * JSX Transform用のjsxs関数（複数子要素用）
+ */
+export declare function jsxs(type: any, props: any, key?: any): any;
+/**
+ * Fragment用
+ */
+export declare function Fragment(props: {
+    children?: any;
+}): any;
+/**
+ * Reactフックと関数のプロキシ
+ */
+export declare const useState: (...args: any[]) => any;
+export declare const useEffect: (...args: any[]) => any;
+export declare const useCallback: (...args: any[]) => any;
+export declare const useMemo: (...args: any[]) => any;
+export declare const useRef: (...args: any[]) => any;
+export declare const useContext: (...args: any[]) => any;
+export declare const useReducer: (...args: any[]) => any;
+export declare const createElement: (...args: any[]) => any;
+declare const _default: {
+    createElement: (...args: any[]) => any;
+    Fragment: typeof Fragment;
+    useState: (...args: any[]) => any;
+    useEffect: (...args: any[]) => any;
+    useCallback: (...args: any[]) => any;
+    useMemo: (...args: any[]) => any;
+    useRef: (...args: any[]) => any;
+    useContext: (...args: any[]) => any;
+    useReducer: (...args: any[]) => any;
+};
+export default _default;

package/dist/plugin/luna-react.js

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable import/no-anonymous-default-export */
+let runtimeReact = null;
+/**
+ * プラグインAPIからReactインスタンスを設定
+ */
+export function setReactRuntime(react) {
+    runtimeReact = react;
+}
+/**
+ * JSX Transform用のjsx関数
+ */
+export function jsx(type, props, key) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+}
+/**
+ * JSX Transform用のjsxs関数（複数子要素用）
+ */
+export function jsxs(type, props, key) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+}
+/**
+ * Fragment用
+ */
+export function Fragment(props) {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(runtimeReact.Fragment, null, props.children);
+}
+/**
+ * Reactフックと関数のプロキシ
+ */
+export const useState = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useState(...args);
+};
+export const useEffect = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useEffect(...args);
+};
+export const useCallback = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useCallback(...args);
+};
+export const useMemo = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useMemo(...args);
+};
+export const useRef = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useRef(...args);
+};
+export const useContext = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useContext(...args);
+};
+export const useReducer = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.useReducer(...args);
+};
+export const createElement = (...args) => {
+    if (!runtimeReact) {
+        throw new Error("React runtime not initialized. Make sure plugin is loaded properly.");
+    }
+    return runtimeReact.createElement(...args);
+};
+// デフォルトエクスポート（互換性用）
+export default {
+    createElement,
+    Fragment,
+    useState,
+    useEffect,
+    useCallback,
+    useMemo,
+    useRef,
+    useContext,
+    useReducer,
+};

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 export type SoundCategory = "bgm" | "se" | "voice";
 /** Block options stored as key-value pairs */
 export type BlockOptions = Record<string, string | number | boolean>;
-export type ScenarioBlockType = "dialogue" | "narration" | "action_node" | "character_entrance" | "character_state_change" | "bgm_play" | "se_play" | "bgm_stop" | "conversation_branch" | "background_change" | "background_group" | "variable_operation" | "fullscreen_text" | "click_wait" | "time_wait";
+export type ScenarioBlockType = "dialogue" | "narration" | "action_node" | "character_entrance" | "character_exit" | "character_state_change" | "bgm_play" | "se_play" | "bgm_stop" | "conversation_branch" | "background_change" | "background_group" | "variable_operation" | "fullscreen_text" | "click_wait" | "time_wait";
 export interface ScenarioBlock {
     id: string;
     scenarioId: string;
@@ -11,6 +11,11 @@ export interface ScenarioBlock {
     speakerId: string | null;
     speakerStateId: string | null;
     partVoiceId: string | null;
+    partVoice?: {
+        id: string;
+        name: string;
+        url: string;
+    } | null;
     actionNodeId: string | null;
     createdAt: Date;
     updatedAt: Date;
@@ -205,6 +210,10 @@ export interface DisplayedCharacter {
     entityStateId: string;
     positionX?: number | null;
     positionY?: number | null;
+    /** スロットベース配置: スロット総数 */
+    layoutSlotCount?: number;
+    /** スロットベース配置: このキャラのスロット位置（0始まり） */
+    layoutSlotIndex?: number;
     zIndex?: number | null;
     scale?: number | null;
     cropLeft?: number | null;
@@ -374,6 +383,8 @@ export interface PlayerProps {
     };
     /** キーボードナビゲーションを無効化するかどうか（デフォルト: false） */
     disableKeyboardNavigation?: boolean;
+    /** 終了画面（リスタートボタン等）を非表示にするかどうか（デフォルト: false） */
+    hideEndScreen?: boolean;
 }
 export type VariableValue = string | number | boolean;
 export interface PlayerState {
@@ -426,6 +437,11 @@ export interface ConversationBranchBlock {
     speakerStateId: string | null;
     actionNodeId: string | null;
     partVoiceId: string | null;
+    partVoice?: {
+        id: string;
+        name: string;
+        url: string;
+    } | null;
     order: number;
     createdAt: Date;
     updatedAt: Date;

package/dist/utils/branchBlockConverter.js

@@ -8,6 +8,7 @@ export function convertBranchBlockToScenarioBlock(branchBlock) {
         speakerId: branchBlock.speakerId,
         speakerStateId: branchBlock.speakerStateId,
         partVoiceId: branchBlock.partVoiceId,
+        partVoice: branchBlock.partVoice,
         actionNodeId: branchBlock.actionNodeId,
         createdAt: branchBlock.createdAt,
         updatedAt: branchBlock.updatedAt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luna-editor/engine",
-  "version": "0.5.12",
+  "version": "0.5.14",
   "description": "Luna Editor scenario playback engine",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,4 +52,4 @@
     "game-engine"
   ],
   "license": "MIT"
-}
+}