@madojs/mado 0.5.0 → 0.6.0

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/README.md

@@ -4,18 +4,30 @@ Generated with the Mado CRUD starter.
 
 ```bash
 npm install
-npm run build
-npm run serve
+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/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,9 +4,14 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "serve": "mado serve"
+    "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__"
@@ -14,4 +19,4 @@
   "devDependencies": {
     "typescript": "^6.0.3"
   }
-}
+}

package/starters/crud/src/components/app-shell.ts

@@ -1,7 +1,7 @@
 import { component, css, html } from "@madojs/mado";
 
 component(
-  "app-shell",
+  "x-app-shell",
   () => () => html`
     <header>
       <a class="brand" href="/" data-link>__APP_NAME__</a>
@@ -11,17 +11,18 @@ component(
         <a href="/tickets/new" data-link>New ticket</a>
       </nav>
     </header>
-    <slot></slot>
+    <main>
+      <slot></slot>
+    </main>
   `,
   {
-    shadow: false,
     styles: css`
-      app-shell {
+      :host {
         min-height: 100vh;
         display: block;
       }
 
-      app-shell header {
+      header {
         display: flex;
         align-items: center;
         justify-content: space-between;
@@ -31,18 +32,22 @@ component(
         padding: 0.9rem 1.25rem;
       }
 
-      app-shell nav {
+      main {
+        display: block;
+      }
+
+      nav {
         display: flex;
         gap: 0.75rem;
         flex-wrap: wrap;
       }
 
-      app-shell a {
+      a {
         color: #334155;
         text-decoration: none;
       }
 
-      app-shell .brand {
+      .brand {
         color: #111827;
         font-weight: 800;
       }

package/starters/crud/src/main.ts

@@ -1,12 +1,9 @@
 import { html, render } from "@madojs/mado";
 import "./styles/global.js";
 import "./components/app-shell.js";
-import "./components/ticket-list.js";
-import "./components/ticket-form.js";
-import "./components/ticket-detail.js";
 import router from "./routes.js";
 
 const app = document.getElementById("app");
 if (!app) throw new Error("#app not found");
 
-render(html`<app-shell>${router.view}</app-shell>`, app);
+render(html`<x-app-shell>${router.view}</x-app-shell>`, app);

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

@@ -1,4 +1,5 @@
 import { html, page } from "@madojs/mado";
+import "../components/ticket-detail.js";
 
 export default page<{ id: string }>({
   title: ({ id }) => `Ticket ${id}`,

package/starters/crud/src/pages/ticket-new.ts

@@ -1,4 +1,5 @@
 import { html, page } from "@madojs/mado";
+import "../components/ticket-form.js";
 
 export default page({
   title: "New ticket",

package/starters/crud/src/pages/tickets.ts

@@ -1,4 +1,5 @@
 import { html, page } from "@madojs/mado";
+import "../components/ticket-list.js";
 
 export default page({
   title: "Tickets",

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/README.md

@@ -4,12 +4,14 @@ Generated with Mado __MADO_VERSION__.
 
 ```bash
 npm install
-npm run build
-npm run serve
+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.
+
 ## Files
 
 - `src/main.ts` mounts the router into `#app`.

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,9 +4,14 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "tsc -p tsconfig.json",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "serve": "mado serve"
+    "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__"

package/starters/minimal/src/components/app-counter.ts

@@ -1,7 +1,7 @@
 import { component, css, html, signal } from "@madojs/mado";
 
 component(
-  "app-counter",
+  "x-app-counter",
   () => {
     const count = signal(0);
     return () => html`

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