@madojs/mado 0.10.1 → 0.11.1

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

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

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

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

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

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

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

@@ -1,15 +0,0 @@
-{
-  "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/README.md

@@ -1,33 +0,0 @@
-# __APP_NAME__
-
-Generated with the Mado CRUD starter.
-
-```bash
-npm install
-npm run dev
-```
-
-Open http://localhost:5173.
-
-Use `npm run build` for a production TypeScript build and `npm run serve` to
-serve an already-built app.
-
-This starter demonstrates:
-
-- lazy routes;
-- Web Components through `component()`;
-- an app shell component with Shadow DOM and `<slot>`;
-- query params through `queryParam()`;
-- async data through `resource()`;
-- mutations with invalidation;
-- forms through `useForm()`;
-- keyed tables through `each()`.
-
-`x-app-shell` uses Shadow DOM because it owns the page frame and projects route
-pages through `<slot>`. Page/table/form components can still use global styles:
-slotted route pages remain normal document DOM.
-
-Component imports are explicit registration side effects. `main.ts` imports the
-global app shell. Feature pages import the components they render, for example
-`src/pages/tickets.ts` imports `../components/ticket-list.js` before rendering
-`<ticket-list>`.

package/starters/crud/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 /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/"
-        }
-      }
-    </script>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/dist/main.js"></script>
-  </body>
-</html>

package/starters/crud/mado.config.json

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

@@ -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/crud/src/components/app-shell.ts

@@ -1,56 +0,0 @@
-import { component, css, html } from "@madojs/mado";
-
-component(
-  "x-app-shell",
-  () => () => html`
-    <header>
-      <a class="brand" href="/" data-link>__APP_NAME__</a>
-      <nav>
-        <a href="/" data-link>Home</a>
-        <a href="/tickets" data-link>Tickets</a>
-        <a href="/tickets/new" data-link>New ticket</a>
-      </nav>
-    </header>
-    <main>
-      <slot></slot>
-    </main>
-  `,
-  {
-    styles: css`
-      :host {
-        min-height: 100vh;
-        display: block;
-      }
-
-      header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 1rem;
-        border-bottom: 1px solid var(--line);
-        background: white;
-        padding: 0.9rem 1.25rem;
-      }
-
-      main {
-        display: block;
-      }
-
-      nav {
-        display: flex;
-        gap: 0.75rem;
-        flex-wrap: wrap;
-      }
-
-      a {
-        color: #334155;
-        text-decoration: none;
-      }
-
-      .brand {
-        color: #111827;
-        font-weight: 800;
-      }
-    `,
-  },
-);

package/starters/crud/src/components/ticket-detail.ts

@@ -1,33 +0,0 @@
-import { component, html, resource } from "@madojs/mado";
-import { api } from "../lib/api.js";
-
-component("ticket-detail", ({ host }) => {
-  const id = () => host.getAttribute("ticket-id") ?? "";
-  const ticket = resource(
-    () => `tickets/${id()}`,
-    () => api.getTicket(id()),
-  );
-
-  return () => html`
-    <section class="page narrow">
-      ${() => ticket.loading()
-        ? html`<p>Loading...</p>`
-        : ticket.error()
-          ? html`<p class="error">${ticket.error()?.message}</p>`
-          : html`
-              <a href="/tickets" data-link>Back to tickets</a>
-              <h1>${ticket.data()?.title}</h1>
-              <dl>
-                <dt>Customer</dt>
-                <dd>${ticket.data()?.customer}</dd>
-                <dt>Status</dt>
-                <dd><span class=${`badge ${ticket.data()?.status}`}>${ticket.data()?.status}</span></dd>
-                <dt>Priority</dt>
-                <dd>${ticket.data()?.priority}</dd>
-                <dt>Notes</dt>
-                <dd>${ticket.data()?.notes}</dd>
-              </dl>
-            `}
-    </section>
-  `;
-}, { shadow: false });

package/starters/crud/src/components/ticket-form.ts

@@ -1,69 +0,0 @@
-import { component, html, mutation, navigate, useForm } from "@madojs/mado";
-import { api, type TicketInput } from "../lib/api.js";
-
-component("ticket-form", () => {
-  const form = useForm({
-    title: { required: true, default: "" },
-    customer: { required: true, default: "" },
-    status: { required: true, default: "open" },
-    priority: { required: true, default: "normal" },
-    notes: { default: "" },
-  });
-
-  const createTicket = mutation(
-    (input: TicketInput) => api.createTicket(input),
-    { invalidates: ["tickets*"] },
-  );
-
-  const submit = form.onSubmit(async (values) => {
-    const ticket = await createTicket.run(values as TicketInput);
-    navigate(`/tickets/${ticket.id}`);
-  });
-
-  return () => html`
-    <section class="page narrow">
-      <h1>New ticket</h1>
-      <form @submit=${submit}>
-        <label>
-          Title
-          <input name="title" @input=${form.onInput} @blur=${form.onBlur}>
-          ${() => form.touched().title && form.errors().title ? html`<small>${form.errors().title}</small>` : null}
-        </label>
-
-        <label>
-          Customer
-          <input name="customer" @input=${form.onInput} @blur=${form.onBlur}>
-          ${() => form.touched().customer && form.errors().customer ? html`<small>${form.errors().customer}</small>` : null}
-        </label>
-
-        <label>
-          Status
-          <select name="status" @input=${form.onInput} @blur=${form.onBlur}>
-            <option value="open">Open</option>
-            <option value="pending">Pending</option>
-            <option value="closed">Closed</option>
-          </select>
-        </label>
-
-        <label>
-          Priority
-          <select name="priority" @input=${form.onInput} @blur=${form.onBlur}>
-            <option value="low">Low</option>
-            <option value="normal" selected>Normal</option>
-            <option value="high">High</option>
-          </select>
-        </label>
-
-        <label>
-          Notes
-          <textarea name="notes" rows="4" @input=${form.onInput}></textarea>
-        </label>
-
-        <div class="actions">
-          <a href="/tickets" data-link>Cancel</a>
-          <button ?disabled=${() => !form.isValid() || form.submitting()}>Create ticket</button>
-        </div>
-      </form>
-    </section>
-  `;
-}, { shadow: false });