@valyrianjs/terminal 0.2.2 → 0.2.4

package/dist/render-internal.js

@@ -0,0 +1,1401 @@
+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, dropTerminalCells, padEndTerminalCells, plainText, sliceTerminalCells, terminalCellToStringIndex, terminalCellWidth, terminalGraphemes } from "./text.js";
+import { resolveTerminalStyle } from "./theme.js";
+function validateRenderContextDimension(name, value) {
+    if (!Number.isInteger(value) || value < 1) {
+        throw new RangeError(`Invalid render context ${name}: expected an integer >= 1`);
+    }
+    return value;
+}
+function validateRenderContext(context) {
+    if (typeof context === "undefined") {
+        return undefined;
+    }
+    return {
+        cols: validateRenderContextDimension("cols", context.cols),
+        rows: validateRenderContextDimension("rows", context.rows),
+        theme: context.theme
+    };
+}
+const VISUAL_STATE_ORDER = [
+    "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"
+];
+function numeric(value, fallback = 0) {
+    const result = Number(value);
+    return Number.isFinite(result) ? result : fallback;
+}
+function addFocusableHitbox(frame, node) {
+    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, prop) {
+    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, prop) {
+    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, prop) {
+    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, prop) {
+    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) {
+    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) {
+    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, next) {
+    return { ...base, ...next };
+}
+function styleSpan(kind, style) {
+    return typeof style === "undefined" ? { kind } : { kind, style };
+}
+const BASE_STYLE_KIND_BY_TAG = {
+    "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) {
+    return BASE_STYLE_KIND_BY_TAG[node.tag];
+}
+function nodeStates(node) {
+    const declared = Array.isArray(node.props.state) ? node.props.state : typeof node.props.state === "string" ? [node.props.state] : [];
+    const states = new Set();
+    for (const state of declared)
+        states.add(state);
+    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, node, context) {
+    return mergeStyleDefinitions(resolveTerminalStyle(baseKind, context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
+}
+function resolveNodeLayoutStyle(node, context) {
+    return mergeStyleDefinitions(resolveTerminalStyle(baseStyleKindForNode(node), context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
+}
+function decoratedControlFrame(content, style) {
+    const padding = normalizeSpacing(style?.padding, "Control padding");
+    const border = normalizeBorder(style?.border);
+    return addBorder(padFrameSides(createFrame(content), padding), border);
+}
+function fullFrameSpans(kinds, width, height) {
+    const spans = [];
+    for (const kind of kinds) {
+        for (let y = 1; y <= height; y += 1) {
+            spans.push(markFullFrameSpan({ kind, x1: 1, x2: width + 1, y }));
+        }
+    }
+    return spans;
+}
+function resolveNodeStyle(node, context, options = {}) {
+    const baseKind = options.includeBase === false ? undefined : baseStyleKindForNode(node);
+    let style = resolveTerminalStyle(baseKind, context?.theme);
+    const spanKinds = 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, padding) {
+    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(padding.top).fill(" ".repeat(contentWidth));
+    const bottomLines = new Array(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, border) {
+    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 = [];
+    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, context) {
+    const layoutStyle = resolveNodeLayoutStyle(node, context);
+    const padding = normalizeSpacing(layoutStyle?.padding ?? node.props.padding, `${node.tag} padding`);
+    const border = normalizeBorder(layoutStyle?.border);
+    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)
+    };
+}
+function addFullFrameSpans(frame, kinds) {
+    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, itemCount, context) {
+    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, itemCount) {
+    if (itemCount <= 0) {
+        return 0;
+    }
+    return Math.max(0, Math.min(itemCount - 1, index));
+}
+function listVirtualRange(node, itemCount, context) {
+    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, item, index) {
+    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) {
+    if (typeof node.props.__childrenRenderer === "function") {
+        return { type: "children", render: node.props.__childrenRenderer };
+    }
+    if (typeof node.props.renderItem === "function") {
+        return { type: "renderItem", render: node.props.renderItem };
+    }
+    return undefined;
+}
+function wrapPlainText(value, width) {
+    if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0) {
+        return [""];
+    }
+    const rows = [];
+    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, item, index, viewportIndex, activeIndex, selectedIndex, wrapWidth, context) {
+    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) {
+    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, prop, label) {
+    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, prop, label, context) {
+    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, label, context) {
+    return {
+        width: resolveLayoutDimension(node, "width", label, context),
+        height: resolveLayoutDimension(node, "height", label, context)
+    };
+}
+function contextBackedDimension(context, prop, label) {
+    if (!context) {
+        return undefined;
+    }
+    return positiveInteger(prop === "width" ? context.cols : context.rows, `${label} ${prop}`);
+}
+function resolveBlockLayoutDimensions(node, label, context, options = {}) {
+    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, prop, context) {
+    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, node, options = {}, context) {
+    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, node, 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, prop, outer, context) {
+    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, dimensions, context) {
+    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) {
+    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, inputState, padding = { 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 scrollFocusedInputLine(rendered, visibleWidth) {
+    const width = Math.max(1, Math.trunc(visibleWidth));
+    const scrollOffset = Math.max(0, rendered.cursor.x - width);
+    if (scrollOffset === 0) {
+        return rendered;
+    }
+    return {
+        line: dropTerminalCells(rendered.line, scrollOffset),
+        cursor: { x: rendered.cursor.x - scrollOffset, y: rendered.cursor.y },
+        spans: rendered.spans.map((span) => ({
+            ...span,
+            x1: span.x1 - scrollOffset,
+            x2: span.x2 - scrollOffset
+        }))
+    };
+}
+function resolveEditorDimensions(node, context) {
+    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")
+                : contextBackedDimension(context, "width", "Editor"),
+        height: typeof explicitHeight !== "undefined"
+            ? explicitHeight
+            : node.props.fill === true
+                ? fillContextDimension(context, "height", "Editor")
+                : undefined
+    };
+}
+function wrapEditorLineSegments(value, width, sourceLine) {
+    if (!Number.isFinite(width) || !Number.isInteger(width) || width <= 0) {
+        return [{ text: "", sourceLine, start: 0, end: 0 }];
+    }
+    if (value.length === 0) {
+        return [{ text: "", sourceLine, start: 0, end: 0 }];
+    }
+    const segments = [];
+    let remaining = value;
+    let offset = 0;
+    while (terminalCellWidth(remaining) > width) {
+        const slice = sliceTerminalCells(remaining, width);
+        if (slice.length === 0) {
+            const [firstGrapheme = ""] = terminalGraphemes(remaining);
+            segments.push({ text: firstGrapheme, sourceLine, start: offset, end: offset + firstGrapheme.length });
+            remaining = remaining.slice(firstGrapheme.length);
+            offset += firstGrapheme.length;
+            continue;
+        }
+        const breakAt = slice.lastIndexOf(" ");
+        const useWordBreak = breakAt > 0 && breakAt >= Math.floor(width * 0.6);
+        const segmentText = useWordBreak ? remaining.slice(0, breakAt) : slice;
+        segments.push({ text: segmentText, sourceLine, start: offset, end: offset + segmentText.length });
+        const consumed = useWordBreak ? breakAt + 1 : slice.length;
+        remaining = remaining.slice(consumed);
+        offset += consumed;
+    }
+    segments.push({ text: remaining, sourceLine, start: offset, end: offset + remaining.length });
+    return segments;
+}
+function wrapEditorLines(lines, width) {
+    return lines.flatMap((line, sourceLine) => wrapEditorLineSegments(line, width, sourceLine));
+}
+function insertTrailingEditorCursorSegment(segments, line, column, contentWidth) {
+    if (typeof contentWidth !== "number") {
+        return segments;
+    }
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        if (segment.sourceLine !== line || column !== segment.end || segment.start === segment.end) {
+            continue;
+        }
+        const nextSegment = segments[index + 1];
+        if (nextSegment && nextSegment.sourceLine === line && nextSegment.start === column) {
+            return segments;
+        }
+        if (terminalCellWidth(segment.text) < contentWidth) {
+            return segments;
+        }
+        const cursorSegment = { text: "", sourceLine: line, start: column, end: column };
+        return [...segments.slice(0, index + 1), cursorSegment, ...segments.slice(index + 1)];
+    }
+    return segments;
+}
+function visualEditorCursor(segments, line, column) {
+    for (let index = 0; index < segments.length; index += 1) {
+        const segment = segments[index];
+        if (segment.sourceLine !== line) {
+            continue;
+        }
+        const nextSegment = segments[index + 1];
+        if (column === segment.end && nextSegment && nextSegment.sourceLine === line && nextSegment.start === column) {
+            return { index: index + 1, column: 0 };
+        }
+        const containsCursor = column >= segment.start && column <= segment.end;
+        const isTrailingEmpty = segment.start === segment.end && column === segment.start;
+        if (containsCursor || isTrailingEmpty) {
+            return { index, column: Math.max(0, Math.min(column - segment.start, segment.text.length)) };
+        }
+    }
+    return { index: Math.max(0, segments.length - 1), column: 0 };
+}
+function renderEditorFrame(node, context) {
+    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 dimensions = resolveEditorDimensions(node, context);
+    const contentWidth = typeof dimensions.width === "number" ? Math.max(1, dimensions.width - 2) : undefined;
+    const baseSegments = typeof contentWidth === "number" ? wrapEditorLines(state.lines, contentWidth) : state.lines.map((line, sourceLine) => ({ text: line, sourceLine, start: 0, end: line.length }));
+    const segments = node.props.__focused ? insertTrailingEditorCursorSegment(baseSegments, focusedLine, focusedColumn, contentWidth) : baseSegments;
+    const focusedVisualCursor = visualEditorCursor(segments, focusedLine, focusedColumn);
+    const lines = segments.map((segment, index) => {
+        if (!node.props.__focused || index !== focusedVisualCursor.index) {
+            return `  ${segment.text}`;
+        }
+        return `  ${segment.text.slice(0, focusedVisualCursor.column)}|${segment.text.slice(focusedVisualCursor.column)}`;
+    });
+    const cursor = node.props.__focused ? { x: 3 + cursorCellOffset(segments[focusedVisualCursor.index]?.text ?? "", focusedVisualCursor.column), y: focusedVisualCursor.index + 1 } : null;
+    const spans = node.props.__focused ? [{ kind: "editor.focus", x1: 1, x2: Math.max(2, terminalCellWidth(lines[focusedVisualCursor.index] ?? "") + 1), y: focusedVisualCursor.index + 1 }] : [];
+    const frame = createFrame(lines, [], cursor, spans);
+    const scrollOffset = node.props.__focused && typeof dimensions.height !== "undefined"
+        ? Math.min(Math.max(0, focusedVisualCursor.index - 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 publicRenderContext(context) {
+    const publicContext = { cols: context.cols, rows: context.rows };
+    if (typeof context.theme !== "undefined") {
+        publicContext.theme = context.theme;
+    }
+    return publicContext;
+}
+function notifyLayoutContextProbe(node, context) {
+    if (context && typeof node.props.__layoutContextProbe === "function") {
+        node.props.__layoutContextProbe(publicRenderContext(context));
+    }
+}
+function renderTableFrame(node, context) {
+    const rowNodes = node.children.filter((child) => 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(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 = [];
+    const hitboxes = [];
+    const spans = [];
+    let cursor = null;
+    let yOffset = 0;
+    for (const row of rowFrames) {
+        const cells = new Array(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, width, height) {
+    const breakpoints = Array.isArray(node.props.breakpoints) ? node.props.breakpoints : [];
+    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, index) {
+    if (typeof value === "number") {
+        return { type: "absolute", 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", 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", value: amount };
+    }
+    throw new RangeError(`Invalid Split sizes[${index}]: ${value}`);
+}
+function allocateDecimals(ideals, total) {
+    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, childCount, available) {
+    if (!Array.isArray(sizesInput)) {
+        const base = Math.floor(available / childCount);
+        const remainder = available % childCount;
+        const sizes = new Array(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(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) {
+    return node.type === "element" && (node.tag === "terminal-pane" || node.tag === "terminal-box" || node.tag === "terminal-view" || node.tag === "terminal-scroll");
+}
+function renderSplitChildFrame(child, cellWidth, cellHeight, context) {
+    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, context) {
+    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(height).fill(" ".repeat(width)));
+        return node.props.id && isFocusable(node) ? addFocusableHitbox(frame, node) : 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 = [];
+    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(height).fill(" ".repeat(width)));
+    const constrained = constrainFrame(frame, { width, height });
+    return node.props.id && isFocusable(node) ? addFocusableHitbox(constrained, node) : constrained;
+}
+function hasDirectFixedChildren(node) {
+    return node.children.some((child) => child.type === "element" && child.tag === "terminal-fixed");
+}
+function hasDirectOverlayChildren(node) {
+    return node.children.some((child) => child.type === "element" && child.tag === "terminal-overlay");
+}
+function splitOverlayChildren(children) {
+    const baseChildren = [];
+    const overlays = [];
+    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, props, context) {
+    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, width, height) {
+    return constrainFrame(renderBodyFrame(node.children, {}, { cols: width, rows: height }), { width, height, expandFullFrameSpans: true });
+}
+function renderFixedCompositionFrame(node, width, height) {
+    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 = { top: [], bottom: [], left: [], right: [] };
+    const bodyChildren = [];
+    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 = [];
+    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, context) {
+    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, axisSize, label) {
+    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, width, height) {
+    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;
+        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, width, height) {
+    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 resolveOverlayBackdropSpans(node, width, height, context) {
+    const backdrop = node.props.backdrop;
+    if (backdrop === false || typeof backdrop === "undefined") {
+        return [];
+    }
+    const styleValue = backdrop === true ? "overlay.backdrop" : backdrop;
+    const resolvedStyle = resolveTerminalStyle(styleValue, context?.theme);
+    const span = typeof styleValue === "string" ? styleSpan(styleValue) : styleSpan("#style", resolvedStyle);
+    return fullFrameSpans([span.kind], width, height).map((fullSpan) => (typeof span.style === "undefined" ? fullSpan : { ...fullSpan, style: span.style }));
+}
+function renderOverlayChildFrame(node, width, height, context) {
+    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);
+    }
+    return { frame, geometry };
+}
+function orderedDirectOverlays(overlays) {
+    return overlays.map((overlay, sourceOrder) => ({ overlay, sourceOrder })).sort((a, b) => a.sourceOrder - b.sourceOrder).map(({ overlay }) => overlay);
+}
+function applyDirectOverlays(base, overlays, context) {
+    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,
+            backdropSpans: resolveOverlayBackdropSpans(overlay, width, height, context)
+        });
+    }
+    return frame;
+}
+function renderScreenFrame(node, context) {
+    const { baseChildren, overlays } = splitOverlayChildren(node.children);
+    let base;
+    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 = [];
+        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, context) {
+    const { baseChildren, overlays } = splitOverlayChildren(node.children);
+    const dimensions = resolveBlockLayoutDimensions(node, "Pane", context, { exactHeightFromContext: hasDirectFixedChildren(node) });
+    let frame;
+    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, context) {
+    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, context) {
+    const dimensions = resolveLayoutDimensions(node, "LogView", context);
+    const entries = Array.isArray(node.props.entries) ? node.props.entries : [];
+    const lines = [];
+    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);
+    }
+    return frame;
+}
+function renderSeparatedRowFrame(frames, 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(height).fill("");
+    const hitboxes = [];
+    const spans = [];
+    let 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, context) {
+    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;
+            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) => 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 = [];
+            const itemIndexes = [];
+            const childHitboxes = [];
+            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 = [];
+            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 = [];
+            const itemHitboxes = [];
+            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 dimensions = {
+                width: positiveDimension(node.props.width, "width") ?? contextBackedDimension(context, "width", "Input")
+            };
+            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 constrained = typeof dimensions.width === "number" ? constrainFrame(decorated, { width: dimensions.width, expandFullFrameSpans: true }) : decorated;
+                const width = Math.max(1, getFrameWidth(constrained));
+                const height = Math.max(1, getFrameHeight(constrained));
+                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(constrained.lines, hitboxes, constrained.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
+            }
+            const rendered = renderInputLine(stringValue, node.props.__inputState || { cursor: stringValue.length, anchor: stringValue.length }, inputPadding);
+            const visibleInputWidth = typeof dimensions.width === "number"
+                ? Math.max(1, dimensions.width - (inputBorder.left ? 1 : 0) - (inputBorder.right ? 1 : 0))
+                : getFrameWidth(createFrame([rendered.line]));
+            const visibleRendered = scrollFocusedInputLine(rendered, visibleInputWidth);
+            const decorated = addBorder(createFrame([visibleRendered.line], [], visibleRendered.cursor, visibleRendered.spans), inputBorder);
+            const constrained = typeof dimensions.width === "number" ? constrainFrame(decorated, { width: dimensions.width, expandFullFrameSpans: true }) : decorated;
+            const width = Math.max(1, getFrameWidth(constrained));
+            const height = Math.max(1, getFrameHeight(constrained));
+            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), ...constrained.spans];
+            return addFullFrameSpans(createFrame(constrained.lines, hitboxes, constrained.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, context) {
+    if (node.type === "text") {
+        return createFrame([plainText(node.value)]);
+    }
+    return renderElementFrame(node, context);
+}
+export function renderTerminalNode(node, context) {
+    return renderTerminalFrame(node, context).lines.join("\n");
+}
+export function renderTerminal(input, context) {
+    const renderContext = validateRenderContext(context);
+    return renderValyrianTerminal(input)
+        .map((node) => renderTerminalNode(node, renderContext))
+        .filter(Boolean)
+        .join("\n")
+        .trimEnd();
+}
+//# sourceMappingURL=render-internal.js.map