Scaffold Docker-only Node 24 + TypeScript EJS web backend

.dockerignore

@@ -0,0 +1,6 @@
+.git
+node_modules
+npm-debug.log
+*.log
+.DS_Store
+html-css-foundation

.gitignore

@@ -0,0 +1,4 @@
+.claude
+.DS_Store
+*.log
+node_modules

.npmrc

@@ -0,0 +1,2 @@
+; Pin exact versions on install — `npm install <pkg>` saves "1.2.3", not "^1.2.3".
+save-exact=true

AGENTS.md

@@ -0,0 +1,38 @@
+# AGENTS.md
+
+Guidance for AI agents and contributors working in this repo. Read `README.md` for
+commands and layout.
+
+## Project priorities (do not erode)
+
+1. **Simplicity** — prefer the smallest, most readable solution.
+2. **Few dependencies** — the only runtime dep is `ejs`. Prefer the Node standard
+   library. Justify any new dependency; do not add frameworks.
+3. **Strict TypeScript** — `tsconfig.json` is strict (incl. `noUncheckedIndexedAccess`,
+   `exactOptionalPropertyTypes`, `verbatimModuleSyntax`). Keep it that way.
+
+## Docker only — no host tooling
+
+**Everything** (install, typecheck, test, run, build, deploy) goes through Docker /
+Docker Compose. **Never run `node`, `npm`, or `tsc` on the host.**
+
+```bash
+docker compose up                                # dev server, live reload
+docker compose run --rm web npm run typecheck    # strict type check
+docker compose run --rm web npm test             # tests
+docker compose -f docker-compose.yml up --build -d   # production
+```
+
+## Rules
+
+- Node 24 runs `.ts` directly (type stripping). Keep all TypeScript **erasable**
+  (`erasableSyntaxOnly` is on): no `enum`, `namespace`, parameter properties, or
+  decorators. Import local modules with their `.ts` extension.
+- **No build step** and no compiled artifacts — do not add a bundler or `tsc` emit.
+- Before finishing a change, run the typecheck and tests above; both must pass.
+- Tests use the built-in `node --test` runner — no test framework dependency.
+- English everywhere. Keep code comments short and information-dense.
+- Pin all dependencies and Docker images to exact, human-readable **semantic
+  versions** — never ranges (`^`, `~`) and never digests/hashes. npm deps are kept
+  exact by `.npmrc` (`save-exact=true`) + `npm ci`; the base image by tag (e.g.
+  `node:24.16.0-alpine3.24`).

Dockerfile

@@ -0,0 +1,16 @@
+# Node 24 runs TypeScript directly (type stripping) — no build step.
+# Pinned to an exact, human-readable version (node / alpine).
+FROM node:24.16.0-alpine3.24
+
+WORKDIR /app
+
+# Reproducible install from the committed lockfile. Dev deps (typescript, types)
+# are kept so `npm run typecheck` / `npm test` work in the same image.
+COPY package.json package-lock.json .npmrc ./
+RUN npm ci
+
+COPY . .
+
+ENV PORT=3000
+EXPOSE 3000
+CMD ["node", "src/server.ts"]

README.md

@@ -0,0 +1,66 @@
+# Plainpages
+
+A minimal **Node.js 24 + TypeScript** web backend that serves server-rendered HTML
+(via **EJS** templates), CSS, and static files.
+
+Priorities: **simplicity, few dependencies, strict TypeScript type checking.**
+Development and deployment are **entirely Docker / Docker Compose based — no other
+tooling is required** (no local Node, npm, or `tsc`).
+
+The only runtime dependency is `ejs`. Node 24 runs the TypeScript sources directly
+(type stripping), so there is **no build step** and no compiled output.
+
+## Requirements
+
+- Docker
+- Docker Compose
+
+That's it. Do not install or run Node/npm on the host — use the commands below.
+
+## Development
+
+```bash
+docker compose up            # http://localhost:3000, live reload via `node --watch`
+```
+
+`docker compose up` merges `compose.override.yml`, which mounts the source
+and restarts the server on change.
+
+## Type check & tests
+
+```bash
+docker compose run --rm web npm run typecheck   # strict tsc --noEmit
+docker compose run --rm web npm test            # node --test
+```
+
+## Production / deployment
+
+```bash
+docker compose -f compose.yml up --build -d   # base config only, no source mount
+```
+
+## Layout
+
+```
+src/server.ts   Entry point — starts the HTTP server (reads PORT, default 3000)
+src/app.ts      Request routing + EJS rendering
+src/static.ts   Static file serving with path-traversal protection
+views/          EJS templates (index, 404, partials/)
+public/         Static assets served under /public/ (css/, favicon, robots.txt)
+```
+
+## Extending
+
+- **New page:** add a route in `src/app.ts` and a template in `views/`.
+- **Static asset:** drop it in `public/`; it is served at `/public/<path>`.
+- **New dependency:** `docker compose run --rm web npm install <pkg>` (updates
+  `package.json` + `package-lock.json`), then rebuild with `docker compose build`.
+  Keep dependencies minimal — prefer the Node standard library.
+
+All versions are pinned to **exact, human-readable semantic versions** (no ranges,
+no digests): deps via `.npmrc` (`save-exact=true`) and the committed lockfile
+(`npm ci`), and the Node base image by tag in the `Dockerfile`
+(e.g. `node:24.16.0-alpine3.24`).
+
+`html-css-foundation/` holds the raw HTML/CSS design reference; it is not served and
+is meant to be converted into EJS templates and `public/` assets over time.

compose.override.yml

@@ -0,0 +1,10 @@
+# Development overrides, merged automatically by `docker compose up`.
+# Mounts the source for live editing and restarts on change via `node --watch`.
+services:
+  web:
+    command: node --watch src/server.ts
+    environment:
+      NODE_ENV: development
+    volumes:
+      - .:/app
+      - /app/node_modules

compose.yml

@@ -0,0 +1,10 @@
+# Base / production config. Run alone with: docker compose -f docker-compose.yml up
+# Plain `docker compose up` also merges docker-compose.override.yml for development.
+services:
+  web:
+    build: .
+    ports:
+      - "3000:3000"
+    environment:
+      NODE_ENV: production
+    restart: unless-stopped

html-css-foundation/App Shell.html

@@ -0,0 +1,735 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>App Shell — Template</title>
+<link rel="stylesheet" href="styles.css">
+</head>
+<body>
+
+<!-- ============ ICON SPRITE — Lucide (https://lucide.dev, ISC license) ============
+     Official Lucide paths, inlined as <symbol> so usage stays zero-JS:
+     <svg class="ico"><use href="#i-name"/></svg>. Stroke + currentColor are
+     applied via the .ico class, matching Lucide's 24-grid / round-cap style. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <symbol id="i-chev" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
+  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></symbol>
+  <symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></symbol>
+  <symbol id="i-menu" viewBox="0 0 24 24"><line x1="4" x2="20" y1="6" y2="6"/><line x1="4" x2="20" y1="12" y2="12"/><line x1="4" x2="20" y1="18" y2="18"/></symbol>
+  <symbol id="i-kebab" viewBox="0 0 24 24"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></symbol>
+  <symbol id="i-sort" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></symbol>
+  <symbol id="i-up" viewBox="0 0 24 24"><path d="m18 15-6-6-6 6"/></symbol>
+  <symbol id="i-cal" viewBox="0 0 24 24"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></symbol>
+  <symbol id="i-sliders" viewBox="0 0 24 24"><line x1="21" x2="14" y1="4" y2="4"/><line x1="10" x2="3" y1="4" y2="4"/><line x1="21" x2="12" y1="12" y2="12"/><line x1="8" x2="3" y1="12" y2="12"/><line x1="21" x2="16" y1="20" y2="20"/><line x1="12" x2="3" y1="20" y2="20"/><line x1="14" x2="14" y1="2" y2="6"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="16" x2="16" y1="18" y2="22"/></symbol>
+  <symbol id="i-cols" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/><path d="M15 3v18"/></symbol>
+  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
+  <symbol id="i-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/></symbol>
+  <symbol id="i-grid" viewBox="0 0 24 24"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></symbol>
+  <symbol id="i-box" viewBox="0 0 24 24"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></symbol>
+  <symbol id="i-layers" viewBox="0 0 24 24"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></symbol>
+  <symbol id="i-chart" viewBox="0 0 24 24"><path d="M3 3v18h18"/><path d="M18 17V9"/><path d="M13 17V5"/><path d="M8 17v-3"/></symbol>
+  <symbol id="i-users" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></symbol>
+  <symbol id="i-gear" viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></symbol>
+  <symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="i-bell" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></symbol>
+  <symbol id="i-edit" viewBox="0 0 24 24"><path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z"/></symbol>
+  <symbol id="i-copy" viewBox="0 0 24 24"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></symbol>
+  <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></symbol>
+  <symbol id="i-logout" viewBox="0 0 24 24"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/></symbol>
+  <symbol id="i-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20"/><path d="M2 12h20"/></symbol>
+</svg>
+
+<!-- nav-toggle drives the mobile overlay (pure CSS) -->
+<input type="checkbox" id="nav-toggle" aria-hidden="true" tabindex="-1">
+
+<div class="app">
+
+  <!-- =================== SIDEBAR =================== -->
+  <aside class="sidebar" aria-label="Primary">
+    <div class="brand">
+      <span class="brand-mark"><svg class="ico ico-sm"><use href="#i-box"/></svg></span>
+      <span class="brand-name">Console</span>
+      <span class="brand-sub">v0.1</span>
+    </div>
+
+    <!-- ====================================================
+         UNIFIED NAV TREE — every item uses the SAME node markup.
+           HEADER  → node has a <details class="nav-disc"> toggle + <ul class="nav-children">
+           LEAF    → node has a <span class="nav-spacer"> instead of a toggle
+           CLICKABLE → label is <a class="nav-self" href>
+           STATIC    → label is <span class="nav-self">
+         Mix freely: a node can be header+clickable, header+static,
+         leaf+clickable, or leaf+static. Workspace / Insights below are
+         simply header + static nodes — nothing special about them.
+    ==================================================== -->
+    <nav class="nav" aria-label="Main navigation">
+      <ul class="nav-tree">
+
+        <!-- leaf + clickable -->
+        <li class="nav-node">
+          <div class="nav-row">
+            <span class="nav-spacer" aria-hidden="true"></span>
+            <a class="nav-self" href="#"><svg class="ico"><use href="#i-grid"/></svg><span class="nav-label">Overview</span></a>
+          </div>
+        </li>
+
+        <!-- header + STATIC (was the "Workspace" group label) -->
+        <li class="nav-node">
+          <div class="nav-row">
+            <details class="nav-disc" open>
+              <summary class="nav-tog" aria-label="Toggle Workspace"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+            </details>
+            <span class="nav-self"><span class="nav-label">Workspace</span></span>
+          </div>
+          <ul class="nav-children">
+
+            <!-- header + CLICKABLE -->
+            <li class="nav-node">
+              <div class="nav-row">
+                <details class="nav-disc" open>
+                  <summary class="nav-tog" aria-label="Toggle Directory"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                </details>
+                <a class="nav-self" href="#"><svg class="ico"><use href="#i-users"/></svg><span class="nav-label">Directory</span><span class="nav-count">4</span></a>
+              </div>
+              <ul class="nav-children">
+
+                <!-- leaf + clickable (active) -->
+                <li class="nav-node">
+                  <div class="nav-row">
+                    <span class="nav-spacer" aria-hidden="true"></span>
+                    <a class="nav-self" href="#" aria-current="page"><span class="nav-label">People</span><span class="nav-count">1,284</span></a>
+                  </div>
+                </li>
+                <li class="nav-node">
+                  <div class="nav-row">
+                    <span class="nav-spacer" aria-hidden="true"></span>
+                    <a class="nav-self" href="#"><span class="nav-label">Teams</span></a>
+                  </div>
+                </li>
+
+                <!-- header + CLICKABLE -->
+                <li class="nav-node">
+                  <div class="nav-row">
+                    <details class="nav-disc" open>
+                      <summary class="nav-tog" aria-label="Toggle Roles &amp; Access"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                    </details>
+                    <a class="nav-self" href="#"><span class="nav-label">Roles &amp; Access</span></a>
+                  </div>
+                  <ul class="nav-children">
+                    <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Roles</span></a></div></li>
+                    <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Permission sets</span></a></div></li>
+
+                    <!-- header + CLICKABLE (level 4) -->
+                    <li class="nav-node">
+                      <div class="nav-row">
+                        <details class="nav-disc" open>
+                          <summary class="nav-tog" aria-label="Toggle Policies"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                        </details>
+                        <a class="nav-self" href="#"><span class="nav-label">Policies</span></a>
+                      </div>
+                      <ul class="nav-children">
+                        <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Password policy</span></a></div></li>
+                        <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Session limits</span></a></div></li>
+                      </ul>
+                    </li>
+
+                    <!-- header + STATIC (level 4) -->
+                    <li class="nav-node">
+                      <div class="nav-row">
+                        <details class="nav-disc">
+                          <summary class="nav-tog" aria-label="Toggle Scopes"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                        </details>
+                        <span class="nav-self"><span class="nav-label">Scopes</span></span>
+                      </div>
+                      <ul class="nav-children">
+                        <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Read scopes</span></a></div></li>
+                        <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Write scopes</span></a></div></li>
+                      </ul>
+                    </li>
+                  </ul>
+                </li>
+
+                <!-- header + STATIC -->
+                <li class="nav-node">
+                  <div class="nav-row">
+                    <details class="nav-disc">
+                      <summary class="nav-tog" aria-label="Toggle Segments"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                    </details>
+                    <span class="nav-self"><span class="nav-label">Segments</span></span>
+                  </div>
+                  <ul class="nav-children">
+                    <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Active users</span></a></div></li>
+                    <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Invited</span></a></div></li>
+                  </ul>
+                </li>
+              </ul>
+            </li>
+
+            <!-- header + STATIC -->
+            <li class="nav-node">
+              <div class="nav-row">
+                <details class="nav-disc" open>
+                  <summary class="nav-tog" aria-label="Toggle Resources"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                </details>
+                <span class="nav-self"><svg class="ico"><use href="#i-box"/></svg><span class="nav-label">Resources</span></span>
+              </div>
+              <ul class="nav-children">
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Projects</span></a></div></li>
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Environments</span></a></div></li>
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">API keys</span></a></div></li>
+                <!-- leaf + STATIC (no link → not a navigation target) -->
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><span class="nav-self"><span class="nav-label">Webhooks (soon)</span></span></div></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+
+        <!-- header + STATIC (was the "Insights" group label) -->
+        <li class="nav-node">
+          <div class="nav-row">
+            <details class="nav-disc" open>
+              <summary class="nav-tog" aria-label="Toggle Insights"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+            </details>
+            <span class="nav-self"><span class="nav-label">Insights</span></span>
+          </div>
+          <ul class="nav-children">
+            <li class="nav-node">
+              <div class="nav-row">
+                <span class="nav-spacer" aria-hidden="true"></span>
+                <a class="nav-self" href="#"><svg class="ico"><use href="#i-chart"/></svg><span class="nav-label">Reports</span></a>
+              </div>
+            </li>
+
+            <!-- header + CLICKABLE -->
+            <li class="nav-node">
+              <div class="nav-row">
+                <details class="nav-disc">
+                  <summary class="nav-tog" aria-label="Toggle Activity"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                </details>
+                <a class="nav-self" href="#"><svg class="ico"><use href="#i-bell"/></svg><span class="nav-label">Activity</span></a>
+              </div>
+              <ul class="nav-children">
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Audit log</span></a></div></li>
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Notifications</span></a></div></li>
+              </ul>
+            </li>
+
+            <!-- header + STATIC -->
+            <li class="nav-node">
+              <div class="nav-row">
+                <details class="nav-disc">
+                  <summary class="nav-tog" aria-label="Toggle Catalog"><svg class="ico chev"><use href="#i-chev"/></svg></summary>
+                </details>
+                <span class="nav-self"><svg class="ico"><use href="#i-layers"/></svg><span class="nav-label">Catalog</span></span>
+              </div>
+              <ul class="nav-children">
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Items</span></a></div></li>
+                <li class="nav-node"><div class="nav-row"><span class="nav-spacer" aria-hidden="true"></span><a class="nav-self" href="#"><span class="nav-label">Categories</span></a></div></li>
+              </ul>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+
+    <!-- ---- sidebar footer: theme + profile + settings ---- -->
+    <div class="side-footer">
+      <!-- theme switcher: Light / Auto / Dark (Auto = follow system) -->
+      <div class="theme-switch" role="radiogroup" aria-label="Color theme">
+        <label>
+          <input type="radio" name="theme" id="theme-light">
+          <span>Light</span>
+        </label>
+        <label>
+          <input type="radio" name="theme" id="theme-auto" checked>
+          <span>Auto</span>
+        </label>
+        <label>
+          <input type="radio" name="theme" id="theme-dark">
+          <span>Dark</span>
+        </label>
+      </div>
+
+      <div class="footer-actions">
+        <!-- profile (opens a menu) -->
+        <details class="menu" style="flex:1 1 auto">
+          <summary class="profile">
+            <span class="avatar" aria-hidden="true">AK</span>
+            <span class="profile-meta">
+              <span class="profile-name">Avery Kline</span>
+              <span class="profile-mail"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1f7e697a6d665f7e7c727a317670">[email&#160;protected]</a></span>
+            </span>
+          </summary>
+          <div class="menu-pop left" style="bottom:calc(100% + 6px); top:auto; min-width:220px">
+            <div class="menu-head">Signed in as Avery</div>
+            <button class="menu-item"><svg class="ico"><use href="#i-user"/></svg>Profile</button>
+            <button class="menu-item"><svg class="ico"><use href="#i-globe"/></svg>Language — English</button>
+            <button class="menu-item"><svg class="ico"><use href="#i-bell"/></svg>Notifications</button>
+            <div class="menu-sep"></div>
+            <button class="menu-item danger"><svg class="ico"><use href="#i-logout"/></svg>Sign out</button>
+          </div>
+        </details>
+
+        <!-- settings -->
+        <details class="menu">
+          <summary class="btn icon-btn" aria-label="Settings">
+            <svg class="ico"><use href="#i-gear"/></svg>
+          </summary>
+          <div class="menu-pop" style="bottom:calc(100% + 6px); top:auto">
+            <div class="menu-head">Settings</div>
+            <button class="menu-item"><svg class="ico"><use href="#i-gear"/></svg>Preferences</button>
+            <button class="menu-item"><svg class="ico"><use href="#i-users"/></svg>Members</button>
+            <button class="menu-item"><svg class="ico"><use href="#i-globe"/></svg>Region &amp; language</button>
+          </div>
+        </details>
+      </div>
+    </div>
+  </aside>
+
+  <!-- scrim closes the mobile menu (label toggles the checkbox) -->
+  <label class="scrim" for="nav-toggle" aria-label="Close menu"></label>
+
+  <!-- =================== CONTENT =================== -->
+  <main class="content">
+
+    <!-- topbar -->
+    <header class="topbar">
+      <label class="btn icon-btn hamburger" for="nav-toggle" aria-label="Open menu">
+        <svg class="ico"><use href="#i-menu"/></svg>
+      </label>
+      <div>
+        <div class="page-title">People</div>
+      </div>
+      <nav class="crumbs" aria-label="Breadcrumb">
+        <a href="#">Directory</a><span class="sep">/</span><span>People</span>
+      </nav>
+      <div class="topbar-spacer"></div>
+      <button class="btn"><svg class="ico ico-sm"><use href="#i-download"/></svg>Export</button>
+      <button class="btn btn-primary"><svg class="ico ico-sm"><use href="#i-plus"/></svg>Add person</button>
+    </header>
+
+    <!-- ============ FILTER BAR ============
+         A real GET form: selections submit as query params (?q=…&status=…)
+         so filtering is server-side and works with zero JavaScript.
+         Every control has a name + associated label; related controls are
+         grouped in <fieldset>/<legend>; Apply submits, Reset clears. -->
+    <form class="filters" method="get" aria-label="Filter people">
+      <!-- row 1: search + status + team + column/extra menus -->
+      <div class="filter-row">
+        <label class="search">
+          <span class="sr-only">Search people</span>
+          <svg class="ico ico-sm" aria-hidden="true"><use href="#i-search"/></svg>
+          <input type="search" name="q" placeholder="Search people…">
+        </label>
+
+        <fieldset class="filter-field">
+          <legend class="sr-only">Status</legend>
+          <div class="segmented">
+            <label><input type="radio" name="status" value="all" checked><span>All</span><span class="seg-count">1,284</span></label>
+            <label><input type="radio" name="status" value="active"><span>Active</span></label>
+            <label><input type="radio" name="status" value="archived"><span>Archived</span></label>
+          </div>
+        </fieldset>
+
+        <span class="filter">
+          <label class="sr-only" for="f-team">Team</label>
+          <span class="select">
+            <select id="f-team" name="team">
+              <option value="">All teams</option>
+              <option value="engineering">Engineering</option>
+              <option value="design">Design</option>
+              <option value="operations">Operations</option>
+              <option value="sales">Sales</option>
+            </select>
+          </span>
+        </span>
+
+        <div class="spacer"></div>
+
+        <!-- column visibility (display preference, also persisted via the form) -->
+        <details class="menu">
+          <summary class="btn"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-cols"/></svg>Columns</summary>
+          <div class="menu-pop">
+            <fieldset class="menu-field">
+              <legend class="menu-head">Visible columns</legend>
+              <label class="menu-check"><input type="checkbox" name="col" value="name" checked>Name</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="email" checked>Email</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="role" checked>Role</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="team" checked>Team</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="status" checked>Status</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="last_active" checked>Last active</label>
+              <label class="menu-check"><input type="checkbox" name="col" value="created">Created</label>
+            </fieldset>
+          </div>
+        </details>
+
+        <details class="menu">
+          <summary class="btn"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-sliders"/></svg>More filters</summary>
+          <div class="menu-pop" style="min-width:240px">
+            <fieldset class="menu-field">
+              <legend class="menu-head">Role</legend>
+              <label class="menu-check"><input type="radio" name="role" value="" checked>Any role</label>
+              <label class="menu-check"><input type="radio" name="role" value="admin">Admin</label>
+              <label class="menu-check"><input type="radio" name="role" value="member">Member</label>
+              <label class="menu-check"><input type="radio" name="role" value="viewer">Viewer</label>
+            </fieldset>
+            <div class="menu-sep"></div>
+            <fieldset class="menu-field">
+              <legend class="menu-head">Flags</legend>
+              <label class="menu-check"><input type="checkbox" name="flag" value="2fa">2FA enabled</label>
+              <label class="menu-check"><input type="checkbox" name="flag" value="pending">Pending invite</label>
+            </fieldset>
+          </div>
+        </details>
+      </div>
+
+      <!-- row 2: tags + joined date range -->
+      <div class="filter-row">
+        <fieldset class="filter-field">
+          <legend class="sr-only">Tags</legend>
+          <span class="filter-legend" aria-hidden="true">Tags</span>
+          <div class="chips">
+            <label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="engineering" checked>Engineering</label>
+            <label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="design">Design</label>
+            <label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="oncall" checked>On-call</label>
+            <label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="contractor">Contractor</label>
+            <label class="chip"><span class="chip-dot" aria-hidden="true"></span><input type="checkbox" name="tag" value="remote">Remote</label>
+          </div>
+        </fieldset>
+
+        <div class="spacer"></div>
+
+        <fieldset class="filter-field">
+          <legend class="sr-only">Joined</legend>
+          <span class="filter-legend" aria-hidden="true">Joined</span>
+          <div class="daterange">
+            <svg class="ico ico-sm" aria-hidden="true"><use href="#i-cal"/></svg>
+            <label class="sr-only" for="f-from">Joined from</label>
+            <input type="date" id="f-from" name="joined_from" value="2026-01-01">
+            <span class="to" aria-hidden="true">to</span>
+            <label class="sr-only" for="f-to">Joined to</label>
+            <input type="date" id="f-to" name="joined_to" value="2026-06-14">
+          </div>
+        </fieldset>
+      </div>
+
+      <!-- row 3: applied filters (server-rendered) + form actions -->
+      <div class="filter-row filter-foot">
+        <div class="active-pills" aria-label="Applied filters">
+          <span class="filter-legend">Applied</span>
+          <span class="pill"><b>Team:</b> Engineering <a class="pill-x" href="?tag=oncall&amp;joined_from=2026-01-01" aria-label="Remove Team filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
+          <span class="pill"><b>Tag:</b> On-call <a class="pill-x" href="?team=engineering&amp;joined_from=2026-01-01" aria-label="Remove On-call filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
+          <span class="pill"><b>Joined:</b> 2026 <a class="pill-x" href="?team=engineering&amp;tag=oncall" aria-label="Remove Joined filter"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-x"/></svg></a></span>
+          <a class="pill-clear" href="?">Clear all</a>
+        </div>
+
+        <div class="spacer"></div>
+
+        <div class="filter-actions">
+          <button type="reset" class="btn">Reset</button>
+          <button type="submit" class="btn btn-primary"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-search"/></svg>Apply filters</button>
+        </div>
+      </div>
+    </form>
+
+    <!-- ============ TABLE ============ -->
+    <div class="table-wrap">
+      <table class="table">
+        <caption class="sr-only">People in the directory</caption>
+        <thead>
+          <tr>
+            <th class="col-check" scope="col">
+              <input type="checkbox" aria-label="Select all rows">
+            </th>
+            <th scope="col" aria-sort="ascending">
+              <button class="th-sort">Name <svg class="ico ico-sm sort-ico"><use href="#i-up"/></svg></button>
+            </th>
+            <th scope="col">
+              <button class="th-sort">Email <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
+            </th>
+            <th scope="col">
+              <button class="th-sort">Role <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
+            </th>
+            <th scope="col">Team</th>
+            <th scope="col">Status</th>
+            <th scope="col">
+              <button class="th-sort">Last active <svg class="ico ico-sm sort-ico"><use href="#i-sort"/></svg></button>
+            </th>
+            <th class="col-actions" scope="col"><span class="sr-only">Actions</span></th>
+          </tr>
+        </thead>
+        <tbody>
+          <!-- row template, repeated -->
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Mara Delgado"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">MD</span><span class="cell-strong">Mara Delgado</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80ede1f2e1aee4e5ece7e1e4efc0e1e3ede5aee9ef">[email&#160;protected]</a></td>
+            <td>Admin</td>
+            <td class="cell-muted">Engineering</td>
+            <td><span class="badge pos"><span class="dot"></span>Active</span></td>
+            <td class="cell-muted">2 min ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Mara Delgado"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Soren Vance"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">SV</span><span class="cell-strong">Soren Vance</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b3824392e25653d2a25282e0b2a28262e652224">[email&#160;protected]</a></td>
+            <td>Member</td>
+            <td class="cell-muted">Design</td>
+            <td><span class="badge warn"><span class="dot"></span>Idle</span></td>
+            <td class="cell-muted">3 hours ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Soren Vance"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Priya Nair"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">PN</span><span class="cell-strong">Priya Nair</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f2f2d36263e71313e362d1f3e3c323a713630">[email&#160;protected]</a></td>
+            <td>Admin</td>
+            <td class="cell-muted">Operations</td>
+            <td><span class="badge pos"><span class="dot"></span>Active</span></td>
+            <td class="cell-muted">just now</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Priya Nair"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Eli Brandt"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">EB</span><span class="cell-strong">Eli Brandt</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b0d5dcd99ed2c2d1ded4c4f0d1d3ddd59ed9df">[email&#160;protected]</a></td>
+            <td>Viewer</td>
+            <td class="cell-muted">Sales</td>
+            <td><span class="badge neg"><span class="dot"></span>Suspended</span></td>
+            <td class="cell-muted">6 days ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Eli Brandt"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Tomas Lindqvist"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">TL</span><span class="cell-strong">Tomas Lindqvist</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9adb6b4b8aaf7b599b8bab4bcf7b0b6">[email&#160;protected]</a></td>
+            <td>Member</td>
+            <td class="cell-muted">Engineering</td>
+            <td><span class="badge info"><span class="dot"></span>Invited</span></td>
+            <td class="cell-muted">—</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Tomas Lindqvist"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Hana Osei"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">HO</span><span class="cell-strong">Hana Osei</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e28a838c83cc8d91878ba283818f87cc8b8d">[email&#160;protected]</a></td>
+            <td>Member</td>
+            <td class="cell-muted">Design</td>
+            <td><span class="badge pos"><span class="dot"></span>Active</span></td>
+            <td class="cell-muted">21 min ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Hana Osei"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Rafael Costa"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">RC</span><span class="cell-strong">Rafael Costa</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd8f9c9b9c9891d39e928e899cbd9c9e9098d39492">[email&#160;protected]</a></td>
+            <td>Admin</td>
+            <td class="cell-muted">Operations</td>
+            <td><span class="badge warn"><span class="dot"></span>Idle</span></td>
+            <td class="cell-muted">1 hour ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Rafael Costa"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Wen Li"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">WL</span><span class="cell-strong">Wen Li</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dfa8bab1f1b3b69fbebcb2baf1b6b0">[email&#160;protected]</a></td>
+            <td>Viewer</td>
+            <td class="cell-muted">Sales</td>
+            <td><span class="badge pos"><span class="dot"></span>Active</span></td>
+            <td class="cell-muted">44 min ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Wen Li"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Nadia Farouk"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">NF</span><span class="cell-strong">Nadia Farouk</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4826292c2129662e293a273d2308292b252d662127">[email&#160;protected]</a></td>
+            <td>Member</td>
+            <td class="cell-muted">Engineering</td>
+            <td><span class="badge neg"><span class="dot"></span>Suspended</span></td>
+            <td class="cell-muted">12 days ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Nadia Farouk"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Otto Berg"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">OB</span><span class="cell-strong">Otto Berg</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4a253e3e2564282f382d0a2b29272f642325">[email&#160;protected]</a></td>
+            <td>Member</td>
+            <td class="cell-muted">Design</td>
+            <td><span class="badge info"><span class="dot"></span>Invited</span></td>
+            <td class="cell-muted">—</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Otto Berg"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Greta Holm"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">GH</span><span class="cell-strong">Greta Holm</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2047524554410e484f4c4d6041434d450e494f">[email&#160;protected]</a></td>
+            <td>Admin</td>
+            <td class="cell-muted">Operations</td>
+            <td><span class="badge pos"><span class="dot"></span>Active</span></td>
+            <td class="cell-muted">8 min ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Greta Holm"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+          <tr>
+            <td class="col-check"><input type="checkbox" class="row-select" aria-label="Select Yusuf Demir"></td>
+            <td><span class="cell-user"><span class="avatar" aria-hidden="true">YD</span><span class="cell-strong">Yusuf Demir</span></span></td>
+            <td class="cell-muted cell-mono"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2059555355460e44454d49526041434d450e494f">[email&#160;protected]</a></td>
+            <td>Viewer</td>
+            <td class="cell-muted">Sales</td>
+            <td><span class="badge warn"><span class="dot"></span>Idle</span></td>
+            <td class="cell-muted">5 hours ago</td>
+            <td class="col-actions">
+              <details class="menu kebab">
+                <summary aria-label="Row actions for Yusuf Demir"><svg class="ico ico-sm"><use href="#i-kebab"/></svg></summary>
+                <div class="menu-pop">
+                  <button class="menu-item"><svg class="ico"><use href="#i-edit"/></svg>Edit</button>
+                  <button class="menu-item"><svg class="ico"><use href="#i-copy"/></svg>Duplicate</button>
+                  <div class="menu-sep"></div>
+                  <button class="menu-item danger"><svg class="ico"><use href="#i-trash"/></svg>Delete</button>
+                </div>
+              </details>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <!-- ============ PAGINATION ============ -->
+    <footer class="pager">
+      <span>1–12 of <b>1,284</b></span>
+      <div class="pager-rows">
+        <label for="rows">Rows</label>
+        <div class="select">
+          <select id="rows" aria-label="Rows per page">
+            <option>12</option><option>25</option><option>50</option><option>100</option>
+          </select>
+        </div>
+      </div>
+      <div class="spacer"></div>
+      <nav class="page-nums" aria-label="Pagination">
+        <button class="page-btn" disabled aria-label="Previous page"><svg class="ico ico-sm" style="transform:rotate(180deg)"><use href="#i-chev"/></svg></button>
+        <button class="page-btn" aria-current="page">1</button>
+        <button class="page-btn">2</button>
+        <button class="page-btn">3</button>
+        <button class="page-btn">…</button>
+        <button class="page-btn">107</button>
+        <button class="page-btn" aria-label="Next page"><svg class="ico ico-sm"><use href="#i-chev"/></svg></button>
+      </nav>
+    </footer>
+
+  </main>
+</div>
+
+<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
+</html>

html-css-foundation/Auth.html

@@ -0,0 +1,216 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Sign in — Console</title>
+<link rel="stylesheet" href="styles.css">
+<link rel="stylesheet" href="auth.css">
+</head>
+<body>
+
+<!-- ============ ICON SPRITE — Lucide (ISC) ============ -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
+  <symbol id="i-box" viewBox="0 0 24 24"><path d="m7.5 4.27 9 5.15"/><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></symbol>
+  <symbol id="i-mail" viewBox="0 0 24 24"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></symbol>
+  <symbol id="i-lock" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
+  <symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
+  <symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></symbol>
+  <symbol id="i-shield" viewBox="0 0 24 24"><path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"/></symbol>
+  <symbol id="i-check-circle" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></symbol>
+  <symbol id="i-alert" viewBox="0 0 24 24"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></symbol>
+</svg>
+
+<main class="auth-stage">
+  <div class="auth">
+
+    <div class="auth-brand">
+      <span class="brand-mark"><svg class="ico ico-sm"><use href="#i-box"/></svg></span>
+      <span class="brand-name">Console</span>
+    </div>
+
+    <!-- =================== LOGIN =================== -->
+    <section id="login" class="auth-view" aria-labelledby="login-title">
+      <form class="auth-card" method="post" action="#">
+        <div class="auth-head">
+          <h1 id="login-title">Sign in</h1>
+          <p class="auth-sub">Welcome back. Enter your details to continue.</p>
+        </div>
+
+        <!-- SSO section (toggle on/off) -->
+        <div class="sso" aria-label="Single sign-on options">
+          <ul class="sso-list">
+            <!-- add a provider: copy one <li> and change the logo + label -->
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">G</span><span class="sso-label">Continue with Google</span></button></li>
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">M</span><span class="sso-label">Continue with Microsoft</span></button></li>
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true"><svg class="ico ico-sm"><use href="#i-shield"/></svg></span><span class="sso-label">Continue with SAML SSO</span></button></li>
+          </ul>
+          <div class="auth-divider">or</div>
+        </div>
+
+        <div class="auth-form">
+          <div class="field">
+            <label for="login-email">Email</label>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
+              <input class="input has-ico" id="login-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" required>
+            </div>
+          </div>
+
+          <div class="field">
+            <div class="field-top">
+              <label for="login-password">Password</label>
+              <a class="field-link" href="#forgot">Forgot password?</a>
+            </div>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-lock"/></svg>
+              <input class="input has-ico" id="login-password" name="password" type="password" autocomplete="current-password" placeholder="••••••••" required>
+            </div>
+          </div>
+
+          <label class="check remember"><input type="checkbox" name="remember" value="1"> Keep me signed in</label>
+
+          <button type="submit" class="btn btn-primary btn-block">Sign in</button>
+        </div>
+
+        <p class="auth-alt">Don't have an account? <a href="#register">Create one</a></p>
+      </form>
+    </section>
+
+    <!-- =================== REGISTER =================== -->
+    <section id="register" class="auth-view" aria-labelledby="register-title">
+      <form class="auth-card" method="post" action="#">
+        <div class="auth-head">
+          <h1 id="register-title">Create account</h1>
+          <p class="auth-sub">Get started — it only takes a minute.</p>
+        </div>
+
+        <div class="sso" aria-label="Single sign-on options">
+          <ul class="sso-list">
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">G</span><span class="sso-label">Sign up with Google</span></button></li>
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true">M</span><span class="sso-label">Sign up with Microsoft</span></button></li>
+            <li><button type="button" class="sso-btn"><span class="sso-logo" aria-hidden="true"><svg class="ico ico-sm"><use href="#i-shield"/></svg></span><span class="sso-label">Sign up with SAML SSO</span></button></li>
+          </ul>
+          <div class="auth-divider">or</div>
+        </div>
+
+        <div class="auth-form">
+          <div class="register-alert alert alert-neg" role="alert">
+            <svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
+            <div class="alert-body"><strong>Please fix the highlighted fields</strong><span>A couple of details need your attention before we can create your account.</span></div>
+          </div>
+          <div class="field">
+            <div class="field-top">
+              <label for="reg-name">Name</label>
+              <span class="optional">Optional</span>
+            </div>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-user"/></svg>
+              <input class="input has-ico" id="reg-name" name="name" type="text" autocomplete="name" placeholder="Avery Kline">
+            </div>
+          </div>
+
+          <div class="field">
+            <label for="reg-email">Email</label>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
+              <input class="input has-ico" id="reg-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" aria-describedby="reg-email-err" required>
+            </div>
+            <p class="field-error err-email" id="reg-email-err" role="alert">
+              <svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
+              <span>This email is already used by another account. <a href="#login">Sign in instead</a>.</span>
+            </p>
+          </div>
+
+          <div class="field">
+            <label for="reg-password">Password</label>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-lock"/></svg>
+              <input class="input has-ico" id="reg-password" name="password" type="password" autocomplete="new-password" placeholder="At least 8 characters" minlength="8" aria-describedby="reg-password-err" required>
+            </div>
+            <span class="field-hint">Use 8 or more characters.</span>
+            <p class="field-error err-password" id="reg-password-err" role="alert">
+              <svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
+              <span>Password must be at least 8 characters.</span>
+            </p>
+          </div>
+
+          <button type="submit" class="btn btn-primary btn-block">Create account</button>
+        </div>
+
+        <p class="auth-alt">Already have an account? <a href="#login">Sign in</a></p>
+      </form>
+    </section>
+
+    <!-- =================== FORGOT PASSWORD =================== -->
+    <section id="forgot" class="auth-view" aria-labelledby="forgot-title">
+      <form class="auth-card" method="post">
+        <div class="auth-head">
+          <a class="auth-back" href="#login"><svg class="ico ico-sm" aria-hidden="true"><use href="#i-arrow-left"/></svg>Back to sign in</a>
+          <h1 id="forgot-title">Reset password</h1>
+          <p class="auth-sub">Enter your email and we'll send you a reset link.</p>
+        </div>
+
+        <!-- feedback (shown by server via .state-sent / .state-error on #forgot) -->
+        <div class="forgot-alert is-sent alert alert-pos" role="status">
+          <svg class="ico ico-sm" aria-hidden="true"><use href="#i-check-circle"/></svg>
+          <div class="alert-body"><strong>Check your email</strong><span>If an account exists for that address, a reset link is on its way.</span></div>
+        </div>
+        <div class="forgot-alert is-error alert alert-neg" role="alert">
+          <svg class="ico ico-sm" aria-hidden="true"><use href="#i-alert"/></svg>
+          <div class="alert-body"><strong>Couldn't send the link</strong><span>Something went wrong on our end. Please try again.</span></div>
+        </div>
+
+        <div class="auth-form">
+          <div class="field">
+            <label for="forgot-email">Email</label>
+            <div class="input-wrap">
+              <svg class="ico ico-sm input-ico" aria-hidden="true"><use href="#i-mail"/></svg>
+              <input class="input has-ico" id="forgot-email" name="email" type="email" autocomplete="email" placeholder="you@company.com" required>
+            </div>
+          </div>
+
+          <button type="submit" class="btn btn-primary btn-block">Send reset link</button>
+        </div>
+
+        <p class="auth-alt">Remembered it? <a href="#login">Sign in</a></p>
+      </form>
+    </section>
+
+  </div>
+</main>
+
+<!-- ============ TEMPLATE PREVIEW CONTROLS (remove for production) ============ -->
+<div class="tpl-controls" role="group" aria-label="Template preview controls">
+  <span class="tpl-label">Preview</span>
+  <div class="theme-switch" role="radiogroup" aria-label="Color theme">
+    <label><input type="radio" name="theme" id="theme-light"><span>Light</span></label>
+    <label><input type="radio" name="theme" id="theme-auto" checked><span>Auto</span></label>
+    <label><input type="radio" name="theme" id="theme-dark"><span>Dark</span></label>
+  </div>
+  <span class="tpl-sep" aria-hidden="true"></span>
+  <label class="tpl-toggle">
+    <input type="checkbox" id="sso-toggle" checked>
+    <span class="tpl-track" aria-hidden="true"></span>
+    SSO
+  </label>
+  <span class="tpl-sep tpl-forgot" aria-hidden="true"></span>
+  <div class="tpl-forgot">
+    <div class="segmented" role="radiogroup" aria-label="Forgot-password state (preview)">
+      <label><input type="radio" name="fstate" id="fstate-default" checked><span>Default</span></label>
+      <label><input type="radio" name="fstate" id="fstate-sent"><span>Sent</span></label>
+      <label><input type="radio" name="fstate" id="fstate-error"><span>Error</span></label>
+    </div>
+  </div>
+  <span class="tpl-sep tpl-register" aria-hidden="true"></span>
+  <div class="tpl-register">
+    <div class="segmented" role="radiogroup" aria-label="Register state (preview)">
+      <label><input type="radio" name="rstate" id="rstate-default" checked><span>Default</span></label>
+      <label><input type="radio" name="rstate" id="rstate-taken"><span>Email taken</span></label>
+      <label><input type="radio" name="rstate" id="rstate-combined"><span>Multiple</span></label>
+    </div>
+  </div>
+</div>
+
+</body>
+</html>

html-css-foundation/auth.css

@@ -0,0 +1,232 @@
+/* =============================================================
+   Auth flow — login / register / forgot password
+   Built on the shared tokens in styles.css. Pure HTML/CSS:
+   - screens switch via :target (no JS)
+   - SSO is a config section toggled by a class/checkbox; providers
+     are a <ul> you extend by adding one <li class="sso-item">.
+   ============================================================= */
+
+.auth-stage {
+  min-height: 100dvh;
+  display: grid; place-items: center;
+  padding: 40px 20px 96px;
+  background: var(--bg);
+}
+.auth {
+  width: 100%; max-width: 408px;
+  display: flex; flex-direction: column; gap: 22px;
+}
+
+/* brand */
+.auth-brand {
+  display: flex; align-items: center; justify-content: center; gap: 10px;
+}
+.auth-brand .brand-name { font-size: 16px; }
+
+/* ---- screen switching via :target (login is the default) ---- */
+.auth-view { display: none; }
+#login { display: block; }
+#register:target, #forgot:target { display: block; }
+body:has(#register:target) #login,
+body:has(#forgot:target) #login { display: none; }
+
+/* card */
+.auth-card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) + 3px);
+  padding: 24px;
+  display: flex; flex-direction: column; gap: 16px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px rgba(0,0,0,.06);
+}
+.auth-head { display: flex; flex-direction: column; gap: 4px; }
+.auth-head h1 { margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.01em; }
+.auth-sub { margin: 0; color: var(--text-muted); font-size: var(--fz); }
+.auth-back {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: var(--fz-sm); color: var(--text-muted); width: fit-content;
+  margin-bottom: 2px;
+}
+.auth-back:hover { color: var(--text); }
+
+/* ---- SSO section (toggle on/off via #sso-toggle) ---- */
+.sso { display: flex; flex-direction: column; gap: 10px; }
+body:not(:has(#sso-toggle:checked)) .sso { display: none; }
+
+.sso-list { display: flex; flex-direction: column; gap: 8px; }
+.sso-btn {
+  display: flex; align-items: center; gap: 11px; width: 100%;
+  height: 40px; padding: 0 12px;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  font: inherit; font-size: var(--fz-sm); font-weight: 550;
+  cursor: pointer; text-align: left;
+}
+.sso-btn:hover { background: var(--surface-2); }
+/* logo slot — swap the initial for an <img class="sso-logo"> later */
+.sso-logo {
+  width: 22px; height: 22px; flex: 0 0 auto;
+  display: grid; place-items: center; border-radius: 5px;
+  background: var(--surface-2); border: 1px solid var(--border);
+  color: var(--text-muted); font-size: 11px; font-weight: 700;
+}
+.sso-logo .ico { color: var(--text-muted); }
+.sso-btn .sso-label { flex: 1 1 auto; }
+
+/* divider */
+.auth-divider {
+  display: flex; align-items: center; gap: 12px;
+  color: var(--text-faint); font-size: var(--fz-xs);
+  text-transform: uppercase; letter-spacing: .07em;
+}
+.auth-divider::before, .auth-divider::after {
+  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
+}
+
+/* ---- form fields ---- */
+.auth-form { display: flex; flex-direction: column; gap: 14px; }
+.field { display: flex; flex-direction: column; gap: 6px; }
+.field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
+.field label { font-size: var(--fz-sm); font-weight: 550; color: var(--text); }
+.field .optional { font-size: var(--fz-xs); color: var(--text-faint); font-weight: 400; }
+.field-link { font-size: var(--fz-xs); color: var(--accent); }
+.field-link:hover { text-decoration: underline; }
+
+.input-wrap { position: relative; display: flex; }
+.input-ico {
+  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
+  color: var(--text-faint); pointer-events: none;
+}
+.input {
+  width: 100%; height: 40px; padding: 0 12px;
+  background: var(--surface-3); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  font: inherit; font-size: var(--fz);
+}
+.input.has-ico { padding-left: 36px; }
+.input::placeholder { color: var(--text-faint); }
+.input:focus { outline: none; border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--accent-bg); }
+/* gentle validation feedback only after the user has interacted */
+.input:user-invalid { border-color: var(--neg); }
+.input:user-invalid:focus { box-shadow: 0 0 0 2px var(--neg-bg); }
+
+.field-hint { font-size: var(--fz-xs); color: var(--text-faint); }
+
+.remember { margin-top: 2px; }
+
+/* full-width primary button (extends .btn / .btn-primary from styles.css) */
+.btn-block { width: 100%; justify-content: center; height: 40px; font-size: var(--fz); }
+
+/* alternate action line */
+.auth-alt { margin: 0; text-align: center; font-size: var(--fz-sm); color: var(--text-muted); }
+.auth-alt a { color: var(--accent); font-weight: 550; }
+.auth-alt a:hover { text-decoration: underline; }
+
+/* legal footnote */
+.auth-foot { margin: 0; text-align: center; font-size: var(--fz-xs); color: var(--text-faint); }
+.auth-foot a { color: var(--text-muted); text-decoration: underline; }
+
+/* =============================================================
+   Template preview controls (delete this block + its markup for
+   production). Drives theme + SSO on/off with zero JS.
+   ============================================================= */
+.tpl-controls {
+  position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%);
+  z-index: 50;
+  display: flex; align-items: center; gap: 12px;
+  padding: 6px 8px 6px 14px;
+  background: var(--surface); border: 1px solid var(--border);
+  border-radius: 99px; box-shadow: 0 6px 22px rgba(0,0,0,.12);
+}
+.tpl-label { font-size: var(--fz-xs); color: var(--text-faint);
+  text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
+.tpl-sep { width: 1px; height: 20px; background: var(--border); }
+.tpl-controls .theme-switch { width: 156px; }
+
+/* on/off switch */
+.tpl-toggle { display: inline-flex; align-items: center; gap: 8px;
+  font-size: var(--fz-sm); color: var(--text-muted); cursor: pointer; }
+.tpl-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
+.tpl-track { width: 32px; height: 18px; border-radius: 99px;
+  background: var(--border-2); position: relative; transition: background .15s ease; }
+.tpl-track::after { content: ""; position: absolute; top: 2px; left: 2px;
+  width: 14px; height: 14px; border-radius: 50%; background: #fff;
+  box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: transform .15s ease; }
+.tpl-toggle:has(input:checked) .tpl-track { background: var(--accent); }
+.tpl-toggle:has(input:checked) .tpl-track::after { transform: translateX(14px); }
+.tpl-toggle:has(input:focus-visible) .tpl-track {
+  outline: 2px solid var(--focus); outline-offset: 2px; }
+
+@media (max-width: 520px) {
+  .tpl-label { display: none; }
+  .tpl-controls { gap: 10px; padding: 6px 10px; }
+}
+
+/* =============================================================
+   Forgot-password feedback (Post/Redirect/Get, no JS).
+   The form POSTs to its own URL; on the redirect-GET the server
+   re-renders #forgot with a state class so the matching alert shows:
+     <section id="forgot" class="auth-view state-sent"> … </section>
+   (state-sent | state-error). No extra view is added.
+   The preview radios below demonstrate the same states live.
+   ============================================================= */
+.forgot-alert { display: none; }
+#forgot.state-sent  .forgot-alert.is-sent,
+body:has(#fstate-sent:checked)  #forgot .forgot-alert.is-sent  { display: flex; }
+#forgot.state-error .forgot-alert.is-error,
+body:has(#fstate-error:checked) #forgot .forgot-alert.is-error { display: flex; }
+
+/* the Forgot-state control only appears while the forgot view is open */
+.tpl-forgot { display: none; }
+body:has(#forgot:target) .tpl-forgot { display: flex; }
+.tpl-controls .segmented { padding: 1px; }
+.tpl-controls .segmented label { padding: 3px 8px; }
+
+/* =============================================================
+   Field-level errors (e.g. "email already used"), server-driven.
+   The server re-renders the field's form with a state class and
+   adds aria-invalid="true" to the input:
+     <section id="register" class="auth-view state-email-taken"> … </section>
+   Reusable: drop a <p class="field-error"> under any field and gate
+   it on whatever state your server sets.
+   ============================================================= */
+.field-error {
+  display: none; align-items: center; gap: 6px; margin: 0;
+  font-size: var(--fz-xs); color: var(--neg);
+}
+.field-error > .ico { flex: 0 0 auto; color: var(--neg); }
+.field-error a { color: var(--neg); font-weight: 600; text-decoration: underline; }
+
+/* register form-level error banner (pairs with field-level errors) */
+.register-alert { display: none; }
+
+/* --- state A: email already taken — field-level error only --- */
+#register.state-email-taken .err-email,
+body:has(#rstate-taken:checked) #register .err-email { display: flex; }
+#register.state-email-taken #reg-email,
+body:has(#rstate-taken:checked) #register #reg-email { border-color: var(--neg); }
+
+/* --- state B: multiple errors — banner + several field errors together --- */
+#register.state-invalid .register-alert,
+body:has(#rstate-combined:checked) #register .register-alert { display: flex; }
+#register.state-invalid .err-email,
+#register.state-invalid .err-password,
+body:has(#rstate-combined:checked) #register .err-email,
+body:has(#rstate-combined:checked) #register .err-password { display: flex; }
+#register.state-invalid #reg-email,
+#register.state-invalid #reg-password,
+body:has(#rstate-combined:checked) #register #reg-email,
+body:has(#rstate-combined:checked) #register #reg-password { border-color: var(--neg); }
+
+/* red focus ring on any invalid register input */
+#register.state-email-taken #reg-email:focus,
+#register.state-invalid #reg-email:focus,
+#register.state-invalid #reg-password:focus,
+body:has(#rstate-taken:checked) #register #reg-email:focus,
+body:has(#rstate-combined:checked) #register #reg-email:focus,
+body:has(#rstate-combined:checked) #register #reg-password:focus { box-shadow: 0 0 0 2px var(--neg-bg); }
+
+/* the Register-state control only appears while the register view is open */
+.tpl-register { display: none; }
+body:has(#register:target) .tpl-register { display: flex; }

html-css-foundation/styles.css

@@ -0,0 +1,639 @@
+/* =============================================================
+   App Shell Template — pure HTML/CSS, no JavaScript
+   -------------------------------------------------------------
+   Architecture
+   - Design tokens via light-dark() so theme follows system by
+     default and can be forced Light / Dark via radio + :has().
+   - Everything is a reusable "block": .nav-item, .filter,
+     .chip, .badge, .btn, .menu, .table — combine freely.
+   ============================================================= */
+
+/* ---------- 1. TOKENS ----------------------------------------
+   Two raw palettes (--l-* light, --d-* dark) are defined once.
+   A small mapping (--bg: var(--l-bg) ...) picks the active set.
+   Theme resolution (no JS):
+     • default + @media(dark)  → follows the OS  (Auto)
+     • html:has(#theme-light)  → force light
+     • html:has(#theme-dark)   → force dark
+   We avoid light-dark()/color-scheme for app colors because their
+   resolution is unreliable across engines; :has() variable swaps
+   are rock-solid. color-scheme is still set as a hint for native
+   widgets (date picker, scrollbars, selects).
+------------------------------------------------------------- */
+:root {
+  /* ---- raw LIGHT palette ---- */
+  --l-bg:#f3f3f4; --l-surface:#ffffff; --l-surface-2:#f6f6f7; --l-surface-3:#fbfbfc;
+  --l-border:#e5e5e8; --l-border-2:#d6d6da;
+  --l-text:#18181b; --l-text-muted:#6b6b73; --l-text-faint:#9a9aa2;
+  --l-accent:oklch(0.52 0.12 256); --l-accent-bg:oklch(0.96 0.03 256);
+  --l-accent-bd:oklch(0.82 0.07 256); --l-focus:oklch(0.52 0.14 256);
+  --l-pos:oklch(0.54 0.13 150); --l-pos-bg:oklch(0.95 0.03 150); --l-pos-bd:oklch(0.83 0.07 150);
+  --l-neg:oklch(0.55 0.18 25);  --l-neg-bg:oklch(0.96 0.03 25);  --l-neg-bd:oklch(0.85 0.08 25);
+  --l-warn:oklch(0.55 0.12 75); --l-warn-bg:oklch(0.96 0.04 85); --l-warn-bd:oklch(0.84 0.08 85);
+  --l-info:oklch(0.54 0.12 245);--l-info-bg:oklch(0.96 0.03 245);--l-info-bd:oklch(0.83 0.07 245);
+
+  /* ---- raw DARK palette ---- */
+  --d-bg:#0d0d0f; --d-surface:#161619; --d-surface-2:#1d1d22; --d-surface-3:#1a1a1e;
+  --d-border:#2a2a31; --d-border-2:#3a3a43;
+  --d-text:#ededf0; --d-text-muted:#9b9ba6; --d-text-faint:#6a6a74;
+  --d-accent:oklch(0.70 0.12 256); --d-accent-bg:oklch(0.32 0.06 256);
+  --d-accent-bd:oklch(0.48 0.08 256); --d-focus:oklch(0.74 0.13 256);
+  --d-pos:oklch(0.74 0.14 150); --d-pos-bg:oklch(0.30 0.05 150); --d-pos-bd:oklch(0.45 0.07 150);
+  --d-neg:oklch(0.74 0.16 25);  --d-neg-bg:oklch(0.30 0.07 25);  --d-neg-bd:oklch(0.47 0.10 25);
+  --d-warn:oklch(0.80 0.13 85); --d-warn-bg:oklch(0.31 0.05 80); --d-warn-bd:oklch(0.48 0.07 80);
+  --d-info:oklch(0.74 0.12 245);--d-info-bg:oklch(0.31 0.06 245);--d-info-bd:oklch(0.47 0.08 245);
+
+  /* ---- active mapping: default = LIGHT ---- */
+  --bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3);
+  --border:var(--l-border); --border-2:var(--l-border-2);
+  --text:var(--l-text); --text-muted:var(--l-text-muted); --text-faint:var(--l-text-faint);
+  --accent:var(--l-accent); --accent-bg:var(--l-accent-bg); --accent-bd:var(--l-accent-bd); --focus:var(--l-focus);
+  --pos:var(--l-pos); --pos-bg:var(--l-pos-bg); --pos-bd:var(--l-pos-bd);
+  --neg:var(--l-neg); --neg-bg:var(--l-neg-bg); --neg-bd:var(--l-neg-bd);
+  --warn:var(--l-warn); --warn-bg:var(--l-warn-bg); --warn-bd:var(--l-warn-bd);
+  --info:var(--l-info); --info-bg:var(--l-info-bg); --info-bd:var(--l-info-bd);
+  color-scheme: light;
+
+  /* layout + density (compact) */
+  --radius: 5px;
+  --nav-w: 264px;
+  --row-h: 34px;
+  --pad-x: 12px;
+  --fz: 13px;
+  --fz-sm: 12px;
+  --fz-xs: 11px;
+
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+  font-size: var(--fz);
+  line-height: 1.45;
+}
+
+/* shared DARK mapping, applied to Auto-via-OS and forced-dark */
+@media (prefers-color-scheme: dark) {
+  :root:not(:has(#theme-light:checked)):not(:has(#theme-dark:checked)) {
+    --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
+    --border:var(--d-border); --border-2:var(--d-border-2);
+    --text:var(--d-text); --text-muted:var(--d-text-muted); --text-faint:var(--d-text-faint);
+    --accent:var(--d-accent); --accent-bg:var(--d-accent-bg); --accent-bd:var(--d-accent-bd); --focus:var(--d-focus);
+    --pos:var(--d-pos); --pos-bg:var(--d-pos-bg); --pos-bd:var(--d-pos-bd);
+    --neg:var(--d-neg); --neg-bg:var(--d-neg-bg); --neg-bd:var(--d-neg-bd);
+    --warn:var(--d-warn); --warn-bg:var(--d-warn-bg); --warn-bd:var(--d-warn-bd);
+    --info:var(--d-info); --info-bg:var(--d-info-bg); --info-bd:var(--d-info-bd);
+    color-scheme: dark;
+  }
+}
+
+/* forced DARK (overrides everything) */
+html:has(#theme-dark:checked) {
+  --bg:var(--d-bg); --surface:var(--d-surface); --surface-2:var(--d-surface-2); --surface-3:var(--d-surface-3);
+  --border:var(--d-border); --border-2:var(--d-border-2);
+  --text:var(--d-text); --text-muted:var(--d-text-muted); --text-faint:var(--d-text-faint);
+  --accent:var(--d-accent); --accent-bg:var(--d-accent-bg); --accent-bd:var(--d-accent-bd); --focus:var(--d-focus);
+  --pos:var(--d-pos); --pos-bg:var(--d-pos-bg); --pos-bd:var(--d-pos-bd);
+  --neg:var(--d-neg); --neg-bg:var(--d-neg-bg); --neg-bd:var(--d-neg-bd);
+  --warn:var(--d-warn); --warn-bg:var(--d-warn-bg); --warn-bd:var(--d-warn-bd);
+  --info:var(--d-info); --info-bg:var(--d-info-bg); --info-bd:var(--d-info-bd);
+  color-scheme: dark;
+}
+
+/* forced LIGHT (overrides the OS-dark media query) */
+html:has(#theme-light:checked) {
+  --bg:var(--l-bg); --surface:var(--l-surface); --surface-2:var(--l-surface-2); --surface-3:var(--l-surface-3);
+  --border:var(--l-border); --border-2:var(--l-border-2);
+  --text:var(--l-text); --text-muted:var(--l-text-muted); --text-faint:var(--l-text-faint);
+  --accent:var(--l-accent); --accent-bg:var(--l-accent-bg); --accent-bd:var(--l-accent-bd); --focus:var(--l-focus);
+  --pos:var(--l-pos); --pos-bg:var(--l-pos-bg); --pos-bd:var(--l-pos-bd);
+  --neg:var(--l-neg); --neg-bg:var(--l-neg-bg); --neg-bd:var(--l-neg-bd);
+  --warn:var(--l-warn); --warn-bg:var(--l-warn-bg); --warn-bd:var(--l-warn-bd);
+  --info:var(--l-info); --info-bg:var(--l-info-bg); --info-bd:var(--l-info-bd);
+  color-scheme: light;
+}
+
+/* ---------- 2. RESET ---------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; }
+html, body { height: 100%; }
+body { margin: 0; background: var(--bg); color: var(--text);
+  -webkit-font-smoothing: antialiased; }
+button { font: inherit; color: inherit; }
+ul { list-style: none; margin: 0; padding: 0; }
+a { color: inherit; text-decoration: none; }
+summary::-webkit-details-marker { display: none; }
+summary { list-style: none; cursor: pointer; }
+
+:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 1px;
+  border-radius: 3px;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .sidebar, .scrim, summary, .nav-item, .btn, .chip { transition: .15s ease; }
+}
+
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+
+/* tiny icon helper */
+.ico { width: 16px; height: 16px; flex: 0 0 auto; stroke: currentColor;
+  stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; }
+.ico-sm { width: 14px; height: 14px; }
+
+/* ---------- 3. APP GRID ------------------------------------- */
+.app {
+  display: grid;
+  grid-template-columns: var(--nav-w) minmax(0, 1fr);
+  height: 100dvh;
+  overflow: hidden;
+}
+
+/* ---------- 4. SIDEBAR -------------------------------------- */
+.sidebar {
+  grid-column: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+}
+.brand {
+  display: flex; align-items: center; gap: 10px;
+  height: 48px; padding: 0 14px; flex: 0 0 auto;
+  border-bottom: 1px solid var(--border);
+}
+.brand-mark {
+  width: 22px; height: 22px; border-radius: 5px; flex: 0 0 auto;
+  background: var(--accent);
+  display: grid; place-items: center; color: #fff;
+}
+.brand-mark .ico { stroke: #fff; }
+.brand-name { font-weight: 650; letter-spacing: -.01em; }
+.brand-sub { color: var(--text-faint); font-size: var(--fz-xs); margin-left: auto; }
+
+/* nav scroll region */
+.nav {
+  flex: 1 1 auto; min-height: 0; overflow-y: auto;
+  padding: 8px;
+}
+/* ============================================================
+   UNIFIED NAV NODE — ONE component for every menu item.
+   A node is a row:  [ toggle | spacer ]  +  [ label ]
+     • HEADER    = the node HAS children  → renders the chevron toggle.
+                   Childless nodes render a spacer so labels stay aligned.
+     • CLICKABLE = label is <a href>      → navigates on click.
+       STATIC    = label is <span>        → not a navigation target.
+   So "header" and "clickable" are independent: any combination works.
+   Children sit in a sibling <ul class="nav-children">, revealed by
+   :has() on THIS row's own <details open> (scoped with > so a node
+   only ever controls its own subtree — infinite depth, no JS).
+   ============================================================ */
+.nav-row { display: flex; align-items: center; gap: 2px; }
+
+/* toggle — only present on nodes that have children */
+.nav-disc { display: flex; flex: 0 0 auto; }
+.nav-tog {
+  width: 22px; height: 30px; flex: 0 0 auto;
+  display: grid; place-items: center;
+  border-radius: var(--radius); color: var(--text-faint); cursor: pointer;
+}
+.nav-tog .chev { width: 14px; height: 14px; transition: transform .15s ease; }
+.nav-tog:hover { background: var(--surface-2); color: var(--text); }
+.nav-disc[open] .nav-tog .chev { transform: rotate(90deg); }
+/* spacer keeps childless rows aligned under their siblings' labels */
+.nav-spacer { width: 22px; flex: 0 0 auto; }
+
+/* the label element — <a> when clickable, <span> when static */
+.nav-self {
+  flex: 1 1 auto; min-width: 0;
+  display: flex; align-items: center; gap: 8px;
+  min-height: 30px; padding: 4px 8px;
+  border-radius: var(--radius);
+  color: var(--text-muted); font-size: var(--fz);
+  position: relative; user-select: none;
+}
+a.nav-self:hover { background: var(--surface-2); color: var(--text); }
+.nav-self .ico { color: var(--text-faint); }
+a.nav-self:hover .ico { color: var(--text-muted); }
+span.nav-self { cursor: default; }                 /* static / non-clickable */
+.nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden;
+  text-overflow: ellipsis; white-space: nowrap; }
+
+/* active item */
+.nav-self[aria-current="page"] {
+  background: var(--accent-bg); color: var(--text); font-weight: 550;
+}
+.nav-self[aria-current="page"]::before {
+  content: ""; position: absolute; left: -2px; top: 6px; bottom: 6px;
+  width: 2px; border-radius: 2px; background: var(--accent);
+}
+.nav-self[aria-current="page"] .ico { color: var(--accent); }
+
+/* children + infinite indentation with a guide line per level */
+.nav-node > .nav-children { display: none; }
+.nav-node:has(> .nav-row > .nav-disc[open]) > .nav-children { display: block; }
+.nav-children { padding-left: 22px; position: relative; }
+.nav-children::before {
+  content: ""; position: absolute; left: 10px; top: 2px; bottom: 2px;
+  width: 1px; background: var(--border);
+}
+
+/* count pill on any row */
+.nav-count {
+  margin-left: auto; font-size: var(--fz-xs); color: var(--text-faint);
+  background: var(--surface-2); border: 1px solid var(--border);
+  border-radius: 99px; padding: 0 6px; line-height: 16px; min-width: 18px;
+  text-align: center;
+}
+
+/* ---------- 5. SIDEBAR FOOTER ------------------------------- */
+.side-footer {
+  flex: 0 0 auto; border-top: 1px solid var(--border);
+  padding: 8px; display: flex; flex-direction: column; gap: 6px;
+}
+
+/* theme segmented control */
+.theme-switch {
+  display: grid; grid-template-columns: repeat(3, 1fr);
+  gap: 2px; padding: 2px;
+  background: var(--surface-3); border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.theme-switch label {
+  display: flex; align-items: center; justify-content: center; gap: 5px;
+  font-size: var(--fz-xs); color: var(--text-muted);
+  padding: 4px 2px; border-radius: 3px; cursor: pointer; position: relative;
+}
+.theme-switch label:hover { color: var(--text); }
+.theme-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
+.theme-switch label:has(input:checked) {
+  background: var(--surface); color: var(--text);
+  box-shadow: 0 1px 2px rgba(0,0,0,.06); font-weight: 550;
+}
+.theme-switch label:has(input:focus-visible) {
+  outline: 2px solid var(--focus); outline-offset: 1px;
+}
+
+/* profile / settings row */
+.footer-actions { display: flex; align-items: center; gap: 4px; }
+.profile {
+  display: flex; align-items: center; gap: 9px; flex: 1 1 auto;
+  padding: 5px 8px; border-radius: var(--radius); cursor: pointer;
+  background: transparent; border: 1px solid transparent; text-align: left;
+  min-width: 0;
+}
+.profile:hover { background: var(--surface-2); border-color: var(--border); }
+.avatar {
+  width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto;
+  background: var(--accent-bg); color: var(--accent);
+  display: grid; place-items: center; font-size: var(--fz-xs); font-weight: 650;
+  border: 1px solid var(--accent-bd);
+}
+.profile-meta { min-width: 0; line-height: 1.2; }
+.profile-name { font-size: var(--fz-sm); font-weight: 550;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.profile-mail { font-size: var(--fz-xs); color: var(--text-faint);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ---------- 6. BUTTONS / ICON BUTTONS ----------------------- */
+.btn {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 10px;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  font-size: var(--fz-sm); cursor: pointer; white-space: nowrap;
+}
+.btn:hover { background: var(--surface-2); }
+.btn-primary { background: var(--accent); border-color: var(--accent);
+  color: #fff; font-weight: 550; }
+.btn-primary:hover { filter: brightness(1.06); }
+.btn-ghost { background: transparent; border-color: transparent; }
+.btn-ghost:hover { background: var(--surface-2); }
+.icon-btn {
+  width: 30px; height: 30px; padding: 0; justify-content: center;
+  color: var(--text-muted);
+}
+.icon-btn:hover { color: var(--text); }
+
+/* ---------- 7. CONTENT AREA -------------------------------- */
+.content {
+  grid-column: 2;
+  display: flex; flex-direction: column;
+  min-width: 0; min-height: 0;
+  background: var(--bg);
+}
+
+/* topbar (page title + hamburger on mobile) */
+.topbar {
+  flex: 0 0 auto; height: 48px;
+  display: flex; align-items: center; gap: 12px;
+  padding: 0 16px; border-bottom: 1px solid var(--border);
+  background: var(--surface);
+}
+.hamburger { display: none; }   /* shown only on narrow */
+.page-title { font-weight: 600; letter-spacing: -.01em; font-size: 14px; }
+.page-sub { color: var(--text-faint); font-size: var(--fz-sm); }
+.topbar-spacer { flex: 1 1 auto; }
+.crumbs { display: flex; align-items: center; gap: 6px;
+  color: var(--text-faint); font-size: var(--fz-sm); }
+.crumbs a:hover { color: var(--text); }
+.crumbs .sep { color: var(--border-2); }
+
+/* ---------- 8. FILTER BAR (lego blocks) -------------------- */
+.filters {
+  flex: 0 0 auto; background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  padding: 10px 16px;
+  display: flex; flex-direction: column; gap: 9px;
+}
+.filter-row {
+  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
+}
+.filter-row .spacer { flex: 1 1 auto; }
+
+/* generic filter shell so blocks line up */
+.filter {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px;
+}
+.filter-label { font-size: var(--fz-xs); color: var(--text-faint);
+  text-transform: uppercase; letter-spacing: .05em; font-weight: 600; }
+
+/* fieldset wrappers reset to behave as inline groups */
+.filter-field {
+  border: 0; margin: 0; padding: 0; min-width: 0;
+  display: inline-flex; align-items: center; gap: 8px;
+}
+.filter-legend {
+  padding: 0; font-size: var(--fz-xs); color: var(--text-faint);
+  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
+}
+.menu-field { border: 0; margin: 0; padding: 0; min-width: 0; }
+
+/* form action footer */
+.filter-foot { padding-top: 2px; }
+.filter-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
+
+/* search */
+.search {
+  display: inline-flex; align-items: center; gap: 7px;
+  height: 30px; padding: 0 9px; min-width: 220px;
+  background: var(--surface-3); border: 1px solid var(--border-2);
+  border-radius: var(--radius); color: var(--text-faint);
+}
+.search:focus-within { border-color: var(--accent); color: var(--text-muted); }
+.search input {
+  border: 0; background: transparent; outline: none; color: var(--text);
+  font: inherit; font-size: var(--fz-sm); width: 100%;
+}
+
+/* select */
+.select {
+  position: relative; display: inline-flex; align-items: center;
+}
+.select select {
+  appearance: none; height: 30px; padding: 0 26px 0 9px;
+  background: var(--surface); color: var(--text);
+  border: 1px solid var(--border-2); border-radius: var(--radius);
+  font: inherit; font-size: var(--fz-sm); cursor: pointer;
+}
+.select::after {
+  content: ""; position: absolute; right: 10px; pointer-events: none;
+  width: 7px; height: 7px; border-right: 1.5px solid var(--text-faint);
+  border-bottom: 1.5px solid var(--text-faint); transform: translateY(-2px) rotate(45deg);
+}
+.select select:focus-visible { border-color: var(--accent); outline: none;
+  box-shadow: 0 0 0 2px var(--accent-bg); }
+
+/* segmented toggle (radios) */
+.segmented {
+  display: inline-flex; padding: 2px; gap: 2px;
+  background: var(--surface-3); border: 1px solid var(--border-2);
+  border-radius: var(--radius);
+}
+.segmented label {
+  display: inline-flex; align-items: center; gap: 5px;
+  font-size: var(--fz-sm); color: var(--text-muted);
+  padding: 3px 10px; border-radius: 3px; cursor: pointer; position: relative;
+}
+.segmented label:hover { color: var(--text); }
+.segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
+.segmented label:has(input:checked) {
+  background: var(--surface); color: var(--text); font-weight: 550;
+  box-shadow: 0 1px 2px rgba(0,0,0,.06);
+}
+.segmented label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
+.seg-count { font-size: var(--fz-xs); color: var(--text-faint); }
+
+/* chips (multi-select checkboxes) */
+.chips { display: inline-flex; gap: 6px; flex-wrap: wrap; }
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 26px; padding: 0 10px;
+  background: var(--surface); border: 1px solid var(--border-2);
+  border-radius: 99px; font-size: var(--fz-sm); color: var(--text-muted);
+  cursor: pointer; position: relative; white-space: nowrap;
+}
+.chip:hover { background: var(--surface-2); color: var(--text); }
+.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
+.chip .chip-dot { width: 7px; height: 7px; border-radius: 50%;
+  background: var(--border-2); }
+.chip:has(input:checked) {
+  background: var(--accent-bg); border-color: var(--accent-bd);
+  color: var(--text); font-weight: 550;
+}
+.chip:has(input:checked) .chip-dot { background: var(--accent); }
+.chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 1px; }
+
+/* date range */
+.daterange {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 30px; padding: 0 9px;
+  background: var(--surface); border: 1px solid var(--border-2);
+  border-radius: var(--radius); color: var(--text-faint);
+}
+.daterange input[type="date"] {
+  border: 0; background: transparent; color: var(--text); font: inherit;
+  font-size: var(--fz-sm); outline: none; min-width: 116px;
+}
+.daterange .to { color: var(--text-faint); font-size: var(--fz-xs); }
+.daterange:focus-within { border-color: var(--accent); }
+
+/* checkbox / radio primitives (reusable) */
+.check, .radio {
+  display: inline-flex; align-items: center; gap: 7px;
+  font-size: var(--fz-sm); color: var(--text-muted); cursor: pointer;
+}
+.check input, .radio input { width: 15px; height: 15px; accent-color: var(--accent);
+  margin: 0; cursor: pointer; }
+.check:hover, .radio:hover { color: var(--text); }
+
+/* popover menu (column settings, kebab, etc.) — pure <details> */
+.menu { position: relative; display: inline-flex; }
+.menu > summary { display: inline-flex; }
+.menu > summary::after { content: none; }
+.menu-pop {
+  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
+  min-width: 210px; padding: 6px;
+  background: var(--surface); border: 1px solid var(--border-2);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 28px rgba(0,0,0,.16);
+}
+.menu-pop.left { right: auto; left: 0; }
+.menu-head { font-size: var(--fz-xs); text-transform: uppercase;
+  letter-spacing: .05em; color: var(--text-faint); font-weight: 600;
+  padding: 5px 8px; }
+.menu-item {
+  display: flex; align-items: center; gap: 9px; width: 100%;
+  padding: 6px 8px; border-radius: 4px; font-size: var(--fz-sm);
+  color: var(--text); background: transparent; border: 0; cursor: pointer;
+  text-align: left;
+}
+.menu-item:hover { background: var(--surface-2); }
+.menu-item.danger { color: var(--neg); }
+.menu-item .ico { color: var(--text-faint); }
+.menu-item.danger .ico { color: var(--neg); }
+.menu-sep { height: 1px; background: var(--border); margin: 5px 4px; }
+.menu-check { display: flex; align-items: center; gap: 9px; width: 100%;
+  padding: 6px 8px; border-radius: 4px; font-size: var(--fz-sm); cursor: pointer; }
+.menu-check:hover { background: var(--surface-2); }
+.menu-check input { accent-color: var(--accent); width: 15px; height: 15px; margin: 0; }
+
+/* active filter pills */
+.active-pills { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
+.pill {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 24px; padding: 0 4px 0 9px;
+  background: var(--surface-2); border: 1px solid var(--border);
+  border-radius: 99px; font-size: var(--fz-xs); color: var(--text-muted);
+}
+.pill b { color: var(--text); font-weight: 600; }
+.pill .pill-x {
+  display: grid; place-items: center; width: 16px; height: 16px;
+  border-radius: 50%; color: var(--text-faint); background: transparent;
+  border: 0; cursor: pointer;
+}
+.pill .pill-x:hover { background: var(--border-2); color: var(--text); }
+.pill-clear { font-size: var(--fz-xs); color: var(--accent); cursor: pointer;
+  background: 0; border: 0; padding: 0 4px; }
+.pill-clear:hover { text-decoration: underline; }
+
+/* ---------- 9. TABLE --------------------------------------- */
+.table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; }
+table.table {
+  width: 100%; border-collapse: separate; border-spacing: 0;
+  font-size: var(--fz); font-variant-numeric: tabular-nums;
+}
+.table thead th {
+  position: sticky; top: 0; z-index: 10;
+  background: var(--surface-3);
+  border-bottom: 1px solid var(--border-2);
+  color: var(--text-muted); font-weight: 600; font-size: var(--fz-xs);
+  text-transform: uppercase; letter-spacing: .04em;
+  text-align: left; padding: 0 var(--pad-x); height: var(--row-h);
+  white-space: nowrap;
+}
+.table tbody td {
+  padding: 0 var(--pad-x); height: var(--row-h);
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap; color: var(--text);
+}
+.table tbody tr:hover td { background: var(--surface-2); }
+.table tbody tr:has(.row-select:checked) td { background: var(--accent-bg); }
+.col-check { width: 36px; text-align: center; padding: 0; }
+.col-check input { accent-color: var(--accent); width: 15px; height: 15px;
+  margin: 0; vertical-align: middle; }
+.col-num { text-align: right; }
+.cell-strong { font-weight: 550; }
+.cell-muted { color: var(--text-muted); }
+.cell-mono { font-variant-numeric: tabular-nums;
+  font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: var(--fz-sm); }
+
+/* sortable header button */
+.th-sort {
+  display: inline-flex; align-items: center; gap: 5px;
+  background: 0; border: 0; cursor: pointer; padding: 0; font: inherit;
+  color: inherit; text-transform: inherit; letter-spacing: inherit;
+}
+.th-sort:hover { color: var(--text); }
+.th-sort .sort-ico { color: var(--text-faint); opacity: .5; }
+th[aria-sort="ascending"] .th-sort,
+th[aria-sort="descending"] .th-sort { color: var(--text); }
+th[aria-sort="ascending"] .sort-ico,
+th[aria-sort="descending"] .sort-ico { opacity: 1; color: var(--accent); }
+th[aria-sort="descending"] .sort-ico { transform: rotate(180deg); }
+
+/* mini avatar cell */
+.cell-user { display: inline-flex; align-items: center; gap: 8px; }
+.cell-user .avatar { width: 22px; height: 22px; font-size: 9px; }
+
+/* badges (semantic) */
+.badge {
+  display: inline-flex; align-items: center; gap: 5px;
+  height: 19px; padding: 0 8px; border-radius: 99px;
+  font-size: var(--fz-xs); font-weight: 550; line-height: 1;
+  border: 1px solid var(--border-2); background: var(--surface-2);
+  color: var(--text-muted);
+}
+.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.badge.pos  { color: var(--pos);  background: var(--pos-bg);  border-color: var(--pos-bd); }
+.badge.neg  { color: var(--neg);  background: var(--neg-bg);  border-color: var(--neg-bd); }
+.badge.warn { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
+.badge.info { color: var(--info); background: var(--info-bg); border-color: var(--info-bd); }
+
+/* row kebab */
+.col-actions { width: 44px; text-align: center; }
+.kebab summary { width: 26px; height: 26px; border-radius: var(--radius);
+  display: grid; place-items: center; color: var(--text-faint); margin: 0 auto; }
+.kebab summary:hover { background: var(--surface-2); color: var(--text); }
+.kebab[open] summary { background: var(--surface-2); color: var(--text); }
+
+/* ---------- 10. PAGINATION --------------------------------- */
+.pager {
+  flex: 0 0 auto;
+  display: flex; align-items: center; gap: 12px;
+  padding: 8px 16px; border-top: 1px solid var(--border);
+  background: var(--surface); font-size: var(--fz-sm); color: var(--text-muted);
+}
+.pager .spacer { flex: 1 1 auto; }
+.pager-rows { display: inline-flex; align-items: center; gap: 7px; }
+.page-nums { display: inline-flex; gap: 3px; }
+.page-btn {
+  min-width: 28px; height: 28px; padding: 0 6px;
+  display: inline-flex; align-items: center; justify-content: center;
+  border: 1px solid var(--border-2); background: var(--surface);
+  border-radius: var(--radius); cursor: pointer; font-size: var(--fz-sm);
+  color: var(--text-muted);
+}
+.page-btn:hover { background: var(--surface-2); color: var(--text); }
+.page-btn[aria-current="page"] { background: var(--accent); border-color: var(--accent);
+  color: #fff; font-weight: 600; }
+.page-btn:disabled { opacity: .4; cursor: not-allowed; }
+
+/* ---------- 11. RESPONSIVE / HAMBURGER --------------------- */
+.scrim { display: none; }
+
+@media (max-width: 860px) {
+  .app { grid-template-columns: minmax(0, 1fr); }
+  .sidebar {
+    position: fixed; inset: 0 auto 0 0; width: min(86vw, var(--nav-w));
+    z-index: 60; transform: translateX(-100%);
+    box-shadow: 2px 0 24px rgba(0,0,0,.18);
+  }
+  .content { grid-column: 1; }
+  .hamburger { display: inline-flex; }
+
+  /* checkbox-driven open state */
+  body:has(#nav-toggle:checked) .sidebar { transform: translateX(0); }
+  body:has(#nav-toggle:checked) .scrim {
+    display: block; position: fixed; inset: 0; z-index: 50;
+    background: rgba(0,0,0,.42);
+  }
+  .search { min-width: 150px; flex: 1 1 auto; }
+}
+@media (max-width: 560px) {
+  .crumbs, .page-sub { display: none; }
+  .filter-label { display: none; }
+}
+
+/* the nav-toggle checkbox itself is visually hidden but focusable */
+#nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

package-lock.json

@@ -0,0 +1,141 @@
+{
+  "name": "plainpages",
+  "version": "0.1.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "plainpages",
+      "version": "0.1.0",
+      "dependencies": {
+        "ejs": "3.1.10"
+      },
+      "devDependencies": {
+        "@types/ejs": "3.1.5",
+        "@types/node": "24.13.2",
+        "typescript": "5.9.3"
+      },
+      "engines": {
+        "node": ">=24"
+      }
+    },
+    "node_modules/@types/ejs": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/@types/ejs/-/ejs-3.1.5.tgz",
+      "integrity": "sha512-nv+GSx77ZtXiJzwKdsASqi+YQ5Z7vwHsTP0JY2SiQgjGckkBRKZnk8nIM+7oUZ1VCtuTz0+By4qVR7fqzp/Dfg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "24.13.2",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.13.2.tgz",
+      "integrity": "sha512-fRa09kZTgu8o71KFcDjUFuc7F+dEbZYZmkI0mg5YBTRs0yMKjYHsq/c0urDKeDb+D5qVgXOdFcuu+DZPKOITwA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.18.0"
+      }
+    },
+    "node_modules/async": {
+      "version": "3.2.6",
+      "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz",
+      "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==",
+      "license": "MIT"
+    },
+    "node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "license": "MIT"
+    },
+    "node_modules/brace-expansion": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.1.1.tgz",
+      "integrity": "sha512-WR1cURNjuvBLMZBMbqM0UoE+WAfdUcEV1ccD8PVBVOI+Z3ND4+SZbN8RsfT2bMuG1qwz5RFvPukSZm5fF2D5eA==",
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/ejs": {
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "jake": "^10.8.5"
+      },
+      "bin": {
+        "ejs": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/filelist": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.6.tgz",
+      "integrity": "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "minimatch": "^5.0.1"
+      }
+    },
+    "node_modules/jake": {
+      "version": "10.9.4",
+      "resolved": "https://registry.npmjs.org/jake/-/jake-10.9.4.tgz",
+      "integrity": "sha512-wpHYzhxiVQL+IV05BLE2Xn34zW1S223hvjtqk0+gsPrwd/8JNLXJgZZM/iPFsYc1xyphF+6M6EvdE5E9MBGkDA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "async": "^3.2.6",
+        "filelist": "^1.0.4",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "jake": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/minimatch": {
+      "version": "5.1.9",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.9.tgz",
+      "integrity": "sha512-7o1wEA2RyMP7Iu7GNba9vc0RWWGACJOCZBJX2GJWip0ikV+wcOsgVuY9uE8CPiyQhkGFSlhuSkZPavN7u1c2Fw==",
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.18.2",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",
+      "integrity": "sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==",
+      "dev": true,
+      "license": "MIT"
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "plainpages",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=24"
+  },
+  "scripts": {
+    "start": "node src/server.ts",
+    "dev": "node --watch src/server.ts",
+    "typecheck": "tsc --noEmit",
+    "test": "node --test \"src/**/*.test.ts\""
+  },
+  "dependencies": {
+    "ejs": "3.1.10"
+  },
+  "devDependencies": {
+    "@types/ejs": "3.1.5",
+    "@types/node": "24.13.2",
+    "typescript": "5.9.3"
+  }
+}

public/css/style.css

@@ -0,0 +1,75 @@
+:root {
+  color-scheme: light dark;
+  --bg: #ffffff;
+  --fg: #1a1a1a;
+  --muted: #5a5a5a;
+  --accent: #2563eb;
+  --border: #e5e5e5;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg: #15171a;
+    --fg: #e8e8e8;
+    --muted: #9aa0a6;
+    --accent: #6ea8fe;
+    --border: #2a2d31;
+  }
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--fg);
+  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+}
+
+.site-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.site-header .brand {
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--fg);
+}
+
+.site-header nav a {
+  color: var(--muted);
+  text-decoration: none;
+}
+
+.site-header nav a:hover {
+  color: var(--accent);
+}
+
+main,
+footer {
+  max-width: 42rem;
+  margin: 0 auto;
+  padding: 1.5rem;
+}
+
+footer {
+  color: var(--muted);
+  border-top: 1px solid var(--border);
+}
+
+a {
+  color: var(--accent);
+}
+
+code {
+  background: color-mix(in srgb, var(--fg) 8%, transparent);
+  padding: 0.1rem 0.35rem;
+  border-radius: 4px;
+}

public/favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+  <rect width="32" height="32" rx="6" fill="#2563eb" />
+  <path d="M9 22V10h2.4l5.2 8V10H19v12h-2.4l-5.2-8v8z" fill="#fff" />
+</svg>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

src/app.test.ts

@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import type { AddressInfo } from "node:net";
+import { after, before, test } from "node:test";
+import { createApp } from "./app.ts";
+import { contentTypeFor, resolveStaticPath } from "./static.ts";
+
+const server = createApp();
+let base = "";
+
+before(async () => {
+  await new Promise<void>((resolve) => server.listen(0, resolve));
+  base = `http://localhost:${(server.address() as AddressInfo).port}`;
+});
+
+after(() => server.close());
+
+test("serves the home page as HTML", async () => {
+  const res = await fetch(base + "/");
+  assert.equal(res.status, 200);
+  assert.match(res.headers.get("content-type") ?? "", /text\/html/);
+  assert.match(await res.text(), /Plainpages/);
+});
+
+test("serves static CSS", async () => {
+  const res = await fetch(base + "/public/css/style.css");
+  assert.equal(res.status, 200);
+  assert.match(res.headers.get("content-type") ?? "", /text\/css/);
+});
+
+test("returns 404 for unknown routes", async () => {
+  const res = await fetch(base + "/missing");
+  assert.equal(res.status, 404);
+});
+
+test("resolveStaticPath blocks traversal, allows nested files", () => {
+  assert.equal(resolveStaticPath("/srv/public", "../app.ts"), null);
+  assert.equal(resolveStaticPath("/srv/public", "css/style.css"), "/srv/public/css/style.css");
+});
+
+test("contentTypeFor maps known and unknown extensions", () => {
+  assert.match(contentTypeFor("a.css"), /text\/css/);
+  assert.equal(contentTypeFor("a.bin"), "application/octet-stream");
+});

src/app.ts

@@ -0,0 +1,49 @@
+import { createServer, type Server } from "node:http";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import * as ejs from "ejs";
+import { serveStatic } from "./static.ts";
+
+const rootDir = join(dirname(fileURLToPath(import.meta.url)), "..");
+
+export interface AppOptions {
+  publicDir?: string;
+  viewsDir?: string;
+}
+
+export function createApp(options: AppOptions = {}): Server {
+  const publicDir = options.publicDir ?? join(rootDir, "public");
+  const viewsDir = options.viewsDir ?? join(rootDir, "views");
+
+  const render = (view: string, data: Record<string, unknown>): Promise<string> =>
+    ejs.renderFile(join(viewsDir, `${view}.ejs`), data);
+
+  return createServer(async (req, res) => {
+    try {
+      if (req.method !== "GET" && req.method !== "HEAD") {
+        res.writeHead(405, { "content-type": "text/plain; charset=utf-8" }).end("Method Not Allowed");
+        return;
+      }
+
+      const { pathname } = new URL(req.url ?? "/", "http://localhost");
+
+      if (pathname.startsWith("/public/")) {
+        await serveStatic(publicDir, pathname.slice("/public/".length), res);
+        return;
+      }
+
+      if (pathname === "/") {
+        res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+        res.end(await render("index", { title: "Plainpages" }));
+        return;
+      }
+
+      res.writeHead(404, { "content-type": "text/html; charset=utf-8" });
+      res.end(await render("404", { title: "Not found" }));
+    } catch (err) {
+      console.error(err);
+      if (!res.headersSent) res.writeHead(500, { "content-type": "text/plain; charset=utf-8" });
+      res.end("Internal Server Error");
+    }
+  });
+}

src/server.ts

@@ -0,0 +1,7 @@
+import { createApp } from "./app.ts";
+
+const port = Number(process.env["PORT"] ?? 3000);
+
+createApp().listen(port, () => {
+  console.log(`Listening on http://localhost:${port}`);
+});

src/static.ts

@@ -0,0 +1,55 @@
+import { createReadStream } from "node:fs";
+import { stat } from "node:fs/promises";
+import type { ServerResponse } from "node:http";
+import { extname, isAbsolute, join, relative } from "node:path";
+
+const contentTypes: Record<string, string> = {
+  ".css": "text/css; charset=utf-8",
+  ".html": "text/html; charset=utf-8",
+  ".ico": "image/x-icon",
+  ".jpeg": "image/jpeg",
+  ".jpg": "image/jpeg",
+  ".js": "text/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".svg": "image/svg+xml",
+  ".txt": "text/plain; charset=utf-8",
+  ".webp": "image/webp",
+  ".woff2": "font/woff2",
+};
+
+export function contentTypeFor(filePath: string): string {
+  return contentTypes[extname(filePath).toLowerCase()] ?? "application/octet-stream";
+}
+
+// Resolves a request path inside `dir`, or null if it would escape (path traversal).
+export function resolveStaticPath(dir: string, requestedPath: string): string | null {
+  const filePath = join(dir, requestedPath);
+  const rel = relative(dir, filePath);
+  return rel.startsWith("..") || isAbsolute(rel) ? null : filePath;
+}
+
+function plain(res: ServerResponse, status: number, body: string): void {
+  res.writeHead(status, { "content-type": "text/plain; charset=utf-8" }).end(body);
+}
+
+export async function serveStatic(dir: string, requestedPath: string, res: ServerResponse): Promise<void> {
+  let decoded: string;
+  try {
+    decoded = decodeURIComponent(requestedPath);
+  } catch {
+    return plain(res, 400, "Bad Request");
+  }
+
+  const filePath = resolveStaticPath(dir, decoded);
+  if (filePath === null) return plain(res, 403, "Forbidden");
+
+  try {
+    const info = await stat(filePath);
+    if (!info.isFile()) return plain(res, 404, "Not Found");
+    res.writeHead(200, { "content-length": info.size, "content-type": contentTypeFor(filePath) });
+    createReadStream(filePath).pipe(res);
+  } catch {
+    plain(res, 404, "Not Found");
+  }
+}

tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "lib": ["ESNext"],
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "target": "ESNext",
+    "types": ["node"],
+
+    "allowImportingTsExtensions": true,
+    "erasableSyntaxOnly": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "verbatimModuleSyntax": true,
+
+    "strict": true,
+    "exactOptionalPropertyTypes": true,
+    "noFallthroughCasesInSwitch": true,
+    "noImplicitOverride": true,
+    "noImplicitReturns": true,
+    "noUncheckedIndexedAccess": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "forceConsistentCasingInFileNames": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

views/404.ejs

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= title %></title>
+    <link rel="stylesheet" href="/public/css/style.css" />
+  </head>
+  <body>
+    <main>
+      <h1>404</h1>
+      <p>That page does not exist.</p>
+      <p><a href="/">Back home</a></p>
+    </main>
+  </body>
+</html>

views/index.ejs

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title><%= title %></title>
+    <link rel="stylesheet" href="/public/css/style.css" />
+    <link rel="icon" href="/public/favicon.svg" />
+  </head>
+  <body>
+    <%- include("partials/header", { title }) %>
+    <main>
+      <h1>Welcome to <%= title %></h1>
+      <p>A plain, server-rendered page. Edit <code>views/index.ejs</code> to change it.</p>
+    </main>
+    <footer>
+      <p>Served with Node.js + EJS.</p>
+    </footer>
+  </body>
+</html>

views/partials/header.ejs

@@ -0,0 +1,6 @@
+<header class="site-header">
+  <a class="brand" href="/"><%= title %></a>
+  <nav>
+    <a href="/">Home</a>
+  </nav>
+</header>