create-seiro 0.1.0

package/template/auth/server.ts

@@ -0,0 +1,160 @@
+import type { Sql } from "postgres";
+import type { Server } from "seiro";
+import type {
+  User,
+  AuthResult,
+  AuthCommands,
+  AuthQueries,
+  AuthEvents,
+} from "./types";
+
+const JWT_SECRET =
+  process.env.JWT_SECRET ?? "seiro-dev-secret-change-in-production";
+const JWT_EXPIRY = process.env.JWT_EXPIRY ?? "7d";
+
+// DB row shape (snake_case from postgres)
+type UserRow = { id: number; email: string; created_at: string };
+
+function toUser(row: UserRow): User {
+  return { id: row.id, email: row.email, createdAt: row.created_at };
+}
+
+// Simple JWT implementation using Bun's native crypto
+async function signToken(userId: number): Promise<string> {
+  const header = { alg: "HS256", typ: "JWT" };
+  const now = Math.floor(Date.now() / 1000);
+  const expiry = parseExpiry(JWT_EXPIRY);
+  const payload = { sub: userId, iat: now, exp: now + expiry };
+
+  const encoder = new TextEncoder();
+  const headerB64 = btoa(JSON.stringify(header)).replace(/=/g, "");
+  const payloadB64 = btoa(JSON.stringify(payload)).replace(/=/g, "");
+  const data = `${headerB64}.${payloadB64}`;
+
+  const key = await crypto.subtle.importKey(
+    "raw",
+    encoder.encode(JWT_SECRET),
+    { name: "HMAC", hash: "SHA-256" },
+    false,
+    ["sign"],
+  );
+  const signature = await crypto.subtle.sign("HMAC", key, encoder.encode(data));
+  const signatureB64 = btoa(
+    String.fromCharCode(...new Uint8Array(signature)),
+  ).replace(/=/g, "");
+
+  return `${data}.${signatureB64}`;
+}
+
+export async function verifyToken(token: string): Promise<number | null> {
+  try {
+    const [headerB64, payloadB64, signatureB64] = token.split(".");
+    if (!headerB64 || !payloadB64 || !signatureB64) return null;
+
+    const encoder = new TextEncoder();
+    const data = `${headerB64}.${payloadB64}`;
+
+    const key = await crypto.subtle.importKey(
+      "raw",
+      encoder.encode(JWT_SECRET),
+      { name: "HMAC", hash: "SHA-256" },
+      false,
+      ["verify"],
+    );
+
+    const signature = Uint8Array.from(atob(signatureB64), (c) =>
+      c.charCodeAt(0),
+    );
+    const valid = await crypto.subtle.verify(
+      "HMAC",
+      key,
+      signature,
+      encoder.encode(data),
+    );
+    if (!valid) return null;
+
+    const payload = JSON.parse(atob(payloadB64));
+    if (payload.exp < Math.floor(Date.now() / 1000)) return null;
+
+    return payload.sub;
+  } catch {
+    return null;
+  }
+}
+
+function parseExpiry(expiry: string): number {
+  const match = expiry.match(/^(\d+)([smhd])$/);
+  if (!match || !match[1] || !match[2]) return 7 * 24 * 60 * 60; // default 7 days
+  const value = parseInt(match[1], 10);
+  const unit = match[2];
+  switch (unit) {
+    case "s":
+      return value;
+    case "m":
+      return value * 60;
+    case "h":
+      return value * 60 * 60;
+    case "d":
+      return value * 24 * 60 * 60;
+    default:
+      return 7 * 24 * 60 * 60;
+  }
+}
+
+export function register<
+  C extends AuthCommands,
+  Q extends AuthQueries,
+  E extends AuthEvents,
+>(server: Server<C, Q, E>, sql: Sql) {
+  // Send profile on connect
+  server.onOpen(async (ctx) => {
+    if (!ctx.userId) {
+      ctx.send({ profile: null });
+      return;
+    }
+    const [row] = await sql<[{ query_auth_profile: UserRow }?]>`
+      SELECT query_auth_profile(${ctx.userId}, ${sql.json({})})
+    `;
+    if (row) {
+      ctx.send({ profile: toUser(row.query_auth_profile) });
+    } else {
+      ctx.send({ profile: null });
+    }
+  });
+
+  server.command("auth.register", async (data, ctx) => {
+    const [row] = await sql<[{ result: UserRow }]>`
+      SELECT cmd_auth_register(${sql.json(data)}) as result
+    `;
+    if (!row?.result) throw new Error("Registration failed");
+
+    const user = toUser(row.result);
+    const token = await signToken(user.id);
+    ctx.setUserId(user.id);
+    return { token, user } as AuthResult;
+  });
+
+  server.command("auth.login", async (data, ctx) => {
+    const [row] = await sql<[{ result: UserRow }]>`
+      SELECT cmd_auth_login(${sql.json(data)}) as result
+    `;
+    if (!row?.result) throw new Error("Invalid email or password");
+
+    const user = toUser(row.result);
+    const token = await signToken(user.id);
+    ctx.setUserId(user.id);
+    return { token, user } as AuthResult;
+  });
+
+  server.query("auth.profile", async function* (_params, ctx) {
+    if (!ctx.userId) throw new Error("Not authenticated");
+    const rows = await sql<{ query_auth_profile: UserRow }[]>`
+      SELECT query_auth_profile(${ctx.userId}, ${sql.json({})})
+    `;
+    for (const row of rows) {
+      yield toUser(row.query_auth_profile);
+    }
+  });
+}
+
+export const channels: string[] = [];

package/template/auth/types.ts

@@ -0,0 +1,23 @@
+import type { Command, Query } from "seiro";
+
+export type User = {
+  id: number;
+  email: string;
+  createdAt: string;
+};
+
+export type AuthResult = {
+  token: string;
+  user: User;
+};
+
+export type AuthCommands = {
+  "auth.register": Command<{ email: string; password: string }, AuthResult>;
+  "auth.login": Command<{ email: string; password: string }, AuthResult>;
+};
+
+export type AuthQueries = {
+  "auth.profile": Query<void, User>;
+};
+
+export type AuthEvents = Record<string, never>;

package/template/components/auth.ts

@@ -0,0 +1,120 @@
+import { signal, effect } from "seiro/client";
+import type { Client } from "seiro";
+import type { Commands, Queries, Events, User } from "../types";
+
+type AppClient = Client<Commands, Queries, Events>;
+
+// State
+export const user = signal<User | null>(null);
+const authError = signal<string | null>(null);
+
+let client: AppClient;
+
+export function initAuth(c: AppClient, profile: User | null) {
+  client = c;
+  user.value = profile;
+}
+
+function handleAuthSuccess(result: { token: string; user: User }) {
+  client.setToken(result.token);
+  user.value = result.user;
+  authError.value = null;
+}
+
+export function logout() {
+  client.logout();
+  user.value = null;
+}
+
+class AuthForm extends HTMLElement {
+  private userView!: HTMLElement;
+  private formsView!: HTMLElement;
+  private emailSpan!: HTMLElement;
+  private errorDiv!: HTMLElement;
+
+  connectedCallback() {
+    this.innerHTML = `
+      <div class="auth-user hidden items-center gap-4">
+        <span class="text-zinc-300">Logged in as <strong class="user-email text-white"></strong></span>
+        <button id="logout" class="bg-zinc-700 hover:bg-zinc-600 text-white px-3 py-1 rounded text-sm">Logout</button>
+      </div>
+      <div class="auth-forms space-y-4">
+        <form id="login-form" class="flex flex-wrap items-center gap-2">
+          <span class="text-zinc-400 w-20">Login</span>
+          <input name="email" type="email" placeholder="Email" value="test@example.com" required
+            class="bg-zinc-800 border border-zinc-700 rounded px-3 py-1.5 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500" />
+          <input name="password" type="password" placeholder="Password" value="password123" required
+            class="bg-zinc-800 border border-zinc-700 rounded px-3 py-1.5 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500" />
+          <button type="submit" class="bg-zinc-700 hover:bg-zinc-600 text-white px-4 py-1.5 rounded text-sm">Login</button>
+        </form>
+        <form id="register-form" class="flex flex-wrap items-center gap-2">
+          <span class="text-zinc-400 w-20">Register</span>
+          <input name="email" type="email" placeholder="Email" value="test@example.com" required
+            class="bg-zinc-800 border border-zinc-700 rounded px-3 py-1.5 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500" />
+          <input name="password" type="password" placeholder="Password" value="password123" required
+            class="bg-zinc-800 border border-zinc-700 rounded px-3 py-1.5 text-sm text-white placeholder-zinc-500 focus:outline-none focus:border-zinc-500" />
+          <button type="submit" class="bg-zinc-700 hover:bg-zinc-600 text-white px-4 py-1.5 rounded text-sm">Register</button>
+        </form>
+        <div class="auth-error hidden text-red-400 text-sm"></div>
+      </div>
+    `;
+
+    this.userView = this.querySelector(".auth-user")!;
+    this.formsView = this.querySelector(".auth-forms")!;
+    this.emailSpan = this.querySelector(".user-email")!;
+    this.errorDiv = this.querySelector(".auth-error")!;
+
+    // Update visibility based on state
+    effect(() => {
+      if (user.value) {
+        this.userView.classList.remove("hidden");
+        this.userView.classList.add("flex");
+        this.formsView.classList.add("hidden");
+        this.emailSpan.textContent = user.value.email;
+      } else {
+        this.userView.classList.add("hidden");
+        this.userView.classList.remove("flex");
+        this.formsView.classList.remove("hidden");
+      }
+    });
+
+    effect(() => {
+      if (authError.value) {
+        this.errorDiv.classList.remove("hidden");
+        this.errorDiv.textContent = authError.value;
+      } else {
+        this.errorDiv.classList.add("hidden");
+      }
+    });
+
+    this.addEventListener("submit", (e) => {
+      e.preventDefault();
+      const form = e.target as HTMLFormElement;
+      const data = new FormData(form);
+      const email = data.get("email") as string;
+      const password = data.get("password") as string;
+
+      const callbacks = {
+        onSuccess: handleAuthSuccess,
+        onError: (err: string) => {
+          authError.value = err;
+        },
+      };
+
+      if (form.id === "login-form") {
+        client.cmd("auth.login", { email, password }, callbacks);
+      } else if (form.id === "register-form") {
+        client.cmd("auth.register", { email, password }, callbacks);
+      }
+    });
+
+    this.addEventListener("click", (e) => {
+      const target = e.target as HTMLElement;
+      if (target.id === "logout") {
+        logout();
+      }
+    });
+  }
+}
+
+customElements.define("auth-form", AuthForm);

package/template/components/shared/modal.ts

@@ -0,0 +1,205 @@
+// Modal utilities - styled overlays, no browser dialogs
+
+export function showToast(message: string, duration = 3000): void {
+  const toast = document.createElement("div");
+  toast.style.cssText =
+    "position:fixed;bottom:1rem;left:50%;transform:translateX(-50%);background:#27272a;border:1px solid #3f3f46;padding:0.5rem 1rem;border-radius:0.5rem;color:#f4f4f5;z-index:9999";
+  toast.textContent = message;
+
+  document.body.appendChild(toast);
+  setTimeout(() => toast.remove(), duration);
+}
+
+// Simple modal for text input - replaces window.prompt()
+
+export function showInputModal(
+  title: string,
+  initialValue = "",
+): Promise<string | null> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.style.cssText =
+      "position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;background:rgba(0,0,0,0.5)";
+    overlay.innerHTML = `
+      <div style="background:#27272a;color:#f4f4f5;padding:1.5rem;border-radius:0.5rem;min-width:18rem">
+        <h2 style="font-size:1.125rem;font-weight:bold;margin-bottom:1rem">${title}</h2>
+        <input data-input style="width:100%;background:#3f3f46;border:1px solid #52525b;border-radius:0.375rem;padding:0.5rem 0.75rem;color:#f4f4f5;outline:none;margin-bottom:1rem" />
+        <div style="display:flex;gap:0.5rem">
+          <button data-cancel style="flex:1;background:#3f3f46;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">Cancel</button>
+          <button data-ok style="flex:1;background:#52525b;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">OK</button>
+        </div>
+      </div>
+    `;
+
+    const input = overlay.querySelector<HTMLInputElement>("[data-input]")!;
+    input.value = initialValue;
+
+    const cancelBtn =
+      overlay.querySelector<HTMLButtonElement>("[data-cancel]")!;
+    const okBtn = overlay.querySelector<HTMLButtonElement>("[data-ok]")!;
+
+    const close = (value: string | null) => {
+      overlay.remove();
+      resolve(value);
+    };
+
+    const submit = () => {
+      const value = input.value.trim();
+      close(value || null);
+    };
+
+    okBtn.onclick = submit;
+    cancelBtn.onclick = () => close(null);
+    input.onkeydown = (e) => {
+      if (e.key === "Enter") submit();
+      if (e.key === "Escape") close(null);
+    };
+
+    // Close on backdrop click
+    overlay.onclick = (e) => {
+      if (e.target === overlay) close(null);
+    };
+
+    document.body.appendChild(overlay);
+    queueMicrotask(() => {
+      input.focus();
+      input.select();
+    });
+  });
+}
+
+// Form modal with multiple fields
+
+export type FormField = {
+  name: string;
+  label: string;
+  placeholder?: string;
+  required?: boolean;
+};
+
+export function showFormModal(
+  title: string,
+  fields: FormField[],
+): Promise<Record<string, string> | null> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.style.cssText =
+      "position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;background:rgba(0,0,0,0.5)";
+
+    const fieldsHtml = fields
+      .map(
+        (f) => `
+      <div style="display:flex;flex-direction:column;gap:0.25rem">
+        <label style="font-size:0.875rem;color:#a1a1aa">${f.label}${f.required ? " *" : ""}</label>
+        <input name="${f.name}" placeholder="${f.placeholder || ""}" ${f.required ? "required" : ""}
+          style="width:100%;background:#3f3f46;border:1px solid #52525b;border-radius:0.375rem;padding:0.5rem 0.75rem;color:#f4f4f5;outline:none" />
+      </div>
+    `,
+      )
+      .join("");
+
+    overlay.innerHTML = `
+      <form style="background:#27272a;color:#f4f4f5;padding:1.5rem;border-radius:0.5rem;min-width:20rem">
+        <h2 style="font-size:1.125rem;font-weight:bold;margin-bottom:1rem">${title}</h2>
+        <div style="display:flex;flex-direction:column;gap:0.75rem;margin-bottom:1rem">
+          ${fieldsHtml}
+        </div>
+        <div style="display:flex;gap:0.5rem">
+          <button type="button" data-cancel style="flex:1;background:#3f3f46;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">Cancel</button>
+          <button type="submit" style="flex:1;background:#52525b;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">OK</button>
+        </div>
+      </form>
+    `;
+
+    const form = overlay.querySelector<HTMLFormElement>("form")!;
+    const cancelBtn =
+      overlay.querySelector<HTMLButtonElement>("[data-cancel]")!;
+    const firstInput = form.querySelector<HTMLInputElement>("input")!;
+
+    const close = (value: Record<string, string> | null) => {
+      overlay.remove();
+      resolve(value);
+    };
+
+    form.onsubmit = (e) => {
+      e.preventDefault();
+      const data = new FormData(form);
+      const result: Record<string, string> = {};
+      for (const field of fields) {
+        result[field.name] = (data.get(field.name) as string)?.trim() || "";
+      }
+      // Check required fields
+      for (const field of fields) {
+        if (field.required && !result[field.name]) return;
+      }
+      close(result);
+    };
+
+    cancelBtn.onclick = () => close(null);
+
+    overlay.onclick = (e) => {
+      if (e.target === overlay) close(null);
+    };
+
+    overlay.onkeydown = (e) => {
+      if (e.key === "Escape") close(null);
+    };
+
+    document.body.appendChild(overlay);
+    queueMicrotask(() => firstInput?.focus());
+  });
+}
+
+// Simple confirmation modal - replaces window.confirm()
+
+export function showConfirmModal(
+  title: string,
+  message: string,
+): Promise<boolean> {
+  return new Promise((resolve) => {
+    const overlay = document.createElement("div");
+    overlay.style.cssText =
+      "position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:9999;background:rgba(0,0,0,0.5)";
+    overlay.innerHTML = `
+      <div style="background:#27272a;color:#f4f4f5;padding:1.5rem;border-radius:0.5rem;min-width:18rem">
+        <h2 style="font-size:1.125rem;font-weight:bold;margin-bottom:0.75rem">${title}</h2>
+        <p style="color:#a1a1aa;margin-bottom:1rem">${message}</p>
+        <div style="display:flex;gap:0.5rem">
+          <button data-cancel style="flex:1;background:#3f3f46;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">Cancel</button>
+          <button data-ok style="flex:1;background:#b91c1c;padding:0.5rem 1rem;border-radius:0.375rem;cursor:pointer;border:none;color:#f4f4f5">Confirm</button>
+        </div>
+      </div>
+    `;
+
+    const cancelBtn =
+      overlay.querySelector<HTMLButtonElement>("[data-cancel]")!;
+    const okBtn = overlay.querySelector<HTMLButtonElement>("[data-ok]")!;
+
+    let closed = false;
+    const close = (value: boolean) => {
+      if (closed) return;
+      closed = true;
+      document.removeEventListener("keydown", handleKey);
+      overlay.remove();
+      resolve(value);
+    };
+
+    okBtn.onclick = () => close(true);
+    cancelBtn.onclick = () => close(false);
+
+    // Close on backdrop click
+    overlay.onclick = (e) => {
+      if (e.target === overlay) close(false);
+    };
+
+    // Handle keyboard
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") close(false);
+      if (e.key === "Enter") close(true);
+    };
+    document.addEventListener("keydown", handleKey);
+
+    document.body.appendChild(overlay);
+    queueMicrotask(() => okBtn.focus());
+  });
+}

package/template/components/shared/router.ts

@@ -0,0 +1,11 @@
+import { signal } from "seiro/client";
+
+export const route = signal(window.location.hash || "#/");
+
+window.addEventListener("hashchange", () => {
+  route.value = window.location.hash || "#/";
+});
+
+export function navigate(hash: string) {
+  window.location.hash = hash;
+}

package/template/compose.test.yml

@@ -0,0 +1,18 @@
+name: seiro-test
+
+services:
+  postgres:
+    image: postgres:17-alpine
+    environment:
+      POSTGRES_USER: seiro
+      POSTGRES_PASSWORD: seiro
+      POSTGRES_DB: seiro_test
+    ports:
+      - "5433:5432"
+    volumes:
+      - ./init_db:/docker-entrypoint-initdb.d:ro
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U seiro"]
+      interval: 2s
+      timeout: 5s
+      retries: 10

package/template/compose.yml

@@ -0,0 +1,18 @@
+name: seiro-dev
+
+services:
+  postgres:
+    image: postgres:17-alpine
+    environment:
+      POSTGRES_USER: seiro
+      POSTGRES_PASSWORD: seiro
+      POSTGRES_DB: seiro
+    ports:
+      - "5432:5432"
+    volumes:
+      - ./init_db:/docker-entrypoint-initdb.d:ro
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U seiro"]
+      interval: 2s
+      timeout: 5s
+      retries: 10

package/template/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Seiro App</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-zinc-900 text-zinc-100 min-h-screen">
+  <header class="border-b border-zinc-800 p-4">
+    <div class="max-w-6xl mx-auto flex items-center justify-between">
+      <h1 class="text-xl font-bold">Seiro App</h1>
+      <auth-form></auth-form>
+    </div>
+  </header>
+  <main class="max-w-6xl mx-auto p-4">
+    <div class="text-center py-12">
+      <p class="text-zinc-400">Loading...</p>
+    </div>
+  </main>
+  <script type="module" src="/app.js"></script>
+</body>
+</html>

package/template/init_db/01_extensions.sql

@@ -0,0 +1,2 @@
+-- Enable extensions
+CREATE EXTENSION IF NOT EXISTS pgcrypto;

package/template/init_db/02_auth_tables.sql

@@ -0,0 +1,7 @@
+-- Users table
+CREATE TABLE IF NOT EXISTS users (
+  id SERIAL PRIMARY KEY,
+  email TEXT UNIQUE NOT NULL,
+  password TEXT NOT NULL,
+  created_at TIMESTAMPTZ NOT NULL DEFAULT now()
+);

package/template/init_db/03_auth_functions.sql

@@ -0,0 +1,55 @@
+-- Auth functions
+
+CREATE OR REPLACE FUNCTION cmd_auth_register(data JSONB)
+RETURNS JSONB AS $$
+DECLARE
+  v_user RECORD;
+BEGIN
+  INSERT INTO users (email, password)
+  VALUES (
+    data->>'email',
+    crypt(data->>'password', gen_salt('bf'))
+  )
+  RETURNING id, email, created_at INTO v_user;
+
+  RETURN jsonb_build_object(
+    'id', v_user.id,
+    'email', v_user.email,
+    'created_at', v_user.created_at
+  );
+EXCEPTION
+  WHEN unique_violation THEN
+    RAISE EXCEPTION 'Email already registered';
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION cmd_auth_login(data JSONB)
+RETURNS JSONB AS $$
+DECLARE
+  v_user RECORD;
+BEGIN
+  SELECT id, email, created_at INTO v_user
+  FROM users
+  WHERE email = data->>'email'
+    AND password = crypt(data->>'password', password);
+
+  IF v_user IS NULL THEN
+    RAISE EXCEPTION 'Invalid email or password';
+  END IF;
+
+  RETURN jsonb_build_object(
+    'id', v_user.id,
+    'email', v_user.email,
+    'created_at', v_user.created_at
+  );
+END;
+$$ LANGUAGE plpgsql;
+
+CREATE OR REPLACE FUNCTION query_auth_profile(p_user_id INT, params JSONB DEFAULT '{}')
+RETURNS SETOF JSONB AS $$
+  SELECT jsonb_build_object(
+    'id', id,
+    'email', email,
+    'created_at', created_at
+  ) FROM users WHERE id = p_user_id;
+$$ LANGUAGE sql;

package/template/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "my-seiro-app",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "bun run --hot server.ts",
+    "check": "tsc --noEmit",
+    "db": "docker compose down -v && docker compose up -d",
+    "down": "docker compose down -v",
+    "test": "bun test server.test.ts"
+  },
+  "dependencies": {
+    "seiro": "^0.1.0",
+    "@preact/signals-core": "^1.12.2",
+    "postgres": "^3.4.8"
+  },
+  "devDependencies": {
+    "@types/bun": "latest",
+    "typescript": "^5.9.3"
+  }
+}