@luna-editor/engine 0.1.0

package/dist/hooks/usePlayerLogic.js

@@ -0,0 +1,145 @@
+import { useCallback, useEffect, useMemo } from "react";
+// ブロックインデックスから表示すべきキャラクター状態を計算する純粋関数
+const calculateDisplayedCharacters = (blocks, currentIndex) => {
+    let characters = [];
+    // 現在位置から前方向に探索して、最後のcharacter_entranceまたはcharacter_exitを見つける
+    for (let i = currentIndex; i >= 0; i--) {
+        const block = blocks[i];
+        if (block.blockType === "character_entrance") {
+            // character_entranceを見つけたら、そこから現在位置までのキャラクター状態を構築
+            // character_entranceから現在位置までのブロックを処理
+            for (let j = i; j <= currentIndex; j++) {
+                const processBlock = blocks[j];
+                switch (processBlock.blockType) {
+                    case "character_entrance":
+                        if (processBlock.characters) {
+                            const newCharacters = processBlock.characters.map((char) => ({
+                                objectId: char.objectId,
+                                entityStateId: char.entityStateId,
+                                positionX: char.positionX,
+                                positionY: char.positionY,
+                                zIndex: char.zIndex,
+                                scale: char.scale,
+                                object: char.object,
+                                entityState: char.entityState,
+                            }));
+                            characters = [
+                                ...characters.filter((existing) => !newCharacters.some((newChar) => newChar.objectId === existing.objectId)),
+                                ...newCharacters,
+                            ];
+                        }
+                        break;
+                    case "character_exit":
+                        // character_exitに到達したら、キャラクター表示範囲外
+                        return [];
+                    case "dialogue":
+                        if (processBlock.speakerId && processBlock.speakerStateId) {
+                            characters = characters.map((char) => {
+                                var _a, _b, _c, _d;
+                                return char.objectId === processBlock.speakerId
+                                    ? Object.assign(Object.assign({}, char), { entityStateId: processBlock.speakerStateId || "", entityState: {
+                                            id: (_a = processBlock.speakerStateId) !== null && _a !== void 0 ? _a : "",
+                                            name: ((_b = processBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name) || "",
+                                            imageUrl: ((_c = processBlock.speakerState) === null || _c === void 0 ? void 0 : _c.imageUrl) || null,
+                                            cropArea: ((_d = processBlock.speakerState) === null || _d === void 0 ? void 0 : _d.cropArea) || null,
+                                        } }) : char;
+                            });
+                        }
+                        break;
+                }
+            }
+            break; // 最初のcharacter_entranceを見つけたら終了
+        }
+        if (block.blockType === "character_exit") {
+            // character_exitを見つけたら、キャラクター表示範囲外
+            return [];
+        }
+    }
+    return characters;
+};
+export const usePlayerLogic = ({ state, setState, scenario, isTyping, currentBlock, skipTyping, onEnd, onScenarioEnd, autoplay, }) => {
+    const isLastBlock = state.currentBlockIndex === scenario.blocks.length - 1;
+    // 現在のインデックスに基づいて表示すべきキャラクターを計算
+    const displayedCharacters = useMemo(() => calculateDisplayedCharacters(scenario.blocks, state.currentBlockIndex), [scenario.blocks, state.currentBlockIndex]);
+    const handleNext = useCallback(() => {
+        var _a;
+        // タイピング中の場合はスキップ
+        if (isTyping && currentBlock) {
+            skipTyping(currentBlock.content || "");
+            return;
+        }
+        if (isLastBlock) {
+            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();
+            // iframe向けのイベント発火
+            if (typeof window !== "undefined") {
+                window.postMessage({ type: "scenario-end" }, "*");
+                (_a = window.parent) === null || _a === void 0 ? void 0 : _a.postMessage({ type: "scenario-end" }, "*");
+            }
+        }
+        else {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { currentBlockIndex: prev.currentBlockIndex + 1 })));
+        }
+    }, [
+        isLastBlock,
+        onEnd,
+        onScenarioEnd,
+        isTyping,
+        currentBlock,
+        skipTyping,
+        setState,
+    ]);
+    const handlePrevious = useCallback(() => {
+        if (state.currentBlockIndex > 0) {
+            setState((prev) => (Object.assign(Object.assign({}, prev), { currentBlockIndex: prev.currentBlockIndex - 1, isEnded: false })));
+        }
+    }, [state.currentBlockIndex, setState]);
+    const togglePlay = useCallback(() => {
+        if (state.isEnded)
+            return;
+        setState((prev) => (Object.assign(Object.assign({}, prev), { isPlaying: !prev.isPlaying })));
+    }, [state.isEnded, setState]);
+    const restart = useCallback(() => {
+        console.log("restart");
+        setState({
+            currentBlockIndex: 0,
+            isPlaying: autoplay,
+            isEnded: false,
+        });
+    }, [autoplay, setState]);
+    // キーボードナビゲーション
+    useEffect(() => {
+        const handleKeyDown = (event) => {
+            switch (event.key) {
+                case "ArrowRight":
+                case " ":
+                    event.preventDefault();
+                    handleNext();
+                    break;
+                case "ArrowLeft":
+                    event.preventDefault();
+                    handlePrevious();
+                    break;
+                case "Enter":
+                    event.preventDefault();
+                    togglePlay();
+                    break;
+                case "Escape":
+                    event.preventDefault();
+                    restart();
+                    break;
+            }
+        };
+        window.addEventListener("keydown", handleKeyDown);
+        return () => window.removeEventListener("keydown", handleKeyDown);
+    }, [handleNext, handlePrevious, togglePlay, restart]);
+    return {
+        handleNext,
+        handlePrevious,
+        togglePlay,
+        restart,
+        isLastBlock,
+        displayedCharacters,
+    };
+};

package/dist/hooks/usePluginAPI.d.ts

@@ -0,0 +1,19 @@
+import type { PluginManager } from "../plugin/PluginManager";
+import type { ComponentType, UIAPI } from "../sdk";
+/**
+ * グローバルなUIAPIとPluginManagerを設定（Player.tsxから呼ばれる）
+ */
+export declare function setGlobalUIAPI(api: UIAPI, pluginManager: PluginManager): void;
+/**
+ * プラグインコンポーネント内でUIAPIにアクセスするためのフック
+ * @returns UIAPI
+ */
+export declare function usePluginAPI(): {
+    ui: UIAPI;
+};
+/**
+ * UI コンポーネントの表示状態を監視するフック（プラグインコンポーネント用）
+ * @param type - コンポーネントタイプ
+ * @returns 表示状態
+ */
+export declare function useUIVisibility(type: ComponentType): boolean;

package/dist/hooks/usePluginAPI.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from "react";
+/**
+ * グローバルなPluginAPIインスタンスを保持
+ * プラグインコンポーネントから呼び出された時に使用される
+ */
+let globalUIAPI = null;
+let globalPluginManager = null;
+/**
+ * グローバルなUIAPIとPluginManagerを設定（Player.tsxから呼ばれる）
+ */
+export function setGlobalUIAPI(api, pluginManager) {
+    globalUIAPI = api;
+    globalPluginManager = pluginManager;
+}
+/**
+ * プラグインコンポーネント内でUIAPIにアクセスするためのフック
+ * @returns UIAPI
+ */
+export function usePluginAPI() {
+    if (!globalUIAPI) {
+        throw new Error("UIAPI is not initialized. Make sure this hook is used within a Luna Player context.");
+    }
+    return { ui: globalUIAPI };
+}
+/**
+ * UI コンポーネントの表示状態を監視するフック（プラグインコンポーネント用）
+ * @param type - コンポーネントタイプ
+ * @returns 表示状態
+ */
+export function useUIVisibility(type) {
+    if (!globalPluginManager) {
+        throw new Error("PluginManager is not initialized. Make sure this hook is used within a Luna Player context.");
+    }
+    const pluginManager = globalPluginManager;
+    const [isVisible, setIsVisible] = useState(() => pluginManager.getUIVisibility(type));
+    useEffect(() => {
+        // UI 状態の変更を監視
+        const unsubscribe = pluginManager.subscribeUIVisibility(type, setIsVisible);
+        return unsubscribe;
+    }, [pluginManager, type]);
+    return isVisible;
+}

package/dist/hooks/usePluginEvents.d.ts

@@ -0,0 +1,14 @@
+import type { PluginManager } from "../plugin/PluginManager";
+import type { DisplayedCharacter, ScenarioBlock } from "../types";
+interface UsePluginEventsProps {
+    pluginManager: PluginManager;
+    currentBlock?: ScenarioBlock;
+    displayedCharacters: DisplayedCharacter[];
+    blockIndex: number;
+    isFirstRenderComplete: boolean;
+    allBlocks: ScenarioBlock[];
+    realBlockIndex: number;
+    pluginsLoaded: boolean;
+}
+export declare const usePluginEvents: ({ pluginManager, currentBlock, displayedCharacters, blockIndex, isFirstRenderComplete, allBlocks, realBlockIndex, pluginsLoaded, }: UsePluginEventsProps) => void;
+export {};

package/dist/hooks/usePluginEvents.js

@@ -0,0 +1,197 @@
+import { useEffect, useRef } from "react";
+import { normalizeAttributes } from "../utils/attributeNormalizer";
+import { calculateFacePosition } from "../utils/facePositionCalculator";
+export const usePluginEvents = ({ pluginManager, currentBlock, displayedCharacters, blockIndex, isFirstRenderComplete, allBlocks, realBlockIndex, pluginsLoaded, }) => {
+    const previousSpeakerRef = useRef({});
+    const previousRealBlockIndexRef = useRef(-1);
+    const scenarioReadyCalledRef = useRef(false);
+    // シナリオ準備完了イベント（初回のみ、プラグイン読み込み完了後）
+    useEffect(() => {
+        var _a;
+        if (!isFirstRenderComplete ||
+            !currentBlock ||
+            !pluginsLoaded ||
+            scenarioReadyCalledRef.current) {
+            return;
+        }
+        pluginManager.callHook("onScenarioReady", {
+            scenario: {
+                id: ((_a = allBlocks[0]) === null || _a === void 0 ? void 0 : _a.scenarioId) || "unknown",
+                name: "scenario", // TODO: シナリオ名を適切に取得
+            },
+            allBlocks,
+            currentBlockIndex: blockIndex,
+            currentBlock,
+        });
+        scenarioReadyCalledRef.current = true;
+    }, [
+        pluginManager,
+        currentBlock,
+        allBlocks,
+        blockIndex,
+        isFirstRenderComplete,
+        pluginsLoaded,
+    ]);
+    // 通り過ぎたaction_nodeを実行
+    useEffect(() => {
+        if (!isFirstRenderComplete || !pluginsLoaded) {
+            return;
+        }
+        const previousIndex = previousRealBlockIndexRef.current;
+        const currentIndex = realBlockIndex;
+        // 前回から今回までに通り過ぎたブロックをチェック
+        // 初回の場合（previousIndex === -1）は0から処理、そうでなければpreviousIndex + 1から処理
+        if (currentIndex > previousIndex) {
+            const startIndex = previousIndex === -1 ? 0 : previousIndex + 1;
+            for (let i = startIndex; i <= currentIndex; i++) {
+                const block = allBlocks[i];
+                console.log("block", block);
+                if ((block === null || block === void 0 ? void 0 : block.blockType) === "action_node" && block.actionNode) {
+                    // Normalize attributes from database format
+                    const normalizedAttributes = normalizeAttributes(block);
+                    console.log("Normalized attributes:", normalizedAttributes);
+                    // Try multiple ways to find the ActionNode type - prioritize displayName matching
+                    const possibleTypes = [
+                        block.actionNode.nodeType,
+                        block.actionNode.name, // This will be "背景" from database
+                    ].filter(Boolean);
+                    let actionNodeDef;
+                    let foundActionNodeType;
+                    // First try direct type matching
+                    for (const actionNodeType of possibleTypes) {
+                        if (actionNodeType) {
+                            actionNodeDef =
+                                pluginManager.getActionNodeDefinition(actionNodeType);
+                            if (actionNodeDef) {
+                                foundActionNodeType = actionNodeType;
+                                console.log(`Found ActionNode definition with type: ${actionNodeType}`);
+                                break;
+                            }
+                        }
+                    }
+                    // If no direct match found, try displayName matching
+                    if (!actionNodeDef && block.actionNode.name) {
+                        actionNodeDef = pluginManager.getActionNodeDefinition(block.actionNode.name);
+                        if (actionNodeDef) {
+                            foundActionNodeType = block.actionNode.name;
+                            console.log(`Found ActionNode definition with displayName: ${block.actionNode.name}`);
+                        }
+                    }
+                    if (actionNodeDef === null || actionNodeDef === void 0 ? void 0 : actionNodeDef.execute) {
+                        try {
+                            // Create a clean context object that matches plugin expectations
+                            // Note: DisplayedCharacter[] is used internally but needs to match ActionExecutionContext signature
+                            actionNodeDef.execute({
+                                attributes: normalizedAttributes,
+                                currentBlock: block,
+                                currentSpeaker: block.speaker,
+                                displayedCharacters,
+                                api: pluginManager,
+                            });
+                            console.log(`Successfully executed ActionNode: ${foundActionNodeType}`);
+                        }
+                        catch (error) {
+                            console.error("Error executing ActionNode:", error);
+                        }
+                    }
+                    else {
+                        console.warn(`ActionNode definition not found for: ${block.actionNode.name} (tried types: ${possibleTypes.join(", ")})`);
+                    }
+                    // Legacy support: also call onActionExecute hook (for backward compatibility)
+                    pluginManager.callHook("onActionExecute", {
+                        attributes: normalizedAttributes,
+                        currentBlock: block,
+                        currentSpeaker: block.speaker,
+                        displayedCharacters,
+                        api: pluginManager,
+                    });
+                }
+            }
+        }
+        previousRealBlockIndexRef.current = currentIndex;
+    }, [
+        pluginManager,
+        realBlockIndex,
+        allBlocks,
+        displayedCharacters,
+        isFirstRenderComplete,
+        pluginsLoaded,
+    ]);
+    // ブロック変更イベント
+    useEffect(() => {
+        if (!isFirstRenderComplete || !currentBlock || !pluginsLoaded) {
+            return;
+        }
+        pluginManager.callHook("onBlockChange", {
+            currentBlock,
+            blockIndex,
+        });
+    }, [
+        pluginManager,
+        currentBlock,
+        blockIndex,
+        isFirstRenderComplete,
+        pluginsLoaded,
+    ]);
+    // キャラクター発話イベント
+    useEffect(() => {
+        var _a, _b;
+        if (!isFirstRenderComplete || !currentBlock || !pluginsLoaded) {
+            return;
+        }
+        // dialogueブロックの場合のみ処理
+        if (currentBlock.blockType === "dialogue" && currentBlock.speakerId) {
+            const currentSpeaker = {
+                id: currentBlock.speakerId,
+                name: ((_a = currentBlock.speaker) === null || _a === void 0 ? void 0 : _a.name) || "",
+            };
+            // 前の話者と異なるかチェック
+            const isNewSpeaker = previousSpeakerRef.current.id !== currentSpeaker.id;
+            // 表示されているキャラクターから話者の位置を取得
+            const speakerCharacter = displayedCharacters.find((char) => char.objectId === currentSpeaker.id);
+            // キャラクター要素を取得
+            const characterElement = document.querySelector(`[data-character-id="${currentSpeaker.id}"]`);
+            // 顔位置を計算
+            let facePosition;
+            if (characterElement && currentBlock.speakerState) {
+                const calculatedPosition = calculateFacePosition(characterElement, {
+                    cropArea: currentBlock.speakerState.cropArea,
+                    scale: currentBlock.speakerState.scale,
+                    translateX: currentBlock.speakerState.translateX,
+                    translateY: currentBlock.speakerState.translateY,
+                });
+                if (calculatedPosition) {
+                    facePosition = calculatedPosition;
+                }
+            }
+            // characterSpeakHandlerを呼び出し
+            pluginManager.callHook("characterSpeakHandler", {
+                speaker: {
+                    id: currentSpeaker.id,
+                    name: currentSpeaker.name,
+                    state: (_b = currentBlock.speakerState) === null || _b === void 0 ? void 0 : _b.name,
+                    positionX: speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.positionX,
+                    positionY: speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.positionY,
+                    zIndex: speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.zIndex,
+                    scale: speakerCharacter === null || speakerCharacter === void 0 ? void 0 : speakerCharacter.scale,
+                },
+                dialogue: {
+                    content: currentBlock.content || "",
+                    isNewSpeaker,
+                },
+                speakerElement: document.querySelector("[data-speaker-name-element]"),
+                characterElement,
+                previousSpeaker: isNewSpeaker ? previousSpeakerRef.current : undefined,
+                facePosition, // 顔位置情報を追加
+            });
+            // 現在の話者を記録
+            previousSpeakerRef.current = currentSpeaker;
+        }
+    }, [
+        pluginManager,
+        currentBlock,
+        displayedCharacters,
+        isFirstRenderComplete,
+        pluginsLoaded,
+    ]);
+};

package/dist/hooks/usePreloadImages.d.ts

@@ -0,0 +1,2 @@
+import type { PublishedScenario } from "../types";
+export declare const usePreloadImages: (scenario: PublishedScenario) => boolean;

package/dist/hooks/usePreloadImages.js

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+export const usePreloadImages = (scenario) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    useEffect(() => {
+        const imageUrls = new Set();
+        // シナリオ全体から画像URLを収集
+        scenario.blocks.forEach((block) => {
+            var _a;
+            // dialogue/narrationブロックのspeaker画像
+            if ((_a = block.speakerState) === null || _a === void 0 ? void 0 : _a.imageUrl) {
+                imageUrls.add(block.speakerState.imageUrl);
+            }
+            // character_entranceブロックのキャラクター画像
+            if (block.characters) {
+                block.characters.forEach((char) => {
+                    if (char.entityState.imageUrl) {
+                        imageUrls.add(char.entityState.imageUrl);
+                    }
+                });
+            }
+        });
+        // 画像がない場合は即座に完了
+        if (imageUrls.size === 0) {
+            setIsLoaded(true);
+            return;
+        }
+        let loadedCount = 0;
+        const totalCount = imageUrls.size;
+        // 各画像を事前読み込み
+        imageUrls.forEach((url) => {
+            const img = new Image();
+            const handleLoad = () => {
+                loadedCount++;
+                if (loadedCount === totalCount) {
+                    setIsLoaded(true);
+                }
+            };
+            const handleError = () => {
+                console.error(`Failed to preload image: ${url}`);
+                loadedCount++;
+                if (loadedCount === totalCount) {
+                    setIsLoaded(true);
+                }
+            };
+            img.addEventListener("load", handleLoad);
+            img.addEventListener("error", handleError);
+            img.src = url;
+            // クリーンアップ関数で画像を破棄
+            return () => {
+                img.removeEventListener("load", handleLoad);
+                img.removeEventListener("error", handleError);
+            };
+        });
+    }, [scenario]);
+    return isLoaded;
+};

package/dist/hooks/useScreenSize.d.ts

@@ -0,0 +1,89 @@
+/**
+ * Figmaの基準座標(1920×1080)から実際のピクセル座標への変換を提供するフック
+ */
+export declare const useToPixel: () => {
+    /**
+     * 基準座標(px)を実際のピクセルに変換（高さ基準）
+     * @param basisX 基準座標での値
+     * @returns 実際のピクセル値
+     */
+    pixel: (basisX: number) => number;
+    /**
+     * 基準座標(px)を実際のピクセルに変換（幅基準）
+     * @param basisX 基準座標での値
+     * @returns 実際のピクセル値
+     */
+    pixelWidth: (basisX: number) => number;
+    /**
+     * アスペクト比を考慮したサイズを返す
+     * @param basisSize 基準サイズ
+     * @returns 幅と高さのピクセル値
+     */
+    aspectSize: (basisSize: number) => {
+        width: number;
+        height: number;
+    };
+    /**
+     * 2D座標を基準から実際のピクセルに変換
+     * @param basisPos 基準座標 {x, y}
+     * @returns 実際のピクセル座標
+     */
+    pos: (basisPos: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+    /**
+     * 3D座標を基準から実際のピクセルに変換
+     * @param basisPos 基準座標 {x, y, z}
+     * @returns 実際のピクセル座標
+     */
+    vec3d: (basisPos: {
+        x: number;
+        y: number;
+        z: number;
+    }) => {
+        x: number;
+        y: number;
+        z: number;
+    };
+    /**
+     * 相対幅（0-1の値）を実際のピクセル幅に変換
+     * @param basisWidth 基準幅（0-1）
+     * @returns 実際のピクセル幅
+     */
+    relativeWidth: (basisWidth: number) => number;
+    /**
+     * 相対高さ（0-1の値）を実際のピクセル高さに変換
+     * @param basisHeight 基準高さ（0-1）
+     * @returns 実際のピクセル高さ
+     */
+    relativeHeight: (basisHeight: number) => number;
+    /**
+     * 相対座標（0-1の値）を実際のピクセル座標に変換
+     * @param basisPos 相対座標 {x, y}（0-1）
+     * @returns 実際のピクセル座標
+     */
+    relativePos: (basisPos: {
+        x: number;
+        y: number;
+    }) => {
+        x: number;
+        y: number;
+    };
+};
+/**
+ * 画面サイズを取得するフック
+ * @returns 現在の画面サイズ {width, height}
+ */
+export declare const useScreenSize: () => {
+    width: number;
+    height: number;
+};
+/**
+ * 画面のスケール倍率を取得するフック
+ * @returns 基準サイズに対するスケール倍率
+ */
+export declare const useScreenScale: () => number;

package/dist/hooks/useScreenSize.js

@@ -0,0 +1,87 @@
+import { useScreenSizeAtom } from "../atoms/screen-size";
+import { BasisHeight, BasisWidth } from "../constants/screen-size";
+/**
+ * Figmaの基準座標(1920×1080)から実際のピクセル座標への変換を提供するフック
+ */
+export const useToPixel = () => {
+    const [{ width: screenWidth, height: screenHeight }] = useScreenSizeAtom();
+    return {
+        /**
+         * 基準座標(px)を実際のピクセルに変換（高さ基準）
+         * @param basisX 基準座標での値
+         * @returns 実際のピクセル値
+         */
+        pixel: (basisX) => (basisX / BasisHeight) * screenHeight,
+        /**
+         * 基準座標(px)を実際のピクセルに変換（幅基準）
+         * @param basisX 基準座標での値
+         * @returns 実際のピクセル値
+         */
+        pixelWidth: (basisX) => (basisX / BasisWidth) * screenWidth,
+        /**
+         * アスペクト比を考慮したサイズを返す
+         * @param basisSize 基準サイズ
+         * @returns 幅と高さのピクセル値
+         */
+        aspectSize: (basisSize) => ({
+            width: (basisSize / BasisHeight) * screenHeight,
+            height: (basisSize / BasisHeight) * screenHeight,
+        }),
+        /**
+         * 2D座標を基準から実際のピクセルに変換
+         * @param basisPos 基準座標 {x, y}
+         * @returns 実際のピクセル座標
+         */
+        pos: (basisPos) => ({
+            x: (basisPos.x / BasisWidth) * screenWidth,
+            y: (basisPos.y / BasisHeight) * screenHeight,
+        }),
+        /**
+         * 3D座標を基準から実際のピクセルに変換
+         * @param basisPos 基準座標 {x, y, z}
+         * @returns 実際のピクセル座標
+         */
+        vec3d: (basisPos) => ({
+            x: (basisPos.x / BasisWidth) * screenWidth,
+            y: (basisPos.y / BasisHeight) * screenHeight,
+            z: (basisPos.z / BasisHeight) * screenHeight,
+        }),
+        /**
+         * 相対幅（0-1の値）を実際のピクセル幅に変換
+         * @param basisWidth 基準幅（0-1）
+         * @returns 実際のピクセル幅
+         */
+        relativeWidth: (basisWidth) => basisWidth * screenWidth,
+        /**
+         * 相対高さ（0-1の値）を実際のピクセル高さに変換
+         * @param basisHeight 基準高さ（0-1）
+         * @returns 実際のピクセル高さ
+         */
+        relativeHeight: (basisHeight) => basisHeight * screenHeight,
+        /**
+         * 相対座標（0-1の値）を実際のピクセル座標に変換
+         * @param basisPos 相対座標 {x, y}（0-1）
+         * @returns 実際のピクセル座標
+         */
+        relativePos: (basisPos) => ({
+            x: basisPos.x * screenWidth,
+            y: basisPos.y * screenHeight,
+        }),
+    };
+};
+/**
+ * 画面サイズを取得するフック
+ * @returns 現在の画面サイズ {width, height}
+ */
+export const useScreenSize = () => {
+    const [screenSize] = useScreenSizeAtom();
+    return screenSize;
+};
+/**
+ * 画面のスケール倍率を取得するフック
+ * @returns 基準サイズに対するスケール倍率
+ */
+export const useScreenScale = () => {
+    const [{ height: screenHeight }] = useScreenSizeAtom();
+    return screenHeight / BasisHeight;
+};

package/dist/hooks/useTypewriter.d.ts

@@ -0,0 +1,11 @@
+export interface UseTypewriterOptions {
+    speed?: number;
+    onComplete?: () => void;
+}
+export declare const useTypewriter: (options?: UseTypewriterOptions) => {
+    displayText: string;
+    isTyping: boolean;
+    startTyping: (text: string) => void;
+    skipTyping: (text: string) => void;
+    reset: () => void;
+};