@voltro/cli 0.28.0 → 0.30.0

package/templates/apps/frontend-auth/src/pages/verify/page.tsx

@@ -0,0 +1,50 @@
+// Verify — URL `/verify?token=…`. The landing the magic-link / email-verification
+// mail points at. On mount it consumes the token via POST
+// /auth/magic-link/callback: a valid token signs the user in (session cookie
+// set) and we redirect home; an invalid/expired one shows a retry path. The same
+// page doubles as the email-verification confirmation.
+import type { ReactNode } from 'react'
+import { useEffect, useState } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T } from '@voltro/i18n'
+import { AuthShell } from '../../components/AuthShell'
+import { AUTH_HOME } from '../../config'
+import { postAuth } from '../../lib/auth'
+import { nextFromLocation, tokenFromLocation } from '../../lib/redirect'
+import { getCatalog } from '../../locales'
+
+export const renderMode = 'static' as const
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.verify.title'],
+})
+
+type State = 'pending' | 'success' | 'failed' | 'noToken'
+
+export default function Verify(): ReactNode {
+  const [state, setState] = useState<State>('pending')
+
+  useEffect(() => {
+    const token = tokenFromLocation()
+    if (!token) { setState('noToken'); return }
+    void postAuth('/auth/magic-link/callback', { token })
+      .then((res) => {
+        if (res.ok) {
+          setState('success')
+          window.location.assign(nextFromLocation(AUTH_HOME))
+        } else {
+          setState('failed')
+        }
+      })
+      .catch(() => setState('failed'))
+  }, [])
+
+  return (
+    <AuthShell titleId="verify.title" footer={state !== 'pending' ? <a href="/login"><T id="verify.toLogin" /></a> : null}>
+      {state === 'pending' ? <p className="muted" role="status"><T id="verify.pending" /></p> : null}
+      {state === 'success' ? <p className="ok" role="status"><T id="verify.success" /></p> : null}
+      {state === 'failed' ? <p className="error-text" role="alert"><T id="verify.failed" /></p> : null}
+      {state === 'noToken' ? <p className="error-text" role="alert"><T id="verify.noToken" /></p> : null}
+    </AuthShell>
+  )
+}

package/templates/apps/frontend-auth/template.json

@@ -0,0 +1,6 @@
+{
+  "id": "frontend-auth",
+  "kind": "web",
+  "summary": "A drop-in auth surface that mounts in ANY project: sign-in, sign-up, forgot/reset-password, magic-link request + consume (email verification). Every page is a real form POSTing to the sibling api's /auth/* routes (@voltro/plugin-auth) with CSRF, plus an open-redirect-guarded `next=`. Bilingual (en/de). Pair with the api-auth backend; the standalone-subdomain-SSO layout is an opt-in note.",
+  "tags": ["web", "frontend", "auth", "login", "signup", "password-reset", "magic-link", "ssr", "csrf"]
+}

package/templates/apps/frontend-auth/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "dist"]
+}

package/templates/apps/frontend-blank/app.config.ts

@@ -22,7 +22,7 @@ export default {
   // <I18nProvider> from these codes and loads the matching
   // `src/locales/<code>.ts` catalog — so `<T id="…" />` / `useT()` /
   // `useLocale()` work app-wide with no manual setup. The <LocaleSwitcher>
-  // in the layout writes the `voltro:lang` cookie + reloads. Grow the app to
+  // in the layout writes the `voltro:locale` cookie + reloads. Grow the app to
   // more languages by adding a code here + a `src/locales/<code>.ts`.
   locales:       ['en', 'de'] as const,
   defaultLocale: 'en'         as const,

package/templates/apps/frontend-blank/package.json

@@ -12,17 +12,17 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@voltro/cli": "0.28.0",
-    "@voltro/client": "0.28.0",
-    "@voltro/env": "0.28.0",
-    "@voltro/i18n": "0.28.0",
-    "@voltro/ui-shadcn": "0.28.0",
-    "@voltro/web": "0.28.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.28.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",

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

@@ -1,6 +1,6 @@
 // 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,
+// hands `meta` the active locale from the `voltro:locale` cookie. Inside React,
 // use `<T>` / `useT()` via the framework's auto-wired <I18nProvider> instead.
 
 import en from './en'

package/templates/apps/frontend-blank/src/pages/layout.tsx

@@ -7,7 +7,7 @@
 // to control the dark class.
 //
 // The app is bilingual (see `locales` in app.config.ts): <LocaleSwitcher>
-// writes the `voltro:lang` cookie + reloads so the framework re-renders in
+// writes the `voltro:locale` cookie + reloads so the framework re-renders in
 // the chosen language.
 
 import type { ReactNode } from 'react'

package/templates/apps/frontend-blank/src/pages/page.tsx

@@ -10,7 +10,7 @@ import { T } from '@voltro/i18n'
 import { getCatalog } from '../locales'
 
 // Locale-aware tab title: @voltro/web resolves meta({ locale }) from the
-// active locale (the `voltro:lang` cookie in this cookie-i18n app).
+// active locale (the `voltro:locale` cookie in this cookie-i18n app).
 export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
   title: getCatalog(locale)['meta.home.title'],
 })

package/templates/apps/frontend-cms/README.md

@@ -0,0 +1,47 @@
+# {{capProjectName}} {{capAppName}} — CMS editor
+
+The editor UI for the **api-cms** backend. It signs editors in, gates the app
+behind that session, and generates a content form per type by INTROSPECTING the
+api — no content-type shape is hardcoded in the browser. Bilingual (en/de).
+
+```bash
+voltro init my-cms --api=api-cms --web=frontend-cms
+```
+
+## How it works
+
+- **`/login`** — a static sign-in page that POSTs to the api's `/auth/*` routes
+  (CSRF token first), which set the HttpOnly session cookie.
+- **`(app)/layout.tsx`** — the SSR auth gate. Its loader asks the api's
+  `session.me` server-side and RedirectErrors an anonymous visitor to `/login`.
+- **`(app)/page.tsx`** — the editor. It fetches the registered content types
+  (`content.types`) and renders `<ContentForm>` (from `@voltro/cms/web`) for the
+  selected type — the widget per field is driven entirely by the field's
+  `editorHint`. It lists a type's drafts live (`content.list`), saves them
+  (`content.saveDraft` — validation comes back as `{ ok: false, violations }` and
+  is shown inline), and publishes / unpublishes.
+
+Adding a content type on the api needs **zero** changes here — it appears as a
+new tab automatically.
+
+## Files
+
+```
+app.config.ts                     web app; apis.cms → @{{projectName}}/api
+src/pages/
+  layout.tsx                      root layout (stylesheet)
+  login/page.tsx(.test)           sign-in / sign-up form (POST /auth/*)
+  (app)/layout.tsx(.test)         editor shell + SSR auth gate (session.me)
+  (app)/page.tsx(.test)           the introspecting editor (<ContentForm>)
+  (app)/error.tsx · not-found.tsx scoped boundaries
+src/lib/api.ts                    wire shapes + toContentFormType()
+src/locales/{en,de}.ts            bilingual catalogs (parity-enforced)
+```
+
+## Customising
+
+- **Rich text** — the default `richText` widget is a textarea placeholder. Swap a
+  real editor (e.g. TipTap) via `<ContentForm widgets={{ richText: MyEditor }} />`
+  without forking the renderer.
+- **Media** — a `Schema.Media()` field renders a placeholder; wire an upload with
+  `@voltro/plugin-storage` + a custom `media` widget.

package/templates/apps/frontend-cms/app.config.ts

@@ -0,0 +1,37 @@
+// Web app for the {{projectName}} project — the CMS EDITOR that drives the
+// sibling `api-cms` backend.
+//
+// Two areas:
+//   - `/login` — a static sign-in page that POSTs to the api's `/auth/*` routes.
+//   - The authed editor in the SILENT route group `src/pages/(app)/`. Its
+//     `layout.tsx` loader is the auth gate: server-side it asks the api's
+//     `session.me` and RedirectErrors an anonymous visitor to /login. Its pages
+//     are `renderMode: 'ssr'` so the gate runs per request.
+//
+// The editor fetches the registered content types (`content.types`) and renders
+// a `<ContentForm>` per type from @voltro/cms — no content-type file is imported
+// into the browser bundle.
+import { defineEnv, envVar } from '@voltro/env'
+
+// Public, build-time env (baked into the bundle). Never a secret in the browser.
+export const env = defineEnv({
+  VOLTRO_PUBLIC_APP_NAME: envVar.string({ access: 'public', default: '{{capProjectName}} CMS' }),
+})
+
+export default {
+  type: 'web' as const,
+  name: '{{capProjectName}}{{capAppName}}',
+  port: {{port}},
+  theme: 'system' as const,
+  env,
+  // Bilingual by default (cookie-driven <I18nProvider>, SSR too). Add a code +
+  // `src/locales/<code>.ts` to grow the app.
+  locales:       ['en', 'de'] as const,
+  defaultLocale: 'en'         as const,
+  // The api this editor consumes. The lookup key ('cms') is what the hooks pass:
+  // `useAction('cms', 'content.types')`, `useSubscription('cms', 'content.list')`.
+  // Codegen pulls its typed rpc surface (content.* + the plugin's /auth).
+  apis: {
+    cms: { package: '@{{projectName}}/api' },
+  },
+}

package/templates/apps/frontend-cms/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@{{projectName}}/{{appName}}",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "voltro dev .",
+    "lint": "voltro doctor .",
+    "build": "voltro build .",
+    "start": "voltro start .",
+    "typecheck": "tsc --noEmit",
+    "test": "voltro test"
+  },
+  "dependencies": {
+    "@{{projectName}}/api": "0.30.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/cms": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/ui-shadcn": "0.30.0",
+    "@voltro/web": "0.30.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@voltro/devtools": "0.30.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
+  }
+}

package/templates/apps/frontend-cms/src/config.ts

@@ -0,0 +1,8 @@
+// The brand name shown in the marketing header + dashboard sidebar.
+//
+// A plain constant — not `publicEnv` — so the template typechecks BEFORE
+// `voltro dev` generates the env types. `VOLTRO_PUBLIC_APP_NAME` is still
+// declared in app.config.ts (validated + in the env manifest); to read it typed
+// instead, after one `voltro dev` swap this for
+// `publicEnv.VOLTRO_PUBLIC_APP_NAME` from '@voltro/env/public'.
+export const APP_NAME = '{{capProjectName}}'

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:locale` 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 })
+  })
+})