@valyrianjs/terminal 0.2.2 → 0.2.4

package/src/render.ts

@@ -1,13 +1,9 @@
-import { constrainFrame, createFrame, cropFrame, fitFrame, getFrameHeight, getFrameWidth, mergeHorizontal, mergeVertical, overlayFrame, shiftFrame } from "./layout.js";
-import { getSelectionRange, normalizeInputState } from "./events.js";
-import { markFullFrameSpan, markFullRowSpan } from "./frame-style.js";
-import { createEditorState } from "./editor-state.js";
-import { isFocusable, textContent } from "./tree.js";
 import { renderValyrianTerminal } from "./runtime.js";
-import { cursorCellOffset, padEndTerminalCells, plainText, sliceTerminalCells, terminalCellToStringIndex, terminalCellWidth, terminalGraphemes } from "./text.js";
-import { resolveTerminalStyle } from "./theme.js";
+import { renderTerminalFrame as renderTerminalFrameInternal } from "./render-internal.js";
 
-import type { InputInteractionState, TerminalElementNode, TerminalFocusNode, TerminalFrame, TerminalHitbox, TerminalNode, TerminalSpacing, TerminalSplitBreakpoint, TerminalSplitSize, TerminalStyleDefinition, TerminalStyleSpan, TerminalTheme, TerminalVisualState } from "./types.js";
+import type { TerminalFrame, TerminalHitbox, TerminalNode, TerminalTheme } from "./types.js";
+
+const MODAL_OVERLAY_HITBOX_ID = "\u0000valyrian-overlay-modal-shield";
 
 export interface TerminalRenderContext {
   cols: number;
@@ -34,1375 +30,29 @@ function validateRenderContext(context: TerminalRenderContext | undefined) {
   };
 }
 
-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"
-];
-
-type SpacingSides = { top: number; right: number; bottom: number; left: number };
-type BorderSides = { top: boolean; right: boolean; bottom: boolean; left: boolean; style: string; color?: string };
-
-function numeric(value: unknown, fallback = 0) {
-  const result = Number(value);
-  return Number.isFinite(result) ? result : fallback;
-}
-
-function addFocusableHitbox(frame: TerminalFrame, node: TerminalFocusNode) {
-  if (!node.props.id) {
-    return frame;
-  }
-  const width = Math.max(1, getFrameWidth(frame));
-  const height = Math.max(1, getFrameHeight(frame));
-  frame.hitboxes.unshift({ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height });
-  return frame;
-}
-
-function positiveDimension(value: unknown, prop: "width" | "height") {
-  if (typeof value === "undefined") {
-    return undefined;
-  }
-  const size = Number(value);
-  if (!Number.isFinite(size) || size <= 0) {
-    throw new RangeError(`${prop} must be greater than zero`);
-  }
-  return size;
-}
-
-function positiveInteger(value: unknown, prop: string) {
-  const size = Number(value);
-  if (!Number.isFinite(size) || !Number.isInteger(size) || size <= 0) {
-    throw new RangeError(`${prop} must be a positive finite integer`);
-  }
-  return size;
-}
-
-function nonNegativeInteger(value: unknown, prop: string) {
-  const size = typeof value === "undefined" ? 0 : Number(value);
-  if (!Number.isFinite(size) || !Number.isInteger(size) || size < 0) {
-    throw new RangeError(`${prop} must be a non-negative finite integer`);
-  }
-  return size;
-}
-
-function normalizeSpacing(value: TerminalSpacing | undefined, prop: string): SpacingSides {
-  if (typeof value === "undefined") return { top: 0, right: 0, bottom: 0, left: 0 };
-  if (typeof value === "number") {
-    const size = nonNegativeInteger(value, prop);
-    return { top: size, right: size, bottom: size, left: size };
-  }
-  const x = nonNegativeInteger(value.x, `${prop}.x`);
-  const y = nonNegativeInteger(value.y, `${prop}.y`);
-  return {
-    top: typeof value.top === "undefined" ? y : nonNegativeInteger(value.top, `${prop}.top`),
-    right: typeof value.right === "undefined" ? x : nonNegativeInteger(value.right, `${prop}.right`),
-    bottom: typeof value.bottom === "undefined" ? y : nonNegativeInteger(value.bottom, `${prop}.bottom`),
-    left: typeof value.left === "undefined" ? x : nonNegativeInteger(value.left, `${prop}.left`)
-  };
-}
-
-function normalizeBorder(value: TerminalStyleDefinition["border"] | undefined): BorderSides {
-  if (value === true) return { top: true, right: true, bottom: true, left: true, style: "solid" };
-  if (typeof value === "string") return { top: true, right: true, bottom: true, left: true, style: value };
-  if (value && typeof value === "object") {
-    return { top: value.top === true, right: value.right === true, bottom: value.bottom === true, left: value.left === true, style: value.style || "solid", color: value.color };
-  }
-  return { top: false, right: false, bottom: false, left: false, style: "solid" };
-}
-
-function borderChars(style: string) {
-  if (style === "solid") return { topLeft: "┌", topRight: "┐", bottomLeft: "└", bottomRight: "┘", horizontal: "─", vertical: "│" };
-  if (style === "dotted") return { topLeft: "+", topRight: "+", bottomLeft: "+", bottomRight: "+", horizontal: "·", vertical: "⋮" };
-  if (style === "double") return { topLeft: "╔", topRight: "╗", bottomLeft: "╚", bottomRight: "╝", horizontal: "═", vertical: "║" };
-  throw new RangeError(`Unknown terminal border style: ${style}`);
-}
-
-function mergeStyleDefinitions(base: TerminalStyleDefinition | undefined, next: TerminalStyleDefinition | undefined): TerminalStyleDefinition {
-  return { ...base, ...next };
-}
-
-type ResolvedStyleSpan = {
-  kind: string;
-  style?: TerminalStyleDefinition;
-};
-
-function styleSpan(kind: string, style?: TerminalStyleDefinition): ResolvedStyleSpan {
-  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>();
-  for (const state of declared) states.add(state as TerminalVisualState);
-  if (node.props.disabled === true) states.add("disabled");
-  if (node.props.pressed === true) states.add("pressed");
-  if (node.props.__focused === true) states.add("focus");
-  if (typeof node.props.__hoveredIndex === "number" || typeof node.props.__hoveredRow === "number") states.add("hover");
-  if (Array.isArray(node.props.items) && node.props.items.length === 0) states.add("empty");
-  if (Array.isArray(node.props.entries) && node.props.entries.length === 0) states.add("empty");
-  return VISUAL_STATE_ORDER.filter((state) => states.has(state));
-}
-
-
-function resolveLayoutStyle(baseKind: string, node: TerminalElementNode, context?: TerminalRenderContext) {
-  return mergeStyleDefinitions(resolveTerminalStyle(baseKind, context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
-}
-
-function resolveNodeLayoutStyle(node: TerminalElementNode, context?: TerminalRenderContext) {
-  return mergeStyleDefinitions(resolveTerminalStyle(baseStyleKindForNode(node), context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
-}
-
-function decoratedControlFrame(content: string[], style: TerminalStyleDefinition | undefined) {
-  const padding = normalizeSpacing(style?.padding, "Control padding");
-  const border = normalizeBorder(style?.border);
-  return addBorder(padFrameSides(createFrame(content), padding), border);
-}
-
-function fullFrameSpans(kinds: string[], width: number, height: number): TerminalStyleSpan[] {
-  const spans: TerminalStyleSpan[] = [];
-  for (const kind of kinds) {
-    for (let y = 1; y <= height; y += 1) {
-      spans.push(markFullFrameSpan({ kind, x1: 1, x2: width + 1, y }));
+function stripDoubleUnderscoreFields<T extends Record<string, any>>(value: T): Record<string, any> {
+  const publicValue: Record<string, any> = {};
+  for (const [key, fieldValue] of Object.entries(value)) {
+    if (!key.startsWith("__")) {
+      publicValue[key] = fieldValue;
     }
   }
-  return spans;
+  return publicValue;
 }
 
-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) {
-      const resolvedStateStyle = resolveTerminalStyle(stateStyle, context?.theme);
-      style = mergeStyleDefinitions(style, resolvedStateStyle);
-      spanKinds.push(typeof stateStyle === "string" ? styleSpan(stateStyle) : styleSpan("#style", resolvedStateStyle));
-    }
-  }
-  return { style, spanKinds };
-}
-
-function padFrameSides(frame: TerminalFrame, padding: SpacingSides) {
-  if (!padding.top && !padding.right && !padding.bottom && !padding.left) return frame;
-  const width = Math.max(1, getFrameWidth(frame));
-  const contentWidth = width + padding.left + padding.right;
-  const topLines = new Array<string>(padding.top).fill(" ".repeat(contentWidth));
-  const bottomLines = new Array<string>(padding.bottom).fill(" ".repeat(contentWidth));
-  const lines = [
-    ...topLines,
-    ...frame.lines.map((line) => `${" ".repeat(padding.left)}${padEndTerminalCells(line, width)}${" ".repeat(padding.right)}`),
-    ...bottomLines
-  ];
-  return shiftFrame(createFrame(lines, frame.hitboxes, frame.cursor, frame.spans), padding.left, padding.top);
-}
-
-function addBorder(frame: TerminalFrame, border: BorderSides) {
-  if (!border.top && !border.right && !border.bottom && !border.left) return frame;
-  const chars = borderChars(border.style);
-  const innerWidth = getFrameWidth(frame);
-  const left = border.left ? 1 : 0;
-  const right = border.right ? 1 : 0;
-  const width = innerWidth + left + right;
-  const lines: string[] = [];
-  if (border.top) {
-    lines.push(`${border.left ? chars.topLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.topRight : chars.horizontal}`.slice(0, width));
-  }
-  for (const line of frame.lines) {
-    lines.push(`${border.left ? chars.vertical : ""}${padEndTerminalCells(line, innerWidth)}${border.right ? chars.vertical : ""}`);
-  }
-  if (border.bottom) {
-    lines.push(`${border.left ? chars.bottomLeft : chars.horizontal}${chars.horizontal.repeat(Math.max(0, width - left - right))}${border.right ? chars.bottomRight : chars.horizontal}`.slice(0, width));
-  }
-  return shiftFrame(createFrame(lines, frame.hitboxes, frame.cursor, frame.spans), left, border.top ? 1 : 0);
-}
-
-function containerDecorationSize(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const layoutStyle = resolveNodeLayoutStyle(node, context);
-  const padding = normalizeSpacing(layoutStyle?.padding ?? node.props.padding, `${node.tag} padding`);
-  const border = normalizeBorder(layoutStyle?.border);
+function publicTerminalFrame(frame: TerminalFrame): TerminalFrame {
   return {
-    horizontal: padding.left + padding.right + (border.left ? 1 : 0) + (border.right ? 1 : 0),
-    vertical: padding.top + padding.bottom + (border.top ? 1 : 0) + (border.bottom ? 1 : 0)
+    lines: frame.lines,
+    hitboxes: frame.hitboxes
+      .filter((hitbox) => hitbox.id !== MODAL_OVERLAY_HITBOX_ID)
+      .map((hitbox) => stripDoubleUnderscoreFields(hitbox) as TerminalHitbox),
+    cursor: frame.cursor ? { ...frame.cursor } : null,
+    spans: frame.spans
   };
 }
 
-function addFullFrameSpans(frame: TerminalFrame, kinds: ResolvedStyleSpan[]) {
-  const width = Math.max(1, getFrameWidth(frame));
-  const height = getFrameHeight(frame);
-  if (width <= 0 || height <= 0 || kinds.length === 0) return frame;
-  const spans = frame.spans.slice();
-  for (const span of kinds) {
-    for (let y = 1; y <= height; y += 1) {
-      spans.push(markFullFrameSpan({ ...span, x1: 1, x2: width + 1, y }));
-    }
-  }
-  return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
-}
-
-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, visibleStart: 0, viewportRows: itemCount || 1 };
-  }
-
-  if (typeof node.props.itemHeight !== "undefined" && node.props.itemHeight !== 1) {
-    throw new RangeError("List itemHeight must be 1");
-  }
-
-  const overscan = nonNegativeInteger(node.props.overscan, "List overscan");
-  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, 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 (terminalCellWidth(remaining) > width) {
-      const slice = sliceTerminalCells(remaining, width);
-      if (slice.length === 0) {
-        const [firstGrapheme = ""] = terminalGraphemes(remaining);
-        rows.push(firstGrapheme);
-        remaining = remaining.slice(firstGrapheme.length);
-        continue;
-      }
-
-      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(slice.length);
-      }
-    }
-    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) {
-  if (value === "top" || value === "bottom" || value === "left" || value === "right") {
-    return value;
-  }
-  throw new RangeError("Fixed position must be top, bottom, left, or right");
-}
-
-function fillContextDimension(context: TerminalRenderContext | undefined, prop: "width" | "height", label: string) {
-  if (!context) {
-    throw new RangeError(`${label} fill requires render context to resolve ${prop}`);
-  }
-  return positiveInteger(prop === "width" ? context.cols : context.rows, `${label} ${prop}`);
-}
-
-function resolveLayoutDimension(node: TerminalElementNode, prop: "width" | "height", label: string, context?: TerminalRenderContext) {
-  const explicit = positiveDimension(node.props[prop], prop);
-  if (typeof explicit !== "undefined") {
-    return explicit;
-  }
-  if (node.props.fill === true) {
-    return fillContextDimension(context, prop, label);
-  }
-  return undefined;
-}
-
-function resolveLayoutDimensions(node: TerminalElementNode, label: string, context?: TerminalRenderContext) {
-  return {
-    width: resolveLayoutDimension(node, "width", label, context),
-    height: resolveLayoutDimension(node, "height", label, context)
-  };
-}
-
-function contextBackedDimension(context: TerminalRenderContext | undefined, prop: "width" | "height", label: string) {
-  if (!context) {
-    return undefined;
-  }
-  return positiveInteger(prop === "width" ? context.cols : context.rows, `${label} ${prop}`);
-}
-
-function resolveBlockLayoutDimensions(
-  node: TerminalElementNode,
-  label: string,
-  context?: TerminalRenderContext,
-  options: { exactHeightFromContext?: boolean } = {}
-) {
-  const explicitWidth = positiveDimension(node.props.width, "width");
-  const explicitHeight = positiveDimension(node.props.height, "height");
-  return {
-    width: typeof explicitWidth !== "undefined"
-      ? explicitWidth
-      : node.props.fill === true
-        ? fillContextDimension(context, "width", label)
-        : contextBackedDimension(context, "width", label),
-    height: typeof explicitHeight !== "undefined"
-      ? explicitHeight
-      : node.props.fill === true
-        ? fillContextDimension(context, "height", label)
-        : options.exactHeightFromContext === true
-          ? contextBackedDimension(context, "height", label)
-          : undefined
-  };
-}
-
-function resolveSplitDimension(node: TerminalElementNode, prop: "width" | "height", context?: TerminalRenderContext) {
-  const explicit = positiveDimension(node.props[prop], prop);
-  if (typeof explicit !== "undefined") {
-    return explicit;
-  }
-  if (node.props.fill === true) {
-    return fillContextDimension(context, prop, "Split");
-  }
-  const fromContext = contextBackedDimension(context, prop, "Split");
-  if (typeof fromContext !== "undefined") {
-    return fromContext;
-  }
-  throw new RangeError("Split requires width/height or render context");
-}
-
-function decorateContainerFrame(frame: TerminalFrame, node: TerminalElementNode, options: { constrain?: boolean; width?: number; height?: number } = {}, context?: TerminalRenderContext) {
-  let next = frame;
-  const resolved = resolveNodeStyle(node, context);
-  const layoutStyle = resolveNodeLayoutStyle(node, context);
-  const padding = normalizeSpacing(layoutStyle?.padding ?? node.props.padding, `${node.tag} padding`);
-  const border = normalizeBorder(layoutStyle?.border);
-  const decoration = containerDecorationSize(node, context);
-  if (!options.constrain) {
-    next = fitFrame(next, numeric(options.width ?? node.props.width, 0), numeric(options.height ?? node.props.height, 0));
-  } else if (node.tag === "terminal-pane" && (typeof node.props.width !== "undefined" || typeof node.props.height !== "undefined")) {
-    const width = typeof node.props.width === "undefined" || typeof options.width === "undefined" ? undefined : options.width - decoration.horizontal;
-    const height = typeof node.props.height === "undefined" || typeof options.height === "undefined" ? undefined : options.height - decoration.vertical;
-    if ((typeof width === "number" && width > 0) || (typeof height === "number" && height > 0)) {
-      next = constrainFrame(next, {
-        width: typeof width === "number" && width > 0 ? width : undefined,
-        height: typeof height === "number" && height > 0 ? height : undefined,
-        expandFullFrameSpans: true
-      });
-    }
-  }
-  next = padFrameSides(next, padding);
-  next = addBorder(next, border);
-  if (options.constrain) {
-    next = constrainFrame(next, {
-      width: typeof options.width === "undefined" ? positiveDimension(node.props.width, "width") : options.width,
-      height: typeof options.height === "undefined" ? positiveDimension(node.props.height, "height") : options.height,
-      expandFullFrameSpans: true
-    });
-  }
-  next = addContainerStyleSpans(next, node, resolved);
-  if (node.props.id && isFocusable(node)) {
-    next = addFocusableHitbox(next, node);
-  }
-  return next;
-}
-
-function addContainerStyleSpans(frame: TerminalFrame, node: TerminalElementNode, resolved = resolveNodeStyle(node)) {
-  const width = getFrameWidth(frame);
-  const height = getFrameHeight(frame);
-  if (width <= 0 || height <= 0) {
-    return frame;
-  }
-
-  const spans = frame.spans.slice();
-  const containerSpans = resolved.spanKinds.slice();
-  const border = normalizeBorder(resolved.style?.border);
-
-  if (!resolved.style?.color && border.color) {
-    containerSpans.push(styleSpan("#style", { color: border.color }));
-  }
-
-  for (const span of containerSpans) {
-    for (let y = 1; y <= height; y += 1) {
-      spans.push({ ...span, x1: 1, x2: width + 1, y });
-    }
-  }
-
-  if (node.props.__focused && isFocusable(node)) {
-    for (let y = 1; y <= height; y += 1) {
-      spans.push({ kind: "focus", x1: 1, x2: width + 1, y });
-    }
-  }
-
-  return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
-}
-
-function decoratedContentDimension(node: TerminalElementNode, prop: "width" | "height", outer: number, context?: TerminalRenderContext) {
-  positiveInteger(outer, `Pane ${prop}`);
-  const decoration = containerDecorationSize(node, context);
-  const inner = outer - (prop === "width" ? decoration.horizontal : decoration.vertical);
-
-  if (!Number.isFinite(inner) || !Number.isInteger(inner) || inner <= 0) {
-    throw new RangeError(`Pane ${prop} leaves no room for Fixed content`);
-  }
-
-  return inner;
-}
-
-function resolveContainerChildContext(node: TerminalElementNode, dimensions: { width?: number; height?: number }, context?: TerminalRenderContext) {
-  if (typeof dimensions.width !== "number" && typeof dimensions.height !== "number") {
-    return context;
-  }
-
-  return {
-    cols: typeof dimensions.width === "number" ? decoratedContentDimension(node, "width", dimensions.width, context) : context?.cols ?? 1,
-    rows: typeof dimensions.height === "number" ? decoratedContentDimension(node, "height", dimensions.height, context) : context?.rows ?? 1,
-    theme: context?.theme
-  };
-}
-
-function interactiveTextMetadata(value: string) {
-  const textLength = value.length;
-  const textCellToStringIndex = terminalCellToStringIndex(value);
-  const usesLinearIndexes = textCellToStringIndex.length === textLength + 1
-    && textCellToStringIndex.every((index, cellOffset) => index === cellOffset);
-
-  if (usesLinearIndexes) {
-    return { textLength };
-  }
-
-  return { textLength, textCellToStringIndex };
-}
-
-function renderInputLine(value: string, inputState: InputInteractionState, padding: SpacingSides = { top: 0, right: 0, bottom: 0, left: 0 }) {
-  const state = normalizeInputState(inputState, value.length);
-  const { start, end } = getSelectionRange(state);
-  const line = `${value.slice(0, state.cursor)}|${value.slice(state.cursor)}`;
-  const paddedLine = `${" ".repeat(padding.left)}${line}${" ".repeat(padding.right)}`;
-  const textStart = padding.left + 1;
-  return {
-    line: paddedLine,
-    cursor: { x: textStart + cursorCellOffset(value, state.cursor), y: 1 },
-    spans: start === end ? [] : [{ kind: "input.selection", x1: textStart + cursorCellOffset(value, start), x2: textStart + cursorCellOffset(value, end), y: 1 }]
-  };
-}
-
-function resolveEditorDimensions(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const explicitWidth = positiveDimension(node.props.width, "width");
-  const explicitHeight = positiveDimension(node.props.height, "height");
-  return {
-    width: typeof explicitWidth !== "undefined"
-      ? explicitWidth
-      : node.props.fill === true
-        ? fillContextDimension(context, "width", "Editor")
-        : undefined,
-    height: typeof explicitHeight !== "undefined"
-      ? explicitHeight
-      : node.props.fill === true
-        ? fillContextDimension(context, "height", "Editor")
-        : undefined
-  };
-}
-
-function renderEditorFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : "";
-  const placeholder = typeof node.props.placeholder !== "undefined" ? plainText(node.props.placeholder) : "";
-  const displayValue = value.length === 0 && !node.props.__focused && placeholder ? placeholder : value;
-  const state = createEditorState(displayValue, node.props.__editorState?.cursor);
-  const focusedState = createEditorState(value, node.props.__editorState?.cursor);
-  const focusedLine = focusedState.cursor.line;
-  const focusedColumn = focusedState.cursor.column;
-  const lines = state.lines.map((line, index) => {
-    if (!node.props.__focused || index !== focusedLine) {
-      return `  ${line}`;
-    }
-
-    return `> ${line.slice(0, focusedColumn)}|${line.slice(focusedColumn)}`;
-  });
-  const width = lines.reduce((max, line) => Math.max(max, terminalCellWidth(line)), 0);
-  const cursor = node.props.__focused ? { x: 3 + cursorCellOffset(focusedState.lines[focusedLine], focusedColumn), y: focusedLine + 1 } : null;
-  const spans: TerminalStyleSpan[] = node.props.__focused ? [{ kind: "focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedLine]) + 1), y: focusedLine + 1 }] : [];
-  const dimensions = resolveEditorDimensions(node, context);
-  const frame = createFrame(lines, [], cursor, spans);
-  const scrollOffset = node.props.__focused && typeof dimensions.height !== "undefined"
-    ? Math.min(Math.max(0, focusedLine - dimensions.height + 1), Math.max(0, lines.length - dimensions.height))
-    : 0;
-  const croppedFrame = typeof dimensions.height === "undefined"
-    ? frame
-    : scrollOffset > 0
-      ? cropFrame(frame, scrollOffset, dimensions.height)
-      : frame;
-  const constrainedFrame = typeof dimensions.width === "undefined" && typeof dimensions.height === "undefined"
-    ? croppedFrame
-    : constrainFrame(croppedFrame, { ...dimensions, expandFullFrameSpans: true });
-
-  if (!node.props.id) {
-    return constrainedFrame;
-  }
-
-  return createFrame(constrainedFrame.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: Math.max(1, getFrameWidth(constrainedFrame)), y1: 1, y2: getFrameHeight(constrainedFrame), textStartX: 3, ...interactiveTextMetadata(value) }], constrainedFrame.cursor, constrainedFrame.spans);
-}
-
-function notifyLayoutContextProbe(node: TerminalElementNode, context?: TerminalRenderContext) {
-  if (context && typeof node.props.__layoutContextProbe === "function") {
-    node.props.__layoutContextProbe(context);
-  }
-}
-
-function renderTableFrame(node: TerminalElementNode, context?: TerminalRenderContext): TerminalFrame {
-  const rowNodes = node.children.filter((child): child is TerminalElementNode => child.type === "element");
-  if (!rowNodes.length) {
-    return createFrame([""]);
-  }
-
-  const rowFrames = rowNodes.map((row) => row.children.map((child) => renderTerminalFrame(child, context)));
-  const columnCount = rowFrames.reduce((max, row) => Math.max(max, row.length), 0);
-  const columnWidths = new Array<number>(columnCount).fill(0);
-
-  for (const row of rowFrames) {
-    for (let index = 0; index < columnCount; index += 1) {
-      const cell = row[index] || createFrame([""]);
-      columnWidths[index] = Math.max(columnWidths[index], getFrameWidth(cell));
-    }
-  }
-
-  const lines: string[] = [];
-  const hitboxes = [] as TerminalFrame["hitboxes"];
-  const spans = [] as TerminalStyleSpan[];
-  let cursor: TerminalFrame["cursor"] = null;
-  let yOffset = 0;
-
-  for (const row of rowFrames) {
-    const cells = new Array<TerminalFrame>(columnCount).fill(createFrame([""])).map((cell, index) => row[index] || cell);
-    const rowHeight = cells.reduce((max, cell) => Math.max(max, getFrameHeight(cell)), 0);
-    const normalized = cells.map((cell, index) => ({
-      frame: fitFrame(cell, columnWidths[index], rowHeight, { expandFullFrameSpans: true }),
-      width: columnWidths[index]
-    }));
-
-    for (let rowIndex = 0; rowIndex < rowHeight; rowIndex += 1) {
-      lines.push(normalized.map((cell) => cell.frame.lines[rowIndex]).join(" | "));
-    }
-
-    let xOffset = 0;
-    for (let index = 0; index < normalized.length; index += 1) {
-      const cell = normalized[index];
-      const shifted = shiftFrame(cell.frame, xOffset, yOffset);
-      hitboxes.push(...shifted.hitboxes);
-      spans.push(...shifted.spans);
-      if (!cursor && cell.frame.cursor) {
-        cursor = { x: cell.frame.cursor.x + xOffset, y: cell.frame.cursor.y + yOffset };
-      }
-      xOffset += cell.width + (index < normalized.length - 1 ? 3 : 0);
-    }
-
-    yOffset += rowHeight;
-  }
-
-  return createFrame(lines, hitboxes, cursor, spans);
-}
-
-function resolveSplitBreakpoint(node: TerminalElementNode, width: number, height: number) {
-  const breakpoints = Array.isArray(node.props.breakpoints) ? node.props.breakpoints as TerminalSplitBreakpoint[] : [];
-  for (const breakpoint of breakpoints) {
-    if (typeof breakpoint.maxCols === "number" && width > breakpoint.maxCols) continue;
-    if (typeof breakpoint.maxRows === "number" && height > breakpoint.maxRows) continue;
-    return breakpoint;
-  }
-  return undefined;
-}
-
-function parseSplitSize(value: TerminalSplitSize, index: number) {
-  if (typeof value === "number") {
-    return { type: "absolute" as const, value: positiveInteger(value, `Split sizes[${index}]`) };
-  }
-  if (typeof value !== "string") {
-    throw new RangeError(`Split sizes[${index}] must be a number, percent, or fr value`);
-  }
-  const percent = value.match(/^([+-]?\d+(?:\.\d+)?)%$/);
-  if (percent) {
-    const amount = Number(percent[1]);
-    if (!Number.isFinite(amount) || amount <= 0) throw new RangeError(`Split sizes[${index}] percent must be greater than zero`);
-    return { type: "percent" as const, value: amount };
-  }
-  const fraction = value.match(/^([+-]?\d+(?:\.\d+)?)fr$/);
-  if (fraction) {
-    const amount = Number(fraction[1]);
-    if (!Number.isFinite(amount) || amount <= 0) throw new RangeError(`Split sizes[${index}] fr must be greater than zero`);
-    return { type: "fr" as const, value: amount };
-  }
-  throw new RangeError(`Invalid Split sizes[${index}]: ${value}`);
-}
-
-function allocateDecimals(ideals: number[], total: number) {
-  const sizes = ideals.map((value) => Math.floor(value));
-  let remainder = total - sizes.reduce((sum, value) => sum + value, 0);
-  const order = ideals.map((value, index) => ({ index, fraction: value - Math.floor(value) }))
-    .sort((a, b) => b.fraction - a.fraction || a.index - b.index);
-  for (let index = 0; index < order.length && remainder > 0; index += 1) {
-    sizes[order[index].index] += 1;
-    remainder -= 1;
-  }
-  return sizes;
-}
-
-function resolveSplitSizes(sizesInput: TerminalSplitSize[] | undefined, childCount: number, available: number) {
-  if (!Array.isArray(sizesInput)) {
-    const base = Math.floor(available / childCount);
-    const remainder = available % childCount;
-    const sizes = new Array<number>(childCount);
-    for (let index = 0; index < childCount; index += 1) sizes[index] = base + (index < remainder ? 1 : 0);
-    return sizes;
-  }
-  if (sizesInput.length !== childCount) throw new RangeError("Split sizes length must match child count");
-  const parsed = sizesInput.map(parseSplitSize);
-  const percentTotal = parsed.reduce((sum, size) => sum + (size.type === "percent" ? size.value : 0), 0);
-  if (percentTotal > 100) throw new RangeError("Split percentage sizes must not exceed 100%");
-  const ideals = new Array<number>(childCount).fill(0);
-  let absoluteUsed = 0;
-  for (let index = 0; index < parsed.length; index += 1) {
-    const size = parsed[index];
-    if (size.type === "absolute") {
-      ideals[index] = size.value;
-      absoluteUsed += size.value;
-    } else if (size.type === "percent") {
-      ideals[index] = available * (size.value / 100);
-    }
-  }
-  const percentUsed = ideals.reduce((sum, value, index) => sum + (parsed[index].type === "percent" ? value : 0), 0);
-  const remaining = available - absoluteUsed - percentUsed;
-  if (remaining < -0.000001) throw new RangeError("Split sizes plus gaps must fit within the major axis");
-  const frTotal = parsed.reduce((sum, size) => sum + (size.type === "fr" ? size.value : 0), 0);
-  for (let index = 0; index < parsed.length; index += 1) {
-    const size = parsed[index];
-    if (size.type === "fr") ideals[index] = frTotal > 0 ? remaining * (size.value / frTotal) : 0;
-  }
-  const allocationTotal = frTotal > 0 ? available : Math.round(ideals.reduce((sum, value) => sum + value, 0));
-  const allocated = allocateDecimals(ideals, allocationTotal);
-  if (allocated.reduce((sum, size) => sum + size, 0) > available) throw new RangeError("Split sizes plus gaps must fit within the major axis");
-  return allocated;
-}
-
-function isDirectSplitLayoutContainer(node: TerminalNode): node is TerminalElementNode {
-  return node.type === "element" && (node.tag === "terminal-pane" || node.tag === "terminal-box" || node.tag === "terminal-view" || node.tag === "terminal-scroll");
-}
-
-function renderSplitChildFrame(child: TerminalNode, cellWidth: number, cellHeight: number, context?: TerminalRenderContext): TerminalFrame {
-  const childContext = { cols: cellWidth, rows: cellHeight, theme: context?.theme };
-  if (!isDirectSplitLayoutContainer(child)) {
-    return renderTerminalFrame(child, childContext);
-  }
-
-  const props = { ...child.props };
-  if (typeof props.width === "undefined" && props.fill !== true) {
-    props.width = cellWidth;
-  }
-  if (typeof props.height === "undefined" && props.fill !== true) {
-    props.height = cellHeight;
-  }
-
-  return renderTerminalFrame({ ...child, props }, childContext);
-}
-
-function renderSplitFrame(node: TerminalElementNode, context?: TerminalRenderContext): TerminalFrame {
-  const width = resolveSplitDimension(node, "width", context);
-  const height = resolveSplitDimension(node, "height", context);
-  const breakpoint = resolveSplitBreakpoint(node, width, height);
-  const gap = nonNegativeInteger(breakpoint?.gap ?? node.props.gap, "Split gap");
-  const direction = (breakpoint?.direction ?? node.props.direction) === "column" ? "column" : "row";
-  const childCount = node.children.length;
-
-  if (!childCount) {
-    const frame = createFrame(new Array<string>(height).fill(" ".repeat(width)));
-    return node.props.id && isFocusable(node) ? addFocusableHitbox(frame, node as TerminalFocusNode) : frame;
-  }
-
-  const majorSize = direction === "row" ? width : height;
-  const available = majorSize - gap * (childCount - 1);
-  if (available < 0) {
-    throw new RangeError("Split gap leaves insufficient space for children");
-  }
-
-  const sizes = resolveSplitSizes(breakpoint?.sizes ?? node.props.sizes, childCount, available);
-
-  const frames: TerminalFrame[] = [];
-  for (let index = 0; index < childCount; index += 1) {
-    const cellWidth = direction === "row" ? sizes[index] : width;
-    const cellHeight = direction === "row" ? height : sizes[index];
-    if (cellWidth <= 0 || cellHeight <= 0) {
-      continue;
-    }
-    frames.push(constrainFrame(renderSplitChildFrame(node.children[index], cellWidth, cellHeight, context), { width: cellWidth, height: cellHeight, expandFullFrameSpans: true }));
-  }
-
-  const frame = frames.length
-    ? direction === "row" ? mergeHorizontal(frames, { gap }) : mergeVertical(frames, { gap })
-    : createFrame(new Array<string>(height).fill(" ".repeat(width)));
-  const constrained = constrainFrame(frame, { width, height });
-  return node.props.id && isFocusable(node) ? addFocusableHitbox(constrained, node as TerminalFocusNode) : constrained;
-}
-
-function hasDirectFixedChildren(node: TerminalElementNode) {
-  return node.children.some((child) => child.type === "element" && child.tag === "terminal-fixed");
-}
-
-function hasDirectOverlayChildren(node: TerminalElementNode) {
-  return node.children.some((child) => child.type === "element" && child.tag === "terminal-overlay");
-}
-
-function splitOverlayChildren(children: TerminalNode[]) {
-  const baseChildren: TerminalNode[] = [];
-  const overlays: TerminalElementNode[] = [];
-
-  for (const child of children) {
-    if (child.type === "element" && child.tag === "terminal-overlay") {
-      overlays.push(child);
-    } else {
-      baseChildren.push(child);
-    }
-  }
-
-  return { baseChildren, overlays };
-}
-
-function renderBodyFrame(children: TerminalNode[], props: TerminalElementNode["props"], context?: TerminalRenderContext) {
-  const direction = props.direction === "row" ? "row" : "column";
-  const gap = numeric(props.gap, 0);
-  const frames = children.map((child) => renderTerminalFrame(child, context));
-  return direction === "row" ? mergeHorizontal(frames, { gap }) : mergeVertical(frames, { gap });
-}
-
-function renderFixedChildFrame(node: TerminalElementNode, width: number, height: number) {
-  return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height, expandFullFrameSpans: true });
-}
-
-function renderFixedCompositionFrame(node: TerminalElementNode, width: number, height: number): TerminalFrame {
-  if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0 || !Number.isFinite(height) || !Number.isInteger(height) || height <= 0) {
-    throw new RangeError("Fixed composition requires exact positive parent dimensions");
-  }
-
-  const fixedNodes: Record<"top" | "bottom" | "left" | "right", TerminalElementNode[]> = { top: [], bottom: [], left: [], right: [] };
-  const bodyChildren: TerminalNode[] = [];
-
-  for (const child of node.children) {
-    if (child.type === "element" && child.tag === "terminal-fixed") {
-      fixedNodes[fixedPosition(child.props.position)].push(child);
-    } else if (child.type === "element" && child.tag === "terminal-overlay") {
-      continue;
-    } else {
-      bodyChildren.push(child);
-    }
-  }
-
-  const topSize = fixedNodes.top.reduce((total, fixed) => total + positiveInteger(fixed.props.size, "Fixed size"), 0);
-  const bottomSize = fixedNodes.bottom.reduce((total, fixed) => total + positiveInteger(fixed.props.size, "Fixed size"), 0);
-  const middleHeight = height - topSize - bottomSize;
-  if (middleHeight < 0) {
-    throw new RangeError("Fixed top and bottom regions exceed parent height");
-  }
-
-  const leftSize = fixedNodes.left.reduce((total, fixed) => total + positiveInteger(fixed.props.size, "Fixed size"), 0);
-  const rightSize = fixedNodes.right.reduce((total, fixed) => total + positiveInteger(fixed.props.size, "Fixed size"), 0);
-  const bodyWidth = width - leftSize - rightSize;
-  if (bodyWidth < 0) {
-    throw new RangeError("Fixed left and right regions exceed parent width");
-  }
-
-  const topFrames = fixedNodes.top.map((fixed) => renderFixedChildFrame(fixed, width, positiveInteger(fixed.props.size, "Fixed size")));
-  const bottomFrames = fixedNodes.bottom.map((fixed) => renderFixedChildFrame(fixed, width, positiveInteger(fixed.props.size, "Fixed size")));
-  const middleFrames: TerminalFrame[] = [];
-
-  if (middleHeight > 0) {
-    const leftFrames = fixedNodes.left.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
-    const rightFrames = fixedNodes.right.map((fixed) => renderFixedChildFrame(fixed, positiveInteger(fixed.props.size, "Fixed size"), middleHeight));
-    const bodyFrames = bodyWidth > 0
-      ? [constrainFrame(renderBodyFrame(bodyChildren, node.props, { cols: bodyWidth, rows: middleHeight }), { width: bodyWidth, height: middleHeight, expandFullRowSpans: true })]
-      : [];
-
-    middleFrames.push(constrainFrame(mergeHorizontal([...leftFrames, ...bodyFrames, ...rightFrames]), { width, height: middleHeight, expandFullRowSpans: true }));
-  }
-
-  const frame = mergeVertical([...topFrames, ...middleFrames, ...bottomFrames]);
-  return constrainFrame(frame, { width, height, expandFullFrameSpans: true });
-}
-
-function renderStandaloneFixedFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const position = fixedPosition(node.props.position);
-  const size = positiveInteger(node.props.size, "Fixed size");
-  const frame = renderBodyFrame(node.children, {}, context);
-  return position === "top" || position === "bottom"
-    ? constrainFrame(frame, { height: size })
-    : constrainFrame(frame, { width: size });
-}
-
-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: margin.x + 1,
-    y: margin.y + 1,
-    width: overlayWidth,
-    height: overlayHeight
-  };
-}
-
-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, expandFullRowSpans: true });
-  frame = addContainerStyleSpans(frame, node, resolveNodeStyle(node, context));
-  if (node.props.id && isFocusable(node)) {
-    frame = addFocusableHitbox(frame, node as TerminalFocusNode);
-  }
-  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;
-  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;
-}
-
-function renderScreenFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const { baseChildren, overlays } = splitOverlayChildren(node.children);
-  let base: TerminalFrame;
-
-  if (hasDirectFixedChildren(node)) {
-    if (!context) {
-      throw new RangeError("Screen with direct Fixed children requires exact render context dimensions");
-    }
-    if (node.props.title) {
-      const title = constrainFrame(createFrame([plainText(node.props.title)]), { width: context.cols, height: 1 });
-      const remainingRows = context.rows - 1;
-      base = remainingRows > 0
-        ? constrainFrame(mergeVertical([title, renderFixedCompositionFrame(node, context.cols, remainingRows)]), { width: context.cols, height: context.rows })
-        : constrainFrame(title, { width: context.cols, height: context.rows });
-    } else {
-      base = renderFixedCompositionFrame(node, context.cols, context.rows);
-    }
-  } else {
-    const parts: TerminalFrame[] = [];
-    if (node.props.title) {
-      parts.push(createFrame([plainText(node.props.title)]));
-    }
-    const childContext = context && node.props.title
-      ? { cols: context.cols, rows: context.rows - 1, theme: context.theme }
-      : context;
-    if (!context || !node.props.title || context.rows > 1) {
-      parts.push(...baseChildren.map((child) => renderTerminalFrame(child, childContext)));
-    }
-    base = mergeVertical(parts);
-    if (context && overlays.length) {
-      base = constrainFrame(base, { width: context.cols, height: context.rows, expandFullRowSpans: true });
-    }
-  }
-
-  return overlays.length ? applyDirectOverlays(base, overlays, context) : base;
-}
-
-function renderPaneFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const { baseChildren, overlays } = splitOverlayChildren(node.children);
-  const dimensions = resolveBlockLayoutDimensions(node, "Pane", context, { exactHeightFromContext: hasDirectFixedChildren(node) });
-  let frame: TerminalFrame;
-
-  if (hasDirectFixedChildren(node)) {
-    const width = decoratedContentDimension(node, "width", dimensions.width ?? positiveInteger(node.props.width, "Pane width"), context);
-    const height = decoratedContentDimension(node, "height", dimensions.height ?? positiveInteger(node.props.height, "Pane height"), context);
-    frame = renderFixedCompositionFrame(node, width, height);
-    frame = decorateContainerFrame(frame, node, { constrain: true, ...dimensions }, context);
-  } else {
-    const childContext = resolveContainerChildContext(node, dimensions, context);
-    frame = renderBodyFrame(baseChildren, node.props, childContext);
-    frame = decorateContainerFrame(frame, node, { constrain: true, ...dimensions }, context);
-  }
-
-  return overlays.length ? applyDirectOverlays(frame, overlays, context) : frame;
-}
-
-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;
-}
-
-function renderLogViewFrame(node: TerminalElementNode, context?: TerminalRenderContext) {
-  const dimensions = resolveLayoutDimensions(node, "LogView", context);
-  const entries = Array.isArray(node.props.entries) ? node.props.entries : [];
-  const lines: string[] = [];
-
-  if (entries.length === 0) {
-    lines.push(plainText(node.props.emptyText ?? ""));
-  } else {
-    for (let index = 0; index < entries.length; index += 1) {
-      const entry = entries[index];
-      const value = typeof node.props.renderEntry === "function"
-        ? node.props.renderEntry(entry, index)
-        : entry?.content ?? "";
-      lines.push(...plainText(value).split("\n"));
-    }
-  }
-
-  const resolved = resolveNodeStyle(node, context);
-  const layoutStyle = resolveNodeLayoutStyle(node, context);
-  const padding = normalizeSpacing(layoutStyle?.padding ?? node.props.padding, "LogView padding");
-  const border = normalizeBorder(layoutStyle?.border);
-  const horizontalDecoration = padding.left + padding.right + (border.left ? 1 : 0) + (border.right ? 1 : 0);
-  const verticalDecoration = padding.top + padding.bottom + (border.top ? 1 : 0) + (border.bottom ? 1 : 0);
-  const innerWidth = typeof dimensions.width === "undefined" ? undefined : dimensions.width - horizontalDecoration;
-  const innerHeight = typeof dimensions.height === "undefined" ? undefined : dimensions.height - verticalDecoration;
-
-  let frame = createFrame(lines);
-  if ((typeof innerWidth === "number" && innerWidth <= 0) || (typeof innerHeight === "number" && innerHeight <= 0)) {
-    frame = createFrame([""]);
-  } else {
-    if (typeof innerHeight !== "undefined") {
-      const offset = node.props.followTail === true ? Math.max(0, getFrameHeight(frame) - innerHeight) : 0;
-      frame = cropFrame(frame, offset, innerHeight);
-      while (getFrameHeight(frame) < innerHeight) {
-        frame = createFrame([...frame.lines, ""], frame.hitboxes, frame.cursor, frame.spans);
-      }
-    }
-    if (typeof innerWidth !== "undefined") {
-      frame = constrainFrame(frame, { width: innerWidth, height: innerHeight, expandFullFrameSpans: true });
-    }
-  }
-  frame = padFrameSides(frame, padding);
-  frame = addBorder(frame, border);
-  if (typeof dimensions.width !== "undefined") {
-    frame = constrainFrame(frame, { width: dimensions.width, height: dimensions.height, expandFullFrameSpans: true });
-  } else if (typeof dimensions.height !== "undefined") {
-    frame = cropFrame(frame, 0, dimensions.height);
-    while (typeof dimensions.height !== "undefined" && getFrameHeight(frame) < dimensions.height) {
-      frame = createFrame([...frame.lines, ""], frame.hitboxes, frame.cursor, frame.spans);
-    }
-  }
-  frame = addContainerStyleSpans(frame, node, resolved);
-  if (node.props.id && isFocusable(node)) {
-    frame = addFocusableHitbox(frame, node as TerminalFocusNode);
-  }
-  return frame;
-}
-
-function renderSeparatedRowFrame(frames: TerminalFrame[], separator = " | ") {
-  if (!frames.length) {
-    return createFrame([""]);
-  }
-
-  const height = frames.reduce((max, frame) => Math.max(max, getFrameHeight(frame)), 0);
-  const widths = frames.map(getFrameWidth);
-  const lines = new Array<string>(height).fill("");
-  const hitboxes = [] as TerminalFrame["hitboxes"];
-  const spans = [] as TerminalStyleSpan[];
-  let cursor: TerminalFrame["cursor"] = null;
-  let xOffset = 0;
-
-  for (let index = 0; index < frames.length; index += 1) {
-    const frame = frames[index];
-    const width = widths[index];
-    for (let row = 0; row < height; row += 1) {
-      lines[row] += padEndTerminalCells(frame.lines[row] || "", width);
-      if (index < frames.length - 1) {
-        lines[row] += separator;
-      }
-    }
-    const shifted = shiftFrame(fitFrame(frame, width, height, { expandFullFrameSpans: true }), xOffset, 0);
-    hitboxes.push(...shifted.hitboxes);
-    spans.push(...shifted.spans);
-    if (!cursor && frame.cursor) {
-      cursor = { x: frame.cursor.x + xOffset, y: frame.cursor.y };
-    }
-    xOffset += width + (index < frames.length - 1 ? terminalCellWidth(separator) : 0);
-  }
-
-  return createFrame(lines, hitboxes, cursor, spans);
-}
-
-function renderElementFrame(node: TerminalElementNode, context?: TerminalRenderContext): TerminalFrame {
-  notifyLayoutContextProbe(node, context);
-
-  switch (node.tag) {
-    case "terminal-screen": {
-      return renderScreenFrame(node, context);
-    }
-    case "terminal-box":
-    case "terminal-view":
-    case "terminal-pane":
-    case "terminal-scroll": {
-      let frame: TerminalFrame;
-
-      if (node.tag === "terminal-pane" && (hasDirectFixedChildren(node) || hasDirectOverlayChildren(node))) {
-        return renderPaneFrame(node, context);
-      }
-
-      const label = node.tag === "terminal-box" ? "Box" : node.tag === "terminal-view" ? "View" : node.tag === "terminal-scroll" ? "ScrollView" : "Pane";
-      const dimensions = node.tag === "terminal-scroll"
-        ? resolveLayoutDimensions(node, label, context)
-        : resolveBlockLayoutDimensions(node, label, context);
-
-      const childContext = resolveContainerChildContext(node, dimensions, context);
-      frame = renderBodyFrame(node.children, node.props, childContext);
-
-      frame = decorateContainerFrame(frame, node, { constrain: node.tag === "terminal-box" || node.tag === "terminal-view" || node.tag === "terminal-pane", ...dimensions }, context);
-
-      if (node.tag === "terminal-scroll") {
-        const offset = numeric(node.props.__scrollOffset, 0);
-        if (typeof dimensions.width !== "undefined") {
-          frame = constrainFrame(frame, { width: dimensions.width, expandFullFrameSpans: true });
-        }
-        const height = numeric(dimensions.height ?? node.props.height, getFrameHeight(frame));
-        frame = cropFrame(frame, offset, height || getFrameHeight(frame));
-        const highlightRows = Array.isArray(node.props.highlightRows) ? node.props.highlightRows.map((value: unknown) => Number(value)) : [];
-        const hoveredRow = typeof node.props.__hoveredRow === "number" ? Number(node.props.__hoveredRow) : -1;
-        const spans = frame.spans.slice();
-        for (let index = 0; index < frame.lines.length; index += 1) {
-          const row = index + 1;
-          const width = terminalCellWidth(frame.lines[index]) + 1;
-          if (highlightRows.includes(row)) {
-            spans.push({ kind: "highlight", x1: 1, x2: width, y: row });
-          }
-          if (hoveredRow === row) {
-            spans.push({ kind: "hover", x1: 1, x2: width, y: row });
-          }
-        }
-        frame = createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
-      }
-
-      return frame;
-    }
-    case "terminal-split":
-      return renderSplitFrame(node, context);
-    case "terminal-fixed":
-      return renderStandaloneFixedFrame(node, context);
-    case "terminal-overlay":
-      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 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, context);
-      const layoutStyle = resolveLayoutStyle("list.base", node, context);
-      const padding = normalizeSpacing(layoutStyle.padding, "List padding");
-      const border = normalizeBorder(layoutStyle.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 < frameLines.length; index += 1) {
-        const sourceIndex = frameItemIndexes[index];
-        const y = itemY + index;
-        spans.push(markFullRowSpan({ kind: "list.base", x1: 1, x2: width + 1, y }));
-        if (selectedIndex !== null && selectedIndex !== activeIndex && sourceIndex === selectedIndex) {
-          spans.push(markFullRowSpan({ kind: "list.selected", x1: 1, x2: width + 1, y }));
-        }
-        if (sourceIndex === activeIndex) {
-          spans.push(markFullRowSpan({ kind: "list.current", x1: 1, x2: width + 1, y }));
-        }
-        if (sourceIndex === hoveredIndex) {
-          spans.push(markFullRowSpan({ kind: "list.hover", x1: 1, x2: width + 1, y }));
-        }
-      }
-      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;
-        }
-      }
-      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, expandFullFrameSpans: true }) : styled;
-    }
-    case "terminal-table":
-      return renderTableFrame(node, context);
-    case "terminal-row":
-      return renderSeparatedRowFrame(node.children.map((child) => renderTerminalFrame(child, context)), plainText(node.props.separator || " | "));
-    case "terminal-td": {
-      const frame = mergeVertical(node.children.map((child) => renderTerminalFrame(child, context)));
-      const resolved = resolveNodeStyle(node, context);
-      const layoutStyle = resolveNodeLayoutStyle(node, context);
-      const padding = normalizeSpacing(layoutStyle?.padding ?? node.props.padding, "Td padding");
-      const border = normalizeBorder(layoutStyle?.border);
-      return addFullFrameSpans(addBorder(padFrameSides(frame, padding), border), resolved.spanKinds);
-    }
-    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, { includeBase: false }).spanKinds);
-    }
-    case "terminal-input": {
-      const value = typeof node.props.value !== "undefined" ? node.props.value : node.props.placeholder || "";
-      const stringValue = plainText(value);
-      const displayValue = !node.props.__focused && stringValue.length === 0 && typeof node.props.placeholder !== "undefined"
-        ? plainText(node.props.placeholder)
-        : stringValue;
-      const layoutStyle = resolveLayoutStyle("input.base", node, context);
-      const inputPadding = normalizeSpacing(layoutStyle.padding, "Input padding");
-      const inputBorder = normalizeBorder(layoutStyle.border);
-      const textStartX = (inputBorder.left ? 1 : 0) + inputPadding.left + 1;
-      if (!node.props.__focused) {
-        const line = `${" ".repeat(inputPadding.left)}${displayValue}${" ".repeat(inputPadding.right)}`;
-        const decorated = addBorder(createFrame([line]), inputBorder);
-        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, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
-        const spans = fullFrameSpans(["input.base"], width, height);
-        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);
-      const decorated = addBorder(createFrame([rendered.line], [], rendered.cursor, rendered.spans), inputBorder);
-      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, textStartX, ...interactiveTextMetadata(stringValue) }] : [];
-      const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...decorated.spans];
-      return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
-    }
-    case "terminal-editor":
-      return addFullFrameSpans(renderEditorFrame(node, context), resolveNodeStyle(node, context).spanKinds);
-    case "terminal-button": {
-      const label = typeof node.props.label !== "undefined" ? plainText(node.props.label) : plainText(node.children.map(textContent).join(""));
-      const layoutStyle = resolveLayoutStyle("button.base", node, context);
-      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, __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, { includeBase: false }).spanKinds);
-    }
-    default:
-      return mergeVertical(node.children.map((child) => renderTerminalFrame(child, context)));
-  }
-}
-
 export function renderTerminalFrame(node: TerminalNode, context?: TerminalRenderContext): TerminalFrame {
-  if (node.type === "text") {
-    return createFrame([plainText(node.value)]);
-  }
-  return renderElementFrame(node, context);
+  return publicTerminalFrame(renderTerminalFrameInternal(node, context));
 }
 
 export function renderTerminalNode(node: TerminalNode, context?: TerminalRenderContext): string {