@luna-editor/engine 0.1.0

package/dist/components/DialogueBox.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDataAPI } from "../contexts/DataContext";
+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") || [];
+    if (!currentBlock) {
+        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;
+    // 話者の位置を特定
+    const speakerCharacter = displayedCharacters.find((char) => char.objectId === currentSpeakerId);
+    // 位置に基づいて名前表示のクラスを決定
+    const getNamePositionClass = () => {
+        if (!(speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.positionX))
+            return "justify-center";
+        const positionX = speakerCharacter.positionX;
+        if (positionX < 0.33)
+            return "justify-start -ml-[5%]"; // 左側
+        if (positionX > 0.67)
+            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" }) })] }) }));
+};

package/dist/components/EndScreen.d.ts

@@ -0,0 +1,8 @@
+import type React from "react";
+interface EndScreenProps {
+    scenarioName: string;
+    onRestart: () => void;
+    className?: string;
+}
+export declare const EndScreen: React.FC<EndScreenProps>;
+export {};

package/dist/components/EndScreen.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+export const EndScreen = ({ scenarioName, onRestart, className, }) => {
+    return (_jsxs("div", { className: clsx("flex flex-col items-center justify-center p-8 space-y-4", className), children: [_jsx("h2", { className: "text-2xl font-bold text-white", children: "\u30B7\u30CA\u30EA\u30AA\u7D42\u4E86" }), _jsx("p", { className: "text-gray-300", children: scenarioName }), _jsx("button", { type: "button", onClick: onRestart, className: "px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition-colors", children: "\u6700\u521D\u304B\u3089\u518D\u751F" })] }));
+};

package/dist/components/GameScreen.d.ts

@@ -0,0 +1,9 @@
+import type React from "react";
+import type { DisplayedCharacter, PublishedScenario, ScenarioBlock } from "../types";
+interface GameScreenProps {
+    scenario: PublishedScenario;
+    currentBlock: ScenarioBlock;
+    displayedCharacters: DisplayedCharacter[];
+}
+export declare const GameScreen: React.FC<GameScreenProps>;
+export {};

package/dist/components/GameScreen.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+export const GameScreen = ({ scenario, currentBlock, displayedCharacters, }) => {
+    // シナリオ全体で使用される全ての画像を収集
+    const allImages = useMemo(() => {
+        const images = new Map();
+        scenario.blocks.forEach((block) => {
+            var _a;
+            // dialogue/narrationブロックのspeaker画像
+            if (((_a = block.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl) &&
+                block.speakerId &&
+                block.speakerStateId) {
+                const key = `${block.speakerId}-${block.speakerStateId}`;
+                images.set(key, {
+                    url: block.speakerState.imageUrl,
+                    objectId: block.speakerId,
+                    entityStateId: block.speakerStateId,
+                    scale: block.speakerState.scale,
+                    translateY: block.speakerState.translateY,
+                    translateX: block.speakerState.translateX,
+                });
+            }
+            // character_entranceブロックのキャラクター画像
+            if (block.characters) {
+                block.characters.forEach((char) => {
+                    if (char.entityState.imageUrl) {
+                        const key = `${char.objectId}-${char.entityStateId}`;
+                        images.set(key, {
+                            url: char.entityState.imageUrl,
+                            objectId: char.objectId,
+                            entityStateId: char.entityStateId,
+                            scale: char.entityState.scale,
+                            translateY: char.entityState.translateY,
+                            translateX: char.entityState.translateX,
+                        });
+                    }
+                });
+            }
+        });
+        return Array.from(images.values());
+    }, [scenario.blocks]);
+    // 現在の話者
+    const currentSpeaker = (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.speakerId)
+        ? displayedCharacters.find((char) => char.objectId === currentBlock.speakerId)
+        : null;
+    return (_jsx("div", { className: "w-full h-full relative", children: allImages.map((image) => {
+            var _a, _b, _c, _d, _e;
+            // 複数キャラクター表示の場合、表示されているキャラクターを探す
+            const displayedChar = displayedCharacters.find((char) => char.objectId === image.objectId &&
+                char.entityStateId === image.entityStateId);
+            // 単一キャラクター表示の場合、現在の話者かチェック
+            const isCurrentSpeaker = displayedCharacters.length === 0 &&
+                currentBlock.speakerId === image.objectId &&
+                currentBlock.speakerStateId === image.entityStateId;
+            // 表示すべきかどうか
+            const shouldDisplay = displayedChar || isCurrentSpeaker;
+            // 明るさを決定
+            let brightness = 1;
+            if (displayedCharacters.length > 0 && displayedChar) {
+                // 複数キャラクター表示で、現在の話者でない場合
+                if (currentSpeaker &&
+                    currentSpeaker.objectId !== displayedChar.objectId) {
+                    brightness = 0.8;
+                }
+            }
+            // z-indexを決定
+            const zIndex = (_a = displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.zIndex) !== null && _a !== void 0 ? _a : (displayedChar ? 200 : 0);
+            // スケールを決定
+            // displayedCharのscaleが設定されている場合はそれを使用し、EntityStateのscaleと組み合わせる
+            // 設定されていない場合はEntityStateのscaleのみ使用
+            const characterScale = (displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.scale)
+                ? displayedChar.scale * ((_b = image.scale) !== null && _b !== void 0 ? _b : 1)
+                : ((_c = image.scale) !== null && _c !== void 0 ? _c : 1);
+            // デバッグ: スケール値をログ出力
+            if ((displayedChar === null || displayedChar === void 0 ? void 0 : displayedChar.scale) && displayedChar.scale !== 1) {
+                console.log(`Character ${image.objectId} - displayedChar.scale: ${displayedChar.scale}, image.scale: ${image.scale}, final: ${characterScale}`);
+            }
+            // 位置を決定（カスタム位置またはデフォルト位置）
+            let finalPosition = { x: 0.5, y: 1.0 }; // デフォルトは中央下
+            if (displayedChar) {
+                // カスタム位置が設定されている場合
+                if (displayedChar.positionX !== null &&
+                    displayedChar.positionY !== null) {
+                    finalPosition = {
+                        x: (_d = displayedChar.positionX) !== null && _d !== void 0 ? _d : 0.5,
+                        y: (_e = displayedChar.positionY) !== null && _e !== void 0 ? _e : 1.0,
+                    };
+                }
+                // カスタム位置が設定されていない場合はデフォルト位置のまま
+            }
+            // 高さ基準の位置計算（中央基準）
+            // 画面の中央（50vw）を基準として、vh単位で位置を指定
+            // positionX: 0.0 = 中央から -56.25vh（左端）, 0.5 = 中央, 1.0 = 中央から +56.25vh（右端）
+            const aspectRatio = 16 / 9;
+            const maxOffsetVh = 100 / aspectRatio / 2; // 56.25vh (16:9比率での半幅)
+            const offsetFromCenterVh = (finalPosition.x - 0.5) * 2 * maxOffsetVh;
+            const topVh = finalPosition.y * 100; // vh単位での上端からの距離
+            return (_jsx("div", { className: "absolute w-auto h-4/5 flex items-end", style: {
+                    visibility: shouldDisplay ? "visible" : "hidden",
+                    filter: `brightness(${brightness})`,
+                    zIndex: zIndex,
+                    left: "50vw",
+                    top: `${topVh}vh`,
+                    transform: `translate(calc(-50% + ${offsetFromCenterVh}vh), -100%)`, // 中央から相対位置 + 下揃え
+                }, "data-character-id": image.objectId, "data-character-sprite": true, children: _jsx("div", { className: "w-full h-full flex items-end justify-center", children: _jsx("img", { src: image.url, alt: "", className: "max-w-full max-h-full", style: {
+                            objectFit: "contain",
+                            transform: `scale(${characterScale}) translateX(${image.translateX || 0}%) translateY(${image.translateY || 0}%)`,
+                            transformOrigin: "bottom center",
+                        } }) }) }, `${image.objectId}-${image.entityStateId}`));
+        }) }));
+};

package/dist/components/OverlayUI.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+interface OverlayUIProps {
+    children: React.ReactNode;
+}
+/**
+ * OverlayUI コンポーネント
+ *
+ * 16:9のアスペクト比を維持しながら、様々な画面サイズに対応するコンテナ
+ * - スマートフォン（幅 < 1000px）: フルサイズ表示
+ * - タブレット（幅 ≥ 1000px）: 70%に縮小して中央配置
+ */
+export declare const OverlayUI: React.FC<OverlayUIProps>;
+export {};

package/dist/components/OverlayUI.js

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

package/dist/components/PluginComponentProvider.d.ts

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

package/dist/components/PluginComponentProvider.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Wrapper component that renders a plugin-registered component or a fallback
+ * All data is provided via DataContext, so no props are passed
+ */
+export function PluginComponentProvider({ type, pluginManager, fallback: FallbackComponent, }) {
+    const Component = pluginManager.getComponent(type);
+    if (Component) {
+        return _jsx(Component, {}, `plugin-component-${type}`);
+    }
+    if (FallbackComponent) {
+        return _jsx(FallbackComponent, {}, `fallback-component-${type}`);
+    }
+    // If no component is registered and no fallback provided, show a warning
+    console.warn(`No component registered for type: ${type}`);
+    return (_jsxs("div", { style: {
+            padding: "20px",
+            backgroundColor: "#f0f0f0",
+            border: "1px dashed #999",
+            borderRadius: "4px",
+            color: "#666",
+            textAlign: "center",
+        }, children: [_jsxs("p", { children: ["Component not found: ", type] }), _jsx("p", { style: { fontSize: "12px", marginTop: "10px" }, children: "Please install a plugin that provides this component" })] }, `warning-component-${type}`));
+}

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

@@ -0,0 +1,3 @@
+export declare const BasisWidth = 1920;
+export declare const BasisHeight = 1080;
+export declare const aspectRatio: number;

package/dist/constants/screen-size.js

@@ -0,0 +1,6 @@
+// Figmaデザインの基準サイズ (1920×1080)
+// このサイズを基準として、実際の画面サイズに応じて座標やサイズを変換します
+export const BasisWidth = 1920;
+export const BasisHeight = 1080;
+// アスペクト比 (16:9)
+export const aspectRatio = 16 / 9;

package/dist/contexts/DataContext.d.ts

@@ -0,0 +1,24 @@
+import { type ReactNode } from "react";
+import type { DataAPI, DataContext } from "../sdk";
+/**
+ * データプロバイダー
+ * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
+ *
+ * @example
+ * ```tsx
+ * <DataProvider data={dataContext}>
+ *   <PluginComponentProvider manager={pluginManager}>
+ *     {children}
+ *   </PluginComponentProvider>
+ * </DataProvider>
+ * ```
+ */
+export declare const DataProvider: React.FC<{
+    data: DataContext;
+    children: ReactNode;
+}>;
+/**
+ * DataAPI実装を提供するフック
+ * プラグインから呼び出される
+ */
+export declare function useDataAPI(): DataAPI;

package/dist/contexts/DataContext.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, } from "react";
+const DataContextInstance = createContext(null);
+const SubscribersContext = createContext(null);
+/**
+ * データプロバイダー
+ * プラグインがシナリオ情報にリアクティブにアクセスするためのProvider
+ *
+ * @example
+ * ```tsx
+ * <DataProvider data={dataContext}>
+ *   <PluginComponentProvider manager={pluginManager}>
+ *     {children}
+ *   </PluginComponentProvider>
+ * </DataProvider>
+ * ```
+ */
+export const DataProvider = ({ data, children }) => {
+    const subscribers = useMemo(() => new Map(), // eslint-disable-line @typescript-eslint/no-explicit-any
+    []);
+    const previousDataRef = useRef(data);
+    // データ変更時に購読者に通知
+    useEffect(() => {
+        const prevData = previousDataRef.current;
+        const currentData = data;
+        // 各カテゴリの変更をチェック
+        for (const key of Object.keys(currentData)) {
+            const prevValue = prevData[key];
+            const currentValue = currentData[key];
+            // カテゴリ全体が変更された場合
+            if (prevValue !== currentValue) {
+                // カテゴリ全体の購読者に通知
+                const categorySubscribers = subscribers.get(key);
+                categorySubscribers === null || categorySubscribers === void 0 ? void 0 : categorySubscribers.forEach((callback) => callback(currentValue));
+                // 個別プロパティの変更をチェック
+                if (typeof currentValue === "object" && currentValue !== null) {
+                    for (const prop of Object.keys(currentValue)) {
+                        const prevPropValue = prevValue === null || prevValue === void 0 ? void 0 : prevValue[prop]; // eslint-disable-line @typescript-eslint/no-explicit-any
+                        const currentPropValue = currentValue[prop]; // eslint-disable-line @typescript-eslint/no-explicit-any
+                        if (prevPropValue !== currentPropValue) {
+                            const propKey = `${key}.${prop}`;
+                            const propSubscribers = subscribers.get(propKey);
+                            propSubscribers === null || propSubscribers === void 0 ? void 0 : propSubscribers.forEach((callback) => callback(currentPropValue));
+                        }
+                    }
+                }
+            }
+        }
+        previousDataRef.current = data;
+    }, [data, subscribers]);
+    return (_jsx(SubscribersContext.Provider, { value: subscribers, children: _jsx(DataContextInstance.Provider, { value: data, children: children }) }));
+};
+/**
+ * DataAPI実装を提供するフック
+ * プラグインから呼び出される
+ */
+export function useDataAPI() {
+    const data = useContext(DataContextInstance);
+    const subscribers = useContext(SubscribersContext);
+    if (!data || !subscribers) {
+        throw new Error("useDataAPI must be used within DataProvider");
+    }
+    const get = useCallback((key, property) => {
+        var _a;
+        if (property !== undefined) {
+            return (_a = data[key]) === null || _a === void 0 ? void 0 : _a[property];
+        }
+        return data[key];
+    }, [data]);
+    const subscribe = useCallback((key, callback) => {
+        var _a;
+        const subscriberKey = key;
+        if (!subscribers.has(subscriberKey)) {
+            subscribers.set(subscriberKey, new Set());
+        }
+        (_a = subscribers.get(subscriberKey)) === null || _a === void 0 ? void 0 : _a.add(callback);
+        // unsubscribe関数を返す
+        return () => {
+            var _a;
+            (_a = subscribers.get(subscriberKey)) === null || _a === void 0 ? void 0 : _a.delete(callback);
+        };
+    }, [subscribers]);
+    const watch = useCallback((key, property, callback) => {
+        var _a;
+        const subscriberKey = `${key}.${property}`;
+        if (!subscribers.has(subscriberKey)) {
+            subscribers.set(subscriberKey, new Set());
+        }
+        (_a = subscribers.get(subscriberKey)) === null || _a === void 0 ? void 0 : _a.add(callback);
+        // unsubscribe関数を返す
+        return () => {
+            var _a;
+            (_a = subscribers.get(subscriberKey)) === null || _a === void 0 ? void 0 : _a.delete(callback);
+        };
+    }, [subscribers]);
+    return useMemo(() => ({
+        get,
+        subscribe,
+        watch,
+    }), [get, subscribe, watch]);
+}

package/dist/hooks/useBacklog.d.ts

@@ -0,0 +1,14 @@
+import type { BacklogEntry, PublishedScenario, ScenarioBlock } from "../types";
+interface UseBacklogOptions {
+    scenario: PublishedScenario;
+    currentBlockIndex: number;
+    currentBlock: ScenarioBlock | null;
+}
+interface UseBacklogReturn {
+    logs: BacklogEntry[];
+    addLogEntry: (entry: BacklogEntry) => void;
+    clearLogs: () => void;
+    buildInitialHistory: (upToIndex: number) => void;
+}
+export declare function useBacklog({ scenario, currentBlockIndex, currentBlock, }: UseBacklogOptions): UseBacklogReturn;
+export {};

package/dist/hooks/useBacklog.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useBacklog({ scenario, currentBlockIndex, currentBlock, }) {
+    const [logs, setLogs] = useState([]);
+    const hasBuiltInitialHistory = useRef(false);
+    const processedBlocks = useRef(new Set());
+    // ログエントリを追加する関数
+    const addLogEntry = useCallback((entry) => {
+        setLogs((prevLogs) => {
+            // 既存の同じブロックインデックスのエントリを削除（重複防止）
+            const filteredLogs = prevLogs.filter((log) => log.blockIndex !== entry.blockIndex);
+            // 新しいエントリを追加してソート
+            const newLogs = [...filteredLogs, entry];
+            return newLogs.sort((a, b) => a.blockIndex - b.blockIndex);
+        });
+    }, []);
+    // ログをクリアする関数
+    const clearLogs = useCallback(() => {
+        setLogs([]);
+        hasBuiltInitialHistory.current = false;
+        processedBlocks.current.clear();
+    }, []);
+    // 初期履歴を構築する関数
+    const buildInitialHistory = useCallback((upToIndex) => {
+        const conversationBlocks = scenario.blocks
+            .slice(0, upToIndex + 1)
+            .map((block, index) => ({ block, realIndex: index }))
+            .filter(({ block }) => block.blockType === "dialogue" || block.blockType === "narration");
+        console.log(`Building conversation history up to index ${upToIndex}, found ${conversationBlocks.length} conversation blocks`);
+        conversationBlocks.forEach(({ block, realIndex }) => {
+            var _a, _b;
+            if (!processedBlocks.current.has(realIndex)) {
+                const logEntry = {
+                    id: `${block.id}_init`,
+                    timestamp: Date.now(),
+                    blockIndex: realIndex,
+                    blockType: block.blockType,
+                    content: block.content,
+                    speakerName: (_a = block.speaker) === null || _a === void 0 ? void 0 : _a.name,
+                    speakerState: (_b = block.speakerState) === null || _b === void 0 ? void 0 : _b.name,
+                };
+                addLogEntry(logEntry);
+                processedBlocks.current.add(realIndex);
+            }
+        });
+        hasBuiltInitialHistory.current = true;
+    }, [scenario.blocks, addLogEntry]);
+    // 新しいブロックを処理
+    useEffect(() => {
+        var _a, _b;
+        if (!currentBlock || !hasBuiltInitialHistory.current) {
+            return;
+        }
+        // 会話ブロックのみログに追加
+        if (currentBlock.blockType === "dialogue" ||
+            currentBlock.blockType === "narration") {
+            if (!processedBlocks.current.has(currentBlockIndex)) {
+                console.log("Adding new conversation block to log:", currentBlock);
+                const logEntry = {
+                    id: `${currentBlock.id}_${Date.now()}`,
+                    timestamp: Date.now(),
+                    blockIndex: currentBlockIndex,
+                    blockType: currentBlock.blockType,
+                    content: currentBlock.content,
+                    speakerName: (_a = currentBlock.speaker) === null || _a === void 0 ? void 0 : _a.name,
+                    speakerState: (_b = currentBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name,
+                };
+                addLogEntry(logEntry);
+                processedBlocks.current.add(currentBlockIndex);
+            }
+        }
+    }, [currentBlock, currentBlockIndex, addLogEntry]);
+    // シナリオ変更時にリセット
+    useEffect(() => {
+        clearLogs();
+    }, [scenario.id, clearLogs]);
+    return {
+        logs,
+        addLogEntry,
+        clearLogs,
+        buildInitialHistory,
+    };
+}

package/dist/hooks/useConversationLog.d.ts

@@ -0,0 +1,14 @@
+import type { ConversationLogEntry, PublishedScenario, ScenarioBlock } from "../types";
+interface UseConversationLogOptions {
+    scenario: PublishedScenario;
+    currentBlockIndex: number;
+    currentBlock: ScenarioBlock | null;
+}
+interface UseConversationLogReturn {
+    logs: ConversationLogEntry[];
+    addLogEntry: (entry: ConversationLogEntry) => void;
+    clearLogs: () => void;
+    buildInitialHistory: (upToIndex: number) => void;
+}
+export declare function useConversationLog({ scenario, currentBlockIndex, currentBlock, }: UseConversationLogOptions): UseConversationLogReturn;
+export {};

package/dist/hooks/useConversationLog.js

@@ -0,0 +1,82 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useConversationLog({ scenario, currentBlockIndex, currentBlock, }) {
+    const [logs, setLogs] = useState([]);
+    const hasBuiltInitialHistory = useRef(false);
+    const processedBlocks = useRef(new Set());
+    // ログエントリを追加する関数
+    const addLogEntry = useCallback((entry) => {
+        setLogs((prevLogs) => {
+            // 既存の同じブロックインデックスのエントリを削除（重複防止）
+            const filteredLogs = prevLogs.filter((log) => log.blockIndex !== entry.blockIndex);
+            // 新しいエントリを追加してソート
+            const newLogs = [...filteredLogs, entry];
+            return newLogs.sort((a, b) => a.blockIndex - b.blockIndex);
+        });
+    }, []);
+    // ログをクリアする関数
+    const clearLogs = useCallback(() => {
+        setLogs([]);
+        hasBuiltInitialHistory.current = false;
+        processedBlocks.current.clear();
+    }, []);
+    // 初期履歴を構築する関数
+    const buildInitialHistory = useCallback((upToIndex) => {
+        const conversationBlocks = scenario.blocks
+            .slice(0, upToIndex + 1)
+            .map((block, index) => ({ block, realIndex: index }))
+            .filter(({ block }) => block.blockType === "dialogue" || block.blockType === "narration");
+        console.log(`Building conversation history up to index ${upToIndex}, found ${conversationBlocks.length} conversation blocks`);
+        conversationBlocks.forEach(({ block, realIndex }) => {
+            var _a, _b;
+            if (!processedBlocks.current.has(realIndex)) {
+                const logEntry = {
+                    id: `${block.id}_init`,
+                    timestamp: Date.now(),
+                    blockIndex: realIndex,
+                    blockType: block.blockType,
+                    content: block.content,
+                    speakerName: (_a = block.speaker) === null || _a === void 0 ? void 0 : _a.name,
+                    speakerState: (_b = block.speakerState) === null || _b === void 0 ? void 0 : _b.name,
+                };
+                addLogEntry(logEntry);
+                processedBlocks.current.add(realIndex);
+            }
+        });
+        hasBuiltInitialHistory.current = true;
+    }, [scenario.blocks, addLogEntry]);
+    // 新しいブロックを処理
+    useEffect(() => {
+        var _a, _b;
+        if (!currentBlock || !hasBuiltInitialHistory.current) {
+            return;
+        }
+        // 会話ブロックのみログに追加
+        if (currentBlock.blockType === "dialogue" ||
+            currentBlock.blockType === "narration") {
+            if (!processedBlocks.current.has(currentBlockIndex)) {
+                console.log("Adding new conversation block to log:", currentBlock);
+                const logEntry = {
+                    id: `${currentBlock.id}_${Date.now()}`,
+                    timestamp: Date.now(),
+                    blockIndex: currentBlockIndex,
+                    blockType: currentBlock.blockType,
+                    content: currentBlock.content,
+                    speakerName: (_a = currentBlock.speaker) === null || _a === void 0 ? void 0 : _a.name,
+                    speakerState: (_b = currentBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name,
+                };
+                addLogEntry(logEntry);
+                processedBlocks.current.add(currentBlockIndex);
+            }
+        }
+    }, [currentBlock, currentBlockIndex, addLogEntry]);
+    // シナリオ変更時にリセット
+    useEffect(() => {
+        clearLogs();
+    }, [scenario.id, clearLogs]);
+    return {
+        logs,
+        addLogEntry,
+        clearLogs,
+        buildInitialHistory,
+    };
+}

package/dist/hooks/usePlayerLogic.d.ts

@@ -0,0 +1,21 @@
+import type { DisplayedCharacter, PlayerState, PublishedScenario, ScenarioBlock } from "../types";
+interface UsePlayerLogicProps {
+    state: PlayerState;
+    setState: React.Dispatch<React.SetStateAction<PlayerState>>;
+    scenario: PublishedScenario;
+    isTyping: boolean;
+    currentBlock: ScenarioBlock;
+    skipTyping: (text: string) => void;
+    onEnd?: () => void;
+    onScenarioEnd?: () => void;
+    autoplay: boolean;
+}
+export declare const usePlayerLogic: ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, }: UsePlayerLogicProps) => {
+    handleNext: () => void;
+    handlePrevious: () => void;
+    togglePlay: () => void;
+    restart: () => void;
+    isLastBlock: boolean;
+    displayedCharacters: DisplayedCharacter[];
+};
+export {};