@simon_he/vue-tui 0.0.1 → 0.0.2

package/dist/index.cjs

@@ -454,33 +454,6 @@ function createNodePathPickerProvider() {
   };
 }
 
-// src/cli/recording.ts
-async function loadFs() {
-  return import("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")}
-`, "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;
-}
-
 // src/utils/path.ts
 function normalizeSeparators(input) {
   return input.replace(/\\/g, "/");
@@ -652,43 +625,31 @@ function resolveUserPath(workspaceAbs, input) {
   return resolvePath(normalizePath(workspaceAbs), normalized);
 }
 
-// src/core/buffer/width.ts
-var 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;
+// src/cli/recording.ts
+async function loadFs() {
+  return import("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");
 }
-var 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")}
+`, "utf8");
 }
-function charCellWidth(text) {
-  if (!text)
-    return 1;
-  if (extendedPictographicRe == null ? 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;
 }
 
 // src/core/ansi/sgr.ts
@@ -896,6 +857,45 @@ function parseAnsiSgr(input, baseStyle = {}) {
   return segments;
 }
 
+// src/core/buffer/width.ts
+var 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;
+}
+var extendedPictographicRe = null;
+try {
+  extendedPictographicRe = new RegExp("\\p{Extended_Pictographic}", "u");
+} catch {
+  extendedPictographicRe = null;
+}
+function charCellWidth(text) {
+  if (!text)
+    return 1;
+  if (extendedPictographicRe == null ? void 0 : extendedPictographicRe.test(text))
+    return 2;
+  const codePoint = text.codePointAt(0);
+  if (codePoint == null)
+    return 1;
+  return isFullWidthCodePoint(codePoint) || isEmojiLike(codePoint) ? 2 : 1;
+}
+
 // src/core/buffer/buffer.ts
 var DEFAULT_STYLE = Object.freeze({});
 function normalizeStyle(style) {
@@ -3690,6 +3690,60 @@ 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 });
@@ -3703,6 +3757,7 @@ 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 }
   },
@@ -3804,9 +3859,11 @@ 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;
-      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;
+      childLayout.originX = content.x;
+      childLayout.originY = content.y;
+      childLayout.clipRect = contentClip;
     });
     (0, import_vue10.provide)(LayoutContextKey, childLayout);
     (0, import_vue10.provide)(RenderStackKey, childStack);
@@ -3967,7 +4024,7 @@ var TBox = (0, import_vue12.defineComponent)({
     zIndex: { type: Number, default: 0 },
     border: { type: Boolean, default: true },
     title: { type: String, default: "" },
-    padding: { type: Number, default: 0 },
+    padding: { type: [Number, String, Array], default: 0 },
     scrollX: { type: Number, default: 0 },
     scrollY: { type: Number, default: 0 },
     style: { type: Object, default: void 0 },
@@ -4041,17 +4098,14 @@ var TBox = (0, import_vue12.defineComponent)({
     (0, import_vue12.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 contentRect2 = intersectRect(content, r);
+      const content = insetRect(inner, props.padding);
+      let contentRect2 = intersectRect(content, inner);
       if (parent.clipRect && contentRect2)
         contentRect2 = intersectRect(contentRect2, parent.clipRect);
       if (!contentRect2)
@@ -4125,6 +4179,7 @@ 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 }
@@ -4133,8 +4188,13 @@ 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 = props.w ?? computeDefaultWidth(props.value);
+      const w = contentW.value;
       if (w <= 0)
         return [""];
       if (!props.wrap)
@@ -4143,8 +4203,8 @@ var TText = (0, import_vue13.defineComponent)({
       return wrapByCells(safe, w).map((l) => fitText(l, w));
     });
     const absRect = (0, import_vue13.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, w: width, h: height };
       const translated = translateRect(raw, layout.originX, layout.originY);
       if (!layout.clipRect)
@@ -4161,20 +4221,27 @@ 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, Math.max(0, Math.floor(r.h)));
+        const maxLines = Math.min(out.length, h16);
         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 });
-          if (i < 0 || i >= maxLines)
+          const contentRow = y - contentY;
+          if (contentRow < 0 || contentRow >= h16)
+            return;
+          if (contentRow < 0 || contentRow >= maxLines)
             return;
-          const clipped = sliceByCells(out[i] ?? "", r.w);
-          terminal.write(padEndByCells(clipped, r.w), { x: r.x, y, style });
+          const clipped = sliceByCells(out[contentRow] ?? "", w);
+          terminal.write(padEndByCells(clipped, w), { x: contentX, y, style });
         };
         if (!dirtyRows) {
           for (let i = 0; i < r.h; i++)
@@ -4200,6 +4267,7 @@ 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 },
@@ -4292,9 +4360,11 @@ 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;
-      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_RECT2;
+      childLayout.originX = content.x - Math.floor(props.scrollX);
+      childLayout.originY = content.y - Math.floor(props.scrollY);
+      childLayout.clipRect = contentClip;
     });
     (0, import_vue14.provide)(LayoutContextKey, childLayout);
     (0, import_vue14.provide)(RenderStackKey, childStack);
@@ -4451,10 +4521,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)
   };
 }
 var DialogSurface = (0, import_vue16.defineComponent)({
@@ -4464,7 +4534,7 @@ var DialogSurface = (0, import_vue16.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     title: { type: String, default: "" },
-    padding: { type: Number, default: 1 },
+    padding: { type: [Number, String, Array], default: 1 },
     zIndex: { type: Number, default: 1e3 },
     style: { type: Object, default: void 0 },
     placement: { type: String, default: "center" },
@@ -4697,7 +4767,7 @@ var TDialog = (0, import_vue16.defineComponent)({
     w: { type: Number, required: true },
     h: { type: Number, required: true },
     title: { type: String, default: "" },
-    padding: { type: Number, default: 1 },
+    padding: { type: [Number, String, Array], default: 1 },
     zIndex: { type: Number, default: 1e3 },
     style: { type: Object, default: void 0 },
     placement: { type: String, default: "center" },
@@ -5683,6 +5753,7 @@ 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 },
@@ -5690,13 +5761,16 @@ 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 },
+      { x: props.x, y: props.y, w: props.w, h: props.h, 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, h: Math.max(0, Math.floor(props.itemSize)) } : { x: offset, y: 0, w: Math.max(0, Math.floor(props.itemSize)), h: props.h };
+        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 };
         return (0, import_vue18.h)(
           TView,
           { key: index, ...childProps },
@@ -6057,6 +6131,7 @@ 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: "" },
@@ -6090,14 +6165,6 @@ 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);
@@ -6114,7 +6181,6 @@ 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);
@@ -6358,6 +6424,8 @@ 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;
@@ -6440,10 +6508,16 @@ var TInput = (0, import_vue19.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 = 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 value = getValue();
       const wrap = wrapMode.value;
       const prefix = buildMentionPrefix(props.mentions, width);
@@ -6469,13 +6543,16 @@ var TInput = (0, import_vue19.defineComponent)({
     }
     function setCursorByCell2D(cellX, cellY, extendSelection = false, e) {
       var _a;
-      const r = absRect.value;
-      const { w: contentW, padX } = measureContent(r);
-      const width = Math.max(1, contentW);
+      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 prefix = buildMentionPrefix(props.mentions, width);
       const prefixCells = prefix.cells;
-      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 localX = clamp3(cellX - r.x, 0, Math.max(0, w - 1));
+      const localY = clamp3(cellY - r.y, 0, Math.max(0, h16 - 1));
       const prefixVisible = scrollY.value === 0 && localY === 0 && prefixCells > 0;
       if (prefixVisible && localX < prefixCells) {
         for (const chip of prefix.chips) {
@@ -6525,8 +6602,7 @@ var TInput = (0, import_vue19.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(contentRect2.value.w));
         const prefix = buildMentionPrefix(props.mentions, w);
         const firstW = Math.max(1, w - prefix.cells);
         desiredCol.value = indexToWrappedCellColFirstWidth(nextValue, c, firstW, w).col;
@@ -6551,8 +6627,7 @@ var TInput = (0, import_vue19.defineComponent)({
       }
       cursor.value = clamp3(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(contentRect2.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;
@@ -6562,7 +6637,7 @@ var TInput = (0, import_vue19.defineComponent)({
       ensureCursorVisible();
       scheduler.invalidate();
     }
-    (0, import_vue19.watch)([() => absRect.value.w, () => absRect.value.h, () => wrapMode.value], () => {
+    (0, import_vue19.watch)([() => contentRect2.value.w, () => contentRect2.value.h, () => wrapMode.value], () => {
       ensureCursorVisible();
       scheduler.invalidate();
     });
@@ -6609,14 +6684,15 @@ var TInput = (0, import_vue19.defineComponent)({
           imeAnchor.value = null;
         return;
       }
-      const r = absRect.value;
-      if (r.w <= 0 || r.h <= 0) {
+      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) {
         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 = h16;
       const placeholderVisible = shouldShowPlaceholder.value;
       const offX = placeholderVisible ? 0 : scrollX.value;
       const offY = placeholderVisible ? 0 : scrollY.value;
@@ -6632,7 +6708,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 + padX + cx, cellY: r.y + cy };
+      imeAnchor.value = { cellX: r.x + cx, cellY: r.y + cy };
     });
     function acceptPrompt(index) {
       const ctx = activeContext.value;
@@ -6770,6 +6846,30 @@ var TInput = (0, import_vue19.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 _a, _b, _c, _d, _e, _f;
         if (!text)
@@ -6785,7 +6885,7 @@ var TInput = (0, import_vue19.defineComponent)({
         const proc = globalThis.process;
         if (((_b = proc == null ? void 0 : proc.stdout) == null ? void 0 : _b.write) && ((_c = proc == null ? void 0 : proc.stdout) == null ? void 0 : _c.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(`\x1B]52;c;${base64}\x07`);
             return true;
           } catch {
@@ -6853,8 +6953,7 @@ var TInput = (0, import_vue19.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(contentRect2.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);
@@ -7089,6 +7188,7 @@ var TInput = (0, import_vue19.defineComponent)({
         props.mentions,
         props.placeholder,
         props.placeholderWhenFocused,
+        props.padding,
         props.style,
         props.autoFocus,
         props.cursorBlink,
@@ -7108,8 +7208,10 @@ var TInput = (0, import_vue19.defineComponent)({
       paint: () => {
         if (!visible.value)
           return;
-        const r = absRect.value;
-        if (r.w <= 0 || r.h <= 0)
+        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;
@@ -7125,14 +7227,21 @@ var TInput = (0, import_vue19.defineComponent)({
         }
         const text = props.secret && !placeholderVisible ? maskText(textRaw) : textRaw;
         const baseStyle = placeholderVisible ? { ...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 = 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 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 < h16; row++) {
           const lineIndex = offY + row;
           const info = lines[lineIndex];
           const raw = info ? text.slice(info.start, info.end).replace(/[\r\n]/g, "") : "";
@@ -7141,26 +7250,24 @@ 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);
-          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, fg: "cyanBright", underline: true };
             for (const chip of prefix.chips) {
               if (!chip.label)
                 continue;
-              terminal.write(chip.label, { x: x0 + chip.start, y: r.y + row, style: chipStyle });
+              terminal.write(chip.label, { x: x0 + chip.start, y, style: chipStyle });
             }
-            terminal.write(visible2, { x: x0 + rowPrefixCells, y: r.y + row, style: baseStyle });
+            terminal.write(visible2, { x: x0 + rowPrefixCells, y, style: baseStyle });
           } else {
-            terminal.write(visible2, { x: x0, y: r.y + row, style: baseStyle });
+            terminal.write(visible2, { x: x0, y, style: baseStyle });
           }
         }
         const sel = selection.value;
         if (sel && !placeholderVisible) {
           const bg = "blueBright";
           const fg = "black";
-          for (let row = 0; row < r.h; row++) {
+          for (let row = 0; row < h16; row++) {
             const lineIndex = offY + row;
             const info = lines[lineIndex];
             if (!info)
@@ -7175,12 +7282,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 w = charCellWidth(ch);
-                if (xCell2 + w > rowTextW)
+                const w2 = charCellWidth(ch);
+                if (xCell2 + w2 > rowTextW)
                   break;
                 if (i >= sel.start && i < sel.end)
                   terminal.put(xBase + xCell2, y, ch, { ...style, fg, bg });
-                xCell2 += w;
+                xCell2 += w2;
                 i = nextI;
                 if (xCell2 >= rowTextW)
                   break;
@@ -7192,8 +7299,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 w = charCellWidth(ch);
-              const nextCell = xCell + w;
+              const w2 = charCellWidth(ch);
+              const nextCell = xCell + w2;
               if (nextCell <= offX) {
                 xCell = nextCell;
                 i = nextI;
@@ -7202,7 +7309,7 @@ var TInput = (0, import_vue19.defineComponent)({
               if (xCell >= offX + rowTextW)
                 break;
               const localX = xCell - offX;
-              if (localX + w > rowTextW)
+              if (localX + w2 > rowTextW)
                 break;
               if (i >= sel.start && i < sel.end)
                 terminal.put(xBase + localX, y, ch, { ...style, fg, bg });
@@ -7223,7 +7330,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 < r.h) {
+          if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < h16) {
             const x = x0 + cx0;
             const y = r.y + cy;
             const avail = Math.max(0, width - cx0);
@@ -7243,7 +7350,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 < r.h) {
+          if (cx0 >= 0 && cx0 < width && cy >= 0 && cy < h16) {
             const y = r.y + cy;
             let x = x0 + cx0;
             let cell = null;
@@ -7377,7 +7484,7 @@ var TInputBox = (0, import_vue20.defineComponent)({
     h: { type: Number, required: true },
     zIndex: { type: Number, default: 0 },
     title: { type: String, default: "" },
-    padding: { type: Number, default: 0 },
+    padding: { type: [Number, String, Array], default: 0 },
     modelValue: { type: String, required: true },
     placeholder: { type: String, default: "" },
     style: { type: Object, default: void 0 },
@@ -7388,8 +7495,9 @@ var TInputBox = (0, import_vue20.defineComponent)({
   },
   emits: ["update:modelValue", "input", "change", "keydown", "focus", "blur"],
   setup(props, { emit }) {
-    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));
+    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));
     return () => (0, import_vue20.h)(
       TBox,
       {
@@ -7439,6 +7547,7 @@ 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 },
@@ -7465,8 +7574,9 @@ 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, props.h);
+      const h16 = Math.max(0, Math.floor(contentRect2.value.h));
       if (h16 <= 0)
         return;
       const maxTop = Math.max(0, props.items.length - h16);
@@ -7476,7 +7586,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, () => props.h], () => {
+    (0, import_vue21.watch)([() => active.value, () => props.items.length, () => contentRect2.value.h], () => {
       ensureActiveVisible();
     }, { immediate: true });
     function commit(index) {
@@ -7557,7 +7667,9 @@ var TList = (0, import_vue21.defineComponent)({
       focusable: true,
       handlers: {
         click: (e) => {
-          const r = absRect.value;
+          const r = contentRect2.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;
@@ -7568,7 +7680,9 @@ var TList = (0, import_vue21.defineComponent)({
           }
         },
         dblclick: (e) => {
-          const r = absRect.value;
+          const r = contentRect2.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);
@@ -7578,7 +7692,8 @@ var TList = (0, import_vue21.defineComponent)({
           if (!delta)
             return;
           const dir = delta > 0 ? 1 : -1;
-          const maxTop = Math.max(0, props.items.length - props.h);
+          const h16 = Math.max(0, Math.floor(contentRect2.value.h));
+          const maxTop = Math.max(0, props.items.length - h16);
           const next = clamp4(scrollTop.value + dir, 0, maxTop);
           if (next !== scrollTop.value) {
             scrollTop.value = next;
@@ -7633,10 +7748,16 @@ var TList = (0, import_vue21.defineComponent)({
       paint: () => {
         if (!visible.value)
           return;
-        const r = absRect.value;
-        if (r.w <= 0 || r.h <= 0)
+        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 });
+        if (r.w <= 0 || r.h <= 0)
+          return;
         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;
@@ -7670,6 +7791,7 @@ 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 },
@@ -7693,14 +7815,44 @@ var TPathPicker = (0, import_vue22.defineComponent)({
     const scrollTop = (0, import_vue22.ref)(0);
     const error = (0, import_vue22.ref)(null);
     const inputH = 1;
-    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 absRect = (0, import_vue22.computed)(() => {
+      const raw = { x: props.x, y: props.y, w: props.w, h: props.h };
       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) {
@@ -7910,7 +8062,7 @@ var TPathPicker = (0, import_vue22.defineComponent)({
       deps: [
         visible.value,
         absListRect.value,
-        props.w,
+        contentRect2.value.w,
         listH.value,
         props.style,
         defaultStyle.value,
@@ -7943,9 +8095,9 @@ var TPathPicker = (0, import_vue22.defineComponent)({
     }));
     return () => (0, import_vue22.h)("span", rootProps, [
       (0, import_vue22.h)(TInput, {
-        "x": props.x,
-        "y": props.y,
-        "w": props.w,
+        "x": contentRect2.value.x,
+        "y": contentRect2.value.y,
+        "w": contentRect2.value.w,
         "h": inputH,
         "zIndex": props.zIndex,
         "modelValue": props.modelValue,
@@ -7984,14 +8136,17 @@ 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, default: 0 },
+    modelValue: { type: [Number, Array], default: 0 },
+    multiple: { type: Boolean, default: false },
+    multipleEmit: { type: String, default: "value" },
     style: { type: Object, default: void 0 },
     highlightStyle: { type: Object, default: void 0 },
     autoFocus: { type: Boolean, default: false },
     closeOnBlur: { type: Boolean, default: false }
   },
-  emits: ["update:modelValue", "change", "close", "focus", "blur", "keydown"],
+  emits: ["update:modelValue", "change", "confirm", "close", "focus", "blur", "keydown"],
   setup(props, { emit }) {
     const { terminal, scheduler, defaultStyle, events } = useTerminal();
     const layout = useLayout();
@@ -7999,7 +8154,18 @@ var TSelect = (0, import_vue23.defineComponent)({
     const parentEventZ = (0, import_vue23.inject)(EventZIndexContextKey, (0, import_vue23.computed)(() => 0));
     const eventZ = (0, import_vue23.computed)(() => (parentEventZ.value ?? 0) + (props.zIndex ?? 0));
     const focused = (0, import_vue23.ref)(false);
-    const active = (0, import_vue23.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 clamp6(idx, 0, max);
+      }
+      const selected = Array.isArray(props.modelValue) ? props.modelValue : [];
+      const first = selected[0] ?? 0;
+      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);
@@ -8007,39 +8173,190 @@ 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)(() => {
-      active.value = clamp6(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 = clamp6(idx, 0, max);
+        return;
+      }
+      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;
     }
     function getOptionDetail(opt) {
       return typeof opt === "string" ? void 0 : opt.detail;
     }
-    function commit(index) {
+    function commitSingle(index) {
       const next = clamp6(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 = /* @__PURE__ */ new Set();
+      for (const v of raw) {
+        if (typeof v !== "number" || !Number.isFinite(v))
+          continue;
+        set.add(clamp6(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 = clamp6(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 = 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") {
         e.preventDefault();
         active.value = clamp6(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 = clamp6(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;
       }
@@ -8055,13 +8372,34 @@ var TSelect = (0, import_vue23.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 = 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);
           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");
@@ -8077,6 +8415,10 @@ var TSelect = (0, import_vue23.defineComponent)({
         keydown: onKeydown
       }
     }));
+    (0, import_vue23.watchEffect)(() => {
+      void optionLayouts.value;
+      ensureActiveVisible();
+    });
     (0, import_vue23.watchEffect)(() => {
       if (!props.autoFocus)
         return;
@@ -8093,45 +8435,67 @@ var TSelect = (0, import_vue23.defineComponent)({
     useRenderNode(() => ({
       zIndex: props.zIndex,
       rect: absRect.value,
-      deps: [visible.value, absRect.value, props.w, props.h, props.options, props.modelValue, props.style, props.highlightStyle, focused.value, active.value, defaultStyle.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],
       paint: () => {
         if (!visible.value)
           return;
-        const r = absRect.value;
-        if (r.w <= 0 || r.h <= 0)
+        const rAll = absRect.value;
+        if (rAll.w <= 0 || rAll.h <= 0)
           return;
         const base = props.style ?? defaultStyle.value;
-        const selectedBase = props.highlightStyle ?? { ...base, bg: "yellow", fg: "black" };
+        const highlightBase = props.highlightStyle ?? { ...base, bg: "yellow", fg: "black" };
         const detailDimStyle = { ...base, dim: true };
-        const selectedDetailStyle = { ...selectedBase, dim: true };
-        for (let i = 0; i < r.h; i++) {
-          const opt = props.options[i];
+        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];
           if (!opt) {
-            terminal.write(" ".repeat(r.w), { x: r.x, y: r.y + i, style: base });
+            terminal.write(blank, { x: r.x, 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 = textCellWidth3(label);
-          const minGap = 2;
-          const availableForDetail = r.w - labelCells - minGap;
-          if (rawDetail && availableForDetail >= 4) {
-            const labelStyle = isSelected ? selectedBase : base;
-            terminal.write(label, { 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 = 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 });
-          } 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 });
+          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 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 });
           }
         }
       }