@luna-editor/engine 0.2.0 → 0.3.1

package/dist/components/GameScreen.js

@@ -1,111 +1,427 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-export const GameScreen = ({ scenario, currentBlock, displayedCharacters, }) => {
+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, }) {
+    var _a;
+    // キャラクターごとのフェード状態を管理
+    const [fadeStates, setFadeStates] = useState(new Map());
+    const animationFrameRef = useRef(null);
+    const fadeStartTimeRef = useRef(new Map());
+    // 完了したフェードを追跡（同じpendingFadeで再度フェードしないため）
+    const completedFadesRef = useRef(new Set());
+    // コンテナサイズを取得（ResizeObserverで確実に取得）
+    const containerRef = useRef(null);
+    const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const updateSize = () => {
+            const clientWidth = container.clientWidth;
+            const clientHeight = container.clientHeight;
+            setContainerSize({ width: clientWidth, height: clientHeight });
+        };
+        const resizeObserver = new ResizeObserver(() => {
+            updateSize();
+        });
+        resizeObserver.observe(container);
+        updateSize();
+        return () => resizeObserver.disconnect();
+    }, []);
     // シナリオ全体で使用される全ての画像を収集
     const allImages = useMemo(() => {
         const images = new Map();
+        // オブジェクトごとのbaseBodyStateを記憶（レイヤー機能用）
+        const baseBodyStateByObjectId = new Map();
+        // 1st pass: character_entranceブロックからbaseBodyStateを収集
         scenario.blocks.forEach((block) => {
-            var _a;
-            // dialogue/narrationブロックのspeaker画像
-            if (((_a = block.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl) &&
-                block.speakerId &&
-                block.speakerStateId) {
-                const key = `${block.speakerId}-${block.speakerStateId}`;
-                images.set(key, {
-                    url: block.speakerState.imageUrl,
-                    objectId: block.speakerId,
-                    entityStateId: block.speakerStateId,
-                    scale: block.speakerState.scale,
-                    translateY: block.speakerState.translateY,
-                    translateX: block.speakerState.translateX,
+            if (block.characters) {
+                block.characters.forEach((char) => {
+                    var _a;
+                    if ((_a = char.baseBodyState) === null || _a === void 0 ? void 0 : _a.imageUrl) {
+                        baseBodyStateByObjectId.set(char.objectId, {
+                            imageUrl: char.baseBodyState.imageUrl,
+                            scale: char.baseBodyState.scale,
+                            translateX: char.baseBodyState.translateX,
+                            translateY: char.baseBodyState.translateY,
+                        });
+                    }
                 });
             }
-            // character_entranceブロックのキャラクター画像
+        });
+        // 2nd pass: 全ブロックから画像を収集
+        scenario.blocks.forEach((block) => {
+            var _a;
+            // character_entranceブロックのキャラクター画像（レイヤー情報含む）
             if (block.characters) {
                 block.characters.forEach((char) => {
-                    if (char.entityState.imageUrl) {
+                    var _a, _b, _c, _d, _e, _f;
+                    if (char.entityState.imageUrl || ((_a = char.baseBodyState) === null || _a === void 0 ? void 0 : _a.imageUrl)) {
                         const key = `${char.objectId}-${char.entityStateId}`;
                         images.set(key, {
-                            url: char.entityState.imageUrl,
+                            url: (_b = char.entityState.imageUrl) !== null && _b !== void 0 ? _b : "",
                             objectId: char.objectId,
                             entityStateId: char.entityStateId,
                             scale: char.entityState.scale,
                             translateY: char.entityState.translateY,
                             translateX: char.entityState.translateX,
+                            // レイヤー機能用
+                            baseBodyUrl: (_c = char.baseBodyState) === null || _c === void 0 ? void 0 : _c.imageUrl,
+                            baseBodyScale: (_d = char.baseBodyState) === null || _d === void 0 ? void 0 : _d.scale,
+                            baseBodyTranslateX: (_e = char.baseBodyState) === null || _e === void 0 ? void 0 : _e.translateX,
+                            baseBodyTranslateY: (_f = char.baseBodyState) === null || _f === void 0 ? void 0 : _f.translateY,
+                            layers: char.entityState.layers,
                         });
                     }
                 });
             }
+            // dialogue/narrationブロックのspeaker画像
+            // 既にレイヤー情報付きで登録されている場合は上書きしない
+            if (((_a = block.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl) &&
+                block.speakerId &&
+                block.speakerStateId) {
+                const key = `${block.speakerId}-${block.speakerStateId}`;
+                if (!images.has(key)) {
+                    // レイヤー機能用：同じobjectIdのbaseBodyStateを継承
+                    const baseBodyState = baseBodyStateByObjectId.get(block.speakerId);
+                    images.set(key, {
+                        url: block.speakerState.imageUrl,
+                        objectId: block.speakerId,
+                        entityStateId: block.speakerStateId,
+                        scale: block.speakerState.scale,
+                        translateY: block.speakerState.translateY,
+                        translateX: block.speakerState.translateX,
+                        // レイヤー機能用（baseBodyStateを継承、speakerStateからlayersを取得）
+                        baseBodyUrl: baseBodyState === null || baseBodyState === void 0 ? void 0 : baseBodyState.imageUrl,
+                        baseBodyScale: baseBodyState === null || baseBodyState === void 0 ? void 0 : baseBodyState.scale,
+                        baseBodyTranslateX: baseBodyState === null || baseBodyState === void 0 ? void 0 : baseBodyState.translateX,
+                        baseBodyTranslateY: baseBodyState === null || baseBodyState === void 0 ? void 0 : baseBodyState.translateY,
+                        layers: block.speakerState.layers,
+                    });
+                }
+            }
         });
         return Array.from(images.values());
     }, [scenario.blocks]);
+    // objectId-entityStateIdからImageDataを引くマップ
+    const imageDataMap = useMemo(() => {
+        const map = new Map();
+        for (const image of allImages) {
+            const key = `${image.objectId}-${image.entityStateId}`;
+            map.set(key, image);
+        }
+        return map;
+    }, [allImages]);
+    // フェードが必要かどうかを事前に計算（レンダリング時に使用）
+    const pendingFade = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        if (!previousBlock || !currentBlock)
+            return null;
+        const fadeTime = (_b = (_a = previousBlock.options) === null || _a === void 0 ? void 0 : _a.fadeToNextState) !== null && _b !== void 0 ? _b : 0;
+        if (fadeTime === 0)
+            return null;
+        if (previousBlock.speakerId &&
+            previousBlock.speakerId === currentBlock.speakerId &&
+            previousBlock.speakerStateId !== currentBlock.speakerStateId &&
+            ((_c = previousBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl)) {
+            // ユニークなキーを生成（同じフェードを再度実行しないため）
+            const fadeKey = `${currentBlock.speakerId}:${previousBlock.speakerStateId}:${currentBlock.speakerStateId}`;
+            return {
+                objectId: currentBlock.speakerId,
+                previousEntityStateId: (_d = previousBlock.speakerStateId) !== null && _d !== void 0 ? _d : "",
+                currentEntityStateId: (_e = currentBlock.speakerStateId) !== null && _e !== void 0 ? _e : "",
+                fadeTime,
+                fadeKey,
+            };
+        }
+        return null;
+    }, [previousBlock, currentBlock]);
+    // pendingFadeが変わったら完了フェードをクリア
+    const fadeKey = pendingFade === null || pendingFade === void 0 ? void 0 : pendingFade.fadeKey;
+    useEffect(() => {
+        if (fadeKey) {
+            // 新しいpendingFadeが来たら、完了フェードをクリア
+            completedFadesRef.current.clear();
+        }
+    }, [fadeKey]);
+    // フェード状態の初期化（描画前に同期的に実行）
+    useLayoutEffect(() => {
+        var _a;
+        if (!pendingFade)
+            return;
+        if (!((_a = previousBlock === null || previousBlock === void 0 ? void 0 : previousBlock.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl))
+            return;
+        const { objectId, previousEntityStateId, fadeTime, fadeKey } = pendingFade;
+        // 既に完了したフェードなら何もしない
+        if (completedFadesRef.current.has(fadeKey))
+            return;
+        // 既にこのオブジェクトのフェードが進行中なら何もしない
+        if (fadeStates.has(objectId))
+            return;
+        // フェード状態を初期化
+        setFadeStates((prev) => {
+            var _a, _b;
+            const newMap = new Map(prev);
+            newMap.set(objectId, {
+                previousEntityStateId,
+                previousImageUrl: (_b = (_a = previousBlock.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl) !== null && _b !== void 0 ? _b : "",
+                fadeProgress: 0,
+                fadeDuration: fadeTime,
+            });
+            return newMap;
+        });
+    }, [pendingFade, (_a = previousBlock === null || previousBlock === void 0 ? void 0 : previousBlock.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl, fadeStates]);
+    // アニメーション開始（レンダリング後に実行）
+    useEffect(() => {
+        if (!pendingFade)
+            return;
+        const { objectId, fadeTime, fadeKey } = pendingFade;
+        // 既に完了したフェードなら何もしない
+        if (completedFadesRef.current.has(fadeKey))
+            return;
+        // 既にアニメーション開始済みなら何もしない
+        if (fadeStartTimeRef.current.has(objectId))
+            return;
+        fadeStartTimeRef.current.set(objectId, performance.now());
+        // アニメーションループ
+        const animate = (currentTime) => {
+            const startTime = fadeStartTimeRef.current.get(objectId);
+            if (startTime === undefined)
+                return;
+            const elapsed = currentTime - startTime;
+            const progress = Math.min(elapsed / fadeTime, 1);
+            setFadeStates((prev) => {
+                const newMap = new Map(prev);
+                const state = newMap.get(objectId);
+                if (state) {
+                    newMap.set(objectId, Object.assign(Object.assign({}, state), { fadeProgress: progress }));
+                }
+                return newMap;
+            });
+            if (progress < 1) {
+                animationFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                // フェード完了、状態クリア
+                completedFadesRef.current.add(fadeKey);
+                setFadeStates((prev) => {
+                    const newMap = new Map(prev);
+                    newMap.delete(objectId);
+                    return newMap;
+                });
+                fadeStartTimeRef.current.delete(objectId);
+            }
+        };
+        animationFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, [pendingFade]);
     // 現在の話者
     const currentSpeaker = (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.speakerId)
         ? displayedCharacters.find((char) => char.objectId === currentBlock.speakerId)
         : null;
-    return (_jsx("div", { className: "w-full h-full relative", children: allImages.map((image) => {
-            var _a, _b, _c, _d, _e;
-            // 複数キャラクター表示の場合、表示されているキャラクターを探す
-            const displayedChar = displayedCharacters.find((char) => char.objectId === image.objectId &&
-                char.entityStateId === image.entityStateId);
-            // 単一キャラクター表示の場合、現在の話者かチェック
-            const isCurrentSpeaker = displayedCharacters.length === 0 &&
-                currentBlock.speakerId === image.objectId &&
-                currentBlock.speakerStateId === image.entityStateId;
-            // 表示すべきかどうか
-            const shouldDisplay = displayedChar || isCurrentSpeaker;
-            // 明るさを決定
-            let brightness = 1;
-            if (displayedCharacters.length > 0 && displayedChar) {
-                // 複数キャラクター表示で、現在の話者でない場合
-                if (currentSpeaker &&
-                    currentSpeaker.objectId !== displayedChar.objectId) {
-                    brightness = 0.8;
-                }
+    // 簡易モード用の自動配置計算
+    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;
+        // フェード状態を確認
+        const fadeState = fadeStates.get(image.objectId);
+        const isFadingIn = fadeState && fadeState.previousEntityStateId !== image.entityStateId;
+        const isFadingOut = fadeState && fadeState.previousEntityStateId === image.entityStateId;
+        // pendingFadeがあるがfadeStateがまだない場合（初回レンダリング）
+        // ただし、既に完了したフェードは除外
+        const isPendingFadeIn = !fadeState &&
+            (pendingFade === null || pendingFade === void 0 ? void 0 : pendingFade.objectId) === image.objectId &&
+            pendingFade.currentEntityStateId === image.entityStateId &&
+            !completedFadesRef.current.has(pendingFade.fadeKey);
+        const isPendingFadeOut = !fadeState &&
+            (pendingFade === null || pendingFade === void 0 ? void 0 : pendingFade.objectId) === image.objectId &&
+            pendingFade.previousEntityStateId === image.entityStateId &&
+            !completedFadesRef.current.has(pendingFade.fadeKey);
+        // 表示すべきかどうか
+        const shouldDisplay = displayedChar || isCurrentSpeaker || isFadingOut || isPendingFadeOut;
+        // opacityを決定
+        let opacity = 1;
+        if (isFadingIn || isPendingFadeIn) {
+            // フェードイン中、またはフェード開始直後（まだstateがない）
+            opacity = (_a = fadeState === null || fadeState === void 0 ? void 0 : fadeState.fadeProgress) !== null && _a !== void 0 ? _a : 0;
+        }
+        else if (isFadingOut || isPendingFadeOut) {
+            // フェードアウト中
+            opacity = fadeState ? 1 - fadeState.fadeProgress : 1;
+        }
+        // 明るさを決定
+        let brightness = 1;
+        if (displayedCharacters.length > 0 && displayedChar) {
+            // 複数キャラクター表示で、現在の話者でない場合
+            if (currentSpeaker &&
+                currentSpeaker.objectId !== displayedChar.objectId) {
+                brightness = inactiveCharacterBrightness;
             }
-            // z-indexを決定
-            const zIndex = (_a = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.zIndex) !== null && _a !== void 0 ? _a : (displayedChar ? 200 : 0);
-            // スケールを決定
-            // displayedCharのscaleが設定されている場合はそれを使用し、EntityStateのscaleと組み合わせる
-            // 設定されていない場合はEntityStateのscaleのみ使用
-            const characterScale = (displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.scale)
-                ? displayedChar.scale * ((_b = image.scale) !== null && _b !== void 0 ? _b : 1)
-                : ((_c = image.scale) !== null && _c !== void 0 ? _c : 1);
-            // デバッグ: スケール値をログ出力
-            if ((displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.scale) && displayedChar.scale !== 1) {
-                console.log(`Character ${image.objectId} - displayedChar.scale: ${displayedChar.scale}, image.scale: ${image.scale}, final: ${characterScale}`);
+        }
+        // z-indexを決定
+        const zIndex = (_b = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.zIndex) !== null && _b !== void 0 ? _b : (displayedChar ? 200 : 0);
+        // スケールを決定
+        // displayedCharのscaleが設定されている場合はそれを使用し、EntityStateのscaleと組み合わせる
+        // 設定されていない場合はEntityStateのscaleのみ使用
+        const characterScale = (displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.scale)
+            ? displayedChar.scale * ((_c = image.scale) !== null && _c !== void 0 ? _c : 1)
+            : ((_d = image.scale) !== null && _d !== void 0 ? _d : 1);
+        // 位置を決定（カスタム位置またはデフォルト位置）
+        // 新座標系: x: -1=左見切れ, 0=中央, 1=右見切れ / y: -1=上見切れ, 0=中央, 1=下見切れ
+        let finalPosition = { x: 0, y: 0 };
+        if (displayedChar) {
+            // カスタム位置が設定されている場合（詳細モード）
+            if (displayedChar.positionX !== null &&
+                displayedChar.positionY !== null) {
+                finalPosition = {
+                    x: (_e = displayedChar.positionX) !== null && _e !== void 0 ? _e : 0,
+                    y: (_f = displayedChar.positionY) !== null && _f !== void 0 ? _f : 0,
+                };
             }
-            // 位置を決定（カスタム位置またはデフォルト位置）
-            let finalPosition = { x: 0.5, y: 1.0 }; // デフォルトは中央下
-            if (displayedChar) {
-                // カスタム位置が設定されている場合
-                if (displayedChar.positionX !== null &&
-                    displayedChar.positionY !== null) {
-                    finalPosition = {
-                        x: (_d = displayedChar.positionX) !== null && _d !== void 0 ? _d : 0.5,
-                        y: (_e = displayedChar.positionY) !== null && _e !== void 0 ? _e : 1.0,
-                    };
+            else {
+                // 簡易モード: 自動配置
+                const autoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.25);
+                const autoPos = autoPositions.get(displayedChar.objectId);
+                if (autoPos) {
+                    finalPosition = autoPos;
                 }
-                // カスタム位置が設定されていない場合はデフォルト位置のまま
             }
-            // 高さ基準の位置計算（中央基準）
-            // 画面の中央（50vw）を基準として、vh単位で位置を指定
-            // positionX: 0.0 = 中央から -56.25vh（左端）, 0.5 = 中央, 1.0 = 中央から +56.25vh（右端）
-            const aspectRatio = 16 / 9;
-            const maxOffsetVh = 100 / aspectRatio / 2; // 56.25vh (16:9比率での半幅)
-            const offsetFromCenterVh = (finalPosition.x - 0.5) * 2 * maxOffsetVh;
-            const topVh = finalPosition.y * 100; // vh単位での上端からの距離
-            return (_jsx("div", { className: "absolute w-auto h-4/5 flex items-end", style: {
-                    visibility: shouldDisplay ? "visible" : "hidden",
-                    filter: `brightness(${brightness})`,
-                    zIndex: zIndex,
-                    left: "50vw",
-                    top: `${topVh}vh`,
-                    transform: `translate(calc(-50% + ${offsetFromCenterVh}vh), -100%)`, // 中央から相対位置 + 下揃え
-                }, "data-character-id": image.objectId, "data-character-sprite": true, children: _jsx("div", { className: "w-full h-full flex items-end justify-center", children: _jsx("img", { src: image.url, alt: "", className: "max-w-full max-h-full", style: {
+        }
+        // コンテナ相対の位置計算（パーセンテージ使用）
+        // positionX: -1.0 = 完全に左に見切れ, 0.0 = 中央, 1.0 = 完全に右に見切れ
+        // positionY: -1.0 = 完全に上に見切れ, 0.0 = 中央, 1.0 = 完全に下に見切れ
+        // -1〜1の範囲を0〜100%に変換: (value + 1) / 2 * 100
+        const leftPercent = ((finalPosition.x + 1) / 2) * 100;
+        const topPercent = ((finalPosition.y + 1) / 2) * 100;
+        // 完全に見切れるようにtranslateを動的に計算
+        // X: -1→0%, 0→-50%, 1→-100% (画像が完全に見切れる)
+        // Y: -1→0%, 0→-50%, 1→-100% (画像が完全に見切れる)
+        const translateXPercent = ((finalPosition.x - 1) / 2) * 100; // -100%〜0%
+        const translateYPercent = ((finalPosition.y - 1) / 2) * 100; // -100%〜0%
+        // レイヤー機能を使用するか判定（素体画像がある場合はレイヤーモード）
+        const hasLayerFeature = !!image.baseBodyUrl;
+        // 有効な画像がない場合は描画しない
+        const hasValidImage = hasLayerFeature ? !!image.baseBodyUrl : !!image.url;
+        if (!hasValidImage) {
+            return null;
+        }
+        // 現在の状態のlayersを取得（displayedCharがあればそれを優先、なければimageのlayers）
+        const currentLayers = (_h = (_g = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.entityState) === null || _g === void 0 ? void 0 : _g.layers) !== null && _h !== void 0 ? _h : image.layers;
+        // コンテナサイズが取得できていない場合はスキップ
+        if (containerSize.width === 0 || containerSize.height === 0) {
+            return null;
+        }
+        // CharacterEditDialogと完全に同じ方式
+        // 画像の高さはコンテナの高さ × スケール
+        const baseHeight = containerSize.height * characterScale;
+        // 位置をピクセルで計算（CharacterEditDialogと同じ）
+        const leftPx = (leftPercent / 100) * containerSize.width;
+        const topPx = (topPercent / 100) * containerSize.height;
+        return (_jsx("div", { style: {
+                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,
+            }, "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", style: {
+                            height: `${baseHeight}px`,
+                            width: "auto",
                             objectFit: "contain",
-                            transform: `scale(${characterScale}) translateX(${image.translateX || 0}%) translateY(${image.translateY || 0}%)`,
-                            transformOrigin: "bottom center",
-                        } }) }) }, `${image.objectId}-${image.entityStateId}`));
-        }) }));
-};
+                            transform: `translateX(${image.baseBodyTranslateX || 0}%) translateY(${image.baseBodyTranslateY || 0}%)`,
+                        } }), currentLayers === null || currentLayers === void 0 ? void 0 : currentLayers.filter((layer) => layer.imageUrl).sort((a, b) => a.sortOrder - b.sortOrder).map((layer) => (_jsx("img", { src: layer.imageUrl, alt: "", style: {
+                            position: "absolute",
+                            left: 0,
+                            top: 0,
+                            height: `${baseHeight}px`,
+                            width: "auto",
+                            objectFit: "contain",
+                            transform: `translateX(${image.translateX || 0}%) translateY(${image.translateY || 0}%)`,
+                        } }, layer.id)))] })) : (
+            /* 従来の単一画像表示 */
+            _jsx("img", { src: image.url, alt: "", style: {
+                    height: `${baseHeight}px`,
+                    width: "auto",
+                    objectFit: "contain",
+                    transform: `translateX(${image.translateX || 0}%) translateY(${image.translateY || 0}%)`,
+                } })) }, `${keyPrefix}-${image.objectId}-${image.entityStateId}`));
+    };
+    return (_jsx("div", { ref: containerRef, className: "w-full h-full relative overflow-hidden", children: _jsxs("div", { className: "absolute inset-0", children: [allImages.map((image) => {
+                    var _a;
+                    return (_jsxs("div", { style: { display: "none" }, children: [image.baseBodyUrl && _jsx("img", { src: image.baseBodyUrl, alt: "" }), image.url && _jsx("img", { src: image.url, alt: "" }), (_a = image.layers) === null || _a === void 0 ? void 0 : _a.map((layer) => (_jsx("img", { src: layer.imageUrl, alt: "" }, layer.id)))] }, `preload-${image.objectId}-${image.entityStateId}`));
+                }), displayedCharacters.map((char) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    // このキャラクターの現在の状態に対応するImageDataを取得
+                    const imageKey = `${char.objectId}-${char.entityStateId}`;
+                    const image = imageDataMap.get(imageKey);
+                    if (!image) {
+                        // ImageDataがない場合はdisplayedCharacterの情報から直接描画
+                        // （シナリオに含まれていない状態への変更など）
+                        const fallbackImage = {
+                            url: (_b = (_a = char.entityState) === null || _a === void 0 ? void 0 : _a.imageUrl) !== null && _b !== void 0 ? _b : "",
+                            objectId: char.objectId,
+                            entityStateId: char.entityStateId,
+                            scale: (_c = char.entityState) === null || _c === void 0 ? void 0 : _c.scale,
+                            translateX: (_d = char.entityState) === null || _d === void 0 ? void 0 : _d.translateX,
+                            translateY: (_e = char.entityState) === null || _e === void 0 ? void 0 : _e.translateY,
+                            baseBodyUrl: (_f = char.baseBodyState) === null || _f === void 0 ? void 0 : _f.imageUrl,
+                            baseBodyScale: (_g = char.baseBodyState) === null || _g === void 0 ? void 0 : _g.scale,
+                            baseBodyTranslateX: (_h = char.baseBodyState) === null || _h === void 0 ? void 0 : _h.translateX,
+                            baseBodyTranslateY: (_j = char.baseBodyState) === null || _j === void 0 ? void 0 : _j.translateY,
+                            layers: (_k = char.entityState) === null || _k === void 0 ? void 0 : _k.layers,
+                        };
+                        return renderCharacter(fallbackImage, char, false, "char");
+                    }
+                    return renderCharacter(image, char, false, "char");
+                }), displayedCharacters.length === 0 &&
+                    currentBlock.speakerId &&
+                    currentBlock.speakerStateId && (_jsxs(_Fragment, { children: [(() => {
+                            const imageKey = `${currentBlock.speakerId}-${currentBlock.speakerStateId}`;
+                            const image = imageDataMap.get(imageKey);
+                            if (!image)
+                                return null;
+                            return renderCharacter(image, null, true, "speaker");
+                        })(), pendingFade &&
+                            !completedFadesRef.current.has(pendingFade.fadeKey) &&
+                            (() => {
+                                const imageKey = `${pendingFade.objectId}-${pendingFade.previousEntityStateId}`;
+                                const image = imageDataMap.get(imageKey);
+                                if (!image)
+                                    return null;
+                                return renderCharacter(image, null, false, "fadeout");
+                            })()] }))] }) }));
+});

package/dist/components/OverlayUI.d.ts

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

package/dist/components/OverlayUI.js

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

package/dist/components/PluginComponentProvider.d.ts

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

package/dist/components/PluginComponentProvider.js

@@ -1,15 +1,33 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { useDataAPI } from "../contexts/DataContext";
 /**
  * Wrapper component that renders a plugin-registered component or a fallback
- * All data is provided via DataContext, so no props are passed
+ * DataAPI is provided via props to avoid React context issues across different React instances
  */
 export function PluginComponentProvider({ type, pluginManager, fallback: FallbackComponent, }) {
+    // Get DataAPI in Player's React context
+    const dataAPI = useDataAPI();
+    // 【emotionEffect監視】: emotionEffectの変更を監視して再レンダリング
+    // 【実装方針】: プラグインコンポーネントがdataAPI.get()を使用して状態を取得する場合、
+    //            Reactフックを使えないため、親側で変更を監視して再レンダリングを強制する
+    const [, forceUpdate] = useState({});
+    useEffect(() => {
+        // 全てのプラグインコンポーネントでemotionEffectの変更を監視
+        const unsubscribe = dataAPI.subscribe("emotionEffect", () => {
+            forceUpdate({});
+        });
+        return () => {
+            unsubscribe();
+        };
+    }, [dataAPI]);
     const Component = pluginManager.getComponent(type);
     if (Component) {
-        return _jsx(Component, {}, `plugin-component-${type}`);
+        // Pass DataAPI as prop to avoid context issues
+        return _jsx(Component, { dataAPI: dataAPI });
     }
     if (FallbackComponent) {
-        return _jsx(FallbackComponent, {}, `fallback-component-${type}`);
+        return _jsx(FallbackComponent, {});
     }
     // If no component is registered and no fallback provided, show a warning
     console.warn(`No component registered for type: ${type}`);
@@ -20,5 +38,5 @@ export function PluginComponentProvider({ type, pluginManager, fallback: Fallbac
             borderRadius: "4px",
             color: "#666",
             textAlign: "center",
-        }, children: [_jsxs("p", { children: ["Component not found: ", type] }), _jsx("p", { style: { fontSize: "12px", marginTop: "10px" }, children: "Please install a plugin that provides this component" })] }, `warning-component-${type}`));
+        }, children: [_jsxs("p", { children: ["Component not found: ", type] }), _jsx("p", { style: { fontSize: "12px", marginTop: "10px" }, children: "Please install a plugin that provides this component" })] }));
 }

package/dist/components/TimeWaitIndicator.d.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+interface TimeWaitIndicatorProps {
+    /** 待機時間（秒） */
+    duration: number;
+    /** 待機完了時のコールバック */
+    onComplete: () => void;
+    className?: string;
+}
+/**
+ * 時間待ちコンポーネント
+ * time_waitブロックで使用され、指定秒数経過後に自動で次に進む
+ * UIは表示せず、タイマー機能のみを提供
+ */
+export declare const TimeWaitIndicator: React.FC<TimeWaitIndicatorProps>;
+export {};