From bbca3bac1fb1c7cb3edce1293f8f90bec74b9f7e Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Fri, 21 Aug 2026 00:36:37 +0530
Subject: [PATCH 1/3] fix: resolve live() in an attribute hole so a falsy ?bool
 omits it

The SSR renderer resolved live() only in a child hole, so the directive's
wrapper object reached the attribute emit sites raw. Each kind failed its
own way: the wrapper is truthy, so `?open=${live(false)}` emitted `open=""`
whatever it wrapped; `attr=${live(v)}` stringified to `[object Object]`;
and `.prop=${live(v)}` serialized the wrapper into the hydration payload.

The client has always unwrapped live() once, before its attr/bool/prop
dispatch, and the form-action reconcile even simulates SSR by unwrapping
while claiming to mirror the server exactly. So the two renderers held
contradictory models of the same emit, and the falsy-bool case shipped:
webjs.dev's mobile nav menu was served open and hydration then closed it.

Unwrap at the same single point on the server, in both the buffered and
streaming machines, which makes the SSR bytes match the client by
construction rather than through three per-kind rules that can drift.
Scoped to live(), the only directive the client accepts in attribute
position. render() and streamRender() keep their own isLive branch for a
live() nested inside an array child, which a hole-level unwrap never sees.

The action-leak guards now fire through live() as well, since a wrapper is
not a function: `action="${live(serverAction)}"` previously slipped past
them and emitted a form posting to a garbage url.

Closes #1443
---
 .agents/skills/webjs/references/components.md |   8 +
 .../src/render-server/template-renderer.js    |  15 ++
 .../browser/live-attribute-hydration.test.js  | 130 +++++++++++++++
 .../rendering/live-in-attribute-hole.test.js  | 153 ++++++++++++++++++
 test/bun/live-attribute-hole.mjs              |  90 +++++++++++
 test/bun/live-attribute-hole.test.mjs         |  13 ++
 website/app/docs/directives/page.ts           |   1 +
 7 files changed, 410 insertions(+)
 create mode 100644 packages/core/test/rendering/browser/live-attribute-hydration.test.js
 create mode 100644 packages/core/test/rendering/live-in-attribute-hole.test.js
 create mode 100644 test/bun/live-attribute-hole.mjs
 create mode 100644 test/bun/live-attribute-hole.test.mjs

diff --git a/.agents/skills/webjs/references/components.md b/.agents/skills/webjs/references/components.md
index d5a24dd2d..5ec88276c 100644
--- a/.agents/skills/webjs/references/components.md
+++ b/.agents/skills/webjs/references/components.md
@@ -382,6 +382,14 @@ Import from `@webjsdev/core/directives`. Everything a `class`/`style`/conditiona
 | `asyncAppend(iter)` / `asyncReplace(iter)` | Stream from an async iterable, appending each value or replacing with the latest. |
 | `templateContent(el)` | Render the content of a `<template>` element. |
 
+Every directive here is CLIENT behaviour. At SSR the server renders one shot, so
+`guard` always invokes its function, `watch` reads its signal once and inlines
+the value, and `live` is fully transparent, resolving to the value it wraps in
+every hole position (a child, a plain attribute, a `?bool`, a `.prop`). So
+`?open=${live(false)}` omits its attribute exactly as `?open=${false}` does. It
+was previously resolved only in a child hole, which served `open=""` and let
+hydration close the element a moment later (#1443).
+
 ## Display-only elision
 
 A component that does no client-side work renders the same SSR'd HTML with or without its JS, so WebJs strips its import from the served source (and any vendor reachable only through it). This is automatic and conservative. A component stays elidable while it has NONE of:
diff --git a/packages/core/src/render-server/template-renderer.js b/packages/core/src/render-server/template-renderer.js
index 24d1dba2a..fe83b428f 100644
--- a/packages/core/src/render-server/template-renderer.js
+++ b/packages/core/src/render-server/template-renderer.js
@@ -384,6 +384,18 @@ export async function renderTemplate(tr, ctx) {
       if (val && typeof /** @type any */ (val).then === 'function') {
         val = await val;
       }
+      // Unwrap live() once, here, before the position dispatch, exactly where
+      // the client's applyPart() unwraps it (render-client/parts.js). The
+      // directive's only job is to dirty-check against the LIVE DOM value, a
+      // client-only concern, so on the server it is transparent and every
+      // position must see the inner value. Doing it per-position instead let
+      // the two renderers drift: the wrapper is truthy, so a `?bool=${live(v)}`
+      // emitted its attribute whatever v was, and `attr=${live(v)}` stringified
+      // to `[object Object]` (#1443). render() / streamRender() keep their own
+      // isLive branch below for a live() nested inside an array child, which
+      // this hole-level unwrap never sees. AFTER the await: a hole may hold a
+      // promise that resolves TO a live().
+      if (isLive(val)) val = /** @type any */ (val).value;
       if (state === 'comment') {
         // Holes inside <!-- comments --> are emitted raw (no escaping; comments
         // are inert and not rendered by browsers).
@@ -823,6 +835,9 @@ export async function streamTemplate(tr, ctx, controller) {
       if (val && typeof /** @type any */ (val).then === 'function') {
         val = await val;
       }
+      // Same unwrap as the buffered machine above (#1443). The two machines
+      // must emit identical bytes, so this is not optional here.
+      if (isLive(val)) val = /** @type any */ (val).value;
       if (state === 'comment') {
         buf += String(val ?? '');
         commentDashes = 0;
diff --git a/packages/core/test/rendering/browser/live-attribute-hydration.test.js b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
new file mode 100644
index 000000000..40bcbf861
--- /dev/null
+++ b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
@@ -0,0 +1,130 @@
+/**
+ * Real-browser hydration guard for `live()` in an attribute hole (#1443).
+ *
+ * The unit tests assert the SSR STRING. This asserts what a reader actually
+ * saw: a component binding `?open=${live(false)}` was served with `open=""`, so
+ * the browser painted the region OPEN and hydration then removed the attribute
+ * and collapsed it. On webjs.dev that was the mobile nav menu flashing open on
+ * every page load.
+ *
+ * A string comparison cannot catch that class of bug alone, because a server
+ * that emits the attribute and a client that removes it are each internally
+ * consistent; the defect is the TRANSITION between them. So the assertion is a
+ * MutationObserver over the attribute across the hydration window: a correct
+ * hydration touches `open` zero times, because SSR never wrote it.
+ *
+ * The window is opened faithfully. The component's real SSR bytes are built
+ * into a DETACHED container (a custom element does not upgrade until it is
+ * connected), the observer starts, and only then is the container appended,
+ * which is the parse-then-upgrade sequence a served page actually takes and the
+ * exact interval the flash lives in.
+ */
+import { html } from '../../../src/html.js';
+import { WebComponent, prop } from '../../../src/component.js';
+import { renderToString } from '../../../src/render-server.js';
+import { live } from '../../../src/directives.js';
+
+import { assert } from '../../../../../test/browser-assert.js';
+
+/** The shape webjs.dev's nav menu used: a `<details>` bound through live(). */
+class MenuProbe extends WebComponent({ open: prop(Boolean) }) {
+  constructor() { super(); this.open = false; }
+  render() { return html`<details ?open=${live(this.open)}><summary>menu</summary></details>`; }
+}
+MenuProbe.register('lah-menu');
+
+/** Same, but open by default, so the guard cannot be met by never emitting. */
+class OpenProbe extends WebComponent({ open: prop(Boolean) }) {
+  constructor() { super(); this.open = true; }
+  render() { return html`<details ?open=${live(this.open)}><summary>menu</summary></details>`; }
+}
+OpenProbe.register('lah-open');
+
+/**
+ * Mount `ssr` through a real upgrade and report every `open` attribute change
+ * that happened along the way.
+ *
+ * Detached first so nothing upgrades before the observer is watching; settled
+ * afterwards through the element's own update cycle AND a task turn, so a late
+ * write (which is what the flash is) has genuinely had its chance to land
+ * before the record is read. Reading earlier would pass vacuously.
+ *
+ * @returns {Promise<{ host: Element, writes: (string|null)[] }>}
+ */
+async function hydrate(ssr) {
+  const host = document.createElement('div');
+  host.innerHTML = ssr;
+
+  /** @type {(string|null)[]} */
+  const writes = [];
+  const observer = new MutationObserver((records) => {
+    for (const r of records) if (r.attributeName === 'open') writes.push(r.oldValue);
+  });
+  observer.observe(host, { attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['open'] });
+
+  document.body.appendChild(host);
+  const el = host.firstElementChild;
+  if (el && /** @type any */ (el).updateComplete) await /** @type any */ (el).updateComplete;
+  await new Promise((r) => setTimeout(r, 0));
+  observer.disconnect();
+
+  return { host, writes };
+}
+
+suite('live() in an attribute hole hydrates without a flash (#1443)', () => {
+  /** @type {Element[]} */
+  let mounted;
+
+  setup(() => { mounted = []; });
+  teardown(() => { for (const h of mounted) h.remove(); });
+
+  test('a falsy ?bool bound through live() is absent from SSR and untouched on upgrade', async () => {
+    const ssr = await renderToString(html`<lah-menu></lah-menu>`);
+    assert.ok(
+      !/\bopen[\s=>]/.test(ssr),
+      `SSR must not write the attribute for a falsy live() bool, got ${ssr}`,
+    );
+
+    const { host, writes } = await hydrate(ssr);
+    mounted.push(host);
+
+    const details = host.querySelector('details');
+    assert.ok(details, 'the details element survived hydration');
+    assert.ok(!details.hasAttribute('open'), 'the hydrated DOM is still closed');
+    // Before the fix the SSR bytes carried `open=""` and this recorded exactly
+    // one removal, which IS the visible flash.
+    assert.equal(
+      writes.length,
+      0,
+      `hydration must not touch the open attribute, but it changed ${writes.length} time(s): ${JSON.stringify(writes)}`,
+    );
+  });
+
+  test('a truthy ?bool bound through live() is written at SSR and left alone on upgrade', async () => {
+    const ssr = await renderToString(html`<lah-open></lah-open>`);
+    assert.match(ssr, /\bopen=""/, `SSR must write the attribute for a truthy live() bool, got ${ssr}`);
+
+    const { host, writes } = await hydrate(ssr);
+    mounted.push(host);
+
+    assert.ok(host.querySelector('details').hasAttribute('open'), 'the hydrated DOM is still open');
+    assert.equal(writes.length, 0, `hydration must not touch the open attribute, got ${JSON.stringify(writes)}`);
+  });
+
+  test('a plain attribute bound through live() carries its value into the live DOM', async () => {
+    // The `[object Object]` half of the same bug. It is inert (no flash), so
+    // only the rendered value shows it, and it is asserted in the DOM rather
+    // than the string so a browser re-parse cannot hide it.
+    const ssr = await renderToString(html`<div title=${live('hello')}></div>`);
+    const host = document.createElement('div');
+    host.innerHTML = ssr;
+    document.body.appendChild(host);
+    mounted.push(host);
+
+    assert.equal(
+      host.querySelector('div').getAttribute('title'),
+      'hello',
+      'the live() wrapper must not reach the attribute value',
+    );
+  });
+});
diff --git a/packages/core/test/rendering/live-in-attribute-hole.test.js b/packages/core/test/rendering/live-in-attribute-hole.test.js
new file mode 100644
index 000000000..e35814984
--- /dev/null
+++ b/packages/core/test/rendering/live-in-attribute-hole.test.js
@@ -0,0 +1,153 @@
+// #1443: SSR must resolve `live()` in an ATTRIBUTE hole, not just a child hole.
+//
+// `live()` exists to dirty-check a commit against the LIVE DOM value, which is
+// a client-only concern, so on the server the directive is transparent and every
+// position must see the inner value. It was resolved only in child position
+// (`render()` / `streamRender()`), so the wrapper object reached the attribute
+// emit sites raw and each kind failed its own way:
+//
+//   ?bool  the wrapper is truthy, so `?open=${live(false)}` emitted `open=""`
+//   attr   `String(val ?? '')` stringified the wrapper to `[object Object]`
+//   .prop  the wrapper itself was serialized into `data-webjs-prop-*`
+//
+// The falsy-bool case is the one that shipped: webjs.dev's `<details>` nav menu
+// bound `?open=${live(this.open)}`, so mobile painted the menu OPEN and
+// hydration then closed it.
+//
+// The client (render-client/parts.js `applyPart`) has always unwrapped `live()`
+// once, before its attr/bool/prop dispatch, and render-client/reconciler.js
+// `effectiveFormAttr` simulates SSR by calling `resolveHoleValue` (which
+// unwraps) while its docstring claims to "mirror render-server.js exactly". So
+// this was a direct contradiction between the two renderers, and the fix is to
+// unwrap at the same single point on the server.
+//
+// Both server machines are asserted on every case: the buffered renderer
+// (`renderToString`) and the streaming one (`renderToStream(v, {ssr:false})`)
+// are separate hole-dispatch sites that must not drift.
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+import { html } from '../../src/html.js';
+import { renderToString, renderToStream } from '../../src/render-server.js';
+import { live } from '../../src/directives.js';
+
+async function drain(stream) {
+  let out = '';
+  const reader = stream.getReader();
+  const dec = new TextDecoder();
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    out += typeof value === 'string' ? value : dec.decode(value);
+  }
+  return out;
+}
+
+const buffered = (tr) => renderToString(tr);
+const streamed = (tr) => drain(renderToStream(tr, { ssr: false }));
+
+/**
+ * Run a template factory through BOTH server machines and hand each output to
+ * `assertOn` with the machine's name. Flat rather than one subtest per machine:
+ * Bun's `node:test` shim refuses a nested subtest outside `bun test`, and this
+ * suite is in the Bun parity matrix. Every assertion below carries `who` in its
+ * failure message, so nothing is lost by not nesting.
+ */
+async function bothRenderers(mk, assertOn) {
+  for (const [who, run] of [['buffered', buffered], ['streamed', streamed]]) {
+    assertOn(await run(mk()), who);
+  }
+}
+
+test('a falsy ?bool hole omits its attribute through live() (#1443)', async () => {
+  // THE counterfactual case: reverting the server unwrap reds exactly this,
+  // because the wrapper object is truthy whatever it wraps.
+  await bothRenderers(() => html`<details ?open=${live(false)}></details>`, (out, who) => {
+    assert.ok(!/\bopen\b/.test(out), `${who}: ?open=\${live(false)} must omit the attribute, got ${out}`);
+  });
+});
+
+test('a truthy ?bool hole still emits its attribute through live() (#1443)', async () => {
+  await bothRenderers(() => html`<details ?open=${live(true)}></details>`, (out, who) => {
+    assert.match(out, /\bopen=""/, `${who}: ?open=\${live(true)} must emit the attribute, got ${out}`);
+  });
+});
+
+test('a ?bool hole renders identically with and without live() (#1443)', async () => {
+  // The property that matters: live() is TRANSPARENT at SSR. Asserting parity
+  // rather than a literal keeps this honest if the emit spelling ever changes.
+  for (const v of [false, true]) {
+    for (const [who, run] of [['buffered', buffered], ['streamed', streamed]]) {
+      const bare = await run(html`<details ?open=${v}></details>`);
+      const wrapped = await run(html`<details ?open=${live(v)}></details>`);
+      assert.equal(wrapped, bare, `${who}: live(${v}) must render exactly as ${v}`);
+    }
+  }
+});
+
+test('an unquoted attribute hole resolves live() (#1443)', async () => {
+  await bothRenderers(() => html`<div title=${live('hi')}></div>`, (out, who) => {
+    assert.match(out, /title="hi"/, `${who}: title=\${live('hi')} must emit the inner value, got ${out}`);
+    assert.ok(!/object Object/.test(out), `${who}: the live() wrapper must not be stringified, got ${out}`);
+  });
+});
+
+test('a quoted attribute hole resolves live() (#1443)', async () => {
+  await bothRenderers(() => html`<div title="${live('hi')}"></div>`, (out, who) => {
+    assert.match(out, /title="hi"/, `${who}: quoted live() must emit the inner value, got ${out}`);
+  });
+});
+
+test('a mixed attribute hole resolves live() in every position (#1443)', async () => {
+  // A multi-hole attribute concatenates statics and EVERY hole, so each one has
+  // to be unwrapped, not just the anchor.
+  await bothRenderers(() => html`<div class="a ${live('b')} c ${live('d')}"></div>`, (out, who) => {
+    assert.match(out, /class="a b c d"/, `${who}: every hole in a mixed attribute must unwrap, got ${out}`);
+  });
+});
+
+test('a null attribute hole keeps the documented empty-string emit through live() (#1443)', async () => {
+  // AGENTS.md: the server STRINGIFIES a nullish plain-attribute hole to
+  // `attr=""` (only the client removes it). Unwrapping must not quietly change
+  // that documented asymmetry into an omission.
+  await bothRenderers(() => html`<div title=${live(null)}></div>`, (out, who) => {
+    assert.match(out, /title=""/, `${who}: live(null) must emit title="" like a bare null, got ${out}`);
+  });
+});
+
+test('a .prop hole on a custom element serializes the inner value, not the wrapper (#1443)', async () => {
+  // Buffered only: `renderToStream(v, {ssr:false})` drops EVERY .prop by design
+  // (there is no injectDSD pre-pass on that path to consume the attribute), so
+  // there is no prop emit there to assert against.
+  const out = await renderToString(html`<my-el .foo=${live(1)}></my-el>`);
+  assert.match(out, /data-webjs-prop-foo="1"/, `the inner value must be serialized, got ${out}`);
+  assert.ok(!/_\$webjs/.test(out), `the live() wrapper must not reach the hydration payload, got ${out}`);
+});
+
+test('a child hole nested in an array still resolves live() (#1443)', async () => {
+  // The hole-level unwrap never sees this one; render()/streamRender() keep
+  // their own isLive branch for it. Guards against removing those as dead code.
+  await bothRenderers(() => html`<p>${[live('x'), live('y')]}</p>`, (out, who) => {
+    assert.match(out, /<p>xy<\/p>/, `${who}: live() inside an array child must resolve, got ${out}`);
+  });
+});
+
+test('the action-leak guards fire through live() (#1443)', async () => {
+  // Unwrapping is what MAKES these fire: the wrapper is not a function, so
+  // before the fix `action="${live(serverAction)}"` slipped past the guard and
+  // emitted `action="[object Object]"`, a form posting to a garbage url.
+  const fn = async function myAction() {};
+  const shapes = [
+    ['action="${live(fn)}" on <form>', () => html`<form action="${live(fn)}"></form>`],
+    ['?action=${live(fn)} on <form>', () => html`<form ?action=${live(fn)}></form>`],
+    ['.action=${live(fn)} on <form>', () => html`<form .action=${live(fn)}></form>`],
+  ];
+  for (const [label, mk] of shapes) {
+    for (const [who, run] of [['buffered', buffered], ['streamed', streamed]]) {
+      await assert.rejects(
+        () => run(mk()),
+        /function was interpolated into/,
+        `${who}: ${label} must be refused, not emitted`,
+      );
+    }
+  }
+});
diff --git a/test/bun/live-attribute-hole.mjs b/test/bun/live-attribute-hole.mjs
new file mode 100644
index 000000000..aa8609e65
--- /dev/null
+++ b/test/bun/live-attribute-hole.mjs
@@ -0,0 +1,90 @@
+/**
+ * Cross-runtime proof that `live()` in an ATTRIBUTE hole resolves identically
+ * under WHICHEVER runtime executes this file (#1443). Run it under both:
+ *
+ *   node test/bun/live-attribute-hole.mjs
+ *   bun  test/bun/live-attribute-hole.mjs
+ *
+ * SSR string output is the surface that must agree byte for byte across
+ * runtimes: the same page served from Node and from Bun has to carry the same
+ * attributes, or a Bun-hosted app hydrates against markup its own client code
+ * did not expect. The bug this guards was exactly a server/client disagreement
+ * (the wrapper object is truthy, so a falsy `?bool=${live(v)}` emitted its
+ * attribute anyway and hydration then removed it), so a per-runtime version of
+ * the same divergence is the failure worth pinning.
+ *
+ * Both server dispatch sites are exercised, since they are separate machines
+ * that have drifted before: the buffered renderer (`renderToString`) and the
+ * streaming one (`renderToStream({ ssr: false })`, i.e. `streamTemplate`).
+ *
+ * A plain assert script (not `*.test.mjs`, so the node:test runner does not
+ * double-run it); it exits non-zero on failure. Run from the repo root so the
+ * bare `@webjsdev/core` specifier resolves to the workspace package.
+ */
+import assert from 'node:assert/strict';
+import { html } from '@webjsdev/core';
+import { renderToString, renderToStream } from '@webjsdev/core/server';
+import { live } from '@webjsdev/core/directives';
+
+const runtime = process.versions.bun ? `bun ${process.versions.bun}` : `node ${process.versions.node}`;
+
+async function drain(stream) {
+  let out = '';
+  const reader = stream.getReader();
+  const dec = new TextDecoder();
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    out += typeof value === 'string' ? value : dec.decode(value);
+  }
+  return out;
+}
+
+const buffered = (tr) => renderToString(tr);
+const streamed = (tr) => drain(renderToStream(tr, { ssr: false }));
+
+for (const [who, run] of [['buffered', buffered], ['streamed', streamed]]) {
+  // A falsy boolean hole omits its attribute. The headline case: this is what
+  // painted webjs.dev's nav menu open on mobile before the fix.
+  const falsy = await run(html`<details ?open=${live(false)}></details>`);
+  assert.ok(
+    !/\bopen\b/.test(falsy),
+    `${runtime} ${who}: ?open=\${live(false)} must omit the attribute, got ${falsy}`,
+  );
+
+  // A truthy one still emits it.
+  const truthy = await run(html`<details ?open=${live(true)}></details>`);
+  assert.match(
+    truthy,
+    /\bopen=""/,
+    `${runtime} ${who}: ?open=\${live(true)} must emit the attribute, got ${truthy}`,
+  );
+
+  // live() is TRANSPARENT: wrapped output equals bare output, on every runtime.
+  for (const v of [false, true]) {
+    const bare = await run(html`<details ?open=${v}></details>`);
+    const wrapped = await run(html`<details ?open=${live(v)}></details>`);
+    assert.equal(
+      wrapped,
+      bare,
+      `${runtime} ${who}: live(${v}) must render exactly as ${v}`,
+    );
+  }
+
+  // A plain attribute hole emits the inner value, never the wrapper's
+  // stringification. `[object Object]` is what a missed unwrap looks like, and
+  // it is a runtime-independent shape, so a divergence here would be a real
+  // engine difference rather than a spelling one.
+  const attr = await run(html`<div title=${live('hi')}></div>`);
+  assert.match(attr, /title="hi"/, `${runtime} ${who}: title=\${live('hi')} must emit the inner value, got ${attr}`);
+  assert.ok(!/object Object/.test(attr), `${runtime} ${who}: the wrapper must not be stringified, got ${attr}`);
+}
+
+// The .prop hole is buffered-only: `renderToStream({ ssr: false })` drops every
+// .prop by design (no injectDSD pre-pass on that path to consume the attribute),
+// so there is no streamed prop emit to compare.
+const prop = await renderToString(html`<my-el .foo=${live(1)}></my-el>`);
+assert.match(prop, /data-webjs-prop-foo="1"/, `${runtime}: .prop must serialize the inner value, got ${prop}`);
+assert.ok(!/_\$webjs/.test(prop), `${runtime}: the wrapper must not reach the hydration payload, got ${prop}`);
+
+console.log(`[live-attribute-hole] OK on ${runtime}: live() resolves identically in ?bool, plain-attr and .prop holes across the buffered and streaming renderers`);
diff --git a/test/bun/live-attribute-hole.test.mjs b/test/bun/live-attribute-hole.test.mjs
new file mode 100644
index 000000000..9c30b9826
--- /dev/null
+++ b/test/bun/live-attribute-hole.test.mjs
@@ -0,0 +1,13 @@
+/**
+ * Run the cross-runtime `live()`-in-an-attribute-hole proof (#1443) under
+ * WHICHEVER runtime executes the suite. Picked up by the root `node --test`
+ * runner (so `npm test` exercises the Node path); CI also runs
+ * `bun test/bun/live-attribute-hole.mjs` for the Bun path. The proof is a plain
+ * assert script (`live-attribute-hole.mjs`, not `*.test.mjs`, so the runner does
+ * not double-run it); importing it runs it and throws on any failure.
+ */
+import { test } from 'node:test';
+
+test('live() resolves in an attribute hole identically on this runtime (#1443)', async () => {
+  await import('./live-attribute-hole.mjs');
+});
diff --git a/website/app/docs/directives/page.ts b/website/app/docs/directives/page.ts
index b2066ea23..343424dfb 100644
--- a/website/app/docs/directives/page.ts
+++ b/website/app/docs/directives/page.ts
@@ -34,6 +34,7 @@ import {
     <p>Dirty-checks against the live DOM value instead of the last rendered value. Solves the input desync problem where the user types between renders.</p>
     <code-block>html\`&lt;input .value=\${live(this.query.get())}
        @input=\${(e) =&gt; this.query.set(e.target.value)}&gt;\`;</code-block>
+    <p>Client-only behaviour. The server renders one shot, so there is no prior value to dirty-check against and <code>live()</code> is fully transparent there, resolving to the value it wraps in every hole position (a child, a plain attribute, a <code>?bool</code>, a <code>.prop</code>). A falsy boolean stays absent, so <code>?open=\${live(false)}</code> serves the same bytes as <code>?open=\${false}</code>.</p>
 
     <h2>keyed(key, template)</h2>
     <p>Wrap a template with a key. When the key changes between renders, the renderer discards the prior DOM and creates fresh. Useful for forcing a remount when the logical identity of the rendered content changes.</p>

From a6f65ee24d685562c777f6892e0586ea2d027309 Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Fri, 21 Aug 2026 01:43:05 +0530
Subject: [PATCH 2/3] fix: unwrap live() per piece in the client attr-mixed
 commit

Review findings on the #1443 fix, all three folded in:

The client's attr-mixed commit read every group piece raw from allValues,
bypassing applyPart's top-of-function unwrap, which only sees the anchor
hole's own value. Every hole inside a QUOTED attribute is attr-mixed to
the client compiler (single-hole included), so the SSR bytes the server
half of the fix now gets right for `title="${live(v)}"` were rewritten
to the wrapper's stringification by the first client commit: served
correct, corrupted on upgrade. Unwrapping per piece also puts the real
inner value in front of the per-piece function guard, and matches the
reconciler's effectiveFormAttr, which already unwraps each group piece.

Also pinned the one shape the server unwrap changes most: an unquoted
`action=${live(fn)}` on a form now enters the #1155 bound-form dispatch
instead of stringifying the wrapper into the attribute, asserted as
strict parity with the bare `action=${fn}` on both machines.

And added the dedicated ci.yml Bun step for test/bun/live-attribute-hole.mjs
that its wrapper's docstring described, matching the convention every
other cross-runtime proof follows.
---
 .github/workflows/ci.yml                      |  7 ++
 packages/core/src/render-client/parts.js      | 10 ++-
 .../browser/live-attribute-hydration.test.js  | 19 ++++++
 .../rendering/live-in-attribute-hole.test.js  | 39 +++++++++++
 .../live-in-client-attr-mixed.test.js         | 64 +++++++++++++++++++
 5 files changed, 138 insertions(+), 1 deletion(-)
 create mode 100644 packages/core/test/rendering/live-in-client-attr-mixed.test.js

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 12313db5c..1efd2b2de 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -139,6 +139,13 @@ jobs:
       # machines, which are independent and must be kept in step by hand.
       - name: WebJs form-action guard parity on Bun
         run: bun test/bun/form-action-guard.mjs
+      # live() in an attribute hole (#1443): the SSR unwrap must produce
+      # byte-identical attribute emission on Bun, across both server machines.
+      # The bug class this guards was a server/client disagreement (a falsy
+      # `?bool=${live(v)}` emitting its attribute anyway), so a per-runtime
+      # flavor of the same divergence is the failure worth pinning.
+      - name: WebJs live()-attribute-hole parity on Bun
+        run: bun test/bun/live-attribute-hole.mjs
       # Form-action dispatch (#1155) on Bun: the 'use server' load hook that
       # registers action identity is installed by a different mechanism on each
       # runtime (module.registerHooks vs Bun.plugin), and the submission path
diff --git a/packages/core/src/render-client/parts.js b/packages/core/src/render-client/parts.js
index f2b900e64..56550961c 100644
--- a/packages/core/src/render-client/parts.js
+++ b/packages/core/src/render-client/parts.js
@@ -267,7 +267,15 @@ export function applyPart(part, value, _prev, allValues, reconcileFormActionsCb)
       const mp = /** @type {{ statics: string[], group: number[] }} */ (/** @type any */ (part));
       let val = mp.statics[0];
       for (let j = 0; j < mp.group.length; j++) {
-        const piece = allValues ? allValues[mp.group[j]] : value;
+        let piece = allValues ? allValues[mp.group[j]] : value;
+        // Unwrap live() PER PIECE (#1443). The top-of-function unwrap only
+        // sees the anchor hole's own value, and every hole inside a QUOTED
+        // attribute lands here (single-hole included, the compiler classifies
+        // them all attr-mixed), so without this a `title="${live(v)}"` the
+        // server now emits correctly would be rewritten to the wrapper's
+        // stringification on the next client commit. Mirrors the reconciler's
+        // effectiveFormAttr, which already unwraps each group piece.
+        if (isLive(piece)) piece = /** @type any */ (piece).value;
         // #1154: same function guard for each piece of a mixed attribute.
         assertNotFunctionActionAttr(piece, part.name, part.el.localName);
         val += String(piece ?? '');
diff --git a/packages/core/test/rendering/browser/live-attribute-hydration.test.js b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
index 40bcbf861..b7fc6a6e3 100644
--- a/packages/core/test/rendering/browser/live-attribute-hydration.test.js
+++ b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
@@ -20,6 +20,7 @@
  * exact interval the flash lives in.
  */
 import { html } from '../../../src/html.js';
+import { render } from '../../../src/render-client.js';
 import { WebComponent, prop } from '../../../src/component.js';
 import { renderToString } from '../../../src/render-server.js';
 import { live } from '../../../src/directives.js';
@@ -127,4 +128,22 @@ suite('live() in an attribute hole hydrates without a flash (#1443)', () => {
       'the live() wrapper must not reach the attribute value',
     );
   });
+
+  test('a quoted attribute hole unwraps live() on the CLIENT commit too (#1443)', () => {
+    // The client half of the same bug, on the real engine. Every hole inside a
+    // QUOTED attribute is attr-mixed to the client compiler (single-hole
+    // included), and that commit path reads each group piece raw, bypassing
+    // applyPart's top-of-function unwrap. Without the per-piece unwrap, the
+    // SSR bytes the server half of this fix gets right are rewritten to the
+    // wrapper's stringification by the first client render: served correct,
+    // corrupted on upgrade, which no SSR-string assertion can see.
+    const host = document.createElement('div');
+    document.body.appendChild(host);
+    mounted.push(host);
+
+    render(html`<div title="${live('hello')}" class="a ${live('b')} c ${live('d')}"></div>`, host);
+    const el = host.querySelector('div');
+    assert.equal(el.getAttribute('title'), 'hello', 'quoted single-hole live() unwraps on the client');
+    assert.equal(el.getAttribute('class'), 'a b c d', 'every mixed-attribute piece unwraps on the client');
+  });
 });
diff --git a/packages/core/test/rendering/live-in-attribute-hole.test.js b/packages/core/test/rendering/live-in-attribute-hole.test.js
index e35814984..7a5974325 100644
--- a/packages/core/test/rendering/live-in-attribute-hole.test.js
+++ b/packages/core/test/rendering/live-in-attribute-hole.test.js
@@ -151,3 +151,42 @@ test('the action-leak guards fire through live() (#1443)', async () => {
     }
   }
 });
+
+test('an unquoted action hole behaves identically bare and through live() (#1443)', async () => {
+  // The one shape the unwrap changes MOST: `action=${fn}` on a <form> is the
+  // #1155 bound-form binding, so unwrapping routes `action=${live(fn)}` into
+  // that dispatch instead of stringifying the wrapper into the attribute
+  // (which is what shipped before the fix: `action="[object Object]"`, a form
+  // posting to a garbage url, with the guard silent because a wrapper is not
+  // a function). The pin is PARITY rather than a hardcoded message: whatever
+  // the bound-form path does with the inner function, bare and wrapped must do
+  // the same thing, on both machines. Here the inner function is not a
+  // 'use server' export, so both are refused by the bound-form dispatch; a
+  // real action would bind identically, which the client already models
+  // (reconciler.js resolveHoleValue unwraps before isBoundFormAction).
+  const fn = async function myAction() {};
+  for (const [who, run] of [['buffered', buffered], ['streamed', streamed]]) {
+    /** @type {{ threw: boolean, message?: string, out?: string }[]} */
+    const outcomes = [];
+    for (const mk of [
+      () => html`<form action=${fn}><button>go</button></form>`,
+      () => html`<form action=${live(fn)}><button>go</button></form>`,
+    ]) {
+      try {
+        outcomes.push({ threw: false, out: await run(mk()) });
+      } catch (e) {
+        outcomes.push({ threw: true, message: /** @type Error */ (e).message });
+      }
+    }
+    const [bare, wrapped] = outcomes;
+    assert.equal(wrapped.threw, bare.threw, `${who}: wrapped must throw iff bare throws`);
+    if (bare.threw) {
+      assert.equal(wrapped.message, bare.message, `${who}: identical refusal for bare and wrapped`);
+      // And it is the bound-form refusal, not the stringify guard: the unwrap
+      // routed the function into the #1155 dispatch.
+      assert.match(String(bare.message), /not a server action/, `${who}: the bound-form path judged it`);
+    } else {
+      assert.equal(wrapped.out, bare.out, `${who}: identical emit for bare and wrapped`);
+    }
+  }
+});
diff --git a/packages/core/test/rendering/live-in-client-attr-mixed.test.js b/packages/core/test/rendering/live-in-client-attr-mixed.test.js
new file mode 100644
index 000000000..43c7f0735
--- /dev/null
+++ b/packages/core/test/rendering/live-in-client-attr-mixed.test.js
@@ -0,0 +1,64 @@
+// #1443, client half: the attr-mixed commit must unwrap live() PER PIECE.
+//
+// applyPart's top-of-function unwrap only sees the anchor hole's own value,
+// while the attr-mixed branch reads every group piece raw from `allValues`.
+// Every hole inside a QUOTED attribute is classified attr-mixed by the client
+// compiler (single-hole included), so without the per-piece unwrap a
+// `title="${live(v)}"` the server now emits correctly is rewritten to the
+// wrapper's stringification by the first client commit: correct served bytes,
+// corrupted a moment after upgrade, the same divergence class as the server
+// half of #1443. The reconciler's effectiveFormAttr already unwraps each
+// group piece, so this pins the commit path to the model the reconcile
+// already judges by.
+import { test, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseHTML } from 'linkedom';
+
+before(() => {
+  const { window } = parseHTML('<!doctype html><html><body></body></html>');
+  globalThis.document = window.document;
+  globalThis.DocumentFragment = window.DocumentFragment;
+  globalThis.Node = window.Node;
+  globalThis.Element = window.Element;
+  globalThis.Comment = window.Comment;
+  globalThis.Text = window.Text;
+  globalThis.NodeFilter = window.NodeFilter;
+  globalThis.HTMLElement = window.HTMLElement;
+});
+
+let html, render, live;
+before(async () => {
+  ({ html } = await import('../../src/html.js'));
+  ({ render } = await import('../../src/render-client.js'));
+  ({ live } = await import('../../src/directives.js'));
+});
+
+test('a quoted single-hole attribute unwraps live() on the client (#1443)', () => {
+  const el = document.createElement('div');
+  render(html`<i title="${live('hi')}"></i>`, el);
+  assert.equal(el.querySelector('i').getAttribute('title'), 'hi');
+});
+
+test('every piece of a mixed attribute unwraps live() on the client (#1443)', () => {
+  const el = document.createElement('div');
+  render(html`<i class="a ${live('b')} c ${live('d')}"></i>`, el);
+  assert.equal(el.querySelector('i').getAttribute('class'), 'a b c d');
+});
+
+test('a re-render that changes only a live() piece still updates the attribute (#1443)', () => {
+  // The interaction with the mixedAnchor re-apply (#845): the later hole is a
+  // noop pointing at the anchor, and the rebuilt attribute must read the NEW
+  // inner values, unwrapped, for every piece.
+  const el = document.createElement('div');
+  const tpl = (a, b) => html`<i class="s ${live(a)} ${live(b)}"></i>`;
+  render(tpl('x', 'y'), el);
+  assert.equal(el.querySelector('i').getAttribute('class'), 's x y');
+  render(tpl('x', 'z'), el);
+  assert.equal(el.querySelector('i').getAttribute('class'), 's x z');
+});
+
+test('mixed live() and plain pieces coexist (#1443)', () => {
+  const el = document.createElement('div');
+  render(html`<i class="a ${live('b')} ${'c'}"></i>`, el);
+  assert.equal(el.querySelector('i').getAttribute('class'), 'a b c');
+});

From dafb411abe024c72cdf3b2ddf2e48fc6c367e1da Mon Sep 17 00:00:00 2001
From: Vivek <vivek7405@gmail.com>
Date: Fri, 21 Aug 2026 02:14:45 +0530
Subject: [PATCH 3/3] fix: resolve live() in every client child position, not
 just the hole

The delta review found the attribute half was complete but the CHILD half
was not, and the gap predates this PR. applyPart unwraps live() for the
hole's OWN value, while the server RECURSES through isLive inside render()
and streamRender(), so the server resolves a live() nested one level down
and the client did not. Served correct, corrupted to "[object Object]" on
upgrade: the same divergence class the attribute fix closes.

Four consumers of a child value each needed it, and each is independently
load-bearing (verified by disabling one site at a time):

  applyChildInnerRaw  a directive WRAPPING a live(), the keyed / cache /
                      guard recursion, which re-enters with an inner value
  buildArrayItem      an array item on the fresh-build path
  reconcileArray      an array item updated IN PLACE, where the array keeps
                      its shape so nothing is rebuilt
  renderToNodes       a live() yielded into asyncAppend / asyncReplace

Deliberately NOT fixed: a live() inside a NESTED array. The client
stringifies a nested array rather than recursing, so a nested
TemplateResult renders "[object Object]" too. That is a pre-existing gap
independent of live(), and special-casing this one directive would leave
an inconsistent surface.

Also tightens two tests the review found weaker than they read. The
mixedAnchor case used live() in both slots, so the anchor hole differed on
every render and the attribute rebuilt at i=0 without the noop path ever
being under test; the anchor piece is now a plain constant, so only the
re-apply can explain the update. And the array-child test asserted the
server alone under a name that read as both, so it now says SERVER and
points at the client file. The browser case observes the real
SSR-then-upgrade transition through a component rather than a bare client
render, with the direct-render case kept alongside it.
---
 packages/core/src/render-client/parts.js      |  26 ++++-
 .../browser/live-attribute-hydration.test.js  |  44 ++++++--
 .../rendering/live-in-attribute-hole.test.js  |   9 +-
 .../live-in-client-attr-mixed.test.js         |  28 +++--
 .../rendering/live-in-client-child.test.js    | 105 ++++++++++++++++++
 5 files changed, 193 insertions(+), 19 deletions(-)
 create mode 100644 packages/core/test/rendering/live-in-client-child.test.js

diff --git a/packages/core/src/render-client/parts.js b/packages/core/src/render-client/parts.js
index 56550961c..76fbf2543 100644
--- a/packages/core/src/render-client/parts.js
+++ b/packages/core/src/render-client/parts.js
@@ -495,6 +495,20 @@ export function applyChildInner(part, value, reconcileFormActionsCb) {
 export function applyChildInnerRaw(part, value, reconcileFormActionsCb) {
   const marker = part.marker;
 
+  // live() in a CHILD position (#1443). applyPart's top-of-function unwrap only
+  // sees the hole's own value, so a live() nested inside an ARRAY child arrives
+  // here still wrapped and would stringify to "[object Object]". The server
+  // recurses through isLive in both machines (template-renderer.js render() and
+  // streamRender()), so without this the renderers disagree and an SSR'd list
+  // built with live() per item corrupts on upgrade. A plain unwrap is the whole
+  // job here: live()'s dirty-check is attribute/property-shaped and has no
+  // meaning for a child, which is exactly why the server treats it the same way.
+  // Recursing first (rather than after the unsafeHTML branch) matches the
+  // server's outcome for a nested directive such as live(unsafeHTML(x)).
+  if (isLive(value)) {
+    return applyChildInnerRaw(part, /** @type any */ (value).value, reconcileFormActionsCb);
+  }
+
   // unsafeHTML directive: inject raw HTML string as DOM nodes.
   if (isUnsafeHTML(value)) {
     teardownChild(part);
@@ -1104,6 +1118,9 @@ function removeArrayItem(item) {
  * @returns {{ item: ArrayItem, frag: Node | null }}
  */
 function buildArrayItem(v, reconcileFormActionsCb) {
+  // #1443: unwrap live() per ITEM. applyPart unwraps the hole's own value, so
+  // an array child arrives unwrapped at the top and its ITEMS do not.
+  if (isLive(v)) v = /** @type any */ (v).value;
   if (isTemplate(v)) {
     const { inst, frag } = buildDetached(/** @type any */ (v), reconcileFormActionsCb);
     return { item: { type: 'tpl', inst }, frag };
@@ -1161,7 +1178,11 @@ function reconcileArray(part, value, reconcileFormActionsCb) {
 
   try {
     for (let i = 0; i < value.length; i++) {
-      const v = value[i];
+      // #1443: same per-item unwrap as buildArrayItem, on the in-place update
+      // path. Without it a re-render writes the wrapper's stringification into
+      // the existing text node.
+      const raw = value[i];
+      const v = isLive(raw) ? /** @type any */ (raw).value : raw;
       const o = old[i];
       if (isTemplate(v)) {
         const tr = /** @type any */ (v);
@@ -1963,6 +1984,9 @@ async function consumeAsyncStream(state, part, dir, reconcileFormActionsCb) {
  * @returns {ChildNode[]}
  */
 function renderToNodes(value, reconcileFormActionsCb) {
+  // #1443: the streamed / detached counterpart of the per-item unwrap above.
+  // Recursion covers a nested array, since each level re-enters here.
+  if (isLive(value)) value = /** @type any */ (value).value;
   if (value == null || value === false || value === true) return [];
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);
diff --git a/packages/core/test/rendering/browser/live-attribute-hydration.test.js b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
index b7fc6a6e3..ca6268101 100644
--- a/packages/core/test/rendering/browser/live-attribute-hydration.test.js
+++ b/packages/core/test/rendering/browser/live-attribute-hydration.test.js
@@ -34,6 +34,17 @@ class MenuProbe extends WebComponent({ open: prop(Boolean) }) {
 }
 MenuProbe.register('lah-menu');
 
+/**
+ * A QUOTED attribute bound through live(). Every hole inside a quoted attribute
+ * is attr-mixed to the client compiler, which is the path that reads its pieces
+ * raw, so this is the shape that corrupts on upgrade rather than at SSR.
+ */
+class TitleProbe extends WebComponent({ label: prop(String) }) {
+  constructor() { super(); this.label = 'hello'; }
+  render() { return html`<b title="${live(this.label)}" class="a ${live(this.label)} z">x</b>`; }
+}
+TitleProbe.register('lah-title');
+
 /** Same, but open by default, so the guard cannot be met by never emitting. */
 class OpenProbe extends WebComponent({ open: prop(Boolean) }) {
   constructor() { super(); this.open = true; }
@@ -129,14 +140,31 @@ suite('live() in an attribute hole hydrates without a flash (#1443)', () => {
     );
   });
 
-  test('a quoted attribute hole unwraps live() on the CLIENT commit too (#1443)', () => {
-    // The client half of the same bug, on the real engine. Every hole inside a
-    // QUOTED attribute is attr-mixed to the client compiler (single-hole
-    // included), and that commit path reads each group piece raw, bypassing
-    // applyPart's top-of-function unwrap. Without the per-piece unwrap, the
-    // SSR bytes the server half of this fix gets right are rewritten to the
-    // wrapper's stringification by the first client render: served correct,
-    // corrupted on upgrade, which no SSR-string assertion can see.
+  test('a quoted attribute bound through live() survives the SSR-to-upgrade transition (#1443)', async () => {
+    // The client half of the same bug, observed as the TRANSITION rather than
+    // as a bare client render. A quoted attribute hole is attr-mixed to the
+    // client compiler, and that commit path reads each group piece raw; without
+    // the per-piece unwrap the correct SSR bytes are rewritten to the wrapper's
+    // stringification the moment the element upgrades. Serving right and
+    // corrupting on upgrade is invisible to any SSR-string assertion, so the
+    // real SSR bytes are mounted and then upgraded here, exactly as a served
+    // page does it.
+    const ssr = await renderToString(html`<lah-title></lah-title>`);
+    assert.match(ssr, /title="hello"/, `SSR must emit the inner value, got ${ssr}`);
+    assert.ok(!/object Object/.test(ssr), `SSR must not stringify the wrapper, got ${ssr}`);
+
+    const { host } = await hydrate(ssr);
+    mounted.push(host);
+
+    const el = host.querySelector('b');
+    assert.ok(el, 'the element survived hydration');
+    assert.equal(el.getAttribute('title'), 'hello', 'the quoted hole still holds its value after upgrade');
+    assert.equal(el.getAttribute('class'), 'a hello z', 'every mixed-attribute piece survived the upgrade');
+  });
+
+  test('a client-only render unwraps live() in quoted and mixed attributes (#1443)', () => {
+    // The same commit path reached directly, with no SSR involved, which is
+    // what a post-hydration re-render does.
     const host = document.createElement('div');
     document.body.appendChild(host);
     mounted.push(host);
diff --git a/packages/core/test/rendering/live-in-attribute-hole.test.js b/packages/core/test/rendering/live-in-attribute-hole.test.js
index 7a5974325..5355961e3 100644
--- a/packages/core/test/rendering/live-in-attribute-hole.test.js
+++ b/packages/core/test/rendering/live-in-attribute-hole.test.js
@@ -123,9 +123,16 @@ test('a .prop hole on a custom element serializes the inner value, not the wrapp
   assert.ok(!/_\$webjs/.test(out), `the live() wrapper must not reach the hydration payload, got ${out}`);
 });
 
-test('a child hole nested in an array still resolves live() (#1443)', async () => {
+test('a child hole nested in an array still resolves live() on the SERVER (#1443)', async () => {
   // The hole-level unwrap never sees this one; render()/streamRender() keep
   // their own isLive branch for it. Guards against removing those as dead code.
+  //
+  // SERVER ONLY, as the name says. The matching CLIENT assertions live in
+  // live-in-client-child.test.js, which covers all four consumers of a child
+  // value (fresh array build, in-place array reconcile, streamed renderer, and
+  // a directive wrapping a live()). Keeping the halves in separate files is
+  // why this one names its side explicitly: a test called "resolves live()"
+  // that checks one renderer reads as if both were covered.
   await bothRenderers(() => html`<p>${[live('x'), live('y')]}</p>`, (out, who) => {
     assert.match(out, /<p>xy<\/p>/, `${who}: live() inside an array child must resolve, got ${out}`);
   });
diff --git a/packages/core/test/rendering/live-in-client-attr-mixed.test.js b/packages/core/test/rendering/live-in-client-attr-mixed.test.js
index 43c7f0735..3e7055e19 100644
--- a/packages/core/test/rendering/live-in-client-attr-mixed.test.js
+++ b/packages/core/test/rendering/live-in-client-attr-mixed.test.js
@@ -45,16 +45,26 @@ test('every piece of a mixed attribute unwraps live() on the client (#1443)', ()
   assert.equal(el.querySelector('i').getAttribute('class'), 'a b c d');
 });
 
-test('a re-render that changes only a live() piece still updates the attribute (#1443)', () => {
-  // The interaction with the mixedAnchor re-apply (#845): the later hole is a
-  // noop pointing at the anchor, and the rebuilt attribute must read the NEW
-  // inner values, unwrapped, for every piece.
+test('a re-render through the mixedAnchor path alone unwraps every piece (#1443)', () => {
+  // Isolates the #845 mixedAnchor re-apply. The ANCHOR piece is a plain
+  // constant that never changes, so `Object.is` skips its hole and the ONLY
+  // reason the attribute is rebuilt is the later live() hole, whose bound part
+  // is a noop pointing back at the anchor. A fix applied to the first-render
+  // path alone would leave this stale.
+  //
+  // Deliberately not `live()` in both slots: that makes the anchor hole differ
+  // on every render, so the attribute rebuilds at i=0 and the noop path is
+  // never the thing under test.
   const el = document.createElement('div');
-  const tpl = (a, b) => html`<i class="s ${live(a)} ${live(b)}"></i>`;
-  render(tpl('x', 'y'), el);
-  assert.equal(el.querySelector('i').getAttribute('class'), 's x y');
-  render(tpl('x', 'z'), el);
-  assert.equal(el.querySelector('i').getAttribute('class'), 's x z');
+  const tpl = (b) => html`<i class="s ${'fixed'} ${live(b)}"></i>`;
+  render(tpl('y'), el);
+  assert.equal(el.querySelector('i').getAttribute('class'), 's fixed y', 'first render resolves');
+  render(tpl('z'), el);
+  assert.equal(
+    el.querySelector('i').getAttribute('class'),
+    's fixed z',
+    'the mixedAnchor rebuild read the NEW inner value, unwrapped',
+  );
 });
 
 test('mixed live() and plain pieces coexist (#1443)', () => {
diff --git a/packages/core/test/rendering/live-in-client-child.test.js b/packages/core/test/rendering/live-in-client-child.test.js
new file mode 100644
index 000000000..a2c406455
--- /dev/null
+++ b/packages/core/test/rendering/live-in-client-child.test.js
@@ -0,0 +1,105 @@
+// #1443, client CHILD positions: live() must resolve wherever the server
+// resolves it, not only in the hole's own value.
+//
+// applyPart unwraps live() once, at the top, for the hole's OWN value. The
+// server instead RECURSES through isLive inside render() / streamRender(), so
+// it resolves a live() nested one level down. That gap is the same divergence
+// class as the attribute half of #1443, and it bites in two shapes:
+//
+//   ${[live('a'), 'b']}          an ARRAY item (each item is consumed by its
+//                                own path: fresh build, in-place reconcile,
+//                                or the streamed/detached renderer)
+//   ${keyed(1, live('x'))}       a directive WRAPPING a live(), which the
+//                                client re-enters applyChildInnerRaw with
+//
+// Both were served correct and corrupted to "[object Object]" on upgrade.
+//
+// NOT covered here, deliberately: a live() inside a NESTED array
+// (`${[[live('a')]]}`). The client stringifies a nested array rather than
+// recursing, so a nested TemplateResult renders "[object Object]" too. That is
+// a pre-existing client gap independent of live(), and papering over it for
+// this one directive would leave an inconsistent surface.
+import { test, before } from 'node:test';
+import assert from 'node:assert/strict';
+import { parseHTML } from 'linkedom';
+
+before(() => {
+  const { window } = parseHTML('<!doctype html><html><body></body></html>');
+  globalThis.document = window.document;
+  globalThis.DocumentFragment = window.DocumentFragment;
+  globalThis.Node = window.Node;
+  globalThis.Element = window.Element;
+  globalThis.Comment = window.Comment;
+  globalThis.Text = window.Text;
+  globalThis.NodeFilter = window.NodeFilter;
+  globalThis.HTMLElement = window.HTMLElement;
+});
+
+let html, render, renderToString, live, keyed, cache, guard, asyncAppend;
+before(async () => {
+  ({ html } = await import('../../src/html.js'));
+  ({ render } = await import('../../src/render-client.js'));
+  ({ renderToString } = await import('../../src/render-server.js'));
+  ({ live, keyed, cache, guard, asyncAppend } = await import('../../src/directives.js'));
+});
+
+/**
+ * Render the SAME template through the server and a fresh client render and
+ * assert the text agrees. Parity is the real contract, so asserting it directly
+ * beats asserting a literal on one side: if the server's own handling ever
+ * changes, this fails rather than silently blessing a new divergence.
+ */
+async function assertParity(mk, label) {
+  const el = document.createElement('div');
+  render(mk(), el);
+  const clientText = el.querySelector('i').textContent;
+  const serverText = (await renderToString(mk())).trim().replace(/^<i>|<\/i>$/g, '');
+  assert.equal(clientText, serverText, `${label}: client must render what the server rendered`);
+  assert.ok(!/object Object/.test(clientText), `${label}: no wrapper reached the DOM, got ${clientText}`);
+}
+
+test('a live() ARRAY item resolves on the client, matching the server (#1443)', async () => {
+  await assertParity(() => html`<i>${[live('a'), 'b']}</i>`, 'array item');
+});
+
+test('every item of an all-live() array resolves on the client (#1443)', async () => {
+  await assertParity(() => html`<i>${[live('a'), live('b'), live('c')]}</i>`, 'all-live array');
+});
+
+test('an in-place array re-render writes the new inner value (#1443)', async () => {
+  // The positional reconcile path, distinct from the fresh build: the array
+  // keeps its shape, so each item is updated in place rather than rebuilt. A
+  // fix applied only to the fresh-build path would leave this one stale.
+  const el = document.createElement('div');
+  const tpl = (v) => html`<i>${['s', live(v)]}</i>`;
+  render(tpl('x'), el);
+  assert.equal(el.querySelector('i').textContent, 'sx', 'first render resolves');
+  render(tpl('z'), el);
+  assert.equal(el.querySelector('i').textContent, 'sz', 're-render resolves the NEW inner value');
+});
+
+test('a directive wrapping a live() resolves on the client (#1443)', async () => {
+  // keyed / cache / guard each re-enter the child commit with their inner
+  // value, which the server resolves by recursion. Without the matching
+  // client-side recursion all three render the wrapper.
+  await assertParity(() => html`<i>${keyed(1, live('x'))}</i>`, 'keyed(live)');
+  await assertParity(() => html`<i>${cache(live('y'))}</i>`, 'cache(live)');
+  await assertParity(() => html`<i>${guard([1], () => live('z'))}</i>`, 'guard(live)');
+});
+
+test('a streamed live() chunk resolves on the client (#1443)', async () => {
+  // The fourth consumer of a child value, distinct from the three above: the
+  // streamed / detached renderer builds nodes directly rather than going
+  // through the array item paths. Asserted against the client only, since
+  // asyncAppend renders nothing at SSR (its content arrives after the first
+  // paint by design), so there is no server output to compare with.
+  async function* gen() { yield live('a'); yield 'b'; }
+  const el = document.createElement('div');
+  render(html`<i>${asyncAppend(gen())}</i>`, el);
+  await new Promise((r) => setTimeout(r, 50));
+  assert.equal(
+    el.querySelector('i').textContent,
+    'ab',
+    'a live() yielded into a stream must resolve, not stringify its wrapper',
+  );
+});