@simon_he/vue-tui 0.0.2 → 0.0.3

package/dist/index.js

@@ -3611,81 +3611,6 @@ 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
@@ -3726,14 +3651,6 @@ const TAnchor = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		focusable: {
 			type: Boolean,
 			default: false
@@ -3845,11 +3762,9 @@ const TAnchor = defineComponent({
 		const childStack = computed(() => render.createStack(parentStack.value, props.zIndex));
 		watchEffect(() => {
 			const translated = rawRect.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;
+			childLayout.originX = translated.x;
+			childLayout.originY = translated.y;
+			childLayout.clipRect = rect.value;
 		});
 		provide(LayoutContextKey, childLayout);
 		provide(RenderStackKey, childStack);
@@ -4032,11 +3947,7 @@ const TBox = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
+			type: Number,
 			default: 0
 		},
 		scrollX: {
@@ -4129,14 +4040,17 @@ const TBox = defineComponent({
 		watchEffect(() => {
 			const r = absRect.value;
 			const borderInset = props.border ? 1 : 0;
-			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)
+			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 content = insetRect(inner, props.padding);
-			let contentRect$1 = intersectRect(content, inner);
+			let contentRect$1 = intersectRect(content, r);
 			if (parent.clipRect && contentRect$1) contentRect$1 = intersectRect(contentRect$1, parent.clipRect);
 			if (!contentRect$1) contentRect$1 = {
 				x: 0,
@@ -4230,14 +4144,6 @@ const TText = defineComponent({
 			type: Number,
 			default: void 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		style: {
 			type: Object,
 			default: void 0
@@ -4255,21 +4161,16 @@ 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 = contentW.value;
+			const w = props.w ?? computeDefaultWidth(props.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 = 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 width = props.w ?? computeDefaultWidth(props.value);
+			const height = props.h ?? (props.wrap ? lines.value.length || 1 : lines.value.length || 1);
 			const raw = {
 				x: props.x,
 				y: props.y,
@@ -4302,14 +4203,10 @@ 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, h$1);
+				const maxLines = Math.min(out.length, Math.max(0, Math.floor(r.h)));
 				const paintRow = (y) => {
 					const i = y - r.y;
 					if (i < 0 || i >= r.h) return;
@@ -4318,12 +4215,10 @@ const TText = defineComponent({
 						y,
 						style
 					});
-					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,
+					if (i < 0 || i >= maxLines) return;
+					const clipped = sliceByCells(out[i] ?? "", r.w);
+					terminal.write(padEndByCells(clipped, r.w), {
+						x: r.x,
 						y,
 						style
 					});
@@ -4370,14 +4265,6 @@ const TView = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		scrollX: {
 			type: Number,
 			default: 0
@@ -4485,11 +4372,9 @@ const TView = defineComponent({
 		const childStack = computed(() => render.createStack(parentStack.value, props.zIndex));
 		watchEffect(() => {
 			const translated = rawRect.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;
+			childLayout.originX = translated.x - Math.floor(props.scrollX);
+			childLayout.originY = translated.y - Math.floor(props.scrollY);
+			childLayout.clipRect = rect.value;
 		});
 		provide(LayoutContextKey, childLayout);
 		provide(RenderStackKey, childStack);
@@ -4695,10 +4580,10 @@ function computePosition(opts) {
 }
 function contentRect(opts) {
 	const borderInset = opts.border ? 1 : 0;
-	const pad = normalizePadding(opts.padding);
+	const pad = Math.max(0, Math.floor(opts.padding));
 	return {
-		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)
+		w: Math.max(0, Math.floor(opts.w) - borderInset * 2 - pad * 2),
+		h: Math.max(0, Math.floor(opts.h) - borderInset * 2 - pad * 2)
 	};
 }
 const DialogSurface = defineComponent({
@@ -4721,11 +4606,7 @@ const DialogSurface = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
+			type: Number,
 			default: 1
 		},
 		zIndex: {
@@ -4999,11 +4880,7 @@ const TDialog = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
+			type: Number,
 			default: 1
 		},
 		zIndex: {
@@ -6070,14 +5947,6 @@ const TFlow = defineComponent({
 			type: Number,
 			required: true
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		items: {
 			type: Array,
 			required: true
@@ -6100,29 +5969,25 @@ 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,
-			padding: props.padding
+			zIndex: props.zIndex
 		}, () => 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: innerW.value,
+				w: props.w,
 				h: Math.max(0, Math.floor(props.itemSize))
 			} : {
 				x: offset,
 				y: 0,
 				w: Math.max(0, Math.floor(props.itemSize)),
-				h: innerH.value
+				h: props.h
 			};
 			return h(TView, {
 				key: index,
@@ -6530,14 +6395,6 @@ const TInput = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: "0 1"
-		},
 		modelValue: {
 			type: String,
 			required: true
@@ -6649,6 +6506,19 @@ 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);
@@ -6665,6 +6535,7 @@ 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,
@@ -6926,8 +6797,6 @@ 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);
@@ -7003,16 +6872,10 @@ const TInput = defineComponent({
 			return !focused.value || props.placeholderWhenFocused;
 		});
 		function ensureCursorVisible() {
-			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 r = absRect.value;
+			const { hAll, w: contentW } = measureContent(r);
+			const width = Math.max(1, contentW);
+			const height = Math.max(1, hAll);
 			const value = getValue();
 			const wrap = wrapMode.value;
 			const prefix = buildMentionPrefix(props.mentions, width);
@@ -7031,15 +6894,13 @@ 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 = 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 r = absRect.value;
+			const { w: contentW, padX } = measureContent(r);
+			const width = Math.max(1, contentW);
 			const prefix = buildMentionPrefix(props.mentions, width);
 			const prefixCells = prefix.cells;
-			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 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 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) {
@@ -7085,7 +6946,8 @@ const TInput = defineComponent({
 			compositionText.value = "";
 			pendingValue.value = nextValue;
 			if (wrapMode.value) {
-				const w = Math.max(1, Math.floor(contentRect$1.value.w));
+				const { w: contentW } = measureContent(absRect.value);
+				const w = Math.max(1, contentW);
 				const prefix = buildMentionPrefix(props.mentions, w);
 				const firstW = Math.max(1, w - prefix.cells);
 				desiredCol.value = indexToWrappedCellColFirstWidth(nextValue, c, firstW, w).col;
@@ -7104,7 +6966,8 @@ const TInput = defineComponent({
 			} else anchor.value = null;
 			cursor.value = clamp$3(nextCursor, 0, value.length);
 			if (wrapMode.value) {
-				const w = Math.max(1, Math.floor(contentRect$1.value.w));
+				const { w: contentW } = measureContent(absRect.value);
+				const w = Math.max(1, contentW);
 				const prefix = buildMentionPrefix(props.mentions, w);
 				const firstW = Math.max(1, w - prefix.cells);
 				desiredCol.value = indexToWrappedCellColFirstWidth(value, cursor.value, firstW, w).col;
@@ -7113,8 +6976,8 @@ const TInput = defineComponent({
 			scheduler.invalidate();
 		}
 		watch([
-			() => contentRect$1.value.w,
-			() => contentRect$1.value.h,
+			() => absRect.value.w,
+			() => absRect.value.h,
 			() => wrapMode.value
 		], () => {
 			ensureCursorVisible();
@@ -7163,15 +7026,14 @@ const TInput = defineComponent({
 				if (imeAnchor.value) imeAnchor.value = null;
 				return;
 			}
-			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) {
+			const r = absRect.value;
+			if (r.w <= 0 || r.h <= 0) {
 				imeAnchor.value = null;
 				return;
 			}
-			const width = w;
-			const height = h$1;
+			const { hAll, padX, w: contentW } = measureContent(r);
+			const width = Math.max(1, contentW);
+			const height = Math.max(1, hAll);
 			const placeholderVisible = shouldShowPlaceholder.value;
 			const offX = placeholderVisible ? 0 : scrollX.value;
 			const offY = placeholderVisible ? 0 : scrollY.value;
@@ -7188,7 +7050,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 + cx,
+				cellX: r.x + padX + cx,
 				cellY: r.y + cy
 			};
 		});
@@ -7419,7 +7281,8 @@ const TInput = defineComponent({
 			if (e.key === "ArrowUp" || e.key === "ArrowDown") {
 				e.preventDefault();
 				const wrap = wrapMode.value;
-				const width = Math.max(1, Math.floor(contentRect$1.value.w));
+				const { w: contentW } = measureContent(absRect.value);
+				const width = Math.max(1, contentW);
 				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);
@@ -7637,7 +7500,6 @@ const TInput = defineComponent({
 				props.mentions,
 				props.placeholder,
 				props.placeholderWhenFocused,
-				props.padding,
 				props.style,
 				props.autoFocus,
 				props.cursorBlink,
@@ -7656,10 +7518,8 @@ const TInput = defineComponent({
 			],
 			paint: () => {
 				if (!visible.value) 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 r = absRect.value;
+				if (r.w <= 0 || r.h <= 0) return;
 				const style = props.style ?? defaultStyle.value;
 				const placeholderVisible = shouldShowPlaceholder.value;
 				const offX = placeholderVisible ? 0 : scrollX.value;
@@ -7677,23 +7537,14 @@ const TInput = defineComponent({
 					...style,
 					fg: "white"
 				} : style;
-				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 { wAll, padX, w: contentW } = measureContent(r);
+				const x0 = r.x + padX;
+				const width = Math.max(1, contentW);
 				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 < h$1; row++) {
+				for (let row = 0; row < r.h; row++) {
 					const lineIndex = offY + row;
 					const info = lines[lineIndex];
 					const raw = info ? text.slice(info.start, info.end).replace(/[\r\n]/g, "") : "";
@@ -7702,7 +7553,12 @@ 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);
-					const y = r.y + row;
+					terminal.write(" ".repeat(wAll), {
+						x: r.x,
+						y: r.y + row,
+						style: baseStyle
+					});
+					if (contentW <= 0) continue;
 					if (hasPrefix) {
 						const chipStyle = {
 							...style,
@@ -7713,18 +7569,18 @@ const TInput = defineComponent({
 							if (!chip.label) continue;
 							terminal.write(chip.label, {
 								x: x0 + chip.start,
-								y,
+								y: r.y + row,
 								style: chipStyle
 							});
 						}
 						terminal.write(visible$1, {
 							x: x0 + rowPrefixCells,
-							y,
+							y: r.y + row,
 							style: baseStyle
 						});
 					} else terminal.write(visible$1, {
 						x: x0,
-						y,
+						y: r.y + row,
 						style: baseStyle
 					});
 				}
@@ -7732,7 +7588,7 @@ const TInput = defineComponent({
 				if (sel && !placeholderVisible) {
 					const bg = "blueBright";
 					const fg = "black";
-					for (let row = 0; row < h$1; row++) {
+					for (let row = 0; row < r.h; row++) {
 						const lineIndex = offY + row;
 						const info = lines[lineIndex];
 						if (!info) continue;
@@ -7746,14 +7602,14 @@ const TInput = defineComponent({
 							for (let i = info.start; i < info.end;) {
 								const ch = readCodePointAt(text, i);
 								const nextI = i + ch.length;
-								const w$1 = charCellWidth(ch);
-								if (xCell$1 + w$1 > rowTextW) break;
+								const w = charCellWidth(ch);
+								if (xCell$1 + w > rowTextW) break;
 								if (i >= sel.start && i < sel.end) terminal.put(xBase + xCell$1, y, ch, {
 									...style,
 									fg,
 									bg
 								});
-								xCell$1 += w$1;
+								xCell$1 += w;
 								i = nextI;
 								if (xCell$1 >= rowTextW) break;
 							}
@@ -7764,8 +7620,8 @@ const TInput = defineComponent({
 						for (let i = info.start; i < info.end;) {
 							const ch = readCodePointAt(text, i);
 							const nextI = i + ch.length;
-							const w$1 = charCellWidth(ch);
-							const nextCell = xCell + w$1;
+							const w = charCellWidth(ch);
+							const nextCell = xCell + w;
 							if (nextCell <= offX) {
 								xCell = nextCell;
 								i = nextI;
@@ -7773,7 +7629,7 @@ const TInput = defineComponent({
 							}
 							if (xCell >= offX + rowTextW) break;
 							const localX = xCell - offX;
-							if (localX + w$1 > rowTextW) break;
+							if (localX + w > rowTextW) break;
 							if (i >= sel.start && i < sel.end) terminal.put(xBase + localX, y, ch, {
 								...style,
 								fg,
@@ -7795,7 +7651,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 < h$1) {
+					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < r.h) {
 						const x = x0 + cx0;
 						const y = r.y + cy;
 						const avail = Math.max(0, width - cx0);
@@ -7823,7 +7679,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 < h$1) {
+					if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < r.h) {
 						const y = r.y + cy;
 						let x = x0 + cx0;
 						let cell = null;
@@ -8027,11 +7883,7 @@ const TInputBox = defineComponent({
 			default: ""
 		},
 		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
+			type: Number,
 			default: 0
 		},
 		modelValue: {
@@ -8072,9 +7924,8 @@ const TInputBox = defineComponent({
 		"blur"
 	],
 	setup(props, { emit }) {
-		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));
+		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));
 		return () => h(TBox, {
 			x: props.x,
 			y: props.y,
@@ -8135,14 +7986,6 @@ const TList = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		items: {
 			type: Array,
 			required: true
@@ -8201,9 +8044,8 @@ 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, Math.floor(contentRect$1.value.h));
+			const h$1 = Math.max(0, props.h);
 			if (h$1 <= 0) return;
 			const maxTop = Math.max(0, props.items.length - h$1);
 			scrollTop.value = clamp$2(scrollTop.value, 0, maxTop);
@@ -8213,7 +8055,7 @@ const TList = defineComponent({
 		watch([
 			() => active.value,
 			() => props.items.length,
-			() => contentRect$1.value.h
+			() => props.h
 		], () => {
 			ensureActiveVisible();
 		}, { immediate: true });
@@ -8298,8 +8140,7 @@ const TList = defineComponent({
 			focusable: true,
 			handlers: {
 				click: (e) => {
-					const r = contentRect$1.value;
-					if (e.cellY < r.y || e.cellY >= r.y + r.h) return;
+					const r = absRect.value;
 					const idx = scrollTop.value + (e.cellY - r.y);
 					if (idx >= 0 && idx < props.items.length) {
 						active.value = idx;
@@ -8308,8 +8149,7 @@ const TList = defineComponent({
 					} else emit("close");
 				},
 				dblclick: (e) => {
-					const r = contentRect$1.value;
-					if (e.cellY < r.y || e.cellY >= r.y + r.h) return;
+					const r = absRect.value;
 					const idx = scrollTop.value + (e.cellY - r.y);
 					if (idx >= 0 && idx < props.items.length) commit(idx);
 				},
@@ -8317,8 +8157,7 @@ const TList = defineComponent({
 					const delta = e.deltaY ?? 0;
 					if (!delta) return;
 					const dir = delta > 0 ? 1 : -1;
-					const h$1 = Math.max(0, Math.floor(contentRect$1.value.h));
-					const maxTop = Math.max(0, props.items.length - h$1);
+					const maxTop = Math.max(0, props.items.length - props.h);
 					const next = clamp$2(scrollTop.value + dir, 0, maxTop);
 					if (next !== scrollTop.value) {
 						scrollTop.value = next;
@@ -8367,17 +8206,9 @@ const TList = defineComponent({
 			],
 			paint: () => {
 				if (!visible.value) 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
-				});
+				const r = absRect.value;
 				if (r.w <= 0 || r.h <= 0) return;
+				const base = props.style ?? defaultStyle.value;
 				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;
@@ -8438,14 +8269,6 @@ const TPathPicker = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		workspace: {
 			type: String,
 			required: true
@@ -8503,12 +8326,13 @@ const TPathPicker = defineComponent({
 		const scrollTop = ref(0);
 		const error = ref(null);
 		const inputH = 1;
-		const absRect = computed(() => {
+		const listH = computed(() => Math.max(0, Math.floor(props.h) - inputH));
+		const absListRect = computed(() => {
 			const raw = {
 				x: props.x,
-				y: props.y,
+				y: props.y + inputH,
 				w: props.w,
-				h: props.h
+				h: listH.value
 			};
 			const translated = translateRect(raw, layout.originX, layout.originY);
 			if (!layout.clipRect) return translated;
@@ -8519,49 +8343,6 @@ 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) {
@@ -8779,7 +8560,7 @@ const TPathPicker = defineComponent({
 			deps: [
 				visible.value,
 				absListRect.value,
-				contentRect$1.value.w,
+				props.w,
 				listH.value,
 				props.style,
 				defaultStyle.value,
@@ -8823,9 +8604,9 @@ const TPathPicker = defineComponent({
 			}
 		}));
 		return () => h("span", rootProps, [h(TInput, {
-			"x": contentRect$1.value.x,
-			"y": contentRect$1.value.y,
-			"w": contentRect$1.value.w,
+			"x": props.x,
+			"y": props.y,
+			"w": props.w,
 			"h": inputH,
 			"zIndex": props.zIndex,
 			"modelValue": props.modelValue,
@@ -8875,14 +8656,6 @@ const TSelect = defineComponent({
 			type: Number,
 			default: 0
 		},
-		padding: {
-			type: [
-				Number,
-				String,
-				Array
-			],
-			default: 0
-		},
 		options: {
 			type: Array,
 			required: true
@@ -8943,7 +8716,6 @@ const TSelect = defineComponent({
 			return clamp(first, 0, max);
 		})();
 		const active = ref(initialActive);
-		const scrollTopLine = ref(0);
 		const absRect = computed(() => {
 			const raw = {
 				x: props.x,
@@ -8960,7 +8732,6 @@ const TSelect = defineComponent({
 				h: 0
 			};
 		});
-		const contentRect$1 = computed(() => insetRect(absRect.value, props.padding));
 		watchEffect(() => {
 			const max = Math.max(0, props.options.length - 1);
 			if (!props.multiple) {
@@ -8970,9 +8741,6 @@ const TSelect = defineComponent({
 			}
 			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;
 		}
@@ -9034,105 +8802,12 @@ const TSelect = defineComponent({
 			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));
 				if (!props.multiple) emit("update:modelValue", active.value);
-				ensureActiveVisible();
 				scheduler.invalidate();
 				return;
 			}
@@ -9140,7 +8815,6 @@ const TSelect = defineComponent({
 				e.preventDefault();
 				active.value = clamp(active.value + 1, 0, Math.max(0, props.options.length - 1));
 				if (!props.multiple) emit("update:modelValue", active.value);
-				ensureActiveVisible();
 				scheduler.invalidate();
 				return;
 			}
@@ -9170,31 +8844,11 @@ const TSelect = defineComponent({
 			focusable: true,
 			handlers: {
 				click: (e) => {
-					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);
+					const r = absRect.value;
+					const idx = e.cellY - r.y;
+					if (idx >= 0 && idx < props.options.length) commit(idx);
 					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");
@@ -9209,10 +8863,6 @@ const TSelect = defineComponent({
 				keydown: onKeydown
 			}
 		}));
-		watchEffect(() => {
-			optionLayouts.value;
-			ensureActiveVisible();
-		});
 		watchEffect(() => {
 			if (!props.autoFocus) return;
 			if (!visible.value) return;
@@ -9230,7 +8880,6 @@ const TSelect = defineComponent({
 				absRect.value,
 				props.w,
 				props.h,
-				props.padding,
 				props.options,
 				props.modelValue,
 				props.multiple,
@@ -9239,14 +8888,12 @@ const TSelect = defineComponent({
 				props.highlightStyle,
 				focused.value,
 				active.value,
-				scrollTopLine.value,
-				optionLayouts.value,
 				defaultStyle.value
 			],
 			paint: () => {
 				if (!visible.value) return;
-				const rAll = absRect.value;
-				if (rAll.w <= 0 || rAll.h <= 0) return;
+				const r = absRect.value;
+				if (r.w <= 0 || r.h <= 0) return;
 				const base = props.style ?? defaultStyle.value;
 				const highlightBase = props.highlightStyle ?? {
 					...base,
@@ -9261,75 +8908,58 @@ const TSelect = defineComponent({
 					...highlightBase,
 					dim: true
 				};
-				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,
-							style: base
-						});
-						continue;
-					}
-					const opt = props.options[line.optionIndex];
+				for (let i = 0; i < r.h; i++) {
+					const opt = props.options[i];
 					if (!opt) {
-						terminal.write(blank, {
+						terminal.write(" ".repeat(r.w), {
 							x: r.x,
-							y,
+							y: r.y + i,
 							style: base
 						});
 						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 isActiveRow = i === active.value;
+					const isChecked = props.multiple ? selectedSet.has(i) : isActiveRow;
+					const isHighlighted = props.multiple ? focused.value && isActiveRow : isActiveRow;
 					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
+					const label = sanitizeInlineText(getOptionLabel(opt));
+					const detail = getOptionDetail(opt);
+					const rawDetail = detail ? sanitizeInlineText(detail) : "";
+					const labelText = `${prefix}${label}`;
+					const labelCells = textCellWidth$1(labelText);
+					const minGap = 2;
+					const availableForDetail = r.w - labelCells - minGap;
+					if (rawDetail && availableForDetail >= 4) {
+						const labelStyle = isHighlighted ? highlightBase : base;
+						terminal.write(labelText, {
+							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 = isHighlighted ? highlightBase : base;
+						terminal.write(" ".repeat(gapWidth), {
+							x: r.x + labelCells,
+							y: r.y + i,
+							style: gapStyle
+						});
+						const detailText = sliceByCells(rawDetail, availableForDetail);
+						const dStyle = isHighlighted ? highlightDetailStyle : detailDimStyle;
+						terminal.write(detailText, {
+							x: r.x + labelCells + gapWidth,
+							y: r.y + i,
+							style: dStyle
+						});
+					} else {
+						const line = padEndByCells(sliceByCells(labelText, r.w), r.w);
+						const style = isHighlighted ? highlightBase : base;
+						terminal.write(line, {
+							x: r.x,
+							y: r.y + i,
+							style
 						});
 					}
 				}