### Minimal fullscreen-ink App Example

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/README.md

This is a basic example demonstrating how to set up a fullscreen Ink application using the `withFullScreen` wrapper. It displays a simple text message and handles application start and exit.

```typescript
import { withFullScreen } from "fullscreen-ink";
import { Box, Text } from "ink";

function App() {
  return (
    <Box flexGrow={1} alignItems="center" justifyContent="center">
      <Text>Hello, fullscreen world!</Text>
    </Box>
  );
}

const app = withFullScreen(<App />);
await app.start();
await app.waitUntilExit();
```

--------------------------------

### Install fullscreen-ink

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Install the fullscreen-ink package using npm.

```bash
npm i fullscreen-ink
```

--------------------------------

### Package JSON Build Script

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

Sets up the 'prepare' script to automatically build the project using tshy when the package is installed.

```json
{
  "scripts": {
    "prepare": "tshy"
  }
}
```

--------------------------------

### Component Switching Without Re-creation

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

This example demonstrates how to switch between different Ink components dynamically after the application has started, without creating a new instance. It utilizes the `rerender` method on the Ink instance obtained from `withFullScreen`.

```typescript
const ink = withFullScreen(<InitialApp />);
await ink.start();

// Switch to a different component after 2 seconds
setTimeout(() => {
  ink.instance.rerender(<SwitchedApp />);
}, 2000);

await ink.waitUntilExit();

```

--------------------------------

### Nested FullScreenBox Example (Not Recommended)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Demonstrates the incorrect way to nest FullScreenBox components. Nesting can lead to unpredictable sizing behavior.

```typescript
// Not recommended
<FullScreenBox>
  <FullScreenBox>
    <Text>Nested content</Text>
  </FullScreenBox>
</FullScreenBox>
```

--------------------------------

### Basic FullScreenBox Usage

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Demonstrates a simple FullScreenBox that fills the terminal and centers content. Ensure 'fullscreen-ink' and 'ink' are installed.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function App() {
  return (
    <FullScreenBox flexGrow={1} alignItems="center" justifyContent="center">
      <Text>Fullscreen content</Text>
    </FullScreenBox>
  );
}
```

--------------------------------

### Waiting Before Instance Access

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Highlights the importance of awaiting the start() promise before accessing the Ink instance. This ensures that the terminal setup is complete and the instance is ready for operations like rerender.

```typescript
const ink = withFullScreen(<App />);
await ink.start();
// safe to use instance now
ink.instance.rerender(<NewApp />);
await ink.waitUntilExit();
```

--------------------------------

### Install fullscreen-ink

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

Install the fullscreen-ink package using npm. This package requires ink (>=4.4.1) and react (>=18.2.0).

```bash
npm install fullscreen-ink
```

--------------------------------

### Typing a Component with useScreenSize

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Example demonstrating how to use the useScreenSize hook to create a component that adapts to terminal dimensions. Imports necessary components from fullscreen-ink and ink.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { FC } from "react";
import { Box, Text } from "ink";

type SizeAwareProps = {
  title: string;
};

const SizeAwareComponent: FC<SizeAwareProps> = ({ title }) => {
  const { width, height } = useScreenSize();
  
  return (
    <Box>
      <Text>{title} - {width}x{height}</Text>
    </Box>
  );
};
```

--------------------------------

### withFullScreen()

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

High-level wrapper that handles fullscreen setup, alternate screen buffer management, and app lifecycle. It initializes and controls a fullscreen Ink app with automatic alternate screen buffer management.

```APIDOC
## withFullScreen()

### Description
Initializes and controls a fullscreen Ink app with automatic alternate screen buffer management.

### Type
Function

### Purpose
High-level wrapper that handles fullscreen setup, alternate screen buffer management, and app lifecycle.

### Usage Example
```typescript
import { withFullScreen } from "fullscreen-ink";
import { Box, Text } from "ink";

function App() {
  return <Text>Press Ctrl+C to exit</Text>;
}

const app = withFullScreen(<App />);
await app.start();
await app.waitUntilExit();
```
```

--------------------------------

### Application Usage Imports

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Import patterns for using the fullscreen-ink library in an application. Includes options for all-in-one setup or component-based fullscreen.

```typescript
// All-in-one fullscreen setup
import { withFullScreen } from "fullscreen-ink";

// Component-based fullscreen
import { FullScreenBox, useScreenSize } from "fullscreen-ink";
```

--------------------------------

### Typing withFullScreen Return Value

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Demonstrates how to correctly type the instance, start, and waitUntilExit properties returned by the withFullScreen function. This ensures type safety when interacting with the fullscreen application instance.

```typescript
import { withFullScreen } from "fullscreen-ink";
import { Instance } from "ink";

const app = withFullScreen(<App />);

// Type of app.instance is Instance
const instance: Instance = app.instance;

// Type of app.start is () => Promise<void>
const start: () => Promise<void> = app.start;

// Type of app.waitUntilExit is () => Promise<void>
const wait: () => Promise<void> = app.waitUntilExit;
```

--------------------------------

### Accessing Ink Instance for Rerendering

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Illustrates how to access the Ink instance returned by withFullScreen to programmatically rerender the application with different components. Ensure start() has resolved before accessing the instance.

```typescript
const ink = withFullScreen(<App />);
await ink.start();

// Later, programmatically rerender
ink.instance.rerender(<DifferentApp />);

await ink.waitUntilExit();
```

--------------------------------

### Basic Fullscreen App with Ctrl+C Exit

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

This pattern shows a minimal fullscreen Ink application that prompts the user to press Ctrl+C to exit. It utilizes `withFullScreen` for setup and `waitUntilExit` for handling the exit condition.

```typescript
import { withFullScreen } from "fullscreen-ink";
import { Box, Text } from "ink";

function App() {
  return <Text>Press Ctrl+C to exit</Text>;
}

const app = withFullScreen(<App />);
await app.start();
await app.waitUntilExit();
```

--------------------------------

### withFullScreen

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Wraps a React component to run in fullscreen mode, handling alternate screen buffer management and app lifecycle. It provides methods to start fullscreen mode and wait for the application to exit.

```APIDOC
## withFullScreen(node, options)

### Description
Wraps a React component to run in fullscreen mode.

### Method
Not applicable (Function signature)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **node**: `ReactNode` - Component to render
- **options?**: `RenderOptions` - Optional Ink render options

### Returns
- **instance**: `Instance` - Ink render instance
- **start()**: `Promise<void>` - Async function to start fullscreen mode
- **waitUntilExit()**: `Promise<void>` - Async function to wait for exit
```

--------------------------------

### Obtaining Screen Size

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Use the `useScreenSize` hook to get the current terminal height and width. This hook is used internally by `fullscreen-ink`.

```js
import { useScreenSize } from "fullscreen-ink";

function MyComponent() {
  const { height, width } = useScreenSize();
  // use height and width as needed
}
```

--------------------------------

### FullScreenBox with Ref Forwarding

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Demonstrates using `useRef` to get a reference to the underlying Ink Box DOM element. This allows for advanced control or direct manipulation.

```typescript
import { useRef } from "react";
import { FullScreenBox } from "fullscreen-ink";
import { Text } from "ink";
import type { DOMElement } from "ink";

function AppWithRef() {
  const boxRef = useRef<DOMElement>(null);
  
  return (
    <FullScreenBox ref={boxRef}>
      <Text>Can access box element via ref</Text>
    </FullScreenBox>
  );
}
```

--------------------------------

### Exiting the App Gracefully

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Use Ink's `useApp` hook to get the `exit` method for closing the app cleanly, preventing terminal state issues.

```js
import { useApp } from "ink";

// somewhere in a component
const app = useApp();
app.exit();
```

--------------------------------

### Exported withFullScreen Function

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Wraps a React component to run in fullscreen mode, managing alternate screen buffer entry and exit. Call start() to enter fullscreen.

```typescript
export const withFullScreen: WithFullScreen = (node, options) => {
  const instance = render(null, options);
  const exitPromise = cleanUpOnExit(instance);
  function waitUntilExit() {
    return exitPromise;
  }

  return {
    instance: instance,
    start: async () => {
      await write("\x1b[?1049h"); // enter alternate buffer
      instance.rerender(<FullScreenBox>{node}</FullScreenBox>);
    },
    waitUntilExit,
  };
};
```

--------------------------------

### useScreenSize()

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

React hook for accessing current terminal dimensions and responding to resize events. It allows you to get the current terminal dimensions and react to resize events.

```APIDOC
## useScreenSize()

### Description
Get current terminal dimensions and respond to resize events.

### Type
React Hook

### Purpose
Accesses current terminal dimensions and subscribes to resize events.

### Usage Example
```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function ResponsiveApp() {
  const { width, height } = useScreenSize();
  
  return (
    <Box width={width} height={height}>
      <Text>Size: {width}×{height}</Text>
    </Box>
  );
}
```
```

--------------------------------

### Custom Layout with FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

This pattern illustrates how to create a custom layout within a fullscreen Ink application using the `FullScreenBox` component. `FullScreenBox` ensures the content fills the terminal window, and the example shows a simple header, content, and footer structure.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function CustomLayout() {
  return (
    <FullScreenBox borderStyle="round" padding={1}>
      <Box flexDirection="column">
        <Text>Header</Text>
        <Box flexGrow={1}>Content</Box>
        <Text>Footer</Text>
      </Box>
    </FullScreenBox>
  );
}
```

--------------------------------

### TypeScript Type-Only Import Example

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

This TypeScript snippet demonstrates how to use type-only imports for Ink types, which are erased during compilation and do not affect the bundle size.

```typescript
import type { Instance, RenderOptions } from "ink";
```

--------------------------------

### Programmatic Rerender of Fullscreen App

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

Shows how to programmatically update the content of a running fullscreen Ink application. After starting the app with an initial component, its instance can be used to rerender with a different component.

```typescript
const app = withFullScreen(<FirstApp />);
await app.start();

// Later, change the component
app.instance.rerender(<SecondApp />);

await app.waitUntilExit();
```

--------------------------------

### Controlled Exit with useApp Hook

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

This pattern demonstrates how to control the exit of an Ink application programmatically using the `useApp` hook. The example sets up a timeout to automatically call the `exit` function after 5 seconds.

```typescript
import { useApp } from "ink";

function ControlledApp() {
  const { exit } = useApp();
  
  useEffect(() => {
    const timer = setTimeout(() => exit(), 5000);
    return () => clearTimeout(timer);
  }, [exit]);
  
  return <Text>Auto-exit in 5 seconds</Text>;
}

const app = withFullScreen(<ControlledApp />);
await app.start();
await app.waitUntilExit();
```

--------------------------------

### useScreenSize Hook

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

A React hook that returns current terminal dimensions and responds to resize events. It uses Ink's useStdout hook to get dimensions and sets up a resize listener.

```typescript
import { useStdout } from "ink";
import { useCallback, useEffect, useState } from "react";

export function useScreenSize() {
  const { stdout } = useStdout();
  const getSize = useCallback(
    () => ({ height: stdout.rows, width: stdout.columns }),
    [stdout],
  );
  const [size, setSize] = useState(getSize);

  useEffect(() => {
    function onResize() {
      setSize(getSize());
    }
    stdout.on("resize", onResize);
    return () => {
      stdout.off("resize", onResize);
    };
  }, [stdout, getSize]);

  return size;
}
```

--------------------------------

### FullScreenBox Component

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

A React forwardRef component that creates a fullscreen box. It prevents input rendering, gets terminal size, and renders an Ink Box with automatic dimensions, forwarding the ref and spreading props.

```typescript
export const FullScreenBox = forwardRef<DOMElement, BoxProps>(
  function FullScreenBox(props, ref) {
    useInput(() => {}); // prevent input from rendering
    const { height, width } = useScreenSize();
    return <Box ref={ref} height={height} width={width} {...props} />;
  },
);
```

--------------------------------

### fullscreen-ink Documentation File Organization

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/README.md

This snippet shows the organization of the documentation files for fullscreen-ink, including the main README, overview, API references, and configuration details.

```bash
/workspace/home/output/
├── README.md                    ← You are here
├── index.md                     ← Start here for overview
├── types.md                     ← Type reference
├── configuration.md             ← Build & setup configuration
├── modules.md                   ← Module structure & hierarchy
└── api-reference/               ← Detailed API documentation
    ├── withFullScreen.md
    ├── useScreenSize.md
    └── FullScreenBox.md
```

--------------------------------

### Recommended Layout with Single FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Shows the recommended approach for nested layouts using a single root FullScreenBox and regular Ink Boxes inside.

```typescript
// Recommended
<FullScreenBox>
  <Box>
    <Text>Nested content</Text>
  </Box>
</FullScreenBox>
```

--------------------------------

### Responsive Layout Using useScreenSize

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

Demonstrates how to create a responsive Ink application layout using the `useScreenSize` hook. The component dynamically adjusts its size based on the terminal dimensions and displays the current width and height.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function ResponsiveApp() {
  const { width, height } = useScreenSize();
  
  return (
    <Box width={width} height={height}>
      <Text>Size: {width}×{height}</Text>
    </Box>
  );
}
```

--------------------------------

### Header/Main/Footer Layout with FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Demonstrates a common layout pattern with a header, main content, and footer using `flexDirection="column"`. `flexGrow={1}` is used for the main content area.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function LayoutApp() {
  return (
    <FullScreenBox flexDirection="column">
      <Box borderBottom>
        <Text bold>Header</Text>
      </Box>
      <Box flexGrow={1}>
        <Text>Main content</Text>
      </Box>
      <Box borderTop>
        <Text>Footer</Text>
      </Box>
    </FullScreenBox>
  );
}
```

--------------------------------

### Adaptive Layout Based on Terminal Dimensions

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Shows how to create a dynamic layout that changes between column and row flexDirection based on terminal width and height. Ensure 'fullscreen-ink' and 'ink' are imported.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function AdaptiveLayout() {
  const { height, width } = useScreenSize();
  const isSmall = width < 80 || height < 24;
  
  return (
    <Box flexDirection={isSmall ? "column" : "row"}>
      <Box flexGrow={1}>
        <Text>Left pane</Text>
      </Box>
      {!isSmall && (
        <Box flexGrow={1}>
          <Text>Right pane (hidden on small screens)</Text>
        </Box>
      )}
    </Box>
  );
}
```

--------------------------------

### Basic Full-Screen App Usage

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Wrap your Ink app component with `withFullScreen` and call `.start()` to make it full-screen. The terminal content is restored upon exit.

```jsx
import { withFullScreen } from "fullscreen-ink";

withFullScreen(<App />).start();
```

--------------------------------

### Accessing Ink Instance for Rerendering

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Access the Ink instance via the `instance` property to call methods like `rerender`. It's recommended to `await ink.start()` first to avoid race conditions.

```jsx
const ink = withFullScreen(<App />);
// ...
ink.instance.rerender(<SomethingElse />);
```

```jsx
const ink = withFullScreen(<App />);
await ink.start();
ink.instance.rerender(<SomethingElse />);
```

--------------------------------

### Custom Sizing with Manual Width/Height

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Illustrates how to use FullScreenBox with explicit width and height props to create a box that occupies a percentage of the terminal screen, centered using margins.

```typescript
import { FullScreenBox, useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function PartialScreenBox() {
  const { width, height } = useScreenSize();
  
  return (
    <FullScreenBox
      width={Math.floor(width * 0.8)}
      height={Math.floor(height * 0.8)}
      marginLeft={Math.floor(width * 0.1)}
      marginTop={Math.floor(height * 0.1)}
    >
      <Text>80% of screen, centered</Text>
    </FullScreenBox>
  );
}
```

--------------------------------

### Fullscreen App with Render Options

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Shows how to pass Ink's render options, such as exitOnCtrlC and debug, to withFullScreen. These options are passed directly to Ink's render function.

```typescript
const ink = withFullScreen(<App />, { 
  exitOnCtrlC: false,
  debug: true 
});
await ink.start();
await ink.waitUntilExit();
```

--------------------------------

### Optimizing Component Renders with useMemo

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Demonstrates how to use `useMemo` with the size object returned by `useScreenSize` to prevent unnecessary re-renders in child components. This is a performance optimization technique.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { useMemo } from "react";
import { Box, Text } from "ink";

// Assuming ChildComponent exists and accepts a 'size' prop
function ChildComponent({ size }) {
  return <Text>Child component size: {size.width}x{size.height}</Text>;
}

function OptimizedComponent() {
  const size = useScreenSize();
  const memoizedSize = useMemo(() => size, [size.width, size.height]);
  return <ChildComponent size={memoizedSize} />;
}
```

--------------------------------

### fullscreen-ink Source Code Structure

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/README.md

This snippet outlines the directory structure of the fullscreen-ink source code, indicating the location of the entry point, main wrapper function, fullscreen box component, screen size hook, and demo application.

```bash
src/
  ├── index.ts              Entry point (re-exports)
  ├── withFullScreen.tsx    Main wrapper function
  ├── FullScreenBox.tsx     Fullscreen box component
  ├── useScreenSize.ts      Screen size hook
  └── demo.tsx              Demo application
```

--------------------------------

### Package JSON Exports Configuration

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

Defines the entry point for fullscreen-ink as an ESM-only module, including TypeScript type definitions.

```json
{
  "exports": {
    ".": {
      "import": {
        "types": "./dist/esm/index.d.ts",
        "default": "./dist/esm/index.js"
      }
    }
  }
}
```

--------------------------------

### FullScreenBox with Border Styling

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Illustrates applying border styles and padding to the FullScreenBox. This is useful for visually separating the fullscreen content.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function BorderedApp() {
  return (
    <FullScreenBox borderStyle="round" borderColor="cyan" padding={1}>
      <Box flexGrow={1} alignItems="center" justifyContent="center">
        <Text>Bordered fullscreen app</Text>
      </Box>
    </FullScreenBox>
  );
}
```

--------------------------------

### withFullScreen Function

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Wraps an Ink component to run in fullscreen mode. It returns a control object to manage the fullscreen session.

```APIDOC
## withFullScreen

### Description
Wraps an Ink component and makes it run in fullscreen mode using the alternate screen buffer.

### Function Signature
```typescript
function withFullScreen(
  node: ReactNode,
  options?: RenderOptions
): {
  instance: Instance;
  start: () => Promise<void>;
  waitUntilExit: () => Promise<void>;
}
```

### Parameters
#### Parameters
- **node** (`ReactNode`) - Required - The React component or element to render in fullscreen
- **options** (`RenderOptions`) - Optional - Optional Ink render options (passed directly to Ink's `render` function)

`RenderOptions` is an object that accepts any options supported by Ink's `render` function, such as `exitOnCtrlC`, `patchConsole`, and `debug`.

### Return Type
Returns an object with the following properties:

#### Properties
- **instance** (`Instance`) - The Ink instance, identical to what Ink's `render` function returns. Provides direct access to re-render, unmount, and other Ink operations.
- **start** (`() => Promise<void>`) - Async method that switches the terminal to the alternate screen buffer and renders the component. Must be called to start the fullscreen app.
- **waitUntilExit** (`() => Promise<void>`) - Async method that resolves when the app exits and the alternate screen buffer is cleaned up. Returns the same promise regardless of how many times it is called.

### Usage Examples
#### Basic fullscreen app
```typescript
import { withFullScreen } from "fullscreen-ink";
import { Box, Text } from "ink";

function App() {
  return (
    <Box flexGrow={1} alignItems="center" justifyContent="center">
      <Text>Hello, fullscreen world!</Text>
    </Box>
  );
}

const ink = withFullScreen(<App />);
await ink.start();
await ink.waitUntilExit();
console.log("App closed");
```

#### With Ink render options
```typescript
const ink = withFullScreen(<App />, { 
  exitOnCtrlC: false,
  debug: true 
});
await ink.start();
await ink.waitUntilExit();
```

#### Accessing the Ink instance
```typescript
const ink = withFullScreen(<App />);
await ink.start();

// Later, programmatically rerender
ink.instance.rerender(<DifferentApp />);

await ink.waitUntilExit();
```

#### Waiting before accessing the instance
Due to the asynchronous nature of terminal setup, wait for `start()` to resolve before accessing the instance:
```typescript
const ink = withFullScreen(<App />);
await ink.start();
// safe to use instance now
ink.instance.rerender(<NewApp />);
await ink.waitUntilExit();
```
```

--------------------------------

### Type Usage Imports

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Import patterns for using type definitions from the Ink library within the fullscreen-ink context.

```typescript
// Type definitions from Ink
import type { Instance, DOMElement, RenderOptions } from "ink";
```

--------------------------------

### Custom Ink Render Options

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Pass Ink's `render` options, such as `exitOnCtrlC: false`, to `withFullScreen` to customize app behavior.

```jsx
withFullScreen(<App />, { exitOnCtrlC: false }).start();
```

--------------------------------

### Basic Terminal Size Display

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Demonstrates how to use the useScreenSize hook to display the current terminal width and height within a component. Imports are required from 'fullscreen-ink' and 'ink'.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function ResponsiveComponent() {
  const { height, width } = useScreenSize();
  
  return (
    <Box>
      <Text>Terminal size: {width}x{height}</Text>
    </Box>
  );
}
```

--------------------------------

### Multi-Column Layout

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Creates a two-column layout where each column's width is calculated based on the available terminal width. Use this for side-by-side content presentation.

```typescript
function MultiColumn() {
  const { width } = useScreenSize();
  const columnWidth = Math.floor((width - 2) / 2);
  
  return (
    <Box>
      <Box width={columnWidth} borderRight>
        <Text>Column 1</Text>
      </Box>
      <Box width={columnWidth}>
        <Text>Column 2</Text>
      </Box>
    </Box>
  );
}
```

--------------------------------

### Imports for withFullScreen Module

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Imports necessary types and functions from 'ink' and local modules for the withFullScreen wrapper.

```typescript
import { type Instance, render } from "ink";
import { FullScreenBox } from "./FullScreenBox.js";
```

--------------------------------

### Integrating External Event Listeners

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Combine `withFullScreen` with external event listeners, such as `process.on('SIGTERM')`, to handle application exit gracefully. This snippet shows how to use the `useApp` hook to access the `exit` function.

```typescript
import { withFullScreen } from "fullscreen-ink";
import { useEffect } from "react";
import { Box, Text, useApp } from "ink";

function EventListeningApp() {
  const { exit } = useApp();
  
  useEffect(() => {
    process.on("SIGTERM", () => {
      console.log("Received SIGTERM, exiting...");
      exit();
    });
  }, [exit]);
  
  return <Text>Press Ctrl+C or send SIGTERM to exit</Text>;
}

const ink = withFullScreen(<EventListeningApp />);
await ink.start();
await ink.waitUntilExit();

```

--------------------------------

### Imports for FullScreenBox Module

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Imports necessary components and hooks from 'ink', 'react', and local modules for the FullScreenBox component.

```typescript
import { Box, type DOMElement, useInput } from "ink";
import { type ComponentPropsWithoutRef, forwardRef } from "react";
import { useScreenSize } from "./useScreenSize.js";
```

--------------------------------

### Using useScreenSize in Multiple Components

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Illustrates how to use the useScreenSize hook independently in different components (Header, Footer, App) to access terminal dimensions. Requires 'fullscreen-ink' and 'ink'.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function Header() {
  const { width } = useScreenSize();
  return (
    <Box width={width}>
      <Text bold>Application Header ({width} cols)</Text>
    </Box>
  );
}

function Footer() {
  const { width } = useScreenSize();
  return (
    <Box width={width}>
      <Text>Application Footer ({width} cols)</Text>
    </Box>
  );
}

function App() {
  const { height } = useScreenSize();
  return (
    <Box flexDirection="column" height={height}>
      <Header />
      <Box flexGrow={1}>
        <Text>Main content area</Text>
      </Box>
      <Footer />
    </Box>
  );
}
```

--------------------------------

### Waiting for App Exit

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/README.md

Use the `waitUntilExit` property on the object returned by `withFullScreen` to asynchronously wait for the Ink app to close.

```jsx
const ink = withFullScreen(<App />);
// ...
await ink.waitUntilExit();
// do something after the app has closed
```

--------------------------------

### Package JSON tshy Build System Configuration

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

Configures the tshy build tool to generate ESM output from the TypeScript source entry point.

```json
{
  "tshy": {
    "dialects": ["esm"],
    "exports": {
      "./package.json": "./package.json",
      ".": "./src/index.ts"
    }
  }
}
```

--------------------------------

### FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

A React component that fills the terminal window and responds to resize events. It is designed to be used within fullscreen Ink applications.

```APIDOC
## FullScreenBox

### Description
React component that fills the terminal window and responds to resize events.

### Method
Not applicable (React Component)

### Parameters
Props are derived from Ink's Box component and `useScreenSize` hook.

### Returns
A React component that renders a Box filling the terminal.
```

--------------------------------

### Centered Layout with Terminal Size

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Utilizes useScreenSize to center content within the terminal window by setting Box component dimensions. Requires 'fullscreen-ink' and 'ink' imports.

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function CenteredBox() {
  const { height, width } = useScreenSize();
  
  return (
    <Box
      flexGrow={1}
      alignItems="center"
      justifyContent="center"
      height={height}
      width={width}
    >
      <Text>Centered content</Text>
    </Box>
  );
}
```

--------------------------------

### useScreenSize Hook Signature

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

This snippet shows the function signature and return type of the useScreenSize hook. It returns an object containing the current width and height of the terminal.

```APIDOC
## useScreenSize

### Description
A React hook that returns the current terminal size and automatically updates when the terminal is resized.

### Function Signature

```typescript
function useScreenSize(): {
  height: number;
  width: number;
}
```

### Return Type

Returns an object with the following properties:

- **height** (`number`): The number of rows in the terminal stdout.
- **width** (`number`): The number of columns in the terminal stdout.

### Usage Example

```typescript
import { useScreenSize } from "fullscreen-ink";
import { Box, Text } from "ink";

function MyComponent() {
  const { height, width } = useScreenSize();
  
  return (
    <Box>
      <Text>Terminal size: {width}x{height}</Text>
    </Box>
  );
}
```
```

--------------------------------

### Two-Pane Layout with FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Shows a two-pane layout using `flexDirection="row"` on FullScreenBox. Each pane uses `flexGrow={1}` to share space equally.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function TwoPaneApp() {
  return (
    <FullScreenBox flexDirection="row">
      <Box flexGrow={1} borderRight>
        <Text>Left pane</Text>
      </Box>
      <Box flexGrow={1}>
        <Text>Right pane</Text>
      </Box>
    </FullScreenBox>
  );
}
```

--------------------------------

### TypeScript Configuration (tsconfig.json)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

Specifies TypeScript compilation rules, including module system, strictness, and output format.

```json
{
  "compilerOptions": {
    "lib": ["ESNext"],
    "module": "NodeNext",
    "target": "esnext",
    "moduleResolution": "NodeNext",
    "moduleDetection": "force",
    "strict": true,
    "jsx": "react-jsx",
    "declaration": true,
    "skipLibCheck": true
  }
}
```

--------------------------------

### Conditional Layout Based on Space

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Renders different layouts (compact or standard) based on terminal width and height. Use this to adapt UI complexity to available screen real estate.

```typescript
function ConditionalLayout() {
  const { width, height } = useScreenSize();
  
  if (width < 80 || height < 24) {
    return <CompactLayout />;
  }
  
  return <StandardLayout />;
}
```

--------------------------------

### Type Definitions for withFullScreen

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Defines type aliases for Ink's render function and the withFullScreen wrapper function signature.

```typescript
type InkRender = typeof render;
type WithFullScreen = (...args: Parameters<InkRender>) => {
  instance: Instance;
  start: () => Promise<void>;
  waitUntilExit: () => Promise<void>;
};
```

--------------------------------

### Internal write Helper Function

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

A helper function to write content to stdout, returning a promise that resolves on success or rejects on error. Used for managing the alternate screen buffer.

```typescript
async function write(content: string) {
  return new Promise<void>((resolve, reject) => {
    process.stdout.write(content, (error) => {
      if (error) reject(error);
      else resolve();
    });
  });
}
```

--------------------------------

### Package.json Files Field

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

This JSON snippet from package.json specifies the 'files' field, indicating that only the 'dist' directory will be published to npm, including built JavaScript bundles, source maps, and type definitions.

```json
{
  "files": ["dist"]
}
```

--------------------------------

### Complex Layout with FullScreenBox and Other Components

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Combines FullScreenBox with multiple Ink Box, Text, and Spacer components to create a complex terminal UI layout including header, main content, sidebar, and footer.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text, Spacer } from "ink";

function ComplexLayout() {
  return (
    <FullScreenBox flexDirection="column">
      <Box borderBottom borderColor="cyan">
        <Text bold>Header</Text>
        <Spacer />
        <Text>v1.0</Text>
      </Box>
      
      <Box flexGrow={1}>
        <Box flexGrow={1}>
          <Text>Main content area</Text>
        </Box>
        <Box width={20} borderLeft>
          <Text>Sidebar</Text>
        </Box>
      </Box>
      
      <Box borderTop borderColor="cyan">
        <Text>Footer</Text>
      </Box>
    </FullScreenBox>
  );
}
```

--------------------------------

### useScreenSize

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

A React hook that provides the current terminal dimensions. It updates automatically when the terminal is resized.

```APIDOC
## useScreenSize()

### Description
React hook for terminal dimensions.

### Method
Not applicable (React Hook)

### Parameters
None

### Returns
An object containing the current terminal dimensions (e.g., `width`, `height`).
```

--------------------------------

### Instance Type Alias (Ink Integration)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

The object returned by Ink's render() function, providing methods to control a running Ink app like rerender, unmount, and waitUntilExit.

```typescript
type Instance = ReturnType<typeof import('ink').render>
```

--------------------------------

### Progressive Rendering with State Updates

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/withFullScreen.md

Use this snippet to implement progressive rendering in your Ink application by updating component state over time. It requires `useEffect` and `useState` hooks from React, and `withFullScreen` from fullscreen-ink.

```typescript
import { useEffect, useState } from "react";
import { withFullScreen } from "fullscreen-ink";
import { Box, Text } from "ink";

function ProgressiveApp() {
  const [step, setStep] = useState(0);
  
  useEffect(() => {
    const interval = setInterval(() => {
      setStep(s => s + 1);
    }, 500);
    return () => clearInterval(interval);
  }, []);
  
  return (
    <Box flexDirection="column">
      <Text>Loading: {step}/10</Text>
      {step === 10 && <Text>Complete!</Text>}
    </Box>
  );
}

const ink = withFullScreen(<ProgressiveApp />);
await ink.start();
await ink.waitUntilExit();

```

--------------------------------

### Typing Component Props with BoxProps

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Shows how to extend the BoxProps from fullscreen-ink to create custom props for React components. This allows for adding custom properties while retaining all BoxProps functionality.

```typescript
import { FullScreenBox, BoxProps } from "fullscreen-ink";
import { FC } from "react";

type CustomBoxProps = BoxProps & {
  customProp?: string;
};

const CustomComponent: FC<CustomBoxProps> = (props) => {
  const { customProp, ...boxProps } = props;
  return <FullScreenBox {...boxProps}>{customProp}</FullScreenBox>;
};
```

--------------------------------

### FullScreenBox Component

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

The FullScreenBox component renders an Ink Box that automatically fills the terminal window. It accepts all Ink Box props and forwards refs to the underlying DOM element. Height and width default to terminal dimensions unless explicitly provided.

```APIDOC
## FullScreenBox Component

### Description
A React component that renders an Ink Box filling the entire terminal window. It automatically adjusts to terminal size changes and prevents input rendering to maintain layout stability. It accepts all props compatible with Ink's Box component and supports ref forwarding.

### Component Signature
```typescript
const FullScreenBox = forwardRef<DOMElement, BoxProps>(
  function FullScreenBox(props, ref): ReactElement
)
```

### Props
#### `ref`
- **Type**: `Ref<DOMElement>`
- **Required**: No
- **Description**: Forwarded ref to the underlying Ink Box component.

#### `...props`
- **Type**: `BoxProps` (includes all Ink Box props like `width`, `height`, `flexDirection`, `flexGrow`, `alignItems`, `justifyContent`, `borderStyle`, `borderColor`, `padding`, `margin`, etc.)
- **Required**: Varies
- **Description**: All props accepted by Ink's Box component.

**Note**: `height` and `width` props default to terminal dimensions. Providing explicit values overrides fullscreen behavior for those dimensions.

### Return Type
Returns a React element that renders an Ink Box component filling the terminal.
```

--------------------------------

### Internal cleanUpOnExit Function

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/modules.md

Waits for an Ink instance to exit and then cleans up the terminal by exiting the alternate screen buffer. Used by withFullScreen.

```typescript
async function cleanUpOnExit(instance: Instance) {
  await instance.waitUntilExit();
  await write("\x1b[?1049l"); // exit alternate buffer
}
```

--------------------------------

### ScreenSize Interface

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

An object containing the current terminal size in rows (height) and columns (width). This interface is returned by the useScreenSize() hook.

```typescript
interface ScreenSize {
  height: number;
  width: number;
}
```

--------------------------------

### FullScreenBox

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/index.md

React component that automatically fills the terminal window. This Ink Box component automatically fills the terminal window and can be used for custom layouts.

```APIDOC
## FullScreenBox

### Description
Ink Box that automatically fills the terminal window.

### Type
React Component

### Purpose
Provides a container that automatically expands to fill the entire terminal viewport.

### Usage Example
```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Box, Text } from "ink";

function CustomLayout() {
  return (
    <FullScreenBox borderStyle="round" padding={1}>
      <Box flexDirection="column">
        <Text>Header</Text>
        <Box flexGrow={1}>Content</Box>
        <Text>Footer</Text>
      </Box>
    </FullScreenBox>
  );
}
```
```

--------------------------------

### RenderOptions Type Alias (Ink Render Options)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Configuration options passed to Ink's render() function. Common options include exitOnCtrlC, patchConsole, and debug.

```typescript
type RenderOptions = Parameters<typeof render>[1]
```

--------------------------------

### FullScreenBox with Fixed Dimensions

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/FullScreenBox.md

Shows how to override the fullscreen behavior by providing explicit width and height props. This limits the component to the specified dimensions.

```typescript
import { FullScreenBox } from "fullscreen-ink";
import { Text } from "ink";

function FixedSize() {
  return (
    <FullScreenBox width={40} height={10}>
      <Text>Fixed size content</Text>
    </FullScreenBox>
  );
}
```

--------------------------------

### Changesets CLI Dependency

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

This JSON snippet shows the addition of the @changesets/cli package to devDependencies, which is used for managing versions and changelogs in the project.

```json
{
  "devDependencies": {
    "@changesets/cli": "^2.27.1"
  }
}
```

--------------------------------

### Responsive Text Wrapping

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Conditionally wraps or truncates text based on terminal width. Use this to manage long text content in responsive terminal layouts.

```typescript
function ResponsiveText() {
  const { width } = useScreenSize();
  const isNarrow = width < 60;
  
  return (
    <Text wrap={isNarrow ? "wrap" : "truncate"}>
      Long text that should wrap on narrow terminals and truncate on wide ones
    </Text>
  );
}
```

--------------------------------

### RenderOptions Type Alias (Ink Integration)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Configuration object passed to Ink's render() function. Common options include exitOnCtrlC, patchConsole, and debug.

```typescript
type RenderOptions = Parameters<typeof import('ink').render>[1]
```

--------------------------------

### Instance Type Alias (Ink Render Instance)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

The Ink Instance type returned from Ink's render() function. Provides methods and properties for controlling a rendered Ink app.

```typescript
type Instance = typeof render['__returns__']
```

--------------------------------

### Box Type Alias (Ink Component)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Represents Ink's layout component. FullScreenBox is built on top of this component and accepts all Box props.

```typescript
type Box = import('ink').Box
```

--------------------------------

### Safe Dimension Component

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/api-reference/useScreenSize.md

Ensures minimum usable space by calculating usable height and width, preventing values less than 1. Use this when you need to guarantee a certain amount of space for content.

```typescript
function SafeDimensionComponent() {
  const { height, width } = useScreenSize();
  
  // Ensure minimum usable space
  const usableHeight = Math.max(height - 2, 1);
  const usableWidth = Math.max(width - 2, 1);
  
  return (
    <Box height={usableHeight} width={usableWidth}>
      <Text>Usable space: {usableWidth}×{usableHeight}</Text>
    </Box>
  );
}
```

--------------------------------

### Public TypeScript Exports

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/configuration.md

These TypeScript export statements define the public API of the fullscreen-ink package, making components and hooks available through the main entry point.

```typescript
export * from "./FullScreenBox.js";
export * from "./useScreenSize.js";
export * from "./withFullScreen.js";
```

--------------------------------

### DOMElement Type Alias (Ink Internal)

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Ink's internal DOM element type used for ref forwarding. Used by FullScreenBox ref parameter.

```typescript
type DOMElement = import('ink').DOMElement
```

--------------------------------

### ReactNode Type Alias

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

A type representing a React element, component, or fragment that can be rendered. Used by withFullScreen() to accept the component to render.

```typescript
type ReactNode = React.ReactNode
```

--------------------------------

### BoxProps Type Alias

Source: https://github.com/daniguardiola/fullscreen-ink/blob/main/_autodocs/types.md

Represents all props that can be passed to an Ink Box component, excluding ref. This includes layout properties, styling, dimensions, and all other Box-specific options.

```typescript
type BoxProps = ComponentPropsWithoutRef<typeof Box>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.