@plaidev/karte-action-sdk 1.1.270-29419384.246a50882 → 1.1.270-29420750.2ec690591

package/dist/components-flex/css.d.ts

@@ -1,5 +1,5 @@
 import { Properties } from "csstype";
-import { ResponsiveSetting } from "./responsive.js";
+import { ResponsiveProp } from "./responsiveProp.js";
 export declare function createComponentRawCss(layerId: string, define: (style: (selector: string, styles: Properties) => string) => string[]): string;
-export declare function toResponsiveSelector(responsiveSetting: ResponsiveSetting<any>, body: string): string;
+export declare function toResponsiveSelector(responsiveSetting: ResponsiveProp<any>, body: string): string;
 export declare function toStyleTag(css: string): string;

package/dist/components-flex/props.d.ts

@@ -4,9 +4,9 @@ import type { BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET } from "./button/types.js";
 import type { BrandKit } from "./brand-kit.js";
 import type { AspectVariantCode, FontFamilyVariantCode, ShadowVariantCode, BackgroundColorVariantCode } from "./variants.js";
 import type { TEXT_THEME } from "./text/types.js";
-import { type ResponsiveSetting } from "./responsive.js";
+import { type ResponsiveProp } from "./responsiveProp.js";
 export type FlexComponentProps<T extends object> = T & {
-	responsiveSettings?: ResponsiveSetting<T>[];
+	responsiveSettings?: ResponsiveProp<T>[];
 };
 type PositionPlaceProps = {
 	top?: Properties["top"];

package/dist/components-flex/responsiveProp.d.ts

@@ -0,0 +1,7 @@
+import { FlexComponentProps } from "./props.js";
+import { Readable } from "svelte/store";
+export type ResponsiveProp<T extends object> = {
+	breakpointId?: string;
+	props: Partial<T>;
+};
+export declare function useResponsiveProps<T extends object>(props: FlexComponentProps<T>): Readable<T>;

package/dist/hydrate/components-flex/css.d.ts

@@ -1,5 +1,5 @@
 import { Properties } from "csstype";
-import { ResponsiveSetting } from "./responsive.js";
+import { ResponsiveProp } from "./responsiveProp.js";
 export declare function createComponentRawCss(layerId: string, define: (style: (selector: string, styles: Properties) => string) => string[]): string;
-export declare function toResponsiveSelector(responsiveSetting: ResponsiveSetting<any>, body: string): string;
+export declare function toResponsiveSelector(responsiveSetting: ResponsiveProp<any>, body: string): string;
 export declare function toStyleTag(css: string): string;

package/dist/hydrate/components-flex/props.d.ts

@@ -4,9 +4,9 @@ import type { BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET } from "./button/types.js";
 import type { BrandKit } from "./brand-kit.js";
 import type { AspectVariantCode, FontFamilyVariantCode, ShadowVariantCode, BackgroundColorVariantCode } from "./variants.js";
 import type { TEXT_THEME } from "./text/types.js";
-import { type ResponsiveSetting } from "./responsive.js";
+import { type ResponsiveProp } from "./responsiveProp.js";
 export type FlexComponentProps<T extends object> = T & {
-	responsiveSettings?: ResponsiveSetting<T>[];
+	responsiveSettings?: ResponsiveProp<T>[];
 };
 type PositionPlaceProps = {
 	top?: Properties["top"];

package/dist/hydrate/components-flex/responsiveProp.d.ts

@@ -0,0 +1,7 @@
+import { FlexComponentProps } from "./props.js";
+import { Readable } from "svelte/store";
+export type ResponsiveProp<T extends object> = {
+	breakpointId?: string;
+	props: Partial<T>;
+};
+export declare function useResponsiveProps<T extends object>(props: FlexComponentProps<T>): Readable<T>;

package/dist/hydrate/index.d.ts

@@ -17,6 +17,7 @@ export type { CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequ
 export { addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers } from "./form.js";
 export * as widget from "./widget.js";
 export { onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES } from "./components/index.js";
+export * from "./preview.js";
 export { default as State } from "./components/State.svelte.js";
 export { default as StateItem } from "./components/StateItem.svelte.js";
 export { default as Modal } from "./components/Modal.svelte.js";

package/dist/hydrate/index.es.js

@@ -56,6 +56,9 @@ const NOOP = (_args) => {};
 /** @internal */
 const isPreview = () => true;
 const isCanvasPreview = () => typeof document !== "undefined" ? (document?.querySelector("#preview")?.getAttribute("data-canvas-preview") ?? "false") === "true" : false;
+const getPreviewId = () => {
+	return typeof document !== "undefined" ? document.documentElement.getAttribute("data-krt-preview-id") ?? "" : "";
+};
 const isOnSite = () => typeof document !== "undefined" ? (document?.querySelector("#preview")?.getAttribute("data-on-site") ?? "true") === "true" : true;
 /** @internal */
 const setPreviousFocus = () => {
@@ -1144,6 +1147,33 @@ function setDestroyed(on$1) {
 *
 * @internal
 */
+const breakpoints = writable([]);
+/**
+* ブレイクポイントの一覧を取得する
+*
+* @returns 現在のブレイクポイントの一覧
+*/
+function getBreakpoints() {
+	return get(breakpoints);
+}
+/**
+* 変数を設定する
+*
+* @remarks
+* 設定したブレイクポイントは、ビジュアルエディタでブレイクポイントとして利用できます。
+*
+* @param values - ブレイクポイントの一覧
+*/
+function setBreakpoints(values) {
+	if (!get(breakpoints)) breakpoints.set([]);
+	breakpoints.update(() => values);
+	return getBreakpoints();
+}
+/**
+* Store to handle variables
+*
+* @internal
+*/
 const variables = writable({});
 /**
 * 変数の一覧を取得する
@@ -2560,6 +2590,93 @@ async function loadGlobalStyle(href) {
 	});
 }
 
+//#endregion
+//#region src/preview.ts
+/** @internal */
+const initPreview = () => {
+	if (!isPreview()) return () => {};
+	let root;
+	let timer = null;
+	const previewId = getPreviewId();
+	const LAYER_ID_ATTR_KEY = "data-layer-id";
+	const toInfo = (element$1) => {
+		if (!element$1) return null;
+		const rect = element$1.getBoundingClientRect();
+		const styles = window.getComputedStyle(element$1);
+		return {
+			layerId: element$1.getAttribute(LAYER_ID_ATTR_KEY),
+			top: rect.top,
+			left: rect.left,
+			width: rect.width,
+			height: rect.height,
+			direction: styles?.flexDirection === "row" || styles?.flexDirection === "row-reverse" ? "row" : "column",
+			classNames: Array.from(element$1.classList.values()),
+			styles: {
+				direction: styles.flexDirection,
+				opacity: styles.opacity,
+				rowGap: styles.rowGap,
+				columnGap: styles.columnGap,
+				paddingLeft: styles.paddingLeft,
+				paddingRight: styles.paddingRight,
+				paddingTop: styles.paddingTop,
+				paddingBottom: styles.paddingBottom,
+				zIndex: styles.zIndex,
+				position: styles.position,
+				top: styles.top,
+				left: styles.left,
+				right: styles.right,
+				bottom: styles.bottom
+			}
+		};
+	};
+	const w$1 = (w$2) => w$2.parent === w$2 ? w$2 : w$2.parent;
+	const postUpdateLayers = () => {
+		const layerElements = Array.from(root.querySelectorAll(`[${LAYER_ID_ATTR_KEY}]`)).map((el) => toInfo(el));
+		if (layerElements.length === 0) return;
+		w$1(window).postMessage({
+			type: "KARTE-ACTION-PREVIEW-UPDATE-LAYERS",
+			detail: {
+				previewId,
+				layerElements
+			}
+		}, "*");
+	};
+	const rootObserver = new MutationObserver(postUpdateLayers);
+	const handleMessage = (e) => {
+		console.log("message", e);
+		const data = e.data;
+		if (data.event_name === "OVERRIDE_LAYER_STYLE") {
+			const { layerId = "", styles = [] } = data.detail || {};
+			const layerElement = root.querySelector(`[${LAYER_ID_ATTR_KEY}="${layerId}"]`);
+			if (!layerElement) return;
+			styles.forEach(({ key, value }) => {
+				layerElement.style.setProperty(key, value);
+			});
+		}
+	};
+	(() => {
+		const init$1 = () => {
+			root = getActionRoot$1();
+			if (root) {
+				rootObserver.observe(root, {
+					childList: true,
+					subtree: true,
+					characterData: true,
+					attributes: true
+				});
+				timer = setInterval(postUpdateLayers, 1e3);
+				window.addEventListener("message", handleMessage);
+			} else setTimeout(init$1, 30);
+		};
+		init$1();
+	})();
+	return () => {
+		if (timer) clearInterval(timer);
+		rootObserver.disconnect();
+		window.removeEventListener("message", handleMessage);
+	};
+};
+
 //#endregion
 //#region src/action.ts
 /**
@@ -2604,6 +2721,7 @@ function create(App, options) {
 		publish: options.publish,
 		data
 	};
+	const destroyPreview = initPreview();
 	const handleDestroy = () => {
 		const { onDestroyHandlers } = getInternalHandlers();
 		onDestroyHandlers?.forEach((h$1) => {
@@ -2612,6 +2730,7 @@ function create(App, options) {
 		});
 		const { onDestroyHandlers: onDestroyWidgetHandlers } = getWidgetHandlers();
 		if (onDestroyWidgetHandlers) onDestroyWidgetHandlers.forEach((h$1) => h$1(actionProps));
+		destroyPreview();
 	};
 	setSystem({
 		apiKey: data.api_key || null,
@@ -11548,19 +11667,17 @@ function createComponentRawCss(layerId, define) {
 	return define(gen).join("\n");
 }
 function toResponsiveSelector(responsiveSetting, body) {
-	const { mediaQueryCondition, userAgentCondition } = responsiveSetting;
-	if (mediaQueryCondition) {
-		const { raw, range, orientation } = mediaQueryCondition;
+	const { breakpointId } = responsiveSetting;
+	const breakpoint = getBreakpoints().find((v) => v.id === breakpointId);
+	if (breakpoint && breakpoint.mediaQuery) {
+		const { maxWidth, minWidth, orientation } = breakpoint.mediaQuery;
 		const prefix = `@media screen and`;
-		if (raw) return `${prefix} (${raw}) {\n${body}\n}`;
 		const orientationStyle = orientation ? ` and (orientation: ${orientation})` : "";
-		if (range) {
-			if (range.min && range.max) return `${prefix} (min-width: ${range.min}px)${orientationStyle} and (max-width: ${range.max}) {\n${body}\n}`;
-			else if (range.max) return `${prefix} (max-width: ${range.max}px)${orientationStyle} {\n${body}\n}`;
-			else if (range.min) return `${prefix} (min-width: ${range.min}px)${orientationStyle} {\n${body}\n}`;
-		}
+		if (minWidth && maxWidth) return `${prefix} (min-width: ${minWidth}px)${orientationStyle} and (max-width: ${maxWidth}px) {\n${body}\n}`;
+		else if (maxWidth) return `${prefix} (max-width: ${maxWidth}px)${orientationStyle} {\n${body}\n}`;
+		else if (minWidth) return `${prefix} (min-width: ${minWidth}px)${orientationStyle} {\n${body}\n}`;
 		return "";
-	} else if (userAgentCondition) return "";
+	}
 	return "";
 }
 function toStyleTag(css) {
@@ -11610,11 +11727,7 @@ var Avatar_css_default = (layerId, props) => {
 			appearance: "none"
 		}),
 		toDynamicStyle$3(layerId, props),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$3(layerId, v.props));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$3(layerId, v.props))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -11740,57 +11853,25 @@ var StylePortal = class extends SvelteComponent {
 var StylePortal_default = StylePortal;
 
 //#endregion
-//#region src/components-flex/responsive.ts
-const USER_AGENT_VARIANT = {
-	smartphone: { regex: /iPhone|Android.*Mobile/i },
-	tablet: { regex: /iPad|Android(?!.*Mobile)/i },
-	pc: { regex: /Windows NT|Macintosh|Linux x86_64/i },
-	windows: { regex: /Windows NT/i },
-	mac: { regex: /Macintosh|Mac OS X/i },
-	ios: { regex: /iPhone|iPad|iPod/i },
-	android: { regex: /Android/i },
-	safari: { regex: /Safari/i },
-	chrome: { regex: /Chrome|CriOS/i },
-	firefox: { regex: /Firefox/i },
-	ios_webview: { regex: /iPhone|iPad|iPod/i },
-	android_webview: { regex: /; wv\)/i }
-};
+//#region src/components-flex/responsiveProp.ts
 const isMatchMediaQueryCondition = (condition) => {
-	const { raw, range, orientation } = condition;
+	const { minWidth, maxWidth, orientation } = condition;
 	if (orientation) return window.matchMedia(`(orientation: ${condition.orientation})`).matches;
-	if (range) {
-		const { min, max } = range;
-		if (typeof min === "number" && typeof max === "number") return window.matchMedia(`(min-width: ${min}px) and (max-width: ${max}px)`).matches;
-		else if (typeof min === "number") return window.matchMedia(`(min-width: ${min}px)`).matches;
-		else if (typeof max === "number") return window.matchMedia(`(max-width: ${max}px)`).matches;
-	}
-	if (raw) return window.matchMedia(raw).matches;
+	if (typeof minWidth === "number" && typeof maxWidth === "number") return window.matchMedia(`(min-width: ${minWidth}px) and (max-width: ${maxWidth}px)`).matches;
+	else if (typeof minWidth === "number") return window.matchMedia(`(min-width: ${minWidth}px)`).matches;
+	else if (typeof maxWidth === "number") return window.matchMedia(`(max-width: ${maxWidth}px)`).matches;
 	return false;
 };
-const isMatchUserAgentCondition = (condition) => {
-	const { variants, regex } = condition;
-	if (variants) return variants.some((variant) => {
-		const regex$1 = USER_AGENT_VARIANT[variant]?.regex;
-		if (!regex$1) return false;
-		return new RegExp(regex$1).test(navigator.userAgent);
-	});
-	else if (regex) return new RegExp(regex).test(navigator.userAgent);
-	return false;
-};
-const isMatchResponsiveSetting = (setting) => {
-	const { mediaQueryCondition, userAgentCondition } = setting;
-	if (mediaQueryCondition) return isMatchMediaQueryCondition(mediaQueryCondition);
-	else if (userAgentCondition) return isMatchUserAgentCondition(userAgentCondition);
-	else return false;
-};
 function useResponsiveProps(props) {
 	return readable(props, (set) => {
 		if (!props.responsiveSettings) {
 			set(props);
 			return () => {};
 		}
+		const breakpoints$1 = getBreakpoints();
 		const update = () => {
-			const matchedSetting = [...props.responsiveSettings ?? []].reverse().find(isMatchResponsiveSetting);
+			const breakpoint = breakpoints$1.find((v) => v.mediaQuery && isMatchMediaQueryCondition(v.mediaQuery));
+			const matchedSetting = props.responsiveSettings.find((v) => v.breakpointId === breakpoint?.id);
 			if (matchedSetting) set(Object.assign({}, props, matchedSetting.props ?? {}));
 			else set(props);
 		};
@@ -14215,14 +14296,10 @@ var Icon_css_default = (layerId, props, _brandKit) => {
 		style("&[aria-disabled=\"true\"]:hover", { opacity: "0.24" }),
 		style("&[aria-hidden=\"true\"]", { display: "none" }),
 		toDynamicStyle$2(layerId, props),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$2(layerId, {
-				variant: v.props.variant ?? props.variant,
-				...v.props
-			}));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$2(layerId, {
+			variant: v.props.variant ?? props.variant,
+			...v.props
+		}))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -14637,11 +14714,7 @@ var Button_css_default = (layerId, props, brandKit) => {
 			marginRight: "-0.2em"
 		}),
 		toDynamicStyle$1(layerId, props, brandKit),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$1(layerId, v.props, brandKit));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$1(layerId, v.props, brandKit))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -16430,11 +16503,7 @@ var Layout_css_default = (layerId, props, brandKit) => {
 		style("&[data-clickable=\"true\"]", { cursor: "pointer" }),
 		style("&[data-clickable=\"true\"]:hover", { opacity: .8 }),
 		toDynamicStyle$4(props),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$4(v.props));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$4(v.props))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -17439,14 +17508,10 @@ var Text_css_default = (layerId, props, brandKit) => {
 			wordBreak: "break-all"
 		}),
 		toDynamicStyle$4(props),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle$4({
-				...v.props,
-				content: v.props.content ?? props.content
-			}));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle$4({
+			...v.props,
+			content: v.props.content ?? props.content
+		}))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -17776,14 +17841,10 @@ var TextLink_css_default = (layerId, props, brandKit) => {
 		style("&[aria-disabled=\"true\"]:hover", { opacity: "0.24" }),
 		style("&[aria-hidden=\"true\"]", { display: "none" }),
 		toDynamicStyle(layerId, props, brandKit),
-		...props.responsiveSettings?.map((v) => {
-			if (v.mediaQueryCondition) return toResponsiveSelector(v, toDynamicStyle(layerId, {
-				...v.props,
-				label: v.props.label ?? props.label
-			}, brandKit));
-			else if (v.userAgentCondition) return "";
-			return "";
-		}) ?? [],
+		...props.responsiveSettings?.map((v) => toResponsiveSelector(v, toDynamicStyle(layerId, {
+			...v.props,
+			label: v.props.label ?? props.label
+		}, brandKit))) ?? [],
 		props.customizeCss
 	]);
 };
@@ -20270,7 +20331,7 @@ function create_fragment$14(ctx) {
 }
 function instance$14($$self, $$props, $$invalidate) {
 	let rProps;
-	let $responsiveProps;
+	let $responsiveSettings;
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { props = {} } = $$props;
 	let { layerId = crypto.randomUUID() } = $$props;
@@ -20278,8 +20339,8 @@ function instance$14($$self, $$props, $$invalidate) {
 	let buttonElement;
 	let showTooltip = false;
 	const cssCode = ClipCopy_css_default(layerId, props);
-	const responsiveProps = useResponsiveProps(props);
-	component_subscribe($$self, responsiveProps, (value) => $$invalidate(8, $responsiveProps = value));
+	const responsiveSettings = useResponsiveProps(props);
+	component_subscribe($$self, responsiveSettings, (value) => $$invalidate(8, $responsiveSettings = value));
 	const handleClick = async (e) => {
 		e.preventDefault();
 		const targetText = rProps.content ?? buttonElement?.innerText ?? "";
@@ -20308,7 +20369,7 @@ function instance$14($$self, $$props, $$invalidate) {
 		if ("$$scope" in $$props$1) $$invalidate(9, $$scope = $$props$1.$$scope);
 	};
 	$$self.$$.update = () => {
-		if ($$self.$$.dirty & 256) $: $$invalidate(3, rProps = $responsiveProps);
+		if ($$self.$$.dirty & 256) $: $$invalidate(3, rProps = $responsiveSettings);
 	};
 	return [
 		layerId,
@@ -20316,10 +20377,10 @@ function instance$14($$self, $$props, $$invalidate) {
 		showTooltip,
 		rProps,
 		cssCode,
-		responsiveProps,
+		responsiveSettings,
 		handleClick,
 		props,
-		$responsiveProps,
+		$responsiveSettings,
 		$$scope,
 		slots,
 		button_binding
@@ -20938,8 +20999,8 @@ function create_fragment$10(ctx) {
 	let current;
 	let if_block = ctx[0] && create_if_block$3(ctx);
 	header = new Header_default({});
-	const default_slot_template = ctx[3].default;
-	const default_slot = create_slot(default_slot_template, ctx, ctx[2], null);
+	const default_slot_template = ctx[4].default;
+	const default_slot = create_slot(default_slot_template, ctx, ctx[3], null);
 	return {
 		c() {
 			if (if_block) if_block.c();
@@ -20981,7 +21042,7 @@ function create_fragment$10(ctx) {
 				check_outros();
 			}
 			if (default_slot) {
-				if (default_slot.p && (!current || dirty & 4)) update_slot_base(default_slot, default_slot_template, ctx$1, ctx$1[2], !current ? get_all_dirty_from_scope(ctx$1[2]) : get_slot_changes(default_slot_template, ctx$1[2], dirty, null), null);
+				if (default_slot.p && (!current || dirty & 8)) update_slot_base(default_slot, default_slot_template, ctx$1, ctx$1[3], !current ? get_all_dirty_from_scope(ctx$1[3]) : get_slot_changes(default_slot_template, ctx$1[3], dirty, null), null);
 			}
 		},
 		i(local) {
@@ -21010,15 +21071,19 @@ function instance$10($$self, $$props, $$invalidate) {
 	let { $$slots: slots = {}, $$scope } = $$props;
 	let { customBrandKit = void 0 } = $$props;
 	let { globalCssCode = void 0 } = $$props;
+	let { breakpoints: breakpoints$1 = [] } = $$props;
 	setContext("brandKit", getBrandKit(customBrandKit));
+	setBreakpoints(breakpoints$1);
 	$$self.$$set = ($$props$1) => {
 		if ("customBrandKit" in $$props$1) $$invalidate(1, customBrandKit = $$props$1.customBrandKit);
 		if ("globalCssCode" in $$props$1) $$invalidate(0, globalCssCode = $$props$1.globalCssCode);
-		if ("$$scope" in $$props$1) $$invalidate(2, $$scope = $$props$1.$$scope);
+		if ("breakpoints" in $$props$1) $$invalidate(2, breakpoints$1 = $$props$1.breakpoints);
+		if ("$$scope" in $$props$1) $$invalidate(3, $$scope = $$props$1.$$scope);
 	};
 	return [
 		globalCssCode,
 		customBrandKit,
+		breakpoints$1,
 		$$scope,
 		slots
 	];
@@ -21028,7 +21093,8 @@ var State = class extends SvelteComponent {
 		super();
 		init(this, options, instance$10, create_fragment$10, safe_not_equal, {
 			customBrandKit: 1,
-			globalCssCode: 0
+			globalCssCode: 0,
+			breakpoints: 2
 		});
 	}
 };
@@ -23317,7 +23383,6 @@ var index_svelte5_exports = /* @__PURE__ */ __export({
 	TEXT_THEME: () => TEXT_THEME,
 	TEXT_VARIANTS: () => TEXT_VARIANTS,
 	TextDirections: () => TextDirections,
-	USER_AGENT_VARIANT: () => USER_AGENT_VARIANT,
 	WritingModes: () => WritingModes,
 	addChoiceAnswer: () => addChoiceAnswer,
 	addFreeAnswer: () => addFreeAnswer,
@@ -23368,6 +23433,7 @@ var index_svelte5_exports = /* @__PURE__ */ __export({
 	getVariables: () => getVariables,
 	hideOnScroll: () => hideOnScroll,
 	hideOnTime: () => hideOnTime,
+	initPreview: () => initPreview,
 	initialize: () => initialize,
 	isOpened: () => isOpened,
 	listenLogger: () => listenLogger,
@@ -23725,4 +23791,4 @@ var ThumbnailPreview = class extends SvelteComponent {
 var ThumbnailPreview_default = ThumbnailPreview;
 
 //#endregion
-export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };
+export { ACTION_HOOK_LABEL, ASPECT_VARIANT, ASPECT_VARIANTS, AVATAR_SHAPE, AVATAR_SIZE, AVATAR_SIZE_STYLES, Alignments, AnimationStyles, BACKGROUND_COLOR_VARIANT, BACKGROUND_COLOR_VARIANTS, BORDER_COLOR_VARIANT, BORDER_COLOR_VARIANTS, BUTTON_ICON_ANGLE, BUTTON_LINK_TARGET, BUTTON_OUTLINED_ROUND_STYLES, BUTTON_OUTLINED_SIZE_STYLES, BUTTON_OUTLINED_WRAP_STYLES, BUTTON_ROUND, BUTTON_ROUND_STYLES, BUTTON_SIZE, BUTTON_SIZE_STYLES, BUTTON_TEXT_SIZE, BUTTON_TEXT_SIZE_STYLES, BUTTON_TEXT_THEME, BUTTON_THEME, BUTTON_VARIANT, BUTTON_WRAP_STYLES, BackgroundSizes, Box_default as Box, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, CodeElement_default as CodeElement, Countdown_default as Countdown, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, EmbedElement_default as EmbedElement, FONT_FAMILY_VARIANT, FONT_FAMILY_VARIANTS, FONT_FAMILY_VARIANT_GROUPS, FORM_FIELD_LABEL_SIZE, FORM_FIELD_LABEL_THEME, FORM_FIELD_SIZE, FORM_FIELD_TYPE, FORM_FIELD_VARIANT, FORM_FIELD_VARIANT_FOR_CHECKER, FORM_IDENTIFY_FIELD_TYPE, FORM_INPUT_TYPE, Flex_default as Flex, Avatar_default as FlexAvatar, Button_default as FlexButton, ButtonOutlined_default as FlexButtonOutlined, ButtonText_default as FlexButtonText, ClipCopy_default as FlexClipCopy, CloseButton_default as FlexCloseButton, Code_default as FlexCode, CountDown_default as FlexCountDown, CountDownValue_default as FlexCountDownValue, FlexDirections, Form_default as FlexForm, FormField_default as FlexFormField, Icon_default as FlexIcon, Image_default as FlexImage, FlexItem_default as FlexItem, Layout_default as FlexLayout, List_default as FlexList, ListItem_default as FlexListItem, Modal_default as FlexModal, MultiColumn_default as FlexMultiColumn, MultiColumnItem_default as FlexMultiColumnItem, RichText_default as FlexRichText, Slider_default as FlexSlider, SliderItem_default as FlexSliderItem, Text_default as FlexText, TextLink_default as FlexTextLink, Youtube_default as FlexYoutube, Fonts, FormCheckBoxes_default as FormCheckBoxes, FormIdentifyBooleanFields, FormIdentifyChoices_default as FormIdentifyChoices, FormIdentifyInput_default as FormIdentifyInput, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, FormRadioButtons_default as FormRadioButtons, FormRatingButtonsFace_default as FormRatingButtonsFace, FormRatingButtonsNumber_default as FormRatingButtonsNumber, FormSelect_default as FormSelect, FormTextarea_default as FormTextarea, Grid_default as Grid, GridItem_default as GridItem, GridModalState_default as GridModalState, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, IconElement_default as IconElement, ImageBlock_default as ImageBlock, ImageElement_default as ImageElement, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, List_default$1 as List, ListBackgroundTypes, ListDirections, ListItem_default$1 as ListItem, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, Modal_default$1 as Modal, ModalPositions, MovieVimeoElement_default as MovieVimeoElement, MovieYouTubeElement_default as MovieYouTubeElement, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, Slide_default as Slide, SlideItem_default as SlideItem, State_default as State, StateItem_default as StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextBlock_default as TextBlock, TextButtonBlock_default as TextButtonBlock, TextButtonElement_default as TextButtonElement, TextDirections, TextElement_default as TextElement, ThumbnailPreview_default as ThumbnailPreview, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getLogs, getState, getStates, getSystem, getTextLinkThemeStyles, getTextThemeStyles, getVariables, hideOnScroll, hideOnTime, initPreview, initialize, isOpened, listenLogger, loadActionTable, loadActionTableQuery, loadActionTableRow, loadActionTableRows, loadGlobalScript, loadGlobalStyle, loadStyle, logger, onChangeState, onClose, onCreate, onDestory, onDestroy, onMount, onScroll, onShow, onTime, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, useBrandKit, variables, widget_exports as widget };

package/dist/hydrate/index.svelte5.d.ts

@@ -17,12 +17,13 @@ export type { CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequ
 export { addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers } from "./form.js";
 export * as widget from "./widget.js";
 export { onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES } from "./components/index.js";
+export * from "./preview.js";
 export * from "./components-flex/form.js";
 export { default as State } from "./components-flex/state/State.svelte.js";
 export { default as StateItem } from "./components-flex/state/StateItem.svelte.js";
 export * from "./components-flex/shared/types.js";
 export * from "./components-flex/props.js";
-export * from "./components-flex/responsive.js";
+export * from "./components-flex/responsiveProp.js";
 export { default as FlexAvatar } from "./components-flex/avatar/Avatar.svelte.js";
 export * from "./components-flex/avatar/types.js";
 export * from "./components-flex/avatar/styles.js";

package/dist/hydrate/preview.d.ts

@@ -0,0 +1,28 @@
+export type ElementInfoStyles = {
+	opacity: string;
+	rowGap: string;
+	columnGap: string;
+	direction: string;
+	paddingLeft: string;
+	paddingRight: string;
+	paddingTop: string;
+	paddingBottom: string;
+	zIndex: string;
+	position: string;
+	top: string;
+	left: string;
+	right: string;
+	bottom: string;
+};
+export type ElementInfo = {
+	top: number;
+	left: number;
+	width: number;
+	height: number;
+	layerId: string;
+	direction: "row" | "column" | "";
+	classNames: string[];
+	styles: ElementInfoStyles;
+};
+/** @internal */
+export declare const initPreview: () => (() => void);

package/dist/hydrate/stores.d.ts

@@ -1,6 +1,6 @@
 import { get as get_ } from "svelte/store";
 import type { Writable as Writable_ } from "svelte/store";
-import type { ActionSetting, ActionEventHandler, ActionVariables, SystemConfig, ActionRunnerContext } from "./types.js";
+import { ActionSetting, ActionEventHandler, ActionVariables, SystemConfig, ActionRunnerContext, Breakpoint } from "./types.js";
 /** @internal */
 export type Store<T> = Writable_<T>;
 /**
@@ -350,6 +350,27 @@ export declare function setDestroyed(on: boolean): void;
 *
 * @internal
 */
+export declare const breakpoints: Store<Breakpoint[]>;
+/**
+* ブレイクポイントの一覧を取得する
+*
+* @returns 現在のブレイクポイントの一覧
+*/
+export declare function getBreakpoints(): Breakpoint[];
+/**
+* 変数を設定する
+*
+* @remarks
+* 設定したブレイクポイントは、ビジュアルエディタでブレイクポイントとして利用できます。
+*
+* @param values - ブレイクポイントの一覧
+*/
+export declare function setBreakpoints(values: Breakpoint[]): Breakpoint[];
+/**
+* Store to handle variables
+*
+* @internal
+*/
 export declare const variables: Store<{
 	[key: string]: any;
 }>;

package/dist/hydrate/types.d.ts

@@ -18,6 +18,19 @@ export type ActionVariables = {
 	[key: string]: any;
 };
 /**
+* ブレイクポイント
+*
+* @public
+*/
+export type Breakpoint = {
+	id: string;
+	mediaQuery?: {
+		minWidth?: number;
+		maxWidth?: number;
+		orientation?: "portrait" | "landscape";
+	};
+};
+/**
 * アクションの send 関数
 *
 * @public

package/dist/hydrate/utils.d.ts

@@ -4,6 +4,7 @@ export declare const NOOP: Function;
 /** @internal */
 export declare const isPreview: () => boolean;
 export declare const isCanvasPreview: () => boolean;
+export declare const getPreviewId: () => string;
 export declare const isOnSite: () => boolean;
 export declare const isInFrame: () => boolean;
 /** @internal */

package/dist/index.es.d.ts

@@ -17,6 +17,7 @@ export type { CollectionConfig, ActionTableRowRequestConfig, ActionTableRowsRequ
 export { addChoiceAnswer, addFreeAnswer, removeAnswer, getAnsweredQuestion, getAnsweredQuestionIds, sendAnswer, sendAnswers } from "./form.js";
 export * as widget from "./widget.js";
 export { onMount, onDestory, beforeUpdate, afterUpdate, tick, LAYOUT_COMPONENT_NAMES } from "./components/index.js";
+export * from "./preview.js";
 export { default as State } from "./components/State.svelte.js";
 export { default as StateItem } from "./components/StateItem.svelte.js";
 export { default as Modal } from "./components/Modal.svelte.js";