@luna-editor/engine 0.5.0 → 0.5.2

package/dist/components/GameScreen.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCharacters, }) => {
+import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+/**
+ * ゲームスクリーンコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
+ */
+export const GameScreen = memo(function GameScreen({ scenario, currentBlock, previousBlock, displayedCharacters, inactiveCharacterBrightness = 0.8, characterSpacing = 0.2, }) {
     var _a;
     // キャラクターごとのフェード状態を管理
     const [fadeStates, setFadeStates] = useState(new Map());
@@ -8,6 +13,142 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
     const fadeStartTimeRef = useRef(new Map());
     // 完了したフェードを追跡（同じpendingFadeで再度フェードしないため）
     const completedFadesRef = useRef(new Set());
+    // 登場・退場フェード管理
+    const ENTRANCE_FADE_DURATION = 300; // ms
+    const [entranceFades, setEntranceFades] = useState(new Map()); // objectId -> opacity (0-1)
+    const [exitingCharacters, setExitingCharacters] = useState([]);
+    const prevDisplayedCharIdsRef = useRef(new Set());
+    const entranceFadeStartRef = useRef(new Map());
+    const entranceAnimFrameRef = useRef(null);
+    const prevDisplayedCharsRef = useRef([]);
+    const pendingEntranceRef = useRef([]);
+    // 退場キャラの最終位置を保存（auto-layout再計算に依存しないため）
+    const exitPositionsRef = useRef(new Map());
+    // 登場・退場の検出
+    useEffect(() => {
+        var _a, _b;
+        const currentIds = new Set(displayedCharacters.map((c) => c.objectId));
+        const prevIds = prevDisplayedCharIdsRef.current;
+        const prevChars = prevDisplayedCharsRef.current;
+        // 初回レンダリング（前回データなし）はスキップ
+        if (prevIds.size === 0 && prevChars.length === 0) {
+            prevDisplayedCharIdsRef.current = currentIds;
+            prevDisplayedCharsRef.current = displayedCharacters;
+            return;
+        }
+        // キャラ構成が変わったか判定（IDセットまたはentityStateIdの変化）
+        const hasChange = currentIds.size !== prevIds.size ||
+            [...currentIds].some((id) => !prevIds.has(id)) ||
+            [...prevIds].some((id) => !currentIds.has(id));
+        if (!hasChange) {
+            prevDisplayedCharsRef.current = displayedCharacters;
+            return;
+        }
+        // キャラ構成が変わった場合: 前回の全キャラを退場、現在の全キャラを登場
+        // これにより同じキャラが含まれていても必ずフェードイン/アウトが発生
+        const allExitChars = [...prevChars];
+        const allEnterIds = [...currentIds];
+        // 退場フェードアウト開始
+        if (allExitChars.length > 0) {
+            const now = performance.now();
+            // 退場キャラの現在の位置を保存
+            for (const char of allExitChars) {
+                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,
+                    });
+                }
+                else {
+                    const autoPositions = calculateAutoLayout(prevChars, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.2);
+                    const pos = autoPositions.get(char.objectId);
+                    if (pos) {
+                        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);
+            }
+            setEntranceFades(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 = [];
+                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);
+        }
+        prevDisplayedCharIdsRef.current = currentIds;
+        prevDisplayedCharsRef.current = displayedCharacters;
+    }, [displayedCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
+    // 登場・退場フェードのアニメーションループ
+    useEffect(() => {
+        if (entranceFades.size === 0)
+            return;
+        const exitingIds = new Set(exitingCharacters.map((c) => c.objectId));
+        const animate = () => {
+            const now = performance.now();
+            let hasActive = false;
+            const newFades = new Map();
+            const completedExitIds = [];
+            for (const [objectId] of entranceFades) {
+                const startTime = entranceFadeStartRef.current.get(objectId);
+                if (!startTime)
+                    continue;
+                const elapsed = now - startTime;
+                const progress = Math.min(elapsed / ENTRANCE_FADE_DURATION, 1);
+                const isExiting = exitingIds.has(objectId);
+                // 退場: 1→0, 登場: 0→1
+                const opacity = isExiting ? 1 - progress : progress;
+                newFades.set(objectId, opacity);
+                if (progress < 1) {
+                    hasActive = true;
+                }
+                else if (isExiting) {
+                    completedExitIds.push(objectId);
+                }
+            }
+            setEntranceFades(newFades);
+            // 退場フェード完了したキャラを削除
+            if (completedExitIds.length > 0) {
+                setExitingCharacters((prev) => prev.filter((c) => !completedExitIds.includes(c.objectId)));
+                // 保存位置もクリーンアップ
+                for (const id of completedExitIds) {
+                    exitPositionsRef.current.delete(id);
+                }
+            }
+            if (hasActive) {
+                entranceAnimFrameRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                setEntranceFades(new Map());
+                entranceFadeStartRef.current.clear();
+            }
+        };
+        entranceAnimFrameRef.current = requestAnimationFrame(animate);
+        return () => {
+            if (entranceAnimFrameRef.current) {
+                cancelAnimationFrame(entranceAnimFrameRef.current);
+            }
+        };
+    }, [entranceFades.size > 0, exitingCharacters]); // eslint-disable-line react-hooks/exhaustive-deps
     // コンテナサイズを取得（ResizeObserverで確実に取得）
     const containerRef = useRef(null);
     const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
@@ -54,7 +195,7 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             // character_entranceブロックのキャラクター画像（レイヤー情報含む）
             if (block.characters) {
                 block.characters.forEach((char) => {
-                    var _a, _b, _c, _d, _e, _f;
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
                     if (char.entityState.imageUrl || ((_a = char.baseBodyState) === null || _a === void 0 ? void 0 : _a.imageUrl)) {
                         const key = `${char.objectId}-${char.entityStateId}`;
                         images.set(key, {
@@ -70,6 +211,10 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
                             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,
+                            // EntityStateのcrop値を優先、なければScenarioBlockCharacterのcrop値
+                            cropLeft: (_g = char.entityState.cropLeft) !== null && _g !== void 0 ? _g : char.cropLeft,
+                            cropRight: (_h = char.entityState.cropRight) !== null && _h !== void 0 ? _h : char.cropRight,
+                            cropFade: (_j = char.entityState.cropFade) !== null && _j !== void 0 ? _j : char.cropFade,
                         });
                     }
                 });
@@ -222,9 +367,31 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
     const currentSpeaker = (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.speakerId)
         ? displayedCharacters.find((char) => char.objectId === currentBlock.speakerId)
         : null;
+    // 簡易モード用の自動配置計算
+    const calculateAutoLayout = (characters, spacing) => {
+        const total = characters.length;
+        const positions = new Map();
+        if (total === 0)
+            return positions;
+        if (total === 1) {
+            // 1人の場合は中央
+            positions.set(characters[0].objectId, { x: 0, y: 0 });
+            return positions;
+        }
+        // 複数の場合は均等配置
+        // spacing: 画面幅に対する割合（例: 0.1 = 10%）
+        // 座標系: -1（左端）〜 1（右端）
+        const totalWidth = (total - 1) * spacing * 2;
+        const startX = -totalWidth / 2;
+        characters.forEach((char, index) => {
+            const x = startX + index * spacing * 2;
+            positions.set(char.objectId, { x, y: 0 });
+        });
+        return positions;
+    };
     // キャラクター描画用のヘルパー関数
     const renderCharacter = (image, displayedChar, isCurrentSpeaker, keyPrefix) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         // フェード状態を確認
         const fadeState = fadeStates.get(image.objectId);
         const isFadingIn = fadeState && fadeState.previousEntityStateId !== image.entityStateId;
@@ -239,8 +406,14 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             (pendingFade === null || pendingFade === void 0 ? void 0 : pendingFade.objectId) === image.objectId &&
             pendingFade.previousEntityStateId === image.entityStateId &&
             !completedFadesRef.current.has(pendingFade.fadeKey);
+        // 退場中のキャラクターか判定
+        const isExitingChar = exitingCharacters.some((c) => c.objectId === image.objectId);
         // 表示すべきかどうか
-        const shouldDisplay = displayedChar || isCurrentSpeaker || isFadingOut || isPendingFadeOut;
+        const shouldDisplay = displayedChar ||
+            isCurrentSpeaker ||
+            isFadingOut ||
+            isPendingFadeOut ||
+            isExitingChar;
         // opacityを決定
         let opacity = 1;
         if (isFadingIn || isPendingFadeIn) {
@@ -251,13 +424,22 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             // フェードアウト中
             opacity = fadeState ? 1 - fadeState.fadeProgress : 1;
         }
+        // 登場・退場フェード（character_entrance/exit時）
+        const entranceFadeOpacity = entranceFades.get(image.objectId);
+        if (entranceFadeOpacity !== undefined) {
+            opacity = entranceFadeOpacity;
+        }
+        // 登場待ち（退場フェード完了待ち）のキャラは非表示
+        if (pendingEntranceRef.current.includes(image.objectId)) {
+            opacity = 0;
+        }
         // 明るさを決定
         let brightness = 1;
         if (displayedCharacters.length > 0 && displayedChar) {
             // 複数キャラクター表示で、現在の話者でない場合
             if (currentSpeaker &&
                 currentSpeaker.objectId !== displayedChar.objectId) {
-                brightness = 0.8;
+                brightness = inactiveCharacterBrightness;
             }
         }
         // z-indexを決定
@@ -270,17 +452,36 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
             : ((_d = image.scale) !== null && _d !== void 0 ? _d : 1);
         // 位置を決定（カスタム位置またはデフォルト位置）
         // 新座標系: x: -1=左見切れ, 0=中央, 1=右見切れ / y: -1=上見切れ, 0=中央, 1=下見切れ
-        let finalPosition = { x: 0, y: 1.0 }; // デフォルトは中央、下端
-        if (displayedChar) {
-            // カスタム位置が設定されている場合
-            if (displayedChar.positionX !== null &&
-                displayedChar.positionY !== null) {
+        let finalPosition = { x: 0, y: 0 };
+        // 退場中のキャラは保存された位置情報を使用（移動しない）
+        const exitingChar = isExitingChar
+            ? exitingCharacters.find((c) => c.objectId === image.objectId)
+            : null;
+        const positionSource = displayedChar !== null && displayedChar !== void 0 ? displayedChar : exitingChar;
+        if (isExitingChar) {
+            // 退場中のキャラ: 保存された位置を使用（絶対に移動しない）
+            const savedPos = exitPositionsRef.current.get(image.objectId);
+            if (savedPos) {
+                finalPosition = savedPos;
+            }
+        }
+        else if (positionSource) {
+            // カスタム位置が設定されている場合（詳細モード）
+            if (positionSource.positionX !== null &&
+                positionSource.positionY !== null) {
                 finalPosition = {
-                    x: (_e = displayedChar.positionX) !== null && _e !== void 0 ? _e : 0,
-                    y: (_f = displayedChar.positionY) !== null && _f !== void 0 ? _f : 0,
+                    x: (_e = positionSource.positionX) !== null && _e !== void 0 ? _e : 0,
+                    y: (_f = positionSource.positionY) !== null && _f !== void 0 ? _f : 0,
                 };
             }
-            // カスタム位置が設定されていない場合はデフォルト位置のまま
+            else {
+                // 簡易モード: 自動配置
+                const autoPositions = calculateAutoLayout(displayedCharacters, characterSpacing !== null && characterSpacing !== void 0 ? characterSpacing : 0.2);
+                const autoPos = autoPositions.get(positionSource.objectId);
+                if (autoPos) {
+                    finalPosition = autoPos;
+                }
+            }
         }
         // コンテナ相対の位置計算（パーセンテージ使用）
         // positionX: -1.0 = 完全に左に見切れ, 0.0 = 中央, 1.0 = 完全に右に見切れ
@@ -312,19 +513,24 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
         // 位置をピクセルで計算（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,
+        // トリミング用のCSS mask計算
+        // displayedCharacterのcrop値を優先（キャラクター登場ブロックで設定）
+        const cLeft = (_k = (_j = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropLeft) !== null && _j !== void 0 ? _j : image.cropLeft) !== null && _k !== void 0 ? _k : 0;
+        const cRight = (_m = (_l = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropRight) !== null && _l !== void 0 ? _l : image.cropRight) !== null && _m !== void 0 ? _m : 0;
+        const cFade = (_p = (_o = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.cropFade) !== null && _o !== void 0 ? _o : image.cropFade) !== null && _p !== void 0 ? _p : 0;
+        const hasCrop = cLeft > 0 || cRight > 0;
+        // フェード量をpx基準値からコンテナ高さ比でスケーリング
+        const fadePx = hasCrop && cFade > 0 ? (cFade / 1080) * containerSize.height : 0;
+        const cropMaskStyle = hasCrop
+            ? {
+                WebkitMaskImage: `linear-gradient(to right, transparent ${cLeft * 100}%, black ${cLeft * 100 + (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, black ${(1 - cRight) * 100 - (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, transparent ${(1 - cRight) * 100}%)`,
+                maskImage: `linear-gradient(to right, transparent ${cLeft * 100}%, black ${cLeft * 100 + (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, black ${(1 - cRight) * 100 - (fadePx > 0 ? (fadePx / baseHeight) * 100 : 0)}%, transparent ${(1 - cRight) * 100}%)`,
+            }
+            : {};
+        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,
-            }, "data-character-id": image.objectId, "data-character-sprite": true, children: hasLayerFeature && image.baseBodyUrl ? (_jsxs(_Fragment, { children: [_jsx("img", { src: image.baseBodyUrl, alt: "", style: {
+                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: "", style: {
                             height: `${baseHeight}px`,
                             width: "auto",
                             objectFit: "contain",
@@ -373,6 +579,27 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
                         return renderCharacter(fallbackImage, char, false, "char");
                     }
                     return renderCharacter(image, char, false, "char");
+                }), exitingCharacters.map((char) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+                    const imageKey = `${char.objectId}-${char.entityStateId}`;
+                    const image = imageDataMap.get(imageKey);
+                    if (!image) {
+                        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, "exit");
+                    }
+                    return renderCharacter(image, char, false, "exit");
                 }), displayedCharacters.length === 0 &&
                     currentBlock.speakerId &&
                     currentBlock.speakerStateId && (_jsxs(_Fragment, { children: [(() => {
@@ -390,4 +617,4 @@ export const GameScreen = ({ scenario, currentBlock, previousBlock, displayedCha
                                     return null;
                                 return renderCharacter(image, null, false, "fadeout");
                             })()] }))] }) }));
-};
+});

package/dist/components/OverlayUI.d.ts

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

package/dist/components/OverlayUI.js

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

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

package/dist/contexts/DataContext.js

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

package/dist/contexts/PlaybackTextContext.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+/**
+ * 文字送り用の軽量コンテキスト
+ * displayText と isTyping は頻繁に更新されるため、
+ * DataContext から分離して不要な再レンダリングを防ぐ
+ */
+interface PlaybackTextContextValue {
+    /** 現在表示中のテキスト（文字送り中は部分テキスト） */
+    displayText: string | React.ReactNode;
+    /** 文字送り中かどうか */
+    isTyping: boolean;
+}
+/**
+ * PlaybackTextProvider
+ * 文字送り状態を提供するProvider
+ * DataProviderとは別に、displayTextとisTypingのみを管理
+ */
+export declare const PlaybackTextProvider: React.FC<{
+    displayText: string | React.ReactNode;
+    isTyping: boolean;
+    children: ReactNode;
+}>;
+/**
+ * 文字送り状態を取得するフック
+ */
+export declare function usePlaybackText(): PlaybackTextContextValue;
+/**
+ * 文字送り状態を取得するフック（オプショナル版）
+ * PlaybackTextProviderの外でも使用可能（その場合はnullを返す）
+ */
+export declare function usePlaybackTextOptional(): PlaybackTextContextValue | null;
+export {};

package/dist/contexts/PlaybackTextContext.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+const PlaybackTextContextInstance = createContext(null);
+/**
+ * PlaybackTextProvider
+ * 文字送り状態を提供するProvider
+ * DataProviderとは別に、displayTextとisTypingのみを管理
+ */
+export const PlaybackTextProvider = ({ displayText, isTyping, children }) => {
+    const value = useMemo(() => ({ displayText, isTyping }), [displayText, isTyping]);
+    return (_jsx(PlaybackTextContextInstance.Provider, { value: value, children: children }));
+};
+/**
+ * 文字送り状態を取得するフック
+ */
+export function usePlaybackText() {
+    const context = useContext(PlaybackTextContextInstance);
+    if (!context) {
+        throw new Error("usePlaybackText must be used within PlaybackTextProvider");
+    }
+    return context;
+}
+/**
+ * 文字送り状態を取得するフック（オプショナル版）
+ * PlaybackTextProviderの外でも使用可能（その場合はnullを返す）
+ */
+export function usePlaybackTextOptional() {
+    return useContext(PlaybackTextContextInstance);
+}

package/dist/data-api-types.d.ts

@@ -51,8 +51,10 @@ export interface PlayerSettingsData {
     voiceVolume: number;
     /** スキップ設定 */
     skipMode?: "all" | "unread" | "none";
-    /** 選択されたフォントファミリー */
+    /** 選択されたフォントファミリー（テキスト用） */
     selectedFontFamily?: string;
+    /** 選択されたUIフォントファミリー（メニュー・ラベル等） */
+    selectedUIFontFamily?: string;
 }
 /**
  * プラグインアセットデータ
@@ -72,8 +74,10 @@ export interface PluginAssetsData {
 export interface FontsData {
     /** 利用可能なフォント一覧 */
     fonts: WorkFont[];
-    /** 選択されているフォントファミリー */
+    /** 選択されているフォントファミリー（テキスト用） */
     selectedFontFamily: string | undefined;
+    /** 選択されているUIフォントファミリー（メニュー・ラベル等） */
+    selectedUIFontFamily: string | undefined;
     /** フォントが読み込み完了しているかどうか */
     isLoaded: boolean;
 }

package/dist/hooks/useFontLoader.d.ts

@@ -3,9 +3,11 @@ import type { WorkFont } from "../types";
  * フォントを読み込むカスタムフック
  * - Googleフォント: <link>タグで読み込み + document.fonts.load()でプリロード
  * - カスタムフォント: FontFace APIで読み込み
- * - すべてのフォントがプリロード&キャッシュされてからisLoaded=trueになる
+ * - すべてのフォントが完全にダウンロード&キャッシュされてからisLoaded=trueになる
+ * - 再生開始前に全フォントを一括ダウンロードし、再生中のフォントスワップを防止する
+ * - preloadText: シナリオ内の全テキストを渡すと、使用される全ての文字でフォントをプリロード
  */
-export declare function useFontLoader(fonts: WorkFont[] | undefined): {
+export declare function useFontLoader(fonts: WorkFont[] | undefined, preloadText?: string): {
     isLoaded: boolean;
     loadedFonts: string[];
 };
@@ -13,6 +15,11 @@ export declare function useFontLoader(fonts: WorkFont[] | undefined): {
  * フォントファミリーに基づいてCSSのfont-family値を生成
  */
 export declare function getFontFamilyStyle(selectedFontFamily: string | undefined, fonts: WorkFont[] | undefined): string;
+/**
+ * UIフォントファミリーに基づいてCSSのfont-family値を生成
+ * メニュー、ボタン、ラベルなどのUI要素に使用
+ */
+export declare function getUIFontFamilyStyle(selectedUIFontFamily: string | undefined, fonts: WorkFont[] | undefined): string;
 /**
  * フォントがキャッシュに存在するかチェック
  */