silvery 0.17.3 → 0.18.0

package/dist/{pipeline-BmfaZb1O.mjs → render-string-DVfgc8xr.mjs}

@@ -1,9 +1,12 @@
-import { F as outputPhase, Ft as createMutableCell, G as getActiveLineHeight, It as createTextFrame, J as graphemeWidth, Lt as init_buffer, Ot as DEFAULT_BG, R as canBreakAnywhere, U as displayWidthAnsi, W as ensureEmojiPresentation, Y as hasAnsi, _ as isCurrentEpoch, c as clearDirtyTracking, ct as runWithMeasurer, d as hasScrollDirty, dt as sliceByWidth, f as measureStats, ft as sliceByWidthFromEnd, g as isAnyDirty, h as getRenderEpoch, ht as splitGraphemesAnsiAware, kt as TerminalBuffer, l as clearLayoutDirtyTracking, m as advanceRenderEpoch, mt as splitGraphemes, nt as isWordBoundary, p as collectPlainText, st as parseAnsiText, u as hasLayoutDirty, v as isDirty, yt as wrapText } from "./reconciler-B-NaZvbO.mjs";
-import { C as resolveThemeColor } from "./src-9B5k0JmY.mjs";
-import { D as init_state, E as getActiveTheme, O as popContextTheme, k as pushContextTheme, x as init_resolve } from "./src-C9f3hiVG.mjs";
-import { r as getLayoutEngine } from "./layout-engine-B3dsnVLU.mjs";
-import { t as rectEqual } from "./types-Bhj5QkIQ.mjs";
+import { c as signal, i as syncRectSignals, o as computed, t as rectEqual } from "./types-e4dpfbSa.mjs";
+import { c as TermContext, o as StderrContext, s as StdoutContext } from "./context-BjWgrikx.mjs";
+import { At as bufferToText, Dt as TerminalBuffer, Et as DEFAULT_BG, Ft as createTextFrame, H as ensureEmojiPresentation, I as canBreakAnywhere, It as init_buffer, K as graphemeWidth, Lt as isDefaultBg, Ot as ansi256ToRgb, Pt as createMutableCell, U as getActiveLineHeight, V as displayWidthAnsi, _t as wrapText, a as hostConfig, at as parseAnsiText, b as createTerm, c as clearDirtyTracking, d as collectPlainText, et as isWordBoundary, f as advanceRenderEpoch, ft as splitGraphemes, g as isDirty, h as isCurrentEpoch, kt as bufferToStyledText, l as hasScrollDirty, lt as sliceByWidth, m as isAnyDirty, ot as runWithMeasurer, p as getRenderEpoch, pt as splitGraphemesAnsiAware, q as hasAnsi, r as getContainerRoot, t as createContainer, u as measureStats, ut as sliceByWidthFromEnd } from "./reconciler-B8uxQxaU.mjs";
+import { T as resolveThemeColor, k as blend, t as init_src, x as monoAttrsForColorString } from "./src-D_BS-as7.mjs";
+import { A as pushContextTheme, D as getActiveTheme, E as getActiveColorLevel, O as init_state, k as popContextTheme, t as init_src$1, x as init_resolve } from "./src-C0sOQW-t.mjs";
+import { i as isLayoutEngineInitialized, r as getLayoutEngine } from "./layout-engine-Dr3cY5U4.mjs";
+import React, { act } from "react";
 import { createLogger } from "loggily";
+import Reconciler from "react-reconciler";
 //#region packages/ag-term/src/pipeline/prepared-text.ts
 const MAX_FORMAT_ENTRIES = 4;
 /** Content-affecting flags that invalidate plain text. */
@@ -409,26 +412,29 @@ function measurePhase(root, ctx) {
 	traverseTree$1(root, (node) => {
 		if (!node.layoutNode) return;
 		const props = node.props;
-		const isFitContent = props.width === "fit-content" || props.height === "fit-content";
 		const isSnugContent = props.width === "snug-content";
-		if (isFitContent || isSnugContent) {
+		const isHeightFitContent = props.height === "fit-content";
+		if (isSnugContent || isHeightFitContent) {
 			let availableWidth;
-			const widthIsFixed = typeof props.width === "number";
-			if (props.height === "fit-content" && widthIsFixed) {
+			let definiteUpperWidth = typeof props.width === "number" && isHeightFitContent ? props.width : typeof props.maxWidth === "number" ? props.maxWidth : void 0;
+			if (definiteUpperWidth === void 0) definiteUpperWidth = findAncestorDefiniteWidth(node);
+			if (definiteUpperWidth !== void 0) {
 				const padding = getPadding(props);
-				availableWidth = props.width - padding.left - padding.right;
+				availableWidth = definiteUpperWidth - padding.left - padding.right;
 				if (props.borderStyle) {
 					const border = getBorderSize(props);
 					availableWidth -= border.left + border.right;
 				}
 				if (availableWidth < 1) availableWidth = 1;
 			}
-			const intrinsicSize = measureIntrinsicSize(node, ctx, availableWidth);
 			if (isSnugContent) {
-				const shrunkWidth = computeSnugContentWidth(node, intrinsicSize.width, ctx);
-				node.layoutNode.setWidth(shrunkWidth);
-			} else if (props.width === "fit-content") node.layoutNode.setWidth(intrinsicSize.width);
-			if (props.height === "fit-content") node.layoutNode.setHeight(intrinsicSize.height);
+				const shrunkWidth = computeSnugContentWidth(node, measureIntrinsicSize(node, ctx, availableWidth).width, ctx);
+				node.layoutNode.setMaxWidth(shrunkWidth);
+			}
+			if (isHeightFitContent) {
+				const intrinsicSize = measureIntrinsicSize(node, ctx, availableWidth);
+				node.layoutNode.setHeight(intrinsicSize.height);
+			}
 		}
 	});
 }
@@ -533,6 +539,39 @@ function computeSnugContentWidth(node, fitContentWidth, ctx) {
 	return shrinkwrapWidth(analysis, contentWidth) + overhead;
 }
 /**
+* Walk up the tree from a node to find the nearest ancestor with a definite
+* width (a fixed number, not "fit-content" or "snug-content"). Returns the
+* ancestor's inner content width (after subtracting its own padding and border).
+* Returns undefined if no definite-width ancestor is found.
+*/
+function findAncestorDefiniteWidth(node) {
+	let current = node.parent;
+	while (current) {
+		const p = current.props;
+		if (typeof p.width === "number") {
+			let inner = p.width;
+			const padding = getPadding(p);
+			inner -= padding.left + padding.right;
+			if (p.borderStyle) {
+				const border = getBorderSize(p);
+				inner -= border.left + border.right;
+			}
+			return inner > 0 ? inner : 1;
+		}
+		if (typeof p.maxWidth === "number") {
+			let inner = p.maxWidth;
+			const padding = getPadding(p);
+			inner -= padding.left + padding.right;
+			if (p.borderStyle) {
+				const border = getBorderSize(p);
+				inner -= border.left + border.right;
+			}
+			return inner > 0 ? inner : 1;
+		}
+		current = current.parent;
+	}
+}
+/**
 * Traverse tree in depth-first order.
 */
 function traverseTree$1(node, callback) {
@@ -554,7 +593,7 @@ function getTextWidth$1(text, ctx) {
 *
 * Run Yoga layout calculation and propagate dimensions to all nodes.
 */
-const log$3 = createLogger("silvery:layout");
+const log$2 = createLogger("silvery:layout");
 /**
 * Run Yoga layout calculation and propagate dimensions to all nodes.
 *
@@ -565,15 +604,17 @@ const log$3 = createLogger("silvery:layout");
 function layoutPhase(root, width, height) {
 	const prevLayout = root.boxRect;
 	const dimensionsChanged = prevLayout && (prevLayout.width !== width || prevLayout.height !== height);
-	if (!dimensionsChanged && !hasLayoutDirty()) return;
-	clearLayoutDirtyTracking();
+	if (!dimensionsChanged && !root.layoutNode?.isDirty()) {
+		if (isDirty(root.dirtyBits, root.dirtyEpoch, 16)) propagateCascadeInputs(root);
+		return;
+	}
 	if (root.layoutNode) {
 		const nodeCount = countNodes(root);
 		measureStats.reset();
 		const t0 = Date.now();
 		root.layoutNode.calculateLayout(width, height);
 		const elapsed = Date.now() - t0;
-		log$3.debug?.(`calculateLayout: ${elapsed}ms (${nodeCount} nodes) measure: calls=${measureStats.calls} hits=${measureStats.cacheHits} collects=${measureStats.textCollects} displayWidth=${measureStats.displayWidthCalls}`);
+		log$2.debug?.(`calculateLayout: ${elapsed}ms (${nodeCount} nodes) measure: calls=${measureStats.calls} hits=${measureStats.cacheHits} collects=${measureStats.textCollects} displayWidth=${measureStats.displayWidthCalls}`);
 	}
 	propagateLayout(root, 0, 0, !dimensionsChanged);
 }
@@ -599,8 +640,8 @@ function countNodes(node) {
 *   subtrees whose inputs didn't change
 * - If the parent's rect matches, all descendants' rects also match
 *   (Flexily computes absolute positions from parent dimensions)
-* - prevLayout, layoutDirty (already false), and layoutChangedThisFrame
-*   (stale epoch, won't match current) all retain correct values
+* - prevLayout and layoutChangedThisFrame (stale epoch, won't match
+*   current) all retain correct values
 *
 * @param node The node to process
 * @param parentX Absolute X position of parent
@@ -616,7 +657,6 @@ function propagateLayout(node, parentX, parentY, incrementalSkip) {
 			width: 0,
 			height: 0
 		};
-		node.layoutDirty = false;
 		for (const child of node.children) propagateLayout(child, parentX, parentY, incrementalSkip);
 		return;
 	}
@@ -626,12 +666,11 @@ function propagateLayout(node, parentX, parentY, incrementalSkip) {
 		width: node.layoutNode.getComputedWidth(),
 		height: node.layoutNode.getComputedHeight()
 	};
-	if (incrementalSkip && node.boxRect && !node.layoutDirty && !isDirty(node.dirtyBits, node.dirtyEpoch, 16) && !isDirty(node.dirtyBits, node.dirtyEpoch, 8)) {
+	if (incrementalSkip && node.boxRect && !isDirty(node.dirtyBits, node.dirtyEpoch, 16) && !isDirty(node.dirtyBits, node.dirtyEpoch, 8)) {
 		if (rect.x === node.boxRect.x && rect.y === node.boxRect.y && rect.width === node.boxRect.width && rect.height === node.boxRect.height) return;
 	}
 	node.prevLayout = node.boxRect;
 	node.boxRect = rect;
-	node.layoutDirty = false;
 	node.layoutChangedThisFrame = !!(node.prevLayout && !rectEqual(node.prevLayout, node.boxRect)) ? getRenderEpoch() : -1;
 	if (process?.env?.SILVERY_STRICT && isCurrentEpoch(node.layoutChangedThisFrame)) {
 		if (rectEqual(node.prevLayout, node.boxRect)) {
@@ -665,6 +704,34 @@ function propagateLayout(node, parentX, parentY, incrementalSkip) {
 	} else if (node.dirtyEpoch === getRenderEpoch()) node.dirtyBits &= -97;
 }
 /**
+* Lightweight cascade input caching when the layout phase skips.
+*
+* When no layout nodes are dirty and dimensions haven't changed,
+* `layoutPhase` returns early and `propagateLayout` never runs.
+* But structural changes (absolute child mount/unmount, descendant overflow)
+* still need cascade input bits (ABS_CHILD_BIT, DESC_OVERFLOW_BIT) to be
+* computed for the render phase.
+*
+* This traversal follows only subtreeDirty paths (O(changed) not O(N))
+* and computes the same cascade inputs as propagateLayout's caching block.
+* No layout changes, no prevLayout updates, no layoutChangedThisFrame.
+*/
+function propagateCascadeInputs(node) {
+	if (!isDirty(node.dirtyBits, node.dirtyEpoch, 16)) return;
+	if (!node.children || node.children.length === 0) return;
+	for (const child of node.children) if (isDirty(child.dirtyBits, child.dirtyEpoch, 16)) propagateCascadeInputs(child);
+	const epoch = getRenderEpoch();
+	const absChild = _hasAbsoluteChildMutated(node.children);
+	const descOverflow = node.boxRect ? _hasDescendantOverflowChanged(node, node.boxRect) : false;
+	let bits = node.dirtyBits;
+	if (absChild) bits |= 32;
+	else bits &= -33;
+	if (descOverflow) bits |= 64;
+	else bits &= -65;
+	node.dirtyBits = bits;
+	node.dirtyEpoch = epoch;
+}
+/**
 * Check if any direct child is position="absolute" and had structural changes.
 */
 function _hasAbsoluteChildMutated(children) {
@@ -702,7 +769,7 @@ function _checkDescendantOverflow(children, nodeLeft, nodeTop, nodeRight, nodeBo
 /**
 * Notify all layout subscribers of dimension changes.
 *
-* Called from executeRender AFTER scrollrectPhase completes,
+* Called by the pipeline AFTER scrollrectPhase completes,
 * so useScrollRect can read correct screen positions.
 *
 * Notifies when EITHER boxRect, scrollRect, or screenRect changed.
@@ -712,13 +779,64 @@ function _checkDescendantOverflow(children, nodeLeft, nodeTop, nodeRight, nodeBo
 * offset changes even when scrollRect stays the same.
 */
 function notifyLayoutSubscribers(node) {
-	const contentChanged = !rectEqual(node.prevLayout, node.boxRect);
-	const screenChanged = !rectEqual(node.prevScrollRect, node.scrollRect);
-	const renderChanged = !rectEqual(node.prevScreenRect, node.screenRect);
-	if (contentChanged || screenChanged || renderChanged) for (const subscriber of node.layoutSubscribers) subscriber();
+	rectEqual(node.prevLayout, node.boxRect);
+	rectEqual(node.prevScrollRect, node.scrollRect);
+	rectEqual(node.prevScreenRect, node.screenRect);
+	syncRectSignals(node);
 	for (const child of node.children) notifyLayoutSubscribers(child);
 }
 /**
+* Verify that no child's boxRect.width exceeds its parent's inner content width.
+*
+* This catches fit-content/snug-content bugs at the source — any measure-phase
+* or correction-pass error fires immediately.
+*
+* - SILVERY_STRICT=1: console.warn on violation
+* - SILVERY_STRICT=2: throw on violation
+*
+* Exceptions:
+* - Parent has overflow: "scroll" or "hidden" (overflow is allowed)
+* - Child has position: "absolute" (absolute nodes can overflow)
+*/
+function strictLayoutOverflowCheck(root) {
+	const strict = process?.env?.SILVERY_STRICT;
+	if (!strict) return;
+	const shouldThrow = strict === "2";
+	function walk(node) {
+		for (const child of node.children) {
+			if (child.boxRect && node.boxRect) {
+				const childProps = child.props;
+				if (childProps.position === "absolute") {
+					walk(child);
+					continue;
+				}
+				const parentProps = node.props;
+				if (parentProps.overflow === "scroll" || parentProps.overflow === "hidden") {
+					walk(child);
+					continue;
+				}
+				const border = parentProps.borderStyle ? getBorderSize(parentProps) : {
+					top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0
+				};
+				const padding = getPadding(parentProps);
+				const parentInnerWidth = node.boxRect.width - padding.left - padding.right - border.left - border.right;
+				if (child.boxRect.width > parentInnerWidth) {
+					const childId = childProps.id ?? child.type;
+					const parentId = parentProps.id ?? node.type;
+					const msg = `[SILVERY_STRICT] Layout overflow: child "${childId}" width ${child.boxRect.width} exceeds parent "${parentId}" inner width ${parentInnerWidth} (parent box: ${node.boxRect.width}, border: ${border.left}+${border.right}, padding: ${padding.left}+${padding.right})`;
+					if (shouldThrow) throw new Error(msg);
+					else console.warn(msg);
+				}
+			}
+			walk(child);
+		}
+	}
+	walk(root);
+}
+/**
 * Calculate scroll state for all overflow='scroll' containers.
 *
 * This phase runs after layout to determine which children are visible
@@ -1095,6 +1213,7 @@ function detectPipelineFeatures(root) {
 init_buffer();
 init_state();
 init_resolve();
+init_src();
 const namedColors = {
 	black: 0,
 	red: 1,
@@ -1132,7 +1251,7 @@ function blendColors(c1, c2, t) {
 * Supports: mix(c1,c2,amount), $token (theme), named colors, hex (#rgb, #rrggbb), rgb(r,g,b)
 */
 function parseColor(color) {
-	if (color === "inherit") return null;
+	if (color === "inherit" || color === "currentColor") return null;
 	if (color === "$default") return DEFAULT_BG;
 	if (color.startsWith("mix(") && color.endsWith(")")) {
 		const inner = color.slice(4, -1);
@@ -1158,6 +1277,7 @@ function parseColor(color) {
 		}
 	}
 	if (color.startsWith("$")) {
+		if (getActiveColorLevel() === "none") return null;
 		const resolved = resolveThemeColor(color, getActiveTheme());
 		if (resolved && resolved !== color) return parseColor(resolved);
 		return null;
@@ -1270,24 +1390,61 @@ function getBorderChars(style) {
 	return borders[style ?? "single"];
 }
 /**
+* Collect monochrome attrs from a color string (`"$primary"` → `["bold"]`).
+*
+* At mono tier, `parseColor` strips the color (returns `null`). The hierarchy
+* signal lives in the attrs bag. This helper merges the mapped attrs from
+* `DEFAULT_MONO_ATTRS` into a mutable accumulator. Called per color-carrying
+* prop in `getTextStyle`.
+*
+* No-op when the color is not a `$token` — non-token hex / named colors
+* pass through with no attrs (spec: "apps that hardcoded #FF0000 get nothing").
+*/
+function collectMonoAttrs(color, into) {
+	if (!color) return;
+	const attrs = monoAttrsForColorString(color, getActiveTheme());
+	if (!attrs) return;
+	for (const a of attrs) into.add(a);
+}
+/**
 * Get text style from props.
 */
 function getTextStyle(props) {
 	let underlineStyle;
 	if (props.underlineStyle !== void 0) underlineStyle = props.underlineStyle;
 	else if (props.underline) underlineStyle = "single";
+	let bold = props.bold;
+	let dim = props.dim || props.dimColor;
+	let italic = props.italic;
+	let underline = props.underline || !!underlineStyle;
+	let strikethrough = props.strikethrough;
+	let inverse = props.inverse;
+	if (getActiveColorLevel() === "none") {
+		const monoAttrs = /* @__PURE__ */ new Set();
+		collectMonoAttrs(props.color, monoAttrs);
+		collectMonoAttrs(props.backgroundColor, monoAttrs);
+		if (monoAttrs.has("bold")) bold = true;
+		if (monoAttrs.has("dim")) dim = true;
+		if (monoAttrs.has("italic")) italic = true;
+		if (monoAttrs.has("underline")) {
+			underline = true;
+			if (!underlineStyle) underlineStyle = "single";
+		}
+		if (monoAttrs.has("strikethrough")) strikethrough = true;
+		if (monoAttrs.has("inverse")) inverse = true;
+	}
 	return {
 		fg: props.color ? parseColor(props.color) : null,
 		bg: props.backgroundColor ? parseColor(props.backgroundColor) : null,
 		underlineColor: props.underlineColor ? parseColor(props.underlineColor) : null,
 		attrs: {
-			bold: props.bold,
-			dim: props.dim || props.dimColor,
-			italic: props.italic,
-			underline: props.underline || !!underlineStyle,
+			bold,
+			dim,
+			italic,
+			underline,
 			underlineStyle,
-			strikethrough: props.strikethrough,
-			inverse: props.inverse
+			strikethrough,
+			inverse
 		}
 	};
 }
@@ -1306,7 +1463,7 @@ function getTextWidth(text, ctx) {
 //#endregion
 //#region packages/ag-term/src/pipeline/render-text.ts
 init_buffer();
-const log$2 = createLogger("silvery:content");
+const log$1 = createLogger("silvery:content");
 /** Cached bg conflict mode. Read from env once at module load. */
 let bgConflictMode = (() => {
 	const env = typeof process !== "undefined" ? process.env.SILVERY_BG_CONFLICT?.toLowerCase() : void 0;
@@ -1386,9 +1543,12 @@ function styleToAnsi(style) {
 	}[style.underlineStyle] ?? "4");
 	else if (style.underline) parts.push("4");
 	if (style.underlineColor) {
-		const ulColor = parseColor(style.underlineColor);
-		if (ulColor !== null) if (typeof ulColor === "number") parts.push(`58;5;${ulColor}`);
-		else parts.push(`58;2;${ulColor.r};${ulColor.g};${ulColor.b}`);
+		const underlineSource = style.underlineColor === "currentColor" || style.underlineColor === "inherit" ? style.color : style.underlineColor;
+		if (underlineSource) {
+			const ulColor = parseColor(underlineSource);
+			if (ulColor !== null) if (typeof ulColor === "number") parts.push(`58;5;${ulColor}`);
+			else parts.push(`58;2;${ulColor.r};${ulColor.g};${ulColor.b}`);
+		}
 	}
 	if (style.inverse) parts.push("7");
 	if (style.strikethrough) parts.push("9");
@@ -1401,7 +1561,7 @@ function styleToAnsi(style) {
 */
 function mergeStyleContext(parent, childProps) {
 	return {
-		color: childProps.color ?? parent.color,
+		color: (childProps.color === "inherit" || childProps.color === "currentColor" ? parent.color : childProps.color) ?? parent.color,
 		backgroundColor: childProps.backgroundColor ?? parent.backgroundColor,
 		bold: childProps.bold ?? parent.bold,
 		dim: childProps.dim ?? childProps.dimColor ?? parent.dim,
@@ -1829,7 +1989,7 @@ function renderAnsiTextLineReturn(buffer, x, y, text, baseStyle, maxCol, inherit
 				const key = `${JSON.stringify(existingBufBg)}-${segment.bg}-${preview}`;
 				if (!effectiveWarnedBgConflicts.has(key)) {
 					effectiveWarnedBgConflicts.add(key);
-					log$2.warn?.(msg);
+					log$1.warn?.(msg);
 				}
 			}
 		}
@@ -1970,13 +2130,25 @@ function renderText(node, buffer, layout, props, nodeState, inheritedBg, inherit
 	let text;
 	let bgSegments;
 	let childSpans;
+	const rootContext = {
+		color: props.color,
+		backgroundColor: props.backgroundColor,
+		bold: props.bold,
+		dim: props.dim || props.dimColor,
+		italic: props.italic,
+		underline: !!(props.underline || props.underlineStyle),
+		underlineStyle: props.underlineStyle,
+		underlineColor: props.underlineColor,
+		inverse: props.inverse,
+		strikethrough: props.strikethrough
+	};
 	const cachedCollected = getCachedCollectedText(node, maxDisplayWidth);
 	if (cachedCollected) {
 		text = cachedCollected.text;
 		bgSegments = cachedCollected.bgSegments;
 		childSpans = cachedCollected.childSpans;
 	} else {
-		const collected = collectTextWithBg(node, {}, 0, maxDisplayWidth, ctx);
+		const collected = collectTextWithBg(node, rootContext, 0, maxDisplayWidth, ctx);
 		text = collected.text;
 		bgSegments = collected.bgSegments;
 		childSpans = collected.childSpans;
@@ -1984,6 +2156,7 @@ function renderText(node, buffer, layout, props, nodeState, inheritedBg, inherit
 	}
 	const style = getTextStyle(props);
 	if (style.fg === null && inheritedFg !== void 0) style.fg = inheritedFg;
+	if (props.underlineColor === "currentColor" || props.underlineColor === "inherit") style.underlineColor = style.fg;
 	const trim = !(style.bg !== null || bgSegments.length > 0 || inheritedBg !== void 0 && inheritedBg !== null);
 	const internalTransform = props.internal_transform;
 	let lines;
@@ -2084,7 +2257,7 @@ function getEffectiveBg(props) {
 /**
 * Render a Box node.
 */
-function renderBox(_node, buffer, layout, props, nodeState, skipBgFill = false, inheritedBg, bgOnlyChange = false) {
+function renderBox(_node, buffer, layout, props, nodeState, skipBgFill = false, inheritedBg, bgOnlyChange = false, inheritedFg) {
 	const { scrollOffset, clipBounds } = nodeState;
 	const { x, width, height } = layout;
 	const y = layout.y - scrollOffset;
@@ -2111,14 +2284,16 @@ function renderBox(_node, buffer, layout, props, nodeState, skipBgFill = false,
 		} else if (bgOnlyChange) buffer.fillBg(x, y, width, height, bg);
 		else buffer.fill(x, y, width, height, { bg });
 	}
-	if (props.borderStyle) renderBorder(buffer, x, y, width, height, props, clipBounds, inheritedBg);
+	if (props.borderStyle) renderBorder(buffer, x, y, width, height, props, clipBounds, inheritedBg, inheritedFg);
 }
 /**
 * Render a border around a box.
 */
-function renderBorder(buffer, x, y, width, height, props, clipBounds, inheritedBg) {
+function renderBorder(buffer, x, y, width, height, props, clipBounds, inheritedBg, inheritedFg) {
 	const chars = getBorderChars(props.borderStyle ?? "single");
-	const color = props.borderColor ? parseColor(props.borderColor) : null;
+	let color;
+	if (props.borderColor === "currentColor" || props.borderColor === "inherit") color = props.color ? parseColor(props.color) : inheritedFg ?? null;
+	else color = props.borderColor ? parseColor(props.borderColor) : null;
 	const baseBg = props.backgroundColor ? parseColor(props.backgroundColor) : inheritedBg ?? null;
 	const borderBgStr = props.borderBackgroundColor;
 	const borderBgBase = borderBgStr ? parseColor(borderBgStr) : baseBg;
@@ -2203,14 +2378,21 @@ function renderBorder(buffer, x, y, width, height, props, clipBounds, inheritedB
 * Render an outline around a box.
 *
 * Unlike borders, outlines do NOT affect layout dimensions. They draw border
-* characters that OVERLAP the content area at the node's screen rect edges.
-* This is the CSS `outline` equivalent for terminal UI.
+* characters OUTSIDE the box — one cell beyond each edge, in the gap/margin
+* space between siblings. This matches CSS `outline` semantics.
+*
+* The outline occupies cells at (x-1, y-1) through (x+width, y+height) —
+* entirely outside the box's own rect. Content is never overlapped.
 */
 function renderOutline(buffer, x, y, width, height, props, clipBounds, inheritedBg) {
 	const chars = getBorderChars(props.outlineStyle ?? "single");
 	const color = props.outlineColor ? parseColor(props.outlineColor) : null;
 	const bg = props.backgroundColor ? parseColor(props.backgroundColor) : inheritedBg ?? null;
 	const attrs = props.outlineDimColor ? { dim: true } : {};
+	const ox = x - 1;
+	const oy = y - 1;
+	const ow = width + 2;
+	const oh = height + 2;
 	const isRowVisible = (row) => {
 		if (!clipBounds) return row >= 0 && row < buffer.height;
 		return row >= clipBounds.top && row < clipBounds.bottom && row < buffer.height;
@@ -2223,20 +2405,20 @@ function renderOutline(buffer, x, y, width, height, props, clipBounds, inherited
 	const showBottom = props.outlineBottom !== false;
 	const showLeft = props.outlineLeft !== false;
 	const showRight = props.outlineRight !== false;
-	if (showTop && isRowVisible(y)) {
-		if (showLeft && isColVisible(x)) buffer.setCell(x, y, {
+	if (showTop && isRowVisible(oy)) {
+		if (showLeft && isColVisible(ox)) buffer.setCell(ox, oy, {
 			char: chars.topLeft,
 			fg: color,
 			bg,
 			attrs
 		});
-		for (let col = x + 1; col < x + width - 1 && col < buffer.width; col++) if (isColVisible(col)) buffer.setCell(col, y, {
+		for (let col = ox + 1; col < ox + ow - 1 && col < buffer.width; col++) if (isColVisible(col)) buffer.setCell(col, oy, {
 			char: chars.horizontal,
 			fg: color,
 			bg,
 			attrs
 		});
-		if (showRight && x + width - 1 < buffer.width && isColVisible(x + width - 1)) buffer.setCell(x + width - 1, y, {
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) buffer.setCell(ox + ow - 1, oy, {
 			char: chars.topRight,
 			fg: color,
 			bg,
@@ -2244,17 +2426,17 @@ function renderOutline(buffer, x, y, width, height, props, clipBounds, inherited
 		});
 	}
 	const outlineRightVertical = chars.rightVertical ?? chars.vertical;
-	const sideStart = showTop ? y + 1 : y;
-	const sideEnd = showBottom ? y + height - 1 : y + height;
+	const sideStart = showTop ? oy + 1 : oy;
+	const sideEnd = showBottom ? oy + oh - 1 : oy + oh;
 	for (let row = sideStart; row < sideEnd; row++) {
 		if (!isRowVisible(row)) continue;
-		if (showLeft && isColVisible(x)) buffer.setCell(x, row, {
+		if (showLeft && isColVisible(ox)) buffer.setCell(ox, row, {
 			char: chars.vertical,
 			fg: color,
 			bg,
 			attrs
 		});
-		if (showRight && x + width - 1 < buffer.width && isColVisible(x + width - 1)) buffer.setCell(x + width - 1, row, {
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) buffer.setCell(ox + ow - 1, row, {
 			char: outlineRightVertical,
 			fg: color,
 			bg,
@@ -2262,21 +2444,21 @@ function renderOutline(buffer, x, y, width, height, props, clipBounds, inherited
 		});
 	}
 	const outlineBottomHorizontal = chars.bottomHorizontal ?? chars.horizontal;
-	const bottomY = y + height - 1;
+	const bottomY = oy + oh - 1;
 	if (showBottom && isRowVisible(bottomY)) {
-		if (showLeft && isColVisible(x)) buffer.setCell(x, bottomY, {
+		if (showLeft && isColVisible(ox)) buffer.setCell(ox, bottomY, {
 			char: chars.bottomLeft,
 			fg: color,
 			bg,
 			attrs
 		});
-		for (let col = x + 1; col < x + width - 1 && col < buffer.width; col++) if (isColVisible(col)) buffer.setCell(col, bottomY, {
+		for (let col = ox + 1; col < ox + ow - 1 && col < buffer.width; col++) if (isColVisible(col)) buffer.setCell(col, bottomY, {
 			char: outlineBottomHorizontal,
 			fg: color,
 			bg,
 			attrs
 		});
-		if (showRight && x + width - 1 < buffer.width && isColVisible(x + width - 1)) buffer.setCell(x + width - 1, bottomY, {
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) buffer.setCell(ox + ow - 1, bottomY, {
 			char: chars.bottomRight,
 			fg: color,
 			bg,
@@ -2350,6 +2532,196 @@ function padCenter(text, width) {
 	return " ".repeat(leftPad) + text + " ".repeat(rightPad);
 }
 //#endregion
+//#region packages/ag-term/src/pipeline/decoration-phase.ts
+/**
+* Restore cells at previously-drawn outline positions to their pre-outline
+* state. Called at the start of each incremental render, before the content
+* phase, on the cloned buffer. No-op when there are no previous snapshots
+* (fresh render or no outlines last frame).
+*/
+function clearPreviousOutlines(buffer) {
+	const snapshots = buffer.outlineSnapshots;
+	if (!snapshots || snapshots.length === 0) return;
+	for (const snap of snapshots) buffer.setCell(snap.x, snap.y, snap.cell);
+	buffer.outlineSnapshots = [];
+}
+/**
+* Walk the node tree, drawing outlines for every node with `outlineStyle`.
+* Captures per-cell snapshots so the next frame can restore these positions.
+*
+* Called AFTER the content render phase on every frame (both fresh and
+* incremental). Mirrors `renderNodeToBuffer`'s state threading for scroll
+* offsets, clip bounds, and inherited background — but does nothing except
+* visit the tree and draw outlines.
+*/
+function renderDecorationPass(buffer, root) {
+	const snapshots = [];
+	walk(root, buffer, 0, void 0, { color: null }, snapshots);
+	buffer.outlineSnapshots = snapshots;
+}
+/**
+* Recursive tree walk. Each invocation corresponds to the state at a single
+* node — scroll offset, clip bounds, inherited background — matching what
+* `renderNodeToBuffer` would have threaded through its `NodeRenderState`.
+*/
+function walk(node, buffer, scrollOffset, clipBounds, inheritedBg, snapshots) {
+	if (!node.layoutNode) return;
+	const layout = node.boxRect;
+	if (!layout) return;
+	if (node.hidden) return;
+	const props = node.props;
+	if (props.display === "none") return;
+	const y = layout.y - scrollOffset;
+	if (y >= buffer.height || y + layout.height <= 0) return;
+	const effectiveBg = getEffectiveBg(props);
+	const theme = props.theme;
+	const childInheritedBg = effectiveBg ? { color: parseColor(effectiveBg) } : theme ? { color: parseColor(theme.bg) } : inheritedBg;
+	if (node.type === "silvery-box" && props.outlineStyle) {
+		const boxInheritedBg = effectiveBg ? void 0 : inheritedBg.color;
+		const positions = collectOutlineCells(layout.x, y, layout.width, layout.height, props, clipBounds, buffer);
+		for (const pos of positions) snapshots.push({
+			x: pos.x,
+			y: pos.y,
+			cell: buffer.getCell(pos.x, pos.y)
+		});
+		renderOutline(buffer, layout.x, y, layout.width, layout.height, props, clipBounds, boxInheritedBg);
+	}
+	if (node.children.length === 0) return;
+	const isScrollContainer = props.overflow === "scroll" && node.scrollState;
+	const clipX = (props.overflowX ?? props.overflow) === "hidden";
+	const clipY = (props.overflowY ?? props.overflow) === "hidden";
+	if (isScrollContainer) {
+		const ss = node.scrollState;
+		const childClip = computeChildClip(layout, props, clipBounds, 0, false, true);
+		for (let i = 0; i < node.children.length; i++) {
+			const child = node.children[i];
+			if (!child) continue;
+			if (child.props.position === "sticky") continue;
+			if (i < ss.firstVisibleChild || i > ss.lastVisibleChild) continue;
+			walk(child, buffer, ss.offset, childClip, childInheritedBg, snapshots);
+		}
+		if (ss.stickyChildren) for (const sticky of ss.stickyChildren) {
+			const child = node.children[sticky.index];
+			if (!child) continue;
+			walk(child, buffer, sticky.naturalTop - sticky.renderOffset, childClip, childInheritedBg, snapshots);
+		}
+	} else {
+		const childClip = clipX || clipY ? computeChildClip(layout, props, clipBounds, scrollOffset, clipX, clipY) : clipBounds;
+		for (const child of node.children) walk(child, buffer, scrollOffset, childClip, childInheritedBg, snapshots);
+	}
+}
+/**
+* Compute the cells an outline would write, given the same inputs
+* `renderOutline` uses. Kept in lockstep with render-box.ts — any change to
+* the outline geometry (e.g., new outline styles, per-side toggles) must be
+* mirrored here. If they drift, the snapshots won't cover every cell the
+* next `renderOutline` call writes, and stale pixels will leak through.
+*
+* Uses the SAME visibility checks as `renderOutline` so the snapshot set is
+* an exact match for the cell set the renderer will overwrite.
+*/
+function collectOutlineCells(x, y, width, height, props, clipBounds, buffer) {
+	const out = [];
+	const ox = x - 1;
+	const oy = y - 1;
+	const ow = width + 2;
+	const oh = height + 2;
+	const isRowVisible = (row) => {
+		if (!clipBounds) return row >= 0 && row < buffer.height;
+		return row >= clipBounds.top && row < clipBounds.bottom && row < buffer.height;
+	};
+	const isColVisible = (col) => {
+		if (clipBounds?.left === void 0 || clipBounds.right === void 0) return col >= 0 && col < buffer.width;
+		return col >= clipBounds.left && col < clipBounds.right && col < buffer.width;
+	};
+	const showTop = props.outlineTop !== false;
+	const showBottom = props.outlineBottom !== false;
+	const showLeft = props.outlineLeft !== false;
+	const showRight = props.outlineRight !== false;
+	if (showTop && isRowVisible(oy)) {
+		if (showLeft && isColVisible(ox)) out.push({
+			x: ox,
+			y: oy
+		});
+		for (let col = ox + 1; col < ox + ow - 1 && col < buffer.width; col++) if (isColVisible(col)) out.push({
+			x: col,
+			y: oy
+		});
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) out.push({
+			x: ox + ow - 1,
+			y: oy
+		});
+	}
+	const sideStart = showTop ? oy + 1 : oy;
+	const sideEnd = showBottom ? oy + oh - 1 : oy + oh;
+	for (let row = sideStart; row < sideEnd; row++) {
+		if (!isRowVisible(row)) continue;
+		if (showLeft && isColVisible(ox)) out.push({
+			x: ox,
+			y: row
+		});
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) out.push({
+			x: ox + ow - 1,
+			y: row
+		});
+	}
+	const bottomY = oy + oh - 1;
+	if (showBottom && isRowVisible(bottomY)) {
+		if (showLeft && isColVisible(ox)) out.push({
+			x: ox,
+			y: bottomY
+		});
+		for (let col = ox + 1; col < ox + ow - 1 && col < buffer.width; col++) if (isColVisible(col)) out.push({
+			x: col,
+			y: bottomY
+		});
+		if (showRight && ox + ow - 1 < buffer.width && isColVisible(ox + ow - 1)) out.push({
+			x: ox + ow - 1,
+			y: bottomY
+		});
+	}
+	return out;
+}
+/**
+* Local copy of `computeChildClipBounds` from render-phase.ts. The decoration
+* walker can't import private render-phase helpers without tangling modules,
+* so we reproduce the same computation here. Must stay in sync.
+*/
+function computeChildClip(layout, props, parentClip, scrollOffset, horizontal, vertical) {
+	const border = props.borderStyle ? getBorderSize(props) : {
+		top: 0,
+		bottom: 0,
+		left: 0,
+		right: 0
+	};
+	const padding = getPadding(props);
+	const adjustedY = layout.y - scrollOffset;
+	const nodeClip = vertical ? {
+		top: adjustedY + border.top + padding.top,
+		bottom: adjustedY + layout.height - border.bottom - padding.bottom
+	} : {
+		top: -Infinity,
+		bottom: Infinity
+	};
+	if (horizontal) {
+		nodeClip.left = layout.x + border.left + padding.left;
+		nodeClip.right = layout.x + layout.width - border.right - padding.right;
+	}
+	if (!parentClip) return nodeClip;
+	const result = {
+		top: vertical ? Math.max(parentClip.top, nodeClip.top) : parentClip.top,
+		bottom: vertical ? Math.min(parentClip.bottom, nodeClip.bottom) : parentClip.bottom
+	};
+	if (horizontal && nodeClip.left !== void 0 && nodeClip.right !== void 0) {
+		result.left = Math.max(parentClip.left ?? 0, nodeClip.left);
+		result.right = Math.min(parentClip.right ?? Infinity, nodeClip.right);
+	} else if (parentClip.left !== void 0 && parentClip.right !== void 0) {
+		result.left = parentClip.left;
+		result.right = parentClip.right;
+	}
+	return result;
+}
+//#endregion
 //#region packages/ag-term/src/pipeline/cascade-predicates.ts
 /**
 * Compute all cascade predicate values from boolean inputs.
@@ -2374,350 +2746,6 @@ function computeCascade(inputs) {
 	};
 }
 //#endregion
-//#region ../../node_modules/.bun/alien-signals@3.1.2/node_modules/alien-signals/esm/system.mjs
-function createReactiveSystem({ update, notify, unwatched }) {
-	return {
-		link,
-		unlink,
-		propagate,
-		checkDirty,
-		shallowPropagate
-	};
-	function link(dep, sub, version) {
-		const prevDep = sub.depsTail;
-		if (prevDep !== void 0 && prevDep.dep === dep) return;
-		const nextDep = prevDep !== void 0 ? prevDep.nextDep : sub.deps;
-		if (nextDep !== void 0 && nextDep.dep === dep) {
-			nextDep.version = version;
-			sub.depsTail = nextDep;
-			return;
-		}
-		const prevSub = dep.subsTail;
-		if (prevSub !== void 0 && prevSub.version === version && prevSub.sub === sub) return;
-		const newLink = sub.depsTail = dep.subsTail = {
-			version,
-			dep,
-			sub,
-			prevDep,
-			nextDep,
-			prevSub,
-			nextSub: void 0
-		};
-		if (nextDep !== void 0) nextDep.prevDep = newLink;
-		if (prevDep !== void 0) prevDep.nextDep = newLink;
-		else sub.deps = newLink;
-		if (prevSub !== void 0) prevSub.nextSub = newLink;
-		else dep.subs = newLink;
-	}
-	function unlink(link, sub = link.sub) {
-		const dep = link.dep;
-		const prevDep = link.prevDep;
-		const nextDep = link.nextDep;
-		const nextSub = link.nextSub;
-		const prevSub = link.prevSub;
-		if (nextDep !== void 0) nextDep.prevDep = prevDep;
-		else sub.depsTail = prevDep;
-		if (prevDep !== void 0) prevDep.nextDep = nextDep;
-		else sub.deps = nextDep;
-		if (nextSub !== void 0) nextSub.prevSub = prevSub;
-		else dep.subsTail = prevSub;
-		if (prevSub !== void 0) prevSub.nextSub = nextSub;
-		else if ((dep.subs = nextSub) === void 0) unwatched(dep);
-		return nextDep;
-	}
-	function propagate(link) {
-		let next = link.nextSub;
-		let stack;
-		top: do {
-			const sub = link.sub;
-			let flags = sub.flags;
-			if (!(flags & 60)) sub.flags = flags | 32;
-			else if (!(flags & 12)) flags = 0;
-			else if (!(flags & 4)) sub.flags = flags & -9 | 32;
-			else if (!(flags & 48) && isValidLink(link, sub)) {
-				sub.flags = flags | 40;
-				flags &= 1;
-			} else flags = 0;
-			if (flags & 2) notify(sub);
-			if (flags & 1) {
-				const subSubs = sub.subs;
-				if (subSubs !== void 0) {
-					const nextSub = (link = subSubs).nextSub;
-					if (nextSub !== void 0) {
-						stack = {
-							value: next,
-							prev: stack
-						};
-						next = nextSub;
-					}
-					continue;
-				}
-			}
-			if ((link = next) !== void 0) {
-				next = link.nextSub;
-				continue;
-			}
-			while (stack !== void 0) {
-				link = stack.value;
-				stack = stack.prev;
-				if (link !== void 0) {
-					next = link.nextSub;
-					continue top;
-				}
-			}
-			break;
-		} while (true);
-	}
-	function checkDirty(link, sub) {
-		let stack;
-		let checkDepth = 0;
-		let dirty = false;
-		top: do {
-			const dep = link.dep;
-			const flags = dep.flags;
-			if (sub.flags & 16) dirty = true;
-			else if ((flags & 17) === 17) {
-				if (update(dep)) {
-					const subs = dep.subs;
-					if (subs.nextSub !== void 0) shallowPropagate(subs);
-					dirty = true;
-				}
-			} else if ((flags & 33) === 33) {
-				if (link.nextSub !== void 0 || link.prevSub !== void 0) stack = {
-					value: link,
-					prev: stack
-				};
-				link = dep.deps;
-				sub = dep;
-				++checkDepth;
-				continue;
-			}
-			if (!dirty) {
-				const nextDep = link.nextDep;
-				if (nextDep !== void 0) {
-					link = nextDep;
-					continue;
-				}
-			}
-			while (checkDepth--) {
-				const firstSub = sub.subs;
-				const hasMultipleSubs = firstSub.nextSub !== void 0;
-				if (hasMultipleSubs) {
-					link = stack.value;
-					stack = stack.prev;
-				} else link = firstSub;
-				if (dirty) {
-					if (update(sub)) {
-						if (hasMultipleSubs) shallowPropagate(firstSub);
-						sub = link.sub;
-						continue;
-					}
-					dirty = false;
-				} else sub.flags &= -33;
-				sub = link.sub;
-				const nextDep = link.nextDep;
-				if (nextDep !== void 0) {
-					link = nextDep;
-					continue top;
-				}
-			}
-			return dirty;
-		} while (true);
-	}
-	function shallowPropagate(link) {
-		do {
-			const sub = link.sub;
-			const flags = sub.flags;
-			if ((flags & 48) === 32) {
-				sub.flags = flags | 16;
-				if ((flags & 6) === 2) notify(sub);
-			}
-		} while ((link = link.nextSub) !== void 0);
-	}
-	function isValidLink(checkLink, sub) {
-		let link = sub.depsTail;
-		while (link !== void 0) {
-			if (link === checkLink) return true;
-			link = link.prevDep;
-		}
-		return false;
-	}
-}
-//#endregion
-//#region ../../node_modules/.bun/alien-signals@3.1.2/node_modules/alien-signals/esm/index.mjs
-let cycle = 0;
-let notifyIndex = 0;
-let queuedLength = 0;
-let activeSub;
-const queued = [];
-const { link, unlink, propagate, checkDirty, shallowPropagate } = createReactiveSystem({
-	update(node) {
-		if (node.depsTail !== void 0) return updateComputed(node);
-		else return updateSignal(node);
-	},
-	notify(effect) {
-		let insertIndex = queuedLength;
-		let firstInsertedIndex = insertIndex;
-		do {
-			queued[insertIndex++] = effect;
-			effect.flags &= -3;
-			effect = effect.subs?.sub;
-			if (effect === void 0 || !(effect.flags & 2)) break;
-		} while (true);
-		queuedLength = insertIndex;
-		while (firstInsertedIndex < --insertIndex) {
-			const left = queued[firstInsertedIndex];
-			queued[firstInsertedIndex++] = queued[insertIndex];
-			queued[insertIndex] = left;
-		}
-	},
-	unwatched(node) {
-		if (!(node.flags & 1)) effectScopeOper.call(node);
-		else if (node.depsTail !== void 0) {
-			node.depsTail = void 0;
-			node.flags = 17;
-			purgeDeps(node);
-		}
-	}
-});
-function setActiveSub(sub) {
-	const prevSub = activeSub;
-	activeSub = sub;
-	return prevSub;
-}
-function signal(initialValue) {
-	return signalOper.bind({
-		currentValue: initialValue,
-		pendingValue: initialValue,
-		subs: void 0,
-		subsTail: void 0,
-		flags: 1
-	});
-}
-function computed(getter) {
-	return computedOper.bind({
-		value: void 0,
-		subs: void 0,
-		subsTail: void 0,
-		deps: void 0,
-		depsTail: void 0,
-		flags: 0,
-		getter
-	});
-}
-function updateComputed(c) {
-	++cycle;
-	c.depsTail = void 0;
-	c.flags = 5;
-	const prevSub = setActiveSub(c);
-	try {
-		const oldValue = c.value;
-		return oldValue !== (c.value = c.getter(oldValue));
-	} finally {
-		activeSub = prevSub;
-		c.flags &= -5;
-		purgeDeps(c);
-	}
-}
-function updateSignal(s) {
-	s.flags = 1;
-	return s.currentValue !== (s.currentValue = s.pendingValue);
-}
-function run(e) {
-	const flags = e.flags;
-	if (flags & 16 || flags & 32 && checkDirty(e.deps, e)) {
-		++cycle;
-		e.depsTail = void 0;
-		e.flags = 6;
-		const prevSub = setActiveSub(e);
-		try {
-			e.fn();
-		} finally {
-			activeSub = prevSub;
-			e.flags &= -5;
-			purgeDeps(e);
-		}
-	} else e.flags = 2;
-}
-function flush() {
-	try {
-		while (notifyIndex < queuedLength) {
-			const effect = queued[notifyIndex];
-			queued[notifyIndex++] = void 0;
-			run(effect);
-		}
-	} finally {
-		while (notifyIndex < queuedLength) {
-			const effect = queued[notifyIndex];
-			queued[notifyIndex++] = void 0;
-			effect.flags |= 10;
-		}
-		notifyIndex = 0;
-		queuedLength = 0;
-	}
-}
-function computedOper() {
-	const flags = this.flags;
-	if (flags & 16 || flags & 32 && (checkDirty(this.deps, this) || (this.flags = flags & -33, false))) {
-		if (updateComputed(this)) {
-			const subs = this.subs;
-			if (subs !== void 0) shallowPropagate(subs);
-		}
-	} else if (!flags) {
-		this.flags = 5;
-		const prevSub = setActiveSub(this);
-		try {
-			this.value = this.getter();
-		} finally {
-			activeSub = prevSub;
-			this.flags &= -5;
-		}
-	}
-	const sub = activeSub;
-	if (sub !== void 0) link(this, sub, cycle);
-	return this.value;
-}
-function signalOper(...value) {
-	if (value.length) {
-		if (this.pendingValue !== (this.pendingValue = value[0])) {
-			this.flags = 17;
-			const subs = this.subs;
-			if (subs !== void 0) {
-				propagate(subs);
-				flush();
-			}
-		}
-	} else {
-		if (this.flags & 16) {
-			if (updateSignal(this)) {
-				const subs = this.subs;
-				if (subs !== void 0) shallowPropagate(subs);
-			}
-		}
-		let sub = activeSub;
-		while (sub !== void 0) {
-			if (sub.flags & 3) {
-				link(this, sub, cycle);
-				break;
-			}
-			sub = sub.subs?.sub;
-		}
-		return this.currentValue;
-	}
-}
-function effectScopeOper() {
-	this.depsTail = void 0;
-	this.flags = 0;
-	purgeDeps(this);
-	const sub = this.subs;
-	if (sub !== void 0) unlink(sub);
-}
-function purgeDeps(sub) {
-	const depsTail = sub.depsTail;
-	let dep = depsTail !== void 0 ? depsTail.nextDep : sub.deps;
-	while (dep !== void 0) dep = unlink(dep, sub);
-}
-//#endregion
 //#region packages/ag-term/src/pipeline/reactive-node.ts
 /**
 * Reactive Node State — alien-signals wrappers for cascade derivations.
@@ -2926,6 +2954,7 @@ function renderPhase(root, prevBuffer, ctx) {
 	const buffer = hasPrevBuffer ? prevBuffer.clone() : new TerminalBuffer(layout.width, layout.height);
 	const tClone = instr.enabled ? performance.now() - t0 : 0;
 	buffer.setSelectableMode(true);
+	clearPreviousOutlines(buffer);
 	const t1 = instr.enabled ? performance.now() : 0;
 	renderNodeToBuffer(root, buffer, {
 		scrollOffset: 0,
@@ -2941,6 +2970,7 @@ function renderPhase(root, prevBuffer, ctx) {
 		inheritedFg: null
 	}, ctx);
 	const tRender = instr.enabled ? performance.now() - t1 : 0;
+	renderDecorationPass(buffer, root);
 	if (instr.enabled) emitRenderPhaseStats(instr.stats, instr.nodeTrace, instr.nodeTraceEnabled, tClone, tRender);
 	syncPrevLayout(root, isCurrentEpoch(root.layoutChangedThisFrame) || isDirty(root.dirtyBits, root.dirtyEpoch, 16) || !hasPrevBuffer);
 	advanceRenderEpoch();
@@ -2964,7 +2994,7 @@ function renderPhase(root, prevBuffer, ctx) {
 * Previously walked ALL nodes O(N) every frame. Now only visits nodes
 * with layoutChangedThisFrame (set by propagateLayout in layout phase).
 * Falls back to full walk when layout phase ran (dimensions changed or
-* layoutDirty) since any node may have moved.
+* Flexily isDirty) since any node may have moved.
 *
 * For cursor move (no layout change): O(1) — no nodes to sync.
 * For resize: O(N) — all nodes may have moved (same as before).
@@ -3212,7 +3242,7 @@ function renderNodeToBuffer(node, buffer, nodeState, ctx) {
 		const useTextStyleFastPath = false;
 		executeRegionClearing(node, buffer, layout, scrollOffset, clipBounds, bufferIsCloned, layoutChanged, contentRegionCleared, descendantOverflowChanged, instr.enabled, instr.stats, nodeState.inheritedBg);
 		const needsOwnRepaint = !hasPrevBuffer || ancestorCleared || ancestorLayoutChanged || cascade.contentAreaAffected || isDirty(node.dirtyBits, node.dirtyEpoch, 2) || cascade.bgRefillNeeded;
-		const boxInheritedBg = node.type === "silvery-box" && !getEffectiveBg(props) ? nodeState.inheritedBg.color : void 0;
+		node.type === "silvery-box" && !getEffectiveBg(props) && nodeState.inheritedBg.color;
 		if (needsOwnRepaint) renderOwnContent(node, buffer, layout, props, nodeState, skipBgFill, instr.enabled, instr.stats, ctx, cascade.bgOnlyChange, useTextStyleFastPath);
 		const effectiveBg = getEffectiveBg(props);
 		const childInheritedBg = effectiveBg ? {
@@ -3222,7 +3252,7 @@ function renderNodeToBuffer(node, buffer, nodeState, ctx) {
 			color: parseColor(nodeTheme.bg),
 			ancestorRect: node.boxRect
 		} : nodeState.inheritedBg;
-		const childInheritedFg = props.color ? parseColor(props.color) : nodeTheme ? parseColor(nodeTheme.fg) : nodeState.inheritedFg;
+		const childInheritedFg = props.color === "inherit" || props.color === "currentColor" ? nodeState.inheritedFg : props.color ? parseColor(props.color) : nodeTheme ? parseColor(nodeTheme.fg) : nodeState.inheritedFg;
 		const childState = {
 			...nodeState,
 			inheritedBg: childInheritedBg,
@@ -3232,10 +3262,6 @@ function renderNodeToBuffer(node, buffer, nodeState, ctx) {
 			renderScrollContainerChildren(node, buffer, props, childState, contentRegionCleared, childrenNeedFreshRender, ctx);
 			renderScrollIndicators(node, buffer, layout, props, node.scrollState, ctx);
 		} else renderNormalChildren(node, buffer, props, childState, childPositionChanged, contentRegionCleared, childrenNeedFreshRender, ctx);
-		if (node.type === "silvery-box" && props.outlineStyle) {
-			const { x, width, height } = layout;
-			renderOutline(buffer, x, layout.y - scrollOffset, width, height, props, clipBounds, boxInheritedBg);
-		}
 		clearNodeDirtyFlags(node);
 	} finally {
 		if (nodeTheme) popContextTheme();
@@ -3359,7 +3385,7 @@ function renderOwnContent(node, buffer, layout, props, nodeState, skipBgFill, in
 	const boxInheritedBg = node.type === "silvery-box" && !getEffectiveBg(props) ? nodeState.inheritedBg.color : void 0;
 	if (node.type === "silvery-box") {
 		if (instrumentEnabled) stats.boxNodes++;
-		renderBox(node, buffer, layout, props, nodeState, skipBgFill, boxInheritedBg, bgOnlyChange);
+		renderBox(node, buffer, layout, props, nodeState, skipBgFill, boxInheritedBg, bgOnlyChange, nodeState.inheritedFg);
 	} else if (node.type === "silvery-text") {
 		if (instrumentEnabled) stats.textNodes++;
 		const textInheritedBg = nodeState.inheritedBg.color;
@@ -3994,6 +4020,189 @@ function clippedFill(buffer, x, width, top, bottom, clipBounds, outerBottom, bg)
 	});
 }
 //#endregion
+//#region packages/ag-term/src/pipeline/backdrop-phase.ts
+init_src$1();
+init_buffer();
+const FADE_ATTR = "data-backdrop-fade";
+const FADE_EXCLUDE_ATTR = "data-backdrop-fade-excluded";
+/**
+* Apply backdrop-fade to the buffer based on tree markers.
+*
+* Returns `true` if at least one region was modified; `false` if nothing
+* changed (no markers found, or colorLevel is `none`).
+*/
+/**
+* Quick check: does the tree contain any backdrop markers? Used as a gate so
+* we don't clone the buffer every frame when no fade is active. Walks the
+* full tree once (O(N)) — the alternative (tracking dirty markers in the
+* reconciler) is more complex and the walk is cheap compared to the pass.
+*/
+function hasBackdropMarkers(root) {
+	const props = root.props;
+	if (props[FADE_ATTR] !== void 0 || props[FADE_EXCLUDE_ATTR] !== void 0) return true;
+	for (const child of root.children) if (hasBackdropMarkers(child)) return true;
+	return false;
+}
+function applyBackdropFade(root, buffer, options) {
+	const colorLevel = options?.colorLevel ?? "truecolor";
+	if (colorLevel === "none") return false;
+	const includes = [];
+	const excludes = [];
+	collectBackdropMarkers(root, includes, excludes);
+	if (includes.length === 0 && excludes.length === 0) return false;
+	const strategy = colorLevel === "basic" ? "dim" : "blend";
+	let modified = false;
+	for (const { rect, amount } of includes) {
+		if (amount <= 0) continue;
+		if (fadeRect(buffer, rect, amount, strategy)) modified = true;
+	}
+	if (excludes.length > 0) {
+		const fullRect = {
+			x: 0,
+			y: 0,
+			width: buffer.width,
+			height: buffer.height
+		};
+		for (const { rect, amount } of excludes) {
+			if (amount <= 0) continue;
+			if (fadeRectExcluding(buffer, fullRect, rect, amount, strategy)) modified = true;
+		}
+	}
+	return modified;
+}
+function collectBackdropMarkers(node, includes, excludes) {
+	const props = node.props;
+	const includeRaw = props[FADE_ATTR];
+	const excludeRaw = props[FADE_EXCLUDE_ATTR];
+	if (includeRaw !== void 0 || excludeRaw !== void 0) {
+		const rect = node.screenRect ?? node.scrollRect ?? node.boxRect;
+		if (rect && rect.width > 0 && rect.height > 0) {
+			const inc = parseFade(includeRaw);
+			if (inc !== null) includes.push({
+				rect,
+				amount: inc
+			});
+			const exc = parseFade(excludeRaw);
+			if (exc !== null) excludes.push({
+				rect,
+				amount: exc
+			});
+		}
+	}
+	for (const child of node.children) collectBackdropMarkers(child, includes, excludes);
+}
+function parseFade(raw) {
+	if (raw === void 0 || raw === null) return null;
+	const n = typeof raw === "number" ? raw : Number(raw);
+	if (!Number.isFinite(n)) return null;
+	if (n <= 0) return null;
+	return n > 1 ? 1 : n;
+}
+function fadeRect(buffer, rect, amount, strategy) {
+	const x0 = Math.max(0, rect.x);
+	const y0 = Math.max(0, rect.y);
+	const x1 = Math.min(buffer.width, rect.x + rect.width);
+	const y1 = Math.min(buffer.height, rect.y + rect.height);
+	if (x0 >= x1 || y0 >= y1) return false;
+	let any = false;
+	for (let y = y0; y < y1; y++) for (let x = x0; x < x1; x++) if (fadeCell(buffer, x, y, amount, strategy)) any = true;
+	return any;
+}
+function fadeRectExcluding(buffer, outer, inner, amount, strategy) {
+	const ox0 = Math.max(0, outer.x);
+	const oy0 = Math.max(0, outer.y);
+	const ox1 = Math.min(buffer.width, outer.x + outer.width);
+	const oy1 = Math.min(buffer.height, outer.y + outer.height);
+	const ix0 = Math.max(ox0, inner.x);
+	const iy0 = Math.max(oy0, inner.y);
+	const ix1 = Math.min(ox1, inner.x + inner.width);
+	const iy1 = Math.min(oy1, inner.y + inner.height);
+	const innerValid = ix0 < ix1 && iy0 < iy1;
+	let any = false;
+	for (let y = oy0; y < oy1; y++) for (let x = ox0; x < ox1; x++) {
+		if (innerValid && x >= ix0 && x < ix1 && y >= iy0 && y < iy1) continue;
+		if (fadeCell(buffer, x, y, amount, strategy)) any = true;
+	}
+	return any;
+}
+/**
+* Fade a single cell. Returns true if the cell was modified.
+*
+* - `blend` strategy: mix fg toward bg in OKLab. When either color is null or
+*   the default-bg sentinel, also stamps `dim`.
+* - `dim` strategy: stamp `dim` attribute.
+*
+* Wide-char continuation cells are skipped — they share styling with the
+* leading cell and modifying them separately would desync.
+*/
+function fadeCell(buffer, x, y, amount, strategy) {
+	if (buffer.isCellContinuation(x, y)) return false;
+	const cell = buffer.getCell(x, y);
+	if (strategy === "dim") {
+		if (cell.attrs.dim) return false;
+		buffer.setCell(x, y, {
+			...cell,
+			attrs: {
+				...cell.attrs,
+				dim: true
+			}
+		});
+		return true;
+	}
+	const fgHex = colorToHex(cell.fg);
+	const bgHex = colorToHex(cell.bg);
+	if (fgHex && bgHex) {
+		const blendedRgb = hexToRgb(blend(fgHex, bgHex, amount));
+		if (!blendedRgb) return false;
+		buffer.setCell(x, y, {
+			...cell,
+			fg: blendedRgb
+		});
+		return true;
+	}
+	if (cell.attrs.dim) return false;
+	buffer.setCell(x, y, {
+		...cell,
+		attrs: {
+			...cell.attrs,
+			dim: true
+		}
+	});
+	return true;
+}
+/** Convert a buffer Color to a `#rrggbb` hex string, or null if unresolvable. */
+function colorToHex(color) {
+	if (color === null) return null;
+	if (typeof color === "number") {
+		const rgb = ansi256ToRgb(color);
+		return rgbToHex(rgb.r, rgb.g, rgb.b);
+	}
+	if (isDefaultBg(color)) return null;
+	return rgbToHex(color.r, color.g, color.b);
+}
+function rgbToHex(r, g, b) {
+	const clamp = (n) => {
+		return Math.max(0, Math.min(255, Math.round(n))).toString(16).padStart(2, "0");
+	};
+	return `#${clamp(r)}${clamp(g)}${clamp(b)}`;
+}
+function hexToRgb(hex) {
+	if (typeof hex !== "string") return null;
+	let s = hex;
+	if (s.startsWith("#")) s = s.slice(1);
+	if (s.length === 3) s = s[0] + s[0] + s[1] + s[1] + s[2] + s[2];
+	if (s.length !== 6) return null;
+	const r = parseInt(s.slice(0, 2), 16);
+	const g = parseInt(s.slice(2, 4), 16);
+	const b = parseInt(s.slice(4, 6), 16);
+	if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b)) return null;
+	return {
+		r,
+		g,
+		b
+	};
+}
+//#endregion
 //#region \0@oxc-project+runtime@0.122.0/helpers/usingCtx.js
 function _usingCtx() {
 	var r = "function" == typeof SuppressedError ? SuppressedError : function(r, e) {
@@ -4054,7 +4263,7 @@ function _usingCtx() {
 /**
 * Ag — tree + layout engine + renderer.
 *
-* Decomposes the opaque executeRender() into two independent phases:
+* The sole pipeline entry point. Two independent phases:
 * - ag.layout(dims) — measure + flexbox → positions/sizes
 * - ag.render() — positioned tree → cell grid → TextFrame
 *
@@ -4069,20 +4278,22 @@ function _usingCtx() {
 * ```
 */
 init_buffer();
-const log$1 = createLogger("silvery:render");
-const baseLog$1 = createLogger("@silvery/ag-react");
+const log = createLogger("silvery:render");
+const baseLog = createLogger("@silvery/ag-react");
 function createAg(root, options) {
 	const measurer = options?.measurer;
+	const colorLevel = options?.colorLevel ?? "truecolor";
 	const ctx = measurer ? { measurer } : void 0;
 	let _prevBuffer = null;
 	let hasScroll = false;
 	let hasSticky = false;
 	function doLayout(cols, rows, opts) {
 		try {
-			var _usingCtx$2 = _usingCtx();
+			var _usingCtx$1 = _usingCtx();
 			const prevRootLayout = root.boxRect;
-			if (!(prevRootLayout && (prevRootLayout.width !== cols || prevRootLayout.height !== rows)) && !hasLayoutDirty() && !hasScrollDirty()) {
-				log$1.debug?.("layout: skipped (no layoutDirty, no scrollDirty, dimensions unchanged)");
+			if (!(prevRootLayout && (prevRootLayout.width !== cols || prevRootLayout.height !== rows)) && !root.layoutNode?.isDirty() && !hasScrollDirty()) {
+				log.debug?.("layout: skipped (Flexily clean, no scrollDirty, dimensions unchanged)");
+				layoutPhase(root, cols, rows);
 				return {
 					tMeasure: 0,
 					tLayout: 0,
@@ -4091,7 +4302,7 @@ function createAg(root, options) {
 					tNotify: 0
 				};
 			}
-			const render = _usingCtx$2.u(baseLog$1.span("pipeline", {
+			const render = _usingCtx$1.u(baseLog.span("pipeline", {
 				width: cols,
 				height: rows
 			}));
@@ -4102,7 +4313,7 @@ function createAg(root, options) {
 				const t = performance.now();
 				measurePhase(root, ctx);
 				tMeasure = performance.now() - t;
-				log$1.debug?.(`measure: ${tMeasure.toFixed(2)}ms`);
+				log.debug?.(`measure: ${tMeasure.toFixed(2)}ms`);
 			} catch (_) {
 				_usingCtx3.e = _;
 			} finally {
@@ -4115,12 +4326,13 @@ function createAg(root, options) {
 				const t = performance.now();
 				layoutPhase(root, cols, rows);
 				tLayout = performance.now() - t;
-				log$1.debug?.(`layout: ${tLayout.toFixed(2)}ms`);
+				log.debug?.(`layout: ${tLayout.toFixed(2)}ms`);
 			} catch (_) {
 				_usingCtx4.e = _;
 			} finally {
 				_usingCtx4.d();
 			}
+			strictLayoutOverflowCheck(root);
 			if (!hasScroll || !hasSticky) {
 				const features = detectPipelineFeatures(root);
 				if (features.hasScroll) hasScroll = true;
@@ -4182,9 +4394,9 @@ function createAg(root, options) {
 				tNotify
 			};
 		} catch (_) {
-			_usingCtx$2.e = _;
+			_usingCtx$1.e = _;
 		} finally {
-			_usingCtx$2.d();
+			_usingCtx$1.d();
 		}
 	}
 	function doRender(opts) {
@@ -4196,9 +4408,17 @@ function createAg(root, options) {
 			const t = performance.now();
 			buffer = renderPhase(root, prevBuffer, ctx);
 			tContent = performance.now() - t;
-			log$1.debug?.(`content: ${tContent.toFixed(2)}ms`);
+			log.debug?.(`content: ${tContent.toFixed(2)}ms`);
+		}
+		let carryForwardBuffer;
+		if (hasBackdropMarkers(root)) {
+			carryForwardBuffer = buffer.clone();
+			if (!opts?.fresh) _prevBuffer = carryForwardBuffer;
+			applyBackdropFade(root, buffer, { colorLevel });
+		} else {
+			carryForwardBuffer = buffer;
+			if (!opts?.fresh) _prevBuffer = buffer;
 		}
-		if (!opts?.fresh) _prevBuffer = buffer;
 		clearDirtyTracking();
 		const acc = globalThis.__silvery_bench_phases;
 		if (acc) {
@@ -4208,6 +4428,7 @@ function createAg(root, options) {
 		return {
 			frame: createTextFrame(buffer),
 			buffer,
+			carryForwardBuffer,
 			prevBuffer,
 			tContent
 		};
@@ -4226,10 +4447,8 @@ function createAg(root, options) {
 			prevScrollRect: null,
 			prevScreenRect: null,
 			layoutChangedThisFrame: -1,
-			layoutDirty: true,
 			dirtyBits: 31,
-			dirtyEpoch: getRenderEpoch(),
-			layoutSubscribers: /* @__PURE__ */ new Set()
+			dirtyEpoch: getRenderEpoch()
 		};
 	}
 	function agInsertChild(parent, child, index) {
@@ -4262,6 +4481,7 @@ function createAg(root, options) {
 			return {
 				frame: result.frame,
 				buffer: result.buffer,
+				carryForwardBuffer: result.carryForwardBuffer,
 				prevBuffer: result.prevBuffer
 			};
 		},
@@ -4289,99 +4509,207 @@ function createAg(root, options) {
 	};
 }
 //#endregion
-//#region packages/ag-term/src/pipeline/index.ts
+//#region packages/ag-react/src/reconciler/string-reconciler.ts
 /**
-* Silvery Render Pipeline
+* Separate React reconciler instance for renderStringSync.
 *
-* The 5-phase rendering architecture:
+* renderStringSync may be called from within React effects (e.g., useScrollback
+* freezing items to scrollback). If it uses the same reconciler singleton as the
+* main render tree, this causes re-entrancy: the nested reconciliation interferes
+* with the outer one, producing empty output.
 *
-* Phase 0: RECONCILIATION (React)
-*   React reconciliation builds the SilveryNode tree.
-*   Components register layout constraints via props.
+* By using a dedicated reconciler instance, renderStringSync operates on an
+* independent fiber tree with no shared reconciler state.
+*/
+/**
+* Dedicated reconciler for string rendering.
 *
-* Phase 1: MEASURE (for fit-content nodes)
-*   Traverse nodes with width/height="fit-content"
-*   Measure intrinsic content size
-*   Set Yoga constraints based on measurement
+* Uses the same host config functions but overrides isPrimaryRenderer to false,
+* since this is a secondary renderer used only for one-shot string rendering.
+* This avoids conflicts with the main reconciler's hook ownership.
+*/
+const stringReconciler = Reconciler({
+	...hostConfig,
+	isPrimaryRenderer: false
+});
+//#endregion
+//#region packages/ag-react/src/render-string.tsx
+/**
+* renderString - Static one-shot rendering to string
 *
-* Phase 2: LAYOUT
-*   Run yoga.calculateLayout()
-*   Propagate computed dimensions to all nodes
-*   Notify useBoxRect() subscribers
+* Renders a React element to a string without needing a terminal.
+* Use for:
+* - CI output (no cursor control needed)
+* - Piped output
+* - One-shot reports/summaries
+* - Testing component output
 *
-* Phase 3: CONTENT RENDER
-*   Render each node to the TerminalBuffer
-*   Handle text truncation, styling, borders
+* @example
+* ```tsx
+* import { renderString, Box, Text } from '@silvery/ag-react'
 *
-* Phase 4: DIFF & OUTPUT
-*   Compare current buffer with previous
-*   Emit minimal ANSI sequences for changes
+* // Basic usage
+* const output = renderString(<Summary stats={stats} />)
+* console.log(output)
+*
+* // Custom width
+* const wide = renderString(<Report />, { width: 120 })
+*
+* // Plain text (no ANSI)
+* const plain = renderString(<Report />, { plain: true })
+* ```
 */
-const log = createLogger("silvery:render");
-createLogger("@silvery/ag-react");
+init_buffer();
+let engineInitialized = false;
+async function ensureLayoutEngine() {
+	if (engineInitialized || isLayoutEngineInitialized()) return;
+	const { ensureDefaultLayoutEngine } = await import("./layout-engine--drvrWjD.mjs");
+	await ensureDefaultLayoutEngine();
+	engineInitialized = true;
+}
 /**
-* Execute the full render pipeline.
+* Render a React element to a string (async version).
+*
+* Automatically initializes the layout engine if needed.
+* Use this when you're not sure if the layout engine is ready.
 *
-* Pass null for prevBuffer on the first render; pass the returned buffer on
-* subsequent renders to enable incremental content rendering (<1ms vs 20-30ms).
-* SILVERY_DEV=1 warns at runtime if prevBuffer is null after the first frame.
+* @param element - React element to render
+* @param options - Render options (width, height, plain)
+* @returns Rendered string (with or without ANSI codes)
+*
+* @example
+* ```tsx
+* const output = await renderString(<Summary stats={stats} />)
+* console.log(output)
+* ```
 */
-function executeRender(root, width, height, prevBuffer, options = "fullscreen", config) {
-	if (config?.measurer) return runWithMeasurer(config.measurer, () => {
-		return executeRenderCore(root, width, height, prevBuffer, options, config);
-	});
-	return executeRenderCore(root, width, height, prevBuffer, options, config);
-}
-/** Internal: runs the full pipeline, delegating layout + render to createAg. */
-function executeRenderCore(root, width, height, prevBuffer, options = "fullscreen", config) {
-	const { mode = "fullscreen", skipLayoutNotifications = false, skipScrollStateUpdates = false, scrollbackOffset = 0, termRows, cursorPos } = typeof options === "string" ? { mode: options } : options;
-	if (process?.env?.SILVERY_DEV && prevBuffer === null && root.prevLayout !== null && !skipLayoutNotifications) log.warn?.("executeRender called with prevBuffer=null on frame 2+ — incremental content rendering is disabled (full render every frame). Track the returned buffer and pass it as prevBuffer on subsequent renders.");
-	const start = performance.now();
-	const ag = createAg(root, { measurer: config?.measurer });
-	ag.layout({
-		cols: width,
-		rows: height
-	}, {
-		skipLayoutNotifications,
-		skipScrollStateUpdates
+async function renderString(element, options = {}) {
+	await ensureLayoutEngine();
+	return renderStringSync(element, options);
+}
+/**
+* Render a React element to a string (sync version).
+*
+* Requires the layout engine to be already initialized.
+* Throws if the layout engine is not ready.
+*
+* @param element - React element to render
+* @param options - Render options (width, height, plain)
+* @returns Rendered string (with or without ANSI codes)
+*
+* @example
+* ```tsx
+* // After layout engine is initialized
+* const output = renderStringSync(<Summary stats={stats} />)
+* console.log(output)
+* ```
+*/
+function renderStringSync(element, options = {}) {
+	if (!isLayoutEngineInitialized()) throw new Error("Layout engine not initialized. Use renderString() (async) or initialize with setLayoutEngine().");
+	const { width = 80, height = 24, plain = false, pipelineConfig, trimTrailingWhitespace = true, trimEmptyLines = true, onContentHeight, alwaysStyled = false } = options;
+	let hadReactCommit = false;
+	const container = createContainer(() => {
+		hadReactCommit = true;
 	});
-	const { buffer } = ag.render({ prevBuffer });
-	const tLayout = performance.now() - start;
-	let output;
-	let tOutput;
-	{
-		const t4 = performance.now();
-		const outputFn = config?.outputPhaseFn ?? outputPhase;
-		try {
-			output = outputFn(prevBuffer, buffer, mode, scrollbackOffset, termRows, cursorPos);
-		} catch (e) {
-			if (e instanceof Error) e.__silvery_buffer = buffer;
-			throw e;
-		}
-		tOutput = performance.now() - t4;
-		log.debug?.(`output: ${tOutput.toFixed(2)}ms (${output.length} bytes)`);
-	}
-	const total = performance.now() - start;
-	globalThis.__silvery_last_pipeline = {
-		layout: tLayout,
-		output: tOutput,
-		total,
-		incremental: prevBuffer !== null
+	let uncaughtError = null;
+	const onUncaughtError = (error) => {
+		uncaughtError = error;
 	};
-	globalThis.__silvery_render_count = (globalThis.__silvery_render_count ?? 0) + 1;
-	const acc = globalThis.__silvery_bench_phases;
-	if (acc) {
-		acc.output += tOutput;
-		acc.total += total;
-		acc.pipelineCalls += 1;
-	}
-	log.debug?.(`pipeline: layout+render=${tLayout.toFixed(1)}ms output=${tOutput.toFixed(1)}ms total=${total.toFixed(1)}ms`);
-	return {
-		output,
-		buffer
+	const fiberRoot = stringReconciler.createContainer(container, 1, null, false, null, "", onUncaughtError, () => {}, () => {}, null);
+	const mockStdout = {
+		columns: width,
+		rows: height,
+		write: () => true,
+		isTTY: false,
+		on: () => mockStdout,
+		off: () => mockStdout,
+		once: () => mockStdout,
+		removeListener: () => mockStdout,
+		addListener: () => mockStdout
 	};
+	const mockTerm = createTerm({ color: plain ? null : "truecolor" });
+	const wrapped = React.createElement(TermContext.Provider, { value: mockTerm }, React.createElement(StdoutContext.Provider, { value: {
+		stdout: mockStdout,
+		write: () => {}
+	} }, React.createElement(StderrContext.Provider, { value: {
+		stderr: process.stderr,
+		write: (data) => {
+			process.stderr.write(data);
+		}
+	} }, element)));
+	withActEnvironment(() => {
+		act(() => {
+			stringReconciler.updateContainerSync(wrapped, fiberRoot, null, null);
+			stringReconciler.flushSyncWork();
+		});
+	});
+	if (uncaughtError) throw uncaughtError instanceof Error ? uncaughtError : new Error(String(uncaughtError));
+	let buffer;
+	let rootNode;
+	const MAX_ITERATIONS = 5;
+	for (let i = 0; i < MAX_ITERATIONS; i++) {
+		hadReactCommit = false;
+		withActEnvironment(() => {
+			act(() => {
+				const root = getContainerRoot(container);
+				rootNode = root;
+				const measurer = pipelineConfig?.measurer;
+				const doRender = () => {
+					const ag = createAg(root, { measurer });
+					ag.layout({
+						cols: width,
+						rows: height
+					});
+					return ag.render();
+				};
+				buffer = (measurer ? runWithMeasurer(measurer, doRender) : doRender()).buffer;
+			});
+			if (!hadReactCommit) act(() => {
+				stringReconciler.flushSyncWork();
+			});
+		});
+		if (!hadReactCommit) break;
+	}
+	if (onContentHeight && rootNode) {
+		let maxBottom = 0;
+		let hasChildren = false;
+		for (const child of rootNode.children) if (child.boxRect) {
+			hasChildren = true;
+			const props = child.props;
+			const mb = props.marginBottom ?? props.marginY ?? props.margin ?? 0;
+			const childBottom = child.boxRect.y + child.boxRect.height + mb;
+			if (childBottom > maxBottom) maxBottom = childBottom;
+		}
+		onContentHeight(hasChildren ? maxBottom : 0);
+	}
+	withActEnvironment(() => {
+		act(() => {
+			stringReconciler.updateContainerSync(null, fiberRoot, null, null);
+			stringReconciler.flushSyncWork();
+		});
+	});
+	return plain && !alwaysStyled ? bufferToText(buffer, {
+		trimTrailingWhitespace,
+		trimEmptyLines
+	}) : bufferToStyledText(buffer, {
+		trimTrailingWhitespace,
+		trimEmptyLines
+	});
+}
+/**
+* Run a function with IS_REACT_ACT_ENVIRONMENT temporarily set to true.
+* This ensures act() captures forceUpdate/setState from layout notifications.
+*/
+function withActEnvironment(fn) {
+	const prev = globalThis.IS_REACT_ACT_ENVIRONMENT;
+	globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+	try {
+		fn();
+	} finally {
+		globalThis.IS_REACT_ACT_ENVIRONMENT = prev;
+	}
 }
 //#endregion
-export { signal as i, createAg as n, _usingCtx as r, executeRender as t };
+export { _usingCtx as i, renderStringSync as n, createAg as r, renderString as t };
 
-//# sourceMappingURL=pipeline-BmfaZb1O.mjs.map
+//# sourceMappingURL=render-string-DVfgc8xr.mjs.map