@madojs/mado 0.5.1 → 0.6.1

package/starters/admin/src/pages/admin/orders.ts

@@ -0,0 +1,117 @@
+// Orders list. Demonstrates queryParam() filters and each() keyed table rows.
+
+import {
+  each,
+  html,
+  jsonFetcher,
+  page,
+  queryParam,
+  resource,
+} from "@madojs/mado";
+
+interface Order {
+  id: string;
+  customer: string;
+  total: number;
+  status: "open" | "paid" | "shipped" | "cancelled";
+}
+
+export default page({
+  title: "Orders",
+  view: () => {
+    const status = queryParam("status", "");
+    const search = queryParam("q", "");
+
+    const orders = resource(
+      () => {
+        const params = new URLSearchParams();
+        if (status()) params.set("status", status());
+        if (search()) params.set("q", search());
+        const qs = params.toString();
+        return `/api/admin/orders${qs ? `?${qs}` : ""}`;
+      },
+      jsonFetcher<Order[]>(),
+      { staleTime: 5_000 },
+    );
+
+    return html`
+      <header style="display:flex;align-items:center;gap:var(--space-3);margin:0 0 16px;">
+        <h1 style="margin:0;">Orders</h1>
+        <span class="spacer"></span>
+        <input
+          type="search"
+          placeholder="Search…"
+          .value=${search}
+          @input=${(e: Event) => {
+            const t = e.target as HTMLInputElement;
+            search.set(t.value);
+          }}
+          style="padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);"
+        >
+        <select
+          .value=${status}
+          @change=${(e: Event) => {
+            const t = e.target as HTMLSelectElement;
+            status.set(t.value);
+          }}
+          style="padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);color:var(--fg);"
+        >
+          <option value="">All statuses</option>
+          <option value="open">Open</option>
+          <option value="paid">Paid</option>
+          <option value="shipped">Shipped</option>
+          <option value="cancelled">Cancelled</option>
+        </select>
+      </header>
+
+      <div class="card" style="padding:0;overflow:hidden;">
+        ${() => {
+          if (orders.loading() && !orders.data())
+            return html`<p class="muted" style="padding:16px;">Loading…</p>`;
+          if (orders.error())
+            return html`<p style="color:var(--danger);padding:16px;">
+              ${orders.error()?.message}
+            </p>`;
+          const list = orders.data() ?? [];
+          if (list.length === 0)
+            return html`<p class="muted" style="padding:24px;text-align:center;">
+              No orders match the current filters.
+            </p>`;
+          return html`
+            <table style="width:100%;border-collapse:collapse;">
+              <thead>
+                <tr style="text-align:left;border-bottom:1px solid var(--border);">
+                  <th style="padding:10px 14px;">ID</th>
+                  <th style="padding:10px 14px;">Customer</th>
+                  <th style="padding:10px 14px;">Status</th>
+                  <th style="padding:10px 14px;text-align:right;">Total</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${() =>
+                  each(
+                    list,
+                    (o) => o.id,
+                    (o) => html`
+                      <tr style="border-bottom:1px solid var(--border);">
+                        <td style="padding:10px 14px;">
+                          <a href="/admin/orders/${o.id}" data-link>${o.id}</a>
+                        </td>
+                        <td style="padding:10px 14px;">${o.customer}</td>
+                        <td style="padding:10px 14px;">
+                          <span class="muted">${o.status}</span>
+                        </td>
+                        <td style="padding:10px 14px;text-align:right;font-variant-numeric:tabular-nums;">
+                          $${o.total.toFixed(2)}
+                        </td>
+                      </tr>
+                    `,
+                  )}
+              </tbody>
+            </table>
+          `;
+        }}
+      </div>
+    `;
+  },
+});

package/starters/admin/src/pages/home.ts

@@ -0,0 +1,34 @@
+// Public landing page. Demonstrates that the marketing surface can live
+// alongside the admin app without a guard, and can be baked for SEO.
+//
+// `bake` is declared so that `mado bake` (and `mado release`) actually
+// prerender at least one static page out of the box. Without it the
+// release output ships only the SPA shell with no SEO-friendly HTML
+// for crawlers landing on "/".
+
+import { html, page } from "@madojs/mado";
+
+export default page({
+  title: "Welcome",
+  head: () => ({
+    description: "An admin app scaffold built with Mado.",
+    og: {
+      title: "__APP_NAME__",
+      description: "An admin app scaffold built with Mado.",
+      type: "website",
+    },
+  }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
+  view: () => html`
+    <main style="max-width:720px;margin:0 auto;padding:64px 24px;">
+      <h1>__APP_NAME__</h1>
+      <p>This is the public landing page.</p>
+      <p>
+        <a href="/admin" data-link>Open the admin app →</a>
+      </p>
+    </main>
+  `,
+});

package/starters/admin/src/pages/login.ts

@@ -0,0 +1,70 @@
+// Login page. Reads `?return=` to bounce the user back where they were
+// blocked by `requireAuth`.
+
+import { html, navigate, page, queryParam, signal, useForm } from "@madojs/mado";
+import { ApiError } from "../lib/api.js";
+import { login } from "../lib/auth.js";
+import "../components/x-input.js";
+import "../components/x-button.js";
+
+export default page({
+  title: "Sign in",
+  view: () => {
+    const returnTo = queryParam("return", "/admin");
+    const serverError = signal<string | null>(null);
+
+    const form = useForm({
+      email: { required: true, type: "email" as const },
+      password: { required: true, min: 4 },
+    });
+
+    const onSubmit = form.onSubmit(async (values) => {
+      serverError.set(null);
+      try {
+        await login({
+          email: String(values.email ?? ""),
+          password: String(values.password ?? ""),
+        });
+        navigate(returnTo(), { replace: true });
+      } catch (e) {
+        if (e instanceof ApiError && e.status === 401) {
+          serverError.set("Invalid email or password.");
+        } else {
+          serverError.set("Something went wrong. Try again.");
+        }
+      }
+    });
+
+    return html`
+      <h1 style="margin:0 0 16px;">Sign in</h1>
+      <p class="muted" style="margin:0 0 24px;">
+        Enter your credentials to continue.
+      </p>
+      <form @submit=${onSubmit} class="stack">
+        <x-input
+          label="Email"
+          name="email"
+          type="email"
+          required
+          @input=${form.onInput}
+          @blur=${form.onBlur}
+        ></x-input>
+        <x-input
+          label="Password"
+          name="password"
+          type="password"
+          required
+          @input=${form.onInput}
+          @blur=${form.onBlur}
+        ></x-input>
+        ${() =>
+          serverError()
+            ? html`<small style="color:var(--danger);">${serverError()}</small>`
+            : null}
+        <x-button
+          ?disabled=${() => !form.isValid() || form.submitting()}
+        >${() => (form.submitting() ? "Signing in…" : "Sign in")}</x-button>
+      </form>
+    `;
+  },
+});

package/starters/admin/src/pages/not-found.ts

@@ -0,0 +1,12 @@
+import { html, page } from "@madojs/mado";
+
+export default page({
+  title: "Not found",
+  view: () => html`
+    <main style="max-width:560px;margin:0 auto;padding:80px 24px;text-align:center;">
+      <h1 style="margin:0 0 12px;">404</h1>
+      <p class="muted">This page does not exist.</p>
+      <p><a href="/" data-link>← Back home</a></p>
+    </main>
+  `,
+});

package/starters/admin/src/routes.ts

@@ -0,0 +1,40 @@
+// The blessed routes manifest for an admin app.
+//
+//   "/"          → public landing
+//   "/login"     → centered auth layout
+//   "/admin/*"   → admin shell with sidebar/topbar, guarded by requireAuth
+//   "*"          → 404
+//
+// Layouts and guards live inside the layout() blocks. There is exactly one
+// canonical place to put a shell: a layout() in this manifest. Do not wrap
+// route output in main.ts or in custom-element wrappers — that path causes
+// the "shell-below-content" bug described in the v1 plan.
+//
+// Bake: `manifest` is exported separately for `mado bake` to discover pages
+// that declare `bake: { paths, data }`. Without this named export `mado bake`
+// fails with a clear error.
+
+import { layout, routes } from "@madojs/mado";
+import { requireAuth } from "./lib/auth.js";
+
+export const manifest = {
+  "/": () => import("./pages/home.js"),
+  "/login": layout({
+    layout: () => import("./layouts/auth.js"),
+    routes: {
+      "/": () => import("./pages/login.js"),
+    },
+  }),
+  "/admin": layout({
+    layout: () => import("./layouts/app.js"),
+    guard: requireAuth,
+    routes: {
+      "/": () => import("./pages/admin/dashboard.js"),
+      "/orders": () => import("./pages/admin/orders.js"),
+      "/orders/:id": () => import("./pages/admin/order-detail.js"),
+    },
+  }),
+  "*": () => import("./pages/not-found.js"),
+};
+
+export default routes(manifest);

package/starters/admin/src/styles/global.ts

@@ -0,0 +1,86 @@
+// Global design tokens + a tiny utility layer for admin UIs.
+//
+// Tokens are CSS custom properties on :root so layouts and components can pick
+// them up without a CSS preprocessor. Light/dark via prefers-color-scheme.
+//
+// Keep this file intentionally small. Components should style themselves with
+// Shadow DOM. Light DOM utilities (.row, .stack, .card) are here only because
+// they show up in every admin page and would be noisy to redefine per component.
+
+const css = `
+:root {
+  color-scheme: light dark;
+
+  --bg:           #ffffff;
+  --bg-elevated:  #f7f8fa;
+  --fg:           #0f172a;
+  --fg-muted:     #475569;
+  --border:       #e2e8f0;
+  --accent:       #1f6feb;
+  --accent-fg:    #ffffff;
+  --danger:       #b91c1c;
+  --success:      #15803d;
+
+  --radius:       8px;
+  --radius-sm:    6px;
+  --space-1:      4px;
+  --space-2:      8px;
+  --space-3:      12px;
+  --space-4:      16px;
+  --space-5:      24px;
+  --space-6:      32px;
+
+  --font-sans:    ui-sans-serif, system-ui, -apple-system, "Segoe UI",
+                  Roboto, Inter, Helvetica, Arial, sans-serif;
+
+  --shadow-1:     0 1px 2px rgba(15, 23, 42, .05),
+                  0 1px 1px rgba(15, 23, 42, .04);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg:          #0b1220;
+    --bg-elevated: #111a2e;
+    --fg:          #e6eefc;
+    --fg-muted:    #9aa6bd;
+    --border:      #1f2a44;
+    --accent:      #3b82f6;
+    --accent-fg:   #0b1220;
+  }
+}
+
+* { box-sizing: border-box; }
+html, body { margin: 0; padding: 0; }
+body {
+  background: var(--bg);
+  color: var(--fg);
+  font-family: var(--font-sans);
+  font-size: 14px;
+  line-height: 1.5;
+  min-height: 100vh;
+}
+
+a { color: var(--accent); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+.row    { display: flex; align-items: center; gap: var(--space-3); }
+.stack  { display: flex; flex-direction: column; gap: var(--space-3); }
+.spacer { flex: 1; }
+
+.card {
+  background: var(--bg-elevated);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--space-5);
+  box-shadow: var(--shadow-1);
+}
+
+.muted { color: var(--fg-muted); }
+`;
+
+if (typeof document !== "undefined" && !document.getElementById("admin-global-style")) {
+  const tag = document.createElement("style");
+  tag.id = "admin-global-style";
+  tag.textContent = css;
+  document.head.appendChild(tag);
+}

package/starters/admin/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "skipLibCheck": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "declaration": false,
+    "sourceMap": true
+  },
+  "include": ["src/**/*.ts"]
+}

package/starters/crud/index.html

@@ -4,17 +4,25 @@
     <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 /users/42 still serves this same
+      index.html, and the browser resolves "./dist/main.js" against the
+      current URL → /users/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/"
+          "@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>
+    <script type="module" src="/dist/main.js"></script>
   </body>
-</html>
+</html>

package/starters/crud/mado.config.json

@@ -0,0 +1,20 @@
+{
+  "dev": {
+    "port": 5173,
+    "proxy": {}
+  },
+  "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/crud/package.json

@@ -4,15 +4,21 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build": "mado build",
+    "typecheck": "mado typecheck",
+    "dev": "mado dev",
     "serve": "mado serve",
-    "dev": "mado dev"
+    "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/crud/src/pages/home.ts

@@ -1,7 +1,23 @@
+// Public landing page. `bake` is declared so that `mado bake` (and
+// `mado release`) actually prerender at least one SEO-friendly HTML page
+// out of the box. Without it the build output ships only the SPA shell.
+
 import { html, page } from "@madojs/mado";
 
 export default page({
   title: "__APP_NAME__",
+  head: () => ({
+    description: "A CRUD scaffold built with Mado.",
+    og: {
+      title: "__APP_NAME__",
+      description: "A CRUD scaffold built with Mado.",
+      type: "website",
+    },
+  }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
   view: () => html`
     <section class="page">
       <div class="hero">

package/starters/crud/src/routes.ts

@@ -1,9 +1,11 @@
 import { routes } from "@madojs/mado";
 
-export default routes({
+export const manifest = {
   "/": () => import("./pages/home.js"),
   "/tickets": () => import("./pages/tickets.js"),
   "/tickets/new": () => import("./pages/ticket-new.js"),
   "/tickets/:id": () => import("./pages/ticket-detail.js"),
   "*": () => import("./pages/not-found.js"),
-});
+};
+
+export default routes(manifest);

package/starters/minimal/index.html

@@ -4,17 +4,25 @@
     <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 any nested route still serves this same
+      index.html, and the browser resolves "./dist/main.js" against the
+      current URL → /some/nested/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/"
+          "@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>
+    <script type="module" src="/dist/main.js"></script>
   </body>
-</html>
+</html>

package/starters/minimal/mado.config.json

@@ -0,0 +1,20 @@
+{
+  "dev": {
+    "port": 5173,
+    "proxy": {}
+  },
+  "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/minimal/package.json

@@ -4,15 +4,21 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "build": "mado build",
+    "typecheck": "mado typecheck",
+    "dev": "mado dev",
     "serve": "mado serve",
-    "dev": "mado dev"
+    "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/minimal/src/pages/home.ts

@@ -1,7 +1,24 @@
+// Public landing page. `bake` is declared so that `mado bake` (and
+// `mado release`) actually prerender a static HTML page out of the box.
+// Without it the build output ships only the SPA shell — bots that hit
+// "/" see an empty <body> instead of the welcome content.
+
 import { html, page } from "@madojs/mado";
 
 export default page({
   title: "__APP_NAME__",
+  head: () => ({
+    description: "A minimal Mado starter app.",
+    og: {
+      title: "__APP_NAME__",
+      description: "A minimal Mado starter app.",
+      type: "website",
+    },
+  }),
+  bake: {
+    paths: () => [{}],
+    data: () => ({}),
+  },
   view: () => html`
     <main class="shell">
       <section class="panel">

package/starters/minimal/src/routes.ts

@@ -1,6 +1,8 @@
 import { routes } from "@madojs/mado";
 
-export default routes({
+export const manifest = {
   "/": () => import("./pages/home.js"),
   "*": () => import("./pages/not-found.js"),
-});
+};
+
+export default routes(manifest);