@plaidev/karte-action-sdk 1.1.179-28041859.8b5339d0 → 1.1.180-28041937.24d05b80

package/dist/index.es.js

@@ -275,13 +275,6 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
 const isPreview = () => {
     return false;
 };
-// prettier-ignore
-/** @internal */
-const actionId = typeof __FIX_ACTION_CHANGE_STATE_EVENT__ === 'string'
-        ? __FIX_ACTION_CHANGE_STATE_EVENT__
-        : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
-            ? __FLYER_GEN_ACTION_ID_ON_BUILD__
-            : randStr();
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -1008,6 +1001,50 @@ function cloneToJson(data) {
     }
 }
 
+// prettier-ignore
+/** @internal */
+const actionId = typeof __FIX_ACTION_CHANGE_STATE_EVENT__ === 'string'
+        ? __FIX_ACTION_CHANGE_STATE_EVENT__
+        : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+            ? __FLYER_GEN_ACTION_ID_ON_BUILD__
+            : randStr();
+/** @internal */
+const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
+/** @internal */
+const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
+/** @internal */
+const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
+/** @internal */
+const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
+/** @internal */
+const send_event = (event_name, values) => {
+    const setting = getSetting();
+    setting?.send?.(event_name, values);
+};
+/** @internal */
+const initialize = (setting) => {
+    const newSetting = setSetting(setting);
+    if (newSetting.initialState) {
+        setState$1(newSetting.initialState);
+    }
+    setOpened(true);
+    setClosed(false); // deprecated
+    return () => finalize();
+};
+/** @internal */
+const finalize = () => {
+    resetSetting();
+};
+/**
+ * Dispatch the event to destroy KARTE action
+ *
+ * @internal
+ */
+function dispatchDestroyEvent() {
+    const event = new CustomEvent(ACTION_DESTROY_EVENT);
+    window.dispatchEvent(event);
+}
+
 /**
  * モーダル(ポップアップ)のロジックを管理する
  */
@@ -1155,20 +1192,6 @@ function checkAndDo(checkFn, fn, ...conditionFns) {
     return haveCondition ? cleanupAll : null;
 }
 
-/** @internal */
-const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
-/** @internal */
-const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
-/** @internal */
-const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
-/** @internal */
-const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
-/** @internal */
-const send_event = (event_name, values) => {
-    const setting = getSetting();
-    setting?.send?.(event_name, values);
-};
-
 /**
  * アクションテーブルに関連するコードの管理
  */
@@ -1224,6 +1247,7 @@ function collection$1(config) {
         },
     };
 }
+/** @internal */
 function request(url, data, cb) {
     console.debug('[debug] request', isPreview(), url, JSON.stringify(data));
     fetch(url, {
@@ -1251,6 +1275,7 @@ const loadActionTableRows = async (config, api_key, endpoint) => {
 const loadActionTableQuery = async (config, api_key, endpoint) => {
     return new Promise((resolve, reject) => collection$1({ endpoint, api_key, table: config.query.table_name }).getByQuery(config.query.query_name, config.query.params, null, (err, data) => (err ? reject(err) : resolve(data))));
 };
+/** @internal */
 const loadActionTable = async (config, api_key, endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, endpoint, JSON.stringify(config));
     const results = await Promise.all(config
@@ -1276,13 +1301,23 @@ const loadActionTable = async (config, api_key, endpoint) => {
         return acc;
     }, {});
 };
+/** @internal */
+async function setupActionTable(localVariablesQuery, apiKey) {
+    const result = await loadActionTable(localVariablesQuery, apiKey);
+    let success = false;
+    if (Object.keys(result).length === localVariablesQuery.length) {
+        setVariables(result);
+        success = true;
+    }
+    return {
+        success,
+    };
+}
 
 /**
- * Edgeが起動するアクションに関連するコードを管理する
- *
- * アクションのCreate, Destroyの状態はここで管理する。
+ * モーダル(ポップアップ)に関連するコードの管理
  *
- * FIXME: モーダルなどの機能ごとのコードを分離したい
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
  */
 /** @internal */
 const handleState = (event) => {
@@ -1291,100 +1326,234 @@ const handleState = (event) => {
         setState$1(event.detail.to, { disableInPreview: event.detail.disableInPreview });
     }
 };
-/** @internal */
-const initialize = (setting) => {
-    const newSetting = setSetting(setting);
-    if (newSetting.initialState) {
-        setState$1(newSetting.initialState);
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
     }
-    setOpened(true);
-    setClosed(false); // deprecated
-    return () => finalize();
-};
-/** @internal */
-const finalize = () => {
-    resetSetting();
-};
+    onShowHandlers.push(fn);
+    setInternalHandlers({ onShowHandlers });
+}
 /**
- * アクションを作成する
+ * アクションがクローズ (close) される前にフックする関数
  *
- * @param App - Svelte コンポーネントのエントリポイント
- * @param options - {@link ActionOptions | オプション}
+ * @param fn - 呼び出されるフック関数
  *
- * @returns アクションを破棄する関数
+ * @public
+ */
+function onClose(fn) {
+    let { onCloseHandlers } = getInternalHandlers();
+    if (!onCloseHandlers) {
+        onCloseHandlers = [];
+    }
+    onCloseHandlers.push(fn);
+    setInternalHandlers({ onCloseHandlers });
+}
+/**
+ * アクションのステートが変更された (changeState) 後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
  *
  * @public
  */
-function create(App, options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-}) {
-    let app = null;
-    const data = {
-        ...options.props,
-        ...options.variables,
-        ...getVariables(),
-    };
-    const actionProps = {
-        send: options.send,
-        publish: options.publish,
-        data,
-    };
-    const handleDestroy = () => {
-        const { onDestroyHandlers } = getInternalHandlers();
-        onDestroyHandlers?.forEach(h => {
-            const actionHookLog = { name: 'onDestroy' };
-            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
-            h(actionProps);
-        });
-        // 旧Widget APIの内部で利用するため、実行ログは出力しない
-        const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
-        if (onDestroyWidgetHandlers) {
-            onDestroyWidgetHandlers.forEach(h => h(actionProps));
-        }
-    };
-    const close = (trigger = 'none') => {
-        if (!app) {
-            return NOOP;
-        }
-        options.send('message_close', { trigger, state: getState$1() });
-        setOpened(false);
-        setClosed(true); // deprecated
-        const { onCloseHandlers } = getInternalHandlers();
-        if (onCloseHandlers) {
-            onCloseHandlers.forEach(h => {
-                const actionHookLog = { name: 'onClose', values: { trigger } };
-                console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
-                h({ send: options.send, publish: options.publish, data }, trigger);
-            });
-        }
-        finalize();
-        dispatchDestroyEvent();
-        app.$destroy();
-        app = null;
-        return NOOP;
-    };
-    const handleClose = (event) => {
-        const trigger = event?.detail?.trigger ? event.detail.trigger : 'none';
-        close(trigger);
-    };
-    const show = async (trigger = 'none') => {
-        if (app) {
+function onChangeState(fn) {
+    let { onChangeStateHandlers } = getInternalHandlers();
+    if (!onChangeStateHandlers) {
+        onChangeStateHandlers = [];
+    }
+    onChangeStateHandlers.push(fn);
+    setInternalHandlers({ onChangeStateHandlers });
+}
+/**
+ * アクションを表示する
+ *
+ * @public
+ */
+function showAction() {
+    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションを閉じる
+ *
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
+ *
+ * @public
+ */
+function closeAction(trigger = 'none') {
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションに CSS を適用する
+ *
+ * @param css - 適用する CSS
+ *
+ * @returns 適用された style 要素を返す Promise
+ *
+ * @public
+ */
+async function applyCss(css) {
+    return new Promise((resolve, reject) => {
+        const style = document.createElement('style');
+        style.textContent = css;
+        const shadowRoot = getActionRoot();
+        if (!shadowRoot)
             return;
+        shadowRoot.append(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+async function fixFontFaceIssue(href, cssRules) {
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(cssRules);
+    const rules = [];
+    const fixedRules = [];
+    Array.from(css.cssRules).forEach(cssRule => {
+        if (cssRule.type !== 5) {
+            rules.push(cssRule.cssText);
         }
-        if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
+        // type 5 is @font-face
+        const split = href.split('/');
+        const stylePath = split.slice(0, split.length - 1).join('/');
+        const cssText = cssRule.cssText;
+        const newCssText = cssText.replace(
+        // relative paths
+        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
+        if (cssText === newCssText)
             return;
-        }
-        if (actionTablePromise) {
-            const result = await actionTablePromise;
-            if (!result.success)
-                return;
-        }
-        options.send('message_open', { state: getState$1() });
-        setOpened(true);
+        fixedRules.push(newCssText);
+    });
+    return [rules.join('\n'), fixedRules.join('\n')];
+}
+/**
+ * アクションにグローバルなスタイルを読み込む
+ *
+ * @param href - style ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadStyle(href) {
+    const sr = getActionRoot();
+    if (!sr)
+        return;
+    let cssRules = '';
+    try {
+        const res = await fetch(href);
+        cssRules = await res.text();
+    }
+    catch (e) {
+        // pass
+    }
+    if (!cssRules)
+        return;
+    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
+    const css = new CSSStyleSheet();
+    // @ts-ignore
+    await css.replace(rules);
+    const fontFaceCss = new CSSStyleSheet();
+    // @ts-ignore
+    await fontFaceCss.replace(fontFaceRules);
+    // @ts-ignore
+    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
+    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
+    // @see https://stackoverflow.com/a/63717709
+    // @ts-ignore
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
+}
+// @internal
+function getCssVariables(data) {
+    return Object.entries(data)
+        .filter(([key, value]) => {
+        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
+    })
+        .map(([key, value]) => `${key}:${value}`)
+        .join(';');
+}
+/**
+ * アクションのルートの DOM 要素を取得する
+ *
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ *
+ * @public
+ */
+function getActionRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root?.shadowRoot) {
+        return null;
+    }
+    return root.shadowRoot;
+}
+/** @internal */
+function createModal(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    karteTemplate: {},
+}) {
+    let app = null;
+    const data = {
+        ...options.props,
+        ...options.variables,
+        ...getVariables(),
+    };
+    const actionProps = {
+        send: options.send,
+        publish: options.publish,
+        data,
+    };
+    const close = (trigger = 'none') => {
+        if (!app) {
+            return NOOP;
+        }
+        options.send('message_close', { trigger, state: getState$1() });
+        setOpened(false);
+        setClosed(true); // deprecated
+        const { onCloseHandlers } = getInternalHandlers();
+        if (onCloseHandlers) {
+            onCloseHandlers.forEach(h => {
+                const actionHookLog = { name: 'onClose', values: { trigger } };
+                console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+                h({ send: options.send, publish: options.publish, data }, trigger);
+            });
+        }
+        finalize();
+        dispatchDestroyEvent();
+        app.$destroy();
+        app = null;
+        return NOOP;
+    };
+    const handleClose = (event) => {
+        const trigger = event?.detail?.trigger ? event.detail.trigger : 'none';
+        close(trigger);
+    };
+    const show = async (trigger = 'none') => {
+        if (app) {
+            return;
+        }
+        if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
+            return;
+        }
+        if (actionTablePromise) {
+            const result = await actionTablePromise;
+            if (!result.success)
+                return;
+        }
+        options.send('message_open', { state: getState$1() });
+        setOpened(true);
         setClosed(false); // deprecated
         // 非同期処理中にappが初期化されている可能性がある
         if (app) {
@@ -1463,33 +1632,15 @@ function create(App, options = {
     };
     // ここからメインの処理
     initialize({ send: options.send, initialState: data.initial_state });
-    setSystem({
-        // @ts-ignore
-        apiKey: data.api_key || null,
-        shortenId: data.shorten_id || null,
-        campaignId: data.campaign_id || null,
-    });
     // ActionTable APIへの非同期リクエスト
     let actionTablePromise = null;
     if (options.localVariablesQuery && data.api_key) {
-        actionTablePromise = (async () => {
-            const result = await loadActionTable(options.localVariablesQuery, data.api_key);
-            let success = false;
-            if (Object.keys(result).length === options.localVariablesQuery.length) {
-                setVariables(result);
-                success = true;
-            }
-            return {
-                success,
-            };
-        })();
+        actionTablePromise = setupActionTable(options.localVariablesQuery, data.api_key);
     }
     // NOTE: onCreateより前にListenする必要がある
     window.addEventListener(ACTION_SHOW_EVENT, handleShow);
     window.addEventListener(ACTION_CLOSE_EVENT, handleClose);
     window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
-    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
-    window.addEventListener('beforeunload', dispatchDestroyEvent, false);
     let showTriggerCleanups = [];
     let closeTriggerCleanups = [];
     {
@@ -1504,7 +1655,6 @@ function create(App, options = {
             console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
         });
     }
-    // カスタムスクリプトの処理
     if (options.onCreate) {
         options.onCreate(actionProps);
     }
@@ -1516,8 +1666,6 @@ function create(App, options = {
         window.removeEventListener(ACTION_SHOW_EVENT, handleShow);
         window.removeEventListener(ACTION_CLOSE_EVENT, handleClose);
         window.removeEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
-        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
-        window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
     };
     return appCleanup;
 }
@@ -1545,53 +1693,13 @@ function ensureActionRoot(useShadow = true) {
     }
 }
 /**
- * Dispatch the event to destroy KARTE action
- *
- * @internal
- */
-function dispatchDestroyEvent() {
-    const event = new CustomEvent(ACTION_DESTROY_EVENT);
-    window.dispatchEvent(event);
-}
-/**
- * アクションの破棄する
- *
- * @public
- */
-function destroyAction() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
-}
-/**
- * アクションが作成 (create) される前にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onCreate(fn) {
-    let { onCreateHandlers } = getInternalHandlers();
-    if (!onCreateHandlers) {
-        onCreateHandlers = [];
-    }
-    onCreateHandlers.push(fn);
-    setInternalHandlers({ onCreateHandlers });
-}
-/**
- * アクションが破棄 (destroy) される前にフックする関数
+ * 非推奨
  *
- * @param fn - 呼び出されるフック関数
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-function onDestroy(fn) {
-    let { onDestroyHandlers } = getInternalHandlers();
-    if (!onDestroyHandlers) {
-        onDestroyHandlers = [];
-    }
-    onDestroyHandlers.push(fn);
-    setInternalHandlers({ onDestroyHandlers });
-}
+const show = showAction;
 /**
  * 非推奨
  *
@@ -1599,7 +1707,7 @@ function onDestroy(fn) {
  *
  * @internal
  */
-const showModal = create;
+const close = closeAction;
 /**
  * 非推奨
  *
@@ -1656,17 +1764,6 @@ function createApp(App, options = {
         },
     };
 }
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function destroy() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
-}
 /**
  * 非推奨
  *
@@ -1703,6 +1800,42 @@ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, })
 /**
  * スクリプト接客が利用するコードの管理
  */
+/** @internal */
+async function runScript$1(options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    karteTemplate: {},
+}) {
+    if (!options.onCreate)
+        return;
+    const data = {
+        ...options.props,
+        ...options.variables,
+        ...getVariables(),
+    };
+    const actionProps = {
+        send: options.send,
+        publish: options.publish,
+        data,
+    };
+    initialize({ send: options.send, initialState: data.initial_state });
+    const { success } = await setupActionTable(options.localVariablesQuery, data.api_key);
+    if (!success)
+        return;
+    // 旧Widget API IFの処理
+    const { onCreateHandlers } = getInternalHandlers();
+    if (onCreateHandlers) {
+        onCreateHandlers.forEach(h => {
+            h({ send: options.send, publish: options.publish, data });
+            console.debug(`${ACTION_HOOK_LABEL}: onCreate`);
+        });
+    }
+    options.onCreate(actionProps);
+    finalize();
+}
 /**
  * ES Modules に対応していない JavaScript をページに読み込む
  *
@@ -1763,178 +1896,110 @@ async function loadGlobalStyle(href) {
 }
 
 /**
- * モーダル(ポップアップ)に関連するコードの管理
+ * Edgeが起動するアクションに関連するコードを管理する
  *
- * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ * アクションのCreate, Destroyの状態はここで管理する。
  */
 /**
- * アクションが表示 (show) された後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
+ * アクションを作成する
  *
- * @public
- */
-function onShow(fn) {
-    let { onShowHandlers } = getInternalHandlers();
-    if (!onShowHandlers) {
-        onShowHandlers = [];
-    }
-    onShowHandlers.push(fn);
-    setInternalHandlers({ onShowHandlers });
-}
-/**
- * アクションがクローズ (close) される前にフックする関数
+ * @param App - Svelte コンポーネントのエントリポイント
+ * @param options - {@link ActionOptions | オプション}
  *
- * @param fn - 呼び出されるフック関数
+ * @returns アクションを破棄する関数
  *
  * @public
  */
-function onClose(fn) {
-    let { onCloseHandlers } = getInternalHandlers();
-    if (!onCloseHandlers) {
-        onCloseHandlers = [];
+function create(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    karteTemplate: {},
+}) {
+    const data = {
+        ...options.props,
+        ...options.variables,
+        ...getVariables(),
+    };
+    const actionProps = {
+        send: options.send,
+        publish: options.publish,
+        data,
+    };
+    const handleDestroy = () => {
+        const { onDestroyHandlers } = getInternalHandlers();
+        onDestroyHandlers?.forEach(h => {
+            const actionHookLog = { name: 'onDestroy' };
+            console.info(`${ACTION_HOOK_LABEL}:${JSON.stringify(actionHookLog)}`);
+            h(actionProps);
+        });
+        // 旧Widget APIの内部で利用するため、実行ログは出力しない
+        const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
+        if (onDestroyWidgetHandlers) {
+            onDestroyWidgetHandlers.forEach(h => h(actionProps));
+        }
+    };
+    // ここからメインの処理
+    setSystem({
+        // @ts-ignore
+        apiKey: data.api_key || null,
+        shortenId: data.shorten_id || null,
+        campaignId: data.campaign_id || null,
+    });
+    window.addEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+    window.addEventListener('beforeunload', dispatchDestroyEvent, false);
+    let modalCleanup = NOOP;
+    if (options.karteTemplate?.template_type === 'script') {
+        runScript$1(options);
     }
-    onCloseHandlers.push(fn);
-    setInternalHandlers({ onCloseHandlers });
-}
-/**
- * アクションのステートが変更された (changeState) 後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onChangeState(fn) {
-    let { onChangeStateHandlers } = getInternalHandlers();
-    if (!onChangeStateHandlers) {
-        onChangeStateHandlers = [];
+    else {
+        modalCleanup = createModal(App, options);
     }
-    onChangeStateHandlers.push(fn);
-    setInternalHandlers({ onChangeStateHandlers });
-}
-/**
- * アクションを表示する
- *
- * @public
- */
-function showAction() {
-    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
-    window.dispatchEvent(event);
-}
-/**
- * アクションを閉じる
- *
- * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
- *
- * @public
- */
-function closeAction(trigger = 'none') {
-    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
-    window.dispatchEvent(event);
+    return () => {
+        modalCleanup();
+        window.removeEventListener(ACTION_DESTROY_EVENT, handleDestroy);
+    };
 }
 /**
- * アクションに CSS を適用する
- *
- * @param css - 適用する CSS
- *
- * @returns 適用された style 要素を返す Promise
+ * アクションの破棄する
  *
  * @public
  */
-async function applyCss(css) {
-    return new Promise((resolve, reject) => {
-        const style = document.createElement('style');
-        style.textContent = css;
-        const shadowRoot = getActionRoot();
-        if (!shadowRoot)
-            return;
-        shadowRoot.append(style);
-        style.addEventListener('load', () => resolve(style));
-        style.addEventListener('error', () => reject(style));
-    });
-}
-async function fixFontFaceIssue(href, cssRules) {
-    const css = new CSSStyleSheet();
-    // @ts-ignore
-    await css.replace(cssRules);
-    const rules = [];
-    const fixedRules = [];
-    Array.from(css.cssRules).forEach(cssRule => {
-        if (cssRule.type !== 5) {
-            rules.push(cssRule.cssText);
-        }
-        // type 5 is @font-face
-        const split = href.split('/');
-        const stylePath = split.slice(0, split.length - 1).join('/');
-        const cssText = cssRule.cssText;
-        const newCssText = cssText.replace(
-        // relative paths
-        /url\s*\(\s*['"]?(?!((\/)|((?:https?:)?\/\/)|(?:data:?:)))([^'")]+)['"]?\s*\)/g, `url("${stylePath}/$4")`);
-        if (cssText === newCssText)
-            return;
-        fixedRules.push(newCssText);
-    });
-    return [rules.join('\n'), fixedRules.join('\n')];
+function destroyAction() {
+    setDestroyed(true);
+    dispatchDestroyEvent();
 }
 /**
- * アクションにグローバルなスタイルを読み込む
+ * アクションが作成 (create) される前にフックする関数
  *
- * @param href - style ファイルのリンク URL
+ * @param fn - 呼び出されるフック関数
  *
  * @public
  */
-async function loadStyle(href) {
-    const sr = getActionRoot();
-    if (!sr)
-        return;
-    let cssRules = '';
-    try {
-        const res = await fetch(href);
-        cssRules = await res.text();
-    }
-    catch (e) {
-        // pass
+function onCreate(fn) {
+    let { onCreateHandlers } = getInternalHandlers();
+    if (!onCreateHandlers) {
+        onCreateHandlers = [];
     }
-    if (!cssRules)
-        return;
-    // Chromeのバグで、Shadow Rootの@font-faceを絶対パスで指定する必要がある
-    // @see https://stackoverflow.com/a/63717709
-    const [rules, fontFaceRules] = await fixFontFaceIssue(href, cssRules);
-    const css = new CSSStyleSheet();
-    // @ts-ignore
-    await css.replace(rules);
-    const fontFaceCss = new CSSStyleSheet();
-    // @ts-ignore
-    await fontFaceCss.replace(fontFaceRules);
-    // @ts-ignore
-    sr.adoptedStyleSheets = [...sr.adoptedStyleSheets, css, fontFaceCss];
-    // Chromeのバグで、ページとShadow Rootの両方に、@font-faceを設定する必要がある
-    // @see https://stackoverflow.com/a/63717709
-    // @ts-ignore
-    document.adoptedStyleSheets = [...document.adoptedStyleSheets, css, fontFaceCss];
-}
-// @internal
-function getCssVariables(data) {
-    return Object.entries(data)
-        .filter(([key, value]) => {
-        return ['string', 'number'].includes(typeof value) && key.startsWith('--');
-    })
-        .map(([key, value]) => `${key}:${value}`)
-        .join(';');
+    onCreateHandlers.push(fn);
+    setInternalHandlers({ onCreateHandlers });
 }
 /**
- * アクションのルートの DOM 要素を取得する
+ * アクションが破棄 (destroy) される前にフックする関数
  *
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ * @param fn - 呼び出されるフック関数
  *
  * @public
  */
-function getActionRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
+function onDestroy(fn) {
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
     }
-    return root.shadowRoot;
+    onDestroyHandlers.push(fn);
+    setInternalHandlers({ onDestroyHandlers });
 }
 // -------- The following codes are deprecated --------
 /**
@@ -1944,7 +2009,7 @@ function getActionRoot() {
  *
  * @internal
  */
-const show = showAction;
+const showModal = create;
 /**
  * 非推奨
  *
@@ -1952,7 +2017,10 @@ const show = showAction;
  *
  * @internal
  */
-const close = closeAction;
+function destroy() {
+    setDestroyed(true);
+    dispatchDestroyEvent();
+}
 
 /**
  * エディタv1のWidget API 互換のインターフェース
@@ -2805,13 +2873,13 @@ function customAnimation(node, { transform, animationStyle, delay = 0, duration
     };
 }
 
-/* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
+/* src/components/BackgroundOverlay.svelte generated by Svelte v3.53.1 */
 
 function add_css$s(target) {
 	append_styles(target, "svelte-1d4fta", ".background.svelte-1d4fta{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.3);z-index:2147483646}");
 }
 
-// (9:0) {#if backgroundOverray}
+// (9:0) {#if backgroundOverlay}
 function create_if_block$7(ctx) {
 	let div;
 	let mounted;
@@ -2841,7 +2909,7 @@ function create_if_block$7(ctx) {
 
 function create_fragment$v(ctx) {
 	let if_block_anchor;
-	let if_block = /*backgroundOverray*/ ctx[0] && create_if_block$7(ctx);
+	let if_block = /*backgroundOverlay*/ ctx[0] && create_if_block$7(ctx);
 
 	return {
 		c() {
@@ -2853,7 +2921,7 @@ function create_fragment$v(ctx) {
 			insert(target, if_block_anchor, anchor);
 		},
 		p(ctx, [dirty]) {
-			if (/*backgroundOverray*/ ctx[0]) {
+			if (/*backgroundOverlay*/ ctx[0]) {
 				if (if_block) {
 					if_block.p(ctx, dirty);
 				} else {
@@ -2876,21 +2944,21 @@ function create_fragment$v(ctx) {
 }
 
 function instance$v($$self, $$props, $$invalidate) {
-	let { backgroundOverray = false } = $$props;
+	let { backgroundOverlay = false } = $$props;
 	const dispatch = createEventDispatcher();
 	const click_handler = () => dispatch('click');
 
 	$$self.$$set = $$props => {
-		if ('backgroundOverray' in $$props) $$invalidate(0, backgroundOverray = $$props.backgroundOverray);
+		if ('backgroundOverlay' in $$props) $$invalidate(0, backgroundOverlay = $$props.backgroundOverlay);
 	};
 
-	return [backgroundOverray, dispatch, click_handler];
+	return [backgroundOverlay, dispatch, click_handler];
 }
 
-class BackgroundOverray extends SvelteComponent {
+class BackgroundOverlay extends SvelteComponent {
 	constructor(options) {
 		super();
-		init(this, options, instance$v, create_fragment$v, safe_not_equal, { backgroundOverray: 0 }, add_css$s);
+		init(this, options, instance$v, create_fragment$v, safe_not_equal, { backgroundOverlay: 0 }, add_css$s);
 	}
 }
 
@@ -3603,20 +3671,20 @@ function create_default_slot$6(ctx) {
 }
 
 function create_fragment$t(ctx) {
-	let backgroundoverray;
+	let backgroundoverlay;
 	let t;
 	let if_block_anchor;
 	let current;
 	let mounted;
 	let dispose;
 
-	backgroundoverray = new BackgroundOverray({
+	backgroundoverlay = new BackgroundOverlay({
 			props: {
-				backgroundOverray: /*backgroundOverray*/ ctx[10]
+				backgroundOverlay: /*backgroundOverlay*/ ctx[10]
 			}
 		});
 
-	backgroundoverray.$on("click", function () {
+	backgroundoverlay.$on("click", function () {
 		if (is_function(/*backgroundClick*/ ctx[18])) /*backgroundClick*/ ctx[18].apply(this, arguments);
 	});
 
@@ -3624,13 +3692,13 @@ function create_fragment$t(ctx) {
 
 	return {
 		c() {
-			create_component(backgroundoverray.$$.fragment);
+			create_component(backgroundoverlay.$$.fragment);
 			t = space();
 			if (if_block) if_block.c();
 			if_block_anchor = empty();
 		},
 		m(target, anchor) {
-			mount_component(backgroundoverray, target, anchor);
+			mount_component(backgroundoverlay, target, anchor);
 			insert(target, t, anchor);
 			if (if_block) if_block.m(target, anchor);
 			insert(target, if_block_anchor, anchor);
@@ -3646,9 +3714,9 @@ function create_fragment$t(ctx) {
 		},
 		p(new_ctx, [dirty]) {
 			ctx = new_ctx;
-			const backgroundoverray_changes = {};
-			if (dirty & /*backgroundOverray*/ 1024) backgroundoverray_changes.backgroundOverray = /*backgroundOverray*/ ctx[10];
-			backgroundoverray.$set(backgroundoverray_changes);
+			const backgroundoverlay_changes = {};
+			if (dirty & /*backgroundOverlay*/ 1024) backgroundoverlay_changes.backgroundOverlay = /*backgroundOverlay*/ ctx[10];
+			backgroundoverlay.$set(backgroundoverlay_changes);
 
 			if (/*visible*/ ctx[12]) {
 				if (if_block) {
@@ -3675,17 +3743,17 @@ function create_fragment$t(ctx) {
 		},
 		i(local) {
 			if (current) return;
-			transition_in(backgroundoverray.$$.fragment, local);
+			transition_in(backgroundoverlay.$$.fragment, local);
 			transition_in(if_block);
 			current = true;
 		},
 		o(local) {
-			transition_out(backgroundoverray.$$.fragment, local);
+			transition_out(backgroundoverlay.$$.fragment, local);
 			transition_out(if_block);
 			current = false;
 		},
 		d(detaching) {
-			destroy_component(backgroundoverray, detaching);
+			destroy_component(backgroundoverlay, detaching);
 			if (detaching) detach(t);
 			if (if_block) if_block.d(detaching);
 			if (detaching) detach(if_block_anchor);
@@ -3722,7 +3790,7 @@ function instance$t($$self, $$props, $$invalidate) {
 	let { closeEventValue = null } = $$props;
 	let { closeButtonColor = '#000000' } = $$props;
 	let { _closeStyle = '' } = $$props;
-	let backgroundOverray = DefaultModalPlacement.backgroundOverlay;
+	let backgroundOverlay = DefaultModalPlacement.backgroundOverlay;
 	let backgroundClickFunction = DefaultModalPlacement.backgroundClick;
 	let modal;
 
@@ -3773,7 +3841,7 @@ function instance$t($$self, $$props, $$invalidate) {
 		if ($$self.$$.dirty & /*placement*/ 2097152) {
 			{
 				if (placement && placement.backgroundOverlay) {
-					$$invalidate(10, backgroundOverray = placement.backgroundOverlay);
+					$$invalidate(10, backgroundOverlay = placement.backgroundOverlay);
 				}
 			}
 		}
@@ -3845,7 +3913,7 @@ function instance$t($$self, $$props, $$invalidate) {
 		closeEventValue,
 		closeButtonColor,
 		_closeStyle,
-		backgroundOverray,
+		backgroundOverlay,
 		modal,
 		visible,
 		handle_keydown,