@vui-rs/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,1174 @@
+import { computed, defineComponent, h, inject, onUnmounted, provide, reactive, ref, shallowRef, watch } from "@vue/runtime-core";
+import { HostContextSymbol, SPINNER_PRESETS, VuiInput, VuiScrollBar, VuiScrollBox, VuiSpinner, VuiSpinner as VuiSpinner$1, useTheme, useTimeline } from "@vui-rs/vue";
+//#region src/fuzzy.ts
+const BONUS_CONSECUTIVE = 8;
+const BONUS_WORD_START = 10;
+const BONUS_LEADING = 6;
+const PENALTY_GAP = 1;
+function isBoundary(ch) {
+	return ch === " " || ch === "-" || ch === "_" || ch === "/" || ch === "." || ch === ":";
+}
+/**
+* Greedy left-to-right subsequence match. Returns `null` when `query` is not a
+* subsequence of `text`. An empty query matches everything with score 0 (so an
+* empty search box shows the full list in its original order).
+*/
+function fuzzyMatch(query, text) {
+	if (query.length === 0) return {
+		score: 0,
+		indices: []
+	};
+	const q = query.toLowerCase();
+	const t = text.toLowerCase();
+	const indices = [];
+	let score = 0;
+	let qi = 0;
+	let prevMatch = -2;
+	for (let ti = 0; ti < t.length && qi < q.length; ti++) {
+		if (t[ti] !== q[qi]) continue;
+		indices.push(ti);
+		if (ti === prevMatch + 1) score += BONUS_CONSECUTIVE;
+		if (ti === 0 || isBoundary(t[ti - 1])) score += BONUS_WORD_START;
+		if (ti < 4) score += BONUS_LEADING - ti;
+		score += 1;
+		prevMatch = ti;
+		qi++;
+	}
+	if (qi < q.length) return null;
+	const span = indices.length > 0 ? indices[indices.length - 1] - indices[0] : 0;
+	score -= Math.max(0, span - indices.length) * PENALTY_GAP;
+	return {
+		score,
+		indices
+	};
+}
+/**
+* Filter + rank `items` against `query` by the text `key` returns for each item.
+* Non-matches are dropped; the rest come back best-score first. Ties keep the
+* original order (the sort is stable), so an empty query is an identity filter.
+*/
+function fuzzyFilter(query, items, key) {
+	const out = [];
+	for (const item of items) {
+		const m = fuzzyMatch(query, key(item));
+		if (m) out.push({
+			item,
+			score: m.score,
+			indices: m.indices
+		});
+	}
+	out.sort((a, b) => b.score - a.score);
+	return out;
+}
+//#endregion
+//#region src/use-focus-trap.ts
+/**
+* Capture/restore focus around a modal's open state. Pass a reactive getter for
+* whether the modal is open; when it flips false (or the component unmounts) the
+* previously focused node is re-focused.
+*/
+function useFocusTrap(isOpen) {
+	const ctx = inject(HostContextSymbol, null);
+	let previouslyFocused = null;
+	function restore() {
+		const fm = ctx?.focusManager;
+		if (fm) if (previouslyFocused) fm.focus(previouslyFocused);
+		else fm.blur();
+		previouslyFocused = null;
+	}
+	watch(isOpen, (open, wasOpen) => {
+		if (open && !wasOpen) previouslyFocused = ctx?.focusManager?.current() ?? null;
+		else if (!open && wasOpen) restore();
+	}, { immediate: true });
+	onUnmounted(restore);
+}
+//#endregion
+//#region src/dialog.ts
+/** Preset panel widths (columns). Height grows to content, capped by the overlay. */
+const SIZE_WIDTH = {
+	small: 40,
+	medium: 56,
+	large: 76,
+	xlarge: 100
+};
+const VuiDialog = defineComponent({
+	name: "VuiDialog",
+	inheritAttrs: false,
+	props: {
+		/** v-model: whether the dialog is open. */
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: ""
+		},
+		size: {
+			type: String,
+			default: "medium"
+		},
+		/** Backdrop dim strength (0..1 brightness multiplier); `false` for none. */
+		backdrop: {
+			type: [Number, Boolean],
+			default: .4
+		},
+		/** Esc closes the dialog (emits `update:open=false` + `close`). */
+		closeOnEsc: {
+			type: Boolean,
+			default: true
+		},
+		/**
+		* Auto-focus the panel itself on open. Default `true` for plain content
+		* dialogs (so they receive Esc). Variants with their own focusable control
+		* (select, input, buttons) pass `false` and focus that control instead; Esc
+		* still bubbles up to the panel's handler from the focused child.
+		*/
+		autofocus: {
+			type: Boolean,
+			default: true
+		},
+		/** Override the panel width (columns); defaults to the `size` preset. */
+		width: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: ["update:open", "close"],
+	setup(props, { slots, emit, attrs }) {
+		const theme = useTheme();
+		useFocusTrap(() => props.open);
+		const width = computed(() => props.width ?? SIZE_WIDTH[props.size]);
+		function close() {
+			emit("update:open", false);
+			emit("close");
+		}
+		function onKeyDown(ev) {
+			if (ev.type !== "key") return;
+			if (props.closeOnEsc && ev.name === "escape") {
+				ev.preventDefault();
+				close();
+			}
+			attrs.onKeyDown?.(ev);
+		}
+		return () => {
+			if (!props.open) return null;
+			return h("overlay", {
+				trapFocus: true,
+				backdrop: props.backdrop,
+				alignItems: "center",
+				justifyContent: "center"
+			}, h("box", {
+				...attrs,
+				width: width.value,
+				maxHeight: { pct: .9 },
+				flexDirection: "column",
+				border: "rounded",
+				borderColor: theme.borderActive,
+				bg: theme.backgroundPanel,
+				fg: theme.text,
+				padding: {
+					left: 2,
+					right: 2,
+					top: 1,
+					bottom: 1
+				},
+				title: props.title ? ` ${props.title} ` : void 0,
+				focusable: props.autofocus,
+				focused: props.autofocus,
+				onKeyDown
+			}, slots.default?.()));
+		};
+	}
+});
+//#endregion
+//#region src/dialog-select.ts
+function normalize(o) {
+	return typeof o === "string" ? {
+		label: o,
+		value: o
+	} : o;
+}
+const VuiDialogSelect = defineComponent({
+	name: "VuiDialogSelect",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: "Select"
+		},
+		items: {
+			type: Array,
+			default: () => []
+		},
+		placeholder: {
+			type: String,
+			default: "Search…"
+		},
+		/** Max rows of the scrolling list viewport. */
+		maxRows: {
+			type: Number,
+			default: 10
+		}
+	},
+	emits: [
+		"update:open",
+		"select",
+		"close"
+	],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		const query = ref("");
+		const active = ref(0);
+		const scrollY = ref(0);
+		const options = computed(() => props.items.map(normalize));
+		const ranked = computed(() => fuzzyFilter(query.value, options.value, (o) => o.label));
+		const searching = computed(() => query.value.length > 0);
+		watch(() => props.open, (open) => {
+			if (open) {
+				query.value = "";
+				active.value = 0;
+				scrollY.value = 0;
+			}
+		});
+		watch(ranked, (r) => {
+			if (active.value > r.length - 1) active.value = Math.max(0, r.length - 1);
+		});
+		watch([active, () => props.maxRows], ([a, rows]) => {
+			if (a < scrollY.value) scrollY.value = a;
+			else if (a >= scrollY.value + rows) scrollY.value = a - rows + 1;
+		});
+		function move(delta) {
+			const n = ranked.value.length;
+			if (n === 0) return;
+			active.value = (active.value + delta + n) % n;
+		}
+		function commit() {
+			const hit = ranked.value[active.value];
+			if (!hit) return;
+			emit("select", hit.item.value, hit.item);
+			emit("update:open", false);
+			emit("close");
+		}
+		function onKeyDown(ev) {
+			if (ev.type !== "key") return;
+			switch (ev.name) {
+				case "up":
+					ev.preventDefault();
+					move(-1);
+					break;
+				case "down":
+					ev.preventDefault();
+					move(1);
+					break;
+				case "pageUp":
+					ev.preventDefault();
+					active.value = Math.max(0, active.value - props.maxRows);
+					break;
+				case "pageDown":
+					ev.preventDefault();
+					active.value = Math.min(ranked.value.length - 1, active.value + props.maxRows);
+					break;
+			}
+		}
+		function labelSpans(label, indices, on) {
+			if (indices.length === 0) return [label];
+			const set = new Set(indices);
+			const spans = [];
+			for (let i = 0; i < label.length; i++) {
+				const hit = set.has(i);
+				spans.push(h("span", {
+					fg: hit ? on ? theme.selectedText : theme.primary : void 0,
+					bold: hit
+				}, label[i]));
+			}
+			return spans;
+		}
+		function rows() {
+			const out = [];
+			let lastGroup;
+			ranked.value.forEach((r, i) => {
+				const opt = r.item;
+				if (!searching.value && opt.group && opt.group !== lastGroup) {
+					lastGroup = opt.group;
+					out.push(h("text", {
+						key: `g:${opt.group}`,
+						fg: theme.textMuted,
+						bold: true
+					}, opt.group));
+				}
+				const on = i === active.value;
+				out.push(h("box", {
+					key: `i:${opt.value}`,
+					flexDirection: "row",
+					justifyContent: "space-between",
+					bg: on ? theme.primary : void 0,
+					onMouseDown: (ev) => {
+						ev.preventDefault();
+						active.value = i;
+						commit();
+					}
+				}, [h("text", { fg: on ? theme.selectedText : theme.text }, labelSpans(opt.label, r.indices, on)), opt.hint ? h("text", { fg: on ? theme.selectedText : theme.textMuted }, opt.hint) : null]));
+			});
+			if (out.length === 0) out.push(h("text", { fg: theme.textMuted }, "No matches"));
+			return out;
+		}
+		return () => h(VuiDialog, {
+			open: props.open,
+			title: props.title,
+			size: "medium",
+			autofocus: false,
+			"onUpdate:open": (v) => emit("update:open", v),
+			onClose: () => emit("close")
+		}, () => [h("box", {
+			border: "rounded",
+			borderColor: theme.border,
+			padding: {
+				left: 1,
+				right: 1
+			},
+			onKeyDown
+		}, h(VuiInput, {
+			value: query.value,
+			placeholder: props.placeholder,
+			focused: true,
+			cursorColor: theme.primary,
+			"onUpdate:value": (v) => {
+				query.value = v;
+				active.value = 0;
+			},
+			onEnter: commit
+		})), h(VuiScrollBox, {
+			scrollY: scrollY.value,
+			maxHeight: props.maxRows,
+			focusable: false,
+			"onUpdate:scrollY": (y) => scrollY.value = y
+		}, { default: rows })]);
+	}
+});
+//#endregion
+//#region src/dialog-prompt.ts
+const VuiDialogPrompt = defineComponent({
+	name: "VuiDialogPrompt",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: "Input"
+		},
+		message: {
+			type: String,
+			default: ""
+		},
+		/** Initial / v-model text value. */
+		modelValue: {
+			type: String,
+			default: ""
+		},
+		placeholder: {
+			type: String,
+			default: ""
+		},
+		/** Returns an error message to block submit, or null/empty to allow it. */
+		validate: {
+			type: Function,
+			default: void 0
+		}
+	},
+	emits: [
+		"update:open",
+		"update:modelValue",
+		"submit",
+		"close"
+	],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		const text = ref(props.modelValue);
+		watch(() => props.open, (open) => {
+			if (open) text.value = props.modelValue;
+		});
+		const error = computed(() => props.validate?.(text.value) ?? null);
+		function onInput(v) {
+			text.value = v;
+			emit("update:modelValue", v);
+		}
+		function submit() {
+			if (error.value) return;
+			emit("submit", text.value);
+			emit("update:open", false);
+			emit("close");
+		}
+		return () => h(VuiDialog, {
+			open: props.open,
+			title: props.title,
+			size: "medium",
+			autofocus: false,
+			"onUpdate:open": (v) => emit("update:open", v),
+			onClose: () => emit("close")
+		}, () => {
+			const rows = [];
+			if (props.message) {
+				rows.push(h("text", {
+					fg: theme.text,
+					wrap: "word"
+				}, props.message));
+				rows.push(h("text", {}, " "));
+			}
+			rows.push(h("box", {
+				border: "rounded",
+				borderColor: error.value ? theme.error : theme.border,
+				padding: {
+					left: 1,
+					right: 1
+				}
+			}, h(VuiInput, {
+				value: text.value,
+				placeholder: props.placeholder,
+				focused: true,
+				cursorColor: theme.primary,
+				"onUpdate:value": onInput,
+				onEnter: submit
+			})));
+			rows.push(error.value ? h("text", { fg: theme.error }, props.validate ? error.value : "") : h("text", { fg: theme.textMuted }, [
+				h("span", {
+					fg: theme.primary,
+					bold: true
+				}, "Enter"),
+				" submit · ",
+				h("span", {
+					fg: theme.primary,
+					bold: true
+				}, "Esc"),
+				" cancel"
+			]));
+			return rows;
+		});
+	}
+});
+//#endregion
+//#region src/dialog-confirm.ts
+const VuiDialogConfirm = defineComponent({
+	name: "VuiDialogConfirm",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: "Confirm"
+		},
+		message: {
+			type: String,
+			default: "Are you sure?"
+		},
+		confirmLabel: {
+			type: String,
+			default: "Yes"
+		},
+		cancelLabel: {
+			type: String,
+			default: "No"
+		},
+		/** Which choice is highlighted when the dialog opens. */
+		defaultConfirm: {
+			type: Boolean,
+			default: true
+		}
+	},
+	emits: [
+		"update:open",
+		"confirm",
+		"close"
+	],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		const confirmActive = ref(props.defaultConfirm);
+		watch(() => props.open, (open) => {
+			if (open) confirmActive.value = props.defaultConfirm;
+		});
+		function decide(value) {
+			emit("confirm", value);
+			emit("update:open", false);
+			emit("close");
+		}
+		function onKeyDown(ev) {
+			if (ev.type !== "key") return;
+			switch (ev.name) {
+				case "left":
+				case "right":
+				case "tab":
+					ev.preventDefault();
+					confirmActive.value = !confirmActive.value;
+					break;
+				case "y":
+					ev.preventDefault();
+					decide(true);
+					break;
+				case "n":
+					ev.preventDefault();
+					decide(false);
+					break;
+				case "enter":
+					ev.preventDefault();
+					decide(confirmActive.value);
+					break;
+			}
+		}
+		function choice(label, active) {
+			return h("text", {
+				bg: active ? theme.primary : theme.backgroundElement,
+				fg: active ? theme.selectedText : theme.text,
+				padding: {
+					left: 2,
+					right: 2
+				}
+			}, label);
+		}
+		return () => h(VuiDialog, {
+			open: props.open,
+			title: props.title,
+			size: "small",
+			"onUpdate:open": (v) => emit("update:open", v),
+			onClose: () => emit("close"),
+			onKeyDown
+		}, () => [
+			h("text", {
+				fg: theme.text,
+				wrap: "word"
+			}, props.message),
+			h("text", {}, " "),
+			h("box", {
+				flexDirection: "row",
+				gap: 2,
+				justifyContent: "flex-end"
+			}, [choice(props.confirmLabel, confirmActive.value), choice(props.cancelLabel, !confirmActive.value)])
+		]);
+	}
+});
+//#endregion
+//#region src/dialog-alert.ts
+const VuiDialogAlert = defineComponent({
+	name: "VuiDialogAlert",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		title: {
+			type: String,
+			default: "Alert"
+		},
+		message: {
+			type: String,
+			default: ""
+		},
+		okLabel: {
+			type: String,
+			default: "OK"
+		}
+	},
+	emits: ["update:open", "close"],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		function close() {
+			emit("update:open", false);
+			emit("close");
+		}
+		function onKeyDown(ev) {
+			if (ev.type !== "key") return;
+			if (ev.name === "enter" || ev.name === "space") {
+				ev.preventDefault();
+				close();
+			}
+		}
+		return () => h(VuiDialog, {
+			open: props.open,
+			title: props.title,
+			size: "small",
+			"onUpdate:open": (v) => emit("update:open", v),
+			onClose: () => emit("close"),
+			onKeyDown
+		}, () => [
+			h("text", {
+				fg: theme.text,
+				wrap: "word"
+			}, props.message),
+			h("text", {}, " "),
+			h("text", { fg: theme.textMuted }, [h("span", {
+				fg: theme.primary,
+				bold: true
+			}, "Enter"), ` ${props.okLabel}`])
+		]);
+	}
+});
+//#endregion
+//#region src/command-palette.ts
+const VuiCommandPalette = defineComponent({
+	name: "VuiCommandPalette",
+	props: {
+		open: {
+			type: Boolean,
+			default: false
+		},
+		commands: {
+			type: Array,
+			default: () => []
+		},
+		title: {
+			type: String,
+			default: "Commands"
+		},
+		placeholder: {
+			type: String,
+			default: "Type a command…"
+		}
+	},
+	emits: [
+		"update:open",
+		"run",
+		"close"
+	],
+	setup(props, { emit }) {
+		const items = computed(() => props.commands.map((c) => ({
+			label: c.title,
+			value: c.id,
+			group: c.group,
+			hint: c.hint
+		})));
+		function onSelect(id) {
+			const cmd = props.commands.find((c) => c.id === id);
+			if (!cmd) return;
+			cmd.run?.();
+			emit("run", cmd);
+		}
+		return () => h(VuiDialogSelect, {
+			open: props.open,
+			title: props.title,
+			placeholder: props.placeholder,
+			items: items.value,
+			"onUpdate:open": (v) => emit("update:open", v),
+			onSelect,
+			onClose: () => emit("close")
+		});
+	}
+});
+//#endregion
+//#region src/toast.ts
+const ToastSymbol = Symbol("vui.toasts");
+/** Create + provide the toast controller. Call once in your root component setup. */
+function provideToasts() {
+	const toasts = reactive([]);
+	let nextId = 1;
+	const controller = {
+		toasts,
+		show(message, opts) {
+			const id = nextId++;
+			toasts.push({
+				id,
+				message,
+				kind: opts?.kind ?? "info",
+				duration: opts?.duration ?? 4e3
+			});
+			return id;
+		},
+		dismiss(id) {
+			const at = toasts.findIndex((t) => t.id === id);
+			if (at >= 0) toasts.splice(at, 1);
+		},
+		clear() {
+			toasts.splice(0, toasts.length);
+		}
+	};
+	provide(ToastSymbol, controller);
+	return controller;
+}
+/** Access the toast controller installed by `provideToasts()`. */
+function useToast() {
+	const c = inject(ToastSymbol, null);
+	if (!c) throw new Error("useToast() requires provideToasts() in an ancestor");
+	return c;
+}
+/** Linear mix of two packed 0xRRGGBBAA colors (t=0 → a, t=1 → b). */
+function mix(a, b, t) {
+	const ch = (shift) => {
+		const av = a >>> shift & 255;
+		const bv = b >>> shift & 255;
+		return Math.round(av + (bv - av) * t) & 255;
+	};
+	return (ch(24) << 24 | ch(16) << 16 | ch(8) << 8 | a & 255) >>> 0;
+}
+/** One toast row; owns its auto-dismiss tween + fade. */
+const ToastItem = defineComponent({
+	name: "ToastItem",
+	props: { toast: {
+		type: Object,
+		required: true
+	} },
+	emits: ["dismiss"],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		const timeline = useTimeline();
+		const fade = shallowRef(1);
+		if (props.toast.duration > 0) timeline.animate({
+			from: 0,
+			to: 1,
+			duration: props.toast.duration,
+			easing: "linear",
+			onUpdate: (p) => {
+				fade.value = p < .8 ? 1 : Math.max(0, 1 - (p - .8) / .2);
+			},
+			onComplete: () => emit("dismiss", props.toast.id)
+		});
+		const accent = () => {
+			const k = props.toast.kind;
+			return k === "success" ? theme.success : k === "warning" ? theme.warning : k === "error" ? theme.error : theme.info;
+		};
+		return () => {
+			const t = fade.value;
+			const bg = theme.backgroundPanel;
+			return h("box", {
+				border: "rounded",
+				borderColor: mix(bg, accent(), t),
+				bg,
+				padding: {
+					left: 1,
+					right: 1
+				},
+				margin: { top: 1 },
+				minWidth: 24,
+				maxWidth: 48
+			}, h("text", {
+				fg: mix(bg, theme.text, t),
+				wrap: "word"
+			}, [h("span", {
+				fg: mix(bg, accent(), t),
+				bold: true
+			}, `${ICON[props.toast.kind]} `), props.toast.message]));
+		};
+	}
+});
+const ICON = {
+	info: "ℹ",
+	success: "✔",
+	warning: "⚠",
+	error: "✖"
+};
+const VuiToastHost = defineComponent({
+	name: "VuiToastHost",
+	props: { 
+	/** Corner to stack toasts in. */
+position: {
+		type: String,
+		default: "top-right"
+	} },
+	setup(props) {
+		const controller = useToast();
+		const align = computed(() => {
+			const top = props.position.startsWith("top");
+			const right = props.position.endsWith("right");
+			return {
+				justifyContent: top ? "flex-start" : "flex-end",
+				alignItems: right ? "flex-end" : "flex-start"
+			};
+		});
+		return () => h("overlay", {
+			trapFocus: false,
+			padding: {
+				left: 2,
+				right: 2,
+				top: 1,
+				bottom: 1
+			},
+			flexDirection: "column",
+			justifyContent: align.value.justifyContent,
+			alignItems: align.value.alignItems
+		}, controller.toasts.map((toast) => h(ToastItem, {
+			key: toast.id,
+			toast,
+			onDismiss: (id) => controller.dismiss(id)
+		})));
+	}
+});
+//#endregion
+//#region src/autocomplete.ts
+/** Wire provider-stack suggestions + keyboard navigation for an input. */
+function useAutocomplete(opts) {
+	const active = ref(0);
+	const suggestions = computed(() => {
+		const q = opts.query();
+		const merged = [];
+		for (const provider of opts.providers) for (const s of provider(q)) {
+			merged.push(s);
+			if (opts.max && merged.length >= opts.max) return merged;
+		}
+		return merged;
+	});
+	const visible = computed(() => suggestions.value.length > 0);
+	watch(suggestions, (s) => {
+		if (active.value > s.length - 1) active.value = Math.max(0, s.length - 1);
+	});
+	function move(delta) {
+		const n = suggestions.value.length;
+		if (n === 0) return;
+		active.value = (active.value + delta + n) % n;
+	}
+	function accept() {
+		const s = suggestions.value[active.value];
+		if (s) opts.onAccept(s);
+	}
+	function onKeyDown(ev) {
+		if (ev.type !== "key" || !visible.value) return;
+		if (ev.name === "up") {
+			ev.preventDefault();
+			move(-1);
+		} else if (ev.name === "down") {
+			ev.preventDefault();
+			move(1);
+		}
+	}
+	return {
+		suggestions,
+		active,
+		visible,
+		onKeyDown,
+		accept
+	};
+}
+const VuiAutocomplete = defineComponent({
+	name: "VuiAutocomplete",
+	props: {
+		suggestions: {
+			type: Array,
+			default: () => []
+		},
+		active: {
+			type: Number,
+			default: 0
+		},
+		maxRows: {
+			type: Number,
+			default: 8
+		}
+	},
+	emits: ["select"],
+	setup(props, { emit }) {
+		const theme = useTheme();
+		const shown = computed(() => props.suggestions.slice(0, props.maxRows));
+		return () => {
+			if (props.suggestions.length === 0) return null;
+			return h("box", {
+				flexDirection: "column",
+				border: "rounded",
+				borderColor: theme.border,
+				bg: theme.backgroundMenu,
+				alignSelf: "flex-start",
+				minWidth: 20
+			}, shown.value.map((s, i) => {
+				const on = i === props.active;
+				return h("box", {
+					key: s.value,
+					flexDirection: "row",
+					justifyContent: "space-between",
+					gap: 2,
+					bg: on ? theme.primary : void 0,
+					padding: {
+						left: 1,
+						right: 1
+					},
+					onMouseDown: (ev) => {
+						ev.preventDefault();
+						emit("select", s, i);
+					}
+				}, [h("text", { fg: on ? theme.selectedText : theme.text }, s.label), s.hint ? h("text", { fg: on ? theme.selectedText : theme.textMuted }, s.hint) : null]);
+			}));
+		};
+	}
+});
+//#endregion
+//#region src/status-bar.ts
+const VuiStatusBar = defineComponent({
+	name: "VuiStatusBar",
+	props: {
+		height: {
+			type: Number,
+			default: 1
+		},
+		bg: {
+			type: [String, Number],
+			default: void 0
+		},
+		fg: {
+			type: [String, Number],
+			default: void 0
+		},
+		/** Horizontal padding inside the bar. */
+		pad: {
+			type: Number,
+			default: 1
+		}
+	},
+	setup(props, { slots }) {
+		const theme = useTheme();
+		return () => h("box", {
+			width: { pct: 1 },
+			height: props.height,
+			flexDirection: "row",
+			alignItems: "center",
+			justifyContent: "space-between",
+			bg: props.bg ?? theme.backgroundPanel,
+			fg: props.fg ?? theme.textMuted,
+			padding: {
+				left: props.pad,
+				right: props.pad
+			}
+		}, [
+			h("box", {
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 1
+			}, slots.left?.()),
+			h("box", {
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 1
+			}, slots.center?.() ?? slots.default?.()),
+			h("box", {
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 1
+			}, slots.right?.())
+		]);
+	}
+});
+/** A header row: a status bar with the active-border accent by default. */
+const VuiHeader = defineComponent({
+	name: "VuiHeader",
+	props: {
+		bg: {
+			type: [String, Number],
+			default: void 0
+		},
+		fg: {
+			type: [String, Number],
+			default: void 0
+		}
+	},
+	setup(props, { slots }) {
+		const theme = useTheme();
+		return () => h(VuiStatusBar, {
+			bg: props.bg ?? theme.backgroundElement,
+			fg: props.fg ?? theme.text
+		}, slots);
+	}
+});
+/** A footer row — alias of the status bar with footer-typical muted styling. */
+const VuiFooter = defineComponent({
+	name: "VuiFooter",
+	setup(_props, { slots }) {
+		return () => h(VuiStatusBar, null, slots);
+	}
+});
+//#endregion
+//#region src/virtual-list.ts
+function clamp(v, lo, hi) {
+	return Math.max(lo, Math.min(v, hi));
+}
+const MAX_WINDOW = 500;
+const VuiVirtualList = defineComponent({
+	name: "VuiVirtualList",
+	inheritAttrs: false,
+	props: {
+		items: {
+			type: Array,
+			required: true
+		},
+		/** Viewport height in rows (definite — see the note above). */
+		height: {
+			type: Number,
+			required: true
+		},
+		/** Rows each item occupies. */
+		itemHeight: {
+			type: Number,
+			default: 1
+		},
+		/** Extra rows mounted above/below the viewport to smooth fast scrolling. */
+		overscan: {
+			type: Number,
+			default: 2
+		},
+		focused: {
+			type: Boolean,
+			default: false
+		},
+		focusable: {
+			type: Boolean,
+			default: true
+		},
+		/** Scroll step (rows) for arrow keys / one wheel notch. */
+		step: {
+			type: Number,
+			default: 1
+		},
+		/** Render an integrated vertical scrollbar (indicator + drag) on the right edge. */
+		scrollbar: {
+			type: Boolean,
+			default: false
+		},
+		/**
+		* Controlled scroll offset (top row). Bind it (`v-model:scrollY` /
+		* `:scrollY` + `@update:scrollY`) to drive the list from an ancestor — e.g. a
+		* focused parent that owns the keyboard. Omit for uncontrolled (internal).
+		*/
+		scrollY: {
+			type: Number,
+			default: void 0
+		}
+	},
+	emits: ["scroll", "update:scrollY"],
+	setup(props, { attrs, emit, slots }) {
+		const localScrollY = ref(0);
+		const viewRows = computed(() => Math.max(1, props.height));
+		const totalRows = computed(() => props.items.length * props.itemHeight);
+		const maxScroll = computed(() => Math.max(0, totalRows.value - viewRows.value));
+		const scrollPos = computed(() => clamp(props.scrollY ?? localScrollY.value, 0, maxScroll.value));
+		const window = computed(() => {
+			const ih = Math.max(1, props.itemHeight);
+			const first = Math.max(0, Math.floor(scrollPos.value / ih) - props.overscan);
+			const visible = Math.min(MAX_WINDOW, Math.ceil(viewRows.value / ih) + props.overscan * 2);
+			return {
+				first,
+				last: Math.min(props.items.length, first + visible)
+			};
+		});
+		function scrollTo(rows) {
+			const next = clamp(Math.round(rows), 0, maxScroll.value);
+			if (next === scrollPos.value) return;
+			localScrollY.value = next;
+			emit("update:scrollY", next);
+			emit("scroll", next);
+		}
+		function onKeyDown(ev) {
+			if (ev.type !== "key") return;
+			const page = Math.max(1, viewRows.value - 1);
+			const d = {
+				up: -props.step,
+				down: props.step,
+				pageUp: -page,
+				pageDown: page,
+				home: -scrollPos.value,
+				end: maxScroll.value - scrollPos.value
+			}[ev.name];
+			if (d !== void 0) {
+				ev.preventDefault();
+				scrollTo(scrollPos.value + d);
+			}
+		}
+		function onWheel(ev) {
+			if (ev.type !== "mouse" || ev.kind !== "wheel") return;
+			ev.preventDefault();
+			scrollTo(scrollPos.value + (ev.button === "wheelUp" ? -props.step : props.step) * 3);
+		}
+		return () => {
+			const { first, last } = window.value;
+			const ih = Math.max(1, props.itemHeight);
+			const topPad = first * ih;
+			const bottomPad = Math.max(0, totalRows.value - last * ih);
+			const rows = [];
+			if (topPad > 0) rows.push(h("box", {
+				key: "vl-top",
+				height: topPad,
+				flexShrink: 0
+			}));
+			for (let i = first; i < last; i++) rows.push(h("box", {
+				key: `vl-${i}`,
+				height: ih,
+				flexShrink: 0
+			}, slots.default?.({
+				item: props.items[i],
+				index: i
+			})));
+			if (bottomPad > 0) rows.push(h("box", {
+				key: "vl-bot",
+				height: bottomPad,
+				flexShrink: 0
+			}));
+			const viewport = h("box", {
+				...props.scrollbar ? { flexGrow: 1 } : attrs,
+				height: props.height,
+				flexDirection: "column",
+				overflow: "scroll",
+				scrollY: scrollPos.value,
+				focusable: props.focusable,
+				focused: props.focused,
+				onKeyDown,
+				onWheel
+			}, rows);
+			if (!props.scrollbar) return viewport;
+			return h("box", {
+				...attrs,
+				height: props.height,
+				flexDirection: "row"
+			}, [viewport, h(VuiScrollBar, {
+				scrollY: scrollPos.value,
+				viewportHeight: viewRows.value,
+				contentHeight: totalRows.value,
+				"onUpdate:scrollY": (y) => scrollTo(y),
+				onWheel
+			})]);
+		};
+	}
+});
+//#endregion
+//#region src/working-indicator.ts
+const VuiWorkingIndicator = defineComponent({
+	name: "VuiWorkingIndicator",
+	props: {
+		label: {
+			type: String,
+			default: "Working…"
+		},
+		done: {
+			type: Boolean,
+			default: false
+		},
+		doneLabel: {
+			type: String,
+			default: "Done"
+		},
+		preset: {
+			type: String,
+			default: "braille"
+		},
+		/** Spinner / check color; defaults to theme accent (busy) / success (done). */
+		color: {
+			type: [String, Number],
+			default: void 0
+		},
+		/** Glyph shown when done. */
+		doneGlyph: {
+			type: String,
+			default: "✔"
+		}
+	},
+	setup(props) {
+		const theme = useTheme();
+		return () => {
+			if (props.done) return h("text", { fg: props.color ?? theme.success }, [h("span", { bold: true }, `${props.doneGlyph} `), props.doneLabel]);
+			return h(VuiSpinner$1, {
+				preset: props.preset,
+				color: props.color ?? theme.accent,
+				label: props.label
+			});
+		};
+	}
+});
+//#endregion
+export { SPINNER_PRESETS, VuiAutocomplete, VuiCommandPalette, VuiDialog, VuiDialogAlert, VuiDialogConfirm, VuiDialogPrompt, VuiDialogSelect, VuiFooter, VuiHeader, VuiSpinner, VuiStatusBar, VuiToastHost, VuiVirtualList, VuiWorkingIndicator, fuzzyFilter, fuzzyMatch, provideToasts, useAutocomplete, useFocusTrap, useToast };