@vizejs/fresco 0.101.0 → 0.104.0

package/dist/components/index.d.mts

@@ -1,2 +1,2 @@
-import { $ as FormProps, A as TableColumn, At as Box, B as TimerProps, C as Menu, Ct as GridProps, D as TreeNode, Dt as VStack, E as Tree, Et as StackProps, F as Tooltip, G as AlertProps, H as BadgeProps, I as TooltipPosition, J as ProgressBarProps, K as AlertType, L as TooltipProps, M as List, N as ListItem, O as TreeProps, Ot as Divider, P as ListProps, Q as FormField, R as Timer, S as TabsProps, St as Grid, T as MenuProps, Tt as Stack, U as BadgeVariant, V as Badge, W as Alert, X as SpinnerProps, Y as Spinner, Z as Form, _ as Breadcrumb, _t as CodeProps, a as KeyHintProps, at as Checkbox, b as Tab, bt as Card, c as StatusBar, ct as SelectOption, d as Modal, dt as TextAreaProps, et as Confirm, f as ModalProps, ft as TextInput, g as StepperProps, gt as Code, h as Stepper, ht as LinkProps, i as KeyHint, it as RadioOption, j as TableProps, jt as BoxProps, k as Table, kt as DividerProps, l as StatusBarItem, lt as SelectProps, m as StepStatus, mt as Link, n as AvatarProps, nt as RadioGroup, o as Header, ot as CheckboxProps, p as Step, pt as TextInputProps, q as ProgressBar, r as KeyBinding, rt as RadioGroupProps, s as HeaderProps, st as Select, t as Avatar, tt as ConfirmProps, u as StatusBarProps, ut as TextArea, v as BreadcrumbItem, vt as Text, w as MenuItem, wt as HStack, x as Tabs, xt as CardProps, y as BreadcrumbProps, yt as TextProps, z as TimerMode } from "../index-COlY8bRB.mjs";
-export { Alert, AlertProps, AlertType, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Box, BoxProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Card, CardProps, Checkbox, CheckboxProps, Code, CodeProps, Confirm, ConfirmProps, Divider, DividerProps, Form, FormField, FormProps, Grid, GridProps, HStack, Header, HeaderProps, KeyBinding, KeyHint, KeyHintProps, Link, LinkProps, List, ListItem, ListProps, Menu, MenuItem, MenuProps, Modal, ModalProps, ProgressBar, ProgressBarProps, RadioGroup, RadioGroupProps, RadioOption, Select, SelectOption, SelectProps, Spinner, SpinnerProps, Stack, StackProps, StatusBar, StatusBarItem, StatusBarProps, Step, StepStatus, Stepper, StepperProps, Tab, Table, TableColumn, TableProps, Tabs, TabsProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Timer, TimerMode, TimerProps, Tooltip, TooltipPosition, TooltipProps, Tree, TreeNode, TreeProps, VStack };
+import { $ as FormProps, A as TableColumn, At as HStack, B as TimerProps, C as Menu, Ct as NewlineProps, D as TreeNode, Dt as CardProps, E as Tree, Et as Card, F as Tooltip, Ft as DividerProps, G as AlertProps, H as BadgeProps, I as TooltipPosition, It as Spacer, J as ProgressBarProps, K as AlertType, L as TooltipProps, Lt as Box, M as List, Mt as StackProps, N as ListItem, Nt as VStack, O as TreeProps, Ot as Grid, P as ListProps, Pt as Divider, Q as FormField, R as Timer, Rt as BoxProps, S as TabsProps, St as Newline, T as MenuProps, Tt as TextProps, U as BadgeVariant, V as Badge, W as Alert, X as SpinnerProps, Y as Spinner, Z as Form, _ as Breadcrumb, _t as CodeProps, a as KeyHintProps, at as Checkbox, b as Tab, bt as Static, c as StatusBar, ct as SelectOption, d as Modal, dt as TextAreaProps, et as Confirm, f as ModalProps, ft as TextInput, g as StepperProps, gt as Code, h as Stepper, ht as LinkProps, i as KeyHint, it as RadioOption, j as TableProps, jt as Stack, k as Table, kt as GridProps, l as StatusBarItem, lt as SelectProps, m as StepStatus, mt as Link, n as AvatarProps, nt as RadioGroup, o as Header, ot as CheckboxProps, p as Step, pt as TextInputProps, q as ProgressBar, r as KeyBinding, rt as RadioGroupProps, s as HeaderProps, st as Select, t as Avatar, tt as ConfirmProps, u as StatusBarProps, ut as TextArea, v as BreadcrumbItem, vt as Transform, w as MenuItem, wt as Text, x as Tabs, xt as StaticProps, y as BreadcrumbProps, yt as TransformProps, z as TimerMode } from "../index-BPZVmkyv.mjs";
+export { Alert, AlertProps, AlertType, Avatar, AvatarProps, Badge, BadgeProps, BadgeVariant, Box, BoxProps, Breadcrumb, BreadcrumbItem, BreadcrumbProps, Card, CardProps, Checkbox, CheckboxProps, Code, CodeProps, Confirm, ConfirmProps, Divider, DividerProps, Form, FormField, FormProps, Grid, GridProps, HStack, Header, HeaderProps, KeyBinding, KeyHint, KeyHintProps, Link, LinkProps, List, ListItem, ListProps, Menu, MenuItem, MenuProps, Modal, ModalProps, Newline, NewlineProps, ProgressBar, ProgressBarProps, RadioGroup, RadioGroupProps, RadioOption, Select, SelectOption, SelectProps, Spacer, Spinner, SpinnerProps, Stack, StackProps, Static, StaticProps, StatusBar, StatusBarItem, StatusBarProps, Step, StepStatus, Stepper, StepperProps, Tab, Table, TableColumn, TableProps, Tabs, TabsProps, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, Timer, TimerMode, TimerProps, Tooltip, TooltipPosition, TooltipProps, Transform, TransformProps, Tree, TreeNode, TreeProps, VStack };

package/dist/components/index.mjs

@@ -1,2 +1,2 @@
-import { A as Grid, C as Select, D as Code, E as Link, F as Box, M as Stack, N as VStack, O as Text, P as Divider, S as Checkbox, T as TextInput, _ as ProgressBar, a as Modal, b as Confirm, c as Tabs, d as Table, f as List, g as Alert, h as Badge, i as StatusBar, j as HStack, k as Card, l as Menu, m as Timer, n as KeyHint, o as Stepper, p as Tooltip, r as Header, s as Breadcrumb, t as Avatar, u as Tree, v as Spinner, w as TextArea, x as RadioGroup, y as Form } from "../components-B5VXjX9s.mjs";
-export { Alert, Avatar, Badge, Box, Breadcrumb, Card, Checkbox, Code, Confirm, Divider, Form, Grid, HStack, Header, KeyHint, Link, List, Menu, Modal, ProgressBar, RadioGroup, Select, Spinner, Stack, StatusBar, Stepper, Table, Tabs, Text, TextArea, TextInput, Timer, Tooltip, Tree, VStack };
+import { A as Newline, C as Select, D as Code, E as Link, F as Stack, I as VStack, L as Divider, M as Card, N as Grid, O as Transform, P as HStack, R as Spacer, S as Checkbox, T as TextInput, _ as ProgressBar, a as Modal, b as Confirm, c as Tabs, d as Table, f as List, g as Alert, h as Badge, i as StatusBar, j as Text, k as Static, l as Menu, m as Timer, n as KeyHint, o as Stepper, p as Tooltip, r as Header, s as Breadcrumb, t as Avatar, u as Tree, v as Spinner, w as TextArea, x as RadioGroup, y as Form, z as Box } from "../components-BFV7PBp6.mjs";
+export { Alert, Avatar, Badge, Box, Breadcrumb, Card, Checkbox, Code, Confirm, Divider, Form, Grid, HStack, Header, KeyHint, Link, List, Menu, Modal, Newline, ProgressBar, RadioGroup, Select, Spacer, Spinner, Stack, Static, StatusBar, Stepper, Table, Tabs, Text, TextArea, TextInput, Timer, Tooltip, Transform, Tree, VStack };

package/dist/{components-B5VXjX9s.mjs → components-BFV7PBp6.mjs}

@@ -1,25 +1,40 @@
-import { t as useInput } from "./useInput-CbggNZUF.mjs";
+import { i as useIsScreenReaderEnabled, t as useInput } from "./useInput-DrlvpGkS.mjs";
 import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch } from "@vue/runtime-core";
 //#region src/components/Box.ts
 /**
 * Box Component - Container with flexbox layout
 */
+const dimensionProp = [Number, String];
+function normalizeBorderStyle(style) {
+	if (style === "round") return "rounded";
+	if (style === "bold") return "heavy";
+	return style;
+}
 const Box = defineComponent({
 	name: "Box",
 	props: {
+		display: String,
+		position: String,
+		top: dimensionProp,
+		right: dimensionProp,
+		bottom: dimensionProp,
+		left: dimensionProp,
 		flexDirection: String,
 		flexWrap: String,
 		justifyContent: String,
 		alignItems: String,
 		alignSelf: String,
+		alignContent: String,
 		flexGrow: Number,
 		flexShrink: Number,
-		width: [Number, String],
-		height: [Number, String],
-		minWidth: [Number, String],
-		minHeight: [Number, String],
-		maxWidth: [Number, String],
-		maxHeight: [Number, String],
+		flexBasis: dimensionProp,
+		width: dimensionProp,
+		height: dimensionProp,
+		minWidth: dimensionProp,
+		minHeight: dimensionProp,
+		maxWidth: dimensionProp,
+		maxHeight: dimensionProp,
+		aspectRatio: Number,
 		padding: Number,
 		paddingX: Number,
 		paddingY: Number,
@@ -35,46 +50,120 @@ const Box = defineComponent({
 		marginBottom: Number,
 		marginLeft: Number,
 		gap: Number,
+		columnGap: Number,
+		rowGap: Number,
+		overflow: String,
+		overflowX: String,
+		overflowY: String,
 		border: String,
+		borderStyle: String,
+		borderTop: Boolean,
+		borderRight: Boolean,
+		borderBottom: Boolean,
+		borderLeft: Boolean,
+		borderColor: String,
+		borderTopColor: String,
+		borderRightColor: String,
+		borderBottomColor: String,
+		borderLeftColor: String,
+		borderDimColor: Boolean,
+		borderTopDimColor: Boolean,
+		borderRightDimColor: Boolean,
+		borderBottomDimColor: Boolean,
+		borderLeftDimColor: Boolean,
+		borderBackgroundColor: String,
+		borderTopBackgroundColor: String,
+		borderRightBackgroundColor: String,
+		borderBottomBackgroundColor: String,
+		borderLeftBackgroundColor: String,
 		fg: String,
-		bg: String
+		color: String,
+		bg: String,
+		backgroundColor: String,
+		"aria-label": String,
+		"aria-hidden": Boolean,
+		"aria-role": String,
+		"aria-state": Object
 	},
 	setup(props, { slots }) {
+		const isScreenReaderEnabled = useIsScreenReaderEnabled();
 		return () => {
+			if (isScreenReaderEnabled && props["aria-hidden"]) return null;
 			const style = {};
-			if (props.flexDirection) style.flex_direction = props.flexDirection;
-			if (props.flexWrap) style.flex_wrap = props.flexWrap;
-			if (props.justifyContent) style.justify_content = props.justifyContent;
-			if (props.alignItems) style.align_items = props.alignItems;
-			if (props.flexGrow !== void 0) style.flex_grow = props.flexGrow;
-			if (props.flexShrink !== void 0) style.flex_shrink = props.flexShrink;
+			if (props.display) style.display = props.display;
+			if (props.position) style.position = props.position;
+			if (props.top !== void 0) style.top = String(props.top);
+			if (props.right !== void 0) style.right = String(props.right);
+			if (props.bottom !== void 0) style.bottom = String(props.bottom);
+			if (props.left !== void 0) style.left = String(props.left);
+			if (props.flexDirection) style.flexDirection = props.flexDirection;
+			if (props.flexWrap) style.flexWrap = props.flexWrap;
+			if (props.justifyContent) style.justifyContent = props.justifyContent;
+			if (props.alignItems) style.alignItems = props.alignItems;
+			if (props.alignSelf) style.alignSelf = props.alignSelf;
+			if (props.alignContent) style.alignContent = props.alignContent;
+			if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+			if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+			if (props.flexBasis !== void 0) style.flexBasis = String(props.flexBasis);
 			if (props.width !== void 0) style.width = String(props.width);
 			if (props.height !== void 0) style.height = String(props.height);
-			if (props.minWidth !== void 0) style.min_width = String(props.minWidth);
-			if (props.minHeight !== void 0) style.min_height = String(props.minHeight);
-			if (props.maxWidth !== void 0) style.max_width = String(props.maxWidth);
-			if (props.maxHeight !== void 0) style.max_height = String(props.maxHeight);
+			if (props.minWidth !== void 0) style.minWidth = String(props.minWidth);
+			if (props.minHeight !== void 0) style.minHeight = String(props.minHeight);
+			if (props.maxWidth !== void 0) style.maxWidth = String(props.maxWidth);
+			if (props.maxHeight !== void 0) style.maxHeight = String(props.maxHeight);
+			if (props.aspectRatio !== void 0) style.aspectRatio = props.aspectRatio;
 			if (props.padding !== void 0) style.padding = props.padding;
-			if (props.paddingTop !== void 0 || props.paddingY !== void 0) style.padding_top = props.paddingTop ?? props.paddingY ?? props.padding;
-			if (props.paddingRight !== void 0 || props.paddingX !== void 0) style.padding_right = props.paddingRight ?? props.paddingX ?? props.padding;
-			if (props.paddingBottom !== void 0 || props.paddingY !== void 0) style.padding_bottom = props.paddingBottom ?? props.paddingY ?? props.padding;
-			if (props.paddingLeft !== void 0 || props.paddingX !== void 0) style.padding_left = props.paddingLeft ?? props.paddingX ?? props.padding;
+			if (props.paddingTop !== void 0 || props.paddingY !== void 0) style.paddingTop = props.paddingTop ?? props.paddingY ?? props.padding;
+			if (props.paddingRight !== void 0 || props.paddingX !== void 0) style.paddingRight = props.paddingRight ?? props.paddingX ?? props.padding;
+			if (props.paddingBottom !== void 0 || props.paddingY !== void 0) style.paddingBottom = props.paddingBottom ?? props.paddingY ?? props.padding;
+			if (props.paddingLeft !== void 0 || props.paddingX !== void 0) style.paddingLeft = props.paddingLeft ?? props.paddingX ?? props.padding;
 			if (props.margin !== void 0) style.margin = props.margin;
-			if (props.marginTop !== void 0 || props.marginY !== void 0) style.margin_top = props.marginTop ?? props.marginY ?? props.margin;
-			if (props.marginRight !== void 0 || props.marginX !== void 0) style.margin_right = props.marginRight ?? props.marginX ?? props.margin;
-			if (props.marginBottom !== void 0 || props.marginY !== void 0) style.margin_bottom = props.marginBottom ?? props.marginY ?? props.margin;
-			if (props.marginLeft !== void 0 || props.marginX !== void 0) style.margin_left = props.marginLeft ?? props.marginX ?? props.margin;
+			if (props.marginTop !== void 0 || props.marginY !== void 0) style.marginTop = props.marginTop ?? props.marginY ?? props.margin;
+			if (props.marginRight !== void 0 || props.marginX !== void 0) style.marginRight = props.marginRight ?? props.marginX ?? props.margin;
+			if (props.marginBottom !== void 0 || props.marginY !== void 0) style.marginBottom = props.marginBottom ?? props.marginY ?? props.margin;
+			if (props.marginLeft !== void 0 || props.marginX !== void 0) style.marginLeft = props.marginLeft ?? props.marginX ?? props.margin;
 			if (props.gap !== void 0) style.gap = props.gap;
+			if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+			if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+			if (props.overflow) style.overflow = props.overflow;
+			if (props.overflowX) style.overflowX = props.overflowX;
+			if (props.overflowY) style.overflowY = props.overflowY;
+			const children = isScreenReaderEnabled && props["aria-label"] ? [h("text", { text: props["aria-label"] })] : slots.default?.();
 			return h("box", {
 				style,
-				border: props.border,
-				fg: props.fg,
-				bg: props.bg
-			}, slots.default?.());
+				border: normalizeBorderStyle(props.borderStyle ?? props.border),
+				borderColor: props.borderColor,
+				borderTopColor: props.borderTopColor,
+				borderRightColor: props.borderRightColor,
+				borderBottomColor: props.borderBottomColor,
+				borderLeftColor: props.borderLeftColor,
+				borderDimColor: props.borderDimColor,
+				borderBackgroundColor: props.borderBackgroundColor,
+				fg: props.fg ?? props.color,
+				bg: props.bg ?? props.backgroundColor,
+				"aria-label": props["aria-label"],
+				"aria-hidden": props["aria-hidden"],
+				"aria-role": props["aria-role"],
+				"aria-state": props["aria-state"]
+			}, children);
 		};
 	}
 });
 //#endregion
+//#region src/components/Spacer.ts
+/**
+* Spacer Component - flexible empty space along the parent main axis.
+*/
+const Spacer = defineComponent({
+	name: "Spacer",
+	setup() {
+		return () => h("box", { style: {
+			flexGrow: 1,
+			flexShrink: 1
+		} });
+	}
+});
+//#endregion
 //#region src/components/Divider.ts
 /**
 * Divider Component - Horizontal or vertical divider line
@@ -317,6 +406,51 @@ const Card = defineComponent({
 	}
 });
 //#endregion
+//#region src/utils/text.ts
+/**
+* Unicode-aware text helpers shared by input and text components.
+*/
+const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter(void 0, { granularity: "grapheme" }) : null;
+function graphemes(value) {
+	if (!value) return [];
+	if (segmenter) return Array.from(segmenter.segment(value), (segment) => segment.segment);
+	return Array.from(value);
+}
+function graphemeLength(value) {
+	return graphemes(value).length;
+}
+function sliceGraphemes(value, start, end) {
+	return graphemes(value).slice(start, end).join("");
+}
+function insertAtGrapheme(value, index, text) {
+	return `${sliceGraphemes(value, 0, index)}${text}${sliceGraphemes(value, index)}`;
+}
+function deleteGraphemeBefore(value, index) {
+	if (index <= 0) return value;
+	return `${sliceGraphemes(value, 0, index - 1)}${sliceGraphemes(value, index)}`;
+}
+function deleteGraphemeAt(value, index) {
+	const length = graphemeLength(value);
+	if (index < 0 || index >= length) return value;
+	return `${sliceGraphemes(value, 0, index)}${sliceGraphemes(value, index + 1)}`;
+}
+function stringifyChildren(children) {
+	if (children == null || typeof children === "boolean") return "";
+	if (typeof children === "string" || typeof children === "number") return String(children);
+	if (Array.isArray(children)) return children.map((child) => stringifyChildren(child)).join("");
+	if (typeof children === "object") {
+		const vnode = children;
+		if ((typeof vnode.type === "string" ? vnode.type : vnode.type?.name) === "Newline") {
+			const count = typeof vnode.props?.count === "number" ? vnode.props.count : 1;
+			return "\n".repeat(Math.max(0, count));
+		}
+		if (typeof vnode.props?.text === "string" || typeof vnode.props?.text === "number") return String(vnode.props.text);
+		if (typeof vnode.props?.content === "string" || typeof vnode.props?.content === "number") return String(vnode.props.content);
+		return stringifyChildren(vnode.children);
+	}
+	return "";
+}
+//#endregion
 //#region src/components/Text.ts
 /**
 * Text Component - Text display
@@ -325,30 +459,38 @@ const Text = defineComponent({
 	name: "Text",
 	props: {
 		content: String,
-		wrap: Boolean,
+		wrap: [Boolean, String],
 		fg: String,
+		color: String,
 		bg: String,
+		backgroundColor: String,
 		bold: Boolean,
 		dim: Boolean,
+		dimColor: Boolean,
 		italic: Boolean,
 		underline: Boolean,
-		strikethrough: Boolean
+		strikethrough: Boolean,
+		inverse: Boolean,
+		"aria-label": String,
+		"aria-hidden": Boolean
 	},
 	setup(props, { slots }) {
+		const isScreenReaderEnabled = useIsScreenReaderEnabled();
 		return () => {
+			if (isScreenReaderEnabled && props["aria-hidden"]) return null;
 			return h("text", {
-				text: props.content ?? slots.default?.()?.map((vnode) => {
-					if (typeof vnode.children === "string") return vnode.children;
-					return "";
-				}).join("") ?? "",
+				text: isScreenReaderEnabled && props["aria-label"] ? props["aria-label"] : props.content ?? stringifyChildren(slots.default?.()),
 				wrap: props.wrap,
-				fg: props.fg,
-				bg: props.bg,
+				fg: props.fg ?? props.color,
+				bg: props.bg ?? props.backgroundColor,
 				bold: props.bold,
-				dim: props.dim,
+				dim: props.dim || props.dimColor,
 				italic: props.italic,
 				underline: props.underline,
-				strikethrough: props.strikethrough
+				strikethrough: props.strikethrough,
+				inverse: props.inverse,
+				"aria-label": props["aria-label"],
+				"aria-hidden": props["aria-hidden"]
 			});
 		};
 	}
@@ -404,6 +546,84 @@ defineComponent({
 	}
 });
 //#endregion
+//#region src/components/Newline.ts
+/**
+* Newline Component - inserts one or more newline characters inside Text.
+*/
+const Newline = defineComponent({
+	name: "Newline",
+	props: { count: {
+		type: Number,
+		default: 1
+	} },
+	setup(props) {
+		return () => h("text", { text: "\n".repeat(Math.max(0, props.count)) });
+	}
+});
+//#endregion
+//#region src/components/Static.ts
+/**
+* Static Component - renders stable items above the live area.
+*
+* The app renderer treats this component specially: newly added items are
+* promoted into a persistent output region above the live frame.
+*/
+const Static = defineComponent({
+	name: "Static",
+	props: {
+		items: {
+			type: Array,
+			default: () => []
+		},
+		style: Object
+	},
+	setup(props, { slots }) {
+		return () => {
+			const renderItem = slots.default;
+			return h("box", {
+				internal_static: true,
+				style: {
+					position: "absolute",
+					flexDirection: "column",
+					...props.style
+				}
+			}, props.items.map((item, index) => h("box", {
+				key: index,
+				internal_static_item: true,
+				style: { flexDirection: "column" }
+			}, renderItem?.({
+				item,
+				index
+			}) ?? [])));
+		};
+	}
+});
+//#endregion
+//#region src/components/Transform.ts
+/**
+* Transform Component - transforms stringified child output before rendering.
+*/
+const Transform = defineComponent({
+	name: "Transform",
+	props: {
+		accessibilityLabel: String,
+		transform: {
+			type: Function,
+			required: true
+		}
+	},
+	setup(props, { slots }) {
+		const isScreenReaderEnabled = useIsScreenReaderEnabled();
+		return () => {
+			const text = stringifyChildren(slots.default?.());
+			return h("text", {
+				text: isScreenReaderEnabled && props.accessibilityLabel ? props.accessibilityLabel : text.split("\n").map((line, index) => props.transform(line, index)).join("\n"),
+				"aria-label": props.accessibilityLabel
+			});
+		};
+	}
+});
+//#endregion
 //#region src/components/Code.ts
 /**
 * Code Component - Code block display
@@ -541,6 +761,10 @@ const TextInput = defineComponent({
 			type: Boolean,
 			default: false
 		},
+		focused: {
+			type: Boolean,
+			default: void 0
+		},
 		mask: {
 			type: Boolean,
 			default: false
@@ -556,79 +780,188 @@ const TextInput = defineComponent({
 	emits: [
 		"update:modelValue",
 		"submit",
-		"cancel"
+		"cancel",
+		"compositionstart",
+		"compositionupdate",
+		"compositionend"
 	],
 	setup(props, { emit }) {
 		const internalValue = ref(props.modelValue);
-		const cursorPos = ref(props.modelValue.length);
+		const cursorPos = ref(graphemeLength(props.modelValue));
+		const isComposing = ref(false);
+		const compositionAnchor = ref(cursorPos.value);
+		const preedit = ref("");
+		const preeditCursor = ref(0);
+		const focused = computed(() => props.focused ?? props.focus);
 		watch(() => props.modelValue, (newValue) => {
 			internalValue.value = newValue;
-			if (cursorPos.value > newValue.length) cursorPos.value = newValue.length;
+			const length = graphemeLength(newValue);
+			if (cursorPos.value > length) cursorPos.value = length;
 		});
 		const updateValue = (value) => {
 			internalValue.value = value;
 			emit("update:modelValue", value);
 		};
 		const insertText = (text) => {
-			const before = internalValue.value.slice(0, cursorPos.value);
-			const after = internalValue.value.slice(cursorPos.value);
-			updateValue(before + text + after);
-			cursorPos.value += text.length;
+			updateValue(insertAtGrapheme(internalValue.value, cursorPos.value, text));
+			cursorPos.value += graphemeLength(text);
 		};
 		const deleteBack = () => {
 			if (cursorPos.value > 0) {
-				updateValue(internalValue.value.slice(0, cursorPos.value - 1) + internalValue.value.slice(cursorPos.value));
+				updateValue(deleteGraphemeBefore(internalValue.value, cursorPos.value));
 				cursorPos.value--;
 			}
 		};
 		const deleteForward = () => {
-			if (cursorPos.value < internalValue.value.length) updateValue(internalValue.value.slice(0, cursorPos.value) + internalValue.value.slice(cursorPos.value + 1));
+			if (cursorPos.value < graphemeLength(internalValue.value)) updateValue(deleteGraphemeAt(internalValue.value, cursorPos.value));
 		};
 		const moveLeft = () => {
 			if (cursorPos.value > 0) cursorPos.value--;
 		};
 		const moveRight = () => {
-			if (cursorPos.value < internalValue.value.length) cursorPos.value++;
+			if (cursorPos.value < graphemeLength(internalValue.value)) cursorPos.value++;
 		};
 		const moveToStart = () => {
 			cursorPos.value = 0;
 		};
 		const moveToEnd = () => {
-			cursorPos.value = internalValue.value.length;
+			cursorPos.value = graphemeLength(internalValue.value);
 		};
+		const updatePreedit = (text, cursor = graphemeLength(text)) => {
+			if (!isComposing.value) {
+				isComposing.value = true;
+				compositionAnchor.value = cursorPos.value;
+				emit("compositionstart");
+			}
+			preedit.value = text;
+			preeditCursor.value = Math.max(0, Math.min(cursor, graphemeLength(text)));
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+		};
+		const finishComposition = (text = preedit.value) => {
+			if (!isComposing.value) return;
+			cursorPos.value = compositionAnchor.value;
+			isComposing.value = false;
+			preedit.value = "";
+			preeditCursor.value = 0;
+			if (text) insertText(text);
+			emit("compositionend", text);
+		};
+		const cancelComposition = () => {
+			if (!isComposing.value) return false;
+			isComposing.value = false;
+			preedit.value = "";
+			preeditCursor.value = 0;
+			cursorPos.value = compositionAnchor.value;
+			emit("compositionend", "");
+			return true;
+		};
+		const deletePreeditBack = () => {
+			if (!isComposing.value || preeditCursor.value === 0) return false;
+			preedit.value = deleteGraphemeBefore(preedit.value, preeditCursor.value);
+			preeditCursor.value--;
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const deletePreeditForward = () => {
+			if (!isComposing.value || preeditCursor.value >= graphemeLength(preedit.value)) return false;
+			preedit.value = deleteGraphemeAt(preedit.value, preeditCursor.value);
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const movePreeditLeft = () => {
+			if (!isComposing.value || preeditCursor.value === 0) return false;
+			preeditCursor.value--;
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const movePreeditRight = () => {
+			if (!isComposing.value || preeditCursor.value >= graphemeLength(preedit.value)) return false;
+			preeditCursor.value++;
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const movePreeditToStart = () => {
+			if (!isComposing.value) return false;
+			preeditCursor.value = 0;
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const movePreeditToEnd = () => {
+			if (!isComposing.value) return false;
+			preeditCursor.value = graphemeLength(preedit.value);
+			emit("compositionupdate", preedit.value, preeditCursor.value);
+			return true;
+		};
+		const displayValue = computed(() => {
+			if (!isComposing.value) return internalValue.value;
+			return [
+				sliceGraphemes(internalValue.value, 0, compositionAnchor.value),
+				preedit.value,
+				sliceGraphemes(internalValue.value, compositionAnchor.value)
+			].join("");
+		});
+		const displayCursor = computed(() => {
+			if (!isComposing.value) return cursorPos.value;
+			return compositionAnchor.value + preeditCursor.value;
+		});
 		useInput({
-			isActive: computed(() => props.focus),
+			isActive: computed(() => focused.value),
 			onChar: (char) => {
+				if (isComposing.value) return;
 				insertText(char);
 			},
 			onArrow: (direction) => {
-				if (direction === "left") moveLeft();
-				if (direction === "right") moveRight();
+				if (direction === "left") {
+					if (!movePreeditLeft()) moveLeft();
+				}
+				if (direction === "right") {
+					if (!movePreeditRight()) moveRight();
+				}
 			},
 			onKey: (key, modifiers) => {
-				if (key === "backspace") deleteBack();
-				else if (key === "delete") deleteForward();
-				else if (key === "home") moveToStart();
-				else if (key === "end") moveToEnd();
-				else if (key === "a" && modifiers.ctrl) moveToEnd();
+				if (key === "backspace") {
+					if (!deletePreeditBack()) deleteBack();
+				} else if (key === "delete") {
+					if (!deletePreeditForward()) deleteForward();
+				} else if (key === "home") {
+					if (!movePreeditToStart()) moveToStart();
+				} else if (key === "end") {
+					if (!movePreeditToEnd()) moveToEnd();
+				} else if (key === "a" && modifiers.ctrl) {
+					if (!movePreeditToEnd()) moveToEnd();
+				}
 			},
 			onSubmit: () => {
+				if (isComposing.value) {
+					finishComposition();
+					return;
+				}
 				emit("submit", internalValue.value);
 			},
 			onEscape: () => {
+				if (cancelComposition()) return;
 				emit("cancel");
-			}
+			},
+			onCompositionStart: () => {
+				isComposing.value = true;
+				compositionAnchor.value = cursorPos.value;
+				preedit.value = "";
+				preeditCursor.value = 0;
+				emit("compositionstart");
+			},
+			onCompositionUpdate: updatePreedit,
+			onCompositionEnd: finishComposition
 		});
 		return () => {
 			const style = {};
 			if (props.width !== void 0) style.width = String(props.width);
 			return h("input", {
-				value: internalValue.value,
+				value: displayValue.value,
 				placeholder: props.placeholder,
-				focused: props.focus,
-				cursor: cursorPos.value,
+				focused: focused.value,
+				cursor: displayCursor.value,
 				mask: props.mask,
-				"mask-char": props.maskChar,
+				maskChar: props.maskChar,
 				style,
 				fg: props.fg,
 				bg: props.bg
@@ -2557,6 +2890,6 @@ const Avatar = defineComponent({
 	}
 });
 //#endregion
-export { Grid as A, Select as C, Code as D, Link as E, Box as F, Stack as M, VStack as N, Text as O, Divider as P, Checkbox as S, TextInput as T, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, Alert as g, Badge as h, StatusBar as i, HStack as j, Card as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, Tooltip as p, Header as r, Breadcrumb as s, Avatar as t, Tree as u, Spinner as v, TextArea as w, RadioGroup as x, Form as y };
+export { Newline as A, Select as C, Code as D, Link as E, Stack as F, VStack as I, Divider as L, Card as M, Grid as N, Transform as O, HStack as P, Spacer as R, Checkbox as S, TextInput as T, ProgressBar as _, Modal as a, Confirm as b, Tabs as c, Table as d, List as f, Alert as g, Badge as h, StatusBar as i, Text as j, Static as k, Menu as l, Timer as m, KeyHint as n, Stepper as o, Tooltip as p, Header as r, Breadcrumb as s, Avatar as t, Tree as u, Spinner as v, TextArea as w, RadioGroup as x, Form as y, Box as z };
 
-//# sourceMappingURL=components-B5VXjX9s.mjs.map
+//# sourceMappingURL=components-BFV7PBp6.mjs.map