@madojs/mado 0.12.0 → 0.13.0

package/scripts/cli/run.mjs

@@ -3,6 +3,8 @@ import { existsSync } from "node:fs";
 import { readdir, readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 
+import { logger } from "../logger.mjs";
+
 export async function run(cmd, args, options = {}) {
   const child = spawn(cmd, args, {
     cwd: options.cwd,
@@ -48,7 +50,7 @@ export function resolvePackageBin(ctx, pkg, binPath) {
   if (existsSync(projectPath)) return projectPath;
   const packagePath = join(ctx.packageRoot, "node_modules", pkg, binPath);
   if (existsSync(packagePath)) return packagePath;
-  console.error(`[mado] missing ${pkg}. Install it in this project: npm i -D ${pkg}`);
+  logger.error("mado", "missing-package", `missing ${pkg}. Install it in this project: npm i -D ${pkg}`);
   process.exit(1);
 }
 
@@ -57,7 +59,7 @@ export function resolveBin(ctx, bin) {
   if (existsSync(projectPath)) return projectPath;
   const packagePath = join(ctx.packageRoot, "node_modules", bin);
   if (!existsSync(packagePath)) {
-    console.error(`[mado] missing ${bin}. Run npm install first.`);
+    logger.error("mado", "missing-binary", `missing ${bin}. Run npm install first.`);
     process.exit(1);
   }
   return packagePath;
@@ -66,7 +68,7 @@ export function resolveBin(ctx, bin) {
 export async function writeIfMissing(path, content, logPrefix = "[mado]") {
   if (existsSync(path)) return;
   await writeFile(path, content);
-  console.log(`${logPrefix} wrote ${path}`);
+  logger.info("release", "write", `wrote ${path}`, { prefix: logPrefix });
 }
 
 export async function listTestFiles(projectRoot) {

package/scripts/logger.mjs

@@ -0,0 +1,117 @@
+const LEVELS = { debug: 10, info: 20, warn: 30, error: 40, silent: 50 };
+const COLORS = {
+  debug: "\u001b[2m",
+  info: "\u001b[36m",
+  warn: "\u001b[33m",
+  error: "\u001b[31m",
+};
+
+let level = normaliseLevel(process.env.MADO_LOG_LEVEL) ?? "info";
+let format = normaliseFormat(process.env.MADO_LOG_FORMAT) ?? "auto";
+
+export function configureLogger(argv) {
+  const clean = [];
+  for (let index = 0; index < argv.length; index++) {
+    const arg = argv[index];
+    const [name, inline] = arg.split("=", 2);
+    if (name === "--log-level" || name === "--log-format") {
+      const value = inline ?? argv[++index];
+      if (!value) throw new Error(`${name} requires a value`);
+      if (name === "--log-level") {
+        const next = normaliseLevel(value);
+        if (!next) throw new Error(`invalid log level: ${value}`);
+        level = next;
+      } else {
+        const next = normaliseFormat(value);
+        if (!next) throw new Error(`invalid log format: ${value}`);
+        format = next;
+      }
+      continue;
+    }
+    if (arg === "--no-color") {
+      format = "plain";
+      continue;
+    }
+    clean.push(arg);
+  }
+  return clean;
+}
+
+export function diagnostic(levelName, scope, code, message, data) {
+  if (LEVELS[levelName] < LEVELS[level]) return;
+  const record = {
+    timestamp: new Date().toISOString(),
+    level: levelName,
+    scope,
+    code,
+    message,
+    ...(data === undefined ? {} : { data }),
+  };
+  const stream = levelName === "warn" || levelName === "error"
+    ? process.stderr
+    : process.stdout;
+  if (resolvedFormat(stream) === "json") {
+    stream.write(`${JSON.stringify(record, safeJson)}\n`);
+    return;
+  }
+  const prefix = scope === "mado" ? "[mado]" : `[${scope}]`;
+  const suffix = data === undefined ? "" : ` ${safePreview(data)}`;
+  const line = `${prefix}${code ? ` ${code}` : ""} ${message}${suffix}`;
+  if (resolvedFormat(stream) === "pretty") {
+    stream.write(`${COLORS[levelName] ?? ""}${line}\u001b[0m\n`);
+  } else {
+    stream.write(`${line}\n`);
+  }
+}
+
+export const logger = {
+  debug(scope, code, message, data) {
+    diagnostic("debug", scope, code, message, data);
+  },
+  info(scope, code, message, data) {
+    diagnostic("info", scope, code, message, data);
+  },
+  warn(scope, code, message, data) {
+    diagnostic("warn", scope, code, message, data);
+  },
+  error(scope, code, message, data) {
+    diagnostic("error", scope, code, message, data);
+  },
+};
+
+function resolvedFormat(stream) {
+  if (format !== "auto") return format;
+  if (process.env.NO_COLOR !== undefined || !stream.isTTY) return "plain";
+  return "pretty";
+}
+
+function normaliseLevel(value) {
+  if (!value) return null;
+  const candidate = String(value).toLowerCase();
+  return Object.hasOwn(LEVELS, candidate) ? candidate : null;
+}
+
+function normaliseFormat(value) {
+  if (!value) return null;
+  const candidate = String(value).toLowerCase();
+  return ["auto", "pretty", "plain", "json"].includes(candidate)
+    ? candidate
+    : null;
+}
+
+function safeJson(_key, value) {
+  if (typeof value === "bigint") return `${value}n`;
+  if (value instanceof Error) {
+    return { name: value.name, message: value.message, stack: value.stack };
+  }
+  return value;
+}
+
+function safePreview(value) {
+  try {
+    const text = JSON.stringify(value, safeJson);
+    return text.length > 500 ? `${text.slice(0, 497)}...` : text;
+  } catch {
+    return String(value);
+  }
+}

package/scripts/output-guard.mjs

@@ -0,0 +1,128 @@
+import { existsSync } from "node:fs";
+import { mkdir, readdir, realpath, rm, writeFile } from "node:fs/promises";
+import { homedir } from "node:os";
+import { dirname, isAbsolute, join, relative, resolve } from "node:path";
+
+export const OUTPUT_SENTINEL = ".mado-output";
+const BUILD_BRIDGE = join("_mado", "build.json");
+const PROTECTED_PROJECT_DIRS = new Set([
+  ".git",
+  "docs",
+  "node_modules",
+  "scripts",
+  "src",
+  "starters",
+  "test",
+]);
+
+export async function prepareOutputDirectory({
+  projectRoot,
+  outDir,
+  clean = true,
+  force = false,
+}) {
+  const safe = await resolveSafeOutput(projectRoot, outDir);
+  const state = await ownershipState(safe.outDir);
+
+  if (state === "foreign" && !force) {
+    throw new Error(
+      `[mado:output] refusing to use non-empty directory not owned by Mado: ${safe.outDir}\n` +
+        `Choose an empty directory or pass --force-output after checking the path.`,
+    );
+  }
+
+  if (clean && existsSync(safe.outDir)) {
+    await rm(safe.outDir, { recursive: true, force: true });
+  }
+  await mkdir(safe.outDir, { recursive: true });
+  await writeSentinel(safe.outDir, safe.projectRoot);
+  return safe.outDir;
+}
+
+export async function claimOutputDirectory({ projectRoot, outDir, force = false }) {
+  const safe = await validateOutputDirectory({ projectRoot, outDir, force });
+  await mkdir(safe.outDir, { recursive: true });
+  await writeSentinel(safe.outDir, safe.projectRoot);
+  return safe.outDir;
+}
+
+export async function validateOutputDirectory({ projectRoot, outDir, force = false }) {
+  const safe = await resolveSafeOutput(projectRoot, outDir);
+  const state = await ownershipState(safe.outDir);
+  if (state === "foreign" && !force) {
+    throw new Error(
+      `[mado:output] refusing to write into non-empty directory not owned by Mado: ${safe.outDir}\n` +
+        `Run a Mado/Vite build first, choose another --out, or pass --force-output.`,
+    );
+  }
+  return safe;
+}
+
+export async function resolveSafeOutput(projectRoot, outDir) {
+  const project = await canonicalPath(resolve(projectRoot));
+  const output = await canonicalPath(resolve(projectRoot, outDir));
+  const home = await canonicalPath(homedir());
+
+  if (isFilesystemRoot(output)) {
+    throw new Error(`[mado:output] refusing filesystem root: ${output}`);
+  }
+  if (output === project) {
+    throw new Error(`[mado:output] refusing project root: ${output}`);
+  }
+  if (output === home) {
+    throw new Error(`[mado:output] refusing home directory: ${output}`);
+  }
+  if (isInside(output, project)) {
+    throw new Error(`[mado:output] refusing a parent of the project: ${output}`);
+  }
+
+  const projectRelative = relative(project, output);
+  if (projectRelative && !projectRelative.startsWith("..") && !isAbsolute(projectRelative)) {
+    const first = projectRelative.split(/[\\/]/, 1)[0];
+    if (PROTECTED_PROJECT_DIRS.has(first)) {
+      throw new Error(`[mado:output] refusing protected project directory: ${output}`);
+    }
+  }
+
+  return { projectRoot: project, outDir: output };
+}
+
+async function ownershipState(outDir) {
+  if (!existsSync(outDir)) return "empty";
+  const entries = await readdir(outDir);
+  if (entries.length === 0) return "empty";
+  if (existsSync(join(outDir, OUTPUT_SENTINEL))) return "owned";
+  // A build bridge is emitted by the Mado Vite plugin and is sufficient
+  // evidence for a direct `mado static` invocation after `mado build`.
+  if (existsSync(join(outDir, BUILD_BRIDGE))) return "owned";
+  return "foreign";
+}
+
+async function writeSentinel(outDir, projectRoot) {
+  await writeFile(
+    join(outDir, OUTPUT_SENTINEL),
+    `${JSON.stringify({ owner: "@madojs/mado", projectRoot }, null, 2)}\n`,
+  );
+}
+
+async function canonicalPath(path) {
+  let cursor = path;
+  const suffix = [];
+  while (!existsSync(cursor)) {
+    const parent = dirname(cursor);
+    if (parent === cursor) break;
+    suffix.unshift(relative(parent, cursor));
+    cursor = parent;
+  }
+  const base = await realpath(cursor).catch(() => resolve(cursor));
+  return resolve(base, ...suffix);
+}
+
+function isFilesystemRoot(path) {
+  return dirname(path) === path;
+}
+
+function isInside(parent, child) {
+  const rel = relative(parent, child);
+  return rel !== "" && !rel.startsWith("..") && !isAbsolute(rel);
+}

package/scripts/preview.mjs

@@ -22,6 +22,8 @@ import { readFile, stat, access } from "node:fs/promises";
 import { extname, join, resolve, sep } from "node:path";
 import { spawnSync } from "node:child_process";
 
+import { configureLogger, logger } from "./logger.mjs";
+
 // Tiny argv parser. Supports --flag, --flag=value, --flag value.
 function parsePreviewArgs(argv) {
   const flags = {};
@@ -47,7 +49,7 @@ function parsePreviewArgs(argv) {
   return flags;
 }
 
-const PREVIEW_FLAGS = parsePreviewArgs(process.argv.slice(2));
+const PREVIEW_FLAGS = parsePreviewArgs(configureLogger(process.argv.slice(2)));
 
 const ROOT = resolve(process.cwd());
 const OUT = resolve(ROOT, process.env.OUT_DIR ?? "out");
@@ -138,14 +140,12 @@ const MIME = {
 // ---------- Optional release ----------
 
 if (!SKIP_BUILD) {
-  console.log("[preview] PREVIEW_AUTOBUILD=1 — running mado release");
+  logger.info("preview", "autobuild", "PREVIEW_AUTOBUILD=1 — running mado release");
   run("node", ["scripts/cli.mjs", "release"]);
 }
 
 if (!(await exists(OUT))) {
-  console.error(
-    `[preview] missing ${OUT}/ — run \`mado release\` first.`,
-  );
+  logger.error("preview", "missing-output", `missing ${OUT}/ — run \`mado release\` first`);
   process.exit(1);
 }
 
@@ -153,10 +153,7 @@ const spaShell = existsSync(join(OUT, "_mado", "spa.html"))
   ? join(OUT, "_mado", "spa.html")
   : join(OUT, "index.html");
 if (!(await exists(spaShell))) {
-  console.error(
-    `[preview] missing ${spaShell} — \`mado release\` did not produce an HTML entry.\n` +
-      `[preview] Without it any non-static route will 404 instead of falling back to the SPA.`,
-  );
+  logger.error("preview", "missing-shell", `missing ${spaShell}; mado release did not produce an HTML entry`);
   process.exit(1);
 }
 
@@ -216,22 +213,17 @@ const server = createServer(async (req, res) => {
     res.writeHead(200, headers);
     res.end(data);
   } catch (err) {
-    console.error("[preview] error:", err);
+    logger.error("preview", "request", "request failed", err);
     res.writeHead(500).end(String(err));
   }
 });
 
 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`,
-    );
+    logger.error("preview", "bind", `failed to bind ${HOST}:${PORT}: ${err.message}`);
+    logger.info("preview", "bind-hint", "try: mado preview --host 127.0.0.1");
   } else {
-    console.error(
-      `[preview] failed to listen on ${HOST}:${PORT}: ${err.message}`,
-    );
+    logger.error("preview", "listen", `failed to listen on ${HOST}:${PORT}: ${err.message}`);
   }
   process.exit(1);
 });
@@ -256,7 +248,7 @@ server.listen(PORT, HOST, async () => {
 function run(cmd, args, { allowFail = false } = {}) {
   const r = spawnSync(cmd, args, { stdio: "inherit" });
   if (r.status !== 0 && !allowFail) {
-    console.error(`[preview] command "${cmd} ${args.join(" ")}" exited with ${r.status}`);
+    logger.error("preview", "child-exit", `command "${cmd} ${args.join(" ")}" exited with ${r.status}`);
     process.exit(r.status ?? 1);
   }
 }

package/scripts/static/browser.mjs

@@ -31,6 +31,8 @@
  */
 import { existsSync } from "node:fs";
 
+import { logger } from "../logger.mjs";
+
 const KNOWN_CHROMIUM_PATHS = [
   "/usr/bin/google-chrome",
   "/usr/bin/google-chrome-stable",
@@ -46,18 +48,19 @@ const KNOWN_CHROMIUM_PATHS = [
 export async function captureStaticRoutes(options) {
   const { chromium } = await importPlaywright();
   const browser = await launchBrowser(chromium, options);
-  const captured = [];
+  let captured = [];
 
   try {
     const browserVersion =
       typeof browser.version === "function" ? browser.version() : null;
     if (browserVersion) {
-      console.log(`[static] browser: chromium ${browserVersion}`);
-    }
-    for (const record of options.records) {
-      const html = await captureRoute(browser, record, options);
-      captured.push({ ...record, html });
+      logger.info("static", "browser", `browser: chromium ${browserVersion}`);
     }
+    captured = await mapConcurrent(
+      options.records,
+      options.concurrency ?? 4,
+      async (record) => ({ ...record, html: await captureRoute(browser, record, options) }),
+    );
   } finally {
     await browser.close();
   }
@@ -65,6 +68,20 @@ export async function captureStaticRoutes(options) {
   return captured;
 }
 
+export async function mapConcurrent(items, concurrency, task) {
+  const results = new Array(items.length);
+  let cursor = 0;
+  const worker = async () => {
+    while (cursor < items.length) {
+      const index = cursor++;
+      results[index] = await task(items[index], index);
+    }
+  };
+  const count = Math.max(1, Math.min(items.length, Number(concurrency) || 1));
+  await Promise.all(Array.from({ length: count }, worker));
+  return results;
+}
+
 /**
  * Join a Mado-canonical base (`"/"` or `"/prefix/"`) with a route
  * pathname so the capture browser navigates to the same URL shape the
@@ -85,10 +102,21 @@ function withBaseLocal(base, pathname) {
 
 async function captureRoute(browser, record, options) {
   const context = await browser.newContext({ serviceWorkers: "block" });
-  const page = await context.newPage();
   const pageErrors = [];
   const failedRequests = [];
   const consoleErrors = [];
+  await context.route("**/*", async (route) => {
+    const request = route.request();
+    if (isCaptureAllowedUrl(request.url(), options.serverOrigin)) {
+      await route.continue();
+      return;
+    }
+    failedRequests.push(
+      `${request.method()} ${request.url()} blocked external request`,
+    );
+    await route.abort("blockedbyclient");
+  });
+  const page = await context.newPage();
 
   page.on("pageerror", (err) => pageErrors.push(err.message));
   page.on("requestfailed", (request) => {
@@ -229,7 +257,7 @@ async function runWithTimeout(promise, timeout, swallowMessage) {
     ]);
   } catch (err) {
     if (err && err.message === "timeout") {
-      console.warn(swallowMessage);
+      logger.warn("static", "browser-resource", swallowMessage);
       return;
     }
     throw err;
@@ -544,6 +572,19 @@ function isIgnorableResourceUrl(url) {
   }
 }
 
+function isCaptureAllowedUrl(url, serverOrigin) {
+  if (!url) return false;
+  if (url.startsWith("data:") || url.startsWith("blob:")) return true;
+  try {
+    return new URL(url).origin === new URL(serverOrigin).origin;
+  } catch {
+    return false;
+  }
+}
+
+/** @internal */
+export const _testHooks = { isCaptureAllowedUrl };
+
 function isIgnorableConsoleError(text) {
   if (!text) return false;
   // Browser-level "Failed to load resource" lines without context. The

package/scripts/static/discover.mjs

@@ -48,8 +48,11 @@ export async function discoverStaticRoutes(options) {
   //   2. App runs need our routing helpers loaded through SSR alongside the
   //      user manifest; we expose them via `__mado_match__` so we can ask
   //      for them via ssrLoadModule without colliding with user imports.
+  const sourceMatch = resolve(getPackageRoot(), "src/router/match.ts");
   const aliases = {
-    __mado_match__: resolve(getPackageRoot(), "src/router/match.ts"),
+    __mado_match__: existsSync(sourceMatch)
+      ? sourceMatch
+      : resolve(getPackageRoot(), "dist/src/router/match.js"),
     ...(context === "repo"
       ? { "@madojs/mado": resolve(projectRoot, "src/index.ts") }
       : {}),

package/scripts/static.mjs

@@ -1,9 +1,11 @@
 #!/usr/bin/env node
 
-import { existsSync, readFileSync, writeSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { join, resolve } from "node:path";
 
 import { parseFlags } from "./_config.mjs";
+import { configureLogger, logger } from "./logger.mjs";
+import { claimOutputDirectory, validateOutputDirectory } from "./output-guard.mjs";
 import { discoverStaticRoutes } from "./static/discover.mjs";
 import { createStaticCaptureServer } from "./static/server.mjs";
 import { captureStaticRoutes } from "./static/browser.mjs";
@@ -17,7 +19,7 @@ import {
   writeStaticDeploymentFiles,
 } from "./static/output.mjs";
 
-const { flags } = parseFlags(process.argv.slice(2));
+const { flags } = parseFlags(configureLogger(process.argv.slice(2)));
 const projectRoot = resolve(process.cwd());
 const outDir = resolve(
   projectRoot,
@@ -27,7 +29,12 @@ const timeout = Number(flags.timeout ?? 30_000);
 
 let tempRootForCleanup = null;
 try {
-  console.log(`[static] artifact: ${outDir}`);
+  await validateOutputDirectory({
+    projectRoot,
+    outDir,
+    force: flags["force-output"] === true,
+  });
+  logger.info("static", "artifact", `artifact: ${outDir}`);
 
   // Source the public origin and Vite base from (in order):
   //   --base-url, --base / MADO_SITE env, _mado/build.json (the bridge
@@ -49,7 +56,13 @@ try {
     entry: typeof flags.entry === "string" ? flags.entry : undefined,
   });
 
-  console.log(`[static] discovered ${records.length} static route(s)`);
+  logger.info("static", "discover", `discovered ${records.length} static route(s)`);
+
+  await claimOutputDirectory({
+    projectRoot,
+    outDir,
+    force: flags["force-output"] === true,
+  });
 
   if (records.length > 0 && !site) {
     throw new Error(
@@ -85,6 +98,7 @@ try {
         base,
         site: publicOrigin,
         timeout,
+        concurrency: Number(flags.concurrency ?? 4),
         browserChannel:
           typeof flags["browser-channel"] === "string"
             ? flags["browser-channel"]
@@ -99,7 +113,7 @@ try {
       // existing deployment files are touched.
       await writeCapturedRoutes(routesDir, captured);
       await promoteCapturedRoutes({ outDir, routesDir, captured });
-      console.log(`[static] captured ${captured.length} route snapshot(s)`);
+      logger.info("static", "capture", `captured ${captured.length} route snapshot(s)`);
     } finally {
       await server.close();
     }
@@ -121,14 +135,14 @@ try {
   // Drop the internal build bridge so the production artifact does not
   // ship Vite's resolved view of the project (site, base, assetsDir).
   await dropBuildBridge(outDir);
-  console.log(`[static] done`);
+  logger.info("static", "done", "done");
 } catch (err) {
   // Defer the actual termination: `process.exit()` is synchronous and
   // would race the awaited cleanup in the `finally` block, leaving the
   // OS to garbage-collect a half-promoted staging directory. Setting
   // `exitCode` lets Node finish the microtask queue (including the
   // cleanup below) and then exit with the failure status.
-  writeSync(2, `${err?.stack ?? err}\n`);
+  logger.error("static", "failed", err instanceof Error ? err.message : String(err), err);
   process.exitCode = 1;
 } finally {
   if (tempRootForCleanup) {

package/starters/default/package.json

@@ -16,9 +16,9 @@
     "@madojs/mado": "__MADOJS_VERSION__"
   },
   "devDependencies": {
-    "lightningcss": "^1.32.0",
-    "playwright-core": "^1.47.0",
-    "typescript": "^5.5.0",
-    "vite": "^8.0.16"
+    "@types/node": "^22.12.0",
+    "playwright-core": "^1.61.1",
+    "typescript": "^7.0.2",
+    "vite": "^8.1.4"
   }
 }

package/starters/default/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": ["node"],
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["vite.config.ts"]
+}

package/starters/default/vite.config.ts

@@ -16,7 +16,4 @@ export default defineConfig({
       // site: "https://your-app.example",
     }),
   ],
-  css: {
-    transformer: "lightningcss",
-  },
 });

package/starters/modular/README.md

@@ -51,7 +51,7 @@ this starter so `npm run dev` is runnable out of the box:
 
 | Method + path                            | Behaviour                                      |
 | ---------------------------------------- | ---------------------------------------------- |
-| `POST /api/auth/login`                   | accepts `demo@mado.dev` / `demo`               |
+| `POST /api/auth/login`                   | accepts `demo@mado.dev` / `demo123`            |
 | `GET  /api/auth/me`                      | current user (after login)                     |
 | `POST /api/auth/logout`                  | clears the in-memory session                   |
 | `GET  /api/billing/stripe/invoices`      | lists six seeded invoices                      |
@@ -102,8 +102,8 @@ src/
 - Reusable leaf components keep their own styles in ``css`...` ``
   inside `component()` options.
 
-Vite uses Lightning CSS for CSS transforms/minification in this
-starter.
+Vite 8's standard pipeline owns CSS transforms/minification; Mado itself does
+not own CSS processing.
 
 ## Internal links
 
@@ -139,4 +139,4 @@ The generator writes files only. Wire new routes in
 ## More
 
 The full architecture guide lives in the framework docs:
-https://github.com/madojs/mado/tree/main/docs/en
+https://github.com/madojs/mado/tree/main/docs/en

package/starters/modular/package.json

@@ -18,13 +18,13 @@
     "@madojs/mado": "__MADOJS_VERSION__"
   },
   "devDependencies": {
+    "@types/node": "^22.12.0",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
     "eslint": "^9.0.0",
     "eslint-plugin-boundaries": "^5.0.0",
-    "lightningcss": "^1.32.0",
-    "playwright-core": "^1.47.0",
-    "typescript": "^5.5.0",
-    "vite": "^8.0.16"
+    "playwright-core": "^1.61.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.1.4"
   }
 }

package/starters/modular/src/layouts/app-shell.layout.ts

@@ -12,7 +12,6 @@
 import { html, page, routeUrl } from "@madojs/mado";
 
 import { isAuthed, logout, user } from "../modules/auth/auth.public";
-import "../shared/ui/x-button.component";
 
 export default page({
   title: "Mado App",
@@ -28,7 +27,7 @@ export default page({
           ${() =>
             isAuthed()
               ? html`<span class="who">${() => user()?.email ?? ""}</span>
-                  <x-button variant="ghost" @click=${logout}>Sign out</x-button>`
+                  <button class="button button--ghost" type="button" @click=${logout}>Sign out</button>`
               : html`<a data-link href=${routeUrl("/login")}>Sign in</a>`}
         </nav>
       </header>