@simon_he/vue-tui 0.0.2 → 0.0.3

package/dist/index.cjs

@@ -3690,60 +3690,6 @@ function intersectRect(a, b) {
 function translateRect(rect, dx, dy) {
   return { x: rect.x + dx, y: rect.y + dy, w: rect.w, 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 h16 = Math.max(0, Math.floor(rect.h));
-  const maxTotalX = Math.max(0, w - (w > 0 ? 1 : 0));
-  const maxTotalY = Math.max(0, h16 - (h16 > 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)
-  };
-}
 
 // src/vue/components/TAnchor.ts
 var EMPTY_RECT = Object.freeze({ x: 0, y: 0, w: 0, h: 0 });
@@ -3757,7 +3703,6 @@ var TAnchor = (0, import_vue10.defineComponent)({
     w: { type: Number, default: void 0 },
     h: { type: Number, default: void 0 },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     focusable: { type: Boolean, default: false },
     selectable: { type: Boolean, default: void 0 }
   },
@@ -3859,11 +3804,9 @@ var TAnchor = (0, import_vue10.defineComponent)({
     const childStack = (0, import_vue10.computed)(() => render.createStack(parentStack.value, props.zIndex));
     (0, import_vue10.watchEffect)(() => {
       const translated = rawRect.value;
-      const content = insetRect(translated, props.padding);
-      const contentClip = intersectRect(content, rect.value) ?? EMPTY_RECT;
-      childLayout.originX = content.x;
-      childLayout.originY = content.y;
-      childLayout.clipRect = contentClip;
+      childLayout.originX = translated.x;
+      childLayout.originY = translated.y;
+      childLayout.clipRect = rect.value;
     });
     (0, import_vue10.provide)(LayoutContextKey, childLayout);
     (0, import_vue10.provide)(RenderStackKey, childStack);
@@ -4024,7 +3967,7 @@ var TBox = (0, import_vue12.defineComponent)({
     zIndex: { type: Number, default: 0 },
     border: { type: Boolean, default: true },
     title: { type: String, default: "" },
-    padding: { type: [Number, String, Array], default: 0 },
+    padding: { type: Number, default: 0 },
     scrollX: { type: Number, default: 0 },
     scrollY: { type: Number, default: 0 },
     style: { type: Object, default: void 0 },
@@ -4098,14 +4041,17 @@ var TBox = (0, import_vue12.defineComponent)({
     (0, import_vue12.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 contentRect2 = intersectRect(content, inner);
+      let contentRect2 = intersectRect(content, r);
       if (parent.clipRect && contentRect2)
         contentRect2 = intersectRect(contentRect2, parent.clipRect);
       if (!contentRect2)
@@ -4179,7 +4125,6 @@ var TText = (0, import_vue13.defineComponent)({
     value: { type: String, required: true },
     w: { type: Number, default: void 0 },
     h: { type: Number, default: void 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     style: { type: Object, default: void 0 },
     clear: { type: Boolean, default: true },
     wrap: { type: Boolean, default: false }
@@ -4188,13 +4133,8 @@ var TText = (0, import_vue13.defineComponent)({
     const { terminal, defaultStyle } = useTerminal();
     const layout = useLayout();
     const { visible, rootProps } = useVisibility();
-    const pad = (0, import_vue13.computed)(() => normalizePadding(props.padding));
-    const contentW = (0, import_vue13.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 = (0, import_vue13.computed)(() => {
-      const w = contentW.value;
+      const w = props.w ?? computeDefaultWidth(props.value);
       if (w <= 0)
         return [""];
       if (!props.wrap)
@@ -4203,8 +4143,8 @@ var TText = (0, import_vue13.defineComponent)({
       return wrapByCells(safe, w).map((l) => fitText(l, w));
     });
     const absRect = (0, import_vue13.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, w: width, h: height };
       const translated = translateRect(raw, layout.originX, layout.originY);
       if (!layout.clipRect)
@@ -4221,27 +4161,20 @@ var TText = (0, import_vue13.defineComponent)({
         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 h16 = 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, h16);
+        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;
           if (props.clear)
             terminal.write(blank, { x: r.x, y, style });
-          const contentRow = y - contentY;
-          if (contentRow < 0 || contentRow >= h16)
-            return;
-          if (contentRow < 0 || contentRow >= maxLines)
+          if (i < 0 || i >= maxLines)
             return;
-          const clipped = sliceByCells(out[contentRow] ?? "", w);
-          terminal.write(padEndByCells(clipped, w), { x: contentX, y, style });
+          const clipped = sliceByCells(out[i] ?? "", r.w);
+          terminal.write(padEndByCells(clipped, r.w), { x: r.x, y, style });
         };
         if (!dirtyRows) {
           for (let i = 0; i < r.h; i++)
@@ -4267,7 +4200,6 @@ var TView = (0, import_vue14.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     scrollX: { type: Number, default: 0 },
     scrollY: { type: Number, default: 0 },
     focusable: { type: Boolean, default: false },
@@ -4360,11 +4292,9 @@ var TView = (0, import_vue14.defineComponent)({
     const childStack = (0, import_vue14.computed)(() => render.createStack(parentStack.value, props.zIndex));
     (0, import_vue14.watchEffect)(() => {
       const translated = rawRect.value;
-      const content = insetRect(translated, props.padding);
-      const contentClip = intersectRect(content, rect.value) ?? EMPTY_RECT2;
-      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;
     });
     (0, import_vue14.provide)(LayoutContextKey, childLayout);
     (0, import_vue14.provide)(RenderStackKey, childStack);
@@ -4521,10 +4451,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)
   };
 }
 var DialogSurface = (0, import_vue16.defineComponent)({
@@ -4534,7 +4464,7 @@ var DialogSurface = (0, import_vue16.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     title: { type: String, default: "" },
-    padding: { type: [Number, String, Array], default: 1 },
+    padding: { type: Number, default: 1 },
     zIndex: { type: Number, default: 1e3 },
     style: { type: Object, default: void 0 },
     placement: { type: String, default: "center" },
@@ -4767,7 +4697,7 @@ var TDialog = (0, import_vue16.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     title: { type: String, default: "" },
-    padding: { type: [Number, String, Array], default: 1 },
+    padding: { type: Number, default: 1 },
     zIndex: { type: Number, default: 1e3 },
     style: { type: Object, default: void 0 },
     placement: { type: String, default: "center" },
@@ -5753,7 +5683,6 @@ var TFlow = (0, import_vue18.defineComponent)({
     y: { type: Number, required: true },
     w: { type: Number, required: true },
     h: { type: Number, required: true },
-    padding: { type: [Number, String, Array], default: 0 },
     items: { type: Array, required: true },
     direction: { type: String, default: "vertical" },
     gap: { type: Number, default: 0 },
@@ -5761,16 +5690,13 @@ var TFlow = (0, import_vue18.defineComponent)({
     zIndex: { type: Number, default: 0 }
   },
   setup(props, { slots }) {
-    const pad = (0, import_vue18.computed)(() => normalizePadding(props.padding));
-    const innerW = (0, import_vue18.computed)(() => Math.max(0, Math.floor(props.w) - pad.value.left - pad.value.right));
-    const innerH = (0, import_vue18.computed)(() => Math.max(0, Math.floor(props.h) - pad.value.top - pad.value.bottom));
     return () => (0, import_vue18.h)(
       TView,
-      { x: props.x, y: props.y, w: props.w, h: props.h, zIndex: props.zIndex, padding: props.padding },
+      { x: props.x, y: props.y, w: props.w, h: props.h, 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, h: Math.max(0, Math.floor(props.itemSize)) } : { x: offset, y: 0, w: Math.max(0, Math.floor(props.itemSize)), h: innerH.value };
+        const childProps = props.direction === "vertical" ? { x: 0, y: offset, w: props.w, h: Math.max(0, Math.floor(props.itemSize)) } : { x: offset, y: 0, w: Math.max(0, Math.floor(props.itemSize)), h: props.h };
         return (0, import_vue18.h)(
           TView,
           { key: index, ...childProps },
@@ -6131,7 +6057,6 @@ var TInput = (0, import_vue19.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, default: 1 },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: "0 1" },
     modelValue: { type: String, required: true },
     cursorToEndOnExternalUpdate: { type: Boolean, default: false },
     placeholder: { type: String, default: "" },
@@ -6165,6 +6090,14 @@ var TInput = (0, import_vue19.defineComponent)({
     const parentEventZ = (0, import_vue19.inject)(EventZIndexContextKey, (0, import_vue19.computed)(() => 0));
     const eventZ = (0, import_vue19.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 = clamp3(PADDING_X, 0, Math.floor(wAll / 2));
+      const w = Math.max(0, wAll - padX * 2);
+      return { wAll, hAll, padX, w };
+    }
     const focused = (0, import_vue19.ref)(false);
     const cursor = (0, import_vue19.ref)(0);
     const anchor = (0, import_vue19.ref)(null);
@@ -6181,6 +6114,7 @@ var TInput = (0, import_vue19.defineComponent)({
     function getValue() {
       return pendingValue.value ?? props.modelValue;
     }
+    const wrapMode = (0, import_vue19.computed)(() => Math.max(1, Math.floor(props.h)) > 1);
     const rawAbsRect = (0, import_vue19.computed)(() => {
       const raw = { x: props.x, y: props.y, w: props.w, h: Math.max(1, Math.floor(props.h)) };
       return translateRect(raw, layout.originX, layout.originY);
@@ -6424,8 +6358,6 @@ var TInput = (0, import_vue19.defineComponent)({
         return translated;
       return intersectRect(translated, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 };
     });
-    const contentRect2 = (0, import_vue19.computed)(() => insetRect(absRect.value, props.padding));
-    const wrapMode = (0, import_vue19.computed)(() => Math.max(1, Math.floor(contentRect2.value.h)) > 1);
     const selection = (0, import_vue19.computed)(() => {
       if (anchor.value == null || anchor.value === cursor.value)
         return null;
@@ -6508,16 +6440,10 @@ var TInput = (0, import_vue19.defineComponent)({
       return !focused.value || props.placeholderWhenFocused;
     });
     function ensureCursorVisible() {
-      const r = contentRect2.value;
-      const w = Math.max(0, Math.floor(r.w));
-      const h16 = Math.max(0, Math.floor(r.h));
-      if (w <= 0 || h16 <= 0) {
-        scrollX.value = 0;
-        scrollY.value = 0;
-        return;
-      }
-      const width = w;
-      const height = h16;
+      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);
@@ -6543,16 +6469,13 @@ var TInput = (0, import_vue19.defineComponent)({
     }
     function setCursorByCell2D(cellX, cellY, extendSelection = false, e) {
       var _a;
-      const r = contentRect2.value;
-      const w = Math.max(0, Math.floor(r.w));
-      const h16 = Math.max(0, Math.floor(r.h));
-      if (w <= 0 || h16 <= 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 = clamp3(cellX - r.x, 0, Math.max(0, w - 1));
-      const localY = clamp3(cellY - r.y, 0, Math.max(0, h16 - 1));
+      const localX = clamp3(cellX - (r.x + padX), 0, Math.max(0, contentW - 1));
+      const localY = clamp3(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) {
@@ -6602,7 +6525,8 @@ var TInput = (0, import_vue19.defineComponent)({
       compositionText.value = "";
       pendingValue.value = nextValue;
       if (wrapMode.value) {
-        const w = Math.max(1, Math.floor(contentRect2.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;
@@ -6627,7 +6551,8 @@ var TInput = (0, import_vue19.defineComponent)({
       }
       cursor.value = clamp3(nextCursor, 0, value.length);
       if (wrapMode.value) {
-        const w = Math.max(1, Math.floor(contentRect2.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;
@@ -6637,7 +6562,7 @@ var TInput = (0, import_vue19.defineComponent)({
       ensureCursorVisible();
       scheduler.invalidate();
     }
-    (0, import_vue19.watch)([() => contentRect2.value.w, () => contentRect2.value.h, () => wrapMode.value], () => {
+    (0, import_vue19.watch)([() => absRect.value.w, () => absRect.value.h, () => wrapMode.value], () => {
       ensureCursorVisible();
       scheduler.invalidate();
     });
@@ -6684,15 +6609,14 @@ var TInput = (0, import_vue19.defineComponent)({
           imeAnchor.value = null;
         return;
       }
-      const r = contentRect2.value;
-      const w = Math.max(0, Math.floor(r.w));
-      const h16 = Math.max(0, Math.floor(r.h));
-      if (w <= 0 || h16 <= 0) {
+      const r = absRect.value;
+      if (r.w <= 0 || r.h <= 0) {
         imeAnchor.value = null;
         return;
       }
-      const width = w;
-      const height = h16;
+      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;
@@ -6708,7 +6632,7 @@ var TInput = (0, import_vue19.defineComponent)({
       const cyRaw = pos.line - offY;
       const cx = clamp3(cxRaw, 0, Math.max(0, width - 1));
       const cy = clamp3(cyRaw, 0, Math.max(0, height - 1));
-      imeAnchor.value = { cellX: r.x + cx, cellY: r.y + cy };
+      imeAnchor.value = { cellX: r.x + padX + cx, cellY: r.y + cy };
     });
     function acceptPrompt(index) {
       const ctx = activeContext.value;
@@ -6953,7 +6877,8 @@ var TInput = (0, import_vue19.defineComponent)({
       if (e.key === "ArrowUp" || e.key === "ArrowDown") {
         e.preventDefault();
         const wrap = wrapMode.value;
-        const width = Math.max(1, Math.floor(contentRect2.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);
@@ -7188,7 +7113,6 @@ var TInput = (0, import_vue19.defineComponent)({
         props.mentions,
         props.placeholder,
         props.placeholderWhenFocused,
-        props.padding,
         props.style,
         props.autoFocus,
         props.cursorBlink,
@@ -7208,10 +7132,8 @@ var TInput = (0, import_vue19.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)
+        const r = absRect.value;
+        if (r.w <= 0 || r.h <= 0)
           return;
         const style = props.style ?? defaultStyle.value;
         const placeholderVisible = shouldShowPlaceholder.value;
@@ -7227,21 +7149,14 @@ var TInput = (0, import_vue19.defineComponent)({
         }
         const text = props.secret && !placeholderVisible ? maskText(textRaw) : textRaw;
         const baseStyle = placeholderVisible ? { ...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 = contentRect2.value;
-        const w = Math.max(0, Math.floor(r.w));
-        const h16 = Math.max(0, Math.floor(r.h));
-        if (w <= 0 || h16 <= 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 < h16; 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, "") : "";
@@ -7250,24 +7165,26 @@ var TInput = (0, import_vue19.defineComponent)({
           const rowTextW = hasPrefix ? firstWidth : width;
           const rawVisible = wrap ? sliceByCellsWindow(raw, 0, rowTextW) : sliceByCellsWindow(raw, offX, rowTextW);
           const visible2 = padEndByCells2(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, fg: "cyanBright", underline: true };
             for (const chip of prefix.chips) {
               if (!chip.label)
                 continue;
-              terminal.write(chip.label, { x: x0 + chip.start, y, style: chipStyle });
+              terminal.write(chip.label, { x: x0 + chip.start, y: r.y + row, style: chipStyle });
             }
-            terminal.write(visible2, { x: x0 + rowPrefixCells, y, style: baseStyle });
+            terminal.write(visible2, { x: x0 + rowPrefixCells, y: r.y + row, style: baseStyle });
           } else {
-            terminal.write(visible2, { x: x0, y, style: baseStyle });
+            terminal.write(visible2, { x: x0, y: r.y + row, style: baseStyle });
           }
         }
         const sel = selection.value;
         if (sel && !placeholderVisible) {
           const bg = "blueBright";
           const fg = "black";
-          for (let row = 0; row < h16; row++) {
+          for (let row = 0; row < r.h; row++) {
             const lineIndex = offY + row;
             const info = lines[lineIndex];
             if (!info)
@@ -7282,12 +7199,12 @@ var TInput = (0, import_vue19.defineComponent)({
               for (let i = info.start; i < info.end; ) {
                 const ch = readCodePointAt(text, i);
                 const nextI = i + ch.length;
-                const w2 = charCellWidth(ch);
-                if (xCell2 + w2 > rowTextW)
+                const w = charCellWidth(ch);
+                if (xCell2 + w > rowTextW)
                   break;
                 if (i >= sel.start && i < sel.end)
                   terminal.put(xBase + xCell2, y, ch, { ...style, fg, bg });
-                xCell2 += w2;
+                xCell2 += w;
                 i = nextI;
                 if (xCell2 >= rowTextW)
                   break;
@@ -7299,8 +7216,8 @@ var TInput = (0, import_vue19.defineComponent)({
             for (let i = info.start; i < info.end; ) {
               const ch = readCodePointAt(text, i);
               const nextI = i + ch.length;
-              const w2 = charCellWidth(ch);
-              const nextCell = xCell + w2;
+              const w = charCellWidth(ch);
+              const nextCell = xCell + w;
               if (nextCell <= offX) {
                 xCell = nextCell;
                 i = nextI;
@@ -7309,7 +7226,7 @@ var TInput = (0, import_vue19.defineComponent)({
               if (xCell >= offX + rowTextW)
                 break;
               const localX = xCell - offX;
-              if (localX + w2 > rowTextW)
+              if (localX + w > rowTextW)
                 break;
               if (i >= sel.start && i < sel.end)
                 terminal.put(xBase + localX, y, ch, { ...style, fg, bg });
@@ -7330,7 +7247,7 @@ var TInput = (0, import_vue19.defineComponent)({
           const pos = wrap ? indexToWrappedCellColFirstWidth(cursorText, cursor.value, firstW, wAll2) : 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 < h16) {
+          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);
@@ -7350,7 +7267,7 @@ var TInput = (0, import_vue19.defineComponent)({
           const pos = wrap ? indexToWrappedCellColFirstWidth(cursorText, cursor.value, firstW, wAll2) : 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 < h16) {
+          if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < r.h) {
             const y = r.y + cy;
             let x = x0 + cx0;
             let cell = null;
@@ -7484,7 +7401,7 @@ var TInputBox = (0, import_vue20.defineComponent)({
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
     title: { type: String, default: "" },
-    padding: { type: [Number, String, Array], default: 0 },
+    padding: { type: Number, default: 0 },
     modelValue: { type: String, required: true },
     placeholder: { type: String, default: "" },
     style: { type: Object, default: void 0 },
@@ -7495,9 +7412,8 @@ var TInputBox = (0, import_vue20.defineComponent)({
   },
   emits: ["update:modelValue", "input", "change", "keydown", "focus", "blur"],
   setup(props, { emit }) {
-    const pad = (0, import_vue20.computed)(() => normalizePadding(props.padding));
-    const innerW = (0, import_vue20.computed)(() => Math.max(0, Math.floor(props.w) - 2 - pad.value.left - pad.value.right));
-    const innerH = (0, import_vue20.computed)(() => Math.max(1, Math.floor(props.h) - 2 - pad.value.top - pad.value.bottom));
+    const innerW = (0, import_vue20.computed)(() => Math.max(0, Math.floor(props.w) - 2 - Math.max(0, Math.floor(props.padding)) * 2));
+    const innerH = (0, import_vue20.computed)(() => Math.max(1, Math.floor(props.h) - 2 - Math.max(0, Math.floor(props.padding)) * 2));
     return () => (0, import_vue20.h)(
       TBox,
       {
@@ -7547,7 +7463,6 @@ var TList = (0, import_vue21.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     items: { type: Array, required: true },
     modelValue: { type: Number, default: 0 },
     style: { type: Object, default: void 0 },
@@ -7574,9 +7489,8 @@ var TList = (0, import_vue21.defineComponent)({
     (0, import_vue21.watchEffect)(() => {
       active.value = clamp4(props.modelValue, 0, Math.max(0, props.items.length - 1));
     });
-    const contentRect2 = (0, import_vue21.computed)(() => insetRect(absRect.value, props.padding));
     function ensureActiveVisible() {
-      const h16 = Math.max(0, Math.floor(contentRect2.value.h));
+      const h16 = Math.max(0, props.h);
       if (h16 <= 0)
         return;
       const maxTop = Math.max(0, props.items.length - h16);
@@ -7586,7 +7500,7 @@ var TList = (0, import_vue21.defineComponent)({
       else if (active.value >= scrollTop.value + h16)
         scrollTop.value = clamp4(active.value - (h16 - 1), 0, maxTop);
     }
-    (0, import_vue21.watch)([() => active.value, () => props.items.length, () => contentRect2.value.h], () => {
+    (0, import_vue21.watch)([() => active.value, () => props.items.length, () => props.h], () => {
       ensureActiveVisible();
     }, { immediate: true });
     function commit(index) {
@@ -7667,9 +7581,7 @@ var TList = (0, import_vue21.defineComponent)({
       focusable: true,
       handlers: {
         click: (e) => {
-          const r = contentRect2.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;
@@ -7680,9 +7592,7 @@ var TList = (0, import_vue21.defineComponent)({
           }
         },
         dblclick: (e) => {
-          const r = contentRect2.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);
@@ -7692,8 +7602,7 @@ var TList = (0, import_vue21.defineComponent)({
           if (!delta)
             return;
           const dir = delta > 0 ? 1 : -1;
-          const h16 = Math.max(0, Math.floor(contentRect2.value.h));
-          const maxTop = Math.max(0, props.items.length - h16);
+          const maxTop = Math.max(0, props.items.length - props.h);
           const next = clamp4(scrollTop.value + dir, 0, maxTop);
           if (next !== scrollTop.value) {
             scrollTop.value = next;
@@ -7748,16 +7657,10 @@ var TList = (0, import_vue21.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 = contentRect2.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 = clamp4(scrollTop.value, 0, Math.max(0, props.items.length - r.h));
         for (let i = 0; i < r.h; i++) {
           const idx = top + i;
@@ -7791,7 +7694,6 @@ var TPathPicker = (0, import_vue22.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     workspace: { type: String, required: true },
     mode: { type: String, default: "any" },
     modelValue: { type: String, required: true },
@@ -7815,44 +7717,14 @@ var TPathPicker = (0, import_vue22.defineComponent)({
     const scrollTop = (0, import_vue22.ref)(0);
     const error = (0, import_vue22.ref)(null);
     const inputH = 1;
-    const absRect = (0, import_vue22.computed)(() => {
-      const raw = { x: props.x, y: props.y, w: props.w, h: props.h };
+    const listH = (0, import_vue22.computed)(() => Math.max(0, Math.floor(props.h) - inputH));
+    const absListRect = (0, import_vue22.computed)(() => {
+      const raw = { x: props.x, y: props.y + inputH, w: props.w, h: listH.value };
       const translated = translateRect(raw, layout.originX, layout.originY);
       if (!layout.clipRect)
         return translated;
       return intersectRect(translated, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 };
     });
-    const contentRect2 = (0, import_vue22.computed)(() => insetRect(absRect.value, props.padding));
-    const listH = (0, import_vue22.computed)(() => Math.max(0, Math.floor(contentRect2.value.h) - inputH));
-    const absListRect = (0, import_vue22.computed)(() => {
-      const c = contentRect2.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 h16 = Math.max(0, listH.value);
       if (h16 <= 0) {
@@ -8062,7 +7934,7 @@ var TPathPicker = (0, import_vue22.defineComponent)({
       deps: [
         visible.value,
         absListRect.value,
-        contentRect2.value.w,
+        props.w,
         listH.value,
         props.style,
         defaultStyle.value,
@@ -8095,9 +7967,9 @@ var TPathPicker = (0, import_vue22.defineComponent)({
     }));
     return () => (0, import_vue22.h)("span", rootProps, [
       (0, import_vue22.h)(TInput, {
-        "x": contentRect2.value.x,
-        "y": contentRect2.value.y,
-        "w": contentRect2.value.w,
+        "x": props.x,
+        "y": props.y,
+        "w": props.w,
         "h": inputH,
         "zIndex": props.zIndex,
         "modelValue": props.modelValue,
@@ -8136,7 +8008,6 @@ var TSelect = (0, import_vue23.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
-    padding: { type: [Number, String, Array], default: 0 },
     options: { type: Array, required: true },
     modelValue: { type: [Number, Array], default: 0 },
     multiple: { type: Boolean, default: false },
@@ -8165,7 +8036,6 @@ var TSelect = (0, import_vue23.defineComponent)({
       return clamp6(first, 0, max);
     })();
     const active = (0, import_vue23.ref)(initialActive);
-    const scrollTopLine = (0, import_vue23.ref)(0);
     const absRect = (0, import_vue23.computed)(() => {
       const raw = { x: props.x, y: props.y, w: props.w, h: props.h };
       const translated = translateRect(raw, layout.originX, layout.originY);
@@ -8173,7 +8043,6 @@ var TSelect = (0, import_vue23.defineComponent)({
         return translated;
       return intersectRect(translated, layout.clipRect) ?? { x: 0, y: 0, w: 0, h: 0 };
     });
-    const contentRect2 = (0, import_vue23.computed)(() => insetRect(absRect.value, props.padding));
     (0, import_vue23.watchEffect)(() => {
       const max = Math.max(0, props.options.length - 1);
       if (!props.multiple) {
@@ -8183,9 +8052,6 @@ var TSelect = (0, import_vue23.defineComponent)({
       }
       active.value = clamp6(active.value, 0, max);
     });
-    function getPrefixCells() {
-      return props.multiple ? textCellWidth3("[x] ") : 0;
-    }
     function getOptionLabel(opt) {
       return typeof opt === "string" ? opt : opt.label;
     }
@@ -8250,82 +8116,6 @@ var TSelect = (0, import_vue23.defineComponent)({
       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 = clamp6(Math.floor(totalW * 0.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 = (0, import_vue23.computed)(() => {
-      const r = contentRect2.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 _a;
-      const viewH = Math.max(0, Math.floor(contentRect2.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 = clamp6(scrollTopLine.value, 0, maxTop);
-      const idx = clamp6(active.value, 0, Math.max(0, layouts.length - 1));
-      const start = starts[idx] ?? 0;
-      const height = ((_a = layouts[idx]) == null ? void 0 : _a.height) ?? 1;
-      const end = start + height - 1;
-      if (start < scrollTopLine.value)
-        scrollTopLine.value = clamp6(start, 0, maxTop);
-      else if (end >= scrollTopLine.value + viewH)
-        scrollTopLine.value = clamp6(end - (viewH - 1), 0, maxTop);
-    }
     function onKeydown(e) {
       emit("keydown", e);
       if (e.key === "ArrowUp") {
@@ -8333,7 +8123,6 @@ var TSelect = (0, import_vue23.defineComponent)({
         active.value = clamp6(active.value - 1, 0, Math.max(0, props.options.length - 1));
         if (!props.multiple)
           emit("update:modelValue", active.value);
-        ensureActiveVisible();
         scheduler.invalidate();
         return;
       }
@@ -8342,7 +8131,6 @@ var TSelect = (0, import_vue23.defineComponent)({
         active.value = clamp6(active.value + 1, 0, Math.max(0, props.options.length - 1));
         if (!props.multiple)
           emit("update:modelValue", active.value);
-        ensureActiveVisible();
         scheduler.invalidate();
         return;
       }
@@ -8372,34 +8160,13 @@ var TSelect = (0, import_vue23.defineComponent)({
       focusable: true,
       handlers: {
         click: (e) => {
-          const r = contentRect2.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 = contentRect2.value;
-          const viewH = Math.max(0, Math.floor(r.h));
-          const { totalLines } = optionLayouts.value;
-          const maxTop = Math.max(0, totalLines - viewH);
-          const next = clamp6(scrollTopLine.value + dir, 0, maxTop);
-          if (next !== scrollTopLine.value) {
-            scrollTopLine.value = next;
-            scheduler.invalidate();
-          }
-        },
         focus: () => {
           focused.value = true;
           emit("focus");
@@ -8415,10 +8182,6 @@ var TSelect = (0, import_vue23.defineComponent)({
         keydown: onKeydown
       }
     }));
-    (0, import_vue23.watchEffect)(() => {
-      void optionLayouts.value;
-      ensureActiveVisible();
-    });
     (0, import_vue23.watchEffect)(() => {
       if (!props.autoFocus)
         return;
@@ -8435,67 +8198,50 @@ var TSelect = (0, import_vue23.defineComponent)({
     useRenderNode(() => ({
       zIndex: props.zIndex,
       rect: absRect.value,
-      deps: [visible.value, 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],
+      deps: [visible.value, absRect.value, props.w, props.h, props.options, props.modelValue, props.multiple, props.multipleEmit, props.style, props.highlightStyle, focused.value, active.value, defaultStyle.value],
       paint: () => {
         if (!visible.value)
           return;
-        const rAll = absRect.value;
-        if (rAll.w <= 0 || rAll.h <= 0)
+        const r = absRect.value;
+        if (r.w <= 0 || r.h <= 0)
           return;
         const base = props.style ?? defaultStyle.value;
         const highlightBase = props.highlightStyle ?? { ...base, bg: "yellow", fg: "black" };
         const detailDimStyle = { ...base, dim: true };
         const highlightDetailStyle = { ...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 = contentRect2.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 = clamp6(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, { x: r.x, y, style: base });
+            terminal.write(" ".repeat(r.w), { x: r.x, 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 layout2 = layouts[line.optionIndex];
-          const labelLine = (layout2 == null ? void 0 : layout2.labelLines[line.subLine]) ?? "";
-          const prevVisibleLine = row > 0 ? flat[lineIdx - 1] : void 0;
-          const isFirstVisibleLineOfOption = !prevVisibleLine || prevVisibleLine.optionIndex !== line.optionIndex;
-          const detailLine = (() => {
-            if (!layout2 || layout2.detailW <= 0 || layout2.detailLines.length === 0)
-              return "";
-            if (layout2.detailLines.length === 1)
-              return isFirstVisibleLineOfOption ? layout2.detailLines[0] ?? "" : "";
-            return layout2.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, ((layout2 == null ? void 0 : layout2.labelW) ?? r.w) - prefixCells);
-          const labelText = labelTextW > 0 ? sliceByCells(labelLine, labelTextW) : "";
-          const outLabel = padEndByCells(sliceByCells(`${prefixPad}${labelText}`, (layout2 == null ? void 0 : layout2.labelW) ?? r.w), (layout2 == null ? void 0 : layout2.labelW) ?? r.w);
-          terminal.write(outLabel, { x: r.x, y, style: rowStyle });
-          if (((layout2 == null ? void 0 : layout2.detailW) ?? 0) > 0) {
-            const outDetail = padEndByCells(sliceByCells(detailLine, layout2.detailW), layout2.detailW);
-            terminal.write(outDetail, { x: r.x + layout2.labelW + layout2.gapW, y, style: detailStyle });
+          const label = sanitizeInlineText(getOptionLabel(opt));
+          const detail = getOptionDetail(opt);
+          const rawDetail = detail ? sanitizeInlineText(detail) : "";
+          const labelText = `${prefix}${label}`;
+          const labelCells = textCellWidth3(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 = textCellWidth3(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 });
           }
         }
       }