@dex-ai/vue-tui 0.1.10

package/src/render.ts

@@ -0,0 +1,632 @@
+import type { TElement, TNode, TText } from "./nodes";
+import { getStyle } from "./nodes";
+import type { Theme, TerminalStyle } from "./style";
+import { resolveColor, resolveTextStyle } from "./style";
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Strip ANSI escape codes to measure visible character width. */
+function visibleLength(s: string): number {
+  // eslint-disable-next-line no-control-regex
+  return s.replace(/\x1b\[[0-9;]*m|\x1b\][^\x1b]*\x1b\\/g, "").length;
+}
+
+/** Pad a string to `width` visible characters (right-pad with spaces). */
+function padRight(s: string, width: number): string {
+  const vis = visibleLength(s);
+  if (vis >= width) return s;
+  return s + " ".repeat(width - vis);
+}
+
+/** Repeat a character `n` times, guarded for n ≤ 0. */
+function repeat(ch: string, n: number): string {
+  return n > 0 ? ch.repeat(n) : "";
+}
+
+/** Prefix every line in `lines` with `prefix`. */
+function prefixLines(lines: string[], prefix: string): string[] {
+  if (prefix === "") return lines;
+  return lines.map((l) => prefix + l);
+}
+
+/** Word-wrap a single text segment to fit within `maxWidth` visible chars.
+ *  Preserves all whitespace — only inserts breaks between words. */
+function wordWrap(text: string, maxWidth: number): string[] {
+  if (maxWidth <= 0) return [text];
+  if (visibleLength(text) <= maxWidth) return [text];
+
+  const result: string[] = [];
+  let lineStart = 0;
+  let lastBreakable = -1; // index after which we can break (after a space)
+  let visWidth = 0;
+
+  for (let i = 0; i < text.length; i++) {
+    const ch = text[i]!;
+
+    // Skip ANSI escape sequences — don't count toward visible width
+    if (ch === "\x1b") {
+      if (text[i + 1] === "[") {
+        // CSI sequence: \x1b[...m
+        const end = text.indexOf("m", i);
+        if (end !== -1) {
+          i = end; // loop will i++ past the 'm'
+          continue;
+        }
+      } else if (text[i + 1] === "]") {
+        // OSC sequence: \x1b]...\x1b\\
+        const end = text.indexOf("\x1b\\", i);
+        if (end !== -1) {
+          i = end + 1; // loop will i++ past the '\\'
+          continue;
+        }
+      }
+    }
+
+    visWidth++;
+
+    if (visWidth > maxWidth) {
+      if (lastBreakable > lineStart) {
+        // Break at last space
+        result.push(text.slice(lineStart, lastBreakable + 1));
+        lineStart = lastBreakable + 1;
+      } else {
+        // No breakable point — hard break at current position
+        result.push(text.slice(lineStart, i));
+        lineStart = i;
+      }
+      visWidth = visibleLength(text.slice(lineStart, i + 1));
+      lastBreakable = -1;
+    }
+
+    if (ch === " ") {
+      lastBreakable = i;
+    }
+  }
+
+  // Remainder
+  if (lineStart < text.length) {
+    result.push(text.slice(lineStart));
+  }
+
+  return result.length > 0 ? result : [""];
+}
+
+/** Expand a text string (may contain \n) into wrapped lines. */
+function expandText(text: string, maxWidth: number): string[] {
+  const segments = text.split("\n");
+  const result: string[] = [];
+  for (const seg of segments) {
+    const wrapped = wordWrap(seg, maxWidth);
+    for (const line of wrapped) {
+      result.push(line);
+    }
+  }
+  return result.length > 0 ? result : [""];
+}
+
+/** Build a divider line of `─` characters at the given width. */
+function dividerLine(width: number, color: string, reset: string): string {
+  const bar = repeat("─", width);
+  return color !== "" ? color + bar + reset : bar;
+}
+
+// ---------------------------------------------------------------------------
+// Render context
+// ---------------------------------------------------------------------------
+
+interface RenderContext {
+  width: number;
+  theme: Theme;
+}
+
+// ---------------------------------------------------------------------------
+// Core render dispatch
+// ---------------------------------------------------------------------------
+
+/**
+ * Render a TNode into an array of string lines.
+ * `ctx` carries the available width and theme.
+ */
+function renderNode(node: TNode, ctx: RenderContext): string[] {
+  if (node.type === "text") {
+    const text = (node as TText).text;
+    // Skip empty text nodes (whitespace artifacts from template compilation)
+    if (text === "") return [];
+    return expandText(text, ctx.width);
+  }
+  if (node.type === "comment") return [];
+  return renderElement(node as TElement, ctx);
+}
+
+function renderElement(el: TElement, ctx: RenderContext): string[] {
+  const style = getStyle(el);
+
+  // display: none → skip
+  if (style.display === "none") return [];
+
+  // Render content based on element type
+  let lines: string[];
+  switch (el.tag) {
+    case "root":
+    case "stack":
+      lines = renderStack(el, style, ctx);
+      break;
+    case "line":
+      lines = renderLine(el, style, ctx);
+      break;
+    case "row":
+      lines = renderRow(el, style, ctx);
+      break;
+    case "text":
+      lines = renderTextEl(el, style, ctx);
+      break;
+    case "spacer":
+      lines = [""];
+      break;
+    case "indent":
+      lines = renderIndent(el, style, ctx);
+      break;
+    case "list":
+      lines = renderList(el, style, ctx);
+      break;
+    default:
+      // Unknown tag — treat like a stack
+      lines = renderStack(el, style, ctx);
+      break;
+  }
+
+  // Apply common box model to ALL elements
+  lines = applyBoxModel(lines, style, ctx);
+
+  return lines;
+}
+
+/**
+ * Common box model pass — applies padding, borders, margins, height, width
+ * to any element's rendered content lines.
+ */
+function applyBoxModel(lines: string[], style: TerminalStyle, ctx: RenderContext): string[] {
+  lines = applyPaddingLeftRight(lines, style, ctx.width);
+  lines = applyBorders(lines, style, ctx.width, ctx.theme);
+  lines = applyMargins(lines, style, ctx.width);
+  lines = applyHeight(lines, style);
+  lines = applyMaxHeight(lines, style);
+  lines = applyWidth(lines, style, ctx.width, ctx.theme);
+  return lines;
+}
+
+// ---------------------------------------------------------------------------
+// Tag renderers
+// ---------------------------------------------------------------------------
+
+/** Vertical stack: each child's lines are appended sequentially. */
+function renderStack(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const innerWidth = computeInnerWidth(style, ctx.width);
+  const innerCtx: RenderContext = { ...ctx, width: innerWidth };
+
+  let lines: string[] = [];
+
+  // paddingTop
+  const pt = style.paddingTop ?? 0;
+  for (let i = 0; i < pt; i++) lines.push("");
+
+  for (const child of el.children) {
+    const childLines = renderNode(child, innerCtx);
+    for (const l of childLines) lines.push(l);
+  }
+
+  // paddingBottom
+  const pb = style.paddingBottom ?? 0;
+  for (let i = 0; i < pb; i++) lines.push("");
+
+  return lines;
+}
+
+/** A single terminal row: children rendered inline (concatenated). */
+function renderLine(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const innerWidth = computeInnerWidth(style, ctx.width);
+  const innerCtx: RenderContext = { ...ctx, width: innerWidth };
+
+  // Collect inline text from all children
+  const parts: string[] = [];
+  for (const child of el.children) {
+    const childLines = renderNode(child, innerCtx);
+    // For inline rendering, join child lines without injecting spaces
+    parts.push(childLines.join(""));
+  }
+  const joined = parts.join("");
+
+  // If whiteSpace is nowrap, don't word-wrap — return as a single line
+  if (style.whiteSpace === "nowrap") {
+    return [joined];
+  }
+
+  // Expand the joined string through newline + wrap
+  const lines = expandText(joined, innerWidth);
+
+  return lines;
+}
+
+/** Row: children rendered side-by-side on the same line(s). */
+function renderRow(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const innerWidth = computeInnerWidth(style, ctx.width);
+
+  // Determine per-child widths
+  const children = el.children.filter((c) => {
+    if (c.type === "comment") return false;
+    if (c.type === "element") {
+      const cs = getStyle(c as TElement);
+      if (cs.display === "none") return false;
+    }
+    return true;
+  });
+
+  if (children.length === 0) return [];
+
+  // Distribute width: fixed-width children take their share, rest share equally
+  const childWidths = distributeWidths(children, innerWidth, ctx);
+
+  // Render each child at its allocated width
+  const columns: string[][] = children.map((child, i) => {
+    const w = childWidths[i] ?? 1;
+    return renderNode(child, { ...ctx, width: w });
+  });
+
+  // Merge columns into rows (zip with padding to max height)
+  const maxLines = columns.reduce((m, col) => Math.max(m, col.length), 0);
+  const result: string[] = [];
+  for (let r = 0; r < maxLines; r++) {
+    let rowStr = "";
+    for (let c = 0; c < columns.length; c++) {
+      const col = columns[c];
+      const w = childWidths[c] ?? 1;
+      const cell = col !== undefined && r < col.length ? (col[r] ?? "") : "";
+      rowStr += padRight(cell, w);
+    }
+    result.push(rowStr);
+  }
+
+  return result;
+}
+
+/** Distribute column widths for row children. */
+function distributeWidths(
+  children: TNode[],
+  totalWidth: number,
+  ctx: RenderContext,
+): number[] {
+  let remaining = totalWidth;
+  const widths: (number | null)[] = children.map((child) => {
+    if (child.type !== "element") return null;
+    const s = getStyle(child as TElement);
+    if (typeof s.width === "number") {
+      remaining -= s.width;
+      return s.width;
+    }
+    if (s.width === "100%") return null; // flex
+    return null;
+  });
+
+  const flexCount = widths.filter((w) => w === null).length;
+  const flexWidth = flexCount > 0 ? Math.floor(remaining / flexCount) : 0;
+
+  return widths.map((w) => (w === null ? Math.max(0, flexWidth) : w));
+}
+
+/**
+ * Apply a reverse-video block cursor at position `cursorAt` within expanded lines.
+ * Accounts for line wrapping — `cursorAt` is an offset into the original flat text.
+ */
+function applyCursor(
+  lines: string[],
+  cursorAt: number,
+  open: string,
+  close: string,
+  theme: Theme,
+): string[] {
+  // Find which line and column the cursor falls on
+  let remaining = cursorAt;
+  let cursorLine = -1;
+  let cursorCol = 0;
+
+  for (let i = 0; i < lines.length; i++) {
+    const lineLen = visibleLength(lines[i]!);
+    if (remaining <= lineLen) {
+      cursorLine = i;
+      cursorCol = remaining;
+      break;
+    }
+    remaining -= lineLen;
+  }
+
+  // If cursorAt is past all text, put cursor at end of last line
+  if (cursorLine === -1) {
+    cursorLine = lines.length - 1;
+    cursorCol = visibleLength(lines[cursorLine]!);
+  }
+
+  const result: string[] = [];
+  for (let i = 0; i < lines.length; i++) {
+    const line = lines[i]!;
+    if (i === cursorLine) {
+      const before = line.slice(0, cursorCol);
+      const charAtCursor = line[cursorCol] ?? "";
+      const cursorChar = charAtCursor || " "; // space if at end of line
+      const after = charAtCursor ? line.slice(cursorCol + 1) : "";
+
+      let rendered = "";
+      if (open) rendered += open;
+      rendered += before;
+      if (open) rendered += close;
+      rendered += theme.reverse + cursorChar + theme.reset;
+      if (after) {
+        if (open) rendered += open;
+        rendered += after;
+        if (open) rendered += close;
+      }
+      result.push(rendered);
+    } else {
+      result.push(open !== "" ? open + line + close : line);
+    }
+  }
+  return result;
+}
+
+/** Inline styled text element. */
+function renderTextEl(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const innerWidth = computeInnerWidth(style, ctx.width);
+  const { open, close } = resolveTextStyle(style, ctx.theme);
+
+  // OSC 8 hyperlink wrapping
+  const href = typeof el.props["href"] === "string" ? (el.props["href"] as string) : "";
+  const linkOpen = href ? `\x1b]8;;${href}\x1b\\` : "";
+  const linkClose = href ? `\x1b]8;;\x1b\\` : "";
+
+  // Gather raw text from children
+  const rawParts: string[] = [];
+  for (const child of el.children) {
+    if (child.type === "text") {
+      rawParts.push((child as TText).text);
+    } else if (child.type === "element") {
+      // Nested text elements — render and join
+      const nested = renderNode(child, { ...ctx, width: innerWidth });
+      rawParts.push(nested.join("\n"));
+    }
+  }
+  const raw = rawParts.join("");
+
+  // Handle cursorAt prop — render a reverse-video block cursor at the given position
+  const cursorAt = typeof el.props["cursorAt"] === "number" ? (el.props["cursorAt"] as number) : -1;
+
+  const expanded = expandText(raw, innerWidth);
+
+  if (cursorAt >= 0) {
+    return applyCursor(expanded, cursorAt, open, close, ctx.theme);
+  }
+
+  // Combine style + link wrapping
+  const fullOpen = linkOpen + open;
+  const fullClose = close + linkClose;
+
+  const styled = expanded.map((line) =>
+    fullOpen !== "" || fullClose !== "" ? fullOpen + line + fullClose : line,
+  );
+  return styled;
+}
+
+/** Indent: adds `level * 2` spaces prefix to all child lines. */
+function renderIndent(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const level = typeof el.props["level"] === "number" ? el.props["level"] : 1;
+  const spaces = repeat(" ", level * 2);
+  const innerWidth = Math.max(0, ctx.width - level * 2);
+  const innerCtx: RenderContext = { ...ctx, width: innerWidth };
+
+  let lines: string[] = [];
+  for (const child of el.children) {
+    const childLines = renderNode(child, innerCtx);
+    for (const l of childLines) lines.push(l);
+  }
+
+  lines = prefixLines(lines, spaces);
+
+  return lines;
+}
+
+/**
+ * List: renders children as list items with bullet or number prefixes.
+ *
+ * Props:
+ * - `ordered` (boolean): if true, uses "1. ", "2. " etc. Default: false (bullet "• ")
+ * - `start` (number): starting number for ordered lists. Default: 1
+ */
+function renderList(el: TElement, style: TerminalStyle, ctx: RenderContext): string[] {
+  const ordered = el.props["ordered"] === true;
+  const start = typeof el.props["start"] === "number" ? (el.props["start"] as number) : 1;
+
+  // Determine prefix width — for ordered, depends on max number length
+  const itemCount = el.children.filter(
+    (c) => c.type === "element" || c.type === "text",
+  ).length;
+  const maxNum = start + itemCount - 1;
+  const numWidth = ordered ? String(maxNum).length : 0;
+  const prefixWidth = ordered ? numWidth + 2 : 2; // "N. " or "• "
+
+  const innerWidth = Math.max(0, computeInnerWidth(style, ctx.width) - prefixWidth);
+  const innerCtx: RenderContext = { ...ctx, width: innerWidth };
+  const continuation = repeat(" ", prefixWidth);
+
+  let lines: string[] = [];
+  let index = 0;
+
+  for (const child of el.children) {
+    if (child.type === "comment") continue;
+
+    const childLines = renderNode(child, innerCtx);
+    const bullet = ordered
+      ? String(start + index).padStart(numWidth) + ". "
+      : "• ";
+
+    for (let i = 0; i < childLines.length; i++) {
+      const prefix = i === 0 ? bullet : continuation;
+      lines.push(prefix + (childLines[i] ?? ""));
+    }
+
+    index++;
+  }
+
+  return lines;
+}
+
+// ---------------------------------------------------------------------------
+// Box-model helpers
+// ---------------------------------------------------------------------------
+
+function computeInnerWidth(style: TerminalStyle, availableWidth: number): number {
+  let w = availableWidth;
+
+  if (typeof style.width === "number") w = style.width;
+  else if (style.width === "100%") w = availableWidth;
+
+  if (style.maxWidth !== undefined) w = Math.min(w, style.maxWidth);
+  if (style.minWidth !== undefined) w = Math.max(w, style.minWidth);
+
+  const pl = style.paddingLeft ?? 0;
+  const pr = style.paddingRight ?? 0;
+  const ml = style.marginLeft ?? 0;
+  const mr = style.marginRight ?? 0;
+  // Left border takes 2 chars (char + space), right border takes 2 chars (space + char)
+  const bl = (style.borderLeft === "solid" || style.borderLeft === "heavy") ? 2 : 0;
+  const br = (style.borderRight === "solid" || style.borderRight === "heavy") ? 2 : 0;
+
+  w = Math.max(0, w - pl - pr - ml - mr - bl - br);
+  return w;
+}
+
+function applyPaddingLeftRight(
+  lines: string[],
+  style: TerminalStyle,
+  _innerWidth: number,
+): string[] {
+  const pl = style.paddingLeft ?? 0;
+  const pr = style.paddingRight ?? 0;
+  if (pl === 0 && pr === 0) return lines;
+  const leftPad = repeat(" ", pl);
+  const rightPad = repeat(" ", pr);
+  return lines.map((l) => leftPad + l + rightPad);
+}
+
+function applyBorders(
+  lines: string[],
+  style: TerminalStyle,
+  width: number,
+  theme: Theme,
+): string[] {
+  // Left/right border characters
+  const hasLeft = style.borderLeft === "solid" || style.borderLeft === "heavy";
+  const hasRight = style.borderRight === "solid" || style.borderRight === "heavy";
+
+  if (hasLeft || hasRight) {
+    const leftChar = style.borderLeft === "heavy" ? "▎" : "│";
+    const rightChar = style.borderRight === "heavy" ? "▕" : "│";
+    const leftColor = resolveColor(style.borderLeftColor ?? style.borderColor, theme);
+    const rightColor = resolveColor(style.borderRightColor ?? style.borderColor, theme);
+    const leftPrefix = leftColor ? leftColor + leftChar + theme.reset + " " : leftChar + " ";
+    const rightSuffix = rightColor ? " " + rightColor + rightChar + theme.reset : " " + rightChar;
+
+    lines = lines.map((l) =>
+      (hasLeft ? leftPrefix : "") + l + (hasRight ? rightSuffix : ""),
+    );
+  }
+
+  // Top/bottom borders
+  const result: string[] = [];
+
+  if (style.borderTop === "solid") {
+    const color = resolveColor(style.borderTopColor ?? style.borderColor, theme);
+    result.push(dividerLine(width, color, theme.reset));
+  }
+
+  for (const l of lines) result.push(l);
+
+  if (style.borderBottom === "solid") {
+    const color = resolveColor(style.borderBottomColor ?? style.borderColor, theme);
+    result.push(dividerLine(width, color, theme.reset));
+  }
+
+  return result;
+}
+
+function applyMargins(lines: string[], style: TerminalStyle, _width: number): string[] {
+  const mt = style.marginTop ?? 0;
+  const mb = style.marginBottom ?? 0;
+  const ml = style.marginLeft ?? 0;
+
+  let result = lines;
+
+  if (ml > 0) {
+    const leftPad = repeat(" ", ml);
+    result = result.map((l) => leftPad + l);
+  }
+
+  const top: string[] = [];
+  for (let i = 0; i < mt; i++) top.push("");
+  const bottom: string[] = [];
+  for (let i = 0; i < mb; i++) bottom.push("");
+
+  return [...top, ...result, ...bottom];
+}
+
+function applyHeight(lines: string[], style: TerminalStyle): string[] {
+  if (typeof style.height !== "number") return lines;
+  const h = style.height;
+  if (lines.length >= h) return lines.slice(0, h);
+  // Pad with empty lines to reach minHeight
+  const result = [...lines];
+  while (result.length < h) result.push("");
+  return result;
+}
+
+function applyMaxHeight(lines: string[], style: TerminalStyle): string[] {
+  if (style.maxHeight === undefined) return lines;
+  const max =
+    typeof style.maxHeight === "number" ? style.maxHeight : lines.length;
+  if (lines.length <= max) return lines;
+
+  if (style.overflow === "collapse") {
+    const hidden = lines.length - max + 1; // +1 for the indicator line
+    const truncated = lines.slice(0, max - 1);
+    truncated.push(`… +${hidden} lines`);
+    return truncated;
+  }
+
+  // hidden / scroll / default: just truncate
+  return lines.slice(0, max);
+}
+
+function applyWidth(
+  lines: string[],
+  style: TerminalStyle,
+  availableWidth: number,
+  _theme: Theme,
+): string[] {
+  if (style.width !== "100%") return lines;
+  return lines.map((l) => padRight(l, availableWidth));
+}
+
+// ---------------------------------------------------------------------------
+// Public entry point
+// ---------------------------------------------------------------------------
+
+/**
+ * Walk the TElement tree and produce an array of terminal lines.
+ *
+ * @param root    The root TElement (tag = "root")
+ * @param width   Available terminal width in columns
+ * @param theme   The active theme
+ */
+export function renderToLines(root: TElement, width: number, theme: Theme): string[] {
+  const ctx: RenderContext = { width, theme };
+  return renderElement(root, ctx);
+}