@fulate/components 1.0.0

package/dist/index.js

@@ -0,0 +1,2263 @@
+import { Align, Display, FlexDirection, Justify, Overflow } from "@fulate/yoga";
+import { Teleport, cloneVNode, computed, defineComponent, inject, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, ref, shallowRef, toValue, unref, watch } from "@vue/runtime-core";
+import { FTransition, FULATE_OVERLAY_KEY, FULATE_ROOT_KEY, VUE_SHAPE_SIZE_KEY } from "@fulate/vue";
+import { computePosition, flip, measureTextWidth, offset, shift } from "@fulate/ui";
+import { createVNode, isVNode, mergeProps, resolveComponent } from "vue";
+import { isString, isUndefined } from "lodash-es";
+import { blendColor, colorWithAlpha } from "@fulate/share";
+import { Element } from "@fulate/core";
+//#region packages/components/src/composables/context.ts
+function useOverlay() {
+	return {
+		overlay: inject(FULATE_OVERLAY_KEY, null),
+		fulateRoot: inject(FULATE_ROOT_KEY, null)
+	};
+}
+function useVueShapeSize() {
+	return inject(VUE_SHAPE_SIZE_KEY, {
+		width: 0,
+		height: 0
+	});
+}
+//#endregion
+//#region packages/components/src/composables/outside-click.ts
+function isDescendantOf(node, ancestor) {
+	if (!node || !ancestor) return false;
+	let current = node;
+	while (current) {
+		if (current === ancestor) return true;
+		current = current.parent;
+	}
+	return false;
+}
+function useOutsideClick(open, excludeRefs, onClose) {
+	const { fulateRoot } = useOverlay();
+	let removeListener = null;
+	function onRootPointerDown(event) {
+		if (!toValue(open)) return;
+		const target = event.detail?.target;
+		if (!target) return;
+		if (excludeRefs.some((ref) => isDescendantOf(target, ref.value))) return;
+		onClose();
+	}
+	onMounted(() => {
+		removeListener = fulateRoot?.addEventListener("pointerdown", onRootPointerDown) ?? null;
+	});
+	onUnmounted(() => {
+		removeListener?.();
+		removeListener = null;
+	});
+}
+//#endregion
+//#region packages/components/src/composables/overlay-position.ts
+/**
+* 把 open/ref/options 与场景、viewport、scroll、resize 的定位失效合并到所属
+* Root 的 frame-final completion；每次只安装仍由当前 task/refs 拥有的结果。
+*/
+function useOverlayPosition(open, triggerRef, floatingRef, options = {}) {
+	const { fulateRoot } = useOverlay();
+	let positionPending = false;
+	let positionTask = null;
+	let installingFloating = null;
+	let unmounted = false;
+	const rootListeners = [];
+	const flushPosition = () => {
+		if (!positionPending) return;
+		positionPending = false;
+		if (unmounted || !toValue(open)) return;
+		const trigger = triggerRef.value;
+		const floating = floatingRef.value;
+		if (!trigger || !floating) return;
+		const task = computePosition(trigger, floating, toValue(options));
+		positionTask = task;
+		task.then((result) => {
+			if (unmounted || !toValue(open) || positionTask !== task || triggerRef.value !== trigger || floatingRef.value !== floating) return;
+			installingFloating = floating;
+			fulateRoot?.frameRuntime.requestCompletion(() => {
+				if (positionTask === task && installingFloating === floating) installingFloating = null;
+			});
+			try {
+				floating.setOptions({
+					left: result.x,
+					top: result.y
+				});
+			} finally {
+				if (!fulateRoot && installingFloating === floating) installingFloating = null;
+			}
+		});
+	};
+	const markPending = () => {
+		positionTask = null;
+		installingFloating = null;
+		if (unmounted || !toValue(open)) {
+			positionPending = false;
+			return;
+		}
+		positionPending = true;
+		fulateRoot?.frameRuntime.requestCompletion(flushPosition);
+	};
+	const isRelated = (node, target) => {
+		return isDescendantOf(target, node) || isDescendantOf(node, target);
+	};
+	watch([
+		() => toValue(open),
+		() => triggerRef.value,
+		() => floatingRef.value,
+		() => toValue(options)
+	], markPending, {
+		immediate: true,
+		flush: "post"
+	});
+	onMounted(() => {
+		if (fulateRoot) rootListeners.push(fulateRoot.addEventListener("viewportchange", markPending), fulateRoot.sceneRegistry.observeSceneChanges((node, affected) => {
+			const trigger = triggerRef.value;
+			const floating = floatingRef.value;
+			if (!trigger || !floating) return;
+			if (node === void 0 && affected === void 0) {
+				markPending();
+				return;
+			}
+			if ((node === void 0 ? affected ?? [] : affected === void 0 ? [node] : [node, ...affected]).some((current) => current !== installingFloating && (isRelated(current, trigger) || isRelated(current, floating)))) markPending();
+		}));
+		window.addEventListener("resize", markPending);
+		window.addEventListener("scroll", markPending, true);
+	});
+	onUnmounted(() => {
+		unmounted = true;
+		positionTask = null;
+		positionPending = false;
+		installingFloating = null;
+		rootListeners.splice(0).forEach((remove) => remove());
+		window.removeEventListener("resize", markPending);
+		window.removeEventListener("scroll", markPending, true);
+	});
+}
+//#endregion
+//#region packages/components/src/theme/md3.ts
+var MD3 = {
+	primary: "#1565C0",
+	onPrimary: "#ffffff",
+	primaryContainer: "#D1E4FF",
+	surface: "#ffffff",
+	surfaceDim: "#F5F5F5",
+	surfaceContainer: "#F0F0F0",
+	onSurface: "#1D1B20",
+	onSurfaceVariant: "#6B6B6B",
+	outline: "#BDBDBD",
+	outlineVariant: "#E0E0E0",
+	error: "#D32F2F",
+	onError: "#ffffff",
+	stateHoverOpacity: .15,
+	statePressOpacity: .24,
+	stateFocusOpacity: .2,
+	rippleOpacity: .32,
+	radiusFull: 4,
+	radiusLg: 4,
+	radiusMd: 4,
+	radiusSm: 2,
+	fontSize: 14,
+	fontFamily: "Roboto, system-ui, -apple-system, sans-serif",
+	iconFamily: "Material Symbols Outlined"
+};
+//#endregion
+//#region packages/components/src/components/button/style.ts
+var BUTTON_SIZE = {
+	small: {
+		height: 32,
+		fontSize: 13,
+		minWidth: 56,
+		horizontalPadding: 20,
+		textHorizontalPadding: 12
+	},
+	medium: {
+		height: 40,
+		fontSize: 14,
+		minWidth: 64,
+		horizontalPadding: 24,
+		textHorizontalPadding: 16
+	},
+	large: {
+		height: 48,
+		fontSize: 16,
+		minWidth: 72,
+		horizontalPadding: 28,
+		textHorizontalPadding: 20
+	}
+};
+function getRestBackground(variant, color, disabled) {
+	if (disabled) return variant === "filled" ? MD3.surfaceContainer : MD3.surface;
+	if (variant === "filled") return color;
+	if (variant === "outlined") return MD3.surface;
+	return "transparent";
+}
+function getInteractiveBackground(variant, color, opacity) {
+	return variant === "filled" ? blendColor(color, MD3.onPrimary, opacity) : blendColor(MD3.surface, color, opacity);
+}
+function getInteractionOpacity(state) {
+	if (state === "press") return MD3.statePressOpacity;
+	return MD3.stateHoverOpacity;
+}
+function resolveButtonVisual(variant, color, disabled, state) {
+	const atRest = disabled || state === "rest";
+	return {
+		backgroundColor: atRest ? getRestBackground(variant, color, disabled) : getInteractiveBackground(variant, color, getInteractionOpacity(state)),
+		borderColor: variant === "outlined" ? atRest ? disabled ? MD3.outlineVariant : MD3.outline : color : void 0,
+		textColor: disabled ? MD3.onSurfaceVariant : variant === "filled" ? MD3.onPrimary : color,
+		rippleColor: variant === "filled" ? MD3.onPrimary : color
+	};
+}
+//#endregion
+//#region packages/components/src/internal/control-size.ts
+var controlSizeProp = {
+	type: String,
+	default: "medium"
+};
+var inheritedControlSizeProp = {
+	type: String,
+	default: void 0
+};
+var CONTROL_STATE_LAYER_SIZE = {
+	small: 32,
+	medium: 40,
+	large: 48
+};
+var CONTROL_GROUP_GAP = {
+	small: 2,
+	medium: 4,
+	large: 6
+};
+var CONTROL_LABEL_FONT_SIZE = {
+	small: 13,
+	medium: 14,
+	large: 16
+};
+//#endregion
+//#region packages/components/src/internal/interaction.ts
+var TRANSITION_DURATION$1 = {
+	hover: 150,
+	leave: 200,
+	press: 100,
+	release: 150
+};
+function useInteractionState(disabled, apply) {
+	let hovered = false;
+	let pressed = false;
+	let state = "rest";
+	function resolveState() {
+		if (disabled()) return "rest";
+		if (pressed) return "press";
+		if (hovered) return "hover";
+		return "rest";
+	}
+	function update(duration, force = false) {
+		const next = resolveState();
+		if (!force && next === state) return;
+		state = next;
+		apply(next, duration);
+	}
+	function reset() {
+		hovered = false;
+		pressed = false;
+		update(0, true);
+	}
+	function releasePress() {
+		if (!pressed) return;
+		pressed = false;
+		update(TRANSITION_DURATION$1.release);
+	}
+	const handlers = {
+		onMouseenter() {
+			if (disabled()) return;
+			hovered = true;
+			update(TRANSITION_DURATION$1.hover);
+		},
+		onMouseleave() {
+			hovered = false;
+			pressed = false;
+			update(TRANSITION_DURATION$1.leave);
+		},
+		onPointerdown() {
+			if (disabled()) return;
+			pressed = true;
+			update(TRANSITION_DURATION$1.press);
+		},
+		onPointerup: releasePress,
+		onPointercancel: releasePress
+	};
+	function refresh(duration = 0) {
+		update(duration, true);
+	}
+	watch(disabled, (isDisabled) => {
+		if (isDisabled) reset();
+		else refresh();
+	});
+	return {
+		handlers,
+		refresh
+	};
+}
+//#endregion
+//#region packages/components/src/internal/ripple.ts
+function useRippleAnimation() {
+	const rippleRef = shallowRef(null);
+	function trigger(x, y) {
+		rippleRef.value?.trigger(x, y);
+	}
+	return {
+		rippleRef,
+		trigger
+	};
+}
+//#endregion
+//#region packages/components/src/components/button/button.tsx
+var FButton = /* @__PURE__ */ defineComponent({
+	name: "FButton",
+	props: {
+		label: {
+			type: String,
+			default: "Button"
+		},
+		variant: {
+			type: String,
+			default: "filled"
+		},
+		color: {
+			type: String,
+			default: MD3.primary
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: controlSizeProp,
+		width: {
+			type: Number,
+			default: void 0
+		},
+		height: {
+			type: Number,
+			default: void 0
+		},
+		fontSize: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: ["press", "click"],
+	setup(props, { emit }) {
+		const divRef = shallowRef(null);
+		const { rippleRef, trigger: triggerRipple } = useRippleAnimation();
+		const metrics = computed(() => BUTTON_SIZE[props.size]);
+		const height = computed(() => props.height ?? metrics.value.height);
+		const fontSize = computed(() => props.fontSize ?? metrics.value.fontSize);
+		const paddingH = computed(() => props.variant === "text" ? metrics.value.textHorizontalPadding : metrics.value.horizontalPadding);
+		const autoWidth = computed(() => {
+			if (!isUndefined(props.width)) return props.width;
+			const font = `500 ${fontSize.value}px ${MD3.fontFamily}`;
+			const textWidth = Math.ceil(measureTextWidth(props.label, font));
+			const borderWidth = props.variant === "outlined" ? 1 : 0;
+			return Math.max(metrics.value.minWidth, textWidth + paddingH.value * 2 + borderWidth * 2);
+		});
+		const restVisual = computed(() => resolveButtonVisual(props.variant, props.color, props.disabled, "rest"));
+		function applyElementState(state, duration) {
+			const el = divRef.value;
+			if (!el) return;
+			const visual = resolveButtonVisual(props.variant, props.color, props.disabled, state);
+			const target = !isUndefined(visual.borderColor) ? {
+				backgroundColor: visual.backgroundColor,
+				borderColor: visual.borderColor
+			} : { backgroundColor: visual.backgroundColor };
+			el.stopAnimations();
+			if (duration === 0) el.setOptions(target);
+			else el.animate(target, { duration });
+		}
+		function activate(event) {
+			if (props.disabled) return;
+			emit("press");
+			emit("click", event);
+		}
+		const interaction = useInteractionState(() => props.disabled, applyElementState);
+		watch([() => props.variant, () => props.color], () => interaction.refresh(), { flush: "post" });
+		return () => createVNode(resolveComponent("f-div"), {
+			"ref": divRef,
+			"display": Display.Flex,
+			"justifyContent": Justify.Center,
+			"alignItems": Align.Center,
+			"width": autoWidth.value,
+			"height": height.value,
+			"flexShrink": 0,
+			"backgroundColor": restVisual.value.backgroundColor,
+			"borderColor": restVisual.value.borderColor,
+			"borderWidth": props.variant === "outlined" ? 1 : 0,
+			"radius": MD3.radiusFull,
+			"paddingLeft": paddingH.value,
+			"paddingRight": paddingH.value,
+			"cursor": props.disabled ? "default" : "pointer",
+			"onClick": activate,
+			"onPointerdown": (event) => {
+				interaction.handlers.onPointerdown();
+				if (!props.disabled) triggerRipple(event.detail.x, event.detail.y);
+			},
+			"onPointerup": interaction.handlers.onPointerup,
+			"onPointercancel": interaction.handlers.onPointercancel,
+			"onMouseenter": interaction.handlers.onMouseenter,
+			"onMouseleave": interaction.handlers.onMouseleave
+		}, { default: () => [createVNode(resolveComponent("f-ripple"), {
+			"ref": rippleRef,
+			"rippleColor": restVisual.value.rippleColor,
+			"rippleOpacity": MD3.rippleOpacity,
+			"duration": 400
+		}, null), createVNode(resolveComponent("f-span"), {
+			"text": props.label,
+			"color": restVisual.value.textColor,
+			"fontSize": fontSize.value,
+			"fontFamily": MD3.fontFamily,
+			"fontWeight": 500,
+			"textAlign": "center",
+			"verticalAlign": "middle",
+			"wordWrap": true,
+			"ellipsis": true,
+			"overflow": "hidden"
+		}, null)] });
+	}
+});
+//#endregion
+//#region packages/components/src/components/field/style.ts
+var FIELD_BORDER_WIDTH = .5;
+var FIELD_ACTIVE_BORDER_WIDTH = 1.5;
+var FIELD_SIZE = {
+	small: {
+		height: 44,
+		fontSize: 14,
+		horizontalPadding: 12,
+		labelHeight: 16,
+		labelFontSize: 10,
+		labelPaddingTop: 4
+	},
+	medium: {
+		height: 52,
+		fontSize: 15,
+		horizontalPadding: 14,
+		labelHeight: 18,
+		labelFontSize: 11,
+		labelPaddingTop: 6
+	},
+	large: {
+		height: 60,
+		fontSize: 16,
+		horizontalPadding: 16,
+		labelHeight: 20,
+		labelFontSize: 12,
+		labelPaddingTop: 8
+	}
+};
+function resolveFieldBorderVisual(state) {
+	if (state === "disabled") return {
+		borderColor: MD3.outlineVariant,
+		borderWidth: FIELD_BORDER_WIDTH
+	};
+	if (state === "active") return {
+		borderColor: MD3.primary,
+		borderWidth: FIELD_ACTIVE_BORDER_WIDTH
+	};
+	if (state === "hover") return {
+		borderColor: MD3.onSurfaceVariant,
+		borderWidth: 1
+	};
+	return {
+		borderColor: MD3.outline,
+		borderWidth: FIELD_BORDER_WIDTH
+	};
+}
+//#endregion
+//#region packages/components/src/components/field/border.ts
+var TRANSITION_DURATION = {
+	hover: 150,
+	leave: 200,
+	active: 150
+};
+function useFieldBorder(disabled, active) {
+	const borderRef = shallowRef(null);
+	let hovered = false;
+	let state = resolveState();
+	function resolveState() {
+		if (disabled()) return "disabled";
+		if (active()) return "active";
+		if (hovered) return "hover";
+		return "rest";
+	}
+	function apply(duration, force = false) {
+		const next = resolveState();
+		if (!force && next === state) return;
+		state = next;
+		const border = borderRef.value;
+		if (!border) return;
+		const visual = resolveFieldBorderVisual(state);
+		border.stopAnimations();
+		if (duration === 0) border.setOptions(visual);
+		else border.animate(visual, { duration });
+	}
+	const handlers = {
+		onMouseenter() {
+			if (disabled()) return;
+			hovered = true;
+			apply(TRANSITION_DURATION.hover);
+		},
+		onMouseleave() {
+			hovered = false;
+			apply(TRANSITION_DURATION.leave);
+		}
+	};
+	watch(disabled, (isDisabled) => {
+		if (isDisabled) hovered = false;
+		apply(0, true);
+	});
+	watch(active, (isActive) => {
+		apply(disabled() ? 0 : isActive ? TRANSITION_DURATION.active : TRANSITION_DURATION.leave);
+	});
+	onUnmounted(() => borderRef.value?.stopAnimations());
+	return {
+		borderRef,
+		handlers,
+		initialVisual: resolveFieldBorderVisual(state)
+	};
+}
+//#endregion
+//#region packages/components/src/components/field/field.tsx
+var LABEL_TRANSITION_DURATION = 150;
+var FField = /* @__PURE__ */ defineComponent({
+	name: "FField",
+	props: {
+		active: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		filled: {
+			type: Boolean,
+			default: false
+		},
+		hasLabel: {
+			type: Boolean,
+			default: false
+		},
+		width: {
+			type: Number,
+			required: true
+		},
+		height: {
+			type: Number,
+			required: true
+		},
+		paddingLeft: {
+			type: Number,
+			required: true
+		},
+		paddingRight: {
+			type: Number,
+			required: true
+		},
+		suffixWidth: {
+			type: Number,
+			default: 0
+		},
+		fontSize: {
+			type: Number,
+			required: true
+		},
+		labelFontSize: {
+			type: Number,
+			required: true
+		},
+		labelHeight: {
+			type: Number,
+			required: true
+		},
+		labelPaddingTop: {
+			type: Number,
+			required: true
+		},
+		cursor: {
+			type: String,
+			default: "default"
+		},
+		elementRef: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: ["click"],
+	setup(props, { emit, slots }) {
+		const labelRef = shallowRef(null);
+		const floated = computed(() => props.hasLabel && (props.active || props.filled));
+		const fieldBorder = useFieldBorder(() => props.disabled, () => props.active);
+		function resolveLabelVisual() {
+			return {
+				top: floated.value ? props.labelPaddingTop : (props.height - props.labelHeight) / 2,
+				fontSize: floated.value ? props.labelFontSize : props.fontSize,
+				color: !props.disabled && props.active ? MD3.primary : MD3.onSurfaceVariant
+			};
+		}
+		const initialLabelVisual = resolveLabelVisual();
+		function applyLabelVisual(duration) {
+			const label = labelRef.value;
+			if (!label) return;
+			const visual = resolveLabelVisual();
+			label.stopAnimations();
+			if (duration === 0) label.setOptions(visual);
+			else label.animate(visual, { duration });
+		}
+		watch([
+			() => props.active,
+			() => props.disabled,
+			() => props.filled,
+			() => props.hasLabel
+		], () => applyLabelVisual(props.disabled ? 0 : LABEL_TRANSITION_DURATION), { flush: "post" });
+		watch([
+			() => props.height,
+			() => props.fontSize,
+			() => props.labelFontSize,
+			() => props.labelHeight,
+			() => props.labelPaddingTop
+		], () => applyLabelVisual(0), { flush: "post" });
+		onMounted(() => {
+			nextTick(() => {
+				const label = labelRef.value;
+				if (!label) return;
+				label.syncTextLayout();
+				label.transform.markPaintDirty();
+			});
+		});
+		onUnmounted(() => labelRef.value?.stopAnimations());
+		return () => {
+			const showBody = !props.hasLabel || floated.value;
+			const labelSlotProps = {
+				ref: labelRef,
+				left: props.paddingLeft,
+				top: initialLabelVisual.top,
+				width: props.width - props.paddingLeft - props.paddingRight - props.suffixWidth,
+				height: props.labelHeight,
+				fitWidth: false,
+				lineHeight: 1,
+				fontSize: initialLabelVisual.fontSize,
+				color: initialLabelVisual.color,
+				silent: true,
+				pickable: false
+			};
+			return createVNode(resolveComponent("f-div"), {
+				"ref": props.elementRef,
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Row,
+				"alignItems": Align.Stretch,
+				"width": props.width,
+				"height": props.height,
+				"backgroundColor": MD3.surface,
+				"radius": MD3.radiusMd,
+				"paddingLeft": props.paddingLeft,
+				"paddingRight": props.paddingRight,
+				"cursor": props.cursor,
+				"onClick": (event) => emit("click", event),
+				"onMouseenter": fieldBorder.handlers.onMouseenter,
+				"onMouseleave": fieldBorder.handlers.onMouseleave
+			}, { default: () => [
+				slots.underlay?.(),
+				createVNode(resolveComponent("f-div"), {
+					"flex": 1,
+					"display": Display.Flex,
+					"flexDirection": FlexDirection.Column,
+					"justifyContent": Justify.Center
+				}, { default: () => [createVNode(resolveComponent("f-div"), { "height": props.hasLabel && floated.value ? props.labelHeight : 0 }, null), createVNode(resolveComponent("f-div"), {
+					"flex": 1,
+					"display": Display.Flex,
+					"alignItems": Align.Center
+				}, { default: () => [showBody ? slots.default?.() : null] })] }),
+				slots.suffix?.(),
+				props.hasLabel ? slots.label?.(labelSlotProps) : null,
+				createVNode(resolveComponent("f-rectangle"), {
+					"ref": fieldBorder.borderRef,
+					"left": 0,
+					"top": 0,
+					"width": props.width,
+					"height": props.height,
+					"backgroundColor": "transparent",
+					"borderColor": fieldBorder.initialVisual.borderColor,
+					"borderWidth": fieldBorder.initialVisual.borderWidth,
+					"borderPosition": "inside",
+					"radius": MD3.radiusMd,
+					"silent": true,
+					"pickable": false
+				}, null)
+			] });
+		};
+	}
+});
+//#endregion
+//#region packages/components/src/components/input/input.tsx
+var FInput = /* @__PURE__ */ defineComponent({
+	name: "FInput",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: controlSizeProp,
+		width: {
+			type: Number,
+			default: 280
+		},
+		height: {
+			type: Number,
+			default: void 0
+		},
+		fontSize: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"input",
+		"change"
+	],
+	setup(props, { emit }) {
+		const focused = ref(false);
+		const textRef = shallowRef(null);
+		let editStartValue = props.modelValue;
+		let draftValue = props.modelValue;
+		const metrics = computed(() => FIELD_SIZE[props.size]);
+		const height = computed(() => props.height ?? metrics.value.height);
+		const fontSize = computed(() => props.fontSize ?? metrics.value.fontSize);
+		const hasValue = computed(() => props.modelValue.length > 0);
+		function setFocused(value) {
+			focused.value = !props.disabled && value;
+		}
+		function beginEditing() {
+			if (props.disabled || focused.value) return;
+			editStartValue = props.modelValue;
+			draftValue = props.modelValue;
+			setFocused(true);
+		}
+		function updateValue(value) {
+			if (props.disabled) return;
+			draftValue = value;
+			emit("update:modelValue", value);
+			emit("input", value);
+		}
+		function finishEditing(value = draftValue) {
+			draftValue = value;
+			const changed = !props.disabled && draftValue !== editStartValue;
+			setFocused(false);
+			if (changed) emit("change", draftValue);
+			editStartValue = draftValue;
+		}
+		function handleClick() {
+			if (props.disabled) return;
+			const text = textRef.value;
+			if (text) {
+				text.enterEditing();
+				beginEditing();
+				return;
+			}
+			beginEditing();
+			nextTick(() => textRef.value?.enterEditing());
+		}
+		watch(() => props.modelValue, (value) => {
+			const text = textRef.value;
+			if (text) text.setEditingText(value);
+			if (!focused.value || value !== draftValue) {
+				editStartValue = value;
+				draftValue = value;
+			}
+		}, { flush: "post" });
+		watch(() => props.disabled, (disabled) => {
+			if (!disabled) return;
+			textRef.value?.exitEditing();
+			setFocused(false);
+		});
+		return () => createVNode(FField, {
+			"active": focused.value,
+			"disabled": props.disabled,
+			"filled": hasValue.value,
+			"hasLabel": Boolean(props.label),
+			"width": props.width,
+			"height": height.value,
+			"paddingLeft": metrics.value.horizontalPadding,
+			"paddingRight": metrics.value.horizontalPadding,
+			"fontSize": fontSize.value,
+			"labelFontSize": metrics.value.labelFontSize,
+			"labelHeight": metrics.value.labelHeight,
+			"labelPaddingTop": metrics.value.labelPaddingTop,
+			"cursor": props.disabled ? "default" : "text",
+			"onClick": handleClick
+		}, {
+			label: (labelProps) => createVNode(resolveComponent("f-text"), mergeProps(labelProps, {
+				"text": props.label,
+				"fontFamily": MD3.fontFamily,
+				"fontWeight": 500,
+				"textAlign": "left",
+				"verticalAlign": "middle",
+				"overflow": "hidden",
+				"wordWrap": false,
+				"ellipsis": true
+			}), null),
+			default: () => createVNode(resolveComponent("f-text"), {
+				"ref": textRef,
+				"text": props.modelValue,
+				"placeholder": props.placeholder,
+				"placeholderColor": MD3.onSurfaceVariant,
+				"fontSize": fontSize.value,
+				"fontFamily": MD3.fontFamily,
+				"color": props.disabled ? MD3.outline : MD3.onSurface,
+				"textAlign": "left",
+				"verticalAlign": "middle",
+				"editable": !props.disabled,
+				"fitWidth": true,
+				"fitHeight": true,
+				"overflow": "hidden",
+				"wordWrap": false,
+				"ellipsis": true,
+				"onInput": (event) => {
+					updateValue(event.detail);
+				},
+				"onChange": (event) => {
+					finishEditing(event.detail);
+				}
+			}, null)
+		});
+	}
+});
+//#endregion
+//#region packages/components/src/components/tooltip/tooltip.tsx
+function _isSlot$3(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var FLOATING_TRANSITION_DURATION = 120;
+/** 由所属 Root 的唯一 completion 路径定位的受控 Canvas tooltip。 */
+var FTooltip = /* @__PURE__ */ defineComponent({
+	name: "FTooltip",
+	props: {
+		visible: {
+			type: Boolean,
+			default: false
+		},
+		triggerRef: {
+			type: Object,
+			default: null
+		},
+		placement: {
+			type: String,
+			default: "bottom-start"
+		},
+		width: {
+			type: Number,
+			default: void 0
+		},
+		gap: {
+			type: Number,
+			default: 4
+		}
+	},
+	emits: [
+		"update:visible",
+		"clickOutside",
+		"mouseenter",
+		"mouseleave"
+	],
+	setup(props, { emit, slots }) {
+		const { overlay } = useOverlay();
+		const floatingRef = shallowRef(null);
+		const triggerElement = computed(() => unref(props.triggerRef) ?? null);
+		const positionOptions = computed(() => ({
+			placement: props.placement,
+			middleware: [
+				offset(props.gap),
+				flip(),
+				shift({ crossAxis: true })
+			]
+		}));
+		useOutsideClick(() => props.visible, [triggerElement, floatingRef], () => {
+			emit("clickOutside");
+			emit("update:visible", false);
+		});
+		useOverlayPosition(() => props.visible, triggerElement, floatingRef, positionOptions);
+		return () => {
+			if (!overlay) {
+				if (!props.visible) return null;
+				throw new Error("[fulate-components] FTooltip requires createApp or registerVueOverlay");
+			}
+			const panel = props.visible ? createVNode(resolveComponent("f-div"), {
+				"ref": floatingRef,
+				"width": props.width,
+				"backgroundColor": MD3.surface,
+				"radius": MD3.radiusSm,
+				"borderColor": MD3.outlineVariant,
+				"borderWidth": .5,
+				"borderPosition": "inside",
+				"onMouseenter": (event) => emit("mouseenter", event),
+				"onMouseleave": (event) => emit("mouseleave", event)
+			}, { default: () => [slots.default?.()] }) : null;
+			return createVNode(Teleport, { "to": overlay }, { default: () => [createVNode(FTransition, {
+				"appear": true,
+				"enterFrom": {
+					opacity: 0,
+					scaleX: .96,
+					scaleY: .96
+				},
+				"enterTo": {
+					opacity: 1,
+					scaleX: 1,
+					scaleY: 1
+				},
+				"leaveTo": {
+					opacity: 0,
+					scaleX: .96,
+					scaleY: .96
+				},
+				"duration": FLOATING_TRANSITION_DURATION
+			}, _isSlot$3(panel) ? panel : { default: () => [panel] })] });
+		};
+	}
+});
+//#endregion
+//#region packages/components/src/components/select/select.tsx
+function _isSlot$2(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var MAX_VISIBLE = 5;
+var SELECT_SIZE = {
+	small: {
+		endPadding: 8,
+		indicatorWidth: 20,
+		indicatorFontSize: 14,
+		itemHeight: 36,
+		menuVerticalPadding: 4
+	},
+	medium: {
+		endPadding: 10,
+		indicatorWidth: 24,
+		indicatorFontSize: 16,
+		itemHeight: 44,
+		menuVerticalPadding: 6
+	},
+	large: {
+		endPadding: 12,
+		indicatorWidth: 28,
+		indicatorFontSize: 18,
+		itemHeight: 52,
+		menuVerticalPadding: 8
+	}
+};
+var FSelect = /* @__PURE__ */ defineComponent({
+	name: "FSelect",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		options: {
+			type: Array,
+			default: () => []
+		},
+		placeholder: {
+			type: String,
+			default: "请选择"
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: controlSizeProp,
+		width: {
+			type: Number,
+			default: 280
+		},
+		height: {
+			type: Number,
+			default: void 0
+		},
+		fontSize: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"change",
+		"visibleChange"
+	],
+	setup(props, { emit }) {
+		const open = ref(false);
+		const activeIndex = ref(-1);
+		const triggerRef = shallowRef(null);
+		const { rippleRef, trigger: triggerRipple } = useRippleAnimation();
+		const fieldMetrics = computed(() => FIELD_SIZE[props.size]);
+		const selectMetrics = computed(() => SELECT_SIZE[props.size]);
+		const height = computed(() => props.height ?? fieldMetrics.value.height);
+		const fontSize = computed(() => props.fontSize ?? fieldMetrics.value.fontSize);
+		const selectedIndex = computed(() => props.options.findIndex((option) => option.value === props.modelValue));
+		const selectedOption = computed(() => props.options[selectedIndex.value]);
+		const hasValue = computed(() => !isUndefined(selectedOption.value));
+		const maxDropdownHeight = computed(() => Math.min(props.options.length, MAX_VISIBLE) * selectMetrics.value.itemHeight + selectMetrics.value.menuVerticalPadding * 2);
+		function getDisplayText() {
+			return selectedOption.value?.label ?? props.placeholder;
+		}
+		function getTextColor() {
+			if (props.disabled) return MD3.outline;
+			if (!selectedOption.value) return MD3.onSurfaceVariant;
+			return MD3.onSurface;
+		}
+		function doClose() {
+			if (!open.value) return;
+			open.value = false;
+			activeIndex.value = -1;
+			emit("visibleChange", false);
+		}
+		function openDropdown() {
+			if (props.disabled || open.value) return;
+			open.value = true;
+			activeIndex.value = selectedIndex.value >= 0 ? selectedIndex.value : props.options.length ? 0 : -1;
+			emit("visibleChange", true);
+		}
+		function setTriggerElement(element) {
+			triggerRef.value = element;
+		}
+		function toggle(event) {
+			if (props.disabled) return;
+			if (open.value) doClose();
+			else {
+				openDropdown();
+				if (event?.detail) triggerRipple(event.detail.x, event.detail.y);
+			}
+		}
+		function select(value) {
+			if (props.disabled) return;
+			if (value !== props.modelValue) {
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+			doClose();
+		}
+		watch(() => props.disabled, (disabled) => {
+			if (disabled) doClose();
+		});
+		watch(() => props.options.length, (length) => {
+			if (!open.value) return;
+			if (length === 0) activeIndex.value = -1;
+			else if (activeIndex.value < 0) activeIndex.value = selectedIndex.value >= 0 ? selectedIndex.value : 0;
+			else if (activeIndex.value >= length) activeIndex.value = length - 1;
+		});
+		return () => {
+			let _slot;
+			return createVNode(resolveComponent("f-div"), {
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Column,
+				"width": props.width
+			}, { default: () => [createVNode(FField, {
+				"active": open.value,
+				"disabled": props.disabled,
+				"filled": hasValue.value,
+				"hasLabel": Boolean(props.label),
+				"width": props.width,
+				"height": height.value,
+				"paddingLeft": fieldMetrics.value.horizontalPadding,
+				"paddingRight": selectMetrics.value.endPadding,
+				"suffixWidth": selectMetrics.value.indicatorWidth,
+				"fontSize": fontSize.value,
+				"labelFontSize": fieldMetrics.value.labelFontSize,
+				"labelHeight": fieldMetrics.value.labelHeight,
+				"labelPaddingTop": fieldMetrics.value.labelPaddingTop,
+				"cursor": props.disabled ? "default" : "pointer",
+				"elementRef": setTriggerElement,
+				"onClick": toggle
+			}, {
+				underlay: () => createVNode(resolveComponent("f-ripple"), {
+					"ref": rippleRef,
+					"rippleColor": MD3.primary,
+					"rippleOpacity": MD3.rippleOpacity,
+					"duration": 400
+				}, null),
+				label: (labelProps) => createVNode(resolveComponent("f-text"), mergeProps(labelProps, {
+					"text": props.label,
+					"fontFamily": MD3.fontFamily,
+					"fontWeight": 500,
+					"textAlign": "left",
+					"verticalAlign": "middle",
+					"overflow": "hidden",
+					"wordWrap": false,
+					"ellipsis": true
+				}), null),
+				default: () => createVNode(resolveComponent("f-text"), {
+					"text": getDisplayText(),
+					"fitWidth": true,
+					"fitHeight": true,
+					"overflow": "hidden",
+					"wordWrap": false,
+					"ellipsis": true,
+					"fontSize": fontSize.value,
+					"fontFamily": MD3.fontFamily,
+					"color": getTextColor(),
+					"textAlign": "left",
+					"verticalAlign": "middle"
+				}, null),
+				suffix: () => createVNode(resolveComponent("f-div"), {
+					"width": selectMetrics.value.indicatorWidth,
+					"flexShrink": 0
+				}, { default: () => [createVNode(resolveComponent("f-text"), {
+					"fitWidth": true,
+					"fitHeight": true,
+					"overflow": "hidden",
+					"wordWrap": false,
+					"text": open.value ? "▴" : "▾",
+					"fontSize": selectMetrics.value.indicatorFontSize,
+					"color": open.value ? MD3.primary : MD3.onSurfaceVariant,
+					"textAlign": "center",
+					"verticalAlign": "middle"
+				}, null)] })
+			}), createVNode(FTooltip, {
+				"visible": open.value,
+				"triggerRef": triggerRef,
+				"width": props.width,
+				"onClickOutside": doClose
+			}, { default: () => [createVNode(resolveComponent("f-div"), {
+				"width": props.width,
+				"height": maxDropdownHeight.value
+			}, { default: () => [createVNode(resolveComponent("f-scrollview"), {
+				"width": props.width,
+				"height": maxDropdownHeight.value,
+				"maxHeight": maxDropdownHeight.value,
+				"scrollbarSize": 4,
+				"scrollbarColor": "rgba(0,0,0,0.15)"
+			}, { default: () => [createVNode(resolveComponent("f-div"), {
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Column,
+				"width": props.width,
+				"paddingTop": selectMetrics.value.menuVerticalPadding,
+				"paddingBottom": selectMetrics.value.menuVerticalPadding
+			}, _isSlot$2(_slot = props.options.map((opt, i) => createVNode(resolveComponent("f-div"), {
+				"key": opt.value,
+				"display": Display.Flex,
+				"width": props.width,
+				"height": selectMetrics.value.itemHeight,
+				"flexShrink": 0,
+				"backgroundColor": opt.value === props.modelValue ? MD3.primaryContainer : activeIndex.value === i ? MD3.surfaceDim : "transparent",
+				"cursor": "pointer",
+				"onClick": () => select(opt.value),
+				"onPointermove": () => {
+					activeIndex.value = i;
+				}
+			}, { default: () => [createVNode(resolveComponent("f-text"), {
+				"left": fieldMetrics.value.horizontalPadding,
+				"fitWidth": true,
+				"fitHeight": true,
+				"width": props.width - fieldMetrics.value.horizontalPadding * 2,
+				"height": selectMetrics.value.itemHeight,
+				"text": opt.label,
+				"overflow": "hidden",
+				"wordWrap": false,
+				"ellipsis": true,
+				"fontSize": fontSize.value,
+				"fontFamily": MD3.fontFamily,
+				"textAlign": "left",
+				"color": opt.value === props.modelValue ? MD3.primary : MD3.onSurface,
+				"fontWeight": opt.value === props.modelValue ? 600 : 400,
+				"verticalAlign": "middle"
+			}, null)] }))) ? _slot : { default: () => [_slot] })] })] })] })] });
+		};
+	}
+});
+//#endregion
+//#region packages/components/src/components/popover/popover.tsx
+var HOVER_CLOSE_DELAY = 100;
+/** A popover surface anchored by its reference slot or an external Element. */
+var FPopover = /* @__PURE__ */ defineComponent({
+	name: "FPopover",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		triggerRef: {
+			type: Object,
+			default: null
+		},
+		trigger: {
+			type: String,
+			default: "click"
+		},
+		placement: {
+			type: String,
+			default: "bottom-start"
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		content: {
+			type: String,
+			default: ""
+		},
+		width: {
+			type: Number,
+			default: void 0
+		},
+		gap: {
+			type: Number,
+			default: 8
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"update:visible",
+		"clickOutside"
+	],
+	setup(props, { emit, slots }) {
+		const internalVisible = ref(false);
+		const referenceRef = shallowRef(null);
+		const isVisible = computed(() => props.visible ?? props.modelValue ?? internalVisible.value);
+		const triggerElement = computed(() => slots.reference ? referenceRef.value : unref(props.triggerRef) ?? null);
+		let triggerHovered = false;
+		let panelHovered = false;
+		let hoverCloseTimer = null;
+		function clearHoverCloseTimer() {
+			if (hoverCloseTimer === null) return;
+			clearTimeout(hoverCloseTimer);
+			hoverCloseTimer = null;
+		}
+		function setVisible(visible) {
+			if (visible && props.disabled || visible === isVisible.value) return;
+			const hasVisibleBinding = props.visible !== void 0;
+			const hasModelBinding = props.modelValue !== void 0;
+			if (!hasVisibleBinding && !hasModelBinding) {
+				internalVisible.value = visible;
+				emit("update:modelValue", visible);
+				return;
+			}
+			if (hasModelBinding) emit("update:modelValue", visible);
+			if (hasVisibleBinding) emit("update:visible", visible);
+		}
+		function open() {
+			setVisible(true);
+		}
+		function close() {
+			setVisible(false);
+		}
+		function toggle() {
+			setVisible(!isVisible.value);
+		}
+		function scheduleHoverClose() {
+			clearHoverCloseTimer();
+			hoverCloseTimer = setTimeout(() => {
+				hoverCloseTimer = null;
+				if (!triggerHovered && !panelHovered) close();
+			}, HOVER_CLOSE_DELAY);
+		}
+		function handleTriggerEnter() {
+			triggerHovered = true;
+			clearHoverCloseTimer();
+			open();
+		}
+		function handleTriggerLeave() {
+			triggerHovered = false;
+			scheduleHoverClose();
+		}
+		function handlePanelEnter() {
+			if (props.trigger !== "hover") return;
+			panelHovered = true;
+			clearHoverCloseTimer();
+		}
+		function handlePanelLeave() {
+			if (props.trigger !== "hover") return;
+			panelHovered = false;
+			scheduleHoverClose();
+		}
+		function handleContextMenu(event) {
+			event.preventDefault();
+			open();
+		}
+		function setReference(value) {
+			const element = value && typeof value === "object" && "$el" in value ? value.$el : value;
+			if (element === null) {
+				referenceRef.value = null;
+				return;
+			}
+			if (!(element instanceof Element)) throw new Error("[fulate-components] FPopover reference must render one canvas Element");
+			referenceRef.value = element;
+		}
+		function handleClickOutside() {
+			emit("clickOutside");
+			close();
+		}
+		function handleKeyDown(event) {
+			if (isVisible.value && props.closeOnEscape && event.key === "Escape") {
+				event.preventDefault();
+				close();
+			}
+		}
+		watch([
+			triggerElement,
+			() => props.trigger,
+			() => props.disabled
+		], ([element, trigger, disabled], _previous, onCleanup) => {
+			triggerHovered = false;
+			panelHovered = false;
+			clearHoverCloseTimer();
+			if (!element || disabled || trigger === "manual") return;
+			const removeListeners = [];
+			if (trigger === "click") removeListeners.push(element.addEventListener("click", toggle));
+			else if (trigger === "hover") removeListeners.push(element.addEventListener("mouseenter", handleTriggerEnter), element.addEventListener("mouseleave", handleTriggerLeave));
+			else if (trigger === "focus") removeListeners.push(element.addEventListener("focus", open), element.addEventListener("blur", close));
+			else removeListeners.push(element.addEventListener("contextmenu", handleContextMenu));
+			onCleanup(() => {
+				removeListeners.forEach((remove) => remove());
+			});
+		}, { immediate: true });
+		watch(() => props.disabled, (disabled) => {
+			if (disabled) close();
+		});
+		onMounted(() => {
+			document.addEventListener("keydown", handleKeyDown, true);
+		});
+		onUnmounted(() => {
+			clearHoverCloseTimer();
+			document.removeEventListener("keydown", handleKeyDown, true);
+		});
+		return () => {
+			const referenceNodes = slots.reference?.();
+			if (referenceNodes && referenceNodes.length !== 1) throw new Error("[fulate-components] FPopover reference slot requires exactly one root");
+			const reference = referenceNodes ? cloneVNode(referenceNodes[0], { ref: setReference }, true) : null;
+			const popover = createVNode(FTooltip, {
+				"visible": isVisible.value && !props.disabled,
+				"triggerRef": triggerElement,
+				"placement": props.placement,
+				"width": props.width,
+				"gap": props.gap,
+				"onClickOutside": handleClickOutside,
+				"onMouseenter": handlePanelEnter,
+				"onMouseleave": handlePanelLeave
+			}, { default: () => [createVNode(resolveComponent("f-div"), {
+				"width": props.width,
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Column,
+				"gap": 8,
+				"padding": 16
+			}, { default: () => [slots.title ? slots.title() : props.title ? createVNode(resolveComponent("f-span"), {
+				"text": props.title,
+				"fontSize": 14,
+				"fontWeight": 600,
+				"fontFamily": MD3.fontFamily,
+				"color": MD3.onSurface
+			}, null) : null, slots.default ? slots.default() : props.content ? createVNode(resolveComponent("f-span"), {
+				"text": props.content,
+				"fontSize": 13,
+				"fontFamily": MD3.fontFamily,
+				"color": MD3.onSurfaceVariant
+			}, null) : null] })] });
+			if (!reference) return popover;
+			return [reference, popover];
+		};
+	}
+});
+//#endregion
+//#region packages/components/src/internal/state-layer.ts
+function useStateLayer(disabled, color = () => MD3.primary) {
+	const layerRef = shallowRef(null);
+	function backgroundFor(state) {
+		if (state === "press") return colorWithAlpha(color(), MD3.statePressOpacity);
+		if (state === "hover") return colorWithAlpha(color(), MD3.stateHoverOpacity);
+		return "transparent";
+	}
+	function applyState(state, duration) {
+		const layer = layerRef.value;
+		if (!layer) return;
+		const backgroundColor = backgroundFor(state);
+		layer.stopAnimations();
+		if (duration === 0) layer.setOptions({ backgroundColor });
+		else layer.animate({ backgroundColor }, { duration });
+	}
+	const interaction = useInteractionState(disabled, applyState);
+	watch(color, () => interaction.refresh(), { flush: "post" });
+	return {
+		layerRef,
+		handlers: interaction.handlers
+	};
+}
+//#endregion
+//#region packages/components/src/components/radio/radio.tsx
+var RADIO_SIZE = {
+	small: {
+		indicatorSize: 16,
+		innerSize: 8
+	},
+	medium: {
+		indicatorSize: 20,
+		innerSize: 10
+	},
+	large: {
+		indicatorSize: 24,
+		innerSize: 12
+	}
+};
+var RADIO_GROUP_KEY = Symbol("fulate-radio-group");
+var FRadioGroup = /* @__PURE__ */ defineComponent({
+	name: "FRadioGroup",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: controlSizeProp,
+		direction: {
+			type: String,
+			default: "column"
+		},
+		gap: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit, slots }) {
+		function select(value) {
+			if (props.disabled || value === props.modelValue) return;
+			emit("update:modelValue", value);
+			emit("change", value);
+		}
+		provide(RADIO_GROUP_KEY, {
+			disabled: () => props.disabled,
+			size: () => props.size,
+			isSelected: (value) => props.modelValue === value,
+			select
+		});
+		return () => createVNode(resolveComponent("f-div"), {
+			"display": Display.Flex,
+			"flexDirection": props.direction === "row" ? FlexDirection.Row : FlexDirection.Column,
+			"gap": props.gap ?? CONTROL_GROUP_GAP[props.size]
+		}, { default: () => [slots.default?.()] });
+	}
+});
+var FRadio = /* @__PURE__ */ defineComponent({
+	name: "FRadio",
+	props: {
+		value: {
+			type: String,
+			required: true
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: inheritedControlSizeProp,
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit }) {
+		const group = inject(RADIO_GROUP_KEY, null);
+		const localSelected = ref(false);
+		const size = computed(() => props.size ?? group?.size() ?? "medium");
+		const metrics = computed(() => RADIO_SIZE[size.value]);
+		const stateLayerSize = computed(() => CONTROL_STATE_LAYER_SIZE[size.value]);
+		const isDisabled = computed(() => props.disabled || (group?.disabled() ?? false));
+		const isSelected = computed(() => group ? group.isSelected(props.value) : props.modelValue ?? localSelected.value);
+		const { layerRef, handlers } = useStateLayer(() => isDisabled.value, () => isSelected.value ? MD3.primary : MD3.onSurface);
+		function onClick() {
+			if (isDisabled.value || isSelected.value) return;
+			if (group) {
+				group.select(props.value);
+				emit("change", true);
+				return;
+			}
+			localSelected.value = true;
+			emit("update:modelValue", true);
+			emit("change", true);
+		}
+		function getCircleColor() {
+			if (isDisabled.value) return MD3.outlineVariant;
+			if (isSelected.value) return MD3.primary;
+			return MD3.outline;
+		}
+		return () => createVNode(resolveComponent("f-div"), mergeProps({
+			"display": Display.Flex,
+			"flexDirection": FlexDirection.Row,
+			"alignItems": Align.Center,
+			"gap": 0,
+			"height": stateLayerSize.value,
+			"cursor": isDisabled.value ? "default" : "pointer",
+			"onClick": onClick
+		}, handlers), { default: () => [createVNode(resolveComponent("f-div"), {
+			"ref": layerRef,
+			"width": stateLayerSize.value,
+			"height": stateLayerSize.value,
+			"flexShrink": 0,
+			"radius": stateLayerSize.value / 2,
+			"backgroundColor": "transparent",
+			"silent": true,
+			"pickable": false
+		}, { default: () => [createVNode(resolveComponent("f-rectangle"), {
+			"left": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"top": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"width": metrics.value.indicatorSize,
+			"height": metrics.value.indicatorSize,
+			"radius": metrics.value.indicatorSize / 2,
+			"borderColor": getCircleColor(),
+			"borderWidth": isSelected.value ? 2 : 1.5,
+			"borderPosition": "inside",
+			"backgroundColor": "transparent"
+		}, null), isSelected.value && createVNode(resolveComponent("f-rectangle"), {
+			"left": (stateLayerSize.value - metrics.value.innerSize) / 2,
+			"top": (stateLayerSize.value - metrics.value.innerSize) / 2,
+			"width": metrics.value.innerSize,
+			"height": metrics.value.innerSize,
+			"radius": metrics.value.innerSize / 2,
+			"backgroundColor": isDisabled.value ? MD3.outlineVariant : MD3.primary
+		}, null)] }), props.label && createVNode(resolveComponent("f-span"), {
+			"text": props.label,
+			"fontSize": CONTROL_LABEL_FONT_SIZE[size.value],
+			"fontFamily": MD3.fontFamily,
+			"color": isDisabled.value ? MD3.onSurfaceVariant : MD3.onSurface
+		}, null)] });
+	}
+});
+//#endregion
+//#region packages/components/src/components/checkbox/checkbox.tsx
+var CHECKBOX_SIZE = {
+	small: {
+		indicatorSize: 16,
+		iconSize: 14,
+		labelPadding: 2
+	},
+	medium: {
+		indicatorSize: 18,
+		iconSize: 16,
+		labelPadding: 4
+	},
+	large: {
+		indicatorSize: 20,
+		iconSize: 18,
+		labelPadding: 6
+	}
+};
+var CHECKBOX_GROUP_KEY = Symbol("fulate-checkbox-group");
+var FCheckboxGroup = /* @__PURE__ */ defineComponent({
+	name: "FCheckboxGroup",
+	props: {
+		modelValue: {
+			type: Array,
+			default: () => []
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: controlSizeProp,
+		direction: {
+			type: String,
+			default: "column"
+		},
+		gap: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit, slots }) {
+		function toggle(value) {
+			if (props.disabled) return;
+			const unique = [...new Set(props.modelValue)];
+			const nextValue = unique.includes(value) ? unique.filter((item) => item !== value) : [...unique, value];
+			emit("update:modelValue", nextValue);
+			emit("change", nextValue);
+		}
+		provide(CHECKBOX_GROUP_KEY, {
+			disabled: () => props.disabled,
+			size: () => props.size,
+			isChecked: (value) => props.modelValue.includes(value),
+			toggle
+		});
+		return () => createVNode(resolveComponent("f-div"), {
+			"display": Display.Flex,
+			"flexDirection": props.direction === "row" ? FlexDirection.Row : FlexDirection.Column,
+			"gap": props.gap ?? CONTROL_GROUP_GAP[props.size]
+		}, { default: () => [slots.default?.()] });
+	}
+});
+var FCheckbox = /* @__PURE__ */ defineComponent({
+	name: "FCheckbox",
+	props: {
+		value: {
+			type: String,
+			default: ""
+		},
+		label: {
+			type: String,
+			default: ""
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		size: inheritedControlSizeProp,
+		modelValue: {
+			type: Boolean,
+			default: void 0
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit }) {
+		const group = inject(CHECKBOX_GROUP_KEY, null);
+		const localChecked = ref(false);
+		const size = computed(() => props.size ?? group?.size() ?? "medium");
+		const metrics = computed(() => CHECKBOX_SIZE[size.value]);
+		const stateLayerSize = computed(() => CONTROL_STATE_LAYER_SIZE[size.value]);
+		const isDisabled = computed(() => props.disabled || (group?.disabled() ?? false));
+		const isChecked = computed(() => {
+			if (group) return group.isChecked(props.value);
+			return props.modelValue ?? localChecked.value;
+		});
+		const { layerRef, handlers } = useStateLayer(() => isDisabled.value, () => isChecked.value ? MD3.primary : MD3.onSurface);
+		function onClick() {
+			if (isDisabled.value) return;
+			const value = !isChecked.value;
+			if (group) {
+				group.toggle(props.value);
+				emit("change", value);
+			} else {
+				localChecked.value = value;
+				emit("update:modelValue", value);
+				emit("change", value);
+			}
+		}
+		function getBoxBorderColor() {
+			if (isDisabled.value) return MD3.outlineVariant;
+			if (isChecked.value) return MD3.primary;
+			return MD3.outline;
+		}
+		return () => createVNode(resolveComponent("f-div"), mergeProps({
+			"display": Display.Flex,
+			"flexDirection": FlexDirection.Row,
+			"alignItems": Align.Center,
+			"gap": 0,
+			"height": stateLayerSize.value,
+			"cursor": isDisabled.value ? "default" : "pointer",
+			"onClick": onClick
+		}, handlers), { default: () => [createVNode(resolveComponent("f-div"), {
+			"ref": layerRef,
+			"width": stateLayerSize.value,
+			"height": stateLayerSize.value,
+			"flexShrink": 0,
+			"radius": stateLayerSize.value / 2,
+			"backgroundColor": "transparent",
+			"silent": true,
+			"pickable": false
+		}, { default: () => [createVNode(resolveComponent("f-rectangle"), {
+			"left": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"top": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"width": metrics.value.indicatorSize,
+			"height": metrics.value.indicatorSize,
+			"radius": MD3.radiusSm,
+			"borderColor": getBoxBorderColor(),
+			"borderWidth": isChecked.value ? 0 : 1.5,
+			"borderPosition": "inside",
+			"backgroundColor": isChecked.value ? isDisabled.value ? MD3.outlineVariant : MD3.primary : "transparent"
+		}, null), isChecked.value && createVNode(resolveComponent("f-text"), {
+			"left": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"top": (stateLayerSize.value - metrics.value.indicatorSize) / 2,
+			"width": metrics.value.indicatorSize,
+			"height": metrics.value.indicatorSize,
+			"text": "",
+			"fontFamily": MD3.iconFamily,
+			"fontSize": metrics.value.iconSize,
+			"color": MD3.onPrimary,
+			"textAlign": "center",
+			"verticalAlign": "middle",
+			"overflow": "visible"
+		}, null)] }), props.label && createVNode(resolveComponent("f-div"), { "paddingLeft": metrics.value.labelPadding }, { default: () => [createVNode(resolveComponent("f-span"), {
+			"text": props.label,
+			"fontSize": CONTROL_LABEL_FONT_SIZE[size.value],
+			"fontFamily": MD3.fontFamily,
+			"color": isDisabled.value ? MD3.onSurfaceVariant : MD3.onSurface
+		}, null)] })] });
+	}
+});
+//#endregion
+//#region packages/components/src/components/switch/switch.tsx
+var SWITCH_SIZE = {
+	small: {
+		trackWidth: 44,
+		trackHeight: 24,
+		thumbSize: 16,
+		thumbOffset: 4,
+		labelGap: 8
+	},
+	medium: {
+		trackWidth: 52,
+		trackHeight: 32,
+		thumbSize: 24,
+		thumbOffset: 4,
+		labelGap: 10
+	},
+	large: {
+		trackWidth: 60,
+		trackHeight: 40,
+		thumbSize: 32,
+		thumbOffset: 4,
+		labelGap: 12
+	}
+};
+var FSwitch = /* @__PURE__ */ defineComponent({
+	name: "FSwitch",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		activeColor: {
+			type: String,
+			default: MD3.primary
+		},
+		size: controlSizeProp,
+		label: {
+			type: String,
+			default: ""
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit }) {
+		const thumbRef = shallowRef(null);
+		const stateLayerPositionRef = shallowRef(null);
+		const metrics = computed(() => SWITCH_SIZE[props.size]);
+		const stateLayerSize = computed(() => CONTROL_STATE_LAYER_SIZE[props.size]);
+		const thumbLeft = computed(() => props.modelValue ? metrics.value.trackWidth - metrics.value.thumbSize - metrics.value.thumbOffset : metrics.value.thumbOffset);
+		const stateLayerLeft = computed(() => props.modelValue ? metrics.value.trackWidth - stateLayerSize.value / 2 - metrics.value.thumbSize / 2 - metrics.value.thumbOffset : metrics.value.thumbOffset + metrics.value.thumbSize / 2 - stateLayerSize.value / 2);
+		const { layerRef, handlers } = useStateLayer(() => props.disabled, () => props.modelValue ? props.activeColor : MD3.onSurface);
+		watch([() => props.modelValue, () => props.size], ([, size], [, previousSize]) => {
+			const thumb = thumbRef.value;
+			const stateLayerPosition = stateLayerPositionRef.value;
+			thumb?.stopAnimations();
+			stateLayerPosition?.stopAnimations();
+			if (size !== previousSize) {
+				thumb?.setOptions({ left: thumbLeft.value });
+				stateLayerPosition?.setOptions({ left: stateLayerLeft.value });
+			} else {
+				if (thumb) thumb.animate({ left: thumbLeft.value }, { duration: 150 });
+				if (stateLayerPosition) stateLayerPosition.animate({ left: stateLayerLeft.value }, { duration: 150 });
+			}
+		});
+		function toggle() {
+			if (props.disabled) return;
+			const value = !props.modelValue;
+			emit("update:modelValue", value);
+			emit("change", value);
+		}
+		function getTrackBg() {
+			if (props.disabled) return props.modelValue ? MD3.outlineVariant : MD3.surfaceContainer;
+			return props.modelValue ? props.activeColor : MD3.surfaceContainer;
+		}
+		function getTrackBorder() {
+			if (props.disabled) return MD3.outlineVariant;
+			return props.modelValue ? props.activeColor : MD3.outline;
+		}
+		function getThumbBg() {
+			if (props.disabled) return props.modelValue ? MD3.surface : MD3.outlineVariant;
+			return props.modelValue ? MD3.onPrimary : MD3.outline;
+		}
+		return () => createVNode(resolveComponent("f-div"), mergeProps({
+			"display": Display.Flex,
+			"flexDirection": FlexDirection.Row,
+			"alignItems": Align.Center,
+			"gap": props.label ? metrics.value.labelGap : 0,
+			"cursor": props.disabled ? "default" : "pointer",
+			"onClick": toggle
+		}, handlers), { default: () => [createVNode(resolveComponent("f-div"), {
+			"width": metrics.value.trackWidth,
+			"height": stateLayerSize.value,
+			"flexShrink": 0
+		}, { default: () => [
+			createVNode(resolveComponent("f-rectangle"), {
+				"left": 0,
+				"top": (stateLayerSize.value - metrics.value.trackHeight) / 2,
+				"width": metrics.value.trackWidth,
+				"height": metrics.value.trackHeight,
+				"radius": metrics.value.trackHeight / 2,
+				"backgroundColor": getTrackBg(),
+				"borderColor": getTrackBorder(),
+				"borderWidth": props.modelValue ? 0 : 2,
+				"borderPosition": "inside"
+			}, null),
+			createVNode(resolveComponent("f-rectangle"), {
+				"ref": stateLayerPositionRef,
+				"left": stateLayerLeft.value,
+				"top": 0,
+				"width": stateLayerSize.value,
+				"height": stateLayerSize.value,
+				"radius": stateLayerSize.value / 2,
+				"backgroundColor": "transparent",
+				"silent": true,
+				"pickable": false
+			}, { default: () => [createVNode(resolveComponent("f-rectangle"), {
+				"ref": layerRef,
+				"width": stateLayerSize.value,
+				"height": stateLayerSize.value,
+				"radius": stateLayerSize.value / 2,
+				"backgroundColor": "transparent",
+				"silent": true,
+				"pickable": false
+			}, null)] }),
+			createVNode(resolveComponent("f-rectangle"), {
+				"ref": thumbRef,
+				"left": thumbLeft.value,
+				"top": (stateLayerSize.value - metrics.value.thumbSize) / 2,
+				"width": metrics.value.thumbSize,
+				"height": metrics.value.thumbSize,
+				"radius": metrics.value.thumbSize / 2,
+				"backgroundColor": getThumbBg()
+			}, null)
+		] }), props.label && createVNode(resolveComponent("f-div"), { "flex": 1 }, { default: () => [createVNode(resolveComponent("f-span"), {
+			"text": props.label,
+			"fontSize": CONTROL_LABEL_FONT_SIZE[props.size],
+			"fontFamily": MD3.fontFamily,
+			"color": props.disabled ? MD3.onSurfaceVariant : MD3.onSurface,
+			"verticalAlign": "middle"
+		}, null)] })] });
+	}
+});
+//#endregion
+//#region packages/components/src/components/dialog/dialog.tsx
+function _isSlot$1(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var DIALOG_VIEWPORT_MARGIN = 16;
+var DIALOG_TRANSITION_DURATION = 180;
+var FDialog = /* @__PURE__ */ defineComponent({
+	name: "FDialog",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		width: {
+			type: Number,
+			default: 480
+		},
+		closeOnOverlayClick: {
+			type: Boolean,
+			default: true
+		},
+		closeOnEscape: {
+			type: Boolean,
+			default: true
+		},
+		showClose: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:modelValue",
+		"open",
+		"opened",
+		"close",
+		"closed"
+	],
+	setup(props, { emit, slots }) {
+		const { overlay, fulateRoot } = useOverlay();
+		const viewport = shallowRef(fulateRoot?.viewport.getWorldRect() ?? {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		});
+		let mounted = false;
+		let removeViewportListener = null;
+		const panelWidth = computed(() => Math.min(props.width, Math.max(0, viewport.value.width - DIALOG_VIEWPORT_MARGIN * 2)));
+		const panelMaxHeight = computed(() => Math.max(0, viewport.value.height - DIALOG_VIEWPORT_MARGIN * 2));
+		function syncViewport() {
+			viewport.value = fulateRoot.viewport.getWorldRect();
+		}
+		function requestClose() {
+			if (props.modelValue) emit("update:modelValue", false);
+		}
+		function handleEscape(event) {
+			if (!props.modelValue || !props.closeOnEscape || event.key !== "Escape") return;
+			event.preventDefault();
+			event.stopPropagation();
+			requestClose();
+		}
+		function handlePanelClick(event) {
+			event.stopPropagation();
+		}
+		watch(() => props.modelValue, (visible) => {
+			if (!mounted) return;
+			if (visible) {
+				syncViewport();
+				emit("open");
+			} else emit("close");
+		});
+		onMounted(() => {
+			if (!fulateRoot || !overlay) throw new Error("[fulate-components] FDialog requires createApp or registerVueOverlay");
+			mounted = true;
+			syncViewport();
+			removeViewportListener = fulateRoot.addEventListener("viewportchange", syncViewport);
+			window.addEventListener("resize", syncViewport);
+			fulateRoot.container.ownerDocument.addEventListener("keydown", handleEscape, true);
+			if (props.modelValue) emit("open");
+		});
+		onUnmounted(() => {
+			mounted = false;
+			removeViewportListener?.();
+			removeViewportListener = null;
+			window.removeEventListener("resize", syncViewport);
+			fulateRoot.container.ownerDocument.removeEventListener("keydown", handleEscape, true);
+		});
+		return () => {
+			let _slot, _slot2;
+			if (!overlay) throw new Error("[fulate-components] FDialog requires createApp or registerVueOverlay");
+			const panel = props.modelValue ? createVNode(resolveComponent("f-div"), {
+				"width": panelWidth.value,
+				"maxHeight": panelMaxHeight.value,
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Column,
+				"flexShrink": 0,
+				"overflow": Overflow.Hidden,
+				"backgroundColor": MD3.surface,
+				"radius": MD3.radiusLg,
+				"shadow": {
+					color: "rgba(0,0,0,0.24)",
+					blur: 24,
+					offsetY: 8
+				},
+				"onClick": handlePanelClick
+			}, { default: () => [
+				createVNode(resolveComponent("f-div"), {
+					"minHeight": 56,
+					"display": Display.Flex,
+					"flexDirection": FlexDirection.Row,
+					"alignItems": Align.Center,
+					"paddingLeft": 24,
+					"paddingRight": 12,
+					"flexShrink": 0
+				}, { default: () => [slots.header ? createVNode(resolveComponent("f-div"), { "flex": 1 }, _isSlot$1(_slot = slots.header()) ? _slot : { default: () => [_slot] }) : createVNode(resolveComponent("f-span"), {
+					"text": props.title,
+					"flex": 1,
+					"fontSize": 20,
+					"fontWeight": 600,
+					"fontFamily": MD3.fontFamily,
+					"color": MD3.onSurface,
+					"verticalAlign": "middle"
+				}, null), props.showClose ? createVNode(resolveComponent("f-div"), {
+					"width": 32,
+					"height": 32,
+					"display": Display.Flex,
+					"justifyContent": Justify.Center,
+					"alignItems": Align.Center,
+					"flexShrink": 0,
+					"radius": 16,
+					"cursor": "pointer",
+					"onClick": (event) => {
+						event.stopPropagation();
+						requestClose();
+					}
+				}, { default: () => [createVNode(resolveComponent("f-span"), {
+					"text": "×",
+					"fontSize": 24,
+					"fontFamily": MD3.fontFamily,
+					"color": MD3.onSurfaceVariant
+				}, null)] }) : null] }),
+				createVNode(resolveComponent("f-div"), {
+					"minHeight": 48,
+					"paddingLeft": 24,
+					"paddingRight": 24,
+					"paddingBottom": 24,
+					"flexShrink": 1
+				}, { default: () => [slots.default?.()] }),
+				slots.footer ? createVNode(resolveComponent("f-div"), {
+					"minHeight": 64,
+					"display": Display.Flex,
+					"flexDirection": FlexDirection.Row,
+					"justifyContent": Justify.FlexEnd,
+					"alignItems": Align.Center,
+					"gap": 8,
+					"paddingLeft": 24,
+					"paddingRight": 24,
+					"paddingTop": 12,
+					"paddingBottom": 12,
+					"flexShrink": 0
+				}, _isSlot$1(_slot2 = slots.footer()) ? _slot2 : { default: () => [_slot2] }) : null
+			] }) : null;
+			return createVNode(Teleport, { "to": overlay }, { default: () => [createVNode(FTransition, {
+				"appear": true,
+				"enterFrom": { opacity: 0 },
+				"enterTo": { opacity: 1 },
+				"leaveTo": { opacity: 0 },
+				"duration": DIALOG_TRANSITION_DURATION,
+				"onAfterEnter": () => emit("opened"),
+				"onAfterLeave": () => emit("closed")
+			}, { default: () => [panel ? createVNode(resolveComponent("f-div"), {
+				"left": viewport.value.left,
+				"top": viewport.value.top,
+				"width": viewport.value.width,
+				"height": viewport.value.height,
+				"display": Display.Flex,
+				"justifyContent": Justify.Center,
+				"alignItems": Align.Center,
+				"backgroundColor": "rgba(0,0,0,0.32)",
+				"onClick": () => {
+					if (props.closeOnOverlayClick) requestClose();
+				}
+			}, _isSlot$1(panel) ? panel : { default: () => [panel] }) : null] })] });
+		};
+	}
+});
+//#endregion
+//#region packages/components/src/components/message/message.tsx
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+var MESSAGE_KEY = Symbol("fulate-message");
+var MESSAGE_TRANSITION_DURATION = 180;
+var MESSAGE_VISUAL = {
+	success: {
+		color: "#2E7D32",
+		icon: "✓"
+	},
+	info: {
+		color: MD3.primary,
+		icon: "i"
+	},
+	warning: {
+		color: "#ED6C02",
+		icon: "!"
+	},
+	error: {
+		color: MD3.error,
+		icon: "×"
+	}
+};
+var FMessage = /* @__PURE__ */ defineComponent({
+	name: "FMessage",
+	props: {
+		duration: {
+			type: Number,
+			default: 3e3
+		},
+		offset: {
+			type: Number,
+			default: 16
+		},
+		gap: {
+			type: Number,
+			default: 12
+		},
+		width: {
+			type: Number,
+			default: 360
+		}
+	},
+	setup(props, { slots }) {
+		const { overlay, fulateRoot } = useOverlay();
+		const viewport = shallowRef(fulateRoot?.viewport.getWorldRect() ?? {
+			left: 0,
+			top: 0,
+			width: 0,
+			height: 0
+		});
+		const messages = shallowRef([]);
+		let nextId = 1;
+		let removeViewportListener = null;
+		function syncViewport() {
+			viewport.value = fulateRoot.viewport.getWorldRect();
+		}
+		function removeMessage(instance) {
+			if (instance.timer) clearTimeout(instance.timer);
+			instance.timer = null;
+			messages.value = messages.value.filter((item) => item !== instance);
+			instance.onClose?.();
+		}
+		function closeMessage(instance) {
+			if (!instance.visible) return;
+			if (instance.timer) clearTimeout(instance.timer);
+			instance.timer = null;
+			instance.visible = false;
+			if (!instance.transitionStarted) {
+				removeMessage(instance);
+				return;
+			}
+			messages.value = [...messages.value];
+		}
+		function normalize(input) {
+			return isString(input) ? { message: input } : input;
+		}
+		function show(input, forcedType) {
+			const options = normalize(input);
+			const instance = {
+				id: nextId++,
+				message: options.message,
+				type: forcedType ?? options.type ?? "info",
+				visible: true,
+				transitionStarted: false,
+				timer: null,
+				onClose: options.onClose
+			};
+			messages.value = [...messages.value, instance];
+			const duration = options.duration ?? props.duration;
+			if (duration > 0) instance.timer = setTimeout(() => closeMessage(instance), duration);
+			return { close: () => closeMessage(instance) };
+		}
+		const message = (input) => show(input);
+		message.success = (input) => show(input, "success");
+		message.info = (input) => show(input, "info");
+		message.warning = (input) => show(input, "warning");
+		message.error = (input) => show(input, "error");
+		message.closeAll = () => {
+			for (const instance of messages.value) closeMessage(instance);
+		};
+		provide(MESSAGE_KEY, message);
+		onMounted(() => {
+			if (!fulateRoot || !overlay) throw new Error("[fulate-components] FMessage requires createApp or registerVueOverlay");
+			syncViewport();
+			removeViewportListener = fulateRoot.addEventListener("viewportchange", syncViewport);
+			window.addEventListener("resize", syncViewport);
+		});
+		onBeforeUnmount(() => {
+			removeViewportListener?.();
+			removeViewportListener = null;
+			window.removeEventListener("resize", syncViewport);
+			for (const instance of messages.value) if (instance.timer) clearTimeout(instance.timer);
+			messages.value = [];
+		});
+		return () => {
+			let _slot;
+			if (!overlay) throw new Error("[fulate-components] FMessage requires createApp or registerVueOverlay");
+			return [slots.default?.(), createVNode(Teleport, { "to": overlay }, { default: () => [createVNode(resolveComponent("f-div"), {
+				"left": viewport.value.left,
+				"top": viewport.value.top + props.offset,
+				"width": viewport.value.width,
+				"display": Display.Flex,
+				"flexDirection": FlexDirection.Column,
+				"alignItems": Align.Center,
+				"gap": props.gap,
+				"silent": true,
+				"pickable": false
+			}, _isSlot(_slot = messages.value.map((instance) => {
+				const visual = MESSAGE_VISUAL[instance.type];
+				return createVNode(FTransition, {
+					"key": instance.id,
+					"appear": true,
+					"enterFrom": { opacity: 0 },
+					"enterTo": { opacity: 1 },
+					"leaveTo": { opacity: 0 },
+					"duration": MESSAGE_TRANSITION_DURATION,
+					"onBeforeEnter": () => {
+						instance.transitionStarted = true;
+					},
+					"onAfterLeave": () => removeMessage(instance)
+				}, { default: () => [instance.visible ? createVNode(resolveComponent("f-div"), {
+					"key": instance.id,
+					"width": props.width,
+					"minHeight": 48,
+					"display": Display.Flex,
+					"flexDirection": FlexDirection.Row,
+					"alignItems": Align.Center,
+					"gap": 12,
+					"paddingTop": 10,
+					"paddingBottom": 10,
+					"paddingLeft": 16,
+					"paddingRight": 16,
+					"flexShrink": 0,
+					"backgroundColor": MD3.surface,
+					"borderColor": colorWithAlpha(visual.color, .35),
+					"borderWidth": 1,
+					"radius": MD3.radiusLg,
+					"shadow": {
+						color: "rgba(0,0,0,0.18)",
+						blur: 16,
+						offsetY: 4
+					},
+					"silent": true,
+					"pickable": false
+				}, { default: () => [createVNode(resolveComponent("f-div"), {
+					"width": 24,
+					"height": 24,
+					"flexShrink": 0,
+					"radius": 12,
+					"backgroundColor": colorWithAlpha(visual.color, .14),
+					"silent": true,
+					"pickable": false
+				}, { default: () => [createVNode(resolveComponent("f-text"), {
+					"width": 24,
+					"height": 24,
+					"text": visual.icon,
+					"fontSize": 15,
+					"fontWeight": 700,
+					"fontFamily": MD3.fontFamily,
+					"color": visual.color,
+					"textAlign": "center",
+					"verticalAlign": "middle"
+				}, null)] }), createVNode(resolveComponent("f-span"), {
+					"text": instance.message,
+					"flex": 1,
+					"fontSize": 14,
+					"fontFamily": MD3.fontFamily,
+					"color": MD3.onSurface,
+					"verticalAlign": "middle"
+				}, null)] }) : null] });
+			})) ? _slot : { default: () => [_slot] })] })];
+		};
+	}
+});
+function useMessage() {
+	const message = inject(MESSAGE_KEY, null);
+	if (!message) throw new Error("[fulate-components] useMessage requires FMessage");
+	return message;
+}
+//#endregion
+export { FButton, FCheckbox, FCheckboxGroup, FDialog, FInput, FMessage, FPopover, FRadio, FRadioGroup, FSelect, FSwitch, FTooltip, MD3, isDescendantOf, useMessage, useOutsideClick, useOverlay, useOverlayPosition, useVueShapeSize };