create-zerotal 1.0.0 → 1.0.2

package/templates/vue/app/routes/register.ts

@@ -0,0 +1,39 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { Auth, GuestMiddleware, Hash } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { User } from "@app/models/User";
+
+export const middleware = [GuestMiddleware];
+
+export const GET = async () => {
+  return Inertia.render("register", { title: "Create an account" });
+};
+
+export async function POST(http: HttpContext): Promise<void> {
+  const { name, email, password } = await validate(http, (r) => ({
+    name: r.string().trim().min(2).max(80),
+    email: r.string().trim().email(),
+    password: r.string().min(8).confirmed(),
+  }));
+
+  const taken = await User.query().where("email", email).first();
+  if (taken) {
+    http.flash("error", "That email is already registered.");
+    http.redirect("/register", 303);
+    return;
+  }
+
+  // `role` is not fillable, so it cannot arrive from the request at all — it is
+  // set here, in code, which is the whole point of leaving it off `fillable`.
+  const user = new User();
+  user.name = name;
+  user.email = email;
+  user.password = await Hash.make(password);
+  user.role = "user";
+  await user.save();
+
+  await Auth.attempt({ email, password });
+  http.flash("success", "Welcome aboard.");
+  http.redirect("/profile", 303);
+}

package/templates/vue/app/routes/reset-password.ts

@@ -0,0 +1,37 @@
+import type { HttpContext } from "zerotal";
+import { Inertia } from "@zerotal/inertia";
+import { GuestMiddleware } from "zerotal/auth";
+import { validate } from "zerotal/validator";
+import { passwordReset } from "@app/auth/passwords";
+
+export const middleware = [GuestMiddleware];
+
+// The token and address arrive on the query string of the emailed link and are
+// handed to the page, which posts them back with the new password.
+export const GET = async (http: HttpContext) => {
+  const url = new URL(http.request.url);
+  return Inertia.render("reset-password", {
+    title: "Choose a new password",
+    token: url.searchParams.get("token") ?? "",
+    email: url.searchParams.get("email") ?? "",
+  });
+};
+
+export async function POST(http: HttpContext): Promise<void> {
+  const { email, token, password } = await validate(http, (r) => ({
+    email: r.string().trim().email(),
+    token: r.string().min(1),
+    password: r.string().min(8).confirmed(),
+  }));
+
+  const ok = await passwordReset.reset({ email, token, password });
+
+  if (!ok) {
+    http.flash("error", "This reset link is invalid or has expired.");
+    http.redirect(`/reset-password?token=${token}&email=${encodeURIComponent(email)}`, 303);
+    return;
+  }
+
+  http.flash("success", "Your password has been updated. Sign in with it below.");
+  http.redirect("/login", 303);
+}

package/templates/vue/bootstrap/app.ts

@@ -1,8 +1,20 @@
 import { Application, basePath } from "zerotal";
 import providers from "./providers";
+import { Handler } from "../app/exceptions/Handler";
+import type { User } from "../app/models/User.ts";
 
-const app = Application.create({ providers }).fileBasedRouting({
-  web: basePath("app/routes"),
-});
+// Tell @zerotal/auth which model `Auth.user()` returns. The empty body is the
+// point: this augmentation exists to bind the type, not to add members.
+declare module "zerotal/auth" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-object-type
+  interface UserModel extends User {}
+}
+
+const app = Application.create({ providers })
+  .fileBasedRouting({
+    web: basePath("app/routes"),
+  })
+  // Renders 404s and other HTTP errors through resources/js/pages/error.vue.
+  .withExceptionHandler(Handler);
 
 export default app;

package/templates/vue/bootstrap/providers.ts

@@ -1,6 +1,13 @@
 import { LogProvider } from "zerotal/logger";
+import { DatabaseProvider } from "zerotal/orm";
+import { SessionProvider } from "zerotal/session";
+import { AuthProvider } from "zerotal/auth";
 import { InertiaProvider } from "@zerotal/inertia";
 
-const providers = [LogProvider, InertiaProvider];
+// Order matters: the database backs the user model and the session underpins
+// auth, so both are registered before AuthProvider boots. AuthProvider installs
+// the middleware that puts the signed-in user on the request — which is what
+// makes `auth.user` appear in every Inertia page's props.
+const providers = [LogProvider, DatabaseProvider, SessionProvider, AuthProvider, InertiaProvider];
 
 export default providers;

package/templates/vue/config/auth.ts

@@ -0,0 +1,7 @@
+import { AuthConfig } from "zerotal/auth";
+
+export default AuthConfig({
+  // argon2id is the default and what `Hash.make` uses unless told otherwise.
+  // Switch to 'bcrypt' only to stay compatible with an existing password table.
+  algorithm: "argon2id",
+});

package/templates/vue/config/database.ts

@@ -0,0 +1,18 @@
+import { env } from "zerotal";
+import { DatabaseConfig } from "zerotal/orm";
+
+export default DatabaseConfig({
+  // The driver has to agree with the URL's protocol — boot validation rejects a
+  // sqlite driver pointed at postgres:// or mysql://. Change both together.
+  driver: "sqlite",
+
+  // ZT_DB_URL first: `bun zt test` sets it (defaults to :memory:) and that
+  // override has to beat the DATABASE_URL in .env, or the suite would run
+  // against your development database and leave its rows behind.
+  url: env("ZT_DB_URL", env("DATABASE_URL", "./database/db.sqlite")),
+
+  // Builds the schema from the models at boot, so `bun run dev` works with no
+  // migration step. Hard-off in production, where you run the migrations in
+  // database/migrations instead.
+  synchronize: env("APP_ENV", "development") !== "production",
+});

package/templates/vue/config/session.ts

@@ -0,0 +1,11 @@
+import { env } from "zerotal";
+import { SessionConfig } from "zerotal/session";
+
+// Cookie-driver sessions, signed with APP_KEY. This is what carries flash
+// messages and a failed validation's errors and old input from one request to
+// the next. Switch `driver` to "redis" for a shared, server-side store.
+export default SessionConfig({
+  secret: env("APP_KEY", ""),
+  cookie: "{{name}}_session",
+  lifetime: 60 * 60 * 24 * 7, // 7 days
+});

package/templates/vue/database/migrations/0001_create_users_table.ts

@@ -0,0 +1,18 @@
+import { Migration, Schema } from "zerotal/orm";
+
+export default class CreateUsersTable extends Migration {
+  async up(): Promise<void> {
+    await Schema.create("users", (table) => {
+      table.increments("id");
+      table.string("name");
+      table.string("email").unique();
+      table.string("password");
+      table.string("role").nullable().default("user");
+      table.timestamps();
+    });
+  }
+
+  async down(): Promise<void> {
+    await Schema.drop("users");
+  }
+}

package/templates/vue/database/migrations/0002_create_password_reset_tokens_table.ts

@@ -0,0 +1,23 @@
+import { Migration, Schema } from "zerotal/orm";
+
+/**
+ * One live reset token per address, keyed by email rather than user id so a
+ * request for an unknown address does the same work as a known one — the
+ * response must not reveal which addresses have accounts.
+ *
+ * `token` holds a SHA-256 hash, never the value that was sent: a leaked
+ * database should not hand out working reset links.
+ */
+export default class CreatePasswordResetTokensTable extends Migration {
+  async up(): Promise<void> {
+    await Schema.create("password_reset_tokens", (table) => {
+      table.string("email").primary();
+      table.string("token");
+      table.timestamp("created_at");
+    });
+  }
+
+  async down(): Promise<void> {
+    await Schema.drop("password_reset_tokens");
+  }
+}

package/templates/vue/package.json

@@ -8,7 +8,8 @@
     "dev": "bun zt.ts serve --dev",
     "start": "bun zt.ts serve",
     "build": "bun zt.ts inertia:build --production",
-    "test": "bun zt.ts test"
+    "test": "bun zt.ts test",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@inertiajs/vue3": "^2.0.0",
@@ -19,6 +20,11 @@
   "devDependencies": {
     "@vue/compiler-sfc": "^3.5.0",
     "bun-plugin-tailwind": "latest",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.8.0",
+    "@types/bun": "^1.3.14"
+  },
+  "engines": {
+    "bun": ">=1.3.14"
   }
 }

package/templates/vue/public/zt.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64" role="img" aria-label="Zerotal">
+  <defs>
+    <linearGradient id="zt-grad" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#818cf8" />
+      <stop offset="0.5" stop-color="#6366f1" />
+      <stop offset="1" stop-color="#7c3aed" />
+    </linearGradient>
+    <linearGradient id="zt-shine" x1="0" y1="0" x2="0" y2="64" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#ffffff" stop-opacity="0.35" />
+      <stop offset="0.55" stop-color="#ffffff" stop-opacity="0" />
+    </linearGradient>
+  </defs>
+  <rect width="64" height="64" rx="18" fill="url(#zt-grad)" />
+  <rect width="64" height="64" rx="18" fill="url(#zt-shine)" />
+  <rect x="0.75" y="0.75" width="62.5" height="62.5" rx="17.25" stroke="#ffffff" stroke-opacity="0.18" stroke-width="1.5" />
+  <text x="32" y="41" text-anchor="middle" font-family="system-ui, -apple-system, Segoe UI, sans-serif" font-size="20" font-weight="800" letter-spacing="0.5" fill="#ffffff">ZT</text>
+</svg>

package/templates/vue/resources/app.html

@@ -3,7 +3,33 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>Zerotal Example</title>
+    <title>{{name}}</title>
+
+    <link rel="icon" href="/zt.svg" type="image/svg+xml" />
+    <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#191922" media="(prefers-color-scheme: dark)" />
+
+    <!--
+      Resolve the theme before the first paint. Without this the page renders in
+      light mode for a frame and then flips, which is very visible on a dark
+      background. Kept inline and synchronous on purpose — a deferred script is
+      already too late. The storage key matches the one @zerotal/flow-ui uses, so
+      an app and its admin panel stay on the same theme.
+    -->
+    <script>
+      (function () {
+        try {
+          var stored = localStorage.getItem("zerotal-theme");
+          var dark = stored
+            ? stored === "dark"
+            : window.matchMedia("(prefers-color-scheme: dark)").matches;
+          document.documentElement.classList.toggle("dark", dark);
+        } catch (e) {
+          /* private mode / storage disabled — fall through to light */
+        }
+      })();
+    </script>
+
     <link rel="stylesheet" href="/assets/app.css" />
     <script type="module" src="/assets/app.js"></script>
   </head>

package/templates/vue/resources/css/app.css

@@ -1 +1,206 @@
 @import "tailwindcss";
+
+/* Page components live outside this file's directory — name them explicitly so
+ * their utility classes survive Tailwind's content scan. */
+@source "../js";
+
+/* Dark mode is driven by a `.dark` class on <html>, not the OS preference, so the
+ * in-app toggle can override it. The no-flash script in resources/app.html sets
+ * the class before first paint. */
+@custom-variant dark (&:where(.dark, .dark *));
+
+/* ── Design tokens ───────────────────────────────────────────────────────────
+ *
+ * Every colour in this app is one of the semantic tokens below — `bg-background`,
+ * `text-muted-foreground`, `border-border`, `bg-primary`. Nothing references a raw
+ * palette shade like `indigo-600`, which means re-branding is a single edit here
+ * rather than a find-and-replace across every component.
+ *
+ * The names match the tokens `@zerotal/flow-ui` defines, so an app, its admin
+ * panel and any copied-in flow-ui component all read from the same vocabulary.
+ *
+ * Colours are oklch: perceptually uniform, so lightening `--primary` by hand
+ * keeps its hue and saturation intact.
+ */
+
+:root {
+  color-scheme: light;
+
+  --radius: 0.75rem;
+
+  --background: oklch(0.994 0.003 286);
+  --foreground: oklch(0.185 0.015 286);
+
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.185 0.015 286);
+
+  --muted: oklch(0.968 0.005 286);
+  --muted-foreground: oklch(0.53 0.016 286);
+
+  --primary: oklch(0.53 0.223 286);
+  --primary-foreground: oklch(0.99 0.004 286);
+  /* Explicit hover shade rather than an opacity fade, so a solid button stays
+   * solid over the grid background. */
+  --primary-hover: oklch(0.47 0.223 286);
+
+  --accent: oklch(0.958 0.018 286);
+  --accent-foreground: oklch(0.36 0.14 286);
+
+  --success: oklch(0.6 0.14 158);
+  --success-foreground: oklch(0.99 0.01 158);
+
+  --destructive: oklch(0.577 0.245 27.3);
+  --destructive-foreground: oklch(0.99 0.01 27.3);
+
+  --border: oklch(0.912 0.006 286);
+  --input: oklch(0.912 0.006 286);
+  --ring: oklch(0.53 0.223 286);
+
+  /* Decorative — the hero grid and the glow behind it. */
+  --grid-line: oklch(0.185 0.015 286 / 6%);
+  --glow-a: oklch(0.7 0.19 286 / 30%);
+  --glow-b: oklch(0.75 0.16 220 / 22%);
+}
+
+.dark {
+  color-scheme: dark;
+
+  --background: oklch(0.163 0.014 286);
+  --foreground: oklch(0.968 0.005 286);
+
+  --card: oklch(0.204 0.016 286);
+  --card-foreground: oklch(0.968 0.005 286);
+
+  --muted: oklch(0.253 0.016 286);
+  --muted-foreground: oklch(0.706 0.015 286);
+
+  --primary: oklch(0.71 0.17 288);
+  --primary-foreground: oklch(0.17 0.03 286);
+  --primary-hover: oklch(0.78 0.15 288);
+
+  --accent: oklch(0.28 0.04 286);
+  --accent-foreground: oklch(0.9 0.06 288);
+
+  --success: oklch(0.72 0.15 158);
+  --success-foreground: oklch(0.17 0.03 158);
+
+  --destructive: oklch(0.704 0.191 22.2);
+  --destructive-foreground: oklch(0.16 0.02 22.2);
+
+  --border: oklch(1 0 0 / 11%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.71 0.17 288);
+
+  --grid-line: oklch(1 0 0 / 7%);
+  --glow-a: oklch(0.6 0.22 288 / 35%);
+  --glow-b: oklch(0.6 0.19 220 / 25%);
+}
+
+/* Bind the tokens to Tailwind utilities. `inline` keeps the utilities pointing at
+ * `var(--token)` rather than a snapshot, which is what lets `.dark` re-theme the
+ * whole page by redefining the variables. */
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --radius-2xl: calc(var(--radius) + 10px);
+
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-mono:
+    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+@layer base {
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* One focus treatment for every interactive element, so a custom-styled button
+   * is as keyboard-navigable as a bare one. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+  }
+
+  ::selection {
+    background-color: color-mix(in oklch, var(--primary) 24%, transparent);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+    }
+  }
+}
+
+/* ── Decorative utilities ────────────────────────────────────────────────────
+ * Both are purely cosmetic and token-driven, so they follow the theme without a
+ * `dark:` variant anywhere. Delete them and the layout still holds. */
+
+/** Faint graph-paper grid, faded out towards the bottom by a radial mask. */
+@utility bg-grid {
+  background-image:
+    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
+  background-size: 64px 64px;
+  mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 30%, transparent 100%);
+}
+
+/** Soft two-tone aurora, drifting slowly. Sits behind the hero. */
+@utility bg-aurora {
+  background-image:
+    radial-gradient(38rem 22rem at 22% 0%, var(--glow-a), transparent 70%),
+    radial-gradient(32rem 20rem at 78% 12%, var(--glow-b), transparent 70%);
+  animation: aurora-drift 22s ease-in-out infinite alternate;
+}
+
+@keyframes aurora-drift {
+  from {
+    transform: translate3d(-1.5%, 0, 0) scale(1);
+  }
+  to {
+    transform: translate3d(1.5%, 1.5%, 0) scale(1.06);
+  }
+}
+
+/** Hairline card edge with an inner highlight — reads as depth without a shadow. */
+@utility surface {
+  background-color: var(--card);
+  border: 1px solid var(--border);
+  box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 6%);
+}

package/templates/vue/resources/js/Components/Button.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+/**
+ * The app's button styles, in one place — the Vue twin of the React template's
+ * Button, down to the class strings, so the two templates render the same UI.
+ */
+import { computed } from "vue";
+import { cn } from "../lib/cn";
+
+type ButtonVariant = "primary" | "secondary" | "ghost";
+type ButtonSize = "sm" | "md" | "lg";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    class?: string;
+    type?: "button" | "submit" | "reset";
+    disabled?: boolean;
+  }>(),
+  { variant: "primary", size: "md", type: "button", disabled: false },
+);
+
+const BASE =
+  "inline-flex items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap " +
+  "transition-[background-color,border-color,color,transform] duration-150 " +
+  "active:translate-y-px disabled:pointer-events-none disabled:opacity-55";
+
+const VARIANTS: Record<ButtonVariant, string> = {
+  primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary-hover",
+  secondary: "border border-border bg-card text-foreground hover:bg-muted",
+  ghost: "text-muted-foreground hover:bg-muted hover:text-foreground",
+};
+
+const SIZES: Record<ButtonSize, string> = {
+  sm: "h-8 px-3 text-sm",
+  md: "h-10 px-4 text-sm",
+  lg: "h-11 px-5 text-[0.95rem]",
+};
+
+const classes = computed(() =>
+  cn(BASE, VARIANTS[props.variant], SIZES[props.size], props.class),
+);
+</script>
+
+<template>
+  <button :type="type" :disabled="disabled" :class="classes">
+    <slot />
+  </button>
+</template>

package/templates/vue/resources/js/Components/Card.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+/** The app's surface primitive — matches the React template's Card. */
+import { computed } from "vue";
+import { cn } from "../lib/cn";
+
+const props = withDefaults(
+  defineProps<{ class?: string; interactive?: boolean }>(),
+  { interactive: false },
+);
+
+const classes = computed(() =>
+  cn(
+    "surface rounded-xl",
+    props.interactive &&
+      "transition-[transform,border-color,box-shadow] duration-200 hover:-translate-y-0.5 hover:border-primary/40",
+    props.class,
+  ),
+);
+</script>
+
+<template>
+  <div :class="classes"><slot /></div>
+</template>

package/templates/vue/resources/js/Components/FlashToasts.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Auto-dismissing toasts driven by the shared `flash` prop.
+ *
+ * A route calls `http.flash("success", "…")` before redirecting; the flash
+ * survives exactly one request, @zerotal/inertia merges it into every page's
+ * props, and this turns it into a toast. Rendered once in AppLayout, so no page
+ * has to think about it.
+ */
+import { ref, watch } from "vue";
+import { usePage } from "@inertiajs/vue3";
+import { cn } from "../lib/cn";
+import Icon from "./Icon.vue";
+import type { SharedProps } from "../types";
+
+interface Toast {
+  id: number;
+  kind: "success" | "error";
+  message: string;
+}
+
+const TONE: Record<Toast["kind"], string> = {
+  success: "border-success/40 text-success",
+  error: "border-destructive/40 text-destructive",
+};
+
+const page = usePage<SharedProps>();
+const toasts = ref<Toast[]>([]);
+
+watch(
+  () => [page.props.flash?.success, page.props.flash?.error] as const,
+  ([success, error]) => {
+    const next: Toast[] = [];
+    if (success) next.push({ id: Date.now(), kind: "success", message: success });
+    if (error) next.push({ id: Date.now() + 1, kind: "error", message: error });
+    if (next.length === 0) return;
+
+    toasts.value = [...toasts.value, ...next];
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => !next.some((n) => n.id === t.id));
+    }, 5000);
+  },
+  { immediate: true },
+);
+
+function dismiss(id: number): void {
+  toasts.value = toasts.value.filter((t) => t.id !== id);
+}
+</script>
+
+<template>
+  <div
+    v-if="toasts.length"
+    aria-live="polite"
+    class="pointer-events-none fixed inset-x-4 bottom-4 z-50 flex flex-col items-end gap-2 sm:inset-x-auto sm:right-6"
+  >
+    <div
+      v-for="toast in toasts"
+      :key="toast.id"
+      :class="
+        cn(
+          'pointer-events-auto flex w-full max-w-sm items-start gap-3 rounded-xl border bg-card p-3.5 shadow-lg',
+          TONE[toast.kind],
+        )
+      "
+    >
+      <span class="mt-0.5 shrink-0">
+        <Icon :name="toast.kind === 'success' ? 'check' : 'close'" class="size-4.5" />
+      </span>
+      <p class="flex-1 text-sm text-card-foreground">{{ toast.message }}</p>
+      <button
+        type="button"
+        aria-label="Dismiss"
+        class="shrink-0 rounded text-muted-foreground transition-colors hover:text-foreground"
+        @click="dismiss(toast.id)"
+      >
+        <Icon name="close" class="size-4" />
+      </button>
+    </div>
+  </div>
+</template>