@valyrianjs/terminal 0.1.2 → 0.2.1

package/dist/render.js

@@ -5,6 +5,22 @@ import { isFocusable, textContent } from "./tree.js";
 import { renderValyrianTerminal } from "./runtime.js";
 import { plainText } 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"
 ];
@@ -86,6 +102,18 @@ function mergeStyleDefinitions(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();
@@ -109,7 +137,7 @@ function resolveLayoutStyle(baseKind, node, context) {
     return mergeStyleDefinitions(resolveTerminalStyle(baseKind, context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
 }
 function resolveNodeLayoutStyle(node, context) {
-    return resolveTerminalStyle(node.props.style, context?.theme);
+    return mergeStyleDefinitions(resolveTerminalStyle(baseStyleKindForNode(node), context?.theme), resolveTerminalStyle(node.props.style, context?.theme));
 }
 function decoratedControlFrame(content, style) {
     const padding = normalizeSpacing(style?.padding, "Control padding");
@@ -125,11 +153,18 @@ function fullFrameSpans(kinds, width, height) {
     }
     return spans;
 }
-function resolveNodeStyle(node, context) {
-    let style = resolveTerminalStyle(node.props.style, context?.theme);
-    const spanKinds = typeof node.props.style === "string"
-        ? [styleSpan(node.props.style)]
-        : style ? [styleSpan("#style", style)] : [];
+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) {
@@ -196,21 +231,104 @@ function addFullFrameSpans(frame, kinds) {
     }
     return createFrame(frame.lines, frame.hitboxes, frame.cursor, spans);
 }
-function listVirtualRange(node, itemCount, selectedIndex, context) {
+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 };
+        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 viewportSourceRows = context?.rows ?? (itemCount || 1);
-    const viewportRows = Math.max(1, Math.min(itemCount || 1, positiveInteger(viewportSourceRows, "List viewport height")));
-    const selected = Math.max(0, Math.min(itemCount - 1, selectedIndex));
-    const visibleStart = Math.max(0, Math.min(selected, selected - viewportRows + 1));
+    const viewportRows = listViewportRows(node, itemCount, context);
+    const maxOffset = Math.max(0, itemCount - viewportRows);
+    let visibleStart = Math.max(0, Math.min(maxOffset, nonNegativeInteger(node.props.__scrollOffset, "List viewport offset")));
     const start = Math.max(0, visibleStart - overscan);
     const end = Math.min(itemCount, visibleStart + viewportRows + overscan);
-    return { start, end };
+    return { start, end, visibleStart, viewportRows };
+}
+function listItemKey(node, 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 (remaining.length > width) {
+            const slice = remaining.slice(0, width);
+            const breakAt = slice.lastIndexOf(" ");
+            if (breakAt > 0 && breakAt >= Math.floor(width * 0.6)) {
+                rows.push(remaining.slice(0, breakAt));
+                remaining = remaining.slice(breakAt + 1);
+            }
+            else {
+                rows.push(slice);
+                remaining = remaining.slice(width);
+            }
+        }
+        rows.push(remaining);
+    }
+    return rows.length ? rows : [""];
+}
+function renderListItemFrame(node, 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") {
@@ -663,27 +781,73 @@ function renderStandaloneFixedFrame(node, context) {
         ? constrainFrame(frame, { height: size })
         : constrainFrame(frame, { width: size });
 }
-function overlayGeometry(node) {
+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: positiveInteger(node.props.x, "Overlay x"),
-        y: positiveInteger(node.props.y, "Overlay y"),
-        width: positiveInteger(node.props.width, "Overlay width"),
-        height: positiveInteger(node.props.height, "Overlay height")
+        x: margin.x + 1,
+        y: margin.y + 1,
+        width: overlayWidth,
+        height: overlayHeight
     };
 }
-function renderOverlayChildFrame(node, context) {
-    const geometry = overlayGeometry(node);
-    let frame = constrainFrame(renderBodyFrame(node.children, {}, { cols: geometry.width, rows: geometry.height }), { width: geometry.width, height: geometry.height });
+function renderOverlayChildFrame(node, 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 });
     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;
-    for (const overlay of overlays) {
-        const rendered = renderOverlayChildFrame(overlay, context);
+    const width = Math.max(1, getFrameWidth(base));
+    const height = Math.max(1, getFrameHeight(base));
+    for (const overlay of orderedDirectOverlays(overlays)) {
+        const rendered = renderOverlayChildFrame(overlay, width, height, context);
         frame = overlayFrame(frame, rendered.frame, rendered.geometry);
     }
     return frame;
@@ -741,8 +905,11 @@ function renderPaneFrame(node, context) {
     }
     return overlays.length ? applyDirectOverlays(frame, overlays, context) : frame;
 }
-function renderStandaloneOverlayFrame(node) {
-    const rendered = renderOverlayChildFrame(node);
+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) {
@@ -882,46 +1049,117 @@ function renderElementFrame(node, context) {
         case "terminal-fixed":
             return renderStandaloneFixedFrame(node, context);
         case "terminal-overlay":
-            return renderStandaloneOverlayFrame(node);
+            return renderStandaloneOverlayFrame(node, context);
         case "terminal-log-view":
             return renderLogViewFrame(node, context);
         case "terminal-list": {
             const items = Array.isArray(node.props.items) ? node.props.items : [];
-            const selectedIndex = numeric(node.props.__selectedIndex, 0);
+            const activeIndex = clampListIndex(numeric(node.props.__activeIndex ?? node.props.__selectedIndex, 0), items.length);
+            const selectedIndex = typeof node.props.__selectedIndex === "number" ? clampListIndex(Number(node.props.__selectedIndex), items.length) : null;
             const hoveredIndex = typeof node.props.__hoveredIndex === "number" ? Number(node.props.__hoveredIndex) : -1;
-            const range = listVirtualRange(node, items.length, selectedIndex, context);
-            const lines = [];
-            for (let index = range.start; index < range.end; index += 1) {
-                const item = items[index];
-                const label = typeof node.props.renderItem === "function" ? plainText(node.props.renderItem(item, index)) : plainText(item);
-                lines.push(label);
-            }
-            const visibleLines = lines.length ? lines : [""];
+            const range = listVirtualRange(node, items.length, context);
             const layoutStyle = resolveLayoutStyle("list.base", node, context);
             const padding = normalizeSpacing(layoutStyle.padding, "List padding");
             const border = normalizeBorder(layoutStyle.border);
-            const decorated = addBorder(padFrameSides(createFrame(visibleLines), padding), border);
+            const horizontalDecoration = padding.left + padding.right + (border.left ? 1 : 0) + (border.right ? 1 : 0);
+            const wrapWidth = typeof context?.cols === "number" ? Math.max(1, context.cols - horizontalDecoration) : 1;
+            const visibleLines = [];
+            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 < visibleLines.length; index += 1) {
-                const sourceIndex = range.start + index;
+            for (let index = 0; index < frameLines.length; index += 1) {
+                const sourceIndex = frameItemIndexes[index];
                 const y = itemY + index;
                 spans.push({ kind: "list.base", x1: 1, x2: width + 1, y });
-                if (sourceIndex === selectedIndex) {
+                if (selectedIndex !== null && selectedIndex !== activeIndex && sourceIndex === selectedIndex) {
+                    spans.push({ kind: "list.selected", x1: 1, x2: width + 1, y });
+                }
+                if (sourceIndex === activeIndex) {
                     spans.push({ kind: "list.current", x1: 1, x2: width + 1, y });
                 }
                 if (sourceIndex === hoveredIndex) {
                     spans.push({ kind: "list.hover", x1: 1, x2: width + 1, y });
                 }
             }
-            const frame = createFrame(decorated.lines, [], decorated.cursor, spans);
-            const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context).spanKinds);
-            if (!node.props.id) {
-                return styled;
+            const listHitboxes = [];
+            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;
+                }
             }
-            return createFrame(styled.lines, [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, itemOffset: range.start }], styled.cursor, styled.spans);
+            const frame = createFrame(decorated.lines, [...listHitboxes, ...itemHitboxes, ...decorated.hitboxes], decorated.cursor, spans);
+            const styled = addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
+            return typeof frameHeight === "number" ? constrainFrame(styled, { height: frameHeight }) : styled;
         }
         case "terminal-table":
             return renderTableFrame(node, context);
@@ -938,7 +1176,7 @@ function renderElementFrame(node, context) {
         case "terminal-text": {
             const value = typeof node.props.value !== "undefined" ? plainText(node.props.value) : plainText(node.children.map(textContent).join(""));
             const frame = createFrame(value.split("\n"));
-            return addFullFrameSpans(frame, resolveNodeStyle(node, context).spanKinds);
+            return addFullFrameSpans(frame, resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
         }
         case "terminal-input": {
             const value = typeof node.props.value !== "undefined" ? node.props.value : node.props.placeholder || "";
@@ -957,7 +1195,7 @@ function renderElementFrame(node, context) {
                 const height = Math.max(1, getFrameHeight(decorated));
                 const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
                 const spans = fullFrameSpans(["input.base"], width, height);
-                return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+                return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
             }
             const rendered = renderInputLine(stringValue, node.props.__inputState || { cursor: stringValue.length, anchor: stringValue.length }, inputPadding);
             const decorated = addBorder(createFrame([rendered.line], [], rendered.cursor, rendered.spans), inputBorder);
@@ -965,7 +1203,7 @@ function renderElementFrame(node, context) {
             const height = Math.max(1, getFrameHeight(decorated));
             const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, textStartX, textLength: stringValue.length }] : [];
             const spans = [...fullFrameSpans(["input.base", "input.focus"], width, height), ...decorated.spans];
-            return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+            return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
         }
         case "terminal-editor":
             return addFullFrameSpans(renderEditorFrame(node), resolveNodeStyle(node, context).spanKinds);
@@ -975,10 +1213,10 @@ function renderElementFrame(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 }] : [];
+            const hitboxes = node.props.id ? [{ id: node.props.id, tag: node.tag, x1: 1, x2: width, y1: 1, y2: height, __pressHandler: typeof node.props.onpress === "function" ? node.props.onpress : undefined }] : [];
             const kinds = ["button.base", ...nodeStates(node).map((state) => `button.${state}`)];
             const spans = fullFrameSpans(kinds, width, height);
-            return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context).spanKinds);
+            return addFullFrameSpans(createFrame(decorated.lines, hitboxes, decorated.cursor, spans), resolveNodeStyle(node, context, { includeBase: false }).spanKinds);
         }
         default:
             return mergeVertical(node.children.map((child) => renderTerminalFrame(child, context)));
@@ -993,9 +1231,10 @@ export function renderTerminalFrame(node, context) {
 export function renderTerminalNode(node, context) {
     return renderTerminalFrame(node, context).lines.join("\n");
 }
-export function renderTerminal(input) {
+export function renderTerminal(input, context) {
+    const renderContext = validateRenderContext(context);
     return renderValyrianTerminal(input)
-        .map((node) => renderTerminalNode(node))
+        .map((node) => renderTerminalNode(node, renderContext))
         .filter(Boolean)
         .join("\n")
         .trimEnd();