@visulima/tui 1.0.0-alpha.1 → 1.0.0-alpha.3

package/dist/packem_shared/{render-BAwdjfki.js → render-Bm9Oa1sG.js}

@@ -32,37 +32,37 @@ const {
 const {
   Console
 } = __cjs_getBuiltinModule("node:console");
-import { cursorShow, cursorUp, cursorTo, cursorDown, eraseLines, cursorHide, cursorNextLine, eraseLineEnd, ALT_SCREEN_ON, resetTerminal, ALT_SCREEN_OFF } from '@visulima/ansi';
+import { cursorShow, setMode, BracketedPasteMode, resetMode, cursorUp, cursorTo, cursorHide, cursorDown, eraseLines, cursorNextLine, eraseLineEnd, createDecMode, ALT_SCREEN_ON, clearScreenAndHomeCursor, ALT_SCREEN_OFF } from '@visulima/ansi';
 import { wordWrap } from '@visulima/string';
 import patchConsole from 'patch-console';
 import { ConcurrentRoot, LegacyRoot } from 'react-reconciler/constants.js';
 import Yoga from 'yoga-layout';
-import { a as accessibilityContext } from './AccessibilityContext-BLelHhNU.js';
+import { a as accessibilityContext } from './accessibility-context-BLelHhNU.js';
 const {
   EventEmitter
 } = __cjs_getBuiltinModule("node:events");
 import { PureComponent, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { a as animationContext } from './AnimationContext-BcJg8Jr6.js';
-import { A as AppContext } from './AppContext-CP0U6H7O.js';
-import { C as CursorContext } from './CursorContext-JxRzlqAx.js';
+import { a as animationContext } from './animation-context-BcJg8Jr6.js';
+import { A as AppContext } from './app-context-CP0U6H7O.js';
+import { C as CursorContext } from './cursor-context-JxRzlqAx.js';
 const {
   existsSync,
   readFileSync
 } = __cjs_getBuiltinModule("node:fs");
 const require$$1 = __cjs_getBuiltinModule("module");
-import Box from './Box-D_pSJ9Jp.js';
-import Text from './Text-DvAUdZcK.js';
-import { F as FocusContext } from './FocusContext-CWkYtgcm.js';
-import { S as StderrContext } from './StderrContext-Bj4Mf7v7.js';
-import { S as StdinContext } from './StdinContext-Bq_GNJ3z.js';
-import { S as StdoutContext } from './StdoutContext-CgjWeCdO.js';
-import { c as createNode } from './dom-DvzhsAez.js';
+import Box from './Box-W1w_NGin.js';
+import Text from './Text-CtUwV89_.js';
+import { F as FocusContext } from './focus-context-CWkYtgcm.js';
+import { S as StderrContext } from './stderr-context-Bj4Mf7v7.js';
+import { S as StdinContext } from './stdin-context-Bq_GNJ3z.js';
+import { S as StdoutContext } from './stdout-context-CgjWeCdO.js';
+import { c as createNode } from './dom-CrbpQgat.js';
 import { resolveFlags } from './kittyFlags-bNNf_9kX.js';
-import { a as clearStyledLineCache } from './measure-text-DItZYotK.js';
-import { r as reconcilerInstance, s as styles } from './reconciler-gfmqURLy.js';
-import { a as renderToStatic, r as renderer } from './renderer-B3wROkeg.js';
-import { measureAndExtractObservers } from './ResizeObserverEntry-Br4seLeQ.js';
-import { calculateScroll } from './getScrollHeight-BubfU_df.js';
+import { a as clearStyledLineCache } from './measure-text-BdOhbOeh.js';
+import { r as reconcilerInstance, s as styles } from './reconciler-Dd7Z0A97.js';
+import { a as renderToStatic, r as renderer } from './renderer-GE9OLNNM.js';
+import { measureAndExtractObservers } from './ResizeObserverEntry-Vr8GZ74x.js';
+import { calculateScroll } from './getScrollHeight-Cz3CDQN2.js';
 import { g as getWindowSize } from './utils-BgdlrbOH.js';
 
 import __cjs_mod__ from "node:module"; // -- packem CommonJS require shim --
@@ -1016,6 +1016,8 @@ class ErrorBoundary extends PureComponent {
 const tab = "	";
 const shiftTab = "\x1B[Z";
 const escape = "\x1B";
+const enableBracketedPaste = setMode(BracketedPasteMode);
+const disableBracketedPaste = resetMode(BracketedPasteMode);
 const App = ({
   children,
   exitOnCtrlC,
@@ -1113,11 +1115,12 @@ const App = ({
     },
     [clearAnimationTimer, scheduleAnimationTick]
   );
-  useEffect(() => {
-    return () => {
+  useEffect(
+    () => () => {
       clearAnimationTimer();
-    };
-  }, [clearAnimationTimer]);
+    },
+    [clearAnimationTimer]
+  );
   const isRawModeSupported = stdin.isTTY;
   const detachReadableListener = useCallback(() => {
     if (!readableListenerRef.current) {
@@ -1245,7 +1248,7 @@ const App = ({
       }
       if (isEnabled) {
         if (bracketedPasteModeEnabledCount.current === 0) {
-          stdout.write("\x1B[?2004h");
+          stdout.write(enableBracketedPaste);
         }
         bracketedPasteModeEnabledCount.current++;
         return;
@@ -1254,7 +1257,7 @@ const App = ({
         return;
       }
       if (--bracketedPasteModeEnabledCount.current === 0) {
-        stdout.write("\x1B[?2004l");
+        stdout.write(disableBracketedPaste);
       }
     },
     [stdout]
@@ -1408,7 +1411,7 @@ const App = ({
       }
       if (bracketedPasteModeEnabledCount.current > 0) {
         if (stdout.isTTY && canWriteToStdout) {
-          stdout.write("\x1B[?2004l");
+          stdout.write(disableBracketedPaste);
         }
         bracketedPasteModeEnabledCount.current = 0;
       }
@@ -1431,32 +1434,23 @@ const App = ({
       stdin
     };
   }, [stdin, handleSetRawMode, handleSetBracketedPasteMode, isRawModeSupported, exitOnCtrlC, internal_eventEmitter]);
-  const stdoutContextValue = useMemo(
-    () => {
-      return {
-        stdout,
-        write: writeToStdout
-      };
-    },
-    [stdout, writeToStdout]
-  );
-  const stderrContextValue = useMemo(
-    () => {
-      return {
-        stderr,
-        write: writeToStderr
-      };
-    },
-    [stderr, writeToStderr]
-  );
-  const cursorContextValue = useMemo(
-    () => {
-      return {
-        setCursorPosition
-      };
-    },
-    [setCursorPosition]
-  );
+  const stdoutContextValue = useMemo(() => {
+    return {
+      stdout,
+      write: writeToStdout
+    };
+  }, [stdout, writeToStdout]);
+  const stderrContextValue = useMemo(() => {
+    return {
+      stderr,
+      write: writeToStderr
+    };
+  }, [stderr, writeToStderr]);
+  const cursorContextValue = useMemo(() => {
+    return {
+      setCursorPosition
+    };
+  }, [setCursorPosition]);
   const focusContextValue = useMemo(() => {
     return {
       activate: activateFocusable,
@@ -1471,26 +1465,25 @@ const App = ({
       remove: removeFocusable
     };
   }, [activeFocusId, addFocusable, removeFocusable, activateFocusable, deactivateFocusable, enableFocus, disableFocus, focusNext, focusPrevious, focus]);
-  const animationContextValue = useMemo(
-    () => ({
+  const animationContextValue = useMemo(() => {
+    return {
       renderThrottleMs,
       subscribe: animationSubscribe
-    }),
-    [animationSubscribe, renderThrottleMs]
-  );
+    };
+  }, [animationSubscribe, renderThrottleMs]);
   return jsx(AppContext.Provider, { value: appContextValue, children: jsx(StdinContext.Provider, { value: stdinContextValue, children: jsx(StdoutContext.Provider, { value: stdoutContextValue, children: jsx(StderrContext.Provider, { value: stderrContextValue, children: jsx(FocusContext.Provider, { value: focusContextValue, children: jsx(animationContext.Provider, { value: animationContextValue, children: jsx(CursorContext.Provider, { value: cursorContextValue, children: jsx(ErrorBoundary, { onError: handleExit, children }) }) }) }) }) }) }) });
 };
 App.displayName = "InternalApp";
 
-const showCursorEscape = "\x1B[?25h";
-const hideCursorEscape = "\x1B[?25l";
+const instances = /* @__PURE__ */ new WeakMap();
+
 const cursorPositionChanged = (a, b) => a?.x !== b?.x || a?.y !== b?.y;
 const buildCursorSuffix = (visibleLineCount, cursorPosition) => {
   if (!cursorPosition) {
     return "";
   }
   const moveUp = visibleLineCount - cursorPosition.y;
-  return (moveUp > 0 ? cursorUp(moveUp) : "") + cursorTo(cursorPosition.x) + showCursorEscape;
+  return (moveUp > 0 ? cursorUp(moveUp) : "") + cursorTo(cursorPosition.x) + cursorShow;
 };
 const buildReturnToBottom = (previousLineCount, previousCursorPosition) => {
   if (!previousCursorPosition) {
@@ -1500,7 +1493,7 @@ const buildReturnToBottom = (previousLineCount, previousCursorPosition) => {
   return (down > 0 ? cursorDown(down) : "") + cursorTo(0);
 };
 const buildCursorOnlySequence = (input) => {
-  const hidePrefix = input.cursorWasShown ? hideCursorEscape : "";
+  const hidePrefix = input.cursorWasShown ? cursorHide : "";
   const returnToBottom = buildReturnToBottom(input.previousLineCount, input.previousCursorPosition);
   const cursorSuffix = buildCursorSuffix(input.visibleLineCount, input.cursorPosition);
   return hidePrefix + returnToBottom + cursorSuffix;
@@ -1509,11 +1502,9 @@ const buildReturnToBottomPrefix = (cursorWasShown, previousLineCount, previousCu
   if (!cursorWasShown) {
     return "";
   }
-  return hideCursorEscape + buildReturnToBottom(previousLineCount, previousCursorPosition);
+  return cursorHide + buildReturnToBottom(previousLineCount, previousCursorPosition);
 };
 
-const instances = /* @__PURE__ */ new WeakMap();
-
 const visibleLineCount = (lines, string_) => string_.endsWith("\n") ? lines.length - 1 : lines.length;
 const getViewportRows = (stream) => stream.rows || Infinity;
 const clampToViewport = (lineCount, stream) => Math.min(lineCount, getViewportRows(stream));
@@ -1595,7 +1586,7 @@ const createStandard = (stream, { showCursor = false } = {}) => {
     previousOutput = string_;
     previousLineCount = lines.length;
     if (!activeCursor && cursorWasShown) {
-      stream.write(hideCursorEscape);
+      stream.write(cursorHide);
     }
     if (activeCursor) {
       stream.write(buildCursorSuffix(visibleLineCount(lines, string_), activeCursor));
@@ -1724,7 +1715,7 @@ const createIncremental = (stream, { showCursor = false } = {}) => {
     previousOutput = string_;
     previousLines = lines;
     if (!activeCursor && cursorWasShown) {
-      stream.write(hideCursorEscape);
+      stream.write(cursorHide);
     }
     if (activeCursor) {
       stream.write(buildCursorSuffix(visibleLineCount(lines, string_), activeCursor));
@@ -1748,6 +1739,13 @@ const create = (stream, { incremental = false, showCursor = false } = {}) => {
 };
 const logUpdate = { create };
 
+const SynchronizedOutputMode = createDecMode(2026);
+const bsu = setMode(SynchronizedOutputMode);
+const esu = resetMode(SynchronizedOutputMode);
+function shouldSynchronize(stream, interactive) {
+  return "isTTY" in stream && stream.isTTY && (interactive ?? !isInCi);
+}
+
 let cachedRendererClass;
 const getRendererClass = () => {
   if (cachedRendererClass === false) {
@@ -1805,13 +1803,13 @@ const createNative = (stream) => {
         return;
       }
       if (stream.isTTY) {
-        renderer.writeRaw("\x1B[?2026h");
+        renderer.writeRaw(bsu);
       }
       try {
         renderer.render(buffer);
       } finally {
         if (stream.isTTY) {
-          renderer.writeRaw("\x1B[?2026l");
+          renderer.writeRaw(esu);
         }
       }
     },
@@ -1821,12 +1819,6 @@ const createNative = (stream) => {
   };
 };
 
-const bsu = "\x1B[?2026h";
-const esu = "\x1B[?2026l";
-function shouldSynchronize(stream, interactive) {
-  return "isTTY" in stream && stream.isTTY && (interactive ?? !isInCi);
-}
-
 if (!console.Console) {
   console.Console = Console;
 }
@@ -2195,9 +2187,10 @@ class Ink {
     this.onRender();
   }
   /**
-   * Walk the DOM tree before Yoga layout to handle StaticRender nodes:
-   * - Re-attach Yoga children if a cached render was invalidated
-   * - Pre-render ink-static-render nodes that don't have a cached render yet
+   * Walks the DOM tree before Yoga layout to handle StaticRender nodes.
+   *
+   * - Re-attach Yoga children if a cached render was invalidated.
+   * - Pre-render ink-static-render nodes that don't have a cached render yet.
    */
   prepareYogaTree(node, flushLayoutObservers) {
     if (node.isYogaTreeDetached && !node.cachedRender && node.yogaNode) {
@@ -2205,7 +2198,7 @@ class Ink {
       node.yogaNode.setHeightAuto();
       styles(node.yogaNode, node.style);
       while (node.yogaNode.getChildCount() > 0) {
-        node.yogaNode.removeChild(node.yogaNode.getChild(0));
+        node.yogaNode.getChild(0).remove();
       }
       let yogaIndex = 0;
       for (const child of node.childNodes) {
@@ -2460,7 +2453,7 @@ class Ink {
           this.lastOutputHeight = 0;
           this.fullStaticOutput = "";
           this.writeBestEffort(this.options.stdout, ALT_SCREEN_OFF);
-          this.writeBestEffort(this.options.stdout, showCursorEscape);
+          this.writeBestEffort(this.options.stdout, cursorShow);
           this.alternateScreen = false;
         } else if (!this.interactive) {
           this.options.stdout.write(this.options.debug ? "\n" : `${this.lastOutput}
@@ -2569,7 +2562,7 @@ class Ink {
     this.alternateScreen = this.resolveAlternateScreenOption(enabled, this.interactive);
     if (this.alternateScreen) {
       this.writeBestEffort(this.options.stdout, ALT_SCREEN_ON);
-      this.writeBestEffort(this.options.stdout, hideCursorEscape);
+      this.writeBestEffort(this.options.stdout, cursorHide);
     }
   }
   resolveInteractiveOption(interactive) {
@@ -2642,7 +2635,7 @@ class Ink {
       if (sync) {
         this.options.stdout.write(bsu);
       }
-      this.options.stdout.write(resetTerminal + this.fullStaticOutput + output);
+      this.options.stdout.write(clearScreenAndHomeCursor + this.fullStaticOutput + output);
       this.lastOutput = output;
       this.lastOutputToRender = outputToRender;
       this.lastOutputHeight = outputHeight;

package/dist/packem_shared/{render-Bpjhf0lD.js → render-CjlKdg4m.js}

@@ -1,13 +1,13 @@
 import React from 'react';
 import { FocusProvider, useFocusManager } from './FocusContext-D5wFxSRz.js';
-import { TuiContext, useInput } from './TuiContext-CqEjMyXd.js';
-import { LayoutNode } from './LayoutNode-Cjnsodiy.js';
-import { T as TuiReconciler, s as setOnAfterCommit } from './reconciler-BXf6miSS.js';
-import { renderTreeToBuffer } from './renderTreeToBuffer-D3mo7M7m.js';
-import { TuiApp } from './TuiApp-DfxOnXqi.js';
-import { InputParser } from './InputParser-BKHpWfvN.js';
+import { TuiContext, useInput } from './TuiContext-lXmJFd-x.js';
+import { LayoutNode } from './LayoutNode-DAkKg9TE.js';
+import { T as TuiReconciler, s as setOnAfterCommit } from './reconciler-mzMwSOft.js';
+import { renderTreeToBuffer } from './renderTreeToBuffer-CDDTGyZn.js';
+import { TuiApp } from './TuiApp-DtdgNRWa.js';
+import { InputParser } from './InputParser-BlsfeY9J.js';
 import { terminalSize } from './Renderer-zZ5O3vxc.js';
-import { createInlineLoop } from './createInlineLoop-BxMmcq9D.js';
+import { createInlineLoop } from './createInlineLoop-Dnfm1ZSJ.js';
 
 const _Box = (props) => React.createElement("box", props, props.children);
 const _Text = (props) => React.createElement("text", props, props.children);
@@ -15,10 +15,12 @@ const _Spacer = () => React.createElement(_Box, { flexGrow: 1 });
 const TabHandler = ({ children }) => {
   const { disableFocus, enableFocus, focusNext, focusPrevious } = useFocusManager();
   useInput((_input, key) => {
-    if (key.tab && !key.shift)
+    if (key.tab && !key.shift) {
       focusNext();
-    if (key.tab && key.shift)
+    }
+    if (key.tab && key.shift) {
       focusPrevious();
+    }
     if (key.escape) {
       disableFocus();
       enableFocus();
@@ -174,10 +176,12 @@ function renderInline(element, options) {
     resolveExit = r;
   });
   process.on("exit", () => {
-    if (stdoutLines.length > 0)
+    if (stdoutLines.length > 0) {
       process.stdout.write(stdoutLines.join(""));
-    if (stderrLines.length > 0)
+    }
+    if (stderrLines.length > 0) {
       process.stderr.write(stderrLines.join(""));
+    }
     resolveExit();
   });
   loop.start();

package/dist/packem_shared/{renderToString-ClIaXgrC.js → renderToString-CWYS1ZXE.js}

@@ -1,9 +1,9 @@
 import { LegacyRoot } from 'react-reconciler/constants.js';
 import Yoga from 'yoga-layout';
-import { c as createNode } from './dom-DvzhsAez.js';
-import { r as reconcilerInstance } from './reconciler-gfmqURLy.js';
-import { r as renderer } from './renderer-B3wROkeg.js';
-import { calculateScroll } from './getScrollHeight-BubfU_df.js';
+import { c as createNode } from './dom-CrbpQgat.js';
+import { r as reconcilerInstance } from './reconciler-Dd7Z0A97.js';
+import { r as renderer } from './renderer-GE9OLNNM.js';
+import { calculateScroll } from './getScrollHeight-Cz3CDQN2.js';
 
 const renderToString = (node, options) => {
   const columns = options?.columns ?? 80;

package/dist/packem_shared/{renderToString-Cfg55DRD.js → renderToString-DB3ILWFm.js}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { FocusProvider } from './FocusContext-D5wFxSRz.js';
-import { TuiContext } from './TuiContext-CqEjMyXd.js';
-import { LayoutNode } from './LayoutNode-Cjnsodiy.js';
-import { T as TuiReconciler } from './reconciler-BXf6miSS.js';
-import { renderTreeToBuffer } from './renderTreeToBuffer-D3mo7M7m.js';
+import { TuiContext } from './TuiContext-lXmJFd-x.js';
+import { LayoutNode } from './LayoutNode-DAkKg9TE.js';
+import { T as TuiReconciler } from './reconciler-mzMwSOft.js';
+import { renderTreeToBuffer } from './renderTreeToBuffer-CDDTGyZn.js';
 import { Cell } from './Cell-DCg1kJY-.js';
 
 function renderToString(element, options) {

package/dist/packem_shared/{renderTreeToBuffer-D3mo7M7m.js → renderTreeToBuffer-CDDTGyZn.js}

@@ -1,6 +1,6 @@
 import { c as cliBoxes } from './boxes-oi3WUbyR.js';
-import { resolveColor } from './NAMED_COLORS-a4QBvb5r.js';
-import { a as getCodePointWidth } from './text-width-DhuarWcB.js';
+import { resolveColor } from './NAMED_COLORS-DcI3erCu.js';
+import { a as getCodePointWidth } from './text-width-Db-AxMea.js';
 
 const CONTINUATION_CELL_CODE = 1114112;
 const SCROLLBAR_FULL = 9608;
@@ -165,10 +165,12 @@ function paintBorder(node, buffer, cols, rows, absX, absY, w, h, fg, bg, styles,
   const yStart = showTop ? 1 : 0;
   const yEnd = canShowBottom ? h - 1 : h;
   for (let y = yStart; y < yEnd; y++) {
-    if (showLeft)
+    if (showLeft) {
       writeCell(buffer, cols, rows, absX, absY + y, box.left.codePointAt(0), borderAttribute, clip);
-    if (showRight)
+    }
+    if (showRight) {
       writeCell(buffer, cols, rows, absX + w - 1, absY + y, box.right.codePointAt(0), borderAttribute, clip);
+    }
   }
 }
 function collectText(node) {
@@ -202,8 +204,9 @@ function paintText(text, buffer, cols, rows, absX, absY, w, h, attributeCode, cl
       cursorX = 0;
       cursorY++;
     }
-    if (cursorY >= h)
+    if (cursorY >= h) {
       break;
+    }
     if (charWidth > w) {
       writeCell(buffer, cols, rows, absX + cursorX, absY + cursorY, 32, attributeCode, clip);
       cursorX += 1;

package/dist/packem_shared/{renderer-B3wROkeg.js → renderer-GE9OLNNM.js}

@@ -1,17 +1,19 @@
-import { w as wrapText, i as isNodeSelectable } from './dom-DvzhsAez.js';
+import { w as wrapText, i as isNodeSelectable } from './dom-CrbpQgat.js';
 import { getStringWidth, isFullwidthCodePoint, indent } from '@visulima/string';
-import { B as BOLD_MASK, D as DIM_MASK, I as ITALIC_MASK, U as UNDERLINE_MASK, e as INVERSE_MASK, H as HIDDEN_MASK, f as STRIKETHROUGH_MASK, g as colorToSgrParams, F as FULL_WIDTH_MASK, h as colorToAnsi256, S as StyledLine, j as textToStyledLine, p as plainTextToStyledLine } from './measure-text-DItZYotK.js';
+import { B as BOLD_MASK, D as DIM_MASK, I as ITALIC_MASK, U as UNDERLINE_MASK, e as INVERSE_MASK, H as HIDDEN_MASK, f as STRIKETHROUGH_MASK, g as colorToSgrParams, F as FULL_WIDTH_MASK, h as colorToAnsi256, S as StyledLine, j as textToStyledLine, p as plainTextToStyledLine } from './measure-text-BdOhbOeh.js';
 import Yoga from 'yoga-layout';
-import { j as getRelativeTop, i as getRelativeLeft, n as getAbsoluteContentPosition, c as calculateScrollbarLayout } from './measure-element-Reza_yfC.js';
+import { j as getRelativeTop, i as getRelativeLeft, n as getAbsoluteContentPosition, c as calculateScrollbarLayout } from './measure-element-Bc6PEaIe.js';
 import { g as getBackgroundColorEscape, c as colorize } from './colorize-88_Vk8cn.js';
 import colorizeDefault from '@visulima/colorize';
 import { c as cliBoxes } from './boxes-oi3WUbyR.js';
-import { getScrollTop } from './getScrollHeight-BubfU_df.js';
+import { getScrollTop } from './getScrollHeight-Cz3CDQN2.js';
 import squashTextNodes from './squashTextNodesWithMap-iqm6OMMT.js';
 
 import __cjs_mod__ from "node:module"; // -- packem CommonJS require shim --
 const require = __cjs_mod__.createRequire(import.meta.url);
-const getMaxWidth = (yogaNode) => yogaNode.getComputedWidth() - yogaNode.getComputedPadding(Yoga.EDGE_LEFT) - yogaNode.getComputedPadding(Yoga.EDGE_RIGHT) - yogaNode.getComputedBorder(Yoga.EDGE_LEFT) - yogaNode.getComputedBorder(Yoga.EDGE_RIGHT);
+const getMaxWidth = (yogaNode) => Math.round(
+  yogaNode.getComputedWidth() - Math.max(0, yogaNode.getComputedLeft() + yogaNode.getComputedWidth() - (yogaNode.getParent()?.getComputedWidth() ?? yogaNode.getComputedWidth())) - yogaNode.getComputedPadding(Yoga.EDGE_LEFT) - yogaNode.getComputedPadding(Yoga.EDGE_RIGHT) - yogaNode.getComputedBorder(Yoga.EDGE_LEFT) - yogaNode.getComputedBorder(Yoga.EDGE_RIGHT)
+);
 
 const CONTINUATION_CELL_CODE = 1114112;
 
@@ -242,19 +244,21 @@ class Output {
   memoizationProbeCountdown = 0;
   constructor(options) {
     const { caches, height, width } = options;
-    this.width = width;
-    this.height = height;
+    this.width = Math.round(width);
+    this.height = Math.round(height);
     this.caches = caches ?? new OutputCaches();
-    this.grid = this.createGrid(width, height);
+    this.grid = this.createGrid(this.width, this.height);
   }
   reset(width, height) {
-    this.width = width;
-    this.height = height;
+    this.width = Math.round(width);
+    this.height = Math.round(height);
     this.clipStack.length = 0;
-    this.grid = this.createGrid(width, height);
+    this.grid = this.createGrid(this.width, this.height);
   }
   startChildRegion(absX, absY, width, height) {
-    this.clipStack.push({ x1: absX, x2: absX + width, y1: absY, y2: absY + height });
+    const x1 = Math.round(absX);
+    const y1 = Math.round(absY);
+    this.clipStack.push({ x1, x2: x1 + Math.round(width), y1, y2: y1 + Math.round(height) });
   }
   endChildRegion() {
     this.clipStack.pop();
@@ -497,8 +501,8 @@ const renderBackground = (x, y, node, output) => {
   if (!node.style.backgroundColor) {
     return;
   }
-  const width = node.yogaNode.getComputedWidth();
-  const height = node.yogaNode.getComputedHeight();
+  const width = Math.round(node.yogaNode.getComputedWidth());
+  const height = Math.round(node.yogaNode.getComputedHeight());
   const leftBorderWidth = node.style.borderStyle && node.style.borderLeft !== false ? 1 : 0;
   const rightBorderWidth = node.style.borderStyle && node.style.borderRight !== false ? 1 : 0;
   const topBorderHeight = node.style.borderStyle && node.style.borderTop !== false ? 1 : 0;
@@ -559,8 +563,8 @@ const buildBorderWithTitle = (borderChar, contentWidth, title, titleAlignment, r
 };
 const renderBorder = (x, y, node, output) => {
   if (node.style.borderStyle) {
-    const width = node.yogaNode.getComputedWidth();
-    const height = node.yogaNode.getComputedHeight();
+    const width = Math.round(node.yogaNode.getComputedWidth());
+    const height = Math.round(node.yogaNode.getComputedHeight());
     const box = typeof node.style.borderStyle === "string" ? cliBoxes[node.style.borderStyle] : node.style.borderStyle;
     const topBorderColor = node.style.borderTopColor ?? node.style.borderColor;
     const bottomBorderColor = node.style.borderBottomColor ?? node.style.borderColor;
@@ -722,14 +726,14 @@ const identifyActiveStickyNodes = (stickyNodes, node, scrollTop, viewportBottom)
       continue;
     }
     const stickyNodeTop = getRelativeTop(stickyChild, node) ?? 0;
-    const stickyNodeHeight = stickyChild.yogaNode.getComputedHeight();
+    const stickyNodeHeight = Math.round(stickyChild.yogaNode.getComputedHeight());
     const stickyNodeBottom = stickyNodeTop + stickyNodeHeight;
     const parent = stickyChild.parentNode;
     let parentTop = 0;
     let parentHeight = Number.MAX_SAFE_INTEGER;
     if (parent?.yogaNode) {
       parentTop = getRelativeTop(parent, node) ?? 0;
-      parentHeight = parent.yogaNode.getComputedHeight();
+      parentHeight = Math.round(parent.yogaNode.getComputedHeight());
     }
     if (stickyType === "top" && stickyNodeTop < scrollTop && parentTop + parentHeight > scrollTop) {
       activeTopStickyNode = stickyNodeInfo;
@@ -788,14 +792,14 @@ const renderActiveStickyNodes = (activeStickyNodes, node, output, createOutput,
       continue;
     }
     const stickyNodeTop = getRelativeTop(stickyNode, node) ?? 0;
-    const stickyNodeHeight = stickyNode.yogaNode.getComputedHeight();
+    const stickyNodeHeight = Math.round(stickyNode.yogaNode.getComputedHeight());
     const stickyOffsetX = x + (getRelativeLeft(stickyNode, node) ?? 0);
     const parent = stickyNode.parentNode;
     let parentTop = 0;
     let parentHeight = Number.MAX_SAFE_INTEGER;
     if (parent?.yogaNode) {
       parentTop = getRelativeTop(parent, node) ?? 0;
-      parentHeight = parent.yogaNode.getComputedHeight();
+      parentHeight = Math.round(parent.yogaNode.getComputedHeight());
     }
     let finalStickyY;
     if (type === "top") {
@@ -819,7 +823,7 @@ const renderActiveStickyNodes = (activeStickyNodes, node, output, createOutput,
       const naturalStickyY = y - currentScrollTop + stickyNodeTop;
       const stuckStickyY = y + currentBorderTop + currentClientHeight - stickyNodeHeight;
       if (nextStickyNodeInfo?.node?.yogaNode) {
-        const nextNodeHeight = nextStickyNodeInfo.node.yogaNode.getComputedHeight();
+        const nextNodeHeight = Math.round(nextStickyNodeInfo.node.yogaNode.getComputedHeight());
         const nextNodeTop = getRelativeTop(nextStickyNodeInfo.node, node) ?? 0;
         const nextNodeBottomInViewport = y - currentScrollTop + nextNodeTop + nextNodeHeight;
         if (nextNodeBottomInViewport > minStickyTop) {
@@ -830,11 +834,11 @@ const renderActiveStickyNodes = (activeStickyNodes, node, output, createOutput,
     }
     const stickyOutput = createOutput({
       height: stickyNodeHeight,
-      width: stickyNode.yogaNode.getComputedWidth()
+      width: Math.round(stickyNode.yogaNode.getComputedWidth())
     });
     renderNodeToOutput(stickyNode, stickyOutput, {
-      offsetX: -stickyNode.yogaNode.getComputedLeft(),
-      offsetY: -stickyNode.yogaNode.getComputedTop(),
+      offsetX: -Math.round(stickyNode.yogaNode.getComputedLeft()),
+      offsetY: -Math.round(stickyNode.yogaNode.getComputedTop()),
       skipStaticElements,
       transformers: newTransformers
     });
@@ -853,8 +857,8 @@ const renderActiveStickyNodes = (activeStickyNodes, node, output, createOutput,
 const applyPaddingToText = (node, text) => {
   const yogaNode = node.childNodes[0]?.yogaNode;
   if (yogaNode) {
-    const offsetX = yogaNode.getComputedLeft();
-    const offsetY = yogaNode.getComputedTop();
+    const offsetX = Math.round(yogaNode.getComputedLeft());
+    const offsetY = Math.round(yogaNode.getComputedTop());
     text = "\n".repeat(offsetY) + indent(text, offsetX);
   }
   return text;
@@ -955,8 +959,8 @@ const renderNodeToOutput = (node, output, options) => {
     return;
   }
   if (node.cachedRender) {
-    const x = offsetX + (node.yogaNode?.getComputedLeft() ?? 0);
-    const y = offsetY + (node.yogaNode?.getComputedTop() ?? 0);
+    const x = Math.round(offsetX + (node.yogaNode?.getComputedLeft() ?? 0));
+    const y = Math.round(offsetY + (node.yogaNode?.getComputedTop() ?? 0));
     output.addRegionTree(node.cachedRender, x, y);
     return;
   }
@@ -1007,14 +1011,16 @@ const renderNodeToOutput = (node, output, options) => {
     if (yogaNode.getDisplay() === Yoga.DISPLAY_NONE) {
       return;
     }
-    const x = offsetX + yogaNode.getComputedLeft();
-    const y = offsetY + yogaNode.getComputedTop();
-    const absX = (absoluteOffsetX ?? offsetX) + yogaNode.getComputedLeft();
-    const absY = (absoluteOffsetY ?? offsetY) + yogaNode.getComputedTop();
+    const computedLeft = yogaNode.getComputedLeft();
+    const computedTop = yogaNode.getComputedTop();
+    const x = Math.round(offsetX + computedLeft);
+    const y = Math.round(offsetY + computedTop);
+    const absX = Math.round((absoluteOffsetX ?? offsetX) + computedLeft);
+    const absY = Math.round((absoluteOffsetY ?? offsetY) + computedTop);
     const currentClip = output.getCurrentClip();
     if (currentClip) {
-      const nodeWidth = yogaNode.getComputedWidth();
-      const nodeHeight = yogaNode.getComputedHeight();
+      const nodeWidth = Math.round(yogaNode.getComputedWidth());
+      const nodeHeight = Math.round(yogaNode.getComputedHeight());
       const nodeRight = absX + nodeWidth;
       const nodeBottom = absY + nodeHeight;
       const clipLeft = currentClip.x1 ?? -Infinity;
@@ -1037,7 +1043,7 @@ const renderNodeToOutput = (node, output, options) => {
           const currentWidth = Math.max(...text.split("\n").map((line) => getStringWidth(line)));
           if (currentWidth > maxWidth) {
             const textWrap = node.style.textWrap ?? "wrap";
-            text = wrapText(text, maxWidth, textWrap);
+            text = wrapText(text, Math.floor(maxWidth), textWrap);
           }
         }
         text = applyPaddingToText(node, text);
@@ -1065,8 +1071,8 @@ const renderNodeToOutput = (node, output, options) => {
       const clipHorizontally = overflowX === "hidden" || overflowX === "scroll";
       const clipVertically = overflowY === "hidden" || overflowY === "scroll";
       if (clipHorizontally || clipVertically) {
-        const nodeW = yogaNode.getComputedWidth();
-        const nodeH = yogaNode.getComputedHeight();
+        const nodeW = Math.round(yogaNode.getComputedWidth());
+        const nodeH = Math.round(yogaNode.getComputedHeight());
         const regionX = clipHorizontally ? x + yogaNode.getComputedBorder(Yoga.EDGE_LEFT) : x;
         const regionW = clipHorizontally ? nodeW - yogaNode.getComputedBorder(Yoga.EDGE_LEFT) - yogaNode.getComputedBorder(Yoga.EDGE_RIGHT) : nodeW;
         const regionY = clipVertically ? y + yogaNode.getComputedBorder(Yoga.EDGE_TOP) : y;
@@ -1119,8 +1125,8 @@ const renderNodeToOutput = (node, output, options) => {
         const borderRight = yogaNode.getComputedBorder(Yoga.EDGE_RIGHT);
         const borderTop = yogaNode.getComputedBorder(Yoga.EDGE_TOP);
         const borderBottom = yogaNode.getComputedBorder(Yoga.EDGE_BOTTOM);
-        const innerWidth = yogaNode.getComputedWidth() - borderLeft - borderRight;
-        const innerHeight = yogaNode.getComputedHeight() - borderTop - borderBottom;
+        const innerWidth = Math.round(yogaNode.getComputedWidth() - borderLeft - borderRight);
+        const innerHeight = Math.round(yogaNode.getComputedHeight() - borderTop - borderBottom);
         const { clientHeight, clientWidth, scrollHeight, scrollLeft, scrollTop, scrollWidth } = node.internal_scrollState;
         const isVerticalScrollable = overflowY === "scroll" && scrollHeight > clientHeight;
         const isHorizontalScrollable = overflowX === "scroll" && scrollWidth > clientWidth;
@@ -1182,8 +1188,8 @@ const renderToStatic = (node, options) => {
   if (!node.yogaNode) {
     return;
   }
-  const width = node.yogaNode.getComputedWidth();
-  const height = node.yogaNode.getComputedHeight();
+  const width = Math.round(node.yogaNode.getComputedWidth());
+  const height = Math.round(node.yogaNode.getComputedHeight());
   if (width <= 0 || height <= 0) {
     return;
   }