beeeeg update

.dockerignore

@@ -0,0 +1,10 @@
+.git
+.env
+.env.*
+!.env.example
+node_modules
+.svelte-kit
+build
+test-results
+playwright-report
+*.log

.env.example

@@ -0,0 +1,30 @@
+# PostgreSQL connection (server only)
+DB_URL=postgresql://postgres:postgres@localhost:5432/personal_dev
+
+# Use the exact public origin, including scheme and port. Set the same value for both.
+ORIGIN=http://localhost:5173
+BETTER_AUTH_URL=http://localhost:5173
+# Generate with: openssl rand -base64 48
+BETTER_AUTH_SECRET=
+
+# Optional Google login; callback: <BETTER_AUTH_URL>/api/auth/callback/google
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Optional osu! login; callback: <BETTER_AUTH_URL>/api/auth/callback/osu
+# These can also serve the existing beatmap finder.
+OSU_CLIENT_ID=
+OSU_CLIENT_SECRET=
+SPOTIFY_CLIENT_ID=
+SPOTIFY_CLIENT_SECRET=
+
+# Public browser key for Animaldex map tiles.
+PUBLIC_MAPTILER_API_KEY=
+
+# Cloudflare R2, shared by Animaldex and admin-uploaded list pictures.
+# R2_PUBLIC_URL is the public bucket/custom-domain base URL (without a trailing slash).
+R2_ACCOUNT_ID=
+R2_ACCESS_KEY_ID=
+R2_SECRET_ACCESS_KEY=
+R2_BUCKET=
+R2_PUBLIC_URL=

.gitea/workflows/build.yml

@@ -1,40 +1,52 @@
-name: build
+name: Test and deploy staging
 on:
   push:
-    branches: [main, staging]
+    branches: [staging]
 
 jobs:
-  build:
+  staging:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
 
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.4.0
+      - name: Install and test
+        run: |
+          bun install --frozen-lockfile
+          bun run test:unit -- --run
+
+      # Build once. The same SHA-tagged image stays on the deployment host for
+      # one-click promotion to production; the production workflow never rebuilds it.
       - uses: docker/build-push-action@v5
         with:
           context: .
           push: false
           load: true
           tags: git.stanrunge.dev/stan/personal-website:${{ github.sha }}
+          build-args: |
+            GIT_SHA=${{ github.sha }}
 
-  deploy:
+      - name: Configure deployment SSH key
-    needs: build
+        env:
-    runs-on: ubuntu-latest
+          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
-    steps:
-      - name: setup key
         run: |
-          mkdir -p ~/.ssh
+          set -euo pipefail
-          echo "${{ secrets.DEPLOY_KEY }}" > ~/.ssh/id_ed25519
+          install -d -m 700 ~/.ssh
+          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
           chmod 600 ~/.ssh/id_ed25519
           ssh-keyscan -H 172.17.0.1 >> ~/.ssh/known_hosts
 
-      - name: pick target
+      - name: Transfer tested image
         run: |
-          if [ "${{ github.ref_name }}" = "main" ]; then
+          set -euo pipefail
-            echo "DIR=/opt/personal-website" >> $GITHUB_ENV
+          image="git.stanrunge.dev/stan/personal-website:${{ github.sha }}"
-          else
+          docker save "$image" | ssh -o BatchMode=yes deploy@172.17.0.1 'sudo docker load'
-            echo "DIR=/opt/personal-website-staging" >> $GITHUB_ENV
-          fi
 
-      - name: deploy
+      - name: Deploy staging
         run: |
-          ssh deploy@172.17.0.1 "echo IMAGE_TAG=${{ github.sha }} | sudo tee $DIR/.env && sudo docker compose -f $DIR/compose.prod.yml up -d"
+          set -euo pipefail
+          ssh -o BatchMode=yes deploy@172.17.0.1 \
+            "bash -s -- '${{ github.sha }}' '/opt/personal-website-staging' 'https://staging.stanrunge.dev'" \
+            < scripts/deploy-remote.sh

.gitea/workflows/deploy-production.yml

@@ -0,0 +1,41 @@
+name: Deploy production
+on:
+  workflow_dispatch:
+
+jobs:
+  promote:
+    runs-on: ubuntu-latest
+    steps:
+      # Always test the staging branch, regardless of which branch the button
+      # appears on in Gitea's Actions UI.
+      - uses: actions/checkout@v4
+        with:
+          ref: staging
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: 1.4.0
+      - name: Check staging source
+        run: |
+          bun install --frozen-lockfile
+          bun run test:unit -- --run
+
+      - name: Configure deployment SSH key
+        env:
+          DEPLOY_KEY: ${{ secrets.DEPLOY_KEY }}
+        run: |
+          set -euo pipefail
+          install -d -m 700 ~/.ssh
+          printf '%s\n' "$DEPLOY_KEY" > ~/.ssh/id_ed25519
+          chmod 600 ~/.ssh/id_ed25519
+          ssh-keyscan -H 172.17.0.1 >> ~/.ssh/known_hosts
+
+      - name: Promote the exact staging image
+        run: |
+          set -euo pipefail
+          commit=$(git rev-parse HEAD)
+          ssh -o BatchMode=yes deploy@172.17.0.1 "bash -s -- '$commit'" \
+            < scripts/verify-staging-image.sh
+          ssh -o BatchMode=yes deploy@172.17.0.1 \
+            "bash -s -- '$commit' '/opt/personal-website' 'https://stanrunge.dev'" \
+            < scripts/deploy-remote.sh

.gitignore

@@ -21,3 +21,7 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 .vscode/
+
+# Browser test output
+/test-results/
+/playwright-report/

.prettierignore

@@ -2,3 +2,6 @@
 package-lock.json
 pnpm-lock.yaml
 yarn.lock
+
+# Generated pinned catalog
+data/pokemon-catalog.json

Dockerfile

@@ -1,15 +1,22 @@
-FROM oven/bun AS builder
+FROM oven/bun:1.4.0 AS builder
 WORKDIR /app
 COPY package.json bun.lock ./
-RUN bun install
+RUN bun install --frozen-lockfile
 COPY . .
 RUN bun run build
 
-FROM oven/bun
+FROM oven/bun:1.4.0
 WORKDIR /app
+ARG GIT_SHA=dev
+ENV APP_VERSION=$GIT_SHA
 COPY --from=builder /app/node_modules ./node_modules
 COPY --from=builder /app/build ./build
+COPY --from=builder /app/scripts ./scripts
+COPY --from=builder /app/data ./data
+COPY --from=builder /app/src/lib/server/db/schema ./src/lib/server/db/schema
+COPY --from=builder /app/src/lib/availability.ts ./src/lib/availability.ts
 COPY package.json ./
 EXPOSE 3000
 ENV NODE_ENV=production
+ENV BODY_SIZE_LIMIT=6M
 CMD ["bun", "build/index.js"]

bun.lock

@@ -12,6 +12,9 @@
         "@sveltejs/adapter-node": "^5.5.7",
         "ai": "^7.0.85",
         "drizzle-orm": "^1.0.0-rc.4",
+        "highlight.js": "^11.12.0",
+        "marked": "^18.0.11",
+        "marked-highlight": "^2.2.4",
         "mode-watcher": "^1.1.0",
         "postgres": "^3.4.9",
         "zod": "^4.5.4",
@@ -23,6 +26,7 @@
         "@sveltejs/enhanced-img": "^0.11.0",
         "@sveltejs/kit": "^2.70.3",
         "@sveltejs/vite-plugin-svelte": "^7.3.0",
+        "@tailwindcss/typography": "^0.5.20",
         "@tailwindcss/vite": "^4.3.3",
         "@types/eslint": "9.6.1",
         "@types/pg": "^8.23.1",
@@ -467,6 +471,8 @@
 
     "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
 
+    "@tailwindcss/typography": ["@tailwindcss/typography@0.5.20", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || >=4.0.0 || insiders" } }, "sha512-hwbzQuNUfcPvbegQFatVPl/MY/tcM9KLl963hQ5laJKPh81TEZ1+dNG9PirGvcaDBkp+BCshExAyKVPW91dozw=="],
+
     "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
 
     "@types/chai": ["@types/chai@5.2.3", "", { "dependencies": { "@types/deep-eql": "*", "assertion-error": "^2.0.1" } }, "sha512-Mw558oeA9fFbv65/y4mHtXDs9bPnFMZAL/jxdPFUpOHHIXX91mcgEHbS5Lahr+pwZFR8A7GQleRWeI6cGFC2UA=="],
@@ -729,6 +735,8 @@
 
     "hasown": ["hasown@2.0.4", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A=="],
 
+    "highlight.js": ["highlight.js@11.12.0", "", {}, "sha512-nbfWpyRMcMrPMmDwJB+dhX/eiaPKtc2RB+0QZskqJ3WjRA/FDS0e9hZrx8EC/lbEv8gXy98FcDbNa/dspAaJMg=="],
+
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
     "imagetools-core": ["imagetools-core@9.1.0", "", {}, "sha512-xQjs+2vrxLnAjCq+omuNkd5UQTld9/bP8+YT0LyYTlKfuSQtgUBvqhUwGugzSAh6sCdN+LnROMuLswn5hZ9Fhg=="],
@@ -823,6 +831,10 @@
 
     "maplibre-gl": ["maplibre-gl@5.24.0", "", { "dependencies": { "@mapbox/jsonlint-lines-primitives": "^2.0.2", "@mapbox/point-geometry": "^1.1.0", "@mapbox/tiny-sdf": "^2.1.0", "@mapbox/unitbezier": "^0.0.1", "@mapbox/vector-tile": "^2.0.4", "@mapbox/whoots-js": "^3.1.0", "@maplibre/geojson-vt": "^6.1.0", "@maplibre/maplibre-gl-style-spec": "^24.8.1", "@maplibre/mlt": "^1.1.8", "@maplibre/vt-pbf": "^4.3.0", "@types/geojson": "^7946.0.16", "earcut": "^3.0.2", "gl-matrix": "^3.4.4", "kdbush": "^4.0.2", "murmurhash-js": "^1.0.0", "pbf": "^4.0.1", "potpack": "^2.1.0", "quickselect": "^3.0.0", "tinyqueue": "^3.0.0" } }, "sha512-ALyFxgtd5R+65UqZ/++lOqwWcC0SNho9c27fYSyLmG7AfnAul2o46F05aDJGPbFU57wos9dgcIySHs0Xe6ia3A=="],
 
+    "marked": ["marked@18.0.14", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-mBHK6FBHuBAlhgRe88w9F0O1AbwwXJUcQibUbC/QcdTbVGAD7aWza+xt3N6oT/jCZx3/OMeS+8rnuiHZcQ9s7A=="],
+
+    "marked-highlight": ["marked-highlight@2.2.4", "", { "peerDependencies": { "marked": ">=4 <19" } }, "sha512-PZxisNMJDduSjc0q6uvjsnqqHCXc9s0eyzxDO9sB1eNGJnd/H1/Fu+z6g/liC1dfJdFW4SftMwMlLvsBhUPrqQ=="],
+
     "minimatch": ["minimatch@10.2.6", "", { "dependencies": { "brace-expansion": "^5.0.8" } }, "sha512-vpLQEs+VLCr1nU0BXS07maYoFwlDAH0gngQuuttxIwutDFEMHq2blX+8vpgxDdK3J1PwjCJiep77OitTZ4Ll1A=="],
 
     "minimist": ["minimist@1.2.8", "", {}, "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA=="],
@@ -891,7 +903,7 @@
 
     "postcss-scss": ["postcss-scss@4.0.9", "", { "peerDependencies": { "postcss": "^8.4.29" } }, "sha512-AjKOeiwAitL/MXxQW2DliT28EKukvvbEWx3LBmJIRN8KfBGZbRTxNYW0kSqi1COiTZ57nZ9NW06S6ux//N1c9A=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.5", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw=="],
+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
 
     "postgres": ["postgres@3.4.9", "", {}, "sha512-GD3qdB0x1z9xgFI6cdRD6xu2Sp2WCOEoe3mtnyB5Ee0XrrL5Pe+e4CCnJrRMnL1zYtRDZmQQVbvOttLnKDLnaw=="],
 
@@ -1099,6 +1111,8 @@
 
     "svelte-eslint-parser/espree": ["espree@10.4.0", "", { "dependencies": { "acorn": "^8.15.0", "acorn-jsx": "^5.3.2", "eslint-visitor-keys": "^4.2.1" } }, "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ=="],
 
+    "svelte-eslint-parser/postcss-selector-parser": ["postcss-selector-parser@7.1.5", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-KvvtD7SrlBP7dlgkBghEE3r84CABm5SmV2aNcG4oCA+qDnJ/tvKonFVvwWAyyWUEwxuNawdfEAZKP9zM3oZ2Uw=="],
+
     "@tailwindcss/node/lightningcss/lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
 
     "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],

drizzle.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from 'drizzle-kit';
 
 export default defineConfig({
 	dialect: 'postgresql',
-	schema: './src/lib/server/db/schema.ts',
+	schema: './src/lib/server/db/schema/index.ts',
 	out: './drizzle',
 	verbose: true,
 	strict: true,

package.json

@@ -17,9 +17,12 @@
 		"db:generate": "drizzle-kit generate",
 		"db:migrate": "drizzle-kit migrate",
 		"db:studio": "drizzle-kit studio",
-		"db:seed": "bun scripts/seed.ts",
+		"db:seed": "bun scripts/seed-catalog.ts",
-		"db:reset": "bun scripts/reset.ts && drizzle-kit push --force && bun scripts/seed.ts",
+		"db:migrate:auth": "bun scripts/migrate-auth-catalog.ts",
-		"auth:schema": "bunx @better-auth/cli generate --config src/lib/server/auth.ts --output src/lib/server/db/auth.schema.ts --yes"
+		"db:migrate:foundation": "bun scripts/migrate-foundation.ts",
+		"auth:role": "bun scripts/set-admin.ts",
+		"catalog:build": "python3 scripts/build-pokemon-catalog.py",
+		"test:auth": "node --env-file=.env node_modules/@playwright/test/cli.js test --config playwright.auth.config.ts"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",

playwright.auth.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from '@playwright/test';
+process.env.AUTH_E2E = '1';
+export default defineConfig({
+	testDir: 'tests',
+	testMatch: 'auth.test.ts',
+	workers: 1,
+	use: { baseURL: 'http://127.0.0.1:4174' },
+	webServer: {
+		command: 'npm run dev -- --host 127.0.0.1 --port 4174 --strictPort',
+		url: 'http://127.0.0.1:4174/login',
+		env: { ORIGIN: 'http://127.0.0.1:4174', BETTER_AUTH_URL: 'http://127.0.0.1:4174' },
+		timeout: 60000
+	}
+});

scripts/animaldex-uuid-to-serial.sql

@@ -0,0 +1,84 @@
+-- One-off: convert animaldex ids from uuid to serial, keeping existing rows.
+-- Postgres can't cast uuid -> integer, so db:push can't do this itself.
+--
+-- Run BEFORE re-running db:push, once per database:
+--   psql "$DB_URL" -v ON_ERROR_STOP=1 -f scripts/animaldex-uuid-to-serial.sql
+--
+-- Safe to run on an empty database too. Everything is in one transaction, so a
+-- failure leaves the database untouched.
+
+BEGIN;
+
+-- the failed push created this before erroring out
+DROP SEQUENCE IF EXISTS animals_id_seq;
+
+-- 1. new integer ids alongside the uuid ones
+ALTER TABLE animals ADD COLUMN new_id serial;
+ALTER TABLE sightings ADD COLUMN new_id serial;
+ALTER TABLE photos ADD COLUMN new_id serial;
+
+-- 2. translate the foreign keys through the uuid -> integer mapping
+ALTER TABLE sightings ADD COLUMN new_animal_id integer;
+UPDATE sightings s SET new_animal_id = a.new_id FROM animals a WHERE a.id = s.animal_id;
+
+ALTER TABLE photos ADD COLUMN new_sighting_id integer;
+UPDATE photos p SET new_sighting_id = s.new_id FROM sightings s WHERE s.id = p.sighting_id;
+
+-- 3. drop the old foreign keys (names vary by how they were created)
+DO $$
+DECLARE r record;
+BEGIN
+	FOR r IN
+		SELECT conrelid::regclass AS tbl, conname
+		FROM pg_constraint
+		WHERE contype = 'f' AND conrelid IN ('sightings'::regclass, 'photos'::regclass)
+	LOOP
+		EXECUTE format('ALTER TABLE %s DROP CONSTRAINT %I', r.tbl, r.conname);
+	END LOOP;
+END $$;
+
+-- 4. swap the foreign key columns
+ALTER TABLE photos DROP COLUMN sighting_id;
+ALTER TABLE photos RENAME COLUMN new_sighting_id TO sighting_id;
+ALTER TABLE photos ALTER COLUMN sighting_id SET NOT NULL;
+
+ALTER TABLE sightings DROP COLUMN animal_id;
+ALTER TABLE sightings RENAME COLUMN new_animal_id TO animal_id;
+ALTER TABLE sightings ALTER COLUMN animal_id SET NOT NULL;
+
+-- 5. swap the primary keys
+DO $$
+DECLARE r record;
+BEGIN
+	FOR r IN
+		SELECT conrelid::regclass AS tbl, conname
+		FROM pg_constraint
+		WHERE contype = 'p'
+			AND conrelid IN ('animals'::regclass, 'sightings'::regclass, 'photos'::regclass)
+	LOOP
+		EXECUTE format('ALTER TABLE %s DROP CONSTRAINT %I', r.tbl, r.conname);
+	END LOOP;
+END $$;
+
+ALTER TABLE animals DROP COLUMN id;
+ALTER TABLE animals RENAME COLUMN new_id TO id;
+ALTER TABLE animals ADD PRIMARY KEY (id);
+ALTER SEQUENCE animals_new_id_seq RENAME TO animals_id_seq;
+
+ALTER TABLE sightings DROP COLUMN id;
+ALTER TABLE sightings RENAME COLUMN new_id TO id;
+ALTER TABLE sightings ADD PRIMARY KEY (id);
+ALTER SEQUENCE sightings_new_id_seq RENAME TO sightings_id_seq;
+
+ALTER TABLE photos DROP COLUMN id;
+ALTER TABLE photos RENAME COLUMN new_id TO id;
+ALTER TABLE photos ADD PRIMARY KEY (id);
+ALTER SEQUENCE photos_new_id_seq RENAME TO photos_id_seq;
+
+-- 6. restore the foreign keys under the names drizzle expects
+ALTER TABLE sightings ADD CONSTRAINT sightings_animal_id_animals_id_fkey
+	FOREIGN KEY (animal_id) REFERENCES animals(id) ON DELETE CASCADE;
+ALTER TABLE photos ADD CONSTRAINT photos_sighting_id_sightings_id_fkey
+	FOREIGN KEY (sighting_id) REFERENCES sightings(id) ON DELETE CASCADE;
+
+COMMIT;

scripts/auth-catalog-migration.sql

@@ -0,0 +1,18 @@
+-- Additive migration for the existing domain schema. No users or progress are removed.
+ALTER TABLE "user" ADD COLUMN IF NOT EXISTS role text NOT NULL DEFAULT 'user';
+ALTER TABLE account ADD COLUMN IF NOT EXISTS issuer text;
+-- Existing credentials use Better Auth's local namespace. Fail on unknown legacy
+-- OAuth providers rather than silently changing which remote identity they trust.
+UPDATE account SET issuer = 'local:credential' WHERE issuer IS NULL AND provider_id = 'credential';
+UPDATE account SET issuer = 'https://accounts.google.com' WHERE issuer IS NULL AND provider_id = 'google';
+UPDATE account SET issuer = 'local:oauth:github' WHERE issuer IS NULL AND provider_id = 'github';
+UPDATE account SET issuer = 'local:oauth:osu' WHERE issuer IS NULL AND provider_id = 'osu';
+ALTER TABLE account ALTER COLUMN issuer SET NOT NULL;
+CREATE UNIQUE INDEX IF NOT EXISTS account_issuer_account_id_unique ON account (issuer, account_id);
+ALTER TABLE games ADD COLUMN IF NOT EXISTS source_id integer;
+CREATE UNIQUE INDEX IF NOT EXISTS games_source_id_unique ON games (source_id);
+CREATE UNIQUE INDEX IF NOT EXISTS pokemon_number_unique ON pokemon (number);
+ALTER TYPE availability ADD VALUE IF NOT EXISTS 'unknown';
+CREATE TABLE IF NOT EXISTS catch_em_all_settings (
+ user_id text PRIMARY KEY REFERENCES "user"(id) ON DELETE CASCADE
+);

scripts/build-pokemon-catalog.py

@@ -0,0 +1,96 @@
+"""Build the species-level catalog from a pinned PokéAPI CSV snapshot.
+
+Run with --source-dir to reuse downloaded CSVs. Default downloads into a temporary
+folder. Encounter absence is not evidence of trade/transfer/event exclusivity.
+"""
+import argparse
+import concurrent.futures
+import csv
+import json
+from pathlib import Path
+import tempfile
+import urllib.request
+
+REVISION = '575291cdb197a7e3a320297be276c9de4ef8401a'
+TABLES = ['pokemon', 'pokemon_species', 'pokemon_species_names', 'pokemon_types',
+          'pokemon_stats', 'type_names', 'versions', 'version_names', 'version_groups',
+          'pokemon_dex_numbers', 'pokedex_version_groups', 'pokemon_game_indices', 'encounters']
+
+
+def build(directory):
+    def rows(name):
+        with (directory / f'{name}.csv').open() as f:
+            return list(csv.DictReader(f))
+
+    species = rows('pokemon_species')
+    pokemon = rows('pokemon')
+    species_for = {int(p['id']): int(p['species_id']) for p in pokemon}
+    defaults = {int(p['species_id']): int(p['id']) for p in pokemon if p['is_default'] == '1'}
+    names = {int(p['pokemon_species_id']): p['name'] for p in rows('pokemon_species_names') if p['local_language_id'] == '9'}
+    type_names = {int(t['type_id']): t['name'] for t in rows('type_names') if t['local_language_id'] == '9'}
+    types = {}
+    for p in rows('pokemon_types'):
+        types.setdefault(int(p['pokemon_id']), {})[int(p['slot'])] = type_names[int(p['type_id'])]
+    stats = {}
+    for p in rows('pokemon_stats'):
+        stats.setdefault(int(p['pokemon_id']), {})[int(p['stat_id'])] = int(p['base_stat'])
+    stat_fields = ['hp', 'attack', 'defense', 'specialAttack', 'specialDefense', 'speed']
+    mons = []
+    for s in species:
+        number = int(s['id'])
+        default = defaults[number]
+        mons.append(dict(number=number, name=names[number], generation=int(s['generation_id']),
+                         type1=types[default][1], type2=types[default].get(2),
+                         **{name: stats[default][i + 1] for i, name in enumerate(stat_fields)}))
+
+    groups = {int(g['id']): g for g in rows('version_groups')}
+    versions = rows('versions')
+    game_names = {int(v['version_id']): v['name'] for v in rows('version_names') if v['local_language_id'] == '9'}
+    games = [dict(sourceId=int(v['id']), name=game_names.get(int(v['id']), v['identifier'].replace('-', ' ').title()),
+                  generation=int(groups[int(v['version_group_id'])]['generation_id'])) for v in versions]
+    for game, version in zip(games, versions):
+        if version['identifier'].endswith('-japan'):
+            game['name'] += ' (Japan)'
+    versions_for_group = {}
+    for v in versions:
+        versions_for_group.setdefault(int(v['version_group_id']), []).append(int(v['id']))
+    groups_for_dex = {}
+    for d in rows('pokedex_version_groups'):
+        groups_for_dex.setdefault(int(d['pokedex_id']), []).append(int(d['version_group_id']))
+    entries = {}
+    # Membership and internal game indices establish presence, not how it is obtained.
+    for p in rows('pokemon_dex_numbers'):
+        for group in groups_for_dex.get(int(p['pokedex_id']), []):
+            for version in versions_for_group.get(group, []):
+                entries[(int(p['species_id']), version)] = 'unknown'
+    for p in rows('pokemon_game_indices'):
+        if int(p['game_index']) > 0:
+            entries[(species_for[int(p['pokemon_id'])], int(p['version_id']))] = 'unknown'
+    for p in rows('encounters'):
+        entries[(species_for[int(p['pokemon_id'])], int(p['version_id']))] = 'catchable'
+    return dict(source={'repository': 'https://github.com/PokeAPI/pokeapi', 'revision': REVISION,
+                        'scope': 'All species and game versions in this snapshot; default-form types/stats. Unknown means presence without confirmed encounter data. Missing pairs have no source record, not proven absence.'},
+                pokemon=mons, games=games, entries=[[p, g, availability] for (p, g), availability in sorted(entries.items())])
+
+
+def main():
+    parser = argparse.ArgumentParser()
+    parser.add_argument('--source-dir', type=Path)
+    args = parser.parse_args()
+    with tempfile.TemporaryDirectory() as temporary:
+        directory = args.source_dir or Path(temporary)
+        if not args.source_dir:
+            def download(table):
+                url = f'https://raw.githubusercontent.com/PokeAPI/pokeapi/{REVISION}/data/v2/csv/{table}.csv'
+                with urllib.request.urlopen(url, timeout=60) as response:
+                    (directory / f'{table}.csv').write_bytes(response.read())
+            with concurrent.futures.ThreadPoolExecutor(max_workers=4) as executor:
+                list(executor.map(download, TABLES))
+        catalog = build(directory)
+    target = Path(__file__).resolve().parent.parent / 'data/pokemon-catalog.json'
+    target.write_text(json.dumps(catalog, ensure_ascii=False, separators=(',', ':')) + '\n')
+    print(f"Built {len(catalog['pokemon'])} species, {len(catalog['games'])} versions, {len(catalog['entries'])} entries")
+
+
+if __name__ == '__main__':
+    main()

scripts/deploy-preflight.ts

@@ -0,0 +1,70 @@
+import postgres from 'postgres';
+
+const expectedOrigin = process.argv[2];
+if (
+	!expectedOrigin ||
+	!['https://stanrunge.dev', 'https://staging.stanrunge.dev'].includes(expectedOrigin)
+) {
+	throw new Error('Expected a known production or staging origin');
+}
+if (!process.env.DB_URL) throw new Error('DB_URL is missing');
+if (!process.env.BETTER_AUTH_SECRET || process.env.BETTER_AUTH_SECRET.length < 32) {
+	throw new Error('BETTER_AUTH_SECRET must be at least 32 characters');
+}
+if (process.env.ORIGIN !== expectedOrigin || process.env.BETTER_AUTH_URL !== expectedOrigin) {
+	throw new Error('ORIGIN and BETTER_AUTH_URL must both match the public site origin');
+}
+const client = postgres(process.env.DB_URL, { max: 1, connect_timeout: 10 });
+try {
+	await client`select 1`;
+	const [schema] = await client`
+		select
+			(select count(*) from information_schema.columns
+			 where table_name = 'user' and column_name = 'role') as user_role,
+			(select count(*) from information_schema.columns
+			 where table_name = 'account' and column_name = 'issuer') as account_issuer,
+			(select count(*) from information_schema.columns
+			 where table_name = 'blog_articles' and column_name = 'tags') as blog_tags,
+			to_regclass('public.catch_em_all_settings') is not null as settings_ready,
+			(select count(*) from information_schema.columns where table_name = 'lists' and column_name = 'slug') as list_slug,
+			to_regclass('public.list_item_completions') is not null as list_completions,
+			(select count(*) from information_schema.columns where table_name = 'tasks_to_topics' and column_name = 'id') as topic_link_id,
+			(select count(*) from information_schema.columns
+			 where table_name in ('animals', 'sightings', 'photos')
+			   and column_name = 'id' and data_type = 'integer') as animal_serial_ids
+	`;
+	if (
+		!Number(schema.user_role) ||
+		!Number(schema.account_issuer) ||
+		!Number(schema.blog_tags) ||
+		!schema.settings_ready ||
+		!Number(schema.list_slug) ||
+		!schema.list_completions ||
+		!Number(schema.topic_link_id) ||
+		Number(schema.animal_serial_ids) !== 3
+	) {
+		throw new Error(
+			'Required migrations or Animaldex ID conversion have not been applied to this database'
+		);
+	}
+	const [catalog] = await client`
+		select
+			(select count(*) from pokemon) as pokemon,
+			(select count(*) from games where source_id is not null) as games,
+			(select count(*) from pokemon_game_entries) as entries
+	`;
+	if (
+		Number(catalog.pokemon) < 1025 ||
+		Number(catalog.games) < 53 ||
+		Number(catalog.entries) < 27267
+	) {
+		throw new Error('Pokémon catalog has not been seeded in this database');
+	}
+} finally {
+	await client.end();
+}
+const google = !!(process.env.GOOGLE_CLIENT_ID && process.env.GOOGLE_CLIENT_SECRET);
+const osu = !!(process.env.OSU_CLIENT_ID && process.env.OSU_CLIENT_SECRET);
+console.log(
+	`Preflight passed for ${expectedOrigin}; Google ${google ? 'configured' : 'disabled'}, osu! ${osu ? 'configured' : 'disabled'}`
+);

scripts/deploy-remote.sh

@@ -0,0 +1,50 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+sha=${1:?commit SHA required}
+directory=${2:?deployment directory required}
+origin=${3:?public origin required}
+case "$sha" in
+  *[!0-9a-f]*|'') echo 'Invalid image tag' >&2; exit 2 ;;
+esac
+case "$directory:$origin" in
+  /opt/personal-website:https://stanrunge.dev)
+    environment=/etc/personal-website/prod.env ;;
+  /opt/personal-website-staging:https://staging.stanrunge.dev)
+    environment=/etc/personal-website-staging/staging.env ;;
+  *) echo 'Unrecognized deployment target' >&2; exit 2 ;;
+esac
+
+image="git.stanrunge.dev/stan/personal-website:$sha"
+compose="$directory/compose.prod.yml"
+previous_tag=$(sed -n 's/^IMAGE_TAG=//p' "$directory/.env" | head -n 1)
+switched=0
+rollback() {
+  if [ "$switched" -eq 1 ] && [ -n "$previous_tag" ]; then
+    echo "Health check failed; restoring prior image tag $previous_tag" >&2
+    printf 'IMAGE_TAG=%s\n' "$previous_tag" | sudo tee "$directory/.env" >/dev/null
+    sudo docker compose --env-file "$directory/.env" -f "$compose" up -d
+  fi
+}
+trap rollback ERR
+
+sudo docker run --rm --network backend --env-file "$environment" "$image" \
+  bun scripts/deploy-preflight.ts "$origin"
+
+printf 'IMAGE_TAG=%s\n' "$sha" | sudo tee "$directory/.env" >/dev/null
+switched=1
+sudo docker compose --env-file "$directory/.env" -f "$compose" up -d
+
+container=$(sudo docker compose --env-file "$directory/.env" -f "$compose" ps -q app)
+expected_image=$(sudo docker image inspect -f '{{.Id}}' "$image")
+actual_image=$(sudo docker inspect -f '{{.Image}}' "$container")
+if [ "$actual_image" != "$expected_image" ]; then
+  echo 'Compose did not start the intended image' >&2
+  false
+fi
+curl --retry 12 --retry-delay 2 --retry-all-errors --fail --silent --show-error \
+  "$origin/login" >/dev/null
+curl --retry 6 --retry-delay 2 --retry-all-errors --fail --silent --show-error \
+  "$origin/projects/catch-em-all" >/dev/null
+trap - ERR
+echo "Deployed $sha to $origin"

scripts/foundation-migration.sql

@@ -0,0 +1,93 @@
+-- Apply after auth-catalog-migration.sql and before deploying the foundation release.
+-- Additive domain-schema changes; existing records and numeric IDs are retained.
+
+ALTER TABLE blog_articles ADD COLUMN IF NOT EXISTS tags text[] NOT NULL DEFAULT '{}'::text[];
+
+ALTER TABLE lists ADD COLUMN IF NOT EXISTS slug text;
+UPDATE lists SET slug = COALESCE(NULLIF(trim(both '-' from regexp_replace(lower(name), '[^a-z0-9]+', '-', 'g')), ''), 'list') || '-' || id
+WHERE slug IS NULL;
+ALTER TABLE lists ALTER COLUMN slug SET NOT NULL;
+CREATE UNIQUE INDEX IF NOT EXISTS lists_slug_unique ON lists (slug);
+ALTER TABLE lists ADD COLUMN IF NOT EXISTS is_progress boolean NOT NULL DEFAULT false;
+ALTER TABLE list_items ADD COLUMN IF NOT EXISTS picture_url text;
+ALTER TABLE list_items ADD COLUMN IF NOT EXISTS description text;
+
+CREATE TABLE IF NOT EXISTS list_item_completions (
+  id serial PRIMARY KEY,
+  item_id integer NOT NULL REFERENCES list_items(id) ON DELETE CASCADE,
+  user_id text NOT NULL REFERENCES "user"(id) ON DELETE CASCADE,
+  created_at timestamptz NOT NULL DEFAULT now(),
+  updated_at timestamptz NOT NULL DEFAULT now(),
+  CONSTRAINT list_item_completions_item_id_user_id_unique UNIQUE (item_id, user_id)
+);
+CREATE INDEX IF NOT EXISTS list_item_completions_user_id_idx ON list_item_completions(user_id);
+
+-- Join/setting records gain the same numeric identity as other site-owned rows.
+ALTER TABLE tasks_to_topics ADD COLUMN IF NOT EXISTS id serial;
+DO $$ BEGIN
+  IF EXISTS (SELECT 1 FROM pg_constraint WHERE conrelid = 'tasks_to_topics'::regclass AND conname = 'tasks_to_topics_pkey'
+             AND pg_get_constraintdef(oid) NOT LIKE 'PRIMARY KEY (id)') THEN
+    ALTER TABLE tasks_to_topics DROP CONSTRAINT tasks_to_topics_pkey;
+  END IF;
+END $$;
+DO $$ BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conrelid = 'tasks_to_topics'::regclass AND contype = 'p') THEN
+    ALTER TABLE tasks_to_topics ADD CONSTRAINT tasks_to_topics_pkey PRIMARY KEY (id);
+  END IF;
+END $$;
+CREATE UNIQUE INDEX IF NOT EXISTS tasks_to_topics_task_id_topic_id_unique ON tasks_to_topics(task_id, topic_id);
+
+ALTER TABLE catch_em_all_settings ADD COLUMN IF NOT EXISTS id serial;
+DO $$ BEGIN
+  IF EXISTS (SELECT 1 FROM pg_constraint WHERE conrelid = 'catch_em_all_settings'::regclass AND conname = 'catch_em_all_settings_pkey'
+             AND pg_get_constraintdef(oid) NOT LIKE 'PRIMARY KEY (id)') THEN
+    ALTER TABLE catch_em_all_settings DROP CONSTRAINT catch_em_all_settings_pkey;
+  END IF;
+END $$;
+DO $$ BEGIN
+  IF NOT EXISTS (SELECT 1 FROM pg_constraint WHERE conrelid = 'catch_em_all_settings'::regclass AND contype = 'p') THEN
+    ALTER TABLE catch_em_all_settings ADD CONSTRAINT catch_em_all_settings_pkey PRIMARY KEY (id);
+  END IF;
+END $$;
+CREATE UNIQUE INDEX IF NOT EXISTS catch_em_all_settings_user_id_unique ON catch_em_all_settings(user_id);
+
+-- Every site-owned table records creation and latest update. Domain-specific
+-- event times (submitted_at, seen_at, uploaded_at) remain untouched.
+DO $$
+DECLARE table_name text;
+BEGIN
+  FOREACH table_name IN ARRAY ARRAY[
+    'blog_articles', 'lists', 'list_items', 'list_item_completions',
+    'animals', 'sightings', 'photos', 'tasks', 'topics', 'tasks_to_topics',
+    'pokemon', 'games', 'pokemon_game_entries', 'user_entries', 'user_games',
+    'catch_em_all_settings'
+  ] LOOP
+    EXECUTE format('ALTER TABLE %I ADD COLUMN IF NOT EXISTS created_at timestamptz NOT NULL DEFAULT now()', table_name);
+    EXECUTE format('ALTER TABLE %I ADD COLUMN IF NOT EXISTS updated_at timestamptz NOT NULL DEFAULT now()', table_name);
+  END LOOP;
+END $$;
+
+-- Preserve the best available creation time for older Animaldex rows.
+UPDATE animals SET created_at = submitted_at WHERE created_at > submitted_at;
+UPDATE sightings SET created_at = submitted_at WHERE created_at > submitted_at;
+UPDATE photos SET created_at = uploaded_at WHERE created_at > uploaded_at;
+
+CREATE OR REPLACE FUNCTION site_touch_updated_at() RETURNS trigger LANGUAGE plpgsql AS $$
+BEGIN
+  NEW.updated_at = now();
+  RETURN NEW;
+END $$;
+
+DO $$
+DECLARE table_name text;
+BEGIN
+  FOREACH table_name IN ARRAY ARRAY[
+    'blog_articles', 'lists', 'list_items', 'list_item_completions',
+    'animals', 'sightings', 'photos', 'tasks', 'topics', 'tasks_to_topics',
+    'pokemon', 'games', 'pokemon_game_entries', 'user_entries', 'user_games',
+    'catch_em_all_settings'
+  ] LOOP
+    EXECUTE format('DROP TRIGGER IF EXISTS site_touch_updated_at ON %I', table_name);
+    EXECUTE format('CREATE TRIGGER site_touch_updated_at BEFORE UPDATE ON %I FOR EACH ROW EXECUTE FUNCTION site_touch_updated_at()', table_name);
+  END LOOP;
+END $$;

scripts/migrate-auth-catalog.ts

@@ -0,0 +1,14 @@
+import { readFile } from 'node:fs/promises';
+import postgres from 'postgres';
+if (!process.env.DB_URL) throw new Error('DB_URL is required');
+const sql = postgres(process.env.DB_URL, { max: 1 });
+try {
+	await sql.begin(async (tx) => {
+		await tx.unsafe(
+			await readFile(new URL('./auth-catalog-migration.sql', import.meta.url), 'utf8')
+		);
+	});
+	console.log('Authentication and catalog migration applied');
+} finally {
+	await sql.end();
+}

scripts/migrate-foundation.ts

@@ -0,0 +1,13 @@
+import { readFile } from 'node:fs/promises';
+import postgres from 'postgres';
+
+if (!process.env.DB_URL) throw new Error('DB_URL is required');
+const client = postgres(process.env.DB_URL, { max: 1 });
+try {
+	await client.begin(async (tx) => {
+		await tx.unsafe(await readFile(new URL('./foundation-migration.sql', import.meta.url), 'utf8'));
+	});
+	console.log('Foundation migration applied');
+} finally {
+	await client.end();
+}

scripts/seed-catalog.ts

@@ -0,0 +1,84 @@
+import { readFile } from 'node:fs/promises';
+import { drizzle } from 'drizzle-orm/postgres-js';
+import { and, eq, isNull, sql } from 'drizzle-orm';
+import postgres from 'postgres';
+import { pokemon, games, pokemonGameEntries } from '../src/lib/server/db/schema/catch-em-all';
+
+type Catalog = {
+	source: { revision: string };
+	pokemon: (typeof pokemon.$inferInsert)[];
+	games: { sourceId: number; name: string; generation: number }[];
+	entries: [number, number, 'catchable' | 'unknown'][];
+};
+if (!process.env.DB_URL) throw new Error('DB_URL is required');
+const catalog: Catalog = JSON.parse(
+	await readFile(new URL('../data/pokemon-catalog.json', import.meta.url), 'utf8')
+);
+const client = postgres(process.env.DB_URL, { max: 1 });
+const db = drizzle({ client });
+try {
+	await db.transaction(async (tx) => {
+		const pokemonIds = new Map<number, number>();
+		const gameIds = new Map<number, number>();
+		for (const row of catalog.pokemon) {
+			const [saved] = await tx
+				.insert(pokemon)
+				.values(row)
+				.onConflictDoUpdate({ target: pokemon.number, set: row })
+				.returning();
+			pokemonIds.set(saved.number, saved.id);
+		}
+		for (const row of catalog.games) {
+			// Adopt older rows by exact name to preserve existing progress and game IDs.
+			const [imported] = await tx.select().from(games).where(eq(games.sourceId, row.sourceId));
+			if (!imported) {
+				const legacy = await tx
+					.select()
+					.from(games)
+					.where(and(eq(games.name, row.name), isNull(games.sourceId)));
+				if (legacy.length > 1) throw new Error(`Ambiguous legacy game: ${row.name}`);
+				if (legacy[0])
+					await tx.update(games).set({ sourceId: row.sourceId }).where(eq(games.id, legacy[0].id));
+			}
+			const [saved] = await tx
+				.insert(games)
+				.values(row)
+				.onConflictDoUpdate({ target: games.sourceId, set: row })
+				.returning();
+			gameIds.set(row.sourceId, saved.id);
+		}
+		for (let offset = 0; offset < catalog.entries.length; offset += 1000) {
+			const rows = catalog.entries
+				.slice(offset, offset + 1000)
+				.map(([number, version, availability]) => {
+					const pokemonId = pokemonIds.get(number),
+						gameId = gameIds.get(version);
+					if (!pokemonId || !gameId)
+						throw new Error(`Unknown catalog reference ${number}/${version}`);
+					return {
+						pokemonId,
+						gameId,
+						availability,
+						note:
+							availability === 'catchable'
+								? 'PokéAPI: documented encounter; conditions, location, or a specific form may be required.'
+								: 'PokéAPI: Pokédex or game-index record only; catch, evolution, gift, trade, transfer, and event availability is not confirmed.'
+					};
+				});
+			await tx
+				.insert(pokemonGameEntries)
+				.values(rows)
+				.onConflictDoUpdate({
+					target: [pokemonGameEntries.pokemonId, pokemonGameEntries.gameId],
+					set: { availability: sql`excluded.availability`, note: sql`excluded.note` },
+					// Preserve hand-maintained availability and notes.
+					setWhere: sql`${pokemonGameEntries.note} like 'PokéAPI:%'`
+				});
+		}
+	});
+	console.log(
+		`Seeded ${catalog.pokemon.length} species, ${catalog.games.length} versions, ${catalog.entries.length} entries from ${catalog.source.revision}`
+	);
+} finally {
+	await client.end();
+}

scripts/set-admin.ts

@@ -0,0 +1,15 @@
+import postgres from 'postgres';
+const [userId, role = 'admin'] = process.argv.slice(2);
+if (!userId || !['admin', 'user'].includes(role))
+	throw new Error('Usage: bun scripts/set-admin.ts <user-id> [admin|user]');
+if (!process.env.DB_URL) throw new Error('DB_URL is required');
+const sql = postgres(process.env.DB_URL, { max: 1 });
+try {
+	const users =
+		await sql`update "user" set role = ${role}, updated_at = now() where id = ${userId} returning id, role`;
+	if (!users.length)
+		throw new Error('User ID not found. Register first and copy the ID from your account page.');
+	console.log(users[0]);
+} finally {
+	await sql.end();
+}

scripts/verify-staging-image.sh

@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+sha=${1:?staging commit required}
+case "$sha" in
+  *[!0-9a-f]*|'') echo 'Invalid image tag' >&2; exit 2 ;;
+esac
+directory=/opt/personal-website-staging
+tag=$(sed -n 's/^IMAGE_TAG=//p' "$directory/.env" | head -n 1)
+if [ "$tag" != "$sha" ]; then
+  echo "Staging runs $tag, not $sha" >&2
+  exit 1
+fi
+image="git.stanrunge.dev/stan/personal-website:$sha"
+container=$(sudo docker compose --env-file "$directory/.env" -f "$directory/compose.prod.yml" ps -q app)
+expected=$(sudo docker image inspect -f '{{.Id}}' "$image")
+actual=$(sudo docker inspect -f '{{.Image}}' "$container")
+if [ "$actual" != "$expected" ]; then
+  echo 'Staging container differs from the tested image' >&2
+  exit 1
+fi
+curl --fail --silent --show-error https://staging.stanrunge.dev/login >/dev/null
+echo "Verified staging image $sha"

src/app.css

@@ -2,22 +2,113 @@
 @plugin '@tailwindcss/typography';
 
 @theme {
-	--color-bg: #f6f4f0;
+	--color-bg: #000;
-	--color-surface: #edeae4;
+	--color-surface: #0a0a0a;
-	--color-surface-hover: #e4e0d8;
+	--color-surface-hover: #171717;
-	--color-border: #d6d2ca;
+	--color-border: #262626;
-	--color-border-light: #e8e5de;
+	--color-border-light: #1a1a1a;
-	--color-text: #2c2c2c;
+	--color-text: #ededed;
-	--color-text-muted: #6b6b6b;
+	--color-text-muted: #a1a1a1;
-	--color-text-dim: #999999;
+	--color-text-dim: #888;
-	--color-text-ghost: #c5c0b8;
+	--color-text-ghost: #666;
-	--color-accent: #3d6b8e;
+	--color-accent: #ededed;
-	--color-accent-hover: #4d7fa6;
+	--color-accent-hover: #fff;
 	--color-danger: #b44;
 
-	--font-heading: 'DM Serif Display', Georgia, serif;
+	--font-heading: Montserrat, Arial, Helvetica, sans-serif;
 	--font-mono: 'IBM Plex Mono', 'Courier New', monospace;
-	--font-body: 'Source Sans 3', 'Helvetica Neue', sans-serif;
+	--font-body: Montserrat, Arial, Helvetica, sans-serif;
+}
+
+:root {
+	color-scheme: dark;
+	--site-bg: #000;
+	--site-surface: #0a0a0a;
+	--site-hover: #171717;
+	--site-text: #ededed;
+	--site-muted: #a1a1a1;
+	--site-border: #292929;
+}
+
+:root[data-theme='light'] {
+	color-scheme: light;
+	--site-bg: #fff;
+	--site-surface: #fafafa;
+	--site-hover: #f4f4f5;
+	--site-text: #171717;
+	--site-muted: #646464;
+	--site-border: #e5e5e5;
+	--color-bg: #fff;
+	--color-surface: #fafafa;
+	--color-surface-hover: #f4f4f5;
+	--color-border: #e5e5e5;
+	--color-border-light: #eee;
+	--color-text: #171717;
+	--color-text-muted: #646464;
+	--color-text-dim: #777;
+	--color-text-ghost: #999;
+	--color-accent: #171717;
+	--color-accent-hover: #000;
+}
+
+.article-content {
+	--tw-prose-body: var(--site-text);
+	--tw-prose-headings: var(--site-text);
+	--tw-prose-lead: var(--site-text);
+	--tw-prose-links: var(--site-text);
+	--tw-prose-bold: var(--site-text);
+	--tw-prose-counters: var(--site-muted);
+	--tw-prose-bullets: var(--site-muted);
+	--tw-prose-hr: var(--site-border);
+	--tw-prose-quotes: var(--site-text);
+	--tw-prose-quote-borders: var(--site-border);
+	--tw-prose-captions: var(--site-muted);
+	--tw-prose-code: var(--site-text);
+	--tw-prose-th-borders: var(--site-border);
+	--tw-prose-td-borders: var(--site-border);
+}
+
+/* Keep older project pages readable while their individual styles use light utility colors. */
+:root:not([data-theme='light']) .bg-white,
+:root:not([data-theme='light']) .bg-gray-50,
+:root:not([data-theme='light']) .bg-neutral-50 {
+	background-color: #0a0a0a;
+}
+
+:root:not([data-theme='light']) .bg-gray-100,
+:root:not([data-theme='light']) .bg-neutral-100 {
+	background-color: #171717;
+}
+
+:root:not([data-theme='light']) .bg-gray-200,
+:root:not([data-theme='light']) .bg-neutral-200 {
+	background-color: #262626;
+}
+
+:root:not([data-theme='light']) .text-black,
+:root:not([data-theme='light']) .text-gray-900,
+:root:not([data-theme='light']) .text-gray-800 {
+	color: #ededed;
+}
+
+:root:not([data-theme='light']) .text-gray-700 {
+	color: #d4d4d4;
+}
+
+:root:not([data-theme='light']) .text-gray-600,
+:root:not([data-theme='light']) .text-gray-500 {
+	color: #a1a1a1;
+}
+
+:root:not([data-theme='light']) .border-gray-100,
+:root:not([data-theme='light']) .border-gray-200,
+:root:not([data-theme='light']) .border-gray-300 {
+	border-color: #292929;
+}
+
+:root:not([data-theme='light']) .hover\:bg-gray-50:hover,
+:root:not([data-theme='light']) .hover\:bg-gray-100:hover {
+	background-color: #171717;
 }
 
 @layer base {
@@ -36,15 +127,27 @@
 	}
 
 	body {
-		background: var(--color-bg);
+		background: var(--site-bg);
-		color: var(--color-text);
+		color: var(--site-text);
 		font-family: var(--font-body);
-		font-size: 15px;
+		font-size: 16px;
-		line-height: 1.65;
+		line-height: 1.6;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 	}
 
+	button,
+	input,
+	textarea,
+	select {
+		font: inherit;
+	}
+
+	:focus-visible {
+		outline: 2px solid var(--site-text);
+		outline-offset: 3px;
+	}
+
 	::selection {
 		background: color-mix(in srgb, var(--color-accent) 20%, transparent);
 	}

src/app.d.ts

@@ -5,7 +5,10 @@
 declare global {
 	namespace App {
 		// interface Error {}
-		// interface Locals {}
+		interface Locals {
+			user: typeof import('$lib/server/auth').auth.$Infer.Session.user | null;
+			session: typeof import('$lib/server/auth').auth.$Infer.Session.session | null;
+		}
 		// interface PageData {}
 		// interface PageState {}
 		// interface Platform {}

src/app.html

@@ -1,6 +1,25 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<meta name="theme-color" content="#000000" />
+		<script>
+			let themePreference = 'dark';
+			try {
+				const storedTheme = localStorage.getItem('theme');
+				if (storedTheme === 'light' || storedTheme === 'system') themePreference = storedTheme;
+			} catch {
+				// Keep the dark default if storage is unavailable.
+			}
+			document.documentElement.dataset.themePreference = themePreference;
+			document.documentElement.dataset.theme =
+				themePreference === 'system'
+					? window.matchMedia('(prefers-color-scheme: light)').matches
+						? 'light'
+						: 'dark'
+					: themePreference;
+			document.querySelector('meta[name="theme-color"]').content =
+				document.documentElement.dataset.theme === 'light' ? '#ffffff' : '#000000';
+		</script>
 		<!-- Google tag (gtag.js) -->
 		<script async src="https://www.googletagmanager.com/gtag/js?id=G-7K10F5HJMQ"></script>
 		<script>
@@ -18,7 +37,12 @@
 		<link rel="icon" type="image/png" sizes="32x32" href="%sveltekit.assets%/favicon-32x32.png" />
 		<link rel="icon" type="image/png" sizes="16x16" href="%sveltekit.assets%/favicon-16x16.png" />
 		<link rel="manifest" href="%sveltekit.assets%/site.webmanifest" />
-		<title>Stan Runge</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+		<link
+			href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap"
+			rel="stylesheet"
+		/>
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

src/hooks.server.ts

@@ -0,0 +1,13 @@
+import { building } from '$app/environment';
+import { auth } from '$lib/server/auth';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+	// Match the endpoint path here: the dev proxy may terminate HTTPS before Vite.
+	// Better Auth validates request origins against its configured public URL.
+	if (!building && event.url.pathname.startsWith('/api/auth/')) return auth.handler(event.request);
+	const session = building ? null : await auth.api.getSession({ headers: event.request.headers });
+	event.locals.user = session?.user ?? null;
+	event.locals.session = session?.session ?? null;
+	return resolve(event);
+};

src/lib/auth-client.ts

@@ -0,0 +1,2 @@
+import { createAuthClient } from 'better-auth/svelte';
+export const authClient = createAuthClient();

src/lib/auth-redirect.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { safeReturnTo } from './auth-redirect';
+
+describe('login return destinations', () => {
+	it.each([
+		null,
+		'',
+		'https://evil.example',
+		'//evil.example',
+		'/\\evil.example',
+		'/\nevil.example',
+		'/api/auth/callback/osu',
+		'/logout',
+		'/login?returnTo=/blog'
+	])('rejects %j', (value) => {
+		expect(safeReturnTo(value)).toBe('/account');
+	});
+	it('keeps a local project destination and its query', () => {
+		expect(safeReturnTo('/projects/catch-em-all?game=red#progress')).toBe(
+			'/projects/catch-em-all?game=red#progress'
+		);
+	});
+	it('normalizes paths before rejecting auth endpoints', () => {
+		expect(safeReturnTo('/projects/../logout')).toBe('/account');
+	});
+});

src/lib/auth-redirect.ts

@@ -0,0 +1,13 @@
+export function safeReturnTo(value: string | null): string {
+	if (!value || !value.startsWith('/') || value.startsWith('//') || /[\\\s]/.test(value)) {
+		return '/account';
+	}
+	const url = new URL(value, 'https://local.invalid');
+	if (
+		url.origin !== 'https://local.invalid' ||
+		/^\/(api\/auth|login|register|logout)(\/|$)/.test(url.pathname)
+	) {
+		return '/account';
+	}
+	return url.pathname + url.search + url.hash;
+}

src/lib/availability.ts

@@ -1,12 +1,13 @@
-// how a pokemon can be obtained in a game. no pokemon_game_entry row at all
+// How a Pokémon can be obtained in a game. Missing rows mean no source record;
-// means the pokemon doesn't exist in that game (e.g. a gen 2 mon in gen 1).
+// they do not prove absence. Unknown rows establish presence, not availability.
 // Shared between the db schema and the client, which receives availability as
 // an index into this array to keep the page payload small.
 export const availabilityValues = [
 	'catchable',
 	'trade_only',
 	'transfer_only',
-	'event_only'
+	'event_only',
+	'unknown'
 ] as const;
 
 export type Availability = (typeof availabilityValues)[number];

src/lib/components/AuthForm.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+	import { authClient } from '$lib/auth-client';
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+	import { resolve } from '$app/paths';
+	let {
+		mode,
+		providers,
+		returnTo,
+		oauthError
+	}: {
+		mode: 'login' | 'register';
+		providers: { google: boolean; osu: boolean };
+		returnTo: string;
+		oauthError: boolean;
+	} = $props();
+	let name = $state('');
+	let email = $state('');
+	let password = $state('');
+	let busy = $state(false);
+	let ready = $state(false);
+	onMount(() => {
+		ready = true;
+	});
+	let message = $state('');
+	async function submit(event: SubmitEvent) {
+		event.preventDefault();
+		const destination = `${resolve('/')}${returnTo.slice(1)}`;
+		busy = true;
+		message = '';
+		try {
+			const result =
+				mode === 'register'
+					? await authClient.signUp.email({ name: name.trim(), email, password })
+					: await authClient.signIn.email({ email, password });
+			if (result.error) {
+				message = result.error.message || 'Unable to sign in. Please try again.';
+				return;
+			}
+			// Destination is a validated local path, prefixed by resolve('/') above.
+			// eslint-disable-next-line svelte/no-navigation-without-resolve
+			await goto(destination, { invalidateAll: true });
+		} catch {
+			message = 'Unable to connect. Please try again.';
+		} finally {
+			busy = false;
+		}
+	}
+	async function social(provider: 'google' | 'osu') {
+		busy = true;
+		message = '';
+		try {
+			const result = await authClient.signIn.social({
+				provider,
+				callbackURL: returnTo,
+				errorCallbackURL: `/login?returnTo=${encodeURIComponent(returnTo)}`
+			});
+			if (result.error) {
+				message = result.error.message || 'Unable to connect to this provider.';
+				busy = false;
+			}
+		} catch {
+			message = 'Unable to connect. Please try again.';
+			busy = false;
+		}
+	}
+</script>
+
+<section class="mx-auto my-12 max-w-md px-4 sm:my-20">
+	<h1 class="mb-8 text-3xl font-semibold tracking-tight">
+		{mode === 'register' ? 'create account' : 'sign in'}
+	</h1>
+	{#if message || oauthError}
+		<p role="alert" class="mb-4 rounded bg-red-50 p-3 text-red-800">
+			{message ||
+				'Provider sign-in failed or was cancelled. Try again, or use your existing login and link the provider from your account.'}
+		</p>
+	{/if}
+	<form method="POST" onsubmit={submit} class="flex flex-col gap-4">
+		{#if mode === 'register'}
+			<label class="flex flex-col gap-1"
+				>Name<input
+					class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+					disabled={!ready || busy}
+					name="name"
+					autocomplete="name"
+					required
+					maxlength="100"
+					bind:value={name}
+				/></label
+			>
+		{/if}
+		<label class="flex flex-col gap-1"
+			>Email<input
+				class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+				disabled={!ready || busy}
+				name="email"
+				type="email"
+				autocomplete="email"
+				required
+				bind:value={email}
+			/></label
+		>
+		<label class="flex flex-col gap-1"
+			>Password<input
+				class="rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+				disabled={!ready || busy}
+				name="password"
+				type="password"
+				autocomplete={mode === 'register' ? 'new-password' : 'current-password'}
+				required
+				minlength={mode === 'register' ? 12 : undefined}
+				maxlength="128"
+				bind:value={password}
+			/></label
+		>
+		{#if mode === 'register'}<p class="text-sm text-gray-600">Use at least 12 characters.</p>{/if}
+		<button
+			disabled={!ready || busy}
+			class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)] disabled:opacity-50"
+			>{busy ? 'please wait…' : mode === 'register' ? 'create account' : 'sign in'}</button
+		>
+	</form>
+	{#if providers.google || providers.osu}
+		<div class="my-6 flex flex-col gap-3 border-t border-[var(--site-border)] pt-4">
+			{#if providers.google}<button
+					disabled={!ready || busy}
+					onclick={() => social('google')}
+					class="rounded border border-[var(--site-border)] px-4 py-2 disabled:opacity-50"
+					>Continue with Google</button
+				>{/if}
+			{#if providers.osu}<button
+					disabled={!ready || busy}
+					onclick={() => social('osu')}
+					class="rounded border border-[var(--site-border)] px-4 py-2 disabled:opacity-50"
+					>Continue with osu!</button
+				>{/if}
+		</div>
+	{/if}
+	<p class="mt-6 text-base">
+		<a
+			class="underline underline-offset-4"
+			href={resolve(
+				`${mode === 'register' ? '/login' : '/register'}?returnTo=${encodeURIComponent(returnTo)}`
+			)}>{mode === 'register' ? 'sign in' : 'Create account'}</a
+		>
+	</p>
+	<noscript><p class="mt-4">Enable JavaScript to securely sign in or register.</p></noscript>
+</section>

src/lib/components/CopyButton.svelte

@@ -33,7 +33,7 @@
 	<button
 		onclick={copy}
 		aria-label={`Copy ${label}: ${value}`}
-		class="text-2xl transition hover:opacity-60 cursor-pointer"
+		class="flex h-10 w-10 cursor-pointer items-center justify-center text-xl transition hover:text-[var(--site-text)]"
 	>
 		<Icon />
 	</button>

src/lib/components/ListPictureDropzone.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { label = 'Picture (optional)' }: { label?: string } = $props();
+	let input: HTMLInputElement;
+	let fileName = $state('');
+	let dragging = $state(false);
+
+	function selected() {
+		fileName = input.files?.[0]?.name ?? '';
+	}
+
+	function drop(event: DragEvent) {
+		event.preventDefault();
+		dragging = false;
+		const file = event.dataTransfer?.files?.[0];
+		if (!file) return;
+		const transfer = new DataTransfer();
+		transfer.items.add(file);
+		input.files = transfer.files;
+		selected();
+	}
+
+	function clear() {
+		input.value = '';
+		fileName = '';
+	}
+
+	onMount(() => {
+		const form = input.form;
+		form?.addEventListener('reset', clear);
+		return () => form?.removeEventListener('reset', clear);
+	});
+</script>
+
+<div>
+	<span class="block font-medium">{label}</span>
+	<input
+		bind:this={input}
+		name="picture"
+		type="file"
+		accept="image/jpeg,image/png,image/webp"
+		onchange={selected}
+		class="sr-only"
+		aria-label={label}
+	/>
+	<button
+		type="button"
+		onclick={() => input.click()}
+		ondragover={(event) => {
+			event.preventDefault();
+			dragging = true;
+			if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy';
+		}}
+		ondragleave={() => (dragging = false)}
+		ondrop={drop}
+		class={`mt-2 block w-full rounded border border-dashed p-5 text-center transition-colors ${dragging ? 'border-[var(--site-text)] bg-[var(--site-hover)]' : 'border-[var(--site-border)] hover:border-[var(--site-muted)]'}`}
+	>
+		{fileName ? `Selected: ${fileName}` : 'Drop an image here or click to browse'}
+	</button>
+	<p class="mt-2 text-base text-[var(--site-muted)]">JPEG, PNG, or WebP · up to 5 MB</p>
+	{#if fileName}<button type="button" onclick={clear} class="mt-2 underline">Clear selection</button
+		>{/if}
+</div>

src/lib/components/ProgressBar.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	let {
+		value,
+		max,
+		label,
+		small = false
+	}: {
+		value: number;
+		max: number;
+		label: string;
+		small?: boolean;
+	} = $props();
+</script>
+
+<progress class:small {value} max={max || 1} aria-label={label}></progress>
+
+<style>
+	progress {
+		display: block;
+		width: 100%;
+		height: 0.625rem;
+		appearance: none;
+		border: 0;
+		border-radius: 9999px;
+		overflow: hidden;
+		background: var(--site-border);
+	}
+	progress.small {
+		height: 0.375rem;
+	}
+	progress::-webkit-progress-bar {
+		background: var(--site-border);
+		border-radius: 9999px;
+	}
+	progress::-webkit-progress-value {
+		background: var(--site-text);
+		border-radius: 9999px;
+	}
+	progress::-moz-progress-bar {
+		background: var(--site-text);
+		border-radius: 9999px;
+	}
+</style>

src/lib/derby/generic.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from 'vitest';
+import { defaultsFor, gPredict } from './generic';
+import { placings } from './model';
+import { races } from './races';
+
+describe('generic race model', () => {
+	for (const race of races) {
+		it(`${race.slug}: probabilities sum to one and placings are consistent`, () => {
+			const preds = gPredict(race.runners, defaultsFor(race));
+			expect(preds.reduce((a, r) => a + r.p, 0)).toBeCloseTo(1, 9);
+			expect(preds.length).toBe(race.runners.length);
+			const { top, trio } = placings(preds, 0.8);
+			expect(top.reduce((a, t) => a + t.win, 0)).toBeCloseTo(1, 9);
+			expect(trio.reduce((a, t) => a + t.p, 0)).toBeCloseTo(1, 9);
+			for (const r of preds) expect(Number.isFinite(r.logit)).toBe(true);
+		});
+	}
+
+	it('debutants get the field average and a higher fail risk', () => {
+		const race = races.find((r) => r.slug === 'south-holland')!;
+		const preds = gPredict(race.runners, defaultsFor(race));
+		const deb = preds.find((r) => r.horse.n === 1)!;
+		expect(deb.features.estimated).toEqual(['form', 'speed', 'level']);
+		expect(deb.features.pFail).toBeCloseTo(0.12);
+	});
+});

src/lib/derby/generic.ts

@@ -0,0 +1,132 @@
+// Algemeen kansmodel voor de overige koersen: zelfde opzet als het Derby-model
+// (z-scores × gewichten → softmax), maar zonder proef- en marktsignaal.
+// Signalen: uitslagen, snelheid (beste recente km-tijd), niveau (prijzengeld
+// van de laatste starts), startpositie en uitvalrisico.
+
+import type { Result } from './data';
+import type { Race, Runner } from './races';
+
+export type GWeights = {
+	form: number;
+	speed: number;
+	level: number;
+	draw: number;
+	risk: number;
+	halfLife: number;
+	temperature: number;
+	lambda: number;
+};
+
+export const gFeatureKeys = ['form', 'speed', 'level', 'draw'] as const;
+export type GFeatureKey = (typeof gFeatureKeys)[number];
+
+export const gDefaults: GWeights = {
+	form: 1,
+	speed: 1,
+	level: 0.6,
+	draw: 0.4,
+	risk: 1,
+	halfLife: 2,
+	temperature: 1,
+	lambda: 0.8
+};
+
+/** rensport: geen tijden, startbox minder belangrijk over 1900 m */
+export const defaultsFor = (race: Race): GWeights =>
+	race.discipline === 'ren' ? { ...gDefaults, speed: 0, draw: 0.2, level: 0.8 } : { ...gDefaults };
+
+export const gPresets: Record<string, Partial<GWeights>> = {
+	Standaard: {},
+	Vorm: { form: 1.6, speed: 0.5, level: 0.4 },
+	Snelheid: { form: 0.5, speed: 1.6, level: 0.4 },
+	Niveau: { form: 0.6, speed: 0.6, level: 1.5 }
+};
+
+const SCALE = 0.55;
+const POSITION_POINTS: Record<number, number> = { 1: 1, 2: 0.75, 3: 0.6, 4: 0.45, 5: 0.35, 6: 0.25 };
+const positionPoints = (r: Result) => (r === 'D' ? 0 : (POSITION_POINTS[r] ?? 0.1));
+const DRAW_SCORE = [0, 0.6, 0.7, 0.6, 0.45, 0.4, 0.25, 0.1, 0, -0.2, -0.3];
+
+export type GFeatures = {
+	form: number;
+	speed: number;
+	level: number;
+	draw: number;
+	pFail: number;
+	/** welke signalen ontbraken en het veldgemiddelde kregen */
+	estimated: GFeatureKey[];
+};
+
+const mean = (xs: number[]) => xs.reduce((a, b) => a + b, 0) / xs.length;
+
+function rawForm(h: Runner, w: GWeights): number | null {
+	if (h.form.length === 0) return null;
+	const decay = h.form.map((_, i) => Math.pow(0.5, i / w.halfLife));
+	return h.form.reduce((s: number, r, i) => s + decay[i] * positionPoints(r), 0) / decay.reduce((a, b) => a + b, 0);
+}
+
+export function gFeatures(runners: Runner[], w: GWeights): GFeatures[] {
+	const raw = runners.map((h) => ({
+		form: rawForm(h, w),
+		speed: h.times.length ? -Math.min(...h.times) : null,
+		level: h.purses.length ? mean(h.purses.map((p) => Math.log(p))) : null
+	}));
+	const fill = (k: 'form' | 'speed' | 'level') => {
+		const known = raw.map((r) => r[k]).filter((v): v is number => v !== null);
+		return known.length ? mean(known) : 0;
+	};
+	const avg = { form: fill('form'), speed: fill('speed'), level: fill('level') };
+
+	return runners.map((h, i) => {
+		const estimated: GFeatureKey[] = [];
+		const pick = (k: 'form' | 'speed' | 'level') => {
+			const v = raw[i][k];
+			if (v === null) estimated.push(k);
+			return v ?? avg[k];
+		};
+		const disq = h.form.filter((r) => r === 'D').length;
+		const poor = h.form.filter((r) => r !== 'D' && r >= 7).length;
+		// debutanten: geen bewijs dat ze in de draf blijven
+		const base = h.form.length === 0 ? 0.12 : 0.03;
+		const pFail = Math.min(0.5, base + 0.1 * disq + 0.03 * poor);
+		return { form: pick('form'), speed: pick('speed'), level: pick('level'), draw: DRAW_SCORE[h.n] ?? 0, pFail, estimated };
+	});
+}
+
+/**
+ * ondergrens voor de spreiding per signaal, anders wordt 0,2 s verschil in een
+ * veld met drie bijna gelijke tijden een enorme z-score
+ */
+const SD_FLOOR: Record<GFeatureKey, number> = { form: 0.08, speed: 1, level: 0.3, draw: 0.15 };
+
+function zscores(values: number[], floor: number): number[] {
+	const m = mean(values);
+	const sd = Math.max(floor, Math.sqrt(mean(values.map((v) => (v - m) ** 2))));
+	return values.map((v) => (v - m) / sd);
+}
+
+export type GPrediction = {
+	horse: Runner;
+	features: GFeatures;
+	contributions: Record<GFeatureKey, number>;
+	riskPenalty: number;
+	logit: number;
+	p: number;
+};
+
+export function gPredict(runners: Runner[], w: GWeights): GPrediction[] {
+	if (runners.length === 0) return [];
+	const feats = gFeatures(runners, w);
+	const z = Object.fromEntries(gFeatureKeys.map((k) => [k, zscores(feats.map((f) => f[k]), SD_FLOOR[k])])) as Record<GFeatureKey, number[]>;
+	const rows = runners.map((horse, i) => {
+		const contributions = Object.fromEntries(gFeatureKeys.map((k) => [k, w[k] * z[k][i] * SCALE])) as Record<GFeatureKey, number>;
+		const riskPenalty = w.risk * Math.log(1 - feats[i].pFail);
+		const logit = Object.values(contributions).reduce((a, b) => a + b, 0) + riskPenalty;
+		return { horse, features: feats[i], contributions, riskPenalty, logit, p: 0 };
+	});
+	const max = Math.max(...rows.map((r) => r.logit));
+	const exp = rows.map((r) => Math.exp((r.logit - max) / w.temperature));
+	const total = exp.reduce((a, b) => a + b, 0);
+	rows.forEach((r, i) => (r.p = exp[i] / total));
+	return rows.sort((a, b) => b.p - a.p);
+}

src/lib/derby/model.ts

@@ -129,7 +129,7 @@ export type Placings = {
  * Stern-demping: voor de 2e en 3e plaats wordt p^lambda gebruikt, wat de
  * neiging van pure PL corrigeert om de favoriet te vaak tweede te laten worden.
  */
-export function placings(preds: Prediction[], lambda: number): Placings {
+export function placings(preds: { p: number }[], lambda: number): Placings {
 	const n = preds.length;
 	const p1 = preds.map((r) => r.p);
 	const p2 = p1.map((p) => Math.pow(p, lambda));

src/lib/derby/races.ts

@@ -0,0 +1,128 @@
+// Duindigt · zondag 20 september 2026 · koersen 3, 4 en 5
+// Bron: ZEturf koerskaarten en paardenfiches (laatste starts, kilometertijden, prijzengeld).
+
+import type { Result } from './data';
+
+export type Runner = {
+	n: number;
+	name: string;
+	driver: string;
+	trainer: string;
+	sex: 'M' | 'H' | 'R';
+	age: number;
+	/** laatste vijf uitslagen, nieuwste eerst; D = gediskwalificeerd/gevallen; leeg = debutant */
+	form: Result[];
+	/** kilometertijden (s) van de laatste starts, nieuwste eerst; alleen bekende */
+	times: number[];
+	/** prijzengeld (€) van de laatste starts, nieuwste eerst: niveau waarop het paard uitkomt */
+	purses: number[];
+	/** beste kilometertijd ooit, null = onbekend */
+	record: number | null;
+	/** gedragen gewicht (alleen rensport) */
+	kg?: number;
+	note?: string;
+};
+
+export type Race = {
+	slug: string;
+	number: number;
+	name: string;
+	short: string;
+	time: string;
+	distance: number;
+	start: string;
+	purse: number;
+	surface: string;
+	discipline: 'draf' | 'ren';
+	conditions: string;
+	/** voorbeschouwing ZEturf (Kees Nakoersen) */
+	preview: string;
+	tips: number[];
+	runners: Runner[];
+	sources: { label: string; href: string }[];
+};
+
+const t = (m: number, s: number) => m * 60 + s;
+const ze = (c: number, slug: string) => `https://www.zeturf.be/nl/course-du-jour/2026-09-20/R14C${c}-duindigt-${slug}`;
+
+export const races: Race[] = [
+	{
+		slug: 'sheikh-mansour',
+		number: 3,
+		name: 'HH Sheikh Mansour bin Zayed Al Nahyan Prijs',
+		short: 'Sheikh Mansour Prijs',
+		time: '16:10',
+		distance: 1900,
+		start: 'Startboxen',
+		purse: 10000,
+		surface: 'Grasbaan · standaard',
+		discipline: 'ren',
+		conditions: 'Ren voor Arabische volbloeds, 4 jaar en ouder',
+		preview:
+			'Tex D.A. (3) kan mogelijk op herhaling op deze baan waar hij op 26 juli sterk won voor tweede Ektor D.A. (6) en met als vierde Orszana JR (5). Maar de ruin treft in El Zarka D.A. (1) en Farida P (2) twee sterke tegenstanders. Beide bleven weliswaar op iets meer dan 8 lengte op deze baan ongeplaatst, maar dat was tegen de top van Europa. Princess T (4) versloeg Tex D.A. met een neusje verschil op de grasbaan van Joure, dus ook deze merrie moeten we serieus nemen. Een koers waarin veel mogelijk is.',
+		tips: [3, 1, 2, 6],
+		sources: [{ label: 'ZEturf koerskaart', href: ze(3, 'hh-sheikh-mansour-bin-zayed-al-nahyan-prijs') }],
+		runners: [
+			{ n: 1, name: 'El Zarka D.A.', driver: 'Jurico Bogaerts', trainer: 'Johan Verstrepen', sex: 'R', age: 12, form: [7, 9, 5, 5, 3], times: [], purses: [250000, 100000, 26400, 92764, 6000], record: null, kg: 64, note: 'loopt tegen de Europese top' },
+			{ n: 2, name: 'Farida P', driver: 'Anne Engels', trainer: 'Peter Deckers', sex: 'M', age: 7, form: ['D', 10, 3, 3, 1], times: [], purses: [250000, 100000, 26400, 92764, 6000], record: null, kg: 62, note: 'D = gevallen in Waregem' },
+			{ n: 3, name: 'Tex D.A.', driver: 'Luca van Toor', trainer: 'Bianca Dunk', sex: 'R', age: 9, form: [10, 1, 2, 2, 2], times: [], purses: [250000, 5000, 4000, 6000, 6000], record: null, kg: 61, note: 'won 26 juli op Duindigt' },
+			{ n: 4, name: 'Princess T', driver: 'Mirko Sanna', trainer: 'Gerard Zoetelief', sex: 'M', age: 6, form: [1, 4, 3, 5, 4], times: [], purses: [4000, 6000, 4000, 6000, 6000], record: null, kg: 57, note: 'versloeg Tex D.A. in Joure' },
+			{ n: 5, name: 'Orszana JR', driver: 'Josephine Bruning', trainer: "Manouk van 't Slot", sex: 'M', age: 8, form: [4, 4, 4, 7], times: [], purses: [5000, 4000, 4200, 5100], record: null, kg: 56 },
+			{ n: 6, name: 'Ektor D.A.', driver: 'Siem Bos', trainer: 'Johan Verstrepen', sex: 'H', age: 4, form: [3, 2, 5, 3, 7], times: [], purses: [6000, 5000, 6000, 6000, 7000], record: null, kg: 55 }
+		]
+	},
+	{
+		slug: 'schieweg',
+		number: 4,
+		name: 'Handelsonderneming Schieweg B.V. Prijs',
+		short: 'Schieweg Prijs',
+		time: '16:40',
+		distance: 2000,
+		start: 'Autostart',
+		purse: 4750,
+		surface: 'Sintelbaan · goed',
+		discipline: 'draf',
+		conditions: 'Draverij voor 4 jaar en ouder, winsom lager dan € 18.000',
+		preview:
+			'Paradepaard van Duindigt 2025 Louis Vuiton (7) wordt na deze koers gehuldigd, maar of dat als winnaar is staat niet vast. Pasion d’Oro (4) is waarschijnlijk het te kloppen paard: de hengst van Jacky Mollema verkeert in topvorm. Michel D (6) is eveneens in grote vorm, won tweemaal in Duitsland maar nog niet op Duindigt, al zat hij daar steeds dichtbij. Nobell Starro (5) werd in zijn laatste koers vierde op één lijn met tweede aankomende Louis Vuiton. Nolana Boko (8) won dit jaar al driemaal, laatst in Alkmaar. Otini Bianco (2) is hoogstwaarschijnlijk het Paradepaard van Duindigt 2026; met een juiste koers is de ruin er vandaag ook bij.',
+		tips: [4, 7, 6, 5],
+		sources: [{ label: 'ZEturf koerskaart', href: ze(4, 'handelsonderneming-schieweg-b-v-prijs') }],
+		runners: [
+			{ n: 1, name: 'Puck Ballaco', driver: 'Micha Brouwer', trainer: 'Rob de Vlieger', sex: 'M', age: 4, form: [4, 4, 1, 4, 3], times: [t(1, 17.9), t(1, 16.3), t(1, 16.6), t(1, 16.5), t(1, 17.8)], purses: [2750, 4000, 4000, 4400, 1100], record: t(1, 13.0) },
+			{ n: 2, name: 'Otini Bianco', driver: 'Rob de Vlieger', trainer: 'Rob de Vlieger', sex: 'R', age: 5, form: ['D', 6, 1, 2, 'D'], times: [t(1, 15.5), t(1, 15.9), t(1, 16.4)], purses: [2750, 4400, 2750, 2750, 2750], record: t(1, 14.7), note: 'won 31 juli op Duindigt' },
+			{ n: 3, name: 'Memory de Legume', driver: 'Patrick de Haan', trainer: 'Patrick de Haan', sex: 'M', age: 7, form: [6, 7, 8, 4, 4], times: [t(1, 19.7), t(1, 16.9), t(1, 15.6), t(1, 18.2), t(1, 14.1)], purses: [1600, 4400, 4400, 1500, 2200], record: t(1, 14.1) },
+			{ n: 4, name: "Pasion d'Oro", driver: 'Jaap van Rijn', trainer: 'Jack Mollema', sex: 'H', age: 4, form: [1, 5, 1, 1, 5], times: [t(1, 16.6), t(1, 11.6), t(1, 12.2), t(1, 21.1), t(1, 14.0)], purses: [2750, 19567, 2200, 1650, 13806], record: t(1, 11.6), note: 'liep in Zweden tegen sterkere' },
+			{ n: 5, name: 'Nobell Starro', driver: 'Robin Bakker', trainer: 'Fons Bakker', sex: 'R', age: 6, form: [4, 2, 1, 2, 'D'], times: [t(1, 14.0), t(1, 16.2), t(1, 11.1)], purses: [2750, 5000, 2000, 2200, 4400], record: t(1, 11.1) },
+			{ n: 6, name: 'Michel D', driver: 'Jim Veldman', trainer: 'Huug van Dijk', sex: 'H', age: 7, form: [3, 2, 1, 2, 1], times: [t(1, 20.2), t(1, 15.6), t(1, 14.1), t(1, 16.9), t(1, 14.9)], purses: [5000, 2750, 2000, 5500, 1500], record: t(1, 13.8), note: 'laatste tijd over 3375 m' },
+			{ n: 7, name: 'Louis Vuiton', driver: 'Hugo Langeweg', trainer: 'Hugo Langeweg', sex: 'R', age: 8, form: [2, 5, 4, 'D', 1], times: [t(1, 17.8), t(1, 12.1), t(1, 16.9)], purses: [2750, 11000, 2200, 1650, 2750], record: t(1, 12.1), note: 'Paradepaard 2025' },
+			{ n: 8, name: 'Nolana Boko', driver: 'John Dekker', trainer: 'Carel Roodenrijs', sex: 'R', age: 6, form: [1, 'D', 5, 4, 4], times: [t(1, 19.1), t(1, 20.9), t(1, 13.9), t(1, 23.0)], purses: [1600, 2750, 1100, 2000, 1210], record: t(1, 13.4), note: 'vaak op tragere banen (Alkmaar)' }
+		]
+	},
+	{
+		slug: 'south-holland',
+		number: 5,
+		name: 'South Holland Prijs · TCT Tweejarigen Satellietkoers',
+		short: 'South Holland Prijs',
+		time: '17:10',
+		distance: 1609,
+		start: 'Autostart',
+		purse: 4000,
+		surface: 'Sintelbaan · goed',
+		discipline: 'draf',
+		conditions: 'Draverij voor tweejarigen (sprint, 1609 m)',
+		preview:
+			'Sisi Hazelaar (5) is op basis van haar laatste tweede plaats in Wolvega, waar ze een puike indruk maakte, kansrijk. Zo ook Seabiscuit Lobell (4), die vorige week bij haar debuut tweede werd achter Salina Meerswal; met een fijn stuk speed kan ze binnendoor plek twee veroveren. Spirit Meerswal (2) debuteerde met een derde plaats in Wolvega in 15,2 en is kanshebber nummer drie. Sophie Starlake (1) debuteert voor de stal van Dion Tesselaar, en dan zijn we sowieso gewaarschuwd.',
+		tips: [5, 4, 2, 1],
+		sources: [{ label: 'ZEturf koerskaart', href: ze(5, 'south-holland-prijs-tct-tweejarigen-satellietkoers') }],
+		runners: [
+			{ n: 1, name: 'Sophie Starlake', driver: 'Dion Tesselaar', trainer: 'Dion Tesselaar', sex: 'M', age: 2, form: [], times: [], purses: [], record: null, note: 'debutant · stal Tesselaar' },
+			{ n: 2, name: 'Spirit Meerswal', driver: 'Jaap van Rijn', trainer: 'Jack Mollema', sex: 'H', age: 2, form: [3], times: [t(1, 15.2)], purses: [5500], record: t(1, 15.2) },
+			{ n: 3, name: 'Shiva Jabi', driver: 'Jan Baas', trainer: 'Jan Baas', sex: 'H', age: 2, form: ['D', 'D'], times: [], purses: [3300, 5500], record: null, note: 'twee keer uit de draf' },
+			{ n: 4, name: 'Seabiscuit Lobell', driver: 'Hugo Langeweg', trainer: 'Hugo Langeweg', sex: 'M', age: 2, form: [2], times: [t(1, 15.2)], purses: [3300], record: t(1, 15.2), note: '2e bij debuut, 10 september' },
+			{ n: 5, name: 'Sisi Hazelaar', driver: 'Jeffrey Mieras', trainer: 'Dion Tesselaar', sex: 'M', age: 2, form: [2, 'D'], times: [t(1, 15.0)], purses: [5500, 5500], record: t(1, 15.0) },
+			{ n: 6, name: 'Sir Bianco', driver: 'Frans van der Blonk', trainer: 'Frans van der Blonk', sex: 'R', age: 2, form: [], times: [], purses: [], record: null, note: 'debutant' }
+		]
+	}
+];
+
+export const raceBySlug = (slug: string) => races.find((r) => r.slug === slug);

src/lib/geo.test.ts

@@ -0,0 +1,10 @@
+import { describe, expect, it } from 'vitest';
+import { distanceMeters } from './geo';
+
+describe('distanceMeters', () => {
+	it('keeps nearby sightings within the 30 km limit and rejects distant ones', () => {
+		expect(distanceMeters(52.009, 4.708, 52.009, 4.708)).toBe(0);
+		expect(distanceMeters(52.009, 4.708, 52.01, 4.71)).toBeLessThan(30_000);
+		expect(distanceMeters(52.009, 4.708, 52.37, 4.9)).toBeGreaterThan(30_000);
+	});
+});

src/lib/geo.ts

@@ -0,0 +1,11 @@
+const EARTH_RADIUS_METERS = 6_371_000;
+
+export function distanceMeters(lat1: number, lng1: number, lat2: number, lng2: number): number {
+	const toRad = (degrees: number) => (degrees * Math.PI) / 180;
+	const deltaLat = toRad(lat2 - lat1);
+	const deltaLng = toRad(lng2 - lng1);
+	const a =
+		Math.sin(deltaLat / 2) ** 2 +
+		Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(deltaLng / 2) ** 2;
+	return 2 * EARTH_RADIUS_METERS * Math.asin(Math.sqrt(a));
+}

src/lib/map-finder/Artwork.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	let { src, class: className = '' }: { src?: string; class?: string } = $props();
+	let failed = $state(false);
+	$effect(() => {
+		void src;
+		failed = false;
+	});
+</script>
+
+<div class={`overflow-hidden rounded bg-gray-200 ${className}`}>
+	{#if src?.startsWith('https://') && !failed}<img
+			{src}
+			alt=""
+			class="h-full w-full object-cover"
+			loading="lazy"
+			onerror={() => (failed = true)}
+		/>{:else}<div
+			class="flex h-full items-center justify-center text-2xl text-gray-500"
+			aria-hidden="true"
+		>
+			♫
+		</div>{/if}
+</div>

src/lib/map-finder/MapCard.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { ScoredBeatmapset } from './types';
+	import Artwork from './Artwork.svelte';
+	let { map }: { map: ScoredBeatmapset } = $props();
+</script>
+
+<a
+	href={`https://osu.ppy.sh/beatmapsets/${map.id}`}
+	target="_blank"
+	rel="noopener noreferrer"
+	class="block h-full overflow-hidden rounded border border-gray-300 hover:border-blue-600 focus-visible:outline-2 focus-visible:outline-blue-600"
+>
+	<Artwork src={map.covers?.card} class="h-24 rounded-none" />
+	<div class="space-y-1 p-3">
+		<h4 class="font-semibold">
+			{map.artist_unicode || map.artist} – {map.title_unicode || map.title}
+		</h4>
+		<p class="text-sm text-gray-600">{map.score}/100 · {map.confidence} confidence</p>
+		<p class="text-xs text-gray-600">{map.reasons.join(' · ')}</p>
+		{#if map.status || map.beatmaps}<p class="text-xs text-gray-600">
+				{map.status ?? ''}{map.status && map.beatmaps ? ' · ' : ''}{map.beatmaps
+					? `${map.beatmaps.length} difficulties`
+					: ''}
+			</p>{/if}
+	</div>
+</a>

src/lib/map-finder/finder.test.ts

@@ -0,0 +1,90 @@
+import { describe, expect, it } from 'vitest';
+import { parseSpotifyInput } from './input';
+import { normalize, cleanTitle, scoreBeatmapset, rankCandidates, MAX_CANDIDATES } from './matching';
+import type { SpotifyTrack } from './types';
+const id = '6PUzxtIHkv346yP89NzP9X';
+const track: SpotifyTrack = {
+	id,
+	name: 'Song Title',
+	artists: [{ name: 'Beyoncé & Friends' }],
+	album: { name: 'Album', images: [] }
+};
+const map = { id: 1, title: 'Song Title', artist: 'Beyonce and Friends' };
+describe('Spotify input', () => {
+	it.each([
+		`https://open.spotify.com/track/${id}`,
+		` https://open.spotify.com/track/${id}?si=abc `,
+		`http://www.open.spotify.com/track/${id}/`,
+		`https://open.spotify.com/intl-nl/track/${id}/?si=abc`,
+		`spotify:track:${id}`
+	])('parses %s', (value) => expect(parseSpotifyInput(value)).toEqual({ kind: 'track', id }));
+	it.each([`spotify:playlist:${id}`, `https://open.spotify.com/playlist/${id}?si=abc`])(
+		'parses playlist %s',
+		(value) => expect(parseSpotifyInput(value)).toEqual({ kind: 'playlist', id })
+	);
+	it.each(['artist', 'episode', 'show'])('rejects unsupported %s', (resource) =>
+		expect(parseSpotifyInput(`https://open.spotify.com/${resource}/${id}`).kind).toBe('unsupported')
+	);
+	it.each([
+		'',
+		' ',
+		'spotify:track:bad',
+		'https://open.spotify.com/track/',
+		'https://open.spotify.com/track/bad',
+		'x'.repeat(501)
+	])('validates %s', (value) => expect(() => parseSpotifyInput(value)).toThrow());
+	it('preserves plain search and rejects lookalike host recognition', () => {
+		expect(parseSpotifyInput(' Deftones Change ')).toEqual({
+			kind: 'search',
+			query: 'Deftones Change'
+		});
+		expect(parseSpotifyInput(`https://open.spotify.com.evil.test/track/${id}`).kind).toBe('search');
+	});
+});
+describe('matching', () => {
+	it.each([
+		'Song Title',
+		'Song Title (Remastered 2011)',
+		'Song Title - Remaster',
+		'Song Title (feat. Someone)',
+		'Song Title [Radio Edit]',
+		'Song Title - Album Version'
+	])('cleans %s', (value) => expect(cleanTitle(value)).toBe('song title'));
+	it('normalizes punctuation, diacritics, ampersands and whitespace', () =>
+		expect(normalize(' Beyoncé &  Friends! ')).toBe('beyonce and friends'));
+	it('keeps non-Latin text', () => expect(normalize('世界の歌')).toBe('世界の歌'));
+	it('scores exact and unicode aliases highly', () => {
+		expect(scoreBeatmapset(track, map).score).toBe(100);
+		expect(
+			scoreBeatmapset(
+				{ ...track, name: '世界の歌' },
+				{ ...map, title: 'Sekai no uta', title_unicode: '世界の歌' }
+			).confidence
+		).toBe('high');
+	});
+	it('does not confidently match the wrong artist', () =>
+		expect(scoreBeatmapset(track, { ...map, artist: 'Unrelated Singer' }).confidence).toBe('low'));
+	it('penalizes remix mismatch', () =>
+		expect(scoreBeatmapset(track, { ...map, title: 'Song Title (Club Remix)' }).confidence).toBe(
+			'low'
+		));
+	it('sorts, merges duplicate IDs and limits results', () => {
+		const candidates = rankCandidates(track, [
+			{ ...map, title: 'Song Title remix' },
+			...Array.from({ length: 10 }, (_, id) => ({ ...map, id }))
+		]);
+		expect(candidates).toHaveLength(MAX_CANDIDATES);
+		expect(new Set(candidates.map((m) => m.id)).size).toBe(MAX_CANDIDATES);
+		expect(candidates[0].score).toBe(100);
+		expect(candidates.every((m, i) => !i || candidates[i - 1].score >= m.score)).toBe(true);
+	});
+	it('discards unrelated candidates', () =>
+		expect(
+			rankCandidates(track, [{ ...map, title: 'Nothing Alike', artist: 'Different' }])
+		).toEqual([]));
+});
+
+it.each([`spotify:album:${id}`, `https://www.open.spotify.com/intl-nl/album/${id}/?si=abc`])(
+	'parses album %s',
+	(value) => expect(parseSpotifyInput(value)).toEqual({ kind: 'album', id })
+);

src/lib/map-finder/input.ts

@@ -0,0 +1,44 @@
+export type SpotifyInput =
+	| { kind: 'track'; id: string }
+	| { kind: 'playlist'; id: string }
+	| { kind: 'album'; id: string }
+	| { kind: 'search'; query: string }
+	| { kind: 'unsupported'; resource: string };
+export function parseSpotifyInput(value: string): SpotifyInput {
+	const query = value.trim();
+	if (!query || query.length > 500)
+		throw new Error('Enter a Spotify URL, URI, or song search (up to 500 characters).');
+	let resource: string | undefined;
+	let id: string | undefined;
+	if (/^spotify:/i.test(query)) {
+		const match = /^spotify:([^:]+):([^:]+)$/i.exec(query);
+		if (!match)
+			throw new Error(
+				'Invalid Spotify URI. Use spotify:track:ID or spotify:playlist:ID or spotify:album:ID.'
+			);
+		[, resource, id] = match;
+	} else {
+		let url: URL;
+		try {
+			url = new URL(query);
+		} catch {
+			if (/^(?:https?:\/\/)?(?:www\.)?open\.spotify\.com\b/i.test(query))
+				throw new Error('Invalid Spotify URL. Include https://open.spotify.com/.');
+			return { kind: 'search', query };
+		}
+		if (!/^(www\.)?open\.spotify\.com$/i.test(url.hostname)) return { kind: 'search', query };
+		if (!['http:', 'https:'].includes(url.protocol) || url.username || url.password || url.port)
+			throw new Error('Invalid Spotify URL.');
+		const match = /^\/(?:intl-[a-z-]+\/)?([^/]+)(?:\/([^/]+))?\/?$/i.exec(url.pathname);
+		if (!match) throw new Error('Invalid Spotify URL path.');
+		[, resource, id] = match;
+	}
+	resource = resource.toLowerCase();
+	if (resource !== 'track' && resource !== 'playlist' && resource !== 'album')
+		return { kind: 'unsupported', resource };
+	if (!id || !/^[a-zA-Z0-9]{22}$/.test(id))
+		throw new Error(
+			'Invalid Spotify ID. Track, playlist, and album IDs must contain 22 letters or digits.'
+		);
+	return { kind: resource, id };
+}

src/lib/map-finder/matching.ts

@@ -0,0 +1,87 @@
+import type { OsuBeatmapset, ScoredBeatmapset, SpotifyTrack } from './types';
+// Medium requires a strong title plus artist evidence. High is reserved for near-exact pairs.
+export const HIGH_CONFIDENCE = 88;
+export const MEDIUM_CONFIDENCE = 72;
+export const MIN_CANDIDATE_SCORE = 40;
+export const MAX_CANDIDATES = 6;
+export function normalize(value: string): string {
+	return value
+		.normalize('NFKD')
+		.replace(/\p{M}/gu, '')
+		.toLowerCase()
+		.replace(/&/g, ' and ')
+		.replace(/[^\p{L}\p{N}\s]/gu, ' ')
+		.replace(/\s+/g, ' ')
+		.trim();
+}
+export function cleanTitle(value: string): string {
+	return normalize(
+		value
+			.replace(
+				/\s*[([](?:feat\.?|ft\.?|featuring|[^)\]]*(?:remaster|radio edit|album version|soundtrack|from the))[^)\]]*[)\]]/gi,
+				''
+			)
+			.replace(/\s+(?:feat\.?|ft\.?|featuring)\s+.*$/i, '')
+			.replace(/\s*[-–—]\s*(?:\d{4}\s*)?(?:remaster\w*|radio edit|album version|from\s+).*$/i, '')
+	);
+}
+function similarity(a: string, b: string): number {
+	if (!a || !b) return 0;
+	if (a === b) return 1;
+	const left = new Set(a.split(' ')),
+		right = new Set(b.split(' '));
+	const overlap = [...left].filter((token) => right.has(token)).length;
+	return Math.max(
+		(2 * overlap) / (left.size + right.size),
+		a.length >= 5 && b.length >= 5 && (a.includes(b) || b.includes(a)) ? 0.8 : 0
+	);
+}
+function versions(value: string): string {
+	const normalized = normalize(value);
+	return ['remix', 'live', 'acoustic', 'instrumental', 'sped up', 'nightcore']
+		.filter((word) => normalized.includes(word))
+		.join(' ');
+}
+export function scoreBeatmapset(track: SpotifyTrack, map: OsuBeatmapset): ScoredBeatmapset {
+	const title = Math.max(
+		...[map.title, map.title_unicode ?? ''].map((v) =>
+			similarity(cleanTitle(track.name), cleanTitle(v))
+		)
+	);
+	const artistNames = [
+		...track.artists.map((a) => a.name),
+		track.artists.map((a) => a.name).join(' and ')
+	];
+	const artist = Math.max(
+		0,
+		...artistNames.flatMap((a) =>
+			[map.artist, map.artist_unicode ?? ''].map((b) => similarity(normalize(a), normalize(b)))
+		)
+	);
+	const mismatch = versions(track.name) !== versions(map.title + ' ' + (map.title_unicode ?? ''));
+	let score = Math.round(title * 65 + artist * 35 - (mismatch ? 24 : 0));
+	if (artist < 0.3) score = Math.min(score, MEDIUM_CONFIDENCE - 1);
+	score = Math.max(0, score);
+	const reasons = [
+		title === 1 ? 'title exact' : 'title similar',
+		artist === 1 ? 'artist exact' : artist >= 0.3 ? 'artist similar' : 'artist differs'
+	];
+	if (mismatch) reasons.push('version differs');
+	return {
+		...map,
+		score,
+		confidence: score >= HIGH_CONFIDENCE ? 'high' : score >= MEDIUM_CONFIDENCE ? 'medium' : 'low',
+		reasons
+	};
+}
+export function rankCandidates(track: SpotifyTrack, maps: OsuBeatmapset[]): ScoredBeatmapset[] {
+	const merged = new Map<number, ScoredBeatmapset>();
+	for (const map of maps) {
+		const scored = scoreBeatmapset(track, map);
+		if (scored.score > (merged.get(map.id)?.score ?? -1)) merged.set(map.id, scored);
+	}
+	return [...merged.values()]
+		.filter((m) => m.score >= MIN_CANDIDATE_SCORE)
+		.sort((a, b) => b.score - a.score || a.id - b.id)
+		.slice(0, MAX_CANDIDATES);
+}

src/lib/map-finder/types.ts

@@ -0,0 +1,34 @@
+export type SpotifyTrack = {
+	id: string;
+	name: string;
+	artists: { name: string }[];
+	album: { name: string; images: { url: string }[] };
+};
+export type SpotifyCollection = {
+	kind: 'playlist' | 'album';
+	id: string;
+	name: string;
+	owner: string;
+	image?: string;
+};
+export type OsuBeatmapset = {
+	id: number;
+	artist: string;
+	title: string;
+	artist_unicode?: string;
+	title_unicode?: string;
+	covers?: { card?: string; 'card@2x'?: string };
+	status?: string;
+	beatmaps?: { id: number }[];
+};
+export type ScoredBeatmapset = OsuBeatmapset & {
+	score: number;
+	confidence: 'high' | 'medium' | 'low';
+	reasons: string[];
+};
+export type TrackMatchResult = {
+	track: SpotifyTrack;
+	matches: ScoredBeatmapset[];
+	status: 'matched' | 'no_match' | 'error';
+	error?: string;
+};

src/lib/relative-time.test.ts

@@ -0,0 +1,12 @@
+import { describe, expect, it } from 'vitest';
+import { relativeTime } from './relative-time';
+
+describe('relativeTime', () => {
+	it('uses readable singular and plural dates', () => {
+		const now = Date.UTC(2026, 8, 23);
+		expect(relativeTime(new Date(now - 1000), now)).toBe('just now');
+		expect(relativeTime(new Date(now - 1000 * 30), now)).toBe('30 seconds ago');
+		expect(relativeTime(new Date(now - 1000 * 60 * 60), now)).toBe('an hour ago');
+		expect(relativeTime(new Date(now - 1000 * 60 * 60 * 24 * 365), now)).toBe('a year ago');
+	});
+});

src/lib/relative-time.ts

@@ -0,0 +1,26 @@
+export function relativeTime(date: Date | string, now: number) {
+	const elapsed = Math.max(0, Math.floor((now - new Date(date).getTime()) / 1000));
+	if (elapsed < 5) return 'just now';
+	const units: [number, string][] = [
+		[31_536_000, 'year'],
+		[2_592_000, 'month'],
+		[604_800, 'week'],
+		[86_400, 'day'],
+		[3_600, 'hour'],
+		[60, 'minute'],
+		[1, 'second']
+	];
+	for (const [seconds, unit] of units) {
+		if (elapsed >= seconds) {
+			const count = Math.floor(elapsed / seconds);
+			return `${count === 1 ? (unit === 'hour' ? 'an' : 'a') : count} ${unit}${count === 1 ? '' : 's'} ago`;
+		}
+	}
+	return 'just now';
+}
+
+const dateFormatter = new Intl.DateTimeFormat('en', { dateStyle: 'long', timeZone: 'UTC' });
+
+export function calendarDate(date: Date | string) {
+	return dateFormatter.format(new Date(date));
+}

src/lib/seo.test.ts

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { getSeo } from './seo';
+
+describe('public page metadata', () => {
+	it('gives the homepage a descriptive title and production canonical URL', () => {
+		const seo = getSeo('/');
+		expect(seo.title).toBe('Projects, lists and writing | Stan Runge');
+		expect(seo.url).toBe('https://stanrunge.dev/');
+		expect(seo.indexable).toBe(true);
+		expect(seo.image).toBe('https://stanrunge.dev/moon.jpg');
+	});
+
+	it('uses article content and its latest edit time', () => {
+		const article = getSeo('/blog/my-post', {
+			blogArticle: {
+				title: 'My post',
+				content: 'A **specific** article about lists.',
+				updatedAt: '2026-09-02T00:00:00.000Z'
+			}
+		});
+		expect(article.title).toBe('My post | Stan Runge');
+		expect(article.description).toBe('A specific article about lists.');
+		expect(article.type).toBe('article');
+		expect(article.modifiedAt).toBe('2026-09-02T00:00:00.000Z');
+	});
+
+	it('describes a list using its contents', () => {
+		const seo = getSeo('/lists/vinyls-to-collect', {
+			list: {
+				name: 'Vinyls to collect',
+				isProgress: true,
+				items: [{ name: 'Album one' }, { name: 'Album two' }]
+			}
+		});
+		expect(seo.title).toBe('Vinyls to collect | Stan Runge');
+		expect(seo.description).toContain('Album one, Album two');
+		expect(seo.indexable).toBe(true);
+	});
+
+	it('keeps private and staging pages out of search results', () => {
+		expect(getSeo('/login').indexable).toBe(false);
+		expect(getSeo('/projects/animaldex/register').indexable).toBe(false);
+		expect(
+			getSeo('/blog/my-post/edit', {
+				blogArticle: {
+					title: 'My post',
+					content: '',
+					updatedAt: ''
+				}
+			}).indexable
+		).toBe(false);
+		expect(getSeo('/projects/catch-em-all', {}, 'STAGING').indexable).toBe(false);
+	});
+});

src/lib/seo.ts

@@ -0,0 +1,118 @@
+import { formatTitle, getTitle, type SiteEnvironment } from './title';
+
+export const SITE_ORIGIN = 'https://stanrunge.dev';
+
+type Article = {
+	title: string;
+	content: string;
+	updatedAt: Date | string;
+};
+type List = { name: string; isProgress: boolean; items: { name: string }[] };
+type Race = { short: string; distance: number; discipline: string };
+type PageContent = { blogArticle?: Article; list?: List; race?: Race };
+
+type Seo = {
+	title: string;
+	description: string;
+	url: string;
+	indexable: boolean;
+	type: 'website' | 'article';
+	image: string;
+	imageAlt: string;
+	modifiedAt?: string;
+};
+
+const publicPages: Record<string, { title: string; description: string }> = {
+	'/': {
+		title: 'Projects, lists and writing',
+		description: 'Stan Runge’s projects, lists, writing and experience.'
+	},
+	'/projects': {
+		title: 'Projects',
+		description: 'Software projects by Stan Runge, including Catchemall, Animaldex and Derby Lens.'
+	},
+	'/blog': { title: 'Blog', description: 'Articles and notes by Stan Runge.' },
+	'/lists': { title: 'Lists', description: 'Lists collected and maintained by Stan Runge.' },
+	'/projects/catch-em-all': {
+		title: 'Catchemall',
+		description: 'Track which Pokémon you have caught across 53 games and 1,025 Pokémon.'
+	},
+	'/projects/animaldex': {
+		title: 'Animaldex',
+		description: 'Find and add neighborhood animals on a map.'
+	},
+	'/projects/derby': {
+		title: 'Derby Lens',
+		description: 'Estimate horse racing odds and compare them with market prices.'
+	},
+	'/projects/spotify-beatmap-finder': {
+		title: 'osu! map finder',
+		description: 'Find osu! beatmaps for Spotify songs, albums and playlists.'
+	}
+};
+
+function excerpt(markdown: string): string {
+	return markdown
+		.replace(/!\[[^\]]*\]\([^)]*\)/g, '')
+		.replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
+		.replace(/<[^>]*>/g, ' ')
+		.replace(/[`*_>#~|]/g, ' ')
+		.replace(/\s+/g, ' ')
+		.trim()
+		.slice(0, 160);
+}
+
+function date(value: Date | string): string | undefined {
+	const parsed = new Date(value);
+	return Number.isNaN(parsed.getTime()) ? undefined : parsed.toISOString();
+}
+
+export function getSeo(
+	pathname: string,
+	content: PageContent = {},
+	environment: SiteEnvironment = null
+): Seo {
+	const path = pathname.replace(/\/$/, '') || '/';
+	const url = new URL(path, SITE_ORIGIN).href;
+	let page = publicPages[path];
+	let type: Seo['type'] = 'website';
+	let modifiedAt: string | undefined;
+
+	if (/^\/blog\/[^/]+$/.test(path) && content.blogArticle) {
+		const article = content.blogArticle;
+		page = {
+			title: article.title,
+			description: excerpt(article.content) || `Read ${article.title} by Stan Runge.`
+		};
+		type = 'article';
+		modifiedAt = date(article.updatedAt);
+	} else if (/^\/blog\/[^/]+\/edit$/.test(path) && content.blogArticle) {
+		page = { title: `Editing ${content.blogArticle.title}`, description: 'Edit a blog article.' };
+	} else if (/^\/lists\/[^/]+$/.test(path) && content.list) {
+		const list = content.list;
+		const names = list.items.slice(0, 3).map((item) => item.name);
+		page = {
+			title: list.name,
+			description: names.length
+				? `${list.name}: ${names.join(', ')}${list.items.length > names.length ? ', and more' : ''}.`
+				: `${list.name}, a ${list.isProgress ? 'progress ' : ''}list by Stan Runge.`
+		};
+	} else if (/^\/projects\/derby\/[^/]+$/.test(path) && content.race) {
+		const race = content.race;
+		page = {
+			title: `${race.short} · Derby Lens`,
+			description: `Estimate odds for the ${race.short}, a ${race.distance} m ${race.discipline} race.`
+		};
+	}
+
+	return {
+		title: page ? formatTitle(page.title, environment) : getTitle(path, environment),
+		description: page?.description ?? 'Stan Runge’s personal website.',
+		url,
+		indexable: !!page && !environment && !/^\/blog\/[^/]+\/edit$/.test(path),
+		type,
+		image: `${SITE_ORIGIN}/moon.jpg`,
+		imageAlt: 'Moon icon for Stan Runge’s website',
+		modifiedAt
+	};
+}

src/lib/server/auth.ts

@@ -1,35 +1,88 @@
 import { env } from '$env/dynamic/private';
+import { building, dev } from '$app/environment';
 import { betterAuth } from 'better-auth/minimal';
 import { drizzleAdapter } from 'better-auth/adapters/drizzle';
+import { genericOAuth } from 'better-auth/plugins';
+import { APIError, createAuthMiddleware } from 'better-auth/api';
 import { sveltekitCookies } from 'better-auth/svelte-kit';
 import { getRequestEvent } from '$app/server';
 import { db } from '$lib/server/db';
 import * as schema from '$lib/server/db/schema';
-import { error, type RequestEvent } from '@sveltejs/kit';
+import { osuProfile } from './osu-profile';
+export { isAdmin, requireAdmin, requireUser } from './authorization';
 
+if (!building && (!env.BETTER_AUTH_SECRET || env.BETTER_AUTH_SECRET.length < 32)) {
+	throw new Error('Set BETTER_AUTH_SECRET to a random secret of at least 32 characters');
+}
+if (!building && !dev && !env.BETTER_AUTH_URL && !env.ORIGIN) {
+	throw new Error('Set BETTER_AUTH_URL to the public site origin');
+}
+export const authProviders = {
+	google: !!(env.GOOGLE_CLIENT_ID && env.GOOGLE_CLIENT_SECRET),
+	osu: !!(env.OSU_CLIENT_ID && env.OSU_CLIENT_SECRET)
+};
 export const auth = betterAuth({
-	baseURL: env.ORIGIN ?? 'http://localhost:3000',
+	baseURL: env.BETTER_AUTH_URL || env.ORIGIN || 'http://localhost:5173',
-	secret: env.BETTER_AUTH_SECRET ?? 'build-time-placeholder',
+	secret: env.BETTER_AUTH_SECRET || 'build-only-placeholder-not-a-runtime-secret',
 	database: drizzleAdapter(db, { provider: 'pg', schema }),
-	emailAndPassword: { enabled: true },
+	emailAndPassword: { enabled: true, minPasswordLength: 12, maxPasswordLength: 128 },
-	socialProviders: {
+	user: {
-		github: {
+		additionalFields: {
-			clientId: env.GITHUB_CLIENT_ID,
+			role: { type: 'string', required: false, defaultValue: 'user', input: false }
-			clientSecret: env.GITHUB_CLIENT_SECRET
 		}
 	},
+	account: {
+		accountLinking: {
+			enabled: true,
+			disableImplicitLinking: true,
+			allowDifferentEmails: true,
+			trustedProviders: ['osu']
+		}
+	},
+	rateLimit: { enabled: true },
+	socialProviders: authProviders.google
+		? {
+				google: { clientId: env.GOOGLE_CLIENT_ID!, clientSecret: env.GOOGLE_CLIENT_SECRET! }
+			}
+		: {},
+	hooks: {
+		before: createAuthMiddleware(async (ctx) => {
+			// osu! has no email scope. Reserve its internal identifiers against credential signup.
+			if (
+				ctx.path === '/sign-up/email' &&
+				typeof ctx.body?.email === 'string' &&
+				ctx.body.email.toLowerCase().endsWith('.invalid')
+			) {
+				throw new APIError('BAD_REQUEST', { message: 'Please use a deliverable email address' });
+			}
+		})
+	},
 	plugins: [
-		sveltekitCookies(getRequestEvent) // make sure this is the last plugin in the array
+		genericOAuth({
+			config: authProviders.osu
+				? [
+						{
+							providerId: 'osu',
+							clientId: env.OSU_CLIENT_ID!,
+							clientSecret: env.OSU_CLIENT_SECRET!,
+							authorizationUrl: 'https://osu.ppy.sh/oauth/authorize',
+							tokenUrl: 'https://osu.ppy.sh/oauth/token',
+							scopes: ['identify'],
+							getUserInfo: async (tokens) => {
+								const response = await fetch('https://osu.ppy.sh/api/v2/me', {
+									headers: {
+										Authorization: `Bearer ${tokens.accessToken}`,
+										Accept: 'application/json'
+									},
+									signal: AbortSignal.timeout(10000)
+								});
+								if (!response.ok) throw new Error('Could not load osu! profile');
+								return osuProfile(await response.json());
+							}
+						}
+					]
+				: []
+		}),
+		sveltekitCookies(getRequestEvent)
 	]
 });
-
-export function isAdmin(event: RequestEvent): boolean {
-	const token = event.cookies.get('admin_token');
-	return !!token && token === env.ADMIN_SECRET;
-}
-
-export function requireAdmin(event: RequestEvent): void {
-	if (!isAdmin(event)) {
-		error(401, { message: 'Unauthorized' });
-	}
-}

src/lib/server/authorization.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, it } from 'vitest';
+import { isAdmin, requireAdmin, requireUser } from './authorization';
+function event(role?: string) {
+	return { locals: { user: role ? { id: 'alice', role } : null, session: null } } as {
+		locals: App.Locals;
+	};
+}
+describe('central authorization', () => {
+	it('rejects anonymous requests even with a legacy admin cookie', () => {
+		const anonymous = { ...event(), cookies: { get: () => 'old-admin-secret' } };
+		expect(isAdmin(anonymous)).toBe(false);
+		expect(() => requireAdmin(anonymous)).toThrow(expect.objectContaining({ status: 401 }));
+	});
+	it('allows normal users to own data but not administer the site', () => {
+		expect(requireUser(event('user')).id).toBe('alice');
+		expect(() => requireAdmin(event('user'))).toThrow(expect.objectContaining({ status: 403 }));
+	});
+	it('allows only the explicit admin role', () => {
+		expect(requireAdmin(event('admin')).id).toBe('alice');
+		expect(isAdmin(event('superadmin'))).toBe(false);
+	});
+});

src/lib/server/authorization.ts

@@ -0,0 +1,18 @@
+import { error } from '@sveltejs/kit';
+
+type AuthEvent = { locals: App.Locals };
+
+export function requireUser(event: AuthEvent) {
+	if (!event.locals.user) error(401, 'Log in to continue');
+	return event.locals.user;
+}
+
+export function isAdmin(event: AuthEvent): boolean {
+	return event.locals.user?.role === 'admin';
+}
+
+export function requireAdmin(event: AuthEvent) {
+	const user = requireUser(event);
+	if (!isAdmin(event)) error(403, 'Administrator access required');
+	return user;
+}

src/lib/server/catalog.test.ts

@@ -0,0 +1,35 @@
+import { readFileSync } from 'node:fs';
+import { describe, expect, it } from 'vitest';
+const catalog = JSON.parse(readFileSync('data/pokemon-catalog.json', 'utf8')) as {
+	pokemon: { number: number; name: string; hp: number; type1: string }[];
+	games: { sourceId: number; name: string }[];
+	entries: [number, number, string][];
+};
+describe('Pokémon catalog snapshot', () => {
+	it('contains the national species catalog and the latest source versions', () => {
+		expect(catalog.pokemon).toHaveLength(1025);
+		expect(catalog.games.length).toBeGreaterThanOrEqual(53);
+		expect(catalog.pokemon.find((p) => p.number === 25)).toMatchObject({
+			name: 'Pikachu',
+			type1: 'Electric',
+			hp: 35
+		});
+		expect(catalog.games.some((g) => g.name.includes('Z-A'))).toBe(true);
+	});
+	it('has unique species, games, and valid entry references', () => {
+		const pokemon = new Set(catalog.pokemon.map((p) => p.number));
+		const games = new Set(catalog.games.map((g) => g.sourceId));
+		expect(pokemon.size).toBe(catalog.pokemon.length);
+		expect(games.size).toBe(catalog.games.length);
+		expect(new Set(catalog.entries.map(([p, g]) => `${p}/${g}`)).size).toBe(catalog.entries.length);
+		expect(
+			catalog.entries.every(
+				([p, g, a]) => pokemon.has(p) && games.has(g) && ['catchable', 'unknown'].includes(a)
+			)
+		).toBe(true);
+	});
+	it('does not invent exclusive availability from missing encounters', () => {
+		expect(catalog.entries.some(([, , a]) => a === 'catchable')).toBe(true);
+		expect(catalog.entries.some(([, , a]) => a === 'unknown')).toBe(true);
+	});
+});

src/lib/server/db/relations.ts

@@ -2,6 +2,27 @@ import { defineRelations } from 'drizzle-orm';
 import * as schema from './schema';
 
 export const relations = defineRelations(schema, (r) => ({
+	// ── Auth ──────────────────────────────────────
+	user: {
+		sessions: r.many.session(),
+		accounts: r.many.account(),
+		entries: r.many.userEntries(),
+		games: r.many.userGames(),
+		listCompletions: r.many.listItemCompletions()
+	},
+	session: {
+		user: r.one.user({
+			from: r.session.userId,
+			to: r.user.id
+		})
+	},
+	account: {
+		user: r.one.user({
+			from: r.account.userId,
+			to: r.user.id
+		})
+	},
+
 	// ── Progress ──────────────────────────────────
 	tasks: {
 		tasksToTopics: r.many.tasksToTopics()
@@ -21,61 +42,41 @@ export const relations = defineRelations(schema, (r) => ({
 	},
 
 	// ── CatchEmAll ────────────────────────────────
-	game: {
+	games: {
-		entries: r.many.pokemonGameEntry()
+		entries: r.many.pokemonGameEntries()
 	},
 	pokemon: {
-		entry: r.many.pokemonGameEntry()
+		entry: r.many.pokemonGameEntries()
 	},
-	pokemonGameEntry: {
+	pokemonGameEntries: {
-		game: r.one.game({
+		game: r.one.games({
-			from: r.pokemonGameEntry.gameId,
+			from: r.pokemonGameEntries.gameId,
-			to: r.game.id
+			to: r.games.id
 		}),
 		pokemon: r.one.pokemon({
-			from: r.pokemonGameEntry.pokemonId,
+			from: r.pokemonGameEntries.pokemonId,
 			to: r.pokemon.id
 		}),
-		userEntries: r.many.userEntry()
+		userEntries: r.many.userEntries()
 	},
-	userEntry: {
+	userEntries: {
-		pokemonGameEntry: r.one.pokemonGameEntry({
+		pokemonGameEntry: r.one.pokemonGameEntries({
-			from: r.userEntry.pokemonGameEntryId,
+			from: r.userEntries.pokemonGameEntryId,
-			to: r.pokemonGameEntry.id
+			to: r.pokemonGameEntries.id
 		}),
 		user: r.one.user({
-			from: r.userEntry.userId,
+			from: r.userEntries.userId,
 			to: r.user.id
 		})
 	},
-	userGame: {
+	userGames: {
 		user: r.one.user({
-			from: r.userGame.userId,
+			from: r.userGames.userId,
 			to: r.user.id
 		}),
-		game: r.one.game({
+		game: r.one.games({
-			from: r.userGame.gameId,
+			from: r.userGames.gameId,
-			to: r.game.id
+			to: r.games.id
-		})
-	},
-
-	// ── Auth ──────────────────────────────────────
-	user: {
-		sessions: r.many.session(),
-		accounts: r.many.account(),
-		entries: r.many.userEntry(),
-		games: r.many.userGame()
-	},
-	session: {
-		user: r.one.user({
-			from: r.session.userId,
-			to: r.user.id
-		})
-	},
-	account: {
-		user: r.one.user({
-			from: r.account.userId,
-			to: r.user.id
 		})
 	},
 
@@ -95,5 +96,27 @@ export const relations = defineRelations(schema, (r) => ({
 			from: r.photos.sightingId,
 			to: r.sightings.id
 		})
+	},
+
+	// ── Lists ─────────────────────────────────────
+	lists: {
+		items: r.many.listItems()
+	},
+	listItems: {
+		list: r.one.lists({
+			from: r.listItems.listId,
+			to: r.lists.id
+		}),
+		completions: r.many.listItemCompletions()
+	},
+	listItemCompletions: {
+		item: r.one.listItems({
+			from: r.listItemCompletions.itemId,
+			to: r.listItems.id
+		}),
+		user: r.one.user({
+			from: r.listItemCompletions.userId,
+			to: r.user.id
+		})
 	}
 }));

src/lib/server/db/schema.ts

@@ -1,234 +0,0 @@
-import {
-	doublePrecision,
-	index,
-	integer,
-	pgEnum,
-	pgTable,
-	real,
-	serial,
-	text,
-	timestamp,
-	unique,
-	uuid,
-	varchar
-} from 'drizzle-orm/pg-core';
-
-import { user } from './auth.schema';
-import { availabilityValues } from '../../availability';
-
-export const tasks = pgTable('tasks', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	currentPoints: integer('current_points').default(0),
-	totalPoints: integer('total_points').default(1),
-	notes: varchar('notes', { length: 8192 }),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
-export const topics = pgTable('topics', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	emoji: varchar('emoji', { length: 256 }),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
-export const tasksToTopics = pgTable('tasks_to_topics', {
-	taskId: integer('task_id')
-		.notNull()
-		.references(() => tasks.id),
-	topicId: integer('topic_id')
-		.notNull()
-		.references(() => topics.id)
-});
-
-export const universities = pgTable('universities', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	progress: integer('progress').default(0),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
-export const certificates = pgTable('certificates', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	progress: integer('progress').default(0),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
-export const publications = pgTable('publications', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }),
-	createdAt: timestamp('created_at').defaultNow(),
-	updatedAt: timestamp('updated_at').defaultNow()
-});
-
-// Legacy ^
-// New
-
-export const blogArticleStatus = pgEnum('blog_article_status', ['draft', 'published']);
-
-export const blogArticles = pgTable(
-	'blog_articles',
-	{
-		id: serial('id').primaryKey(),
-		title: varchar('title', { length: 256 }).notNull(),
-		slug: varchar('slug', { length: 256 }).notNull(),
-		content: text('content').default(''),
-		status: blogArticleStatus('status').notNull().default('draft'),
-		createdAt: timestamp('created_at').defaultNow(),
-		updatedAt: timestamp('updated_at').defaultNow()
-	},
-	(table) => [unique().on(table.slug)]
-);
-
-// CatchEmAll
-
-export const availability = pgEnum('availability', availabilityValues);
-
-export const pokemon = pgTable('pokemon', {
-	id: serial('id').primaryKey(),
-	number: integer('number').notNull(),
-	generation: integer('generation').notNull().default(1),
-	name: varchar('name', { length: 256 }).notNull(),
-	type1: varchar('type1', { length: 256 }).notNull(),
-	type2: varchar('type2', { length: 256 }),
-	hp: integer('hp').notNull().default(0),
-	attack: integer('attack').notNull().default(0),
-	defense: integer('defense').notNull().default(0),
-	specialAttack: integer('special_attack').notNull().default(0),
-	specialDefense: integer('special_defense').notNull().default(0),
-	speed: integer('speed').notNull().default(0)
-});
-
-export const game = pgTable('game', {
-	id: serial('id').primaryKey(),
-	name: varchar('name', { length: 256 }).notNull(),
-	generation: integer('generation').notNull().default(1)
-});
-
-export const pokemonGameEntry = pgTable(
-	'pokemon_game_entry',
-	{
-		id: serial('id').primaryKey(),
-		pokemonId: integer('pokemon_id')
-			.notNull()
-			.references(() => pokemon.id, { onDelete: 'cascade' }),
-		gameId: integer('game_id')
-			.notNull()
-			.references(() => game.id, { onDelete: 'cascade' }),
-		availability: availability('availability').notNull().default('catchable'),
-		// optional extra detail for the tooltip, e.g. "trade with a Blue version owner"
-		note: varchar('note', { length: 256 })
-	},
-	(table) => [unique().on(table.pokemonId, table.gameId), index().on(table.gameId)]
-);
-
-export const userEntry = pgTable(
-	'user_entry',
-	{
-		id: serial('id').primaryKey(),
-		pokemonGameEntryId: integer('pokemon_game_entry_id')
-			.notNull()
-			.references(() => pokemonGameEntry.id, { onDelete: 'cascade' }),
-		userId: text('user_id')
-			.notNull()
-			.references(() => user.id, { onDelete: 'cascade' })
-	},
-	(table) => [unique().on(table.pokemonGameEntryId, table.userId), index().on(table.userId)]
-);
-
-// which games a user has chosen to track ("rules")
-export const userGame = pgTable(
-	'user_game',
-	{
-		id: serial('id').primaryKey(),
-		userId: text('user_id')
-			.notNull()
-			.references(() => user.id, { onDelete: 'cascade' }),
-		gameId: integer('game_id')
-			.notNull()
-			.references(() => game.id, { onDelete: 'cascade' })
-	},
-	(table) => [unique().on(table.userId, table.gameId), index().on(table.userId)]
-);
-
-// Animaldex
-
-export const animals = pgTable('animals', {
-	id: uuid('id').primaryKey().defaultRandom(),
-
-	species: text('species').notNull(),
-	breed: text('breed'),
-	animalName: text('animal_name'),
-	description: text('description'),
-
-	// AI detection stored on the animal (from the first/primary photo)
-	aiBreedSuggestion: text('ai_breed_suggestion'),
-	aiBreedConfidence: real('ai_breed_confidence'),
-
-	// Moderation — the animal entity is moderated once.
-	// Accepted = visible on map (as long as it has accepted sightings too).
-	// Denied animals are hidden but not deleted.
-	submittedAt: timestamp('submitted_at', { withTimezone: true }).notNull().defaultNow(),
-	acceptedAt: timestamp('accepted_at', { withTimezone: true }),
-	deniedAt: timestamp('denied_at', { withTimezone: true })
-});
-
-export const sightings = pgTable('sightings', {
-	id: uuid('id').primaryKey().defaultRandom(),
-	animalId: uuid('animal_id')
-		.notNull()
-		.references(() => animals.id, { onDelete: 'cascade' }),
-
-	reporterName: text('reporter_name'),
-
-	seenAt: timestamp('seen_at', { withTimezone: true }).notNull(),
-	lat: doublePrecision('lat').notNull(),
-	lng: doublePrecision('lng').notNull(),
-
-	submittedAt: timestamp('submitted_at', { withTimezone: true }).notNull().defaultNow(),
-	acceptedAt: timestamp('accepted_at', { withTimezone: true }),
-	deniedAt: timestamp('denied_at', { withTimezone: true })
-});
-
-export const photos = pgTable('photos', {
-	id: uuid('id').primaryKey().defaultRandom(),
-	sightingId: uuid('sighting_id')
-		.notNull()
-		.references(() => sightings.id, { onDelete: 'cascade' }),
-	r2Key: text('r2_key').notNull(),
-	url: text('url').notNull(),
-	sortOrder: integer('sort_order').notNull().default(0),
-	uploadedAt: timestamp('uploaded_at', { withTimezone: true }).notNull().defaultNow()
-});
-
-export type Pokemon = typeof pokemon.$inferSelect;
-export type Game = typeof game.$inferSelect;
-export type PokemonGameEntry = typeof pokemonGameEntry.$inferSelect;
-export type UserEntry = typeof userEntry.$inferSelect;
-export type UserGame = typeof userGame.$inferSelect;
-export type Availability = (typeof availability.enumValues)[number];
-
-export type Animal = typeof animals.$inferSelect;
-export type NewAnimal = typeof animals.$inferInsert;
-export type Sighting = typeof sightings.$inferSelect;
-export type NewSighting = typeof sightings.$inferInsert;
-export type Photo = typeof photos.$inferSelect;
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-export type ModerationStatus = 'pending' | 'accepted' | 'denied';
-
-export function getModerationStatus(
-	row: Pick<Animal | Sighting, 'acceptedAt' | 'deniedAt'>
-): ModerationStatus {
-	if (row.deniedAt) return 'denied';
-	if (row.acceptedAt) return 'accepted';
-	return 'pending';
-}
-
-export * from './auth.schema';

src/lib/server/db/schema/animaldex.ts

@@ -0,0 +1,69 @@
+import { doublePrecision, integer, pgTable, text } from 'drizzle-orm/pg-core';
+import { id, timestamps, timestamptz } from './helpers';
+
+export const animals = pgTable('animals', {
+	id: id(),
+
+	species: text('species').notNull(),
+	breed: text('breed'),
+	animalName: text('animal_name'),
+	description: text('description'),
+
+	// AI detection stored on the animal (from the first/primary photo)
+	aiBreedSuggestion: text('ai_breed_suggestion'),
+	aiBreedConfidence: doublePrecision('ai_breed_confidence'),
+
+	// Moderation — the animal entity is moderated once.
+	// Accepted = visible on map (as long as it has accepted sightings too).
+	// Denied animals are hidden but not deleted.
+	submittedAt: timestamptz('submitted_at').notNull().defaultNow(),
+	acceptedAt: timestamptz('accepted_at'),
+	deniedAt: timestamptz('denied_at'),
+	...timestamps
+});
+
+export const sightings = pgTable('sightings', {
+	id: id(),
+	animalId: integer('animal_id')
+		.notNull()
+		.references(() => animals.id, { onDelete: 'cascade' }),
+
+	reporterName: text('reporter_name'),
+
+	seenAt: timestamptz('seen_at').notNull(),
+	lat: doublePrecision('lat').notNull(),
+	lng: doublePrecision('lng').notNull(),
+
+	submittedAt: timestamptz('submitted_at').notNull().defaultNow(),
+	acceptedAt: timestamptz('accepted_at'),
+	deniedAt: timestamptz('denied_at'),
+	...timestamps
+});
+
+export const photos = pgTable('photos', {
+	id: id(),
+	sightingId: integer('sighting_id')
+		.notNull()
+		.references(() => sightings.id, { onDelete: 'cascade' }),
+	r2Key: text('r2_key').notNull(),
+	url: text('url').notNull(),
+	sortOrder: integer('sort_order').notNull().default(0),
+	uploadedAt: timestamptz('uploaded_at').notNull().defaultNow(),
+	...timestamps
+});
+
+export type Animal = typeof animals.$inferSelect;
+export type NewAnimal = typeof animals.$inferInsert;
+export type Sighting = typeof sightings.$inferSelect;
+export type NewSighting = typeof sightings.$inferInsert;
+export type Photo = typeof photos.$inferSelect;
+
+export type ModerationStatus = 'pending' | 'accepted' | 'denied';
+
+export function getModerationStatus(
+	row: Pick<Animal | Sighting, 'acceptedAt' | 'deniedAt'>
+): ModerationStatus {
+	if (row.deniedAt) return 'denied';
+	if (row.acceptedAt) return 'accepted';
+	return 'pending';
+}

src/lib/server/db/schema/auth.ts

@@ -1,13 +1,14 @@
-import { pgTable, text, timestamp, boolean, index } from 'drizzle-orm/pg-core';
+import { pgTable, text, timestamp, boolean, index, uniqueIndex } from 'drizzle-orm/pg-core';
 
 export const user = pgTable('user', {
 	id: text('id').primaryKey(),
 	name: text('name').notNull(),
+	role: text('role').notNull().default('user'),
 	email: text('email').notNull().unique(),
 	emailVerified: boolean('email_verified').default(false).notNull(),
 	image: text('image'),
-	createdAt: timestamp('created_at').defaultNow().notNull(),
+	createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
-	updatedAt: timestamp('updated_at')
+	updatedAt: timestamp('updated_at', { withTimezone: true })
 		.defaultNow()
 		.$onUpdate(() => /* @__PURE__ */ new Date())
 		.notNull()
@@ -17,10 +18,10 @@ export const session = pgTable(
 	'session',
 	{
 		id: text('id').primaryKey(),
-		expiresAt: timestamp('expires_at').notNull(),
+		expiresAt: timestamp('expires_at', { withTimezone: true }).notNull(),
 		token: text('token').notNull().unique(),
-		createdAt: timestamp('created_at').defaultNow().notNull(),
+		createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
-		updatedAt: timestamp('updated_at')
+		updatedAt: timestamp('updated_at', { withTimezone: true })
 			.$onUpdate(() => /* @__PURE__ */ new Date())
 			.notNull(),
 		ipAddress: text('ip_address'),
@@ -37,6 +38,7 @@ export const account = pgTable(
 	{
 		id: text('id').primaryKey(),
 		accountId: text('account_id').notNull(),
+		issuer: text('issuer').notNull(),
 		providerId: text('provider_id').notNull(),
 		userId: text('user_id')
 			.notNull()
@@ -44,16 +46,19 @@ export const account = pgTable(
 		accessToken: text('access_token'),
 		refreshToken: text('refresh_token'),
 		idToken: text('id_token'),
-		accessTokenExpiresAt: timestamp('access_token_expires_at'),
+		accessTokenExpiresAt: timestamp('access_token_expires_at', { withTimezone: true }),
-		refreshTokenExpiresAt: timestamp('refresh_token_expires_at'),
+		refreshTokenExpiresAt: timestamp('refresh_token_expires_at', { withTimezone: true }),
 		scope: text('scope'),
 		password: text('password'),
-		createdAt: timestamp('created_at').defaultNow().notNull(),
+		createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
-		updatedAt: timestamp('updated_at')
+		updatedAt: timestamp('updated_at', { withTimezone: true })
 			.$onUpdate(() => /* @__PURE__ */ new Date())
 			.notNull()
 	},
-	(table) => [index('account_userId_idx').on(table.userId)]
+	(table) => [
+		index('account_userId_idx').on(table.userId),
+		uniqueIndex('account_issuer_account_id_unique').on(table.issuer, table.accountId)
+	]
 );
 
 export const verification = pgTable(
@@ -62,9 +67,9 @@ export const verification = pgTable(
 		id: text('id').primaryKey(),
 		identifier: text('identifier').notNull(),
 		value: text('value').notNull(),
-		expiresAt: timestamp('expires_at').notNull(),
+		expiresAt: timestamp('expires_at', { withTimezone: true }).notNull(),
-		createdAt: timestamp('created_at').defaultNow().notNull(),
+		createdAt: timestamp('created_at', { withTimezone: true }).defaultNow().notNull(),
-		updatedAt: timestamp('updated_at')
+		updatedAt: timestamp('updated_at', { withTimezone: true })
 			.defaultNow()
 			.$onUpdate(() => /* @__PURE__ */ new Date())
 			.notNull()

src/lib/server/db/schema/blog.ts

@@ -0,0 +1,22 @@
+import { pgEnum, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { id, timestamps } from './helpers';
+
+export const blogArticleStatus = pgEnum('blog_article_status', ['draft', 'published']);
+
+export const blogArticles = pgTable(
+	'blog_articles',
+	{
+		id: id(),
+		title: text('title').notNull(),
+		slug: text('slug').notNull(),
+		content: text('content').notNull().default(''),
+		tags: text('tags').array().notNull().default([]),
+		status: blogArticleStatus('status').notNull().default('draft'),
+		...timestamps
+	},
+	(table) => [unique().on(table.slug)]
+);
+
+export type BlogArticle = typeof blogArticles.$inferSelect;
+export type NewBlogArticle = typeof blogArticles.$inferInsert;
+export type BlogArticleStatus = (typeof blogArticleStatus.enumValues)[number];

src/lib/server/db/schema/catch-em-all.ts

@@ -0,0 +1,96 @@
+import { index, integer, pgEnum, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { availabilityValues } from '../../../availability';
+import { user } from './auth';
+import { id, timestamps } from './helpers';
+
+export const availability = pgEnum('availability', availabilityValues);
+
+export const pokemon = pgTable('pokemon', {
+	id: id(),
+	number: integer('number').notNull().unique(),
+	generation: integer('generation').notNull().default(1),
+	name: text('name').notNull(),
+	type1: text('type1').notNull(),
+	type2: text('type2'),
+	hp: integer('hp').notNull().default(0),
+	attack: integer('attack').notNull().default(0),
+	defense: integer('defense').notNull().default(0),
+	specialAttack: integer('special_attack').notNull().default(0),
+	specialDefense: integer('special_defense').notNull().default(0),
+	speed: integer('speed').notNull().default(0),
+	...timestamps
+});
+
+export const games = pgTable('games', {
+	id: id(),
+	sourceId: integer('source_id').unique(),
+	name: text('name').notNull(),
+	generation: integer('generation').notNull().default(1),
+	...timestamps
+});
+
+export const pokemonGameEntries = pgTable(
+	'pokemon_game_entries',
+	{
+		id: id(),
+		pokemonId: integer('pokemon_id')
+			.notNull()
+			.references(() => pokemon.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		availability: availability('availability').notNull().default('catchable'),
+		// optional extra detail for the tooltip, e.g. "trade with a Blue version owner"
+		note: text('note'),
+		...timestamps
+	},
+	(table) => [unique().on(table.pokemonId, table.gameId), index().on(table.gameId)]
+);
+
+export const userEntries = pgTable(
+	'user_entries',
+	{
+		id: id(),
+		pokemonGameEntryId: integer('pokemon_game_entry_id')
+			.notNull()
+			.references(() => pokemonGameEntries.id, { onDelete: 'cascade' }),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		...timestamps
+	},
+	(table) => [unique().on(table.pokemonGameEntryId, table.userId), index().on(table.userId)]
+);
+
+// which games a user has chosen to track ("rules")
+export const userGames = pgTable(
+	'user_games',
+	{
+		id: id(),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		gameId: integer('game_id')
+			.notNull()
+			.references(() => games.id, { onDelete: 'cascade' }),
+		...timestamps
+	},
+	(table) => [unique().on(table.userId, table.gameId), index().on(table.userId)]
+);
+
+// A row distinguishes an explicit empty game selection from a new account.
+export const catchEmAllSettings = pgTable('catch_em_all_settings', {
+	id: id(),
+	userId: text('user_id')
+		.notNull()
+		.unique()
+		.references(() => user.id, { onDelete: 'cascade' }),
+	...timestamps
+});
+
+export type Pokemon = typeof pokemon.$inferSelect;
+export type Game = typeof games.$inferSelect;
+export type PokemonGameEntry = typeof pokemonGameEntries.$inferSelect;
+export type UserEntry = typeof userEntries.$inferSelect;
+export type UserGame = typeof userGames.$inferSelect;
+export type Availability = (typeof availability.enumValues)[number];

src/lib/server/db/schema/helpers.ts

@@ -0,0 +1,17 @@
+import { serial, timestamp } from 'drizzle-orm/pg-core';
+
+// Shared column patterns so every table is built the same way.
+// Timestamps are always `timestamptz` — they represent a moment in time, not a
+// wall-clock reading.
+
+export const id = () => serial('id').primaryKey();
+
+export const timestamptz = (name: string) => timestamp(name, { withTimezone: true });
+
+export const timestamps = {
+	createdAt: timestamptz('created_at').notNull().defaultNow(),
+	updatedAt: timestamptz('updated_at')
+		.notNull()
+		.defaultNow()
+		.$onUpdate(() => new Date())
+};

src/lib/server/db/schema/index.ts

@@ -0,0 +1,8 @@
+// One file per domain. Everything is re-exported here so the rest of the app
+// (and drizzle-kit / relations) only ever imports `$lib/server/db/schema`.
+export * from './auth';
+export * from './blog';
+export * from './progress';
+export * from './catch-em-all';
+export * from './animaldex';
+export * from './lists';

src/lib/server/db/schema/lists.ts

@@ -0,0 +1,46 @@
+import { boolean, index, integer, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { id, timestamps } from './helpers';
+import { user } from './auth';
+
+export const lists = pgTable('lists', {
+	id: id(),
+	name: text('name').notNull(),
+	slug: text('slug').notNull().unique(),
+	isProgress: boolean('is_progress').notNull().default(false),
+	...timestamps
+});
+
+export const listItems = pgTable(
+	'list_items',
+	{
+		id: id(),
+		listId: integer('list_id')
+			.notNull()
+			.references(() => lists.id, { onDelete: 'cascade' }),
+		name: text('name').notNull(),
+		pictureUrl: text('picture_url'),
+		description: text('description'),
+		...timestamps
+	},
+	(table) => [index().on(table.listId)]
+);
+
+export const listItemCompletions = pgTable(
+	'list_item_completions',
+	{
+		id: id(),
+		itemId: integer('item_id')
+			.notNull()
+			.references(() => listItems.id, { onDelete: 'cascade' }),
+		userId: text('user_id')
+			.notNull()
+			.references(() => user.id, { onDelete: 'cascade' }),
+		...timestamps
+	},
+	(table) => [unique().on(table.itemId, table.userId), index().on(table.userId)]
+);
+
+export type List = typeof lists.$inferSelect;
+export type NewList = typeof lists.$inferInsert;
+export type ListItem = typeof listItems.$inferSelect;
+export type NewListItem = typeof listItems.$inferInsert;

src/lib/server/db/schema/progress.ts

@@ -0,0 +1,38 @@
+import { integer, pgTable, text, unique } from 'drizzle-orm/pg-core';
+import { id, timestamps } from './helpers';
+
+export const tasks = pgTable('tasks', {
+	id: id(),
+	name: text('name').notNull(),
+	currentPoints: integer('current_points').notNull().default(0),
+	totalPoints: integer('total_points').notNull().default(1),
+	notes: text('notes'),
+	...timestamps
+});
+
+export const topics = pgTable('topics', {
+	id: id(),
+	name: text('name').notNull(),
+	emoji: text('emoji'),
+	...timestamps
+});
+
+export const tasksToTopics = pgTable(
+	'tasks_to_topics',
+	{
+		id: id(),
+		taskId: integer('task_id')
+			.notNull()
+			.references(() => tasks.id, { onDelete: 'cascade' }),
+		topicId: integer('topic_id')
+			.notNull()
+			.references(() => topics.id, { onDelete: 'cascade' }),
+		...timestamps
+	},
+	(table) => [unique().on(table.taskId, table.topicId)]
+);
+
+export type Task = typeof tasks.$inferSelect;
+export type NewTask = typeof tasks.$inferInsert;
+export type Topic = typeof topics.$inferSelect;
+export type NewTopic = typeof topics.$inferInsert;

src/lib/server/finder-http.ts

@@ -0,0 +1,119 @@
+export class ApiError extends Error {
+	constructor(
+		public provider: string,
+		public status: number,
+		message: string
+	) {
+		super(message);
+	}
+}
+export function publicError(error: unknown): string {
+	return error instanceof ApiError
+		? error.message
+		: 'Search could not be completed. Please try again.';
+}
+export function logApiError(error: unknown) {
+	console.error(
+		'Map finder request failed',
+		error instanceof ApiError
+			? { provider: error.provider, status: error.status }
+			: { type: 'unexpected' }
+	);
+}
+const sleep = (ms: number) => new Promise<void>((resolve) => setTimeout(resolve, ms));
+const cooldowns = new Map<string, number>();
+export async function requestJson(
+	fetchFn: typeof fetch,
+	provider: string,
+	url: string,
+	init: RequestInit = {},
+	wait = sleep
+): Promise<unknown> {
+	for (let attempt = 0; attempt < 3; attempt++) {
+		if ((cooldowns.get(provider) ?? 0) > Date.now())
+			throw new ApiError(provider, 429, `${provider} is rate-limited. Please try again later.`);
+		let response: Response;
+		try {
+			response = await fetchFn(url, { ...init, signal: AbortSignal.timeout(12000) });
+		} catch {
+			if (attempt < 2) {
+				await wait(300 * 2 ** attempt + Math.random() * 150);
+				continue;
+			}
+			throw new ApiError(provider, 503, `${provider} is unavailable. Please try again later.`);
+		}
+		if (response.ok) {
+			try {
+				return await response.json();
+			} catch {
+				throw new ApiError(
+					provider,
+					502,
+					`${provider} returned an invalid response. Please try again.`
+				);
+			}
+		}
+		if (response.status === 429 || response.status >= 500) {
+			const retry = response.headers.get('Retry-After');
+			const delay = retry
+				? /^\d+(\.\d+)?$/.test(retry)
+					? Number(retry) * 1000
+					: Math.max(0, Date.parse(retry) - Date.now())
+				: 300 * 2 ** attempt;
+			const boundedDelay = Number.isFinite(delay) ? delay : 1000;
+			if (response.status === 429) cooldowns.set(provider, Date.now() + boundedDelay);
+			if (attempt < 2 && boundedDelay <= 4000) {
+				await wait(boundedDelay + Math.random() * 150);
+				continue;
+			}
+		}
+		throw new ApiError(
+			provider,
+			response.status,
+			response.status === 429
+				? `${provider} is rate-limited. Please try again later.`
+				: `${provider} request failed. Please try again later.`
+		);
+	}
+	throw new ApiError(provider, 503, `${provider} is unavailable.`);
+}
+export function createTokenCache() {
+	let token: { value: string; expires: number } | undefined;
+	let pending: Promise<string> | undefined;
+	return async (refresh: () => Promise<unknown>): Promise<string> => {
+		if (token && token.expires > Date.now() + 30000) return token.value;
+		if (!pending)
+			pending = (async () => {
+				const result = (await refresh()) as { access_token?: unknown; expires_in?: unknown };
+				if (
+					typeof result?.access_token !== 'string' ||
+					typeof result.expires_in !== 'number' ||
+					result.expires_in <= 0
+				)
+					throw new ApiError('OAuth', 502, 'API authentication is temporarily unavailable.');
+				token = { value: result.access_token, expires: Date.now() + result.expires_in * 1000 };
+				return token.value;
+			})().finally(() => {
+				pending = undefined;
+			});
+		return pending;
+	};
+}
+export async function mapConcurrent<T, R>(
+	items: T[],
+	limit: number,
+	work: (item: T) => Promise<R>
+): Promise<R[]> {
+	if (!Number.isInteger(limit) || limit < 1) throw new Error('Concurrency must be positive.');
+	const results: R[] = new Array(items.length);
+	let cursor = 0;
+	await Promise.all(
+		Array.from({ length: Math.min(limit, items.length) }, async () => {
+			while (cursor < items.length) {
+				const index = cursor++;
+				results[index] = await work(items[index]);
+			}
+		})
+	);
+	return results;
+}

src/lib/server/finder-limit.ts

@@ -0,0 +1,28 @@
+export const RATE_WINDOW_MS = 10 * 60_000;
+export const RATE_BUDGET = 12;
+export function createRateLimiter() {
+	let activeSearches = 0;
+	const records = new Map<string, { expires: number; used: number; active: boolean }>();
+	return (key: string, cost: number, now = Date.now()) => {
+		// Opportunistic cleanup on every action; no timers keep the server alive.
+		for (const [id, entry] of records)
+			if (entry.expires <= now && !entry.active) records.delete(id);
+		let entry = records.get(key);
+		if (!entry) {
+			if (records.size >= 10000) return null;
+			entry = { expires: now + RATE_WINDOW_MS, used: 0, active: false };
+			records.set(key, entry);
+		}
+		if (activeSearches >= 6 || entry.active || entry.used + cost > RATE_BUDGET) return null;
+		entry.used += cost;
+		entry.active = true;
+		activeSearches++;
+		return () => {
+			if (entry.active) {
+				entry.active = false;
+				activeSearches--;
+			}
+		};
+	};
+}
+export const acquireSearch = createRateLimiter();

src/lib/server/finder.test.ts

@@ -0,0 +1,167 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+vi.mock('$env/dynamic/private', () => ({
+	env: { SPOTIFY_CLIENT_ID: 'test', SPOTIFY_CLIENT_SECRET: 'test' }
+}));
+import { createTokenCache, mapConcurrent, requestJson } from './finder-http';
+import { createRateLimiter, RATE_WINDOW_MS } from './finder-limit';
+import { getSpotifyMetadata, playlistTracks, MAX_PLAYLIST_TRACKS } from './spotify';
+const id = (n: number) => String(n).padStart(22, '0');
+const track = (n: number) => ({
+	type: 'track',
+	id: id(n),
+	name: `Song ${n}`,
+	artists: [{ name: 'Artist' }],
+	album: { name: 'Album', images: [] }
+});
+afterEach(() => vi.useRealTimers());
+describe('request controls', () => {
+	it('reuses tokens, coalesces refreshes and refreshes near expiry', async () => {
+		vi.useFakeTimers();
+		const cache = createTokenCache();
+		const refresh = vi.fn(async () => ({ access_token: 'token', expires_in: 60 }));
+		expect(await Promise.all([cache(refresh), cache(refresh)])).toEqual(['token', 'token']);
+		await cache(refresh);
+		expect(refresh).toHaveBeenCalledTimes(1);
+		vi.advanceTimersByTime(31000);
+		await cache(refresh);
+		expect(refresh).toHaveBeenCalledTimes(2);
+	});
+	it('bounds concurrency and preserves order', async () => {
+		let active = 0,
+			peak = 0;
+		const result = await mapConcurrent([3, 2, 1, 0], 2, async (n) => {
+			active++;
+			peak = Math.max(peak, active);
+			await new Promise((r) => setTimeout(r, n));
+			active--;
+			return n * 2;
+		});
+		expect(peak).toBe(2);
+		expect(result).toEqual([6, 4, 2, 0]);
+	});
+	it('retries 429 after Retry-After', async () => {
+		vi.useFakeTimers();
+		const fetchFn = vi
+			.fn()
+			.mockResolvedValueOnce(new Response('', { status: 429, headers: { 'Retry-After': '1' } }))
+			.mockResolvedValueOnce(Response.json({ ok: true }));
+		const wait = vi.fn(async (ms: number) => {
+			vi.advanceTimersByTime(ms);
+		});
+		expect(await requestJson(fetchFn, 'retry-test', 'https://example.test', {}, wait)).toEqual({
+			ok: true
+		});
+		expect(wait.mock.calls[0][0]).toBeGreaterThanOrEqual(1000);
+		expect(fetchFn).toHaveBeenCalledTimes(2);
+	});
+	it('does not retry 404 or malformed JSON', async () => {
+		const fetchFn = vi.fn().mockResolvedValue(new Response('', { status: 404 }));
+		await expect(requestJson(fetchFn, 'test', 'https://example.test')).rejects.toMatchObject({
+			status: 404
+		});
+		expect(fetchFn).toHaveBeenCalledTimes(1);
+		await expect(
+			requestJson(
+				vi.fn().mockResolvedValue(new Response('invalid')),
+				'test',
+				'https://example.test'
+			)
+		).rejects.toMatchObject({ status: 502 });
+	});
+	it('limits server retries and respects long cooldowns without sleeping', async () => {
+		const fetchFn = vi.fn().mockImplementation(async () => new Response('', { status: 503 }));
+		await expect(
+			requestJson(fetchFn, 'server-test', 'https://example.test', {}, async () => {})
+		).rejects.toMatchObject({ status: 503 });
+		expect(fetchFn).toHaveBeenCalledTimes(3);
+		const throttled = vi
+			.fn()
+			.mockResolvedValue(new Response('', { status: 429, headers: { 'Retry-After': '60' } }));
+		await expect(
+			requestJson(throttled, 'long-retry', 'https://example.test')
+		).rejects.toMatchObject({ status: 429 });
+		expect(throttled).toHaveBeenCalledTimes(1);
+	});
+	it('limits weighted searches, concurrent requests and expires records', () => {
+		const acquire = createRateLimiter();
+		const release = acquire('ip', 6, 0)!;
+		expect(acquire('ip', 1, 1)).toBeNull();
+		release();
+		acquire('ip', 6, 2)!();
+		expect(acquire('ip', 1, 3)).toBeNull();
+		expect(acquire('ip', 6, RATE_WINDOW_MS + 1)).toBeTypeOf('function');
+	});
+});
+describe('playlists', () => {
+	it('skips unusable entries and deduplicates in order', () =>
+		expect(
+			playlistTracks([
+				{ track: track(2) },
+				{ track: null },
+				{ track: { ...track(3), is_local: true } },
+				{ track: { ...track(4), type: 'episode' } },
+				{ track: { ...track(5), is_playable: false } },
+				{ track: track(2) },
+				{ item: track(1) },
+				{ track: { id: id(7) } }
+			]).map((t) => t.id)
+		).toEqual([id(2), id(1)]));
+	it('paginates, deduplicates across pages and truncates', async () => {
+		const fetchFn = vi.fn(async (url: string | URL | Request) => {
+			const value = String(url);
+			if (value.includes('/api/token'))
+				return Response.json({ access_token: 'token', expires_in: 3600 });
+			if (value.includes('offset=2'))
+				return Response.json({
+					items: Array.from({ length: 55 }, (_, n) => ({ track: track(n + 1) })),
+					next: null,
+					total: 57
+				});
+			return Response.json({
+				name: 'Playlist',
+				owner: { display_name: 'Owner' },
+				tracks: {
+					items: [{ track: track(1) }, { track: null }],
+					next: 'https://evil.test',
+					total: 57
+				}
+			});
+		});
+		const result = await getSpotifyMetadata(fetchFn as typeof fetch, {
+			kind: 'playlist',
+			id: id(1)
+		});
+		expect(result.tracks).toHaveLength(MAX_PLAYLIST_TRACKS);
+		expect(result.tracks[0].id).toBe(id(1));
+		expect(result.tracks[1].id).toBe(id(2));
+		expect(result.truncated).toBe(true);
+		expect(fetchFn.mock.calls.every(([url]) => !String(url).includes('evil.test'))).toBe(true);
+	});
+	it('supports the newer items/item response', async () => {
+		const fetchFn = vi.fn(async () =>
+			Response.json({ name: 'New playlist', items: { items: [{ item: track(1) }], next: null } })
+		);
+		const result = await getSpotifyMetadata(fetchFn, { kind: 'playlist', id: id(1) });
+		expect(result.tracks).toHaveLength(1);
+		expect(result.truncated).toBe(false);
+	});
+});
+
+it('paginates album tracks and attaches shared album metadata', async () => {
+	const fetchFn = vi.fn(async (url: string | URL | Request) =>
+		String(url).includes('offset=1')
+			? Response.json({ items: [track(2)], next: null, total: 2 })
+			: Response.json({
+					name: 'Album name',
+					artists: [{ name: 'Artist' }],
+					images: [{ url: 'https://example.test/cover.jpg' }],
+					tracks: { items: [track(1)], next: 'next', total: 2 }
+				})
+	);
+	const result = await getSpotifyMetadata(fetchFn as typeof fetch, { kind: 'album', id: id(1) });
+	expect(result.collection).toMatchObject({ kind: 'album', name: 'Album name', owner: 'Artist' });
+	expect(result.tracks.map((t) => t.id)).toEqual([id(1), id(2)]);
+	expect(result.tracks[1].album.name).toBe('Album name');
+	expect(result.truncated).toBe(false);
+	expect(String(fetchFn.mock.calls[1][0])).toContain('/albums/');
+});

src/lib/server/osu-profile.test.ts

@@ -0,0 +1,20 @@
+import { expect, it } from 'vitest';
+import { osuProfile } from './osu-profile';
+it('binds osu accounts to numeric provider IDs, never a claimed email or username', () => {
+	const profile = osuProfile({
+		id: 123,
+		username: 'Alice',
+		avatar_url: 'https://a.ppy.sh/123',
+		email: 'admin@example.com',
+		email_verified: true
+	});
+	expect(profile).toMatchObject({ id: '123', email: '123@osu.invalid', emailVerified: false });
+	expect(
+		osuProfile({ id: 123, username: 'Renamed', avatar_url: 'https://a.ppy.sh/123' }).email
+	).toBe(profile.email);
+});
+it('rejects malformed provider identities', () => {
+	expect(() =>
+		osuProfile({ id: 'admin', username: 'Alice', avatar_url: 'https://a.ppy.sh/123' })
+	).toThrow();
+});

src/lib/server/osu-profile.ts

@@ -0,0 +1,16 @@
+import { z } from 'zod';
+const profileSchema = z.object({
+	id: z.number().int().positive(),
+	username: z.string().min(1),
+	avatar_url: z.string().url()
+});
+export function osuProfile(value: unknown) {
+	const profile = profileSchema.parse(value);
+	return {
+		id: String(profile.id),
+		name: profile.username,
+		image: profile.avatar_url,
+		email: `${profile.id}@osu.invalid`,
+		emailVerified: false
+	};
+}

src/lib/server/osu.test.ts

@@ -0,0 +1,37 @@
+import { expect, it, vi } from 'vitest';
+vi.mock('$env/dynamic/private', () => ({ env: { OSU_CLIENT_ID: '1', OSU_CLIENT_SECRET: 'test' } }));
+import { getOsuMaps } from './osu';
+it('falls back deliberately, merges IDs, reuses OAuth and caches matching results', async () => {
+	const fetchFn = vi.fn(async (url: string | URL | Request) => {
+		if (String(url).includes('/oauth/token'))
+			return Response.json({ access_token: 'token', expires_in: 3600 });
+		const query = new URL(String(url)).searchParams.get('q');
+		return Response.json({
+			beatmapsets: [
+				{
+					id: 1,
+					title: 'Unique Song',
+					artist: query === 'unique song' ? 'Artist' : 'Wrong Performer'
+				}
+			]
+		});
+	});
+	const track = {
+		id: '6PUzxtIHkv346yP89NzP9X',
+		name: 'Unique Song',
+		artists: [{ name: 'Artist' }],
+		album: { name: '', images: [] }
+	};
+	const results = await Promise.all([
+		getOsuMaps(fetchFn as typeof fetch, track),
+		getOsuMaps(fetchFn as typeof fetch, track)
+	]);
+	expect(results[0]).toHaveLength(1);
+	expect(results[0][0].score).toBe(100);
+	expect(results[1]).toEqual(results[0]);
+	await getOsuMaps(fetchFn as typeof fetch, track);
+	expect(fetchFn).toHaveBeenCalledTimes(3);
+	expect(fetchFn.mock.calls.filter(([url]) => String(url).includes('/oauth/token'))).toHaveLength(
+		1
+	);
+});

src/lib/server/osu.ts

@@ -0,0 +1,90 @@
+import { env } from '$env/dynamic/private';
+import type { OsuBeatmapset, ScoredBeatmapset, SpotifyTrack } from '$lib/map-finder/types';
+import { cleanTitle, normalize, rankCandidates, MEDIUM_CONFIDENCE } from '$lib/map-finder/matching';
+import { ApiError, createTokenCache, requestJson } from './finder-http';
+const token = createTokenCache();
+const cache = new Map<string, { expires: number; result: ScoredBeatmapset[] }>();
+const pending = new Map<string, Promise<ScoredBeatmapset[]>>();
+export const MATCH_CONCURRENCY = 3;
+// Global permits also bound outbound work across simultaneous visitors.
+let active = 0;
+const queue: (() => void)[] = [];
+async function limited<T>(work: () => Promise<T>): Promise<T> {
+	if (active >= MATCH_CONCURRENCY) await new Promise<void>((resolve) => queue.push(resolve));
+	else active++;
+	try {
+		return await work();
+	} finally {
+		const next = queue.shift();
+		if (next) next();
+		else active--;
+	}
+}
+async function search(fetchFn: typeof fetch, query: string): Promise<OsuBeatmapset[]> {
+	const access = await token(() => {
+		if (!env.OSU_CLIENT_ID || !env.OSU_CLIENT_SECRET)
+			throw new ApiError('osu!', 503, 'osu! is not configured on this server.');
+		return requestJson(fetchFn, 'osu!', 'https://osu.ppy.sh/oauth/token', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+			body: JSON.stringify({
+				client_id: Number(env.OSU_CLIENT_ID),
+				client_secret: env.OSU_CLIENT_SECRET,
+				grant_type: 'client_credentials',
+				scope: 'public'
+			})
+		});
+	});
+	const response = (await requestJson(
+		fetchFn,
+		'osu!',
+		`https://osu.ppy.sh/api/v2/beatmapsets/search?${new URLSearchParams({ q: query, s: 'any' })}`,
+		{ headers: { Authorization: `Bearer ${access}`, Accept: 'application/json' } }
+	)) as { beatmapsets?: unknown[] };
+	if (!Array.isArray(response?.beatmapsets))
+		throw new ApiError('osu!', 502, 'osu! returned an invalid search response.');
+	return response.beatmapsets
+		.filter(
+			(item): item is OsuBeatmapset =>
+				!!item &&
+				typeof item === 'object' &&
+				Number.isInteger((item as OsuBeatmapset).id) &&
+				typeof (item as OsuBeatmapset).title === 'string' &&
+				typeof (item as OsuBeatmapset).artist === 'string'
+		)
+		.map((item) => ({
+			id: item.id,
+			title: item.title,
+			artist: item.artist,
+			title_unicode: typeof item.title_unicode === 'string' ? item.title_unicode : undefined,
+			artist_unicode: typeof item.artist_unicode === 'string' ? item.artist_unicode : undefined,
+			status: typeof item.status === 'string' ? item.status : undefined,
+			covers: { card: typeof item.covers?.card === 'string' ? item.covers.card : undefined },
+			beatmaps: Array.isArray(item.beatmaps) ? item.beatmaps.map(() => ({ id: 0 })) : undefined
+		}));
+}
+export async function getOsuMaps(
+	fetchFn: typeof fetch,
+	track: SpotifyTrack
+): Promise<ScoredBeatmapset[]> {
+	const key = JSON.stringify([normalize(track.name), track.artists.map((a) => normalize(a.name))]);
+	for (const [key, entry] of cache) if (entry.expires <= Date.now()) cache.delete(key);
+	const hit = cache.get(key);
+	if (hit) return hit.result;
+	const existing = pending.get(key);
+	if (existing) return existing;
+	const work = limited(async () => {
+		const maps = await search(fetchFn, `${track.artists[0].name} ${track.name}`);
+		let ranked = rankCandidates(track, maps);
+		if (!ranked.some((m) => m.score >= MEDIUM_CONFIDENCE))
+			ranked = rankCandidates(track, [
+				...maps,
+				...(await search(fetchFn, cleanTitle(track.name) || track.name))
+			]);
+		if (cache.size >= 500) cache.delete(cache.keys().next().value!);
+		cache.set(key, { expires: Date.now() + 5 * 60_000, result: ranked });
+		return ranked;
+	}).finally(() => pending.delete(key));
+	pending.set(key, work);
+	return work;
+}

src/lib/server/r2.ts

@@ -1,5 +1,4 @@
 import { S3Client, PutObjectCommand, DeleteObjectCommand } from '@aws-sdk/client-s3';
-import { getSignedUrl } from '@aws-sdk/s3-request-presigner';
 import { env } from '$env/dynamic/private';
 import { randomUUID } from 'crypto';
 
@@ -44,38 +43,41 @@ const EXT: Record<AllowedMimeType, string> = {
 	'image/heic': 'heic'
 };
 
-export interface PresignedUpload {
+/** Upload through the site server so browsers do not need R2 CORS access. */
-	/** R2 object key — store this in the DB */
+export async function uploadImage(
-	key: string;
+	file: File,
-	/** One-time presigned PUT URL — browser PUTs file directly here */
+	prefix: 'sightings' | 'lists' = 'sightings'
-	uploadUrl: string;
+): Promise<{ key: string; publicUrl: string }> {
-	/** Permanent public URL to store in photos table */
+	if (!isAllowedMimeType(file.type)) throw new Error('Unsupported image type');
-	publicUrl: string;
+	const mimeType = file.type;
-}
+	const key = `${prefix}/${randomUUID()}.${EXT[mimeType]}`;
-
+	await getClient().send(
-/**
- * Generate a presigned PUT URL for a single photo.
- *
- * Flow:
- *   1. Client POSTs to /api/upload/presign → gets { key, uploadUrl, publicUrl }
- *   2. Client PUTs file to uploadUrl (direct to R2, server never sees the bytes)
- *   3. Client submits sighting with photo keys included
- *   4. Server stores key + publicUrl in photos table
- */
-export async function createPresignedUpload(mimeType: AllowedMimeType): Promise<PresignedUpload> {
-	const key = `sightings/${randomUUID()}.${EXT[mimeType]}`;
-
-	const uploadUrl = await getSignedUrl(
-		getClient(),
 		new PutObjectCommand({
 			Bucket: env.R2_BUCKET,
 			Key: key,
-			ContentType: mimeType
+			ContentType: mimeType,
-		}),
+			Body: new Uint8Array(await file.arrayBuffer())
-		{ expiresIn: 3600 }
+		})
 	);
+	return { key, publicUrl: `${env.R2_PUBLIC_URL!.replace(/\/$/, '')}/${key}` };
+}
 
-	return { key, uploadUrl, publicUrl: `${env.R2_PUBLIC_URL}/${key}` };
+export function listImageUrl(key: string): string | null {
+	if (
+		!/^lists\/[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}\.(jpg|png|webp)$/.test(
+			key
+		)
+	)
+		return null;
+	if (!env.R2_PUBLIC_URL) return null;
+	return `${env.R2_PUBLIC_URL.replace(/\/$/, '')}/${key}`;
+}
+
+export function listImageKey(url: string): string | null {
+	const base = env.R2_PUBLIC_URL?.replace(/\/$/, '');
+	if (!base || !url.startsWith(`${base}/`)) return null;
+	const key = url.slice(base.length + 1);
+	return listImageUrl(key) === url ? key : null;
 }
 
 /**

src/lib/server/slugify.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest';
+import { slugify, validSlug } from './slugify';
+
+describe('content slugs', () => {
+	it('turns titles into readable URL segments', () => {
+		expect(slugify('Hello, World!')).toBe('hello-world');
+		expect(slugify('  A  /  B  ')).toBe('a-b');
+		expect(slugify('!!!', 'list')).toBe('list');
+	});
+
+	it('accepts only canonical editable slugs', () => {
+		expect(validSlug('my-list-2026')).toBe(true);
+		for (const value of ['My-List', 'two words', '-leading', 'trailing-', 'double--dash', '']) {
+			expect(validSlug(value)).toBe(false);
+		}
+	});
+});

src/lib/server/slugify.ts

@@ -1,14 +1,14 @@
 import { db } from '$lib/server/db';
-import { blogArticles } from '$lib/server/db/schema';
+import { blogArticles, lists } from '$lib/server/db/schema';
 import { eq } from 'drizzle-orm';
 
-export function slugify(title: string): string {
+export function slugify(title: string, fallback = 'article'): string {
 	return (
 		title
 			.toLowerCase()
 			.trim()
 			.replace(/[^a-z0-9]+/g, '-')
-			.replace(/^-+|-+$/g, '') || 'article'
+			.replace(/^-+|-+$/g, '') || fallback
 	);
 }
 
@@ -27,3 +27,17 @@ export async function uniqueSlug(title: string): Promise<string> {
 
 	return slug;
 }
+
+export async function uniqueListSlug(name: string): Promise<string> {
+	const base = slugify(name, 'list');
+	let slug = base;
+	let suffix = 2;
+	while ((await db.select({ id: lists.id }).from(lists).where(eq(lists.slug, slug))).length > 0) {
+		slug = `${base}-${suffix++}`;
+	}
+	return slug;
+}
+
+export function validSlug(slug: string): boolean {
+	return slug.length <= 120 && /^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(slug);
+}

src/lib/server/spotify.ts

@@ -0,0 +1,188 @@
+import { env } from '$env/dynamic/private';
+import type { SpotifyInput } from '$lib/map-finder/input';
+import type { SpotifyTrack, SpotifyCollection } from '$lib/map-finder/types';
+import { ApiError, createTokenCache, requestJson } from './finder-http';
+export const MAX_PLAYLIST_TRACKS = 50;
+export const MAX_PLAYLIST_PAGES = 10;
+const token = createTokenCache();
+type RecordValue = Record<string, unknown>;
+function record(value: unknown): RecordValue {
+	return value && typeof value === 'object' ? (value as RecordValue) : {};
+}
+export function usableTrack(value: unknown): SpotifyTrack | null {
+	const track = record(value),
+		album = record(track.album);
+	if (
+		track.type !== 'track' ||
+		track.is_local ||
+		track.is_playable === false ||
+		typeof track.id !== 'string' ||
+		!/^[a-zA-Z0-9]{22}$/.test(track.id) ||
+		typeof track.name !== 'string' ||
+		!track.name.trim()
+	)
+		return null;
+	const artists = Array.isArray(track.artists)
+		? track.artists
+				.map(record)
+				.filter((a) => typeof a.name === 'string' && a.name.trim())
+				.map((a) => ({ name: a.name as string }))
+		: [];
+	if (!artists.length) return null;
+	const images = Array.isArray(album.images)
+		? album.images
+				.map(record)
+				.filter((i) => typeof i.url === 'string' && i.url.startsWith('https://'))
+				.map((i) => ({ url: i.url as string }))
+		: [];
+	return {
+		id: track.id,
+		name: track.name,
+		artists,
+		album: { name: typeof album.name === 'string' ? album.name : '', images }
+	};
+}
+export function playlistTracks(items: unknown[], seen = new Set<string>()): SpotifyTrack[] {
+	const result: SpotifyTrack[] = [];
+	for (const entry of items) {
+		const item = record(entry);
+		if (item.is_local) continue;
+		const track = usableTrack(item.track ?? item.item);
+		if (track && !seen.has(track.id)) {
+			seen.add(track.id);
+			result.push(track);
+		}
+	}
+	return result;
+}
+async function spotify(fetchFn: typeof fetch, path: string) {
+	const access = await token(() => {
+		if (!env.SPOTIFY_CLIENT_ID || !env.SPOTIFY_CLIENT_SECRET)
+			throw new ApiError('Spotify', 503, 'Spotify is not configured on this server.');
+		return requestJson(fetchFn, 'Spotify', 'https://accounts.spotify.com/api/token', {
+			method: 'POST',
+			headers: {
+				Authorization: `Basic ${btoa(`${env.SPOTIFY_CLIENT_ID}:${env.SPOTIFY_CLIENT_SECRET}`)}`,
+				'Content-Type': 'application/x-www-form-urlencoded'
+			},
+			body: new URLSearchParams({ grant_type: 'client_credentials' })
+		});
+	});
+	return record(
+		await requestJson(fetchFn, 'Spotify', `https://api.spotify.com/v1/${path}`, {
+			headers: { Authorization: `Bearer ${access}` }
+		})
+	);
+}
+export async function getSpotifyMetadata(
+	fetchFn: typeof fetch,
+	input:
+		| Extract<SpotifyInput, { kind: 'track' | 'playlist' | 'album' }>
+		| Extract<SpotifyInput, { kind: 'search' }>
+): Promise<{ tracks: SpotifyTrack[]; collection?: SpotifyCollection; truncated: boolean }> {
+	if (input.kind === 'track' || input.kind === 'search') {
+		let response: RecordValue;
+		try {
+			response = await spotify(
+				fetchFn,
+				input.kind === 'track'
+					? `tracks/${input.id}`
+					: `search?${new URLSearchParams({ q: input.query, type: 'track', limit: '1' })}`
+			);
+		} catch (error) {
+			if (error instanceof ApiError && error.status === 404)
+				throw new ApiError('Spotify', 404, 'Spotify track not found.');
+			throw error;
+		}
+		const track = usableTrack(
+			input.kind === 'track'
+				? response
+				: (record(response.tracks).items as unknown[] | undefined)?.[0]
+		);
+		if (!track)
+			throw new ApiError(
+				'Spotify',
+				404,
+				input.kind === 'track'
+					? 'Spotify track is unavailable.'
+					: 'No Spotify text-search result. Try an artist and song title.'
+			);
+		return { tracks: [track], truncated: false };
+	}
+	try {
+		const isAlbum = input.kind === 'album';
+		const resource = isAlbum ? 'albums' : 'playlists';
+		const metadata = await spotify(fetchFn, `${resource}/${input.id}`);
+		if (typeof metadata.name !== 'string')
+			throw new ApiError('Spotify', 502, 'Spotify returned incomplete playlist metadata.');
+		const owner = record(metadata.owner),
+			images = metadata.images;
+		const collection: SpotifyCollection = {
+			id: input.id,
+			kind: input.kind,
+			name: metadata.name,
+			owner:
+				isAlbum && Array.isArray(metadata.artists)
+					? metadata.artists
+							.map(record)
+							.map((a) => (typeof a.name === 'string' ? a.name : ''))
+							.filter(Boolean)
+							.join(', ')
+					: typeof owner.display_name === 'string'
+						? owner.display_name
+						: '',
+			image:
+				Array.isArray(images) && typeof record(images[0]).url === 'string'
+					? (record(images[0]).url as string)
+					: undefined
+		};
+		// Extended-quota responses use tracks/track; newer development-mode responses use items/item.
+		const modern = metadata.items !== undefined;
+		let page = record(modern ? metadata.items : metadata.tracks);
+		let offset = 0;
+		const tracks: SpotifyTrack[] = [];
+		const seen = new Set<string>();
+		for (let pages = 0; pages < MAX_PLAYLIST_PAGES; pages++) {
+			if (!Array.isArray(page.items))
+				page = await spotify(
+					fetchFn,
+					`${resource}/${input.id}/${modern ? 'items' : 'tracks'}?limit=50&offset=${offset}`
+				);
+			if (!Array.isArray(page.items))
+				throw new ApiError(
+					'Spotify',
+					502,
+					'Spotify playlist tracks are unavailable for this application.'
+				);
+			const usable = playlistTracks(
+				isAlbum
+					? page.items.map((item) => ({
+							track: { ...record(item), album: { name: metadata.name, images: metadata.images } }
+						}))
+					: page.items,
+				seen
+			);
+			const room = MAX_PLAYLIST_TRACKS - tracks.length;
+			tracks.push(...usable.slice(0, room));
+			offset += page.items.length;
+			const more = Boolean(page.next) || (typeof page.total === 'number' && offset < page.total);
+			if (tracks.length >= MAX_PLAYLIST_TRACKS || !more || pages === MAX_PLAYLIST_PAGES - 1)
+				return { tracks, collection, truncated: usable.length > room || more };
+			if (!page.items.length)
+				throw new ApiError('Spotify', 502, 'Spotify returned incomplete playlist tracks.');
+			// Construct pagination locally: never forward credentials to an upstream-supplied URL.
+			page = {};
+		}
+		return { tracks, collection, truncated: true };
+	} catch (error) {
+		if (error instanceof ApiError && [401, 403, 404].includes(error.status))
+			throw new ApiError(
+				'Spotify',
+				error.status,
+				input.kind === 'album'
+					? 'Spotify album unavailable or not found. Try an individual track.'
+					: 'Spotify playlist unavailable or private, or this application does not have playlist access. Try a public playlist or an individual track.'
+			);
+		throw error;
+	}
+}

src/lib/title.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { formatTitle, getTitle, siteEnvironment } from './title';
+
+describe('site titles', () => {
+	it('uses one suffix and an environment prefix', () => {
+		expect(getTitle('/', 'DEV')).toBe('(DEV) Home | Stan Runge');
+		expect(getTitle('/projects/catch-em-all', 'STAGING')).toBe('(STAGING) Catchemall | Stan Runge');
+		expect(formatTitle('A blog post')).toBe('A blog post | Stan Runge');
+	});
+
+	it('gives unlisted routes a readable title', () => {
+		expect(getTitle('/projects/typing-practice')).toBe('typing practice | Stan Runge');
+	});
+
+	it('labels development and staging without labelling production', () => {
+		expect(siteEnvironment(true, 'https://staging.stanrunge.dev')).toBe('DEV');
+		expect(siteEnvironment(false, 'https://staging.stanrunge.dev')).toBe('STAGING');
+		expect(siteEnvironment(false, 'https://stanrunge.dev')).toBeNull();
+	});
+});

src/lib/title.ts

@@ -1,9 +1,40 @@
-import { dev } from "$app/env";
+export type SiteEnvironment = 'DEV' | 'STAGING' | null;
 
-export function getTitle(path: string): string {
+export function siteEnvironment(isDev: boolean, origin?: string): SiteEnvironment {
-	let builtTitle = "Stan Runge";
+	if (isDev) return 'DEV';
-
+	try {
-	if (dev) builtTitle = "(DEV) " + builtTitle;
+		return new URL(origin ?? '').hostname === 'staging.stanrunge.dev' ? 'STAGING' : null;
-
+	} catch {
-	return builtTitle;
+		return null;
+	}
+}
+
+export function formatTitle(title: string, environment: SiteEnvironment = null): string {
+	return `${environment ? `(${environment}) ` : ''}${title} | Stan Runge`;
+}
+
+export function getTitle(path: string, environment: SiteEnvironment = null): string {
+	const titles: Record<string, string> = {
+		'/': 'Home',
+		'/projects': 'Projects',
+		'/blog': 'Blog',
+		'/lists': 'Lists',
+		'/login': 'Sign in',
+		'/register': 'Register',
+		'/account': 'Account',
+		'/projects/catch-em-all': 'Catchemall',
+		'/projects/animaldex': 'Animaldex',
+		'/projects/animaldex/register': 'Log a sighting',
+		'/projects/animaldex/admin': 'Animaldex admin',
+		'/projects/derby': 'Derby Lens',
+		'/projects/cs-prices': 'CS Prices',
+		'/projects/game-tracker': 'Game Tracker',
+		'/projects/money-tracker': 'Money Tracker',
+		'/projects/spotify-beatmap-finder': 'osu! map finder',
+		'/projects/progress': 'Progress'
+	};
+	const cleaned = path.replace(/\/$/, '') || '/';
+	const title =
+		titles[cleaned] ?? cleaned.split('/').filter(Boolean).at(-1)?.replace(/-/g, ' ') ?? 'Home';
+	return formatTitle(title, environment);
 }

src/lib/validation/blog.ts

@@ -6,5 +6,18 @@ export const createArticleSchema = z.object({
 
 export const updateArticleSchema = z.object({
 	title: z.string().min(1).max(256),
-	content: z.string().max(50000)
+	slug: z.string().min(1).max(120),
+	content: z.string().max(50000),
+	tags: z.array(z.string().min(1).max(32)).max(8)
 });
+
+export function parseArticleTags(value: string) {
+	return [
+		...new Set(
+			value
+				.split(',')
+				.map((tag) => tag.trim().toLowerCase())
+				.filter(Boolean)
+		)
+	];
+}

src/lib/validation/sighting.ts

@@ -1,11 +1,5 @@
 import { z } from 'zod';
 
-// ── Presigned upload ──────────────────────────────────────────────────────────
-
-export const presignedUploadSchema = z.object({
-	mimeType: z.enum(['image/jpeg', 'image/png', 'image/webp', 'image/heic'])
-});
-
 // ── Register new animal (+ first sighting) ────────────────────────────────────
 
 export const registerAnimalSchema = z.object({
@@ -29,7 +23,7 @@ export const registerAnimalSchema = z.object({
 	deviceLat: z.number().min(-90).max(90),
 	deviceLng: z.number().min(-180).max(180),
 
-	// Already-uploaded R2 keys (1–10 photos, browser uploaded directly)
+	// Already-uploaded R2 keys (1–10 photos)
 	photoKeys: z.array(z.string().min(1)).min(1).max(10)
 });
 
@@ -38,7 +32,7 @@ export type RegisterAnimalInput = z.infer<typeof registerAnimalSchema>;
 // ── Add sighting to existing animal ──────────────────────────────────────────
 
 export const addSightingSchema = z.object({
-	animalId: z.string().uuid(),
+	animalId: z.coerce.number().int().positive(),
 	reporterName: z.string().max(100).optional(),
 	seenAt: z.iso.datetime(),
 	lat: z.number().min(-90).max(90),

src/routes/+layout.server.ts

@@ -1,5 +1,14 @@
-export const load = async ({ cookies }) => {
+import { isAdmin } from '$lib/server/authorization';
-	return {
+import { dev } from '$app/environment';
-		editable: cookies.get('token')
+import { siteEnvironment } from '$lib/title';
-	};
+import type { LayoutServerLoad } from './$types';
-};
+const environment = siteEnvironment(dev, process.env.ORIGIN);
+export const load: LayoutServerLoad = (event) => ({
+	user: event.locals.user
+		? { id: event.locals.user.id, name: event.locals.user.name, image: event.locals.user.image }
+		: null,
+	isAdmin: isAdmin(event),
+	editable: isAdmin(event),
+	version: process.env.APP_VERSION || 'dev',
+	environment
+});

src/routes/+layout.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
 	import '../app.css';
-
+	import { onMount } from 'svelte';
+	import { assets, resolve } from '$app/paths';
+	import { dev } from '$app/environment';
+	import { page } from '$app/state';
+	import { getSeo } from '$lib/seo';
+	import CopyButton from '$lib/components/CopyButton.svelte';
 	import SiOsu from '~icons/simple-icons/osu';
 	import SiSteam from '~icons/simple-icons/steam';
 	import SiTwitch from '~icons/simple-icons/twitch';
@@ -10,47 +15,105 @@
 	import SiLinkedin from '~icons/simple-icons/linkedin';
 	import SiInstagram from '~icons/simple-icons/instagram';
 	import SiX from '~icons/simple-icons/x';
-	// import SiBluesky from '~icons/simple-icons/bluesky';
-	// import SiThreads from '~icons/simple-icons/threads';
 	import SiMail from '~icons/simple-icons/gmail';
-
-	import CopyButton from '$lib/components/CopyButton.svelte';
 	import SiDiscord from '~icons/simple-icons/discord';
 	import SiSignal from '~icons/simple-icons/signal';
 	import SiWhatsapp from '~icons/simple-icons/whatsapp';
-	import { resolve } from '$app/paths';
-	import { dev } from '$app/environment';
-	import { getTitle } from '$lib/title';
-	import { page } from '$app/state';
 
-	let { children } = $props();
+	let { data, children } = $props();
-
+	const seo = $derived(getSeo(page.url.pathname, page.data, data.environment));
-	const links = [
+	let menuOpen = $state(false);
-		{ icon: SiMail, label: 'Email', href: 'mailto:stan@stanrunge.dev' },
+	type ThemePreference = 'dark' | 'system' | 'light';
-		{ icon: SiGithub, label: 'GitHub', href: 'https://github.com/stanrunge' },
+	let theme = $state<ThemePreference>('dark');
-		{ icon: SiLinkedin, label: 'LinkedIn', href: 'https://linkedin.com/in/stanrunge' },
+	const navigation = [
-		{ icon: SiX, label: 'X', href: 'https://x.com/stanrunge' },
+		{ label: 'home', href: '/' },
-		{ icon: SiYoutube, label: 'YouTube', href: 'https://youtube.com/@stanrunge' },
+		{ label: 'projects', href: '/projects' },
-		{ icon: SiInstagram, label: 'Instagram', href: 'https://instagram.com/stan_runge' },
+		{ label: 'blog', href: '/blog' },
-		// { icon: SiBluesky, label: 'Bluesky', href: 'https://bsky.app/profile/stanrunge.bsky.social' },
+		{ label: 'lists', href: '/lists' }
-		// { icon: SiThreads, label: 'Threads', href: 'https://www.threads.com/@stan_runge' },
+	] as const;
-		{ icon: SiTwitch, label: 'Twitch', href: 'https://twitch.tv/stanrunge_' },
+	const socialLinks = [
+		{ icon: SiMail, label: 'email', href: 'mailto:stan@stanrunge.dev' },
+		{ icon: SiGithub, label: 'github', href: 'https://github.com/stanrunge' },
+		{ icon: SiLinkedin, label: 'linkedin', href: 'https://linkedin.com/in/stanrunge' },
+		{ icon: SiX, label: 'x / twitter', href: 'https://x.com/stanrunge' },
+		{ icon: SiYoutube, label: 'youtube', href: 'https://youtube.com/@stanrunge' },
+		{ icon: SiInstagram, label: 'instagram', href: 'https://instagram.com/stan_runge' },
+		{ icon: SiTwitch, label: 'twitch', href: 'https://twitch.tv/stanrunge_' },
 		{
 			icon: SiSpotify,
-			label: 'Spotify',
+			label: 'spotify',
 			href: 'https://open.spotify.com/user/e3o3qr9z7fpsu4gur9zz4y1ld'
 		},
-		{ icon: SiSteam, label: 'Steam', href: 'https://steamcommunity.com/id/stanrunge' },
+		{ icon: SiSteam, label: 'steam', href: 'https://steamcommunity.com/id/stanrunge' },
 		{ icon: SiOsu, label: 'osu!', href: 'https://osu.ppy.sh/users/11212255' }
 	];
-
+	const copyLinks = [
-	const copies = [
 		{ icon: SiWhatsapp, label: 'WhatsApp', value: 'stanrunge' },
 		{ icon: SiDiscord, label: 'Discord', value: 'stanrunge' },
 		{ icon: SiSignal, label: 'Signal', value: 'stan.443' }
 	];
+
+	onMount(() => {
+		const preference = document.documentElement.dataset.themePreference;
+		theme = preference === 'light' || preference === 'system' ? preference : 'dark';
+		const systemTheme = window.matchMedia('(prefers-color-scheme: light)');
+		const onSystemThemeChange = () => {
+			if (theme === 'system') applyTheme('system');
+		};
+		systemTheme.addEventListener('change', onSystemThemeChange);
+		return () => systemTheme.removeEventListener('change', onSystemThemeChange);
+	});
+
+	function applyTheme(preference: ThemePreference) {
+		const resolvedTheme =
+			preference === 'system'
+				? window.matchMedia('(prefers-color-scheme: light)').matches
+					? 'light'
+					: 'dark'
+				: preference;
+		document.documentElement.dataset.themePreference = preference;
+		document.documentElement.dataset.theme = resolvedTheme;
+		document
+			.querySelector('meta[name="theme-color"]')
+			?.setAttribute('content', resolvedTheme === 'light' ? '#ffffff' : '#000000');
+	}
+
+	function toggleTheme() {
+		theme = theme === 'dark' ? 'system' : theme === 'system' ? 'light' : 'dark';
+		applyTheme(theme);
+		try {
+			localStorage.setItem('theme', theme);
+		} catch {
+			// The selected theme still applies for this visit.
+		}
+	}
+
+	function current(href: string) {
+		return page.url.pathname === href || (href !== '/' && page.url.pathname.startsWith(href + '/'));
+	}
 </script>
 
+{#snippet themeIcon()}
+	<svg
+		viewBox="0 0 24 24"
+		width="22"
+		height="22"
+		fill="none"
+		stroke="currentColor"
+		stroke-width="1.7"
+		stroke-linecap="round"
+		aria-hidden="true"
+	>
+		<path
+			d="M12 2v2M12 20v2M4.93 4.93l1.42 1.42m11.3 11.3 1.42 1.42M2 12h2m16 0h2M4.93 19.07l1.42-1.42m11.3-11.3 1.42-1.42"
+		/>
+		<circle cx="12" cy="12" r="6" fill={theme === 'light' ? 'currentColor' : 'none'} />
+		{#if theme === 'system'}
+			<path d="M12 6a6 6 0 0 1 0 12Z" fill="currentColor" stroke="none" />
+		{/if}
+	</svg>
+{/snippet}
+
 <svelte:head>
 	{#if !dev}
 		<script
@@ -59,45 +122,157 @@
 			data-website-id="47f2b385-188a-4776-a287-4889008ebac5"
 		></script>
 	{/if}
-
+	<title>{seo.title}</title>
-	<title>{getTitle(page.url.pathname)}</title>
+	<meta name="description" content={seo.description} />
+	<meta name="robots" content={seo.indexable ? 'index, follow' : 'noindex, nofollow'} />
+	<link rel="canonical" href={seo.url} />
+	<meta property="og:site_name" content="Stan Runge" />
+	<meta property="og:type" content={seo.type} />
+	<meta property="og:title" content={seo.title} />
+	<meta property="og:description" content={seo.description} />
+	<meta property="og:url" content={seo.url} />
+	<meta property="og:image" content={seo.image} />
+	<meta property="og:image:alt" content={seo.imageAlt} />
+	<meta property="og:image:width" content="793" />
+	<meta property="og:image:height" content="793" />
+	{#if seo.modifiedAt}<meta property="article:modified_time" content={seo.modifiedAt} />{/if}
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:creator" content="@stanrunge" />
+	<meta name="twitter:title" content={seo.title} />
+	<meta name="twitter:description" content={seo.description} />
+	<meta name="twitter:image" content={seo.image} />
+	<meta name="twitter:image:alt" content={seo.imageAlt} />
 </svelte:head>
 
-<div class="flex flex-col min-h-screen">
+<div class="flex min-h-screen flex-col bg-[var(--site-bg)] text-[var(--site-text)]">
-	<header class="flex justify-between items-center gap-4 py-4 px-4 border-b-4 border-gray-300">
+	<a
-		<a href={resolve('/')} class="text-2xl font-bold underline">Stan Runge</a>
+		href="#main"
-<div class="flex gap-8">
+		class="sr-only focus:not-sr-only focus:absolute focus:z-50 focus:bg-[var(--site-bg)] focus:px-4 focus:py-2"
-<div class="text-center py-2 font-bold text-xl ">
+		>skip to content</a
-	<a href={resolve('/blog')}>Blog</a>
+	>
-</div>
+	<header class="border-b border-[var(--site-border)]">
-
+		<div class="mx-auto flex max-w-6xl items-center gap-5 px-4 py-4 sm:px-6">
-<div class="text-center py-2 font-bold text-xl ">
+			<a
-	<a href={resolve('/projects')}>Projects</a>
+				href={resolve('/')}
-</div>
+				class="flex shrink-0 items-center gap-3 text-base font-semibold tracking-tight"
-</div>
+				onclick={() => (menuOpen = false)}
-
-		<nav class="flex flex-wrap justify-center gap-4" aria-label="Social links">
-			{#each copies as c (c.label)}
-				<CopyButton {...c} />
-			{/each}
-			{#each links as { icon: Icon, label, href } (label)}
-				<a {href} aria-label={label} class="text-2xl transition hover:opacity-60">
-					<Icon />
-				</a>
-			{/each}
-		</nav>
-	</header>
-
-	<main class="flex-1">
-		{@render children()}
-	</main>
-
-	<footer class="flex justify-center py-8 bg-gray-200">
-		<p>
-			Hosted on <a
-				class="underline text-blue-500"
-				href="https://git.stanrunge.dev/stan/personal-website">my git server :)</a
 			>
-		</p>
+				<span class="h-7 w-7 overflow-hidden rounded-full bg-black">
+					<img
+						src="{assets}/favicon-32x32.png"
+						alt=""
+						width="32"
+						height="32"
+						class="h-full w-full scale-[1.7]"
+					/>
+				</span>
+				<span>stan runge</span>
+			</a>
+			<nav class="ml-auto hidden items-center gap-6 text-base md:flex" aria-label="Main navigation">
+				{#each navigation as item (item.href)}
+					<a
+						href={resolve(item.href)}
+						aria-current={current(item.href) ? 'page' : undefined}
+						class={current(item.href)
+							? 'text-[var(--site-text)]'
+							: 'text-[var(--site-muted)] hover:text-[var(--site-text)]'}>{item.label}</a
+					>
+				{/each}
+			</nav>
+			<div class="ml-auto hidden items-center gap-5 text-base md:ml-4 md:flex">
+				<button
+					type="button"
+					onclick={toggleTheme}
+					aria-label={`Theme: ${theme}. Switch to ${theme === 'dark' ? 'system' : theme === 'system' ? 'light' : 'dark'} mode`}
+					title={`Theme: ${theme}`}
+					class="flex h-10 w-10 items-center justify-center text-[var(--site-muted)] hover:text-[var(--site-text)]"
+					>{@render themeIcon()}</button
+				>
+				{#if data.user}
+					<a href={resolve('/account')} class="max-w-28 truncate hover:underline"
+						>{data.user.name}</a
+					>
+				{:else}
+					<a
+						href={resolve(
+							`/login?returnTo=${encodeURIComponent(page.url.pathname + page.url.search)}`
+						)}
+						class="hover:underline">sign in</a
+					>
+				{/if}
+			</div>
+			<button
+				type="button"
+				class="ml-auto text-base text-[var(--site-muted)] md:hidden"
+				aria-label={menuOpen ? 'Close menu' : 'Open menu'}
+				aria-expanded={menuOpen}
+				aria-controls="mobile-menu"
+				onclick={() => (menuOpen = !menuOpen)}>{menuOpen ? 'close' : 'menu'}</button
+			>
+		</div>
+		{#if menuOpen}
+			<nav
+				id="mobile-menu"
+				class="border-t border-[var(--site-border)] px-4 py-4 md:hidden"
+				aria-label="Mobile navigation"
+			>
+				<div class="mx-auto flex max-w-6xl flex-col items-center gap-1 text-center text-base">
+					{#each navigation as item (item.href)}
+						<a href={resolve(item.href)} onclick={() => (menuOpen = false)} class="w-full py-2"
+							>{item.label}</a
+						>
+					{/each}
+					<div
+						class="mt-3 flex w-full items-center justify-center gap-5 border-t border-[var(--site-border)] pt-4"
+					>
+						<button
+							type="button"
+							onclick={toggleTheme}
+							aria-label={`Theme: ${theme}. Switch to ${theme === 'dark' ? 'system' : theme === 'system' ? 'light' : 'dark'} mode`}
+							title={`Theme: ${theme}`}
+							class="flex h-10 w-10 items-center justify-center text-[var(--site-muted)]"
+							>{@render themeIcon()}</button
+						>
+						{#if data.user}
+							<a href={resolve('/account')} onclick={() => (menuOpen = false)}>account</a>
+							<form method="POST" action="/logout"><button>sign out</button></form>
+						{:else}
+							<a href={resolve('/login')} onclick={() => (menuOpen = false)}>sign in</a>
+							<a href={resolve('/register')} onclick={() => (menuOpen = false)}>register</a>
+						{/if}
+					</div>
+				</div>
+			</nav>
+		{/if}
+	</header>
+	<main id="main" class="min-w-0 flex-1">{@render children()}</main>
+	<footer class="mt-16 border-t border-[var(--site-border)]">
+		<div class="mx-auto max-w-6xl space-y-5 px-4 py-8 text-[var(--site-muted)] sm:px-6">
+			<div class="flex flex-wrap items-center justify-between gap-3 text-base">
+				<span
+					>stan runge <span class="ml-2 font-mono text-xs" title="Deployed commit"
+						>{data.version.slice(0, 7)}</span
+					></span
+				>
+				<a
+					href="https://git.stanrunge.dev/stan/personal-website"
+					rel="external"
+					class="hover:text-[var(--site-text)]">source ↗</a
+				>
+			</div>
+			<nav class="flex flex-wrap items-center justify-center gap-1" aria-label="Social links">
+				{#each socialLinks as { icon: Icon, label, href } (label)}
+					<a
+						{href}
+						rel="external"
+						aria-label={label}
+						title={label}
+						class="flex h-10 w-10 items-center justify-center text-xl hover:text-[var(--site-text)]"
+						><Icon /></a
+					>
+				{/each}
+				{#each copyLinks as item (item.label)}<CopyButton {...item} />{/each}
+			</nav>
+		</div>
 	</footer>
 </div>

src/routes/+page.server.ts

@@ -1,31 +1,36 @@
-import { env } from '$env/dynamic/private';
+import { fail } from '@sveltejs/kit';
+import { db } from '$lib/server/db';
+import { listItemCompletions } from '$lib/server/db/schema';
+import { eq } from 'drizzle-orm';
+import type { PageServerLoad } from './$types';
 
-export const actions = {
+export const load: PageServerLoad = async ({ locals }) => {
-	authenticate: async ({ request, cookies }) => {
+	const lists = await db.query.lists.findMany({
-		const data = await request.formData();
+		columns: { id: true, name: true, slug: true, isProgress: true },
+		with: { items: { columns: { id: true } } },
+		orderBy: { id: 'desc' }
+	});
 
-		const token = data.get('token');
+	const completed = new Set(
-		if (!token) {
+		locals.user
-			return {
+			? (
-				status: 400,
+					await db
-				body: { error: 'Missing token' }
+						.select({ itemId: listItemCompletions.itemId })
-			};
+						.from(listItemCompletions)
-		}
+						.where(eq(listItemCompletions.userId, locals.user.id))
-
+				).map((row) => row.itemId)
-		if (token !== env.AUTH_TOKEN) {
+			: []
-			return {
+	);
-				status: 401,
+	return {
-				body: { error: 'Invalid token' }
+		lists: lists.map(({ items, ...list }) => ({
-			};
+			...list,
-		}
+			total: items.length,
-
+			checked: list.isProgress ? items.filter((item) => completed.has(item.id)).length : 0
-		cookies.set('token', token, {
+		}))
-			path: '/',
+	};
-			maxAge: 60 * 60 * 24 * 7
+};
-		});
+
-
+// Retire the old shared-token login; legacy cookies grant no permissions.
-		return {
+export const actions = {
-			success: true
+	authenticate: () => fail(410, { message: 'Use the central account login at /login' })
-		};
-	}
 };

src/routes/+page.svelte

@@ -1,107 +1,181 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import portrait from '$lib/assets/stan.jpg?url';
+	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+
+	const projects = [
+		{
+			name: 'vash esports',
+			subtitle: 'the best way to play osu!',
+			href: 'https://esports.vash.software',
+			external: true
+		},
+		{
+			name: 'catchemall',
+			subtitle: 'catch 1025 pokemon across 53 games',
+			href: '/projects/catch-em-all',
+			external: false
+		},
+		{
+			name: 'animaldex',
+			subtitle: 'add neighborhood pets to the world map 😼',
+			href: '/projects/animaldex',
+			external: false
+		},
+		{
+			name: 'osu! map finder',
+			subtitle: 'find osu! maps for Spotify songs/albums/playlists',
+			href: '/projects/spotify-beatmap-finder',
+			external: false
+		},
+		{
+			name: 'derby lens',
+			subtitle: 'estimate odds for horse betting',
+			href: '/projects/derby',
+			external: false
+		}
+	] as const;
+	const experience = [
+		{ when: '2026–now', role: 'associate software engineer', place: 'Cargill' },
+		{
+			when: '2021–2026',
+			role: 'BSc computer science · software engineering',
+			place: 'The Hague University of Applied Sciences'
+		},
+		{ when: '2026', role: 'software engineering intern', place: '3webapps' },
+		{ when: '2023', role: 'software engineering intern', place: 'h5mag' },
+		{ when: '2021–2023', role: 'junior IT specialist', place: 'Finance Plus' }
+	] as const;
 </script>
 
+<svelte:head>
+	<link rel="preload" as="image" href={portrait} fetchpriority="high" />
+</svelte:head>
 
-<div class="flex justify-around py-8">
+<div class="mx-auto max-w-6xl px-4 sm:px-6">
-	<div class="max-w-150">
+	<section
-		<h2 class="font-bold text-2xl underline text-center">experience</h2>
+		class="grid items-center gap-8 pt-7 pb-12 sm:py-20 md:grid-cols-[minmax(0,1fr)_minmax(0,320px)] md:gap-16"
-		<div class="flex gap-2">
+	>
-			<p class="min-w-28 text-right">2026 - <b>current</b></p>
+		<div class="min-w-0 text-center md:text-left">
-			<div>
+			<h1 class="text-5xl font-semibold tracking-[-0.055em] sm:text-6xl lg:text-7xl">stan runge</h1>
-			<p class="font-bold">Associate Software Engineer</p>
+			<nav
-
+				class="mt-7 grid grid-cols-2 justify-items-center gap-x-4 gap-y-3 text-base text-[var(--site-muted)] sm:flex sm:flex-wrap sm:justify-center sm:gap-x-6 md:justify-start"
-			<p>Cargill</p>
+				aria-label="Find me online"
-			</div>
-		</div>
-		<div class="flex gap-2">
-			<p class="min-w-28 text-right">2021 - 2026</p>
-			<div>
-				<p class="font-bold">BSc. Computer Science (Software Engineering)</p>
-				<p>The Hague University of Applied Sciences</p>
-			</div>
-		</div>
-		<div class="flex gap-2">
-			<p class="min-w-28 text-right">2026</p>
-			<p class="font-bold">internship at 3webapps</p>
-		</div>
-		<div class="flex gap-2">
-			<p class="min-w-28 text-right">2023</p>
-			<p class="font-bold">internship at h5mag</p>
-		</div>
-		<div class="flex gap-2">
-			<p class="min-w-28 text-right">2021 - 2023</p>
-			<p class="font-bold">junior IT specialist at Finance Plus</p>
-		</div>
-		<div class="flex gap-2">
-			<p class="min-w-28 text-right">2020 - <b>current</b></p>
-			<p class="font-bold">300+ IT problems solved in Netherlands</p>
-		</div>
-	</div>
-
-	<div class="px-8">
-		<h1 class="font-black text-center text-4xl pb-8">Stan Runge</h1>
-		<enhanced:img
-			class="rounded-2xl"
-			src="$lib/assets/stan.jpg?enhanced"
-			alt="stan runge"
-			sizes="(min-width: 768px) 760px, 90vw"
-			fetchpriority="high"
-		/>
-		<p class="italic text-sm text-center py-2">
-			me preparing for my presentation about <a href="https://arxiv.org/abs/2209.08167"
-				>quantum vision transformers</a
 			>
-		</p>
+				<a
-	</div>
+					href="https://git.stanrunge.dev/stan"
-
+					rel="external"
-	<div class="max-w-100">
+					class="hover:text-[var(--site-text)]">git ↗</a
-		<div>
+				>
-			<h2 class="font-bold text-2xl underline text-center">projects</h2>
+				<a href="https://x.com/stanrunge" rel="external" class="hover:text-[var(--site-text)]"
+					>twitter ↗</a
+				>
+				<a href="https://esports.vash.software" rel="external" class="hover:text-[var(--site-text)]"
+					>vash esports ↗</a
+				>
+				<a href="mailto:stan@stanrunge.dev" class="hover:text-[var(--site-text)]">email ↗</a>
+			</nav>
 		</div>
+		<img
+			src={portrait}
+			alt="Stan at his desk"
+			width="760"
+			height="746"
+			loading="eager"
+			decoding="sync"
+			fetchpriority="high"
+			class="aspect-square w-full max-w-80 justify-self-center rounded-md bg-[var(--site-surface)] object-cover md:justify-self-end"
+		/>
+	</section>
 
-		<div class="flex flex-col gap-4">
+	<section aria-labelledby="projects-heading" class="border-t border-[var(--site-border)] pt-8">
-			<a href="https://esports.vash.software">
+		<h2 id="projects-heading" class="mb-4 text-2xl font-semibold tracking-tight">
-				<p class="font-bold text-xl">vash esports</p>
+			<a href={resolve('/projects')} class="hover:text-[var(--site-muted)]">projects ↗</a>
-				<p>automated osu! matchmaking/tournament platform</p>
+		</h2>
-			</a>
+		<ul>
-			<div>
+			{#each projects as project (project.name)}
-				<p class="font-bold text-xl">eudi-auth for 3webapps</p>
+				<li class="border-b border-[var(--site-border)] text-lg">
-				<p>
+					{#if project.external}
-					plugin for WooCommerce/Magento2 that adds authentication with the European Digital
+						<a
-					Identity (EUDI) wallet
+							href={project.href}
-				</p>
+							rel="external"
-			</div>
+							class="flex items-center justify-between gap-4 py-4 hover:text-[var(--site-muted)]"
-			<div>
+						>
-				<p class="font-bold text-xl">realtime collaboration for h5mag</p>
+							<span class="min-w-0">
-				<p>
+								<span class="block">{project.name}</span>
-					socket.io server for h5mag (magazine web editor) that broadcasts user actions to other
+								<span class="mt-1 block text-base text-[var(--site-muted)]">{project.subtitle}</span
-					editors, similar to writing a Google Doc together
+								>
-				</p>
+							</span><span aria-hidden="true" class="shrink-0 text-[var(--site-muted)]">↗</span>
-			</div>
+						</a>
-			<div>
+					{:else}
-				<p class="font-bold text-xl">infra</p>
+						<a
-				<p>server, project deployments and dev config as code with setup script</p>
+							href={resolve(project.href)}
-			</div>
+							class="flex items-center justify-between gap-4 py-4 hover:text-[var(--site-muted)]"
-			<a href={resolve('/projects/animaldex')}>
+						>
-				<p class="font-bold text-xl">animaldex</p>
+							<span class="min-w-0">
-				<p>world map with pets & other animals around the neighborhood 😼</p>
+								<span class="block">{project.name}</span>
-			</a>
+								<span class="mt-1 block text-base text-[var(--site-muted)]">{project.subtitle}</span
-			<a href={resolve('/projects/catch-em-all')}>
+								>
-				<p class="font-bold text-xl">catch em all</p>
+							</span><span aria-hidden="true" class="shrink-0 text-[var(--site-muted)]">↗</span>
-				<p>table of all 1025 pokemon across 38 games with checkboxes for catching them all</p>
+						</a>
-			</a>
+					{/if}
-			<a href={resolve('/projects/spotify-beatmap-finder')}>
+				</li>
-				<p class="font-bold text-xl">spotify osu! map finder</p>
+			{/each}
-				<p>small tool for finding osu! maps using a spotify url of a song or playlist</p>
+		</ul>
-			</a>
+	</section>
-			<a href="https://beeriokart.stanrunge.dev">
-				<p class="font-bold text-xl">beerio kart</p>
-				<div>Go</div>
-				<p>webserver in go with a double-elim bracket for a one-time mario kart tournament</p>
-			</a>
 
-			<p>+ a lot more planned (soon™)</p>
+	<section aria-labelledby="lists-heading" class="pt-14 sm:pt-20">
-		</div>
+		<h2 id="lists-heading" class="mb-4 text-2xl font-semibold tracking-tight">
-	</div>
+			<a href={resolve('/lists')} class="hover:text-[var(--site-muted)]">lists ↗</a>
+		</h2>
+		<ul>
+			{#each data.lists as list (list.id)}
+				<li class="border-b border-[var(--site-border)] text-lg">
+					<a
+						href={resolve('/lists/[slug]', { slug: list.slug })}
+						class="block py-4 hover:text-[var(--site-muted)]"
+					>
+						<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
+							<span>{list.name}</span>
+							<span class="text-base text-[var(--site-muted)]">
+								{#if list.isProgress && data.user}
+									{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}
+								{:else}
+									{list.total} {list.total === 1 ? 'item' : 'items'}
+								{/if} ↗
+							</span>
+						</span>
+						{#if list.isProgress}<span class="mt-3 block"
+								><ProgressBar
+									value={list.checked}
+									max={list.total}
+									label={`Progress on ${list.name}`}
+									small
+								/></span
+							>{/if}
+					</a>
+				</li>
+			{/each}
+		</ul>
+	</section>
+
+	<section aria-labelledby="experience-heading" class="pt-14 sm:pt-20">
+		<h2 id="experience-heading" class="mb-4 text-2xl font-semibold tracking-tight">experience</h2>
+		<ol>
+			{#each experience as item (item.when + item.place)}
+				<li
+					class="grid gap-1 border-t border-[var(--site-border)] py-4 sm:grid-cols-[minmax(0,1fr)_130px] sm:gap-6"
+				>
+					<div class="min-w-0">
+						<h3 class="font-medium">{item.role}</h3>
+						<p class="mt-1 text-base text-[var(--site-muted)]">{item.place}</p>
+					</div>
+					<span class="text-base text-[var(--site-muted)] sm:text-right">{item.when}</span>
+				</li>
+			{/each}
+		</ol>
+	</section>
 </div>

src/routes/account/+page.server.ts

@@ -0,0 +1,13 @@
+import { auth, authProviders } from '$lib/server/auth';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+export const load: PageServerLoad = async ({ locals, request, url }) => {
+	if (!locals.user) redirect(303, '/login?returnTo=/account');
+	const accounts = await auth.api.listUserAccounts({ headers: request.headers });
+	return {
+		email: locals.user.email.endsWith('@osu.invalid') ? null : locals.user.email,
+		providers: authProviders,
+		linkedProviders: accounts.map((account) => account.providerId),
+		oauthError: url.searchParams.has('error')
+	};
+};

src/routes/account/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { authClient } from '$lib/auth-client';
+	import type { PageProps } from './$types';
+	let { data }: PageProps = $props();
+	let busy = $state(false);
+	let message = $state('');
+	async function link(provider: 'google' | 'osu') {
+		busy = true;
+		message = '';
+		try {
+			const result = await authClient.linkSocial({
+				provider,
+				callbackURL: '/account',
+				errorCallbackURL: '/account'
+			});
+			if (result.error) {
+				message = result.error.message || 'Could not link this account.';
+				busy = false;
+			}
+		} catch {
+			message = 'Could not connect. Please try again.';
+			busy = false;
+		}
+	}
+</script>
+
+<section class="mx-auto max-w-xl p-6 space-y-6">
+	<div>
+		<h1 class="text-2xl font-bold">Your account</h1>
+		<p class="mt-2">Signed in as {data.user?.name}{data.email ? ` (${data.email})` : ''}.</p>
+	</div>
+	<p class="text-sm text-gray-500">Account ID: <code>{data.user?.id}</code></p>
+
+	<div class="rounded border p-4 space-y-3">
+		<h2 class="font-bold">Sign-in methods</h2>
+		<p class="text-sm text-gray-600">
+			Link a provider here to use it with this account and keep your saved progress together.
+		</p>
+		{#if message || data.oauthError}<p role="alert" class="text-red-700">
+				{message ||
+					'Linking failed or was cancelled. The provider may already belong to another account.'}
+			</p>{/if}
+		{#if data.linkedProviders.includes('credential')}<p>Email and password connected</p>{/if}
+		{#each ['google', 'osu'] as provider (provider)}
+			{@const label = provider === 'google' ? 'Google' : 'osu!'}
+			{#if data.linkedProviders.includes(provider)}<p>{label} connected</p>
+			{:else if data.providers[provider as 'google' | 'osu']}<button
+					class="block rounded border px-4 py-2 disabled:opacity-50"
+					disabled={busy}
+					onclick={() => link(provider as 'google' | 'osu')}>Connect {label}</button
+				>{/if}
+		{/each}
+	</div>
+	{#if data.isAdmin}
+		<div class="rounded border p-4 space-y-3">
+			<h2 class="font-bold">Administration</h2>
+			<div class="flex flex-wrap gap-4">
+				<a class="underline" href={resolve('/blog')}>Blog articles</a><a
+					class="underline"
+					href={resolve('/lists')}>Lists</a
+				><a class="underline" href={resolve('/projects/animaldex/admin')}>Animaldex moderation</a><a
+					class="underline"
+					href={resolve('/projects/progress')}>Progress</a
+				>
+			</div>
+		</div>
+	{/if}
+	<form method="POST" action="/logout">
+		<button class="rounded border px-4 py-2">Log out</button>
+	</form>
+</section>

src/routes/admin/login/+server.ts

@@ -1,25 +1,3 @@
-import { json, error } from '@sveltejs/kit';
+import { error, redirect } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
+export const GET = () => redirect(303, '/login');
-import { env } from '$env/dynamic/private';
+export const POST = () => error(410, 'Use the central account login at /login');
-import { z } from 'zod';
-
-const loginSchema = z.object({ password: z.string().min(1) });
-
-export const POST: RequestHandler = async ({ request, cookies }) => {
-	const body = await request.json().catch(() => null);
-	const parsed = loginSchema.safeParse(body);
-
-	if (!parsed.success || parsed.data.password !== env.ADMIN_SECRET) {
-		throw error(401, { message: 'Invalid password' });
-	}
-
-	cookies.set('admin_token', env.ADMIN_SECRET, {
-		path: '/',
-		httpOnly: true,
-		sameSite: 'strict',
-		secure: process.env.NODE_ENV === 'production',
-		maxAge: 60 * 60 * 24 * 7
-	});
-
-	return json({ ok: true });
-};

src/routes/blog/+page.server.ts

@@ -20,7 +20,8 @@ export const load: PageServerLoad = async (event) => {
 
 	return {
 		blogArticles: articles,
-		isAdmin: admin
+		isAdmin: admin,
+		now: Date.now()
 	};
 };
 

src/routes/blog/+page.svelte

@@ -1,125 +1,111 @@
 <script lang="ts">
 	import { enhance } from '$app/forms';
-	import { invalidateAll } from '$app/navigation';
 	import { resolve } from '$app/paths';
-
+	import { calendarDate, relativeTime } from '$lib/relative-time';
-	let { data } = $props();
+	import type { PageProps } from './$types';
-
+	let { data, form }: PageProps = $props();
-	let createNewArticlePopup = $state(false);
+	let searchQuery = $state('');
-	let loginPopup = $state(false);
+	let selectedTag = $state('');
-	let password = $state('');
+	let tags = $derived([...new Set(data.blogArticles.flatMap((article) => article.tags))].sort());
-	let loginError = $state('');
+	let visibleArticles = $derived(
-	let loginLoading = $state(false);
+		data.blogArticles.filter((article) => {
-
+			const query = searchQuery.trim().toLowerCase();
-	async function login() {
+			return (
-		loginLoading = true;
+				(!selectedTag || article.tags.includes(selectedTag)) &&
-		loginError = '';
+				(!query ||
-		const res = await fetch('/admin/login', {
+					`${article.title} ${article.content} ${article.tags.join(' ')}`
-			method: 'POST',
+						.toLowerCase()
-			headers: { 'Content-Type': 'application/json' },
+						.includes(query))
-			body: JSON.stringify({ password })
+			);
-		});
+		})
-		if (res.ok) {
+	);
-			loginPopup = false;
-			password = '';
-			await invalidateAll();
-		} else {
-			loginError = 'Wrong password';
-		}
-		loginLoading = false;
-	}
 </script>
 
-<div class="text-center py-8 gap-2 flex align-center justify-center">
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
-	<h1 class="text-2xl">Blog (Stan's yapping corner)</h1>
+	<div class="mb-10 flex flex-wrap items-center justify-between gap-4">
-	{#if data.isAdmin}
+		<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">blog</h1>
-		<button
+		{#if data.isAdmin}<details class="relative">
-			onclick={() => (createNewArticlePopup = true)}
+				<summary class="cursor-pointer text-base underline underline-offset-4">new article</summary>
-			class="bg-gray-800 rounded px-4 py-2 text-white font-bold cursor-pointer"
+				<form
-			>Write new article</button
+					method="POST"
-		>
+					use:enhance
-	{:else}
+					class="absolute top-full right-0 z-10 mt-3 w-72 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
-		<button
+				>
-			onclick={() => (loginPopup = true)}
+					<label class="block"
-			class="text-xs text-gray-400 underline cursor-pointer">Admin login</button
+						>title<input
-		>
+							name="title"
-	{/if}
+							required
-</div>
+							maxlength="256"
-
+							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
-<div class="flex flex-col items-center gap-2">
+						/></label
-	{#each data.blogArticles as article (article.slug)}
-		<a href={resolve('/blog/[slug]', { slug: article.slug })}>
-			<div class="flex gap-2 py-2 px-4 border rounded min-w-100">
-				<p class="font-bold text-md">{article.title}</p>
-				{#if data.isAdmin && article.status === 'draft'}
-					<span class="text-xs uppercase text-orange-500">draft</span>
-					<a href={resolve('/blog/[slug]/edit', { slug: article.slug })} class="text-xs underline"
-						>edit</a
 					>
-				{/if}
+					<button
-				<p>{article.createdAt?.toDateString()}</p>
+						class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
+						>create draft</button
+					>
+				</form>
+			</details>{/if}
+	</div>
+	{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
+	<div class="mb-8 space-y-4">
+		<label class="block max-w-lg">
+			<span class="sr-only">Search articles</span>
+			<input
+				type="search"
+				placeholder="search articles"
+				bind:value={searchQuery}
+				class="w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 text-base"
+			/>
+		</label>
+		{#if tags.length}
+			<div class="flex flex-wrap gap-x-4 gap-y-2" aria-label="Filter by tag">
+				<button
+					type="button"
+					onclick={() => (selectedTag = '')}
+					aria-pressed={!selectedTag}
+					class={selectedTag ? 'text-[var(--site-muted)]' : 'underline underline-offset-4'}
+					>all</button
+				>
+				{#each tags as tag (tag)}
+					<button
+						type="button"
+						onclick={() => (selectedTag = selectedTag === tag ? '' : tag)}
+						aria-pressed={selectedTag === tag}
+						class={selectedTag === tag
+							? 'underline underline-offset-4'
+							: 'text-[var(--site-muted)]'}>{tag}</button
+					>
+				{/each}
 			</div>
-		</a>
+		{/if}
-	{/each}
+	</div>
+	<ul>
+		{#each visibleArticles as article (article.id)}
+			<li class="border-t border-[var(--site-border)] py-5">
+				<div class="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-1">
+					<a
+						href={resolve('/blog/[slug]', { slug: article.slug })}
+						class="text-lg font-medium hover:text-[var(--site-muted)]">{article.title}</a
+					>
+					<div
+						class="flex flex-wrap items-center gap-x-4 gap-y-1 text-base text-[var(--site-muted)]"
+					>
+						{#if data.isAdmin && article.status === 'draft'}<span>draft</span>{/if}
+						{#each article.tags as tag (tag)}<span>{tag}</span>{/each}
+						<time datetime={article.createdAt.toISOString()} title={calendarDate(article.createdAt)}
+							>{relativeTime(article.createdAt, data.now)}</time
+						>
+						{#if data.isAdmin}<a
+								href={resolve('/blog/[slug]/edit', { slug: article.slug })}
+								class="hover:text-[var(--site-text)]">edit</a
+							>{/if}
+					</div>
+				</div>
+			</li>
+		{:else}
+			<li class="border-t border-[var(--site-border)] py-5 text-[var(--site-muted)]">
+				{data.blogArticles.length ? 'no matching articles' : 'no articles yet'}
+			</li>
+		{/each}
+	</ul>
 </div>
-
-{#if createNewArticlePopup}
-	<div class="fixed inset-0 flex items-center justify-center bg-black/40">
-		<form method="POST" use:enhance class="w-80 rounded bg-white p-6 shadow-xl">
-			<h2 class="mb-4 text-lg font-bold">Create New Article</h2>
-			<input
-				name="title"
-				placeholder="Article title"
-				required
-				class="mb-4 w-full rounded border border-gray-300 px-3 py-2 text-sm outline-none"
-			/>
-			<div class="flex justify-end gap-2">
-				<button
-					type="button"
-					onclick={() => (createNewArticlePopup = false)}
-					class="rounded px-3 py-2 text-sm cursor-pointer">Cancel</button
-				>
-				<button
-					type="submit"
-					class="rounded bg-gray-800 px-3 py-2 text-sm font-bold text-white cursor-pointer"
-					>Create draft</button
-				>
-			</div>
-		</form>
-	</div>
-{/if}
-
-{#if loginPopup}
-	<div class="fixed inset-0 flex items-center justify-center bg-black/40">
-		<div class="w-80 rounded bg-white p-6 shadow-xl">
-			<h2 class="mb-4 text-lg font-bold">Admin login</h2>
-			<input
-				type="password"
-				bind:value={password}
-				placeholder="Password"
-				onkeydown={(e) => e.key === 'Enter' && login()}
-				class="mb-3 w-full rounded border border-gray-300 px-3 py-2 text-sm outline-none"
-			/>
-			{#if loginError}
-				<p class="mb-3 text-xs text-red-500">{loginError}</p>
-			{/if}
-			<div class="flex justify-end gap-2">
-				<button
-					type="button"
-					onclick={() => {
-						loginPopup = false;
-						loginError = '';
-					}}
-					class="rounded px-3 py-2 text-sm cursor-pointer">Cancel</button
-				>
-				<button
-					onclick={login}
-					disabled={loginLoading}
-					class="rounded bg-gray-800 px-3 py-2 text-sm font-bold text-white disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
-				>
-					{loginLoading ? 'Logging in…' : 'Log in'}
-				</button>
-			</div>
-		</div>
-	</div>
-{/if}

src/routes/blog/[slug]/+page.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
 	import { resolve } from '$app/paths';
+	import { calendarDate } from '$lib/relative-time';
 	import 'highlight.js/styles/github-dark.css';
 
 	let { data } = $props();
 </script>
 
-<svelte:head><title>{data.blogArticle.title} - Blog</title></svelte:head>
-
 <article class="mx-auto max-w-2xl px-4 py-8">
-	<div class="mb-6 flex items-center justify-between">
+	<div class="mb-6 flex items-center justify-between gap-4">
-		<h1 class="text-2xl font-bold">{data.blogArticle.title}</h1>
+		<h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">{data.blogArticle.title}</h1>
 		{#if data.isAdmin}
 			<a
 				href={resolve('/blog/[slug]/edit', { slug: data.blogArticle.slug })}
-				class="text-sm underline">Edit</a
+				class="text-base underline">edit</a
 			>
 		{/if}
 	</div>
-	<p class="mb-6 text-sm text-gray-500">{data.blogArticle.createdAt?.toDateString()}</p>
+	<div class="mb-8 flex flex-wrap gap-x-4 gap-y-1 text-base text-[var(--site-muted)]">
-	<div class="prose prose-neutral max-w-none">
+		<time datetime={data.blogArticle.createdAt.toISOString()}
+			>{calendarDate(data.blogArticle.createdAt)}</time
+		>
+		{#each data.blogArticle.tags as tag (tag)}<span>{tag}</span>{/each}
+	</div>
+	<div class="article-content prose max-w-none">
+		<!-- Only administrators can author blog Markdown. -->
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html data.contentHtml}
 	</div>
 </article>

src/routes/blog/[slug]/edit/+page.server.ts

@@ -1,9 +1,10 @@
 import { db } from '$lib/server/db';
 import { blogArticles } from '$lib/server/db/schema';
 import { isAdmin, requireAdmin } from '$lib/server/auth';
-import { updateArticleSchema } from '$lib/validation/blog';
+import { parseArticleTags, updateArticleSchema } from '$lib/validation/blog';
-import { eq } from 'drizzle-orm';
+import { validSlug } from '$lib/server/slugify';
-import { error, fail, redirect } from '@sveltejs/kit';
+import { and, eq, ne } from 'drizzle-orm';
+import { error, fail, redirect, type RequestEvent } from '@sveltejs/kit';
 
 import type { PageServerLoad } from './$types.js';
 
@@ -26,59 +27,81 @@ export const load: PageServerLoad = async (event) => {
 	};
 };
 
+async function readArticleForm(event: RequestEvent) {
+	const formData = await event.request.formData();
+	const parsed = updateArticleSchema.safeParse({
+		title: formData.get('title')?.toString().trim(),
+		slug: formData.get('slug')?.toString().trim().toLowerCase(),
+		content: formData.get('content')?.toString(),
+		tags: parseArticleTags(formData.get('tags')?.toString() ?? '')
+	});
+	if (!parsed.success || !validSlug(parsed.data.slug)) return null;
+	return parsed.data;
+}
+
 export const actions = {
 	save: async (event) => {
 		requireAdmin(event);
-
+		const values = await readArticleForm(event);
-		const formData = await event.request.formData();
+		if (!values)
-		const parsed = updateArticleSchema.safeParse({
+			return fail(400, {
-			title: formData.get('title')?.toString(),
+				message: 'Enter a title, a lowercase slug, and up to 8 tags of 32 characters each.'
-			content: formData.get('content')?.toString()
+			});
-		});
+		const current = await db.query.blogArticles.findFirst({ where: { slug: event.params.slug } });
-
+		if (!current) error(404, 'Article not found');
-		if (!parsed.success) {
+		const duplicate = await db
-			return fail(400, { message: 'Title and content are required' });
+			.select({ id: blogArticles.id })
-		}
+			.from(blogArticles)
+			.where(and(eq(blogArticles.slug, values.slug), ne(blogArticles.id, current.id)));
+		if (duplicate.length) return fail(409, { message: 'That article slug is already in use.' });
 
 		const [updated] = await db
 			.update(blogArticles)
 			.set({
-				title: parsed.data.title,
+				title: values.title,
-				content: parsed.data.content,
+				slug: values.slug,
+				content: values.content,
+				tags: values.tags,
 				updatedAt: new Date()
 			})
-			.where(eq(blogArticles.slug, event.params.slug))
+			.where(eq(blogArticles.id, current.id))
 			.returning();
 
 		if (!updated) {
 			return error(404, { message: 'Article not found' });
 		}
 
+		if (values.slug !== event.params.slug) redirect(303, `/blog/${values.slug}/edit`);
 		return { saved: true };
 	},
 
 	publish: async (event) => {
 		requireAdmin(event);
 
-		const formData = await event.request.formData();
+		const values = await readArticleForm(event);
-		const parsed = updateArticleSchema.safeParse({
+		if (!values)
-			title: formData.get('title')?.toString(),
+			return fail(400, {
-			content: formData.get('content')?.toString()
+				message: 'Enter a title, a lowercase slug, and up to 8 tags of 32 characters each.'
-		});
+			});
-
+		const current = await db.query.blogArticles.findFirst({ where: { slug: event.params.slug } });
-		if (!parsed.success) {
+		if (!current) error(404, 'Article not found');
-			return fail(400, { message: 'Title and content are required' });
+		const duplicate = await db
-		}
+			.select({ id: blogArticles.id })
+			.from(blogArticles)
+			.where(and(eq(blogArticles.slug, values.slug), ne(blogArticles.id, current.id)));
+		if (duplicate.length) return fail(409, { message: 'That article slug is already in use.' });
 
 		const [updated] = await db
 			.update(blogArticles)
 			.set({
-				title: parsed.data.title,
+				title: values.title,
-				content: parsed.data.content,
+				slug: values.slug,
+				content: values.content,
+				tags: values.tags,
 				status: 'published',
 				updatedAt: new Date()
 			})
-			.where(eq(blogArticles.slug, event.params.slug))
+			.where(eq(blogArticles.id, current.id))
 			.returning();
 
 		if (!updated) {
@@ -86,5 +109,15 @@ export const actions = {
 		}
 
 		return redirect(303, `/blog/${updated.slug}`);
+	},
+	delete: async (event) => {
+		requireAdmin(event);
+		const current = await db.query.blogArticles.findFirst({ where: { slug: event.params.slug } });
+		if (!current) error(404, 'Article not found');
+		const confirmation = String((await event.request.formData()).get('confirmTitle') ?? '');
+		if (confirmation !== current.title)
+			return fail(400, { message: 'Type the exact article title to confirm deletion.' });
+		await db.delete(blogArticles).where(eq(blogArticles.id, current.id));
+		redirect(303, '/blog');
 	}
 };

src/routes/blog/[slug]/edit/+page.svelte

@@ -4,30 +4,43 @@
 
 	let { data, form } = $props();
 
-	let title = $state(data.blogArticle.title);
+	let title = $state('');
-	let content = $state(data.blogArticle.content ?? '');
+	let slug = $state('');
+	let tags = $state('');
+	let content = $state('');
 	let saving = $state(false);
+	let loadedSlug = '';
+	$effect(() => {
+		const article = data.blogArticle;
+		if (article.slug === loadedSlug) return;
+		loadedSlug = article.slug;
+		title = article.title;
+		slug = article.slug;
+		tags = article.tags.join(', ');
+		content = article.content ?? '';
+	});
 </script>
 
-<svelte:head><title>Editing {data.blogArticle.title}</title></svelte:head>
+<div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 sm:py-16">
-
+	<a
-<div class="mx-auto max-w-2xl px-4 py-8">
+		href={resolve('/blog')}
-	<div class="mb-4 flex items-center justify-between">
+		class="text-base text-[var(--site-muted)] hover:text-[var(--site-text)]">← blog</a
-		<h1 class="text-xl font-bold">
+	>
-			Editing article
+	<div class="mt-5 mb-8 flex flex-wrap items-end justify-between gap-4">
-			<span
+		<div>
-				class="ml-2 rounded px-2 py-0.5 text-xs uppercase {data.blogArticle.status === 'published'
+			<h1 class="text-3xl font-semibold tracking-tight sm:text-4xl">edit article</h1>
-					? 'bg-green-100 text-green-700'
+			<p class="mt-1 text-base text-[var(--site-muted)]">{data.blogArticle.status}</p>
-					: 'bg-orange-100 text-orange-700'}">{data.blogArticle.status}</span
+		</div>
+		{#if data.blogArticle.status === 'published'}
+			<a
+				href={resolve('/blog/[slug]', { slug: data.blogArticle.slug })}
+				class="text-base underline underline-offset-4">view article ↗</a
 			>
-		</h1>
+		{/if}
-		<a href={resolve('/blog/[slug]', { slug: data.blogArticle.slug })} class="text-sm underline"
-			>View</a
-		>
 	</div>
 
 	{#if form?.message}
-		<p class="mb-3 text-sm text-red-500">{form.message}</p>
+		<p role="alert" class="mb-5 text-base text-red-500">{form.message}</p>
 	{/if}
 
 	<form
@@ -40,36 +53,80 @@
 				saving = false;
 			};
 		}}
-		class="flex flex-col gap-3"
+		class="space-y-6"
 	>
-		<input
+		<label class="block text-base font-medium"
-			name="title"
+			>title<input
-			bind:value={title}
+				name="title"
-			required
+				bind:value={title}
-			class="rounded border border-gray-300 px-3 py-2 text-lg font-bold outline-none"
+				required
-		/>
+				maxlength="256"
-		<textarea
+				class="mt-2 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 text-xl font-medium"
-			name="content"
+			/></label
-			bind:value={content}
+		>
-			rows="20"
+		<div class="grid gap-6 sm:grid-cols-2">
-			class="rounded border border-gray-300 px-3 py-2 font-body text-base leading-relaxed text-gray-900 outline-none"
+			<label class="block text-base font-medium"
-		></textarea>
+				>slug<input
-		<p class="-mt-2 text-xs text-gray-400">Supports Markdown formatting.</p>
+					name="slug"
+					bind:value={slug}
+					required
+					maxlength="120"
+					pattern="[a-z0-9]+(-[a-z0-9]+)*"
+					class="mt-2 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 font-mono text-base"
+				/></label
+			>
+			<label class="block text-base font-medium"
+				>tags<input
+					name="tags"
+					bind:value={tags}
+					placeholder="comma-separated tags"
+					class="mt-2 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 text-base"
+				/></label
+			>
+		</div>
+		<label class="block text-base font-medium"
+			>content <span class="font-normal text-[var(--site-muted)]">· markdown</span>
+			<textarea
+				name="content"
+				bind:value={content}
+				rows="24"
+				class="mt-2 block min-h-96 w-full resize-y rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-4 py-3 font-mono text-base leading-relaxed text-[var(--site-text)]"
+			></textarea></label
+		>
 
-		<div class="flex justify-end gap-2">
+		<div class="flex flex-wrap justify-end gap-3 border-t border-[var(--site-border)] pt-5">
 			<button
 				type="submit"
 				disabled={saving}
-				class="rounded bg-gray-800 px-4 py-2 text-sm font-bold text-white disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
+				class="rounded border border-[var(--site-border)] px-5 py-2.5 text-base disabled:opacity-50"
-				>Save draft</button
+				>save</button
 			>
 			<button
 				type="submit"
 				formaction="?/publish"
 				disabled={saving}
-				class="rounded bg-green-700 px-4 py-2 text-sm font-bold text-white disabled:opacity-50 cursor-pointer disabled:cursor-not-allowed"
+				class="rounded bg-[var(--site-text)] px-5 py-2.5 text-base font-medium text-[var(--site-bg)] disabled:opacity-50"
-				>Publish</button
+				>{data.blogArticle.status === 'published' ? 'update published article' : 'publish'}</button
 			>
 		</div>
 	</form>
+	<details class="mt-12 border-t border-[var(--site-border)] pt-5">
+		<summary class="cursor-pointer text-base text-[var(--site-muted)]">delete article</summary>
+		<form method="POST" action="?/delete" class="mt-3 space-y-3">
+			<p class="text-base">
+				This permanently deletes the article. Type <strong>{data.blogArticle.title}</strong> to confirm.
+			</p>
+			<label class="block text-base"
+				>article title<input
+					name="confirmTitle"
+					required
+					autocomplete="off"
+					class="mt-2 block w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+				/></label
+			>
+			<button class="rounded border border-red-500 px-4 py-2 text-base text-red-500"
+				>delete article</button
+			>
+		</form>
+	</details>
 </div>

src/routes/lists/+page.server.ts

@@ -0,0 +1,47 @@
+import { db } from '$lib/server/db';
+import { listItemCompletions, lists } from '$lib/server/db/schema';
+import { requireAdmin } from '$lib/server/authorization';
+import { uniqueListSlug } from '$lib/server/slugify';
+import { eq } from 'drizzle-orm';
+import { fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ locals }) => {
+	const rows = await db.query.lists.findMany({
+		with: { items: { columns: { id: true } } },
+		orderBy: { id: 'desc' }
+	});
+	const completed = new Set(
+		locals.user
+			? (
+					await db
+						.select({ itemId: listItemCompletions.itemId })
+						.from(listItemCompletions)
+						.where(eq(listItemCompletions.userId, locals.user.id))
+				).map((row) => row.itemId)
+			: []
+	);
+	return {
+		lists: rows.map(({ items, ...list }) => ({
+			...list,
+			total: items.length,
+			checked: list.isProgress ? items.filter((item) => completed.has(item.id)).length : 0
+		}))
+	};
+};
+
+export const actions: Actions = {
+	newList: async (event) => {
+		requireAdmin(event);
+		const form = await event.request.formData();
+		const name = String(form.get('name') ?? '').trim();
+		const type = String(form.get('type') ?? '');
+		if (!name || name.length > 200)
+			return fail(400, { message: 'Enter a list name of 1–200 characters.' });
+		if (type !== 'normal' && type !== 'progress')
+			return fail(400, { message: 'Choose a list type.' });
+		const slug = await uniqueListSlug(name);
+		await db.insert(lists).values({ name, slug, isProgress: type === 'progress' });
+		redirect(303, `/lists/${slug}`);
+	}
+};

src/routes/lists/+page.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { enhance } from '$app/forms';
+	import { resolve } from '$app/paths';
+	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+</script>
+
+<div class="mx-auto max-w-6xl px-4 py-12 sm:px-6 sm:py-16">
+	<div class="mb-10 flex flex-wrap items-center justify-between gap-4">
+		<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">lists</h1>
+		{#if data.isAdmin}<details class="relative">
+				<summary class="cursor-pointer text-base underline underline-offset-4">new list</summary>
+				<form
+					method="POST"
+					action="?/newList"
+					use:enhance
+					class="absolute top-full right-0 z-10 mt-3 w-80 max-w-[calc(100vw-2rem)] space-y-3 rounded-lg border border-[var(--site-border)] bg-[var(--site-surface)] p-4 shadow-lg"
+				>
+					<label class="block"
+						>name<input
+							name="name"
+							required
+							maxlength="200"
+							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+						/></label
+					>
+					<label class="block"
+						>type<select
+							name="type"
+							class="mt-2 w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-3 py-2"
+							><option value="normal">normal</option><option value="progress">progress</option
+							></select
+						></label
+					>
+					<button
+						class="rounded bg-[var(--site-text)] px-4 py-2 font-semibold text-[var(--site-bg)]"
+						>create list</button
+					>
+				</form>
+			</details>{/if}
+	</div>
+	{#if form?.message}<p role="alert" class="mb-5 text-red-500">{form.message}</p>{/if}
+	<ul>
+		{#each data.lists as list (list.id)}
+			<li class="border-t border-[var(--site-border)]">
+				<a
+					href={resolve('/lists/[slug]', { slug: list.slug })}
+					class="block py-5 hover:text-[var(--site-muted)]"
+				>
+					<span class="flex flex-wrap items-center justify-between gap-x-6 gap-y-1">
+						<span class="text-lg font-medium">{list.name}</span>
+						<span class="text-base text-[var(--site-muted)]">
+							{#if list.isProgress && data.user}
+								{list.total ? Math.round((list.checked / list.total) * 100) : 0}% · {list.checked}/{list.total}
+							{:else}
+								{list.total}
+								{list.total === 1 ? 'item' : 'items'}{list.isProgress ? ' · progress' : ''}
+							{/if}
+						</span>
+					</span>
+					{#if list.isProgress}<span class="mt-3 block"
+							><ProgressBar
+								value={list.checked}
+								max={list.total}
+								label={`Progress on ${list.name}`}
+								small
+							/></span
+						>{/if}
+				</a>
+			</li>
+		{:else}
+			<li class="border-t border-[var(--site-border)] py-5 text-[var(--site-muted)]">
+				no lists yet
+			</li>
+		{/each}
+	</ul>
+</div>

src/routes/lists/[slug]/+page.server.ts

@@ -0,0 +1,178 @@
+import { db } from '$lib/server/db';
+import { lists, listItems, listItemCompletions } from '$lib/server/db/schema';
+import { requireAdmin, requireUser } from '$lib/server/authorization';
+import { deleteObject, listImageKey, listImageUrl } from '$lib/server/r2';
+import { validSlug } from '$lib/server/slugify';
+import { and, eq, ne } from 'drizzle-orm';
+import { error, fail, redirect } from '@sveltejs/kit';
+import type { Actions, PageServerLoad } from './$types';
+
+async function currentList(slug: string) {
+	const list = await db.query.lists.findFirst({ where: { slug } });
+	if (!list) error(404, 'List not found');
+	return list;
+}
+async function removeStoredPicture(url: string | null) {
+	const key = url ? listImageKey(url) : null;
+	if (!key) return;
+	try {
+		await deleteObject(key);
+	} catch (cause) {
+		console.error('Could not remove list picture from R2', cause);
+	}
+}
+function itemFields(form: FormData) {
+	const name = String(form.get('name') ?? '').trim();
+	const description = String(form.get('description') ?? '').trim();
+	const pictureKey = String(form.get('pictureKey') ?? '').trim();
+	const removePicture = form.get('removePicture') === 'on';
+	const file = form.get('picture');
+	if (!name || name.length > 500) return { error: 'Enter an item name of 1–500 characters.' };
+	if (description.length > 5000) return { error: 'Description must be 5,000 characters or less.' };
+	if (file instanceof File && file.size > 0)
+		return { error: 'Enable JavaScript to upload an image.' };
+	if (pictureKey && removePicture) return { error: 'Choose a new picture or remove the old one.' };
+	const pictureUrl = pictureKey ? listImageUrl(pictureKey) : null;
+	if (pictureKey && !pictureUrl) return { error: 'Invalid uploaded picture.' };
+	return {
+		values: {
+			name,
+			description: description || null,
+			...(pictureKey ? { pictureUrl } : removePicture ? { pictureUrl: null } : {})
+		}
+	};
+}
+export const load: PageServerLoad = async ({ params, locals }) => {
+	if (/^[1-9]\d*$/.test(params.slug)) {
+		const oldId = Number(params.slug);
+		if (Number.isSafeInteger(oldId)) {
+			const oldList = await db.query.lists.findFirst({ where: { id: oldId } });
+			if (oldList) redirect(308, `/lists/${oldList.slug}`);
+		}
+	}
+	const list = await db.query.lists.findFirst({
+		where: { slug: params.slug },
+		with: { items: { orderBy: { id: 'asc' } } }
+	});
+	if (!list) error(404, 'List not found');
+	const completedIds =
+		locals.user && list.isProgress
+			? (
+					await db
+						.select({ itemId: listItemCompletions.itemId })
+						.from(listItemCompletions)
+						.where(eq(listItemCompletions.userId, locals.user.id))
+				).map((row) => row.itemId)
+			: [];
+	const inList = completedIds.filter((id) => list.items.some((item) => item.id === id));
+	return { list, completedIds: inList, checked: inList.length, total: list.items.length };
+};
+export const actions: Actions = {
+	deleteList: async (event) => {
+		requireAdmin(event);
+		const list = await currentList(event.params.slug);
+		const confirmation = String((await event.request.formData()).get('confirmName') ?? '');
+		if (confirmation !== list.name)
+			return fail(400, { message: 'Type the exact list name to confirm deletion.' });
+		const pictures = await db
+			.select({ pictureUrl: listItems.pictureUrl })
+			.from(listItems)
+			.where(eq(listItems.listId, list.id));
+		await db.delete(lists).where(eq(lists.id, list.id));
+		await Promise.all(pictures.map((item) => removeStoredPicture(item.pictureUrl)));
+		redirect(303, '/lists');
+	},
+	updateList: async (event) => {
+		requireAdmin(event);
+		const form = await event.request.formData();
+		const name = String(form.get('name') ?? '').trim();
+		const slug = String(form.get('slug') ?? '')
+			.trim()
+			.toLowerCase();
+		const type = String(form.get('type') ?? '');
+		if (!name || name.length > 200)
+			return fail(400, { message: 'Enter a name of 1–200 characters' });
+		if (type !== 'normal' && type !== 'progress')
+			return fail(400, { message: 'Choose a list type.' });
+		if (!validSlug(slug))
+			return fail(400, { message: 'Use a lowercase slug with letters, numbers, and hyphens.' });
+		const current = await currentList(event.params.slug);
+		const duplicate = await db
+			.select({ id: lists.id })
+			.from(lists)
+			.where(and(eq(lists.slug, slug), ne(lists.id, current.id)));
+		if (duplicate.length) return fail(409, { message: 'That list slug is already in use.' });
+		const [list] = await db
+			.update(lists)
+			.set({ name, slug, isProgress: type === 'progress' })
+			.where(eq(lists.id, current.id))
+			.returning();
+		if (!list) error(404, 'List not found');
+		if (slug !== event.params.slug) redirect(303, `/lists/${slug}`);
+		return { saved: true };
+	},
+	addItem: async (event) => {
+		requireAdmin(event);
+		const fields = itemFields(await event.request.formData());
+		if (fields.error) return fail(400, { message: fields.error });
+		const list = await currentList(event.params.slug);
+		await db.insert(listItems).values({ ...fields.values!, listId: list.id });
+		return { saved: true };
+	},
+	updateItem: async (event) => {
+		requireAdmin(event);
+		const form = await event.request.formData();
+		const id = Number(form.get('itemId'));
+		if (!Number.isSafeInteger(id) || id <= 0) return fail(400, { message: 'Invalid item.' });
+		const fields = itemFields(form);
+		if (fields.error) return fail(400, { message: fields.error });
+		const list = await currentList(event.params.slug);
+		const existing = await db.query.listItems.findFirst({ where: { id, listId: list.id } });
+		if (!existing) error(404, 'Item not found');
+		const [item] = await db
+			.update(listItems)
+			.set(fields.values!)
+			.where(and(eq(listItems.id, id), eq(listItems.listId, list.id)))
+			.returning({ id: listItems.id });
+		if (!item) error(404, 'Item not found');
+		if ('pictureUrl' in fields.values! && fields.values!.pictureUrl !== existing.pictureUrl)
+			await removeStoredPicture(existing.pictureUrl);
+		return { saved: true };
+	},
+	removeItem: async (event) => {
+		requireAdmin(event);
+		const id = Number((await event.request.formData()).get('itemId'));
+		if (!Number.isSafeInteger(id) || id <= 0) return fail(400, { message: 'Invalid item' });
+		const list = await currentList(event.params.slug);
+		const [item] = await db
+			.delete(listItems)
+			.where(and(eq(listItems.id, id), eq(listItems.listId, list.id)))
+			.returning({ pictureUrl: listItems.pictureUrl });
+		if (!item) error(404, 'Item not found');
+		await removeStoredPicture(item.pictureUrl);
+		return { saved: true };
+	},
+	setCompletion: async (event) => {
+		const user = requireUser(event);
+		const list = await currentList(event.params.slug);
+		if (!list.isProgress) return fail(400, { message: 'This is not a progress list.' });
+		const form = await event.request.formData();
+		const id = Number(form.get('itemId'));
+		const completed = form.get('completed');
+		if (!Number.isSafeInteger(id) || id <= 0 || (completed !== 'yes' && completed !== 'no'))
+			return fail(400, { message: 'Invalid progress change.' });
+		const item = await db.query.listItems.findFirst({ where: { id, listId: list.id } });
+		if (!item) error(404, 'Item not found');
+		if (completed === 'yes') {
+			await db
+				.insert(listItemCompletions)
+				.values({ itemId: id, userId: user.id })
+				.onConflictDoNothing();
+		} else {
+			await db
+				.delete(listItemCompletions)
+				.where(and(eq(listItemCompletions.itemId, id), eq(listItemCompletions.userId, user.id)));
+		}
+		return { saved: true };
+	}
+};

src/routes/lists/[slug]/+page.svelte

@@ -0,0 +1,265 @@
+<script lang="ts">
+	import { resolve } from '$app/paths';
+	import { enhance } from '$app/forms';
+	import ListPictureDropzone from '$lib/components/ListPictureDropzone.svelte';
+	import ProgressBar from '$lib/components/ProgressBar.svelte';
+	import type { SubmitFunction } from '@sveltejs/kit';
+	import type { PageProps } from './$types';
+	let { data, form }: PageProps = $props();
+	let completed = $derived(new Set(data.completedIds));
+	let uploadError = $state('');
+	let uploading = $state(false);
+	let managing = $state(false);
+	const uploadPicture: SubmitFunction = async ({ formData, cancel }) => {
+		uploadError = '';
+		const picture = formData.get('picture');
+		formData.delete('picture');
+		if (!(picture instanceof File) || picture.size === 0) return;
+		if (!['image/jpeg', 'image/png', 'image/webp'].includes(picture.type)) {
+			uploadError = 'Choose a JPEG, PNG, or WebP image.';
+			cancel();
+			return;
+		}
+		if (picture.size > 5 * 1024 * 1024) {
+			uploadError = 'Images must be 5 MB or smaller.';
+			cancel();
+			return;
+		}
+		uploading = true;
+		try {
+			const uploadForm = new FormData();
+			uploadForm.set('picture', picture);
+			const uploaded = await fetch(resolve('/lists/api/upload'), {
+				method: 'POST',
+				body: uploadForm
+			});
+			if (!uploaded.ok) throw new Error('Could not upload the image. Please try again.');
+			const { key } = await uploaded.json();
+			formData.set('pictureKey', key);
+		} catch (cause) {
+			uploadError = cause instanceof Error ? cause.message : 'Image upload failed.';
+			cancel();
+		} finally {
+			uploading = false;
+		}
+	};
+</script>
+
+<section class="mx-auto max-w-4xl space-y-6 px-4 py-10 sm:px-6 sm:py-14">
+	<a
+		href={resolve('/lists')}
+		class="text-base text-[var(--site-muted)] hover:text-[var(--site-text)]">← lists</a
+	>
+	<div class="flex flex-wrap items-end justify-between gap-4">
+		<div>
+			<h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">{data.list.name}</h1>
+			<p class="mt-2 text-base text-[var(--site-muted)]">
+				{data.total}
+				{data.total === 1 ? 'item' : 'items'}
+			</p>
+		</div>
+		{#if data.isAdmin}<button
+				type="button"
+				onclick={() => (managing = !managing)}
+				aria-pressed={managing}
+				class="text-base underline underline-offset-4">{managing ? 'done' : 'manage list'}</button
+			>{/if}
+	</div>
+	{#if form?.message}<p role="alert" class="text-red-700">{form.message}</p>{/if}
+	{#if uploadError}<p role="alert" class="text-red-700">{uploadError}</p>{/if}
+	{#if data.list.isProgress}
+		{#if data.user}
+			<div class="border-y border-[var(--site-border)] py-4">
+				<p class="font-medium">
+					{data.checked} of {data.total} checked · {data.total
+						? Math.round((data.checked / data.total) * 100)
+						: 0}%
+				</p>
+				<div class="mt-2">
+					<ProgressBar value={data.checked} max={data.total} label="List progress" small />
+				</div>
+			</div>
+		{:else}
+			<p>
+				<a class="underline" href={resolve(`/login?returnTo=/lists/${data.list.slug}`)}>Log in</a> to
+				save your progress.
+			</p>
+		{/if}
+	{/if}
+	{#if data.isAdmin && managing}
+		<details class="border-b border-[var(--site-border)] pb-5">
+			<summary class="cursor-pointer text-base text-[var(--site-muted)]">list settings</summary>
+			<div class="mt-5 space-y-5">
+				<form
+					method="POST"
+					action="?/updateList"
+					use:enhance
+					class="grid gap-3 sm:grid-cols-2 sm:items-end"
+				>
+					<label
+						>List name<input
+							name="name"
+							value={data.list.name}
+							required
+							maxlength="200"
+							class="block w-full rounded border p-2"
+						/></label
+					>
+					<label
+						>Slug<input
+							name="slug"
+							value={data.list.slug}
+							required
+							maxlength="120"
+							pattern="[a-z0-9]+(-[a-z0-9]+)*"
+							class="block w-full rounded border p-2"
+						/></label
+					>
+					<label
+						>Type<select name="type" class="block w-full rounded border p-2">
+							<option value="normal" selected={!data.list.isProgress}>Normal</option>
+							<option value="progress" selected={data.list.isProgress}>Progress</option>
+						</select></label
+					>
+					<button class="rounded border p-2">Save list</button>
+				</form>
+				<details class="border-t border-[var(--site-border)] pt-4">
+					<summary class="cursor-pointer font-medium text-red-700">Delete this list</summary>
+					<form method="POST" action="?/deleteList" class="mt-3 space-y-3">
+						<p class="text-sm">
+							This deletes the list, its items, and everyone’s saved progress. Type <strong
+								>{data.list.name}</strong
+							> to confirm.
+						</p>
+						<label class="block"
+							>List name<input
+								name="confirmName"
+								required
+								autocomplete="off"
+								class="mt-1 block w-full rounded border p-2"
+							/></label
+						>
+						<button class="rounded bg-red-700 px-4 py-2 text-white">Delete list</button>
+					</form>
+				</details>
+			</div>
+		</details>
+	{/if}
+	<ul class="divide-y divide-[var(--site-border)] border-t border-[var(--site-border)]">
+		{#each data.list.items as item (item.id)}
+			<li class="py-4">
+				<div class="flex items-start gap-4">
+					{#if item.pictureUrl}<img
+							src={item.pictureUrl}
+							alt={item.name}
+							loading="lazy"
+							width="64"
+							height="64"
+							class="h-16 w-16 shrink-0 rounded bg-[var(--site-surface)] object-cover"
+						/>{/if}
+					<div class="min-w-0 flex-1">
+						<p class:line-through={completed.has(item.id)} class="font-medium">{item.name}</p>
+						{#if item.description}<p
+								class="mt-1 whitespace-pre-wrap text-base text-[var(--site-muted)]"
+							>
+								{item.description}
+							</p>{/if}
+					</div>
+					{#if data.list.isProgress && data.user}
+						<form method="POST" action="?/setCompletion" use:enhance class="shrink-0">
+							<input type="hidden" name="itemId" value={item.id} />
+							<input type="hidden" name="completed" value={completed.has(item.id) ? 'no' : 'yes'} />
+							<button
+								class="flex h-8 w-8 items-center justify-center rounded-full border border-[var(--site-border)] text-base"
+								aria-label={`${completed.has(item.id) ? 'Uncheck' : 'Check'} ${item.name}`}
+							>
+								{completed.has(item.id) ? '✓' : ''}
+							</button>
+						</form>
+					{/if}
+				</div>
+				{#if data.isAdmin && managing}
+					<details class="mt-3 border-t border-[var(--site-border)] pt-3">
+						<summary class="cursor-pointer text-base underline">edit item</summary>
+						<form
+							method="POST"
+							action="?/updateItem"
+							enctype="multipart/form-data"
+							use:enhance={uploadPicture}
+							class="mt-3 grid gap-3"
+						>
+							<input type="hidden" name="itemId" value={item.id} />
+							<label
+								>Name<input
+									name="name"
+									value={item.name}
+									required
+									maxlength="500"
+									class="block w-full rounded border p-2"
+								/></label
+							>
+							<ListPictureDropzone label="Replace picture (optional)" />
+							{#if item.pictureUrl}<label class="text-sm"
+									><input type="checkbox" name="removePicture" /> Remove current picture</label
+								>{/if}
+							<label
+								>Description (optional)<textarea
+									name="description"
+									maxlength="5000"
+									rows="3"
+									class="block w-full rounded border p-2">{item.description ?? ''}</textarea
+								></label
+							>
+							<button
+								disabled={uploading}
+								class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
+								>Save item</button
+							>
+						</form>
+						<form method="POST" action="?/removeItem" use:enhance class="mt-3">
+							<input type="hidden" name="itemId" value={item.id} />
+							<button class="text-sm text-red-700 underline" aria-label={`Remove ${item.name}`}
+								>Remove item</button
+							>
+						</form>
+					</details>
+				{/if}
+			</li>
+		{:else}<li class="py-5 text-[var(--site-muted)]">no items yet</li>{/each}
+	</ul>
+	{#if data.isAdmin && managing}
+		<details class="border-t border-[var(--site-border)] pt-5">
+			<summary class="cursor-pointer font-medium">add item</summary>
+			<form
+				method="POST"
+				action="?/addItem"
+				enctype="multipart/form-data"
+				use:enhance={uploadPicture}
+				class="mt-5 grid gap-3"
+			>
+				<label
+					>Name<input
+						name="name"
+						required
+						maxlength="500"
+						class="block w-full rounded border p-2"
+					/></label
+				>
+				<ListPictureDropzone />
+				<label
+					>Description (optional)<textarea
+						name="description"
+						maxlength="5000"
+						rows="3"
+						class="block w-full rounded border p-2"></textarea></label
+				>
+				<button
+					disabled={uploading}
+					class="justify-self-start rounded bg-gray-900 px-4 py-2 text-white disabled:opacity-50"
+					>Add item</button
+				>
+			</form>
+		</details>
+		<noscript><p>Enable JavaScript to upload item pictures.</p></noscript>
+	{/if}
+</section>

src/routes/lists/api/upload/+server.ts

@@ -0,0 +1,24 @@
+import { json, error } from '@sveltejs/kit';
+import { requireAdmin } from '$lib/server/authorization';
+import { uploadImage } from '$lib/server/r2';
+import type { RequestHandler } from './$types';
+
+export const POST: RequestHandler = async (event) => {
+	requireAdmin(event);
+	const form = await event.request.formData().catch(() => null);
+	const picture = form?.get('picture');
+	if (
+		!(picture instanceof File) ||
+		!['image/jpeg', 'image/png', 'image/webp'].includes(picture.type)
+	) {
+		error(400, 'Choose a JPEG, PNG, or WebP image.');
+	}
+	if (!picture.size || picture.size > 5 * 1024 * 1024)
+		error(400, 'Images must be 5 MB or smaller.');
+	try {
+		return json(await uploadImage(picture, 'lists'));
+	} catch (cause) {
+		console.error('List image upload failed', cause);
+		error(503, 'Image storage is unavailable.');
+	}
+};

src/routes/login/+page.server.ts

@@ -0,0 +1,9 @@
+import { authProviders } from '$lib/server/auth';
+import { safeReturnTo } from '$lib/auth-redirect';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+export const load: PageServerLoad = ({ url, locals }) => {
+	const returnTo = safeReturnTo(url.searchParams.get('returnTo'));
+	if (locals.user) redirect(303, returnTo);
+	return { providers: authProviders, returnTo, oauthError: url.searchParams.has('error') };
+};

src/routes/login/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import AuthForm from '$lib/components/AuthForm.svelte';
+	import type { PageProps } from './$types';
+	let { data }: PageProps = $props();
+</script>
+
+<AuthForm mode="login" {...data} />

src/routes/logout/+server.ts

@@ -0,0 +1,15 @@
+import { auth } from '$lib/server/auth';
+import { error, redirect } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
+export const POST: RequestHandler = async ({ request, url, cookies }) => {
+	if (
+		![url.origin, new URL(String(auth.options.baseURL)).origin].includes(
+			request.headers.get('origin') ?? ''
+		)
+	)
+		error(403, 'Invalid origin');
+	await auth.api.signOut({ headers: request.headers });
+	cookies.delete('admin_token', { path: '/' });
+	cookies.delete('token', { path: '/' });
+	redirect(303, '/login');
+};