@flowtty/core 1.0.0-alpha.1

package/README.md

@@ -0,0 +1,35 @@
+# @flowtty/core
+
+The framework-free core of [flowtty](https://github.com/mellonis/flowtty) — a library for building terminal apps in React.
+
+This package has **no React and no Node dependency** in its main surface. It is the shared data model every adapter (React, future Svelte) and every backend (TTY, inline, test) depends on:
+
+- `Buffer`, `Cell`, `Style`, `Key` — the cell-grid model a renderer paints into.
+- `Backend` — the interface between a framework adapter and its output (a real TTY, an inline live region, an in-memory test surface).
+- Pure utilities — `wrap`, `splitVisualLines`, `windowAround`, and the input/state reducers.
+
+Most app authors don't install this directly — they use [`@flowtty/react`](https://github.com/mellonis/flowtty/tree/master/packages/react), which re-exports the core types you need. Install `@flowtty/core` directly when **writing an adapter or a backend**.
+
+## Install
+
+```bash
+npm install @flowtty/core
+```
+
+## Subpaths
+
+```ts
+import { type Backend, type Buffer } from '@flowtty/core';        // public data model
+import { /* Instance, paint, layout */ } from '@flowtty/core/host'; // adapter-facing internals
+import { TestBackend } from '@flowtty/core/testing';              // headless test surface
+```
+
+- `.` — the framework-free public surface (types + pure utils). No React, no Node.
+- `./host` — the primitives a framework adapter wires its component lifecycle onto (`Instance` tree, paint pipeline, layout).
+- `./testing` — `TestBackend`, an in-memory backend that captures frames and injects keys for unit tests.
+
+## See also
+
+- [`@flowtty/react`](https://github.com/mellonis/flowtty/tree/master/packages/react) — the React adapter.
+- [`@flowtty/tty-backend`](https://github.com/mellonis/flowtty/tree/master/packages/tty-backend) — the canonical TTY backend.
+- [flowtty on GitHub](https://github.com/mellonis/flowtty) — full docs and examples.

package/dist/backend-BcB7VR87.d.ts

@@ -0,0 +1,74 @@
+import { B as Buffer } from './cells-CaXEx4lH.js';
+
+interface Key {
+    /**
+     * Canonical name of the key. For printable ASCII characters this is the
+     * character itself ('a', '!', ' '). For named keys: 'return', 'escape',
+     * 'tab', 'backspace', 'delete', 'up', 'down', 'left', 'right', 'home',
+     * 'end', 'pageup', 'pagedown'.
+     */
+    name: string;
+    /** Raw byte sequence as received from the source (empty for synthetic keys). */
+    sequence: string;
+    ctrl: boolean;
+    meta: boolean;
+    shift: boolean;
+}
+
+interface Backend {
+    size(): {
+        width: number;
+        height: number;
+    };
+    draw(buffer: Buffer): void;
+    /**
+     * Subscribe to raw key events. Returns an unsubscribe function.
+     * Backends without an input source omit this method.
+     */
+    onKey?(handler: (key: Key) => void): () => void;
+    /**
+     * Subscribe to terminal-resize events. Returns an unsubscribe function.
+     * Handlers are called AFTER `size()` reflects the new dimensions.
+     * Backends with fixed dimensions (e.g. the test backend) omit this method.
+     */
+    onResize?(handler: () => void): () => void;
+    dispose?(): void;
+    /**
+     * Append plain (already-styled, ANSI-ready) lines ABOVE the live region.
+     * The lines scroll naturally into the terminal's scrollback. Backends
+     * that own the whole screen (alt-screen TTY) or are headless (TestBackend)
+     * may omit this; components like <Static> check for presence at runtime
+     * and degrade gracefully when absent.
+     */
+    printStatic?(lines: string[]): void;
+    /**
+     * Whether this backend owns the entire render area — i.e. components can
+     * use the full `size()` for layout and overlay larger panels (Menu cascade,
+     * full-screen DialogHost) on top.
+     *
+     *   true  — TtyBackend (alt-screen), TestBackend (full buffer)
+     *   false — @flowtty/inline-tty-backend (only the live region is yours;
+     *           scrollback above is append-only and out of layout control)
+     *
+     * Defaults to `true` when omitted — preserves the behavior of existing
+     * backends that don't declare the flag. Inline-style backends MUST set
+     * it to `false` so capability-sensitive components (e.g. <Menu>) can
+     * refuse to render rather than produce broken overflow UI.
+     */
+    fullScreen?: boolean;
+    /**
+     * Whether this backend can emit OSC 8 terminal hyperlinks (clickable links).
+     *
+     *   true      — TTY backends (alt-screen + inline) wrap linked cells in the
+     *               OSC 8 escape, so a `<Link>` is clickable in supporting terminals.
+     *   omitted   — treated as false. The headless TestBackend and any output that
+     *     /false    can't render clickable links leave them out, so `<Link>` should
+     *               degrade to styled text plus a visible URL.
+     *
+     * Feature-detected like `fullScreen`: components read it (via useBackend())
+     * rather than assuming a capability.
+     */
+    hyperlinks?: boolean;
+}
+
+export type { Backend as B, Key as K };

package/dist/cells-CaXEx4lH.d.ts

@@ -0,0 +1,31 @@
+interface Style {
+    fg?: string;
+    bg?: string;
+    bold?: boolean;
+    dim?: boolean;
+    underline?: boolean;
+    inverse?: boolean;
+    strikethrough?: boolean;
+    /**
+     * Target URL for an OSC 8 terminal hyperlink. Backends that can emit
+     * clickable links (TTY / inline TTY) wrap this cell's char in the hyperlink
+     * escape; backends that can't (headless test surface) ignore it. Carried in
+     * Style so it threads through the same paint + diff path as visual attrs.
+     */
+    link?: string;
+}
+interface Cell {
+    char: string;
+    style: Style;
+}
+declare class Buffer {
+    readonly width: number;
+    readonly height: number;
+    private readonly cells;
+    constructor(width: number, height: number);
+    set(x: number, y: number, char: string, style?: Style): void;
+    get(x: number, y: number): Cell;
+    toString(): string;
+}
+
+export { Buffer as B, type Cell as C, type Style as S };

package/dist/chunk-D6HW2BNM.js

@@ -0,0 +1,106 @@
+// src/cells.ts
+var Buffer = class {
+  width;
+  height;
+  cells;
+  constructor(width, height) {
+    this.width = Math.max(0, width);
+    this.height = Math.max(0, height);
+    this.cells = Array.from({ length: this.width * this.height }, () => ({
+      char: " ",
+      style: {}
+    }));
+  }
+  set(x, y, char, style = {}) {
+    if (x < 0 || y < 0 || x >= this.width || y >= this.height) return;
+    this.cells[y * this.width + x] = { char, style };
+  }
+  // Out-of-bounds reads return a fresh blank cell (mirrors set()'s no-op).
+  get(x, y) {
+    return this.cells[y * this.width + x] ?? { char: " ", style: {} };
+  }
+  // Plain-text frame. Trailing ASCII spaces are trimmed (cosmetic), but NBSP
+  // (U+00A0) and other content are preserved — NBSP-safety is a flowtty value.
+  toString() {
+    const lines = [];
+    for (let y = 0; y < this.height; y++) {
+      let line = "";
+      for (let x = 0; x < this.width; x++) line += this.get(x, y).char;
+      lines.push(line.replace(/ +$/u, ""));
+    }
+    return lines.join("\n").replace(/\n+$/u, "");
+  }
+};
+
+// src/host/borders.ts
+var DEFAULT_BORDER_STYLE = "round";
+var GRID_CHARS = {
+  single: { h: "\u2500", v: "\u2502", tl: "\u250C", tr: "\u2510", bl: "\u2514", br: "\u2518", tDown: "\u252C", tUp: "\u2534", tRight: "\u251C", tLeft: "\u2524", cross: "\u253C" },
+  round: { h: "\u2500", v: "\u2502", tl: "\u256D", tr: "\u256E", bl: "\u2570", br: "\u256F", tDown: "\u252C", tUp: "\u2534", tRight: "\u251C", tLeft: "\u2524", cross: "\u253C" },
+  double: { h: "\u2550", v: "\u2551", tl: "\u2554", tr: "\u2557", bl: "\u255A", br: "\u255D", tDown: "\u2566", tUp: "\u2569", tRight: "\u2560", tLeft: "\u2563", cross: "\u256C" },
+  bold: { h: "\u2501", v: "\u2503", tl: "\u250F", tr: "\u2513", bl: "\u2517", br: "\u251B", tDown: "\u2533", tUp: "\u253B", tRight: "\u2523", tLeft: "\u252B", cross: "\u254B" },
+  classic: { h: "-", v: "|", tl: "+", tr: "+", bl: "+", br: "+", tDown: "+", tUp: "+", tRight: "+", tLeft: "+", cross: "+" }
+};
+var BORDER_CHARS = GRID_CHARS;
+
+// src/wrap.ts
+var ELLIPSIS = "\u2026";
+function wrapText(text, width, mode) {
+  if (width < 0) width = 0;
+  const out = [];
+  for (const source of text.split("\n")) {
+    if (mode === "none") {
+      out.push(source);
+      continue;
+    }
+    if (mode === "truncate") {
+      out.push(truncateLine(source, width));
+      continue;
+    }
+    wrapLine(source, width, out);
+  }
+  if (out.length === 0) out.push("");
+  return out;
+}
+function truncateLine(line, width) {
+  if (width <= 0) return "";
+  const chars = [...line];
+  if (chars.length <= width) return line;
+  if (width === 1) return ELLIPSIS;
+  return chars.slice(0, width - 1).join("") + ELLIPSIS;
+}
+function wrapLine(line, width, out) {
+  if (width === 0) {
+    out.push("");
+    return;
+  }
+  if (line === "") {
+    out.push("");
+    return;
+  }
+  let current = "";
+  for (const word of line.split(" ")) {
+    const candidate = current ? current + " " + word : word;
+    if ([...candidate].length <= width) {
+      current = candidate;
+      continue;
+    }
+    if (current) {
+      out.push(current);
+      current = "";
+    }
+    if ([...word].length > width) {
+      let remainder = [...word];
+      while (remainder.length > width) {
+        out.push(remainder.slice(0, width).join(""));
+        remainder = remainder.slice(width);
+      }
+      current = remainder.join("");
+    } else {
+      current = word;
+    }
+  }
+  if (current) out.push(current);
+}
+
+export { BORDER_CHARS, Buffer, DEFAULT_BORDER_STYLE, GRID_CHARS, wrapText };

package/dist/host/index.d.ts

@@ -0,0 +1,8 @@
+import { C as Container } from '../host-DttBG-OZ.js';
+export { B as BORDER_CHARS, H as HostType, I as Instance, R as Rect, T as TextInstance, Y as Yoga, e as YogaNode, f as appendChild, g as applyProps, h as computeLayout, i as createInstance, j as createTextInstance, k as getYoga, l as insertBefore, m as layoutOf, n as measureText, o as ownText, r as refreshMeasure, p as removeChild } from '../host-DttBG-OZ.js';
+import { B as Buffer } from '../cells-CaXEx4lH.js';
+import 'yoga-layout/load';
+
+declare function paint(container: Container, width: number, height: number): Buffer;
+
+export { Container, paint };

package/dist/host/index.js

@@ -0,0 +1,357 @@
+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;
+function getYoga() {
+  yogaPromise ??= loadYoga();
+  return yogaPromise;
+}
+
+// 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;
+}
+function createTextInstance(text, _Yoga) {
+  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));
+}
+function wrapMap(v) {
+  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;
+  }
+}
+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;
+  }
+}
+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;
+  }
+}
+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 };
+}
+function ownText(inst) {
+  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);
+  }
+}
+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);
+}
+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);
+}
+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);
+}
+
+// src/host/layout.ts
+function computeLayout(container, 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()
+  };
+}
+
+// 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;
+}
+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;
+}
+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);
+}
+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 };
+}
+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 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)
+  };
+}
+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);
+}
+
+export { appendChild, applyProps, computeLayout, createInstance, createTextInstance, getYoga, insertBefore, layoutOf, measureText, ownText, paint, refreshMeasure, removeChild };