@voltro/cli 0.29.0 → 0.30.0

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

@@ -0,0 +1,38 @@
+// Web app for the {{projectName}} project. Read by `voltro dev` / `voltro start`.
+//
+// This is the COLLABORATIVE-EDITING frontend — a textarea bound to a
+// `crdtText()` document body over the framework's reactive loop. Open it in two
+// browser tabs and type in both: the edits CONVERGE (no last-write-wins loser)
+// because the api's server-authoritative CRDT merge folds every update into the
+// stored state, then the reactive engine broadcasts the merged row back. Zero
+// infra — the merge + broadcast are in-process on a single `voltro dev`.
+//
+// `port` is allocated by `voltro create-project` / `voltro add-app` from the
+// project's portRange (in project.json), hard-pinned per app.
+import { defineEnv, envVar } from '@voltro/env'
+
+// Typed PUBLIC environment — public vars are validated + baked into the browser
+// bundle at build time and read via `publicEnv` from '@voltro/env/public'.
+// NEVER put a secret here (it ships to every visitor).
+export const env = defineEnv({
+  VOLTRO_PUBLIC_APP_NAME: envVar.string({ access: 'public', default: '{{capProjectName}}' }),
+})
+
+export default {
+  type: 'web' as const,
+  name: '{{capProjectName}}{{capAppName}}',
+  port: {{port}},
+  env,
+  // Bilingual by default — the framework auto-wires a cookie-driven
+  // <I18nProvider> from these codes and loads the matching
+  // `src/locales/<code>.ts` catalog, so `<T id="…" />` / `useT()` work app-wide.
+  locales:       ['en', 'de'] as const,
+  defaultLocale: 'en'         as const,
+  // The api this frontend consumes. The NAME ('app') is the lookup key the
+  // hooks use — `useSubscription('app', 'documents.list')`, `useMutation('app',
+  // 'documents.setBody')`. The `package` resolves the sibling api in this
+  // project (scaffold it with `--api=api-collab`).
+  apis: {
+    app: { package: '@{{projectName}}/api' },
+  },
+}

package/templates/apps/frontend-collab/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 .",
+    "test": "voltro test",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@{{projectName}}/api": "0.30.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/local-first": "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-collab/src/locales/de.ts

@@ -0,0 +1,29 @@
+// German catalog. Mirrors every key in `en.ts` — `defineLocale<typeof en>()`
+// fails the build if a key is missing or misspelled. Translate the prose only;
+// keep ICU placeholders (`{tenant}`, `{revision}`, `{title}`, `{error}`) and
+// rich tags (`<code>`, `<strong>`) identical to `en.ts`.
+
+import { defineLocale } from '@voltro/i18n'
+import en from './en'
+
+export default defineLocale<typeof en>()({
+  'meta.editor.title': 'Kollaborativer Editor',
+
+  'nav.editor':  'Editor',
+  'nav.tagline': 'Local-First · CRDT · reaktiv',
+  'lang.label':  'Sprache',
+
+  'editor.heading':       'Kollaborativer Editor',
+  'editor.intro':         'Öffne diese Seite in <strong>zwei Browser-Tabs</strong> und tippe in beiden. Die Änderungen <strong>konvergieren</strong> — kein Last-Write-Wins-Verlierer — weil die API jedes Update serverseitig in den gemeinsamen <code>crdtText()</code>-Body mergt und live zurücksendet.',
+  'editor.status.tenant': 'Mandant <code>{tenant}</code> · Revision {revision}',
+  'editor.status.saving': ' · synchronisiere…',
+  'editor.status.loading': ' · lädt…',
+  'editor.error':         'Subscription-Fehler — läuft die API? {error}',
+  'editor.empty.heading': 'Noch kein Dokument',
+  'editor.empty.body':    'Erstelle eines, um kollaborativ zu bearbeiten.',
+  'editor.create':        'Dokument erstellen',
+  'editor.creating':      'Wird erstellt…',
+  'editor.docLabel':      'Bearbeite <strong>{title}</strong>',
+  'editor.placeholder':   'Fang an zu tippen — jeder Tastendruck synchronisiert und mergt.',
+  'editor.hint':          'Tipp: Öffne einen zweiten Tab und tippe gleichzeitig. Beide Änderungen bleiben erhalten.',
+})

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

@@ -0,0 +1,31 @@
+// 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, so a missing translation fails typecheck rather than silently
+// falling back.
+
+import { defineCatalog } from '@voltro/i18n'
+
+export default defineCatalog({
+  // Browser tab title — locale-aware via the page's `meta({ locale })`.
+  'meta.editor.title': 'Collaborative editor',
+
+  // ---- Layout shell (pages/layout.tsx) ----
+  'nav.editor':  'Editor',
+  'nav.tagline': 'local-first · CRDT · reactive',
+  'lang.label':  'Language',
+
+  // ---- Editor page (pages/page.tsx) ----
+  'editor.heading':       'Collaborative editor',
+  'editor.intro':         'Open this page in <strong>two browser tabs</strong> and type in both. Edits <strong>converge</strong> — no last-write-wins loser — because the api merges every update into the shared <code>crdtText()</code> body server-side, then broadcasts it back live.',
+  'editor.status.tenant': 'Tenant <code>{tenant}</code> · revision {revision}',
+  'editor.status.saving': ' · syncing…',
+  'editor.status.loading': ' · loading…',
+  'editor.error':         'subscription error — is the api running? {error}',
+  'editor.empty.heading': 'No document yet',
+  'editor.empty.body':    'Create one to start editing collaboratively.',
+  'editor.create':        'Create document',
+  'editor.creating':      'Creating…',
+  'editor.docLabel':      'Editing <strong>{title}</strong>',
+  'editor.placeholder':   'Start typing — every keystroke syncs and merges.',
+  'editor.hint':          'Tip: open a second tab and type at the same time. Both edits survive.',
+} as const)

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

@@ -0,0 +1,15 @@
+// Catalog lookup OUTSIDE React — for the 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-collab/src/pages/layout.tsx

@@ -0,0 +1,39 @@
+// Root layout that wraps every page in this app. `<html>` / `<head>` /
+// `<body>` are owned by the framework's index.html shell — don't render them
+// here. Use a page's `meta` export for title, and `theme` in app.config.ts for
+// the dark class.
+//
+// The app is bilingual: nav labels come from the catalog via `<T>`, and
+// <LocaleSwitcher> writes the `voltro:locale` cookie + reloads so the framework
+// re-renders in the chosen language.
+
+import type { ReactNode } from 'react'
+import { T, useLocale, useT } from '@voltro/i18n'
+import { LocaleSwitcher } from '@voltro/ui-shadcn'
+
+interface LayoutProps {
+  readonly children: ReactNode
+}
+
+const LOCALES = [
+  { code: 'en', label: 'English' },
+  { code: 'de', label: 'Deutsch' },
+]
+
+export default function Layout({ children }: LayoutProps): ReactNode {
+  const locale = useLocale()
+  const langLabel = useT('lang.label')
+  return (
+    <div style={{ maxWidth: 720, margin: '0 auto', padding: '24px 16px', fontFamily: 'system-ui, sans-serif' }}>
+      <header style={{ display: 'flex', gap: 16, alignItems: 'baseline', marginBottom: 24 }}>
+        <strong style={{ fontSize: 16 }}>{{capProjectName}}</strong>
+        <nav style={{ display: 'flex', gap: 12, fontSize: 13 }}>
+          <a href="/"><T id="nav.editor" /></a>
+        </nav>
+        <span style={{ color: '#999', fontSize: 12, marginLeft: 'auto' }}><T id="nav.tagline" /></span>
+        <LocaleSwitcher locales={LOCALES} current={locale} ariaLabel={langLabel} />
+      </header>
+      <main>{children}</main>
+    </div>
+  )
+}

package/templates/apps/frontend-collab/src/pages/page.test.tsx

@@ -0,0 +1,150 @@
+// @vitest-environment jsdom
+//
+// `/` — the collaborative editor. It binds `useSubscription('app',
+// 'documents.list')` + two `useMutation`s ('documents.create',
+// 'documents.setBody') from @voltro/client, which we mock so the render is
+// deterministic. `@voltro/local-first` is NOT mocked — the editor's real local
+// CRDT handle decodes the seeded body and turns keystrokes into encoded updates,
+// which is the behaviour worth asserting.
+
+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 { crdtText } from '@voltro/local-first'
+import enCatalog from '../locales/en'
+
+interface SubState {
+  data: unknown
+  revision?: number
+  error?: unknown
+}
+
+const useSubscription = vi.fn<() => SubState>()
+const createMutate = vi.fn<(input: unknown) => Promise<unknown>>()
+const setBodyMutate = vi.fn<(input: unknown) => Promise<unknown>>()
+
+// useMutation is called once per tag — dispatch to the right mock by tag.
+const useMutation = vi.fn((_api: unknown, tag: unknown) =>
+  tag === 'documents.create'
+    ? { mutate: createMutate, pending: false, error: undefined, data: undefined }
+    : { mutate: setBodyMutate, pending: false, error: undefined, data: undefined },
+)
+
+vi.mock('@voltro/client', () => ({
+  useSubscription: (...a: unknown[]) => useSubscription(...(a as [])),
+  useMutation: (...a: unknown[]) => useMutation(...(a as Parameters<typeof useMutation>)),
+}))
+
+const { default: IndexPage } = 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 }),
+    )
+  })
+}
+
+const setTextarea = (el: HTMLTextAreaElement, value: string): void => {
+  const setter = Object.getOwnPropertyDescriptor(window.HTMLTextAreaElement.prototype, 'value')!.set!
+  act(() => {
+    setter.call(el, value)
+    el.dispatchEvent(new Event('input', { bubbles: true }))
+  })
+}
+
+// A real encoded CRDT body seeded with `text`, exactly what the subscription
+// streams for a document that already has content.
+const bodyWith = (text: string): Uint8Array => crdtText().insert(0, text).encode()
+
+const docRow = (over: Partial<{ id: string; title: string; body: Uint8Array | null }> = {}) => ({
+  id: over.id ?? 'doc_1',
+  title: over.title ?? 'Shared document',
+  body: over.body ?? null,
+  tenantId: 'acme',
+  createdAt: new Date(0),
+})
+
+beforeEach(() => {
+  useSubscription.mockReset()
+  createMutate.mockReset()
+  createMutate.mockResolvedValue(undefined)
+  setBodyMutate.mockReset()
+  setBodyMutate.mockResolvedValue(undefined)
+  useMutation.mockClear()
+})
+
+afterEach(() => {
+  if (root) act(() => root.unmount())
+  container?.remove()
+  document.body.innerHTML = ''
+})
+
+describe('collab editor — subscription states', () => {
+  test('shows the loading hint before the first snapshot (data undefined)', () => {
+    useSubscription.mockReturnValue({ data: undefined, revision: -1 })
+    render(createElement(IndexPage))
+    expect(container.textContent).toContain('loading…')
+    expect(container.querySelector('textarea')).toBeNull()
+  })
+
+  test('shows the empty state + create button once a snapshot arrives with no documents', () => {
+    useSubscription.mockReturnValue({ data: [], revision: 0 })
+    render(createElement(IndexPage))
+    expect(container.textContent).toContain('No document yet')
+    expect(container.querySelector('button')).not.toBeNull()
+    expect(container.querySelector('textarea')).toBeNull()
+  })
+
+  test('renders the error banner when the subscription errors', () => {
+    useSubscription.mockReturnValue({ data: undefined, error: 'boom', revision: -1 })
+    render(createElement(IndexPage))
+    expect(container.textContent).toContain('subscription error')
+    expect(container.textContent).toContain('boom')
+  })
+})
+
+describe('collab editor — create', () => {
+  test('clicking Create document calls documents.create with the tenant + a title', async () => {
+    useSubscription.mockReturnValue({ data: [], revision: 0 })
+    render(createElement(IndexPage))
+    const button = container.querySelector('button') as HTMLButtonElement
+    await act(async () => {
+      button.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    })
+    expect(createMutate).toHaveBeenCalledTimes(1)
+    expect(createMutate).toHaveBeenCalledWith({ tenantId: 'acme', title: 'Shared document' })
+  })
+})
+
+describe('collab editor — editing a document', () => {
+  test('binds the textarea to the decoded CRDT body', () => {
+    useSubscription.mockReturnValue({ data: [docRow({ body: bodyWith('Hello') })], revision: 3 })
+    render(createElement(IndexPage))
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement
+    expect(textarea).not.toBeNull()
+    expect(textarea.value).toBe('Hello')
+    expect(container.textContent).toContain('Shared document')
+  })
+
+  test('typing sends an encoded CRDT update via documents.setBody', () => {
+    useSubscription.mockReturnValue({ data: [docRow({ body: bodyWith('Hello') })], revision: 3 })
+    render(createElement(IndexPage))
+    const textarea = container.querySelector('textarea') as HTMLTextAreaElement
+    setTextarea(textarea, 'Hello!')
+
+    expect(setBodyMutate).toHaveBeenCalledTimes(1)
+    const arg = setBodyMutate.mock.calls[0]![0] as { id: string; update: unknown }
+    expect(arg.id).toBe('doc_1')
+    expect(arg.update).toBeInstanceOf(Uint8Array)
+  })
+})

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

@@ -0,0 +1,186 @@
+// `/` — the collaborative document editor. Auto-mapped from src/pages/page.tsx
+// by the framework's file-convention page discovery.
+//
+// THIS is local-first collaboration over the reactive loop. The api's
+// `documents` table has a `crdtText()` `body`; this page:
+//   1. `useSubscription('app','documents.list')` — streams the shared document
+//      (with its MERGED body) live over WebSocket,
+//   2. keeps a LOCAL CRDT handle (`@voltro/local-first`'s `crdtText()`) seeded
+//      from the server state — every keystroke applies a local insert/delete
+//      and sends the encoded update via `useMutation('app','documents.setBody')`,
+//   3. folds every incoming server body back into that handle.
+//
+// The convergence is authoritative and SERVER-SIDE: the api merges each update
+// into the stored state before broadcasting, so two tabs typing at once both
+// survive — no last-write-wins loser. Open this page in two tabs to see it.
+//
+// This is the app-level binding the docs describe as the SyncClient transport:
+// `push` = the setBody mutation, `onRemoteState` = the documents subscription.
+
+import { useMutation, useSubscription } from '@voltro/client'
+import { useEffect, useRef, useState, type ReactNode } from 'react'
+import type { PageMeta } from '@voltro/web'
+import { T, useTFn } from '@voltro/i18n'
+import { crdtText, emptyCrdtState, type CrdtState, type CrdtText } from '@voltro/local-first'
+import { getCatalog } from '../locales'
+
+export const meta = ({ locale }: { readonly locale: string }): PageMeta => ({
+  title: getCatalog(locale)['meta.editor.title'],
+})
+
+// The dev AuthMiddleware resolves the tenant from the `x-tenant` header,
+// defaulting to 'acme'; the `documents` table's `tenant()` mixin auto-scopes
+// reads/writes to it.
+const TENANT = 'acme'
+
+interface DocRow {
+  readonly id: string
+  readonly title: string
+  // The encoded CRDT state. The api declares `body` as
+  // `Schema.Uint8ArrayFromBase64`, so the rpc client hands it back as a
+  // `Uint8Array`; we still accept a raw base64 `string` defensively.
+  readonly body: Uint8Array | string | null
+  readonly tenantId: string
+  readonly createdAt: Date
+}
+
+const base64ToBytes = (b64: string): Uint8Array =>
+  Uint8Array.from(atob(b64), (ch) => ch.charCodeAt(0))
+
+// A null/absent body decodes to the empty document — the CRDT merge identity.
+const toState = (body: Uint8Array | string | null): CrdtState =>
+  body instanceof Uint8Array ? body : typeof body === 'string' ? base64ToBytes(body) : emptyCrdtState()
+
+// Turn a whole-string edit into a single contiguous CRDT insert/delete: the
+// common prefix + suffix are unchanged; the middle is what the user replaced.
+// Covers ordinary typing, deletion, and paste (one contiguous run).
+const applyDiff = (handle: CrdtText, prev: string, next: string): void => {
+  if (prev === next) return
+  let start = 0
+  const shorter = Math.min(prev.length, next.length)
+  while (start < shorter && prev[start] === next[start]) start += 1
+  let end = 0
+  while (
+    end < shorter - start &&
+    prev[prev.length - 1 - end] === next[next.length - 1 - end]
+  ) {
+    end += 1
+  }
+  const deleteLen = prev.length - start - end
+  const inserted = next.slice(start, next.length - end)
+  if (deleteLen > 0) handle.delete(start, deleteLen)
+  if (inserted.length > 0) handle.insert(start, inserted)
+}
+
+// One editor bound to ONE document. Remounted (via `key={doc.id}`) when the
+// bound document changes, so the local CRDT handle's lifecycle is scoped to it.
+const DocumentEditor = ({
+  doc,
+  saving,
+  onUpdate,
+}: {
+  readonly doc: DocRow
+  readonly saving: boolean
+  readonly onUpdate: (update: CrdtState) => void
+}): ReactNode => {
+  const t = useTFn()
+  // One local CRDT handle per mount, seeded from the current server state.
+  const handleRef = useRef<CrdtText | null>(null)
+  if (handleRef.current === null) handleRef.current = crdtText().merge(toState(doc.body))
+  const [text, setText] = useState<string>(() => handleRef.current!.toString())
+
+  // Fold every incoming server body into the local handle — remote edits appear
+  // and converge. Idempotent, so re-merging our own echoed update is a no-op.
+  const serverBody = doc.body
+  useEffect(() => {
+    const handle = handleRef.current!
+    handle.merge(toState(serverBody))
+    const merged = handle.toString()
+    setText((prev) => (prev === merged ? prev : merged))
+  }, [serverBody])
+
+  const handleChange = (next: string): void => {
+    const handle = handleRef.current!
+    applyDiff(handle, handle.toString(), next)
+    setText(handle.toString())
+    onUpdate(handle.encode()) // full encoded state; the server folds it in
+  }
+
+  return (
+    <section>
+      <p style={{ color: '#666', fontSize: 13, margin: '0 0 8px' }}>
+        <T id="editor.docLabel" values={{ title: doc.title, strong: (c: ReactNode) => <strong>{c}</strong> }} />
+        {saving ? <T id="editor.status.saving" /> : null}
+      </p>
+      <textarea
+        value={text}
+        onChange={(event) => handleChange(event.target.value)}
+        placeholder={t('editor.placeholder')}
+        rows={12}
+        style={{ width: '100%', padding: '10px 12px', fontSize: 14, fontFamily: 'ui-monospace, monospace', resize: 'vertical', boxSizing: 'border-box' }}
+      />
+      <p style={{ color: '#999', fontSize: 12, marginTop: 8 }}><T id="editor.hint" /></p>
+    </section>
+  )
+}
+
+const IndexPage = (): ReactNode => {
+  const { data, revision, error } = useSubscription<ReadonlyArray<DocRow>>('app', 'documents.list')
+  const create = useMutation<{ tenantId: string; title: string }>('app', 'documents.create')
+  const setBody = useMutation<{ id: string; update: CrdtState }>('app', 'documents.setBody')
+
+  const docs = data ?? []
+  const doc = docs[0]
+
+  const handleCreate = async (): Promise<void> => {
+    try {
+      await create.mutate({ tenantId: TENANT, title: 'Shared document' })
+    } catch (mutationError) {
+      console.error('documents.create failed:', mutationError)
+    }
+  }
+
+  const handleUpdate = (id: string) => (update: CrdtState): void => {
+    setBody.mutate({ id, update }).catch((mutationError) => {
+      console.error('documents.setBody failed:', mutationError)
+    })
+  }
+
+  return (
+    <div>
+      <h1 style={{ fontSize: 24, marginBottom: 4 }}><T id="editor.heading" /></h1>
+      <p style={{ color: '#444', marginTop: 0, fontSize: 14 }}>
+        <T
+          id="editor.intro"
+          values={{ strong: (c: ReactNode) => <strong>{c}</strong>, code: (c: ReactNode) => <code>{c}</code> }}
+        />
+      </p>
+      <p style={{ color: '#666', marginTop: 0, fontSize: 13 }}>
+        <T id="editor.status.tenant" values={{ tenant: TENANT, revision, code: (c: ReactNode) => <code>{c}</code> }} />
+        {data === undefined && error === undefined && <T id="editor.status.loading" />}
+      </p>
+
+      {error !== undefined && (
+        <p style={{ color: '#c00', fontSize: 13 }}>
+          <T id="editor.error" values={{ error: String(error) }} />
+        </p>
+      )}
+
+      {doc === undefined && data !== undefined ? (
+        <section style={{ border: '1px dashed #ccc', borderRadius: 8, padding: 24, textAlign: 'center' }}>
+          <h2 style={{ fontSize: 16, margin: '0 0 4px' }}><T id="editor.empty.heading" /></h2>
+          <p style={{ color: '#777', fontSize: 13, marginTop: 0 }}><T id="editor.empty.body" /></p>
+          <button type="button" onClick={handleCreate} disabled={create.pending}>
+            {create.pending ? <T id="editor.creating" /> : <T id="editor.create" />}
+          </button>
+        </section>
+      ) : null}
+
+      {doc !== undefined ? (
+        <DocumentEditor key={doc.id} doc={doc} saving={setBody.pending} onUpdate={handleUpdate(doc.id)} />
+      ) : null}
+    </div>
+  )
+}
+
+export default IndexPage

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

@@ -0,0 +1,6 @@
+{
+  "id": "frontend-collab",
+  "kind": "web",
+  "summary": "A collaborative document editor — a textarea bound to a `crdtText()` body over the reactive engine. Type in two browser tabs at once and the edits CONVERGE (server-authoritative CRDT merge), no last-write-wins loser. Pairs with api-collab: scaffold both with `create-project --api=api-collab --web=frontend-collab`.",
+  "tags": ["web", "frontend", "fullstack", "local-first", "crdt", "collaborative", "realtime", "reactive", "api-collab"]
+}

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

@@ -0,0 +1,11 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["ES2024", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "Bundler"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", ".framework"]
+}

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

@@ -15,18 +15,18 @@
   },
   "dependencies": {
     "@effect/platform": "^0.97.0",
-    "@voltro/cli": "0.29.0",
-    "@voltro/client": "0.29.0",
-    "@voltro/env": "0.29.0",
-    "@voltro/i18n": "0.29.0",
-    "@voltro/serverless": "0.29.0",
-    "@voltro/web": "0.29.0",
+    "@voltro/cli": "0.30.0",
+    "@voltro/client": "0.30.0",
+    "@voltro/env": "0.30.0",
+    "@voltro/i18n": "0.30.0",
+    "@voltro/serverless": "0.30.0",
+    "@voltro/web": "0.30.0",
     "effect": "^3.22.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@voltro/devtools": "0.29.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-dashboard/app.config.ts

@@ -32,7 +32,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-dashboard/package.json

@@ -12,17 +12,17 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.29.0",
-    "@voltro/client": "0.29.0",
-    "@voltro/env": "0.29.0",
-    "@voltro/i18n": "0.29.0",
-    "@voltro/ui-shadcn": "0.29.0",
-    "@voltro/web": "0.29.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.29.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-dashboard/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-docs/package.json

@@ -12,17 +12,17 @@
     "test": "voltro test"
   },
   "dependencies": {
-    "@voltro/cli": "0.29.0",
-    "@voltro/client": "0.29.0",
-    "@voltro/env": "0.29.0",
-    "@voltro/i18n": "0.29.0",
-    "@voltro/ui-shadcn": "0.29.0",
-    "@voltro/web": "0.29.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.29.0",
+    "@voltro/devtools": "0.30.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^6.0.3",