@luna-editor/engine 0.2.0 → 0.3.1

package/dist/api/conversationBranch.d.ts

@@ -0,0 +1,4 @@
+import type { ConversationBranch } from "../types";
+export declare function fetchConversationBranch(blockId: string, apiBaseUrl: string): Promise<ConversationBranch>;
+export declare function clearBranchCache(): void;
+export declare function removeBranchFromCache(blockId: string, apiBaseUrl: string): void;

package/dist/api/conversationBranch.js

@@ -0,0 +1,83 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+const CACHE_TTL = 5 * 60 * 1000;
+const MAX_RETRIES = 3;
+const RETRY_DELAY_BASE = 1000;
+const REQUEST_TIMEOUT = 5000;
+const cache = new Map();
+function isCacheValid(entry) {
+    return Date.now() - entry.timestamp < CACHE_TTL;
+}
+function fetchWithTimeout(url, options, timeout) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), timeout);
+        try {
+            const response = yield fetch(url, Object.assign(Object.assign({}, options), { signal: controller.signal }));
+            clearTimeout(timeoutId);
+            return response;
+        }
+        catch (error) {
+            clearTimeout(timeoutId);
+            throw error;
+        }
+    });
+}
+function fetchWithRetry(url_1) {
+    return __awaiter(this, arguments, void 0, function* (url, retries = MAX_RETRIES) {
+        for (let i = 0; i < retries; i++) {
+            try {
+                const response = yield fetchWithTimeout(url, {}, REQUEST_TIMEOUT);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = yield response.json();
+                return data;
+            }
+            catch (error) {
+                if (i === retries - 1) {
+                    throw error;
+                }
+                const delay = RETRY_DELAY_BASE * Math.pow(2, i);
+                yield new Promise((resolve) => setTimeout(resolve, delay));
+            }
+        }
+        throw new Error("Max retries exceeded");
+    });
+}
+export function fetchConversationBranch(blockId, apiBaseUrl) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const cacheKey = `${apiBaseUrl}:${blockId}`;
+        const cached = cache.get(cacheKey);
+        if (cached && isCacheValid(cached)) {
+            return cached.data;
+        }
+        const url = `${apiBaseUrl}/api/player/conversation-branch/${blockId}`;
+        try {
+            const data = yield fetchWithRetry(url);
+            cache.set(cacheKey, {
+                data,
+                timestamp: Date.now(),
+            });
+            return data;
+        }
+        catch (error) {
+            console.error("[ConversationBranch API] Failed to fetch conversation branch:", error);
+            throw error;
+        }
+    });
+}
+export function clearBranchCache() {
+    cache.clear();
+}
+export function removeBranchFromCache(blockId, apiBaseUrl) {
+    const cacheKey = `${apiBaseUrl}:${blockId}`;
+    cache.delete(cacheKey);
+}

package/dist/components/BackgroundLayer.d.ts

@@ -0,0 +1,19 @@
+import type React from "react";
+import type { BackgroundData, BackgroundMediaType } from "../types";
+/**
+ * メディアタイプを拡張子から判定
+ */
+declare function getMediaType(url: string): BackgroundMediaType;
+interface BackgroundLayerProps {
+    className?: string;
+}
+/**
+ * 背景表示レイヤー
+ * DataContextからbackgroundデータを取得して表示
+ * 複数背景の重ね合わせ（backgrounds配列）に対応
+ * プラグインによって置き換え可能
+ * フェードイン・フェードアウト対応
+ */
+export declare const BackgroundLayer: React.FC<BackgroundLayerProps>;
+export { getMediaType };
+export type { BackgroundData };

package/dist/components/BackgroundLayer.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { useDataAPI } from "../contexts/DataContext";
+/**
+ * iOS/macOSかどうかを判定
+ * これらの環境ではmp4を使用し、それ以外ではwebmを使用
+ */
+function isApplePlatform() {
+    if (typeof window === "undefined")
+        return false;
+    const ua = navigator.userAgent;
+    const platform = navigator.platform;
+    // iOS判定
+    const isIOS = /iPad|iPhone|iPod/.test(ua) ||
+        (platform === "MacIntel" && navigator.maxTouchPoints > 1);
+    // macOS判定
+    const isMacOS = /Mac/.test(platform) && !isIOS;
+    return isIOS || isMacOS;
+}
+/**
+ * レイヤーに応じたz-indexを計算
+ * @param layer 表示レイヤー
+ * @param index 同一レイヤー内のインデックス
+ * @returns z-index値
+ */
+function getLayerZIndex(layer, index) {
+    switch (layer) {
+        case "background":
+            return 10 + index; // 10-99
+        case "above_character":
+            return 500 + index; // 500-599
+        case "above_dialogue":
+            return 2000 + index; // 2000-2099
+        case "above_all_ui":
+            return 9000 + index; // 9000-9098
+        default:
+            return 10 + index;
+    }
+}
+/**
+ * メディアタイプを拡張子から判定
+ */
+function getMediaType(url) {
+    var _a, _b;
+    const extension = (_b = (_a = url.split(".").pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase()) !== null && _b !== void 0 ? _b : "";
+    // Video formats
+    if (["mp4", "webm", "ogg", "mov", "avi", "mkv"].includes(extension)) {
+        return "video";
+    }
+    // GIF format
+    if (extension === "gif") {
+        return "gif";
+    }
+    // Image formats (default)
+    return "image";
+}
+/**
+ * 背景メディアコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
+ */
+const BackgroundMedia = memo(function BackgroundMedia({ background, opacity, zIndex, useAppleFormat }) {
+    var _a, _b;
+    // OS判定に基づいて使用するURLを決定
+    // iOS/macOS: mp4 (imageUrl)
+    // その他: webm (webmUrl) があればそちらを優先、なければ mp4
+    const videoUrl = useMemo(() => {
+        var _a;
+        if (useAppleFormat) {
+            // Apple環境ではmp4を使用
+            return background.imageUrl;
+        }
+        // それ以外ではwebmがあればwebm、なければmp4
+        return (_a = background.webmUrl) !== null && _a !== void 0 ? _a : background.imageUrl;
+    }, [background.imageUrl, background.webmUrl, useAppleFormat]);
+    const mediaType = getMediaType(background.imageUrl);
+    const objectFitClass = background.objectFit === "contain" ? "object-contain" : "object-cover";
+    // background.opacityと引数opacityを掛け合わせる
+    const finalOpacity = ((_a = background.opacity) !== null && _a !== void 0 ? _a : 1.0) * opacity;
+    // 高レイヤー（UIの上）の背景はposition: fixedにして、ポインターイベントを無効化
+    const layer = (_b = background.layer) !== null && _b !== void 0 ? _b : "background";
+    const isHighLayer = layer === "above_dialogue" || layer === "above_all_ui";
+    return (_jsx("div", { className: `${isHighLayer ? "fixed" : "absolute"} inset-0 overflow-hidden`, style: {
+            opacity: finalOpacity,
+            zIndex,
+            transition: "none", // requestAnimationFrameでアニメーション
+            pointerEvents: isHighLayer ? "none" : undefined,
+        }, "data-background-object-id": background.objectId, "data-background-state-id": background.stateId, "data-background-layer": layer, children: mediaType === "video" ? (_jsx("video", { src: videoUrl, className: `w-full h-full ${objectFitClass}`, autoPlay: true, muted: true, playsInline: true, loop: background.loop }, videoUrl)) : (_jsx("img", { src: background.imageUrl, alt: background.stateName, className: `w-full h-full ${objectFitClass}` }, background.imageUrl)) }));
+});
+/**
+ * 背景の配列が同じかどうかを比較
+ */
+function areBackgroundsEqual(a, b) {
+    if (a.length !== b.length)
+        return false;
+    for (let i = 0; i < a.length; i++) {
+        if (a[i].objectId !== b[i].objectId ||
+            a[i].stateId !== b[i].stateId ||
+            a[i].imageUrl !== b[i].imageUrl) {
+            return false;
+        }
+    }
+    return true;
+}
+/**
+ * 背景表示レイヤー
+ * DataContextからbackgroundデータを取得して表示
+ * 複数背景の重ね合わせ（backgrounds配列）に対応
+ * プラグインによって置き換え可能
+ * フェードイン・フェードアウト対応
+ */
+export const BackgroundLayer = memo(({ className }) => {
+    const dataAPI = useDataAPI();
+    // Apple環境かどうかを判定（iOS/macOSではmp4を使用）
+    const useAppleFormat = useMemo(() => isApplePlatform(), []);
+    // 複数背景を優先、なければ単一背景を使用
+    const backgrounds = dataAPI.get("backgrounds");
+    const singleBackground = dataAPI.get("background");
+    // 背景の配列を決定
+    const backgroundsToRender = backgrounds && backgrounds.length > 0
+        ? backgrounds
+        : (singleBackground === null || singleBackground === void 0 ? void 0 : singleBackground.imageUrl)
+            ? [singleBackground]
+            : [];
+    // フェード状態管理
+    const [fadeState, setFadeState] = useState({
+        previousBackgrounds: [],
+        currentBackgrounds: [],
+        fadeProgress: 1,
+        isFading: false,
+    });
+    // 現在の背景を追跡するref（useEffectの依存配列問題を回避）
+    const currentBackgroundsRef = useRef([]);
+    // アニメーションフレームID
+    const animationFrameRef = useRef(null);
+    const fadeStartTimeRef = useRef(0);
+    const fadeDurationRef = useRef(0);
+    // 背景変更を監視
+    useEffect(() => {
+        var _a, _b;
+        const newBackgrounds = backgroundsToRender;
+        const currentBgs = currentBackgroundsRef.current;
+        // 背景が変更されたかチェック
+        const hasChanged = !areBackgroundsEqual(newBackgrounds, currentBgs);
+        if (!hasChanged)
+            return;
+        // 前のアニメーションをキャンセル
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        // フェード時間を取得（最初の背景のfadeDurationを使用）
+        const fadeDuration = (_b = (_a = newBackgrounds[0]) === null || _a === void 0 ? void 0 : _a.fadeDuration) !== null && _b !== void 0 ? _b : 0;
+        if (fadeDuration > 0 && currentBgs.length > 0) {
+            // フェードありで背景変更
+            fadeStartTimeRef.current = performance.now();
+            fadeDurationRef.current = fadeDuration;
+            currentBackgroundsRef.current = newBackgrounds;
+            setFadeState({
+                previousBackgrounds: currentBgs,
+                currentBackgrounds: newBackgrounds,
+                fadeProgress: 0,
+                isFading: true,
+            });
+            // フェードアニメーション関数
+            const animate = (currentTime) => {
+                const elapsed = currentTime - fadeStartTimeRef.current;
+                const progress = Math.min(elapsed / fadeDurationRef.current, 1);
+                if (progress >= 1) {
+                    // フェード完了
+                    setFadeState((prev) => (Object.assign(Object.assign({}, prev), { fadeProgress: 1, isFading: false, previousBackgrounds: [] })));
+                    animationFrameRef.current = null;
+                }
+                else {
+                    setFadeState((prev) => (Object.assign(Object.assign({}, prev), { fadeProgress: progress })));
+                    animationFrameRef.current = requestAnimationFrame(animate);
+                }
+            };
+            // アニメーション開始
+            animationFrameRef.current = requestAnimationFrame(animate);
+        }
+        else {
+            // フェードなしで即座に変更
+            currentBackgroundsRef.current = newBackgrounds;
+            setFadeState({
+                previousBackgrounds: [],
+                currentBackgrounds: newBackgrounds,
+                fadeProgress: 1,
+                isFading: false,
+            });
+        }
+    }, [backgroundsToRender]);
+    // クリーンアップ
+    useEffect(() => {
+        return () => {
+            if (animationFrameRef.current) {
+                cancelAnimationFrame(animationFrameRef.current);
+            }
+        };
+    }, []);
+    // 背景データがない場合は黒背景を表示
+    if (fadeState.currentBackgrounds.length === 0 &&
+        fadeState.previousBackgrounds.length === 0) {
+        return (_jsx("div", { className: `absolute inset-0 bg-black ${className !== null && className !== void 0 ? className : ""}`, "data-background-layer": true }));
+    }
+    return (_jsxs("div", { className: `absolute inset-0 overflow-hidden ${className !== null && className !== void 0 ? className : ""}`, "data-background-layer": true, children: [_jsx("div", { className: "absolute inset-0 bg-black", style: { zIndex: 0 } }), fadeState.previousBackgrounds.length > 0 &&
+                fadeState.isFading &&
+                fadeState.previousBackgrounds.map((bg, index) => {
+                    var _a;
+                    const layer = (_a = bg.layer) !== null && _a !== void 0 ? _a : "background";
+                    const zIndex = getLayerZIndex(layer, index);
+                    return (_jsx(BackgroundMedia, { background: bg, opacity: 1 - fadeState.fadeProgress, zIndex: zIndex - 1, useAppleFormat: useAppleFormat }, `prev-${bg.objectId}-${bg.stateId}-${index}`));
+                }), fadeState.currentBackgrounds.map((bg, index) => {
+                var _a;
+                const layer = (_a = bg.layer) !== null && _a !== void 0 ? _a : "background";
+                const zIndex = getLayerZIndex(layer, index);
+                return (_jsx(BackgroundMedia, { background: bg, opacity: fadeState.isFading ? fadeState.fadeProgress : 1, zIndex: zIndex, useAppleFormat: useAppleFormat }, `curr-${bg.objectId}-${bg.stateId}-${index}`));
+            })] }));
+});
+export { getMediaType };

package/dist/components/ClickWaitIndicator.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+interface ClickWaitIndicatorProps {
+    className?: string;
+}
+/**
+ * クリック待ちインジケーター
+ * click_waitブロックで表示され、ユーザーにクリックを促すアニメーションを表示
+ */
+export declare const ClickWaitIndicator: React.FC<ClickWaitIndicatorProps>;
+export {};

package/dist/components/ClickWaitIndicator.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * クリック待ちインジケーター
+ * click_waitブロックで表示され、ユーザーにクリックを促すアニメーションを表示
+ */
+export const ClickWaitIndicator = ({ className, }) => {
+    return (_jsxs("div", { className: className, style: {
+            position: "absolute",
+            bottom: "32px",
+            right: "32px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none",
+        }, children: [_jsx("div", { style: {
+                    width: 0,
+                    height: 0,
+                    borderLeft: "8px solid transparent",
+                    borderRight: "8px solid transparent",
+                    borderTop: "12px solid white",
+                    opacity: 0.8,
+                    animation: "clickWaitBlink 1s ease-in-out infinite",
+                    filter: "drop-shadow(0 0 4px rgba(0, 0, 0, 0.5))",
+                } }), _jsx("style", { children: `
+          @keyframes clickWaitBlink {
+            0%, 100% { opacity: 0.4; }
+            50% { opacity: 1; }
+          }
+        ` })] }));
+};

package/dist/components/ConversationBranchBox.d.ts

@@ -0,0 +1,2 @@
+import type React from "react";
+export declare const ConversationBranchBox: React.FC;

package/dist/components/ConversationBranchBox.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useDataAPI } from "../contexts/DataContext";
+export const ConversationBranchBox = () => {
+    const dataAPI = useDataAPI();
+    const branchData = dataAPI.get("branchData");
+    const handleChoiceClick = useCallback((choiceId) => {
+        var _a;
+        if ((_a = window.playerAPI) === null || _a === void 0 ? void 0 : _a.selectChoice) {
+            window.playerAPI.selectChoice(choiceId);
+        }
+    }, []);
+    if (!branchData) {
+        return null;
+    }
+    if (branchData.errorState) {
+        return (_jsx("div", { className: "absolute bottom-[5%] max-w-[60%] mx-auto min-h-[25%] left-0 right-0 bg-red-50 border-4 rounded-xl border-red-800 z-10 pointer-events-auto p-6", style: { zIndex: 1000 }, "data-branch-element": true, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-center mb-4", children: _jsx("span", { className: "font-bold text-xl text-red-900", children: "\u30A8\u30E9\u30FC\u304C\u767A\u751F\u3057\u307E\u3057\u305F" }) }), _jsxs("div", { className: "text-center text-red-800", children: [_jsx("p", { className: "mb-4", children: "\u9078\u629E\u80A2\u30C7\u30FC\u30BF\u306E\u8AAD\u307F\u8FBC\u307F\u306B\u5931\u6557\u3057\u307E\u3057\u305F" }), _jsx("p", { className: "text-sm", children: "\u30AF\u30EA\u30C3\u30AF\u3057\u3066\u6B21\u306B\u9032\u3080" })] })] }) }));
+    }
+    if (!branchData.isActive || branchData.currentChoices.length === 0) {
+        return null;
+    }
+    // 変数分岐の場合は選択肢UIを表示しない
+    if (branchData.branchType === "variable") {
+        return null;
+    }
+    return (_jsx("div", { className: "absolute bottom-[5%] max-w-[60%] mx-auto min-h-[25%] left-0 right-0 bg-amber-50 border-4 rounded-xl border-amber-800 z-10 pointer-events-auto p-6", style: { zIndex: 1000 }, "data-branch-element": true, children: _jsxs("div", { className: "space-y-4", children: [_jsx("div", { className: "text-center mb-4", children: _jsx("span", { className: "font-bold text-xl text-amber-900", children: "\u9078\u629E\u3057\u3066\u304F\u3060\u3055\u3044" }) }), _jsx("div", { className: "space-y-3", children: branchData.currentChoices.map((choice) => (_jsx("button", { type: "button", onClick: () => handleChoiceClick(choice.id), disabled: choice.isDisabled, className: `w-full p-4 text-lg text-left rounded-lg border-2 transition-all ${choice.isDisabled
+                            ? "bg-gray-200 text-gray-400 border-gray-300 cursor-not-allowed"
+                            : "bg-white text-amber-900 border-amber-700 hover:bg-amber-100 hover:border-amber-900 hover:shadow-lg active:scale-98 cursor-pointer"}`, "data-choice-button": true, "data-choice-id": choice.id, children: choice.text }, choice.id))) })] }) }));
+};

package/dist/components/DialogueBox.js

@@ -1,14 +1,29 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { useDataAPI } from "../contexts/DataContext";
+import { getFontFamilyStyle } from "../hooks/useFontLoader";
 export const DialogueBox = () => {
     var _a, _b;
     const dataAPI = useDataAPI();
     const currentBlock = dataAPI.get("playback", "currentBlock");
     const content = dataAPI.get("playback", "displayText") || "";
     const displayedCharacters = dataAPI.get("playback", "displayedCharacters") || [];
+    const fontsData = dataAPI.get("fonts");
+    // フォントスタイルを計算
+    const fontFamilyStyle = useMemo(() => {
+        return getFontFamilyStyle(fontsData === null || fontsData === void 0 ? void 0 : fontsData.selectedFontFamily, fontsData === null || fontsData === void 0 ? void 0 : fontsData.fonts);
+    }, [fontsData === null || fontsData === void 0 ? void 0 : fontsData.selectedFontFamily, fontsData === null || fontsData === void 0 ? void 0 : fontsData.fonts]);
     if (!currentBlock) {
         return null;
     }
+    // fullscreen_text ブロックでは DialogueBox を表示しない
+    if (currentBlock.blockType === "fullscreen_text") {
+        return null;
+    }
+    // テキストがない場合は表示しない
+    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;
     // 話者の位置を特定
@@ -24,5 +39,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", children: _jsx("p", { children: content }) }), _jsx("div", { className: "flex justify-end", children: _jsx("div", { className: "text-white/60 text-sm animate-pulse", children: "\u25BC" }) })] }) }));
+    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" }) })] }) }));
 };

package/dist/components/FontSettingsPanel.d.ts

@@ -0,0 +1,10 @@
+import type React from "react";
+interface FontSettingsPanelProps {
+    onClose?: () => void;
+}
+/**
+ * フォント設定パネル
+ * プレイヤー内でフォントを選択するためのUI
+ */
+export declare const FontSettingsPanel: React.FC<FontSettingsPanelProps>;
+export {};

package/dist/components/FontSettingsPanel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDataAPI } from "../contexts/DataContext";
+/**
+ * フォント設定パネル
+ * プレイヤー内でフォントを選択するためのUI
+ */
+export const FontSettingsPanel = ({ onClose, }) => {
+    var _a;
+    const dataAPI = useDataAPI();
+    const fontsData = dataAPI.get("fonts");
+    const fonts = (_a = fontsData === null || fontsData === void 0 ? void 0 : fontsData.fonts) !== null && _a !== void 0 ? _a : [];
+    const selectedFontFamily = fontsData === null || fontsData === void 0 ? void 0 : fontsData.selectedFontFamily;
+    // フォントが設定されていない場合
+    if (fonts.length === 0) {
+        return null;
+    }
+    const handleFontChange = (fontFamily) => {
+        dataAPI.updateSettings({ selectedFontFamily: fontFamily });
+    };
+    // デフォルトフォント（最初のフォント）
+    const defaultFont = fonts[0];
+    const currentFontFamily = selectedFontFamily || (defaultFont === null || defaultFont === void 0 ? void 0 : defaultFont.fontFamily);
+    return (_jsx("div", { className: "absolute inset-0 bg-black/70 flex items-center justify-center z-[1100] pointer-events-auto", onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }
+        }, children: _jsxs("div", { className: "bg-white rounded-lg p-6 min-w-[300px] max-w-[400px] max-h-[80%] overflow-y-auto", children: [_jsxs("div", { className: "flex justify-between items-center mb-4", children: [_jsx("h3", { className: "text-lg font-bold text-gray-900", children: "\u30D5\u30A9\u30F3\u30C8\u8A2D\u5B9A" }), onClose && (_jsx("button", { type: "button", onClick: onClose, className: "text-gray-500 hover:text-gray-700 text-2xl leading-none", children: "\u00D7" }))] }), _jsx("div", { className: "space-y-2", children: fonts.map((font, index) => (_jsxs("button", { type: "button", onClick: () => handleFontChange(font.fontFamily), className: `w-full text-left p-3 rounded-lg border transition-colors ${currentFontFamily === font.fontFamily
+                            ? "border-blue-500 bg-blue-50"
+                            : "border-gray-200 hover:border-gray-300 hover:bg-gray-50"}`, style: { fontFamily: `"${font.fontFamily}", sans-serif` }, children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-gray-900", children: font.name }), _jsxs("div", { className: "flex items-center gap-2", children: [index === 0 && (_jsx("span", { className: "text-xs bg-gray-200 text-gray-600 px-2 py-0.5 rounded", children: "\u30C7\u30D5\u30A9\u30EB\u30C8" })), currentFontFamily === font.fontFamily && (_jsx("span", { className: "text-blue-500", children: "\u2713" }))] })] }), _jsx("p", { className: "text-sm text-gray-500 mt-1", style: { fontFamily: `"${font.fontFamily}", sans-serif` }, children: "\u3042\u3044\u3046\u3048\u304A \u304B\u304D\u304F\u3051\u3053 1234567890" })] }, font.id))) })] }) }));
+};

package/dist/components/FullscreenTextBox.d.ts

@@ -0,0 +1,6 @@
+import type React from "react";
+interface FullscreenTextBoxProps {
+    onComplete?: () => void;
+}
+export declare const FullscreenTextBox: React.FC<FullscreenTextBoxProps>;
+export {};

package/dist/components/FullscreenTextBox.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { useDataAPI } from "../contexts/DataContext";
+import { getFontFamilyStyle } from "../hooks/useFontLoader";
+import { useFullscreenText } from "../hooks/useFullscreenText";
+export const FullscreenTextBox = ({ onComplete, }) => {
+    var _a;
+    const dataAPI = useDataAPI();
+    const currentBlock = dataAPI.get("playback", "currentBlock");
+    const settings = dataAPI.get("settings");
+    const fontsData = dataAPI.get("fonts");
+    // フォントスタイルを計算
+    const fontFamilyStyle = useMemo(() => {
+        return getFontFamilyStyle(fontsData === null || fontsData === void 0 ? void 0 : fontsData.selectedFontFamily, fontsData === null || fontsData === void 0 ? void 0 : fontsData.fonts);
+    }, [fontsData === null || fontsData === void 0 ? void 0 : fontsData.selectedFontFamily, fontsData === null || fontsData === void 0 ? void 0 : fontsData.fonts]);
+    const { paragraphs, currentParagraphIndex, displayText, isTyping, isComplete, advanceParagraph, } = useFullscreenText(currentBlock !== null && currentBlock !== void 0 ? currentBlock : null, {
+        textSpeed: (_a = settings === null || settings === void 0 ? void 0 : settings.textSpeed) !== null && _a !== void 0 ? _a : 80,
+        onAllComplete: onComplete,
+    });
+    // Get textAlign option from block options (default: center)
+    const textAlign = useMemo(() => {
+        var _a;
+        const options = currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.options;
+        return (_a = options === null || options === void 0 ? void 0 : options.textAlign) !== null && _a !== void 0 ? _a : "center";
+    }, [currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.options]);
+    const handleClick = useCallback((e) => {
+        e.stopPropagation();
+        const advanced = advanceParagraph();
+        if (!advanced && isComplete) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete();
+        }
+    }, [advanceParagraph, isComplete, onComplete]);
+    if (!currentBlock || currentBlock.blockType !== "fullscreen_text") {
+        return null;
+    }
+    if (paragraphs.length === 0) {
+        return null;
+    }
+    // Determine alignment classes based on textAlign option
+    const alignmentClass = textAlign === "top" ? "items-start pt-[5%]" : "items-center";
+    return (_jsx("div", { className: `absolute inset-0 flex ${alignmentClass} justify-center z-[999] pointer-events-auto cursor-pointer`, onClick: handleClick, "data-fullscreen-text-element": true, "data-text-align": textAlign, style: {
+            backgroundColor: "rgba(0, 0, 0, 0.7)",
+            // コンテナクエリのコンテキストを設定
+            containerType: "size",
+        }, children: _jsxs("div", { className: "w-[80%] max-h-[80%] overflow-y-auto p-[3%]", "data-fullscreen-text-container": true, children: [paragraphs.map((paragraph, index) => {
+                    const state = index < currentParagraphIndex
+                        ? "read"
+                        : index === currentParagraphIndex
+                            ? "current"
+                            : "pending";
+                    return (_jsx("p", { className: "leading-relaxed transition-opacity duration-300", "data-paragraph-index": index, "data-paragraph-state": state, style: {
+                            fontFamily: fontFamilyStyle,
+                            // コンテナの高さに対して相対的なフォントサイズ
+                            // フルスクリーンテキストは目立つように大きめ（約3.5%）
+                            fontSize: "3.5cqh",
+                            marginBottom: "3cqh",
+                            color: state === "read"
+                                ? "rgba(255, 255, 255, 0.4)"
+                                : state === "current"
+                                    ? "rgba(255, 255, 255, 1)"
+                                    : "rgba(255, 255, 255, 0)",
+                            textShadow: state === "current" ? "0 2px 4px rgba(0, 0, 0, 0.5)" : "none",
+                        }, children: index === currentParagraphIndex ? displayText : paragraph }, index));
+                }), _jsxs("div", { className: "absolute", style: {
+                        bottom: "2cqh",
+                        right: "2cqh",
+                        fontSize: "2cqh",
+                        color: "rgba(255, 255, 255, 0.6)",
+                    }, "data-fullscreen-text-progress": true, children: [currentParagraphIndex + 1, " / ", paragraphs.length, isTyping && (_jsx("span", { className: "ml-2 animate-pulse", style: { fontSize: "1.2em" }, children: "|" })), !isTyping && (_jsx("span", { className: "ml-2 animate-bounce inline-block", children: isComplete ? "" : "v" }))] })] }) }));
+};

package/dist/components/GameScreen.d.ts

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