# @enesis/dev

Documentation-style development sandbox for the Enesis Editor. A Vite + Vue 3 app that exercises every `@enesis/editor` `<Block>` feature through live, editable examples organized across 10 catalog pages.

## Quick Start

From the workspace root:

```bash
pnpm dev
```

Opens at `http://localhost:5173`.

## Site Map

| Page | Route | Features Demonstrated |
|---|---|---|
| Overview | `/` | Key concepts, Block + Editor API tables (props + events) |
| Editor Shell | `/editor` | Multi-block Editor with insertion zones, split/merge, drag-to-reorder, undo/redo |
| Block Demo | `/editor-block` | Standalone EditorBlock with all syntax features |
| Toolbar | `/toolbar` | Shared EditorToolbar bound to active block via `#toolbar` slot |
| Suggestion Menu | `/suggestion-menu` | Slash-command and mention pattern menu demo |
| Themes | `/themes` | CSS-variable theme presets and overrides |

Each page features multiple live, editable examples with a collapsible source code panel.

## Architecture

```
App.vue                     Shell layout — UHeader + UPage + sidebar navigation
├── pages/index.vue         Overview
├── pages/editor.vue        Multi-block Editor shell
├── pages/editor-block.vue  Standalone EditorBlock demo
├── pages/toolbar.vue       Toolbar integration
├── pages/suggestion-menu.vue  Pattern completion menu
└── pages/themes.vue        Theme presets

components/
├── LiveExample.vue         <Block> wrapper with title, description, source code panel
└── AppLogo.vue             Enesis brand mark
```

The dev app resolves `@enesis/editor` directly to source (`packages/editor/src/index.ts`) via Vite aliases, enabling hot-reload during development.

## Configuration

- **Framework:** Vue 3 + Vite + TypeScript (`strict: true`)
- **UI Library:** Nuxt UI v4 (UNavigationMenu, UPage, UHeader, UColorModeButton, UCard, etc.)
- **Routing:** Vue Router — 6 routes, one per feature page
- **Styling:** Tailwind CSS v4 with Nuxt UI theme
- **Type Checking:** `vue-tsc` (pre-existing type errors in the editor package do not block the dev server)
- **Icons:** Iconify (Lucide)

## Scripts

| Script | Description |
|---|---|
| `pnpm --filter @enesis/dev dev` | Start Vite dev server |
| `pnpm --filter @enesis/dev build` | Type-check + production build |
| `pnpm --filter @enesis/dev preview` | Preview production build |

## Deployment

The dev app is auto-deployed to Codeberg Pages on push to `master`. See `.forgejo/workflows/deploy.yml` at the workspace root.