@lab-kit/react

React widgets for building self-contained interactive lab pages — pages with sliders, controls, and canvas-based experimentation.

This is the v0.x of the library. The Lab/Workspace/Instrument runtime arrives in later plans; v0.0.1 ships presentational primitives.

Installation

Not published to npm — for now the package is intentionally local-install-only. It also depends on a sibling clone of weasel, so clone both side by side:

git clone https://github.com/orochi235/weasel.git
git clone https://github.com/orochi235/labkit.git
cd weasel && npm install && npm run build
cd ../labkit && npm install && npm run build

Then point your app at the local clone:

"dependencies": {
  "@lab-kit/react": "file:../labkit"
}

Usage

import { LabShell, Toolbar, WorkspaceGrid, FpsMeter } from '@lab-kit/react';
import '@lab-kit/react/styles.css';

function MyLab() {
  return (
    <LabShell title="My Lab" header={<button>+ Add</button>}>
      <WorkspaceGrid>
        <div>Workspace 1</div>
        <div>Workspace 2</div>
      </WorkspaceGrid>
    </LabShell>
  );
}

Theme

Theme follows the OS by default. To force a theme:

<LabShell title="..." theme="dark">...</LabShell>

Development

npm install
npm run dev          # Vite dev server (examples/)
npm run storybook    # Storybook on :6006
npm test             # Vitest
npm run lint         # Biome + class-prefix check
npm run build        # Build dist/ for publish

Documentation

• Docs site
• Recipes — composition patterns
• Agent guide — agent navigation guide
• Storybook
• Speech balloon experiment — sample implementation built on the property-panel widgets
• Design spec