@madojs/mado 0.6.1 → 0.8.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,140 @@
 
 Nothing yet.
 
+## 0.8.0
+
+Core reliability fixes from "Pulse" stress-test (Round 2): Kanban 210 cards,
+Gantt 500-task computed chain, rapid navigation, field arrays with server
+populate. Three critical issues found and resolved.
+
+### Fixed
+
+- **`ctx.attr()` — MutationObserver fallback.** `observedAttributes` is read
+  once at `customElements.define()` time. Attributes registered via `ctx.attr()`
+  inside `setup()` were too late for the browser's `attributeChangedCallback`.
+  Now a single `MutationObserver` per instance covers all `ctx.attr()` attributes
+  and auto-disconnects on component removal. This was a silent failure — the
+  signal read the initial value correctly but never updated on external changes
+  like `?disabled=${() => !form.isValid()}`.
+
+- **`useForm().array().items()` — reactive reads.** The internal `read()`
+  function used `values.peek()` (untracked) instead of `values()`. Effects and
+  templates calling `items()` never re-ran when the array changed via
+  `append()` / `replace()` / `remove()`. Field arrays populated from server
+  data showed empty lists. One-line fix: `values.peek()` → `values()`.
+
+### Added
+
+- **`onDispose` in `PageContext`.** `page()` view now receives `onDispose(fn)` —
+  tied to the same lifecycle as `resource()` / `effect()` but for manual
+  subscriptions (`setInterval`, WebSocket, EventSource) that aren't auto-managed.
+  Cleaned up automatically on navigation.
+
+  ```ts
+  export default page({
+    view: ({ onDispose }) => {
+      const id = setInterval(pollInbox, 3000);
+      onDispose(() => clearInterval(id));
+      return html`...`;
+    },
+  });
+  ```
+
+- **`ctx.attr()` regression test** confirming that external `setAttribute()`
+  after `connectedCallback` correctly updates the reactive signal via the
+  MutationObserver fallback path.
+
+### Notes
+
+- Core reactivity engine passes all stress checks: diamond dependency (500
+  tasks, 1 recompute per batch), rapid navigation (20× board↔issue, 0 broken
+  states), `persisted()` cross-tab sync via BroadcastChannel.
+- Bundle size for a full Pulse app (8 pages, kanban, gantt, inbox, settings):
+  **36.7 KB gzip** / 31.8 KB brotli.
+- 141 tests, 138 pass, 0 fail, 3 skipped (browser-only).
+
+## 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.
@@ -12,6 +146,7 @@ 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
@@ -20,7 +155,7 @@ regression tests added in this release.
   `/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
+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`
@@ -57,6 +192,7 @@ regression tests added in this release.
   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
@@ -71,7 +207,7 @@ regression tests added in this release.
 - **`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
+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.
@@ -99,12 +235,14 @@ regression tests added in this release.
     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 —
@@ -124,12 +262,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
@@ -137,6 +276,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
@@ -158,6 +298,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[]`.
@@ -182,6 +323,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]
@@ -195,6 +337,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`
@@ -209,6 +352,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.
@@ -218,6 +362,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
@@ -239,6 +384,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]
@@ -257,6 +403,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,14 +73,44 @@ 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);
+                        // Record for future instances (HMR) — helps observedAttributes
+                        // on hot-reloaded re-defines.
+                        attrSignalNames.add(name);
+                    }
+                    return s;
+                },
             };
             this.#renderer = runInLifecycle(lifecycle, () => setup(ctx));
+            // After setup(), install a single MutationObserver for all attrs
+            // registered via ctx.attr(). This is necessary because
+            // observedAttributes is read once at customElements.define() time —
+            // attrs added by ctx.attr() during setup are too late for the
+            // browser's attributeChangedCallback mechanism. The observer bridges
+            // the gap for the current and all future instances.
+            if (this.#attrSignals.size > 0) {
+                const attrNames = [...this.#attrSignals.keys()];
+                const obs = new MutationObserver((mutations) => {
+                    for (const m of mutations) {
+                        const s = this.#attrSignals.get(m.attributeName);
+                        if (s)
+                            s.set(this.getAttribute(m.attributeName) ?? "");
+                    }
+                });
+                obs.observe(this, { attributes: true, attributeFilter: attrNames });
+                lifecycle.onDispose(() => obs.disconnect());
+            }
             this.#effectDispose = effect(() => {
                 render(this.#renderer(), this.#root);
             });
@@ -89,7 +123,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":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,MAAM,EAAiB,MAAM,aAAa,CAAC;AACpD,OAAO,EAAE,IAAI,EAAE,MAAM,EAAuB,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,cAAc,EAAwB,MAAM,gBAAgB,CAAC;AACvF,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAgC5C,MAAM,UAAU,SAAS,CACvB,OAAe,EACf,KAAc,EACd,UAA4B,EAAE;IAE9B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC3B,QAAQ,CACN,yBAAyB,OAAO,EAAE,EAClC,cAAc,OAAO,yDAAyD,CAC/E,CAAC;QACF,OAAO;IACT,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QAChC,IACE,CAAC,YAAY;YACb,YAAY,CAAC,KAAK,KAAK,KAAK;YAC5B,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,EACpD,CAAC;YACD,QAAQ,CACN,uBAAuB,OAAO,EAAE,EAChC,cAAc,OAAO,oFAAoF,CAC1G,CAAC;QACJ,CAAC;QACD,OAAO,CAAC,wBAAwB;IAClC,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC;IAC3C,MAAM,QAAQ,GAAG,OAAO,CAAC,kBAAkB,IAAI,EAAE,CAAC;IAElD,sDAAsD;IACtD,qEAAqE;IACrE,MAAM,WAAW,GAAgB,eAAe,CAC9C,OAAO,CAAC,MAAM,EACd,OAAO,EACP,SAAS,CACV,CAAC;IAEF,MAAM,WAAY,SAAQ,WAAW;QACnC,MAAM,KAAK,kBAAkB;YAC3B,OAAO,CAAC,GAAG,QAAQ,CAAC,CAAC;QACvB,CAAC;QAED,KAAK,CAAuB;QAC5B,SAAS,GAAkC,IAAI,CAAC;QAChD,cAAc,GAAoB,IAAI,CAAC;QACvC,UAAU,GAA2B,IAAI,CAAC;QAC1C,UAAU,GAAG,KAAK,CAAC;QAEnB;YACE,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YAEvB,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3B,IAAI,SAAS,EAAE,CAAC;oBACd,KAAK,CAAC,IAAI,CAAC,KAAmB,EAAE,GAAG,WAAW,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;YAED,sDAAsD;YACtD,sDAAsD;YACtD,sDAAsD;YACtD,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAE5B,MAAM,GAAG,GAAqB;gBAC5B,IAAI,EAAE,IAAI;gBACV,kEAAkE;gBAClE,sDAAsD;gBACtD,0CAA0C;gBAC1C,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;aAC3C,CAAC;YAEF,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;YAE7D,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,SAAU,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;QAED,wBAAwB,CACtB,IAAY,EACZ,IAAmB,EACnB,KAAoB;YAEpB,+DAA+D;YAC9D,IAA2C,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QAC7D,CAAC;KACF;IAED,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAC9C,CAAC;AAED,gCAAgC;AAEhC,SAAS,eAAe,CACtB,KAA6B,EAC7B,OAAe,EACf,SAAkB;IAElB,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACnB,IAAI,KAAgB,CAAC;QACrB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;YAC1B,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAC5B,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;QACD,+BAA+B;QAC/B,OAAO,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,OAAO,EAAa,CAAC;AACjD,MAAM,UAAU,GAAG,IAAI,GAAG,EAGvB,CAAC;AAEJ,SAAS,oBAAoB,CAC3B,CAAmB,EACnB,CAAmB;IAEnB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,MAAM,EAAE,GAAG,CAAC,CAAC,kBAAkB,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,GAAG,CAAC,CAAC,kBAAkB,IAAI,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,mBAAmB,CAAC,MAAmB;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAC/B,KAAK,MAAM,CAAC,IAAI,KAAK;QAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,GAAG,KAAK,CAAC,CAAC;AAC3E,CAAC;AAED,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"component.js","sourceRoot":"","sources":["../../src/component.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,EAA8B,MAAM,aAAa,CAAC;AACzE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAuB,MAAM,WAAW,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,WAAW,EAAkB,MAAM,UAAU,CAAC;AAC9D,OAAO,EACL,eAAe,EACf,cAAc,GAEf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AA6C5C,MAAM,UAAU,SAAS,CACvB,OAAe,EACf,KAAc,EACd,UAA4B,EAAE;IAE9B,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,CAAC;QAC3B,QAAQ,CACN,yBAAyB,OAAO,EAAE,EAClC,cAAc,OAAO,yDAAyD,CAC/E,CAAC;QACF,OAAO;IACT,CAAC;IAED,MAAM,YAAY,GAAG,UAAU,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IAC7C,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;QAChC,IACE,CAAC,YAAY;YACb,YAAY,CAAC,KAAK,KAAK,KAAK;YAC5B,CAAC,oBAAoB,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,EACpD,CAAC;YACD,QAAQ,CACN,uBAAuB,OAAO,EAAE,EAChC,cAAc,OAAO,oFAAoF,CAC1G,CAAC;QACJ,CAAC;QACD,OAAO,CAAC,wBAAwB;IAClC,CAAC;IAED,MAAM,SAAS,GAAG,OAAO,CAAC,MAAM,KAAK,KAAK,CAAC;IAC3C,MAAM,QAAQ,GAAG,OAAO,CAAC,kBAAkB,IAAI,EAAE,CAAC;IAElD,4EAA4E;IAC5E,0EAA0E;IAC1E,MAAM,eAAe,GAAG,IAAI,GAAG,CAAS,QAAQ,CAAC,CAAC;IAElD,sDAAsD;IACtD,qEAAqE;IACrE,MAAM,WAAW,GAAgB,eAAe,CAC9C,OAAO,CAAC,MAAM,EACd,OAAO,EACP,SAAS,CACV,CAAC;IAEF,MAAM,WAAY,SAAQ,WAAW;QACnC,MAAM,KAAK,kBAAkB;YAC3B,OAAO,CAAC,GAAG,eAAe,CAAC,CAAC;QAC9B,CAAC;QAED,KAAK,CAAuB;QAC5B,SAAS,GAAkC,IAAI,CAAC;QAChD,cAAc,GAAoB,IAAI,CAAC;QACvC,UAAU,GAA2B,IAAI,CAAC;QAC1C,UAAU,GAAG,KAAK,CAAC;QACnB,YAAY,GAAG,IAAI,GAAG,EAA0B,CAAC;QAEjD;YACE,KAAK,EAAE,CAAC;YACR,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACtE,CAAC;QAED,iBAAiB;YACf,IAAI,IAAI,CAAC,UAAU;gBAAE,OAAO;YAC5B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YAEvB,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC3B,IAAI,SAAS,EAAE,CAAC;oBACd,KAAK,CAAC,IAAI,CAAC,KAAmB,EAAE,GAAG,WAAW,CAAC,CAAC;gBAClD,CAAC;qBAAM,CAAC;oBACN,mBAAmB,CAAC,WAAW,CAAC,CAAC;gBACnC,CAAC;YACH,CAAC;YAED,sDAAsD;YACtD,sDAAsD;YACtD,sDAAsD;YACtD,MAAM,SAAS,GAAG,eAAe,EAAE,CAAC;YACpC,IAAI,CAAC,UAAU,GAAG,SAAS,CAAC;YAE5B,MAAM,IAAI,GAAG,IAAI,CAAC;YAElB,MAAM,GAAG,GAAqB;gBAC5B,IAAI,EAAE,IAAI;gBACV,kEAAkE;gBAClE,sDAAsD;gBACtD,0CAA0C;gBAC1C,SAAS,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,SAAS,CAAC,SAAS,CAAC,EAAE,CAAC;gBAC1C,IAAI,CAAC,IAAY,EAAE,YAAY,GAAG,EAAE;oBAClC,IAAI,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBACpC,IAAI,CAAC,CAAC,EAAE,CAAC;wBACP,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,YAAY,CAAC,CAAC;wBACpD,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;wBAC/B,+DAA+D;wBAC/D,8BAA8B;wBAC9B,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;oBAC5B,CAAC;oBACD,OAAO,CAAC,CAAC;gBACX,CAAC;aACF,CAAC;YAEF,IAAI,CAAC,SAAS,GAAG,cAAc,CAAC,SAAS,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;YAE7D,iEAAiE;YACjE,uDAAuD;YACvD,oEAAoE;YACpE,8DAA8D;YAC9D,qEAAqE;YACrE,oDAAoD;YACpD,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;gBAC/B,MAAM,SAAS,GAAG,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;gBAChD,MAAM,GAAG,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;oBAC7C,KAAK,MAAM,CAAC,IAAI,SAAS,EAAE,CAAC;wBAC1B,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC,CAAC,aAAc,CAAC,CAAC;wBAClD,IAAI,CAAC;4BAAE,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,aAAc,CAAC,IAAI,EAAE,CAAC,CAAC;oBAC1D,CAAC;gBACH,CAAC,CAAC,CAAC;gBACH,GAAG,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;gBACpE,SAAS,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC,CAAC;YAC9C,CAAC;YAED,IAAI,CAAC,cAAc,GAAG,MAAM,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,IAAI,CAAC,SAAU,EAAE,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;YACxC,CAAC,CAAC,CAAC;QACL,CAAC;QAED,oBAAoB;YAClB,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;YAC3B,IAAI,CAAC,UAAU,EAAE,OAAO,EAAE,CAAC;YAC3B,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;YACvB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC;QAC1B,CAAC;QAED,wBAAwB,CACtB,IAAY,EACZ,IAAmB,EACnB,KAAoB;YAEpB,4DAA4D;YAC5D,MAAM,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YACtC,IAAI,CAAC,EAAE,CAAC;gBACN,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YACrB,CAAC;YACD,oDAAoD;YACnD,IAA2C,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;QAC7D,CAAC;KACF;IAED,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,WAAW,CAAC,CAAC;IAC5C,UAAU,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;AAC9C,CAAC;AAED,gCAAgC;AAEhC,SAAS,eAAe,CACtB,KAA6B,EAC7B,OAAe,EACf,SAAkB;IAElB,IAAI,CAAC,KAAK;QAAE,OAAO,EAAE,CAAC;IACtB,MAAM,GAAG,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;IACnD,OAAO,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;QACnB,IAAI,KAAgB,CAAC;QACrB,IAAI,OAAO,CAAC,KAAK,QAAQ,EAAE,CAAC;YAC1B,KAAK,GAAG,IAAI,aAAa,EAAE,CAAC;YAC5B,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC;aAAM,CAAC;YACN,KAAK,GAAG,CAAC,CAAC;QACZ,CAAC;QACD,+BAA+B;QAC/B,OAAO,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;AACL,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,OAAO,EAAa,CAAC;AACjD,MAAM,UAAU,GAAG,IAAI,GAAG,EAGvB,CAAC;AAEJ,SAAS,oBAAoB,CAC3B,CAAmB,EACnB,CAAmB;IAEnB,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IACxC,MAAM,EAAE,GAAG,CAAC,CAAC,kBAAkB,IAAI,EAAE,CAAC;IACtC,MAAM,EAAE,GAAG,CAAC,CAAC,kBAAkB,IAAI,EAAE,CAAC;IACtC,IAAI,EAAE,CAAC,MAAM,KAAK,EAAE,CAAC,MAAM;QAAE,OAAO,KAAK,CAAC;IAC1C,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/C,CAAC;AAED,SAAS,mBAAmB,CAAC,MAAmB;IAC9C,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;IAC5D,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO;IAC/B,KAAK,MAAM,CAAC,IAAI,KAAK;QAAE,eAAe,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAC9C,QAAQ,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,CAAC,kBAAkB,EAAE,GAAG,KAAK,CAAC,CAAC;AAC3E,CAAC;AAED,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/src/forms.js

@@ -277,7 +277,10 @@ export function useForm(schema, options = {}) {
         validate: validateAll,
         array(name) {
             const read = () => {
-                const value = getPath(values.peek(), name);
+                // Use values() (tracked) — not values.peek() — so that effects and
+                // computed() that call items() re-run when the array changes via
+                // append/remove/replace/etc.
+                const value = getPath(values(), name);
                 return Array.isArray(value) ? value : [];
             };
             const write = (items) => {