# blueprints

Deployed at https://blueprints.apoena.dev

Interactive illustrations of UI-pattern **blueprints** — the formal, framework-agnostic
contracts from [`blueprint-ontology`](https://git.apoena.dev) (signature, state machine,
behaviors, invariants, critical performance, failure modes), rendered in a cyanotype
"blueprint" style: monospace, blueprint-blue paper, faint grid, amber annotations.

The first screen illustrates the **List** blueprint and its seven functions —
Display · Scroll · Load · Filter · Sort · Select · Act — as a specimen-under-glass with a
full contract readout, an anatomy/composition map, and the `LoadState` machine.

## Develop

```bash
pnpm dev           # frontend on :5173
pnpm build         # type-check (vue-tsc) + production build → dist/
pnpm lint          # oxlint  (pnpm lint:fix to autofix)
pnpm fmt           # oxfmt   (pnpm fmt:check to verify only)
```

## Stack

- **Vite + Vue 3 + TypeScript** SPA (no backend)
- **Tailwind v4 + DaisyUI** with a custom `blueprint` dark theme (`src/style.css`)
- **oxlint + oxfmt** for lint/format (no semicolons, double quotes)
- Served in production by **nginx** (see `Dockerfile` + `nginx.conf`)

Blueprint content lives as typed data in `src/data/`; the viewer components render it.
Source of truth: the `list` blueprint in `blueprint-ontology`
(`blueprints/list/README.md`, `list.als`, `list.test.als`).

The original single-file static illustration is archived at
[`archive/list-illustration.html`](archive/list-illustration.html).

## Deploy

Pushes to `main` are picked up by Coolify at https://platform.apoena.dev and deployed to
https://blueprints.apoena.dev.