ink 6.7.0 → 7.0.0

package/build/render.d.ts

@@ -34,11 +34,16 @@ export type RenderOptions = {
     /**
     Patch console methods to ensure console output doesn't mix with Ink's output.
 
+    Note: Once unmount starts, Ink restores the native console before React cleanup runs. Teardown-time `console.*` output then follows the normal console behavior instead of being rerouted through Ink.
+
     @default true
     */
     patchConsole?: boolean;
     /**
-    Runs the given callback after each render and re-render.
+    Runs the given callback after each render and re-render with render metrics.
+
+    Note: this callback runs after Ink commits a frame, but it does not wait for `stdout`/`stderr` stream callbacks.
+    To run code after output is flushed, use `waitUntilRenderFlush()`.
     */
     onRender?: (metrics: RenderMetrics) => void;
     /**
@@ -70,7 +75,7 @@ export type RenderOptions = {
     - `useTransition` and `useDeferredValue` are fully functional
     - Updates can be interrupted for higher priority work
 
-    Note: Concurrent mode changes the timing of renders. Some tests may need to use `act()` to properly await updates. The `concurrent` option only takes effect on the first render for a given stdout. If you need to change the rendering mode, call `unmount()` first.
+    Note: Concurrent mode changes the timing of renders. Some tests may need to use `act()` to properly await updates. Reusing the same stdout across multiple `render()` calls without unmounting is unsupported. Call `unmount()` first if you need to change the rendering mode or create a fresh instance.
 
     @default false
     */
@@ -83,6 +88,34 @@ export type RenderOptions = {
     @see https://sw.kovidgoyal.net/kitty/keyboard-protocol/
     */
     kittyKeyboard?: KittyKeyboardOptions;
+    /**
+    Override automatic interactive mode detection.
+
+    By default, Ink detects whether the environment is interactive based on CI detection (via [`is-in-ci`](https://github.com/sindresorhus/is-in-ci)) and `stdout.isTTY`. Most users should not need to set this.
+
+    When non-interactive, Ink disables ANSI erase sequences, cursor manipulation, synchronized output, resize handling, and kitty keyboard auto-detection, writing only the final frame at unmount.
+
+    Set to `false` to force non-interactive mode or `true` to force interactive mode when the automatic detection doesn't suit your use case.
+
+    Note: Reusing the same stdout across multiple `render()` calls without unmounting is unsupported. Call `unmount()` first if you need to change this option or create a fresh instance.
+
+    @default true (false if in CI or `stdout.isTTY` is falsy)
+    */
+    interactive?: boolean;
+    /**
+    Render the app in the terminal's alternate screen buffer. When enabled, the app renders on a separate screen, and the original terminal content is restored when the app exits. This is the same mechanism used by programs like vim, htop, and less.
+
+    Note: The terminal's scrollback buffer is not available while in the alternate screen. This is standard terminal behavior; programs like vim use the alternate screen specifically to avoid polluting the user's scrollback history.
+
+    Note: Ink intentionally treats alternate-screen teardown output as disposable. It does not preserve or replay teardown-time frames, hook writes, or `console.*` output after restoring the primary screen.
+
+    Only works in interactive mode. Ignored when `interactive` is `false` or in a non-interactive environment (CI, piped stdout).
+
+    Note: Reusing the same stdout across multiple `render()` calls without unmounting is unsupported. Call `unmount()` first if you need to change this option or create a fresh instance.
+
+    @default false
+    */
+    alternateScreen?: boolean;
 };
 export type Instance = {
     /**
@@ -94,9 +127,42 @@ export type Instance = {
     */
     unmount: Ink['unmount'];
     /**
-    Returns a promise that resolves when the app is unmounted.
+    Returns a promise that settles when the app is unmounted.
+
+    It resolves with the value passed to `exit(value)` and rejects with the error passed to `exit(error)`.
+    When `unmount()` is called manually, it settles after unmount-related stdout writes complete.
+
+    @example
+    ```jsx
+    const {unmount, waitUntilExit} = render(<MyApp />);
+
+    setTimeout(unmount, 1000);
+
+    await waitUntilExit(); // resolves after `unmount()` is called
+    ```
     */
     waitUntilExit: Ink['waitUntilExit'];
+    /**
+    Returns a promise that settles after pending render output is flushed to stdout.
+
+    This can be used after `rerender()` when you need to run code only after the frame is written.
+
+    @example
+    ```jsx
+    const {rerender, waitUntilRenderFlush} = render(<MyApp step="loading" />);
+
+    rerender(<MyApp step="ready" />);
+    await waitUntilRenderFlush(); // output for "ready" is flushed
+
+    runNextCommand();
+    ```
+    */
+    waitUntilRenderFlush: Ink['waitUntilRenderFlush'];
+    /**
+    Unmount the current app and remove the internal Ink instance for this stdout.
+
+    This is mostly useful for advanced cases where you need `render()` to create a fresh instance for the same stream without leaving terminal state such as the alternate screen behind.
+    */
     cleanup: () => void;
     /**
     Clear output.

package/build/render.js

@@ -16,9 +16,10 @@ const render = (node, options) => {
         maxFps: 30,
         incrementalRendering: false,
         concurrent: false,
+        alternateScreen: false,
         ...getOptions(options),
     };
-    const instance = getInstance(inkOptions.stdout, () => new Ink(inkOptions), inkOptions.concurrent ?? false);
+    const instance = getInstance(inkOptions.stdout, () => new Ink(inkOptions));
     instance.render(node);
     return {
         rerender: instance.render,
@@ -26,7 +27,10 @@ const render = (node, options) => {
             instance.unmount();
         },
         waitUntilExit: instance.waitUntilExit,
-        cleanup: () => instances.delete(inkOptions.stdout),
+        waitUntilRenderFlush: instance.waitUntilRenderFlush,
+        cleanup() {
+            instance.unmount();
+        },
         clear: instance.clear,
     };
 };
@@ -40,16 +44,19 @@ const getOptions = (stdout = {}) => {
     }
     return stdout;
 };
-const getInstance = (stdout, createInstance, concurrent) => {
-    let instance = instances.get(stdout);
-    if (!instance) {
-        instance = createInstance();
-        instances.set(stdout, instance);
-    }
-    else if (instance.isConcurrent !== concurrent) {
-        console.warn(`Warning: render() was called with concurrent: ${concurrent}, but the existing instance for this stdout uses concurrent: ${instance.isConcurrent}. ` +
-            `The concurrent option only takes effect on the first render. Call unmount() first if you need to change the rendering mode.`);
+const getInstance = (stdout, createInstance) => {
+    const instance = instances.get(stdout);
+    if (instance === undefined) {
+        const newInstance = createInstance();
+        instances.set(stdout, newInstance);
+        return newInstance;
     }
+    // Ink keeps one live renderer per stdout. Reusing the same stream without
+    // unmounting is unsupported, but return the existing instance so we don't
+    // create two renderers that compete for the same output. Write the warning
+    // directly to native stderr so an existing alternate-screen renderer cannot
+    // swallow it via patchConsole.
+    process.stderr.write('Warning: render() was called again for the same stdout before the previous Ink instance was unmounted. Reusing stdout across multiple render() calls is unsupported. Call unmount() first.\n');
     return instance;
 };
 //# sourceMappingURL=render.js.map

package/build/render.js.map

@@ -1 +1 @@
-{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,OAAO,GAAqD,MAAM,UAAU,CAAC;AAC7E,OAAO,SAAS,MAAM,gBAAgB,CAAC;AA0HvC;;EAEE;AACF,MAAM,MAAM,GAAG,CACd,IAAe,EACf,OAA4C,EACjC,EAAE;IACb,MAAM,UAAU,GAAe;QAC9B,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,UAAU,EAAE,KAAK;QACjB,GAAG,UAAU,CAAC,OAAO,CAAC;KACtB,CAAC;IAEF,MAAM,QAAQ,GAAQ,WAAW,CAChC,UAAU,CAAC,MAAM,EACjB,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,EACzB,UAAU,CAAC,UAAU,IAAI,KAAK,CAC9B,CAAC;IAEF,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEtB,OAAO;QACN,QAAQ,EAAE,QAAQ,CAAC,MAAM;QACzB,OAAO;YACN,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QACD,aAAa,EAAE,QAAQ,CAAC,aAAa;QACrC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC;QAClD,KAAK,EAAE,QAAQ,CAAC,KAAK;KACrB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,CAClB,SAAyD,EAAE,EAC3C,EAAE;IAClB,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;QAC9B,OAAO;YACN,MAAM;YACN,KAAK,EAAE,OAAO,CAAC,KAAK;SACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CACnB,MAA0B,EAC1B,cAAyB,EACzB,UAAmB,EACb,EAAE;IACR,IAAI,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAErC,IAAI,CAAC,QAAQ,EAAE,CAAC;QACf,QAAQ,GAAG,cAAc,EAAE,CAAC;QAC5B,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IACjC,CAAC;SAAM,IAAI,QAAQ,CAAC,YAAY,KAAK,UAAU,EAAE,CAAC;QACjD,OAAO,CAAC,IAAI,CACX,iDAAiD,UAAU,gEAAgE,QAAQ,CAAC,YAAY,IAAI;YACnJ,6HAA6H,CAC9H,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}
+{"version":3,"file":"render.js","sourceRoot":"","sources":["../src/render.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,OAAO,MAAM,cAAc,CAAC;AAEnC,OAAO,GAAqD,MAAM,UAAU,CAAC;AAC7E,OAAO,SAAS,MAAM,gBAAgB,CAAC;AA+LvC;;EAEE;AACF,MAAM,MAAM,GAAG,CACd,IAAe,EACf,OAA4C,EACjC,EAAE;IACb,MAAM,UAAU,GAAe;QAC9B,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,KAAK,EAAE,KAAK;QACZ,WAAW,EAAE,IAAI;QACjB,YAAY,EAAE,IAAI;QAClB,MAAM,EAAE,EAAE;QACV,oBAAoB,EAAE,KAAK;QAC3B,UAAU,EAAE,KAAK;QACjB,eAAe,EAAE,KAAK;QACtB,GAAG,UAAU,CAAC,OAAO,CAAC;KACtB,CAAC;IAEF,MAAM,QAAQ,GAAQ,WAAW,CAChC,UAAU,CAAC,MAAM,EACjB,GAAG,EAAE,CAAC,IAAI,GAAG,CAAC,UAAU,CAAC,CACzB,CAAC;IACF,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAEtB,OAAO;QACN,QAAQ,EAAE,QAAQ,CAAC,MAAM;QACzB,OAAO;YACN,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QACD,aAAa,EAAE,QAAQ,CAAC,aAAa;QACrC,oBAAoB,EAAE,QAAQ,CAAC,oBAAoB;QACnD,OAAO;YACN,QAAQ,CAAC,OAAO,EAAE,CAAC;QACpB,CAAC;QACD,KAAK,EAAE,QAAQ,CAAC,KAAK;KACrB,CAAC;AACH,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC;AAEtB,MAAM,UAAU,GAAG,CAClB,SAAyD,EAAE,EAC3C,EAAE;IAClB,IAAI,MAAM,YAAY,MAAM,EAAE,CAAC;QAC9B,OAAO;YACN,MAAM;YACN,KAAK,EAAE,OAAO,CAAC,KAAK;SACpB,CAAC;IACH,CAAC;IAED,OAAO,MAAM,CAAC;AACf,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,CACnB,MAA0B,EAC1B,cAAyB,EACnB,EAAE;IACR,MAAM,QAAQ,GAAG,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;IAEvC,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC5B,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;QACrC,SAAS,CAAC,GAAG,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;QACnC,OAAO,WAAW,CAAC;IACpB,CAAC;IAED,0EAA0E;IAC1E,0EAA0E;IAC1E,2EAA2E;IAC3E,4EAA4E;IAC5E,+BAA+B;IAC/B,OAAO,CAAC,MAAM,CAAC,KAAK,CACnB,8LAA8L,CAC9L,CAAC;IAEF,OAAO,QAAQ,CAAC;AACjB,CAAC,CAAC"}

package/build/sanitize-ansi.d.ts

@@ -0,0 +1,2 @@
+declare const sanitizeAnsi: (text: string) => string;
+export default sanitizeAnsi;

package/build/sanitize-ansi.js

@@ -0,0 +1,27 @@
+import { hasAnsiControlCharacters, tokenizeAnsi } from './ansi-tokenizer.js';
+const sgrParametersRegex = /^[\d:;]*$/;
+// Strip ANSI escape sequences that would conflict with Ink's layout.
+// Preserved: SGR sequences (colors, bold, etc. - end with 'm') and
+// OSC sequences (hyperlinks, etc. - ESC ] or C1 OSC).
+// Stripped: cursor movement, screen clearing, and other control sequences.
+const sanitizeAnsi = (text) => {
+    if (!hasAnsiControlCharacters(text)) {
+        return text;
+    }
+    let output = '';
+    for (const token of tokenizeAnsi(text)) {
+        if (token.type === 'text' || token.type === 'osc') {
+            output += token.value;
+            continue;
+        }
+        if (token.type === 'csi' &&
+            token.finalCharacter === 'm' &&
+            token.intermediateString === '' &&
+            sgrParametersRegex.test(token.parameterString)) {
+            output += token.value;
+        }
+    }
+    return output;
+};
+export default sanitizeAnsi;
+//# sourceMappingURL=sanitize-ansi.js.map

package/build/sanitize-ansi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sanitize-ansi.js","sourceRoot":"","sources":["../src/sanitize-ansi.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAE,YAAY,EAAC,MAAM,qBAAqB,CAAC;AAE3E,MAAM,kBAAkB,GAAG,WAAW,CAAC;AAEvC,qEAAqE;AACrE,mEAAmE;AACnE,sDAAsD;AACtD,2EAA2E;AAC3E,MAAM,YAAY,GAAG,CAAC,IAAY,EAAU,EAAE;IAC7C,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,CAAC;QACrC,OAAO,IAAI,CAAC;IACb,CAAC;IAED,IAAI,MAAM,GAAG,EAAE,CAAC;IAEhB,KAAK,MAAM,KAAK,IAAI,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC;QACxC,IAAI,KAAK,CAAC,IAAI,KAAK,MAAM,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,EAAE,CAAC;YACnD,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC;YACtB,SAAS;QACV,CAAC;QAED,IACC,KAAK,CAAC,IAAI,KAAK,KAAK;YACpB,KAAK,CAAC,cAAc,KAAK,GAAG;YAC5B,KAAK,CAAC,kBAAkB,KAAK,EAAE;YAC/B,kBAAkB,CAAC,IAAI,CAAC,KAAK,CAAC,eAAe,CAAC,EAC7C,CAAC;YACF,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC;QACvB,CAAC;IACF,CAAC;IAED,OAAO,MAAM,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/build/squash-text-nodes.js

@@ -1,3 +1,4 @@
+import sanitizeAnsi from './sanitize-ansi.js';
 // Squashing text nodes allows to combine multiple text nodes into one and write
 // to `Output` instance only once. For example, <Text>hello{' '}world</Text>
 // is actually 3 text nodes, which would result 3 writes to `Output`.
@@ -29,7 +30,7 @@ const squashTextNodes = (node) => {
         }
         text += nodeText;
     }
-    return text;
+    return sanitizeAnsi(text);
 };
 export default squashTextNodes;
 //# sourceMappingURL=squash-text-nodes.js.map

package/build/squash-text-nodes.js.map

@@ -1 +1 @@
-{"version":3,"file":"squash-text-nodes.js","sourceRoot":"","sources":["../src/squash-text-nodes.ts"],"names":[],"mappings":"AAEA,gFAAgF;AAChF,4EAA4E;AAC5E,qEAAqE;AACrE,EAAE;AACF,kGAAkG;AAClG,wFAAwF;AACxF,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAU,EAAE;IACpD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAC7D,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC7B,SAAS;QACV,CAAC;QAED,IAAI,QAAQ,GAAG,EAAE,CAAC;QAElB,IAAI,SAAS,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;YACpC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,IACC,SAAS,CAAC,QAAQ,KAAK,UAAU;gBACjC,SAAS,CAAC,QAAQ,KAAK,kBAAkB,EACxC,CAAC;gBACF,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;YACvC,CAAC;YAED,oFAAoF;YACpF,iFAAiF;YACjF,IACC,QAAQ,CAAC,MAAM,GAAG,CAAC;gBACnB,OAAO,SAAS,CAAC,kBAAkB,KAAK,UAAU,EACjD,CAAC;gBACF,QAAQ,GAAG,SAAS,CAAC,kBAAkB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAC1D,CAAC;QACF,CAAC;QAED,IAAI,IAAI,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"squash-text-nodes.js","sourceRoot":"","sources":["../src/squash-text-nodes.ts"],"names":[],"mappings":"AACA,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,gFAAgF;AAChF,4EAA4E;AAC5E,qEAAqE;AACrE,EAAE;AACF,kGAAkG;AAClG,wFAAwF;AACxF,MAAM,eAAe,GAAG,CAAC,IAAgB,EAAU,EAAE;IACpD,IAAI,IAAI,GAAG,EAAE,CAAC;IAEd,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC;QAC7D,MAAM,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;QAEzC,IAAI,SAAS,KAAK,SAAS,EAAE,CAAC;YAC7B,SAAS;QACV,CAAC;QAED,IAAI,QAAQ,GAAG,EAAE,CAAC;QAElB,IAAI,SAAS,CAAC,QAAQ,KAAK,OAAO,EAAE,CAAC;YACpC,QAAQ,GAAG,SAAS,CAAC,SAAS,CAAC;QAChC,CAAC;aAAM,CAAC;YACP,IACC,SAAS,CAAC,QAAQ,KAAK,UAAU;gBACjC,SAAS,CAAC,QAAQ,KAAK,kBAAkB,EACxC,CAAC;gBACF,QAAQ,GAAG,eAAe,CAAC,SAAS,CAAC,CAAC;YACvC,CAAC;YAED,oFAAoF;YACpF,iFAAiF;YACjF,IACC,QAAQ,CAAC,MAAM,GAAG,CAAC;gBACnB,OAAO,SAAS,CAAC,kBAAkB,KAAK,UAAU,EACjD,CAAC;gBACF,QAAQ,GAAG,SAAS,CAAC,kBAAkB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;YAC1D,CAAC;QACF,CAAC;QAED,IAAI,IAAI,QAAQ,CAAC;IAClB,CAAC;IAED,OAAO,YAAY,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build/styles.d.ts

@@ -3,8 +3,29 @@ import { type LiteralUnion } from 'type-fest';
 import { type ForegroundColorName } from 'ansi-styles';
 import { type Node as YogaNode } from 'yoga-layout';
 export type Styles = {
-    readonly textWrap?: 'wrap' | 'end' | 'middle' | 'truncate-end' | 'truncate' | 'truncate-middle' | 'truncate-start';
-    readonly position?: 'absolute' | 'relative';
+    readonly textWrap?: 'wrap' | 'hard' | 'truncate-end' | 'truncate' | 'truncate-middle' | 'truncate-start';
+    /**
+    Controls how the element is positioned.
+
+    When `position` is `static`, `top`, `right`, `bottom`, and `left` are ignored.
+    */
+    readonly position?: 'absolute' | 'relative' | 'static';
+    /**
+    Top offset for positioned elements.
+    */
+    readonly top?: number | string;
+    /**
+    Right offset for positioned elements.
+    */
+    readonly right?: number | string;
+    /**
+    Bottom offset for positioned elements.
+    */
+    readonly bottom?: number | string;
+    /**
+    Left offset for positioned elements.
+    */
+    readonly left?: number | string;
     /**
     Size of the gap between an element's columns.
     */
@@ -102,12 +123,17 @@ export type Styles = {
     The align-items property defines the default behavior for how items are laid out along the cross axis (perpendicular to the main axis).
     See [align-items](https://css-tricks.com/almanac/properties/a/align-items/).
     */
-    readonly alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    readonly alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
     /**
     It makes possible to override the align-items value for specific flex items.
     See [align-self](https://css-tricks.com/almanac/properties/a/align-self/).
     */
-    readonly alignSelf?: 'flex-start' | 'center' | 'flex-end' | 'auto';
+    readonly alignSelf?: 'flex-start' | 'center' | 'flex-end' | 'auto' | 'stretch' | 'baseline';
+    /**
+    It defines the alignment along the cross axis when there are multiple lines of flex items (when using flex-wrap).
+    See [align-content](https://css-tricks.com/almanac/properties/a/align-content/).
+    */
+    readonly alignContent?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly';
     /**
     It defines the alignment along the main axis.
     See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).
@@ -123,13 +149,29 @@ export type Styles = {
     readonly height?: number | string;
     /**
     Sets a minimum width of the element.
+    Percentages aren't supported yet; see https://github.com/facebook/yoga/issues/872.
     */
     readonly minWidth?: number | string;
     /**
-    Sets a minimum height of the element.
+    Sets a minimum height of the element in lines (rows). You can also set it as a percentage, which will calculate the minimum height based on the height of the parent element.
     */
     readonly minHeight?: number | string;
     /**
+    Sets a maximum width of the element.
+    Percentages aren't supported yet; see https://github.com/facebook/yoga/issues/872.
+    */
+    readonly maxWidth?: number | string;
+    /**
+    Sets a maximum height of the element in lines (rows). You can also set it as a percentage, which will calculate the maximum height based on the height of the parent element.
+    */
+    readonly maxHeight?: number | string;
+    /**
+    Defines the aspect ratio (width/height) for the element.
+
+    Use it with at least one size constraint (`width`, `height`, `minHeight`, or `maxHeight`) so Ink can derive the missing dimension.
+    */
+    readonly aspectRatio?: number;
+    /**
     Set this property to `none` to hide the element.
     */
     readonly display?: 'flex' | 'none';
@@ -139,25 +181,25 @@ export type Styles = {
     readonly borderStyle?: keyof Boxes | BoxStyle;
     /**
     Determines whether the top border is visible.
-    
+
     @default true
     */
     readonly borderTop?: boolean;
     /**
     Determines whether the bottom border is visible.
-    
+
     @default true
     */
     readonly borderBottom?: boolean;
     /**
     Determines whether the left border is visible.
-    
+
     @default true
     */
     readonly borderLeft?: boolean;
     /**
     Determines whether the right border is visible.
-    
+
     @default true
     */
     readonly borderRight?: boolean;
@@ -189,31 +231,51 @@ export type Styles = {
     readonly borderDimColor?: boolean;
     /**
     Dim the top border color.
-    
+
     @default false
     */
     readonly borderTopDimColor?: boolean;
     /**
     Dim the bottom border color.
-    
+
     @default false
     */
     readonly borderBottomDimColor?: boolean;
     /**
     Dim the left border color.
-    
+
     @default false
     */
     readonly borderLeftDimColor?: boolean;
     /**
     Dim the right border color.
-    
+
     @default false
     */
     readonly borderRightDimColor?: boolean;
     /**
+    Change border background color. A shorthand for setting `borderTopBackgroundColor`, `borderRightBackgroundColor`, `borderBottomBackgroundColor`, and `borderLeftBackgroundColor`.
+    */
+    readonly borderBackgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
+    Change top border background color. Accepts the same values as `backgroundColor` in `Text` component.
+    */
+    readonly borderTopBackgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
+    Change bottom border background color. Accepts the same values as `backgroundColor` in `Text` component.
+    */
+    readonly borderBottomBackgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
+    Change left border background color. Accepts the same values as `backgroundColor` in `Text` component.
+    */
+    readonly borderLeftBackgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
+    Change right border background color. Accepts the same values as `backgroundColor` in `Text` component.
+    */
+    readonly borderRightBackgroundColor?: LiteralUnion<ForegroundColorName, string>;
+    /**
     Behavior for an element's overflow in both directions.
-    
+
     @default 'visible'
     */
     readonly overflow?: 'visible' | 'hidden';
@@ -231,10 +293,10 @@ export type Styles = {
     readonly overflowY?: 'visible' | 'hidden';
     /**
     Background color for the element.
-    
+
     Accepts the same values as `color` in the `<Text>` component.
     */
     readonly backgroundColor?: LiteralUnion<ForegroundColorName, string>;
 };
-declare const styles: (node: YogaNode, style?: Styles) => void;
+declare const styles: (node: YogaNode, style?: Styles, currentStyle?: Styles) => void;
 export default styles;

package/build/styles.js

@@ -1,9 +1,31 @@
 import Yoga from 'yoga-layout';
+const positionEdges = [
+    ['top', Yoga.EDGE_TOP],
+    ['right', Yoga.EDGE_RIGHT],
+    ['bottom', Yoga.EDGE_BOTTOM],
+    ['left', Yoga.EDGE_LEFT],
+];
 const applyPositionStyles = (node, style) => {
     if ('position' in style) {
-        node.setPositionType(style.position === 'absolute'
-            ? Yoga.POSITION_TYPE_ABSOLUTE
-            : Yoga.POSITION_TYPE_RELATIVE);
+        let positionType = Yoga.POSITION_TYPE_RELATIVE;
+        if (style.position === 'absolute') {
+            positionType = Yoga.POSITION_TYPE_ABSOLUTE;
+        }
+        else if (style.position === 'static') {
+            positionType = Yoga.POSITION_TYPE_STATIC;
+        }
+        node.setPositionType(positionType);
+    }
+    for (const [property, edge] of positionEdges) {
+        if (!(property in style)) {
+            continue;
+        }
+        const value = style[property];
+        if (typeof value === 'string') {
+            node.setPositionPercent(edge, Number.parseFloat(value));
+            continue;
+        }
+        node.setPosition(edge, value);
     }
 };
 const applyMarginStyles = (node, style) => {
@@ -17,16 +39,16 @@ const applyMarginStyles = (node, style) => {
         node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? 0);
     }
     if ('marginLeft' in style) {
-        node.setMargin(Yoga.EDGE_START, style.marginLeft || 0);
+        node.setMargin(Yoga.EDGE_START, style.marginLeft ?? 0);
     }
     if ('marginRight' in style) {
-        node.setMargin(Yoga.EDGE_END, style.marginRight || 0);
+        node.setMargin(Yoga.EDGE_END, style.marginRight ?? 0);
     }
     if ('marginTop' in style) {
-        node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0);
+        node.setMargin(Yoga.EDGE_TOP, style.marginTop ?? 0);
     }
     if ('marginBottom' in style) {
-        node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0);
+        node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom ?? 0);
     }
 };
 const applyPaddingStyles = (node, style) => {
@@ -40,16 +62,16 @@ const applyPaddingStyles = (node, style) => {
         node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? 0);
     }
     if ('paddingLeft' in style) {
-        node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0);
+        node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft ?? 0);
     }
     if ('paddingRight' in style) {
-        node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0);
+        node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight ?? 0);
     }
     if ('paddingTop' in style) {
-        node.setPadding(Yoga.EDGE_TOP, style.paddingTop || 0);
+        node.setPadding(Yoga.EDGE_TOP, style.paddingTop ?? 0);
     }
     if ('paddingBottom' in style) {
-        node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom || 0);
+        node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom ?? 0);
     }
 };
 const applyFlexStyles = (node, style) => {
@@ -92,8 +114,7 @@ const applyFlexStyles = (node, style) => {
             node.setFlexBasisPercent(Number.parseInt(style.flexBasis, 10));
         }
         else {
-            // This should be replaced with node.setFlexBasisAuto() when new Yoga release is out
-            node.setFlexBasis(Number.NaN);
+            node.setFlexBasisAuto();
         }
     }
     if ('alignItems' in style) {
@@ -109,6 +130,9 @@ const applyFlexStyles = (node, style) => {
         if (style.alignItems === 'flex-end') {
             node.setAlignItems(Yoga.ALIGN_FLEX_END);
         }
+        if (style.alignItems === 'baseline') {
+            node.setAlignItems(Yoga.ALIGN_BASELINE);
+        }
     }
     if ('alignSelf' in style) {
         if (style.alignSelf === 'auto' || !style.alignSelf) {
@@ -123,6 +147,36 @@ const applyFlexStyles = (node, style) => {
         if (style.alignSelf === 'flex-end') {
             node.setAlignSelf(Yoga.ALIGN_FLEX_END);
         }
+        if (style.alignSelf === 'stretch') {
+            node.setAlignSelf(Yoga.ALIGN_STRETCH);
+        }
+        if (style.alignSelf === 'baseline') {
+            node.setAlignSelf(Yoga.ALIGN_BASELINE);
+        }
+    }
+    if ('alignContent' in style) {
+        // Keep wrapped lines top-packed by default; stretch can add surprising empty rows in fixed-height boxes.
+        if (style.alignContent === 'flex-start' || !style.alignContent) {
+            node.setAlignContent(Yoga.ALIGN_FLEX_START);
+        }
+        if (style.alignContent === 'center') {
+            node.setAlignContent(Yoga.ALIGN_CENTER);
+        }
+        if (style.alignContent === 'flex-end') {
+            node.setAlignContent(Yoga.ALIGN_FLEX_END);
+        }
+        if (style.alignContent === 'space-between') {
+            node.setAlignContent(Yoga.ALIGN_SPACE_BETWEEN);
+        }
+        if (style.alignContent === 'space-around') {
+            node.setAlignContent(Yoga.ALIGN_SPACE_AROUND);
+        }
+        if (style.alignContent === 'space-evenly') {
+            node.setAlignContent(Yoga.ALIGN_SPACE_EVENLY);
+        }
+        if (style.alignContent === 'stretch') {
+            node.setAlignContent(Yoga.ALIGN_STRETCH);
+        }
     }
     if ('justifyContent' in style) {
         if (style.justifyContent === 'flex-start' || !style.justifyContent) {
@@ -184,28 +238,45 @@ const applyDimensionStyles = (node, style) => {
             node.setMinHeight(style.minHeight ?? 0);
         }
     }
+    if ('maxWidth' in style) {
+        if (typeof style.maxWidth === 'string') {
+            node.setMaxWidthPercent(Number.parseInt(style.maxWidth, 10));
+        }
+        else {
+            node.setMaxWidth(style.maxWidth);
+        }
+    }
+    if ('maxHeight' in style) {
+        if (typeof style.maxHeight === 'string') {
+            node.setMaxHeightPercent(Number.parseInt(style.maxHeight, 10));
+        }
+        else {
+            node.setMaxHeight(style.maxHeight);
+        }
+    }
+    if ('aspectRatio' in style) {
+        node.setAspectRatio(style.aspectRatio);
+    }
 };
 const applyDisplayStyles = (node, style) => {
     if ('display' in style) {
         node.setDisplay(style.display === 'flex' ? Yoga.DISPLAY_FLEX : Yoga.DISPLAY_NONE);
     }
 };
-const applyBorderStyles = (node, style) => {
-    if ('borderStyle' in style) {
-        const borderWidth = style.borderStyle ? 1 : 0;
-        if (style.borderTop !== false) {
-            node.setBorder(Yoga.EDGE_TOP, borderWidth);
-        }
-        if (style.borderBottom !== false) {
-            node.setBorder(Yoga.EDGE_BOTTOM, borderWidth);
-        }
-        if (style.borderLeft !== false) {
-            node.setBorder(Yoga.EDGE_LEFT, borderWidth);
-        }
-        if (style.borderRight !== false) {
-            node.setBorder(Yoga.EDGE_RIGHT, borderWidth);
-        }
-    }
+const applyBorderStyles = (node, style, currentStyle) => {
+    const hasBorderChanges = 'borderStyle' in style ||
+        'borderTop' in style ||
+        'borderBottom' in style ||
+        'borderLeft' in style ||
+        'borderRight' in style;
+    if (!hasBorderChanges) {
+        return;
+    }
+    const borderWidth = currentStyle.borderStyle ? 1 : 0;
+    node.setBorder(Yoga.EDGE_TOP, currentStyle.borderTop === false ? 0 : borderWidth);
+    node.setBorder(Yoga.EDGE_BOTTOM, currentStyle.borderBottom === false ? 0 : borderWidth);
+    node.setBorder(Yoga.EDGE_LEFT, currentStyle.borderLeft === false ? 0 : borderWidth);
+    node.setBorder(Yoga.EDGE_RIGHT, currentStyle.borderRight === false ? 0 : borderWidth);
 };
 const applyGapStyles = (node, style) => {
     if ('gap' in style) {
@@ -218,14 +289,14 @@ const applyGapStyles = (node, style) => {
         node.setGap(Yoga.GUTTER_ROW, style.rowGap ?? 0);
     }
 };
-const styles = (node, style = {}) => {
+const styles = (node, style = {}, currentStyle = style) => {
     applyPositionStyles(node, style);
     applyMarginStyles(node, style);
     applyPaddingStyles(node, style);
     applyFlexStyles(node, style);
     applyDimensionStyles(node, style);
     applyDisplayStyles(node, style);
-    applyBorderStyles(node, style);
+    applyBorderStyles(node, style, currentStyle);
     applyGapStyles(node, style);
 };
 export default styles;