@effect-tui/react 0.1.3 → 0.1.5

package/dist/src/renderer.js

@@ -1,31 +1,16 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import React, {} from "react";
 import { performance } from "node:perf_hooks";
-import { CellBuffer, Palette, decodeKeys } from "@effect-tui/core";
-import { reconciler } from "./reconciler/host-config.js";
-import { ANSI, Terminal } from "./terminal.js";
+import { ANSI, bufferToString } from "@effect-tui/core";
+import { reconciler, flushSync } from "./reconciler/host-config.js";
 import * as Prof from "./profiler.js";
 import { DEFAULT_FPS } from "./constants.js";
-import { emitRowWithReset, rowChanged, rowContentWidth, findChangeWindow, contentHeight, } from "./output.js";
-// Context for accessing renderer in components
-export const RendererContext = createContext(null);
-export function useRenderer() {
-    const renderer = useContext(RendererContext);
-    if (!renderer) {
-        throw new Error("useRenderer must be used within a TUI renderer");
-    }
-    return renderer;
-}
-/** Hook that returns terminal size and re-renders on resize */
-export function useTerminalSize() {
-    const renderer = useRenderer();
-    const [size, setSize] = useState({ width: renderer.width, height: renderer.height });
-    useEffect(() => {
-        return renderer.onResize((width, height) => {
-            setSize({ width, height });
-        });
-    }, [renderer]);
-    return size;
-}
+import { RendererContext } from "./renderer-context.js";
+// Extracted modules
+import { RendererState, FrameBuilder } from "./renderer/core/index.js";
+import { InputProcessor } from "./renderer/input/index.js";
+import { EventBus, TerminalSetup } from "./renderer/lifecycle/index.js";
+import { FullscreenRenderer, InlineRenderer, StaticContentRenderer } from "./renderer/modes/index.js";
+export { RendererContext, useRenderer, useTerminalSize } from "./renderer-context.js";
 export function createRenderer(options) {
     const fps = options?.fps ?? DEFAULT_FPS;
     const stdout = options?.stdout ?? process.stdout;
@@ -34,388 +19,248 @@ export function createRenderer(options) {
     const exitOnCtrlC = options?.exitOnCtrlC ?? true;
     const manualMode = options?.manualMode ?? false;
     const enableDiff = options?.diff ?? !manualMode;
-    const enableDiffInline = options?.diffInline ?? false;
     const skipTerminalSetup = options?.skipTerminalSetup ?? false;
     const enablePaste = options?.enablePaste ?? true;
+    const enableMouse = options?.enableMouse ?? mode === "fullscreen";
     const debugHook = options?.debug?.onFrame;
-    const PASTE_START = "\x1b[200~";
-    const PASTE_END = "\x1b[201~";
-    const PASTE_ENABLE = "\x1b[?2004h";
-    const PASTE_DISABLE = "\x1b[?2004l";
-    let width = stdout.columns || 80;
-    let height = stdout.rows || 24;
-    let lastWidth = width; // Track for shrink detection (like Ink)
-    let dirty = true;
-    let running = true;
-    let previousHeight = 0; // For inline mode: track how many lines were rendered
-    const printedWidths = new Map(); // track rightmost printed col per row for inline diff
-    const keyHandlers = new Set();
-    const pasteHandlers = new Set();
-    const resizeHandlers = new Set();
-    const frameHandlers = new Set();
-    let pasteActive = false;
-    let pasteBuffer = "";
-    const palette = new Palette();
-    let prevBuffer = null;
-    let nextBuffer = null;
-    let loop = null;
-    const teardown = () => {
-        if (skipTerminalSetup)
-            return;
-        if (mode === "fullscreen") {
-            stdout.write(Terminal.exitFullscreen);
-        }
-        else {
-            stdout.write("\r\n");
-        }
-        if (enablePaste) {
-            stdout.write(PASTE_DISABLE);
-        }
-        stdout.write(Terminal.showCursor);
-        if (stdin.isTTY && stdin.setRawMode) {
-            stdin.setRawMode(false);
-        }
-    };
-    // The actual render logic, extracted for manual flushing
+    // Initialize state
+    const state = new RendererState(stdout.columns || 80, stdout.rows || 24);
+    const events = new EventBus();
+    const frameBuilder = new FrameBuilder();
+    // Terminal setup/teardown
+    const terminal = new TerminalSetup(stdout, stdin, {
+        mode,
+        enablePaste,
+        enableMouse,
+        skipTerminalSetup,
+    });
+    // Render mode (fullscreen or inline)
+    const renderMode = mode === "fullscreen" ? new FullscreenRenderer() : new InlineRenderer();
+    // Static content renderer (inline mode only)
+    const staticRenderer = mode === "inline" ? new StaticContentRenderer(stdout, state.palette) : null;
+    // Input processing
+    const inputProcessor = new InputProcessor({
+        exitOnCtrlC,
+        dispatchKey: (key) => {
+            events.dispatchKey(key);
+            return key.defaultPrevented ?? false;
+        },
+        dispatchMouse: (mouse) => events.dispatchMouse(mouse),
+        dispatchPaste: (text) => events.dispatchPaste(text),
+        flushSync: (fn) => flushSync(fn) ?? undefined,
+        onInputProcessed: () => {
+            if (!manualMode)
+                renderFrame();
+        },
+    });
+    // The render frame logic
     const renderFrame = () => {
         const frameStart = Prof.startFrame();
         const frameStartMs = performance.now();
-        let clearMs = 0;
-        let layoutMs = 0;
-        let renderMs = 0;
-        let diffAnsiMs = 0;
-        let writeMs = 0;
-        let contentH = height;
+        const frameWidth = state.width;
+        const frameHeight = state.height;
+        let contentH = frameHeight;
         const container = renderer._container;
         const root = container?.root ?? null;
-        if (!dirty || !root)
+        // Must render if dirty OR if static content needs flushing
+        if ((!state.dirty && !container?.staticDirty) || !root)
             return;
-        dirty = false;
-        // Ensure buffers exist and are correct size
-        if (!prevBuffer || !nextBuffer || prevBuffer.w !== width || prevBuffer.h !== height) {
-            prevBuffer = new CellBuffer(width, height);
-            nextBuffer = new CellBuffer(width, height);
-            prevBuffer.clear(0);
-            nextBuffer.clear(0);
-        }
-        // Clear next buffer
-        let t = Prof.startPhase();
-        {
-            const t0 = performance.now();
-            nextBuffer.clear(0);
-            clearMs = performance.now() - t0;
-        }
-        Prof.endPhase("clear", t);
-        // Layout
-        t = Prof.startPhase();
-        {
-            const t0 = performance.now();
-            root.measure(width, height);
-            root.layout({ x: 0, y: 0, w: width, h: height });
-            layoutMs = performance.now() - t0;
-        }
-        Prof.endPhase("layout", t);
-        // Render
-        t = Prof.startPhase();
-        {
-            const t0 = performance.now();
-            root.render(nextBuffer, palette);
-            renderMs = performance.now() - t0;
-        }
-        Prof.endPhase("render", t);
-        // Output based on mode
-        t = Prof.startPhase();
-        const diffStartMs = performance.now();
-        let output = "";
-        if (mode === "fullscreen") {
-            // Fullscreen: optionally diff per line for minimal writes
-            if (enableDiff && prevBuffer) {
-                for (let y = 0; y < height; y++) {
-                    if (!rowChanged(prevBuffer, nextBuffer, y, width))
-                        continue;
-                    output += ANSI.cursor.to(1, y + 1);
-                    // Clear the row using default style to avoid carrying stale backgrounds.
-                    output += palette.sgr(0) + ANSI.line.clear;
-                    output += emitRowWithReset(nextBuffer, palette, y, width);
-                }
-            }
-            else {
-                // Full redraw (tests/manual mode)
-                stdout.write(ANSI.cursor.to(1, 1) + palette.sgr(0));
-                for (let y = 0; y < height; y++) {
-                    output += emitRowWithReset(nextBuffer, palette, y, width);
-                    if (y < height - 1)
-                        output += "\r\n";
-                }
-            }
-        }
-        else {
-            // ============================================================
-            // INLINE MODE RENDERING
-            // ============================================================
-            // Renders in-place without alternate buffer. Key insights from Ink:
-            // - Track previousHeight to know how many lines to erase
-            // - Trim trailing spaces to prevent wrap on terminal shrink
-            // - Safety valve: clear terminal if content >= terminal height
-            // ============================================================
-            const newHeight = contentHeight(nextBuffer, width, height);
-            contentH = newHeight;
-            // Safety valve: if previous content would overflow, clear terminal first
-            if (previousHeight >= height) {
-                stdout.write(ANSI.screen.clear + ANSI.cursor.to(1, 1));
-                previousHeight = 0;
-            }
-            // Move cursor up to start of previous output (eraseLines pattern)
-            if (previousHeight > 0) {
-                output += ANSI.cursor.up(previousHeight);
-                output += ANSI.cursor.startOfLine;
-            }
-            if (enableDiffInline && prevBuffer) {
-                // Diff-based inline rendering: only update changed regions
-                const rowsToProcess = Math.max(newHeight, previousHeight);
-                for (let y = 0; y < rowsToProcess; y++) {
-                    // Rows beyond newHeight: clear if previously printed
-                    if (y >= newHeight) {
-                        if ((printedWidths.get(y) ?? 0) > 0) {
-                            output += ANSI.cursor.to(y + 1, 1) + palette.sgr(0) + ANSI.line.clear;
-                            printedWidths.set(y, 0);
-                        }
-                        continue;
-                    }
-                    const change = findChangeWindow(prevBuffer, nextBuffer, y, width);
-                    const newW = rowContentWidth(nextBuffer, y, width);
-                    const prevW = printedWidths.get(y) ?? 0;
-                    if (!change) {
-                        // No change; maybe need to clear tail if content shrunk
-                        if (prevW > newW) {
-                            output += ANSI.cursor.to(y + 1, newW + 1) + palette.sgr(0) + ANSI.line.clearToEnd;
-                            printedWidths.set(y, newW);
-                        }
-                        continue;
+        state.dirty = false;
+        try {
+            // Handle full rerender on resize (Ink-style: clear everything + replay static)
+            if (mode === "inline" && staticRenderer) {
+                const inlineMode = renderMode;
+                if (inlineMode.needsFullRerender()) {
+                    // Clear screen + scrollback + cursor home
+                    stdout.write(ANSI.screen.clear + ANSI.screen.clearScrollback + ANSI.cursor.home);
+                    // Replay all cached static content
+                    const cachedStatic = staticRenderer.getCachedOutput();
+                    if (cachedStatic) {
+                        stdout.write(cachedStatic);
                     }
-                    // Emit changed region [left..right]
-                    output += ANSI.cursor.to(y + 1, change.left + 1);
-                    output += emitRowWithReset(nextBuffer, palette, y, width, change.left, change.right + 1);
-                    // Clear tail if shrunk
-                    const effectiveW = Math.max(newW, change.right + 1);
-                    if (prevW > effectiveW) {
-                        output += ANSI.cursor.to(y + 1, effectiveW + 1) + ANSI.line.clearToEnd;
-                    }
-                    printedWidths.set(y, effectiveW);
+                    // Reset state
+                    inlineMode.clearFullRerenderFlag();
+                    state.invalidateBuffers();
                 }
-                previousHeight = newHeight;
             }
-            else {
-                // Full redraw inline: clear and emit each line, trimming trailing spaces
-                for (let y = 0; y < newHeight; y++) {
-                    output += palette.sgr(0) + ANSI.line.clear;
-                    const trimmedWidth = rowContentWidth(nextBuffer, y, width);
-                    output += emitRowWithReset(nextBuffer, palette, y, width, 0, trimmedWidth);
-                    output += "\r\n";
+            // Handle static content: clear dynamic area, append static, then fresh dynamic render
+            // Note: IL (insert lines) won't work here because inline mode uses relative positioning
+            // and IL would desync the screen state from our buffer tracking.
+            let staticOutput = "";
+            if (mode === "inline" && container?.staticDirty && container?.staticRoot && staticRenderer) {
+                const inlineMode = renderMode;
+                const prevHeight = inlineMode.getPreviousHeight();
+                // Step 1: Clear the dynamic area (move up + clear to end of screen)
+                if (prevHeight > 0) {
+                    staticOutput += ANSI.cursor.up(prevHeight) + ANSI.cursor.startOfLine + ANSI.screen.clearToEnd;
                 }
-                // Clear any extra lines if content shrank
-                for (let y = newHeight; y < previousHeight; y++) {
-                    output += palette.sgr(0) + ANSI.line.clear + "\r\n";
-                }
-                // Move cursor back up to end of content
-                if (previousHeight > newHeight) {
-                    output += ANSI.cursor.up(previousHeight - newHeight);
-                }
-                previousHeight = newHeight;
+                // Step 2: Append static content (cursor ends at bottom of static)
+                staticOutput += staticRenderer.render(container.staticRoot, frameWidth);
+                // Step 3: Reset previousHeight to 0 (we cleared dynamic, starting fresh)
+                inlineMode.reset();
+                inlineMode.forceFullOutputOnce(); // Force full output to resync cursor tracking after static
+                state.invalidateBuffers();
+                container.staticDirty = false;
             }
-        }
-        output += palette.sgr(0); // Reset style
-        diffAnsiMs = performance.now() - diffStartMs;
-        Prof.endPhase("diff+ansi", t);
-        t = Prof.startPhase();
-        {
-            const t0 = performance.now();
+            // For inline mode, measure content unconstrained to handle overflow
+            let actualContentHeight = frameHeight;
+            if (mode === "inline") {
+                const size = root.measure(frameWidth, Number.MAX_SAFE_INTEGER);
+                actualContentHeight = size.h;
+            }
+            // Buffer height: content height for inline (to capture all content), terminal height for fullscreen
+            const bufferHeight = mode === "inline" ? Math.max(actualContentHeight, frameHeight) : frameHeight;
+            // Ensure buffers exist
+            state.ensureBuffers(frameWidth, bufferHeight);
+            if (!state.nextBuffer)
+                return;
+            // Build frame (clear, layout, render)
+            const timings = frameBuilder.build(root, state.nextBuffer, state.palette, frameWidth, bufferHeight);
+            // Generate output
+            const t = Prof.startPhase();
+            const diffStartMs = performance.now();
+            const { output: modeOutput, contentHeight } = renderMode.generateOutput({
+                nextBuffer: state.nextBuffer,
+                prevBuffer: state.prevBuffer,
+                palette: state.palette,
+                frameWidth,
+                frameHeight,
+                contentHeight: actualContentHeight,
+                enableDiff,
+                stdout,
+            });
+            // Combine static + dynamic output for atomic write
+            let output = staticOutput + modeOutput + state.palette.sgr(0);
+            contentH = contentHeight;
+            const diffAnsiMs = performance.now() - diffStartMs;
+            Prof.endPhase("diff+ansi", t);
+            // Write output (single atomic write prevents visual glitches)
+            const writeT = Prof.startPhase();
+            const writeStart = performance.now();
             stdout.write(output);
-            writeMs = performance.now() - t0;
+            const writeMs = performance.now() - writeStart;
+            Prof.endPhase("write", writeT);
+            Prof.endFrame(frameStart);
+            const frameMs = performance.now() - frameStartMs;
+            // Swap buffers
+            state.swapBuffers();
+            // Build stats
+            const stats = {
+                mode,
+                width: state.width,
+                height: state.height,
+                contentHeight: contentH,
+                bytes: Buffer.byteLength(output, "utf8"),
+                frameMs,
+                phases: {
+                    clear: timings.clear,
+                    layout: timings.layout,
+                    render: timings.render,
+                    diffAnsi: diffAnsiMs,
+                    write: writeMs,
+                },
+                timestamp: performance.now(),
+            };
+            if (debugHook)
+                debugHook(stats);
+            if (events.hasFrameHandlers)
+                events.dispatchFrame(stats);
         }
-        Prof.endPhase("write", t);
-        Prof.endFrame(frameStart);
-        const frameMs = performance.now() - frameStartMs;
-        // Swap buffers
-        const tmp = prevBuffer;
-        prevBuffer = nextBuffer;
-        nextBuffer = tmp;
-        const stats = {
-            mode,
-            width,
-            height,
-            contentHeight: contentH,
-            bytes: Buffer.byteLength(output, "utf8"),
-            frameMs,
-            phases: {
-                clear: clearMs,
-                layout: layoutMs,
-                render: renderMs,
-                diffAnsi: diffAnsiMs,
-                write: writeMs,
-            },
-            timestamp: performance.now(),
-        };
-        if (debugHook)
-            debugHook(stats);
-        if (frameHandlers.size > 0) {
-            for (const handler of frameHandlers)
-                handler(stats);
+        catch (err) {
+            console.error("[effect-tui] Render error:", err);
+            state.markDirty();
         }
     };
+    // Build renderer object
     const renderer = {
         get width() {
-            return width;
+            return state.width;
         },
         get height() {
-            return height;
+            return state.height;
         },
         requestRender() {
-            dirty = true;
-        },
-        onKey(handler) {
-            keyHandlers.add(handler);
-            return () => keyHandlers.delete(handler);
-        },
-        onPaste(handler) {
-            pasteHandlers.add(handler);
-            return () => pasteHandlers.delete(handler);
-        },
-        onResize(handler) {
-            resizeHandlers.add(handler);
-            return () => resizeHandlers.delete(handler);
-        },
-        onFrameStats(handler) {
-            frameHandlers.add(handler);
-            return () => frameHandlers.delete(handler);
+            state.markDirty();
         },
+        onKey: (handler) => events.onKey(handler),
+        onMouse: (handler) => events.onMouse(handler),
+        onPaste: (handler) => events.onPaste(handler),
+        onResize: (handler) => events.onResize(handler),
+        onFrameStats: (handler) => events.onFrameStats(handler),
         stop() {
-            running = false;
-            if (loop) {
-                clearInterval(loop);
-                loop = null;
+            state.running = false;
+            if (state.loop) {
+                clearInterval(state.loop);
+                state.loop = null;
+            }
+            if (state.inputHandler) {
+                stdin.removeListener("data", state.inputHandler);
+                state.inputHandler = null;
+            }
+            if (state.resizeHandler) {
+                stdout.removeListener("resize", state.resizeHandler);
+                state.resizeHandler = null;
             }
-            teardown();
+            terminal.teardown();
         },
         flush() {
             renderFrame();
         },
-    };
-    // Terminal setup (skip for testing)
-    if (!skipTerminalSetup) {
-        if (mode === "fullscreen") {
-            stdout.write(Terminal.enterFullscreen);
-        }
-        // Hide cursor during rendering (both modes)
-        stdout.write(Terminal.hideCursor);
-        if (enablePaste)
-            stdout.write(PASTE_ENABLE);
-        if (stdin.isTTY && stdin.setRawMode) {
-            stdin.setRawMode(true);
-            stdin.resume?.();
-        }
-    }
-    // Handle keyboard input (and bracketed paste)
-    stdin.on("data", (data) => {
-        let chunk = data.toString("utf8");
-        const emitKeys = (str) => {
-            if (!str)
-                return;
-            const keys = decodeKeys(Buffer.from(str, "utf8"));
-            for (const key of keys) {
-                const wrapped = {
-                    ...key,
-                    defaultPrevented: false,
-                    preventDefault() {
-                        wrapped.defaultPrevented = true;
-                    },
-                };
-                for (const handler of keyHandlers) {
-                    if (wrapped.defaultPrevented)
-                        break;
-                    handler(wrapped);
-                }
-                // Default Ctrl+C handling - exit unless user called preventDefault()
-                if (exitOnCtrlC && !wrapped.defaultPrevented && key.ctrl && key.text === "c") {
-                    process.exit(0);
-                }
+        getScreenshot() {
+            // Return the previous buffer as ANSI string (it has the last rendered frame)
+            if (state.prevBuffer) {
+                return bufferToString(state.prevBuffer, state.palette, state.width, state.height);
             }
-        };
-        while (chunk.length > 0) {
-            if (pasteActive) {
-                const endIdx = chunk.indexOf(PASTE_END);
-                if (endIdx >= 0) {
-                    pasteBuffer += chunk.slice(0, endIdx);
-                    pasteHandlers.forEach((h) => h(pasteBuffer));
-                    pasteBuffer = "";
-                    pasteActive = false;
-                    chunk = chunk.slice(endIdx + PASTE_END.length);
-                    continue;
-                }
-                else {
-                    pasteBuffer += chunk;
-                    chunk = "";
-                    break;
-                }
-            }
-            const startIdx = chunk.indexOf(PASTE_START);
-            if (startIdx >= 0) {
-                // Emit any keys before the paste start
-                emitKeys(chunk.slice(0, startIdx));
-                pasteActive = true;
-                pasteBuffer = "";
-                chunk = chunk.slice(startIdx + PASTE_START.length);
-                continue;
-            }
-            // No paste markers; treat as normal keys
-            emitKeys(chunk);
-            chunk = "";
-        }
-        dirty = true;
-    });
-    // Handle resize - render synchronously like Ink does
-    stdout.on("resize", () => {
+            return "";
+        },
+        dispatchKey(key) {
+            events.dispatchKey(key);
+            if (!manualMode)
+                renderFrame();
+        },
+        dispatchPaste(text) {
+            events.dispatchPaste(text);
+            if (!manualMode)
+                renderFrame();
+        },
+        dispatchResize(width, height) {
+            state.updateDimensions(width, height);
+            state.invalidateBuffers();
+            state.markDirty();
+            events.dispatchResize(width, height);
+            if (!manualMode)
+                renderFrame();
+        },
+    };
+    // Terminal setup
+    terminal.setup();
+    // Input handling
+    state.inputHandler = (data) => inputProcessor.process(data);
+    stdin.on("data", state.inputHandler);
+    // Resize handling
+    state.resizeHandler = () => {
         const newWidth = stdout.columns || 80;
         const newHeight = stdout.rows || 24;
-        // Fullscreen: clear entire screen on resize to prevent artifacts from terminal reflow
-        // The terminal may leave stale content that our diff-based rendering doesn't see
-        if (mode === "fullscreen") {
-            stdout.write(ANSI.screen.clear + ANSI.cursor.to(1, 1));
-        }
-        else if (mode === "inline" && newWidth < lastWidth && previousHeight > 0) {
-            // Inline: on width shrink, previous content may have wrapped to MORE lines
-            // than previousHeight. Clear from content start to END OF SCREEN to catch all.
-            stdout.write(ANSI.cursor.up(previousHeight) + ANSI.cursor.startOfLine);
-            stdout.write(ANSI.screen.clearToEnd);
-            previousHeight = 0;
-        }
-        width = newWidth;
-        height = newHeight;
-        lastWidth = newWidth;
-        prevBuffer = null;
-        nextBuffer = null;
-        dirty = true;
-        // Notify resize handlers
-        for (const handler of resizeHandlers) {
-            handler(newWidth, newHeight);
-        }
-        // Render immediately on resize (like Ink) to prevent cursor corruption
-        renderFrame();
-    });
-    // Automatic render loop (skip in manual mode)
+        renderMode.handleResize(newWidth, newHeight, state.lastWidth);
+        state.updateDimensions(newWidth, newHeight);
+        state.invalidateBuffers();
+        state.markDirty();
+        events.dispatchResize(newWidth, newHeight);
+    };
+    stdout.on("resize", state.resizeHandler);
+    // Render loop
     if (!manualMode) {
         const frameMs = 1000 / fps;
-        loop = setInterval(() => {
-            if (!running) {
-                if (loop)
-                    clearInterval(loop);
-                teardown();
+        state.loop = setInterval(() => {
+            if (!state.running) {
+                if (state.loop)
+                    clearInterval(state.loop);
+                terminal.teardown();
                 return;
             }
             renderFrame();
         }, frameMs);
     }
-    // Store container reference for direct root access
     ;
     renderer._container = null;
     return renderer;
@@ -423,29 +268,19 @@ export function createRenderer(options) {
 export function createRoot(renderer) {
     const hostContext = {
         requestRender: () => renderer.requestRender(),
+        requestImmediateRender: () => renderer.flush(),
     };
     const container = {
         root: null,
         ctx: hostContext,
     };
-    const fiberRoot = reconciler.createContainer(container, 0, // LegacyRoot
-    null, // hydrationCallbacks
-    false, // isStrictMode
-    null, // concurrentUpdatesByDefaultOverride
-    "", // identifierPrefix
-    (err) => console.error(err), // onUncaughtError
-    (err) => console.error(err), // onCaughtError
-    (err) => console.error(err), // onRecoverableError
-    () => { }, // onDefaultTransitionIndicator
-    null);
+    const fiberRoot = reconciler.createContainer(container, 0, null, false, null, "", (err) => console.error(err), (err) => console.error(err), (err) => console.error(err), () => { }, null);
     renderer._container = container;
-    const reconcilerAny = reconciler;
-    const runSync = reconcilerAny.flushSync?.bind(reconcilerAny) ?? ((fn) => fn());
     return {
         render(element, sync = false) {
             const wrapped = React.createElement(RendererContext.Provider, { value: renderer }, element);
             if (sync) {
-                runSync(() => {
+                flushSync(() => {
                     reconciler.updateContainer(wrapped, fiberRoot, null, null);
                 });
                 renderer.requestRender();
@@ -463,14 +298,9 @@ export function createRoot(renderer) {
         },
     };
 }
-/**
- * Render a React tree to the terminal in one call.
- * Returns helpers similar to Ink: rerender, unmount, waitUntilExit.
- */
 export function render(element, options) {
     const renderer = createRenderer(options);
     const root = createRoot(renderer);
-    // Initial render (sync to avoid flicker before the loop runs)
     root.render(element, true);
     let resolved = false;
     let resolveExit = null;