tuiuiu.js 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Tetis.io
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,324 @@
+<div align="center">
+
+# 🐦 Tuiuiu
+
+### Terminal UI Framework for the Modern Era
+
+Build beautiful, reactive terminal apps with a familiar component API.
+<br>
+**Zero dependencies** • **Signals-based** • **Flexbox layout** • **Full mouse support**
+<br>
+50+ components. Pure Node.js. No C++ bindings.
+
+[![npm version](https://img.shields.io/npm/v/tuiuiu.js.svg?style=flat-square&color=F5A623)](https://www.npmjs.com/package/tuiuiu.js)
+[![npm downloads](https://img.shields.io/npm/dm/tuiuiu.js.svg?style=flat-square&color=34C759)](https://www.npmjs.com/package/tuiuiu.js)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178C6?style=flat-square&logo=typescript&logoColor=white)](https://www.typescriptlang.org/)
+[![Node.js](https://img.shields.io/badge/Node.js-18+-339933?style=flat-square&logo=node.js&logoColor=white)](https://nodejs.org/)
+[![License](https://img.shields.io/npm/l/tuiuiu.js.svg?style=flat-square&color=007AFF)](https://github.com/forattini-dev/tuiuiu.js/blob/main/LICENSE)
+[![Zero Dependencies](https://img.shields.io/badge/dependencies-0-success?style=flat-square)](https://www.npmjs.com/package/tuiuiu.js)
+
+[📖 Documentation](https://forattini-dev.github.io/tuiuiu.js) · [🚀 Quick Start](#quick-start) · [🎨 Storybook](#storybook)
+
+<img src="docs/assets/demo-dashboard.gif" alt="Tuiuiu Demo" width="600">
+
+</div>
+
+---
+
+## Quick Start
+
+```bash
+npm install tuiuiu.js
+```
+
+```typescript
+import { render, Box, Text, useState, useInput, useApp } from 'tuiuiu.js';
+
+function Counter() {
+  const [count, setCount] = useState(0);
+  const { exit } = useApp();
+
+  useInput((char, key) => {
+    if (key.upArrow) setCount(c => c + 1);
+    if (key.downArrow) setCount(c => c - 1);
+    if (key.escape) exit();
+  });
+
+  return Box({ flexDirection: 'column', padding: 1, borderStyle: 'round' },
+    Text({ color: 'cyan', bold: true }, '🐦 Tuiuiu Counter'),
+    Text({ color: 'yellow', marginTop: 1 }, `Count: ${count()}`),
+    Text({ color: 'gray', dim: true }, '↑/↓: change • Esc: exit')
+  );
+}
+
+const { waitUntilExit } = render(Counter);
+await waitUntilExit();
+```
+
+## What's Inside
+
+| Category | Features |
+|:---------|:---------|
+| **Core** | Signal-based reactivity, Flexbox layout engine, Focus management, Event system |
+| **Primitives** | Box, Text, Spacer, Newline, Fragment, Divider, Canvas |
+| **Atoms** | Button, TextInput, Switch, Slider, Spinner, ProgressBar, Timer, Tooltip |
+| **Molecules** | Select, MultiSelect, RadioGroup, Autocomplete, Table, Tabs, Tree, Calendar, CodeBlock, Markdown |
+| **Organisms** | Modal, CommandPalette, DataTable, FileManager, SplitPanel, ScrollArea, Grid, OverlayStack |
+| **Templates** | AppShell, Page, Header, StatusBar, VStack, HStack, Center, FullScreen |
+| **Data Viz** | BarChart, LineChart, Sparkline, Heatmap, Gauge, BigText, Digits |
+| **DevTools** | Layout Inspector, Event Logger, Performance Metrics, Component Storybook |
+
+## Highlights
+
+### ⚡ Signal-based Reactivity
+
+Fine-grained reactivity without Virtual DOM overhead. Only what changes gets updated.
+
+```typescript
+import { createSignal, createEffect } from 'tuiuiu.js';
+
+const [count, setCount] = createSignal(0);
+const doubled = () => count() * 2;
+
+createEffect(() => console.log(`Count: ${count()}, Doubled: ${doubled()}`));
+
+setCount(5); // → "Count: 5, Doubled: 10"
+```
+
+### 📦 Flexbox Layout
+
+Build complex layouts with the CSS Flexbox model you already know.
+
+```typescript
+Box({
+  flexDirection: 'row',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  gap: 2,
+  padding: 1
+},
+  Text({ color: 'blue' }, 'Left'),
+  Box({ flexGrow: 1 }),
+  Text({ color: 'red' }, 'Right')
+)
+```
+
+### 🎨 50+ Ready-to-Use Components
+
+From simple buttons to complex data tables, everything is included.
+
+```typescript
+import { Select, Modal, DataTable, CommandPalette } from 'tuiuiu.js';
+
+// Dropdown select
+Select({
+  items: [
+    { label: 'Option A', value: 'a' },
+    { label: 'Option B', value: 'b' },
+  ],
+  onSelect: (item) => console.log(item)
+});
+
+// Command palette (⌘K style)
+CommandPalette({
+  commands: [
+    { id: 'new', label: 'New File', shortcut: 'Ctrl+N' },
+    { id: 'open', label: 'Open File', shortcut: 'Ctrl+O' },
+  ],
+  onSelect: (cmd) => handleCommand(cmd)
+});
+```
+
+### 🖱️ Full Mouse Support
+
+Click, hover, scroll, drag — all mouse events work out of the box.
+
+```typescript
+Box({
+  borderStyle: 'round',
+  onClick: () => console.log('Clicked!'),
+  onMouseEnter: () => setHover(true),
+  onMouseLeave: () => setHover(false),
+  onScroll: (delta) => scrollBy(delta),
+},
+  Text({}, hover() ? '🔥 Hovering!' : 'Hover me')
+)
+```
+
+### 📊 Data Visualization
+
+Render charts and graphs directly in the terminal.
+
+```typescript
+import { BarChart, Sparkline, Gauge } from 'tuiuiu.js';
+
+BarChart({
+  data: [
+    { label: 'Mon', value: 10 },
+    { label: 'Tue', value: 25 },
+    { label: 'Wed', value: 15 },
+  ],
+  color: 'cyan',
+  showValues: true
+});
+
+Sparkline({ data: [1, 5, 2, 8, 3, 9], width: 20, style: 'braille' });
+
+Gauge({ value: 75, max: 100, label: 'CPU', color: 'green' });
+```
+
+### 🏗️ Atomic Design + Tree Shaking
+
+Components organized in a clear hierarchy. Import only what you need — unused code is automatically removed from your bundle.
+
+```typescript
+// Import everything (convenient for development)
+import { Box, Button, Modal } from 'tuiuiu.js';
+
+// Import by layer (optimized bundles)
+import { Box, Text } from 'tuiuiu.js/primitives';
+import { Button, Spinner } from 'tuiuiu.js/atoms';
+import { Select, Table } from 'tuiuiu.js/molecules';
+import { Modal, DataTable } from 'tuiuiu.js/organisms';
+import { AppShell, Page } from 'tuiuiu.js/templates';
+
+// Core systems
+import { createSignal, createEffect } from 'tuiuiu.js/core';
+import { useState, useInput, useMouse } from 'tuiuiu.js/hooks';
+import { render, renderOnce } from 'tuiuiu.js/app';
+
+// Utilities & extras
+import { measureText, getVisibleWidth } from 'tuiuiu.js/utils';
+import { BarChart, Gauge } from 'tuiuiu.js/design-system';
+```
+
+<details>
+<summary>All subpath imports</summary>
+
+| Import | Contents |
+|:-------|:---------|
+| `tuiuiu.js` | Everything (main entry) |
+| `tuiuiu.js/primitives` | Box, Text, Spacer, Fragment, Divider, Canvas |
+| `tuiuiu.js/atoms` | Button, TextInput, Switch, Slider, Spinner, ProgressBar, Timer |
+| `tuiuiu.js/molecules` | Select, MultiSelect, Table, Tabs, Tree, Calendar, CodeBlock |
+| `tuiuiu.js/organisms` | Modal, CommandPalette, DataTable, FileManager, SplitPanel |
+| `tuiuiu.js/templates` | AppShell, Page, VStack, HStack, StatusBar |
+| `tuiuiu.js/core` | createSignal, createEffect, batch, calculateLayout |
+| `tuiuiu.js/hooks` | useState, useEffect, useInput, useMouse, useFocus |
+| `tuiuiu.js/app` | render, renderOnce, useApp |
+| `tuiuiu.js/utils` | Text measurement, ANSI utilities |
+| `tuiuiu.js/design-system` | Full design system (charts, forms, navigation) |
+| `tuiuiu.js/storybook` | Component explorer utilities |
+
+</details>
+
+### 🔄 Redux-like Store
+
+Built-in state management for complex applications.
+
+```typescript
+import { createStore } from 'tuiuiu.js';
+
+const reducer = (state = { count: 0 }, action) => {
+  switch (action.type) {
+    case 'INCREMENT': return { count: state.count + 1 };
+    case 'DECREMENT': return { count: state.count - 1 };
+    default: return state;
+  }
+};
+
+const store = createStore(reducer, { count: 0 });
+
+store.subscribe(() => console.log(store.state()));
+store.dispatch({ type: 'INCREMENT' });
+```
+
+## Storybook
+
+Tuiuiu includes a built-in component storybook for exploring all components:
+
+```bash
+# Run the storybook
+npx tuiuiu
+
+# Or if installed locally
+pnpm storybook
+```
+
+Navigate through categories, see live previews, and copy code examples.
+
+## Examples
+
+```bash
+# Clone and explore
+git clone https://github.com/forattini-dev/tuiuiu.js
+cd tuiuiu.js
+pnpm install
+
+# Run examples
+pnpm example:01  # Basic counter
+pnpm example:04  # Forms showcase
+pnpm example:06  # Dashboard
+pnpm example:chat  # Chat application
+```
+
+<details>
+<summary>All 20+ examples</summary>
+
+| Example | Description |
+|:--------|:------------|
+| `01-basic-counter` | useState, useInput basics |
+| `02-async-loading` | Async operations with spinners |
+| `03-global-state` | Shared state across components |
+| `04-forms` | Form inputs and validation |
+| `05-multi-component` | Component composition |
+| `06-dashboard` | Real-time dashboard layout |
+| `07-advanced-forms` | Complex form patterns |
+| `08-layout-components` | Flexbox layouts |
+| `09-visual-components` | Charts and visualizations |
+| `10-theme-context` | Theming system |
+| `11-static-logs` | Log viewer pattern |
+| `12-animation-system` | Animations and transitions |
+| `13-virtual-scroll` | Large list virtualization |
+| `14-focus-management` | Focus navigation |
+| `15-constraint-layout` | Advanced constraints |
+| `16-graphics-braille` | Braille graphics |
+| `17-event-system` | Event handling patterns |
+| `chat` | Full chat application |
+| `realtime-dashboard` | Live updating dashboard |
+
+</details>
+
+## Documentation
+
+| Topic | Link |
+|:------|:-----|
+| Quick Start | [→ Getting Started](https://forattini-dev.github.io/tuiuiu.js/#/getting-started/quick-start) |
+| Components | [→ Component Reference](https://forattini-dev.github.io/tuiuiu.js/#/components/overview) |
+| Hooks | [→ Hooks API](https://forattini-dev.github.io/tuiuiu.js/#/hooks/use-input) |
+| Signals | [→ Reactive State](https://forattini-dev.github.io/tuiuiu.js/#/core/signals) |
+| Layout | [→ Flexbox Guide](https://forattini-dev.github.io/tuiuiu.js/#/core/layout) |
+| Theming | [→ Theme System](https://forattini-dev.github.io/tuiuiu.js/#/core/theming) |
+| Storybook | [→ Component Explorer](https://forattini-dev.github.io/tuiuiu.js/#/core/storybook) |
+
+## Numbers
+
+| Metric | Value |
+|:-------|:------|
+| Components | 50+ |
+| Dependencies | 0 |
+| Subpath Imports | 12 |
+| Hooks | 10 |
+| Examples | 20+ |
+| Border Styles | 9 |
+| Named Colors | 18 |
+| Tests | 3500+ |
+| Tree Shakeable | ✅ |
+
+## Why "Tuiuiu"?
+
+The [Tuiuiu](https://en.wikipedia.org/wiki/Jabiru) (Jabiru mycteria) is a majestic Brazilian bird — the tallest flying bird in South America. Just like this bird stands out in its environment, Tuiuiu stands out in the terminal UI landscape: elegant, powerful, and distinctly Brazilian.
+
+## License
+
+MIT © [Tetis.io](https://tetis.io)

package/dist/app/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * App Layer - Application lifecycle and rendering
+ *
+ * This module provides the main entry point for Reck applications.
+ */
+export { render, renderOnce, type RenderOptions, type ReckInstance, } from './render-loop.js';
+export { initializeApp, cleanupApp, useApp, type AppContext, } from '../hooks/index.js';
+export { useFocusManager, createFocusManager, type FocusManager, } from '../hooks/index.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/app/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EACL,MAAM,EACN,UAAU,EACV,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,EACN,KAAK,UAAU,GAChB,MAAM,mBAAmB,CAAC;AAG3B,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,KAAK,YAAY,GAClB,MAAM,mBAAmB,CAAC"}

package/dist/app/index.js

@@ -0,0 +1,12 @@
+/**
+ * App Layer - Application lifecycle and rendering
+ *
+ * This module provides the main entry point for Reck applications.
+ */
+// Render loop
+export { render, renderOnce, } from './render-loop.js';
+// Re-export lifecycle functions from hooks for convenience
+export { initializeApp, cleanupApp, useApp, } from '../hooks/index.js';
+// Re-export focus management for app-level control
+export { useFocusManager, createFocusManager, } from '../hooks/index.js';
+//# sourceMappingURL=index.js.map

package/dist/app/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/app/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,cAAc;AACd,OAAO,EACL,MAAM,EACN,UAAU,GAGX,MAAM,kBAAkB,CAAC;AAE1B,2DAA2D;AAC3D,OAAO,EACL,aAAa,EACb,UAAU,EACV,MAAM,GAEP,MAAM,mBAAmB,CAAC;AAE3B,mDAAmD;AACnD,OAAO,EACL,eAAe,EACf,kBAAkB,GAEnB,MAAM,mBAAmB,CAAC"}

package/dist/app/render-loop.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Reck App - Main render loop and app lifecycle
+ *
+ * This is the entry point for Reck applications
+ */
+import type { VNode } from '../utils/types.js';
+export interface RenderOptions {
+    /** Output stream (default: process.stdout) */
+    stdout?: NodeJS.WriteStream;
+    /** Input stream (default: process.stdin) */
+    stdin?: NodeJS.ReadStream;
+    /** Enable debug mode - prints each render as separate output */
+    debug?: boolean;
+    /** Exit on Ctrl+C (default: true) */
+    exitOnCtrlC?: boolean;
+    /** Maximum FPS for render throttling (default: 30) */
+    maxFps?: number;
+    /** Clear screen on start (default: true) */
+    clearOnStart?: boolean;
+    /** Show cursor (default: false during render) */
+    showCursor?: boolean;
+    /** Enable automatic Tab/Shift+Tab navigation (default: true) */
+    autoTabNavigation?: boolean;
+}
+export interface ReckInstance {
+    /** Re-render with a new component */
+    rerender: (node: VNode) => void;
+    /** Unmount the app */
+    unmount: () => void;
+    /** Wait for the app to exit */
+    waitUntilExit: () => Promise<void>;
+    /** Clear the output */
+    clear: () => void;
+}
+/**
+ * Render a Reck app to the terminal
+ *
+ * @example
+ * const { waitUntilExit } = render(() => App());
+ * await waitUntilExit();
+ */
+export declare function render(nodeOrFn: VNode | (() => VNode), options?: RenderOptions): ReckInstance;
+/**
+ * Render once and return the string (no interactivity)
+ *
+ * @example
+ * const output = renderOnce(MyComponent());
+ * console.log(output);
+ */
+export declare function renderOnce(node: VNode, width?: number): string;
+//# sourceMappingURL=render-loop.d.ts.map

package/dist/app/render-loop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-loop.d.ts","sourceRoot":"","sources":["../../src/app/render-loop.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAwB,MAAM,mBAAmB,CAAC;AAsErE,MAAM,WAAW,aAAa;IAC5B,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,CAAC,WAAW,CAAC;IAC5B,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC,UAAU,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qCAAqC;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sDAAsD;IACtD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iDAAiD;IACjD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gEAAgE;IAChE,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,YAAY;IAC3B,qCAAqC;IACrC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,KAAK,IAAI,CAAC;IAChC,sBAAsB;IACtB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACnC,uBAAuB;IACvB,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,QAAQ,EAAE,KAAK,GAAG,CAAC,MAAM,KAAK,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,YAAY,CAiOjG;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAE9D"}

package/dist/app/render-loop.js

@@ -0,0 +1,263 @@
+/**
+ * Reck App - Main render loop and app lifecycle
+ *
+ * This is the entry point for Reck applications
+ */
+import { renderToString } from '../design-system/core/renderer.js';
+import { calculateLayout } from '../design-system/core/layout.js';
+import { createEffect } from '../primitives/signal.js';
+import { initializeApp, cleanupApp, enableMouseTracking, disableMouseTracking } from '../hooks/index.js';
+import { beginRender, endRender, resetHookState } from '../hooks/context.js';
+import { createLogUpdate } from '../utils/log-update.js';
+import { getHitTestRegistry, registerHitTestFromLayout } from '../core/hit-test.js';
+/**
+ * Check if a VNode is marked as static
+ */
+function isStaticNode(node) {
+    return !!node.props.__static;
+}
+/**
+ * Generate a stable ID for a static node
+ * Uses content hash if no explicit ID provided
+ */
+function getStaticNodeId(node, index) {
+    const props = node.props;
+    if (props.__staticId)
+        return props.__staticId;
+    // Generate an ID based on position and content
+    return `static-${index}-${JSON.stringify(node.children?.slice(0, 2) ?? []).slice(0, 50)}`;
+}
+/**
+ * Extract static nodes from a VNode tree
+ * Returns { staticNodes, interactiveNode }
+ */
+function separateStaticNodes(node) {
+    const staticNodes = [];
+    // Helper to recursively find and remove static nodes
+    function processNode(n) {
+        if (isStaticNode(n)) {
+            staticNodes.push(n);
+            return null; // Remove from tree
+        }
+        // Process children
+        if (n.children && n.children.length > 0) {
+            const newChildren = n.children
+                .map(child => (child && typeof child === 'object' && 'type' in child) ? processNode(child) : child)
+                .filter((child) => child !== null);
+            return {
+                ...n,
+                children: newChildren,
+            };
+        }
+        return n;
+    }
+    const interactiveNode = processNode(node) ?? {
+        type: 'fragment',
+        props: {},
+        children: [],
+    };
+    return { staticNodes, interactiveNode };
+}
+/** ANSI escape sequences */
+const ansi = {
+    clearTerminal: '\x1b[2J\x1b[3J\x1b[H',
+};
+/**
+ * Render a Reck app to the terminal
+ *
+ * @example
+ * const { waitUntilExit } = render(() => App());
+ * await waitUntilExit();
+ */
+export function render(nodeOrFn, options = {}) {
+    const { stdout = process.stdout, stdin = process.stdin, debug = false, exitOnCtrlC = true, maxFps = 30, clearOnStart = true, showCursor = false, autoTabNavigation = true, } = options;
+    // Initialize app context FIRST (before calling component functions)
+    const appContext = initializeApp(stdin, stdout, { autoTabNavigation });
+    // Store the component function for re-evaluation
+    const componentFn = typeof nodeOrFn === 'function' ? nodeOrFn : () => nodeOrFn;
+    // Create log updater for efficient incremental rendering
+    // Uses line-diffing to reduce flickering
+    const logUpdate = createLogUpdate(stdout, {
+        showCursor,
+        incremental: !debug, // Use incremental rendering unless in debug mode
+    });
+    // State
+    let currentNode = null;
+    let lastOutput = '';
+    let isUnmounted = false;
+    let exitPromise;
+    let resolveExit;
+    let rejectExit;
+    // Static content tracking
+    const renderedStaticIds = new Set();
+    let staticLineCount = 0; // Track how many lines of static content we've written
+    // Create exit promise
+    exitPromise = new Promise((resolve, reject) => {
+        resolveExit = resolve;
+        rejectExit = reject;
+    });
+    // Throttle rendering
+    const minRenderInterval = maxFps > 0 ? Math.ceil(1000 / maxFps) : 0;
+    let lastRenderTime = 0;
+    let pendingRender = false;
+    // Mouse tracking state
+    let mouseTrackingEnabled = false;
+    // Initial setup
+    if (clearOnStart && !debug) {
+        stdout.write(ansi.clearTerminal);
+    }
+    // Handle resize - need to re-evaluate component for new dimensions
+    const handleResize = () => {
+        if (!isUnmounted) {
+            beginRender();
+            currentNode = componentFn();
+            endRender();
+            scheduleRender();
+        }
+    };
+    stdout.on('resize', handleResize);
+    // Cleanup on exit
+    appContext.onExit(() => {
+        cleanup();
+    });
+    /**
+     * Schedule a render (with throttling)
+     */
+    function scheduleRender() {
+        if (pendingRender || isUnmounted)
+            return;
+        const now = Date.now();
+        const elapsed = now - lastRenderTime;
+        if (elapsed >= minRenderInterval) {
+            doRender();
+        }
+        else {
+            pendingRender = true;
+            setTimeout(() => {
+                pendingRender = false;
+                if (!isUnmounted) {
+                    doRender();
+                }
+            }, minRenderInterval - elapsed);
+        }
+    }
+    /**
+     * Perform actual render
+     */
+    function doRender() {
+        if (isUnmounted || !currentNode)
+            return;
+        lastRenderTime = Date.now();
+        const width = stdout.columns || 80;
+        const height = stdout.rows || 24;
+        // Separate static from interactive content
+        const { staticNodes, interactiveNode } = separateStaticNodes(currentNode);
+        // Render new static content first (above interactive content)
+        for (let i = 0; i < staticNodes.length; i++) {
+            const staticNode = staticNodes[i];
+            const staticId = getStaticNodeId(staticNode, i);
+            if (!renderedStaticIds.has(staticId)) {
+                // Render this static node
+                const staticOutput = renderToString(staticNode, width);
+                if (staticOutput.trim()) {
+                    // Clear the interactive area before writing static
+                    logUpdate.clear();
+                    // Write static content (it becomes permanent)
+                    stdout.write(staticOutput + '\n');
+                    staticLineCount += staticOutput.split('\n').length;
+                    renderedStaticIds.add(staticId);
+                }
+            }
+        }
+        // Calculate layout for hit testing (use full screen dimensions)
+        const layout = calculateLayout(interactiveNode, width, height);
+        // Register elements in hit-test registry for mouse events
+        registerHitTestFromLayout(layout);
+        // Enable/disable mouse tracking based on clickable elements
+        const hitTestRegistry = getHitTestRegistry();
+        if (hitTestRegistry.hasClickableElements() && !mouseTrackingEnabled) {
+            enableMouseTracking();
+            mouseTrackingEnabled = true;
+        }
+        else if (!hitTestRegistry.hasClickableElements() && mouseTrackingEnabled) {
+            disableMouseTracking();
+            mouseTrackingEnabled = false;
+        }
+        // Render interactive content
+        const output = renderToString(interactiveNode, width);
+        if (output === lastOutput && !debug) {
+            return; // No changes
+        }
+        if (debug) {
+            // Debug mode: append output instead of replacing
+            stdout.write(output + '\n');
+        }
+        else {
+            // Use incremental log updater for efficient rendering
+            logUpdate(output);
+        }
+        lastOutput = output;
+    }
+    /**
+     * Cleanup resources
+     */
+    function cleanup() {
+        if (isUnmounted)
+            return;
+        isUnmounted = true;
+        // Disable mouse tracking if enabled
+        if (mouseTrackingEnabled) {
+            disableMouseTracking();
+            mouseTrackingEnabled = false;
+        }
+        stdout.off('resize', handleResize);
+        logUpdate.done(); // Restore cursor and cleanup
+        resetHookState(); // Clear all hook state
+        cleanupApp();
+    }
+    // Create reactive render effect
+    // This will re-run whenever any signal used in the component changes
+    const disposeRender = createEffect(() => {
+        // Call componentFn inside the effect to track signal dependencies
+        // When any signal read during component evaluation changes, this effect re-runs
+        beginRender();
+        currentNode = componentFn();
+        endRender();
+        scheduleRender();
+    });
+    return {
+        rerender: (newNode) => {
+            currentNode = newNode;
+            scheduleRender();
+        },
+        unmount: () => {
+            cleanup();
+            disposeRender();
+            // Final render
+            if (!debug) {
+                stdout.write('\n');
+            }
+            resolveExit();
+        },
+        waitUntilExit: () => exitPromise,
+        clear: () => {
+            if (!debug) {
+                logUpdate.clear();
+                stdout.write(ansi.clearTerminal);
+                lastOutput = '';
+                doRender();
+            }
+        },
+    };
+}
+/**
+ * Render once and return the string (no interactivity)
+ *
+ * @example
+ * const output = renderOnce(MyComponent());
+ * console.log(output);
+ */
+export function renderOnce(node, width) {
+    return renderToString(node, width ?? process.stdout.columns ?? 80);
+}
+//# sourceMappingURL=render-loop.js.map