open-index/open-npm huggingface dataset:
npm package: @gridland/utils
Description: Portable hooks and utilities for [Gridland](https://gridland.io) — the React framework for building terminal apps that run in the browser and the terminal.
Latest version: 0.2.55

# @gridland/utils

Portable hooks and utilities for [Gridland](https://gridland.io) — the React framework for building terminal apps that run in the browser and the terminal.

This package has no native dependencies and can be used in both terminal and browser environments. It's the shared foundation for `@gridland/web` (browser renderer) and `@gridland/bun` (terminal runtime).

## Install

```bash
bun add @gridland/utils
```

## What's in here

**Hooks**
- `useKeyboard(handler, options?)` — global keyboard listener
- `useCapturedKeyboard(focusId)` — keyboard scoped to a focused element
- `useTerminalDimensions()` — `{ width, height }` in terminal cells
- `useOnResize(callback)` — runs on resize events
- `useTimeline(options?)` — animation timeline

**Focus system**
- `FocusProvider`, `FocusScope` — wrap your app to enable keyboard navigation
- `useFocus({ id, tabIndex, autoFocus, disabled })` — register a focusable element
- `useShortcuts(shortcuts, focusId)` — register keyboard shortcut hints
- `useFocusedShortcuts()` — active shortcuts for the currently focused element

**Runtime context**
- `RuntimeProvider` / `useRuntime()` — detect `"terminal"` vs `"browser"` at runtime
- `isBrowser()`, `isCanvasSupported()` — environment checks

**Color utilities**
- `RGBA`, `parseColor`, `hexToRgb`, `rgbToHex`, `hsvToRgb`

## Example

```tsx
import { useKeyboard, useFocus, FocusProvider } from "@gridland/utils"

function Button() {
  const { isFocused, focusRef } = useFocus({ id: "submit" })
  useKeyboard((key) => {
    if (isFocused && key.name === "return") submit()
  })
  return <box ref={focusRef} border>Submit</box>
}

function App() {
  return (
    <FocusProvider selectable>
      <Button />
    </FocusProvider>
  )
}
```

## Documentation

Full docs at [gridland.io/docs](https://gridland.io/docs)

Source: [github.com/thoughtfulllc/gridland](https://github.com/thoughtfulllc/gridland)
npm package: @gridland/web
Description: Browser renderer for Gridland. Renders React-based TUI components to an HTML5 canvas.
Latest version: 0.2.55

# @gridland/web

Browser renderer for Gridland. Renders React-based TUI components to an HTML5 canvas.

## Install

```bash
npm install @gridland/web
```

## TypeScript Setup

Gridland uses custom JSX elements (`<box>`, `<text>`, `<span>`, etc.) that aren't standard HTML. To get type-checking and autocomplete, add the JSX type declarations to your `tsconfig.json`:

```json
{
  "include": ["src", "node_modules/@gridland/web/src/gridland-jsx.d.ts"]
}
```

Or add a triple-slash reference in any `.d.ts` file in your project:

```ts
/// <reference types="@gridland/web/jsx" />
```

This handles React 19 compatibility automatically — no conflicts with built-in `IntrinsicElements`.

## Usage

```tsx
import { TUI } from "@gridland/web"

function App() {
  return (
    <TUI style={{ width: "100vw", height: "100vh" }}>
      <box border borderStyle="rounded" padding={1}>
        <text fg="#a3be8c">Hello, Gridland!</text>
      </box>
    </TUI>
  )
}
```

See the [documentation](https://gridland.dev) for full setup guides (Vite, Next.js) and component reference.