@madojs/mado 0.5.1 → 0.6.0

package/starters/admin/src/pages/admin/order-detail.ts

@@ -0,0 +1,78 @@
+// Order detail page. Reads :id from params, fetches the order, and shows
+// inline loading/error/empty/ready states.
+
+import { html, jsonFetcher, page, resource } from "@madojs/mado";
+
+interface OrderDetail {
+  id: string;
+  customer: string;
+  total: number;
+  status: string;
+  items: Array<{ sku: string; name: string; qty: number; price: number }>;
+}
+
+export default page<{ id: string }>({
+  title: ({ id }) => `Order ${id}`,
+  view: ({ params }) => {
+    const order = resource(
+      () => `/api/admin/orders/${params.id}`,
+      jsonFetcher<OrderDetail>(),
+      { staleTime: 15_000 },
+    );
+
+    return html`
+      <p>
+        <a href="/admin/orders" data-link>← All orders</a>
+      </p>
+      ${() => {
+        if (order.loading() && !order.data())
+          return html`<p class="muted">Loading order…</p>`;
+        if (order.error())
+          return html`<p style="color:var(--danger);">${order.error()?.message}</p>`;
+        const o = order.data();
+        if (!o)
+          return html`<p class="muted">Order not found.</p>`;
+        return html`
+          <h1 style="margin:0 0 8px;">Order ${o.id}</h1>
+          <p class="muted" style="margin:0 0 24px;">${o.customer} · ${o.status}</p>
+          <div class="card">
+            <table style="width:100%;border-collapse:collapse;">
+              <thead>
+                <tr style="text-align:left;border-bottom:1px solid var(--border);">
+                  <th style="padding:8px 0;">SKU</th>
+                  <th style="padding:8px 0;">Item</th>
+                  <th style="padding:8px 0;text-align:right;">Qty</th>
+                  <th style="padding:8px 0;text-align:right;">Price</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${o.items.map(
+                  (it) => html`
+                    <tr style="border-bottom:1px solid var(--border);">
+                      <td style="padding:8px 0;">${it.sku}</td>
+                      <td style="padding:8px 0;">${it.name}</td>
+                      <td style="padding:8px 0;text-align:right;">${it.qty}</td>
+                      <td style="padding:8px 0;text-align:right;font-variant-numeric:tabular-nums;">
+                        $${it.price.toFixed(2)}
+                      </td>
+                    </tr>
+                  `,
+                )}
+              </tbody>
+              <tfoot>
+                <tr>
+                  <td colspan="3" style="padding-top:12px;text-align:right;font-weight:600;">
+                    Total
+                  </td>
+                  <td style="padding-top:12px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums;">
+                    $${o.total.toFixed(2)}
+                  </td>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+        `;
+      }}
+    `;
+  },
+});

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,25 @@
+// Public landing page. Demonstrates that the marketing surface can live
+// alongside the admin app without a guard, and can be baked for SEO.
+
+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",
+    },
+  }),
+  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/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,10 +4,14 @@
   "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__"
@@ -15,4 +19,4 @@
   "devDependencies": {
     "typescript": "^6.0.3"
   }
-}
+}

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/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,10 +4,14 @@
   "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__"

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);