@vizejs/fresco 0.0.1-alpha.31

package/dist/components-DtI-O8Cr.js

@@ -0,0 +1,2521 @@
+import { useInput$1 as useInput } from "./useInput-CvEslk0z.js";
+import { computed, defineComponent, h, onMounted, onUnmounted, ref, watch } from "@vue/runtime-core";
+
+//#region src/components/Box.ts
+const Box = defineComponent({
+	name: "Box",
+	props: {
+		flexDirection: String,
+		flexWrap: String,
+		justifyContent: String,
+		alignItems: String,
+		alignSelf: String,
+		flexGrow: Number,
+		flexShrink: Number,
+		width: [Number, String],
+		height: [Number, String],
+		minWidth: [Number, String],
+		minHeight: [Number, String],
+		maxWidth: [Number, String],
+		maxHeight: [Number, String],
+		padding: Number,
+		paddingX: Number,
+		paddingY: Number,
+		paddingTop: Number,
+		paddingRight: Number,
+		paddingBottom: Number,
+		paddingLeft: Number,
+		margin: Number,
+		marginX: Number,
+		marginY: Number,
+		marginTop: Number,
+		marginRight: Number,
+		marginBottom: Number,
+		marginLeft: Number,
+		gap: Number,
+		border: String,
+		fg: String,
+		bg: String
+	},
+	setup(props, { slots }) {
+		return () => {
+			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.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.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.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.gap !== void 0) style.gap = props.gap;
+			return h("box", {
+				style,
+				border: props.border,
+				fg: props.fg,
+				bg: props.bg
+			}, slots.default?.());
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Divider.ts
+const Divider = defineComponent({
+	name: "Divider",
+	props: {
+		direction: {
+			type: String,
+			default: "horizontal"
+		},
+		char: String,
+		title: String,
+		fg: {
+			type: String,
+			default: "gray"
+		},
+		titleFg: String
+	},
+	setup(props) {
+		return () => {
+			const dividerChar = props.char ?? (props.direction === "horizontal" ? "─" : "│");
+			if (props.direction === "vertical") return h("text", { fg: props.fg }, dividerChar);
+			if (props.title) return h("box", { style: {
+				flex_direction: "row",
+				align_items: "center"
+			} }, [
+				h("text", { fg: props.fg }, dividerChar.repeat(3)),
+				h("text", {
+					fg: props.titleFg ?? props.fg,
+					bold: true
+				}, ` ${props.title} `),
+				h("text", { fg: props.fg }, dividerChar.repeat(3))
+			]);
+			return h("text", { fg: props.fg }, dividerChar.repeat(40));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Stack.ts
+const ALIGN_MAP = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	stretch: "stretch"
+};
+const JUSTIFY_MAP = {
+	start: "flex-start",
+	center: "center",
+	end: "flex-end",
+	between: "space-between",
+	around: "space-around",
+	evenly: "space-evenly"
+};
+const Stack = defineComponent({
+	name: "Stack",
+	props: {
+		direction: {
+			type: String,
+			default: "vertical"
+		},
+		gap: {
+			type: Number,
+			default: 0
+		},
+		align: {
+			type: String,
+			default: "stretch"
+		},
+		justify: {
+			type: String,
+			default: "start"
+		},
+		wrap: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			return h("box", { style: {
+				flex_direction: props.direction === "horizontal" ? "row" : "column",
+				gap: props.gap,
+				align_items: ALIGN_MAP[props.align ?? "stretch"],
+				justify_content: JUSTIFY_MAP[props.justify ?? "start"],
+				flex_wrap: props.wrap ? "wrap" : "nowrap"
+			} }, slots.default?.());
+		};
+	}
+});
+const HStack = defineComponent({
+	name: "HStack",
+	props: {
+		gap: {
+			type: Number,
+			default: 1
+		},
+		align: String,
+		justify: String
+	},
+	setup(props, { slots }) {
+		return () => h(Stack, {
+			direction: "horizontal",
+			...props
+		}, slots.default);
+	}
+});
+const VStack = defineComponent({
+	name: "VStack",
+	props: {
+		gap: {
+			type: Number,
+			default: 0
+		},
+		align: String,
+		justify: String
+	},
+	setup(props, { slots }) {
+		return () => h(Stack, {
+			direction: "vertical",
+			...props
+		}, slots.default);
+	}
+});
+
+//#endregion
+//#region src/components/Grid.ts
+const Grid = defineComponent({
+	name: "Grid",
+	props: {
+		columns: {
+			type: Number,
+			default: 2
+		},
+		gap: {
+			type: Number,
+			default: 1
+		},
+		rowGap: Number,
+		columnGap: Number
+	},
+	setup(props, { slots }) {
+		return () => {
+			const children = slots.default?.() ?? [];
+			const flatChildren = Array.isArray(children) ? children.flat() : [children];
+			const rows = [];
+			let currentRow = [];
+			flatChildren.forEach((child, index) => {
+				currentRow.push(child);
+				if (currentRow.length === props.columns || index === flatChildren.length - 1) {
+					rows.push([...currentRow]);
+					currentRow = [];
+				}
+			});
+			const rowGap = props.rowGap ?? props.gap;
+			const columnGap = props.columnGap ?? props.gap;
+			return h("box", { style: {
+				flex_direction: "column",
+				gap: rowGap
+			} }, rows.map((row, rowIndex) => h("box", {
+				key: `row-${rowIndex}`,
+				style: {
+					flex_direction: "row",
+					gap: columnGap
+				}
+			}, row.map((cell, cellIndex) => h("box", {
+				key: `cell-${rowIndex}-${cellIndex}`,
+				style: { flex_grow: 1 }
+			}, [cell])))));
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Card.ts
+const Card = defineComponent({
+	name: "Card",
+	props: {
+		title: String,
+		subtitle: String,
+		footer: String,
+		border: {
+			type: String,
+			default: "rounded"
+		},
+		padding: {
+			type: Number,
+			default: 1
+		},
+		titleFg: {
+			type: String,
+			default: "white"
+		},
+		borderFg: String,
+		bg: String
+	},
+	setup(props, { slots }) {
+		return () => {
+			const children = [];
+			if (props.title || props.subtitle) {
+				const headerContent = [];
+				if (props.title) headerContent.push(h("text", {
+					fg: props.titleFg,
+					bold: true
+				}, props.title));
+				if (props.subtitle) headerContent.push(h("text", { dim: true }, props.title ? ` - ${props.subtitle}` : props.subtitle));
+				children.push(h("box", {
+					key: "header",
+					style: {
+						flex_direction: "row",
+						margin_bottom: 1
+					}
+				}, headerContent));
+			}
+			children.push(h("box", {
+				key: "content",
+				style: { flex_grow: 1 }
+			}, slots.default?.()));
+			if (props.footer || slots.footer) children.push(h("box", {
+				key: "footer",
+				style: { margin_top: 1 }
+			}, slots.footer?.() ?? [h("text", { dim: true }, props.footer)]));
+			return h("box", {
+				border: props.border === "none" ? void 0 : props.border,
+				fg: props.borderFg,
+				bg: props.bg,
+				style: {
+					flex_direction: "column",
+					padding: props.padding
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Text.ts
+const Text = defineComponent({
+	name: "Text",
+	props: {
+		content: String,
+		wrap: Boolean,
+		fg: String,
+		bg: String,
+		bold: Boolean,
+		dim: Boolean,
+		italic: Boolean,
+		underline: Boolean,
+		strikethrough: Boolean
+	},
+	setup(props, { slots }) {
+		return () => {
+			const text = props.content ?? slots.default?.()?.map((vnode) => {
+				if (typeof vnode.children === "string") return vnode.children;
+				return "";
+			}).join("") ?? "";
+			return h("text", {
+				text,
+				wrap: props.wrap,
+				fg: props.fg,
+				bg: props.bg,
+				bold: props.bold,
+				dim: props.dim,
+				italic: props.italic,
+				underline: props.underline,
+				strikethrough: props.strikethrough
+			});
+		};
+	}
+});
+/**
+* Convenience components for common text styles
+*/
+const ErrorText = defineComponent({
+	name: "ErrorText",
+	props: { content: String },
+	setup(props, { slots }) {
+		return () => h(Text, {
+			fg: "red",
+			...props
+		}, slots);
+	}
+});
+const WarningText = defineComponent({
+	name: "WarningText",
+	props: { content: String },
+	setup(props, { slots }) {
+		return () => h(Text, {
+			fg: "yellow",
+			...props
+		}, slots);
+	}
+});
+const SuccessText = defineComponent({
+	name: "SuccessText",
+	props: { content: String },
+	setup(props, { slots }) {
+		return () => h(Text, {
+			fg: "green",
+			...props
+		}, slots);
+	}
+});
+const InfoText = defineComponent({
+	name: "InfoText",
+	props: { content: String },
+	setup(props, { slots }) {
+		return () => h(Text, {
+			fg: "blue",
+			...props
+		}, slots);
+	}
+});
+const MutedText = defineComponent({
+	name: "MutedText",
+	props: { content: String },
+	setup(props, { slots }) {
+		return () => h(Text, {
+			dim: true,
+			...props
+		}, slots);
+	}
+});
+
+//#endregion
+//#region src/components/Code.ts
+const Code = defineComponent({
+	name: "Code",
+	props: {
+		code: {
+			type: String,
+			required: true
+		},
+		language: String,
+		lineNumbers: {
+			type: Boolean,
+			default: true
+		},
+		startLine: {
+			type: Number,
+			default: 1
+		},
+		highlightLines: {
+			type: Array,
+			default: () => []
+		},
+		border: {
+			type: String,
+			default: "single"
+		},
+		fg: {
+			type: String,
+			default: "white"
+		},
+		lineNumberFg: {
+			type: String,
+			default: "gray"
+		},
+		highlightBg: {
+			type: String,
+			default: "blue"
+		}
+	},
+	setup(props) {
+		return () => {
+			const lines = props.code.split("\n");
+			const maxLineNum = props.startLine + lines.length - 1;
+			const lineNumWidth = String(maxLineNum).length;
+			const children = lines.map((line, index) => {
+				const lineNum = props.startLine + index;
+				const isHighlighted = props.highlightLines?.includes(lineNum);
+				const parts = [];
+				if (props.lineNumbers) parts.push(h("text", {
+					key: `ln-${lineNum}`,
+					fg: props.lineNumberFg
+				}, `${String(lineNum).padStart(lineNumWidth)} │ `));
+				parts.push(h("text", {
+					key: `code-${lineNum}`,
+					fg: props.fg,
+					bg: isHighlighted ? props.highlightBg : void 0
+				}, line || " "));
+				return h("box", {
+					key: `line-${lineNum}`,
+					style: { flex_direction: "row" }
+				}, parts);
+			});
+			if (props.language) children.unshift(h("text", {
+				key: "lang",
+				dim: true,
+				style: { margin_bottom: 1 }
+			}, `// ${props.language}`));
+			return h("box", {
+				border: props.border === "none" ? void 0 : props.border,
+				style: {
+					flex_direction: "column",
+					padding: props.border !== "none" ? 1 : 0
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Link.ts
+const Link = defineComponent({
+	name: "Link",
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		url: String,
+		fg: {
+			type: String,
+			default: "blue"
+		},
+		underline: {
+			type: Boolean,
+			default: true
+		},
+		showUrl: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["click"],
+	setup(props, { emit: _emit }) {
+		return () => {
+			const parts = [h("text", {
+				fg: props.fg,
+				underline: props.underline
+			}, props.text)];
+			if (props.showUrl && props.url) parts.push(h("text", { dim: true }, ` (${props.url})`));
+			return h("box", { style: { flex_direction: "row" } }, parts);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/TextInput.ts
+const TextInput = defineComponent({
+	name: "TextInput",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		focus: {
+			type: Boolean,
+			default: false
+		},
+		mask: {
+			type: Boolean,
+			default: false
+		},
+		maskChar: {
+			type: String,
+			default: "*"
+		},
+		width: [Number, String],
+		fg: String,
+		bg: String
+	},
+	emits: [
+		"update:modelValue",
+		"submit",
+		"cancel"
+	],
+	setup(props, { emit }) {
+		const internalValue = ref(props.modelValue);
+		const cursorPos = ref(props.modelValue.length);
+		watch(() => props.modelValue, (newValue) => {
+			internalValue.value = newValue;
+			if (cursorPos.value > newValue.length) cursorPos.value = newValue.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;
+		};
+		const deleteBack = () => {
+			if (cursorPos.value > 0) {
+				const before = internalValue.value.slice(0, cursorPos.value - 1);
+				const after = internalValue.value.slice(cursorPos.value);
+				updateValue(before + after);
+				cursorPos.value--;
+			}
+		};
+		const deleteForward = () => {
+			if (cursorPos.value < internalValue.value.length) {
+				const before = internalValue.value.slice(0, cursorPos.value);
+				const after = internalValue.value.slice(cursorPos.value + 1);
+				updateValue(before + after);
+			}
+		};
+		const moveLeft = () => {
+			if (cursorPos.value > 0) cursorPos.value--;
+		};
+		const moveRight = () => {
+			if (cursorPos.value < internalValue.value.length) cursorPos.value++;
+		};
+		const moveToStart = () => {
+			cursorPos.value = 0;
+		};
+		const moveToEnd = () => {
+			cursorPos.value = internalValue.value.length;
+		};
+		const isActive = computed(() => props.focus);
+		useInput({
+			isActive,
+			onChar: (char) => {
+				insertText(char);
+			},
+			onArrow: (direction) => {
+				if (direction === "left") moveLeft();
+				if (direction === "right") 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();
+			},
+			onSubmit: () => {
+				emit("submit", internalValue.value);
+			},
+			onEscape: () => {
+				emit("cancel");
+			}
+		});
+		return () => {
+			const style = {};
+			if (props.width !== void 0) style.width = String(props.width);
+			return h("input", {
+				value: internalValue.value,
+				placeholder: props.placeholder,
+				focused: props.focus,
+				cursor: cursorPos.value,
+				mask: props.mask,
+				"mask-char": props.maskChar,
+				style,
+				fg: props.fg,
+				bg: props.bg
+			});
+		};
+	}
+});
+/**
+* Password input variant
+*/
+const PasswordInput = defineComponent({
+	name: "PasswordInput",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: "Enter password..."
+		},
+		focus: Boolean,
+		width: [Number, String],
+		fg: String,
+		bg: String
+	},
+	emits: [
+		"update:modelValue",
+		"submit",
+		"cancel"
+	],
+	setup(props, { emit }) {
+		return () => h(TextInput, {
+			...props,
+			mask: true,
+			"onUpdate:modelValue": (v) => emit("update:modelValue", v),
+			onSubmit: (v) => emit("submit", v),
+			onCancel: () => emit("cancel")
+		});
+	}
+});
+
+//#endregion
+//#region src/components/TextArea.ts
+const TextArea = defineComponent({
+	name: "TextArea",
+	props: {
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: String,
+		rows: {
+			type: Number,
+			default: 5
+		},
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		lineNumbers: {
+			type: Boolean,
+			default: false
+		},
+		border: {
+			type: String,
+			default: "single"
+		},
+		fg: String,
+		placeholderFg: {
+			type: String,
+			default: "gray"
+		},
+		lineNumberFg: {
+			type: String,
+			default: "gray"
+		},
+		cursorLine: {
+			type: Number,
+			default: 0
+		},
+		cursorColumn: {
+			type: Number,
+			default: 0
+		}
+	},
+	emits: ["update:modelValue"],
+	setup(props) {
+		const lines = computed(() => {
+			const text = props.modelValue || "";
+			const textLines = text.split("\n");
+			while (textLines.length < props.rows) textLines.push("");
+			return textLines.slice(0, props.rows);
+		});
+		const showPlaceholder = computed(() => !props.modelValue && props.placeholder && !props.focused);
+		return () => {
+			const lineNumWidth = String(lines.value.length).length;
+			const children = lines.value.map((line, index) => {
+				const isCursorLine = props.focused && index === props.cursorLine;
+				const parts = [];
+				if (props.lineNumbers) parts.push(h("text", {
+					key: `ln-${index}`,
+					fg: props.lineNumberFg,
+					dim: !isCursorLine
+				}, `${String(index + 1).padStart(lineNumWidth)} │ `));
+				let content = line || (showPlaceholder.value && index === 0 ? props.placeholder : " ");
+				parts.push(h("text", {
+					key: `content-${index}`,
+					fg: showPlaceholder.value && index === 0 ? props.placeholderFg : props.fg,
+					dim: props.disabled,
+					bold: isCursorLine
+				}, content));
+				return h("box", {
+					key: `line-${index}`,
+					style: { flex_direction: "row" },
+					bg: isCursorLine ? "gray" : void 0
+				}, parts);
+			});
+			return h("box", {
+				border: props.border === "none" ? void 0 : props.border,
+				style: {
+					flex_direction: "column",
+					padding: props.border !== "none" ? 1 : 0,
+					height: String(props.rows + (props.border !== "none" ? 2 : 0))
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Select.ts
+const Select = defineComponent({
+	name: "Select",
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+		modelValue: String,
+		placeholder: {
+			type: String,
+			default: "Select an option"
+		},
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		indicator: {
+			type: String,
+			default: "> "
+		},
+		indicatorEmpty: {
+			type: String,
+			default: "  "
+		},
+		fg: String,
+		bg: String,
+		selectedFg: {
+			type: String,
+			default: "cyan"
+		},
+		selectedBg: String
+	},
+	emits: ["update:modelValue", "select"],
+	setup(props, { emit: _emit }) {
+		const highlightedIndex = ref(0);
+		watch(() => props.modelValue, (value) => {
+			if (value) {
+				const index = props.options.findIndex((opt) => opt.value === value);
+				if (index !== -1) highlightedIndex.value = index;
+			}
+		}, { immediate: true });
+		return () => {
+			const children = props.options.map((option, index) => {
+				const isHighlighted = index === highlightedIndex.value;
+				const isSelected = option.value === props.modelValue;
+				const indicator = isHighlighted ? props.indicator : props.indicatorEmpty;
+				return h("box", {
+					key: option.value,
+					style: { flex_direction: "row" }
+				}, [h("text", {
+					fg: isHighlighted ? props.selectedFg : props.fg,
+					bg: isHighlighted ? props.selectedBg : props.bg,
+					dim: option.disabled
+				}, `${indicator}${option.label}${isSelected ? " (selected)" : ""}`)]);
+			});
+			return h("box", {
+				style: { flex_direction: "column" },
+				fg: props.fg,
+				bg: props.bg
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Checkbox.ts
+const Checkbox = defineComponent({
+	name: "Checkbox",
+	props: {
+		modelValue: {
+			type: Boolean,
+			default: false
+		},
+		label: String,
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		checked: {
+			type: String,
+			default: "[x]"
+		},
+		unchecked: {
+			type: String,
+			default: "[ ]"
+		},
+		fg: String,
+		checkedFg: {
+			type: String,
+			default: "green"
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit: _emit }) {
+		return () => {
+			const indicator = props.modelValue ? props.checked : props.unchecked;
+			const color = props.modelValue ? props.checkedFg : props.fg;
+			return h("box", { style: { flex_direction: "row" } }, [h("text", {
+				fg: color,
+				dim: props.disabled,
+				bold: props.focused
+			}, `${indicator} ${props.label ?? ""}`)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/RadioGroup.ts
+const RadioGroup = defineComponent({
+	name: "RadioGroup",
+	props: {
+		options: {
+			type: Array,
+			required: true
+		},
+		modelValue: String,
+		direction: {
+			type: String,
+			default: "vertical"
+		},
+		focusedIndex: Number,
+		selected: {
+			type: String,
+			default: "◉"
+		},
+		unselected: {
+			type: String,
+			default: "○"
+		},
+		fg: String,
+		selectedFg: {
+			type: String,
+			default: "green"
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { emit: _emit }) {
+		return () => {
+			const children = props.options.map((option, index) => {
+				const isSelected = option.value === props.modelValue;
+				const isFocused = index === props.focusedIndex;
+				const indicator = isSelected ? props.selected : props.unselected;
+				return h("text", {
+					key: option.value,
+					fg: isSelected ? props.selectedFg : props.fg,
+					bold: isFocused,
+					dim: option.disabled
+				}, `${indicator} ${option.label}`);
+			});
+			return h("box", { style: {
+				flex_direction: props.direction === "horizontal" ? "row" : "column",
+				gap: props.direction === "horizontal" ? 2 : 0
+			} }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Confirm.ts
+const Confirm = defineComponent({
+	name: "Confirm",
+	props: {
+		message: {
+			type: String,
+			required: true
+		},
+		confirmText: {
+			type: String,
+			default: "Yes"
+		},
+		cancelText: {
+			type: String,
+			default: "No"
+		},
+		defaultConfirm: {
+			type: Boolean,
+			default: true
+		},
+		confirmFg: {
+			type: String,
+			default: "green"
+		},
+		cancelFg: {
+			type: String,
+			default: "red"
+		},
+		selectedFg: {
+			type: String,
+			default: "cyan"
+		}
+	},
+	emits: [
+		"confirm",
+		"cancel",
+		"select"
+	],
+	setup(props, { emit: _emit }) {
+		const isConfirmSelected = ref(props.defaultConfirm);
+		return () => {
+			return h("box", { style: { flex_direction: "column" } }, [h("text", { key: "message" }, props.message), h("box", {
+				key: "buttons",
+				style: {
+					flex_direction: "row",
+					gap: 2,
+					margin_top: 1
+				}
+			}, [h("text", {
+				key: "confirm",
+				fg: isConfirmSelected.value ? props.selectedFg : props.confirmFg,
+				bold: isConfirmSelected.value
+			}, `[${props.confirmText}]`), h("text", {
+				key: "cancel",
+				fg: !isConfirmSelected.value ? props.selectedFg : props.cancelFg,
+				bold: !isConfirmSelected.value
+			}, `[${props.cancelText}]`)])]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Form.ts
+const Form = defineComponent({
+	name: "Form",
+	props: {
+		fields: {
+			type: Array,
+			default: () => []
+		},
+		labelWidth: {
+			type: Number,
+			default: 15
+		},
+		gap: {
+			type: Number,
+			default: 1
+		},
+		labelPosition: {
+			type: String,
+			default: "left"
+		},
+		labelFg: String,
+		requiredIndicator: {
+			type: String,
+			default: "*"
+		},
+		hintFg: {
+			type: String,
+			default: "gray"
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const children = [];
+			props.fields.forEach((field, _index) => {
+				const labelContent = [h("text", { fg: props.labelFg }, field.label.padEnd(props.labelWidth))];
+				if (field.required) labelContent.push(h("text", { fg: "red" }, props.requiredIndicator));
+				const fieldSlot = slots[field.key]?.();
+				if (props.labelPosition === "top") children.push(h("box", {
+					key: field.key,
+					style: {
+						flex_direction: "column",
+						margin_bottom: props.gap
+					}
+				}, [
+					h("box", { style: { flex_direction: "row" } }, labelContent),
+					fieldSlot ? h("box", { style: { margin_top: .5 } }, fieldSlot) : null,
+					field.hint ? h("text", {
+						fg: props.hintFg,
+						dim: true
+					}, field.hint) : null
+				].filter(Boolean)));
+				else {
+					children.push(h("box", {
+						key: field.key,
+						style: {
+							flex_direction: "row",
+							align_items: "center",
+							margin_bottom: props.gap
+						}
+					}, [h("box", { style: {
+						width: String(props.labelWidth),
+						flex_direction: "row"
+					} }, labelContent), h("box", { style: { flex_grow: 1 } }, fieldSlot)]));
+					if (field.hint) children.push(h("text", {
+						key: `hint-${field.key}`,
+						fg: props.hintFg,
+						dim: true,
+						style: {
+							margin_left: props.labelWidth,
+							margin_bottom: props.gap
+						}
+					}, field.hint));
+				}
+			});
+			return h("box", { style: { flex_direction: "column" } }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Spinner.ts
+/**
+* Spinner frame sets
+*/
+const spinnerTypes = {
+	dots: [
+		"⠋",
+		"⠙",
+		"⠹",
+		"⠸",
+		"⠼",
+		"⠴",
+		"⠦",
+		"⠧",
+		"⠇",
+		"⠏"
+	],
+	dots2: [
+		"⣾",
+		"⣽",
+		"⣻",
+		"⢿",
+		"⡿",
+		"⣟",
+		"⣯",
+		"⣷"
+	],
+	line: [
+		"-",
+		"\\",
+		"|",
+		"/"
+	],
+	arc: [
+		"◜",
+		"◠",
+		"◝",
+		"◞",
+		"◡",
+		"◟"
+	],
+	circle: [
+		"◐",
+		"◓",
+		"◑",
+		"◒"
+	],
+	bounce: [
+		"⠁",
+		"⠂",
+		"⠄",
+		"⡀",
+		"⢀",
+		"⠠",
+		"⠐",
+		"⠈"
+	],
+	box: [
+		"▖",
+		"▘",
+		"▝",
+		"▗"
+	],
+	arrow: [
+		"←",
+		"↖",
+		"↑",
+		"↗",
+		"→",
+		"↘",
+		"↓",
+		"↙"
+	],
+	clock: [
+		"🕛",
+		"🕐",
+		"🕑",
+		"🕒",
+		"🕓",
+		"🕔",
+		"🕕",
+		"🕖",
+		"🕗",
+		"🕘",
+		"🕙",
+		"🕚"
+	],
+	moon: [
+		"🌑",
+		"🌒",
+		"🌓",
+		"🌔",
+		"🌕",
+		"🌖",
+		"🌗",
+		"🌘"
+	],
+	earth: [
+		"🌍",
+		"🌎",
+		"🌏"
+	]
+};
+const Spinner = defineComponent({
+	name: "Spinner",
+	props: {
+		type: {
+			type: String,
+			default: "dots"
+		},
+		frames: Array,
+		interval: {
+			type: Number,
+			default: 80
+		},
+		label: String,
+		fg: String
+	},
+	setup(props) {
+		const frameIndex = ref(0);
+		let timer = null;
+		const frames = props.frames ?? spinnerTypes[props.type] ?? spinnerTypes.dots;
+		onMounted(() => {
+			timer = setInterval(() => {
+				frameIndex.value = (frameIndex.value + 1) % frames.length;
+			}, props.interval);
+		});
+		onUnmounted(() => {
+			if (timer) clearInterval(timer);
+		});
+		return () => {
+			const frame = frames[frameIndex.value];
+			const content = props.label ? `${frame} ${props.label}` : frame;
+			return h(Text, { fg: props.fg }, () => content);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/ProgressBar.ts
+const ProgressBar = defineComponent({
+	name: "ProgressBar",
+	props: {
+		value: {
+			type: Number,
+			required: true,
+			validator: (v) => v >= 0 && v <= 100
+		},
+		width: {
+			type: Number,
+			default: 20
+		},
+		showLabel: {
+			type: Boolean,
+			default: true
+		},
+		labelPosition: {
+			type: String,
+			default: "right"
+		},
+		filledChar: {
+			type: String,
+			default: "█"
+		},
+		emptyChar: {
+			type: String,
+			default: "░"
+		},
+		leftBorder: {
+			type: String,
+			default: ""
+		},
+		rightBorder: {
+			type: String,
+			default: ""
+		},
+		filledFg: {
+			type: String,
+			default: "green"
+		},
+		emptyFg: {
+			type: String,
+			default: "gray"
+		}
+	},
+	setup(props) {
+		const normalizedValue = computed(() => Math.max(0, Math.min(100, props.value)));
+		const filledWidth = computed(() => Math.round(normalizedValue.value / 100 * props.width));
+		const emptyWidth = computed(() => props.width - filledWidth.value);
+		const label = computed(() => `${Math.round(normalizedValue.value)}%`);
+		return () => {
+			const filled = props.filledChar.repeat(filledWidth.value);
+			const empty = props.emptyChar.repeat(emptyWidth.value);
+			const barContent = [
+				props.leftBorder && h(Text, {}, () => props.leftBorder),
+				h(Text, { fg: props.filledFg }, () => filled),
+				h(Text, { fg: props.emptyFg }, () => empty),
+				props.rightBorder && h(Text, {}, () => props.rightBorder)
+			].filter(Boolean);
+			if (!props.showLabel) return h(Box, { flexDirection: "row" }, () => barContent);
+			const labelElement = h(Text, { dim: true }, () => label.value);
+			switch (props.labelPosition) {
+				case "left": return h(Box, {
+					flexDirection: "row",
+					gap: 1
+				}, () => [labelElement, ...barContent]);
+				case "inside": return h(Box, {
+					flexDirection: "row",
+					gap: 1
+				}, () => [...barContent, labelElement]);
+				case "right":
+				default: return h(Box, {
+					flexDirection: "row",
+					gap: 1
+				}, () => [...barContent, labelElement]);
+			}
+		};
+	}
+});
+/**
+* Indeterminate progress bar (animated)
+*/
+const IndeterminateProgressBar = defineComponent({
+	name: "IndeterminateProgressBar",
+	props: {
+		width: {
+			type: Number,
+			default: 20
+		},
+		fg: {
+			type: String,
+			default: "cyan"
+		}
+	},
+	setup(props) {
+		return () => {
+			const pattern = "▓▒░░░░░░░░░░░░░░░░░░";
+			const display = pattern.slice(0, props.width);
+			return h(Text, { fg: props.fg }, () => display);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Alert.ts
+const ALERT_CONFIG = {
+	info: {
+		icon: "ℹ",
+		fg: "cyan",
+		title: "Info"
+	},
+	success: {
+		icon: "✓",
+		fg: "green",
+		title: "Success"
+	},
+	warning: {
+		icon: "⚠",
+		fg: "yellow",
+		title: "Warning"
+	},
+	error: {
+		icon: "✗",
+		fg: "red",
+		title: "Error"
+	}
+};
+const Alert = defineComponent({
+	name: "Alert",
+	props: {
+		message: {
+			type: String,
+			required: true
+		},
+		type: {
+			type: String,
+			default: "info"
+		},
+		title: String,
+		showIcon: {
+			type: Boolean,
+			default: true
+		},
+		border: {
+			type: String,
+			default: "rounded"
+		}
+	},
+	setup(props) {
+		return () => {
+			const config = ALERT_CONFIG[props.type];
+			const title = props.title ?? config.title;
+			const children = [];
+			const headerParts = [];
+			if (props.showIcon) headerParts.push(h("text", { fg: config.fg }, `${config.icon} `));
+			headerParts.push(h("text", {
+				fg: config.fg,
+				bold: true
+			}, title));
+			children.push(h("box", {
+				key: "header",
+				style: { flex_direction: "row" }
+			}, headerParts));
+			children.push(h("text", {
+				key: "message",
+				style: { margin_top: 1 }
+			}, props.message));
+			return h("box", {
+				border: props.border === "none" ? void 0 : props.border,
+				fg: config.fg,
+				style: {
+					flex_direction: "column",
+					padding: 1
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Badge.ts
+const VARIANT_COLORS = {
+	default: { fg: "white" },
+	success: { fg: "green" },
+	warning: { fg: "yellow" },
+	error: { fg: "red" },
+	info: { fg: "cyan" }
+};
+const Badge = defineComponent({
+	name: "Badge",
+	props: {
+		label: {
+			type: String,
+			required: true
+		},
+		variant: {
+			type: String,
+			default: "default"
+		},
+		fg: String,
+		bg: String,
+		border: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props) {
+		return () => {
+			const colors = VARIANT_COLORS[props.variant];
+			const fg = props.fg ?? colors.fg;
+			const bg = props.bg ?? colors.bg;
+			if (props.border) return h("box", {
+				border: "single",
+				fg,
+				bg,
+				style: {
+					padding_left: 1,
+					padding_right: 1
+				}
+			}, [h("text", {
+				fg,
+				bg
+			}, props.label)]);
+			return h("text", {
+				fg,
+				bg,
+				bold: true
+			}, `[${props.label}]`);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Timer.ts
+const Timer = defineComponent({
+	name: "Timer",
+	props: {
+		mode: {
+			type: String,
+			default: "stopwatch"
+		},
+		initialSeconds: {
+			type: Number,
+			default: 0
+		},
+		autoStart: {
+			type: Boolean,
+			default: true
+		},
+		showHours: {
+			type: Boolean,
+			default: false
+		},
+		showMilliseconds: {
+			type: Boolean,
+			default: false
+		},
+		fg: {
+			type: String,
+			default: "white"
+		},
+		warningFg: {
+			type: String,
+			default: "yellow"
+		},
+		dangerFg: {
+			type: String,
+			default: "red"
+		}
+	},
+	emits: ["tick", "complete"],
+	setup(props, { emit, expose }) {
+		const elapsed = ref(0);
+		const isRunning = ref(false);
+		let intervalId = null;
+		const totalMs = computed(() => {
+			if (props.mode === "countdown") return Math.max(0, props.initialSeconds * 1e3 - elapsed.value);
+			return elapsed.value;
+		});
+		const formatted = computed(() => {
+			const ms = totalMs.value;
+			const totalSeconds = Math.floor(ms / 1e3);
+			const hours = Math.floor(totalSeconds / 3600);
+			const minutes = Math.floor(totalSeconds % 3600 / 60);
+			const seconds = totalSeconds % 60;
+			const milliseconds = Math.floor(ms % 1e3 / 10);
+			let result = "";
+			if (props.showHours || hours > 0) result += `${String(hours).padStart(2, "0")}:`;
+			result += `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+			if (props.showMilliseconds) result += `.${String(milliseconds).padStart(2, "0")}`;
+			return result;
+		});
+		const color = computed(() => {
+			if (props.mode === "countdown") {
+				const seconds = totalMs.value / 1e3;
+				if (seconds <= 5) return props.dangerFg;
+				if (seconds <= 10) return props.warningFg;
+			}
+			return props.fg;
+		});
+		const start = () => {
+			if (isRunning.value) return;
+			isRunning.value = true;
+			intervalId = setInterval(() => {
+				elapsed.value += 100;
+				emit("tick", totalMs.value);
+				if (props.mode === "countdown" && totalMs.value <= 0) {
+					stop();
+					emit("complete");
+				}
+			}, 100);
+		};
+		const stop = () => {
+			isRunning.value = false;
+			if (intervalId) {
+				clearInterval(intervalId);
+				intervalId = null;
+			}
+		};
+		const reset = () => {
+			elapsed.value = 0;
+		};
+		const toggle = () => {
+			if (isRunning.value) stop();
+			else start();
+		};
+		expose({
+			start,
+			stop,
+			reset,
+			toggle,
+			isRunning
+		});
+		onMounted(() => {
+			if (props.autoStart) start();
+		});
+		onUnmounted(() => {
+			stop();
+		});
+		return () => {
+			return h("text", {
+				fg: color.value,
+				bold: true
+			}, formatted.value);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Tooltip.ts
+const Tooltip = defineComponent({
+	name: "Tooltip",
+	props: {
+		text: {
+			type: String,
+			required: true
+		},
+		visible: {
+			type: Boolean,
+			default: true
+		},
+		position: {
+			type: String,
+			default: "top"
+		},
+		border: {
+			type: String,
+			default: "rounded"
+		},
+		bg: {
+			type: String,
+			default: "white"
+		},
+		fg: {
+			type: String,
+			default: "black"
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const content = slots.default?.();
+			if (!props.visible) return h("box", {}, content);
+			const tooltip = h("box", {
+				key: "tooltip",
+				border: props.border === "none" ? void 0 : props.border,
+				bg: props.bg,
+				fg: props.fg,
+				style: {
+					padding_left: 1,
+					padding_right: 1
+				}
+			}, [h("text", {
+				fg: props.fg,
+				bg: props.bg
+			}, props.text)]);
+			const children = [];
+			switch (props.position) {
+				case "top":
+					children.push(tooltip);
+					children.push(h("box", { key: "content" }, content));
+					break;
+				case "bottom":
+					children.push(h("box", { key: "content" }, content));
+					children.push(tooltip);
+					break;
+				case "left": return h("box", { style: { flex_direction: "row" } }, [tooltip, h("box", { key: "content" }, content)]);
+				case "right": return h("box", { style: { flex_direction: "row" } }, [h("box", { key: "content" }, content), tooltip]);
+			}
+			return h("box", { style: { flex_direction: "column" } }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/List.ts
+const List = defineComponent({
+	name: "List",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		modelValue: String,
+		maxHeight: Number,
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		indicator: {
+			type: String,
+			default: "> "
+		},
+		indicatorEmpty: {
+			type: String,
+			default: "  "
+		},
+		fg: String,
+		selectedFg: {
+			type: String,
+			default: "cyan"
+		},
+		selectedBg: String
+	},
+	emits: ["update:modelValue", "select"],
+	setup(props, { emit: _emit }) {
+		const scrollOffset = ref(0);
+		const highlightedIndex = ref(0);
+		const visibleItems = computed(() => {
+			if (!props.maxHeight) return props.items;
+			const start = scrollOffset.value;
+			const end = start + props.maxHeight;
+			return props.items.slice(start, end);
+		});
+		const scrollIndicator = computed(() => {
+			if (!props.maxHeight || props.items.length <= props.maxHeight) return {
+				showUp: false,
+				showDown: false
+			};
+			return {
+				showUp: scrollOffset.value > 0,
+				showDown: scrollOffset.value + props.maxHeight < props.items.length
+			};
+		});
+		return () => {
+			const children = [];
+			if (scrollIndicator.value.showUp) children.push(h("text", {
+				key: "scroll-up",
+				dim: true
+			}, "  ..."));
+			visibleItems.value.forEach((item, visibleIndex) => {
+				const actualIndex = scrollOffset.value + visibleIndex;
+				const isHighlighted = actualIndex === highlightedIndex.value;
+				const isSelected = item.key === props.modelValue;
+				const indicator = isHighlighted ? props.indicator : props.indicatorEmpty;
+				children.push(h("text", {
+					key: item.key,
+					fg: isHighlighted ? props.selectedFg : props.fg,
+					bg: isHighlighted ? props.selectedBg : void 0,
+					dim: item.disabled,
+					bold: isSelected
+				}, `${indicator}${item.label}`));
+			});
+			if (scrollIndicator.value.showDown) children.push(h("text", {
+				key: "scroll-down",
+				dim: true
+			}, "  ..."));
+			return h("box", {
+				style: { flex_direction: "column" },
+				fg: props.fg
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Table.ts
+const Table = defineComponent({
+	name: "Table",
+	props: {
+		columns: {
+			type: Array,
+			required: true
+		},
+		data: {
+			type: Array,
+			required: true
+		},
+		showHeader: {
+			type: Boolean,
+			default: true
+		},
+		border: {
+			type: String,
+			default: "single"
+		},
+		headerFg: {
+			type: String,
+			default: "white"
+		},
+		headerBg: String,
+		rowFg: String,
+		stripedBg: String,
+		cellPadding: {
+			type: Number,
+			default: 1
+		}
+	},
+	setup(props) {
+		const formatCell = (value, width) => {
+			const str = typeof value === "string" || typeof value === "number" || typeof value === "boolean" ? String(value) : value == null ? "" : JSON.stringify(value);
+			if (typeof width === "number" && str.length < width) return str.padEnd(width);
+			return str;
+		};
+		return () => {
+			const rows = [];
+			if (props.showHeader) {
+				const headerCells = props.columns.map((col) => h("text", {
+					key: col.key,
+					bold: true,
+					fg: props.headerFg,
+					bg: props.headerBg
+				}, formatCell(col.header, col.width)));
+				rows.push(h("box", {
+					key: "header",
+					style: {
+						flex_direction: "row",
+						gap: props.cellPadding
+					}
+				}, headerCells));
+				if (props.border !== "none") {
+					const sepChar = props.border === "double" ? "=" : "-";
+					const totalWidth = props.columns.reduce((acc, col) => {
+						const w = typeof col.width === "number" ? col.width : 10;
+						return acc + w + (props.cellPadding ?? 1);
+					}, 0);
+					rows.push(h("text", {
+						key: "separator",
+						dim: true
+					}, sepChar.repeat(totalWidth)));
+				}
+			}
+			props.data.forEach((row, rowIndex) => {
+				const cells = props.columns.map((col) => h("text", {
+					key: col.key,
+					fg: props.rowFg,
+					bg: rowIndex % 2 === 1 ? props.stripedBg : void 0
+				}, formatCell(row[col.key], col.width)));
+				rows.push(h("box", {
+					key: `row-${rowIndex}`,
+					style: {
+						flex_direction: "row",
+						gap: props.cellPadding
+					}
+				}, cells));
+			});
+			return h("box", {
+				style: { flex_direction: "column" },
+				border: props.border
+			}, rows);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Tree.ts
+const Tree = defineComponent({
+	name: "Tree",
+	props: {
+		data: {
+			type: Array,
+			required: true
+		},
+		expanded: {
+			type: Array,
+			default: () => []
+		},
+		selected: String,
+		showLines: {
+			type: Boolean,
+			default: true
+		},
+		indent: {
+			type: Number,
+			default: 2
+		},
+		expandedIcon: {
+			type: String,
+			default: "▼"
+		},
+		collapsedIcon: {
+			type: String,
+			default: "▶"
+		},
+		leafIcon: {
+			type: String,
+			default: "•"
+		},
+		fg: String,
+		selectedFg: {
+			type: String,
+			default: "cyan"
+		}
+	},
+	emits: ["select", "toggle"],
+	setup(props, { emit: _emit }) {
+		const renderNode = (node, depth, isLast, prefix) => {
+			const nodes = [];
+			const hasChildren = node.children && node.children.length > 0;
+			const isExpanded = props.expanded?.includes(node.key);
+			const isSelected = node.key === props.selected;
+			let linePrefix = prefix;
+			if (props.showLines && depth > 0) linePrefix += isLast ? "└─" : "├─";
+			let icon = props.leafIcon;
+			if (hasChildren) icon = isExpanded ? props.expandedIcon : props.collapsedIcon;
+			if (node.icon) icon = node.icon;
+			nodes.push(h("text", {
+				key: node.key,
+				fg: isSelected ? props.selectedFg : props.fg,
+				bold: isSelected,
+				dim: node.disabled
+			}, `${linePrefix}${icon} ${node.label}`));
+			if (hasChildren && isExpanded) {
+				const childPrefix = prefix + (props.showLines && depth > 0 ? isLast ? "  " : "│ " : "");
+				node.children.forEach((child, index) => {
+					const childIsLast = index === node.children.length - 1;
+					nodes.push(...renderNode(child, depth + 1, childIsLast, childPrefix + " ".repeat(props.indent)));
+				});
+			}
+			return nodes;
+		};
+		return () => {
+			const children = [];
+			props.data.forEach((node, index) => {
+				const isLast = index === props.data.length - 1;
+				children.push(...renderNode(node, 0, isLast, ""));
+			});
+			return h("box", { style: { flex_direction: "column" } }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Menu.ts
+const Menu = defineComponent({
+	name: "Menu",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		focusedIndex: {
+			type: Number,
+			default: 0
+		},
+		border: {
+			type: String,
+			default: "single"
+		},
+		width: Number,
+		fg: String,
+		focusedFg: {
+			type: String,
+			default: "black"
+		},
+		focusedBg: {
+			type: String,
+			default: "cyan"
+		},
+		shortcutFg: {
+			type: String,
+			default: "gray"
+		}
+	},
+	emits: ["select"],
+	setup(props, { emit: _emit }) {
+		return () => {
+			const children = [];
+			props.items.forEach((item, index) => {
+				if (item.separator) {
+					children.push(h("text", {
+						key: `sep-${index}`,
+						dim: true
+					}, "─".repeat(props.width ?? 20)));
+					return;
+				}
+				const isFocused = index === props.focusedIndex;
+				const itemContent = [];
+				if (item.icon) itemContent.push(h("text", { key: "icon" }, `${item.icon} `));
+				itemContent.push(h("text", {
+					key: "label",
+					fg: isFocused ? props.focusedFg : props.fg,
+					bg: isFocused ? props.focusedBg : void 0,
+					dim: item.disabled,
+					style: { flex_grow: 1 }
+				}, item.label));
+				if (item.shortcut) itemContent.push(h("text", {
+					key: "shortcut",
+					fg: props.shortcutFg,
+					dim: true
+				}, `  ${item.shortcut}`));
+				children.push(h("box", {
+					key: item.key,
+					style: {
+						flex_direction: "row",
+						padding_left: 1,
+						padding_right: 1
+					},
+					bg: isFocused ? props.focusedBg : void 0
+				}, itemContent));
+			});
+			return h("box", {
+				border: props.border === "none" ? void 0 : props.border,
+				style: {
+					flex_direction: "column",
+					width: props.width ? String(props.width) : void 0
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Tabs.ts
+const Tabs = defineComponent({
+	name: "Tabs",
+	props: {
+		tabs: {
+			type: Array,
+			required: true
+		},
+		modelValue: String,
+		position: {
+			type: String,
+			default: "top"
+		},
+		separator: {
+			type: String,
+			default: " | "
+		},
+		activeFg: {
+			type: String,
+			default: "cyan"
+		},
+		activeBg: String,
+		inactiveFg: String,
+		underline: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: ["update:modelValue", "change"],
+	setup(props, { slots, emit: _emit }) {
+		return () => {
+			const tabItems = [];
+			props.tabs.forEach((tab, index) => {
+				if (index > 0) tabItems.push(h("text", {
+					key: `sep-${index}`,
+					dim: true
+				}, props.separator));
+				const isActive = tab.key === props.modelValue;
+				tabItems.push(h("text", {
+					key: tab.key,
+					fg: isActive ? props.activeFg : props.inactiveFg,
+					bg: isActive ? props.activeBg : void 0,
+					bold: isActive,
+					underline: isActive && props.underline,
+					dim: tab.disabled
+				}, tab.label));
+			});
+			const tabBar = h("box", {
+				key: "tab-bar",
+				style: {
+					flex_direction: "row",
+					padding_bottom: props.position === "top" ? 1 : 0,
+					padding_top: props.position === "bottom" ? 1 : 0
+				}
+			}, tabItems);
+			const content = h("box", {
+				key: "content",
+				style: { flex_grow: 1 }
+			}, slots.default?.());
+			const children = props.position === "top" ? [tabBar, content] : [content, tabBar];
+			return h("box", { style: {
+				flex_direction: "column",
+				flex_grow: 1
+			} }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Breadcrumb.ts
+const Breadcrumb = defineComponent({
+	name: "Breadcrumb",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		separator: {
+			type: String,
+			default: " > "
+		},
+		fg: {
+			type: String,
+			default: "gray"
+		},
+		activeFg: {
+			type: String,
+			default: "white"
+		},
+		separatorFg: {
+			type: String,
+			default: "gray"
+		}
+	},
+	emits: ["select"],
+	setup(props, { emit: _emit }) {
+		return () => {
+			const children = props.items.flatMap((item, index) => {
+				const isLast = index === props.items.length - 1;
+				const result = [];
+				if (item.icon) result.push(h("text", {
+					key: `icon-${item.key}`,
+					fg: isLast ? props.activeFg : props.fg
+				}, `${item.icon} `));
+				result.push(h("text", {
+					key: item.key,
+					fg: isLast ? props.activeFg : props.fg,
+					bold: isLast,
+					underline: !isLast
+				}, item.label));
+				if (!isLast) result.push(h("text", {
+					key: `sep-${item.key}`,
+					fg: props.separatorFg
+				}, props.separator));
+				return result;
+			});
+			return h("box", { style: { flex_direction: "row" } }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Stepper.ts
+const Stepper = defineComponent({
+	name: "Stepper",
+	props: {
+		steps: {
+			type: Array,
+			required: true
+		},
+		current: {
+			type: Number,
+			default: 0
+		},
+		completed: {
+			type: Array,
+			default: () => []
+		},
+		errors: {
+			type: Array,
+			default: () => []
+		},
+		direction: {
+			type: String,
+			default: "horizontal"
+		},
+		showNumbers: {
+			type: Boolean,
+			default: true
+		},
+		completedIcon: {
+			type: String,
+			default: "✓"
+		},
+		errorIcon: {
+			type: String,
+			default: "✗"
+		},
+		currentIcon: {
+			type: String,
+			default: "●"
+		},
+		pendingIcon: {
+			type: String,
+			default: "○"
+		}
+	},
+	setup(props) {
+		const getStatus = (index) => {
+			if (props.errors?.includes(index)) return "error";
+			if (props.completed?.includes(index)) return "completed";
+			if (index === props.current) return "current";
+			return "pending";
+		};
+		const getIcon = (index, status) => {
+			if (props.showNumbers && status === "pending") return String(index + 1);
+			switch (status) {
+				case "completed": return props.completedIcon;
+				case "error": return props.errorIcon;
+				case "current": return props.currentIcon;
+				default: return props.pendingIcon;
+			}
+		};
+		const getColor = (status) => {
+			switch (status) {
+				case "completed": return "green";
+				case "error": return "red";
+				case "current": return "cyan";
+				default: return "gray";
+			}
+		};
+		return () => {
+			const isHorizontal = props.direction === "horizontal";
+			const connector = isHorizontal ? "───" : "│";
+			const children = props.steps.flatMap((step, index) => {
+				const status = getStatus(index);
+				const icon = getIcon(index, status);
+				const color = getColor(status);
+				const isLast = index === props.steps.length - 1;
+				const stepContent = [h("box", {
+					key: `step-${step.key}`,
+					style: {
+						flex_direction: isHorizontal ? "column" : "row",
+						align_items: "center"
+					}
+				}, [h("text", {
+					fg: color,
+					bold: status === "current"
+				}, `[${icon}]`), h("text", {
+					fg: status === "current" ? "white" : "gray",
+					bold: status === "current",
+					style: isHorizontal ? { margin_top: .5 } : { margin_left: 1 }
+				}, step.label)])];
+				if (!isLast) stepContent.push(h("text", {
+					key: `connector-${index}`,
+					dim: true,
+					style: isHorizontal ? {
+						margin_left: 1,
+						margin_right: 1
+					} : {
+						margin_top: .5,
+						margin_bottom: .5,
+						margin_left: 1
+					}
+				}, connector));
+				return stepContent;
+			});
+			return h("box", { style: {
+				flex_direction: isHorizontal ? "row" : "column",
+				align_items: isHorizontal ? "flex-start" : "stretch"
+			} }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Modal.ts
+const Modal = defineComponent({
+	name: "Modal",
+	props: {
+		visible: {
+			type: Boolean,
+			default: true
+		},
+		title: String,
+		width: {
+			type: [Number, String],
+			default: "50%"
+		},
+		height: {
+			type: [Number, String],
+			default: "auto"
+		},
+		border: {
+			type: String,
+			default: "rounded"
+		},
+		titleFg: {
+			type: String,
+			default: "white"
+		},
+		borderFg: String,
+		bg: String
+	},
+	emits: ["close"],
+	setup(props, { slots, emit: _emit }) {
+		return () => {
+			if (!props.visible) return null;
+			const children = [];
+			if (props.title) children.push(h("box", {
+				key: "title",
+				style: {
+					flex_direction: "row",
+					justify_content: "center",
+					padding_bottom: 1
+				}
+			}, [h("text", {
+				bold: true,
+				fg: props.titleFg
+			}, props.title)]));
+			children.push(h("box", {
+				key: "content",
+				style: { flex_grow: 1 }
+			}, slots.default?.()));
+			return h("box", { style: {
+				justify_content: "center",
+				align_items: "center",
+				width: "100%",
+				height: "100%"
+			} }, [h("box", {
+				style: {
+					flex_direction: "column",
+					width: String(props.width),
+					height: String(props.height),
+					padding: 1
+				},
+				border: props.border,
+				fg: props.borderFg,
+				bg: props.bg
+			}, children)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/StatusBar.ts
+const StatusBar = defineComponent({
+	name: "StatusBar",
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		bg: {
+			type: String,
+			default: "blue"
+		},
+		fg: {
+			type: String,
+			default: "white"
+		},
+		separator: {
+			type: String,
+			default: " │ "
+		}
+	},
+	setup(props) {
+		return () => {
+			const leftItems = props.items.filter((item) => item.align !== "right");
+			const rightItems = props.items.filter((item) => item.align === "right");
+			const renderItems = (items) => {
+				const result = [];
+				items.forEach((item, index) => {
+					if (index > 0) result.push(h("text", {
+						key: `sep-${item.key}`,
+						fg: props.fg,
+						bg: props.bg,
+						dim: true
+					}, props.separator));
+					result.push(h("text", {
+						key: item.key,
+						fg: item.fg ?? props.fg,
+						bg: item.bg ?? props.bg,
+						bold: item.bold
+					}, item.content));
+				});
+				return result;
+			};
+			return h("box", {
+				bg: props.bg,
+				style: {
+					flex_direction: "row",
+					justify_content: "space-between",
+					width: "100%",
+					padding_left: 1,
+					padding_right: 1
+				}
+			}, [h("box", {
+				key: "left",
+				style: { flex_direction: "row" }
+			}, renderItems(leftItems)), h("box", {
+				key: "right",
+				style: { flex_direction: "row" }
+			}, renderItems(rightItems))]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Header.ts
+const Header = defineComponent({
+	name: "Header",
+	props: {
+		title: {
+			type: String,
+			required: true
+		},
+		subtitle: String,
+		left: String,
+		right: String,
+		bg: String,
+		titleFg: {
+			type: String,
+			default: "white"
+		},
+		subtitleFg: {
+			type: String,
+			default: "gray"
+		},
+		borderBottom: {
+			type: Boolean,
+			default: false
+		}
+	},
+	setup(props, { slots }) {
+		return () => {
+			const leftContent = slots.left?.() ?? (props.left ? [h("text", {}, props.left)] : []);
+			const rightContent = slots.right?.() ?? (props.right ? [h("text", {}, props.right)] : []);
+			const centerContent = [h("text", {
+				fg: props.titleFg,
+				bold: true
+			}, props.title)];
+			if (props.subtitle) centerContent.push(h("text", {
+				fg: props.subtitleFg,
+				dim: true
+			}, ` - ${props.subtitle}`));
+			const children = [h("box", {
+				key: "header-content",
+				bg: props.bg,
+				style: {
+					flex_direction: "row",
+					justify_content: "space-between",
+					align_items: "center",
+					width: "100%",
+					padding: 1
+				}
+			}, [
+				h("box", {
+					key: "left",
+					style: { flex_direction: "row" }
+				}, leftContent),
+				h("box", {
+					key: "center",
+					style: { flex_direction: "row" }
+				}, centerContent),
+				h("box", {
+					key: "right",
+					style: { flex_direction: "row" }
+				}, rightContent)
+			])];
+			if (props.borderBottom) children.push(h("text", {
+				key: "border",
+				dim: true
+			}, "─".repeat(80)));
+			return h("box", { style: { flex_direction: "column" } }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/KeyHint.ts
+const KeyHint = defineComponent({
+	name: "KeyHint",
+	props: {
+		bindings: {
+			type: Array,
+			required: true
+		},
+		direction: {
+			type: String,
+			default: "horizontal"
+		},
+		keyFg: {
+			type: String,
+			default: "black"
+		},
+		keyBg: {
+			type: String,
+			default: "white"
+		},
+		descFg: {
+			type: String,
+			default: "gray"
+		},
+		separator: {
+			type: String,
+			default: " "
+		}
+	},
+	setup(props) {
+		return () => {
+			const children = props.bindings.map((binding, index) => {
+				const keyParts = binding.keys.map((key, keyIndex) => [h("text", {
+					key: `key-${keyIndex}`,
+					fg: props.keyFg,
+					bg: props.keyBg,
+					bold: true
+				}, ` ${key} `), keyIndex < binding.keys.length - 1 ? h("text", { key: `plus-${keyIndex}` }, "+") : null]).flat().filter(Boolean);
+				return h("box", {
+					key: `binding-${index}`,
+					style: {
+						flex_direction: "row",
+						margin_right: props.direction === "horizontal" ? 2 : 0
+					}
+				}, [
+					...keyParts,
+					h("text", {}, props.separator),
+					h("text", { fg: props.descFg }, binding.description)
+				]);
+			});
+			return h("box", { style: {
+				flex_direction: props.direction === "horizontal" ? "row" : "column",
+				flex_wrap: "wrap"
+			} }, children);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/Avatar.ts
+const STATUS_COLORS = {
+	online: "green",
+	offline: "gray",
+	away: "yellow",
+	busy: "red"
+};
+const STATUS_ICONS = {
+	online: "●",
+	offline: "○",
+	away: "◐",
+	busy: "⊘"
+};
+const Avatar = defineComponent({
+	name: "Avatar",
+	props: {
+		name: String,
+		initials: String,
+		size: {
+			type: String,
+			default: "md"
+		},
+		bg: {
+			type: String,
+			default: "blue"
+		},
+		fg: {
+			type: String,
+			default: "white"
+		},
+		border: {
+			type: Boolean,
+			default: true
+		},
+		status: { type: String }
+	},
+	setup(props) {
+		return () => {
+			let displayInitials = props.initials;
+			if (!displayInitials && props.name) {
+				const parts = props.name.split(" ").filter(Boolean);
+				if (parts.length >= 2) displayInitials = `${parts[0][0]}${parts[1][0]}`.toUpperCase();
+				else if (parts.length === 1) displayInitials = parts[0].slice(0, 2).toUpperCase();
+			}
+			displayInitials = displayInitials || "??";
+			const padding = props.size === "sm" ? 0 : props.size === "lg" ? 1 : 0;
+			const children = [h("text", {
+				fg: props.fg,
+				bg: props.bg,
+				bold: true
+			}, displayInitials)];
+			if (props.status) children.push(h("text", { fg: STATUS_COLORS[props.status] }, STATUS_ICONS[props.status]));
+			if (props.border) return h("box", {
+				border: "rounded",
+				bg: props.bg,
+				style: {
+					flex_direction: "row",
+					padding_left: padding,
+					padding_right: padding
+				}
+			}, children);
+			return h("box", {
+				bg: props.bg,
+				style: {
+					flex_direction: "row",
+					padding_left: padding,
+					padding_right: padding
+				}
+			}, children);
+		};
+	}
+});
+
+//#endregion
+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 };
+//# sourceMappingURL=components-DtI-O8Cr.js.map