create-mikstack 0.1.31 → 0.1.33

package/dist/index.js

@@ -3,6 +3,7 @@ import * as p from "@clack/prompts";
 import { execSync, spawn } from "node:child_process";
 import path from "node:path";
 import { parseArgs } from "node:util";
+import crypto from "node:crypto";
 import fs from "node:fs";
 
 //#region src/config.ts
@@ -178,6 +179,7 @@ function scaffold(config, onStatus) {
 	});
 	fs.rmSync(path.join(target, "agents.md"), { force: true });
 	fs.rmSync(path.join(target, ".npmrc"), { force: true });
+	fs.rmSync(path.join(target, "src", "lib", "index.ts"), { force: true });
 	onStatus?.("Applying templates...");
 	const overlay = (dir) => {
 		copyDir(dir, target);
@@ -199,7 +201,11 @@ function scaffold(config, onStatus) {
 	fs.symlinkSync("AGENTS.md", path.join(target, "CLAUDE.md"));
 	const envExample = path.join(target, ".env.example");
 	const envFile = path.join(target, ".env");
-	if (fs.existsSync(envExample) && !fs.existsSync(envFile)) fs.copyFileSync(envExample, envFile);
+	if (fs.existsSync(envExample) && !fs.existsSync(envFile)) {
+		fs.copyFileSync(envExample, envFile);
+		const envContent = fs.readFileSync(envFile, "utf-8");
+		fs.writeFileSync(envFile, envContent.replace("BETTER_AUTH_SECRET=\"change-me-generate-a-real-secret\"", `BETTER_AUTH_SECRET="${crypto.randomBytes(32).toString("base64url")}"`));
+	}
 }
 function copyDir(src, dest) {
 	if (!fs.existsSync(src)) return;

package/package.json

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

package/templates/base/AGENTS.md

@@ -32,11 +32,13 @@ const data = $derived(query.data);
 await z.mutate(mutators.myMutation(args));
 ```
 
-Mutators verify ownership before update/delete via `tx.run()`:
+Mutators verify ownership before update/delete by including `userId` in the query:
 
 ```typescript
-const entity = await tx.run(zql.note.where("id", args.id).one());
-if (!entity || entity.userId !== ctx.userID) return;
+const entity = await tx.run(
+  zql.note.where("id", args.id).where("userId", ctx.userID).one(),
+);
+if (!entity) return;
 ```
 
 ### Auth
@@ -46,10 +48,12 @@ 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)
+### Forms
 
-Use `createForm` from `@mikstack/form` for client-side forms with Valibot validation.
-Ideal for Zero mutators where forms don't use SvelteKit form actions.
+**Zero mutations:** Use `createForm` from `@mikstack/form` for client-side forms with Valibot validation.
+
+**Server submissions:** Use SvelteKit remote functions (`*.remote.ts` files) with the `form()` helper and Valibot validation.
+For docs, call the Svelte MCP tool: `list-sections`, then `get-documentation` for the "Remote functions" section.
 
 ```svelte
 <script lang="ts">

package/templates/base/README.md

@@ -2,6 +2,11 @@
 
 Built with [mikstack](https://github.com/mikaelsiidorow/mikstack).
 
+## Prerequisites
+
+- [Docker](https://docs.docker.com/get-docker/) (for local Postgres)
+- Node.js 22+
+
 ## Getting Started
 
 ```bash

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

@@ -5,7 +5,7 @@ import { zql } from "./schema";
 export const mutators = defineMutators({
   note: {
     create: defineMutator(
-      v.object({ id: v.string(), title: v.string(), content: v.string() }),
+      v.object({ id: v.string(), title: v.pipe(v.string(), v.minLength(1)), content: v.string() }),
       async ({ tx, ctx, args }) => {
         const now = Date.now();
         await tx.mutate.note.insert({
@@ -19,10 +19,12 @@ export const mutators = defineMutators({
       },
     ),
     update: defineMutator(
-      v.object({ id: v.string(), title: v.string(), content: v.string() }),
+      v.object({ id: v.string(), title: v.pipe(v.string(), v.minLength(1)), content: 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;
+        const note = await tx.run(
+          zql.note.where("id", args.id).where("userId", ctx.userID).one(),
+        );
+        if (!note) return;
         await tx.mutate.note.update({
           id: args.id,
           title: args.title,
@@ -32,8 +34,10 @@ export const mutators = defineMutators({
       },
     ),
     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;
+      const note = await tx.run(
+        zql.note.where("id", args.id).where("userId", ctx.userID).one(),
+      );
+      if (!note) return;
       await tx.mutate.note.delete({ id: args.id });
     }),
   },

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

@@ -146,7 +146,8 @@
     <!-- {{#if:!i18n}} -->
     <h2>New note</h2>
     <!-- {{/if:!i18n}} -->
-    <form id={createNoteForm.id} onsubmit={createNoteForm.onsubmit} onkeydown={submitOnModEnter} class="note-form" role="form">
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+    <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}} -->
@@ -238,7 +239,8 @@
         {#each notes as note (note.id)}
           <li class="note-card">
             {#if editingId === note.id}
-              <form id={editForm.id} onsubmit={editForm.onsubmit} onkeydown={submitOnModEnter} class="note-form" role="form">
+              <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+              <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}} -->

package/templates/testing/src/lib/server/db/schema.test.ts

@@ -0,0 +1,39 @@
+import { pushSchema } from "drizzle-kit/api";
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createTestDatabase, stopTestDatabase, type TestDatabase } from "./test-utils";
+import * as schema from "./schema";
+
+describe("database schema", () => {
+  let testDb: TestDatabase;
+
+  beforeAll(async () => {
+    testDb = await createTestDatabase();
+  }, 60_000);
+
+  afterAll(async () => {
+    if (testDb) await stopTestDatabase(testDb);
+  });
+
+  it("pushes schema without data loss", async () => {
+    const result = await pushSchema(schema, testDb.db);
+    expect(result.warnings).toEqual([]);
+    expect(result.hasDataLoss).toBe(false);
+    await result.apply();
+
+    const tables = await testDb.client`
+      SELECT table_name FROM information_schema.tables
+      WHERE table_schema = 'public'
+      ORDER BY table_name
+    `;
+    const tableNames = tables.map((row) => row.table_name);
+
+    expect(tableNames).toContain("user");
+    expect(tableNames).toContain("session");
+    expect(tableNames).toContain("account");
+    expect(tableNames).toContain("verification");
+    expect(tableNames).toContain("note");
+    expect(tableNames).toContain("notification_delivery");
+    expect(tableNames).toContain("in_app_notification");
+    expect(tableNames).toContain("notification_preference");
+  });
+});

package/templates/ui/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "stylelint.validate": ["css", "svelte"]
+}

package/templates/ui/package.json.partial

@@ -8,6 +8,7 @@
   },
   "devDependencies": {
     "stylelint": "^17.1.1",
+    "stylelint-config-html": "^1.1.0",
     "stylelint-config-standard": "^40.0.0"
   }
 }

package/templates/ui/src/app.css

@@ -65,15 +65,15 @@ select {
   --radius-lg: 0.75rem;
 
   /* Light Mode Colors (oklch) */
-  --surface-1: oklch(100% 0 0);
-  --surface-2: oklch(97% 0 0);
-  --surface-3: oklch(93% 0 0);
-  --text-1: oklch(20% 0 0);
-  --text-2: oklch(40% 0 0);
-  --accent: oklch(55% 0.2 260);
-  --danger: oklch(55% 0.2 25);
-  --border: oklch(85% 0 0);
-  --focus: oklch(55% 0.2 260 / 50%);
+  --surface-1: oklch(100% 0 0deg);
+  --surface-2: oklch(97% 0 0deg);
+  --surface-3: oklch(93% 0 0deg);
+  --text-1: oklch(20% 0 0deg);
+  --text-2: oklch(40% 0 0deg);
+  --accent: oklch(55% 0.2 260deg);
+  --danger: oklch(55% 0.2 25deg);
+  --border: oklch(85% 0 0deg);
+  --focus: oklch(55% 0.2 260deg / 50%);
 
   color: var(--text-1);
   background-color: var(--surface-1);
@@ -81,14 +81,14 @@ select {
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --surface-1: oklch(15% 0 0);
-    --surface-2: oklch(20% 0 0);
-    --surface-3: oklch(25% 0 0);
-    --text-1: oklch(93% 0 0);
-    --text-2: oklch(70% 0 0);
-    --accent: oklch(70% 0.18 260);
-    --danger: oklch(70% 0.18 25);
-    --border: oklch(30% 0 0);
-    --focus: oklch(70% 0.18 260 / 50%);
+    --surface-1: oklch(15% 0 0deg);
+    --surface-2: oklch(20% 0 0deg);
+    --surface-3: oklch(25% 0 0deg);
+    --text-1: oklch(93% 0 0deg);
+    --text-2: oklch(70% 0 0deg);
+    --accent: oklch(70% 0.18 260deg);
+    --danger: oklch(70% 0.18 25deg);
+    --border: oklch(30% 0 0deg);
+    --focus: oklch(70% 0.18 260deg / 50%);
   }
 }

package/templates/ui/stylelint.config.js

@@ -1,6 +1,6 @@
 /** @type {import('stylelint').Config} */
 export default {
-  extends: ["stylelint-config-standard"],
+  extends: ["stylelint-config-standard", "stylelint-config-html/svelte"],
   rules: {
     "selector-pseudo-class-no-unknown": [true, { ignorePseudoClasses: ["global"] }],
   },

package/templates/ui-vendor/src/lib/components/ui/Alert/Alert.svelte

@@ -36,14 +36,14 @@
     }
 
     &[data-variant='success'] {
-      background-color: oklch(55% 0.15 145 / 10%);
-      border-color: oklch(55% 0.15 145 / 30%);
+      background-color: oklch(55% 0.15 145deg / 10%);
+      border-color: oklch(55% 0.15 145deg / 30%);
       color: var(--text-1);
     }
 
     &[data-variant='warning'] {
-      background-color: oklch(75% 0.15 85 / 10%);
-      border-color: oklch(75% 0.15 85 / 30%);
+      background-color: oklch(75% 0.15 85deg / 10%);
+      border-color: oklch(75% 0.15 85deg / 30%);
       color: var(--text-1);
     }
 

package/templates/ui-vendor/src/lib/components/ui/Badge/Badge.svelte

@@ -36,7 +36,7 @@
     }
 
     &[data-variant='success'] {
-      background-color: oklch(55% 0.15 145);
+      background-color: oklch(55% 0.15 145deg);
       color: white;
     }
 

package/templates/testing/src/example.test.ts

@@ -1,7 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-describe("example", () => {
-  it("should work", () => {
-    expect(1 + 1).toBe(2);
-  });
-});