@luna-editor/engine 0.3.0 → 0.3.1

package/dist/hooks/useFontLoader.js

@@ -10,115 +10,137 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 import { useEffect, useRef, useState } from "react";
 // グローバルなフォントキャッシュ（ページ内で共有）
 const fontCache = new Set();
+/**
+ * Googleフォントの<link>タグを挿入し、CSSの読み込み完了を待つ
+ */
+function loadGoogleFontCSS(fontFamily) {
+    const existingLink = document.querySelector(`link[data-font-family="${fontFamily}"]`);
+    if (existingLink) {
+        return Promise.resolve();
+    }
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    // display=blockでフォント読み込みまでテキストを非表示にする（FOUTを防止）
+    link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(fontFamily)}:wght@400;700&display=block`;
+    link.setAttribute("data-font-family", fontFamily);
+    document.head.appendChild(link);
+    return new Promise((resolve) => {
+        link.onload = () => resolve();
+        link.onerror = () => {
+            console.warn(`Failed to load Google font CSS: ${fontFamily}`);
+            resolve();
+        };
+    });
+}
+/**
+ * Googleフォントのフォントデータを事前にダウンロード
+ * 400/700両方のウェイトをプリロードする
+ */
+function preloadGoogleFont(fontFamily, textToPreload) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            // 400と700両方のウェイトをプリロード
+            yield Promise.all([
+                document.fonts.load(`400 16px "${fontFamily}"`, textToPreload),
+                document.fonts.load(`700 16px "${fontFamily}"`, textToPreload),
+            ]);
+        }
+        catch (error) {
+            console.warn(`Failed to preload Google font: ${fontFamily}`, error);
+        }
+    });
+}
+/**
+ * カスタムフォントをFontFace APIで読み込み
+ */
+function loadCustomFont(fontFamily, url, fontName) {
+    return __awaiter(this, void 0, void 0, function* () {
+        try {
+            // 既にdocument.fontsに登録されているかチェック
+            let fontExists = false;
+            for (const existingFont of document.fonts) {
+                if (existingFont.family === fontFamily) {
+                    fontExists = true;
+                    break;
+                }
+            }
+            if (!fontExists) {
+                const fontFace = new FontFace(fontFamily, `url(${url})`);
+                yield fontFace.load();
+                document.fonts.add(fontFace);
+            }
+        }
+        catch (error) {
+            console.warn(`Failed to load custom font: ${fontName}`, error);
+        }
+    });
+}
 /**
  * フォントを読み込むカスタムフック
  * - Googleフォント: <link>タグで読み込み + document.fonts.load()でプリロード
  * - カスタムフォント: FontFace APIで読み込み
- * - すべてのフォントがプリロード&キャッシュされてからisLoaded=trueになる
+ * - すべてのフォントが完全にダウンロード&キャッシュされてからisLoaded=trueになる
+ * - 再生開始前に全フォントを一括ダウンロードし、再生中のフォントスワップを防止する
+ * - preloadText: シナリオ内の全テキストを渡すと、使用される全ての文字でフォントをプリロード
  */
-export function useFontLoader(fonts) {
+export function useFontLoader(fonts, preloadText) {
     const [isLoaded, setIsLoaded] = useState(false);
     const [loadedFonts, setLoadedFonts] = useState([]);
-    const loadingRef = useRef(false);
+    // 現在のロード処理をキャンセルするための世代カウンター
+    const generationRef = useRef(0);
     useEffect(() => {
         if (!fonts || fonts.length === 0) {
             setIsLoaded(true);
             return;
         }
-        // 既に読み込み中の場合はスキップ
-        if (loadingRef.current)
-            return;
-        loadingRef.current = true;
+        // 新しいロード処理を開始する際、前回の結果を無効化
+        const generation = ++generationRef.current;
+        setIsLoaded(false);
         const loadFonts = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
             const loadedFontFamilies = [];
-            const fontLoadPromises = [];
-            for (const font of fonts) {
-                // キャッシュにあればスキップ
-                if (fontCache.has(font.fontFamily)) {
+            const textToPreload = preloadText || "あいうえおABCabc123";
+            // すべてのGoogle FontsのCSS読み込みを並列で開始
+            const googleFonts = fonts.filter((f) => f.type === "google" && !fontCache.has(f.fontFamily));
+            const customFonts = fonts.filter((f) => f.type === "custom" && f.url && !fontCache.has(f.fontFamily));
+            const cachedFonts = fonts.filter((f) => fontCache.has(f.fontFamily));
+            // キャッシュ済みフォントは即座に追加
+            for (const font of cachedFonts) {
+                loadedFontFamilies.push(font.fontFamily);
+            }
+            // Google FontsのCSS読み込みを並列実行
+            yield Promise.all(googleFonts.map((font) => loadGoogleFontCSS(font.fontFamily)));
+            // キャンセルチェック
+            if (generation !== generationRef.current)
+                return;
+            // Google Fontsのフォントデータプリロード + カスタムフォント読み込みを並列実行
+            const allFontPromises = [];
+            for (const font of googleFonts) {
+                allFontPromises.push(preloadGoogleFont(font.fontFamily, textToPreload).then(() => {
+                    fontCache.add(font.fontFamily);
                     loadedFontFamilies.push(font.fontFamily);
-                    continue;
-                }
-                try {
-                    if (font.type === "google") {
-                        // Googleフォントを<link>タグで読み込み
-                        const existingLink = document.querySelector(`link[data-font-family="${font.fontFamily}"]`);
-                        if (!existingLink) {
-                            const link = document.createElement("link");
-                            link.rel = "stylesheet";
-                            link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(font.fontFamily)}:wght@400;700&display=swap`;
-                            link.setAttribute("data-font-family", font.fontFamily);
-                            document.head.appendChild(link);
-                            // CSSファイルの読み込み完了を待つ
-                            yield new Promise((resolve) => {
-                                link.onload = () => resolve();
-                                link.onerror = () => {
-                                    console.warn(`Failed to load Google font CSS: ${font.fontFamily}`);
-                                    resolve();
-                                };
-                            });
-                        }
-                        // フォントの実際の読み込み（プリロード）を開始
-                        // document.fonts.load()でフォントデータを事前にダウンロード
-                        const preloadPromise = document.fonts
-                            .load(`16px "${font.fontFamily}"`)
-                            .then(() => {
-                            fontCache.add(font.fontFamily);
-                            loadedFontFamilies.push(font.fontFamily);
-                        })
-                            .catch((error) => {
-                            console.warn(`Failed to preload Google font: ${font.fontFamily}`, error);
-                            // エラーでもキャッシュに追加（再試行防止）
-                            fontCache.add(font.fontFamily);
-                            loadedFontFamilies.push(font.fontFamily);
-                        });
-                        fontLoadPromises.push(preloadPromise);
-                    }
-                    else if (font.type === "custom" && font.url) {
-                        // カスタムフォントをFontFace APIで読み込み
-                        const loadCustomFont = () => __awaiter(this, void 0, void 0, function* () {
-                            try {
-                                // 既にdocument.fontsに登録されているかチェック
-                                let fontExists = false;
-                                for (const existingFont of document.fonts) {
-                                    if (existingFont.family === font.fontFamily) {
-                                        fontExists = true;
-                                        break;
-                                    }
-                                }
-                                if (!fontExists) {
-                                    const fontFace = new FontFace(font.fontFamily, `url(${font.url})`);
-                                    // フォントデータをダウンロード&パース
-                                    yield fontFace.load();
-                                    // document.fontsに追加（キャッシュとして機能）
-                                    document.fonts.add(fontFace);
-                                }
-                                fontCache.add(font.fontFamily);
-                                loadedFontFamilies.push(font.fontFamily);
-                            }
-                            catch (error) {
-                                console.warn(`Failed to load custom font: ${font.name}`, error);
-                                // エラーでもキャッシュに追加（再試行防止）
-                                fontCache.add(font.fontFamily);
-                                loadedFontFamilies.push(font.fontFamily);
-                            }
-                        });
-                        fontLoadPromises.push(loadCustomFont());
-                    }
-                }
-                catch (error) {
-                    console.warn(`Failed to load font: ${font.name}`, error);
-                }
+                }));
+            }
+            for (const font of customFonts) {
+                allFontPromises.push(loadCustomFont(font.fontFamily, (_a = font.url) !== null && _a !== void 0 ? _a : "", font.name).then(() => {
+                    fontCache.add(font.fontFamily);
+                    loadedFontFamilies.push(font.fontFamily);
+                }));
             }
-            // すべてのフォント読み込みを並列で待つ
-            yield Promise.all(fontLoadPromises);
+            yield Promise.all(allFontPromises);
+            // キャンセルチェック
+            if (generation !== generationRef.current)
+                return;
             // document.fonts.readyで全フォントの準備完了を確認
             yield document.fonts.ready;
+            // キャンセルチェック
+            if (generation !== generationRef.current)
+                return;
             setLoadedFonts(loadedFontFamilies);
             setIsLoaded(true);
-            loadingRef.current = false;
         });
         loadFonts();
-    }, [fonts]);
+    }, [fonts, preloadText]);
     return { isLoaded, loadedFonts };
 }
 /**
@@ -139,6 +161,23 @@ export function getFontFamilyStyle(selectedFontFamily, fonts) {
     // 選択されていない、または見つからない場合はデフォルト（最初の）フォントを使用
     return `"${fonts[0].fontFamily}", sans-serif`;
 }
+/**
+ * UIフォントファミリーに基づいてCSSのfont-family値を生成
+ * メニュー、ボタン、ラベルなどのUI要素に使用
+ */
+export function getUIFontFamilyStyle(selectedUIFontFamily, fonts) {
+    if (!fonts || fonts.length === 0) {
+        return "sans-serif";
+    }
+    if (selectedUIFontFamily) {
+        const selectedFont = fonts.find((f) => f.fontFamily === selectedUIFontFamily);
+        if (selectedFont) {
+            return `"${selectedUIFontFamily}", sans-serif`;
+        }
+    }
+    // 選択されていない、または見つからない場合はデフォルト（最初の）フォントを使用
+    return `"${fonts[0].fontFamily}", sans-serif`;
+}
 /**
  * フォントがキャッシュに存在するかチェック
  */

package/dist/hooks/useImagePreloader.d.ts

@@ -0,0 +1,5 @@
+import type { DisplayedCharacter } from "../types";
+export declare const useImagePreloader: (
+  displayedCharacters: DisplayedCharacter[],
+  singleImageUrl?: string
+) => boolean;

package/dist/hooks/useImagePreloader.js

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+export var useImagePreloader = function (displayedCharacters, singleImageUrl) {
+  var _a = useState(true),
+    isLoading = _a[0],
+    setIsLoading = _a[1];
+  useEffect(
+    function () {
+      var imageUrls = [];
+      // 複数キャラクター表示の場合
+      if (displayedCharacters.length > 0) {
+        displayedCharacters.forEach(function (char) {
+          if (char.entityState.imageUrl) {
+            imageUrls.push(char.entityState.imageUrl);
+          }
+        });
+      } else if (singleImageUrl) {
+        // 単一キャラクター表示の場合
+        imageUrls.push(singleImageUrl);
+      }
+      // 画像がない場合は即座に完了
+      if (imageUrls.length === 0) {
+        setIsLoading(false);
+        return;
+      }
+      setIsLoading(true);
+      // すべての画像を並列でプリロード
+      var loadPromises = imageUrls.map(function (url) {
+        return new Promise(function (resolve, reject) {
+          var img = new Image();
+          img.onload = function () {
+            return resolve();
+          };
+          img.onerror = function () {
+            return reject(new Error("Failed to load image: ".concat(url)));
+          };
+          img.src = url;
+        });
+      });
+      // すべての画像の読み込みを待つ
+      Promise.all(loadPromises)
+        .then(function () {
+          setIsLoading(false);
+        })
+        .catch(function (error) {
+          console.error("Image preload error:", error);
+          // エラーが発生しても続行
+          setIsLoading(false);
+        });
+    },
+    [displayedCharacters, singleImageUrl]
+  );
+  return isLoading;
+};

package/dist/hooks/usePluginAPI.js

@@ -37,6 +37,6 @@ export function useUIVisibility(type) {
         // UI 状態の変更を監視
         const unsubscribe = pluginManager.subscribeUIVisibility(type, setIsVisible);
         return unsubscribe;
-    }, [pluginManager, type]);
+    }, [type]);
     return isVisible;
 }

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { aspectRatio, BasisHeight, BasisWidth } from "./constants/screen-size";
 export type { AudioSettings } from "./contexts/AudioContext";
 export { useAudioSettings } from "./contexts/AudioContext";
 export { useDataAPI } from "./contexts/DataContext";
+export { getFontFamilyStyle, getUIFontFamilyStyle, } from "./hooks/useFontLoader";
 export { setGlobalUIAPI, usePluginAPI, useUIVisibility, } from "./hooks/usePluginAPI";
 export { useScreenScale, useScreenSize, useToPixel, } from "./hooks/useScreenSize";
 export { Player } from "./Player";

package/dist/index.js

@@ -5,6 +5,7 @@ export { OverlayUI } from "./components/OverlayUI";
 export { aspectRatio, BasisHeight, BasisWidth } from "./constants/screen-size";
 export { useAudioSettings } from "./contexts/AudioContext";
 export { useDataAPI } from "./contexts/DataContext";
+export { getFontFamilyStyle, getUIFontFamilyStyle, } from "./hooks/useFontLoader";
 export { setGlobalUIAPI, usePluginAPI, useUIVisibility, } from "./hooks/usePluginAPI";
 export { useScreenScale, useScreenSize, useToPixel, } from "./hooks/useScreenSize";
 export { Player } from "./Player";

package/dist/plugin/PluginManager.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { type ActionExecutionContext, type ActionNodeDefinition, type BlockChangeContext, type CharacterContext, type CharacterSpeakContext, ComponentType, type DialogueContext, type LunaPlugin, type ScenarioContext, type ScenarioReadyContext, type UIAPI } from "../sdk";
+import { type ActionExecutionContext, type ActionNodeDefinition, type BlockChangeContext, type CharacterContext, type CharacterSpeakContext, ComponentType, type DataAPI, type DialogueContext, type LunaPlugin, type ScenarioContext, type ScenarioReadyContext, type UIAPI } from "../sdk";
 export interface LoadedPlugin {
     plugin: LunaPlugin;
     instance: PluginInstance;
@@ -27,12 +27,15 @@ export interface PluginInstance {
     styles: Map<string, string[]>;
     effects: Map<string, HTMLElement>;
     overlays: Map<string, HTMLElement>;
-    components: Map<ComponentType, React.ComponentType<unknown>>;
+    components: Map<ComponentType, React.ComponentType<{
+        dataAPI?: DataAPI;
+    }>>;
     assetUrls: Map<string, string>;
 }
 export declare class PluginManager {
     private plugins;
     private styleElements;
+    private originalClassNames;
     private injectedStyles;
     private storage;
     private componentRegistry;
@@ -40,6 +43,8 @@ export declare class PluginManager {
     private uiVisibilityListeners;
     private selectChoiceCallback;
     private getBranchStateCallback;
+    private emotionEffectUpdaterCallback;
+    private dataContextGetter;
     private preloadPromises;
     private muteAudio;
     private workSounds;
@@ -47,12 +52,20 @@ export declare class PluginManager {
     private clickSoundVolume;
     private clickSoundOverridden;
     constructor();
+    /**
+     * 開発環境かどうかを判定
+     * localhost、127.0.0.1、またはポート3000で実行されている場合に true を返す
+     */
+    private isDevelopment;
     /**
      * グローバルReactランタイムを初期化（クライアントサイドのみ）
      * 既に初期化済みの場合はスキップ
      */
     private initializeReactRuntime;
-    loadPlugin(packageName: string, bundleUrl: string, config?: unknown): Promise<void>;
+    loadPlugin(packageName: string, bundleUrl: string, config?: unknown, assets?: {
+        filename: string;
+        url: string;
+    }[]): Promise<void>;
     private doLoadPlugin;
     private loadPluginScript;
     private createPluginAPI;
@@ -65,7 +78,9 @@ export declare class PluginManager {
     setPluginEnabled(packageName: string, enabled: boolean): void;
     cleanup(): void;
     private findPluginByComponentType;
-    getComponent(type: ComponentType): React.ComponentType | null;
+    getComponent(type: ComponentType): React.ComponentType<{
+        dataAPI?: DataAPI;
+    }> | null;
     hasComponent(type: ComponentType): boolean;
     getRegisteredComponents(): ComponentType[];
     /**
@@ -119,6 +134,8 @@ export declare class PluginManager {
     hideUI(type: ComponentType): void;
     setSelectChoiceCallback(callback: (choiceId: string) => void): void;
     setGetBranchStateCallback(callback: () => import("../types").ConversationBranchState | null): void;
+    setEmotionEffectUpdaterCallback(callback: (state: import("../sdk").EmotionEffectState | null) => void): void;
+    setDataContextGetter(callback: () => import("../sdk").DataContext | null): void;
     /**
      * 全てのアセットプリロードが完了するまで待機
      * @returns プリロード完了時にresolveするPromise