# Content studio

Local-only editor for site owners and developers. It reads and writes files on disk — the same `content/**` and `public/**` trees that agents and `aftercare validate` use. It is **not** a hosted CMS and does **not** ship into `dist/`.

## Personas

| Role | Studio use |
|---|---|
| **Site owner** | Edit pages, collection items, nav, and images without hand-writing TOON |
| **Agency developer** | Theme stays locked; studio never edits `theme/**` |

Owners can still use an LLM + `AGENTS.md`. Studio is an alternative UI over the same contracts.

## Run

From a site:

```powershell
npx aftercare ui
npx aftercare ui --root . --port 4321
```

From the Aftercare monorepo (example site):

```powershell
npm run build:ui
npm run ui:example
```

Opens `http://127.0.0.1:4321` (localhost only).

## What you can edit

- `content/site.toon` — name, nav, footer
- `content/pages/*.toon` — page meta + ordered sections
- Collection items under `content/{folder}/` (from `defineCollection`)
- Category meta (`category.toon`)
- Image upload into `public/` (paths like `/images/uploads/…`)

## Validation

- Section and collection props use live Zod schemas from the theme (`defineSection` / `defineCollection`).
- Save is rejected when the file fails contract validation.
- The Diagnostics panel runs the same `runDoctor` report as `aftercare doctor --json`.

## Architecture (framework)

| Piece | Location |
|---|---|
| Content read/write + validate | `src/studio/content-api.ts` |
| Contracts as JSON Schema | `src/studio/contracts-api.ts` |
| Doctor wrapper | `src/studio/validate-api.ts` |
| Image list/upload | `src/studio/images-api.ts` |
| HTTP API + static UI | `src/studio/server.ts` |
| CLI | `aftercare ui` → `src/commands/ui.ts` |
| React + shadcn app | `ui/` |

Package export: `import { … } from "aftercare/studio"`.

## Dev notes

- UI stack: Vite, React, Tailwind v4, [shadcn/ui](https://ui.shadcn.com/).
- During UI development: run `aftercare ui` (API) and `npm run dev` inside `ui/` (Vite proxies `/api` to port 4321).
- Production studio serve uses the built `ui/dist` assets.