@plaidev/karte-action-sdk 1.1.176-28039456.06c11c78 → 1.1.177-28039844.a230804c

package/dist/hydrate/index.es.js

@@ -1,8 +1,33 @@
-import 'svelte/easing';
 import { writable, get } from 'svelte/store';
 import { onMount as onMount$1, onDestroy as onDestroy$1, beforeUpdate as beforeUpdate$1, afterUpdate as afterUpdate$1, tick as tick$1, setContext, getContext, createEventDispatcher } from 'svelte';
 import { SvelteComponent, init, safe_not_equal, create_slot, update_slot_base, get_all_dirty_from_scope, get_slot_changes, transition_in, transition_out, append_styles, empty, insert_hydration, group_outros, check_outros, detach, component_subscribe, element, space, claim_element, children, claim_space, attr, noop, listen, null_to_empty, is_function, create_component, claim_component, mount_component, destroy_component, add_render_callback, create_in_transition, binding_callbacks, set_style, svg_element, claim_svg_element, append_hydration, destroy_each, text, claim_text, set_data, src_url_equal, HtmlTagHydration, claim_html_tag, construct_svelte_component, subscribe } from 'svelte/internal';
+import 'svelte/easing';
+
+/** @internal */
+const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
+/** @internal */
+const KARTE_ACTION_ROOT = 'karte-action-root';
+/** @internal */
+const KARTE_ACTION_RID = 'karte-action-rid';
+/** @internal */
+const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
+/** @internal */
+const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
+/** @internal */
+const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
+// -------- The following codes are deprecated --------
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const KARTE_MODAL_ROOT = 'karte-modal-root';
 
+/**
+ * 静的変数に関連するコードを管理する
+ */
 /** @internal */
 const PropTypes = [
     'BooleanKeyword',
@@ -247,6 +272,10 @@ const NOOP = (_args) => { }; // eslint-disable-line @typescript-eslint/no-unused
 const isPreview = () => {
     return true;
 };
+// prettier-ignore
+/** @internal */
+const actionId = ALL_ACTION_ID
+    ;
 /** @internal */
 const handleFocus = (node) => (e) => {
     if (node) {
@@ -445,6 +474,23 @@ function hasSuffix(value, suffix) {
 function getGoogleFontsParam() {
     return 'family=' + Fonts.map(font => font.replace(/ /g, '+')).join('&family=');
 }
+/** @internal */
+const h = (type, props, ...children) => {
+    const el = document.createElement(type);
+    for (const key of Object.keys(props)) {
+        const v = props[key];
+        if (key === 'style') {
+            Object.assign(el.style, v);
+        }
+        else {
+            el.setAttribute(key, v);
+        }
+    }
+    for (const child of children) {
+        el.appendChild(child);
+    }
+    return el;
+};
 
 /**
  * Store to handle action setting
@@ -807,385 +853,109 @@ function resetVariables() {
  */
 const formData = writable({});
 
-function isEmpty(value) {
-    if (Array.isArray(value)) {
-        return value.length === 0;
-    }
-    else {
-        return !value;
-    }
-}
+/**
+ * アクションのログの記録の管理
+ */
+const MESSAGES_LIMIT = 1000;
+const EVENTS_LIMIT = 1000;
+// 実行ログ
+let logs = [];
+// KARTEイベント
+let events = [];
 /** @internal */
-function registerInput({ name, statePath, validator = () => true, initialValue, }) {
-    const writableValue = {
-        subscribe(run) {
-            return formData.subscribe(formData => {
-                run(formData[name]?.value);
-            });
-        },
-        set(value) {
-            formData.update(prev => ({
-                ...prev,
-                [name]: {
-                    statePath,
-                    value,
-                    isValid: validator(value),
-                },
-            }));
-        },
-        update(updater) {
-            formData.update(prev => {
-                const prevValue = prev[name]?.value;
-                return {
-                    ...prev,
-                    [name]: {
-                        statePath,
-                        value: updater(prevValue),
-                        isValid: validator(prevValue),
-                    },
-                };
-            });
-        },
-    };
-    if (isEmpty(get(writableValue))) {
-        writableValue.set(initialValue);
-    }
-    return writableValue;
+function getLogs() {
+    return logs;
 }
 /** @internal */
-const getValuesAreValidReader = statePath => ({
-    subscribe(callback) {
-        return formData.subscribe(formData => {
-            const valuesAreValid = Object.entries(formData)
-                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
-                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
-            callback(valuesAreValid);
-        });
+function getEvents() {
+    return events;
+}
+// iframe内の場合は親windowを参照する
+function w(w) {
+    return w.parent === w ? w : w.parent;
+}
+/**
+ * ログを送信する関数群
+ *
+ * @internal
+ */
+const logger = {
+    info: (...messages) => {
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
     },
-});
-function formDataToEventValues(campaignId, formData) {
-    const questions = [];
-    const answersMap = {};
-    Object.entries(formData).forEach(([name, dataItem]) => {
-        questions.push(name);
-        const value = dataItem.value;
-        const answerKey = `question_${name}`;
-        if (Array.isArray(value)) {
-            answersMap[answerKey] = {
-                choices: value,
-            };
+    log: (...messages) => {
+        const log = cloneToJson({ level: 'info', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    error: (...messages) => {
+        const log = cloneToJson({ level: 'error', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    warn: (...messages) => {
+        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    system: (...messages) => {
+        const log = cloneToJson({ level: 'system', messages, date: new Date() });
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
+    },
+    event: (name, values) => {
+        const event = values ? { name, values, date: new Date() } : { name, date: new Date() };
+        w(window).postMessage({
+            type: 'KARTE-ACTION-LOGGER',
+            detail: { method: 'event', event, values: values },
+        }, '*');
+    },
+    clear: () => {
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clear' } }, '*');
+    },
+    clearEvents: () => {
+        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clearEvents' } }, '*');
+    },
+};
+/**
+ * メッセージを実行ログに表示する
+ *
+ * @internal
+ */
+function listenLogger() {
+    const handler = (event) => {
+        const { type, detail } = event.data;
+        if (event.origin !== location.origin) {
+            return;
         }
-        else if (typeof value === 'string') {
-            answersMap[answerKey] = {
-                free_answer: value,
-            };
+        if (type !== 'KARTE-ACTION-LOGGER') {
+            return;
+        }
+        if (detail.method === 'clear') {
+            logs = [];
+        }
+        else if (detail.method === 'clearEvents') {
+            events = [];
+        }
+        else if (detail.method === 'log') {
+            if (MESSAGES_LIMIT <= logs.length) {
+                logs.shift();
+            }
+            const { level, messages } = detail.log;
+            const log = { level, messages, date: new Date() };
+            logs.push(log);
+        }
+        else if (detail.method === 'event') {
+            if (EVENTS_LIMIT <= events.length) {
+                events.shift();
+            }
+            const { name, values } = detail.event;
+            const karteEvent = values
+                ? { name, values, date: new Date() }
+                : { name, date: new Date() };
+            events.push(karteEvent);
         }
-    });
-    return {
-        [campaignId]: {
-            questions,
-            ...answersMap,
-        },
-    };
-}
-/** @internal */
-function submit() {
-    const systemConfig = getSystem();
-    const campaignId = systemConfig.campaignId;
-    if (campaignId) {
-        const formData$1 = get(formData);
-        const values = formDataToEventValues(campaignId, formData$1);
-        return values;
-    }
-    {
-        const formData$1 = get(formData);
-        const values = formDataToEventValues('mock', formData$1);
-        console.log('values: ', values);
-        return values;
-    }
-}
-
-/** @internal */
-const ALL_ACTION_ID = 'KARTE_ALL_ACTION_ID';
-/** @internal */
-const ALL_ACTION_SHORTEN_ID = 'KARTE_ALL_ACTION_SHORTEN_ID';
-// prettier-ignore
-/** @internal */
-const actionId = ALL_ACTION_ID
-    ;
-/** @internal */
-const ACTION_SHOW_EVENT = `KARTE-ACTION-SHOW-${actionId}`;
-/** @internal */
-const ACTION_CLOSE_EVENT = `KARTE-ACTION-CLOSE-${actionId}`;
-/** @internal */
-const ACTION_DESTROY_EVENT = `KARTE-ACTION-DESTROY-${actionId}`;
-/** @internal */
-const ACTION_CHANGE_STATE_EVENT = `KARTE-ACTION-CHANGE-STATE-${actionId}`;
-/** @internal */
-const handleState = (event) => {
-    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
-        send_event('_message_state_changed', { state: event.detail.to });
-        setState$1(event.detail.to, { disableInPreview: event.detail.disableInPreview });
-    }
-};
-/** @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();
-};
-/** @internal */
-const send_event = (event_name, values) => {
-    const setting = getSetting();
-    setting?.send?.(event_name, values);
-};
-function _moveTo(to) {
-    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
-}
-/** @internal */
-const moveTo = (to) => () => {
-    _moveTo(to);
-};
-/** @internal */
-const linkTo = (to, targetBlank = true) => () => {
-    send_event('message_click', { url: to, state: getState$1() });
-    if (targetBlank) {
-        window.open(to);
-    }
-    else {
-        location.href = to;
-    }
-};
-/** @internal */
-const closeApp = (trigger) => () => {
-    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
-};
-/** @internal */
-const runScript = (handlerName) => () => {
-    const handlers = getEventHandlers();
-    const handler = handlers[handlerName];
-    if (!handler)
-        return;
-    try {
-        handler();
-    }
-    catch (e) {
-        console.warn('Failed to run custom handler', handlerName, e);
-    }
-};
-/** @internal */
-const submitForm = (to) => () => {
-    const values = submit();
-    send_event('_answer_question', values);
-    _moveTo(to);
-};
-/** @internal */
-const execOnClickOperation = (onClickOperation) => {
-    if (onClickOperation.operation === 'linkTo') {
-        linkTo(...onClickOperation.args)();
-    }
-    else if (onClickOperation.operation === 'moveTo') {
-        moveTo(...onClickOperation.args)();
-    }
-    else if (onClickOperation.operation === 'closeApp') {
-        closeApp(onClickOperation.args[0] || 'button')();
-    }
-    else if (onClickOperation.operation === 'runScript') {
-        runScript(onClickOperation.args[0])();
-    }
-    else if (onClickOperation.operation === 'submitForm') {
-        submitForm(onClickOperation.args[0])();
-    }
-};
-/** @internal */
-const haveFunction = (onClickOperation) => {
-    return onClickOperation.operation !== 'none';
-};
-/**
- * The function to activate svelte animation.
- *
- * @param node - A target node of animation. This argument is passed by svelte, by default.
- * @param customAnimationOptions - A custom animation option object
- *
- * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
- *
- * @internal
- */
-function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
-    {
-        return {};
-    }
-}
-/**
- * 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 style = document.createElement('style');
-        style.textContent = css;
-        document.body.appendChild(style);
-        style.addEventListener('load', () => resolve(style));
-        style.addEventListener('error', () => reject(style));
-    });
-}
-/**
- * style ファイルをページに読み込む
- *
- * @param href - style ファイルのリンク URL
- *
- * @public
- */
-async function loadGlobalStyle(href) {
-    return new Promise((resolve, reject) => {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = href;
-        document.body.appendChild(link);
-        link.addEventListener('load', () => resolve(link));
-        link.addEventListener('error', () => reject(link));
-    });
-}
-// @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(';');
-}
-
-/**
- * アクションのログの記録の管理
- */
-const MESSAGES_LIMIT = 1000;
-const EVENTS_LIMIT = 1000;
-// 実行ログ
-let logs = [];
-// KARTEイベント
-let events = [];
-/** @internal */
-function getLogs() {
-    return logs;
-}
-/** @internal */
-function getEvents() {
-    return events;
-}
-// iframe内の場合は親windowを参照する
-function w(w) {
-    return w.parent === w ? w : w.parent;
-}
-/**
- * ログを送信する関数群
- *
- * @internal
- */
-const logger = {
-    info: (...messages) => {
-        const log = cloneToJson({ level: 'info', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    log: (...messages) => {
-        const log = cloneToJson({ level: 'info', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    error: (...messages) => {
-        const log = cloneToJson({ level: 'error', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    warn: (...messages) => {
-        const log = cloneToJson({ level: 'warn', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    system: (...messages) => {
-        const log = cloneToJson({ level: 'system', messages, date: new Date() });
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'log', log } }, '*');
-    },
-    event: (name, values) => {
-        const event = values ? { name, values, date: new Date() } : { name, date: new Date() };
-        w(window).postMessage({
-            type: 'KARTE-ACTION-LOGGER',
-            detail: { method: 'event', event, values: values },
-        }, '*');
-    },
-    clear: () => {
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clear' } }, '*');
-    },
-    clearEvents: () => {
-        w(window).postMessage({ type: 'KARTE-ACTION-LOGGER', detail: { method: 'clearEvents' } }, '*');
-    },
-};
-/**
- * メッセージを実行ログに表示する
- *
- * @internal
- */
-function listenLogger() {
-    const handler = (event) => {
-        const { type, detail } = event.data;
-        if (event.origin !== location.origin) {
-            return;
-        }
-        if (type !== 'KARTE-ACTION-LOGGER') {
-            return;
-        }
-        if (detail.method === 'clear') {
-            logs = [];
-        }
-        else if (detail.method === 'clearEvents') {
-            events = [];
-        }
-        else if (detail.method === 'log') {
-            if (MESSAGES_LIMIT <= logs.length) {
-                logs.shift();
-            }
-            const { level, messages } = detail.log;
-            const log = { level, messages, date: new Date() };
-            logs.push(log);
-        }
-        else if (detail.method === 'event') {
-            if (EVENTS_LIMIT <= events.length) {
-                events.shift();
-            }
-            const { name, values } = detail.event;
-            const karteEvent = values
-                ? { name, values, date: new Date() }
-                : { name, date: new Date() };
-            events.push(karteEvent);
-        }
-    };
-    window.addEventListener('message', handler, false);
-    return () => {
-        window.removeEventListener('message', handler, false);
+    };
+    window.addEventListener('message', handler, false);
+    return () => {
+        window.removeEventListener('message', handler, false);
     };
 }
 const { info, log, error, warn } = console;
@@ -1229,6 +999,9 @@ function cloneToJson(data) {
     }
 }
 
+/**
+ * モーダル(ポップアップ)のロジックを管理する
+ */
 function doPresent({ direction, deltaRate }, downFn, upFn, condition = false) {
     if (direction === 'down' && deltaRate > 0) {
         downFn();
@@ -1321,6 +1094,23 @@ function showOnTime(props, show = NOOP) {
         : 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);
+};
+
+/**
+ * アクションテーブルに関連するコードの管理
+ */
 const DEFAULT_COLLECTION_ENDPOINT = typeof __FLYER_GEN_COLLECTION_API_ENDPOINT__ === 'string'
     ? __FLYER_GEN_COLLECTION_API_ENDPOINT__
     : 'https://t.karte.io/collection';
@@ -1413,83 +1203,34 @@ const loadActionTable = async (config, api_key, endpoint) => {
     }, {});
 };
 
-/** @internal */
-const ACTION_HOOK_LABEL = '__ACTION_HOOK__';
 /**
- * アクションが作成 (create) される前にフックする関数
+ * Edgeが起動するアクションに関連するコードを管理する
  *
- * @param fn - 呼び出されるフック関数
+ * アクションのCreate, Destroyの状態はここで管理する。
  *
- * @public
+ * FIXME: モーダルなどの機能ごとのコードを分離したい
  */
-function onCreate(fn) {
-    let { onCreateHandlers } = getInternalHandlers();
-    if (!onCreateHandlers) {
-        onCreateHandlers = [];
-    }
-    onCreateHandlers.push(fn);
-    setInternalHandlers({ onCreateHandlers });
-}
-/**
- * アクションが表示 (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 });
-}
-/**
- * アクションが破棄 (destroy) される前にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onDestroy(fn) {
-    let { onDestroyHandlers } = getInternalHandlers();
-    if (!onDestroyHandlers) {
-        onDestroyHandlers = [];
+/** @internal */
+const handleState = (event) => {
+    if (event.detail.actionId === actionId || event.detail.actionId === ALL_ACTION_ID) {
+        send_event('_message_state_changed', { state: event.detail.to });
+        setState$1(event.detail.to, { disableInPreview: event.detail.disableInPreview });
     }
-    onDestroyHandlers.push(fn);
-    setInternalHandlers({ onDestroyHandlers });
-}
-/**
- * アクションのステートが変更された (changeState) 後にフックする関数
- *
- * @param fn - 呼び出されるフック関数
- *
- * @public
- */
-function onChangeState(fn) {
-    let { onChangeStateHandlers } = getInternalHandlers();
-    if (!onChangeStateHandlers) {
-        onChangeStateHandlers = [];
+};
+/** @internal */
+const initialize = (setting) => {
+    const newSetting = setSetting(setting);
+    if (newSetting.initialState) {
+        setState$1(newSetting.initialState);
     }
-    onChangeStateHandlers.push(fn);
-    setInternalHandlers({ onChangeStateHandlers });
-}
+    setOpened(true);
+    setClosed(false); // deprecated
+    return () => finalize();
+};
+/** @internal */
+const finalize = () => {
+    resetSetting();
+};
 /**
  * アクションを作成する
  *
@@ -1679,92 +1420,155 @@ function create(App, options = {
         window.removeEventListener('beforeunload', dispatchDestroyEvent, false);
         loggerCleanup();
     };
-    return appCleanup;
+    return appCleanup;
+}
+/** @internal */
+function ensureActionRoot(useShadow = true) {
+    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,
+    };
+    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 && useShadow;
+    if (isShadow) {
+        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
+    }
+    else {
+        return el;
+    }
+}
+/**
+ * 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 - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onDestroy(fn) {
+    let { onDestroyHandlers } = getInternalHandlers();
+    if (!onDestroyHandlers) {
+        onDestroyHandlers = [];
+    }
+    onDestroyHandlers.push(fn);
+    setInternalHandlers({ onDestroyHandlers });
+}
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const showModal = create;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+const ensureModalRoot = ensureActionRoot;
+/**
+ * 非推奨
+ *
+ * @deprecated 非推奨
+ *
+ * @internal
+ */
+function createApp(App, options = {
+    send: () => { },
+    publish: () => { },
+    props: {},
+    variables: {},
+    localVariablesQuery: undefined,
+}) {
+    let app = null;
+    const close = () => {
+        if (app) {
+            app.$destroy();
+            app = null;
+        }
+    };
+    const appArgs = {
+        target: null,
+        props: {
+            send: options.send,
+            publish: options.publish,
+            close,
+            data: {
+                ...options.props,
+                ...options.variables,
+            },
+        },
+    };
+    {
+        const win = ensureModalRoot(false);
+        appArgs.target = win;
+        appArgs.hydrate = true;
+    }
+    return {
+        close,
+        show: () => {
+            if (app) {
+                return;
+            }
+            options.send('message_open');
+            app = new App(appArgs);
+        },
+    };
 }
 /**
- * Dispatch the event to destroy KARTE action
+ * 非推奨
  *
- * @internal
- */
-function dispatchDestroyEvent() {
-    const event = new CustomEvent(ACTION_DESTROY_EVENT);
-    window.dispatchEvent(event);
-}
-/**
- * アクションの破棄する
+ * @deprecated 非推奨
  *
- * @public
+ * @internal
  */
-function destroyAction() {
+function destroy() {
     setDestroyed(true);
     dispatchDestroyEvent();
 }
-/**
- * アクションを表示する
- *
- * @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);
-}
-/** @internal */
-const KARTE_ACTION_ROOT = 'karte-action-root';
-/** @internal */
-const KARTE_ACTION_RID = 'karte-action-rid';
-/** @internal */
-const KARTE_ACTION_SHORTEN_ID = 'karte-action-id';
-/** @internal */
-function ensureActionRoot(useShadow = true) {
-    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,
-    };
-    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 && useShadow;
-    if (isShadow) {
-        return el.shadowRoot ?? el.attachShadow({ mode: 'open' });
-    }
-    else {
-        return el;
-    }
-}
-/** @internal */
-const h = (type, props, ...children) => {
-    const el = document.createElement(type);
-    for (const key of Object.keys(props)) {
-        const v = props[key];
-        if (key === 'style') {
-            Object.assign(el.style, v);
-        }
-        else {
-            el.setAttribute(key, v);
-        }
-    }
-    for (const child of children) {
-        el.appendChild(child);
-    }
-    return el;
-};
 /**
  * 非推奨
  *
@@ -1797,19 +1601,129 @@ function createFog({ color = '#000', opacity = '50%', zIndex = 999, onclick, })
     root.appendChild(fog);
     return { fog, close };
 }
+
 /**
- * アクションのルートの DOM 要素を取得する
+ * スクリプト接客が利用するコードの管理
+ */
+/**
+ * ES Modules に対応していない JavaScript をページに読み込む
  *
- * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
+ * @param src - JavaScript ファイルのリンク URL
  *
  * @public
  */
-function getActionRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
+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 style = document.createElement('style');
+        style.textContent = css;
+        document.body.appendChild(style);
+        style.addEventListener('load', () => resolve(style));
+        style.addEventListener('error', () => reject(style));
+    });
+}
+/**
+ * style ファイルをページに読み込む
+ *
+ * @param href - style ファイルのリンク URL
+ *
+ * @public
+ */
+async function loadGlobalStyle(href) {
+    return new Promise((resolve, reject) => {
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = href;
+        document.body.appendChild(link);
+        link.addEventListener('load', () => resolve(link));
+        link.addEventListener('error', () => reject(link));
+    });
+}
+
+/**
+ * モーダル(ポップアップ)に関連するコードの管理
+ *
+ * アクションのShow, Close, ChangeStateの状態はここで管理する。
+ */
+/**
+ * アクションが表示 (show) された後にフックする関数
+ *
+ * @param fn - 呼び出されるフック関数
+ *
+ * @public
+ */
+function onShow(fn) {
+    let { onShowHandlers } = getInternalHandlers();
+    if (!onShowHandlers) {
+        onShowHandlers = [];
     }
-    return root.shadowRoot;
+    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 を適用する
@@ -1824,7 +1738,7 @@ async function applyCss(css) {
     return new Promise((resolve, reject) => {
         const style = document.createElement('style');
         style.textContent = css;
-        const shadowRoot = getActionShadowRoot();
+        const shadowRoot = getActionRoot();
         if (!shadowRoot)
             return;
         shadowRoot.append(style);
@@ -1863,7 +1777,7 @@ async function fixFontFaceIssue(href, cssRules) {
  * @public
  */
 async function loadStyle(href) {
-    const sr = getActionShadowRoot();
+    const sr = getActionRoot();
     if (!sr)
         return;
     let cssRules = '';
@@ -1887,101 +1801,35 @@ async function loadStyle(href) {
     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];
-}
-// -------- The following codes are deprecated --------
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const showModal = create;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const KARTE_MODAL_ROOT = 'karte-modal-root';
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const ensureModalRoot = ensureActionRoot;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const show = showAction;
-/**
- * 非推奨
- *
- * @deprecated 非推奨
- *
- * @internal
- */
-const close = closeAction;
+    // 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 要素を取得する
  *
- * @deprecated 非推奨
+ * @returns アクションがルートの DOM 要素 を持つ場合は DOM 要素を返します。ない場合は `null` を返します
  *
- * @internal
+ * @public
  */
-function createApp(App, options = {
-    send: () => { },
-    publish: () => { },
-    props: {},
-    variables: {},
-    localVariablesQuery: undefined,
-}) {
-    let app = null;
-    const close = () => {
-        if (app) {
-            app.$destroy();
-            app = null;
-        }
-    };
-    const appArgs = {
-        target: null,
-        props: {
-            send: options.send,
-            publish: options.publish,
-            close,
-            data: {
-                ...options.props,
-                ...options.variables,
-            },
-        },
-    };
-    {
-        const win = ensureModalRoot(false);
-        appArgs.target = win;
-        appArgs.hydrate = true;
+function getActionRoot() {
+    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
+    if (!root?.shadowRoot) {
+        return null;
     }
-    return {
-        close,
-        show: () => {
-            if (app) {
-                return;
-            }
-            options.send('message_open');
-            app = new App(appArgs);
-        },
-    };
+    return root.shadowRoot;
 }
+// -------- The following codes are deprecated --------
 /**
  * 非推奨
  *
@@ -1989,13 +1837,7 @@ function createApp(App, options = {
  *
  * @internal
  */
-function getActionShadowRoot() {
-    const root = document.querySelector(`.${KARTE_ACTION_ROOT}[data-${KARTE_ACTION_RID}='${actionId}']`);
-    if (!root?.shadowRoot) {
-        return null;
-    }
-    return root.shadowRoot;
-}
+const show = showAction;
 /**
  * 非推奨
  *
@@ -2003,13 +1845,10 @@ function getActionShadowRoot() {
  *
  * @internal
  */
-function destroy() {
-    setDestroyed(true);
-    dispatchDestroyEvent();
-}
+const close = closeAction;
 
 /**
- * Widget API 互換のインターフェース
+ * エディタv1のWidget API 互換のインターフェース
  */
 const STORE_LS_KEY_PREFIX = 'krt___';
 const valCallbacks = {};
@@ -2543,6 +2382,185 @@ class StateItem extends SvelteComponent {
 	}
 }
 
+function isEmpty(value) {
+    if (Array.isArray(value)) {
+        return value.length === 0;
+    }
+    else {
+        return !value;
+    }
+}
+/** @internal */
+function registerInput({ name, statePath, validator = () => true, initialValue, }) {
+    const writableValue = {
+        subscribe(run) {
+            return formData.subscribe(formData => {
+                run(formData[name]?.value);
+            });
+        },
+        set(value) {
+            formData.update(prev => ({
+                ...prev,
+                [name]: {
+                    statePath,
+                    value,
+                    isValid: validator(value),
+                },
+            }));
+        },
+        update(updater) {
+            formData.update(prev => {
+                const prevValue = prev[name]?.value;
+                return {
+                    ...prev,
+                    [name]: {
+                        statePath,
+                        value: updater(prevValue),
+                        isValid: validator(prevValue),
+                    },
+                };
+            });
+        },
+    };
+    if (isEmpty(get(writableValue))) {
+        writableValue.set(initialValue);
+    }
+    return writableValue;
+}
+/** @internal */
+const getValuesAreValidReader = statePath => ({
+    subscribe(callback) {
+        return formData.subscribe(formData => {
+            const valuesAreValid = Object.entries(formData)
+                .filter(([_, { statePath: s }]) => s === statePath) // eslint-disable-line @typescript-eslint/no-unused-vars
+                .every(([_, { isValid }]) => isValid); // eslint-disable-line @typescript-eslint/no-unused-vars
+            callback(valuesAreValid);
+        });
+    },
+});
+function formDataToEventValues(campaignId, formData) {
+    const questions = [];
+    const answersMap = {};
+    Object.entries(formData).forEach(([name, dataItem]) => {
+        questions.push(name);
+        const value = dataItem.value;
+        const answerKey = `question_${name}`;
+        if (Array.isArray(value)) {
+            answersMap[answerKey] = {
+                choices: value,
+            };
+        }
+        else if (typeof value === 'string') {
+            answersMap[answerKey] = {
+                free_answer: value,
+            };
+        }
+    });
+    return {
+        [campaignId]: {
+            questions,
+            ...answersMap,
+        },
+    };
+}
+/** @internal */
+function submit() {
+    const systemConfig = getSystem();
+    const campaignId = systemConfig.campaignId;
+    if (campaignId) {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues(campaignId, formData$1);
+        return values;
+    }
+    {
+        const formData$1 = get(formData);
+        const values = formDataToEventValues('mock', formData$1);
+        console.log('values: ', values);
+        return values;
+    }
+}
+
+/**
+ * モーダル(ポップアップ)のコンポーネントが利用するコードの管理
+ */
+function _moveTo(to) {
+    window.dispatchEvent(new CustomEvent(ACTION_CHANGE_STATE_EVENT, { detail: { to, actionId } }));
+}
+/** @internal */
+const moveTo = (to) => () => {
+    _moveTo(to);
+};
+/** @internal */
+const linkTo = (to, targetBlank = true) => () => {
+    send_event('message_click', { url: to, state: getState$1() });
+    if (targetBlank) {
+        window.open(to);
+    }
+    else {
+        location.href = to;
+    }
+};
+/** @internal */
+const closeApp = (trigger) => () => {
+    window.dispatchEvent(new CustomEvent(ACTION_CLOSE_EVENT, { detail: { trigger } }));
+};
+/** @internal */
+const runScript = (handlerName) => () => {
+    const handlers = getEventHandlers();
+    const handler = handlers[handlerName];
+    if (!handler)
+        return;
+    try {
+        handler();
+    }
+    catch (e) {
+        console.warn('Failed to run custom handler', handlerName, e);
+    }
+};
+/** @internal */
+const submitForm = (to) => () => {
+    const values = submit();
+    send_event('_answer_question', values);
+    _moveTo(to);
+};
+/** @internal */
+const execOnClickOperation = (onClickOperation) => {
+    if (onClickOperation.operation === 'linkTo') {
+        linkTo(...onClickOperation.args)();
+    }
+    else if (onClickOperation.operation === 'moveTo') {
+        moveTo(...onClickOperation.args)();
+    }
+    else if (onClickOperation.operation === 'closeApp') {
+        closeApp(onClickOperation.args[0] || 'button')();
+    }
+    else if (onClickOperation.operation === 'runScript') {
+        runScript(onClickOperation.args[0])();
+    }
+    else if (onClickOperation.operation === 'submitForm') {
+        submitForm(onClickOperation.args[0])();
+    }
+};
+/** @internal */
+const haveFunction = (onClickOperation) => {
+    return onClickOperation.operation !== 'none';
+};
+/**
+ * The function to activate svelte animation.
+ *
+ * @param node - A target node of animation. This argument is passed by svelte, by default.
+ * @param customAnimationOptions - A custom animation option object
+ *
+ * @see {@link https://svelte.dev/docs#template-syntax-element-directives-transition-fn-custom-transition-functions| Custom transition functions} for detail documentation
+ *
+ * @internal
+ */
+function customAnimation(node, { transform, animationStyle, delay = 0, duration = 1000 }) {
+    {
+        return {};
+    }
+}
+
 /* src/components/BackgroundOverray.svelte generated by Svelte v3.53.1 */
 
 function add_css$s(target) {
@@ -2650,7 +2668,7 @@ function add_css$r(target) {
 	append_styles(target, "svelte-1tg0tf", ".button.svelte-1tg0tf{display:block;text-decoration:none;color:inherit;border:none;background:none;margin:0;padding:0}.button.svelte-1tg0tf:link,.button.svelte-1tg0tf:visited,.button.svelte-1tg0tf:active,.button.svelte-1tg0tf:hover{color:inherit}");
 }
 
-// (48:0) {:else}
+// (49:0) {:else}
 function create_else_block$3(ctx) {
 	let button;
 	let current;
@@ -2728,7 +2746,7 @@ function create_else_block$3(ctx) {
 	};
 }
 
-// (44:39) 
+// (45:39) 
 function create_if_block_2(ctx) {
 	let div;
 	let current;
@@ -2797,7 +2815,7 @@ function create_if_block_2(ctx) {
 	};
 }
 
-// (40:41) 
+// (41:41) 
 function create_if_block_1$2(ctx) {
 	let a;
 	let a_href_value;
@@ -2893,7 +2911,7 @@ function create_if_block_1$2(ctx) {
 	};
 }
 
-// (36:0) {#if disabled}
+// (37:0) {#if disabled}
 function create_if_block$6(ctx) {
 	let div;
 	let current;
@@ -3136,7 +3154,7 @@ function add_css$q(target) {
 	append_styles(target, "svelte-yyiwdt", ".modal.svelte-yyiwdt{position:fixed;box-sizing:border-box;z-index:2147483647;display:flex}.modal.svelte-yyiwdt > .button{flex:auto;display:flex}.close.svelte-yyiwdt{position:absolute;top:0;right:0}.close.svelte-yyiwdt > .button{position:absolute;display:flex;justify-content:center;align-items:center;background-color:transparent;border:none;cursor:pointer;padding:0;transition:all 0.25s}.close.svelte-yyiwdt > .button:hover{transform:rotate(90deg)}.modal-content.svelte-yyiwdt{flex:auto;display:flex;justify-content:center;align-items:center}");
 }
 
-// (145:0) {#if visible}
+// (146:0) {#if visible}
 function create_if_block$5(ctx) {
 	let div;
 	let button;
@@ -3231,7 +3249,7 @@ function create_if_block$5(ctx) {
 	};
 }
 
-// (162:6) {#if closable}
+// (163:6) {#if closable}
 function create_if_block_1$1(ctx) {
 	let div;
 	let button;
@@ -3303,7 +3321,7 @@ function create_if_block_1$1(ctx) {
 	};
 }
 
-// (164:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
+// (165:10) <Button onClick={onClose} style={_closeStyle} eventName={closeEventName} eventValue={closeEventValue}>
 function create_default_slot_1$1(ctx) {
 	let svg;
 	let path;
@@ -3360,7 +3378,7 @@ function create_default_slot_1$1(ctx) {
 	};
 }
 
-// (161:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
+// (162:4) <Button {onClick} eventName={clickEventName} eventValue={clickEventValue}>
 function create_default_slot$6(ctx) {
 	let t;
 	let div;