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

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

@@ -58,6 +58,9 @@ const NOOP = (_args) => {};
 /** @internal */
 const isPreview = () => isInFrame();
 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;
 const isInFrame = () => window && window.self !== window.top;
 /** @internal */
@@ -1147,6 +1150,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({});
 /**
 * 変数の一覧を取得する
@@ -2394,6 +2424,93 @@ async function loadGlobalStyle(href) {
 	});
 }
 
+//#endregion
+//#region src/preview.ts
+/** @internal */
+const initPreview = () => {
+	if (!isPreview()) return () => {};
+	let root$56;
+	let timer = null;
+	const previewId = getPreviewId();
+	const LAYER_ID_ATTR_KEY = "data-layer-id";
+	const toInfo = (element) => {
+		if (!element) return null;
+		const rect = element.getBoundingClientRect();
+		const styles = window.getComputedStyle(element);
+		return {
+			layerId: element.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.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$56.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$56.querySelector(`[${LAYER_ID_ATTR_KEY}="${layerId}"]`);
+			if (!layerElement) return;
+			styles.forEach(({ key, value }) => {
+				layerElement.style.setProperty(key, value);
+			});
+		}
+	};
+	(() => {
+		const init = () => {
+			root$56 = getActionRoot();
+			if (root$56) {
+				rootObserver.observe(root$56, {
+					childList: true,
+					subtree: true,
+					characterData: true,
+					attributes: true
+				});
+				timer = setInterval(postUpdateLayers, 1e3);
+				window.addEventListener("message", handleMessage);
+			} else setTimeout(init, 30);
+		};
+		init();
+	})();
+	return () => {
+		if (timer) clearInterval(timer);
+		rootObserver.disconnect();
+		window.removeEventListener("message", handleMessage);
+	};
+};
+
 //#endregion
 //#region src/action.ts
 /**
@@ -2438,6 +2555,7 @@ function create(App, options) {
 		publish: options.publish,
 		data
 	};
+	const destroyPreview = initPreview();
 	const handleDestroy = () => {
 		const { onDestroyHandlers } = getInternalHandlers();
 		onDestroyHandlers?.forEach((h$1) => {
@@ -2446,6 +2564,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,
@@ -3431,19 +3550,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) {
@@ -3488,7 +3605,9 @@ function State($$anchor, $$props) {
 	$.push($$props, false);
 	let customBrandKit = $.prop($$props, "customBrandKit", 8, void 0);
 	let globalCssCode = $.prop($$props, "globalCssCode", 8, void 0);
+	let breakpoints$1 = $.prop($$props, "breakpoints", 24, () => []);
 	setContext("brandKit", getBrandKit(customBrandKit()));
+	setBreakpoints(breakpoints$1());
 	$.init();
 	var fragment = root$55();
 	var node = $.first_child(fragment);
@@ -3559,57 +3678,25 @@ const ROUND_VARIANT = {
 };
 
 //#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);
 		};
@@ -4210,11 +4297,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
 	]);
 };
@@ -4850,14 +4933,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
 	]);
 };
@@ -5121,11 +5200,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
 	]);
 };
@@ -6033,11 +6108,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
 	]);
 };
@@ -6520,14 +6591,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
 	]);
 };
@@ -6725,14 +6792,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
 	]);
 };
@@ -7838,7 +7901,7 @@ var root$3 = $.template(`<!> <!>`, 1);
 function ClipCopy($$anchor, $$props) {
 	$.push($$props, false);
 	const [$$stores, $$cleanup] = $.setup_stores();
-	const $responsiveProps = () => $.store_get(responsiveProps, "$responsiveProps", $$stores);
+	const $responsiveSettings = () => $.store_get(responsiveSettings, "$responsiveSettings", $$stores);
 	const rProps = $.mutable_state();
 	let props = $.prop($$props, "props", 24, () => ({}));
 	let layerId = $.prop($$props, "layerId", 24, () => crypto.randomUUID());
@@ -7846,7 +7909,7 @@ function ClipCopy($$anchor, $$props) {
 	let buttonElement = $.mutable_state();
 	let showTooltip = $.mutable_state(false);
 	const cssCode = ClipCopy_css_default(layerId(), props());
-	const responsiveProps = useResponsiveProps(props());
+	const responsiveSettings = useResponsiveProps(props());
 	const handleClick = async (e) => {
 		e.preventDefault();
 		const targetText = $.get(rProps).content ?? $.get(buttonElement)?.innerText ?? "";
@@ -7863,8 +7926,8 @@ function ClipCopy($$anchor, $$props) {
 			console.warn(e$1);
 		}
 	};
-	$.legacy_pre_effect(() => $responsiveProps(), () => {
-		$.set(rProps, $responsiveProps());
+	$.legacy_pre_effect(() => $responsiveSettings(), () => {
+		$.set(rProps, $responsiveSettings());
 	});
 	$.legacy_pre_effect_reset();
 	$.init();
@@ -9167,4 +9230,4 @@ const flexComponentSchemes = {
 };
 
 //#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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, 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, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, USER_AGENT_VARIANT, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, 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, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, useResponsiveProps, validateFormField, 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, CLOSE_BUTTON_LABEL_PLACEMENT, CLOSE_BUTTON_PLACEMENT, CLOSE_BUTTON_ROUND, ClipPaths, Cursors, DefaultEdgePosition, DefaultElasticity, DefaultFormButtonColor, DefaultFormIdentifyBooleanField, DefaultFormIdentifyTextField, DefaultListBackground, DefaultListBackgroundNone, DefaultListBackgroundStripe, DefaultListSeparator, DefaultListSeparatorBorder, DefaultListSeparatorGap, DefaultListSeparatorNone, DefaultModalBreakPoint, DefaultModalPlacement, DefaultSlideButton, DefaultSlideNavigationButton, Directions, Elasticities, ElasticityStyle, 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, FORM_VALIDATION_DEFAULT_ERROR_MESSAGES, FORM_VALIDATION_REGEX, FORM_VALIDATION_TYPE, Avatar as FlexAvatar, Button as FlexButton, ButtonOutlined as FlexButtonOutlined, ButtonText as FlexButtonText, ClipCopy as FlexClipCopy, CloseButton as FlexCloseButton, Code as FlexCode, CountDown as FlexCountDown, CountDownValue as FlexCountDownValue, FlexDirections, Embed as FlexEmbed, Form as FlexForm, FormBoolean as FlexFormBoolean, FormCheckboxes as FlexFormCheckboxes, FormField as FlexFormField, FormIdentifyField as FlexFormIdentifyField, FormInput as FlexFormInput, FormRadios as FlexFormRadios, FormSelect as FlexFormSelect, FormTextarea as FlexFormTextarea, Icon as FlexIcon, Image as FlexImage, Layout as FlexLayout, List as FlexList, ListItem as FlexListItem, Modal as FlexModal, MultiColumn as FlexMultiColumn, MultiColumnItem as FlexMultiColumnItem, RichText as FlexRichText, Slider as FlexSlider, SliderItem as FlexSliderItem, Text as FlexText, TextLink as FlexTextLink, Youtube as FlexYoutube, Fonts, FormIdentifyBooleanFields, FormIdentifyTextFieldPlaceholders, FormIdentifyTextFieldValidations, FormIdentifyTextFields, ICON_SIZE, ICON_SIZE_STYLES, ICON_VARIANTS, IMAGE_ASPECT_VARIANTS, IMAGE_ROUND_SHAPE, IMAGE_ROUND_STYLES, Justifies, KARTE_MODAL_ROOT, LAYER_TEXT_SIZE, LAYOUT_ALIGN, LAYOUT_COMPONENT_NAMES, LAYOUT_DIRECTION, LAYOUT_DISPLAY_TYPE, LAYOUT_JUSTIFY, LIST_ITEM_CONTEXT_KEY, LengthUnits, ListBackgroundTypes, ListDirections, ListSeparatorTypes, MULTI_COLUMN_ITEM_CONTEXT_KEY, MediaQueries, ModalPositions, ObjectFits, OnClickOperationOptions, Overflows, PropTypes, ROUND_STYLES, ROUND_VARIANT, Repeats, SHADOW_VARIANT, SHADOW_VARIANTS, SYSTEM_FONT, State, StateItem, TEXT_LINK_SIZE, TEXT_LINK_SIZE_STYLES, TEXT_LINK_THEME, TEXT_LINK_UNDERLINE, TEXT_STYLE, TEXT_THEME, TEXT_VARIANTS, TextDirections, WritingModes, addChoiceAnswer, addFreeAnswer, afterUpdate, applyCss, applyGlobalCss, beforeUpdate, buttonOutlinedPropsDefault, buttonPropsDefault, close, closeAction, collection, create, createApp, createFog, createProp, destroy, destroyAction, ensureModalRoot, eventHandlers, finalize, flexComponentSchemes, formData, formStore, formSubmittedIdentifyValues, formSubmittedValues, getActionRoot, getAnsweredQuestion, getAnsweredQuestionIds, getBrandKit, getButtonOutlinedThemeStyles, getButtonTextThemeStyles, getButtonThemeStyles, getCssVariables, getEventHandlers, getEvents, getFormErrors, getFormFieldSchema, getFormFieldState, getFormFieldValue, getFormValues, 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, onSubmitForm, onTime, registerFormField, removeAnswer, resetEventHandlers, resetVariables, sendAnswer, sendAnswers, setEventHandlers, setFormFieldError, setFormFieldTouched, setFormFieldValue, setSetting, setState, setVariables, show, showAction, showModal, showOnScroll, showOnTime, state, tick, unregisterFormField, useBrandKit, useResponsiveProps, validateFormField, variables, widget_exports as widget };

package/dist/svelte5/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/svelte5/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/svelte5/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/svelte5/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/svelte5/index.es.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";