# @enesis/dev

Development sandbox for the Enesis Editor. A Vite + Vue 3 app that exercises the `@enesis/editor` `<Block>` component with sample markdown content and full event logging.

## Quick Start

From the workspace root:

```bash
pnpm dev
```

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

## What It Demonstrates

- Four `<Block>` instances with different markdown content (headings, bold, callouts, page refs, block refs, tags, links, tasks with state/priority, properties)
- All block lifecycle events logged to console (`change`, `split`, `merge-previous`, `delete-if-empty`, `indent`, `outdent`, `arrow-up-from-start`, `arrow-down-from-end`, `pattern-open`, `pattern-update`, `pattern-close`, `focus`, `blur`, `selection-change`)
- `marker-mode="always-visible"` on the first block (markdown delimiters always shown)
- `marker-mode="live-preview"` (default) on the remaining blocks (delimiters hidden when blurred)
- Dark/light mode toggle via Nuxt UI `UColorModeButton`
- Routing via Vue Router with a single route at `/`

## Architecture

```
EditorView.vue          Route page
  └── Editor.vue        Playground — four <Block> instances
        └── Block.vue   (from @enesis/editor)
```

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
- **UI Library:** Nuxt UI v4 (layout components, color mode, buttons)
- **Styling:** Tailwind CSS v4 with custom green palette
- **Type Checking:** `vue-tsc` (run as part of `build`)
- **Icons:** Iconify (Lucide, Simple Icons)

## 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.