# Werkbank

**Werkbank** is a modular, opinionated standard library for building desktop-quality React applications. It provides a cohesive set of primitives for state management, routing, layout, and user interaction, enforcing type safety and performance best practices.

## Requirements

*   **Runtime:** Node.js 18+ or compatible runtime.
*   **Framework:** React 19+.
*   **Language:** TypeScript 5.0+ (Strict mode recommended).

## Core Concepts

Werkbank is composed of independent but interoperable modules designed to solve specific architectural challenges in complex web applications.

*   **Type Safety:** Leverages TypeScript and Valibot to ensure runtime integrity for routes, forms, and state.

## Modules

### `werkbank/component`
A collection of unstyled, accessible UI primitives.
*   **`ResizeableGrid`**: A layout container supporting draggable column/row resizing.
*   **`Form`**: A type-safe form wrapper integrating Valibot schemas.
*   **`Tabs`**, **`Button`**, **`Input`**: Standard interactive elements.

### `werkbank/router`
A schema-first routing library. Routes are defined as data structures, ensuring all navigation paths are type-safe and predictable.

### `werkbank/state`
Atomic state management primitives for handling complex application state outside the React render cycle.

### `werkbank/hook`
A utility belt of React hooks for DOM interaction and side-effect management.
*   **`useDrag`**: Handles pointer events for drag interactions.
*   **`useFocusTrap`**: Manages focus within modal interfaces.
*   **`useResizeObserver`**: Efficiently tracks element size changes.

### `werkbank/rpc`
Utilities for type-safe communication between the main thread and Web Workers.

## Installation

```bash
npm install werkbank
```

## Usage

### Layout (`ResizeableGrid`)

The `ResizeableGrid` component creates a layout with draggable dividers.

```tsx
import { ResizeableGrid, GridArea } from 'werkbank/component/grid';

function AppLayout() {
  return (
    <ResizeableGrid defaultValue={{
      columns: ["200px", "1fr"],
      rows: ["auto"],
    }}>
      <GridArea>Sidebar Content</GridArea>
      <GridArea>Main Content</GridArea>
    </ResizeableGrid>
  );
}
```

### Routing (`createRouter`)

Define routes using a configuration object and Valibot schemas for parameters.

```tsx
import { createRouter } from 'werkbank/router';
import { string } from 'valibot';
import { HomePage, UserPage, SettingsPage } from './pages';

// Define Route Schema
const routeConfig = {
  home: ["/"],
  user: {
    path: ["/user/", string()],
    children: {
      settings: ["/settings"]
    }
  }
};

// Initialize Router
const router = createRouter(routeConfig, {
  home: { component: HomePage },
  user: {
    component: UserPage,
    children: {
      settings: { component: SettingsPage }
    }
  }
});
```

### Forms (`Form`)

Create type-safe forms with validation schemas.

```tsx
import { Form } from 'werkbank/component/form';
import { useFormFields } from 'werkbank/component/form/hooks';
import * as v from 'valibot';

const UserSchema = v.object({
  email: v.string([v.email()]),
  bio: v.string([v.minLength(10)])
});

function UserProfile() {
  const fields = useFormFields(UserSchema);

  return (
    <Form schema={UserSchema} onSubmit={(data) => console.log(data)}>
      <label>
        Email
        <input {...fields.email} />
      </label>
      <label>
        Bio
        <textarea {...fields.bio} />
      </label>
      <button type="submit">Save</button>
    </Form>
  );
}
```

## License

MPL-2.0