@madojs/mado 0.5.1 → 0.6.1

package/scripts/preview.mjs

@@ -1,28 +1,74 @@
-// Preview: a tiny production-like server that emulates nginx.conf on node:http.
+// Preview: a tiny production-like server that serves exactly out/ on node:http.
 //
-//   npm run preview
+//   mado preview
 //
 // What it does:
-//   1. npm run build (tsc)
-//   2. node scripts/bake.mjs   (generates SEO HTML when bake pages exist)
-//   3. node scripts/bundle.mjs (esbuild splitting + .gz/.br)
-//   4. Starts a static server on :4173 with:
+//   1. Reads `mado.config.json` to discover OUT (default `out/`) and PORT.
+//   2. If `out/` is missing AND we are in a project root, refuses to run and
+//      points the user at `mado release`. (Old auto-build behavior is opt-in
+//      via PREVIEW_AUTOBUILD=1 to stay backward-compatible for the framework
+//      repo.)
+//   3. Starts a static server with:
 //        - immutable cache for hashed bundles;
 //        - SPA fallback to index.html;
-//        - baked HTML priority over index.html;
+//        - baked HTML priority over the SPA shell;
 //        - precompressed .gz / .br serving via Accept-Encoding.
 //
-// Goal: see production-like output locally without Docker/nginx.
+// Goal: see production-like output locally without Docker/nginx, identical to
+// what a static host (nginx / Cloudflare Pages / S3) would serve.
 
 import { createServer } from "node:http";
 import { readFile, stat, access } from "node:fs/promises";
 import { extname, join, resolve, sep } from "node:path";
 import { spawnSync } from "node:child_process";
 
-const ROOT = resolve(process.cwd());
-const OUT = resolve(process.env.OUT_DIR ?? "out");
-const PORT = Number(process.env.PORT ?? 4173);
-const SKIP_BUILD = process.env.SKIP_BUILD === "1";
+import { loadConfig } from "./_config.mjs";
+
+// Tiny argv parser. Supports --flag, --flag=value, --flag value.
+function parsePreviewArgs(argv) {
+  const flags = {};
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--") continue;
+    if (a.startsWith("--")) {
+      const eq = a.indexOf("=");
+      if (eq >= 0) {
+        flags[a.slice(2, eq)] = a.slice(eq + 1);
+      } else {
+        const name = a.slice(2);
+        const next = argv[i + 1];
+        if (next !== undefined && !next.startsWith("-")) {
+          flags[name] = next;
+          i++;
+        } else {
+          flags[name] = true;
+        }
+      }
+    }
+  }
+  return flags;
+}
+
+const PREVIEW_FLAGS = parsePreviewArgs(process.argv.slice(2));
+
+const cfg = loadConfig({});
+const ROOT = cfg.projectRoot;
+const OUT = resolve(
+  ROOT,
+  process.env.OUT_DIR ?? cfg.build.out ?? "out",
+);
+// Baked HTML lives in <out>/baked/ by default (see scripts/bake.mjs and
+// mado.config.json bake.outDir). Preview serves it with priority over the
+// SPA shell so URLs that have a prerendered HTML page render real markup
+// instead of an empty <div id="app"></div>.
+const BAKED = resolve(
+  ROOT,
+  process.env.BAKED_DIR ?? cfg.bake?.outDir ?? join(cfg.build.out ?? "out", "baked"),
+);
+const PORT = Number(PREVIEW_FLAGS.port ?? process.env.PORT ?? cfg.dev?.port ?? 4173);
+const HOST = String(PREVIEW_FLAGS.host ?? process.env.HOST ?? cfg.dev?.host ?? "localhost");
+const AUTOBUILD = process.env.PREVIEW_AUTOBUILD === "1";
+const SKIP_BUILD = process.env.SKIP_BUILD === "1" || !AUTOBUILD;
 
 const MIME = {
   ".html": "text/html; charset=utf-8",
@@ -56,7 +102,18 @@ if (!SKIP_BUILD) {
 }
 
 if (!(await exists(OUT))) {
-  console.error(`[preview] missing ${OUT}/ — check the steps above`);
+  console.error(
+    `[preview] missing ${OUT}/ — run \`mado release\` (or \`mado bundle\`) first.`,
+  );
+  process.exit(1);
+}
+
+const spaShell = join(OUT, "index.html");
+if (!(await exists(spaShell))) {
+  console.error(
+    `[preview] missing ${spaShell} — \`mado bundle\` did not produce an HTML entry.\n` +
+      `[preview] Without it any non-baked route will 404 instead of falling back to the SPA.`,
+  );
   process.exit(1);
 }
 
@@ -104,8 +161,31 @@ const server = createServer(async (req, res) => {
   }
 });
 
-server.listen(PORT, () => {
-  console.log(`\n[preview] http://localhost:${PORT}/  (Ctrl-C — stop)\n`);
+server.on("error", (err) => {
+  if (err.code === "EPERM" || err.code === "EACCES") {
+    console.error(
+      `[preview] failed to bind ${HOST}:${PORT}: ${err.message}\n` +
+        `[preview] tip: this sandbox may disallow binding "${HOST}".\n` +
+        `[preview] try:  mado preview --host 127.0.0.1`,
+    );
+  } else {
+    console.error(
+      `[preview] failed to listen on ${HOST}:${PORT}: ${err.message}`,
+    );
+  }
+  process.exit(1);
+});
+
+server.listen(PORT, HOST, async () => {
+  const urlHost = HOST === "0.0.0.0" || HOST === "::" ? "localhost" : HOST;
+  const bakedReady = await exists(BAKED);
+  console.log("");
+  console.log("Mado preview (production-like)");
+  console.log(`  url:    http://${urlHost}:${PORT}/`);
+  console.log(`  out:    ${OUT}`);
+  console.log(`  baked:  ${bakedReady ? BAKED : "(none — SPA-only)"}`);
+  console.log("  (Ctrl-C to stop)");
+  console.log("");
 });
 
 // ---------- helpers ----------
@@ -135,14 +215,33 @@ function basenameSafe(p) {
 async function resolveTarget(pathname) {
   if (pathname === "/") pathname = "/index.html";
 
+  // 1) Baked HTML wins. `mado bake` writes prerendered pages into
+  //    <out>/baked/<path>/index.html. Serve them with priority over the
+  //    SPA shell so search engines AND human users hitting a prerendered
+  //    URL see real content immediately. Without this branch preview
+  //    served the empty SPA shell for every URL, which looked like a
+  //    "blank page" bug even when bake had succeeded.
+  if (await exists(BAKED)) {
+    if (!extname(pathname) || pathname.endsWith("/index.html")) {
+      const bakedDir = join(BAKED, pathname.replace(/\/index\.html$/, ""));
+      const bakedIdx = join(bakedDir, "index.html");
+      if (await exists(bakedIdx)) return bakedIdx;
+    }
+    // Direct file (sitemap.xml etc.) from the baked dir.
+    const bakedFile = resolve(join(BAKED, pathname));
+    if (bakedFile.startsWith(BAKED + sep) && (await exists(bakedFile))) {
+      const s = await stat(bakedFile);
+      if (!s.isDirectory()) return bakedFile;
+    }
+  }
+
   const candidate = resolve(join(OUT, pathname));
   if (!candidate.startsWith(OUT + sep) && candidate !== OUT) return null;
 
-  // 1) Exact match
+  // 2) Exact match inside out/.
   if (await exists(candidate)) {
     const s = await stat(candidate);
     if (s.isDirectory()) {
-      // Baked priority: /product/foo/ → /product/foo/index.html
       const idx = join(candidate, "index.html");
       if (await exists(idx)) return idx;
     } else {
@@ -150,15 +249,20 @@ async function resolveTarget(pathname) {
     }
   }
 
-  // 2) /foo → /foo/index.html (for baked pages without trailing slash)
+  // 3) /foo → /foo/index.html (for sub-folders without trailing slash).
   if (!extname(pathname)) {
     const asDir = join(OUT, pathname, "index.html");
     if (await exists(asDir)) return asDir;
   }
 
-  // 3) SPA-fallback
-  const spa = join(OUT, "index.html");
-  if (await exists(spa)) return spa;
+  // 4) SPA-fallback: any non-asset path falls back to the SPA shell so
+  //    client-side routing handles it. Asset-looking paths (with an
+  //    extension) deliberately 404 instead — otherwise a 200 on
+  //    /missing.png would mask real bugs.
+  if (!extname(pathname)) {
+    const spa = join(OUT, "index.html");
+    if (await exists(spa)) return spa;
+  }
 
   return null;
 }

package/server/serve.mjs

@@ -12,17 +12,72 @@
 // examples/<EXAMPLE>/index.html so the client router works from root, just
 // like a production SPA deploy.
 
-import { createServer } from "node:http";
-import { readFile, readdir, stat } from "node:fs/promises";
-import { watch, existsSync } from "node:fs";
+import { createServer, request as httpRequest } from "node:http";
+import { request as httpsRequest } from "node:https";
+import { readFile, readdir, readFile as readFileAsync, stat } from "node:fs/promises";
+import { watch, existsSync, readFileSync } from "node:fs";
 import { extname, join, resolve, sep } from "node:path";
 import { createHash } from "node:crypto";
 
 const ROOT = resolve(process.cwd());
-const PORT = Number(process.env.PORT ?? 5173);
-const HMR = process.env.NO_HMR !== "1";
 
-const EXAMPLE = process.argv[2] ?? process.env.MADO_EXAMPLE ?? process.env.EXAMPLE ?? "";
+// Optional mado.config.json — used for dev.proxy and dev.port. Read with a
+// hand-rolled JSON parse to avoid a circular dep with scripts/_config.mjs
+// (this server is launched from cli.mjs and runs in its own Node process).
+const CONFIG = (() => {
+  try {
+    const file = join(ROOT, "mado.config.json");
+    if (!existsSync(file)) return {};
+    return JSON.parse(readFileSync(file, "utf8")) ?? {};
+  } catch {
+    return {};
+  }
+})();
+const PROXY_RULES = Object.entries(CONFIG.dev?.proxy ?? {}); // [["/api", "http://localhost:3000"], ...]
+
+// Tiny argv parser. Supports --flag, --flag=value, --flag value. The first
+// non-flag positional is the EXAMPLE name (legacy behavior). Anything that
+// looks like a flag is consumed before we pick the positional, so calls like
+// `mado dev -- --host 127.0.0.1` work as documented.
+function parseArgs(argv) {
+  const flags = {};
+  const positional = [];
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--") continue;
+    if (a.startsWith("--")) {
+      const eq = a.indexOf("=");
+      if (eq >= 0) {
+        flags[a.slice(2, eq)] = a.slice(eq + 1);
+      } else {
+        const name = a.slice(2);
+        const next = argv[i + 1];
+        if (next !== undefined && !next.startsWith("-")) {
+          flags[name] = next;
+          i++;
+        } else {
+          flags[name] = true;
+        }
+      }
+    } else {
+      positional.push(a);
+    }
+  }
+  return { flags, positional };
+}
+
+const { flags: CLI_FLAGS, positional: CLI_POSITIONAL } = parseArgs(
+  process.argv.slice(2),
+);
+
+const PORT = Number(CLI_FLAGS.port ?? process.env.PORT ?? CONFIG.dev?.port ?? 5173);
+// HOST is opt-in. Default to "localhost" (loopback) which is friendlier in
+// sandboxes that disallow binding 0.0.0.0 (EPERM on listen). Users can opt
+// into LAN exposure with `mado dev --host 0.0.0.0` or HOST=0.0.0.0.
+const HOST = String(CLI_FLAGS.host ?? process.env.HOST ?? CONFIG.dev?.host ?? "localhost");
+const HMR = CLI_FLAGS.hmr !== false && process.env.NO_HMR !== "1";
+
+const EXAMPLE = CLI_POSITIONAL[0] ?? process.env.MADO_EXAMPLE ?? process.env.EXAMPLE ?? "";
 const EXAMPLE_DIR = EXAMPLE
   ? resolve(join(ROOT, "examples", EXAMPLE))
   : "";
@@ -118,6 +173,16 @@ const server = createServer(async (req, res) => {
     const url = new URL(req.url ?? "/", `http://${req.headers.host}`);
     pathname = decodeURIComponent(url.pathname);
 
+    // Dev proxy: forward matching prefixes to an upstream backend, so the
+    // browser can reach the SPA and the API on a single origin without CORS.
+    const proxyRule = PROXY_RULES.find(([prefix]) => pathname.startsWith(prefix));
+    if (proxyRule) {
+      const [prefix, upstream] = proxyRule;
+      await proxyForward({ req, res, prefix, upstream, pathname, search: url.search });
+      reason = `proxy → ${upstream}`;
+      return;
+    }
+
     // SSE endpoint for HMR.
     if (pathname === "/__hmr") {
       res.writeHead(200, {
@@ -159,7 +224,30 @@ const server = createServer(async (req, res) => {
       const s = await stat(target);
       if (s.isDirectory()) target = join(target, "index.html");
     } catch {
-      if (!extname(pathname)) {
+      // Public assets: in production `mado release` copies public/* into out/.
+      // In dev we surface them from public/ directly so favicon.svg, robots.txt,
+      // og-image.png, etc. don't 404 (and so dev/prod behavior matches).
+      const publicCandidate = resolve(join(ROOT, "public", pathname));
+      if (
+        publicCandidate.startsWith(resolve(join(ROOT, "public")) + sep) &&
+        existsSync(publicCandidate)
+      ) {
+        try {
+          const ps = await stat(publicCandidate);
+          if (!ps.isDirectory()) {
+            target = publicCandidate;
+            reason = "public/";
+          } else if (!extname(pathname)) {
+            target = fallbackIndex;
+          } else {
+            reason = "file not found";
+            res.writeHead(404).end("not found");
+            return;
+          }
+        } catch {
+          target = fallbackIndex;
+        }
+      } else if (!extname(pathname)) {
         target = fallbackIndex;
       } else {
         reason = "file not found";
@@ -275,11 +363,65 @@ async function buildPreloadHints() {
 }
 
 server.on("error", (err) => {
-  console.error(`[serve] failed to listen on port ${PORT}: ${err.message}`);
+  if (err.code === "EPERM" || err.code === "EACCES") {
+    console.error(
+      `[serve] failed to bind ${HOST}:${PORT}: ${err.message}\n` +
+        `[serve] tip: this sandbox may disallow binding "${HOST}".\n` +
+        `[serve] try:  mado dev --host 127.0.0.1   (or HOST=127.0.0.1)`,
+    );
+  } else {
+    console.error(`[serve] failed to listen on ${HOST}:${PORT}: ${err.message}`);
+  }
   process.exit(1);
 });
 
-server.listen(PORT, () => {
+async function proxyForward({ req, res, prefix, upstream, pathname, search }) {
+  // Strip the prefix only if the upstream URL itself ends with `/`; otherwise
+  // forward the full pathname so the backend sees /api/...
+  let upstreamUrl;
+  try {
+    upstreamUrl = new URL(upstream);
+  } catch {
+    res.writeHead(502).end(`bad upstream: ${upstream}`);
+    return;
+  }
+  const target = new URL(upstream);
+  // Compose path: <upstream.pathname rstrip "/"> + <pathname> + <search>
+  const tail = pathname; // keep the original /api/... so backends route normally
+  target.pathname = (target.pathname.replace(/\/$/, "")) + tail;
+  target.search = search;
+
+  const lib = target.protocol === "https:" ? httpsRequest : httpRequest;
+  const upstreamReq = lib(
+    target,
+    {
+      method: req.method,
+      headers: {
+        ...req.headers,
+        host: target.host,
+      },
+    },
+    (upstreamRes) => {
+      // Forward status and headers, then pipe the body.
+      res.writeHead(upstreamRes.statusCode ?? 502, upstreamRes.headers);
+      upstreamRes.pipe(res);
+    },
+  );
+  upstreamReq.on("error", (err) => {
+    console.error(`[serve] proxy error for ${pathname} → ${target.href}:`, err.message);
+    if (!res.headersSent) {
+      res.writeHead(502, { "content-type": "text/plain; charset=utf-8" });
+      res.end(`proxy upstream unavailable: ${target.host}\n${err.message}`);
+    } else {
+      res.end();
+    }
+  });
+  req.pipe(upstreamReq);
+  // Reference unused arg so lint is happy.
+  void prefix;
+}
+
+server.listen(PORT, HOST, () => {
   const distReady = existsSync(join(ROOT, "dist/src/index.js"))
     || existsSync(join(ROOT, "dist/main.js"));
   const mount = EXAMPLE
@@ -287,14 +429,23 @@ server.listen(PORT, () => {
     : existsSync(EXAMPLES_INDEX)
       ? "examples/index.html landing"
       : "index.html app";
+  // Show "localhost" in the URL when bound to 0.0.0.0 — easier to click.
+  const urlHost = HOST === "0.0.0.0" || HOST === "::" ? "localhost" : HOST;
   console.log("");
   console.log("Mado dev server");
-  console.log(`  url:      http://localhost:${PORT}/`);
+  console.log(`  url:      http://${urlHost}:${PORT}/`);
+  console.log(`  host:     ${HOST}`);
   console.log(`  root:     ${ROOT}`);
   console.log(`  mount:    ${mount}`);
   console.log(`  hmr:      ${HMR ? "on" : "off"}`);
   console.log(`  preload:  ${PRELOAD}`);
   console.log(`  dist:     ${distReady ? "ready" : "missing (run mado build)"}`);
+  if (PROXY_RULES.length > 0) {
+    console.log("  proxy:");
+    for (const [prefix, upstream] of PROXY_RULES) {
+      console.log(`            ${prefix.padEnd(10)} → ${upstream}`);
+    }
+  }
   if (!EXAMPLE && existsSync(EXAMPLES_INDEX)) {
     console.log("  try:      mado serve basic");
     console.log("            mado serve showcase");

package/starters/admin/README.md

@@ -0,0 +1,63 @@
+# __APP_NAME__
+
+A starter Mado admin app: nested routes, a guarded admin shell, a blessed API
+client, and a one-shot release pipeline.
+
+## What you get
+
+- `src/main.ts` — 8 lines: mount the router into `#app`. Layouts are NOT
+  declared here, only in `src/routes.ts`.
+- `src/routes.ts` — nested manifest with three groups:
+  - `/` → public landing (bakeable),
+  - `/login` → centered `auth` layout,
+  - `/admin` → `app` layout, **guarded** by `requireAuth`.
+- `src/layouts/app.ts` — admin shell (top bar + sidebar + content slot).
+- `src/layouts/auth.ts` — centered card for sign-in.
+- `src/lib/api.ts` — `createApiClient(baseUrl)` with bearer token, 401-refresh
+  retry, JSON in/out and a typed `ApiError`.
+- `src/lib/auth.ts` — memory-only `accessToken`, `restoreSession()` from an
+  HttpOnly refresh cookie, and the `requireAuth` guard.
+- `src/components/` — tiny `x-button` and `x-input` Web Components.
+- `mado.config.json` — one config file. Includes a `dev.proxy` for `/api`.
+
+## Commands
+
+```bash
+npm run dev        # tsc -w + dev server on http://localhost:5173, HMR on
+npm run build      # tsc → dist/
+npm run typecheck  # tsc --noEmit
+npm run bundle     # esbuild → out/assets/
+npm run bake       # prerender baked routes → out/baked/
+npm run release    # typecheck + build + bundle + bake + copy public/ → out/
+npm run preview    # serve out/ locally (production rehearsal)
+```
+
+To deploy, run `npm run release` and upload the entire `out/` directory
+anywhere static (nginx, Cloudflare Pages, S3, Netlify, GitHub Pages, …).
+
+## Backend expectations
+
+The blessed `api` client speaks JSON. The auth recipe expects:
+
+- `POST /api/auth/login` → `{ accessToken: string }` (sets refresh cookie)
+- `POST /api/auth/refresh` → `{ accessToken: string }` (reads refresh cookie)
+- `POST /api/auth/logout` → 204 (clears refresh cookie)
+
+Change `mado.config.json#dev.proxy` to point at your backend in development.
+
+## Where things live
+
+| What                | Where                                |
+|---------------------|--------------------------------------|
+| New URL             | `src/pages/*.ts` + add to `routes.ts`|
+| New protected URL   | inside the `/admin` layout block     |
+| New layout          | `src/layouts/*.ts`                   |
+| New reusable widget | `src/components/x-*.ts`              |
+| New API call        | `src/lib/api.ts` (add a method)      |
+| New global signal   | `src/lib/<name>.ts`                  |
+| Static image        | `public/<file>`                      |
+
+See the framework docs:
+[`docs/en/11-layouts.md`](https://github.com/madojs/mado/blob/main/docs/en/11-layouts.md),
+[`docs/en/12-auth-and-api.md`](https://github.com/madojs/mado/blob/main/docs/en/12-auth-and-api.md),
+[`docs/en/13-deployment.md`](https://github.com/madojs/mado/blob/main/docs/en/13-deployment.md).

package/starters/admin/index.html

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>__APP_NAME__</title>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <!--
+      Paths below MUST be root-absolute (start with "/"), not "./...".
+      Mado is an SPA: hard-refreshing /admin/orders/42 still serves this same
+      index.html, and the browser resolves "./dist/main.js" against the
+      current URL → /admin/orders/dist/main.js → 404 → blank page.
+      Root-absolute paths always resolve to /dist/main.js regardless of route.
+    -->
+    <script type="importmap">
+      {
+        "imports": {
+          "@madojs/mado": "/node_modules/@madojs/mado/dist/src/index.js",
+          "@madojs/mado/": "/node_modules/@madojs/mado/dist/src/"
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/dist/main.js"></script>
+  </body>
+</html>

package/starters/admin/mado.config.json

@@ -0,0 +1,22 @@
+{
+  "dev": {
+    "port": 5173,
+    "proxy": {
+      "/api": "http://localhost:3000"
+    }
+  },
+  "build": {
+    "out": "out",
+    "dist": "dist",
+    "publicDir": "public"
+  },
+  "bake": {
+    "entry": "src/routes.ts",
+    "template": "index.html",
+    "baseUrl": "https://example.com"
+  },
+  "bundle": {
+    "splitting": true,
+    "compress": ["gz", "br"]
+  }
+}

package/starters/admin/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "__PACKAGE_NAME__",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "mado build",
+    "typecheck": "mado typecheck",
+    "dev": "mado dev",
+    "serve": "mado serve",
+    "bundle": "mado bundle",
+    "bake": "mado bake",
+    "release": "mado release",
+    "preview": "mado preview"
+  },
+  "dependencies": {
+    "@madojs/mado": "__MADOJS_VERSION__"
+  },
+  "devDependencies": {
+    "esbuild": "^0.24.0",
+    "linkedom": "^0.18.0",
+    "typescript": "^6.0.3"
+  }
+}

package/starters/admin/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="#1f6feb"/>
+  <text x="16" y="22" text-anchor="middle" font-family="ui-sans-serif, system-ui, sans-serif" font-weight="700" font-size="18" fill="white">M</text>
+</svg>

package/starters/admin/src/components/x-button.ts

@@ -0,0 +1,55 @@
+// <x-button variant="primary|ghost|danger" ?disabled>
+//
+// Wraps a native <button> so it can be slotted with text/icon and styled
+// consistently across the app. Click events bubble naturally because Shadow
+// DOM is `mode: open` and composed: true is the default for `click`.
+
+import { component, css, html } from "@madojs/mado";
+
+component(
+  "x-button",
+  ({ host }) => () => {
+    const variant = host.getAttribute("variant") ?? "primary";
+    const disabled = host.hasAttribute("disabled");
+    return html`
+      <button data-variant=${variant} ?disabled=${disabled}>
+        <slot></slot>
+      </button>
+    `;
+  },
+  {
+    styles: css`
+      :host { display: inline-flex; }
+      button {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-2);
+        padding: 8px 14px;
+        border-radius: var(--radius-sm);
+        border: 1px solid transparent;
+        font: inherit;
+        cursor: pointer;
+        background: var(--accent);
+        color: var(--accent-fg);
+        transition: filter .12s ease;
+      }
+      button:hover:not(:disabled) { filter: brightness(1.07); }
+      button:active:not(:disabled) { filter: brightness(.95); }
+      button:disabled { opacity: .55; cursor: not-allowed; }
+
+      button[data-variant="ghost"] {
+        background: transparent;
+        color: var(--fg);
+        border-color: var(--border);
+      }
+      button[data-variant="ghost"]:hover:not(:disabled) {
+        background: var(--bg-elevated);
+      }
+
+      button[data-variant="danger"] {
+        background: var(--danger);
+        color: white;
+      }
+    `,
+  },
+);