@flowtty/core 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/host/index.js

@@ -1,357 +1,383 @@
-import { wrapText, Buffer, BORDER_CHARS } from '../chunk-D6HW2BNM.js';
-export { BORDER_CHARS } from '../chunk-D6HW2BNM.js';
-import { loadYoga, FlexDirection, PositionType, Edge, Gutter, Display, Wrap, Justify, Align, MeasureMode } from 'yoga-layout/load';
-
-var yogaPromise = null;
+import { a as Buffer, n as BORDER_CHARS, t as wrapText } from "../wrap-D5f0P1iA.js";
+import { Align, Display, Edge, FlexDirection, Gutter, Justify, MeasureMode, PositionType, Wrap, loadYoga } from "yoga-layout/load";
+//#region src/host/yoga.ts
+let yogaPromise = null;
 function getYoga() {
-  yogaPromise ??= loadYoga();
-  return yogaPromise;
+	yogaPromise ??= loadYoga();
+	return yogaPromise;
 }
-
-// src/host/host.ts
+//#endregion
+//#region src/host/host.ts
 function createInstance(type, props, Yoga) {
-  const node = Yoga.Node.create();
-  const inst = { type: "box", props, yogaNode: node, children: [] };
-  applyProps(inst, props);
-  return inst;
+	const inst = {
+		type: "box",
+		props,
+		yogaNode: Yoga.Node.create(),
+		children: []
+	};
+	applyProps(inst, props, Yoga);
+	return inst;
 }
 function createTextInstance(text, _Yoga) {
-  return { type: "text", text };
+	return {
+		type: "text",
+		text
+	};
 }
 function applyProps(inst, props, _Yoga) {
-  inst.props = props;
-  const n = inst.yogaNode;
-  if (typeof props.width === "number") n.setWidth(props.width);
-  else if (typeof props.width === "string" && props.width.endsWith("%")) {
-    n.setWidthPercent(parseFloat(props.width));
-  } else n.setWidthAuto();
-  if (typeof props.height === "number") n.setHeight(props.height);
-  else if (typeof props.height === "string" && props.height.endsWith("%")) {
-    n.setHeightPercent(parseFloat(props.height));
-  } else n.setHeightAuto();
-  n.setFlexDirection(
-    props.flexDirection === "row" ? FlexDirection.Row : FlexDirection.Column
-  );
-  n.setPositionType(props.position === "absolute" ? PositionType.Absolute : PositionType.Static);
-  if (props.top !== void 0) n.setPosition(Edge.Top, props.top);
-  if (props.left !== void 0) n.setPosition(Edge.Left, props.left);
-  if (props.right !== void 0) n.setPosition(Edge.Right, props.right);
-  if (props.bottom !== void 0) n.setPosition(Edge.Bottom, props.bottom);
-  const borderWidth = props.border ? 1 : 0;
-  n.setBorder(Edge.Top, borderWidth);
-  n.setBorder(Edge.Right, borderWidth);
-  n.setBorder(Edge.Bottom, borderWidth);
-  n.setBorder(Edge.Left, borderWidth);
-  const padTop = props.paddingTop ?? props.paddingY ?? props.padding ?? 0;
-  const padRight = props.paddingRight ?? props.paddingX ?? props.padding ?? 0;
-  const padBottom = props.paddingBottom ?? props.paddingY ?? props.padding ?? 0;
-  const padLeft = props.paddingLeft ?? props.paddingX ?? props.padding ?? 0;
-  n.setPadding(Edge.Top, padTop);
-  n.setPadding(Edge.Right, padRight);
-  n.setPadding(Edge.Bottom, padBottom);
-  n.setPadding(Edge.Left, padLeft);
-  const marTop = props.marginTop ?? props.marginY ?? props.margin ?? 0;
-  const marRight = props.marginRight ?? props.marginX ?? props.margin ?? 0;
-  const marBottom = props.marginBottom ?? props.marginY ?? props.margin ?? 0;
-  const marLeft = props.marginLeft ?? props.marginX ?? props.margin ?? 0;
-  n.setMargin(Edge.Top, marTop);
-  n.setMargin(Edge.Right, marRight);
-  n.setMargin(Edge.Bottom, marBottom);
-  n.setMargin(Edge.Left, marLeft);
-  const rGap = props.rowGap ?? props.gap ?? 0;
-  const cGap = props.columnGap ?? props.gap ?? 0;
-  n.setGap(Gutter.Row, rGap);
-  n.setGap(Gutter.Column, cGap);
-  n.setFlexGrow(props.flexGrow ?? 0);
-  n.setFlexShrink(props.flexShrink ?? 0);
-  if (typeof props.flexBasis === "number") {
-    n.setFlexBasis(props.flexBasis);
-  } else if (typeof props.flexBasis === "string" && props.flexBasis.endsWith("%")) {
-    n.setFlexBasisPercent(parseFloat(props.flexBasis));
-  } else {
-    n.setFlexBasisAuto();
-  }
-  n.setMinWidth(props.minWidth);
-  n.setMaxWidth(props.maxWidth);
-  n.setMinHeight(props.minHeight);
-  n.setMaxHeight(props.maxHeight);
-  n.setAspectRatio(props.aspectRatio);
-  n.setDisplay(props.display === "none" ? Display.None : Display.Flex);
-  n.setFlexWrap(wrapMap(props.flexWrap));
-  n.setAlignContent(acMap(props.alignContent));
-  n.setJustifyContent(jcMap(props.justifyContent));
-  n.setAlignItems(aiMap(props.alignItems));
+	inst.props = props;
+	const n = inst.yogaNode;
+	if (typeof props.width === "number") n.setWidth(props.width);
+	else if (typeof props.width === "string" && props.width.endsWith("%")) n.setWidthPercent(parseFloat(props.width));
+	else n.setWidthAuto();
+	if (typeof props.height === "number") n.setHeight(props.height);
+	else if (typeof props.height === "string" && props.height.endsWith("%")) n.setHeightPercent(parseFloat(props.height));
+	else n.setHeightAuto();
+	n.setFlexDirection(props.flexDirection === "row" ? FlexDirection.Row : FlexDirection.Column);
+	const isViewport = props.scrollTop !== void 0 || props.scrollBottom !== void 0;
+	n.setPositionType(props.position === "absolute" ? PositionType.Absolute : isViewport ? PositionType.Relative : PositionType.Static);
+	if (props.top !== void 0) n.setPosition(Edge.Top, props.top);
+	if (props.left !== void 0) n.setPosition(Edge.Left, props.left);
+	if (props.right !== void 0) n.setPosition(Edge.Right, props.right);
+	if (props.bottom !== void 0) n.setPosition(Edge.Bottom, props.bottom);
+	const borderWidth = props.border ? 1 : 0;
+	n.setBorder(Edge.Top, borderWidth);
+	n.setBorder(Edge.Right, borderWidth);
+	n.setBorder(Edge.Bottom, borderWidth);
+	n.setBorder(Edge.Left, borderWidth);
+	const padTop = props.paddingTop ?? props.paddingY ?? props.padding ?? 0;
+	const padRight = props.paddingRight ?? props.paddingX ?? props.padding ?? 0;
+	const padBottom = props.paddingBottom ?? props.paddingY ?? props.padding ?? 0;
+	const padLeft = props.paddingLeft ?? props.paddingX ?? props.padding ?? 0;
+	n.setPadding(Edge.Top, padTop);
+	n.setPadding(Edge.Right, padRight);
+	n.setPadding(Edge.Bottom, padBottom);
+	n.setPadding(Edge.Left, padLeft);
+	const marTop = props.marginTop ?? props.marginY ?? props.margin ?? 0;
+	const marRight = props.marginRight ?? props.marginX ?? props.margin ?? 0;
+	const marBottom = props.marginBottom ?? props.marginY ?? props.margin ?? 0;
+	const marLeft = props.marginLeft ?? props.marginX ?? props.margin ?? 0;
+	n.setMargin(Edge.Top, marTop);
+	n.setMargin(Edge.Right, marRight);
+	n.setMargin(Edge.Bottom, marBottom);
+	n.setMargin(Edge.Left, marLeft);
+	const rGap = props.rowGap ?? props.gap ?? 0;
+	const cGap = props.columnGap ?? props.gap ?? 0;
+	n.setGap(Gutter.Row, rGap);
+	n.setGap(Gutter.Column, cGap);
+	n.setFlexGrow(props.flexGrow ?? 0);
+	n.setFlexShrink(props.flexShrink ?? 0);
+	if (typeof props.flexBasis === "number") n.setFlexBasis(props.flexBasis);
+	else if (typeof props.flexBasis === "string" && props.flexBasis.endsWith("%")) n.setFlexBasisPercent(parseFloat(props.flexBasis));
+	else n.setFlexBasisAuto();
+	n.setMinWidth(props.minWidth);
+	n.setMaxWidth(props.maxWidth);
+	n.setMinHeight(props.minHeight);
+	n.setMaxHeight(props.maxHeight);
+	n.setAspectRatio(props.aspectRatio);
+	n.setDisplay(props.display === "none" ? Display.None : Display.Flex);
+	n.setFlexWrap(wrapMap(props.flexWrap));
+	n.setAlignContent(acMap(props.alignContent));
+	n.setJustifyContent(jcMap(props.justifyContent));
+	n.setAlignItems(aiMap(props.alignItems));
 }
 function wrapMap(v) {
-  switch (v) {
-    case "wrap":
-      return Wrap.Wrap;
-    case "wrap-reverse":
-      return Wrap.WrapReverse;
-    default:
-      return Wrap.NoWrap;
-  }
+	switch (v) {
+		case "wrap": return Wrap.Wrap;
+		case "wrap-reverse": return Wrap.WrapReverse;
+		default: return Wrap.NoWrap;
+	}
 }
 function jcMap(v) {
-  switch (v) {
-    case "center":
-      return Justify.Center;
-    case "flex-end":
-      return Justify.FlexEnd;
-    case "space-between":
-      return Justify.SpaceBetween;
-    case "space-around":
-      return Justify.SpaceAround;
-    case "space-evenly":
-      return Justify.SpaceEvenly;
-    default:
-      return Justify.FlexStart;
-  }
+	switch (v) {
+		case "center": return Justify.Center;
+		case "flex-end": return Justify.FlexEnd;
+		case "space-between": return Justify.SpaceBetween;
+		case "space-around": return Justify.SpaceAround;
+		case "space-evenly": return Justify.SpaceEvenly;
+		default: return Justify.FlexStart;
+	}
 }
 function aiMap(v) {
-  switch (v) {
-    case "center":
-      return Align.Center;
-    case "flex-end":
-      return Align.FlexEnd;
-    case "flex-start":
-      return Align.FlexStart;
-    // Default 'stretch' (matches React Native; deviates from CSS flex-start).
-    // Rationale: most TUI use cases want children to fill cross-axis (e.g. a
-    // column dialog wants its TextInput/buttons to span the dialog width); CSS's
-    // flex-start default forces content-sizing which causes percentage children
-    // to collapse and onLayout-driven scroll to misreport viewport widths.
-    default:
-      return Align.Stretch;
-  }
+	switch (v) {
+		case "center": return Align.Center;
+		case "flex-end": return Align.FlexEnd;
+		case "flex-start": return Align.FlexStart;
+		default: return Align.Stretch;
+	}
 }
 function acMap(v) {
-  switch (v) {
-    case "flex-end":
-      return Align.FlexEnd;
-    case "center":
-      return Align.Center;
-    case "space-between":
-      return Align.SpaceBetween;
-    case "space-around":
-      return Align.SpaceAround;
-    case "space-evenly":
-      return Align.SpaceEvenly;
-    case "stretch":
-      return Align.Stretch;
-    default:
-      return Align.FlexStart;
-  }
+	switch (v) {
+		case "flex-end": return Align.FlexEnd;
+		case "center": return Align.Center;
+		case "space-between": return Align.SpaceBetween;
+		case "space-around": return Align.SpaceAround;
+		case "space-evenly": return Align.SpaceEvenly;
+		case "stretch": return Align.Stretch;
+		default: return Align.FlexStart;
+	}
 }
 function measureText(text) {
-  const lines = text.split("\n");
-  const width = lines.reduce((m, l) => Math.max(m, [...l].length), 0);
-  return { width, height: lines.length };
+	const lines = text.split("\n");
+	return {
+		width: lines.reduce((m, l) => Math.max(m, [...l].length), 0),
+		height: lines.length
+	};
 }
 function ownText(inst) {
-  return inst.children.filter((c) => c.type === "text").map((c) => c.text).join("");
+	return inst.children.filter((c) => c.type === "text").map((c) => c.text).join("");
 }
 function refreshMeasure(inst, _Yoga) {
-  const hasText = inst.children.some((c) => c.type === "text");
-  const hasBox = inst.children.some((c) => c.type === "box");
-  if (hasText && !hasBox) {
-    const text = ownText(inst);
-    const mode = inst.props.wrap ?? "none";
-    inst.yogaNode.setMeasureFunc((width, widthMode) => {
-      if (mode !== "none" && (widthMode === MeasureMode.Exactly || widthMode === MeasureMode.AtMost) && Number.isFinite(width)) {
-        const cap = Math.max(0, Math.floor(width));
-        const lines = wrapText(text, cap, mode);
-        const longest = lines.reduce((m, l) => Math.max(m, [...l].length), 0);
-        return { width: longest, height: lines.length };
-      }
-      return measureText(text);
-    });
-    inst.yogaNode.markDirty();
-  } else {
-    inst.yogaNode.setMeasureFunc(null);
-  }
+	const hasText = inst.children.some((c) => c.type === "text");
+	const hasBox = inst.children.some((c) => c.type === "box");
+	if (hasText && !hasBox) {
+		const text = ownText(inst);
+		const mode = inst.props.wrap ?? "none";
+		inst.yogaNode.setMeasureFunc((width, widthMode) => {
+			if (mode !== "none" && (widthMode === MeasureMode.Exactly || widthMode === MeasureMode.AtMost) && Number.isFinite(width)) {
+				const lines = wrapText(text, Math.max(0, Math.floor(width)), mode);
+				return {
+					width: lines.reduce((m, l) => Math.max(m, [...l].length), 0),
+					height: lines.length
+				};
+			}
+			return measureText(text);
+		});
+		inst.yogaNode.markDirty();
+	} else inst.yogaNode.setMeasureFunc(null);
+}
+function detachForMove(parent, child) {
+	const i = parent.children.indexOf(child);
+	if (i < 0) return;
+	parent.children.splice(i, 1);
+	if (child.type === "box") parent.yogaNode.removeChild(child.yogaNode);
 }
 function appendChild(parent, child, Yoga) {
-  parent.children.push(child);
-  if (child.type === "box") {
-    parent.yogaNode.setMeasureFunc(null);
-    parent.yogaNode.insertChild(child.yogaNode, parent.yogaNode.getChildCount());
-  } else {
-    child.parent = parent;
-  }
-  refreshMeasure(parent);
+	detachForMove(parent, child);
+	parent.children.push(child);
+	if (child.type === "box") {
+		parent.yogaNode.setMeasureFunc(null);
+		parent.yogaNode.insertChild(child.yogaNode, parent.yogaNode.getChildCount());
+	} else child.parent = parent;
+	refreshMeasure(parent, Yoga);
 }
 function removeChild(parent, child, Yoga) {
-  const i = parent.children.indexOf(child);
-  if (i >= 0) parent.children.splice(i, 1);
-  if (child.type === "box") {
-    parent.yogaNode.removeChild(child.yogaNode);
-    child.yogaNode.freeRecursive();
-  } else {
-    child.parent = void 0;
-  }
-  refreshMeasure(parent);
+	const i = parent.children.indexOf(child);
+	if (i >= 0) parent.children.splice(i, 1);
+	if (child.type === "box") {
+		parent.yogaNode.removeChild(child.yogaNode);
+		child.yogaNode.freeRecursive();
+	} else child.parent = void 0;
+	refreshMeasure(parent, Yoga);
 }
 function insertBefore(parent, child, before, Yoga) {
-  const i = parent.children.indexOf(before);
-  parent.children.splice(i < 0 ? parent.children.length : i, 0, child);
-  if (child.type === "box") {
-    const boxIndex = parent.children.filter((c) => c.type === "box").indexOf(child);
-    parent.yogaNode.setMeasureFunc(null);
-    parent.yogaNode.insertChild(child.yogaNode, boxIndex);
-  } else {
-    child.parent = parent;
-  }
-  refreshMeasure(parent);
+	detachForMove(parent, child);
+	const i = parent.children.indexOf(before);
+	parent.children.splice(i < 0 ? parent.children.length : i, 0, child);
+	if (child.type === "box") {
+		const boxIndex = parent.children.filter((c) => c.type === "box").indexOf(child);
+		parent.yogaNode.setMeasureFunc(null);
+		parent.yogaNode.insertChild(child.yogaNode, boxIndex);
+	} else child.parent = parent;
+	refreshMeasure(parent, Yoga);
 }
-
-// src/host/layout.ts
+//#endregion
+//#region src/host/layout.ts
 function computeLayout(container, width, height) {
-  for (const root of container.children) {
-    root.yogaNode.calculateLayout(width, height);
-  }
+	for (const root of container.children) root.yogaNode.calculateLayout(width, height);
 }
 function layoutOf(inst, offsetX = 0, offsetY = 0) {
-  const n = inst.yogaNode;
-  return {
-    left: offsetX + n.getComputedLeft(),
-    top: offsetY + n.getComputedTop(),
-    width: n.getComputedWidth(),
-    height: n.getComputedHeight()
-  };
+	const n = inst.yogaNode;
+	return {
+		left: offsetX + n.getComputedLeft(),
+		top: offsetY + n.getComputedTop(),
+		width: n.getComputedWidth(),
+		height: n.getComputedHeight()
+	};
 }
-
-// src/host/paint.ts
+//#endregion
+//#region src/host/paint.ts
 function paint(container, width, height) {
-  const buffer = new Buffer(width, height);
-  for (const root of container.children) paintInstance(root, buffer, 0, 0);
-  return buffer;
+	const buffer = new Buffer(width, height);
+	for (const root of container.children) paintInstance(root, buffer, 0, 0);
+	return buffer;
 }
 function textStyleOf(inst) {
-  const p = inst.props;
-  const style = {};
-  if (p.color !== void 0) style.fg = p.color;
-  if (p.bold) style.bold = true;
-  if (p.dim) style.dim = true;
-  if (p.underline) style.underline = true;
-  if (p.inverse) style.inverse = true;
-  if (p.strikethrough) style.strikethrough = true;
-  if (p.link !== void 0) style.link = p.link;
-  if (p.backgroundColor !== void 0) style.bg = p.backgroundColor;
-  return style;
+	const p = inst.props;
+	const style = {};
+	if (p.color !== void 0) style.fg = p.color;
+	if (p.bold) style.bold = true;
+	if (p.dim) style.dim = true;
+	if (p.underline) style.underline = true;
+	if (p.inverse) style.inverse = true;
+	if (p.strikethrough) style.strikethrough = true;
+	if (p.link !== void 0) style.link = p.link;
+	if (p.backgroundColor !== void 0) style.bg = p.backgroundColor;
+	return style;
 }
 function setClipped(buffer, x, y, char, style, clip) {
-  if (clip !== null) {
-    if (x < clip.left || y < clip.top || x >= clip.left + clip.width || y >= clip.top + clip.height) return;
-  }
-  buffer.set(x, y, char, style);
+	if (clip !== null) {
+		if (x < clip.left || y < clip.top || x >= clip.left + clip.width || y >= clip.top + clip.height) return;
+	}
+	buffer.set(x, y, char, style);
 }
 function intersectRects(a, b) {
-  if (a === null) return b;
-  const left = Math.max(a.left, b.left);
-  const top = Math.max(a.top, b.top);
-  const right = Math.min(a.left + a.width, b.left + b.width);
-  const bottom = Math.min(a.top + a.height, b.top + b.height);
-  if (right <= left || bottom <= top) return { left, top, width: 0, height: 0 };
-  return { left, top, width: right - left, height: bottom - top };
+	if (a === null) return b;
+	const left = Math.max(a.left, b.left);
+	const top = Math.max(a.top, b.top);
+	const right = Math.min(a.left + a.width, b.left + b.width);
+	const bottom = Math.min(a.top + a.height, b.top + b.height);
+	if (right <= left || bottom <= top) return {
+		left,
+		top,
+		width: 0,
+		height: 0
+	};
+	return {
+		left,
+		top,
+		width: right - left,
+		height: bottom - top
+	};
 }
-function paintBorder(inst, buffer, box, clip) {
-  const style = inst.props.border;
-  if (!style) return;
-  if (box.width < 2 || box.height < 2) return;
-  const chars = BORDER_CHARS[style];
-  const cellStyle = {};
-  if (inst.props.borderColor !== void 0) cellStyle.fg = inst.props.borderColor;
-  const x0 = box.left;
-  const y0 = box.top;
-  const x1 = box.left + box.width - 1;
-  const y1 = box.top + box.height - 1;
-  setClipped(buffer, x0, y0, chars.tl, cellStyle, clip);
-  setClipped(buffer, x1, y0, chars.tr, cellStyle, clip);
-  setClipped(buffer, x0, y1, chars.bl, cellStyle, clip);
-  setClipped(buffer, x1, y1, chars.br, cellStyle, clip);
-  for (let x = x0 + 1; x < x1; x++) {
-    setClipped(buffer, x, y0, chars.h, cellStyle, clip);
-    setClipped(buffer, x, y1, chars.h, cellStyle, clip);
-  }
-  for (let y = y0 + 1; y < y1; y++) {
-    setClipped(buffer, x0, y, chars.v, cellStyle, clip);
-    setClipped(buffer, x1, y, chars.v, cellStyle, clip);
-  }
-  const title = inst.props.borderTitle;
-  if (title && title !== "") {
-    const avail = box.width - 4;
-    if (avail >= 1) {
-      const raw = ` ${title} `;
-      const titleChars = [...raw];
-      const drawN = Math.min(titleChars.length, avail);
-      for (let i = 0; i < drawN; i++) {
-        const ch = i === drawN - 1 && titleChars.length > avail ? "\u2026" : titleChars[i];
-        setClipped(buffer, x0 + 2 + i, y0, ch, cellStyle, clip);
-      }
-    }
-  }
+function paintBorder(inst, buffer, box, clip, effectiveBg) {
+	const style = inst.props.border;
+	if (!style) return;
+	if (box.width < 2 || box.height < 2) return;
+	const chars = BORDER_CHARS[style];
+	const cellStyle = {};
+	if (inst.props.borderColor !== void 0) cellStyle.fg = inst.props.borderColor;
+	const bg = inst.props.borderBackgroundColor ?? effectiveBg;
+	if (bg !== void 0 && bg !== "default") cellStyle.bg = bg;
+	const x0 = box.left;
+	const y0 = box.top;
+	const x1 = box.left + box.width - 1;
+	const y1 = box.top + box.height - 1;
+	setClipped(buffer, x0, y0, chars.tl, cellStyle, clip);
+	setClipped(buffer, x1, y0, chars.tr, cellStyle, clip);
+	setClipped(buffer, x0, y1, chars.bl, cellStyle, clip);
+	setClipped(buffer, x1, y1, chars.br, cellStyle, clip);
+	for (let x = x0 + 1; x < x1; x++) {
+		setClipped(buffer, x, y0, chars.h, cellStyle, clip);
+		setClipped(buffer, x, y1, chars.h, cellStyle, clip);
+	}
+	for (let y = y0 + 1; y < y1; y++) {
+		setClipped(buffer, x0, y, chars.v, cellStyle, clip);
+		setClipped(buffer, x1, y, chars.v, cellStyle, clip);
+	}
+	const title = inst.props.borderTitle;
+	if (title && title !== "") {
+		const avail = box.width - 4;
+		if (avail >= 1) {
+			const titleChars = [...` ${title} `];
+			const drawN = Math.min(titleChars.length, avail);
+			for (let i = 0; i < drawN; i++) {
+				const ch = i === drawN - 1 && titleChars.length > avail ? "…" : titleChars[i];
+				setClipped(buffer, x0 + 2 + i, y0, ch, cellStyle, clip);
+			}
+		}
+	}
 }
 function contentRectOf(inst, box) {
-  const n = inst.yogaNode;
-  const padT = n.getComputedPadding(Edge.Top) + n.getComputedBorder(Edge.Top);
-  const padR = n.getComputedPadding(Edge.Right) + n.getComputedBorder(Edge.Right);
-  const padB = n.getComputedPadding(Edge.Bottom) + n.getComputedBorder(Edge.Bottom);
-  const padL = n.getComputedPadding(Edge.Left) + n.getComputedBorder(Edge.Left);
-  return {
-    left: box.left + padL,
-    top: box.top + padT,
-    width: Math.max(0, box.width - padL - padR),
-    height: Math.max(0, box.height - padT - padB)
-  };
+	const n = inst.yogaNode;
+	const padT = n.getComputedPadding(Edge.Top) + n.getComputedBorder(Edge.Top);
+	const padR = n.getComputedPadding(Edge.Right) + n.getComputedBorder(Edge.Right);
+	const padB = n.getComputedPadding(Edge.Bottom) + n.getComputedBorder(Edge.Bottom);
+	const padL = n.getComputedPadding(Edge.Left) + n.getComputedBorder(Edge.Left);
+	return {
+		left: box.left + padL,
+		top: box.top + padT,
+		width: Math.max(0, box.width - padL - padR),
+		height: Math.max(0, box.height - padT - padB)
+	};
+}
+function paddingRectOf(inst, box) {
+	const n = inst.yogaNode;
+	const t = n.getComputedBorder(Edge.Top);
+	const r = n.getComputedBorder(Edge.Right);
+	const b = n.getComputedBorder(Edge.Bottom);
+	const l = n.getComputedBorder(Edge.Left);
+	return {
+		left: box.left + l,
+		top: box.top + t,
+		width: Math.max(0, box.width - l - r),
+		height: Math.max(0, box.height - t - b)
+	};
 }
 function paintInstance(inst, buffer, offsetX, offsetY, inheritedBg = void 0, clip = null) {
-  if (inst.props.display === "none") return;
-  const box = layoutOf(inst, offsetX, offsetY);
-  inst.props.onLayout?.(box);
-  const ownBg = inst.props.backgroundColor;
-  const effectiveBg = ownBg ?? inheritedBg;
-  if (ownBg !== void 0) {
-    const fillStyle = ownBg === "default" ? {} : { bg: ownBg };
-    for (let y = box.top; y < box.top + box.height; y++) {
-      for (let x = box.left; x < box.left + box.width; x++) {
-        setClipped(buffer, x, y, " ", fillStyle, clip);
-      }
-    }
-  }
-  paintBorder(inst, buffer, box, clip);
-  const text = ownText(inst);
-  if (text) {
-    const content = contentRectOf(inst, box);
-    const mode = inst.props.wrap ?? "none";
-    const lines = mode === "none" ? text.split("\n") : wrapText(text, content.width, mode);
-    const textStyle = textStyleOf(inst);
-    if (textStyle.bg === void 0 && effectiveBg !== void 0) {
-      textStyle.bg = effectiveBg;
-    }
-    for (let row = 0; row < lines.length; row++) {
-      if (row >= content.height) break;
-      const chars = [...lines[row] ?? ""];
-      for (let col = 0; col < chars.length; col++) {
-        if (col >= content.width) break;
-        const ch = chars[col];
-        const safe = ch.charCodeAt(0) < 32 ? " " : ch;
-        setClipped(buffer, content.left + col, content.top + row, safe, textStyle, clip);
-      }
-    }
-  }
-  const childClip = inst.props.overflow === "hidden" ? intersectRects(clip, contentRectOf(inst, box)) : clip;
-  const stackFlow = [];
-  const absolutes = [];
-  for (const child of inst.children) {
-    if (child.type !== "box") continue;
-    (child.props.position === "absolute" ? absolutes : stackFlow).push(child);
-  }
-  const byZ = (a, b) => (a.props.zIndex ?? 0) - (b.props.zIndex ?? 0);
-  stackFlow.sort(byZ);
-  absolutes.sort(byZ);
-  for (const child of stackFlow) paintInstance(child, buffer, box.left, box.top, effectiveBg, childClip);
-  for (const child of absolutes) paintInstance(child, buffer, box.left, box.top, effectiveBg, childClip);
+	if (inst.props.display === "none") return;
+	const box = layoutOf(inst, offsetX, offsetY);
+	inst.props.onLayout?.(box);
+	const ownBg = inst.props.backgroundColor;
+	const effectiveBg = ownBg ?? inheritedBg;
+	const offscreen = clip !== null && (box.left >= clip.left + clip.width || box.left + box.width <= clip.left || box.top >= clip.top + clip.height || box.top + box.height <= clip.top);
+	if (!offscreen && inst.props.backdrop === "dim") for (let y = box.top; y < box.top + box.height; y++) for (let x = box.left; x < box.left + box.width; x++) {
+		if (x < 0 || y < 0 || x >= buffer.width || y >= buffer.height) continue;
+		const under = buffer.get(x, y);
+		if (under.style.dim && !under.style.bold) continue;
+		const { bold: _bold, ...rest } = under.style;
+		setClipped(buffer, x, y, under.char, {
+			...rest,
+			dim: true
+		}, clip);
+	}
+	if (!offscreen && ownBg !== void 0) {
+		const fillStyle = ownBg === "default" ? {} : { bg: ownBg };
+		for (let y = box.top; y < box.top + box.height; y++) for (let x = box.left; x < box.left + box.width; x++) setClipped(buffer, x, y, " ", fillStyle, clip);
+	}
+	if (!offscreen) paintBorder(inst, buffer, box, clip, effectiveBg);
+	const text = offscreen ? "" : ownText(inst);
+	if (text) {
+		const content = contentRectOf(inst, box);
+		const mode = inst.props.wrap ?? "none";
+		const lines = mode === "none" ? text.split("\n") : wrapText(text, content.width, mode);
+		const textStyle = textStyleOf(inst);
+		if (textStyle.bg === void 0 && effectiveBg !== void 0) textStyle.bg = effectiveBg;
+		for (let row = 0; row < lines.length; row++) {
+			if (row >= content.height) break;
+			const chars = [...lines[row] ?? ""];
+			for (let col = 0; col < chars.length; col++) {
+				if (col >= content.width) break;
+				const ch = chars[col];
+				const safe = ch.charCodeAt(0) < 32 ? " " : ch;
+				setClipped(buffer, content.left + col, content.top + row, safe, textStyle, clip);
+			}
+		}
+	}
+	const scrolls = inst.props.scrollTop !== void 0 || inst.props.scrollBottom !== void 0;
+	let scrollTop = 0;
+	if (scrolls || inst.props.onScrollMetrics) {
+		const viewport = contentRectOf(inst, box);
+		let contentBottom = 0;
+		for (const child of inst.children) {
+			if (child.type !== "box" || child.props.position === "absolute" || child.props.display === "none") continue;
+			const n = child.yogaNode;
+			contentBottom = Math.max(contentBottom, n.getComputedTop() + n.getComputedHeight() + n.getComputedMargin(Edge.Bottom));
+		}
+		const contentHeight = Math.max(0, contentBottom - (viewport.top - box.top));
+		const maxScrollTop = Math.max(0, contentHeight - viewport.height);
+		const wanted = inst.props.scrollBottom !== void 0 ? maxScrollTop - inst.props.scrollBottom : inst.props.scrollTop ?? 0;
+		scrollTop = Math.max(0, Math.min(maxScrollTop, Math.round(wanted)));
+		inst.props.onScrollMetrics?.({
+			contentHeight,
+			viewportHeight: viewport.height,
+			scrollTop,
+			maxScrollTop
+		});
+	}
+	const childClip = inst.props.overflow === "hidden" || scrolls ? intersectRects(clip, contentRectOf(inst, box)) : clip;
+	const stackFlow = [];
+	const absolutes = [];
+	for (const child of inst.children) {
+		if (child.type !== "box") continue;
+		(child.props.position === "absolute" ? absolutes : stackFlow).push(child);
+	}
+	const byZ = (a, b) => (a.props.zIndex ?? 0) - (b.props.zIndex ?? 0);
+	stackFlow.sort(byZ);
+	absolutes.sort(byZ);
+	for (const child of stackFlow) paintInstance(child, buffer, box.left, box.top - scrollTop, effectiveBg, childClip);
+	const overlayClip = scrolls ? intersectRects(clip, paddingRectOf(inst, box)) : childClip;
+	for (const child of absolutes) paintInstance(child, buffer, box.left, box.top, effectiveBg, overlayClip);
 }
-
-export { appendChild, applyProps, computeLayout, createInstance, createTextInstance, getYoga, insertBefore, layoutOf, measureText, ownText, paint, refreshMeasure, removeChild };
+//#endregion
+export { BORDER_CHARS, appendChild, applyProps, computeLayout, createInstance, createTextInstance, getYoga, insertBefore, layoutOf, measureText, ownText, paint, refreshMeasure, removeChild };