@luna-editor/engine 0.1.0

package/dist/Player.d.ts

@@ -0,0 +1,3 @@
+import type React from "react";
+import type { PlayerProps } from "./types";
+export declare const Player: React.FC<PlayerProps>;

package/dist/Player.js

@@ -0,0 +1,336 @@
+"use client";
+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());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useScreenSizeAtom } from "./atoms/screen-size";
+import { DialogueBox } from "./components/DialogueBox";
+import { EndScreen } from "./components/EndScreen";
+import { GameScreen } from "./components/GameScreen";
+import { OverlayUI } from "./components/OverlayUI";
+import { PluginComponentProvider } from "./components/PluginComponentProvider";
+import { DataProvider } from "./contexts/DataContext";
+import { useBacklog } from "./hooks/useBacklog";
+import { usePlayerLogic } from "./hooks/usePlayerLogic";
+import { setGlobalUIAPI } from "./hooks/usePluginAPI";
+import { usePluginEvents } from "./hooks/usePluginEvents";
+import { usePreloadImages } from "./hooks/usePreloadImages";
+import { useTypewriter } from "./hooks/useTypewriter";
+import { PluginManager } from "./plugin/PluginManager";
+import { ComponentType } from "./sdk";
+export const Player = ({ scenario, settings, plugins = [], onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, className, autoplay = false, }) => {
+    var _a;
+    const pluginManagerRef = useRef(new PluginManager());
+    // グローバルUIAPIを初期化（プラグインコンポーネントから使用可能にする）
+    useEffect(() => {
+        const uiAPI = pluginManagerRef.current.getUIAPI();
+        setGlobalUIAPI(uiAPI, pluginManagerRef.current);
+    }, []);
+    // 画面サイズの初期化
+    const [, setScreenSize] = useScreenSizeAtom();
+    useEffect(() => {
+        // クライアントサイドでのみ実行
+        if (typeof window === "undefined")
+            return;
+        setScreenSize({ width: window.innerWidth, height: window.innerHeight });
+        // リサイズ監視
+        const handleResize = () => {
+            setScreenSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        };
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+    }, [setScreenSize]);
+    // 表示可能なブロックのインデックスを事前計算
+    const displayableBlockIndices = useMemo(() => {
+        const supportedBlockTypes = ["dialogue", "narration"];
+        return scenario.blocks
+            .map((block, index) => ({ block, index }))
+            .filter(({ block }) => supportedBlockTypes.includes(block.blockType))
+            .map(({ index }) => index);
+    }, [scenario.blocks]);
+    const [state, setState] = useState({
+        currentBlockIndex: 0,
+        isPlaying: autoplay,
+        isEnded: false,
+    });
+    // 画像を事前読み込み
+    const imagesLoaded = usePreloadImages(scenario);
+    // プラグインの読み込み状態
+    const [pluginsLoaded, setPluginsLoaded] = useState(false);
+    // プラグインの読み込み
+    useEffect(() => {
+        const loadPlugins = () => __awaiter(void 0, void 0, void 0, function* () {
+            console.log("Loading plugins:", plugins);
+            setPluginsLoaded(false);
+            for (const plugin of plugins) {
+                console.log("Loading plugin:", plugin.packageName);
+                yield pluginManagerRef.current.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
+            }
+            // プラグイン初期化フック - すべてのプラグインの読み込み完了後に実行
+            console.log("Calling onInit hook");
+            pluginManagerRef.current.callHook("onInit");
+            // DialogueBoxの初期状態を表示に設定
+            pluginManagerRef.current.showUI(ComponentType.DialogueBox);
+            setPluginsLoaded(true);
+            console.log("All plugins loaded successfully");
+        });
+        loadPlugins();
+        return () => {
+            const manager = pluginManagerRef.current;
+            manager.cleanup();
+        };
+    }, [plugins]);
+    // 初回レンダリング完了フラグ
+    const [isFirstRenderComplete, setIsFirstRenderComplete] = useState(false);
+    // シナリオ開始コールバック（後でcurrentBlockが定義された後に実行）
+    const [hasStarted, setHasStarted] = useState(false);
+    // スタイル要素の登録
+    useEffect(() => {
+        if (isFirstRenderComplete) {
+            // DOM要素の登録
+            const speakerNameElement = document.querySelector("[data-speaker-name-element]");
+            const dialogueElement = document.querySelector("[data-dialogue-element]");
+            // data-character-id属性を持つ最初のキャラクター要素を取得
+            const characterSpriteElement = document.querySelector("[data-character-id]");
+            const gameScreenElement = document.querySelector(".h-screen.w-full");
+            console.log("🔍 [StyleAPI] Element registration:", {
+                speakerNameElement: !!speakerNameElement,
+                dialogueElement: !!dialogueElement,
+                characterSpriteElement: !!characterSpriteElement,
+                gameScreenElement: !!gameScreenElement,
+            });
+            if (speakerNameElement) {
+                pluginManagerRef.current.registerStyleElement("speakerName", speakerNameElement);
+            }
+            if (dialogueElement) {
+                pluginManagerRef.current.registerStyleElement("dialogueBox", dialogueElement);
+                pluginManagerRef.current.registerStyleElement("scenarioBlockContent", dialogueElement);
+            }
+            if (characterSpriteElement) {
+                pluginManagerRef.current.registerStyleElement("characterSprite", characterSpriteElement);
+            }
+            if (gameScreenElement) {
+                pluginManagerRef.current.registerStyleElement("gameScreen", gameScreenElement);
+                pluginManagerRef.current.registerStyleElement("background", gameScreenElement);
+            }
+        }
+    }, [isFirstRenderComplete]);
+    const { displayText, isTyping, skipTyping, startTyping } = useTypewriter({
+        speed: 80,
+    });
+    // 現在の表示可能なブロックを取得
+    const currentBlock = displayableBlockIndices[state.currentBlockIndex] !== undefined
+        ? scenario.blocks[displayableBlockIndices[state.currentBlockIndex]]
+        : undefined;
+    // usePlayerLogicに渡す実際のブロックインデックス
+    const actualBlockIndex = (_a = displayableBlockIndices[state.currentBlockIndex]) !== null && _a !== void 0 ? _a : 0;
+    // バックログ機能
+    const backlog = useBacklog({
+        scenario,
+        currentBlockIndex: actualBlockIndex,
+        currentBlock: currentBlock || null,
+    });
+    // ダイアログ表示とアクションノード実行のuseEffectを分離
+    useEffect(() => {
+        if (currentBlock) {
+            startTyping(currentBlock.content || "");
+        }
+    }, [currentBlock, startTyping]);
+    // 画像読み込み完了後、GameScreenがマウントされてから表示する
+    useEffect(() => {
+        if (imagesLoaded && currentBlock && !isFirstRenderComplete) {
+            // requestAnimationFrameを使用してレンダリング完了を待つ
+            requestAnimationFrame(() => {
+                setIsFirstRenderComplete(true);
+            });
+        }
+    }, [imagesLoaded, currentBlock, isFirstRenderComplete]);
+    // シナリオ開始コールバック（currentBlock定義後）
+    useEffect(() => {
+        if (isFirstRenderComplete && !hasStarted && currentBlock) {
+            setHasStarted(true);
+            onScenarioStart === null || onScenarioStart === void 0 ? void 0 : onScenarioStart();
+        }
+    }, [isFirstRenderComplete, hasStarted, currentBlock, onScenarioStart]);
+    const { handleNext: handleNextInternal, handlePrevious: handlePreviousInternal, togglePlay, // eslint-disable-line @typescript-eslint/no-unused-vars
+    restart: restartInternal, displayedCharacters, } = usePlayerLogic({
+        state: Object.assign(Object.assign({}, state), { currentBlockIndex: actualBlockIndex }),
+        setState: (newState) => {
+            if (typeof newState === "function") {
+                setState((prev) => {
+                    var _a;
+                    const updated = newState(Object.assign(Object.assign({}, prev), { currentBlockIndex: (_a = displayableBlockIndices[prev.currentBlockIndex]) !== null && _a !== void 0 ? _a : 0 }));
+                    // 実際のインデックスから表示可能インデックスに変換
+                    const nextDisplayableIndex = displayableBlockIndices.findIndex((idx) => idx >= updated.currentBlockIndex);
+                    return Object.assign(Object.assign({}, updated), { currentBlockIndex: nextDisplayableIndex !== -1
+                            ? nextDisplayableIndex
+                            : prev.currentBlockIndex });
+                });
+            }
+            else {
+                // 直接オブジェクトが渡された場合（restart時など）
+                setState(newState);
+            }
+        },
+        scenario,
+        isTyping,
+        currentBlock: currentBlock !== null && currentBlock !== void 0 ? currentBlock : scenario.blocks[0],
+        skipTyping,
+        onEnd,
+        onScenarioEnd,
+        autoplay,
+    });
+    // プラグインイベント処理
+    const realBlockIndex = currentBlock
+        ? scenario.blocks.indexOf(currentBlock)
+        : 0;
+    usePluginEvents({
+        pluginManager: pluginManagerRef.current,
+        currentBlock,
+        displayedCharacters,
+        blockIndex: state.currentBlockIndex,
+        isFirstRenderComplete,
+        allBlocks: scenario.blocks,
+        realBlockIndex,
+        pluginsLoaded,
+    });
+    // 初期履歴構築（シナリオ開始時）
+    useEffect(() => {
+        if (isFirstRenderComplete && actualBlockIndex >= 0) {
+            backlog.buildInitialHistory(actualBlockIndex);
+        }
+    }, [isFirstRenderComplete, actualBlockIndex, backlog]);
+    // ハンドラーをラップして表示可能インデックスで動作するように
+    const handleNext = useCallback(() => {
+        if (state.currentBlockIndex < displayableBlockIndices.length - 1) {
+            handleNextInternal();
+        }
+        else {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { isEnded: true, isPlaying: false })));
+            onEnd === null || onEnd === void 0 ? void 0 : onEnd();
+            onScenarioEnd === null || onScenarioEnd === void 0 ? void 0 : onScenarioEnd();
+        }
+    }, [
+        state.currentBlockIndex,
+        displayableBlockIndices.length,
+        handleNextInternal,
+        onEnd,
+        onScenarioEnd,
+    ]);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handlePrevious = useCallback(() => {
+        if (state.currentBlockIndex > 0) {
+            handlePreviousInternal();
+        }
+    }, [state.currentBlockIndex, handlePreviousInternal]);
+    // restartをラップして、firstRenderCompleteもリセット
+    const restart = useCallback(() => {
+        // リスタート時はシナリオがキャンセルされたとみなす
+        if (hasStarted && !state.isEnded) {
+            onScenarioCancelled === null || onScenarioCancelled === void 0 ? void 0 : onScenarioCancelled();
+        }
+        setIsFirstRenderComplete(false);
+        setHasStarted(false);
+        restartInternal();
+    }, [hasStarted, state.isEnded, onScenarioCancelled, restartInternal]);
+    // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
+    const dataContext = useMemo(() => {
+        var _a, _b;
+        return ({
+            playback: {
+                currentBlockIndex: actualBlockIndex,
+                totalBlocks: scenario.blocks.length,
+                scenarioId: scenario.id,
+                scenarioName: scenario.name,
+                currentBlock: currentBlock || null,
+                displayText,
+                isTyping,
+                displayedCharacters,
+            },
+            backlog: {
+                entries: backlog.logs,
+                totalEntries: backlog.logs.length,
+                addLogEntry: backlog.addLogEntry,
+                clearLogs: backlog.clearLogs,
+            },
+            settings: {
+                aspectRatio: (_a = settings === null || settings === void 0 ? void 0 : settings.aspectRatio) !== null && _a !== void 0 ? _a : "16:9",
+                bgObjectFit: (_b = settings === null || settings === void 0 ? void 0 : settings.bgObjectFit) !== null && _b !== void 0 ? _b : "contain",
+                textSpeed: 5,
+                autoPlaySpeed: 3,
+                bgmVolume: 0.8,
+                seVolume: 1.0,
+                voiceVolume: 1.0,
+                skipMode: "unread",
+            },
+            pluginAssets: {
+                getAssetUrl: (pluginName, filename) => {
+                    return pluginManagerRef.current.getPluginAssetUrl(pluginName, filename);
+                },
+            },
+        });
+    }, [
+        actualBlockIndex,
+        scenario,
+        currentBlock,
+        displayText,
+        isTyping,
+        displayedCharacters,
+        backlog,
+        settings,
+    ]);
+    // マウスホイールとタッチジェスチャーを無効化
+    useEffect(() => {
+        const handleWheel = (e) => {
+            e.preventDefault();
+        };
+        const handleTouchMove = (e) => {
+            if (e.touches.length > 1) {
+                e.preventDefault();
+            }
+        };
+        const handleGestureStart = (e) => {
+            e.preventDefault();
+        };
+        // イベントリスナーを追加
+        document.addEventListener("wheel", handleWheel, { passive: false });
+        document.addEventListener("touchmove", handleTouchMove, { passive: false });
+        document.addEventListener("gesturestart", handleGestureStart);
+        return () => {
+            document.removeEventListener("wheel", handleWheel);
+            document.removeEventListener("touchmove", handleTouchMove);
+            document.removeEventListener("gesturestart", handleGestureStart);
+        };
+    }, []);
+    // アスペクト比を計算
+    const getAspectRatio = () => {
+        if (!(settings === null || settings === void 0 ? void 0 : settings.aspectRatio))
+            return "16/9";
+        const [width, height] = settings.aspectRatio.split(":").map(Number);
+        return `${width}/${height}`;
+    };
+    // 条件付きレンダリングを JSX で処理（フックの後、early return なし）
+    return (_jsxs(_Fragment, { children: [!currentBlock && !state.isEnded && (_jsx("div", { className: clsx("flex items-center justify-center p-8", className), children: _jsx("p", { className: "text-gray-500", children: "\u30B7\u30CA\u30EA\u30AA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093" }) })), state.isEnded && (_jsx(EndScreen, { scenarioName: scenario.name, onRestart: restart, className: className })), currentBlock && !state.isEnded && (_jsxs(_Fragment, { children: [(!imagesLoaded || !isFirstRenderComplete) && (_jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center z-50", className), style: {
+                            touchAction: "none",
+                            userSelect: "none",
+                            WebkitUserSelect: "none",
+                        } })), _jsx("div", { className: clsx("luna-player fixed inset-0 bg-black overflow-hidden flex items-center justify-center", className, (!imagesLoaded || !isFirstRenderComplete) && "opacity-0"), onClick: handleNext, style: {
+                            touchAction: "none",
+                            userSelect: "none",
+                            WebkitUserSelect: "none",
+                        }, children: _jsx("div", { className: "relative bg-white flex flex-col w-full overflow-hidden h-full", style: { aspectRatio: getAspectRatio() }, children: _jsxs(DataProvider, { data: dataContext, children: [_jsx("div", { className: "h-full", children: _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, displayedCharacters: displayedCharacters }) }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManagerRef.current, fallback: DialogueBox }), pluginManagerRef.current
+                                                    .getRegisteredComponents()
+                                                    .filter((type) => type !== ComponentType.DialogueBox) // DialogueBoxは既に上でレンダリング済み
+                                                    .map((componentType) => (_jsx(PluginComponentProvider, { type: componentType, pluginManager: pluginManagerRef.current }, componentType)))] }) })] }) }) })] }))] }));
+};

package/dist/atoms/screen-size.d.ts

@@ -0,0 +1,22 @@
+export declare const screenSizeAtom: import("jotai").PrimitiveAtom<{
+    width: number;
+    height: number;
+}> & {
+    init: {
+        width: number;
+        height: number;
+    };
+};
+export declare const useScreenSizeAtom: () => [{
+    width: number;
+    height: number;
+}, (args_0: {
+    width: number;
+    height: number;
+} | ((prev: {
+    width: number;
+    height: number;
+}) => {
+    width: number;
+    height: number;
+})) => void];

package/dist/atoms/screen-size.js

@@ -0,0 +1,8 @@
+import { atom, useAtom } from "jotai";
+export const screenSizeAtom = atom({
+    width: 0,
+    height: 0,
+});
+export const useScreenSizeAtom = () => {
+    return useAtom(screenSizeAtom);
+};

package/dist/components/BacklogUI.d.ts

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

package/dist/components/BacklogUI.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useDataAPI } from "../contexts/DataContext";
+export const BacklogUI = () => {
+    const dataAPI = useDataAPI();
+    const logs = dataAPI.get("backlog", "entries");
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const openDialog = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsDialogOpen(true);
+    }, []);
+    const closeDialog = useCallback((e) => {
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        setIsDialogOpen(false);
+    }, []);
+    const handleDialogBackdropClick = useCallback((e) => {
+        if (e.target === e.currentTarget) {
+            closeDialog();
+        }
+    }, [closeDialog]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: openDialog, style: {
+                    position: "fixed",
+                    top: "20px",
+                    right: "20px",
+                    width: "50px",
+                    height: "50px",
+                    background: "rgba(74, 144, 226, 0.9)",
+                    border: "none",
+                    borderRadius: "25px",
+                    color: "white",
+                    fontSize: "20px",
+                    cursor: "pointer",
+                    zIndex: 1000,
+                    boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
+                    transition: "all 0.3s ease",
+                }, onMouseOver: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.style.background = "rgba(74, 144, 226, 1)";
+                    e.currentTarget.style.transform = "scale(1.1)";
+                }, onMouseOut: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.style.background = "rgba(74, 144, 226, 0.9)";
+                    e.currentTarget.style.transform = "scale(1)";
+                }, title: "\u4F1A\u8A71\u30ED\u30B0\u3092\u8868\u793A", children: "\uD83D\uDCDA" }), isDialogOpen && (_jsx("div", { style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    zIndex: 10000,
+                }, onClick: handleDialogBackdropClick, children: _jsxs("div", { style: {
+                        width: "80vw",
+                        maxWidth: "800px",
+                        maxHeight: "80vh",
+                        background: "rgba(0, 0, 0, 0.9)",
+                        border: "1px solid #333",
+                        borderRadius: "8px",
+                        padding: "20px",
+                        color: "white",
+                        fontFamily: "sans-serif",
+                        boxShadow: "0 4px 20px rgba(0,0,0,0.5)",
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                marginBottom: "16px",
+                                borderBottom: "1px solid #333",
+                                paddingBottom: "12px",
+                            }, children: [_jsx("h3", { style: {
+                                        margin: 0,
+                                        fontSize: "1.2em",
+                                        color: "#4A90E2",
+                                    }, children: "\uD83D\uDCDA \u4F1A\u8A71\u30ED\u30B0" }), _jsx("button", { type: "button", onClick: closeDialog, style: {
+                                        background: "#666",
+                                        border: "none",
+                                        color: "white",
+                                        padding: "6px 12px",
+                                        borderRadius: "4px",
+                                        cursor: "pointer",
+                                    }, children: "\u2715 \u9589\u3058\u308B" })] }), _jsx("div", { style: {
+                                maxHeight: "60vh",
+                                overflowY: "auto",
+                                marginBottom: "16px",
+                                scrollbarWidth: "thin",
+                                scrollbarColor: "#666 transparent",
+                            }, children: logs.length > 0 ? (logs.map((log) => (_jsxs("div", { style: {
+                                    marginBottom: "12px",
+                                    padding: "12px",
+                                    background: "rgba(255,255,255,0.1)",
+                                    borderRadius: "4px",
+                                    borderLeft: "3px solid #4A90E2",
+                                }, children: [_jsx("div", { style: {
+                                            marginBottom: "6px",
+                                            fontSize: "1em",
+                                        }, children: log.speakerName ? (_jsx("strong", { children: log.speakerName })) : (_jsx("em", { children: "\u30CA\u30EC\u30FC\u30B7\u30E7\u30F3" })) }), _jsx("div", { style: {
+                                            fontSize: "1em",
+                                            lineHeight: "1.5",
+                                        }, children: log.content || "(内容なし)" })] }, log.id)))) : (_jsx("div", { style: {
+                                    textAlign: "center",
+                                    color: "#888",
+                                    padding: "20px",
+                                }, children: "\u307E\u3060\u4F1A\u8A71\u30ED\u30B0\u304C\u3042\u308A\u307E\u305B\u3093" })) }), _jsxs("div", { style: {
+                                textAlign: "center",
+                                fontSize: "0.8em",
+                                color: "#888",
+                            }, children: [logs.length, "\u4EF6\u306E\u4F1A\u8A71\u3092\u8868\u793A\u4E2D"] })] }) }))] }));
+};

package/dist/components/ConversationLogUI.d.ts

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

package/dist/components/ConversationLogUI.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import { useDataAPI } from "../contexts/DataContext";
+export const ConversationLogUI = () => {
+    const dataAPI = useDataAPI();
+    const logs = dataAPI.get("conversationLog", "entries");
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const openDialog = useCallback((e) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setIsDialogOpen(true);
+    }, []);
+    const closeDialog = useCallback((e) => {
+        if (e) {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+        setIsDialogOpen(false);
+    }, []);
+    const handleDialogBackdropClick = useCallback((e) => {
+        if (e.target === e.currentTarget) {
+            closeDialog();
+        }
+    }, [closeDialog]);
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: openDialog, style: {
+                    position: "fixed",
+                    top: "20px",
+                    right: "20px",
+                    width: "50px",
+                    height: "50px",
+                    background: "rgba(74, 144, 226, 0.9)",
+                    border: "none",
+                    borderRadius: "25px",
+                    color: "white",
+                    fontSize: "20px",
+                    cursor: "pointer",
+                    zIndex: 1000,
+                    boxShadow: "0 2px 10px rgba(0,0,0,0.3)",
+                    transition: "all 0.3s ease",
+                }, onMouseOver: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.style.background = "rgba(74, 144, 226, 1)";
+                    e.currentTarget.style.transform = "scale(1.1)";
+                }, onMouseOut: (e) => {
+                    e.stopPropagation();
+                    e.currentTarget.style.background = "rgba(74, 144, 226, 0.9)";
+                    e.currentTarget.style.transform = "scale(1)";
+                }, title: "\u4F1A\u8A71\u30ED\u30B0\u3092\u8868\u793A", children: "\uD83D\uDCDA" }), isDialogOpen && (_jsx("div", { style: {
+                    position: "fixed",
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    backgroundColor: "rgba(0, 0, 0, 0.5)",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    zIndex: 10000,
+                }, onClick: handleDialogBackdropClick, children: _jsxs("div", { style: {
+                        width: "80vw",
+                        maxWidth: "800px",
+                        maxHeight: "80vh",
+                        background: "rgba(0, 0, 0, 0.9)",
+                        border: "1px solid #333",
+                        borderRadius: "8px",
+                        padding: "20px",
+                        color: "white",
+                        fontFamily: "sans-serif",
+                        boxShadow: "0 4px 20px rgba(0,0,0,0.5)",
+                    }, onClick: (e) => e.stopPropagation(), children: [_jsxs("div", { style: {
+                                display: "flex",
+                                justifyContent: "space-between",
+                                alignItems: "center",
+                                marginBottom: "16px",
+                                borderBottom: "1px solid #333",
+                                paddingBottom: "12px",
+                            }, children: [_jsx("h3", { style: {
+                                        margin: 0,
+                                        fontSize: "1.2em",
+                                        color: "#4A90E2",
+                                    }, children: "\uD83D\uDCDA \u4F1A\u8A71\u30ED\u30B0" }), _jsx("button", { type: "button", onClick: closeDialog, style: {
+                                        background: "#666",
+                                        border: "none",
+                                        color: "white",
+                                        padding: "6px 12px",
+                                        borderRadius: "4px",
+                                        cursor: "pointer",
+                                    }, children: "\u2715 \u9589\u3058\u308B" })] }), _jsx("div", { style: {
+                                maxHeight: "60vh",
+                                overflowY: "auto",
+                                marginBottom: "16px",
+                                scrollbarWidth: "thin",
+                                scrollbarColor: "#666 transparent",
+                            }, children: logs.length > 0 ? (logs.map((log) => (_jsxs("div", { style: {
+                                    marginBottom: "12px",
+                                    padding: "12px",
+                                    background: "rgba(255,255,255,0.1)",
+                                    borderRadius: "4px",
+                                    borderLeft: "3px solid #4A90E2",
+                                }, children: [_jsx("div", { style: {
+                                            marginBottom: "6px",
+                                            fontSize: "1em",
+                                        }, children: log.speakerName ? (_jsx("strong", { children: log.speakerName })) : (_jsx("em", { children: "\u30CA\u30EC\u30FC\u30B7\u30E7\u30F3" })) }), _jsx("div", { style: {
+                                            fontSize: "1em",
+                                            lineHeight: "1.5",
+                                        }, children: log.content || "(内容なし)" })] }, log.id)))) : (_jsx("div", { style: {
+                                    textAlign: "center",
+                                    color: "#888",
+                                    padding: "20px",
+                                }, children: "\u307E\u3060\u4F1A\u8A71\u30ED\u30B0\u304C\u3042\u308A\u307E\u305B\u3093" })) }), _jsxs("div", { style: {
+                                textAlign: "center",
+                                fontSize: "0.8em",
+                                color: "#888",
+                            }, children: [logs.length, "\u4EF6\u306E\u4F1A\u8A71\u3092\u8868\u793A\u4E2D"] })] }) }))] }));
+};

package/dist/components/DebugControls.d.ts

@@ -0,0 +1,12 @@
+import type React from "react";
+interface DebugControlsProps {
+    currentIndex: number;
+    totalBlocks: number;
+    isPlaying: boolean;
+    canGoPrevious: boolean;
+    onPrevious: () => void;
+    onTogglePlay: () => void;
+    onNext: () => void;
+}
+export declare const DebugControls: React.FC<DebugControlsProps>;
+export {};

package/dist/components/DebugControls.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronRight, Pause, Play } from "lucide-react";
+export const DebugControls = ({ currentIndex, totalBlocks, isPlaying, canGoPrevious, onPrevious, onTogglePlay, onNext, }) => {
+    return (_jsxs("div", { className: "absolute top-4 right-4 bg-black/50 p-2 rounded-lg flex items-center space-x-2 z-20 pointer-events-auto", children: [_jsx("button", { type: "button", onClick: onPrevious, disabled: !canGoPrevious, className: "p-1 rounded text-white disabled:opacity-30 disabled:cursor-not-allowed hover:bg-white/20 transition-colors", children: _jsx(ChevronRight, { className: "w-4 h-4 rotate-180" }) }), _jsx("button", { type: "button", onClick: onTogglePlay, className: "p-1 rounded text-white hover:bg-white/20 transition-colors", children: isPlaying ? (_jsx(Pause, { className: "w-4 h-4" })) : (_jsx(Play, { className: "w-4 h-4" })) }), _jsx("button", { type: "button", onClick: onNext, className: "p-1 rounded text-white hover:bg-white/20 transition-colors", children: _jsx(ChevronRight, { className: "w-4 h-4" }) }), _jsxs("div", { className: "text-xs text-white/80 ml-2", children: [currentIndex + 1, "/", totalBlocks] })] }));
+};

package/dist/components/DialogueBox.d.ts

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