# @dolphinspired/solid-stage

Editor-chrome primitives for [SolidJS](https://www.solidjs.com/) — collapsible
side panels, collapsible sections, a multi-layer canvas stage, a compact form
control set, and app-level overlays (tooltip / modal / toast). Built for
property-heavy editor UIs: a canvas in the middle, dense settings down the sides.

Browser-only. Solid 1.9+ peer dependency.

## Install

```sh
pnpm add @dolphinspired/solid-stage
```

On Vite, also set `optimizeDeps: { exclude: ['@kobalte/core'] }` ([why](./docs/quickstart.md#vite-exclude-kobalte-from-dep-optimization)).

```tsx
import { EditorPanels, Section, TextField } from '@dolphinspired/solid-stage';
import '@dolphinspired/solid-stage/styles.css';

function App() {
  return (
    <div class="stage-root">
      <EditorPanels
        center={<MyCanvas />}
        leftPanel={
          <Section title="Settings">
            <TextField name="Name" value={name} onChange={setName} />
          </Section>
        }
      />
    </div>
  );
}
```

## Documentation

Full docs live in [`docs/`](./docs/README.md):

- **[Quick start](./docs/quickstart.md)** and **[Concepts](./docs/concepts.md)** —
  start here.
- Reference: [controls & fields](./docs/controls.md),
  [layout](./docs/layout.md), [state](./docs/state.md),
  [overlays](./docs/overlays.md), [drag/dock/float](./docs/dnd.md),
  [theming](./docs/theming.md), [icons](./docs/icons.md).
- [Guides](./docs/guides.md) — custom controls, validation, custom search,
  deep-linking.

The docs are the source of truth for the feature set — this README stays
intentionally thin.

> **Using an AI agent with this library?** Point it at
> [`AGENTS.md`](./AGENTS.md) — a compact briefing of the conventions and the
> assumptions it can safely make.

## License

MIT. Bundled icons are vendored from [Phosphor](https://phosphoricons.com) under
its MIT licence (see [`NOTICE`](./NOTICE)).