@madojs/mado 0.10.0 → 0.11.0

package/server/serve.mjs

@@ -1,455 +0,0 @@
-// Tiny static server on node:http with dev features (ETag + HMR through SSE).
-// No dependencies.
-//
-//   PORT=5173 node server/serve.mjs
-//   NO_HMR=1 node server/serve.mjs                # disable HMR
-//   node server/serve.mjs basic                   # mount examples/basic/ at /
-//   EXAMPLE=showcase node server/serve.mjs        # mount examples/showcase/ at /
-//
-// Without EXAMPLE, / serves examples/index.html when running inside the Mado
-// repository, or ./index.html when running inside a generated app.
-// With EXAMPLE, all extensionless and /index.html requests fall back to
-// examples/<EXAMPLE>/index.html so the client router works from root, just
-// like a production SPA deploy.
-
-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());
-
-// 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))
-  : "";
-const EXAMPLE_INDEX = EXAMPLE ? join(EXAMPLE_DIR, "index.html") : "";
-const EXAMPLES_INDEX = join(ROOT, "examples", "index.html");
-const APP_INDEX = join(ROOT, "index.html");
-const DEFAULT_INDEX = existsSync(EXAMPLES_INDEX) ? EXAMPLES_INDEX : APP_INDEX;
-
-if (EXAMPLE) {
-  if (!existsSync(EXAMPLE_INDEX)) {
-    console.error(
-      `[serve] EXAMPLE=${EXAMPLE}: file not found: ${EXAMPLE_INDEX}`,
-    );
-    process.exit(1);
-  }
-}
-
-const MIME = {
-  ".html": "text/html; charset=utf-8",
-  ".js": "text/javascript; charset=utf-8",
-  ".mjs": "text/javascript; charset=utf-8",
-  ".css": "text/css; charset=utf-8",
-  ".json": "application/json; charset=utf-8",
-  ".svg": "image/svg+xml",
-  ".ico": "image/x-icon",
-  ".map": "application/json; charset=utf-8",
-};
-
-// ---------- HMR through Server-Sent Events ----------
-//
-// Open SSE connections live in a Set. Any file change broadcasts "reload".
-// The client reloads the page. This is deliberately full reload rather than
-// true HMR: we do not need preserved state, and the behavior stays simple.
-
-const sseClients = new Set();
-
-function broadcast(event, data) {
-  for (const res of sseClients) {
-    res.write(`event: ${event}\ndata: ${data}\n\n`);
-  }
-}
-
-if (HMR) {
-  // Debounce reload: tsc -w often changes several files in a row.
-  let timer = null;
-  const trigger = () => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      console.log(`[hmr] reload ${sseClients.size} client(s)`);
-      broadcast("reload", Date.now());
-    }, 80);
-  };
-
-  for (const dir of ["dist", "examples"]) {
-    try {
-      watch(join(ROOT, dir), { recursive: true }, trigger);
-    } catch {
-      /* dir may not exist on startup */
-    }
-  }
-}
-
-const HMR_CLIENT = `
-// Mado HMR client (auto-injected by serve.mjs)
-(() => {
-  if (window.__madoHmr) return;
-  window.__madoHmr = true;
-  const es = new EventSource('/__hmr');
-  es.addEventListener('reload', () => location.reload());
-  es.addEventListener('error', () => {
-    // The server may be gone; try reconnecting after 1s.
-    setTimeout(() => location.reload(), 1000);
-  });
-})();
-`.trim();
-
-// ---------- Server ----------
-
-const server = createServer(async (req, res) => {
-  const started = Date.now();
-  let pathname = "/";
-  let reason = "";
-  res.on("finish", () => {
-    const ms = Date.now() - started;
-    const type = res.getHeader("content-type") ?? "-";
-    const suffix = reason ? ` ${reason}` : "";
-    console.log(
-      `[serve] ${req.method ?? "GET"} ${pathname} ${res.statusCode} ${ms}ms ${type}${suffix}`,
-    );
-  });
-
-  try {
-    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, {
-        "content-type": "text/event-stream",
-        "cache-control": "no-cache",
-        connection: "keep-alive",
-      });
-      res.write("retry: 1000\n\n");
-      sseClients.add(res);
-      console.log(`[hmr] client connected (${sseClients.size})`);
-      req.on("close", () => {
-        sseClients.delete(res);
-        console.log(`[hmr] client disconnected (${sseClients.size})`);
-      });
-      return;
-    }
-
-    // A mounted example owns root and SPA fallback. Otherwise serve the
-    // examples index page.
-    const fallbackIndex = EXAMPLE ? EXAMPLE_INDEX : DEFAULT_INDEX;
-
-    if (pathname === "/") {
-      // Resolved through fallback below.
-    }
-
-    const filePath =
-      pathname === "/" ? fallbackIndex : resolve(join(ROOT, pathname));
-
-    if (filePath !== fallbackIndex) {
-      if (!filePath.startsWith(ROOT + sep) && filePath !== ROOT) {
-        reason = "forbidden path";
-        res.writeHead(403).end("forbidden");
-        return;
-      }
-    }
-
-    let target = filePath;
-    try {
-      const s = await stat(target);
-      if (s.isDirectory()) target = join(target, "index.html");
-    } catch {
-      // 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";
-        res.writeHead(404).end("not found");
-        return;
-      }
-    }
-
-    let data = await readFile(target);
-
-    // ETag: content hash. If-None-Match → 304.
-    const etag = `"${createHash("sha1").update(data).digest("base64url")}"`;
-    if (req.headers["if-none-match"] === etag) {
-      res.writeHead(304, { etag });
-      res.end();
-      return;
-    }
-
-    // HMR injector: add the client script before </body>.
-    const type =
-      MIME[extname(target).toLowerCase()] ?? "application/octet-stream";
-
-    if (type.startsWith("text/html")) {
-      let text = data.toString("utf8");
-      // modulepreload hints: tell the browser to fetch the framework core and
-      // the mounted example's pages while HTML is still being parsed.
-      const preload = await buildPreloadHints();
-      if (preload) {
-        text = text.replace(/<\/head>/i, `${preload}\n  </head>`);
-      }
-      if (HMR) {
-        text = text.replace(
-          /<\/body>/i,
-          `<script>${HMR_CLIENT}</script>\n  </body>`,
-        );
-      }
-      data = Buffer.from(text);
-    }
-
-    res.writeHead(200, {
-      "content-type": type,
-      etag,
-      "cache-control": "no-cache",
-    });
-    res.end(data);
-  } catch (err) {
-    reason = "unhandled error";
-    console.error("[serve] error:", err);
-    res.writeHead(500).end(String(err));
-  }
-});
-
-// ---------- modulepreload hints ----------
-//
-// Simple heuristic, no AST parsing:
-//   1. /dist/src/index.js — framework core, always needed
-//   2. /dist/examples/<EXAMPLE>/main.js — app entry
-//   3. /dist/examples/<EXAMPLE>/routes.js — route manifest
-//   4. /dist/examples/<EXAMPLE>/pages/*.js — all pages
-//      (without them the first router click waterfalls)
-//
-// Disable with PRELOAD=0. Limit to the core with PRELOAD=core.
-// Default is full (all pages).
-
-const PRELOAD = process.env.PRELOAD ?? "full";
-
-let cachedPreloadHints = null;
-let cachedPreloadAt = 0;
-const PRELOAD_CACHE_MS = HMR ? 1000 : 60_000;
-
-async function buildPreloadHints() {
-  if (PRELOAD === "0" || PRELOAD === "off" || PRELOAD === "false") return "";
-  const now = Date.now();
-  if (cachedPreloadHints !== null && now - cachedPreloadAt < PRELOAD_CACHE_MS) {
-    return cachedPreloadHints;
-  }
-  const hrefs = [];
-  // core
-  if (existsSync(join(ROOT, "dist/src/index.js"))) {
-    hrefs.push("/dist/src/index.js");
-  }
-  if (EXAMPLE) {
-    const exampleDist = join(ROOT, "dist", "examples", EXAMPLE);
-    for (const f of ["main.js", "routes.js"]) {
-      if (existsSync(join(exampleDist, f))) {
-        hrefs.push(`/dist/examples/${EXAMPLE}/${f}`);
-      }
-    }
-    if (PRELOAD === "full") {
-      const pagesDir = join(exampleDist, "pages");
-      if (existsSync(pagesDir)) {
-        try {
-          for (const file of await readdir(pagesDir)) {
-            if (file.endsWith(".js")) {
-              hrefs.push(`/dist/examples/${EXAMPLE}/pages/${file}`);
-            }
-          }
-        } catch {
-          /* ignore */
-        }
-      }
-    }
-  } else if (!existsSync(EXAMPLES_INDEX)) {
-    if (existsSync(join(ROOT, "dist/main.js"))) {
-      hrefs.push("/dist/main.js");
-    }
-  }
-  cachedPreloadHints = hrefs
-    .map((h) => `  <link rel="modulepreload" href="${h}">`)
-    .join("\n");
-  cachedPreloadAt = now;
-  return cachedPreloadHints;
-}
-
-server.on("error", (err) => {
-  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);
-});
-
-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
-    ? `examples/${EXAMPLE}/ -> /`
-    : 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://${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");
-    console.log("            mado serve tickets");
-  }
-  console.log("");
-});

package/starters/admin/README.md

@@ -1,63 +0,0 @@
-# __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

@@ -1,28 +0,0 @@
-<!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

@@ -1,22 +0,0 @@
-{
-  "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

@@ -1,24 +0,0 @@
-{
-  "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.28.0",
-    "linkedom": "^0.18.12",
-    "typescript": "^6.0.3"
-  }
-}

package/starters/admin/public/favicon.svg

@@ -1,4 +0,0 @@
-<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

@@ -1,82 +0,0 @@
-// <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.
-//
-// Handles two Shadow DOM gotchas out of the box:
-//   1. Reactive attributes via ctx.attr() — external ?disabled changes
-//      re-render the inner button automatically.
-//   2. Form submit — a <button type="submit"> inside Shadow DOM cannot
-//      trigger <form> submit in Light DOM (spec limitation). We call
-//      form.requestSubmit() from a click handler to bridge this gap.
-
-import { component, css, html } from "@madojs/mado";
-
-component(
-  "x-button",
-  ({ host, attr }) => {
-    const variant = attr("variant", "primary");
-    const disabled = attr("disabled");
-
-    const handleClick = () => {
-      const typeAttr = host.getAttribute("type");
-      if (typeAttr === "button" || typeAttr === "reset") return;
-      const form = host.closest("form");
-      if (form && !host.hasAttribute("disabled")) form.requestSubmit();
-    };
-
-    return () => html`
-      <button
-        data-variant=${variant()}
-        ?disabled=${() => disabled() !== ""}
-        @click=${handleClick}
-      >
-        <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 0.12s ease;
-      }
-      button:hover:not(:disabled) {
-        filter: brightness(1.07);
-      }
-      button:active:not(:disabled) {
-        filter: brightness(0.95);
-      }
-      button:disabled {
-        opacity: 0.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;
-      }
-    `,
-  },
-);