1ch 0.1.0 → 0.3.0

package/dist/index.js

@@ -14,6 +14,23 @@ function preserveTableTag(source, target) {
   if (toTaggedLine(source)[TABLE_TAG]) toTaggedLine(target)[TABLE_TAG] = true;
 }
 
+// src/termui/scroll-tag.ts
+var SCROLL_KEY = /* @__PURE__ */ Symbol("scrollRegion");
+function toTagged(line) {
+  return line;
+}
+function markScrollRegion(line, meta) {
+  toTagged(line)[SCROLL_KEY] = meta;
+  return line;
+}
+function getScrollRegionMeta(line) {
+  return toTagged(line)[SCROLL_KEY];
+}
+function preserveScrollTag(source, target) {
+  const meta = toTagged(source)[SCROLL_KEY];
+  if (meta) toTagged(target)[SCROLL_KEY] = meta;
+}
+
 // src/termui/base.ts
 function normalizedWidth(width) {
   if (!Number.isFinite(width)) return 0;
@@ -90,6 +107,11 @@ function padLine(line, w) {
   if (used === w) return line;
   return [...line, { text: " ".repeat(w - used), noSelect: true }];
 }
+function truncate(text, width, ellipsis = "\u2026") {
+  if (text.length <= width) return text;
+  if (width <= ellipsis.length) return ellipsis.slice(0, width);
+  return text.slice(0, width - ellipsis.length) + ellipsis;
+}
 function wrapText(text, w) {
   if (w <= 0) return [""];
   if (text.length <= w) return [text];
@@ -113,20 +135,27 @@ function wrapText(text, w) {
 }
 
 // src/termui/layout.ts
-function borderTop(w, title, color) {
+function borderTop(w, opts) {
   const width = normalizedWidth(w);
   if (width <= 0) return [];
-  if (width === 1) return [{ text: "\u250C", color, noSelect: true }];
+  if (width === 1) return [{ text: "\u250C", color: opts?.color, noSelect: true }];
+  const { title, color, action } = opts ?? {};
+  const innerWidth = width - 2;
+  const titleBudget = innerWidth - (action ? action.label.length + 2 : 0) - 4;
+  let titleStr = "";
   if (title) {
-    const maxTitle = Math.max(0, width - 6);
-    const safeTitle = title.length > maxTitle ? title.slice(0, maxTitle) : title;
-    const titleStr = "\u2500 " + safeTitle + " ";
-    const remaining = Math.max(0, width - 2 - titleStr.length);
-    return [
-      { text: "\u250C" + titleStr + hl(remaining) + "\u2510", color, noSelect: true }
-    ];
+    const safeTitle = title.length > titleBudget ? title.slice(0, Math.max(0, titleBudget)) : title;
+    titleStr = safeTitle.length > 0 ? "\u2500 " + safeTitle + " " : "";
   }
-  return [{ text: "\u250C" + hl(width - 2) + "\u2510", color, noSelect: true }];
+  const fillWidth = Math.max(0, innerWidth - titleStr.length - (action ? action.label.length + 2 : 0));
+  if (!action) {
+    return [{ text: "\u250C" + titleStr + hl(fillWidth) + "\u2510", color, noSelect: true }];
+  }
+  return [
+    { text: "\u250C" + titleStr + hl(fillWidth), color, noSelect: true },
+    { text: " " + action.label + " ", color: action.color ?? color, onClick: action.onClick, noSelect: true },
+    { text: "\u2510", color, noSelect: true }
+  ];
 }
 function borderBottom(w, color) {
   const width = normalizedWidth(w);
@@ -148,7 +177,7 @@ function box(content, opts) {
     const inner = width - 2;
     const contentBlock = content(inner);
     const result = [];
-    result.push(borderTop(width, opts?.title, bc));
+    result.push(borderTop(width, { title: opts?.title, color: bc, action: opts?.action }));
     for (const line of contentBlock) {
       result.push([
         { text: "\u2502", color: bc, noSelect: true },
@@ -205,11 +234,128 @@ function vstack(...children) {
     return result;
   };
 }
-function separator(color) {
-  return (w) => [[{ text: hl(w), color, noSelect: true }]];
+function separator(color, char) {
+  return (w) => {
+    const c = char ?? "\u2500";
+    return [[{ text: c.repeat(normalizedWidth(w)), color, noSelect: true }]];
+  };
+}
+function blank(count = 1) {
+  return (w) => {
+    const line = [" ".repeat(normalizedWidth(w))];
+    const result = [];
+    for (let i = 0; i < count; i++) result.push(line);
+    return result;
+  };
+}
+function divider(label, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const c = opts?.char ?? "\u2500";
+    const padded = ` ${label} `;
+    if (padded.length >= width) {
+      const lc = opts?.labelColor ?? opts?.color;
+      return [[lc ? { text: padded.slice(0, width), color: lc } : padded.slice(0, width)]];
+    }
+    const remaining = width - padded.length;
+    const leftLen = Math.floor(remaining / 2);
+    const rightLen = remaining - leftLen;
+    const lineColor = opts?.color;
+    const labelColor = opts?.labelColor ?? opts?.color;
+    const line = [
+      { text: c.repeat(leftLen), color: lineColor, noSelect: true },
+      labelColor ? { text: padded, color: labelColor } : padded,
+      { text: c.repeat(rightLen), color: lineColor, noSelect: true }
+    ];
+    return [line];
+  };
+}
+function grid(cells, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const cols = Math.max(1, opts.cols);
+    const gap = normalizedWidth(opts.gap ?? 1);
+    const rowGap = normalizedWidth(opts.rowGap ?? 0);
+    const totalGap = gap * (cols - 1);
+    const cellWidth = Math.max(1, Math.floor((width - totalGap) / cols));
+    const gapStr = gap > 0 ? " ".repeat(gap) : "";
+    const result = [];
+    for (let rowStart = 0; rowStart < cells.length; rowStart += cols) {
+      if (rowStart > 0 && rowGap > 0) {
+        const emptyLine = [" ".repeat(width)];
+        for (let g = 0; g < rowGap; g++) result.push(emptyLine);
+      }
+      const rowCells = cells.slice(rowStart, rowStart + cols);
+      const blocks = rowCells.map((cell) => cell(cellWidth));
+      const maxLines = Math.max(0, ...blocks.map((b) => b.length));
+      for (let i = 0; i < maxLines; i++) {
+        const line = [];
+        for (let j = 0; j < cols; j++) {
+          if (j > 0 && gapStr) line.push(gapStr);
+          const block = blocks[j];
+          if (block && block[i]) {
+            line.push(...padLine(block[i], cellWidth));
+          } else {
+            line.push(" ".repeat(cellWidth));
+          }
+        }
+        result.push(padLine(line, width));
+      }
+    }
+    return result;
+  };
+}
+function scroll(content, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const maxH = normalizedWidth(opts.maxHeight);
+    const contentW = Math.max(1, width - 1);
+    const fullBlock = content(contentW);
+    const totalLines = fullBlock.length;
+    if (totalLines <= maxH) {
+      return fullBlock.map((line) => padLine(line, width));
+    }
+    const maxOffset = Math.max(0, totalLines - maxH);
+    const offset = Math.min(maxOffset, Math.max(0, opts.offset ?? 0));
+    const visible = fullBlock.slice(offset, offset + maxH);
+    const thumbHeight = Math.max(1, Math.round(maxH / totalLines * maxH));
+    const thumbStart = Math.round(offset / maxOffset * (maxH - thumbHeight));
+    const result = [];
+    for (let i = 0; i < visible.length; i++) {
+      const inThumb = i >= thumbStart && i < thumbStart + thumbHeight;
+      const scrollChar = inThumb ? "\u2588" : "\u2591";
+      const line = [
+        ...padLine(visible[i], contentW),
+        { text: scrollChar, color: opts.scrollbarColor, noSelect: true }
+      ];
+      if (opts.onScroll) {
+        markScrollRegion(line, { onScroll: opts.onScroll, totalLines, maxHeight: maxH, offset });
+      }
+      result.push(line);
+    }
+    return result;
+  };
 }
-function blank() {
-  return (w) => [[" ".repeat(normalizedWidth(w))]];
+function padding(content, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const t = normalizedWidth(opts?.top ?? opts?.y ?? 0);
+    const b = normalizedWidth(opts?.bottom ?? opts?.y ?? 0);
+    const l = normalizedWidth(opts?.left ?? opts?.x ?? 0);
+    const r = normalizedWidth(opts?.right ?? opts?.x ?? 0);
+    const innerW = Math.max(1, width - l - r);
+    const block = content(innerW);
+    const result = [];
+    const emptyLine = [" ".repeat(width)];
+    for (let i = 0; i < t; i++) result.push(emptyLine);
+    const leftPad = l > 0 ? " ".repeat(l) : "";
+    for (const line of block) {
+      const padded = leftPad ? [leftPad, ...line] : line;
+      result.push(padLine(padded, width));
+    }
+    for (let i = 0; i < b; i++) result.push(emptyLine);
+    return result;
+  };
 }
 
 // src/termui/table.ts
@@ -311,7 +457,8 @@ function table(columns, data, opts) {
           const text = padStr + pad(cellLine, innerW, col.align === "right") + padStr;
           const color = typeof col.color === "function" ? col.color(row[col.key], row) : col.color;
           const dim = typeof col.dim === "function" ? col.dim(row[col.key], row) : col.dim;
-          dataLine.push({ text, color: color || void 0, dim: dim || void 0, cell: i });
+          const cellClick = typeof col.onClick === "function" ? () => col.onClick(row[col.key], row) : void 0;
+          dataLine.push({ text, color: color || void 0, dim: dim || void 0, onClick: cellClick, cell: i });
           dataLine.push({ text: "\u2502", color: bc, noSelect: true });
         }
         result.push(dataLine);
@@ -384,6 +531,92 @@ function badge(label, opts) {
     onClick: opts?.onClick
   };
 }
+function kv(pairs, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const sep = opts?.separator ?? "  ";
+    const maxKey = opts?.keyWidth ?? Math.max(0, ...pairs.map((p) => p.key.length));
+    const result = [];
+    for (const pair of pairs) {
+      const keyText = pad(pair.key, maxKey);
+      const keyColor = pair.keyColor ?? opts?.keyColor;
+      const keySeg = keyColor ? { text: keyText, color: keyColor } : keyText;
+      if (typeof pair.value === "string") {
+        const valColor = pair.valueColor ?? opts?.valueColor;
+        const valSeg = valColor || pair.onClick ? { text: pair.value, color: valColor, onClick: pair.onClick } : pair.value;
+        result.push(padLine([keySeg, sep, valSeg], width));
+      } else {
+        result.push(padLine([keySeg, sep, ...pair.value], width));
+      }
+    }
+    return result;
+  };
+}
+function callout(content, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const accent = opts?.accent ?? opts?.color;
+    const innerWidth = Math.max(1, width - 2);
+    let block;
+    if (typeof content === "string") {
+      const wrapped = wrapText(content, innerWidth);
+      block = wrapped.map((line) => {
+        const seg = opts?.color ? [{ text: line, color: opts.color }] : [line];
+        return padLine(seg, innerWidth);
+      });
+    } else {
+      block = content(innerWidth);
+    }
+    const result = [];
+    if (opts?.label) {
+      const labelLine = [
+        { text: "\u2590", color: accent, noSelect: true },
+        " ",
+        { text: opts.label, color: accent, bold: true }
+      ];
+      result.push(padLine(labelLine, width));
+    }
+    for (const line of block) {
+      result.push([
+        { text: "\u2590", color: accent, noSelect: true },
+        " ",
+        ...padLine(line, innerWidth)
+      ]);
+    }
+    return result;
+  };
+}
+function checkbox(checked, label, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const check = checked ? "\u2713" : " ";
+    const boxSeg = {
+      text: `[${check}]`,
+      color: opts?.checkColor ?? opts?.color,
+      onClick: opts?.onClick
+    };
+    const labelSeg = opts?.onClick ? { text: ` ${label}`, color: opts.color, onClick: opts.onClick } : opts?.color ? { text: ` ${label}`, color: opts.color } : ` ${label}`;
+    return [padLine([boxSeg, labelSeg], width)];
+  };
+}
+function inputField(value, opts) {
+  return (w) => {
+    const totalWidth = normalizedWidth(opts?.width ?? w);
+    const innerWidth = Math.max(1, totalWidth - 2);
+    const bc = opts?.borderColor;
+    const focused = opts?.focused ?? false;
+    const display = value || opts?.placeholder || "";
+    const isPlaceholder = !value && opts?.placeholder;
+    const textTruncated = display.length > innerWidth ? display.slice(display.length - innerWidth) : display;
+    const padded = pad(textTruncated + (focused ? "\u2588" : ""), innerWidth);
+    const line = [
+      { text: focused ? "\u2502" : "[", color: bc, noSelect: true },
+      isPlaceholder ? { text: padded, dim: true, color: opts?.color, onClick: opts?.onClick } : opts?.color || opts?.onClick ? { text: padded, color: opts?.color, onClick: opts?.onClick } : padded,
+      { text: focused ? "\u2502" : "]", color: bc, noSelect: true }
+    ];
+    return [padLine(line, w)];
+  };
+}
 
 // src/termui/json.ts
 function fromJsonNode(node) {
@@ -447,7 +680,7 @@ function tree(data, opts) {
         const line = [];
         if (prefix) line.push({ text: prefix, color: opts?.branchColor ?? opts?.color, noSelect: true });
         line.push({ text: connector, color: opts?.branchColor ?? opts?.color, noSelect: true });
-        line.push({ text: node.label, color: hasKids ? opts?.color : opts?.leafColor ?? opts?.color });
+        line.push({ text: node.label, color: hasKids ? opts?.color : opts?.leafColor ?? opts?.color, onClick: node.onClick });
         result.push(padLine(line, w));
         if (hasKids) {
           walk(node.children, prefix + (last ? "    " : "\u2502   "));
@@ -464,9 +697,13 @@ function list(items, opts) {
     const ordered = opts?.ordered ?? false;
     const digits = String(items.length).length;
     for (let i = 0; i < items.length; i++) {
+      const item = items[i];
+      const text = typeof item === "string" ? item : item.text;
+      const itemColor = typeof item === "string" ? opts?.color : item.color ?? opts?.color;
+      const itemClick = typeof item === "string" ? void 0 : item.onClick;
       const prefix = ordered ? ` ${String(i + 1).padStart(digits, " ")}. ` : " * ";
       const indent = " ".repeat(prefix.length);
-      const wrapped = wrapText(items[i], w - prefix.length);
+      const wrapped = wrapText(text, w - prefix.length);
       for (let j = 0; j < wrapped.length; j++) {
         const line = [];
         if (j === 0) {
@@ -474,7 +711,7 @@ function list(items, opts) {
         } else {
           line.push(indent);
         }
-        line.push(opts?.color ? { text: wrapped[j], color: opts.color } : wrapped[j]);
+        line.push(itemColor || itemClick ? { text: wrapped[j], color: itemColor, onClick: itemClick } : wrapped[j]);
         result.push(padLine(line, w));
       }
     }
@@ -482,6 +719,9 @@ function list(items, opts) {
   };
 }
 
+// src/termui/code-diff.ts
+import { createPatch } from "diff";
+
 // src/tokenize.ts
 function rules(pairs) {
   return pairs.map(([pattern, type]) => ({
@@ -1023,6 +1263,7 @@ function tokenColor(type, theme) {
 function code(source, opts) {
   const t = opts?.theme ?? dark;
   const tokens = tokenize(source, opts?.language);
+  const copyAction = opts?.copyable !== false ? { label: "cp", onClick: () => navigator.clipboard.writeText(source), color: t.semantic.frameMuted } : void 0;
   return box(
     lines(
       tokens.length > 0 ? tokens.map(
@@ -1031,11 +1272,12 @@ function code(source, opts) {
     ),
     {
       title: opts?.title ?? (opts?.language ? `code:${opts.language}` : "code"),
-      borderColor: opts?.borderColor ?? t.markdown.codeBorder
+      borderColor: opts?.borderColor ?? t.markdown.codeBorder,
+      action: opts?.action ?? copyAction
     }
   );
 }
-function diff(value, opts) {
+function unifiedDiff(value, opts) {
   const t = opts?.theme ?? dark;
   const addC = opts?.addColor ?? t.semantic.success;
   const remC = opts?.removeColor ?? t.semantic.danger;
@@ -1049,6 +1291,72 @@ function diff(value, opts) {
     });
   });
 }
+function computeDiff(before, after, opts) {
+  const patch = createPatch("", before, after, "", "", { context: opts?.context ?? 3 });
+  const hunks = patch.replace(/\r\n/g, "\n").split("\n").filter(
+    (l) => !l.startsWith("Index:") && !l.startsWith("====") && !l.startsWith("---") && !l.startsWith("+++")
+  ).join("\n").trim();
+  return unifiedDiff(hunks, opts);
+}
+
+// src/termui/chart.ts
+function fmtNum(n) {
+  if (Math.abs(n) >= 1e3) return (n / 1e3).toFixed(1) + "k";
+  if (Number.isInteger(n)) return String(n);
+  return n.toFixed(1);
+}
+function chart(data, opts) {
+  return (w) => {
+    const width = normalizedWidth(w);
+    const height = opts?.height ?? 8;
+    const color = opts?.color;
+    const axisColor = opts?.axisColor;
+    if (data.length === 0 || width < 4 || height < 2) return [padLine([], width)];
+    const min = Math.min(...data);
+    const max = Math.max(...data);
+    const range = max - min || 1;
+    const minLabel = fmtNum(min);
+    const maxLabel = fmtNum(max);
+    const labelW = Math.max(minLabel.length, maxLabel.length);
+    const axisW = labelW + 2;
+    const plotW = Math.max(1, width - axisW);
+    const points = [];
+    if (data.length === 1) {
+      for (let i = 0; i < plotW; i++) points.push(data[0]);
+    } else {
+      for (let i = 0; i < plotW; i++) {
+        const idx = i / (plotW - 1) * (data.length - 1);
+        const lo = Math.floor(idx);
+        const hi = Math.min(lo + 1, data.length - 1);
+        const t = idx - lo;
+        points.push(data[lo] * (1 - t) + data[hi] * t);
+      }
+    }
+    const rows = points.map((v) => Math.round((v - min) / range * (height - 1)));
+    const result = [];
+    for (let row = height - 1; row >= 0; row--) {
+      const line = [];
+      let label = "";
+      if (row === height - 1) label = maxLabel;
+      else if (row === 0) label = minLabel;
+      line.push({ text: label.padStart(labelW) + " \u2502", color: axisColor, noSelect: true });
+      let text = "";
+      for (let col = 0; col < plotW; col++) {
+        const val = rows[col];
+        if (val === row) text += "\u2584";
+        else if (opts?.fill && val > row) text += "\u2588";
+        else text += " ";
+      }
+      line.push(color ? { text, color } : text);
+      result.push(padLine(line, width));
+    }
+    const xAxis = [
+      { text: " ".repeat(labelW) + " \u2514" + "\u2500".repeat(plotW), color: axisColor, noSelect: true }
+    ];
+    result.push(padLine(xAxis, width));
+    return result;
+  };
+}
 
 // src/document/common.ts
 function headingLevelKey(level) {
@@ -1386,16 +1694,23 @@ function renderMarkdownBlock(block, theme, overrides) {
       };
     case "separator":
       return separator(overrides?.separator ?? md.separator);
-    case "code":
+    case "code": {
+      const codeSource = block.lines.join("\n");
       return box(
         lines(
           block.lines.length > 0 ? block.lines.map((line) => [{ text: line || " ", color: overrides?.codeText ?? md.codeText }]) : [[{ text: " ", color: overrides?.codeEmpty ?? md.codeEmpty, dim: true }]]
         ),
         {
           title: block.language ? `code:${block.language}` : "code",
-          borderColor: overrides?.codeBorder ?? md.codeBorder
+          borderColor: overrides?.codeBorder ?? md.codeBorder,
+          action: {
+            label: "cp",
+            onClick: () => navigator.clipboard.writeText(codeSource),
+            color: theme.semantic.frameMuted
+          }
         }
       );
+    }
   }
 }
 function fromMarkdown(markdown, opts) {
@@ -2048,9 +2363,6 @@ function asNumber(value) {
 function asBoolean(value) {
   return typeof value === "boolean" ? value : void 0;
 }
-function asStringArray(value) {
-  return Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
-}
 function asNumberArray(value) {
   if (!Array.isArray(value)) return void 0;
   const out = [];
@@ -2068,6 +2380,13 @@ function asRecordArray(value) {
   }
   return out;
 }
+function asBoxAction(value) {
+  if (!isRecord4(value)) return void 0;
+  const label = asString(value.label);
+  const onClick = typeof value.onClick === "function" ? value.onClick : void 0;
+  if (!label || !onClick) return void 0;
+  return { label, onClick, color: asString(value.color) };
+}
 function isMarkdownOverrides(value) {
   if (!isRecord4(value)) return false;
   if (value.headingMarker !== void 0 && typeof value.headingMarker !== "string") return false;
@@ -2309,40 +2628,51 @@ function compileRaw(p, children) {
     ])
   );
 }
-function compileLine(children) {
+function compileSpanSegments(children, inherited) {
   const segments = [];
   for (const child of children) {
     if (child.type === "t-text") {
-      segments.push(child.text ?? "");
+      const text = child.text ?? "";
+      if (inherited && (inherited.color || inherited.bg || inherited.bold !== void 0 || inherited.dim !== void 0 || inherited.inverted !== void 0 || inherited.blink !== void 0 || inherited.onClick)) {
+        segments.push({ text, ...inherited });
+      } else {
+        segments.push(text);
+      }
       continue;
     }
     if (child.type === "t-span") {
       const cp = child.props;
-      const text = asString(cp.text) ?? extractTermText(child.children);
-      const color = asString(cp.color);
-      const bg = asString(cp.bg);
-      const bold = asBoolean(cp.bold);
-      const dim = asBoolean(cp.dim);
-      const inverted = asBoolean(cp.inverted);
-      const blink = asBoolean(cp.blink);
-      if (color || bg || bold !== void 0 || dim !== void 0 || inverted !== void 0 || blink !== void 0) {
-        segments.push({
-          text,
-          color,
-          bg,
-          bold,
-          dim,
-          inverted,
-          blink
-        });
+      const color = asString(cp.color) ?? inherited?.color;
+      const bg = asString(cp.bg) ?? inherited?.bg;
+      const bold = asBoolean(cp.bold) ?? inherited?.bold;
+      const dim = asBoolean(cp.dim) ?? inherited?.dim;
+      const inverted = asBoolean(cp.inverted) ?? inherited?.inverted;
+      const blink = asBoolean(cp.blink) ?? inherited?.blink;
+      const onClick = (typeof cp.onClick === "function" ? cp.onClick : void 0) ?? inherited?.onClick;
+      const style = { color, bg, bold, dim, inverted, blink, onClick };
+      if (cp.text) {
+        const text = asString(cp.text);
+        if (color || bg || bold !== void 0 || dim !== void 0 || inverted !== void 0 || blink !== void 0 || onClick) {
+          segments.push({ text, ...style });
+        } else {
+          segments.push(text);
+        }
+      } else if (child.children.length > 0) {
+        segments.push(...compileSpanSegments(child.children, style));
+      }
+    } else {
+      const text = extractTermText(child.children);
+      if (inherited && (inherited.color || inherited.bg || inherited.bold !== void 0 || inherited.dim !== void 0 || inherited.inverted !== void 0 || inherited.blink !== void 0 || inherited.onClick)) {
+        segments.push({ text, ...inherited });
       } else {
         segments.push(text);
       }
-    } else {
-      segments.push(extractTermText(child.children));
     }
   }
-  return lines([segments]);
+  return segments;
+}
+function compileLine(children) {
+  return lines([compileSpanSegments(children)]);
 }
 function compileTermNode(node, theme, mdOverrides) {
   if (node.type === "t-text") {
@@ -2368,13 +2698,25 @@ function compileTermNode(node, theme, mdOverrides) {
       const gap = asNumber(p.gap) ?? 0;
       return box(stackWithGap(ch, gap), {
         title: asString(p.title),
-        borderColor: asString(p.borderColor) ?? theme.semantic.border
+        borderColor: asString(p.borderColor) ?? theme.semantic.border,
+        action: asBoxAction(p.action)
+      });
+    }
+    case "t-pad": {
+      const ch = compileChildLayouts(node.children, theme, mdOverrides);
+      return padding(ch.length > 0 ? stackWithGap(ch, 0) : blank(), {
+        x: asNumber(p.x),
+        y: asNumber(p.y),
+        top: asNumber(p.top),
+        bottom: asNumber(p.bottom),
+        left: asNumber(p.left),
+        right: asNumber(p.right)
       });
     }
     case "t-separator":
-      return separator(asString(p.color) ?? theme.semantic.border);
+      return separator(asString(p.color) ?? theme.semantic.border, asString(p.char));
     case "t-blank":
-      return blank();
+      return blank(asNumber(p.lines) ?? 1);
     case "t-raw":
       return compileRaw(p, node.children);
     case "t-line":
@@ -2447,10 +2789,20 @@ function compileTermNode(node, theme, mdOverrides) {
         language: asString(p.language),
         title: asString(p.title),
         borderColor: asString(p.borderColor) ?? theme.markdown.codeBorder,
-        theme
+        theme,
+        copyable: asBoolean(p.copyable),
+        action: asBoxAction(p.action)
       });
     case "t-diff":
-      return diff(asString(p.value) ?? "", {
+      return unifiedDiff(asString(p.value) ?? "", {
+        addColor: asString(p.addColor),
+        removeColor: asString(p.removeColor),
+        metaColor: asString(p.metaColor),
+        theme
+      });
+    case "t-diff-compute":
+      return computeDiff(asString(p.before) ?? "", asString(p.after) ?? "", {
+        context: asNumber(p.context),
         addColor: asString(p.addColor),
         removeColor: asString(p.removeColor),
         metaColor: asString(p.metaColor),
@@ -2490,7 +2842,7 @@ function compileTermNode(node, theme, mdOverrides) {
       };
     }
     case "t-list":
-      return list(asStringArray(p.items), {
+      return list(Array.isArray(p.items) ? p.items : [], {
         ordered: asBoolean(p.ordered),
         bulletColor: asString(p.bulletColor),
         color: asString(p.color)
@@ -2499,6 +2851,8 @@ function compileTermNode(node, theme, mdOverrides) {
       const label = asString(p.label) ?? "";
       const btnColor = asString(p.color);
       const btnBg = asString(p.bg);
+      const btnBold = asBoolean(p.bold);
+      const btnDim = asBoolean(p.dim);
       const onClick = typeof p.onClick === "function" ? p.onClick : void 0;
       const resolvedBtnColor = btnColor ?? theme.components.button.fg;
       const resolvedBtnBg = btnBg ?? theme.components.button.bg;
@@ -2508,11 +2862,90 @@ function compileTermNode(node, theme, mdOverrides) {
         const rp = Math.max(0, w - lp - decorated.length);
         const segments = [];
         if (lp > 0) segments.push(" ".repeat(lp));
-        segments.push({ text: decorated, color: resolvedBtnColor, bg: resolvedBtnBg, onClick });
+        segments.push({ text: decorated, color: resolvedBtnColor, bg: resolvedBtnBg, bold: btnBold, dim: btnDim, onClick });
         if (rp > 0) segments.push(" ".repeat(rp));
         return [segments];
       };
     }
+    case "t-badge": {
+      const label = asString(p.label) ?? "";
+      const badgeColor = asString(p.color) ?? theme.components.badge.fg;
+      const badgeBg = asString(p.bg) ?? theme.components.badge.bg;
+      const onClick = typeof p.onClick === "function" ? p.onClick : void 0;
+      return lines([[{ text: ` ${label} `, color: badgeColor, bg: badgeBg, onClick }]]);
+    }
+    case "t-divider":
+      return divider(asString(p.label) ?? "", {
+        color: asString(p.color) ?? theme.semantic.border,
+        char: asString(p.char),
+        labelColor: asString(p.labelColor)
+      });
+    case "t-kv":
+      return kv(Array.isArray(p.pairs) ? p.pairs : [], {
+        separator: asString(p.separator),
+        keyColor: asString(p.keyColor),
+        valueColor: asString(p.valueColor),
+        keyWidth: asNumber(p.keyWidth)
+      });
+    case "t-callout": {
+      const ch = compileChildLayouts(node.children, theme, mdOverrides);
+      const text = asString(p.text);
+      const content = text ?? (ch.length > 0 ? stackWithGap(ch, 0) : blank());
+      return callout(content, {
+        color: asString(p.color),
+        accent: asString(p.accent),
+        label: asString(p.label)
+      });
+    }
+    case "t-chart":
+      return chart(
+        Array.isArray(p.data) ? p.data.filter((v) => typeof v === "number") : [],
+        {
+          height: asNumber(p.height),
+          color: asString(p.color),
+          axisColor: asString(p.axisColor) ?? theme.semantic.border,
+          fill: asBoolean(p.fill)
+        }
+      );
+    case "t-scroll": {
+      const ch = compileChildLayouts(node.children, theme, mdOverrides);
+      const content = ch.length > 0 ? stackWithGap(ch, 0) : blank();
+      const onScroll = typeof p.onScroll === "function" ? p.onScroll : void 0;
+      return scroll(content, {
+        maxHeight: asNumber(p.maxHeight) ?? 10,
+        offset: asNumber(p.offset),
+        scrollbarColor: asString(p.scrollbarColor) ?? theme.semantic.border,
+        onScroll
+      });
+    }
+    case "t-grid": {
+      const ch = compileChildLayouts(node.children, theme, mdOverrides);
+      return grid(ch, {
+        cols: asNumber(p.cols) ?? 2,
+        gap: asNumber(p.gap),
+        rowGap: asNumber(p.rowGap)
+      });
+    }
+    case "t-checkbox": {
+      const checked = asBoolean(p.checked) ?? false;
+      const label = asString(p.label) ?? "";
+      const onChange = typeof p.onChange === "function" ? p.onChange : void 0;
+      const onClick = typeof p.onClick === "function" ? p.onClick : onChange ? () => onChange(!checked) : void 0;
+      return checkbox(checked, label, {
+        color: asString(p.color),
+        checkColor: asString(p.checkColor),
+        onClick
+      });
+    }
+    case "t-input":
+      return inputField(asString(p.value) ?? "", {
+        placeholder: asString(p.placeholder),
+        width: asNumber(p.width),
+        focused: asBoolean(p.focused),
+        color: asString(p.color),
+        borderColor: asString(p.borderColor) ?? theme.semantic.border,
+        onClick: typeof p.onClick === "function" ? p.onClick : void 0
+      });
     default: {
       const ch = compileChildLayouts(node.children, theme, mdOverrides);
       return ch.length > 0 ? stackWithGap(ch, 0) : null;
@@ -2745,6 +3178,7 @@ function reconcileLine(prevLine, nextLine) {
     reconciled[i] = prevSeg !== void 0 && sameSegment(prevSeg, nextSeg) ? prevSeg : nextSeg;
   }
   preserveTableTag(nextLine, reconciled);
+  preserveScrollTag(nextLine, reconciled);
   return reconciled;
 }
 function reconcileBlock(prevBlock, nextBlock) {
@@ -2869,31 +3303,71 @@ var TermTable = memo(
     return true;
   }
 );
+var TermScrollRegion = memo(function TermScrollRegion2({ lines: lines2, meta, theme }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      className: "termui-scroll-region",
+      onWheel: (e) => {
+        e.preventDefault();
+        const step = e.deltaY > 0 ? 1 : -1;
+        const maxOffset = Math.max(0, meta.totalLines - meta.maxHeight);
+        const newOffset = Math.min(maxOffset, Math.max(0, meta.offset + step));
+        if (newOffset !== meta.offset) meta.onScroll(newOffset);
+      },
+      children: lines2.map((line, i) => /* @__PURE__ */ jsx2(TermLine, { line, theme }, i))
+    }
+  );
+});
 var TermBlock = memo(
   function TermBlock2({ block, theme }) {
     const elements = [];
     let tableLines = null;
     let tableStart = 0;
+    let scrollLines = null;
+    let scrollStart = 0;
+    let scrollMeta = null;
     const flushTable = () => {
       if (tableLines) {
         elements.push(/* @__PURE__ */ jsx2(TermTable, { lines: tableLines, theme }, `t${tableStart}`));
         tableLines = null;
       }
     };
+    const flushScroll = () => {
+      if (scrollLines && scrollMeta) {
+        elements.push(
+          /* @__PURE__ */ jsx2(TermScrollRegion, { lines: scrollLines, meta: scrollMeta, theme }, `s${scrollStart}`)
+        );
+        scrollLines = null;
+        scrollMeta = null;
+      }
+    };
     for (let i = 0; i < block.length; i++) {
       const line = block[i];
+      const sm = getScrollRegionMeta(line);
       if (isTableLine(line)) {
+        flushScroll();
         if (!tableLines) {
           tableLines = [];
           tableStart = i;
         }
         tableLines.push(line);
+      } else if (sm) {
+        flushTable();
+        if (!scrollLines) {
+          scrollLines = [];
+          scrollStart = i;
+          scrollMeta = sm;
+        }
+        scrollLines.push(line);
       } else {
         flushTable();
+        flushScroll();
         elements.push(/* @__PURE__ */ jsx2(TermLine, { line, theme }, i));
       }
     }
     flushTable();
+    flushScroll();
     return /* @__PURE__ */ jsx2(Fragment, { children: elements });
   },
   (prev, next) => prev.block === next.block && prev.theme === next.theme
@@ -3014,21 +3488,24 @@ function TermDocument({
 }
 
 // src/term-react.tsx
-import { createElement } from "react";
+import { createElement, useCallback, useEffect as useEffect3, useState as useState2 } from "react";
 function TVStack({ children, gap }) {
   return createElement("t-vstack", { gap }, children);
 }
 function THStack({ children, gap, widths }) {
   return createElement("t-hstack", { gap, widths }, children);
 }
-function TBox({ children, title, borderColor, gap }) {
-  return createElement("t-box", { title, borderColor, gap }, children);
+function TBox({ children, title, borderColor, gap, action }) {
+  return createElement("t-box", { title, borderColor, gap, action }, children);
+}
+function TSeparator({ color, char }) {
+  return createElement("t-separator", { color, char });
 }
-function TSeparator({ color }) {
-  return createElement("t-separator", { color });
+function TBlank({ lines: lines2 } = {}) {
+  return createElement("t-blank", { lines: lines2 });
 }
-function TBlank() {
-  return createElement("t-blank", {});
+function TBadge({ label, color, bg, onClick }) {
+  return createElement("t-badge", { label, color, bg, onClick });
 }
 function TRaw({ children, text, color, bg, bold, dim, blink, inverted, onClick }) {
   return createElement(
@@ -3090,25 +3567,31 @@ function THtml({ value, themeOverrides }) {
 function TLine({ children }) {
   return createElement("t-line", {}, children);
 }
-function TSpan({ children, text, color, bg, bold, dim, inverted, blink }) {
+function TSpan({ children, text, color, bg, bold, dim, inverted, blink, onClick }) {
   return createElement(
     "t-span",
-    { text, color, bg, bold, dim, inverted, blink },
+    { text, color, bg, bold, dim, inverted, blink, onClick },
     children
   );
 }
+function TPad({ children, x, y, top, bottom, left, right }) {
+  return createElement("t-pad", { x, y, top, bottom, left, right }, children);
+}
 function TLayout({ layout }) {
   return createElement("t-layout", { layout });
 }
 function TTree({ data, color, branchColor, leafColor }) {
   return createElement("t-tree", { data, color, branchColor, leafColor });
 }
-function TCode({ code: code2, language, title, borderColor }) {
-  return createElement("t-code", { code: code2, language, title, borderColor });
+function TCode({ code: code2, language, title, borderColor, action, copyable }) {
+  return createElement("t-code", { code: code2, language, title, borderColor, action, copyable });
 }
-function TDiff({ value, addColor, removeColor, metaColor }) {
+function TUnifiedDiff({ value, addColor, removeColor, metaColor }) {
   return createElement("t-diff", { value, addColor, removeColor, metaColor });
 }
+function TDiffCompute({ before, after, context, addColor, removeColor, metaColor }) {
+  return createElement("t-diff-compute", { before, after, context, addColor, removeColor, metaColor });
+}
 function TBar({ label, value, max, color }) {
   return createElement("t-bar", { label, value, max, color });
 }
@@ -3118,8 +3601,70 @@ function TSpark({ data, color }) {
 function TList({ items, ordered, bulletColor, color }) {
   return createElement("t-list", { items, ordered, bulletColor, color });
 }
-function TButton({ label, onClick, color, bg }) {
-  return createElement("t-button", { label, onClick, color, bg });
+function TButton({ label, onClick, color, bg, bold, dim }) {
+  return createElement("t-button", { label, onClick, color, bg, bold, dim });
+}
+function TDivider({ label, color, char, labelColor }) {
+  return createElement("t-divider", { label, color, char, labelColor });
+}
+function TKV({ pairs, separator: separator2, keyColor, valueColor, keyWidth }) {
+  return createElement("t-kv", { pairs, separator: separator2, keyColor, valueColor, keyWidth });
+}
+function TCallout({ children, text, color, accent, label }) {
+  return createElement("t-callout", { text, color, accent, label }, children);
+}
+function TChart({ data, height, color, axisColor, fill }) {
+  return createElement("t-chart", { data, height, color, axisColor, fill });
+}
+function TScroll({ children, maxHeight, offset: controlledOffset, onScroll: externalOnScroll, scrollbarColor }) {
+  const [internalOffset, setInternalOffset] = useState2(0);
+  const isControlled = controlledOffset !== void 0;
+  const offset = isControlled ? controlledOffset : internalOffset;
+  const handleScroll = useCallback((newOffset) => {
+    if (!isControlled) setInternalOffset(newOffset);
+    externalOnScroll?.(newOffset);
+  }, [isControlled, externalOnScroll]);
+  return createElement("t-scroll", { maxHeight, offset, scrollbarColor, onScroll: handleScroll }, children);
+}
+function TGrid({ children, cols, gap, rowGap }) {
+  return createElement("t-grid", { cols, gap, rowGap }, children);
+}
+function TCheckbox({ checked, label, color, checkColor, onChange, onClick }) {
+  return createElement("t-checkbox", { checked, label, color, checkColor, onChange, onClick });
+}
+function TInput({ value, onChange, onSubmit, placeholder, width, focused: controlledFocused, color, borderColor, onClick }) {
+  const [internalFocused, setInternalFocused] = useState2(false);
+  const focused = controlledFocused ?? internalFocused;
+  useEffect3(() => {
+    if (!focused || !onChange) return;
+    const handler = (e) => {
+      if (e.key === "Escape") {
+        setInternalFocused(false);
+        return;
+      }
+      if (e.key === "Enter") {
+        setInternalFocused(false);
+        onSubmit?.(value);
+        return;
+      }
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        onChange(value.slice(0, -1));
+        return;
+      }
+      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+        e.preventDefault();
+        onChange(value + e.key);
+      }
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [focused, value, onChange, onSubmit]);
+  const handleClick = () => {
+    setInternalFocused(true);
+    onClick?.();
+  };
+  return createElement("t-input", { value, placeholder, width, focused, color, borderColor, onClick: handleClick });
 }
 function renderTermReact(tree2, opts) {
   const resolvedTheme = opts?.theme ?? resolveTheme(opts?.themeSpec ?? defaultThemeSpec, opts?.mode ?? "dark");
@@ -3134,27 +3679,27 @@ function renderTermReact(tree2, opts) {
 }
 
 // src/hooks.ts
-import { useState as useState2, useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useState as useState3, useEffect as useEffect4, useRef as useRef2 } from "react";
 var FRAMES = ["\u280B", "\u2819", "\u2839", "\u2838", "\u2834", "\u2826", "\u2827", "\u2807", "\u280F"];
 function useSpinner(ms = 80) {
-  const [frame, setFrame] = useState2(0);
-  useEffect3(() => {
+  const [frame, setFrame] = useState3(0);
+  useEffect4(() => {
     const id = setInterval(() => setFrame((v) => (v + 1) % FRAMES.length), ms);
     return () => clearInterval(id);
   }, [ms]);
   return FRAMES[frame % FRAMES.length];
 }
 function useTick(ms = 500) {
-  const [tick, setTick] = useState2(0);
-  useEffect3(() => {
+  const [tick, setTick] = useState3(0);
+  useEffect4(() => {
     const id = setInterval(() => setTick((v) => v + 1), ms);
     return () => clearInterval(id);
   }, [ms]);
   return tick;
 }
 function useTermWidth(ref, fallback = 80) {
-  const [width, setWidth] = useState2(fallback);
-  useEffect3(() => {
+  const [width, setWidth] = useState3(fallback);
+  useEffect4(() => {
     const el = ref.current;
     if (!el) return;
     const m = document.createElement("span");
@@ -3175,12 +3720,12 @@ function useTermWidth(ref, fallback = 80) {
 function useStreamingText(text, lerp = 0.08) {
   const visibleRef = useRef2(0);
   const prevTextRef = useRef2("");
-  const [sliceEnd, setSliceEnd] = useState2(0);
+  const [sliceEnd, setSliceEnd] = useState3(0);
   if (!text.startsWith(prevTextRef.current)) {
     visibleRef.current = text.length;
   }
   prevTextRef.current = text;
-  useEffect3(() => {
+  useEffect4(() => {
     const target = text.length;
     if (visibleRef.current >= target) {
       setSliceEnd(target);
@@ -3192,13 +3737,13 @@ function useStreamingText(text, lerp = 0.08) {
       const dt = (now - lastTime) / 16.67;
       lastTime = now;
       const current = visibleRef.current;
-      const diff2 = target - current;
-      if (diff2 < 0.5) {
+      const diff = target - current;
+      if (diff < 0.5) {
         visibleRef.current = target;
         setSliceEnd(target);
         return;
       }
-      const step = Math.max(1, diff2 * lerp * dt);
+      const step = Math.max(1, diff * lerp * dt);
       visibleRef.current = Math.min(current + step, target);
       const next = Math.floor(visibleRef.current);
       setSliceEnd((prev) => prev !== next ? next : prev);
@@ -3210,20 +3755,30 @@ function useStreamingText(text, lerp = 0.08) {
   return text.slice(0, sliceEnd);
 }
 export {
+  TBadge,
   TBar,
   TBlank,
   TBox,
   TButton,
+  TCallout,
+  TChart,
+  TCheckbox,
   TCode,
-  TDiff,
+  TDiffCompute,
+  TDivider,
+  TGrid,
   THStack,
   THtml,
+  TInput,
   TJson,
+  TKV,
   TLayout,
   TLine,
   TList,
   TMarkdown,
+  TPad,
   TRaw,
+  TScroll,
   TSeparator,
   TSpan,
   TSpark,
@@ -3232,6 +3787,7 @@ export {
   TTable,
   TTabs,
   TTree,
+  TUnifiedDiff,
   TVStack,
   TermDocument,
   TermThemeProvider,
@@ -3241,28 +3797,37 @@ export {
   blank,
   box,
   builtinThemes,
+  callout,
+  chart,
+  checkbox,
   code,
+  computeDiff,
   dark,
   defaultThemeSpec,
-  diff,
+  divider,
   fromDocument,
   fromHtml,
   fromJson,
   fromJsonNode,
   fromMarkdown,
+  grid,
   hl,
   hstack,
+  inputField,
   isTableLine,
+  kv,
   light,
   lines,
   list,
   pad,
   padLine,
+  padding,
   parseThemeSpec,
   preserveTableTag,
   renderTermReact,
   resolveTheme,
   resolveThemeMode,
+  scroll,
   separator,
   spark,
   statusbar,
@@ -3272,6 +3837,8 @@ export {
   tokenColor,
   tokenize,
   tree,
+  truncate,
+  unifiedDiff,
   useSpinner,
   useStreamingText,
   useTermTheme,