@shaferllc/keel 0.82.0 → 0.83.1

package/templates/saas/app/Models/User.ts

@@ -0,0 +1,15 @@
+import { Model } from "@shaferllc/keel/core";
+
+export class User extends Model {
+  static override table = "users";
+  static override fillable = ["name", "email", "password"];
+  // Never serialize these — `hidden` is a denylist on toJSON().
+  static override hidden = ["password", "two_factor_secret", "two_factor_recovery_codes"];
+  static override timestamps = true;
+
+  declare id: number;
+  declare name: string;
+  declare email: string;
+  declare password: string;
+  declare email_verified_at: string | null;
+}

package/templates/saas/app/Providers/AppServiceProvider.ts

@@ -0,0 +1,12 @@
+import { ServiceProvider, setUserProvider } from "@shaferllc/keel/core";
+
+import { User } from "../Models/User.js";
+
+export class AppServiceProvider extends ServiceProvider {
+  register(): void {}
+
+  boot(): void {
+    // How `auth().user()` loads the signed-in user from the id in the session.
+    setUserProvider((id) => User.find(Number(id)));
+  }
+}

package/templates/saas/app/Providers/DatabaseServiceProvider.ts

@@ -0,0 +1,52 @@
+import { ServiceProvider, config, setConnection } from "@shaferllc/keel/core";
+
+/**
+ * Opens the connection every model and query builder reads through — on **Node**.
+ * (In the Worker, worker.ts binds D1 directly and this provider isn't loaded.)
+ *
+ * Switching database is `DB_CONNECTION` and nothing else: no model or query changes,
+ * because they all talk to a `Connection` rather than to a driver.
+ *
+ * `d1` here means the HTTP API rather than the binding — which is what lets
+ * `keel migrate` reach your real D1 database from your laptop and from CI, where no
+ * binding exists.
+ */
+export class DatabaseServiceProvider extends ServiceProvider {
+  async register(): Promise<void> {
+    const name = config<string>("database.default", "sqlite");
+
+    if (name === "d1") {
+      const { d1HttpConnection } = await import("@shaferllc/keel/db/d1-http");
+
+      setConnection(
+        d1HttpConnection({
+          accountId: config<string>("database.connections.d1.accountId", ""),
+          databaseId: config<string>("database.connections.d1.databaseId", ""),
+          apiToken: config<string>("database.connections.d1.apiToken", ""),
+        }),
+        "sqlite",
+      );
+      return;
+    }
+
+    if (name === "postgres") {
+      const { pgConnection } = await import("@shaferllc/keel/db/pg");
+      const { Pool } = await import("pg");
+
+      setConnection(
+        pgConnection(new Pool({ connectionString: config<string>("database.connections.postgres.url", "") })),
+        "postgres",
+      );
+      return;
+    }
+
+    // sqlite (a local file) or turso (libSQL over the network) — same driver.
+    const { libsqlConnection } = await import("@shaferllc/keel/db/libsql");
+    const { createClient } = await import("@libsql/client");
+
+    const url = config<string>(`database.connections.${name}.url`, "file:./database.sqlite");
+    const authToken = config<string>(`database.connections.${name}.authToken`, "");
+
+    setConnection(libsqlConnection(createClient(authToken ? { url, authToken } : { url })), "sqlite");
+  }
+}

package/templates/saas/bin/keel.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env tsx
+/**
+ * The application console. `npm run keel <command>`.
+ *
+ * The commands — serve, routes, repl, migrate:*, every make:* — come from the
+ * framework. This file only says how to build *your* application.
+ */
+import { run } from "@shaferllc/keel/cli";
+
+import { createApplication } from "../bootstrap/app.js";
+
+run(process.argv, { createApplication }).catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

package/templates/saas/bootstrap/app.ts

@@ -0,0 +1,24 @@
+/**
+ * Application bootstrap. Creates the container, boots providers, loads routes.
+ * The server, the console, and the Worker all enter through here.
+ */
+
+import { Application, Router, HttpKernel, type ProviderClass } from "@shaferllc/keel/core";
+
+import { providers as nodeProviders } from "./providers.js";
+import { Kernel } from "../app/Http/Kernel.js";
+import registerWebRoutes from "../routes/web.js";
+
+export async function createApplication(providers: ProviderClass[] = nodeProviders): Promise<Application> {
+  const app = new Application(process.cwd());
+
+  // Binding our Kernel under HttpKernel is what makes `keel serve` use it. Without
+  // this the console falls back to a bare HttpKernel and the global middleware
+  // quietly vanishes.
+  app.singleton(HttpKernel, (container) => new Kernel(container as Application));
+
+  await app.boot(providers);
+  registerWebRoutes(app.make(Router));
+
+  return app;
+}

package/templates/saas/bootstrap/providers.edge.ts

@@ -0,0 +1,18 @@
+import type { ProviderClass } from "@shaferllc/keel/core";
+import { AccountsServiceProvider } from "@shaferllc/keel/accounts";
+import { TeamsServiceProvider } from "@shaferllc/keel/teams";
+import { BillingServiceProvider } from "@shaferllc/keel/billing";
+
+import { AppServiceProvider } from "../app/Providers/AppServiceProvider.js";
+
+/**
+ * Providers for the Worker. `DatabaseServiceProvider` is deliberately absent — it
+ * reaches for `pg` (net/tls), which cannot be bundled for the edge. worker.ts binds
+ * D1 before boot.
+ */
+export const edgeProviders: ProviderClass[] = [
+  AccountsServiceProvider,
+  TeamsServiceProvider,
+  BillingServiceProvider,
+  AppServiceProvider,
+];

package/templates/saas/bootstrap/providers.ts

@@ -0,0 +1,22 @@
+import type { ProviderClass } from "@shaferllc/keel/core";
+import { AccountsServiceProvider } from "@shaferllc/keel/accounts";
+import { TeamsServiceProvider } from "@shaferllc/keel/teams";
+import { BillingServiceProvider } from "@shaferllc/keel/billing";
+
+import { AppServiceProvider } from "../app/Providers/AppServiceProvider.js";
+import { DatabaseServiceProvider } from "../app/Providers/DatabaseServiceProvider.js";
+
+/**
+ * Providers for the Node runtime.
+ *
+ * Teams and billing know nothing about each other. Billing parameterizes what it
+ * charges (`billableModel`), so *this app* points it at teams — the team is the
+ * customer. That seam is what keeps them from becoming one tangled module.
+ */
+export const providers: ProviderClass[] = [
+  DatabaseServiceProvider,
+  AccountsServiceProvider,
+  TeamsServiceProvider,
+  BillingServiceProvider,
+  AppServiceProvider,
+];

package/templates/saas/config/app.ts

@@ -0,0 +1,10 @@
+import { env } from "@shaferllc/keel/core";
+
+export default {
+  name: env("APP_NAME", "Keel App"),
+  env: env("APP_ENV", "local"),
+  debug: env("APP_DEBUG", true),
+  url: env("APP_URL", "http://localhost:3000"),
+  port: env("APP_PORT", 3000),
+  key: env("APP_KEY", ""),
+};

package/templates/saas/config/database.ts

@@ -0,0 +1,42 @@
+import { env } from "@shaferllc/keel/core";
+
+/**
+ * Every driver, out of the box. `DB_CONNECTION` picks one.
+ *
+ * The default is `d1` in production — Cloudflare is where this is meant to run —
+ * and `sqlite` locally, so `npm run dev` needs no wrangler and no account. Both are
+ * SQLite, so one schema and one set of migrations serve both.
+ */
+export default {
+  default: env("DB_CONNECTION", "sqlite"),
+
+  connections: {
+    // Cloudflare D1. Inside the Worker the binding (env.DB) is used directly;
+    // migrations and scripts reach the same database over the HTTP API.
+    d1: {
+      driver: "d1",
+      binding: "DB",
+      accountId: env("CLOUDFLARE_ACCOUNT_ID", ""),
+      databaseId: env("D1_DATABASE_ID", ""),
+      apiToken: env("CLOUDFLARE_API_TOKEN", ""),
+    },
+
+    // A local file. Zero setup — this is what `npm run dev` uses.
+    sqlite: {
+      driver: "libsql",
+      url: env("DB_URL", "file:./database.sqlite"),
+    },
+
+    // libSQL over the network (Turso).
+    turso: {
+      driver: "libsql",
+      url: env("TURSO_URL", ""),
+      authToken: env("TURSO_AUTH_TOKEN", ""),
+    },
+
+    postgres: {
+      driver: "pg",
+      url: env("DATABASE_URL", ""),
+    },
+  },
+};

package/templates/saas/database/migrations/0001_create_users.ts

@@ -0,0 +1,21 @@
+import type { Migration } from "@shaferllc/keel/core";
+
+const migration: Migration = {
+  name: "0001_create_users",
+
+  async up(schema) {
+    await schema.createTable("users", (t) => {
+      t.id();
+      t.string("name");
+      t.string("email").unique();
+      t.string("password");
+      t.timestamps();
+    });
+  },
+
+  async down(schema) {
+    await schema.dropTable("users");
+  },
+};
+
+export default migration;

package/templates/saas/database/migrations/0002_create_projects.ts

@@ -0,0 +1,20 @@
+import type { Migration } from "@shaferllc/keel/core";
+
+const migration: Migration = {
+  name: "0002_create_projects",
+
+  async up(schema) {
+    await schema.createTable("projects", (t) => {
+      t.id();
+      t.integer("team_id");
+      t.string("name");
+      t.timestamps();
+    });
+  },
+
+  async down(schema) {
+    await schema.dropTable("projects");
+  },
+};
+
+export default migration;

package/templates/saas/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "__APP_NAME__",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "keel": "tsx bin/keel.ts",
+    "dev": "npm run css:build && concurrently -k -n css,web \"npm run css:watch\" \"tsx watch bin/keel.ts serve\"",
+    "serve": "tsx bin/keel.ts serve",
+    "dev:edge": "wrangler dev",
+    "deploy": "npm run css:build && wrangler deploy",
+    "migrate": "tsx bin/keel.ts migrate",
+    "css:build": "tailwindcss -i ./resources/css/app.css -o ./public/assets/app.css --minify",
+    "css:watch": "tailwindcss -i ./resources/css/app.css -o ./public/assets/app.css --watch",
+    "test": "tsx --test --test-concurrency=1 tests/*.test.ts",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@hono/node-server": "^1.13.7",
+    "@libsql/client": "^0.14.0",
+    "@shaferllc/keel": "__KEEL_VERSION__",
+    "hono": "^4.6.14",
+    "zod": "^3.24.1",
+    "pg": "^8.13.1"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.2",
+    "wrangler": "^4.0.0",
+    "@types/pg": "^8.11.10",
+    "@tailwindcss/cli": "^4.0.0",
+    "tailwindcss": "^4.0.0",
+    "concurrently": "^9.1.0"
+  }
+}

package/templates/saas/public/.gitkeep

@@ -0,0 +1,2 @@
+Git does not track empty directories, and wrangler needs this one to exist
+(assets.directory). Built CSS lands in ./assets/ and is gitignored.

package/templates/saas/resources/css/app.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/saas/resources/views/auth/forgot.tsx

@@ -0,0 +1,30 @@
+import Layout from "../layout.js";
+
+export default function Forgot({ sent }: { sent: boolean }) {
+  return (
+    <Layout title="Reset your password">
+      <main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 px-6">
+        <h1 class="text-2xl font-semibold tracking-tight">Reset your password</h1>
+
+        {sent ? (
+          // The same answer whether or not that address has an account — otherwise
+          // this page tells a stranger which emails are registered.
+          <p class="rounded-lg bg-slate-100 px-3 py-2 text-sm">
+            If that address has an account, a link is on its way.
+          </p>
+        ) : (
+          <form method="post" action="/forgot-password" class="flex flex-col gap-3">
+            <input
+              class="rounded-lg border border-slate-300 px-3 py-2"
+              type="email"
+              name="email"
+              placeholder="Email"
+              required
+            />
+            <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Send the link</button>
+          </form>
+        )}
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/auth/login.tsx

@@ -0,0 +1,24 @@
+import Layout from "../layout.js";
+
+export default function Login({ error }: { error: string | null }) {
+  return (
+    <Layout title="Log in">
+      <main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 px-6">
+        <h1 class="text-2xl font-semibold tracking-tight">Log in</h1>
+
+        {error && <p class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
+
+        <form method="post" action="/login" class="flex flex-col gap-3">
+          <input class="rounded-lg border border-slate-300 px-3 py-2" type="email" name="email" placeholder="Email" required />
+          <input class="rounded-lg border border-slate-300 px-3 py-2" type="password" name="password" placeholder="Password" required />
+          <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Log in</button>
+        </form>
+
+        <p class="text-sm text-slate-500">
+          <a class="underline" href="/register">Register</a> ·{" "}
+          <a class="underline" href="/forgot-password">Forgot password?</a>
+        </p>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/auth/register.tsx

@@ -0,0 +1,24 @@
+import Layout from "../layout.js";
+
+export default function Register({ error }: { error: string | null }) {
+  return (
+    <Layout title="Register">
+      <main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 px-6">
+        <h1 class="text-2xl font-semibold tracking-tight">Register</h1>
+
+        {error && <p class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
+
+        <form method="post" action="/register" class="flex flex-col gap-3">
+          <input class="rounded-lg border border-slate-300 px-3 py-2" name="name" placeholder="Name" required />
+          <input class="rounded-lg border border-slate-300 px-3 py-2" type="email" name="email" placeholder="Email" required />
+          <input class="rounded-lg border border-slate-300 px-3 py-2" type="password" name="password" placeholder="Password" required />
+          <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Register</button>
+        </form>
+
+        <p class="text-sm text-slate-500">
+          Already have an account? <a class="underline" href="/login">Log in</a>
+        </p>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/auth/two-factor.tsx

@@ -0,0 +1,22 @@
+import Layout from "../layout.js";
+
+export default function TwoFactor({ error }: { error: string | null }) {
+  return (
+    <Layout title="Two-factor">
+      <main class="mx-auto flex min-h-screen max-w-sm flex-col justify-center gap-6 px-6">
+        <h1 class="text-2xl font-semibold tracking-tight">Two-factor</h1>
+
+        {error && <p class="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-700">{error}</p>}
+
+        <form method="post" action="/two-factor" class="flex flex-col gap-3">
+          <input class="rounded-lg border border-slate-300 px-3 py-2" name="code" placeholder="6-digit code, or a recovery code" required autofocus />
+          <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Two-factor</button>
+        </form>
+
+        <p class="text-sm text-slate-500">
+          Your password was accepted. You are not signed in until this code checks out.
+        </p>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/dashboard.tsx

@@ -0,0 +1,20 @@
+import Layout from "./layout.js";
+
+export default function Dashboard({ name, twoFactor }: { name: string; twoFactor: boolean }) {
+  return (
+    <Layout title="Dashboard">
+      <main class="mx-auto max-w-2xl px-6 py-16">
+        <h1 class="text-3xl font-semibold tracking-tight">Hello, {name}.</h1>
+
+        <p class="mt-4 text-slate-600">
+          Two-factor is {twoFactor ? "on" : "off"}.{" "}
+          {!twoFactor && "POST /two-factor/enable to start setting it up."}
+        </p>
+
+        <form method="post" action="/logout" class="mt-8">
+          <button class="rounded-lg border border-slate-300 px-4 py-2">Log out</button>
+        </form>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/layout.tsx

@@ -0,0 +1,15 @@
+import type { PropsWithChildren } from "hono/jsx";
+
+export default function Layout({ title, children }: PropsWithChildren<{ title: string }>) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>{title}</title>
+        <link rel="stylesheet" href="/assets/app.css" />
+      </head>
+      <body class="min-h-screen bg-slate-50 text-slate-900 antialiased">{children}</body>
+    </html>
+  );
+}

package/templates/saas/resources/views/teams/index.tsx

@@ -0,0 +1,85 @@
+import Layout from "../layout.js";
+
+interface Props {
+  teams: { id: number; name: string }[];
+  current: number | null;
+  projects: { id: number; name: string }[];
+  invitations: { id: number; email: string; role: string }[];
+}
+
+export default function Teams({ teams, current, projects, invitations }: Props) {
+  return (
+    <Layout title="Teams">
+      <main class="mx-auto max-w-2xl px-6 py-16">
+        <h1 class="text-3xl font-semibold tracking-tight">Teams</h1>
+
+        <section class="mt-8">
+          <h2 class="text-sm font-medium uppercase tracking-wide text-slate-500">Your teams</h2>
+
+          <ul class="mt-3 flex flex-col gap-2">
+            {teams.map((team) => (
+              <li class="flex items-center justify-between rounded-lg border border-slate-200 bg-white px-4 py-3">
+                <span>
+                  {team.name} {team.id === current && <em class="text-slate-500">— current</em>}
+                </span>
+
+                {team.id !== current && (
+                  <form method="post" action="/teams/switch">
+                    <input type="hidden" name="team_id" value={String(team.id)} />
+                    <button class="text-sm underline">Switch</button>
+                  </form>
+                )}
+              </li>
+            ))}
+          </ul>
+
+          <form method="post" action="/teams" class="mt-3 flex gap-2">
+            <input class="flex-1 rounded-lg border border-slate-300 px-3 py-2" name="name" placeholder="New team name" required />
+            <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Create</button>
+          </form>
+        </section>
+
+        <section class="mt-10">
+          <h2 class="text-sm font-medium uppercase tracking-wide text-slate-500">
+            Projects in this team
+          </h2>
+          <p class="mt-1 text-sm text-slate-500">
+            Scoped automatically — another team's project isn't just hidden, it's a 404.
+          </p>
+
+          <ul class="mt-3 flex flex-col gap-2">
+            {projects.map((project) => (
+              <li class="rounded-lg border border-slate-200 bg-white px-4 py-3">{project.name}</li>
+            ))}
+          </ul>
+
+          <form method="post" action="/projects" class="mt-3 flex gap-2">
+            <input class="flex-1 rounded-lg border border-slate-300 px-3 py-2" name="name" placeholder="New project" required />
+            <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Add</button>
+          </form>
+        </section>
+
+        <section class="mt-10">
+          <h2 class="text-sm font-medium uppercase tracking-wide text-slate-500">Invitations</h2>
+
+          <ul class="mt-3 flex flex-col gap-2">
+            {invitations.map((invitation) => (
+              <li class="rounded-lg border border-slate-200 bg-white px-4 py-3 text-sm">
+                {invitation.email} · {invitation.role}
+              </li>
+            ))}
+          </ul>
+
+          <form method="post" action="/teams/invite" class="mt-3 flex gap-2">
+            <input class="flex-1 rounded-lg border border-slate-300 px-3 py-2" type="email" name="email" placeholder="Email" required />
+            <select class="rounded-lg border border-slate-300 px-3 py-2" name="role">
+              <option value="member">Member</option>
+              <option value="admin">Admin</option>
+            </select>
+            <button class="rounded-lg bg-slate-900 px-4 py-2 text-white">Invite</button>
+          </form>
+        </section>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/resources/views/welcome.tsx

@@ -0,0 +1,29 @@
+import Layout from "./layout.js";
+
+export default function Welcome({ signedIn }: { signedIn: boolean }) {
+  return (
+    <Layout title="Keel">
+      <main class="mx-auto flex min-h-screen max-w-2xl flex-col justify-center gap-6 px-6">
+        <h1 class="text-4xl font-semibold tracking-tight">Keel</h1>
+        <p class="text-slate-600">Sessions, password reset, and two-factor are already wired.</p>
+
+        <div class="flex gap-3">
+          {signedIn ? (
+            <a class="rounded-lg bg-slate-900 px-4 py-2 text-white" href="/dashboard">
+              Dashboard
+            </a>
+          ) : (
+            <>
+              <a class="rounded-lg bg-slate-900 px-4 py-2 text-white" href="/login">
+                Log in
+              </a>
+              <a class="rounded-lg border border-slate-300 px-4 py-2" href="/register">
+                Register
+              </a>
+            </>
+          )}
+        </div>
+      </main>
+    </Layout>
+  );
+}

package/templates/saas/routes/web.ts

@@ -0,0 +1,44 @@
+import type { Router, Ctx } from "@shaferllc/keel/core";
+import { auth } from "@shaferllc/keel/core";
+
+import { AuthController } from "../app/Controllers/AuthController.js";
+import { TeamController } from "../app/Controllers/TeamController.js";
+import { DashboardController } from "../app/Controllers/DashboardController.js";
+import { HomeController } from "../app/Controllers/HomeController.js";
+
+/** Send guests to the login page. */
+const authenticated = async (c: Ctx, next: () => Promise<void>) => {
+  if (auth().guest()) return c.redirect("/login");
+  await next();
+};
+
+export default function routes(router: Router): void {
+  router.get("/", [HomeController, "index"]);
+  router.get("/health", (c: Ctx) => c.json({ ok: true }));
+
+  router.get("/login", [AuthController, "showLogin"]).name("login");
+  router.post("/login", [AuthController, "login"]);
+
+  router.get("/two-factor", [AuthController, "showTwoFactor"]);
+  router.post("/two-factor", [AuthController, "twoFactor"]);
+
+  router.get("/register", [AuthController, "showRegister"]).name("register");
+  router.post("/register", [AuthController, "register"]);
+
+  router.post("/logout", [AuthController, "logout"]).name("logout");
+
+  router.get("/forgot-password", [AuthController, "showForgot"]);
+  router.post("/forgot-password", [AuthController, "forgot"]);
+  router.post("/reset-password", [AuthController, "reset"]);
+
+  router.get("/dashboard", [DashboardController, "index"]).middleware(authenticated).name("dashboard");
+
+  router.get("/teams", [TeamController, "index"]).middleware(authenticated).name("teams");
+  router.post("/teams", [TeamController, "store"]).middleware(authenticated);
+  router.post("/teams/switch", [TeamController, "switch"]).middleware(authenticated);
+  router.post("/teams/invite", [TeamController, "invite"]).middleware(authenticated);
+  router.get("/invitations/:token", [TeamController, "accept"]).middleware(authenticated);
+
+  router.post("/projects", [TeamController, "createProject"]).middleware(authenticated);
+  router.post("/two-factor/enable", [DashboardController, "startTwoFactor"]).middleware(authenticated);
+}