@valyrianjs/terminal 0.1.2 → 0.2.1

package/src/render.ts

@@ -6,7 +6,7 @@ import { renderValyrianTerminal } from "./runtime.js";
 import { plainText } from "./text.js";
 import { resolveTerminalStyle } from "./theme.js";
 
-import type { InputInteractionState, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalTheme, TerminalVisualState } from "./types.js";
+import type { InputInteractionState, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalHitbox, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalTheme, TerminalVisualState } from "./types.js";
 
 export interface TerminalRenderContext {
   cols: number;
@@ -14,6 +14,25 @@ export interface TerminalRenderContext {
   theme?: TerminalTheme;
 }
 
+function validateRenderContextDimension(name: "cols" | "rows", value: number) {
+  if (!Number.isInteger(value) || value < 1) {
+    throw new RangeError(`Invalid render context ${name}: expected an integer >= 1`);
+  }
+  return value;
+}
+
+function validateRenderContext(context: TerminalRenderContext | undefined) {
+  if (typeof context === "undefined") {
+    return undefined;
+  }
+
+  return {
+    cols: validateRenderContextDimension("cols", context.cols),
+    rows: validateRenderContextDimension("rows", context.rows),
+    theme: context.theme
+  };
+}
+
 const VISUAL_STATE_ORDER: TerminalVisualState[] = [
   "disabled", "readonly", "loading", "empty", "muted", "error", "warning", "success", "invalid", "valid", "placeholder", "selection", "selected", "current", "expanded", "collapsed", "checked", "unchecked", "indeterminate", "editing", "submitted", "dragging", "dropTarget", "capturing", "focus", "hover", "pressed"
 ];
@@ -108,6 +127,20 @@ function styleSpan(kind: string, style?: TerminalStyleDefinition): ResolvedStyle
   return typeof style === "undefined" ? { kind } : { kind, style };
 }
 
+const BASE_STYLE_KIND_BY_TAG: Partial<Record<TerminalElementNode["tag"], string>> = {
+  "terminal-button": "button.base",
+  "terminal-input": "input.base",
+  "terminal-editor": "editor.base",
+  "terminal-list": "list.base",
+  "terminal-scroll": "scroll.base",
+  "terminal-log-view": "log.base",
+  "terminal-overlay": "overlay.base"
+};
+
+function baseStyleKindForNode(node: TerminalElementNode) {
+  return BASE_STYLE_KIND_BY_TAG[node.tag];
+}
+
 function nodeStates(node: TerminalElementNode) {
   const declared = Array.isArray(node.props.state) ? node.props.state : typeof node.props.state === "string" ? [node.props.state] : [];
   const states = new Set<TerminalVisualState>();
@@ -127,7 +160,7 @@ function resolveLayoutStyle(baseKind: string, node: TerminalElementNode, context
 }
 
 function resolveNodeLayoutStyle(node: TerminalElementNode, context?: TerminalRenderContext) {
-  return resolveTerminalStyle(node.props.style, context?.theme);
+  return mergeStyleDefinitions(resolveTerminalStyle(baseStyleKindForNode(node), context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
 }
 
 function decoratedControlFrame(content: string[], style: TerminalStyleDefinition | undefined) {
@@ -146,11 +179,17 @@ function fullFrameSpans(kinds: string[], width: number, height: number): Termina
   return spans;
 }
 
-function resolveNodeStyle(node: TerminalElementNode, context?: TerminalRenderContext) {
-  let style = resolveTerminalStyle(node.props.style, context?.theme);
-  const spanKinds: ResolvedStyleSpan[] = typeof node.props.style === "string"
-    ? [styleSpan(node.props.style)]
-    : style ? [styleSpan("#style", style)] : [];
+function resolveNodeStyle(node: TerminalElementNode, context?: TerminalRenderContext, options: { includeBase?: boolean } = {}) {
+  const baseKind = options.includeBase === false ? undefined : baseStyleKindForNode(node);
+  let style = resolveTerminalStyle(baseKind, context?.theme);
+  const spanKinds: ResolvedStyleSpan[] = typeof baseKind === "undefined" ? [] : [styleSpan(baseKind)];
+  const explicitStyle = resolveTerminalStyle(node.props.style, context?.theme);
+  if (typeof node.props.style === "string") {
+    spanKinds.push(styleSpan(node.props.style));
+  } else if (explicitStyle) {
+    spanKinds.push(styleSpan("#style", explicitStyle));
+  }
+  style = mergeStyleDefinitions(style, explicitStyle);
   for (const state of nodeStates(node)) {
     const stateStyle = node.props.styles?.[state];
     if (stateStyle) {
@@ -219,9 +258,22 @@ function addFullFrameSpans(frame: TerminalFrame, kinds: ResolvedStyleSpan[]) {
   return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
 }
 
-function listVirtualRange(node: TerminalElementNode, itemCount: number, selectedIndex: number, context?: TerminalRenderContext) {
+function listViewportRows(node: TerminalElementNode, itemCount: number, context?: TerminalRenderContext) {
+  const explicitHeight = positiveDimension(node.props.height, "height");
+  const viewportSourceRows = explicitHeight ?? context?.rows ?? (itemCount || 1);
+  return Math.max(1, Math.min(itemCount || 1, positiveInteger(viewportSourceRows, "List viewport height")));
+}
+
+function clampListIndex(index: number, itemCount: number) {
+  if (itemCount <= 0) {
+    return 0;
+  }
+  return Math.max(0, Math.min(itemCount - 1, index));
+}
+
+function listVirtualRange(node: TerminalElementNode, itemCount: number, context?: TerminalRenderContext) {
   if (!node.props.virtualized) {
-    return { start: 0, end: itemCount };
+    return { start: 0, end: itemCount, visibleStart: 0, viewportRows: itemCount || 1 };
   }
 
   if (typeof node.props.itemHeight !== "undefined" && node.props.itemHeight !== 1) {
@@ -229,14 +281,95 @@ function listVirtualRange(node: TerminalElementNode, itemCount: number, selected
   }
 
   const overscan = nonNegativeInteger(node.props.overscan, "List overscan");
-  const viewportSourceRows = context?.rows ?? (itemCount || 1);
-  const viewportRows = Math.max(1, Math.min(itemCount || 1, positiveInteger(viewportSourceRows, "List viewport height")));
-  const selected = Math.max(0, Math.min(itemCount - 1, selectedIndex));
-  const visibleStart = Math.max(0, Math.min(selected, selected - viewportRows + 1));
+  const viewportRows = listViewportRows(node, itemCount, context);
+  const maxOffset = Math.max(0, itemCount - viewportRows);
+  let visibleStart = Math.max(0, Math.min(maxOffset, nonNegativeInteger(node.props.__scrollOffset, "List viewport offset")));
   const start = Math.max(0, visibleStart - overscan);
   const end = Math.min(itemCount, visibleStart + viewportRows + overscan);
 
-  return { start, end };
+  return { start, end, visibleStart, viewportRows };
+}
+
+function listItemKey(node: TerminalElementNode, item: unknown, index: number) {
+  if (typeof node.props.itemKey === "function") {
+    const key = node.props.itemKey(item, index);
+    if (typeof key !== "string" && typeof key !== "number") {
+      throw new RangeError("List itemKey must return a string or number");
+    }
+    return String(key);
+  }
+  return String(index);
+}
+
+function listItemRenderer(node: TerminalElementNode) {
+  if (typeof node.props.__childrenRenderer === "function") {
+    return { type: "children" as const, render: node.props.__childrenRenderer };
+  }
+  if (typeof node.props.renderItem === "function") {
+    return { type: "renderItem" as const, render: node.props.renderItem };
+  }
+  return undefined;
+}
+
+function wrapPlainText(value: string, width: number) {
+  if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0) {
+    return [""];
+  }
+
+  const rows: string[] = [];
+  const sourceRows = value.split("\n");
+  for (const sourceRow of sourceRows) {
+    if (sourceRow.length === 0) {
+      rows.push("");
+      continue;
+    }
+
+    let remaining = sourceRow;
+    while (remaining.length > width) {
+      const slice = remaining.slice(0, width);
+      const breakAt = slice.lastIndexOf(" ");
+      if (breakAt > 0 && breakAt >= Math.floor(width * 0.6)) {
+        rows.push(remaining.slice(0, breakAt));
+        remaining = remaining.slice(breakAt + 1);
+      } else {
+        rows.push(slice);
+        remaining = remaining.slice(width);
+      }
+    }
+    rows.push(remaining);
+  }
+
+  return rows.length ? rows : [""];
+}
+
+function renderListItemFrame(node: TerminalElementNode, item: unknown, index: number, viewportIndex: number, activeIndex: number, selectedIndex: number | null, wrapWidth: number, context?: TerminalRenderContext) {
+  const key = listItemKey(node, item, index);
+  const renderer = listItemRenderer(node);
+  if (!renderer) {
+    const label = plainText(item);
+    return createFrame(node.props.wrap === true ? wrapPlainText(label, wrapWidth) : label.split("\n"));
+  }
+
+  const ctx = {
+    index,
+    key,
+    active: index === activeIndex,
+    selected: selectedIndex !== null && index === selectedIndex,
+    viewportIndex,
+    item
+  };
+  const rendered = renderer.type === "children" ? renderer.render(item, ctx) : renderer.render(item, index);
+
+  if (typeof rendered === "string" || typeof rendered === "number") {
+    const label = plainText(rendered);
+    return createFrame(node.props.wrap === true ? wrapPlainText(label, wrapWidth) : label.split("\n"));
+  }
+
+  const frame = mergeVertical(renderValyrianTerminal(rendered).map((child) => renderTerminalFrame(child, context)));
+  if (node.props.wrap === true && frame.hitboxes.length === 0) {
+    return createFrame(frame.lines.flatMap((line) => wrapPlainText(line, wrapWidth)));
+  }
+  return frame;
 }
 
 function fixedPosition(value: unknown) {
@@ -745,18 +878,69 @@ function renderStandaloneFixedFrame(node: TerminalElementNode, context?: Termina
     : constrainFrame(frame, { width: size });
 }
 
-function overlayGeometry(node: TerminalElementNode) {
+function overlayMarginValue(value: unknown, axisSize: number, label: string) {
+  if (typeof value === "number") {
+    if (!Number.isFinite(value) || !Number.isInteger(value) || value < 0) {
+      throw new RangeError(`${label} must be a non-negative finite integer or percentage string`);
+    }
+    return value;
+  }
+
+  if (typeof value === "string") {
+    const match = value.match(/^(\d+(?:\.\d+)?)%$/);
+    if (!match) {
+      throw new RangeError(`${label} must be a non-negative finite integer or percentage string`);
+    }
+
+    const percent = Number(match[1]);
+    if (!Number.isFinite(percent) || percent < 0) {
+      throw new RangeError(`${label} must be a non-negative finite integer or percentage string`);
+    }
+
+    return Math.round(axisSize * percent / 100);
+  }
+
+  throw new RangeError(`${label} must be a non-negative finite integer or percentage string`);
+}
+
+function overlayMargins(margin: unknown, width: number, height: number) {
+  if (typeof margin === "number" || typeof margin === "string") {
+    const x = overlayMarginValue(margin, width, "Overlay margin");
+    const y = overlayMarginValue(margin, height, "Overlay margin");
+    return { x, y };
+  }
+
+  if (margin && typeof margin === "object" && !Array.isArray(margin)) {
+    const axes = margin as { x?: unknown; y?: unknown };
+    return {
+      x: overlayMarginValue(axes.x, width, "Overlay margin x"),
+      y: overlayMarginValue(axes.y, height, "Overlay margin y")
+    };
+  }
+
+  throw new RangeError("Overlay margin is required");
+}
+
+function overlayGeometry(node: TerminalElementNode, width: number, height: number) {
+  const margin = overlayMargins(node.props.margin, width, height);
+  const overlayWidth = width - margin.x * 2;
+  const overlayHeight = height - margin.y * 2;
+
+  if (overlayWidth < 1 || overlayHeight < 1) {
+    throw new RangeError("Overlay margin leaves no renderable area");
+  }
+
   return {
-    x: positiveInteger(node.props.x, "Overlay x"),
-    y: positiveInteger(node.props.y, "Overlay y"),
-    width: positiveInteger(node.props.width, "Overlay width"),
-    height: positiveInteger(node.props.height, "Overlay height")
+    x: margin.x + 1,
+    y: margin.y + 1,
+    width: overlayWidth,
+    height: overlayHeight
   };
 }
 
-function renderOverlayChildFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const geometry = overlayGeometry(node);
-  let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height }), { width: geometry.width, height: geometry.height });
+function renderOverlayChildFrame(node: TerminalElementNode, width: number, height: number, context?: TerminalRenderContext) {
+  const geometry = overlayGeometry(node, width, height);
+  let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height, theme: context?.theme }), { width: geometry.width, height: geometry.height });
   frame = addContainerStyleSpans(frame, node, resolveNodeStyle(node, context));
   if (node.props.id && isFocusable(node)) {
     frame = addFocusableHitbox(frame, node as TerminalFocusNode);
@@ -764,10 +948,16 @@ function renderOverlayChildFrame(node: TerminalElementNode, context?: TerminalRe
   return { frame, geometry };
 }
 
+function orderedDirectOverlays(overlays: TerminalElementNode[]) {
+  return overlays.map((overlay, sourceOrder) => ({ overlay, sourceOrder })).sort((a, b) => a.sourceOrder - b.sourceOrder).map(({ overlay }) => overlay);
+}
+
 function applyDirectOverlays(base: TerminalFrame, overlays: TerminalElementNode[], context?: TerminalRenderContext) {
   let frame = base;
-  for (const overlay of overlays) {
-    const rendered = renderOverlayChildFrame(overlay, context);
+  const width = Math.max(1, getFrameWidth(base));
+  const height = Math.max(1, getFrameHeight(base));
+  for (const overlay of orderedDirectOverlays(overlays)) {
+    const rendered = renderOverlayChildFrame(overlay, width, height, context);
     frame = overlayFrame(frame, rendered.frame, rendered.geometry);
   }
   return frame;
@@ -829,8 +1019,12 @@ function renderPaneFrame(node: TerminalElementNode, context?: TerminalRenderCont
   return overlays.length ? applyDirectOverlays(frame, overlays, context) : frame;
 }
 
-function renderStandaloneOverlayFrame(node: TerminalElementNode) {
-  const rendered = renderOverlayChildFrame(node);
+function renderStandaloneOverlayFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
+  if (!context) {
+    throw new RangeError("Standalone Overlay requires exact render context dimensions");
+  }
+
+  const rendered = renderOverlayChildFrame(node, context.cols, context.rows, context);
   return rendered.frame;
 }
 
@@ -983,46 +1177,119 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
     case "terminal-fixed":
       return renderStandaloneFixedFrame(node, context);
     case "terminal-overlay":
-      return renderStandaloneOverlayFrame(node);
+      return renderStandaloneOverlayFrame(node, context);
     case "terminal-log-view":
       return renderLogViewFrame(node, context);
     case "terminal-list": {
       const items = Array.isArray(node.props.items) ? node.props.items : [];
-      const selectedIndex = numeric(node.props.__selectedIndex, 0);
+      const activeIndex = clampListIndex(numeric(node.props.__activeIndex ?? node.props.__selectedIndex, 0), items.length);
+      const selectedIndex = typeof node.props.__selectedIndex === "number" ? clampListIndex(Number(node.props.__selectedIndex), items.length) : null;
       const hoveredIndex = typeof node.props.__hoveredIndex === "number" ? Number(node.props.__hoveredIndex) : -1;
-      const range = listVirtualRange(node, items.length, selectedIndex, context);
-      const lines: string[] = [];
-      for (let index = range.start; index < range.end; index += 1) {
-        const item = items[index];
-        const label = typeof node.props.renderItem === "function" ? plainText(node.props.renderItem(item, index)) : plainText(item);
-        lines.push(label);
-      }
-      const visibleLines = lines.length ? lines : [""];
+      const range = listVirtualRange(node, items.length, context);
       const layoutStyle = resolveLayoutStyle("list.base", node, context);
       const padding = normalizeSpacing(layoutStyle.padding, "List padding");
       const border = normalizeBorder(layoutStyle.border);
-      const decorated = addBorder(padFrameSides(createFrame(visibleLines), padding), border);
+      const horizontalDecoration = padding.left + padding.right + (border.left ? 1 : 0) + (border.right ? 1 : 0);
+      const wrapWidth = typeof context?.cols === "number" ? Math.max(1, context.cols - horizontalDecoration) : 1;
+      const visibleLines: string[] = [];
+      const itemIndexes: number[] = [];
+      const childHitboxes: TerminalHitbox[] = [];
+      for (let index = range.start; index < range.end; index += 1) {
+        const item = items[index];
+        const itemFrame = renderListItemFrame(node, item, index, index - range.visibleStart, activeIndex, selectedIndex, wrapWidth, context);
+        const rowOffset = visibleLines.length;
+        visibleLines.push(...itemFrame.lines);
+        for (let row = 0; row < itemFrame.lines.length; row += 1) {
+          itemIndexes.push(index);
+        }
+        childHitboxes.push(...shiftFrame(itemFrame, 0, rowOffset).hitboxes);
+      }
+      if (!visibleLines.length) {
+        visibleLines.push("");
+        itemIndexes.push(0);
+      }
+
+      const frameHeight = node.props.virtualized && node.props.wrap === true
+        ? positiveDimension(node.props.height, "height") ?? (typeof context?.rows === "number" ? Math.max(1, context.rows) : undefined)
+        : undefined;
+      const contentHeight = typeof frameHeight === "number"
+        ? Math.max(1, frameHeight - padding.top - padding.bottom - (border.top ? 1 : 0) - (border.bottom ? 1 : 0))
+        : visibleLines.length;
+      let visibleLineStart = 0;
+      if (node.props.virtualized && node.props.wrap === true && visibleLines.length > contentHeight) {
+        const activeLineIndex = itemIndexes.findIndex((sourceIndex) => sourceIndex === activeIndex);
+        if (activeLineIndex >= contentHeight) {
+          visibleLineStart = activeLineIndex - contentHeight + 1;
+        }
+      }
+      const frameLines = visibleLines.slice(visibleLineStart, visibleLineStart + contentHeight);
+      const frameItemIndexes = itemIndexes.slice(visibleLineStart, visibleLineStart + contentHeight);
+      const frameChildHitboxes = childHitboxes
+        .filter((box) => box.y2 > visibleLineStart && box.y1 <= visibleLineStart + contentHeight)
+        .map((box) => ({
+          ...box,
+          y1: Math.max(1, box.y1 - visibleLineStart),
+          y2: Math.min(contentHeight, box.y2 - visibleLineStart),
+          contentY: typeof box.contentY === "number" ? Math.max(1, box.contentY - visibleLineStart) : undefined
+        }));
+
+      const decorated = addBorder(padFrameSides(createFrame(frameLines, frameChildHitboxes), padding), border);
       const width = Math.max(1, getFrameWidth(decorated));
       const height = Math.max(1, getFrameHeight(decorated));
       const itemY = 1 + (border.top ? 1 : 0) + padding.top;
       const spans: TerminalStyleSpan[] = [];
-      for (let index = 0; index < visibleLines.length; index += 1) {
-        const sourceIndex = range.start + index;
+      for (let index = 0; index < frameLines.length; index += 1) {
+        const sourceIndex = frameItemIndexes[index];
         const y = itemY + index;
         spans.push({ kind: "list.base", x1: 1, x2: width + 1, y });
-        if (sourceIndex === selectedIndex) {
+        if (selectedIndex !== null && selectedIndex !== activeIndex && sourceIndex === selectedIndex) {
+          spans.push({ kind: "list.selected", x1: 1, x2: width + 1, y });
+        }
+        if (sourceIndex === activeIndex) {
           spans.push({ kind: "list.current", x1: 1, x2: width + 1, y });
         }
         if (sourceIndex === hoveredIndex) {
           spans.push({ kind: "list.hover", x1: 1, x2: width + 1, y });
         }
       }
-      const frame = createFrame(decorated.lines, [], decorated.cursor, spans);
-      const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context).spanKinds);
-      if (!node.props.id) {
-        return styled;
+      const listHitboxes: TerminalHitbox[] = [];
+      const itemHitboxes: TerminalHitbox[] = [];
+      if (node.props.id) {
+        listHitboxes.push({
+          id: node.props.id,
+          tag: node.tag,
+          x1: 1,
+          x2: width,
+          y1: 1,
+          y2: Math.min(height, typeof frameHeight === "number" ? frameHeight : height),
+          itemOffset: range.start,
+          itemIndexes: frameItemIndexes,
+          contentY: itemY
+        });
+        let itemStart = 0;
+        while (itemStart < frameItemIndexes.length) {
+          const sourceIndex = frameItemIndexes[itemStart];
+          let itemEnd = itemStart;
+          while (itemEnd + 1 < frameItemIndexes.length && frameItemIndexes[itemEnd + 1] === sourceIndex) {
+            itemEnd += 1;
+          }
+          itemHitboxes.push({
+            id: node.props.id,
+            tag: node.tag,
+            x1: 1,
+            x2: width,
+            y1: itemY + itemStart,
+            y2: itemY + itemEnd,
+            itemOffset: range.start,
+            __listItemIndex: sourceIndex,
+            itemIndexes: new Array(itemEnd - itemStart + 1).fill(sourceIndex)
+          });
+          itemStart = itemEnd + 1;
+        }
       }
-      return createFrame(styled.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, itemOffset: range.start }], styled.cursor, styled.spans);
+      const frame = createFrame(decorated.lines, [...listHitboxes, ...itemHitboxes, ...decorated.hitboxes], decorated.cursor, spans);
+      const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
+      return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight }) : styled;
     }
     case "terminal-table":
       return renderTableFrame(node, context);
@@ -1039,7 +1306,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
     case "terminal-text": {
       const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : plainText(node.children.map(textContent).join(""));
       const frame = createFrame(value.split("\n"));
-      return addFullFrameSpans(frame, resolveNodeStyle(node, context).spanKinds);
+      return addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
     }
     case "terminal-input": {
       const value = typeof node.props.value !== "undefined" ? node.props.value : node.props.placeholder || "";
@@ -1058,7 +1325,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
         const height = Math.max(1, getFrameHeight(decorated));
         const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
         const spans = fullFrameSpans(["input.base"], width, height);
-        return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+        return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
       }
 
       const rendered = renderInputLine(stringValue, node.props.__inputState || { cursor: stringValue.length, anchor: stringValue.length }, inputPadding);
@@ -1067,7 +1334,7 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       const height = Math.max(1, getFrameHeight(decorated));
       const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
       const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...decorated.spans];
-      return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+      return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
     }
     case "terminal-editor":
       return addFullFrameSpans(renderEditorFrame(node), resolveNodeStyle(node, context).spanKinds);
@@ -1077,10 +1344,10 @@ function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderC
       const decorated = decoratedControlFrame([String(label)], layoutStyle);
       const width = Math.max(1, getFrameWidth(decorated));
       const height = Math.max(1, getFrameHeight(decorated));
-      const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height }] : [];
+      const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, __pressHandler: typeof node.props.onpress === "function" ? node.props.onpress : undefined }] : [];
       const kinds = ["button.base", ...nodeStates(node).map((state) => `button.${state}`)];
       const spans = fullFrameSpans(kinds, width, height);
-      return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+      return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
     }
     default:
       return mergeVertical(node.children.map((child) => renderTerminalFrame(child, context)));
@@ -1098,9 +1365,10 @@ export function renderTerminalNode(node: TerminalNode, context?: TerminalRenderC
   return renderTerminalFrame(node, context).lines.join("\n");
 }
 
-export function renderTerminal(input: any): string {
+export function renderTerminal(input: any, context?: TerminalRenderContext): string {
+  const renderContext = validateRenderContext(context);
   return renderValyrianTerminal(input)
-    .map((node) => renderTerminalNode(node))
+    .map((node) => renderTerminalNode(node, renderContext))
     .filter(Boolean)
     .join("\n")
     .trimEnd();

package/src/runtime.ts

@@ -61,9 +61,6 @@ function hasEventListener(node: DomNode, eventName: string) {
 }
 
 function resolveDispatchEventName(node: DomNode, eventName: string) {
-  if (eventName === "press" && !hasEventListener(node, "press") && hasEventListener(node, "click")) {
-    return "click";
-  }
   if (eventName === "change" && !hasEventListener(node, "change") && hasEventListener(node, "input")) {
     return "input";
   }
@@ -147,20 +144,25 @@ function normalizeValyrianInput(input: any): any {
   }
 
   const props = { ...((input.props && input.props.__terminalProps) || input.props || {}) };
-  const children = Array.isArray(input.children)
-    ? input.children.map((child) => {
+  const rawChildren = Array.isArray(input.children) ? input.children : [];
+  const isListComponentWithRenderChild = typeof input.tag === "function" && input.tag.name === "TerminalList" && rawChildren.length === 1 && typeof rawChildren[0] === "function";
+  if (isListComponentWithRenderChild) {
+    props.__childrenRenderer = rawChildren[0];
+  }
+  const tag = typeof input.tag === "string" ? input.tag : wrapComponent(input.tag);
+  const children = isListComponentWithRenderChild || (tag === "terminal-list" && rawChildren.length === 1 && typeof rawChildren[0] === "function")
+    ? []
+    : rawChildren.map((child) => {
       if (props["v-for"] && typeof child === "function") {
         return (...args: any[]) => normalizeValyrianInput(child(...args));
       }
       return normalizeValyrianInput(child);
-    })
-    : [];
-  const tag = typeof input.tag === "string" ? input.tag : wrapComponent(input.tag);
+    });
+  if (tag === "terminal-list" && rawChildren.length === 1 && typeof rawChildren[0] === "function") {
+    props.__childrenRenderer = rawChildren[0];
+  }
   if (typeof tag === "string" && isTerminalTag(tag)) {
     const terminalProps = { ...props };
-    if (tag === "terminal-button" && typeof props.action === "function" && typeof props.onpress !== "function" && typeof props.onclick !== "function") {
-      props.onclick = props.action;
-    }
     if (typeof props.style === "object") {
       Reflect.deleteProperty(props, "style");
     }