@luna-editor/engine 0.1.0

package/dist/plugin/PluginManager.js

@@ -0,0 +1,851 @@
+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());
+    });
+};
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import { useScreenSizeAtom } from "../atoms/screen-size";
+import { useDataAPI } from "../contexts/DataContext";
+import { usePluginAPI, useUIVisibility } from "../hooks/usePluginAPI";
+import { useScreenScale, useScreenSize, useToPixel, } from "../hooks/useScreenSize";
+import { ComponentType, } from "../sdk";
+export class PluginManager {
+    constructor() {
+        this.plugins = new Map();
+        this.styleElements = new Map();
+        this.injectedStyles = new Set();
+        this.storage = new Map();
+        this.componentRegistry = new Map();
+        this.uiVisibilityState = new Map();
+        this.uiVisibilityListeners = new Map();
+        this.initializeReactRuntime();
+    }
+    /**
+     * グローバルReactランタイムを初期化（クライアントサイドのみ）
+     */
+    initializeReactRuntime() {
+        // サーバーサイドではスキップ
+        if (typeof window === "undefined") {
+            return;
+        }
+        // JSXランタイム
+        window.__LUNA_JSX_RUNTIME__ = {
+            jsx: (type, props, key) => {
+                return React.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+            },
+            jsxs: (type, props, key) => {
+                return React.createElement(type, key ? Object.assign(Object.assign({}, props), { key }) : props);
+            },
+            Fragment: React.Fragment,
+        };
+        // Reactランタイム (useDataAPIフックと画面サイズフックを含む)
+        window.__LUNA_REACT_RUNTIME__ = Object.assign(Object.assign({}, React), { default: React, useDataAPI,
+            usePluginAPI,
+            useUIVisibility,
+            useToPixel,
+            useScreenSize,
+            useScreenScale,
+            useScreenSizeAtom,
+            ComponentType });
+        console.log("🔧 Luna React Runtime initialized for JSX support with hooks and screen size system");
+    }
+    loadPlugin(packageName, bundleUrl, config) {
+        return __awaiter(this, void 0, void 0, function* () {
+            try {
+                // スクリプトタグで動的にプラグインを読み込む
+                const plugin = yield this.loadPluginScript(bundleUrl, packageName);
+                const instance = {
+                    actionNodes: new Map(),
+                    hooks: {},
+                    styles: new Map(),
+                    effects: new Map(),
+                    overlays: new Map(),
+                    components: new Map(),
+                    assetUrls: new Map(),
+                };
+                // プラグインAPIを作成
+                const api = this.createPluginAPI(packageName, instance);
+                // プラグインをセットアップ
+                plugin.setup(api);
+                console.log(`Plugin ${packageName} setup completed. Hooks:`, Object.keys(instance.hooks));
+                this.plugins.set(packageName, {
+                    plugin,
+                    instance,
+                    enabled: true,
+                    config: config || {},
+                });
+            }
+            catch (error) {
+                console.error(`Failed to load plugin ${packageName}:`, error);
+            }
+        });
+    }
+    loadPluginScript(url, packageName) {
+        return new Promise((resolve, reject) => {
+            // グローバル変数名を生成
+            const globalName = `__luna_plugin_${packageName.replace(/[@/-]/g, "_")}__`;
+            // グローバルコールバック関数を設定
+            // @ts-expect-error - 動的なグローバル変数の設定
+            window[globalName] = (plugin) => {
+                // プラグインを受け取ったらグローバル変数をクリーンアップ
+                // @ts-expect-error - 動的なグローバル変数の削除
+                delete window[globalName];
+                resolve(plugin);
+            };
+            const script = document.createElement("script");
+            script.type = "text/javascript";
+            script.dataset.plugin = packageName;
+            // エラーハンドリング
+            script.onerror = () => {
+                // @ts-expect-error - 動的なグローバル変数の削除
+                delete window[globalName];
+                reject(new Error(`Failed to load plugin script: ${url}`));
+            };
+            // プラグインバンドルをfetchで取得して実行
+            // 開発環境ではキャッシュを無効化してホットリロードを確実に動作させる
+            const isDevelopment = window.location.hostname === "localhost" ||
+                window.location.hostname === "127.0.0.1" ||
+                window.location.port === "3000";
+            const fetchOptions = isDevelopment
+                ? {
+                    cache: "no-cache",
+                    headers: {
+                        "Cache-Control": "no-cache, no-store, must-revalidate",
+                        Pragma: "no-cache",
+                    },
+                }
+                : {};
+            console.log(`🔄 Loading plugin ${packageName} (dev: ${isDevelopment}, cache: ${isDevelopment ? "disabled" : "enabled"})`);
+            fetch(url, fetchOptions)
+                .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return response.text();
+            })
+                .then((code) => {
+                const processedCode = code
+                    // import文を削除
+                    .replace(/^import\s+.*?from\s+['"].*?['"];?\s*$/gm, "")
+                    .replace(/export\s*{[^}]*}\s*;?\s*$/g, "")
+                    .replace(/export\s+default\s+/g, "")
+                    // luna-react/jsxランタイムへの参照を置換
+                    .replace(/from\s+['"]luna-react\/jsx-runtime['"]/, 'from "__LUNA_JSX_RUNTIME__"')
+                    .replace(/from\s+['"]luna-react['"]/, 'from "__LUNA_REACT__"')
+                    .replace(/require\(['"]luna-react\/jsx-runtime['"]\)/, 'require("__LUNA_JSX_RUNTIME__")')
+                    .replace(/require\(['"]luna-react['"]\)/, 'require("__LUNA_REACT__")');
+                // ES modules形式のプラグインコードを処理
+                const wrappedCode = `
+						(function() {
+							let pluginExport;
+
+							// definePlugin関数を提供
+							const definePlugin = function(plugin) {
+								pluginExport = plugin;
+								return plugin;
+							};
+
+							// CommonJS互換のexportsオブジェクト
+							const exports = {};
+							const module = { exports };
+
+							// Luna React Runtime を提供
+							const require = function(moduleName) {
+								if (moduleName === "__LUNA_REACT__" || moduleName === "luna-react" || moduleName === "react" || moduleName === "@luna-editor/engine") {
+									return window.__LUNA_REACT_RUNTIME__;
+								}
+								if (moduleName === "__LUNA_JSX_RUNTIME__" || moduleName === "luna-react/jsx-runtime" || moduleName === "react/jsx-runtime" || moduleName === "react/jsx-dev-runtime") {
+									return window.__LUNA_JSX_RUNTIME__;
+								}
+								throw new Error('Module not found: ' + moduleName);
+							};
+
+							try {
+								// プラグインコードを実行
+								${processedCode}
+
+								// プラグインを取得
+								if (pluginExport) {
+									window['${globalName}'](pluginExport);
+								} else if (module.exports && module.exports.default) {
+									window['${globalName}'](module.exports.default);
+								} else if (exports.default) {
+									window['${globalName}'](exports.default);
+								} else {
+									throw new Error('Plugin export not found');
+								}
+							} catch (error) {
+								console.error('Plugin execution error:', error);
+								throw error;
+							}
+						})();
+					`;
+                // スクリプトタグを作成
+                const scriptElement = document.createElement("script");
+                scriptElement.type = "text/javascript";
+                scriptElement.dataset.plugin = packageName;
+                scriptElement.textContent = wrappedCode;
+                // タイムアウトを設定（グローバルコールバックが5秒以内に呼ばれない場合はエラー）
+                const timeoutId = setTimeout(() => {
+                    if (window[globalName]) {
+                        delete window[globalName];
+                        reject(new Error(`Plugin ${packageName} did not initialize within timeout`));
+                    }
+                }, 5000);
+                // グローバルコールバック関数にタイムアウトクリアを追加
+                const originalCallback = window[globalName];
+                window[globalName] = (plugin) => {
+                    clearTimeout(timeoutId);
+                    originalCallback(plugin);
+                };
+                // DOMに追加（この時点で同期的に実行される）
+                document.head.appendChild(scriptElement);
+            })
+                .catch((error) => {
+                // @ts-expect-error - 動的なグローバル変数の削除
+                delete window[globalName];
+                reject(error);
+            });
+        });
+    }
+    createPluginAPI(packageName, instance) {
+        const createStyleElement = (elementName) => {
+            const classNames = new Set();
+            instance.styles.set(elementName, []);
+            return {
+                setClassName: (className) => {
+                    classNames.clear();
+                    className.split(" ").forEach((cn) => classNames.add(cn));
+                    instance.styles.set(elementName, Array.from(classNames));
+                    this.applyStyles(elementName, Array.from(classNames));
+                },
+                addClassName: (className) => {
+                    className.split(" ").forEach((cn) => classNames.add(cn));
+                    instance.styles.set(elementName, Array.from(classNames));
+                    this.applyStyles(elementName, Array.from(classNames));
+                },
+                removeClassName: (className) => {
+                    className.split(" ").forEach((cn) => classNames.delete(cn));
+                    instance.styles.set(elementName, Array.from(classNames));
+                    this.applyStyles(elementName, Array.from(classNames));
+                },
+                toggleClassName: (className) => {
+                    className.split(" ").forEach((cn) => {
+                        if (classNames.has(cn)) {
+                            classNames.delete(cn);
+                        }
+                        else {
+                            classNames.add(cn);
+                        }
+                    });
+                    instance.styles.set(elementName, Array.from(classNames));
+                    this.applyStyles(elementName, Array.from(classNames));
+                },
+                setStyle: (style) => {
+                    const element = this.styleElements.get(elementName);
+                    if (element) {
+                        Object.assign(element.style, style);
+                    }
+                },
+                when: (condition, className) => {
+                    if (condition()) {
+                        classNames.add(className);
+                    }
+                    else {
+                        classNames.delete(className);
+                    }
+                    instance.styles.set(elementName, Array.from(classNames));
+                    this.applyStyles(elementName, Array.from(classNames));
+                },
+                // オーバーレイ機能を追加
+                setOverlay: (options) => {
+                    var _a, _b;
+                    const overlayId = options.id || `${packageName}-overlay-${elementName}-${Date.now()}`;
+                    const targetElement = this.styleElements.get(elementName);
+                    if (!targetElement) {
+                        console.warn(`❌ [Overlay] Target element not found for overlay: ${elementName}`);
+                        return overlayId;
+                    }
+                    // 既存のオーバーレイを削除
+                    if (options.id && instance.overlays.has(options.id)) {
+                        this.removeOverlay(options.id, instance);
+                    }
+                    // オーバーレイ要素を作成
+                    const overlay = document.createElement("div");
+                    overlay.id = overlayId;
+                    // ターゲット要素内の画像を探してマスクを適用
+                    const targetImage = targetElement.querySelector("img");
+                    let maskStyles = {};
+                    if (targetImage && targetImage.src) {
+                        // 画像のスタイルプロパティを取得
+                        const computedImageStyle = getComputedStyle(targetImage);
+                        const objectFit = computedImageStyle.objectFit;
+                        const objectPosition = computedImageStyle.objectPosition;
+                        // マスクは画像と同じobject-fitとobject-positionを使用
+                        maskStyles = {
+                            maskImage: `url(${targetImage.src})`,
+                            maskRepeat: "no-repeat",
+                            maskPosition: objectPosition || "center",
+                            maskSize: objectFit === "contain"
+                                ? "contain"
+                                : objectFit === "cover"
+                                    ? "cover"
+                                    : "100% 100%",
+                            WebkitMaskImage: `url(${targetImage.src})`,
+                            WebkitMaskRepeat: "no-repeat",
+                            WebkitMaskPosition: objectPosition || "center",
+                            WebkitMaskSize: objectFit === "contain"
+                                ? "contain"
+                                : objectFit === "cover"
+                                    ? "cover"
+                                    : "100% 100%",
+                        };
+                    }
+                    const overlayStyles = Object.assign({ position: "absolute", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: options.color, opacity: String((_a = options.opacity) !== null && _a !== void 0 ? _a : 1), mixBlendMode: options.blendMode || "normal", zIndex: String((_b = options.zIndex) !== null && _b !== void 0 ? _b : 1000), pointerEvents: "none", transition: options.duration
+                            ? `opacity ${options.duration}ms ease`
+                            : "none" }, maskStyles);
+                    // スタイルを個別に適用
+                    Object.entries(overlayStyles).forEach(([key, value]) => {
+                        if (typeof value === "string") {
+                            overlay.style[key] = value;
+                        }
+                    });
+                    overlay.dataset.plugin = packageName;
+                    overlay.dataset.overlay = "true";
+                    overlay.dataset.overlayElement = elementName;
+                    // ターゲット要素にrelative positionを設定
+                    const originalPosition = getComputedStyle(targetElement).position;
+                    if (originalPosition === "static") {
+                        targetElement.style.position = "relative";
+                    }
+                    targetElement.appendChild(overlay);
+                    instance.overlays.set(overlayId, overlay);
+                    return overlayId;
+                },
+                removeOverlay: (overlayId) => {
+                    this.removeOverlay(overlayId, instance);
+                },
+                clearOverlays: () => {
+                    const overlaysToRemove = Array.from(instance.overlays.keys()).filter((id) => id.includes(`-overlay-${elementName}-`));
+                    overlaysToRemove.forEach((id) => this.removeOverlay(id, instance));
+                },
+            };
+        };
+        const styleAPI = {
+            elements: {
+                speakerName: createStyleElement("speakerName"),
+                scenarioBlockContent: createStyleElement("scenarioBlockContent"),
+                dialogueBox: createStyleElement("dialogueBox"),
+                gameScreen: createStyleElement("gameScreen"),
+                characterSprite: createStyleElement("characterSprite"),
+                background: createStyleElement("background"),
+            },
+            injectCSS: (css) => {
+                if (this.injectedStyles.has(css))
+                    return;
+                const style = document.createElement("style");
+                style.textContent = css;
+                style.dataset.plugin = packageName;
+                document.head.appendChild(style);
+                this.injectedStyles.add(css);
+            },
+            enableTailwind: () => {
+                if (!document.querySelector('script[src*="tailwindcss"]')) {
+                    const script = document.createElement("script");
+                    script.src = "https://cdn.tailwindcss.com";
+                    script.dataset.plugin = packageName;
+                    document.head.appendChild(script);
+                }
+            },
+        };
+        const effectAPI = {
+            show: (options) => {
+                const effectId = `${packageName}-effect-${Date.now()}-${Math.random()}`;
+                const container = document.createElement("div");
+                container.id = effectId;
+                container.className = options.className || "";
+                container.innerHTML = options.html;
+                // ターゲット要素を取得
+                let targetElement = null;
+                if (options.target === "speaker") {
+                    targetElement = document.querySelector("[data-character-sprite]");
+                }
+                else if (options.target === "dialogue") {
+                    targetElement = document.querySelector("[data-dialogue-element]");
+                }
+                else if (options.target === "screen") {
+                    targetElement = document.body;
+                }
+                else if (options.target instanceof HTMLElement) {
+                    targetElement = options.target;
+                }
+                if (targetElement) {
+                    if (options.position === "precise") {
+                        // Precise mode: minimal container setup, let plugin handle all positioning
+                        container.style.position = "absolute";
+                        container.style.top = "0";
+                        container.style.left = "0";
+                        container.style.zIndex = "1000"; // Higher z-index for better visibility
+                        // Don't set pointerEvents to none - let plugin handle interactions
+                    }
+                    else {
+                        // Standard positioning mode
+                        container.style.position = "relative";
+                        container.style.zIndex = "50"; // Tailwindのz-50相当(z-index: 50)
+                        // ターゲット要素の親要素にpositionを設定
+                        const parentElement = targetElement.parentElement;
+                        if (parentElement) {
+                            // 相対位置設定のために親要素をrelativeにする
+                            const originalPosition = parentElement.style.position;
+                            if (!originalPosition || originalPosition === "static") {
+                                parentElement.style.position = "relative";
+                            }
+                            // エフェクトコンテナのスタイル設定
+                            container.style.position = "absolute";
+                            switch (options.position) {
+                                case "above":
+                                    container.style.bottom = "100%";
+                                    container.style.left = "50%";
+                                    container.style.transform = "translateX(-50%)";
+                                    break;
+                                case "below":
+                                    container.style.top = "100%";
+                                    container.style.left = "50%";
+                                    container.style.transform = "translateX(-50%)";
+                                    break;
+                                case "left":
+                                    container.style.right = "100%";
+                                    container.style.top = "50%";
+                                    container.style.transform = "translateY(-50%)";
+                                    break;
+                                case "right":
+                                    container.style.left = "100%";
+                                    container.style.top = "50%";
+                                    container.style.transform = "translateY(-50%)";
+                                    break;
+                                case "center":
+                                    container.style.top = "50%";
+                                    container.style.left = "50%";
+                                    container.style.transform = "translate(-50%, -50%)";
+                                    break;
+                            }
+                        }
+                    }
+                    targetElement.appendChild(container);
+                    instance.effects.set(effectId, container);
+                    // アニメーション
+                    if (options.animation && options.animation !== "none") {
+                        container.style.animation = `${options.animation} 0.3s ease-out`;
+                    }
+                    // 自動削除
+                    if (options.duration) {
+                        setTimeout(() => {
+                            this.hideEffect(effectId, instance);
+                        }, options.duration);
+                    }
+                }
+                return effectId;
+            },
+            hide: (effectId) => {
+                this.hideEffect(effectId, instance);
+            },
+            hideAll: () => {
+                instance.effects.forEach((_, effectId) => {
+                    this.hideEffect(effectId, instance);
+                });
+            },
+        };
+        const storageAPI = {
+            get: (key) => {
+                const fullKey = `${packageName}:${key}`;
+                return this.storage.get(fullKey);
+            },
+            set: (key, value) => {
+                const fullKey = `${packageName}:${key}`;
+                this.storage.set(fullKey, value);
+            },
+            remove: (key) => {
+                const fullKey = `${packageName}:${key}`;
+                this.storage.delete(fullKey);
+            },
+            clear: () => {
+                // プラグイン固有のストレージのみクリア
+                const keysToDelete = [];
+                for (const [key] of this.storage) {
+                    if (key.startsWith(`${packageName}:`)) {
+                        keysToDelete.push(key);
+                    }
+                }
+                keysToDelete.forEach((key) => this.storage.delete(key));
+            },
+        };
+        const assetAPI = {
+            getUrl: (filename) => {
+                // プラグインアセットのAPIエンドポイントを返す（URLエンコーディング対応）
+                const encodedPackageName = encodeURIComponent(packageName);
+                const encodedFilename = encodeURIComponent(filename);
+                const url = `/api/plugin/${encodedPackageName}/assets/${encodedFilename}`;
+                // instance内にURLを保存（Context API経由でアクセス可能にするため）
+                instance.assetUrls.set(filename, url);
+                return url;
+            },
+            preload: (filenames) => __awaiter(this, void 0, void 0, function* () {
+                const promises = filenames.map((filename) => {
+                    const url = assetAPI.getUrl(filename);
+                    if (filename.match(/\.(png|jpg|jpeg|gif|webp)$/i)) {
+                        return new Promise((resolve, reject) => {
+                            const img = new Image();
+                            img.onload = () => resolve();
+                            img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+                            img.src = url;
+                        });
+                    }
+                    if (filename.match(/\.(mp3|wav|ogg)$/i)) {
+                        return new Promise((resolve, reject) => {
+                            const audio = new Audio();
+                            audio.oncanplaythrough = () => resolve();
+                            audio.onerror = () => reject(new Error(`Failed to load audio: ${url}`));
+                            audio.src = url;
+                        });
+                    }
+                    return Promise.resolve();
+                });
+                yield Promise.all(promises);
+            }),
+            playSound: (filename, options) => {
+                console.log("playing sound", filename);
+                console.log("url:", assetAPI.getUrl(filename));
+                const audio = new Audio(assetAPI.getUrl(filename));
+                if ((options === null || options === void 0 ? void 0 : options.volume) !== undefined) {
+                    audio.volume = options.volume;
+                }
+                if (options === null || options === void 0 ? void 0 : options.loop) {
+                    audio.loop = true;
+                }
+                audio.play().catch((error) => {
+                    console.error("Failed to play sound:", error);
+                });
+            },
+            stopSound: (_filename) => {
+                // eslint-disable-line @typescript-eslint/no-unused-vars
+                // TODO: 音声停止の実装
+            },
+        };
+        const componentAPI = {
+            registerComponent: (type, component) => {
+                // Check if component type is already registered by another plugin
+                if (this.componentRegistry.has(type)) {
+                    const existingPlugin = this.findPluginByComponentType(type);
+                    console.error(`Component type "${type}" is already registered by plugin "${existingPlugin}". Registration from "${packageName}" rejected.`);
+                    return;
+                }
+                instance.components.set(type, component);
+                this.componentRegistry.set(type, component);
+                console.log(`Plugin ${packageName} registered component: ${type}`);
+            },
+        };
+        const uiAPI = {
+            show: (type) => {
+                this.setUIVisibility(type, true);
+            },
+            hide: (type) => {
+                this.setUIVisibility(type, false);
+            },
+            toggle: (type) => {
+                const currentState = this.uiVisibilityState.get(type) || false;
+                this.setUIVisibility(type, !currentState);
+            },
+            isVisible: (type) => {
+                return this.uiVisibilityState.get(type) || false;
+            },
+        };
+        return {
+            style: styleAPI,
+            components: componentAPI,
+            ui: uiAPI,
+            React: React,
+            defineActionNode: (definition) => {
+                instance.actionNodes.set(definition.type, definition);
+            },
+            setNextCharacterSpeakHandler: (callback) => {
+                instance.hooks.characterSpeakHandler = callback;
+            },
+            getConfig: () => {
+                const pluginEntry = this.plugins.get(packageName);
+                return (pluginEntry === null || pluginEntry === void 0 ? void 0 : pluginEntry.config) || {};
+            },
+            hooks: {
+                onInit: (callback) => {
+                    instance.hooks.onInit = callback;
+                },
+                onScenarioReady: (callback) => {
+                    instance.hooks.onScenarioReady = callback;
+                },
+                onBlockChange: (callback) => {
+                    instance.hooks.onBlockChange = callback;
+                },
+                onCharacterEnter: (callback) => {
+                    instance.hooks.onCharacterEnter = callback;
+                },
+                onCharacterExit: (callback) => {
+                    instance.hooks.onCharacterExit = callback;
+                },
+                onDialogueShow: (callback) => {
+                    instance.hooks.onDialogueShow = callback;
+                },
+                onActionExecute: (callback) => {
+                    instance.hooks.onActionExecute = callback;
+                },
+                onScenarioStart: (callback) => {
+                    instance.hooks.onScenarioStart = callback;
+                },
+                onScenarioEnd: (callback) => {
+                    instance.hooks.onScenarioEnd = callback;
+                },
+            },
+            effects: effectAPI,
+            storage: storageAPI,
+            assets: assetAPI,
+            data: {
+                get: () => {
+                    throw new Error("DataAPI.get() can only be called from within DataProvider context");
+                },
+                subscribe: () => {
+                    throw new Error("DataAPI.subscribe() can only be called from within DataProvider context");
+                },
+                watch: () => {
+                    throw new Error("DataAPI.watch() can only be called from within DataProvider context");
+                },
+            },
+        };
+    }
+    applyStyles(elementName, classNames) {
+        const element = this.styleElements.get(elementName);
+        if (element) {
+            element.className = classNames.join(" ");
+        }
+    }
+    hideEffect(effectId, instance) {
+        const element = instance.effects.get(effectId);
+        if (element) {
+            element.remove();
+            instance.effects.delete(effectId);
+        }
+    }
+    removeOverlay(overlayId, instance) {
+        const overlay = instance.overlays.get(overlayId);
+        if (overlay) {
+            overlay.remove();
+            instance.overlays.delete(overlayId);
+        }
+    }
+    registerStyleElement(name, element) {
+        // DOM要素にdata-style-element-name属性を追加
+        element.setAttribute("data-style-element-name", name);
+        this.styleElements.set(name, element);
+    }
+    // フック呼び出しメソッド
+    callHook(hookName, ...args) {
+        console.log(`Calling hook: ${hookName}`, args);
+        console.log(`Number of plugins: ${this.plugins.size}`);
+        this.plugins.forEach((loadedPlugin, packageName) => {
+            const { instance, enabled } = loadedPlugin;
+            console.log(`Plugin ${packageName}: enabled=${enabled}, has hook=${!!instance.hooks[hookName]}`);
+            if (enabled && instance.hooks[hookName]) {
+                try {
+                    console.log(`Executing hook ${hookName} for plugin ${packageName}`);
+                    const hook = instance.hooks[hookName];
+                    if (hook) {
+                        hook(...args);
+                    }
+                }
+                catch (error) {
+                    console.error(`Plugin hook error (${hookName}):`, error);
+                }
+            }
+        });
+    }
+    // ActionNode実行
+    executeActionNode(nodeType, context) {
+        return __awaiter(this, void 0, void 0, function* () {
+            for (const [, loadedPlugin] of this.plugins) {
+                const { instance, enabled } = loadedPlugin;
+                if (enabled && instance.actionNodes.has(nodeType)) {
+                    const definition = instance.actionNodes.get(nodeType);
+                    if (!definition)
+                        continue;
+                    try {
+                        // contextをActionExecutionContextとして扱う
+                        yield definition.execute(context);
+                    }
+                    catch (error) {
+                        console.error(`Action node execution error (${nodeType}):`, error);
+                    }
+                }
+            }
+        });
+    }
+    // プラグインの有効/無効切り替え
+    setPluginEnabled(packageName, enabled) {
+        const plugin = this.plugins.get(packageName);
+        if (plugin) {
+            plugin.enabled = enabled;
+        }
+    }
+    // クリーンアップ
+    cleanup() {
+        // 注入されたスタイルを削除
+        document
+            .querySelectorAll("style[data-plugin]")
+            .forEach((el) => el.remove());
+        document
+            .querySelectorAll("script[data-plugin]")
+            .forEach((el) => el.remove());
+        // エフェクトを削除
+        this.plugins.forEach(({ instance }) => {
+            instance.effects.forEach((effect) => effect.remove());
+        });
+        this.plugins.clear();
+        this.styleElements.clear();
+        this.injectedStyles.clear();
+        this.storage.clear();
+        this.componentRegistry.clear();
+    }
+    // Component registry helper methods
+    findPluginByComponentType(type) {
+        for (const [packageName, plugin] of this.plugins) {
+            if (plugin.instance.components.has(type)) {
+                return packageName;
+            }
+        }
+        return null;
+    }
+    getComponent(type) {
+        return this.componentRegistry.get(type) || null;
+    }
+    hasComponent(type) {
+        return this.componentRegistry.has(type);
+    }
+    getRegisteredComponents() {
+        return Array.from(this.componentRegistry.keys());
+    }
+    /**
+     * Get ActionNode definition by type
+     */
+    getActionNodeDefinition(type) {
+        for (const [, { instance }] of this.plugins) {
+            // First try direct type match
+            const directMatch = instance.actionNodes.get(type);
+            if (directMatch) {
+                return directMatch;
+            }
+            // If no direct match, try to find by displayName (for backwards compatibility)
+            for (const [, definition] of instance.actionNodes) {
+                if (definition.displayName === type) {
+                    return definition;
+                }
+            }
+        }
+        return undefined;
+    }
+    /**
+     * プラグインのアセットURLを取得
+     * @param packageName - プラグインのパッケージ名
+     * @param filename - アセットファイル名
+     * @returns アセットのURL（見つからない場合は空文字列）
+     */
+    getPluginAssetUrl(packageName, filename) {
+        const plugin = this.plugins.get(packageName);
+        if (!plugin) {
+            return "";
+        }
+        return plugin.instance.assetUrls.get(filename) || "";
+    }
+    /**
+     * UI コンポーネントの表示状態を設定
+     * @param type - コンポーネントタイプ
+     * @param visible - 表示状態
+     */
+    setUIVisibility(type, visible) {
+        this.uiVisibilityState.set(type, visible);
+        // リスナーに通知
+        const listeners = this.uiVisibilityListeners.get(type);
+        if (listeners) {
+            listeners.forEach((listener) => listener(visible));
+        }
+    }
+    /**
+     * UI コンポーネントの表示状態を取得
+     * @param type - コンポーネントタイプ
+     * @returns 表示状態
+     */
+    getUIVisibility(type) {
+        return this.uiVisibilityState.get(type) || false;
+    }
+    /**
+     * UI コンポーネントの表示状態変更を監視
+     * @param type - コンポーネントタイプ
+     * @param listener - コールバック関数
+     * @returns リスナーを削除する関数
+     */
+    subscribeUIVisibility(type, listener) {
+        if (!this.uiVisibilityListeners.has(type)) {
+            this.uiVisibilityListeners.set(type, new Set());
+        }
+        const listeners = this.uiVisibilityListeners.get(type);
+        listeners.add(listener);
+        // 現在の状態を即座に通知
+        listener(this.uiVisibilityState.get(type) || false);
+        // アンサブスクライブ関数を返す
+        return () => {
+            listeners.delete(listener);
+        };
+    }
+    /**
+     * UIAPIを取得する（プラグインコンポーネントで使用可能にするため）
+     */
+    getUIAPI() {
+        return {
+            show: (type) => {
+                this.setUIVisibility(type, true);
+            },
+            hide: (type) => {
+                this.setUIVisibility(type, false);
+            },
+            toggle: (type) => {
+                const currentState = this.uiVisibilityState.get(type) || false;
+                this.setUIVisibility(type, !currentState);
+            },
+            isVisible: (type) => {
+                return this.uiVisibilityState.get(type) || false;
+            },
+        };
+    }
+    /**
+     * UI コンポーネントの表示/非表示を切り替え
+     * @param type - コンポーネントタイプ
+     */
+    toggleUIVisibility(type) {
+        const currentState = this.uiVisibilityState.get(type) || false;
+        this.setUIVisibility(type, !currentState);
+    }
+    /**
+     * UI コンポーネントを表示
+     * @param type - コンポーネントタイプ
+     */
+    showUI(type) {
+        this.setUIVisibility(type, true);
+    }
+    /**
+     * UI コンポーネントを非表示
+     * @param type - コンポーネントタイプ
+     */
+    hideUI(type) {
+        this.setUIVisibility(type, false);
+    }
+}