@uniflowed/tui 0.0.0-alpha.18 → 0.15.0

package/index.js

@@ -23,7 +23,7 @@
 // **Rust was rejected for three reasons, in order of weight.**
 //
 // *First, there is no bridge, and building one is a bigger and different
-// project than this.* Every `nativeRuntimeRequired` in `packages/` is a
+// project than this.* Every `nativeRuntimeRequired` in `npm/` is a
 // promise of a JavaScript-to-native boundary that this repository does not
 // have: no Node-API addon, no FFI, no prebuilt platform binaries, no loader.
 // Choosing Rust here would have meant that the first deliverable was that
@@ -67,22 +67,25 @@
 // # What is here, and what is not
 //
 // Implemented, tested, and true: a component tree, flexbox layout in whole
-// cells, a cell buffer with correct wide-grapheme handling, a diff that emits
-// only changed cells, keyboard input with OpenTUI's key names and propagation
-// rules, bracketed paste, declarative focus, mouse input — press, release,
-// hover, drag with capture, drop and wheel, routed by a hit grid the painter
-// records — text selection by drag, one per renderer, read back with
-// `getSelectedText()`, a scrolling window onto content taller than it,
-// terminal capability and *size* detection that agrees with the CLI's, and an
+// cells — wrapping, `auto` margins, absolute positioning against the nearest
+// positioned ancestor and `zIndex` included — a cell buffer with correct wide-grapheme handling, a diff that emits
+// only changed cells, keyboard input with OpenTUI's key names, propagation
+// rules and Kitty press/repeat/release event types, bracketed paste,
+// declarative focus, mouse input — press, release, hover, drag with capture,
+// drop and wheel, routed by a hit grid the painter records — text selection by
+// drag, one per renderer, read back with
+// `getSelectedText()`, a scrolling window onto content taller than it, a
+// list, a row of tabs and a multi-line editor with OpenTUI's keys, terminal
+// capability and *size* detection that agrees with the CLI's, and an
 // in-memory renderer that runs the same code the terminal one does.
 //
-// Not here: key *release* (which needs the Kitty keyboard protocol), the
-// repeated-press gestures that widen a selection to a word or a line, images,
-// the rich content components, and everything under OpenTUI's "application
-// APIs" — including the clipboard, which is why `getSelectedText()` hands a
-// string back rather than putting it somewhere. They are
-// ubugeeei-prod/uf#314, and they are absent rather than present as functions
-// that throw — because a stub is what this package used to be.
+// Not here: the repeated-press gestures that widen a selection to a word or a
+// line, images, the rich content components, `Slider` and `ScrollBar`, and
+// everything under OpenTUI's
+// "application APIs" — except for the write-only OSC 52 clipboard — which is
+// why `getSelectedText()` hands a string back and leaves policy to the caller.
+// They are ubugeeei-prod/uf#314, and they are absent rather than present as
+// functions that throw — because a stub is what this package used to be.
 //
 // Also not here, and worth saying because ubugeeei-prod/uf#247 asked for it:
 // uf's own CLI does not draw through this. It cannot — `crates/uf_term` is
@@ -100,7 +103,7 @@
 // and there are three guards rather than a promise. `capability.js` reproduces
 // `crates/uf_term/src/capability.rs`'s colour precedence and its size
 // precedence, `widths.js` holds the same Unicode tables as
-// `crates/uf_term/src/text/tables.rs`, and `tests/library/tui.test.js` reads
+// `crates/uf_term/src/text/tables.rs`, and `npm/tui/tui.test.js` reads
 // both Rust files and fails when either side is edited alone.
 //
 // # How the package is laid out
@@ -117,13 +120,15 @@
 // - `capability.js` — what this terminal can render and how big it is, by the
 //   CLI's own rules.
 // - `terminal.js` — a real terminal, and the in-memory one tests use.
-// - `components.js` — `Box`, `Text`, `Input`, `ScrollBox`, and the hooks.
+// - `components.js` — `Box`, `Text`, `Input`, `ScrollBox`, `Select`,
+//   `TabSelect`, `Textarea`, and the hooks.
 //
-// `internal/` holds the four that a consumer must not be able to reach past:
+// `internal/` holds the five that a consumer must not be able to reach past:
 // `tree.js` (props become a layout style once, here), `paint.js` (both passes
-// must break lines the same way), `hits.js` (what is under the pointer is only
-// true for the frame that recorded it) and `host.js` (one React root, one
-// terminal, one owner). Each says so in its own header. There is no
+// must break lines the same way), `widgets.js` (the same, for a textarea's
+// cursor and its painter), `hits.js` (what is under the pointer is only true
+// for the frame that recorded it) and `host.js` (one React root, one terminal,
+// one owner). Each says so in its own header. There is no
 // `internal/util.js`: a module that cannot say what it is about does not
 // belong in this package.
 
@@ -151,21 +156,26 @@ export {
 export type { Color, Frame, Rect, Style } from "./cells.js";
 export { Attributes, INHERIT, frameRow, frameText, parseColor } from "./cells.js";
 
+export type { Clipboard } from "./clipboard.js";
+
 export type {
+  AlignContent,
   AlignItems,
   AlignSelf,
   Dimension,
   FlexDirection,
+  FlexWrap,
   JustifyContent,
   LayoutStyle,
   Overflow,
+  Position,
 } from "./layout.js";
 
 export type { WrapMode } from "./internal/paint.js";
 
 export type { Update } from "./diff.js";
 
-export type { InputDecoder, InputEvent, KeyEvent, KeySource } from "./keys.js";
+export type { InputDecoder, InputEvent, KeyEvent, KeyEventType, KeySource } from "./keys.js";
 export { createInputDecoder, decodeInput, decodeKeys } from "./keys.js";
 
 export type { MouseEvent, MouseEventType, Scroll, ScrollDirection } from "./mouse.js";
@@ -191,15 +201,24 @@ export type {
   InputProps,
   MouseProps,
   ScrollBoxProps,
+  SelectColorProps,
+  SelectProps,
+  TabSelectProps,
   TextProps,
   TextStyleProps,
+  TextareaProps,
   TitleAlignment,
 } from "./components.js";
+export type { EditWrapMode, SelectOption } from "./internal/widgets.js";
 export {
   Box,
   Input,
   ScrollBox,
+  Select,
+  TabSelect,
   Text,
+  Textarea,
+  useClipboard,
   useKeyboard,
   useRenderer,
   useTerminalSize,

package/internal/hits.js

@@ -74,8 +74,8 @@ export function createHitGrid(width: number, height: number): HitGrid {
   return {
     width,
     height,
-    nodes: new Array(size).fill(null),
-    text: new Array(size).fill(null),
+    nodes: new Array<TuiNode | null>(size).fill(null),
+    text: new Array<TuiNode | null>(size).fill(null),
   };
 }
 

package/internal/host.js

@@ -62,22 +62,25 @@ import { DefaultEventPriority, DiscreteEventPriority } from "react-reconciler/co
 import type { Capabilities } from "../capability.js";
 import type { Frame, Rect } from "../cells.js";
 import { createFrame } from "../cells.js";
+import type { Clipboard } from "../clipboard.js";
+import { unsupportedClipboard } from "../clipboard.js";
 import type { Update } from "../diff.js";
 import { diffFrames } from "../diff.js";
 import type { KeyEvent } from "../keys.js";
 import { layout } from "../layout.js";
-import type { MouseEvent } from "../mouse.js";
+import type { MouseEvent, MouseEventType } from "../mouse.js";
 import { MouseButton, derive } from "../mouse.js";
 import type { Selection, SelectionPoint } from "../selection.js";
 import { selectionBetween } from "../selection.js";
 import type { HitGrid } from "./hits.js";
 import { createHitGrid, hitAt, textAt } from "./hits.js";
 import { measureText, paint, paintSelection, selectionText, wrapModeOf } from "./paint.js";
-import type { TuiNode, TuiProps } from "./tree.js";
+import type { TuiNode, TuiProps, Widget } from "./tree.js";
 import { applyProps, createNode, invalidate } from "./tree.js";
+import { measureWidget } from "./widgets.js";
 
 /** A global key handler, as `useKeyboard` registers one. */
-export type KeyHandler = (key: KeyEvent) => void;
+export type KeyHandler = (key: KeyEvent) => mixed;
 
 /**
  * Everything one mounted application owns.
@@ -152,6 +155,15 @@ export type Renderer = {
   hasSelection(): boolean,
   clearSelection(): void,
   getSelectedText(): string,
+  /**
+   * The terminal clipboard transport.
+   *
+   * It is installed by `terminal.js`, not by the reconciler. A renderer that
+   * lives in memory or behind a pipe has no terminal that can receive OSC 52,
+   * and the unsupported object says so explicitly instead of accepting text
+   * and dropping it.
+   */
+  clipboard: Clipboard,
 };
 
 /**
@@ -206,6 +218,7 @@ export function createRenderer(
     getSelectedText() {
       return selectedText(renderer);
     },
+    clipboard: unsupportedClipboard,
   };
   return renderer;
 }
@@ -360,16 +373,18 @@ export function dispatchKey(renderer: Renderer, key: KeyEvent): void {
  * page finds its handler called here. `onMouse` is not in this table because
  * it is called for every type, after the specific one.
  */
-const MOUSE_HANDLERS: { readonly [string]: string } = {
-  down: "onMouseDown",
-  up: "onMouseUp",
-  move: "onMouseMove",
-  drag: "onMouseDrag",
-  "drag-end": "onMouseDragEnd",
-  drop: "onMouseDrop",
-  over: "onMouseOver",
-  out: "onMouseOut",
-  scroll: "onMouseScroll",
+const MOUSE_HANDLERS: {
+  readonly [MouseEventType]: (props: TuiProps) => ?(event: MouseEvent) => mixed,
+} = {
+  down: (props) => props.onMouseDown,
+  up: (props) => props.onMouseUp,
+  move: (props) => props.onMouseMove,
+  drag: (props) => props.onMouseDrag,
+  "drag-end": (props) => props.onMouseDragEnd,
+  drop: (props) => props.onMouseDrop,
+  over: (props) => props.onMouseOver,
+  out: (props) => props.onMouseOut,
+  scroll: (props) => props.onMouseScroll,
 };
 
 /** The `id` a box was given, which is the only name an event can carry. */
@@ -426,7 +441,7 @@ function bubble(
   while (current != null) {
     if (current.type === "box") {
       event.currentTarget = nodeId(current);
-      const specific = current.props[MOUSE_HANDLERS[event.type]];
+      const specific = MOUSE_HANDLERS[event.type](current.props);
       if (typeof specific === "function") {
         specific(event);
       }
@@ -606,6 +621,30 @@ let currentPriority: number = DefaultEventPriority;
 
 const noop = () => {};
 
+/** The host elements `components.js` creates for the three self-drawn widgets. */
+const WIDGETS: { readonly [string]: Widget } = {
+  "uf-select": "select",
+  "uf-tab-select": "tab-select",
+  "uf-textarea": "textarea",
+};
+
+/**
+ * Move or insert `child` before `before` among `parent`'s children, or at the
+ * end when `before` is not one of them.
+ *
+ * A function of its own because two host-config entries need it: the one React
+ * calls for a box and the one it calls for the root. Reaching it through
+ * `hostConfig` from inside `hostConfig` made the object's type depend on
+ * itself.
+ */
+function insertBefore(parent: TuiNode, child: TuiNode, before: TuiNode): void {
+  child.parent = parent;
+  invalidate(parent, 0);
+  remove(parent.children, child);
+  const at = parent.children.indexOf(before);
+  parent.children.splice(at < 0 ? parent.children.length : at, 0, child);
+}
+
 const hostConfig = {
   supportsMutation: true,
   supportsPersistence: false,
@@ -639,6 +678,14 @@ const hostConfig = {
 
   createInstance: (type: string, props: TuiProps): TuiNode => {
     const node = createNode(type === "uf-text" ? "text" : "box", props);
+    const widget = WIDGETS[type];
+    if (widget != null) {
+      // A box that draws itself. Its size is its own to report, the way a
+      // text node's is, and for the same reason: nothing inside it can.
+      node.widget = widget;
+      node.measure = (available: number) => measureWidget(node, widget, available);
+      invalidate(node);
+    }
     if (node.type === "text") {
       // A text node is the only leaf that knows its own size, and it only
       // knows it once it is told how wide it may be. This is Yoga's measure
@@ -682,15 +729,9 @@ const hostConfig = {
     invalidate(renderer.root, renderer.root.children.length);
     renderer.root.children.push(child);
   },
-  insertBefore: (parent: TuiNode, child: TuiNode, before: TuiNode): void => {
-    child.parent = parent;
-    invalidate(parent, 0);
-    remove(parent.children, child);
-    const at = parent.children.indexOf(before);
-    parent.children.splice(at < 0 ? parent.children.length : at, 0, child);
-  },
+  insertBefore,
   insertInContainerBefore: (renderer: Renderer, child: TuiNode, before: TuiNode): void => {
-    hostConfig.insertBefore(renderer.root, child, before);
+    insertBefore(renderer.root, child, before);
   },
   removeChild: (parent: TuiNode, child: TuiNode): void => {
     invalidate(parent, 0);

package/internal/paint.js

@@ -50,6 +50,7 @@ import type { Selection } from "../selection.js";
 import type { HitGrid } from "./hits.js";
 import { recordHit, recordText } from "./hits.js";
 import type { TuiNode } from "./tree.js";
+import { paintWidget } from "./widgets.js";
 import { ROOT_TEXT_STYLE, borderOf, textRuns, textStyleFromProps } from "./tree.js";
 import type { Grapheme } from "../widths.js";
 import { graphemes } from "../widths.js";
@@ -194,7 +195,7 @@ export function paint(
   const inherited = selectableOf(node, selectable);
   switch (node.type) {
     case "root":
-      for (const child of node.children) {
+      for (const child of paintOrder(node.children)) {
         paint(child, frame, capabilities, clip, hits, inherited);
       }
       return;
@@ -213,6 +214,38 @@ export function paint(
   }
 }
 
+/** A node's `zIndex`, from either spelling; `0` when it has none. */
+function zIndexOf(node: TuiNode): number {
+  const own = node.props.zIndex;
+  if (typeof own === "number" && Number.isFinite(own)) {
+    return own;
+  }
+  const style = node.props.style;
+  const nested = style != null && typeof style === "object" ? style.zIndex : undefined;
+  return typeof nested === "number" && Number.isFinite(nested) ? nested : 0;
+}
+
+/**
+ * The order siblings are painted in: by `zIndex`, and in tree order within one.
+ *
+ * Painting is destructive, so the order *is* the stacking: what is painted
+ * last is on top, both in the frame and in the hit grid, and a higher `zIndex`
+ * is painted later. It is OpenTUI's prop and its rule, and it matters as soon
+ * as `position: "absolute"` lets two siblings share cells. The sort is stable,
+ * so siblings that do not say keep the order the tree gives them, and it is
+ * skipped outright when none of them says anything — the common case pays for
+ * one look at each child and no array.
+ */
+function paintOrder(children: Array<TuiNode>): $ReadOnlyArray<TuiNode> {
+  if (!children.some((child) => zIndexOf(child) !== 0)) {
+    return children;
+  }
+  return children
+    .map((child, index) => ({ child, index, z: zIndexOf(child) }))
+    .sort((a, b) => a.z - b.z || a.index - b.index)
+    .map((entry) => entry.child);
+}
+
 /**
  * Whether text under `node` may be selected.
  *
@@ -254,6 +287,14 @@ function paintBox(
     paintBorder(node, frame, capabilities, clip, border, background);
   }
 
+  if (node.widget != null) {
+    // A `Select`, a `TabSelect` or a `Textarea`, which draws what it shows
+    // itself because what it shows depends on the size just laid out. It has
+    // no children to walk; `widgets.js` says why.
+    paintWidget(node, node.widget, frame, capabilities, clip, hits, selectable);
+    return;
+  }
+
   // `overflow: "hidden"` clips children to what is inside the border and
   // padding. `"visible"` — the default — lets them draw over the border,
   // which is how a badge sits on a box's top edge. `"scroll"` clips like
@@ -281,7 +322,7 @@ function paintBox(
       paint(node.children[index], frame, capabilities, childClip, hits, selectable);
     }
   } else {
-    for (const child of node.children) {
+    for (const child of paintOrder(node.children)) {
       paint(child, frame, capabilities, childClip, hits, selectable);
     }
   }

package/internal/tree.js

@@ -34,10 +34,23 @@
 // treats them as the same thing, so this does too. The direct prop wins when
 // both are present, which is the rule a reader guesses.
 
-import type { LayoutStyle, ScrollIndex } from "../layout.js";
+import type {
+  AlignContent,
+  AlignItems,
+  AlignSelf,
+  FlexDirection,
+  FlexWrap,
+  JustifyContent,
+  LayoutStyle,
+  Overflow,
+  Position,
+  ScrollIndex,
+} from "../layout.js";
 import type { Color, Style } from "../cells.js";
 import { Attributes, INHERIT, PLAIN, parseColor } from "../cells.js";
 import type { BorderStyle } from "../capability.js";
+import type { MouseProps } from "../components.js";
+import type { KeyEvent } from "../keys.js";
 
 /**
  * What kind of node this is.
@@ -50,8 +63,24 @@ import type { BorderStyle } from "../capability.js";
  */
 export type TuiNodeType = "root" | "box" | "text" | "chars";
 
-/** Anything a component put on a node. Read by `paint.js`, not by layout. */
-export type TuiProps = { readonly [string]: mixed };
+/**
+ * The three kinds of box that draw themselves: a `Select`, a `TabSelect` and a
+ * `Textarea`. `widgets.js` draws them and says why they are drawn rather than
+ * composed.
+ */
+export type Widget = "select" | "tab-select" | "textarea";
+
+/**
+ * Anything a component put on a node. Read by `paint.js`, not by layout.
+ *
+ * The event handlers are named so the renderer can call them with the event
+ * `Box` declares for them; everything else is read and checked by name.
+ */
+export type TuiProps = {
+  ...MouseProps,
+  readonly onKeyDown?: (key: KeyEvent) => mixed,
+  readonly [string]: mixed,
+};
 
 /** One node of the tree. Mutable: React owns its shape, layout owns its geometry. */
 export type TuiNode = {
@@ -96,6 +125,18 @@ export type TuiNode = {
   scrollDirtyFrom: number,
   /** A scrolling box's stack of child heights; see `layout.js`. */
   scrollIndex: ScrollIndex | null,
+  /**
+   * What this box draws in place of children, when it is a `Select`, a
+   * `TabSelect` or a `Textarea`; `null` for every other node. See
+   * `widgets.js`, which is also the only reader of the two fields below.
+   */
+  widget: Widget | null,
+  /**
+   * The first line and column a `Textarea` shows, kept between frames so the
+   * window moves only as far as the cursor makes it. Written by the painter.
+   */
+  viewTop: number,
+  viewLeft: number,
 };
 
 /** Read a prop, preferring the direct spelling over the one inside `style`. */
@@ -114,6 +155,9 @@ function prop(props: TuiProps, name: string): mixed {
 const asNumber = (value: mixed): number | void =>
   typeof value === "number" && Number.isFinite(value) ? value : undefined;
 
+const asMargin = (value: mixed): number | "auto" | void =>
+  value === "auto" ? "auto" : asNumber(value);
+
 const asDimension = (value: mixed): number | string | void => {
   if (typeof value === "number" && Number.isFinite(value)) {
     return value;
@@ -141,6 +185,73 @@ export function borderOf(props: TuiProps): BorderStyle | null {
   return prop(props, "border") === true ? "single" : null;
 }
 
+/** The style keys whose value is a cell count or a percentage. */
+const DIMENSION_KEYS = [
+  "width",
+  "height",
+  "minWidth",
+  "minHeight",
+  "maxWidth",
+  "maxHeight",
+  "flexBasis",
+  "top",
+  "right",
+  "bottom",
+  "left",
+] as const;
+
+/** The style keys whose value is a plain number. */
+const NUMBER_KEYS = [
+  "flexGrow",
+  "flexShrink",
+  "padding",
+  "paddingTop",
+  "paddingRight",
+  "paddingBottom",
+  "paddingLeft",
+  "gap",
+  "rowGap",
+  "columnGap",
+  "scrollTop",
+] as const;
+
+/** The style keys whose value is a margin: cells, or `"auto"`. */
+const MARGIN_KEYS = ["margin", "marginTop", "marginRight", "marginBottom", "marginLeft"] as const;
+
+const FLEX_DIRECTIONS: $ReadOnlyArray<FlexDirection> = [
+  "row",
+  "row-reverse",
+  "column",
+  "column-reverse",
+];
+const JUSTIFY_CONTENTS: $ReadOnlyArray<JustifyContent> = [
+  "flex-start",
+  "center",
+  "flex-end",
+  "space-between",
+  "space-around",
+  "space-evenly",
+];
+const ALIGN_ITEMS: $ReadOnlyArray<AlignItems> = ["flex-start", "center", "flex-end", "stretch"];
+const ALIGN_SELVES: $ReadOnlyArray<AlignSelf> = ["auto", ...ALIGN_ITEMS];
+const OVERFLOWS: $ReadOnlyArray<Overflow> = ["visible", "hidden", "scroll"];
+const POSITIONS: $ReadOnlyArray<Position> = ["static", "relative", "absolute"];
+const FLEX_WRAPS: $ReadOnlyArray<FlexWrap> = ["no-wrap", "wrap", "wrap-reverse"];
+const ALIGN_CONTENTS: $ReadOnlyArray<AlignContent> = [
+  "flex-start",
+  "center",
+  "flex-end",
+  "stretch",
+  "space-between",
+  "space-around",
+  "space-evenly",
+];
+
+/** `value` when it is one of `words`, and `undefined` for anything else. */
+function oneOf<T>(value: mixed, words: $ReadOnlyArray<T>): T | void {
+  return words.find((word) => word === value);
+}
+
 /**
  * The layout style a node's props describe.
  *
@@ -150,46 +261,62 @@ export function borderOf(props: TuiProps): BorderStyle | null {
  * two places and make them disagree the first time one of them changed.
  */
 export function styleFromProps(props: TuiProps): LayoutStyle {
-  const style: { [string]: mixed } = {};
-  const copy = (name: string, read: (mixed) => mixed) => {
-    const value = read(prop(props, name));
+  // Writable while it is being built, and the same keys and value types as the
+  // `LayoutStyle` it is returned as.
+  const style: { [K in $Keys<LayoutStyle>]?: LayoutStyle[K] } = {};
+  for (const name of DIMENSION_KEYS) {
+    const value = asDimension(prop(props, name));
     if (value !== undefined) {
       style[name] = value;
     }
-  };
-  for (const name of [
-    "width",
-    "height",
-    "minWidth",
-    "minHeight",
-    "maxWidth",
-    "maxHeight",
-    "flexBasis",
-  ]) {
-    copy(name, asDimension);
   }
-  for (const name of [
-    "flexGrow",
-    "flexShrink",
-    "padding",
-    "paddingTop",
-    "paddingRight",
-    "paddingBottom",
-    "paddingLeft",
-    "margin",
-    "marginTop",
-    "marginRight",
-    "marginBottom",
-    "marginLeft",
-    "gap",
-    "rowGap",
-    "columnGap",
-    "scrollTop",
-  ]) {
-    copy(name, asNumber);
+  for (const name of NUMBER_KEYS) {
+    const value = asNumber(prop(props, name));
+    if (value !== undefined) {
+      style[name] = value;
+    }
+  }
+  for (const name of MARGIN_KEYS) {
+    const value = asMargin(prop(props, name));
+    if (value !== undefined) {
+      style[name] = value;
+    }
+  }
+
+  // The keyword props, each read against the words `layout.js` knows. A word
+  // it does not know is left unset, so layout's default applies — which is
+  // what a misspelt keyword already did there, now said here instead.
+  const flexDirection = oneOf(prop(props, "flexDirection"), FLEX_DIRECTIONS);
+  if (flexDirection !== undefined) {
+    style.flexDirection = flexDirection;
+  }
+  const justifyContent = oneOf(prop(props, "justifyContent"), JUSTIFY_CONTENTS);
+  if (justifyContent !== undefined) {
+    style.justifyContent = justifyContent;
+  }
+  const alignItems = oneOf(prop(props, "alignItems"), ALIGN_ITEMS);
+  if (alignItems !== undefined) {
+    style.alignItems = alignItems;
+  }
+  const alignSelf = oneOf(prop(props, "alignSelf"), ALIGN_SELVES);
+  if (alignSelf !== undefined) {
+    style.alignSelf = alignSelf;
+  }
+  const overflow = oneOf(prop(props, "overflow"), OVERFLOWS);
+  if (overflow !== undefined) {
+    style.overflow = overflow;
+  }
+  const position = oneOf(prop(props, "position"), POSITIONS);
+  if (position !== undefined) {
+    style.position = position;
+  }
+  const flexWrap = oneOf(prop(props, "flexWrap"), FLEX_WRAPS);
+  if (flexWrap !== undefined) {
+    style.flexWrap = flexWrap;
   }
-  for (const name of ["flexDirection", "justifyContent", "alignItems", "alignSelf", "overflow"]) {
-    copy(name, asString);
+  const alignContent = oneOf(prop(props, "alignContent"), ALIGN_CONTENTS);
+  if (alignContent !== undefined) {
+    style.alignContent = alignContent;
   }
 
   // `paddingX` and `paddingY`, which OpenTUI documents and which are the two
@@ -312,6 +439,9 @@ export function createNode(type: TuiNodeType, props: TuiProps): TuiNode {
     measuredHeight: 0,
     scrollDirtyFrom: 0,
     scrollIndex: null,
+    widget: null,
+    viewTop: 0,
+    viewLeft: 0,
   };
   applyProps(node, props);
   return node;