@madojs/mado 0.6.0 → 0.7.0

package/AGENTS.md

@@ -91,6 +91,36 @@ component("x-timer", (ctx) => {
 
 **`resource()`, `effect()`, and subscriptions inside `setup()` hook into the lifecycle automatically** — no need to write onDispose for them.
 
+### 4b. Reactive attributes — `ctx.attr()`
+
+```ts
+// ❌ NO (reading once, never reactive)
+component("x-badge", ({ host }) => () => {
+  const variant = host.getAttribute("variant") ?? "default";
+  return html`<span class=${variant}>...</span>`;
+});
+
+// ❌ NO (MutationObserver boilerplate)
+component("x-badge", ({ host, onDispose }) => {
+  const variant = signal(host.getAttribute("variant") ?? "default");
+  const obs = new MutationObserver(() =>
+    variant.set(host.getAttribute("variant") ?? "default"),
+  );
+  obs.observe(host, { attributes: true, attributeFilter: ["variant"] });
+  onDispose(() => obs.disconnect());
+  return () => html`<span class=${variant}>...</span>`;
+});
+
+// ✅ YES — one line, reactive, no cleanup needed
+component("x-badge", ({ attr }) => {
+  const variant = attr("variant", "default");
+  return () => html`<span class=${() => `badge-${variant()}`}>...</span>`;
+});
+```
+
+`ctx.attr(name, defaultValue?)` returns a `Signal<string>` that auto-updates.
+The attribute is automatically added to `observedAttributes`.
+
 ### 5. Reactive value in template child position = function
 
 The most common AI mistake:
@@ -99,13 +129,13 @@ The most common AI mistake:
 const count = signal(0);
 
 // ❌ NOT REACTIVE — count() is read once
-html`<div>${count() * 2}</div>`
+html`<div>${count() * 2}</div>`;
 
 // ✅ REACTIVE — the function will be called when count changes
-html`<div>${() => count() * 2}</div>`
+html`<div>${() => count() * 2}</div>`;
 
 // ✅ ALSO OK — the signal itself is a function, Mado recognizes it
-html`<div>${count}</div>`
+html`<div>${count}</div>`;
 ```
 
 **Rule of thumb:** if there is a signal call (with parentheses) inside `${...}`, wrap it in `() => ...`.
@@ -114,17 +144,17 @@ html`<div>${count}</div>`
 
 ```ts
 // string/number → attribute
-html`<a href=${url}>...</a>`
+html`<a href=${url}>...</a>`;
 
 // DOM property (objects, numbers without serialization, .value for input)
-html`<input .value=${user.name}>`
-html`<my-list .items=${arr}>`
+html`<input .value=${user.name} />`;
+html`<my-list .items=${arr}></my-list>`;
 
 // boolean attribute (toggle)
-html`<button ?disabled=${isLoading}>...</button>`
+html`<button ?disabled=${isLoading}>...</button>`;
 
 // event
-html`<button @click=${fn}>...</button>`
+html`<button @click=${fn}>...</button>`;
 ```
 
 Common mistake: `disabled=${loading()}` — this attempts to set a **string** attribute `disabled="true"` or `disabled="false"`, which does not work correctly. **Use `?disabled=`.**
@@ -135,10 +165,19 @@ Common mistake: `disabled=${loading()}` — this attempts to set a **string** at
 import { each } from "@madojs/mado";
 
 // ❌ Works, but no keyed reconciliation → loses focus on reorder
-html`<ul>${() => items().map(t => html`<li>${t.name}</li>`)}</ul>`
+html`<ul>
+  ${() => items().map((t) => html`<li>${t.name}</li>`)}
+</ul>`;
 
 // ✅ Correct: keyed, reuses DOM nodes
-html`<ul>${() => each(items(), t => t.id, t => html`<li>${t.name}</li>`)}</ul>`
+html`<ul>
+  ${() =>
+    each(
+      items(),
+      (t) => t.id,
+      (t) => html`<li>${t.name}</li>`,
+    )}
+</ul>`;
 ```
 
 ### 8. Routing — `routes()` + `page()`
@@ -198,14 +237,20 @@ import { useForm } from "@madojs/mado";
 
 const f = useForm({
   email: { required: true, type: "email" },
-  age:   { required: true, type: "number", min: 18 },
+  age: { required: true, type: "number", min: 18 },
 });
 
 html`
-  <form @submit=${f.onSubmit(async v => { await api.save(v); })}>
-    <input name="email" @input=${f.onInput} @blur=${f.onBlur}>
-    ${() => f.touched().email && f.errors().email
-      ? html`<small>${f.errors().email}</small>` : null}
+  <form
+    @submit=${f.onSubmit(async (v) => {
+      await api.save(v);
+    })}
+  >
+    <input name="email" @input=${f.onInput} @blur=${f.onBlur} />
+    ${() =>
+      f.touched().email && f.errors().email
+        ? html`<small>${f.errors().email}</small>`
+        : null}
     <button ?disabled=${() => !f.isValid() || f.submitting()}>Save</button>
   </form>
 `;
@@ -220,16 +265,23 @@ import { component, css, html } from "@madojs/mado";
 
 component("x-card", () => () => html`<div><slot></slot></div>`, {
   styles: css`
-    :host { display: block; padding: 1rem; }
-    div { background: var(--bg); }
-    ::slotted(h2) { margin: 0; }
+    :host {
+      display: block;
+      padding: 1rem;
+    }
+    div {
+      background: var(--bg);
+    }
+    ::slotted(h2) {
+      margin: 0;
+    }
   `,
 });
 
 // Light DOM (without Shadow), global styles:
 component("x-shell", () => () => html`...`, {
-  shadow: false,  // disables Shadow DOM
-  styles: css`x-shell header { ... }`,  // selectors are written as usual
+  shadow: false, // disables Shadow DOM
+  styles: css`x-shell header { ... }`, // selectors are written as usual
 });
 ```
 
@@ -314,17 +366,17 @@ When generating an app, prefer the blessed production shape from
 
 ## Where to find specific answers
 
-| Question | File |
-|---|---|
-| How does reactivity work? | `src/signal.ts` (283 lines) |
-| How are templates parsed? | `src/html.ts` (1013 lines) |
-| How does the router work? | `src/router.ts` (~530 lines) |
-| How does resource + cache work? | `src/resource.ts` (297 lines) |
-| How do forms work? | `src/forms.ts` (212 lines) |
+| Question                         | File                             |
+| -------------------------------- | -------------------------------- |
+| How does reactivity work?        | `src/signal.ts` (283 lines)      |
+| How are templates parsed?        | `src/html.ts` (1013 lines)       |
+| How does the router work?        | `src/router.ts` (~530 lines)     |
+| How does resource + cache work?  | `src/resource.ts` (297 lines)    |
+| How do forms work?               | `src/forms.ts` (212 lines)       |
 | How should an app be structured? | `docs/en/10-app-architecture.md` |
-| How should errors be handled? | `docs/en/15-error-handling.md` |
-| How should bake be used? | `docs/en/16-bake-cookbook.md` |
-| When something goes wrong | `docs/en/07-llm-pitfalls.md` |
+| How should errors be handled?    | `docs/en/15-error-handling.md`   |
+| How should bake be used?         | `docs/en/16-bake-cookbook.md`    |
+| When something goes wrong        | `docs/en/07-llm-pitfalls.md`     |
 
 ## Before committing
 

package/CHANGELOG.md

@@ -4,6 +4,204 @@
 
 Nothing yet.
 
+## 0.7.0
+
+Reactive component props, Shadow DOM + Forms fixes, deterministic releases,
+and `mado serve` unification. Motivated by stress-test findings in a real-world
+admin panel (see `MADO_TEST_REPORT.md`).
+
+### Breaking Changes
+
+- **`mado serve` in app-mode** no longer uses the legacy `serveStaticProject()`
+  fallback. It now always goes through `server/serve.mjs`, which means
+  `--host`, `--port`, `mado.config.json` dev.proxy, and HMR all work for
+  generated apps. If you relied on the old no-HMR behaviour, pass
+  `NO_HMR=1 mado serve`.
+
+### Added — Framework
+
+- **`ctx.attr(name, defaultValue?)`** — reactive attribute accessor for
+  components. Returns a `Signal<string>` that auto-updates when the attribute
+  changes on the host element via `attributeChangedCallback`. No more
+  `MutationObserver` boilerplate in every component.
+
+  ```ts
+  component("x-badge", ({ attr }) => {
+    const variant = attr("variant", "default");
+    return () =>
+      html`<span class=${() => `badge-${variant()}`}><slot></slot></span>`;
+  });
+  ```
+
+  Attributes used with `ctx.attr()` are automatically added to
+  `observedAttributes`.
+
+### Added — Starters
+
+- **`apiFetcher<T>()`** in `starters/admin/src/lib/api.ts` — a fetcher for
+  `resource()` that attaches the Bearer token from memory. Use for protected
+  endpoints instead of the plain `jsonFetcher()`.
+- **`x-button`**: now bridges Shadow DOM → Light DOM form submit via
+  `form.requestSubmit()`. Buttons inside Shadow DOM cannot natively trigger
+  `<form>` submit in Light DOM — this is now handled automatically.
+- **`x-button`**: uses `ctx.attr("disabled")` for reactive disabled state.
+  External `?disabled=${() => !form.isValid()}` now correctly enables/disables
+  the inner button.
+- **`x-input`**: proxies `.name` and `.value` DOM properties on the host
+  element so that `useForm().onInput` works after Shadow DOM event retargeting.
+
+### Added — CLI / Build
+
+- **`mado release --no-clean`**: release now cleans the entire `out/` directory
+  before building (deterministic artifacts). Pass `--no-clean` to opt out.
+  Previously stale assets, removed bake routes, and deleted public files could
+  linger in the deploy artifact.
+- **`scripts/bake.mjs`**: `<title>` now falls back to `page.title` if
+  `head().title` is not explicitly set. Previously baked HTML kept the template
+  `<title>` from `index.html` — a critical SEO gap.
+
+### Added — Documentation
+
+- **`docs/en/17-shadow-dom-forms.md`** — full recipe for using `useForm()` with
+  Shadow DOM components (proxy properties, form submit bridge, ctx.attr()).
+- **`llms.txt`**: added `ctx.attr()` section, `apiFetcher` recipe, and Shadow
+  DOM + Forms guidance.
+
+### Fixed
+
+- **`x-button` in starters**: the disabled state was read once from
+  `host.hasAttribute("disabled")` in the render function — never updating when
+  the attribute changed externally. Every form using `?disabled` on `x-button`
+  was broken from the start.
+- **`x-input` in starters**: `useForm().onInput` received `undefined` for
+  `name` and `value` because Shadow DOM retargets `e.target` from the inner
+  `<input>` to `<x-input>`, which had no DOM properties.
+- **`jsonFetcher()`**: the admin starter relied on `jsonFetcher()` for protected
+  endpoints but it sends no Authorization header. Documented the pattern and
+  added `apiFetcher()`.
+- **`mado serve`**: app-mode did not respect `--host`, `--port`, or config
+  settings. All flag pass-through now goes through `server/serve.mjs`.
+- **`mado release`**: stale files from deleted bake routes or removed public
+  assets could remain in `out/`. Now cleans `out/` fully before building.
+- **`mado bake`**: `<title>` was not set in baked HTML if only `page.title`
+  was defined (without `head().title`).
+
+## 0.6.1
+
+Starter & release-pipeline hardening pass. No public API breaks.
+Identified from a lab pressure-test on `/admin/lab` plus a deep audit of the
+starter / bundle / bake / dev-server contour. All fixes verified by
+regression tests added in this release.
+
+### Fixed
+
+- **Starters**: every `index.html` in `starters/{admin,crud,minimal}/` now
+  uses root-absolute paths in the importmap and entry `<script>` tag
+  (`/node_modules/@madojs/mado/...`, `/dist/main.js`). Relative paths
+  (`./node_modules/...`, `./dist/main.js`) broke hard-refresh of any nested
+  route (`/admin/orders/42` → browser fetched
+  `/admin/orders/dist/main.js` → 404 → blank page). Inline comments in each
+  file explain the trap so it does not get reverted.
+- **Starters/admin**: `pages/admin/order-detail.ts` now uses `each(items,
+key, render)` instead of `o.items.map(...)`, matching `llms.txt` rule #3
+  and the framework's own pitfalls documentation.
+- **`scripts/bundle.mjs`**: cleans stale hashed assets before every build.
+  Previously each `mado bundle` / `mado release` left old `main-<hash>.js`
+  and `chunk-<hash>.js` in `out/assets/`; the rewriter then emitted
+  `<link rel="modulepreload">` for every leftover `.js` it found, so
+  production HTML shipped dead-code preloads without SRI. In app-mode the
+  whole assets directory is wiped; in repo-mode only recognisable hashed
+  files are removed so unrelated repo artifacts stay put.
+- **`src/router/manifest.ts`**: opens a fresh component lifecycle scope
+  around every `page.view()` / layout `view()` call and disposes the
+  previous one on navigation (and on `router.dispose()`). `resource()`,
+  `effect()` and `persisted()` created inside `page.view()` now register
+  cleanup with that scope automatically — no more
+  `[mado:resource-outside-lifecycle]` warnings on the framework's own
+  canonical examples, and no more invalidator-subscription leaks across
+  route changes.
+- **`src/resource.ts`**: guards against stale responses overwriting fresh
+  data on rapid key changes. The previous `AbortController` defence worked
+  only if the user-supplied fetcher honored `AbortSignal` — for fetchers
+  that ignore cancellation, a slow stale resolution for an old key could
+  win over a fast fresh one. Both then/catch branches now also check
+  `if (key !== lastKey) return`.
+- **`server/serve.mjs`**: falls back to `./public/*` when a file is not
+  found at the project root, mirroring what `mado release` does to `out/`.
+  `favicon.svg`, `robots.txt`, `og-image.png` etc. no longer 404 in dev.
+- **`server/serve.mjs`**: prints an actionable hint on `EPERM`/`EACCES`
+  pointing at `mado dev --host 127.0.0.1` (the default host changed from
+  the implicit `0.0.0.0` to `localhost`, which is friendlier in sandboxed
+  environments).
+- **`scripts/preview.mjs`**: serves prerendered HTML from `<out>/baked/`
+  with priority over the SPA shell. Previously `mado preview` only looked
+  at `out/` and never saw bake's output, so prerendered routes returned
+  the empty SPA shell — looking like a "blank page" bug even when bake
+  had succeeded.
+
+### Added
+
+- **`mado dev` / `mado serve` flag pass-through**: `cli.mjs` now splits
+  positional arguments from flags via `splitDevArgs()`, so calls like
+  `mado dev --host 127.0.0.1`, `mado dev showcase --port 6000` and
+  `mado dev -- --host 0.0.0.0` all work. Previously the CLI mistook the
+  flag for an example name and exited with `unknown example`.
+- **`server/serve.mjs`**: tiny argv parser supporting `--host`, `--port`
+  and `--host=value` forms; HOST and PORT also fall back to environment
+  variables and `mado.config.json` (`dev.host`, `dev.port`).
+- **`scripts/preview.mjs`**: same `--host` / `--port` flags as the dev
+  server, plus a startup banner showing `url:` / `out:` / `baked:` so it
+  is obvious which directories preview is serving from.
+- **`scripts/bake.mjs`**: fails loudly when the manifest exists but no
+  page declares `bake: { paths, data }`. The previous behaviour produced
+  `0 pages + sitemap.xml` silently with exit code 0, making `mado
+release` look successful while shipping only the SPA shell with no
+  SEO-friendly HTML. The new warning prints the skipped routes, a
+  worked example bake snippet, and exits non-zero. Override with
+  `MADO_BAKE_ALLOW_EMPTY=1` for intentional SPA-only deploys.
+- **`scripts/bake.mjs`**: clearer "missing dev dep" errors — when
+  `linkedom` or `esbuild` is missing the message now tells the user
+  exactly which packages to `npm i -D`.
+- **Starter landing pages**: `home.ts` in all three starters now declares
+  `bake: { paths: () => [{}], data: () => ({}) }` and a `head()` so
+  `mado release` actually prerenders the landing page out of the box.
+- **Starter `devDependencies`**: `linkedom` and `esbuild` added to
+  `starters/{admin,crud,minimal}/package.json` so `mado release` works
+  immediately after `mado init <app>` + `npm install`, without manual
+  follow-up installs.
+- **Regression tests** (`test/`):
+  - `starter-html-paths.test.mjs` — asserts every starter `index.html`
+    uses root-absolute paths in both the importmap and the entry script.
+  - `bundle-cleanup.test.mjs` — end-to-end: runs `mado bundle` twice on
+    a synthesized temp project (mutating source between runs) and
+    asserts there is exactly one `main-<hash>.js` in `out/assets/`
+    afterwards.
+  - `resource.test.mjs` (2 new cases) — stale-response races: a fetcher
+    that ignores `AbortSignal` with key=1 slower than key=2, plus a
+    rapid 3-way key thrash where the final key is the slowest fetch.
+    Both assert `data()` reflects the latest key, not the fastest
+    response.
+
+### Changed
+
+- **`server/serve.mjs`** default host is now `localhost` (was implicitly
+  `0.0.0.0`). LAN exposure is opt-in via `mado dev --host 0.0.0.0` or
+  `HOST=0.0.0.0`. The startup banner shows both the bound host and a
+  click-friendly URL (`localhost` substituted when bound to `0.0.0.0`).
+
+### Notes
+
+- No public API changes; no migrations required. Apps that previously
+  worked on a fresh-out-of-the-box `mado init` did so only because
+  someone manually fixed the starter's relative paths and dev deps —
+  this release closes those gaps so the documented "happy path" actually
+  is happy.
+- If you intentionally deploy SPA-only (no prerendered HTML), drop
+  `mado bake` from your release pipeline or set
+  `MADO_BAKE_ALLOW_EMPTY=1`; otherwise bake will now fail your
+  CI with a clear pointer to the missing config.
+- Test count: 137 pass, 0 fail, 3 skipped (Playwright e2e — unchanged).
+
 ## 0.6.0
 
 Product-surface release: app-mode defaults, blessed admin starter, release
@@ -12,12 +210,13 @@ pipeline, core hardening and v1 recipe docs.
 Phase 1 — Repo-vs-app split:
 
 ### Added
+
 - `MADO_V1_PLAN.md` — executable tracker for the v1 push.
 - `scripts/_config.mjs` — single configuration loader (defaults < `mado.config.json`
   < CLI flags). Exports `loadConfig`, `detectContext`, `parseFlags`,
   `resolveProjectPath`. [v1 F1.1]
 - `mado release` command: one-shot `typecheck + build + bundle + bake + copy
-  public/ → out/` pipeline so apps have exactly one command to ship. [v1 F1.3]
+public/ → out/` pipeline so apps have exactly one command to ship. [v1 F1.3]
 - `mado.config.json` shipped in the `minimal` and `crud` starters with the
   default app-mode layout (`src/routes.ts`, `index.html`, `out/`). [v1 F1.4]
 - Tests: `test/config-loader.test.mjs`, `test/bake-cli.test.mjs` (11 + 3
@@ -25,6 +224,7 @@ Phase 1 — Repo-vs-app split:
   flags, and the no-more-silent-`[object Object]` contract). [v1 F1.6]
 
 ### Changed
+
 - `scripts/bake.mjs` now reads configuration from `mado.config.json` and
   accepts `--entry`, `--template`, `--out`, `--base-url` flags. In app-mode
   defaults are `src/routes.ts` + `index.html` + `out/baked/`; the
@@ -46,6 +246,7 @@ Phase 1 — Repo-vs-app split:
 Phase 2 — One blessed way:
 
 ### Added
+
 - `layout()` factory in `src/page.ts` (alias of `nested()`) plus `Guard` and
   `GuardResult` types. Exported from the public API. [v1 F2.1 / F2.3]
 - Route guards: nested groups and individual pages accept `guard: Guard | Guard[]`.
@@ -70,6 +271,7 @@ Phase 2 — One blessed way:
 Phase 3 — Bake first-class + Release pipeline:
 
 ### Added
+
 - `mado release` writes `_redirects` (`/* /index.html 200`) and `_headers`
   (immutable for `/assets/*`, no-cache for HTML) into `out/` when they do not
   exist, so Cloudflare Pages / Netlify deploys "just work". [v1 F3.7]
@@ -83,6 +285,7 @@ Phase 3 — Bake first-class + Release pipeline:
   and copied `public/` assets are all present. [v1 F3.10]
 
 ### Changed
+
 - `scripts/preview.mjs` now reads `mado.config.json` (`build.out`, `dev.port`),
   refuses to auto-build by default in app-mode, and asks the user to run
   `mado release` first. Legacy auto-build is opt-in via `PREVIEW_AUTOBUILD=1`
@@ -97,6 +300,7 @@ Phase 3 — Bake first-class + Release pipeline:
   dependencies. The startup banner prints the active proxy table. [v1 F3.6]
 
 ### Deferred to v0.7
+
 - `mado dev` does not yet serve baked routes inline. Workaround: run
   `mado release && mado preview`. [v1 F3.2]
 - `mado check` (bake-safety scan over `bake:` routes) is not exposed yet.
@@ -106,6 +310,7 @@ Phase 3 — Bake first-class + Release pipeline:
 Phase 4 — Core hardening:
 
 ### Added
+
 - `computed(fn, { equals })` option to suppress subscriber reruns when an
   observed computed recomputes to an equal value. [v1 F4.3]
 - HTML directives: `unsafeHTML()`, `ref()`, `classMap()` and `styleMap()` are
@@ -127,6 +332,7 @@ Phase 4 — Core hardening:
   its regression tests. [v1 F4.9]
 
 ### Changed
+
 - `computed()` now releases dependency subscriptions after unobserved reads and
   after the last subscriber is disposed, avoiding long-lived stale subscriptions
   in the signal graph. [v1 F4.1]
@@ -145,6 +351,7 @@ Phase 4 — Core hardening:
 Phase 5 — Documentation:
 
 ### Added
+
 - `docs/en/10-app-architecture.md`, `14-testing.md`, `15-error-handling.md`
   and `16-bake-cookbook.md` complete the v1 English recipe set. [v1 F5.1-F5.4]
 - `AGENTS.md` now includes an "App architecture for LLM" section and `llms.txt`

package/dist/src/component.d.ts

@@ -15,13 +15,25 @@
  * Shadow DOM (open) is used by default. It can be disabled, and
  * styles will be scoped via @scope (or a tag-prefix fallback).
  */
-import { type Disposer } from "./signal.js";
+import { type Signal, type Disposer } from "./signal.js";
 import { html, type TemplateResult } from "./html.js";
 import { type CSSResult } from "./css.js";
 export interface ComponentContext {
     host: HTMLElement;
     /** Run cleanup when the component is removed. */
     onDispose(fn: Disposer): void;
+    /**
+     * Reactive attribute accessor. Returns a Signal<string> that updates
+     * automatically whenever the attribute changes on the host element.
+     *
+     *   const variant = ctx.attr("variant", "primary");
+     *   return () => html`<div class=${variant()}>…</div>`;
+     *
+     * No MutationObserver boilerplate needed — the signal updates via
+     * attributeChangedCallback. The attribute name is automatically added to
+     * observedAttributes if not already listed.
+     */
+    attr(name: string, defaultValue?: string): Signal<string>;
 }
 export type SetupFn = (ctx: ComponentContext) => () => TemplateResult;
 export type StyleInput = string | CSSResult | Array<string | CSSResult>;
@@ -38,9 +50,10 @@ export interface ComponentOptions {
     /**
      * List of observed attributes.
      *
-     * v0.3: this is plain reflection into host[attr], without a reactive props API.
-     * If you need to re-render the component when an attribute changes, create a signal()
-     * inside setup() and update it manually from your own wrapper/event.
+     * Attributes listed here are reflected to host[attr] via
+     * attributeChangedCallback and also power ctx.attr() reactive signals.
+     * You only need to list them here if you use the legacy property reflection
+     * pattern. ctx.attr() automatically registers any attribute it tracks.
      */
     observedAttributes?: readonly string[];
 }

package/dist/src/component.js

@@ -15,10 +15,10 @@
  * Shadow DOM (open) is used by default. It can be disabled, and
  * styles will be scoped via @scope (or a tag-prefix fallback).
  */
-import { effect } from "./signal.js";
+import { signal, effect } from "./signal.js";
 import { html, render } from "./html.js";
 import { adopt, scopeStyles } from "./css.js";
-import { createLifecycle, runInLifecycle } from "./lifecycle.js";
+import { createLifecycle, runInLifecycle, } from "./lifecycle.js";
 import { warnOnce } from "./diagnostics.js";
 export function component(tagName, setup, options = {}) {
     if (!tagName.includes("-")) {
@@ -36,18 +36,22 @@ export function component(tagName, setup, options = {}) {
     }
     const useShadow = options.shadow !== false;
     const observed = options.observedAttributes ?? [];
+    // Collect attribute names that ctx.attr() will track. These are merged with
+    // options.observedAttributes to form the final static observedAttributes.
+    const attrSignalNames = new Set(observed);
     // Normalize styles to an array of CSSStyleSheet once.
     // Sheets are shared across all instances — memory is not duplicated.
     const stylesheets = normalizeStyles(options.styles, tagName, useShadow);
     class MadoElement extends HTMLElement {
         static get observedAttributes() {
-            return [...observed];
+            return [...attrSignalNames];
         }
         #root;
         #renderer = null;
         #effectDispose = null;
         #lifecycle = null;
         #connected = false;
+        #attrSignals = new Map();
         constructor() {
             super();
             this.#root = useShadow ? this.attachShadow({ mode: "open" }) : this;
@@ -69,12 +73,25 @@ export function component(tagName, setup, options = {}) {
             // getCurrentLifecycle() and register its own cleanup.
             const lifecycle = createLifecycle();
             this.#lifecycle = lifecycle;
+            const host = this;
             const ctx = {
                 host: this,
                 // ctx.onDispose proxies to lifecycle — the single source of truth
                 // for component cleanups (including auto-cleanup from
                 // resource(), navigator listeners, etc.).
                 onDispose: (fn) => lifecycle.onDispose(fn),
+                attr(name, defaultValue = "") {
+                    let s = host.#attrSignals.get(name);
+                    if (!s) {
+                        s = signal(host.getAttribute(name) ?? defaultValue);
+                        host.#attrSignals.set(name, s);
+                        // Ensure the attribute is observed. For the current instance
+                        // we already have the signal; for future registrations of
+                        // the same tag (HMR) the set persists.
+                        attrSignalNames.add(name);
+                    }
+                    return s;
+                },
             };
             this.#renderer = runInLifecycle(lifecycle, () => setup(ctx));
             this.#effectDispose = effect(() => {
@@ -89,7 +106,12 @@ export function component(tagName, setup, options = {}) {
             this.#connected = false;
         }
         attributeChangedCallback(name, _old, value) {
-            // reflect attribute to property — user can bind a signal to it
+            // Update ctx.attr() signal if it exists for this attribute.
+            const s = this.#attrSignals.get(name);
+            if (s) {
+                s.set(value ?? "");
+            }
+            // Legacy reflection: reflect attribute to property.
             this[name] = value;
         }
     }

package/dist/src/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/component.ts"],"names":[],"mappings":"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"}

package/dist/src/resource.js

@@ -85,14 +85,25 @@ export function resource(keyFn, fetcher, options = {}) {
         error.set(null);
         force = false;
         fetcher(key, ac.signal).then((result) => {
+            // Two-layer staleness check:
+            //   1. ac.signal.aborted — fetcher honored the AbortSignal
+            //      (jsonFetcher does; user fetchers may not).
+            //   2. key !== lastKey — defensive guard for fetchers that ignore
+            //      the AbortSignal and resolve after a newer run() has started.
+            //      Without this, a slow stale response can overwrite the data
+            //      from a faster newer one when the key changes rapidly.
             if (ac.signal.aborted)
                 return;
+            if (key !== lastKey)
+                return;
             cache.set(key, { data: result, timestamp: Date.now() });
             data.set(result);
             loading.set(false);
         }, (err) => {
             if (ac.signal.aborted)
                 return;
+            if (key !== lastKey)
+                return;
             error.set(err instanceof Error ? err : new Error(String(err)));
             loading.set(false);
         });