@plaidev/karte-action-sdk 1.1.267 → 1.1.268-29083022.42c3d847

package/dist/svelte5/hydrate/index.es.js

@@ -4,7 +4,7 @@ import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeU
 import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
-import 'svelte/easing';
+import { linear, elasticOut, cubicOut } from 'svelte/easing';
 
 /** @internal */
 const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
@@ -38,9 +38,15 @@ const KARTE_MODAL_ROOT = 'karte-modal-root';
 /** @internal */
 const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused-vars
 /** @internal */
-const isPreview = () => {
-    return true;
-};
+const isPreview = () => (isInFrame() );
+const isCanvasPreview = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') ===
+        'true'
+    : false;
+const isOnSite = () => typeof document !== 'undefined'
+    ? (document?.querySelector('#preview')?.getAttribute('data-on-site') ?? 'true') === 'true'
+    : true;
+const isInFrame = () => window && window.self !== window.top;
 /** @internal */
 const setPreviousFocus = () => {
     const previously_focused = typeof document !== 'undefined' && document.activeElement;
@@ -223,6 +229,10 @@ function onTime(time, fn) {
     const timeoutHandler = setTimeout(fn, time);
     return () => timeoutHandler && clearTimeout(timeoutHandler);
 }
+/** @internal */
+function randStr(digit = 8) {
+    return Math.random().toString(32).substring(digit);
+}
 /**
  * Goolge Fonts用のURLを生成
  *
@@ -754,7 +764,7 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
-    if (options?.disableInPreview)
+    if (isPreview() && options?.disableInPreview)
         return;
     state.set(stateId);
 }
@@ -1198,8 +1208,11 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = ALL_ACTION_ID
-    ;
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : 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 */
@@ -1339,6 +1352,58 @@ function showOnTime(props, show = NOOP) {
         ? onTime(props.show_on_time_count * 1000, () => show())
         : null;
 }
+/** @internal */
+function and(fn, ...conditionFns) {
+    return checkAndDo((conditions, idx) => {
+        conditions[idx] = true;
+        return conditions.every(t => t == null || t);
+    }, fn, ...conditionFns);
+}
+/** @internal */
+function or(fn, ...conditionFns) {
+    return checkAndDo((conditions, idx) => {
+        if (conditions.some(t => t)) {
+            return conditions[idx]; // this is true when show_on_scroll_reenter is true
+        }
+        conditions[idx] = true;
+        return true;
+    }, fn, ...conditionFns);
+}
+function checkAndDo(checkFn, fn, ...conditionFns) {
+    let initialized = false;
+    const checkBeforeInitialized = [];
+    let haveCondition = true;
+    const conditions = Array(conditionFns.length).fill(null);
+    const checkAndDos = Array(conditionFns.length).fill(() => { });
+    const cleanups = Array(conditionFns.length).fill(null);
+    const generageCheckAndDo = (idx) => () => {
+        if (!initialized) {
+            checkBeforeInitialized.push(idx);
+            return;
+        }
+        if (!haveCondition || !checkFn(conditions, idx))
+            return;
+        fn?.();
+    };
+    conditionFns.forEach((conditionFn, i) => {
+        const checkAndDo = generageCheckAndDo(i);
+        checkAndDos[i] = checkAndDo;
+        const cleanup = conditionFn(checkAndDo);
+        cleanups[i] = cleanup;
+        if (cleanup != null)
+            conditions[i] = false;
+    });
+    haveCondition = conditions.some(c => c !== null);
+    const cleanupAll = () => {
+        cleanups.forEach((cleanup, i) => {
+            cleanup?.();
+            cleanups[i] = null;
+        });
+    };
+    initialized = true;
+    checkBeforeInitialized.forEach(i => checkAndDos[i]());
+    return haveCondition ? cleanupAll : null;
+}
 
 /**
  * アクションテーブルに関連するコードの管理
@@ -1553,8 +1618,23 @@ const loadActionTableQuery = async (config, data, api_key, collection_endpoint)
 /** @internal */
 const loadActionTable = async (config, data, api_key, collection_endpoint) => {
     console.debug('[debug] loadActionTable', isPreview(), api_key, collection_endpoint, JSON.stringify(config));
-    const results = config.map(c => c.preview_value)
-        ;
+    const results = isPreview()
+        ? config.map(c => c.preview_value)
+        : await Promise.all(config
+            .filter(c => c.resolver === 'action-table-row' ||
+            c.resolver === 'action-table-rows' ||
+            c.resolver === 'action-table-query')
+            .map(async (c) => {
+            if (c.resolver === 'action-table-row') {
+                return await loadActionTableRow(c, data, api_key, collection_endpoint);
+            }
+            else if (c.resolver === 'action-table-rows') {
+                return await loadActionTableRows(c, data, api_key, collection_endpoint);
+            }
+            else if (c.resolver === 'action-table-query') {
+                return await loadActionTableQuery(c, data, api_key, collection_endpoint);
+            }
+        }));
     return config.reduce((acc, c, i) => {
         const value = results[i] ?? c.query.default_value;
         if (value) {
@@ -1587,6 +1667,32 @@ function initActionTable(localVariablesQuery) {
     setVariables(initValues);
 }
 
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ */
+/**
+ * アクションを表示する
+ *
+ * @public
+ */
+function showAction$1() {
+    const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
+    window.dispatchEvent(event);
+}
+/**
+ * アクションを閉じる
+ *
+ * @param trigger - 閉じた時のトリガー。デフォルト `'none'`
+ *
+ * @public
+ */
+function closeAction$1(trigger = 'none') {
+    const event = new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } });
+    window.dispatchEvent(event);
+}
+
 /**
  * モーダル(ポップアップ)に関連するコードの管理
  *
@@ -1604,12 +1710,57 @@ const handleState = (event) => {
         });
     }
 };
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
+    }
+    onShowHandlers.push(fn);
+    setInternalHandlers({ onShowHandlers });
+}
+/**
+ * アクションがクローズ (close) される前にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onClose(fn) {
+    let { onCloseHandlers } = getInternalHandlers();
+    if (!onCloseHandlers) {
+        onCloseHandlers = [];
+    }
+    onCloseHandlers.push(fn);
+    setInternalHandlers({ onCloseHandlers });
+}
+/**
+ * アクションのステートが変更された (changeState) 後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onChangeState(fn) {
+    let { onChangeStateHandlers } = getInternalHandlers();
+    if (!onChangeStateHandlers) {
+        onChangeStateHandlers = [];
+    }
+    onChangeStateHandlers.push(fn);
+    setInternalHandlers({ onChangeStateHandlers });
+}
 /**
  * アクションを表示する
  *
  * @public
  */
-function showAction$1() {
+function showAction() {
     const event = new CustomEvent(ACTION_SHOW_EVENT, { detail: { trigger: 'custom' } });
     window.dispatchEvent(event);
 }
@@ -1620,10 +1771,114 @@ function showAction$1() {
  *
  * @public
  */
-function closeAction$1(trigger = 'none') {
+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);
+        }
+        // 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')];
+}
+/**
+ * アクションにグローバルなスタイルを読み込む
+ *
+ * @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 (_) {
+        // 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: () => { },
@@ -1691,7 +1946,7 @@ function createModal(App, options = {
         if (app) {
             return;
         }
-        if (trigger === 'custom') {
+        if (!isOnSite() && trigger === 'custom') {
             return;
         }
         if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
@@ -1718,9 +1973,9 @@ function createModal(App, options = {
         if (app) {
             return;
         }
+        const target = ensureActionRoot(isOnSite());
         const props = {
-            target: ensureActionRoot$1(!true),
-            hydrate: true,
+            target,
             props: {
                 send: options.send,
                 publish: options.publish,
@@ -1755,17 +2010,43 @@ function createModal(App, options = {
                 },
             },
         };
-        app =                     svelte.hydrate(App, props)
-                
+        app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                svelte.mount(App, props)
             ;
     };
     const handleShow = (event) => {
         const trigger = event?.detail?.trigger ? event.detail.trigger : 'none';
         show(trigger);
     };
+    const currying = (conditionFn, options) => (fn) => conditionFn(options.props, fn);
     const autoShow = () => {
         return show('auto');
     };
+    const autoClose = () => {
+        return close('auto');
+    };
+    const listenCloseTrigger = () => {
+        const cleanups = [];
+        const curried = fn => hideOnScroll(options.props, fn, autoShow);
+        if (options.props.hide_and_condition) {
+            cleanups.push(and(autoClose, curried, currying(hideOnTime, options)) || NOOP);
+        }
+        else {
+            cleanups.push(or(autoClose, curried, currying(hideOnTime, options)) || NOOP);
+        }
+        return cleanups;
+    };
+    const listenShowTrigger = () => {
+        const cleanups = [];
+        const curried = fn => showOnScroll(options.props, fn, autoClose);
+        if (options.props.show_and_condition) {
+            cleanups.push(and(autoShow, curried, currying(showOnTime, options)) || NOOP);
+        }
+        else {
+            cleanups.push(or(autoShow, curried, currying(showOnTime, options)) || NOOP);
+        }
+        return cleanups;
+    };
     // ここからメインの処理
     initialize({ send: options.send, initialState: data.initial_state });
     // ActionTable APIへの非同期リクエスト
@@ -1780,9 +2061,13 @@ function createModal(App, options = {
     window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
     let showTriggerCleanups = [];
     let closeTriggerCleanups = [];
-    {
+    if (!isOnSite()) {
         autoShow();
     }
+    else {
+        showTriggerCleanups = listenShowTrigger();
+        closeTriggerCleanups = listenCloseTrigger();
+    }
     // 旧Widget API IFの処理
     const { onCreateHandlers } = getInternalHandlers();
     if (onCreateHandlers) {
@@ -1811,7 +2096,7 @@ function createModal(App, options = {
     return appCleanup;
 }
 /** @internal */
-function ensureActionRoot$1(useShadow = true) {
+function ensureActionRoot(useShadow = true) {
     const systemConfig = getSystem();
     const rootAttrs = {
         class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
@@ -1834,29 +2119,138 @@ function ensureActionRoot$1(useShadow = true) {
         return el;
     }
 }
-
 /**
- * スクリプト接客が利用するコードの管理
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
  */
-/** @internal */
-async function runScript$1(options = {
+const show = showAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const close = closeAction;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const ensureModalRoot = ensureActionRoot;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createApp(App, options = {
     send: () => { },
     publish: () => { },
     props: {},
     variables: {},
     localVariablesQuery: undefined,
-    karteTemplate: {},
-    context: { api_key: '', collection_endpoint: undefined },
+    context: { api_key: '' },
 }) {
-    if (!options.onCreate)
-        return;
-    let data = getVariables();
-    initialize({ send: options.send, initialState: data.initial_state });
-    initActionTable(options.localVariablesQuery);
-    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
-    if (!success)
-        return;
-    // Action Tableの取得結果を反映する
+    let app = null;
+    const close = () => {
+        if (app) {
+            {
+                // @ts-ignore -- Svelte3 では `unmount` は存在しない
+                svelte.unmount(app);
+            }
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            publish: options.publish,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    const win = ensureActionRoot(isOnSite());
+    appArgs.target = win;
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            options.send('message_open');
+            app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                    svelte.mount(App, appArgs)
+                ;
+        },
+    };
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
+    console.log('createFog');
+    const root = ensureModalRoot();
+    if (root.querySelector('.__krt-fog')) {
+        return { fog: null, close: () => { } };
+    }
+    const fog = document.createElement('div');
+    fog.className = '__krt-fog';
+    Object.assign(fog.style, {
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        width: '100%',
+        height: '100%',
+        'z-index': zIndex,
+        'background-color': color,
+        opacity,
+    });
+    const close = () => {
+        onclick();
+        fog.remove();
+    };
+    fog.onclick = close;
+    root.appendChild(fog);
+    return { fog, close };
+}
+
+/**
+ * スクリプト接客が利用するコードの管理
+ */
+/** @internal */
+async function runScript$1(options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+    karteTemplate: {},
+    context: { api_key: '', collection_endpoint: undefined },
+}) {
+    if (!options.onCreate)
+        return;
+    let data = getVariables();
+    initialize({ send: options.send, initialState: data.initial_state });
+    initActionTable(options.localVariablesQuery);
+    const { success } = await setupActionTable(options.localVariablesQuery, data, data.api_key, options.context.collection_endpoint);
+    if (!success)
+        return;
+    // Action Tableの取得結果を反映する
     data = getVariables();
     const actionProps = {
         send: options.send,
@@ -2002,7 +2396,7 @@ function create(App, options) {
         runScript$1(options);
     }
     else {
-        modalCleanup = createModal(App, options);
+        modalCleanup = createModal(App, options) ;
     }
     return () => {
         loggerCleanup();
@@ -2070,313 +2464,6 @@ function destroy() {
     dispatchDestroyEvent();
 }
 
-/**
- * モーダル(ポップアップ)に関連するコードの管理
- *
- * アクションのShow, Close, ChangeStateの状態はここで管理する。
- */
-/**
- * アクションが表示 (show) された後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onShow(fn) {
-    let { onShowHandlers } = getInternalHandlers();
-    if (!onShowHandlers) {
-        onShowHandlers = [];
-    }
-    onShowHandlers.push(fn);
-    setInternalHandlers({ onShowHandlers });
-}
-/**
- * アクションがクローズ (close) される前にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onClose(fn) {
-    let { onCloseHandlers } = getInternalHandlers();
-    if (!onCloseHandlers) {
-        onCloseHandlers = [];
-    }
-    onCloseHandlers.push(fn);
-    setInternalHandlers({ onCloseHandlers });
-}
-/**
- * アクションのステートが変更された (changeState) 後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-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);
-        }
-        // 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')];
-}
-/**
- * アクションにグローバルなスタイルを読み込む
- *
- * @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 (_) {
-        // 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 ensureActionRoot() {
-    const systemConfig = getSystem();
-    const rootAttrs = {
-        class: `${KARTE_ACTION_ROOT} ${KARTE_MODAL_ROOT}`,
-        [`data-${KARTE_ACTION_RID}`]: actionId,
-        [`data-${KARTE_ACTION_SHORTEN_ID}`]: systemConfig.shortenId
-            ? systemConfig.shortenId
-            : ALL_ACTION_SHORTEN_ID,
-        style: { display: 'block' },
-    };
-    let el = document.querySelector(`.${KARTE_MODAL_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (el == null) {
-        el = h('div', rootAttrs);
-        document.body.appendChild(el);
-    }
-    const isShadow = !!document.body.attachShadow;
-    if (isShadow) {
-        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
-    }
-    else {
-        return el;
-    }
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const show = showAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const close = closeAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const ensureModalRoot = ensureActionRoot;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function createApp(App, options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-    context: { api_key: '' },
-}) {
-    let app = null;
-    const close = () => {
-        if (app) {
-            {
-                // @ts-ignore -- Svelte3 では `unmount` は存在しない
-                svelte.unmount(app);
-            }
-            app = null;
-        }
-    };
-    const appArgs = {
-        target: null,
-        props: {
-            send: options.send,
-            publish: options.publish,
-            close,
-            data: {
-                ...options.props,
-                ...options.variables,
-            },
-        },
-    };
-    const win = ensureModalRoot();
-    appArgs.target = win;
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app = // @ts-ignore -- Svelte3 では `mount` は存在しない
-                    svelte.mount(App, appArgs)
-                ;
-        },
-    };
-}
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, }) {
-    const root = ensureModalRoot();
-    if (root.querySelector('.__krt-fog')) {
-        return { fog: null, close: () => { } };
-    }
-    const fog = document.createElement('div');
-    fog.className = '__krt-fog';
-    Object.assign(fog.style, {
-        position: 'fixed',
-        left: 0,
-        top: 0,
-        width: '100%',
-        height: '100%',
-        'z-index': zIndex,
-        'background-color': color,
-        opacity,
-    });
-    const close = () => {
-        onclick();
-        fog.remove();
-    };
-    fog.onclick = close;
-    root.appendChild(fog);
-    return { fog, close };
-}
-
 const USER_ID_VARIABLE_NAME = '__karte_form_identify_user_id';
 const MAX_LENGTH_FREE_ANSWER = 2000;
 function createAnswerValue(value) {
@@ -2849,9 +2936,11 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			{
+			if (isPreview()) {
 				// フォントのロードが遅れてエディタのプレビューがガタつく対策
 				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
+				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
 	);
@@ -3362,6 +3451,54 @@ const execOnClickOperation = (onClickOperation) => {
         bootChat(...onClickOperation.args)();
     }
 };
+function getAnimation(animation) {
+    switch (animation.type) {
+        case 'fade':
+            return `opacity: ${animation.progress}`;
+        case 'bounce': {
+            const translateX = animation.x;
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0) scale(${animation.progress});`;
+        }
+        case 'slide-down': {
+            const translateX = animation.x;
+            const translateY = animation.y - 100 * (1 - animation.progress);
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-up': {
+            const translateX = animation.x;
+            const translateY = animation.y + 100 * (1 - animation.progress);
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-left': {
+            const translateX = animation.x + 100 * (1 - animation.progress);
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'slide-right': {
+            const translateX = animation.x - 100 * (1 - animation.progress);
+            const translateY = animation.y;
+            return `transform: translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        case 'none': {
+            const translateX = animation.x;
+            const translateY = animation.y;
+            return `transform:  translate3d(${translateX}%, ${translateY}%, 0);`;
+        }
+        default:
+            console.warn(`[action-sdk] invalid '${animation}', so we use 'transform: none' instead`);
+            return 'transform: none';
+    }
+}
+const EASING = {
+    fade: linear,
+    bounce: elasticOut,
+    'slide-down': cubicOut,
+    'slide-up': cubicOut,
+    'slide-left': cubicOut,
+    'slide-right': cubicOut,
+    none: linear,
+};
 /**
  * The function to activate svelte animation.
  *
@@ -3373,9 +3510,23 @@ const execOnClickOperation = (onClickOperation) => {
  * @internal
  */
 function customAnimation(node, { transforms, animationStyle, delay = 0, duration = 1000 }) {
-    {
+    if (!isOnSite()) {
         return {};
     }
+    let [x, y] = [0, 0];
+    for (const { query, x: tx, y: ty } of transforms) {
+        if (query == null || window.matchMedia(query).matches) {
+            x = tx;
+            y = ty;
+            break;
+        }
+    }
+    return {
+        delay,
+        duration,
+        easing: EASING[animationStyle],
+        css: (progress) => getAnimation({ type: animationStyle, x, y, progress }),
+    };
 }
 
 const getHref = (onClick) => {
@@ -6242,7 +6393,6 @@ function Modal($$anchor, $$props) {
 	let closeEventValue = $.prop($$props, 'closeEventValue', 8, null);
 	let layerId = $.prop($$props, 'layerId', 8, '');
 	const { brandKit } = useBrandKit();
-	const isCanvasPreview = (document.querySelector('#preview')?.getAttribute('data-canvas-preview') ?? 'false') === 'true';
 	// モーダル背景の設定
 	const isExistBackgroundOverlayValue = placement() && placement().backgroundOverlay !== undefined;
 	let backgroundOverlay = $.mutable_state(DefaultModalPlacement.backgroundOverlay);
@@ -6288,7 +6438,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6394,7 +6544,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (!isCanvasPreview && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6411,7 +6561,7 @@ function Modal($$anchor, $$props) {
 			$.set(transforms, []);
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const positionWithBp = breakPoint()[deviceId]?.placement?.position;
 
 					$.get(transforms).push({
@@ -6447,7 +6597,7 @@ function Modal($$anchor, $$props) {
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (!isCanvasPreview && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6458,7 +6608,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6572,7 +6722,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}