@simon_he/vue-tui 0.0.1 → 0.0.2

package/dist/index.js

@@ -417,32 +417,6 @@ function createNodePathPickerProvider() {
 	};
 }
 
-//#endregion
-//#region src/cli/recording.ts
-async function loadFs() {
-	return import("node:fs");
-}
-async function writeEventLog(path, events) {
-	const { writeFileSync } = await loadFs();
-	const lines = events.map((e) => JSON.stringify(e)).join("\n");
-	writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
-}
-async function writeSnapshot(path, lines) {
-	const { writeFileSync } = await loadFs();
-	writeFileSync(path, `${lines.join("\n")}\n`, "utf8");
-}
-async function readEventLog(path) {
-	const { readFileSync } = await loadFs();
-	const raw = readFileSync(path, "utf8");
-	const out = [];
-	for (const line of raw.split(/\r?\n/g)) {
-		const trimmed = line.trim();
-		if (!trimmed) continue;
-		out.push(JSON.parse(trimmed));
-	}
-	return out;
-}
-
 //#endregion
 //#region src/utils/path.ts
 function normalizeSeparators(input) {
@@ -617,37 +591,29 @@ function resolveUserPath(workspaceAbs, input) {
 }
 
 //#endregion
-//#region src/core/buffer/width.ts
-const fullWidthRanges = [
-	[4352, 4447],
-	[9001, 9002],
-	[11904, 42191],
-	[44032, 55203],
-	[63744, 64255],
-	[65040, 65049],
-	[65072, 65135],
-	[65280, 65376],
-	[65504, 65510]
-];
-function isFullWidthCodePoint(codePoint) {
-	for (const [start, end] of fullWidthRanges) if (codePoint >= start && codePoint <= end) return true;
-	return false;
+//#region src/cli/recording.ts
+async function loadFs() {
+	return import("node:fs");
 }
-function isEmojiLike(codePoint) {
-	return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+async function writeEventLog(path, events) {
+	const { writeFileSync } = await loadFs();
+	const lines = events.map((e) => JSON.stringify(e)).join("\n");
+	writeFileSync(path, `${lines}${lines ? "\n" : ""}`, "utf8");
 }
-let extendedPictographicRe = null;
-try {
-	extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
-} catch {
-	extendedPictographicRe = null;
+async function writeSnapshot(path, lines) {
+	const { writeFileSync } = await loadFs();
+	writeFileSync(path, `${lines.join("\n")}\n`, "utf8");
 }
-function charCellWidth(text) {
-	if (!text) return 1;
-	if (extendedPictographicRe === null || extendedPictographicRe === void 0 ? void 0 : extendedPictographicRe.test(text)) return 2;
-	const codePoint = text.codePointAt(0);
-	if (codePoint == null) return 1;
-	return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+async function readEventLog(path) {
+	const { readFileSync } = await loadFs();
+	const raw = readFileSync(path, "utf8");
+	const out = [];
+	for (const line of raw.split(/\r?\n/g)) {
+		const trimmed = line.trim();
+		if (!trimmed) continue;
+		out.push(JSON.parse(trimmed));
+	}
+	return out;
 }
 
 //#endregion
@@ -953,6 +919,40 @@ function parseAnsiSgr(input, baseStyle = {}) {
 	return segments;
 }
 
+//#endregion
+//#region src/core/buffer/width.ts
+const fullWidthRanges = [
+	[4352, 4447],
+	[9001, 9002],
+	[11904, 42191],
+	[44032, 55203],
+	[63744, 64255],
+	[65040, 65049],
+	[65072, 65135],
+	[65280, 65376],
+	[65504, 65510]
+];
+function isFullWidthCodePoint(codePoint) {
+	for (const [start, end] of fullWidthRanges) if (codePoint >= start && codePoint <= end) return true;
+	return false;
+}
+function isEmojiLike(codePoint) {
+	return codePoint >= 127744 && codePoint <= 129791 || codePoint >= 127462 && codePoint <= 127487;
+}
+let extendedPictographicRe = null;
+try {
+	extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
+} catch {
+	extendedPictographicRe = null;
+}
+function charCellWidth(text) {
+	if (!text) return 1;
+	if (extendedPictographicRe === null || extendedPictographicRe === void 0 ? void 0 : extendedPictographicRe.test(text)) return 2;
+	const codePoint = text.codePointAt(0);
+	if (codePoint == null) return 1;
+	return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+}
+
 //#endregion
 //#region src/core/buffer/buffer.ts
 const DEFAULT_STYLE = Object.freeze({});
@@ -3611,6 +3611,81 @@ function translateRect(rect, dx, dy) {
 		h: rect.h
 	};
 }
+function normalizePadding(padding) {
+	const nums = [];
+	if (typeof padding === "number") nums.push(padding);
+	else if (Array.isArray(padding)) for (const v of padding) nums.push(typeof v === "number" ? v : Number(v));
+	else if (typeof padding === "string") for (const part of padding.trim().split(/\s+/g)) {
+		if (!part) continue;
+		nums.push(Number(part));
+	}
+	const n = nums.map((v) => Number.isFinite(v) ? Math.max(0, Math.floor(v)) : 0);
+	const a = n[0] ?? 0;
+	const b = n[1] ?? a;
+	const c = n[2] ?? a;
+	const d = n[3] ?? b;
+	if (n.length <= 1) return {
+		top: a,
+		right: a,
+		bottom: a,
+		left: a
+	};
+	if (n.length === 2) return {
+		top: a,
+		right: b,
+		bottom: a,
+		left: b
+	};
+	if (n.length === 3) return {
+		top: a,
+		right: b,
+		bottom: c,
+		left: b
+	};
+	return {
+		top: a,
+		right: b,
+		bottom: c,
+		left: d
+	};
+}
+function clampRectPadding(rect, padding) {
+	const requested = normalizePadding(padding);
+	const w = Math.max(0, Math.floor(rect.w));
+	const h$1 = Math.max(0, Math.floor(rect.h));
+	const maxTotalX = Math.max(0, w - (w > 0 ? 1 : 0));
+	const maxTotalY = Math.max(0, h$1 - (h$1 > 0 ? 1 : 0));
+	if (requested.top === requested.right && requested.top === requested.bottom && requested.top === requested.left) {
+		const maxPadX = Math.max(0, Math.floor(maxTotalX / 2));
+		const maxPadY = Math.max(0, Math.floor(maxTotalY / 2));
+		const pad = Math.min(requested.top, maxPadX, maxPadY);
+		return {
+			top: pad,
+			right: pad,
+			bottom: pad,
+			left: pad
+		};
+	}
+	const left = Math.min(requested.left, maxTotalX);
+	const right = Math.min(requested.right, Math.max(0, maxTotalX - left));
+	const top = Math.min(requested.top, maxTotalY);
+	const bottom = Math.min(requested.bottom, Math.max(0, maxTotalY - top));
+	return {
+		top,
+		right,
+		bottom,
+		left
+	};
+}
+function insetRect(rect, padding) {
+	const pad = clampRectPadding(rect, padding);
+	return {
+		x: rect.x + pad.left,
+		y: rect.y + pad.top,
+		w: Math.max(0, rect.w - pad.left - pad.right),
+		h: Math.max(0, rect.h - pad.top - pad.bottom)
+	};
+}
 
 //#endregion
 //#region src/vue/components/TAnchor.ts
@@ -3651,6 +3726,14 @@ const TAnchor = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		focusable: {
 			type: Boolean,
 			default: false
@@ -3762,9 +3845,11 @@ const TAnchor = defineComponent({
 		const childStack = computed(() => render.createStack(parentStack.value, props.zIndex));
 		watchEffect(() => {
 			const translated = rawRect.value;
-			childLayout.originX = translated.x;
-			childLayout.originY = translated.y;
-			childLayout.clipRect = rect.value;
+			const content = insetRect(translated, props.padding);
+			const contentClip = intersectRect(content, rect.value) ?? EMPTY_RECT$1;
+			childLayout.originX = content.x;
+			childLayout.originY = content.y;
+			childLayout.clipRect = contentClip;
 		});
 		provide(LayoutContextKey, childLayout);
 		provide(RenderStackKey, childStack);
@@ -3947,7 +4032,11 @@ const TBox = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: Number,
+			type: [
+				Number,
+				String,
+				Array
+			],
 			default: 0
 		},
 		scrollX: {
@@ -4040,17 +4129,14 @@ const TBox = defineComponent({
 		watchEffect(() => {
 			const r = absRect.value;
 			const borderInset = props.border ? 1 : 0;
-			const requestedPad = Math.max(0, Math.floor(props.padding));
-			const maxPadX = Math.max(0, Math.floor((r.w - borderInset * 2 - 1) / 2));
-			const maxPadY = Math.max(0, Math.floor((r.h - borderInset * 2 - 1) / 2));
-			const pad = Math.min(requestedPad, maxPadX, maxPadY);
-			const content = {
-				x: r.x + borderInset + pad,
-				y: r.y + borderInset + pad,
-				w: Math.max(0, r.w - borderInset * 2 - pad * 2),
-				h: Math.max(0, r.h - borderInset * 2 - pad * 2)
+			const inner = {
+				x: r.x + borderInset,
+				y: r.y + borderInset,
+				w: Math.max(0, r.w - borderInset * 2),
+				h: Math.max(0, r.h - borderInset * 2)
 			};
-			let contentRect$1 = intersectRect(content, r);
+			const content = insetRect(inner, props.padding);
+			let contentRect$1 = intersectRect(content, inner);
 			if (parent.clipRect && contentRect$1) contentRect$1 = intersectRect(contentRect$1, parent.clipRect);
 			if (!contentRect$1) contentRect$1 = {
 				x: 0,
@@ -4144,6 +4230,14 @@ const TText = defineComponent({
 			type: Number,
 			default: void 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		style: {
 			type: Object,
 			default: void 0
@@ -4161,16 +4255,21 @@ const TText = defineComponent({
 		const { terminal, defaultStyle } = useTerminal();
 		const layout = useLayout();
 		const { visible, rootProps } = useVisibility();
+		const pad = computed(() => normalizePadding(props.padding));
+		const contentW = computed(() => {
+			const outerW = props.w ?? computeDefaultWidth(props.value) + pad.value.left + pad.value.right;
+			return Math.max(0, Math.floor(outerW) - pad.value.left - pad.value.right);
+		});
 		const lines = computed(() => {
-			const w = props.w ?? computeDefaultWidth(props.value);
+			const w = contentW.value;
 			if (w <= 0) return [""];
 			if (!props.wrap) return splitLines(props.value).map((l) => fitText(l, w));
 			const safe = sanitizeTextBlock(props.value);
 			return wrapByCells(safe, w).map((l) => fitText(l, w));
 		});
 		const absRect = computed(() => {
-			const width = props.w ?? computeDefaultWidth(props.value);
-			const height = props.h ?? (props.wrap ? lines.value.length || 1 : lines.value.length || 1);
+			const width = Math.floor(props.w ?? computeDefaultWidth(props.value) + pad.value.left + pad.value.right);
+			const height = Math.floor(props.h ?? (lines.value.length || 1) + pad.value.top + pad.value.bottom);
 			const raw = {
 				x: props.x,
 				y: props.y,
@@ -4203,10 +4302,14 @@ const TText = defineComponent({
 				if (!visible.value) return;
 				const r = absRect.value;
 				if (r.w <= 0 || r.h <= 0) return;
+				const contentX = r.x + pad.value.left;
+				const contentY = r.y + pad.value.top;
+				const w = Math.max(0, Math.floor(r.w) - pad.value.left - pad.value.right);
+				const h$1 = Math.max(0, Math.floor(r.h) - pad.value.top - pad.value.bottom);
 				const style = props.style ?? defaultStyle.value;
 				const blank = props.clear ? " ".repeat(r.w) : "";
 				const out = lines.value;
-				const maxLines = Math.min(out.length, Math.max(0, Math.floor(r.h)));
+				const maxLines = Math.min(out.length, h$1);
 				const paintRow = (y) => {
 					const i = y - r.y;
 					if (i < 0 || i >= r.h) return;
@@ -4215,10 +4318,12 @@ const TText = defineComponent({
 						y,
 						style
 					});
-					if (i < 0 || i >= maxLines) return;
-					const clipped = sliceByCells(out[i] ?? "", r.w);
-					terminal.write(padEndByCells(clipped, r.w), {
-						x: r.x,
+					const contentRow = y - contentY;
+					if (contentRow < 0 || contentRow >= h$1) return;
+					if (contentRow < 0 || contentRow >= maxLines) return;
+					const clipped = sliceByCells(out[contentRow] ?? "", w);
+					terminal.write(padEndByCells(clipped, w), {
+						x: contentX,
 						y,
 						style
 					});
@@ -4265,6 +4370,14 @@ const TView = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		scrollX: {
 			type: Number,
 			default: 0
@@ -4372,9 +4485,11 @@ const TView = defineComponent({
 		const childStack = computed(() => render.createStack(parentStack.value, props.zIndex));
 		watchEffect(() => {
 			const translated = rawRect.value;
-			childLayout.originX = translated.x - Math.floor(props.scrollX);
-			childLayout.originY = translated.y - Math.floor(props.scrollY);
-			childLayout.clipRect = rect.value;
+			const content = insetRect(translated, props.padding);
+			const contentClip = intersectRect(content, rect.value) ?? EMPTY_RECT;
+			childLayout.originX = content.x - Math.floor(props.scrollX);
+			childLayout.originY = content.y - Math.floor(props.scrollY);
+			childLayout.clipRect = contentClip;
 		});
 		provide(LayoutContextKey, childLayout);
 		provide(RenderStackKey, childStack);
@@ -4580,10 +4695,10 @@ function computePosition(opts) {
 }
 function contentRect(opts) {
 	const borderInset = opts.border ? 1 : 0;
-	const pad = Math.max(0, Math.floor(opts.padding));
+	const pad = normalizePadding(opts.padding);
 	return {
-		w: Math.max(0, Math.floor(opts.w) - borderInset * 2 - pad * 2),
-		h: Math.max(0, Math.floor(opts.h) - borderInset * 2 - pad * 2)
+		w: Math.max(0, Math.floor(opts.w) - borderInset * 2 - pad.left - pad.right),
+		h: Math.max(0, Math.floor(opts.h) - borderInset * 2 - pad.top - pad.bottom)
 	};
 }
 const DialogSurface = defineComponent({
@@ -4606,7 +4721,11 @@ const DialogSurface = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: Number,
+			type: [
+				Number,
+				String,
+				Array
+			],
 			default: 1
 		},
 		zIndex: {
@@ -4880,7 +4999,11 @@ const TDialog = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: Number,
+			type: [
+				Number,
+				String,
+				Array
+			],
 			default: 1
 		},
 		zIndex: {
@@ -5947,6 +6070,14 @@ const TFlow = defineComponent({
 			type: Number,
 			required: true
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		items: {
 			type: Array,
 			required: true
@@ -5969,25 +6100,29 @@ const TFlow = defineComponent({
 		}
 	},
 	setup(props, { slots }) {
+		const pad = computed(() => normalizePadding(props.padding));
+		const innerW = computed(() => Math.max(0, Math.floor(props.w) - pad.value.left - pad.value.right));
+		const innerH = computed(() => Math.max(0, Math.floor(props.h) - pad.value.top - pad.value.bottom));
 		return () => h(TView, {
 			x: props.x,
 			y: props.y,
 			w: props.w,
 			h: props.h,
-			zIndex: props.zIndex
+			zIndex: props.zIndex,
+			padding: props.padding
 		}, () => props.items.map((item, index) => {
 			const step = Math.max(0, Math.floor(props.itemSize)) + Math.max(0, Math.floor(props.gap));
 			const offset = index * step;
 			const childProps = props.direction === "vertical" ? {
 				x: 0,
 				y: offset,
-				w: props.w,
+				w: innerW.value,
 				h: Math.max(0, Math.floor(props.itemSize))
 			} : {
 				x: offset,
 				y: 0,
 				w: Math.max(0, Math.floor(props.itemSize)),
-				h: props.h
+				h: innerH.value
 			};
 			return h(TView, {
 				key: index,
@@ -6395,6 +6530,14 @@ const TInput = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: "0 1"
+		},
 		modelValue: {
 			type: String,
 			required: true
@@ -6506,19 +6649,6 @@ const TInput = defineComponent({
 		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
 		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
 		const promptOverlayStack = render.createStack(render.rootStack, 1e4);
-		const PADDING_X = 1;
-		function measureContent(r) {
-			const wAll = Math.max(0, Math.floor(r.w));
-			const hAll = Math.max(0, Math.floor(r.h));
-			const padX = clamp$3(PADDING_X, 0, Math.floor(wAll / 2));
-			const w = Math.max(0, wAll - padX * 2);
-			return {
-				wAll,
-				hAll,
-				padX,
-				w
-			};
-		}
 		const focused = ref(false);
 		const cursor = ref(0);
 		const anchor = ref(null);
@@ -6535,7 +6665,6 @@ const TInput = defineComponent({
 		function getValue() {
 			return pendingValue.value ?? props.modelValue;
 		}
-		const wrapMode = computed(() => Math.max(1, Math.floor(props.h)) > 1);
 		const rawAbsRect = computed(() => {
 			const raw = {
 				x: props.x,
@@ -6797,6 +6926,8 @@ const TInput = defineComponent({
 				h: 0
 			};
 		});
+		const contentRect$1 = computed(() => insetRect(absRect.value, props.padding));
+		const wrapMode = computed(() => Math.max(1, Math.floor(contentRect$1.value.h)) > 1);
 		const selection = computed(() => {
 			if (anchor.value == null || anchor.value === cursor.value) return null;
 			const start = Math.min(anchor.value, cursor.value);
@@ -6872,10 +7003,16 @@ const TInput = defineComponent({
 			return !focused.value || props.placeholderWhenFocused;
 		});
 		function ensureCursorVisible() {
-			const r = absRect.value;
-			const { hAll, w: contentW } = measureContent(r);
-			const width = Math.max(1, contentW);
-			const height = Math.max(1, hAll);
+			const r = contentRect$1.value;
+			const w = Math.max(0, Math.floor(r.w));
+			const h$1 = Math.max(0, Math.floor(r.h));
+			if (w <= 0 || h$1 <= 0) {
+				scrollX.value = 0;
+				scrollY.value = 0;
+				return;
+			}
+			const width = w;
+			const height = h$1;
 			const value = getValue();
 			const wrap = wrapMode.value;
 			const prefix = buildMentionPrefix(props.mentions, width);
@@ -6894,13 +7031,15 @@ const TInput = defineComponent({
 			else if (line > scrollY.value + height - 1) scrollY.value = clamp$3(line - (height - 1), 0, maxTop);
 		}
 		function setCursorByCell2D(cellX, cellY, extendSelection = false, e) {
-			const r = absRect.value;
-			const { w: contentW, padX } = measureContent(r);
-			const width = Math.max(1, contentW);
+			const r = contentRect$1.value;
+			const w = Math.max(0, Math.floor(r.w));
+			const h$1 = Math.max(0, Math.floor(r.h));
+			if (w <= 0 || h$1 <= 0) return;
+			const width = w;
 			const prefix = buildMentionPrefix(props.mentions, width);
 			const prefixCells = prefix.cells;
-			const localX = clamp$3(cellX - (r.x + padX), 0, Math.max(0, contentW - 1));
-			const localY = clamp$3(cellY - r.y, 0, Math.max(0, r.h - 1));
+			const localX = clamp$3(cellX - r.x, 0, Math.max(0, w - 1));
+			const localY = clamp$3(cellY - r.y, 0, Math.max(0, h$1 - 1));
 			const prefixVisible = scrollY.value === 0 && localY === 0 && prefixCells > 0;
 			if (prefixVisible && localX < prefixCells) {
 				for (const chip of prefix.chips) if (localX >= chip.start && localX < chip.end) {
@@ -6946,8 +7085,7 @@ const TInput = defineComponent({
 			compositionText.value = "";
 			pendingValue.value = nextValue;
 			if (wrapMode.value) {
-				const { w: contentW } = measureContent(absRect.value);
-				const w = Math.max(1, contentW);
+				const w = Math.max(1, Math.floor(contentRect$1.value.w));
 				const prefix = buildMentionPrefix(props.mentions, w);
 				const firstW = Math.max(1, w - prefix.cells);
 				desiredCol.value = indexToWrappedCellColFirstWidth(nextValue, c, firstW, w).col;
@@ -6966,8 +7104,7 @@ const TInput = defineComponent({
 			} else anchor.value = null;
 			cursor.value = clamp$3(nextCursor, 0, value.length);
 			if (wrapMode.value) {
-				const { w: contentW } = measureContent(absRect.value);
-				const w = Math.max(1, contentW);
+				const w = Math.max(1, Math.floor(contentRect$1.value.w));
 				const prefix = buildMentionPrefix(props.mentions, w);
 				const firstW = Math.max(1, w - prefix.cells);
 				desiredCol.value = indexToWrappedCellColFirstWidth(value, cursor.value, firstW, w).col;
@@ -6976,8 +7113,8 @@ const TInput = defineComponent({
 			scheduler.invalidate();
 		}
 		watch([
-			() => absRect.value.w,
-			() => absRect.value.h,
+			() => contentRect$1.value.w,
+			() => contentRect$1.value.h,
 			() => wrapMode.value
 		], () => {
 			ensureCursorVisible();
@@ -7026,14 +7163,15 @@ const TInput = defineComponent({
 				if (imeAnchor.value) imeAnchor.value = null;
 				return;
 			}
-			const r = absRect.value;
-			if (r.w <= 0 || r.h <= 0) {
+			const r = contentRect$1.value;
+			const w = Math.max(0, Math.floor(r.w));
+			const h$1 = Math.max(0, Math.floor(r.h));
+			if (w <= 0 || h$1 <= 0) {
 				imeAnchor.value = null;
 				return;
 			}
-			const { hAll, padX, w: contentW } = measureContent(r);
-			const width = Math.max(1, contentW);
-			const height = Math.max(1, hAll);
+			const width = w;
+			const height = h$1;
 			const placeholderVisible = shouldShowPlaceholder.value;
 			const offX = placeholderVisible ? 0 : scrollX.value;
 			const offY = placeholderVisible ? 0 : scrollY.value;
@@ -7050,7 +7188,7 @@ const TInput = defineComponent({
 			const cx = clamp$3(cxRaw, 0, Math.max(0, width - 1));
 			const cy = clamp$3(cyRaw, 0, Math.max(0, height - 1));
 			imeAnchor.value = {
-				cellX: r.x + padX + cx,
+				cellX: r.x + cx,
 				cellY: r.y + cy
 			};
 		});
@@ -7182,6 +7320,28 @@ const TInput = defineComponent({
 					return;
 				}
 			}
+			const base64EncodeBytes = (bytes) => {
+				const table = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+				let out = "";
+				for (let i = 0; i < bytes.length; i += 3) {
+					const a = bytes[i] ?? 0;
+					const b = bytes[i + 1] ?? 0;
+					const c = bytes[i + 2] ?? 0;
+					const triple = a << 16 | b << 8 | c;
+					out += table[triple >> 18 & 63] ?? "";
+					out += table[triple >> 12 & 63] ?? "";
+					out += i + 1 < bytes.length ? table[triple >> 6 & 63] ?? "" : "=";
+					out += i + 2 < bytes.length ? table[triple & 63] ?? "" : "=";
+				}
+				return out;
+			};
+			const base64EncodeText = (text) => {
+				if (typeof TextEncoder !== "undefined") return base64EncodeBytes(new TextEncoder().encode(text));
+				const bin = unescape(encodeURIComponent(text));
+				const bytes = new Uint8Array(bin.length);
+				for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
+				return base64EncodeBytes(bytes);
+			};
 			const copyText = async (text) => {
 				var _nav$clipboard, _proc$stdout, _proc$stdout2, _doc$body;
 				if (!text) return false;
@@ -7192,7 +7352,7 @@ const TInput = defineComponent({
 				} catch {}
 				const proc = globalThis.process;
 				if ((proc === null || proc === void 0 || (_proc$stdout = proc.stdout) === null || _proc$stdout === void 0 ? void 0 : _proc$stdout.write) && (proc === null || proc === void 0 || (_proc$stdout2 = proc.stdout) === null || _proc$stdout2 === void 0 ? void 0 : _proc$stdout2.isTTY)) try {
-					const base64 = typeof Buffer !== "undefined" ? Buffer.from(text, "utf-8").toString("base64") : btoa(unescape(encodeURIComponent(text)));
+					const base64 = base64EncodeText(text);
 					proc.stdout.write(`\u001B]52;c;${base64}\u0007`);
 					return true;
 				} catch {}
@@ -7259,8 +7419,7 @@ const TInput = defineComponent({
 			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
 				e.preventDefault();
 				const wrap = wrapMode.value;
-				const { w: contentW } = measureContent(absRect.value);
-				const width = Math.max(1, contentW);
+				const width = Math.max(1, Math.floor(contentRect$1.value.w));
 				const prefix = buildMentionPrefix(props.mentions, width);
 				const firstW = Math.max(1, width - prefix.cells);
 				const { line, col, lines } = wrap ? indexToWrappedCellColFirstWidth(value, cursor.value, firstW, width) : indexToLineCellCol(value, cursor.value);
@@ -7478,6 +7637,7 @@ const TInput = defineComponent({
 				props.mentions,
 				props.placeholder,
 				props.placeholderWhenFocused,
+				props.padding,
 				props.style,
 				props.autoFocus,
 				props.cursorBlink,
@@ -7496,8 +7656,10 @@ const TInput = defineComponent({
 			],
 			paint: () => {
 				if (!visible.value) return;
-				const r = absRect.value;
-				if (r.w <= 0 || r.h <= 0) return;
+				const rAll = absRect.value;
+				const wAll = Math.max(0, Math.floor(rAll.w));
+				const hAll = Math.max(0, Math.floor(rAll.h));
+				if (wAll <= 0 || hAll <= 0) return;
 				const style = props.style ?? defaultStyle.value;
 				const placeholderVisible = shouldShowPlaceholder.value;
 				const offX = placeholderVisible ? 0 : scrollX.value;
@@ -7515,14 +7677,23 @@ const TInput = defineComponent({
 					...style,
 					fg: "white"
 				} : style;
-				const { wAll, padX, w: contentW } = measureContent(r);
-				const x0 = r.x + padX;
-				const width = Math.max(1, contentW);
+				const blankAll = " ".repeat(wAll);
+				for (let row = 0; row < hAll; row++) terminal.write(blankAll, {
+					x: rAll.x,
+					y: rAll.y + row,
+					style: baseStyle
+				});
+				const r = contentRect$1.value;
+				const w = Math.max(0, Math.floor(r.w));
+				const h$1 = Math.max(0, Math.floor(r.h));
+				if (w <= 0 || h$1 <= 0) return;
+				const x0 = r.x;
+				const width = Math.max(1, w);
 				const prefix = buildMentionPrefix(props.mentions, width);
 				const prefixCells = prefix.cells;
 				const firstWidth = Math.max(1, Math.max(1, width) - prefixCells);
 				const lines = wrap ? wrapToLinesFirstWidth(text, firstWidth, width) : computeLines(text);
-				for (let row = 0; row < r.h; row++) {
+				for (let row = 0; row < h$1; row++) {
 					const lineIndex = offY + row;
 					const info = lines[lineIndex];
 					const raw = info ? text.slice(info.start, info.end).replace(/[\r\n]/g, "") : "";
@@ -7531,12 +7702,7 @@ const TInput = defineComponent({
 					const rowTextW = hasPrefix ? firstWidth : width;
 					const rawVisible = wrap ? sliceByCellsWindow(raw, 0, rowTextW) : sliceByCellsWindow(raw, offX, rowTextW);
 					const visible$1 = padEndByCells$1(rawVisible, rowTextW);
-					terminal.write(" ".repeat(wAll), {
-						x: r.x,
-						y: r.y + row,
-						style: baseStyle
-					});
-					if (contentW <= 0) continue;
+					const y = r.y + row;
 					if (hasPrefix) {
 						const chipStyle = {
 							...style,
@@ -7547,18 +7713,18 @@ const TInput = defineComponent({
 							if (!chip.label) continue;
 							terminal.write(chip.label, {
 								x: x0 + chip.start,
-								y: r.y + row,
+								y,
 								style: chipStyle
 							});
 						}
 						terminal.write(visible$1, {
 							x: x0 + rowPrefixCells,
-							y: r.y + row,
+							y,
 							style: baseStyle
 						});
 					} else terminal.write(visible$1, {
 						x: x0,
-						y: r.y + row,
+						y,
 						style: baseStyle
 					});
 				}
@@ -7566,7 +7732,7 @@ const TInput = defineComponent({
 				if (sel && !placeholderVisible) {
 					const bg = "blueBright";
 					const fg = "black";
-					for (let row = 0; row < r.h; row++) {
+					for (let row = 0; row < h$1; row++) {
 						const lineIndex = offY + row;
 						const info = lines[lineIndex];
 						if (!info) continue;
@@ -7580,14 +7746,14 @@ const TInput = defineComponent({
 							for (let i = info.start; i < info.end;) {
 								const ch = readCodePointAt(text, i);
 								const nextI = i + ch.length;
-								const w = charCellWidth(ch);
-								if (xCell$1 + w > rowTextW) break;
+								const w$1 = charCellWidth(ch);
+								if (xCell$1 + w$1 > rowTextW) break;
 								if (i >= sel.start && i < sel.end) terminal.put(xBase + xCell$1, y, ch, {
 									...style,
 									fg,
 									bg
 								});
-								xCell$1 += w;
+								xCell$1 += w$1;
 								i = nextI;
 								if (xCell$1 >= rowTextW) break;
 							}
@@ -7598,8 +7764,8 @@ const TInput = defineComponent({
 						for (let i = info.start; i < info.end;) {
 							const ch = readCodePointAt(text, i);
 							const nextI = i + ch.length;
-							const w = charCellWidth(ch);
-							const nextCell = xCell + w;
+							const w$1 = charCellWidth(ch);
+							const nextCell = xCell + w$1;
 							if (nextCell <= offX) {
 								xCell = nextCell;
 								i = nextI;
@@ -7607,7 +7773,7 @@ const TInput = defineComponent({
 							}
 							if (xCell >= offX + rowTextW) break;
 							const localX = xCell - offX;
-							if (localX + w > rowTextW) break;
+							if (localX + w$1 > rowTextW) break;
 							if (i >= sel.start && i < sel.end) terminal.put(xBase + localX, y, ch, {
 								...style,
 								fg,
@@ -7629,7 +7795,7 @@ const TInput = defineComponent({
 					const pos = wrap ? indexToWrappedCellColFirstWidth(cursorText, cursor.value, firstW, wAll$1) : indexToLineCellCol(cursorText, cursor.value);
 					const cx0 = (pos.line === 0 ? prefixCells : 0) + (pos.col - offX);
 					const cy = pos.line - offY;
-					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < r.h) {
+					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < h$1) {
 						const x = x0 + cx0;
 						const y = r.y + cy;
 						const avail = Math.max(0, width - cx0);
@@ -7657,7 +7823,7 @@ const TInput = defineComponent({
 					const pos = wrap ? indexToWrappedCellColFirstWidth(cursorText, cursor.value, firstW, wAll$1) : indexToLineCellCol(cursorText, cursor.value);
 					const cx0 = (pos.line === 0 ? prefixCells : 0) + (pos.col - offX);
 					const cy = pos.line - offY;
-					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < r.h) {
+					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < h$1) {
 						const y = r.y + cy;
 						let x = x0 + cx0;
 						let cell = null;
@@ -7861,7 +8027,11 @@ const TInputBox = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: Number,
+			type: [
+				Number,
+				String,
+				Array
+			],
 			default: 0
 		},
 		modelValue: {
@@ -7902,8 +8072,9 @@ const TInputBox = defineComponent({
 		"blur"
 	],
 	setup(props, { emit }) {
-		const innerW = computed(() => Math.max(0, Math.floor(props.w) - 2 - Math.max(0, Math.floor(props.padding)) * 2));
-		const innerH = computed(() => Math.max(1, Math.floor(props.h) - 2 - Math.max(0, Math.floor(props.padding)) * 2));
+		const pad = computed(() => normalizePadding(props.padding));
+		const innerW = computed(() => Math.max(0, Math.floor(props.w) - 2 - pad.value.left - pad.value.right));
+		const innerH = computed(() => Math.max(1, Math.floor(props.h) - 2 - pad.value.top - pad.value.bottom));
 		return () => h(TBox, {
 			x: props.x,
 			y: props.y,
@@ -7964,6 +8135,14 @@ const TList = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		items: {
 			type: Array,
 			required: true
@@ -8022,8 +8201,9 @@ const TList = defineComponent({
 		watchEffect(() => {
 			active.value = clamp$2(props.modelValue, 0, Math.max(0, props.items.length - 1));
 		});
+		const contentRect$1 = computed(() => insetRect(absRect.value, props.padding));
 		function ensureActiveVisible() {
-			const h$1 = Math.max(0, props.h);
+			const h$1 = Math.max(0, Math.floor(contentRect$1.value.h));
 			if (h$1 <= 0) return;
 			const maxTop = Math.max(0, props.items.length - h$1);
 			scrollTop.value = clamp$2(scrollTop.value, 0, maxTop);
@@ -8033,7 +8213,7 @@ const TList = defineComponent({
 		watch([
 			() => active.value,
 			() => props.items.length,
-			() => props.h
+			() => contentRect$1.value.h
 		], () => {
 			ensureActiveVisible();
 		}, { immediate: true });
@@ -8118,7 +8298,8 @@ const TList = defineComponent({
 			focusable: true,
 			handlers: {
 				click: (e) => {
-					const r = absRect.value;
+					const r = contentRect$1.value;
+					if (e.cellY < r.y || e.cellY >= r.y + r.h) return;
 					const idx = scrollTop.value + (e.cellY - r.y);
 					if (idx >= 0 && idx < props.items.length) {
 						active.value = idx;
@@ -8127,7 +8308,8 @@ const TList = defineComponent({
 					} else emit("close");
 				},
 				dblclick: (e) => {
-					const r = absRect.value;
+					const r = contentRect$1.value;
+					if (e.cellY < r.y || e.cellY >= r.y + r.h) return;
 					const idx = scrollTop.value + (e.cellY - r.y);
 					if (idx >= 0 && idx < props.items.length) commit(idx);
 				},
@@ -8135,7 +8317,8 @@ const TList = defineComponent({
 					const delta = e.deltaY ?? 0;
 					if (!delta) return;
 					const dir = delta > 0 ? 1 : -1;
-					const maxTop = Math.max(0, props.items.length - props.h);
+					const h$1 = Math.max(0, Math.floor(contentRect$1.value.h));
+					const maxTop = Math.max(0, props.items.length - h$1);
 					const next = clamp$2(scrollTop.value + dir, 0, maxTop);
 					if (next !== scrollTop.value) {
 						scrollTop.value = next;
@@ -8184,9 +8367,17 @@ const TList = defineComponent({
 			],
 			paint: () => {
 				if (!visible.value) return;
-				const r = absRect.value;
-				if (r.w <= 0 || r.h <= 0) return;
+				const rAll = absRect.value;
+				if (rAll.w <= 0 || rAll.h <= 0) return;
 				const base = props.style ?? defaultStyle.value;
+				const r = contentRect$1.value;
+				const blankAll = " ".repeat(rAll.w);
+				for (let i = 0; i < rAll.h; i++) terminal.write(blankAll, {
+					x: rAll.x,
+					y: rAll.y + i,
+					style: base
+				});
+				if (r.w <= 0 || r.h <= 0) return;
 				const top = clamp$2(scrollTop.value, 0, Math.max(0, props.items.length - r.h));
 				for (let i = 0; i < r.h; i++) {
 					const idx = top + i;
@@ -8247,6 +8438,14 @@ const TPathPicker = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		workspace: {
 			type: String,
 			required: true
@@ -8304,13 +8503,12 @@ const TPathPicker = defineComponent({
 		const scrollTop = ref(0);
 		const error = ref(null);
 		const inputH = 1;
-		const listH = computed(() => Math.max(0, Math.floor(props.h) - inputH));
-		const absListRect = computed(() => {
+		const absRect = computed(() => {
 			const raw = {
 				x: props.x,
-				y: props.y + inputH,
+				y: props.y,
 				w: props.w,
-				h: listH.value
+				h: props.h
 			};
 			const translated = translateRect(raw, layout.originX, layout.originY);
 			if (!layout.clipRect) return translated;
@@ -8321,6 +8519,49 @@ const TPathPicker = defineComponent({
 				h: 0
 			};
 		});
+		const contentRect$1 = computed(() => insetRect(absRect.value, props.padding));
+		const listH = computed(() => Math.max(0, Math.floor(contentRect$1.value.h) - inputH));
+		const absListRect = computed(() => {
+			const c = contentRect$1.value;
+			const listRaw = {
+				x: c.x,
+				y: c.y + inputH,
+				w: c.w,
+				h: listH.value
+			};
+			return intersectRect(listRaw, absRect.value) ?? {
+				x: 0,
+				y: 0,
+				w: 0,
+				h: 0
+			};
+		});
+		useRenderNode(() => ({
+			zIndex: props.zIndex - 1,
+			rect: absRect.value,
+			deps: [
+				visible.value,
+				absRect.value,
+				props.style,
+				defaultStyle.value
+			],
+			paint: (dirtyRows) => {
+				if (!visible.value) return;
+				const r = absRect.value;
+				if (r.w <= 0 || r.h <= 0) return;
+				const base = props.style ?? defaultStyle.value;
+				if (!dirtyRows) {
+					terminal.fill(r.x, r.y, r.w, r.h, " ", base);
+					return;
+				}
+				const y0 = Math.floor(r.y);
+				const y1 = y0 + Math.max(0, Math.floor(r.h));
+				for (const y of dirtyRows) {
+					if (y < y0 || y >= y1) continue;
+					terminal.fill(r.x, y, r.w, 1, " ", base);
+				}
+			}
+		}));
 		function ensureActiveVisible() {
 			const h$1 = Math.max(0, listH.value);
 			if (h$1 <= 0) {
@@ -8538,7 +8779,7 @@ const TPathPicker = defineComponent({
 			deps: [
 				visible.value,
 				absListRect.value,
-				props.w,
+				contentRect$1.value.w,
 				listH.value,
 				props.style,
 				defaultStyle.value,
@@ -8582,9 +8823,9 @@ const TPathPicker = defineComponent({
 			}
 		}));
 		return () => h("span", rootProps, [h(TInput, {
-			"x": props.x,
-			"y": props.y,
-			"w": props.w,
+			"x": contentRect$1.value.x,
+			"y": contentRect$1.value.y,
+			"w": contentRect$1.value.w,
 			"h": inputH,
 			"zIndex": props.zIndex,
 			"modelValue": props.modelValue,
@@ -8634,14 +8875,30 @@ const TSelect = defineComponent({
 			type: Number,
 			default: 0
 		},
+		padding: {
+			type: [
+				Number,
+				String,
+				Array
+			],
+			default: 0
+		},
 		options: {
 			type: Array,
 			required: true
 		},
 		modelValue: {
-			type: Number,
+			type: [Number, Array],
 			default: 0
 		},
+		multiple: {
+			type: Boolean,
+			default: false
+		},
+		multipleEmit: {
+			type: String,
+			default: "value"
+		},
 		style: {
 			type: Object,
 			default: void 0
@@ -8662,6 +8919,7 @@ const TSelect = defineComponent({
 	emits: [
 		"update:modelValue",
 		"change",
+		"confirm",
 		"close",
 		"focus",
 		"blur",
@@ -8674,7 +8932,18 @@ const TSelect = defineComponent({
 		const parentEventZ = inject(EventZIndexContextKey, computed(() => 0));
 		const eventZ = computed(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
 		const focused = ref(false);
-		const active = ref(props.modelValue);
+		const initialActive = (() => {
+			const max = Math.max(0, props.options.length - 1);
+			if (!props.multiple) {
+				const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+				return clamp(idx, 0, max);
+			}
+			const selected = Array.isArray(props.modelValue) ? props.modelValue : [];
+			const first = selected[0] ?? 0;
+			return clamp(first, 0, max);
+		})();
+		const active = ref(initialActive);
+		const scrollTopLine = ref(0);
 		const absRect = computed(() => {
 			const raw = {
 				x: props.x,
@@ -8691,39 +8960,201 @@ const TSelect = defineComponent({
 				h: 0
 			};
 		});
+		const contentRect$1 = computed(() => insetRect(absRect.value, props.padding));
 		watchEffect(() => {
-			active.value = clamp(props.modelValue, 0, Math.max(0, props.options.length - 1));
+			const max = Math.max(0, props.options.length - 1);
+			if (!props.multiple) {
+				const idx = typeof props.modelValue === "number" ? props.modelValue : 0;
+				active.value = clamp(idx, 0, max);
+				return;
+			}
+			active.value = clamp(active.value, 0, max);
 		});
+		function getPrefixCells() {
+			return props.multiple ? textCellWidth$1("[x] ") : 0;
+		}
 		function getOptionLabel(opt) {
 			return typeof opt === "string" ? opt : opt.label;
 		}
 		function getOptionDetail(opt) {
 			return typeof opt === "string" ? void 0 : opt.detail;
 		}
-		function commit(index) {
+		function commitSingle(index) {
 			const next = clamp(index, 0, Math.max(0, props.options.length - 1));
 			active.value = next;
 			emit("update:modelValue", next);
 			const opt = props.options[next];
 			emit("change", opt ? getOptionLabel(opt) : null);
 		}
+		function getSelectedIndices() {
+			if (!props.multiple) return [];
+			const max = Math.max(0, props.options.length - 1);
+			const raw = Array.isArray(props.modelValue) ? props.modelValue : [];
+			const set = new Set();
+			for (const v of raw) {
+				if (typeof v !== "number" || !Number.isFinite(v)) continue;
+				set.add(clamp(Math.trunc(v), 0, max));
+			}
+			return [...set].sort((a, b) => a - b);
+		}
+		function makeMultiplePayload(indices) {
+			const values = indices.map((i) => props.options[i]).filter(Boolean).map((opt) => getOptionLabel(opt));
+			return {
+				indices,
+				values
+			};
+		}
+		function emitMultiple(name, indices) {
+			const payload = makeMultiplePayload(indices);
+			if (props.multipleEmit === "index") {
+				emit(name, payload.indices);
+				return;
+			}
+			if (props.multipleEmit === "both") {
+				emit(name, payload);
+				return;
+			}
+			emit(name, payload.values);
+		}
+		function toggleMultiple(index) {
+			const nextIndex = clamp(index, 0, Math.max(0, props.options.length - 1));
+			active.value = nextIndex;
+			const set = new Set(getSelectedIndices());
+			if (set.has(nextIndex)) set.delete(nextIndex);
+			else set.add(nextIndex);
+			const indices = [...set].sort((a, b) => a - b);
+			emit("update:modelValue", indices);
+			emitMultiple("change", indices);
+		}
+		function confirmMultiple() {
+			const indices = getSelectedIndices();
+			emitMultiple("confirm", indices);
+		}
+		function commit(index) {
+			if (props.multiple) toggleMultiple(index);
+			else commitSingle(index);
+		}
+		function computeColumnLayout(totalW, hasDetail, prefixCells) {
+			totalW = Math.max(0, Math.floor(totalW));
+			if (!hasDetail || totalW <= 0) return {
+				labelW: totalW,
+				gapW: 0,
+				detailW: 0
+			};
+			const gapW = totalW >= 12 ? 2 : 1;
+			const minLabelText = 6;
+			const minLabelW = Math.min(totalW, prefixCells + minLabelText);
+			const minDetailW = Math.min(12, Math.max(6, Math.floor(totalW / 4)));
+			let detailW = clamp(Math.floor(totalW * .35), minDetailW, Math.max(0, totalW - gapW - minLabelW));
+			let labelW = Math.max(0, totalW - gapW - detailW);
+			if (labelW < minLabelW) {
+				detailW = Math.max(0, totalW - gapW - minLabelW);
+				labelW = Math.max(0, totalW - gapW - detailW);
+			}
+			if (detailW <= 0) return {
+				labelW: totalW,
+				gapW: 0,
+				detailW: 0
+			};
+			return {
+				labelW,
+				gapW,
+				detailW
+			};
+		}
+		function safeWrap(text, width) {
+			width = Math.max(0, Math.floor(width));
+			if (width <= 0) return [""];
+			return wrapByCells(text, width).map((l) => sliceByCells(l, width));
+		}
+		const optionLayouts = computed(() => {
+			const r = contentRect$1.value;
+			const w = Math.max(0, Math.floor(r.w));
+			const prefixCells = getPrefixCells();
+			const layouts = [];
+			const flat = [];
+			const starts = Array.from({ length: props.options.length }, () => 0);
+			let line = 0;
+			for (let i = 0; i < props.options.length; i++) {
+				const opt = props.options[i];
+				const label = sanitizeInlineText(getOptionLabel(opt));
+				const detail = getOptionDetail(opt);
+				const safeDetail = detail ? sanitizeInlineText(detail) : "";
+				const cols = computeColumnLayout(w, Boolean(safeDetail), prefixCells);
+				const labelTextW = Math.max(0, cols.labelW - prefixCells);
+				const labelLines = safeWrap(label, labelTextW);
+				const detailLines = cols.detailW > 0 && safeDetail ? safeWrap(safeDetail, cols.detailW) : [];
+				const height = Math.max(1, labelLines.length, detailLines.length || 0);
+				layouts.push({
+					labelLines,
+					detailLines,
+					height,
+					labelW: cols.labelW,
+					gapW: cols.gapW,
+					detailW: cols.detailW
+				});
+				starts[i] = line;
+				for (let j = 0; j < height; j++) flat.push({
+					optionIndex: i,
+					subLine: j
+				});
+				line += height;
+			}
+			return {
+				layouts,
+				flat,
+				starts,
+				totalLines: line,
+				contentW: w,
+				prefixCells
+			};
+		});
+		function ensureActiveVisible() {
+			var _layouts$idx;
+			const viewH = Math.max(0, Math.floor(contentRect$1.value.h));
+			const { layouts, starts, totalLines } = optionLayouts.value;
+			if (viewH <= 0 || totalLines <= 0) {
+				scrollTopLine.value = 0;
+				return;
+			}
+			const maxTop = Math.max(0, totalLines - viewH);
+			scrollTopLine.value = clamp(scrollTopLine.value, 0, maxTop);
+			const idx = clamp(active.value, 0, Math.max(0, layouts.length - 1));
+			const start = starts[idx] ?? 0;
+			const height = ((_layouts$idx = layouts[idx]) === null || _layouts$idx === void 0 ? void 0 : _layouts$idx.height) ?? 1;
+			const end = start + height - 1;
+			if (start < scrollTopLine.value) scrollTopLine.value = clamp(start, 0, maxTop);
+			else if (end >= scrollTopLine.value + viewH) scrollTopLine.value = clamp(end - (viewH - 1), 0, maxTop);
+		}
 		function onKeydown(e) {
 			emit("keydown", e);
 			if (e.key === "ArrowUp") {
 				e.preventDefault();
 				active.value = clamp(active.value - 1, 0, Math.max(0, props.options.length - 1));
-				emit("update:modelValue", active.value);
+				if (!props.multiple) emit("update:modelValue", active.value);
+				ensureActiveVisible();
 				scheduler.invalidate();
 				return;
 			}
 			if (e.key === "ArrowDown") {
 				e.preventDefault();
 				active.value = clamp(active.value + 1, 0, Math.max(0, props.options.length - 1));
-				emit("update:modelValue", active.value);
+				if (!props.multiple) emit("update:modelValue", active.value);
+				ensureActiveVisible();
 				scheduler.invalidate();
 				return;
 			}
+			if (props.multiple && (e.code === "Space" || e.key === " " || e.key === "Spacebar")) {
+				e.preventDefault();
+				toggleMultiple(active.value);
+				return;
+			}
 			if (e.key === "Enter") {
+				if (props.multiple) {
+					e.preventDefault();
+					confirmMultiple();
+					return;
+				}
 				commit(active.value);
 				return;
 			}
@@ -8739,11 +9170,31 @@ const TSelect = defineComponent({
 			focusable: true,
 			handlers: {
 				click: (e) => {
-					const r = absRect.value;
-					const idx = e.cellY - r.y;
-					if (idx >= 0 && idx < props.options.length) commit(idx);
+					const r = contentRect$1.value;
+					if (e.cellY < r.y || e.cellY >= r.y + r.h) {
+						emit("close");
+						return;
+					}
+					const localRow = e.cellY - r.y;
+					const { flat } = optionLayouts.value;
+					const line = flat[scrollTopLine.value + localRow];
+					if (line) commit(line.optionIndex);
 					else emit("close");
 				},
+				wheel: (e) => {
+					const delta = e.deltaY ?? 0;
+					if (!delta) return;
+					const dir = delta > 0 ? 1 : -1;
+					const r = contentRect$1.value;
+					const viewH = Math.max(0, Math.floor(r.h));
+					const { totalLines } = optionLayouts.value;
+					const maxTop = Math.max(0, totalLines - viewH);
+					const next = clamp(scrollTopLine.value + dir, 0, maxTop);
+					if (next !== scrollTopLine.value) {
+						scrollTopLine.value = next;
+						scheduler.invalidate();
+					}
+				},
 				focus: () => {
 					focused.value = true;
 					emit("focus");
@@ -8758,6 +9209,10 @@ const TSelect = defineComponent({
 				keydown: onKeydown
 			}
 		}));
+		watchEffect(() => {
+			optionLayouts.value;
+			ensureActiveVisible();
+		});
 		watchEffect(() => {
 			if (!props.autoFocus) return;
 			if (!visible.value) return;
@@ -8775,20 +9230,25 @@ const TSelect = defineComponent({
 				absRect.value,
 				props.w,
 				props.h,
+				props.padding,
 				props.options,
 				props.modelValue,
+				props.multiple,
+				props.multipleEmit,
 				props.style,
 				props.highlightStyle,
 				focused.value,
 				active.value,
+				scrollTopLine.value,
+				optionLayouts.value,
 				defaultStyle.value
 			],
 			paint: () => {
 				if (!visible.value) return;
-				const r = absRect.value;
-				if (r.w <= 0 || r.h <= 0) return;
+				const rAll = absRect.value;
+				if (rAll.w <= 0 || rAll.h <= 0) return;
 				const base = props.style ?? defaultStyle.value;
-				const selectedBase = props.highlightStyle ?? {
+				const highlightBase = props.highlightStyle ?? {
 					...base,
 					bg: "yellow",
 					fg: "black"
@@ -8797,57 +9257,79 @@ const TSelect = defineComponent({
 					...base,
 					dim: true
 				};
-				const selectedDetailStyle = {
-					...selectedBase,
+				const highlightDetailStyle = {
+					...highlightBase,
 					dim: true
 				};
-				for (let i = 0; i < r.h; i++) {
-					const opt = props.options[i];
-					if (!opt) {
-						terminal.write(" ".repeat(r.w), {
+				const blankAll = " ".repeat(rAll.w);
+				for (let i = 0; i < rAll.h; i++) terminal.write(blankAll, {
+					x: rAll.x,
+					y: rAll.y + i,
+					style: base
+				});
+				const r = contentRect$1.value;
+				if (r.w <= 0 || r.h <= 0) return;
+				const { layouts, flat, totalLines, prefixCells } = optionLayouts.value;
+				const selectedSet = props.multiple ? new Set(getSelectedIndices()) : null;
+				const top = clamp(scrollTopLine.value, 0, Math.max(0, totalLines - r.h));
+				const prefixSpaces = props.multiple ? " ".repeat(prefixCells) : "";
+				const blank = " ".repeat(r.w);
+				for (let row = 0; row < r.h; row++) {
+					const y = r.y + row;
+					const lineIdx = top + row;
+					const line = flat[lineIdx];
+					if (!line) {
+						terminal.write(blank, {
 							x: r.x,
-							y: r.y + i,
+							y,
 							style: base
 						});
 						continue;
 					}
-					const isSelected = i === active.value;
-					const label = sanitizeInlineText(getOptionLabel(opt));
-					const detail = getOptionDetail(opt);
-					const rawDetail = detail ? sanitizeInlineText(detail) : "";
-					const labelCells = textCellWidth$1(label);
-					const minGap = 2;
-					const availableForDetail = r.w - labelCells - minGap;
-					if (rawDetail && availableForDetail >= 4) {
-						const labelStyle = isSelected ? selectedBase : base;
-						terminal.write(label, {
+					const opt = props.options[line.optionIndex];
+					if (!opt) {
+						terminal.write(blank, {
 							x: r.x,
-							y: r.y + i,
-							style: labelStyle
-						});
-						const detailCells = textCellWidth$1(rawDetail);
-						const actualDetailWidth = Math.min(detailCells, availableForDetail);
-						const gapWidth = r.w - labelCells - actualDetailWidth;
-						const gapStyle = isSelected ? selectedBase : base;
-						terminal.write(" ".repeat(gapWidth), {
-							x: r.x + labelCells,
-							y: r.y + i,
-							style: gapStyle
-						});
-						const detailText = sliceByCells(rawDetail, availableForDetail);
-						const dStyle = isSelected ? selectedDetailStyle : detailDimStyle;
-						terminal.write(detailText, {
-							x: r.x + labelCells + gapWidth,
-							y: r.y + i,
-							style: dStyle
+							y,
+							style: base
 						});
-					} else {
-						const line = padEndByCells(sliceByCells(label, r.w), r.w);
-						const style = isSelected ? selectedBase : base;
-						terminal.write(line, {
-							x: r.x,
-							y: r.y + i,
-							style
+						continue;
+					}
+					const isActiveOpt = line.optionIndex === active.value;
+					const isHighlighted = props.multiple ? focused.value && isActiveOpt : isActiveOpt;
+					const rowStyle = isHighlighted ? highlightBase : base;
+					const detailStyle = isHighlighted ? highlightDetailStyle : detailDimStyle;
+					terminal.write(blank, {
+						x: r.x,
+						y,
+						style: rowStyle
+					});
+					const layout$1 = layouts[line.optionIndex];
+					const labelLine = (layout$1 === null || layout$1 === void 0 ? void 0 : layout$1.labelLines[line.subLine]) ?? "";
+					const prevVisibleLine = row > 0 ? flat[lineIdx - 1] : void 0;
+					const isFirstVisibleLineOfOption = !prevVisibleLine || prevVisibleLine.optionIndex !== line.optionIndex;
+					const detailLine = (() => {
+						if (!layout$1 || layout$1.detailW <= 0 || layout$1.detailLines.length === 0) return "";
+						if (layout$1.detailLines.length === 1) return isFirstVisibleLineOfOption ? layout$1.detailLines[0] ?? "" : "";
+						return layout$1.detailLines[line.subLine] ?? "";
+					})();
+					const isChecked = props.multiple ? selectedSet.has(line.optionIndex) : isActiveOpt;
+					const prefix = props.multiple ? isChecked ? "[x] " : "[ ] " : "";
+					const prefixPad = props.multiple ? isFirstVisibleLineOfOption ? prefix : prefixSpaces : "";
+					const labelTextW = Math.max(0, ((layout$1 === null || layout$1 === void 0 ? void 0 : layout$1.labelW) ?? r.w) - prefixCells);
+					const labelText = labelTextW > 0 ? sliceByCells(labelLine, labelTextW) : "";
+					const outLabel = padEndByCells(sliceByCells(`${prefixPad}${labelText}`, (layout$1 === null || layout$1 === void 0 ? void 0 : layout$1.labelW) ?? r.w), (layout$1 === null || layout$1 === void 0 ? void 0 : layout$1.labelW) ?? r.w);
+					terminal.write(outLabel, {
+						x: r.x,
+						y,
+						style: rowStyle
+					});
+					if (((layout$1 === null || layout$1 === void 0 ? void 0 : layout$1.detailW) ?? 0) > 0) {
+						const outDetail = padEndByCells(sliceByCells(detailLine, layout$1.detailW), layout$1.detailW);
+						terminal.write(outDetail, {
+							x: r.x + layout$1.labelW + layout$1.gapW,
+							y,
+							style: detailStyle
 						});
 					}
 				}