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

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

@@ -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 false;
-};
+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;
@@ -758,6 +764,8 @@ const state = writable('/');
  * @public
  */
 function setState$1(stateId, options) {
+    if (isPreview() && options?.disableInPreview)
+        return;
     state.set(stateId);
 }
 /**
@@ -1168,7 +1176,9 @@ function cloneToJson(data) {
 
 // prettier-ignore
 /** @internal */
-const actionId = typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
+const actionId = isPreview()
+    ? ALL_ACTION_ID
+    : typeof __FLYER_GEN_ACTION_ID_ON_BUILD__ === 'string'
         ? __FLYER_GEN_ACTION_ID_ON_BUILD__
         : randStr();
 /** @internal */
@@ -1576,7 +1586,9 @@ 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 = await Promise.all(config
+    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')
@@ -1623,6 +1635,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);
+}
+
 /**
  * モーダル(ポップアップ)に関連するコードの管理
  *
@@ -1640,12 +1678,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);
 }
@@ -1656,10 +1739,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: () => { },
@@ -1727,6 +1914,9 @@ function createModal(App, options = {
         if (app) {
             return;
         }
+        if (!isOnSite() && trigger === 'custom') {
+            return;
+        }
         if (trigger === 'custom' && (options.props.show_on_scroll || options.props.show_on_time)) {
             return;
         }
@@ -1751,9 +1941,9 @@ function createModal(App, options = {
         if (app) {
             return;
         }
+        const target = ensureActionRoot(isOnSite());
         const props = {
-            target: ensureActionRoot$1(!false),
-            hydrate: false,
+            target,
             props: {
                 send: options.send,
                 publish: options.publish,
@@ -1788,7 +1978,8 @@ function createModal(App, options = {
                 },
             },
         };
-        app =                     svelte.mount(App, props)
+        app = // @ts-ignore -- Svelte3 では `mount` は存在しない
+                svelte.mount(App, props)
             ;
     };
     const handleShow = (event) => {
@@ -1838,7 +2029,10 @@ function createModal(App, options = {
     window.addEventListener(ACTION_CHANGE_STATE_EVENT, handleState);
     let showTriggerCleanups = [];
     let closeTriggerCleanups = [];
-    {
+    if (!isOnSite()) {
+        autoShow();
+    }
+    else {
         showTriggerCleanups = listenShowTrigger();
         closeTriggerCleanups = listenCloseTrigger();
     }
@@ -1870,7 +2064,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}`,
@@ -1893,73 +2087,182 @@ function ensureActionRoot$1(useShadow = true) {
         return el;
     }
 }
-
 /**
- * スクリプト接客が利用するコードの管理
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
  */
-/** @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,
-        publish: options.publish,
-        data,
-    };
-    options.send('script_fired');
-    // 旧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();
-}
+const show = showAction;
 /**
- * ES Modules に対応していない JavaScript をページに読み込む
+ * 非推奨
  *
- * @param src - JavaScript ファイルのリンク URL
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-async function loadGlobalScript(src) {
-    return new Promise((resolve, reject) => {
-        const script = document.createElement('script');
-        script.src = src;
-        document.body.appendChild(script);
-        script.addEventListener('load', () => resolve(script));
-        script.addEventListener('error', () => reject(script));
-    });
-}
+const close = closeAction;
 /**
- * グローバル CSS をページに適用する
+ * 非推奨
  *
- * @param css - CSS
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-async function applyGlobalCss(css) {
-    return new Promise((resolve, reject) => {
-        const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+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 = 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,
+        publish: options.publish,
+        data,
+    };
+    options.send('script_fired');
+    // 旧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 をページに読み込む
+ *
+ * @param src - JavaScript ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadGlobalScript(src) {
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = src;
+        document.body.appendChild(script);
+        script.addEventListener('load', () => resolve(script));
+        script.addEventListener('error', () => reject(script));
+    });
+}
+/**
+ * グローバル CSS をページに適用する
+ *
+ * @param css - CSS
+ *
+ * @public
+ */
+async function applyGlobalCss(css) {
+    return new Promise((resolve, reject) => {
+        const action = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
         if (!action) {
             return;
         }
@@ -2060,7 +2363,7 @@ function create(App, options) {
         runScript$1(options);
     }
     else {
-        modalCleanup = createModal(App, options);
+        modalCleanup = createModal(App, options) ;
     }
     return () => {
         modalCleanup();
@@ -2127,313 +2430,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) {
@@ -2906,7 +2902,10 @@ function Header($$anchor, $$props) {
 			$fonts()
 		),
 		() => {
-			if ($fonts().length > 0) {
+			if (isPreview()) {
+				// フォントのロードが遅れてエディタのプレビューがガタつく対策
+				$.set(googleFontUrl, makeGoogleFontUrl(Fonts.filter((font) => font !== SYSTEM_FONT)));
+			} else if ($fonts().length > 0) {
 				$.set(googleFontUrl, makeGoogleFontUrl($fonts()));
 			}
 		}
@@ -3477,6 +3476,9 @@ const EASING = {
  * @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) {
@@ -6357,7 +6359,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);
@@ -6403,7 +6404,7 @@ function Modal($$anchor, $$props) {
 			$.deep_read_state(breakPoint())
 		),
 		() => {
-			if (!isCanvasPreview && isExistBackgroundOverlayValue) {
+			if (!isCanvasPreview() && isExistBackgroundOverlayValue) {
 				$.set(backgroundOverlay, placement().backgroundOverlay);
 			}
 
@@ -6509,7 +6510,7 @@ function Modal($$anchor, $$props) {
 			// 表示位置のスタイルの設定
 			let position = DefaultModalPlacement.position;
 
-			if (!isCanvasPreview && placement() && placement().position !== null) {
+			if (!isCanvasPreview() && placement() && placement().position !== null) {
 				position = placement().position;
 			}
 
@@ -6526,7 +6527,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({
@@ -6562,7 +6563,7 @@ function Modal($$anchor, $$props) {
 		() => {
 			let margin = DefaultModalPlacement.margin;
 
-			if (!isCanvasPreview && placement() && placement().margin !== null) {
+			if (!isCanvasPreview() && placement() && placement().margin !== null) {
 				margin = placement().margin;
 			}
 
@@ -6573,7 +6574,7 @@ function Modal($$anchor, $$props) {
 			}
 
 			DEVICE_IDS.forEach((deviceId) => {
-				if (!isCanvasPreview && useBreakPoint()) {
+				if (!isCanvasPreview() && useBreakPoint()) {
 					const marginWithBp = breakPoint()[deviceId]?.placement?.margin;
 
 					marginStyle = getMarginStyle(marginWithBp);
@@ -6687,7 +6688,7 @@ function Modal($$anchor, $$props) {
 		};
 
 		$.if(node, ($$render) => {
-			if (isCanvasPreview) $$render(consequent); else $$render(alternate, false);
+			if (isCanvasPreview()) $$render(consequent); else $$render(alternate, false);
 		});
 	}