create-mikstack 0.1.23 → 0.1.25

package/dist/index.js

@@ -145,11 +145,13 @@ async function runPrompts(projectName, packageManager) {
 
 //#endregion
 //#region src/template-engine.ts
-const CONDITIONAL_BLOCK_RE = /^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{#if:(\w+)\}\}[^\S\n]*(?:-->)?[^\S\n]*\n([\s\S]*?)^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{\/if:\1\}\}[^\S\n]*(?:-->)?[^\S\n]*\n?/gm;
+const CONDITIONAL_BLOCK_RE = /^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{#if:(!?\w+)\}\}[^\S\n]*(?:-->)?[^\S\n]*\n([\s\S]*?)^[^\S\n]*(?:\/\/|#|<!--)[^\S\n]*\{\{\/if:\1\}\}[^\S\n]*(?:-->)?[^\S\n]*\n?/gm;
 const VARIABLE_RE = /\{\{(\w+)\}\}/g;
 function renderTemplate(content, context) {
 	let result = content.replace(CONDITIONAL_BLOCK_RE, (_match, name, body) => {
-		if (context[name]) return body;
+		const negated = name.startsWith("!");
+		const value = context[negated ? name.slice(1) : name];
+		if (negated ? !value : value) return body;
 		return "";
 	});
 	result = result.replace(VARIABLE_RE, (_match, name) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-mikstack",
-  "version": "0.1.23",
+  "version": "0.1.25",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/adapters/node/docker-compose.prod.yml

@@ -10,6 +10,26 @@ services:
     volumes:
       - pgdata:/var/lib/postgresql/data
 
+  zero-cache:
+    image: rocicorp/zero:${ZERO_VERSION}
+    restart: always
+    ports:
+      - 4848:4848
+    environment:
+      ZERO_UPSTREAM_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}
+      ZERO_CVR_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}_cvr
+      ZERO_CHANGE_DB: postgres://root:${POSTGRES_PASSWORD}@db:5432/{{projectName}}_cdb
+      ZERO_REPLICA_FILE: /data/sync-replica.db
+      ZERO_PUSH_URL: http://app:3000/api/zero/mutate
+      ZERO_QUERY_URL: http://app:3000/api/zero/get-queries
+      ZERO_QUERY_FORWARD_COOKIES: "true"
+      ZERO_MUTATE_FORWARD_COOKIES: "true"
+      ZERO_AUTH_SECRET: ${BETTER_AUTH_SECRET}
+    volumes:
+      - zero-data:/data
+    depends_on:
+      - db
+
   app:
     build: .
     restart: always
@@ -20,8 +40,11 @@ services:
       BETTER_AUTH_SECRET: ${BETTER_AUTH_SECRET}
       BETTER_AUTH_URL: ${BETTER_AUTH_URL}
       ORIGIN: ${BETTER_AUTH_URL}
+      PUBLIC_SERVER: http://zero-cache:4848
     depends_on:
       - db
+      - zero-cache
 
 volumes:
   pgdata:
+  zero-data:

package/templates/base/AGENTS.md

@@ -8,10 +8,14 @@ SvelteKit app with Drizzle ORM, Zero (real-time sync), and better-auth.
 - **Database**: PostgreSQL via Drizzle ORM
 - **Real-time**: Zero (@rocicorp/zero) for client-side sync
 - **Auth**: better-auth with magic link
-- **Styling**: See `src/app.css`
+- **UI**: @mikstack/ui components (Button, Input, FormField, Textarea, Separator)
+- **Styling**: Design tokens in `src/app.css` — oklch colors, spacing/radius variables, dark mode via `prefers-color-scheme`
 <!-- {{#if:i18n}} -->
 - **i18n**: @mikstack/svelte-lingui (Lingui-based)
 <!-- {{/if:i18n}} -->
+<!-- {{#if:testing}} -->
+- **Testing**: Vitest + @testcontainers/postgresql for integration tests
+<!-- {{/if:testing}} -->
 
 ## Key Patterns
 
@@ -28,11 +32,19 @@ const data = $derived(query.data);
 await z.mutate(mutators.myMutation(args));
 ```
 
+Mutators verify ownership before update/delete via `tx.run()`:
+
+```typescript
+const entity = await tx.run(zql.note.where("id", args.id).one());
+if (!entity || entity.userId !== ctx.userID) return;
+```
+
 ### Auth
 
 Server: `src/lib/server/auth.ts` (better-auth config)
 Client: `src/lib/auth-client.ts` (magic link + client helpers)
 Session is available in `locals.user` and `locals.session` via `src/hooks.server.ts`.
+Routes under `(app)/` require authentication — unauthenticated requests redirect to `/sign-in`.
 
 ### Forms (@mikstack/form)
 
@@ -85,9 +97,23 @@ Email delivery tracking and retries are handled automatically.
 
 ### Database
 
-Schema: `src/lib/server/db/schema.ts`
+Schema: `src/lib/server/db/schema.ts` (uses `casing: "snake_case"` — no explicit column names needed)
 Connection: `src/lib/server/db/index.ts` (lazy-initialized via Proxy)
 
+<!-- {{#if:testing}} -->
+### Testing
+
+Test utils: `src/lib/server/db/test-utils.ts` — `createTestDatabase()` spins up a PostgreSQL container via @testcontainers/postgresql.
+
+```typescript
+import { createTestDatabase, stopTestDatabase, type TestDatabase } from "$lib/server/db/test-utils";
+
+let testDb: TestDatabase;
+beforeAll(async () => { testDb = await createTestDatabase(); });
+afterAll(async () => { await stopTestDatabase(testDb); });
+```
+
+<!-- {{/if:testing}} -->
 <!-- {{#if:i18n}} -->
 ### i18n
 
@@ -95,7 +121,7 @@ Setup: `src/lib/i18n.ts` — initialized in root layout
 Config: `lingui.config.ts`
 Catalogs: `src/locales/{locale}.po`
 
-Use `useLingui()` for translations, `<T>` component for rich text:
+Use `useLingui()` for translations in Svelte components:
 
 ```svelte
 <script lang="ts">
@@ -106,9 +132,23 @@ Use `useLingui()` for translations, `<T>` component for rich text:
 <h1>{t`Hello world`}</h1>
 ```
 
+Use `<T>` component for rich text with embedded elements:
+
+```svelte
+<T>Read the <a href="/docs">documentation</a></T>
+```
+
+The extractor and Svelte preprocessor handle the transformation automatically.
+
 Run `{{pmRun}} i18n:extract` to extract messages into `.po` catalogs.
 <!-- {{/if:i18n}} -->
 
+### Deployment
+
+- `Dockerfile` — multi-stage build for the Node adapter
+- `docker-compose.yml` — local dev (PostgreSQL + zero-cache)
+- `docker-compose.prod.yml` — production (PostgreSQL + zero-cache + app)
+
 ## Commands
 
 - `{{pmRun}} dev` — start dev server
@@ -121,3 +161,6 @@ Run `{{pmRun}} i18n:extract` to extract messages into `.po` catalogs.
 <!-- {{#if:i18n}} -->
 - `{{pmRun}} i18n:extract` — extract messages to .po catalogs
 <!-- {{/if:i18n}} -->
+<!-- {{#if:testing}} -->
+- `{{pmRun}} test` — run tests (requires Docker for testcontainers)
+<!-- {{/if:testing}} -->

package/templates/base/src/lib/server/auth.ts

@@ -24,7 +24,12 @@ function createAuth() {
           await notif.send({
             type: "magic-link",
             recipientEmail: email,
+            // {{#if:i18n}}
+            data: { url, locale: getRequestEvent().cookies.get("locale") },
+            // {{/if:i18n}}
+            // {{#if:!i18n}}
             data: { url },
+            // {{/if:!i18n}}
           });
         },
       }),

package/templates/base/src/lib/server/db/schema.ts

@@ -2,114 +2,114 @@ import { boolean, integer, jsonb, pgTable, text, timestamp } from "drizzle-orm/p
 
 // better-auth tables (managed by better-auth, do not insert/update directly)
 export const user = pgTable("user", {
-  id: text("id").primaryKey(),
-  name: text("name").notNull(),
-  email: text("email").notNull().unique(),
-  emailVerified: boolean("email_verified").notNull().default(false),
-  image: text("image"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  id: text().primaryKey(),
+  name: text().notNull(),
+  email: text().notNull().unique(),
+  emailVerified: boolean().notNull().default(false),
+  image: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const session = pgTable("session", {
-  id: text("id").primaryKey(),
-  expiresAt: timestamp("expires_at").notNull(),
-  token: text("token").notNull().unique(),
-  ipAddress: text("ip_address"),
-  userAgent: text("user_agent"),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  expiresAt: timestamp().notNull(),
+  token: text().notNull().unique(),
+  ipAddress: text(),
+  userAgent: text(),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const account = pgTable("account", {
-  id: text("id").primaryKey(),
-  accountId: text("account_id").notNull(),
-  providerId: text("provider_id").notNull(),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  accountId: text().notNull(),
+  providerId: text().notNull(),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  accessToken: text("access_token"),
-  refreshToken: text("refresh_token"),
-  idToken: text("id_token"),
-  accessTokenExpiresAt: timestamp("access_token_expires_at"),
-  refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
-  scope: text("scope"),
-  password: text("password"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  accessToken: text(),
+  refreshToken: text(),
+  idToken: text(),
+  accessTokenExpiresAt: timestamp(),
+  refreshTokenExpiresAt: timestamp(),
+  scope: text(),
+  password: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const verification = pgTable("verification", {
-  id: text("id").primaryKey(),
-  identifier: text("identifier").notNull(),
-  value: text("value").notNull(),
-  expiresAt: timestamp("expires_at").notNull(),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  id: text().primaryKey(),
+  identifier: text().notNull(),
+  value: text().notNull(),
+  expiresAt: timestamp().notNull(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 // Notification tables (managed by @mikstack/notifications)
 export const notificationDelivery = pgTable("notification_delivery", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id").references(() => user.id),
-  type: text("type").notNull(),
-  channel: text("channel").notNull(),
-  status: text("status", { enum: ["pending", "sent", "delivered", "failed"] })
+  userId: text().references(() => user.id),
+  type: text().notNull(),
+  channel: text().notNull(),
+  status: text({ enum: ["pending", "sent", "delivered", "failed"] })
     .notNull()
     .default("pending"),
-  content: jsonb("content"),
-  error: text("error"),
-  retryOf: text("retry_of"),
-  retriesLeft: integer("retries_left").notNull().default(0),
-  recipientEmail: text("recipient_email"),
-  externalId: text("external_id"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  content: jsonb(),
+  error: text(),
+  retryOf: text(),
+  retriesLeft: integer().notNull().default(0),
+  recipientEmail: text(),
+  externalId: text(),
+  createdAt: timestamp().notNull().defaultNow(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 export const inAppNotification = pgTable("in_app_notification", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id")
+  userId: text()
     .notNull()
     .references(() => user.id),
-  type: text("type").notNull(),
-  title: text("title").notNull(),
-  body: text("body"),
-  url: text("url"),
-  icon: text("icon"),
-  read: boolean("read").notNull().default(false),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
+  type: text().notNull(),
+  title: text().notNull(),
+  body: text(),
+  url: text(),
+  icon: text(),
+  read: boolean().notNull().default(false),
+  createdAt: timestamp().notNull().defaultNow(),
 });
 
 export const notificationPreference = pgTable("notification_preference", {
-  id: text("id")
+  id: text()
     .primaryKey()
     .$defaultFn(() => crypto.randomUUID()),
-  userId: text("user_id")
+  userId: text()
     .notNull()
     .references(() => user.id),
-  notificationType: text("notification_type").notNull(),
-  channel: text("channel").notNull(),
-  enabled: boolean("enabled").notNull(),
-  updatedAt: timestamp("updated_at").notNull().defaultNow(),
+  notificationType: text().notNull(),
+  channel: text().notNull(),
+  enabled: boolean().notNull(),
+  updatedAt: timestamp().notNull().defaultNow(),
 });
 
 // Application tables
 
 export const note = pgTable("note", {
-  id: text("id").primaryKey(),
-  title: text("title").notNull(),
-  content: text("content").notNull().default(""),
-  userId: text("user_id")
+  id: text().primaryKey(),
+  title: text().notNull(),
+  content: text().notNull().default(""),
+  userId: text()
     .notNull()
     .references(() => user.id),
-  createdAt: timestamp("created_at").notNull(),
-  updatedAt: timestamp("updated_at").notNull(),
+  createdAt: timestamp().notNull(),
+  updatedAt: timestamp().notNull(),
 });

package/templates/base/src/lib/zero/mutators.ts

@@ -1,5 +1,6 @@
 import { defineMutators, defineMutator } from "@rocicorp/zero";
 import * as v from "valibot";
+import { zql } from "./schema";
 
 export const mutators = defineMutators({
   note: {
@@ -19,7 +20,9 @@ export const mutators = defineMutators({
     ),
     update: defineMutator(
       v.object({ id: v.string(), title: v.string(), content: v.string() }),
-      async ({ tx, args }) => {
+      async ({ tx, ctx, args }) => {
+        const note = await tx.run(zql.note.where("id", args.id).one());
+        if (!note || note.userId !== ctx.userID) return;
         await tx.mutate.note.update({
           id: args.id,
           title: args.title,
@@ -28,7 +31,9 @@ export const mutators = defineMutators({
         });
       },
     ),
-    delete: defineMutator(v.object({ id: v.string() }), async ({ tx, args }) => {
+    delete: defineMutator(v.object({ id: v.string() }), async ({ tx, ctx, args }) => {
+      const note = await tx.run(zql.note.where("id", args.id).one());
+      if (!note || note.userId !== ctx.userID) return;
       await tx.mutate.note.delete({ id: args.id });
     }),
   },

package/templates/base/src/routes/(app)/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-  import NotePencil from "phosphor-svelte/lib/NotePencil";
-  import PencilSimple from "phosphor-svelte/lib/PencilSimple";
-  import Plus from "phosphor-svelte/lib/Plus";
-  import SignOut from "phosphor-svelte/lib/SignOut";
-  import Trash from "phosphor-svelte/lib/Trash";
-  import X from "phosphor-svelte/lib/X";
+  import NotePencilIcon from "phosphor-svelte/lib/NotePencilIcon";
+  import PencilSimpleIcon from "phosphor-svelte/lib/PencilSimpleIcon";
+  import PlusIcon from "phosphor-svelte/lib/PlusIcon";
+  import SignOutIcon from "phosphor-svelte/lib/SignOutIcon";
+  import TrashIcon from "phosphor-svelte/lib/TrashIcon";
+  import XIcon from "phosphor-svelte/lib/XIcon";
   import Button from "{{uiPrefix}}/Button";
   import FormField from "{{uiPrefix}}/FormField";
   import Input from "{{uiPrefix}}/Input";
@@ -18,6 +18,11 @@
   import { get_z } from "$lib/z.svelte";
   import { queries } from "$lib/zero/queries";
   import { mutators } from "$lib/zero/mutators";
+  // {{#if:i18n}}
+  import { useLingui } from "@mikstack/svelte-lingui";
+  import LocaleSwitcher from "$lib/LocaleSwitcher.svelte";
+  const { t } = useLingui();
+  // {{/if:i18n}}
 
   let { data } = $props();
 
@@ -39,7 +44,12 @@
   let editingId = $state<string | null>(null);
 
   const noteSchema = v.object({
+    // {{#if:i18n}}
+    title: v.pipe(v.string(), v.minLength(1, t`Title is required`)),
+    // {{/if:i18n}}
+    // {{#if:!i18n}}
     title: v.pipe(v.string(), v.minLength(1, "Title is required")),
+    // {{/if:!i18n}}
     content: v.string(),
   });
 
@@ -103,13 +113,26 @@
 <div class="container">
   <header class="header">
     <div class="header-title">
-      <NotePencil size={24} weight="duotone" />
+      <NotePencilIcon size={24} weight="duotone" />
+      <!-- {{#if:i18n}} -->
+      <h1>{t`Notes`}</h1>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <h1>Notes</h1>
+      <!-- {{/if:!i18n}} -->
     </div>
     <div class="header-actions">
+      <!-- {{#if:i18n}} -->
+      <LocaleSwitcher />
+      <!-- {{/if:i18n}} -->
       <span class="email">{data.user.email}</span>
       <Button variant="ghost" onclick={signOut}>
-        <SignOut size={16} weight="bold" /> Sign out
+        <!-- {{#if:i18n}} -->
+        <SignOutIcon size={16} weight="bold" /> {t`Sign out`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
+        <SignOutIcon size={16} weight="bold" /> Sign out
+        <!-- {{/if:!i18n}} -->
       </Button>
     </div>
   </header>
@@ -117,13 +140,28 @@
   <Separator />
 
   <section>
+    <!-- {{#if:i18n}} -->
+    <h2>{t`New note`}</h2>
+    <!-- {{/if:i18n}} -->
+    <!-- {{#if:!i18n}} -->
     <h2>New note</h2>
+    <!-- {{/if:!i18n}} -->
     <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
       <FormField for={createNoteForm.fields.title.as("text").id}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Title`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Title</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
+        <!-- {{#if:i18n}} -->
+        <Input {...createNoteForm.fields.title.as("text")} placeholder={t`Note title`} />
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         <Input {...createNoteForm.fields.title.as("text")} placeholder="Note title" />
+        <!-- {{/if:!i18n}} -->
         {#snippet error(attrs)}
           {#each createNoteForm.fields.title.issues() as issue (issue.message)}
             <p {...attrs}>{issue.message}</p>
@@ -133,8 +171,24 @@
 
       <FormField for={`${createNoteForm.id}-content`}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Content`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Content</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
+        <!-- {{#if:i18n}} -->
+        <Textarea
+          name={createNoteForm.fields.content.name()}
+          id="{createNoteForm.id}-content"
+          oninput={(e) =>
+            createNoteForm.fields.content.set((e.target as HTMLTextAreaElement).value)}
+          value={createNoteForm.fields.content.value() as string}
+          placeholder={t`Write something...`}
+        />
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         <Textarea
           name={createNoteForm.fields.content.name()}
           id="{createNoteForm.id}-content"
@@ -143,6 +197,7 @@
           value={createNoteForm.fields.content.value() as string}
           placeholder="Write something..."
         />
+        <!-- {{/if:!i18n}} -->
       </FormField>
 
       {#if createNoteForm.error}
@@ -150,8 +205,13 @@
       {/if}
 
       <Button type="submit" disabled={createNoteForm.pending}>
-        <Plus size={16} weight="bold" />
+        <PlusIcon size={16} weight="bold" />
+        <!-- {{#if:i18n}} -->
+        {createNoteForm.pending ? t`Creating...` : t`Create note`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         {createNoteForm.pending ? "Creating..." : "Create note"}
+        <!-- {{/if:!i18n}} -->
         {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
       </Button>
     </form>
@@ -160,9 +220,19 @@
   <Separator />
 
   <section>
+    <!-- {{#if:i18n}} -->
+    <h2>{t`Your notes`}</h2>
+    <!-- {{/if:i18n}} -->
+    <!-- {{#if:!i18n}} -->
     <h2>Your notes</h2>
+    <!-- {{/if:!i18n}} -->
     {#if notes.length === 0}
+      <!-- {{#if:i18n}} -->
+      <p class="empty">{t`No notes yet. Create one above!`}</p>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <p class="empty">No notes yet. Create one above!</p>
+      <!-- {{/if:!i18n}} -->
     {:else}
       <ul class="note-list">
         {#each notes as note (note.id)}
@@ -171,7 +241,12 @@
               <form id={editForm.id} onsubmit={editForm.onsubmit} onkeydown={submitOnModEnter} class="note-form">
                 <FormField for={editForm.fields.title.as("text").id}>
                   {#snippet label(attrs)}
+                    <!-- {{#if:i18n}} -->
+                    <label {...attrs}>{t`Title`}</label>
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     <label {...attrs}>Title</label>
+                    <!-- {{/if:!i18n}} -->
                   {/snippet}
                   <Input {...editForm.fields.title.as("text")} />
                   {#snippet error(attrs)}
@@ -183,7 +258,12 @@
 
                 <FormField for={`${editForm.id}-content`}>
                   {#snippet label(attrs)}
+                    <!-- {{#if:i18n}} -->
+                    <label {...attrs}>{t`Content`}</label>
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     <label {...attrs}>Content</label>
+                    <!-- {{/if:!i18n}} -->
                   {/snippet}
                   <Textarea
                     name={editForm.fields.content.name()}
@@ -201,11 +281,21 @@
 
                 <div class="actions">
                   <Button type="submit" disabled={editForm.pending}>
+                    <!-- {{#if:i18n}} -->
+                    {editForm.pending ? t`Saving...` : t`Save`}
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
                     {editForm.pending ? "Saving..." : "Save"}
+                    <!-- {{/if:!i18n}} -->
                     {#if !isMobile}<kbd>{modLabel}+Enter</kbd>{/if}
                   </Button>
                   <Button variant="ghost" type="button" onclick={cancelEdit}>
-                    <X size={16} weight="bold" /> Cancel
+                    <!-- {{#if:i18n}} -->
+                    <XIcon size={16} weight="bold" /> {t`Cancel`}
+                    <!-- {{/if:i18n}} -->
+                    <!-- {{#if:!i18n}} -->
+                    <XIcon size={16} weight="bold" /> Cancel
+                    <!-- {{/if:!i18n}} -->
                   </Button>
                 </div>
               </form>
@@ -218,10 +308,20 @@
               </div>
               <div class="actions">
                 <Button variant="ghost" onclick={() => startEdit(note)}>
-                  <PencilSimple size={16} /> Edit
+                  <!-- {{#if:i18n}} -->
+                  <PencilSimpleIcon size={16} /> {t`Edit`}
+                  <!-- {{/if:i18n}} -->
+                  <!-- {{#if:!i18n}} -->
+                  <PencilSimpleIcon size={16} /> Edit
+                  <!-- {{/if:!i18n}} -->
                 </Button>
                 <Button variant="danger" onclick={() => deleteNote(note.id)}>
-                  <Trash size={16} /> Delete
+                  <!-- {{#if:i18n}} -->
+                  <TrashIcon size={16} /> {t`Delete`}
+                  <!-- {{/if:i18n}} -->
+                  <!-- {{#if:!i18n}} -->
+                  <TrashIcon size={16} /> Delete
+                  <!-- {{/if:!i18n}} -->
                 </Button>
               </div>
             {/if}

package/templates/base/src/routes/(public)/sign-in/+page.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
-  import EnvelopeSimple from "phosphor-svelte/lib/EnvelopeSimple";
-  import CheckCircle from "phosphor-svelte/lib/CheckCircle";
+  import EnvelopeSimpleIcon from "phosphor-svelte/lib/EnvelopeSimpleIcon";
+  import CheckCircleIcon from "phosphor-svelte/lib/CheckCircleIcon";
   import Button from "{{uiPrefix}}/Button";
   import FormField from "{{uiPrefix}}/FormField";
   import Input from "{{uiPrefix}}/Input";
   import { createForm } from "@mikstack/form";
   import * as v from "valibot";
   import { authClient } from "$lib/auth-client";
+  // {{#if:i18n}}
+  import { useLingui } from "@mikstack/svelte-lingui";
+  import LocaleSwitcher from "$lib/LocaleSwitcher.svelte";
+  const { t } = useLingui();
+  // {{/if:i18n}}
 
   const form = createForm({
     schema: v.object({
+      // {{#if:i18n}}
+      email: v.pipe(v.string(), v.email(t`Please enter a valid email address`)),
+      // {{/if:i18n}}
+      // {{#if:!i18n}}
       email: v.pipe(v.string(), v.email("Please enter a valid email address")),
+      // {{/if:!i18n}}
     }),
     initialValues: { email: "" },
     async onSubmit(data) {
@@ -27,18 +37,36 @@
 </script>
 
 <div class="sign-in">
+  <!-- {{#if:i18n}} -->
+  <div class="locale-bar">
+    <LocaleSwitcher />
+  </div>
+  <h1>{t`Sign in to {{projectName}}`}</h1>
+  <!-- {{/if:i18n}} -->
+  <!-- {{#if:!i18n}} -->
   <h1>Sign in to {{projectName}}</h1>
+  <!-- {{/if:!i18n}} -->
 
   {#if form.result}
     <div class="success">
-      <CheckCircle size={24} weight="duotone" />
+      <CheckCircleIcon size={24} weight="duotone" />
+      <!-- {{#if:i18n}} -->
+      <p>{t`Check your email for a magic link to sign in.`}</p>
+      <!-- {{/if:i18n}} -->
+      <!-- {{#if:!i18n}} -->
       <p>Check your email for a magic link to sign in.</p>
+      <!-- {{/if:!i18n}} -->
     </div>
   {:else}
     <form id={form.id} onsubmit={form.onsubmit} class="sign-in-form">
       <FormField for={emailField.as("email").id}>
         {#snippet label(attrs)}
+          <!-- {{#if:i18n}} -->
+          <label {...attrs}>{t`Email`}</label>
+          <!-- {{/if:i18n}} -->
+          <!-- {{#if:!i18n}} -->
           <label {...attrs}>Email</label>
+          <!-- {{/if:!i18n}} -->
         {/snippet}
         <Input {...emailField.as("email")} placeholder="you@example.com" />
         {#snippet error(attrs)}
@@ -53,8 +81,13 @@
       {/if}
 
       <Button type="submit" disabled={form.pending}>
-        <EnvelopeSimple size={16} weight="bold" />
+        <EnvelopeSimpleIcon size={16} weight="bold" />
+        <!-- {{#if:i18n}} -->
+        {form.pending ? t`Sending magic link...` : t`Sign in with magic link`}
+        <!-- {{/if:i18n}} -->
+        <!-- {{#if:!i18n}} -->
         {form.pending ? "Sending magic link..." : "Sign in with magic link"}
+        <!-- {{/if:!i18n}} -->
       </Button>
     </form>
   {/if}
@@ -70,6 +103,11 @@
     gap: var(--space-5);
   }
 
+  .locale-bar {
+    display: flex;
+    justify-content: flex-end;
+  }
+
   h1 {
     font-size: var(--text-2xl);
   }

package/templates/i18n/lingui.config.ts

@@ -2,7 +2,7 @@ import { extractor } from "@mikstack/svelte-lingui/extractor";
 import type { LinguiConfig } from "@lingui/conf";
 
 const config: LinguiConfig = {
-  locales: ["en"],
+  locales: ["en", "fi"],
   sourceLocale: "en",
   catalogs: [
     {
@@ -11,6 +11,10 @@ const config: LinguiConfig = {
     },
   ],
   extractors: [extractor],
+  format: "po",
+  formatOptions: {
+    lineNumbers: false,
+  },
 };
 
 export default config;

package/templates/i18n/src/lib/LocaleSwitcher.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import { locales, getLocale, setLocale } from "$lib/i18n";
+
+  let currentLocale = $state(getLocale());
+
+  function switchLocale(locale: string) {
+    setLocale(locale);
+    document.cookie = `locale=${locale};path=/;max-age=31536000;samesite=lax`;
+    currentLocale = locale;
+  }
+</script>
+
+<div class="locale-switcher">
+  {#each locales as locale (locale)}
+    <button
+      class:active={locale === currentLocale}
+      disabled={locale === currentLocale}
+      onclick={() => switchLocale(locale)}
+    >
+      {locale.toUpperCase()}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .locale-switcher {
+    display: flex;
+    gap: var(--space-1);
+  }
+
+  button {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+    font-weight: 500;
+    border: 1px solid transparent;
+    border-radius: var(--radius-sm);
+    background: none;
+    color: var(--text-2);
+    cursor: pointer;
+  }
+
+  button:hover:not(:disabled) {
+    background-color: var(--surface-2);
+  }
+
+  button.active {
+    color: var(--text-1);
+    font-weight: 700;
+    cursor: default;
+  }
+</style>

package/templates/i18n/src/lib/i18n.ts

@@ -1,10 +1,42 @@
-import { setupI18n } from "@lingui/core";
+import { setupI18n, type I18n } from "@lingui/core";
 import { setI18n } from "@mikstack/svelte-lingui";
-import { messages } from "../locales/en.po";
+import { messages as enMessages } from "../locales/en.po";
+import { messages as fiMessages } from "../locales/fi.po";
+
+const allMessages: Record<string, typeof enMessages> = {
+  en: enMessages,
+  fi: fiMessages,
+};
 
 const i18n = setupI18n();
 
-export function initI18n(): void {
-  i18n.loadAndActivate({ locale: "en", messages });
+export function initI18n(locale = "en"): void {
+  i18n.loadAndActivate({ locale, messages: allMessages[locale] });
   setI18n(i18n);
 }
+
+export function setLocale(locale: string): void {
+  const messages = allMessages[locale];
+  if (messages) {
+    i18n.loadAndActivate({ locale, messages });
+  }
+}
+
+export function getLocale(): string {
+  return i18n.locale;
+}
+
+export const locales = Object.keys(allMessages);
+
+/**
+ * Create a standalone i18n instance for server-side use (e.g. emails).
+ * Each call returns a fresh instance — safe for concurrent requests.
+ */
+export function createServerI18n(locale = "en"): I18n {
+  const serverI18n = setupI18n();
+  serverI18n.loadAndActivate({
+    locale,
+    messages: allMessages[locale] ?? allMessages["en"],
+  });
+  return serverI18n;
+}

package/templates/i18n/src/lib/server/emails/magic-link.ts

@@ -0,0 +1,67 @@
+import { html, body, section, text, button, render } from "@mikstack/email";
+import { msg } from "@mikstack/svelte-lingui";
+import { createServerI18n } from "$lib/i18n";
+
+export function magicLinkEmail(url: string, locale = "en") {
+  const i18n = createServerI18n(locale);
+  const _ = (d: { id: string; message: string }) => i18n._(d) as string;
+
+  const email = html(
+    body(
+      [
+        section(
+          [
+            text(_(msg`Sign in to {{projectName}}`), {
+              fontSize: 24,
+              fontWeight: "bold",
+              color: "#111827",
+              marginBottom: 40,
+              marginTop: 40,
+            }),
+            button(_(msg`Sign in`), {
+              href: url,
+              backgroundColor: "#111827",
+              color: "#ffffff",
+              fontSize: 14,
+              fontWeight: "bold",
+              padding: [12, 34],
+              borderRadius: 6,
+              marginBottom: 16,
+            }),
+            text(_(msg`Or, copy and paste this temporary login URL:`), {
+              fontSize: 14,
+              lineHeight: 1.7,
+              color: "#111827",
+              marginTop: 24,
+              marginBottom: 14,
+            }),
+            text(url, {
+              fontSize: 13,
+              color: "#111827",
+              backgroundColor: "#f4f4f4",
+              borderRadius: 6,
+              padding: [16, 24],
+              border: "1px solid #eee",
+            }),
+            text(_(msg`If you didn't try to sign in, you can safely ignore this email.`), {
+              fontSize: 14,
+              lineHeight: 1.7,
+              color: "#ababab",
+              marginTop: 14,
+              marginBottom: 38,
+            }),
+          ],
+          { padding: [0, 24] },
+        ),
+      ],
+      { maxWidth: 480, backgroundColor: "#ffffff" },
+    ),
+    { lang: locale },
+  );
+
+  return {
+    subject: _(msg`Sign in to {{projectName}}`),
+    html: render(email),
+    text: render(email, { plainText: true }),
+  };
+}

package/templates/i18n/src/lib/server/notifications/definitions.ts

@@ -0,0 +1,12 @@
+import { defineNotification } from "@mikstack/notifications";
+import { magicLinkEmail } from "../emails/magic-link";
+
+export const notifications = {
+  "magic-link": defineNotification({
+    key: "magic-link",
+    critical: true, // Auth emails bypass user preferences
+    channels: {
+      email: (data: { url: string; locale?: string }) => magicLinkEmail(data.url, data.locale),
+    },
+  }),
+} as const;

package/templates/i18n/src/locales/en.po

@@ -1,6 +1,87 @@
 msgid ""
 msgstr ""
+"Project-Id-Version: {{projectName}}\n"
 "Language: en\n"
+"Language-Team: English, United States\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
+
+msgid "Cancel"
+msgstr "Cancel"
+
+msgid "Check your email for a magic link to sign in."
+msgstr "Check your email for a magic link to sign in."
+
+msgid "Content"
+msgstr "Content"
+
+msgid "Create note"
+msgstr "Create note"
+
+msgid "Creating..."
+msgstr "Creating..."
+
+msgid "Delete"
+msgstr "Delete"
+
+msgid "Edit"
+msgstr "Edit"
+
+msgid "If you didn't try to sign in, you can safely ignore this email."
+msgstr "If you didn't try to sign in, you can safely ignore this email."
+
+msgid "Email"
+msgstr "Email"
+
+msgid "New note"
+msgstr "New note"
+
+msgid "No notes yet. Create one above!"
+msgstr "No notes yet. Create one above!"
+
+msgid "Note title"
+msgstr "Note title"
+
+msgid "Notes"
+msgstr "Notes"
+
+msgid "Or, copy and paste this temporary login URL:"
+msgstr "Or, copy and paste this temporary login URL:"
+
+msgid "Please enter a valid email address"
+msgstr "Please enter a valid email address"
+
+msgid "Save"
+msgstr "Save"
+
+msgid "Saving..."
+msgstr "Saving..."
+
+msgid "Sending magic link..."
+msgstr "Sending magic link..."
+
+msgid "Sign in"
+msgstr "Sign in"
+
+msgid "Sign in to {{projectName}}"
+msgstr "Sign in to {{projectName}}"
+
+msgid "Sign in with magic link"
+msgstr "Sign in with magic link"
+
+msgid "Sign out"
+msgstr "Sign out"
+
+msgid "Title"
+msgstr "Title"
+
+msgid "Title is required"
+msgstr "Title is required"
+
+msgid "Write something..."
+msgstr "Write something..."
+
+msgid "Your notes"
+msgstr "Your notes"

package/templates/i18n/src/locales/fi.po

@@ -0,0 +1,87 @@
+msgid ""
+msgstr ""
+"Project-Id-Version: {{projectName}}\n"
+"Language: fi\n"
+"Language-Team: Finnish\n"
+"Plural-Forms: nplurals=2; plural=(n != 1);\n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: 8bit\n"
+
+msgid "Cancel"
+msgstr "Peruuta"
+
+msgid "Check your email for a magic link to sign in."
+msgstr "Tarkista sähköpostisi kirjautumislinkin varalta."
+
+msgid "Content"
+msgstr "Sisältö"
+
+msgid "Create note"
+msgstr "Luo muistiinpano"
+
+msgid "Creating..."
+msgstr "Luodaan..."
+
+msgid "Delete"
+msgstr "Poista"
+
+msgid "Edit"
+msgstr "Muokkaa"
+
+msgid "If you didn't try to sign in, you can safely ignore this email."
+msgstr "Jos et yrittänyt kirjautua, voit jättää tämän sähköpostin huomiotta."
+
+msgid "Email"
+msgstr "Sähköposti"
+
+msgid "New note"
+msgstr "Uusi muistiinpano"
+
+msgid "No notes yet. Create one above!"
+msgstr "Ei vielä muistiinpanoja. Luo ensimmäinen yllä!"
+
+msgid "Note title"
+msgstr "Muistiinpanon otsikko"
+
+msgid "Notes"
+msgstr "Muistiinpanot"
+
+msgid "Or, copy and paste this temporary login URL:"
+msgstr "Tai kopioi ja liitä tämä väliaikainen kirjautumislinkki:"
+
+msgid "Please enter a valid email address"
+msgstr "Syötä kelvollinen sähköpostiosoite"
+
+msgid "Save"
+msgstr "Tallenna"
+
+msgid "Saving..."
+msgstr "Tallennetaan..."
+
+msgid "Sending magic link..."
+msgstr "Lähetetään kirjautumislinkkiä..."
+
+msgid "Sign in"
+msgstr "Kirjaudu"
+
+msgid "Sign in to {{projectName}}"
+msgstr "Kirjaudu palveluun {{projectName}}"
+
+msgid "Sign in with magic link"
+msgstr "Kirjaudu kirjautumislinkillä"
+
+msgid "Sign out"
+msgstr "Kirjaudu ulos"
+
+msgid "Title"
+msgstr "Otsikko"
+
+msgid "Title is required"
+msgstr "Otsikko on pakollinen"
+
+msgid "Write something..."
+msgstr "Kirjoita jotain..."
+
+msgid "Your notes"
+msgstr "Muistiinpanosi"