open-index/open-npm huggingface dataset:
npm package: @ruten/proxy-window
Description: High-performance reactive virtual scrolling engine with Proxy-based state management
Author: Yuri
Latest version: 1.0.0

# ProxyWindow

High-performance, framework-agnostic virtual list windowing with Proxy-based reactive state.

## Why

Render only what is visible while keeping smooth scrolling and a tiny DOM footprint. ProxyWindow keeps the scroll height correct via a phantom spacer and updates the visible slice as you scroll or mutate data.

## Features

- Zero dependencies, pure TypeScript
- Reactive data via `Proxy` (push/splice/length changes trigger refresh)
- Windowed rendering with a fixed item height
- Works with any framework or vanilla JS

## Install

```bash
npm install @ruten/proxy-window
```

## Quick Start

```ts
import { VirtualList } from '@ruten/proxy-window';

type Item = { title: string; description: string };

const list = new VirtualList<Item>({
  root: document.querySelector('#viewport')!,
  itemHeight: 80,
  data: myMassiveArray,
  renderItem: (item) => `
    <div class="noir-card">
      <h3>${item.title}</h3>
      <p>${item.description}</p>
    </div>
  `
});

// Reactive update
list.state.push({ title: 'New Atom', description: 'Stable Isotope' });
```

## API

### `new VirtualList(options)`

`options`:

- `root: HTMLElement` container with fixed height and `overflow-y: auto`
- `itemHeight: number` fixed row height in pixels
- `data: T[]` initial data array
- `renderItem: (item: T) => string` returns HTML for a single item

### `list.state: T[]`

Reactive proxy of your data. Mutations (e.g. `push`, `splice`, index assignment, `length` changes) trigger re-render.

## Styling

Your container must have a height. The library sets `position: relative` and `overflow-y: auto` on the root.

```css
#viewport {
  height: 600px;
  background: #000;
  color: #fff;
  border: 1px solid #333;
}
```

## Example App

A minimal demo is in `examples/`.

```bash
npm run dev
```

## Build

```bash
npm run build
```

## License

MIT