create-mikstack 0.1.0

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

@@ -0,0 +1,77 @@
+import { html, body, section, text, button, spacer, divider, render } from "@mikstack/email";
+
+export function magicLinkEmail(url: string) {
+  const email = html(
+    body(
+      [
+        section(
+          [
+            text("{{projectName}}", {
+              fontSize: 24,
+              fontWeight: "bold",
+              textAlign: "center",
+              color: "#111827",
+            }),
+          ],
+          { padding: [32, 24, 0, 24] },
+        ),
+        section(
+          [
+            text("Sign in to your account", {
+              fontSize: 20,
+              fontWeight: "bold",
+              color: "#111827",
+            }),
+            spacer(8),
+            text("Click the button below to sign in. This link will expire in 10 minutes.", {
+              fontSize: 16,
+              lineHeight: 1.5,
+              color: "#4b5563",
+            }),
+            spacer(24),
+            button("Sign in", {
+              href: url,
+              backgroundColor: "#111827",
+              color: "#ffffff",
+              borderRadius: 6,
+              padding: [12, 32],
+              fontSize: 16,
+              fontWeight: "bold",
+            }),
+            spacer(24),
+            text("Or copy and paste this URL into your browser:", {
+              fontSize: 14,
+              color: "#6b7280",
+            }),
+            spacer(4),
+            text(url, {
+              fontSize: 14,
+              color: "#2563eb",
+              textDecoration: "underline",
+            }),
+          ],
+          { padding: [24, 24] },
+        ),
+        divider({ borderColor: "#e5e7eb" }),
+        section(
+          [
+            text("If you didn't request this email, you can safely ignore it.", {
+              fontSize: 13,
+              color: "#9ca3af",
+              textAlign: "center",
+            }),
+          ],
+          { padding: [16, 24, 32, 24] },
+        ),
+      ],
+      { maxWidth: 480, backgroundColor: "#ffffff" },
+    ),
+    { lang: "en" },
+  );
+
+  return {
+    subject: "Sign in to {{projectName}}",
+    html: render(email),
+    text: render(email, { plainText: true }),
+  };
+}

package/templates/base/src/lib/server/emails/send.ts

@@ -0,0 +1,55 @@
+import { createTransport } from "nodemailer";
+import { dev } from "$app/environment";
+import { env } from "$env/dynamic/private";
+
+interface Email {
+  subject: string;
+  html: string;
+  text: string;
+}
+
+/**
+ * Send an email via SMTP.
+ *
+ * This is used as the transport for @mikstack/notifications emailChannel.
+ * Delivery tracking (status, retries, errors) is handled by the notifications system.
+ *
+ * In dev mode, SMTP is skipped — emails are logged to the console only.
+ *
+ * The SMTP transport uses nodemailer. Easy to replace with your preferred provider:
+ *   - Resend: https://resend.com/docs
+ *   - Postmark: https://postmarkapp.com/developer
+ *   - Mailgun: https://documentation.mailgun.com
+ *   - AWS SES, SendGrid, etc.
+ */
+export async function sendEmail(to: string, email: Email): Promise<void> {
+  if (dev) {
+    console.log(`\n✉️  Email: "${email.subject}" → ${to}\n`);
+    return;
+  }
+
+  const host = env.SMTP_HOST;
+  const port = Number(env.SMTP_PORT ?? 587);
+  const user = env.SMTP_USER;
+  const pass = env.SMTP_PASS;
+  const from = env.SMTP_FROM ?? "noreply@example.com";
+
+  if (!host || !user || !pass) {
+    throw new Error("SMTP not configured. Set SMTP_HOST, SMTP_USER, and SMTP_PASS in .env");
+  }
+
+  const transport = createTransport({
+    host,
+    port,
+    secure: port === 465,
+    auth: { user, pass },
+  });
+
+  await transport.sendMail({
+    from,
+    to,
+    subject: email.subject,
+    html: email.html,
+    text: email.text,
+  });
+}

package/templates/base/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 }) => magicLinkEmail(data.url),
+    },
+  }),
+} as const;

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

@@ -0,0 +1,38 @@
+import { createNotifications, emailChannel, inAppChannel } from "@mikstack/notifications";
+import { building } from "$app/environment";
+import { db } from "./db";
+import * as schema from "./db/schema";
+import { sendEmail } from "./emails/send";
+import { notifications } from "./notifications/definitions";
+
+type Notif = ReturnType<typeof createNotif>;
+
+function createNotif() {
+  return createNotifications({
+    database: { db, schema, provider: "pg" },
+    channels: [
+      emailChannel({
+        sendEmail: async ({ to, subject, html, text }) => {
+          await sendEmail(to, { subject, html, text });
+        },
+      }),
+      inAppChannel(),
+    ],
+    notifications,
+    defaultPreferences: { enabledChannels: ["email", "in-app"] },
+  });
+}
+
+let _notif: Notif | undefined;
+
+export const notif: Notif = new Proxy({} as Notif, {
+  get(_, prop) {
+    if (building) {
+      throw new Error("Cannot access notif during build");
+    }
+    if (!_notif) {
+      _notif = createNotif();
+    }
+    return (_notif as unknown as Record<string | symbol, unknown>)[prop];
+  },
+});

package/templates/base/src/lib/z.svelte.ts

@@ -0,0 +1,14 @@
+import type { Z } from "zero-svelte";
+import type { Schema } from "./zero/schema";
+import { getContext, setContext } from "svelte";
+
+const zSymbol = Symbol("z");
+
+export function set_z(z: Z<Schema>) {
+  setContext(zSymbol, z);
+  return z;
+}
+
+export function get_z() {
+  return getContext(zSymbol) as Z<Schema>;
+}

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

@@ -0,0 +1,9 @@
+export type ZeroContext = {
+  userID: string;
+};
+
+declare module "@rocicorp/zero" {
+  interface DefaultTypes {
+    context: ZeroContext;
+  }
+}

package/templates/base/src/lib/zero/db-provider.server.ts

@@ -0,0 +1,11 @@
+import { zeroDrizzle } from "@rocicorp/zero/server/adapters/drizzle";
+import { schema } from "./schema";
+import { db } from "$lib/server/db";
+
+export const dbProvider = zeroDrizzle(schema, db);
+
+declare module "@rocicorp/zero" {
+  interface DefaultTypes {
+    dbProvider: typeof dbProvider;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { defineMutators, defineMutator } from "@rocicorp/zero";
+import * as v from "valibot";
+
+export const mutators = defineMutators({
+  note: {
+    create: defineMutator(
+      v.object({ id: v.string(), title: v.string(), content: v.string() }),
+      async ({ tx, ctx, args }) => {
+        const now = Date.now();
+        await tx.mutate.note.insert({
+          id: args.id,
+          title: args.title,
+          content: args.content,
+          userId: ctx.userID,
+          createdAt: now,
+          updatedAt: now,
+        });
+      },
+    ),
+    update: defineMutator(
+      v.object({ id: v.string(), title: v.string(), content: v.string() }),
+      async ({ tx, args }) => {
+        await tx.mutate.note.update({
+          id: args.id,
+          title: args.title,
+          content: args.content,
+          updatedAt: Date.now(),
+        });
+      },
+    ),
+    delete: defineMutator(v.object({ id: v.string() }), async ({ tx, args }) => {
+      await tx.mutate.note.delete({ id: args.id });
+    }),
+  },
+});

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

@@ -0,0 +1,21 @@
+import { defineQueries, defineQuery } from "@rocicorp/zero";
+import { zql } from "./schema";
+
+export const queries = defineQueries({
+  note: {
+    mine: defineQuery(({ ctx }) =>
+      zql.note.where("userId", ctx.userID).orderBy("updatedAt", "desc"),
+    ),
+  },
+  inAppNotification: {
+    mine: defineQuery(({ ctx }) =>
+      zql.inAppNotification.where("userId", ctx.userID).orderBy("createdAt", "desc"),
+    ),
+    unread: defineQuery(({ ctx }) =>
+      zql.inAppNotification
+        .where("userId", ctx.userID)
+        .where("read", false)
+        .orderBy("createdAt", "desc"),
+    ),
+  },
+});

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

@@ -0,0 +1 @@
+export { schema, zql, type Schema } from "./zero-schema.gen";

package/templates/base/src/routes/+layout.server.ts

@@ -0,0 +1,5 @@
+import type { LayoutServerLoad } from "./$types";
+
+export const load: LayoutServerLoad = ({ locals }) => {
+  return { user: locals.user };
+};

package/templates/base/src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+
+  let { children }: { children: Snippet } = $props();
+</script>
+
+{@render children()}

package/templates/base/src/routes/+page.server.ts

@@ -0,0 +1,7 @@
+import { redirect } from "@sveltejs/kit";
+import type { PageServerLoad } from "./$types";
+
+export const load: PageServerLoad = ({ locals }) => {
+  if (!locals.user) redirect(302, "/sign-in");
+  return { user: locals.user };
+};

package/templates/base/src/routes/+page.svelte

@@ -0,0 +1,319 @@
+<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 Button from "{{uiPrefix}}/Button";
+  import FormField from "{{uiPrefix}}/FormField";
+  import Input from "{{uiPrefix}}/Input";
+  import Separator from "{{uiPrefix}}/Separator";
+  import Textarea from "{{uiPrefix}}/Textarea";
+  import { createForm } from "@mikstack/form";
+  import { dropAllDatabases } from "@rocicorp/zero";
+  import * as v from "valibot";
+  import { goto } from "$app/navigation";
+  import { resolve } from "$app/paths";
+  import { authClient } from "$lib/auth-client";
+  import { get_z } from "$lib/z.svelte";
+  import { queries } from "$lib/zero/queries";
+  import { mutators } from "$lib/zero/mutators";
+
+  let { data } = $props();
+
+  const z = get_z();
+  const notesQuery = z.q(queries.note.mine());
+  const notes = $derived(notesQuery.data);
+
+  let editingId = $state<string | null>(null);
+
+  const noteSchema = v.object({
+    title: v.pipe(v.string(), v.minLength(1, "Title is required")),
+    content: v.string(),
+  });
+
+  const createNoteForm = createForm({
+    schema: noteSchema,
+    initialValues: { title: "", content: "" },
+    onSubmit(data) {
+      z.mutate(
+        mutators.note.create({
+          id: crypto.randomUUID(),
+          title: data.title,
+          content: data.content,
+        }),
+      );
+      createNoteForm.reset();
+    },
+  });
+
+  function startEdit(note: { id: string; title: string; content: string | null }) {
+    editingId = note.id;
+    editForm.fields.set({
+      title: note.title,
+      content: note.content ?? "",
+    });
+  }
+
+  function cancelEdit() {
+    editingId = null;
+    editForm.reset();
+  }
+
+  const editForm = createForm({
+    schema: noteSchema,
+    initialValues: { title: "", content: "" },
+    onSubmit(data) {
+      if (!editingId) return;
+      z.mutate(
+        mutators.note.update({
+          id: editingId,
+          title: data.title,
+          content: data.content,
+        }),
+      );
+      editingId = null;
+      editForm.reset();
+    },
+  });
+
+  function deleteNote(id: string) {
+    z.mutate(mutators.note.delete({ id }));
+    if (editingId === id) cancelEdit();
+  }
+
+  async function signOut() {
+    await authClient.signOut();
+    await dropAllDatabases();
+    await goto(resolve("/sign-in"));
+  }
+</script>
+
+<div class="container">
+  <header class="header">
+    <div class="header-title">
+      <NotePencil size={24} weight="duotone" />
+      <h1>Notes</h1>
+    </div>
+    <div class="header-actions">
+      <span class="email">{data.user.email}</span>
+      <Button variant="ghost" onclick={signOut}>
+        <SignOut size={16} weight="bold" /> Sign out
+      </Button>
+    </div>
+  </header>
+
+  <Separator />
+
+  <section>
+    <h2>New note</h2>
+    <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} class="note-form">
+      <FormField for={createNoteForm.fields.title.as("text").id}>
+        {#snippet label(attrs)}
+          <label {...attrs}>Title</label>
+        {/snippet}
+        <Input {...createNoteForm.fields.title.as("text")} placeholder="Note title" />
+        {#snippet error(attrs)}
+          {#each createNoteForm.fields.title.issues() as issue (issue.message)}
+            <p {...attrs}>{issue.message}</p>
+          {/each}
+        {/snippet}
+      </FormField>
+
+      <FormField for={`${createNoteForm.id}-content`}>
+        {#snippet label(attrs)}
+          <label {...attrs}>Content</label>
+        {/snippet}
+        <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="Write something..."
+        />
+      </FormField>
+
+      {#if createNoteForm.error}
+        <p class="form-error">{createNoteForm.error}</p>
+      {/if}
+
+      <Button type="submit" disabled={createNoteForm.pending}>
+        <Plus size={16} weight="bold" />
+        {createNoteForm.pending ? "Creating..." : "Create note"}
+      </Button>
+    </form>
+  </section>
+
+  <Separator />
+
+  <section>
+    <h2>Your notes</h2>
+    {#if notes.length === 0}
+      <p class="empty">No notes yet. Create one above!</p>
+    {:else}
+      <ul class="note-list">
+        {#each notes as note (note.id)}
+          <li class="note-card">
+            {#if editingId === note.id}
+              <form id={editForm.id} onsubmit={editForm.onsubmit} class="note-form">
+                <FormField for={editForm.fields.title.as("text").id}>
+                  {#snippet label(attrs)}
+                    <label {...attrs}>Title</label>
+                  {/snippet}
+                  <Input {...editForm.fields.title.as("text")} />
+                  {#snippet error(attrs)}
+                    {#each editForm.fields.title.issues() as issue (issue.message)}
+                      <p {...attrs}>{issue.message}</p>
+                    {/each}
+                  {/snippet}
+                </FormField>
+
+                <FormField for={`${editForm.id}-content`}>
+                  {#snippet label(attrs)}
+                    <label {...attrs}>Content</label>
+                  {/snippet}
+                  <Textarea
+                    name={editForm.fields.content.name()}
+                    id="{editForm.id}-content"
+                    oninput={(e) =>
+                      editForm.fields.content.set((e.target as HTMLTextAreaElement).value)}
+                    value={editForm.fields.content.value() as string}
+                  />
+                </FormField>
+
+                {#if editForm.error}
+                  <p class="form-error">{editForm.error}</p>
+                {/if}
+
+                <div class="actions">
+                  <Button type="submit" disabled={editForm.pending}>
+                    {editForm.pending ? "Saving..." : "Save"}
+                  </Button>
+                  <Button variant="ghost" type="button" onclick={cancelEdit}>
+                    <X size={16} weight="bold" /> Cancel
+                  </Button>
+                </div>
+              </form>
+            {:else}
+              <div class="note-body">
+                <strong>{note.title}</strong>
+                {#if note.content}
+                  <p class="note-text">{note.content}</p>
+                {/if}
+              </div>
+              <div class="actions">
+                <Button variant="ghost" onclick={() => startEdit(note)}>
+                  <PencilSimple size={16} /> Edit
+                </Button>
+                <Button variant="danger" onclick={() => deleteNote(note.id)}>
+                  <Trash size={16} /> Delete
+                </Button>
+              </div>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </section>
+</div>
+
+<style>
+  .container {
+    max-width: 40rem;
+    margin: 0 auto;
+    padding: var(--space-5) var(--space-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-5);
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+
+    & h1 {
+      font-size: var(--text-2xl);
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+  }
+
+  .email {
+    font-size: var(--text-sm);
+    color: var(--text-2);
+  }
+
+  h2 {
+    font-size: var(--text-lg);
+    margin-bottom: var(--space-3);
+  }
+
+  .note-form {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .form-error {
+    font-size: var(--text-sm);
+    color: var(--danger);
+  }
+
+  .note-list {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .note-card {
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-lg);
+    background-color: var(--surface-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+
+  .note-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-1);
+  }
+
+  .note-text {
+    color: var(--text-2);
+    font-size: var(--text-sm);
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+
+  .actions {
+    display: flex;
+    gap: var(--space-2);
+  }
+
+  .empty {
+    color: var(--text-2);
+    font-size: var(--text-sm);
+  }
+</style>