@voltro/cli 0.27.0 → 0.29.0

package/templates/apps/frontend-cms/src/globals.css

@@ -0,0 +1,105 @@
+/* Plain CSS — no Tailwind, so there's no @source scanner to configure. */
+:root {
+  --bg: #ffffff;
+  --fg: #0a0a0a;
+  --muted: #6b7280;
+  --accent: #4f46e5;
+  --danger: #dc2626;
+  --border: #e5e7eb;
+  --panel: #f9fafb;
+}
+:root.dark {
+  --bg: #0a0a0a;
+  --fg: #fafafa;
+  --muted: #9ca3af;
+  --accent: #818cf8;
+  --danger: #f87171;
+  --border: #1f2937;
+  --panel: #111827;
+}
+
+* { box-sizing: border-box; }
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+  line-height: 1.55;
+}
+a { color: inherit; }
+.muted { color: var(--muted); }
+.spacer { flex: 1; }
+
+/* Buttons + inputs */
+.btn {
+  display: inline-block; cursor: pointer; border: 0; border-radius: 8px;
+  background: var(--accent); color: #fff; padding: 0.55rem 1rem;
+  font: inherit; font-weight: 600; text-decoration: none;
+}
+.btn:disabled { opacity: 0.6; cursor: default; }
+.btn.ghost { background: transparent; color: var(--accent); border: 1px solid var(--border); }
+.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
+input {
+  font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--border);
+  border-radius: 8px; background: var(--bg); color: var(--fg); min-width: 0;
+}
+.error-text { color: var(--danger); }
+
+/* Marketing */
+.marketing header {
+  display: flex; align-items: center; gap: 1rem;
+  padding: 1rem 1.5rem; border-bottom: 1px solid var(--border);
+}
+.marketing .brand { font-weight: 700; text-decoration: none; }
+.hero { max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem; }
+.hero h1 { margin: 0 0 0.75rem; }
+.auth-form { display: flex; flex-direction: column; gap: 0.85rem; max-width: 22rem; margin-top: 1.25rem; }
+.auth-form label { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.9rem; }
+
+/* Dashboard shell */
+.dash { display: grid; grid-template-columns: 15rem 1fr; min-height: 100vh; }
+.dash aside { border-right: 1px solid var(--border); padding: 1.25rem; background: var(--panel); }
+.dash aside .brand { font-weight: 700; margin-bottom: 1rem; }
+.dash nav { display: flex; flex-direction: column; gap: 0.5rem; }
+.dash nav a { text-decoration: none; color: var(--muted); padding: 0.35rem 0; }
+.dash nav a[aria-current="page"] { color: var(--fg); font-weight: 600; }
+.dash main { padding: 1.5rem 2rem; }
+.topbar { display: flex; align-items: center; margin-bottom: 1rem; }
+@media (max-width: 40rem) { .dash { grid-template-columns: 1fr; } .dash aside { border-right: 0; border-bottom: 1px solid var(--border); } }
+
+/* Bits */
+.row { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-top: 0.5rem; }
+.empty { color: var(--muted); margin-top: 1.5rem; }
+.cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.75rem; }
+.card { border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1rem; background: var(--panel); }
+.card .value { font-weight: 600; }
+.card .label { color: var(--muted); font-size: 0.85rem; margin-top: 0.2rem; }
+.paywall { border: 1px solid var(--accent); border-radius: 12px; padding: 1rem 1.25rem; margin-top: 1.25rem; background: color-mix(in oklab, var(--accent) 8%, transparent); }
+.paywall p { margin: 0.35rem 0 0.75rem; }
+.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.5rem; margin-top: 1rem; }
+.facts dt { color: var(--muted); }
+.facts dd { margin: 0; font-weight: 600; }
+.rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
+.rows li { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--border); border-radius: 8px; padding: 0.6rem 0.9rem; background: var(--panel); }
+.tag { font-size: 0.8rem; color: var(--muted); border: 1px solid var(--border); border-radius: 999px; padding: 0.05rem 0.55rem; }
+code { background: color-mix(in oklab, var(--fg) 8%, transparent); padding: 0.1em 0.35em; border-radius: 4px; }
+
+/* CMS editor shell */
+.cms-top { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 1.5rem; border-bottom: 1px solid var(--border); }
+.cms-top .brand { font-weight: 700; }
+.cms-grid { display: grid; grid-template-columns: 22rem 1fr; gap: 1.5rem; padding: 1.5rem; align-items: start; }
+.cms-main { padding: 2rem 1.5rem; }
+.cms-types { display: flex; flex-wrap: wrap; gap: 0.4rem; }
+.chip { cursor: pointer; border: 1px solid var(--border); background: var(--panel); color: var(--fg); border-radius: 999px; padding: 0.25rem 0.7rem; font: inherit; }
+.chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
+.label { color: var(--muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
+.cms-list .rows li { gap: 0.5rem; }
+.cms-list .rows .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cms-editor form [data-cms-form] { display: flex; flex-direction: column; gap: 0.75rem; }
+.cms-editor [data-cms-field] { display: flex; flex-direction: column; gap: 0.25rem; }
+.cms-editor [data-cms-field] label { color: var(--muted); font-size: 0.85rem; }
+.cms-editor input, .cms-editor textarea, .cms-editor select { font: inherit; padding: 0.5rem 0.65rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--fg); width: 100%; }
+.cms-editor textarea { min-height: 6rem; }
+.violations { color: var(--danger); list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: 0.9rem; }
+.ok { color: var(--accent); margin-top: 0.75rem; }
+@media (max-width: 48rem) { .cms-grid { grid-template-columns: 1fr; } }

package/templates/apps/frontend-cms/src/globals.d.ts

@@ -0,0 +1,6 @@
+// Ambient declarations.
+//
+// `declare module '*.css'`: TypeScript with `moduleResolution: Bundler` rejects
+// a bare `import './globals.css'` unless the asset module is declared. Vite
+// resolves it at build time; the declaration is type-only.
+declare module '*.css'

package/templates/apps/frontend-cms/src/lib/api.ts

@@ -0,0 +1,58 @@
+// The shapes this editor reads off the api-cms backend, kept LOCAL so the pages
+// are self-contained. They mirror the api's descriptor outputs
+// (`content.types`, `content.list`, `content.saveDraft`).
+import type { FieldSchema } from '@voltro/cms/web'
+
+// The caller's resolved identity, from `session.me`. The SSR gate reads it.
+export interface Identity {
+  readonly type: string
+  readonly id: string | null
+  readonly tenantId: string | null
+}
+
+// One field of a content type, as `content.types` sends it (the wire subset of
+// @voltro/cms's FieldSchema — enough for <ContentForm> to pick a widget).
+export interface FieldDescriptor {
+  readonly name: string
+  readonly kind: string
+  readonly editorHint: string
+  readonly isOptional: boolean
+  readonly maxLength?: number
+  readonly literals?: ReadonlyArray<string>
+  readonly referenceType?: string
+}
+
+// One registered content type.
+export interface ContentTypeDescriptor {
+  readonly name: string
+  readonly displayName: string
+  readonly pluralName: string
+  readonly fields: ReadonlyArray<FieldDescriptor>
+  readonly columns: ReadonlyArray<string>
+}
+
+// A row in the editor's list (the `content.list` projection).
+export interface ContentRow {
+  readonly id: string
+  readonly status: string
+  readonly title?: string
+  readonly slug?: string
+  readonly updatedAt: string | Date
+}
+
+// `content.saveDraft` returns a typed RESULT union — success or per-field
+// violations the form annotates. NOT a thrown error.
+export type SaveResult =
+  | { readonly ok: true; readonly id: string; readonly status: string }
+  | { readonly ok: false; readonly violations: ReadonlyArray<{ field: string; rule: string; message: string }> }
+
+// Turn the wire field list into the `{ fields }` shape <ContentForm> reads. The
+// wire carries `kind`/`editorHint` as strings; ContentForm only reads
+// `editorHint` + `maxLength`/`literals`, so the cast at this boundary is safe.
+export const toContentFormType = (
+  type: ContentTypeDescriptor,
+): { fields: Record<string, FieldSchema> } => {
+  const fields: Record<string, FieldSchema> = {}
+  for (const f of type.fields) fields[f.name] = f as unknown as FieldSchema
+  return { fields }
+}

package/templates/apps/frontend-cms/src/locales/de.ts

@@ -0,0 +1,50 @@
+// German catalog. Mirrors every key in `en.ts` — `defineLocale<typeof en>()`
+// fails the build if a key is missing. Translate the prose only; keep ICU
+// placeholders (`{type}`) identical to en.ts.
+import { defineLocale } from '@voltro/i18n'
+import en from './en'
+
+export default defineLocale<typeof en>()({
+  'meta.login.title':  'Anmelden',
+  'meta.editor.title': 'Inhalte',
+
+  'auth.signIn.heading':  'Beim CMS anmelden',
+  'auth.signUp.heading':  'Redakteurskonto erstellen',
+  'auth.email':           'E-Mail',
+  'auth.password':        'Passwort',
+  'auth.signIn.submit':   'Anmelden',
+  'auth.signUp.submit':   'Konto erstellen',
+  'auth.toggle.toSignUp': 'Kein Konto? Erstelle eins',
+  'auth.toggle.toSignIn': 'Konto vorhanden? Anmelden',
+  'auth.pending':         'Bitte warten…',
+  'auth.error':           'Das hat nicht geklappt. Prüfe deine Angaben und versuche es erneut.',
+
+  'editor.brand':      'Inhalte',
+  'editor.signOut':    'Abmelden',
+  'lang.label':        'Sprache',
+
+  'editor.types.heading': 'Inhaltstypen',
+  'editor.list.heading':  '{type}',
+  'editor.list.empty':    'Noch keine Entwürfe — erstelle einen mit dem Formular rechts.',
+  'editor.row.edit':      'Bearbeiten',
+  'editor.row.publish':   'Veröffentlichen',
+  'editor.row.unpublish': 'Zurückziehen',
+  'editor.status.draft':     'Entwurf',
+  'editor.status.published': 'veröffentlicht',
+  'editor.status.archived':  'archiviert',
+
+  'editor.form.new':      'Neu: {type}',
+  'editor.form.editing':  'Bearbeiten',
+  'editor.form.save':     'Entwurf speichern',
+  'editor.form.saving':   'Wird gespeichert…',
+  'editor.form.cancel':   'Abbrechen',
+  'editor.form.saved':    'Entwurf gespeichert.',
+  'editor.form.invalid':  'Bitte korrigiere die markierten Felder.',
+  'editor.form.loading':  'Typen werden geladen…',
+
+  'error.heading':    'Etwas ist schiefgelaufen',
+  'error.retry':      'Erneut versuchen',
+  'notFound.heading': 'Nicht gefunden',
+  'notFound.body':    'Diese Seite existiert nicht.',
+  'notFound.back':    '← Zurück zu den Inhalten',
+})

package/templates/apps/frontend-cms/src/locales/en.ts

@@ -0,0 +1,55 @@
+// Base catalog — the source of truth for this app's UI strings. Every key here
+// MUST be mirrored in `de.ts`; `defineLocale<typeof en>()` enforces that parity
+// at build time. Messages use ICU: `{name}` placeholders + `<code>…</code>` tags.
+import { defineCatalog } from '@voltro/i18n'
+
+export default defineCatalog({
+  // Browser tab titles — locale-aware via each page's `meta({ locale })`.
+  'meta.login.title':  'Sign in',
+  'meta.editor.title': 'Content',
+
+  // ---- Auth form (/login) ----
+  'auth.signIn.heading':  'Sign in to the CMS',
+  'auth.signUp.heading':  'Create an editor account',
+  'auth.email':           'Email',
+  'auth.password':        'Password',
+  'auth.signIn.submit':   'Sign in',
+  'auth.signUp.submit':   'Create account',
+  'auth.toggle.toSignUp': 'No account? Create one',
+  'auth.toggle.toSignIn': 'Have an account? Sign in',
+  'auth.pending':         'Please wait…',
+  'auth.error':           'That didn’t work. Check your details and try again.',
+
+  // ---- Editor shell ----
+  'editor.brand':      'Content',
+  'editor.signOut':    'Sign out',
+  'lang.label':        'Language',
+
+  // ---- Type list + rows ----
+  'editor.types.heading': 'Content types',
+  'editor.list.heading':  '{type}',
+  'editor.list.empty':    'No drafts yet — create one with the form on the right.',
+  'editor.row.edit':      'Edit',
+  'editor.row.publish':   'Publish',
+  'editor.row.unpublish': 'Unpublish',
+  'editor.status.draft':     'draft',
+  'editor.status.published': 'published',
+  'editor.status.archived':  'archived',
+
+  // ---- Editing form ----
+  'editor.form.new':      'New {type}',
+  'editor.form.editing':  'Editing',
+  'editor.form.save':     'Save draft',
+  'editor.form.saving':   'Saving…',
+  'editor.form.cancel':   'Cancel',
+  'editor.form.saved':    'Draft saved.',
+  'editor.form.invalid':  'Please fix the highlighted fields.',
+  'editor.form.loading':  'Loading types…',
+
+  // ---- Scoped fallbacks ----
+  'error.heading':    'Something went wrong',
+  'error.retry':      'Try again',
+  'notFound.heading': 'Not found',
+  'notFound.body':    'That page doesn’t exist.',
+  'notFound.back':    '← Back to content',
+} as const)

package/templates/apps/frontend-cms/src/locales/index.ts

@@ -0,0 +1,14 @@
+// Catalog lookup OUTSIDE React — for a page's `meta({ locale })` locale-aware
+// <title>. This app is cookie-i18n (no `/<locale>` URL prefix), so @voltro/web
+// hands `meta` the active locale from the `voltro:lang` cookie. Inside React use
+// `<T>` / `useT()` via the framework's auto-wired <I18nProvider> instead.
+import en from './en'
+import de from './de'
+
+// Both catalogs share `en`'s keys (defineLocale enforces the mirror), so a
+// known-key lookup returns `string` — which is what `PageMeta.title` requires
+// under exactOptionalPropertyTypes.
+export type Messages = Record<keyof typeof en, string>
+
+export const getCatalog = (locale?: string): Messages =>
+  (locale === 'de' ? de : en) as Messages

package/templates/apps/frontend-cms/src/pages/(app)/error.tsx

@@ -0,0 +1,18 @@
+// Error boundary scoped to the editor subtree. A render error (or a loader
+// rejection that ISN'T a RedirectError / NotFoundError) bubbles here. `reset`
+// re-runs the failed segment.
+import type { ReactNode } from 'react'
+import type { ErrorBoundaryProps } from '@voltro/web'
+import { T } from '@voltro/i18n'
+
+export default function EditorError({ error, reset }: ErrorBoundaryProps): ReactNode {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1><T id="error.heading" /></h1>
+      <p className="muted">{String(error)}</p>
+      <p style={{ marginTop: '1rem' }}>
+        <button type="button" className="btn" onClick={reset}><T id="error.retry" /></button>
+      </p>
+    </main>
+  )
+}

package/templates/apps/frontend-cms/src/pages/(app)/layout.test.tsx

@@ -0,0 +1,31 @@
+// The editor auth GATE, tested at the loader. Server-side (a `query` fn is
+// present) it asks the api's `session.me`: an anonymous identity must throw
+// RedirectError to /login; a `user` identity resolves with the tenant. On a
+// client navigation (`query` undefined) it resolves permissively.
+
+import { describe, expect, test, vi } from 'vitest'
+import { RedirectError } from '@voltro/web'
+import { loader } from './layout'
+import type { Identity } from '../../lib/api'
+
+const queryReturning = (identity: Identity) =>
+  vi.fn(async (_tag: string, _input: unknown) => identity as unknown)
+
+describe('editor gate — loader', () => {
+  test('redirects an anonymous caller to /login', async () => {
+    const query = queryReturning({ type: 'anonymous', id: null, tenantId: null })
+    await expect(loader({ query } as never)).rejects.toBeInstanceOf(RedirectError)
+    expect(query).toHaveBeenCalledWith('session.me', {})
+  })
+
+  test('lets a signed-in user through and returns the tenant', async () => {
+    const query = queryReturning({ type: 'user', id: 'u_1', tenantId: 'acme' })
+    const data = await loader({ query } as never)
+    expect(data).toEqual({ tenantId: 'acme' })
+  })
+
+  test('client navigation (no server query fn) resolves without re-gating', async () => {
+    const data = await loader({ query: undefined } as never)
+    expect(data).toEqual({ tenantId: null })
+  })
+})

package/templates/apps/frontend-cms/src/pages/(app)/layout.tsx

@@ -0,0 +1,62 @@
+// The editor shell — and the AUTH GATE. This layout wraps every page in the
+// silent `(app)` group (URLs `/`), and its `loader` runs server-side BEFORE the
+// pages render: it asks the api who the caller is (`session.me`) and throws
+// RedirectError to /login for anyone not signed in. The pages under here are
+// `renderMode: 'ssr'` precisely so this runs per request.
+import type { ReactNode } from 'react'
+import { RedirectError, useLoaderData, type LoaderFn } from '@voltro/web'
+import { T, useLocale, useT } from '@voltro/i18n'
+import { LocaleSwitcher } from '@voltro/ui-shadcn'
+import type { Identity } from '../../lib/api'
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'Deutsch' },
+]
+
+interface AppData {
+  readonly tenantId: string | null
+}
+
+export const loader: LoaderFn<AppData> = async ({ query }) => {
+  // `query` is present ONLY server-side (the SSR full-page load). There, ask the
+  // api's `session.me` — it forwards the request's session cookie — and bounce
+  // an anonymous caller to /login.
+  if (query) {
+    const me = await query<Identity>('session.me', {})
+    if (me.type !== 'user') {
+      throw new RedirectError('/login?from=/')
+    }
+    return { tenantId: me.tenantId }
+  }
+  // Client navigation: the entry load already gated; every rpc is independently
+  // session-authed on the server (the HttpOnly cookie isn't readable in JS).
+  return { tenantId: null }
+}
+
+export default function AppLayout({ children }: { readonly children: ReactNode }): ReactNode {
+  useLoaderData<AppData>()
+  const locale = useLocale()
+  const langLabel = useT('lang.label')
+
+  const signOut = (): void => {
+    void fetch('/auth/csrf')
+      .then((r) => r.json() as Promise<{ csrfToken: string }>)
+      .then((c) =>
+        fetch('/auth/sign-out', { method: 'POST', headers: { 'x-csrf-token': c.csrfToken } }),
+      )
+      .finally(() => window.location.assign('/login'))
+  }
+
+  return (
+    <div className="cms">
+      <header className="cms-top">
+        <span className="brand"><T id="editor.brand" /></span>
+        <span className="spacer" />
+        <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
+        <button type="button" className="link" onClick={signOut}><T id="editor.signOut" /></button>
+      </header>
+      {children}
+    </div>
+  )
+}

package/templates/apps/frontend-cms/src/pages/(app)/not-found.tsx

@@ -0,0 +1,14 @@
+// Scoped 404 for the editor subtree. Fires when a URL under the group matches no
+// page, and when a loader throws NotFoundError.
+import type { ReactNode } from 'react'
+import { T } from '@voltro/i18n'
+
+export default function EditorNotFound(): ReactNode {
+  return (
+    <main style={{ padding: '2rem' }}>
+      <h1><T id="notFound.heading" /></h1>
+      <p className="muted"><T id="notFound.body" /></p>
+      <p style={{ marginTop: '1rem' }}><a href="/"><T id="notFound.back" /></a></p>
+    </main>
+  )
+}

package/templates/apps/frontend-cms/src/pages/(app)/page.test.tsx

@@ -0,0 +1,110 @@
+// @vitest-environment jsdom
+//
+// The editor page. We mock `@voltro/client` (content.types fetch, the live list,
+// the save mutation) and drive it: after the types load the page renders a type
+// chip + an auto-generated <ContentForm> (real, from @voltro/cms/web), and a
+// save that comes back `{ ok: false, violations }` annotates the form inline
+// rather than throwing.
+
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { act, createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { I18nProvider } from '@voltro/i18n'
+import enCatalog from '../../locales/en'
+
+const blogType = {
+  name: 'blogPost', displayName: 'Blog post', pluralName: 'Blog posts',
+  columns: ['title', 'slug', 'status'],
+  fields: [
+    { name: 'title', kind: 'string', editorHint: 'text', isOptional: false },
+    { name: 'body', kind: 'richText', editorHint: 'richText', isOptional: false },
+  ],
+}
+
+const typesRun = vi.fn<() => Promise<{ types: unknown }>>()
+const getRun = vi.fn<() => Promise<{ row: unknown }>>()
+const saveMutate = vi.fn<(input: unknown) => Promise<unknown>>()
+const subData = vi.fn<() => { data: unknown }>()
+
+vi.mock('@voltro/client', () => ({
+  useAction: (_api: string, tag: string) => ({
+    run: tag === 'content.types' ? typesRun : getRun,
+    pending: false,
+  }),
+  useMutation: (_api: string, tag: string) => ({
+    mutate: tag === 'content.saveDraft' ? saveMutate : vi.fn().mockResolvedValue({ ok: true }),
+    pending: false,
+  }),
+  useSubscription: () => subData(),
+}))
+
+const { default: Editor, meta, renderMode } = await import('./page')
+
+;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+
+let container: HTMLDivElement
+let root: Root
+
+const render = (node: ReactNode): void => {
+  container = document.createElement('div')
+  document.body.appendChild(container)
+  act(() => {
+    root = createRoot(container)
+    root.render(
+      createElement(I18nProvider, { locale: 'en', messages: enCatalog, defaultLocale: 'en', children: node }),
+    )
+  })
+}
+
+// Flush the mount-effect fetch (typesRun.then → setState) + its re-render.
+const flush = async (): Promise<void> => {
+  await act(async () => { await Promise.resolve(); await Promise.resolve() })
+}
+
+beforeEach(() => {
+  typesRun.mockReset(); typesRun.mockResolvedValue({ types: [blogType] })
+  getRun.mockReset(); getRun.mockResolvedValue({ row: null })
+  saveMutate.mockReset(); saveMutate.mockResolvedValue({ ok: true, id: 'blogPost_1', status: 'draft' })
+  subData.mockReset(); subData.mockReturnValue({ data: [] })
+})
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('editor — config', () => {
+  test('is an SSR page titled Content (so the parent gate runs per request)', () => {
+    expect(renderMode).toBe('ssr')
+    expect(meta({ locale: 'en' }).title).toBe('Content')
+  })
+})
+
+describe('editor — render', () => {
+  test('after the types load, renders the type chip and an auto-generated form', async () => {
+    render(createElement(Editor))
+    await flush()
+    expect(typesRun).toHaveBeenCalled()
+    expect(container.textContent).toContain('Blog post')
+    // <ContentForm> renders one [data-cms-field] per declared field.
+    expect(container.querySelectorAll('[data-cms-field]').length).toBe(2)
+    expect(container.querySelector('[data-cms-field="title"]')).not.toBeNull()
+  })
+})
+
+describe('editor — validation', () => {
+  test('a save that returns { ok: false, violations } annotates the form', async () => {
+    saveMutate.mockResolvedValue({ ok: false, violations: [{ field: 'title', rule: 'required', message: 'missing required field' }] })
+    render(createElement(Editor))
+    await flush()
+    const form = container.querySelector('form')!
+    await act(async () => {
+      form.dispatchEvent(new Event('submit', { bubbles: true, cancelable: true }))
+      await Promise.resolve(); await Promise.resolve()
+    })
+    expect(saveMutate).toHaveBeenCalled()
+    expect(container.querySelector('.violations')).not.toBeNull()
+    expect(container.textContent).toContain('missing required field')
+  })
+})