@vizejs/fresco 0.48.0 → 0.57.0

package/dist/components-B5VXjX9s.mjs

@@ -1,2562 +0,0 @@
-import { t as useInput } from "./useInput-CbggNZUF.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 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
-/**
-* Divider Component - Horizontal or vertical divider line
-*/
-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
-/**
-* Stack Component - Horizontal/Vertical stack layout helper
-*/
-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
-/**
-* Grid Component - Grid layout helper
-*/
-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
-/**
-* Card Component - Container card with optional header and footer
-*/
-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
-/**
-* Text Component - Text display
-*/
-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 () => {
-			return h("text", {
-				text: props.content ?? slots.default?.()?.map((vnode) => {
-					if (typeof vnode.children === "string") return vnode.children;
-					return "";
-				}).join("") ?? "",
-				wrap: props.wrap,
-				fg: props.fg,
-				bg: props.bg,
-				bold: props.bold,
-				dim: props.dim,
-				italic: props.italic,
-				underline: props.underline,
-				strikethrough: props.strikethrough
-			});
-		};
-	}
-});
-defineComponent({
-	name: "ErrorText",
-	props: { content: String },
-	setup(props, { slots }) {
-		return () => h(Text, {
-			fg: "red",
-			...props
-		}, slots);
-	}
-});
-defineComponent({
-	name: "WarningText",
-	props: { content: String },
-	setup(props, { slots }) {
-		return () => h(Text, {
-			fg: "yellow",
-			...props
-		}, slots);
-	}
-});
-defineComponent({
-	name: "SuccessText",
-	props: { content: String },
-	setup(props, { slots }) {
-		return () => h(Text, {
-			fg: "green",
-			...props
-		}, slots);
-	}
-});
-defineComponent({
-	name: "InfoText",
-	props: { content: String },
-	setup(props, { slots }) {
-		return () => h(Text, {
-			fg: "blue",
-			...props
-		}, slots);
-	}
-});
-defineComponent({
-	name: "MutedText",
-	props: { content: String },
-	setup(props, { slots }) {
-		return () => h(Text, {
-			dim: true,
-			...props
-		}, slots);
-	}
-});
-//#endregion
-//#region src/components/Code.ts
-/**
-* Code Component - Code block display
-*/
-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
-/**
-* Link Component - Clickable/styled link
-*/
-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
-/**
-* TextInput Component - Text input with builtin cursor management and IME support
-*/
-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) {
-				updateValue(internalValue.value.slice(0, cursorPos.value - 1) + internalValue.value.slice(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));
-		};
-		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;
-		};
-		useInput({
-			isActive: computed(() => props.focus),
-			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
-			});
-		};
-	}
-});
-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
-/**
-* TextArea Component - Multiline text input
-*/
-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 textLines = (props.modelValue || "").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
-/**
-* Select Component - Dropdown/menu selection
-*/
-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
-/**
-* Checkbox Component - Toggle checkbox
-*/
-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;
-			return h("box", { style: { flex_direction: "row" } }, [h("text", {
-				fg: props.modelValue ? props.checkedFg : props.fg,
-				dim: props.disabled,
-				bold: props.focused
-			}, `${indicator} ${props.label ?? ""}`)]);
-		};
-	}
-});
-//#endregion
-//#region src/components/RadioGroup.ts
-/**
-* RadioGroup Component - Radio button group selection
-*/
-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
-/**
-* Confirm Component - Confirmation dialog
-*/
-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
-/**
-* Form Component - Form container with labels
-*/
-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 Component - Loading indicator
-*/
-/**
-* 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
-/**
-* ProgressBar Component - Progress indicator
-*/
-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]);
-				default: return h(Box, {
-					flexDirection: "row",
-					gap: 1
-				}, () => [...barContent, labelElement]);
-			}
-		};
-	}
-});
-defineComponent({
-	name: "IndeterminateProgressBar",
-	props: {
-		width: {
-			type: Number,
-			default: 20
-		},
-		fg: {
-			type: String,
-			default: "cyan"
-		}
-	},
-	setup(props) {
-		return () => {
-			const display = "▓▒░░░░░░░░░░░░░░░░░░".slice(0, props.width);
-			return h(Text, { fg: props.fg }, () => display);
-		};
-	}
-});
-//#endregion
-//#region src/components/Alert.ts
-/**
-* Alert Component - Alert/notification box
-*/
-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
-/**
-* Badge Component - Status badge/tag
-*/
-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
-/**
-* Timer Component - Countdown/stopwatch timer
-*/
-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
-/**
-* Tooltip Component - Tooltip overlay
-*/
-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
-/**
-* List Component - Scrollable list of items
-*/
-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 isHighlighted = scrollOffset.value + visibleIndex === 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
-/**
-* Table Component - Display tabular data
-*/
-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) => {
-						return acc + (typeof col.width === "number" ? col.width : 10) + (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
-/**
-* Tree Component - Tree view for hierarchical data
-*/
-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
-/**
-* Menu Component - Command menu/palette
-*/
-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
-/**
-* Tabs Component - Tab navigation
-*/
-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?.());
-			return h("box", { style: {
-				flex_direction: "column",
-				flex_grow: 1
-			} }, props.position === "top" ? [tabBar, content] : [content, tabBar]);
-		};
-	}
-});
-//#endregion
-//#region src/components/Breadcrumb.ts
-/**
-* Breadcrumb Component - Navigation breadcrumb
-*/
-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 () => {
-			return h("box", { style: { flex_direction: "row" } }, 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;
-			}));
-		};
-	}
-});
-//#endregion
-//#region src/components/Stepper.ts
-/**
-* Stepper Component - Step indicator for wizards
-*/
-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
-/**
-* Modal Component - Overlay dialog
-*/
-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
-/**
-* StatusBar Component - Status bar (typically at bottom of screen)
-*/
-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
-/**
-* Header Component - Application header
-*/
-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
-/**
-* KeyHint Component - Display keyboard shortcut hints
-*/
-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
-/**
-* Avatar Component - User avatar display
-*/
-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 { 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 };
-
-//# sourceMappingURL=components-B5VXjX9s.mjs.map