@webjsdev/core 0.7.46 → 0.7.48

package/src/render-client.js

@@ -1,7 +1,15 @@
 import { isTemplate, MARKER } from './html.js';
 import { BINDING_PREFIXES, isBindingPrefix } from './binding-prefixes.js';
 import { escapeAttr } from './escape.js';
-import { assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp } from './form-action.js';
+import {
+  assertNotFunctionActionAttr, assertNotFunctionReflectedActionProp,
+  reconcileFormAction, isBoundFormAction, ABSENT, assertSubmitterHasNoName,
+  assertSubmitterType, assertSubmitterHasNoValue, assertSubmitterHasNoStaticFormAction,
+  assertSubmitterHasNoFormAttribute, assertSingleSubmitterAction,
+  resolveBoundSubmitterAttrs, applyResolvedAttr, releaseSubmitterAttrs,
+  assertConvergentSubmitter, isSubmitterReflectedProp,
+  formActionId, assertIdentifiableAction, FORM_ACTION_FIELD,
+} from './form-action.js';
 import { isRepeat } from './repeat.js';
 import { isUnsafeHTML, isLive, isKeyed, isGuard, isTemplateContent, isRef, isCache, isUntil, isAsyncAppend, isAsyncReplace, isWatch } from './directives.js';
 import { Signal } from './signal.js';
@@ -64,8 +72,44 @@ function commitInto(node, fn) {
  *     the `repeat()` directive.
  */
 
-/** @type {WeakMap<TemplateStringsArray | string[], { templateEl: HTMLTemplateElement, parts: PartDescriptor[] }>} */
+/**
+ * One `method` / `enctype` hole on a candidate bound form. `statics` / `group`
+ * are carried for a mixed attribute, whose value is the concatenation of its
+ * static pieces and every one of its holes.
+ *
+ * @typedef {{ i: number, kind: string, statics?: string[], group?: number[] }} FormAttrPart
+ */
+
+/**
+ * What one `<form action=${...}>` in a template needs at reconcile time (#1155).
+ * Every field is a property of the TEMPLATE, computed once per template literal
+ * call site, so it cannot drift out of step with the live DOM.
+ *
+ * @typedef {{
+ *   actionIdxs: number[],
+ *   duplicateAction: boolean,
+ *   staticAction: boolean,
+ *   authoredName: boolean,
+ *   authoredValue: boolean,
+ *   authoredForm: boolean,
+ *   nameParts: {i: number, kind: string}[],
+ *   valueParts: {i: number, kind: string}[],
+ *   propAttrs: string[],
+ *   staticMethod: string | null,
+ *   staticEnctype: string | null,
+ *   methodParts: FormAttrPart[],
+ *   enctypeParts: FormAttrPart[],
+ * }} FormActionRecord
+ */
+
+/** @type {WeakMap<TemplateStringsArray | string[], { templateEl: HTMLTemplateElement, parts: PartDescriptor[], formActions: FormActionRecord[] | null }>} */
 const templateCache = new WeakMap();
+/**
+ * Submitters this renderer stamped with an identity, so a later release removes
+ * only the framework's own `name` / `value` and never an author's.
+ * @type {WeakMap<Element, string>}
+ */
+const submitterActionBindings = new WeakMap();
 const INSTANCE = Symbol.for('webjs.instance');
 
 /**
@@ -98,6 +142,54 @@ const INSTANCE = Symbol.for('webjs.instance');
  * } BoundPart
  */
 
+/**
+ * The container the in-progress `render()` is committing into, or null
+ * outside one. Every part created or applied during that render belongs to
+ * THIS container's component, which is what an out-of-band commit needs to
+ * know to reach the right error boundary. A structural parent walk cannot
+ * work it out: `html`<child-el>${watch(sig)}</child-el>`` puts the part in the
+ * PARENT's template but inside the child's tag, so the walk meets the child
+ * first. Same reason `SLOT_OWNER` exists.
+ * @type {any}
+ */
+let currentRenderRoot = null;
+
+/**
+ * The element carrying the error boundary for a render root. A ShadowRoot has
+ * no boundary of its own; its `.host` is the component.
+ * @param {any} root
+ * @returns {any}
+ */
+function boundaryOwnerOf(root) {
+  if (!root) return null;
+  if (root.nodeType === 11 && root.host) return root.host;
+  return root;
+}
+
+/**
+ * Run an OUT-OF-BAND commit (a `watch` notify microtask, an `until`
+ * resolution) with the part's owner installed as the current render root.
+ *
+ * Without this the commit runs with no owner in scope, so any `watch` /
+ * `until` nested INSIDE the template it commits is installed unstamped and
+ * its own later throw escapes to the window. A directive nested in that
+ * template belongs to the same component as the part committing it, which is
+ * exactly the owner already recorded here.
+ *
+ * @param {Extract<BoundPart, {kind:'child'}>} part
+ * @param {() => void} fn
+ */
+function commitOutOfBand(part, fn) {
+  const owner = /** @type any */ (part).__commitOwner;
+  const prev = currentRenderRoot;
+  if (owner) currentRenderRoot = owner;
+  try {
+    fn();
+  } finally {
+    currentRenderRoot = prev;
+  }
+}
+
 /**
  * Render a value into a container, reusing DOM where possible.
  *
@@ -113,6 +205,8 @@ export function render(value, container) {
   // between a renderer commit and an author write.
   const prevRendering = host[RENDERING];
   host[RENDERING] = true;
+  const prevRenderRoot = currentRenderRoot;
+  currentRenderRoot = container;
   try {
     const prev = host[INSTANCE];
 
@@ -160,6 +254,7 @@ export function render(value, container) {
     }
     container.appendChild(document.createTextNode(String(value)));
   } finally {
+    currentRenderRoot = prevRenderRoot;
     host[RENDERING] = prevRendering;
     // Outermost window closing: drain this commit's childList records off the
     // slot backstop (drainRendererBackstop processes them with a renderer-output
@@ -400,10 +495,13 @@ function compile(tr) {
   // discovery step adds are picked up in the same path-recording walk.
   discoverSlots(templateEl.content, parts);
 
-  // Walk the parsed fragment and record DOM paths for each part.
-  assignPaths(templateEl.content, parts);
+  // Walk the parsed fragment and record DOM paths for each part. It also
+  // returns the per-template form-action records (#1155), null when the
+  // template contains no bound-form candidate, which is the overwhelmingly
+  // common case and keeps the reconcile out of every other template's path.
+  const formActions = assignPaths(templateEl.content, parts);
 
-  cached = { templateEl, parts };
+  cached = { templateEl, parts, formActions };
   templateCache.set(strings, cached);
   return cached;
 }
@@ -461,6 +559,8 @@ function discoverSlots(root, parts) {
 function assignPaths(root, parts) {
   /** @type {number[]} */
   const path = [];
+  /** @type {FormActionRecord[]} */
+  const formActions = [];
   /** @param {Node} node */
   function visit(node) {
     for (let i = 0; i < node.childNodes.length; i++) {
@@ -479,15 +579,30 @@ function assignPaths(root, parts) {
         const el = /** @type Element */ (child);
         // Sentinel attribute?
         const toRemove = [];
+        /** Every part bound to THIS element, which only this walk can see. */
+        /** @type {{ idx: number, kind: string, name: string }[]} */
+        const onEl = [];
         for (const attr of el.attributes) {
           if (attr.name.startsWith(`data-${MARKER}`)) {
             const idx = Number(attr.name.slice(`data-${MARKER}`.length));
             if (parts[idx] && parts[idx].kind !== 'child') {
               parts[idx].path = path.slice();
+              onEl.push({ idx, kind: parts[idx].kind, name: parts[idx].name || '' });
             }
             toRemove.push(attr.name);
           }
         }
+        // #1155 / #1207: record what a bound form or submitter needs, while the
+        // STATIC attributes and the element's part indices are both still
+        // visible. This is the only point in compilation with that whole view,
+        // and it runs once per template, so the record is a constant rather
+        // than runtime memory that can drift out of step with the DOM. It is
+        // also the only place a submitter's own `name` is still legible: by
+        // reconcile time the renderer has written the identity over it.
+        if (el.localName === 'form' || el.localName === 'button' || el.localName === 'input') {
+          const rec = buildFormActionRecord(el, onEl, parts);
+          if (rec) formActions.push(rec);
+        }
         for (const a of toRemove) el.removeAttribute(a);
         visit(child);
       }
@@ -495,6 +610,294 @@ function assignPaths(root, parts) {
     }
   }
   visit(root);
+  return formActions.length ? formActions : null;
+}
+
+/**
+ * Build the compile-time record for one `<form>` carrying an `action` hole, or
+ * one submitter carrying a `formaction` hole.
+ *
+ * A CANDIDATE, not a decision: `<form action=${maybeString}>` compiles exactly
+ * like a bound one, so whether the form is really bound is a runtime fact the
+ * reconcile decides from the value. Everything recorded here is a property of
+ * the TEMPLATE, which is why it cannot go stale the way remembering "did the
+ * bind supply this attribute" at runtime did.
+ *
+ * `encoding` folds into `enctype` for a PROPERTY binding only: it is a legacy
+ * IDL alias, so `.encoding=` writes the enctype content attribute. As a content
+ * attribute `encoding=` is inert (a browser's `form.encoding` reads back
+ * `enctype`), and SSR ignores it, so folding the attribute spelling too would
+ * make the client honour a value the server never saw.
+ *
+ * The submitter fields (`authoredName` / `authoredValue` / `authoredForm`) are
+ * read off the COMPILED template rather than the live element, for the same
+ * reason: by reconcile time the renderer has written its own `name` / `value`
+ * onto a bound submitter, so the live element can no longer say which of them
+ * the author wrote. A hole-provided `name=${n}` leaves no attribute on the
+ * compiled template at all, which is why `nameParts` is tracked separately.
+ *
+ * @param {Element} el
+ * @param {{ idx: number, kind: string, name: string }[]} onEl parts bound to `el`
+ * @param {PartDescriptor[]} parts
+ * @returns {FormActionRecord | null}
+ */
+function buildFormActionRecord(el, onEl, parts) {
+  const isForm = el.localName === 'form';
+  const targetAttr = isForm ? 'action' : 'formaction';
+  // The submission pair, named per element (#1307). A form declares `method` /
+  // `enctype`; a submitter declares `formmethod` / `formenctype`, and a bound
+  // one receives them from the renderer exactly as a bound form does.
+  const methodAttr = isForm ? 'method' : 'formmethod';
+  const enctypeAttr = isForm ? 'enctype' : 'formenctype';
+  const actionParts = onEl.filter((p) => p.kind === 'attr' && p.name.toLowerCase() === targetAttr);
+  if (!actionParts.length) return null;
+
+  /** @type {FormAttrPart[]} */
+  const methodParts = [];
+  /** @type {FormAttrPart[]} */
+  const enctypeParts = [];
+  /** Prop bindings that cannot converge with SSR; refused when actually bound. */
+  const propAttrs = [];
+  // `name` holes on a submitter, recorded WITH their kind. Whether one occupies
+  // the identity's channel is not a property of the hole alone: SSR emits
+  // `name=""` for an attribute hole whatever it resolved to, but emits nothing
+  // at all for a FALSY boolean hole and nothing for an `@name` listener. Asking
+  // only "is there a part called name" therefore refused templates SSR renders
+  // happily, which is the render-on-the-server-throw-on-hydration direction.
+  // The kinds travel with the record and `reconcileFormActions` resolves them.
+  const nameParts = isForm ? [] : onEl
+    .filter((p) => p.name.toLowerCase() === 'name'
+      && (p.kind === 'attr' || p.kind === 'attr-mixed' || p.kind === 'bool'))
+    .map((p) => ({ i: p.idx, kind: p.kind }));
+  const authoredName = !isForm && el.hasAttribute('name');
+  const authoredForm = !isForm && el.hasAttribute('form');
+  const authoredValue = !isForm && el.hasAttribute('value');
+  // `value` holes, recorded with their kind for the same reason as `name`: a
+  // FALSY boolean hole emits nothing at SSR, so counting the part's mere
+  // presence refused a template the server renders happily.
+  const valueParts = isForm ? [] : onEl
+    .filter((p) => p.name.toLowerCase() === 'value'
+      && (p.kind === 'attr' || p.kind === 'attr-mixed' || p.kind === 'bool'))
+    .map((p) => ({ i: p.idx, kind: p.kind }));
+
+  for (const p of onEl) {
+    const name = String(p.name).toLowerCase();
+    if (p.kind === 'prop') {
+      // On a FORM, the reflected attributes that decide submittability. On a
+      // SUBMITTER, the ones that carry the identity or override the submission
+      // (#1207). Either way a `.prop` is dropped at SSR and written to the
+      // attribute in the browser, so it can never converge.
+      if (isForm) {
+        if (name === 'method' || name === 'enctype' || name === 'encoding') propAttrs.push(p.name);
+      } else if (isSubmitterReflectedProp(name)) {
+        propAttrs.push(p.name);
+      }
+      continue;
+    }
+    // #1307: a bound submitter carries its OWN submission attributes, so the
+    // pair to capture depends on the element. `formmethod` / `formenctype` on a
+    // button are exactly what `method` / `enctype` are on a form, and they flow
+    // through the same resolution below untouched.
+    if (name !== methodAttr && name !== enctypeAttr) continue;
+    if (p.kind !== 'attr' && p.kind !== 'attr-mixed' && p.kind !== 'bool') continue;
+    const d = /** @type any */ (parts[p.idx]);
+    /** @type {FormAttrPart} */
+    const entry = { i: p.idx, kind: p.kind };
+    // A mixed attribute's value is `statics[0] + v0 + statics[1] + ...`, so the
+    // pieces have to travel with the record; reading the anchor's value alone
+    // is right only when the statics are empty.
+    if (p.kind === 'attr-mixed') { entry.statics = d.statics || []; entry.group = d.group || []; }
+    // Compared against `methodAttr`, NOT the literal 'method'. On a submitter
+    // the pair is `formmethod` / `formenctype`, so a literal comparison sent
+    // every hole-provided `formmethod` into `enctypeParts`: the client then
+    // resolved it as the enctype, refused `formenctype="post"`, and threw on
+    // hydration for a template SSR renders happily. That is the
+    // render-on-the-server, crash-in-the-browser direction this module treats
+    // as the one unacceptable failure.
+    (name === methodAttr ? methodParts : enctypeParts).push(entry);
+  }
+
+  return {
+    isForm,
+    tag: el.localName,
+    // EVERY action hole, not just the first. SSR refuses two holes whenever
+    // ANY of them resolves to a bound action, so recording only the first would
+    // let `<form action=${'/legacy'} action=${boundFn}>` slip through the
+    // client's release path while SSR throws on the same template.
+    actionIdxs: actionParts.map((p) => p.idx),
+    duplicateAction: actionParts.length > 1,
+    // A static `action="..."` / `formaction="..."` surviving alongside the hole.
+    // The compiled template holds the hole as a sentinel attribute, so anything
+    // read back under the real name here is the author's own second one.
+    staticAction: el.getAttribute(targetAttr) != null,
+    authoredName,
+    authoredValue,
+    authoredForm,
+    propAttrs,
+    nameParts,
+    valueParts,
+    staticMethod: el.getAttribute(methodAttr),
+    staticEnctype: el.getAttribute(enctypeAttr),
+    methodParts,
+    enctypeParts,
+  };
+}
+
+/**
+ * Converge every candidate bound form and submitter in this template, after all
+ * of its parts have committed. A no-op for the overwhelming majority of
+ * templates, which carry no `<form action=${...}>` at all and therefore no
+ * record.
+ *
+ * FORMS FIRST, submitters second, regardless of the order the records were
+ * collected in. A submitter asks whether its enclosing form is bound, and the
+ * cheapest true answer is the identity field the form's own reconcile just
+ * inserted. Document order gets this right for a form and a button in the SAME
+ * template, but not for a `<form>` whose submitter arrives through a nested
+ * template, so the ordering is made explicit rather than relied upon.
+ *
+ * @param {FormActionRecord[] | null} formActions
+ * @param {BoundPart[]} bound
+ * @param {unknown[]} values
+ */
+function reconcileFormActions(formActions, bound, values) {
+  if (!formActions) return;
+  // Forms first, then submitters. The original motivation was a boundness read
+  // that is gone with #1307, but the ordering still makes a form's RELEASE run
+  // before its submitters reconcile, so it is kept rather than churned.
+  for (const pass of [true, false]) {
+    for (const rec of formActions) {
+      if (rec.isForm !== pass) continue;
+      // With more than one action hole, the BOUND one decides, whichever
+      // position it is written in. Picking `actionIdxs[0]` blindly would send
+      // `<form action=${'/url'} action=${boundFn}>` down the release path and
+      // ship the broken form SSR refuses outright.
+      let idx = rec.actionIdxs[0];
+      const targetAttr = rec.isForm ? 'action' : 'formaction';
+      for (const i of rec.actionIdxs) {
+        if (isBoundFormAction(resolveHoleValue(values[i]), targetAttr, rec.tag)) { idx = i; break; }
+      }
+      const part = bound[idx];
+      if (!part || !part.el) continue;
+      const val = resolveHoleValue(values[idx]);
+      if (rec.isForm) {
+        reconcileFormAction(
+          /** @type any */ (part.el),
+          val,
+          effectiveFormAttr(rec.methodParts, rec.staticMethod, values),
+          effectiveFormAttr(rec.enctypeParts, rec.staticEnctype, values),
+          rec,
+        );
+      } else {
+        // What SSR would have emitted for this pass. An attribute hole always
+        // emits (even `name=${null}`, as `name=""`); a boolean hole emits only
+        // when truthy. Both identity channels ask the same question, through
+        // one predicate, so they cannot drift apart again.
+        const emits = (parts) => parts.some((np) => (np.kind === 'bool'
+          ? !!resolveHoleValue(values[np.i])
+          : true));
+        reconcileSubmitterAction(
+          /** @type any */ (part.el), val, rec,
+          emits(rec.nameParts), emits(rec.valueParts),
+          effectiveFormAttr(rec.methodParts, rec.staticMethod, values),
+          effectiveFormAttr(rec.enctypeParts, rec.staticEnctype, values),
+        );
+      }
+    }
+  }
+}
+
+/**
+ * Remove the identity channel previously injected into a submitter.
+ *
+ * Only ours is removed. `submitterActionBindings` remembers the elements this
+ * renderer stamped, and the `name` check covers an SSR'd button meeting its
+ * template for the first time on hydration. A button that never carried a
+ * binding is left alone, so an author's own `name` / `value` survives a
+ * re-render that happens to pass a non-action value.
+ *
+ * @param {Element} el
+ */
+function releaseSubmitterAction(el) {
+  const injected = submitterActionBindings.has(el) || el.getAttribute('name') === FORM_ACTION_FIELD;
+  if (!injected) return;
+  if (el.getAttribute('name') === FORM_ACTION_FIELD) el.removeAttribute('name');
+  el.removeAttribute('value');
+  submitterActionBindings.delete(el);
+}
+
+/**
+ * Converge a live submitter on what SSR emitted for `<button formaction=${fn}>`
+ * (#1207, #1307): the `formaction` attribute gone, the identity in the button's
+ * own `name` / `value` pair, and the submission the framework supplies in its
+ * own `formmethod` / `formenctype`.
+ *
+ * There is no enclosing-form question here any more. It used to be the hard
+ * part of this function, asked once per element and BEST EFFORT because a
+ * fragment reconciling detached (a submitter inside a `repeat()` or an array
+ * item, whose form lives in the parent template) has no answer to give. With
+ * the submission attributes now on the button itself (#1307) the button needs
+ * nothing from the form, so the question stopped mattering and the whole
+ * asymmetry with SSR went with it.
+ *
+ * @param {Element} el
+ * @param {unknown} value
+ * @param {FormActionRecord} rec
+ * @param {boolean} emitsName whether SSR would emit a `name` attribute this pass
+ * @param {boolean} emitsValue whether SSR would emit a `value` attribute this pass
+ * @param {string | typeof ABSENT} authoredFormMethod what the template supplies for `formmethod`
+ * @param {string | typeof ABSENT} authoredFormEnctype what the template supplies for `formenctype`
+ */
+function reconcileSubmitterAction(
+  el, value, rec, emitsName, emitsValue, authoredFormMethod, authoredFormEnctype,
+) {
+  const id = typeof value === 'function' ? formActionId(value) : null;
+  if (!id) {
+    // A function that was MEANT as an action still refuses, so a button never
+    // silently submits the form's action instead of its own.
+    if (typeof value === 'function') assertIdentifiableAction(null, el.localName);
+    releaseSubmitterAction(el);
+    // The submission attributes the framework supplied go with the identity, or
+    // a released button keeps a `formmethod` / `formenctype` SSR does not emit
+    // for the same template (#1307).
+    releaseSubmitterAttrs(el, authoredFormMethod, authoredFormEnctype, rec.propAttrs);
+    return;
+  }
+  // Template-shaped refusals first, from the compiled record, because the live
+  // element may already carry this renderer's own `name` / `value`.
+  assertSingleSubmitterAction(rec.duplicateAction, el.localName);
+  assertConvergentSubmitter(rec.propAttrs, el.localName);
+  if (rec.staticAction) assertSubmitterHasNoStaticFormAction(el.localName);
+  if (rec.authoredValue || emitsValue) assertSubmitterHasNoValue(el.localName);
+  if (rec.authoredName || emitsName) {
+    // Judged on the PART, not on what it resolved to this pass. `name=${null}`
+    // leaves no attribute here while SSR emits `name=""` beside the identity,
+    // so reading the live value back returned '' and waved through a template
+    // SSR refuses. The template supplying a `name` channel at all is the
+    // conflict, whatever today's value happens to be.
+    assertSubmitterHasNoName(el.getAttribute('name') || FORM_ACTION_FIELD, el.localName, false);
+  }
+  if (rec.authoredForm || el.hasAttribute('form')) assertSubmitterHasNoFormAttribute(el.localName);
+  assertSubmitterType(el.localName, el.getAttribute('type'));
+
+  // The submission decision, made from the TEMPLATE rather than by reading the
+  // DOM back, exactly as `reconcileFormAction` makes it for a bound form. The
+  // distinction the DOM cannot preserve is the same one: `?formmethod=${false}`
+  // and `formmethod=${null}` both leave no attribute, and SSR resolves them to
+  // opposite answers.
+  const resolved = resolveBoundSubmitterAttrs(
+    el.localName, authoredFormMethod, authoredFormEnctype,
+  );
+  el.removeAttribute('formaction');
+  el.setAttribute('name', FORM_ACTION_FIELD);
+  el.setAttribute('value', id);
+  // AFTER the identity, matching SSR's byte order: the identity replaces the
+  // `formaction=` hole in place and the submission pair is appended at the `>`.
+  // The differential parity suite compares these two renderers byte for byte,
+  // so the order is part of the contract, not a detail.
+  applyResolvedAttr(el, 'formmethod', authoredFormMethod, resolved.formMethod);
+  applyResolvedAttr(el, 'formenctype', authoredFormEnctype, resolved.formEnctype);
+  submitterActionBindings.set(el, id);
 }
 
 /* ================================================================
@@ -506,7 +909,7 @@ function assignPaths(root, parts) {
  * @param {Element | DocumentFragment | ShadowRoot} container
  */
 function createInstance(tr, container) {
-  const { templateEl, parts } = compile(tr);
+  const { templateEl, parts, formActions } = compile(tr);
   const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
 
   // Bookend markers bound the instance so we can tear it down cleanly.
@@ -519,6 +922,7 @@ function createInstance(tr, container) {
     applyPart(bound[i], tr.values[i], undefined, tr.values);
     lastValues.push(tr.values[i]);
   }
+  reconcileFormActions(formActions, bound, tr.values);
 
   /** @type any */ (container).replaceChildren(startNode, ...frag.childNodes, endNode);
 
@@ -588,6 +992,13 @@ function bindPart(p, root) {
   throw new Error(`unknown part kind ${/** @type any */(p).kind}`);
 }
 
+/**
+ * Sentinel parked in `lastValues` for a hole whose commit threw, so the next
+ * render cannot mistake the un-advanced entry for "already applied". Never
+ * equal (by `Object.is`) to anything an author can pass through a template.
+ */
+const COMMIT_FAILED = Symbol('webjs.commitFailed');
+
 /**
  * @param {TemplateInstance} inst
  * @param {unknown[]} values
@@ -603,13 +1014,35 @@ function updateInstance(inst, values) {
     // anchor hole's. Without this, a change confined to a non-anchor hole is
     // dropped (the attribute goes stale).
     const anchor = /** @type any */ (bp).mixedAnchor;
-    if (bp.kind === 'noop' && anchor != null) {
-      applyPart(inst.bound[anchor], values[anchor], inst.lastValues[anchor], values);
-    } else {
-      applyPart(bp, next, inst.lastValues[i], values);
+    try {
+      if (bp.kind === 'noop' && anchor != null) {
+        applyPart(inst.bound[anchor], values[anchor], inst.lastValues[anchor], values);
+      } else {
+        applyPart(bp, next, inst.lastValues[i], values);
+      }
+    } catch (err) {
+      // A commit that throws leaves `lastValues` for THIS hole un-advanced,
+      // still holding the value from before the throw. That is almost always
+      // the value the recovering render supplies, so the `Object.is` skip at
+      // the top of this loop would skip the hole FOREVER. Harmless for an
+      // attribute (its commit stringifies before touching the DOM, so nothing
+      // changed), and permanently destructive for a child position, whose
+      // commit tears the old content down BEFORE the step that throws: the
+      // region is left empty and never re-rendered.
+      //
+      // Poison the entry with a sentinel no author value can ever be, so the
+      // next render always re-applies this hole. The value is deliberately
+      // NOT advanced to `next` either, since `next` was never committed.
+      inst.lastValues[i] = COMMIT_FAILED;
+      if (bp.kind === 'noop' && anchor != null) inst.lastValues[anchor] = COMMIT_FAILED;
+      throw err;
     }
     inst.lastValues[i] = next;
   }
+  // Unconditional, and NOT inside the loop above: a form's correctness depends
+  // on holes other than its own, and the `Object.is` skip means the action hole
+  // may not have been re-applied at all this pass.
+  reconcileFormActions(templateCache.get(inst.strings)?.formActions ?? null, inst.bound, values);
 }
 
 /**
@@ -624,12 +1057,19 @@ function clearInstance(inst, container) {
   for (const p of inst.bound) {
     if (p.kind === 'event') p.el.removeEventListener(p.name, p.dispatcher);
     if (p.kind === 'element') {
+      // Guarded for the same reason as the sibling in `disposeInstance`, and
+      // the stakes are higher here: this is the container-level teardown
+      // `render()` runs before a template swap, so a throw skips the rest of
+      // this loop AND the `replaceChildren()` below, leaving the old DOM in
+      // place with `host[INSTANCE]` never reassigned. Since `lastTarget` is
+      // cleared only after the write, every later swap of that container
+      // then throws at the same part, permanently.
       const prev = /** @type any */ (p).lastTarget;
       if (prev) {
         if (typeof prev === 'function') {
           try { prev(undefined); } catch { /* swallow */ }
         } else if (typeof prev === 'object') {
-          prev.value = undefined;
+          try { prev.value = undefined; } catch { /* swallow */ }
         }
         /** @type any */ (p).lastTarget = undefined;
         /** @type any */ (p).__lastEl = undefined;
@@ -650,6 +1090,54 @@ function clearInstance(inst, container) {
  * Part application
  * ================================================================ */
 
+
+/**
+ * Resolve what SSR would have emitted for one attribute of a candidate form.
+ *
+ * The per-kind rules mirror `render-server.js` exactly, which is the whole
+ * point: a boolean hole emits nothing when falsy (`if (val) out += name+'=""'`)
+ * while an attribute hole emits an EMPTY value for null (`String(val ?? '')`).
+ * Those two produce the same DOM and opposite verdicts, so only the template
+ * can tell them apart.
+ *
+ * @param {FormAttrPart[]} attrParts
+ * @param {string | null} staticValue
+ * @param {unknown[]} values
+ * @returns {string | typeof ABSENT}
+ */
+function effectiveFormAttr(attrParts, staticValue, values) {
+  for (const p of attrParts) {
+    if (p.kind === 'bool') return resolveHoleValue(values[p.i]) ? '' : ABSENT;
+    if (p.kind === 'attr') {
+      const v = resolveHoleValue(values[p.i]);
+      return v == null ? '' : String(v);
+    }
+    // A mixed attribute is the concatenation of its static pieces and EVERY one
+    // of its holes, so the anchor's own value is only part of the answer.
+    const statics = p.statics || [];
+    const group = p.group || [];
+    let out = statics[0] || '';
+    for (let j = 0; j < group.length; j++) {
+      out += String(resolveHoleValue(values[group[j]]) ?? '');
+      out += statics[j + 1] || '';
+    }
+    return out;
+  }
+  return staticValue == null ? ABSENT : staticValue;
+}
+
+/**
+ * Unwrap a hole's value the same way `applyPart` does, so the reconcile judges
+ * what was actually committed. `live()` in particular wraps its value, and
+ * reading the wrapper would make a bound action look like a plain object.
+ *
+ * @param {unknown} v
+ * @returns {unknown}
+ */
+function resolveHoleValue(v) {
+  return isLive(v) ? /** @type any */ (v).value : v;
+}
+
 /**
  * @param {BoundPart} part
  * @param {unknown} value
@@ -672,7 +1160,18 @@ function applyPart(part, value, _prev, allValues) {
       break;
     case 'attr': {
       if (value == null || value === false) part.el.removeAttribute(part.name);
-      else {
+      else if (isBoundFormAction(value, part.name, part.el.localName)) {
+        // #1155: the ONE supported form-action binding, applied to the live
+        // form exactly as SSR wrote it. A component that ships re-renders its
+        // whole template on hydration, so without this the SSR'd hidden field
+        // would be replaced by an `action` attribute holding a stringified
+        // function, and the form would post to a garbage url.
+        //
+        // Nothing happens here. The whole decision (identity, the submit
+        // attributes, the hidden field) is made at the end of the pass by
+        // `reconcileFormAction`, because it depends on holes that have not
+        // committed yet when this one does.
+      } else {
         // #1154: refuse to stringify a function into action=/formaction=
         // (mirrors the SSR guard, so a client re-render cannot write a
         // server action's source into the live DOM).
@@ -691,7 +1190,14 @@ function applyPart(part, value, _prev, allValues) {
       // legitimate in both. The helper owns that distinction.
       //
       // Not covered here, because it is not a commit: a custom element's prop
-      // declared `reflect: true` writes String(value) from its own setter.
+      // declared `reflect: true` reflects from its own setter. That path used
+      // to write String(value) and leak the source. #1169 made it remove the
+      // attribute instead (an array carrying one included, via the same
+      // `carriesFunction` predicate this file's guard uses), so it is guarded
+      // at the setter rather than here. One carve-out stays the author's call:
+      // a prop supplying its own `converter.toAttribute` runs that converter
+      // first and is left alone, so it still writes whatever the author
+      // returns for a function.
       assertNotFunctionReflectedActionProp(value, part.name, part.el.localName);
       /** @type any */ (part.el)[part.name] = value;
       break;
@@ -983,10 +1489,17 @@ function applyChildInnerRaw(part, value) {
         : Object.is(prevDeps, nextDeps);
       if (equal) return;
     }
-    /** @type any */ (part).__guardDeps = Array.isArray(nextDeps)
-      ? nextDeps.slice()
-      : nextDeps;
+    // Snapshot the deps BEFORE running `fn` (so a fn that mutates the array
+    // it was handed cannot rewrite what we record), but RECORD them only
+    // after the commit succeeds. Recording first meant a throw part-way
+    // through the commit left the region torn down with the NEW deps already
+    // stored, so every later render with the same deps hit the `equal`
+    // short-circuit above and skipped the region forever. Renders are always
+    // microtask-scheduled (`_scheduleUpdate`), so `fn()` cannot re-enter this
+    // part synchronously and see the stale deps.
+    const depsSnapshot = Array.isArray(nextDeps) ? nextDeps.slice() : nextDeps;
     applyChildInner(part, v.fn());
+    /** @type any */ (part).__guardDeps = depsSnapshot;
     return;
   }
 
@@ -1119,7 +1632,7 @@ function applyChildInnerRaw(part, value) {
 
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);
-    const { templateEl, parts } = compile(tr);
+    const { templateEl, parts, formActions } = compile(tr);
     const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
     const startNode = document.createComment(`${MARKER}s`);
     const endNode = document.createComment(`${MARKER}e`);
@@ -1129,6 +1642,7 @@ function applyChildInnerRaw(part, value) {
       applyPart(bound[i], tr.values[i], undefined, tr.values);
       lastValues.push(tr.values[i]);
     }
+    reconcileFormActions(formActions, bound, tr.values);
     const nodes = [startNode, ...frag.childNodes, endNode];
     marker.parentNode?.insertBefore(nodesToFrag(nodes), marker);
     // Slot parts in this nested template need their one-shot apply just
@@ -1155,16 +1669,46 @@ function nodesToFrag(nodes) {
   return frag;
 }
 
-/** @param {Node} start @param {Node} end */
+/**
+ * Remove a template instance's whole range, its bookend markers INCLUDED.
+ *
+ * Every caller discards the instance right after: the map entry or slot that
+ * held it is dropped, and a replacement, where there is one, is built with
+ * markers of its own. So this is a REMOVE, never lit's clear-and-reuse. A
+ * caller that wants to keep the bookends and render into them again needs its
+ * OWN function, because the two want opposite answers for the end marker.
+ *
+ * `parent` is read BEFORE the walk because the walk removes `start` on its
+ * first iteration, which nulls `start.parentNode`. Reading it afterwards
+ * compared the end marker's live parent against `null`, so the guard could
+ * never fire and every teardown left one `wjm-e` comment in the document,
+ * unbounded for the life of the region.
+ *
+ * The `end.parentNode === parent` comparison is a refusal, not a formality. A
+ * marker moved under a different parent is not this region's to remove, and
+ * `parent.removeChild(end)` on it throws NotFoundError from inside a teardown
+ * that has to stay total.
+ *
+ * The walk assumes the range is INTACT: it steps `nextSibling` from `start`
+ * and stops on `end`, so a range whose end no longer follows its start runs
+ * off the child list and takes the part's own marker with it. That is not
+ * something this function defends against, before or after the parent capture,
+ * and the consequence is spelled out where it bites, on `reconcileRepeat`'s
+ * catch below. The guard is the narrower promise: whatever the walk did, a
+ * marker that is somewhere else is left alone.
+ *
+ * @param {Node} start @param {Node} end
+ */
 function removeBetween(start, end) {
-  if (!start.parentNode) return;
+  const parent = start.parentNode;
+  if (!parent) return;
   let n = start;
   while (n && n !== end) {
     const next = n.nextSibling;
     n.parentNode?.removeChild(n);
     n = next;
   }
-  if (end.parentNode === start.parentNode) end.parentNode?.removeChild(end);
+  if (end.parentNode === parent) parent.removeChild(end);
 }
 
 /* ================================================================
@@ -1178,7 +1722,7 @@ function removeBetween(start, end) {
  * @returns {{ inst: TemplateInstance, frag: DocumentFragment }}
  */
 function buildDetached(tr) {
-  const { templateEl, parts } = compile(tr);
+  const { templateEl, parts, formActions } = compile(tr);
   const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
   const startNode = document.createComment(`${MARKER}s`);
   const endNode = document.createComment(`${MARKER}e`);
@@ -1188,6 +1732,7 @@ function buildDetached(tr) {
     applyPart(bound[i], tr.values[i], undefined, tr.values);
     lastValues.push(tr.values[i]);
   }
+  reconcileFormActions(formActions, bound, tr.values);
   // Slot parts need their one-shot apply exactly like createInstance and the
   // nested-template path. The fragment is still detached here, so the
   // slot-part's own deferred finalize (a one-microtask retry when the parent
@@ -1216,12 +1761,33 @@ function disposeInstance(inst) {
       // Unbind any active ref so the user observes the element being
       // removed (callback receives undefined / Ref.value cleared).
       // Mirrors lit-html's cleanup-on-disconnect for element parts.
+      //
+      // BOTH branches swallow, and lit is not the reason: lit's ref directive
+      // guards neither, so a throw there propagates. The reason is that a
+      // teardown has to be TOTAL. `lastTarget` is cleared only AFTER these
+      // writes, so a throw leaves the part still pointing at the ref and
+      // every later teardown of the same instance throws at the same line
+      // forever. It also aborts the rest of this loop, so the remaining
+      // parts keep their listeners and their refs bound. A teardown has no
+      // retry either (a commit has the COMMIT_FAILED sentinel and a next
+      // render; this does not), so there is nothing a propagated error could
+      // usefully repair.
+      //
+      // The object branch is the one this adds. The callback branch was
+      // already guarded here AND on the commit path (`applyElement` wraps
+      // every `nextTarget(...)` / `prevTarget(undefined)` call), so a
+      // throwing ref CALLBACK has always been swallowed everywhere. What was
+      // inconsistent is the object ref, guarded on neither. This makes the
+      // two agree on TEARDOWN, which is where the totality argument bites.
+      // It does NOT touch the commit path, so `applyElement`'s object-ref
+      // writes still propagate to the component boundary, which has a route
+      // for the error and a next render to repair it.
       const prev = /** @type any */ (p).lastTarget;
       if (prev) {
         if (typeof prev === 'function') {
           try { prev(undefined); } catch { /* swallow */ }
         } else if (typeof prev === 'object') {
-          prev.value = undefined;
+          try { prev.value = undefined; } catch { /* swallow */ }
         }
         /** @type any */ (p).lastTarget = undefined;
         /** @type any */ (p).__lastEl = undefined;
@@ -1273,43 +1839,130 @@ function reconcileRepeat(part, value) {
 
   const newMap = new Map();
 
-  // Walk the new list and position each item's nodes immediately before the marker.
-  for (let i = 0; i < items.length; i++) {
-    const key = keyFn(items[i], i);
-    const tr = templateFn(items[i], i);
-    if (!isTemplate(tr)) continue;
-    const existing = state.map.get(key);
-    if (existing && existing.strings === /** @type any */ (tr).strings) {
-      updateInstance(existing, /** @type any */ (tr).values);
-      // Move nodes before marker preserving element identity.
-      moveRange(existing.startNode, existing.endNode, parent, marker);
-      newMap.set(key, existing);
-      state.map.delete(key);
-    } else {
-      if (existing) {
-        disposeInstance(existing);
-        removeBetween(existing.startNode, existing.endNode);
+  try {
+    // Walk the new list and position each item's nodes immediately before the marker.
+    for (let i = 0; i < items.length; i++) {
+      const key = keyFn(items[i], i);
+      const tr = templateFn(items[i], i);
+      if (!isTemplate(tr)) continue;
+      const existing = state.map.get(key);
+      if (existing && existing.strings === /** @type any */ (tr).strings) {
+        updateInstance(existing, /** @type any */ (tr).values);
+        // Move nodes before marker preserving element identity.
+        moveRange(existing.startNode, existing.endNode, parent, marker);
+        newMap.set(key, existing);
         state.map.delete(key);
+      } else {
+        if (existing) {
+          // Unmapped BEFORE the row is touched, for the reason spelled out
+          // in the leftover loop below: a key kept across a refused removal
+          // points at a half-removed row, and reusing that row later walks
+          // the removal off the end of the region. Same ordering, same
+          // trade, and the two have to agree or the invariant the catch
+          // relies on holds on one branch and not the other.
+          state.map.delete(key);
+          disposeInstance(existing);
+          removeBetween(existing.startNode, existing.endNode);
+        }
+        const { inst, frag } = buildDetached(/** @type any */ (tr));
+        parent.insertBefore(frag, marker);
+        newMap.set(key, inst);
       }
-      const { inst, frag } = buildDetached(/** @type any */ (tr));
-      parent.insertBefore(frag, marker);
-      newMap.set(key, inst);
     }
-  }
 
-  // Remove any keys that remain in the old map.
-  for (const inst of state.map.values()) {
-    disposeInstance(inst);
-    removeBetween(inst.startNode, inst.endNode);
+    // Remove any keys that remain in the old map. The key leaves the map
+    // BEFORE its row is touched and the removal is in a `finally`, so at any
+    // throw point `state.map` holds exactly the leftovers this pass has not
+    // reached, and a row whose dispose threw still leaves the document.
+    // Iterating a snapshot keeps the delete obviously safe rather than
+    // relying on the reader knowing that deleting during a Map iteration is
+    // legal.
+    for (const [k, inst] of [...state.map]) {
+      state.map.delete(k);
+      try {
+        disposeInstance(inst);
+      } finally {
+        removeBetween(inst.startNode, inst.endNode);
+      }
+    }
+    state.map = newMap;
+  } catch (err) {
+    // The walk moves DOM and drains `state.map` incrementally while the
+    // replacement map is accumulated locally, so a throw part-way through
+    // leaves NEITHER map describing what is on screen: the already-processed
+    // keys sit only in `newMap`, which is about to be discarded, while their
+    // nodes stay in the document tracked by nothing. The next (perfectly
+    // valid) render then rebuilds those keys from scratch and the orphaned
+    // originals are never removed, so the list shows duplicated rows forever
+    // with nothing logged after the first throw.
+    //
+    // Re-unite every instance still in the document under `state.map` (the
+    // two maps are disjoint: a key lands in `newMap` only after being deleted
+    // from `state.map`), so the map describes the DOM again and nothing is
+    // orphaned. That is the whole repair. The next render is then an ORDINARY
+    // reconcile against a truthful map, which repositions every row and
+    // re-applies whatever the throw skipped.
+    //
+    // That claim covers the REMOVAL loop as well as the walk, and only
+    // because the loop was written to earn it. It drops each key before
+    // touching that row and removes the nodes in a `finally`, so a throw
+    // mid-removal cannot merge `newMap` over a `state.map` still holding
+    // disposed, detached rows. That was the failure: the row the app DELETED
+    // stayed on screen, the survivors reordered, and a later render that
+    // re-added that key reinserted the detached instance. The invariant, at
+    // any throw point on either branch: every instance this pass has not
+    // destructively touched is described by exactly one of the two maps,
+    // `newMap` for the processed new keys and `state.map` for the leftovers
+    // not reached yet, which is what makes the merge below correct. The
+    // exception is the row named in the residual just below, whose removal
+    // refused part-way; that one is in neither map, by choice.
+    //
+    // The residual is a throw from `removeBetween` ITSELF, which only calls
+    // `removeChild` on nodes the renderer owns, so it takes a throwing DOM to
+    // reach. That row is already unmapped, so its remaining nodes stay in the
+    // document tracked by nothing and a later re-add of that key builds a
+    // second row beside them. Unmapping AFTER the removal instead would keep
+    // that key, and it is measurably worse rather than better: the row is
+    // half removed, its start marker gone and its end marker still in place,
+    // so the re-add hits the reuse branch and `moveRange` re-attaches the
+    // lone start marker AFTER the end marker. The next removal of that key
+    // then walks forward from a start that never reaches its end, taking the
+    // repeat part's own marker and every following sibling with it, and the
+    // region is dead for good. One untracked row beats a destroyed list.
+    //
+    // Deliberately NOT a teardown-and-rebuild of the region. Rebuilding is
+    // the obvious defensive move and it is measurably worse: it discards node
+    // identity for every row, which is the exact cost keyed reconciliation
+    // exists to avoid (see the plain-array note below, a rebuild cancels an
+    // in-progress native drag). It is also unnecessary, because this map is
+    // restored to the truth rather than left describing a DOM that moved, so
+    // there is nothing to guess and no partial DOM move to unwind.
+    //
+    // That is only half of it, and the other half does NOT live here: the row
+    // whose own commit threw is repaired by the COMMIT_FAILED sentinel in
+    // `updateInstance`, not by anything below. Without it the failed hole
+    // compares EQUAL on the next render (its `lastValues` entry never
+    // advanced past the throw, so it still holds the value that render
+    // supplies) and is skipped forever, which for a child position means the
+    // row stays permanently blank. Do not remove the sentinel on the theory
+    // that a half-updated instance heals itself; it does not.
+    for (const [k, inst] of newMap) state.map.set(k, inst);
+    throw err;
   }
-  state.map = newMap;
 }
 
 /** @param {{ kind: 'repeat', map: Map<any, TemplateInstance> }} state */
 function teardownRepeat(state) {
-  for (const inst of state.map.values()) {
-    disposeInstance(inst);
-    removeBetween(inst.startNode, inst.endNode);
+  // Same delete-as-you-go shape as the leftover loop in `reconcileRepeat`,
+  // for the same reason: a throw part-way must not leave already-removed
+  // instances in the map. The trailing `clear()` stays as a no-op safety net.
+  for (const [k, inst] of [...state.map]) {
+    state.map.delete(k);
+    try {
+      disposeInstance(inst);
+    } finally {
+      removeBetween(inst.startNode, inst.endNode);
+    }
   }
   state.map.clear();
 }
@@ -1400,42 +2053,107 @@ function reconcileArray(part, value) {
   const old = state.items;
   /** @type {ArrayItem[]} */
   const next = [];
+  // How many slots of `old` are fully processed. Tracked rather than inferred
+  // from `next.length`, because the shrink loop below advances through `old`
+  // while `next` stops growing, so the two part company there. The catch is
+  // the only reader.
+  let consumed = 0;
 
-  for (let i = 0; i < value.length; i++) {
-    const v = value[i];
-    const o = old[i];
-    if (isTemplate(v)) {
-      const tr = /** @type any */ (v);
-      if (o && o.type === 'tpl' && o.inst.strings === tr.strings) {
-        updateInstance(o.inst, tr.values);
-        next.push(o);
-        continue;
-      }
-    } else if (v != null && v !== false && v !== true) {
-      if (o && o.type === 'text') {
-        const str = String(v);
-        if (o.node.data !== str) o.node.data = str;
-        next.push(o);
+  try {
+    for (let i = 0; i < value.length; i++) {
+      const v = value[i];
+      const o = old[i];
+      if (isTemplate(v)) {
+        const tr = /** @type any */ (v);
+        if (o && o.type === 'tpl' && o.inst.strings === tr.strings) {
+          updateInstance(o.inst, tr.values);
+          next.push(o);
+          consumed = i + 1;
+          continue;
+        }
+      } else if (v != null && v !== false && v !== true) {
+        if (o && o.type === 'text') {
+          const str = String(v);
+          if (o.node.data !== str) o.node.data = str;
+          next.push(o);
+          consumed = i + 1;
+          continue;
+        }
+      } else {
+        // Empty slot: drop any prior nodes that occupied this position.
+        // Deliberately NOT reordered like the branch below. That reorder
+        // exists to keep a slot that was already BUILT and INSERTED tracked,
+        // and this branch builds and inserts nothing, so pushing first would
+        // only mean a throw from the removal leaves a phantom empty slot at
+        // this index AND `old[i]` spliced in at the next one, shifting every
+        // later slot by one in a POSITIONAL reconciler. Removing first, a
+        // throw here leaves `old[i]` describing its own position, which is
+        // still exactly where its nodes are.
+        if (o) removeArrayItem(o);
+        next.push({ type: 'empty' });
+        consumed = i + 1;
         continue;
       }
-    } else {
-      // Empty slot: drop any prior nodes that occupied this position.
+      // Shape changed, or the array grew past the old length. Build fresh,
+      // insert at this position (before the current / next still-attached
+      // old node, else the marker), then drop the old slot it replaced.
+      // The push sits BEFORE the removal, which is a pure reordering on the
+      // success path and means a slot that has already been built and
+      // inserted is never untracked at any throw point.
+      const { item, frag } = buildArrayItem(v);
+      if (frag) parent.insertBefore(frag, nextArrayAnchor(old, i, marker));
+      next.push(item);
       if (o) removeArrayItem(o);
-      next.push({ type: 'empty' });
-      continue;
+      consumed = i + 1;
     }
-    // Shape changed, or the array grew past the old length. Build fresh,
-    // insert at this position (before the current / next still-attached
-    // old node, else the marker), then drop the old slot it replaced.
-    const { item, frag } = buildArrayItem(v);
-    if (frag) parent.insertBefore(frag, nextArrayAnchor(old, i, marker));
-    if (o) removeArrayItem(o);
-    next.push(item);
-  }
 
-  // Shrink: remove slots beyond the new length.
-  for (let i = value.length; i < old.length; i++) removeArrayItem(old[i]);
-  state.items = next;
+    // Shrink: remove slots beyond the new length.
+    for (let i = value.length; i < old.length; i++) {
+      removeArrayItem(old[i]);
+      consumed = i + 1;
+    }
+    state.items = next;
+  } catch (err) {
+    // `state.items` is committed only after the whole walk, so a throw part
+    // way through discards `next` entirely: the map of slots keeps describing
+    // positions whose nodes were already removed, while the freshly built and
+    // inserted ones are in the document tracked by nothing. Nothing is logged
+    // after the first throw, and the orphan outlives even a render of an EMPTY
+    // array, because the only code that could remove it walks `state.items`.
+    //
+    // Splice the untouched tail of `old` onto what `next` accumulated, so the
+    // bookkeeping describes the DOM again. The invariant that holds at any
+    // throw point: every live node is described by exactly one slot, the
+    // slots below `next.length` being the rebuilt or reused ones and the rest
+    // the part of `old` this pass never reached. Index alignment survives
+    // because this reconciler is POSITIONAL, so a slot's index IS its
+    // identity, which is also why the boundary has to come from `consumed`
+    // rather than `next.length`: during the shrink loop those differ, and
+    // splicing from `next.length` would re-describe slots already removed.
+    // A later render that grew the array would then match a live value
+    // against a DETACHED slot with the same `strings`, update it in place,
+    // and that row would silently never appear.
+    //
+    // Deliberately NOT a teardown-and-rebuild of the region, for the reason
+    // recorded on `reconcileRepeat`'s catch above: it discards node identity
+    // for every row, which cancels an in-progress native drag and drops focus
+    // and scroll.
+    //
+    // The residual is a throw from the removal step itself, which takes a
+    // throwing DOM to reach (the teardown it calls is total, so only
+    // `removeBetween` is left, and that calls `removeChild` solely on nodes
+    // the renderer owns). State it rather than deny it: `removeBetween`
+    // takes the start marker first and then early-returns for good once that
+    // marker is gone, so a row whose removal refused part-way can never be
+    // removed afterwards. Its remaining nodes stay in the document, and an
+    // EMPTY render will not clear them. Tracked or not, they are there for
+    // the life of the region, the same residual `reconcileRepeat`'s catch
+    // names. What this repair buys is that there is only ONE such row and
+    // every other slot still reconciles, where before the whole pass was
+    // discarded.
+    state.items = next.concat(old.slice(consumed));
+    throw err;
+  }
 }
 
 /**
@@ -1716,6 +2434,9 @@ function applyUntil(part, args) {
   // a fresh TemplateResult on every call but the strings array is
   // interned per call site, so the conceptual value is unchanged.
   const partAny = /** @type any */ (part);
+  // Same as applyWatch: the promise handlers below commit with no render on
+  // the stack, so the owning component is recorded here while it is knowable.
+  if (currentRenderRoot) partAny.__commitOwner = boundaryOwnerOf(currentRenderRoot);
   const prevState = partAny.__untilState;
   const prevArgs = partAny.__untilArgs;
   const argEq = (a, b) => {
@@ -1782,8 +2503,19 @@ function applyUntil(part, args) {
       (resolved) => {
         if (state.aborted) return;
         if (i >= state.highestResolved) return;
+        // Commit FIRST, record the new priority only once it succeeded.
+        // Advancing `highestResolved` up front meant a commit throw left the
+        // region torn down while the state claimed index `i` had won, so
+        // every later resolution at a lower priority was refused and the
+        // region stayed empty. Committing first also keeps the throw inside
+        // the try, where it can reach the component boundary.
+        try {
+          commitOutOfBand(part, () => applyChildInner(part, resolved));
+        } catch (err) {
+          reportOutOfBandCommitError(part, err);
+          return;
+        }
         state.highestResolved = i;
-        applyChildInner(part, resolved);
       },
       () => {
         // Swallow rejection. A rejected Promise is treated as "no value";
@@ -1793,6 +2525,54 @@ function applyUntil(part, args) {
   }
 }
 
+/**
+ * Route a throw from an OUT-OF-BAND commit to the owning component's
+ * render-error boundary.
+ *
+ * `watch`'s notify microtask and `until`'s Promise resolution commit from
+ * outside `component.js`'s update cycle, so none of the boundaries that wrap
+ * every other render path are on the stack. Left alone, a commit throw there
+ * escapes as a window-level `error` / unhandled rejection instead of the
+ * per-component `renderError()` the sync and async render paths both route
+ * to, which breaks per-component error isolation for exactly these two
+ * directives.
+ *
+ * Reads the owner stamped on the part when the directive was installed. See
+ * the note in the body for why this is not a walk up the parent chain.
+ *
+ * @param {Extract<BoundPart, {kind:'child'}>} part
+ * @param {unknown} error
+ */
+function reportOutOfBandCommitError(part, error) {
+  let err;
+  try {
+    err = error instanceof Error ? error : new Error(String(error));
+  } catch {
+    // The thrown value's own `toString` threw. That is the exact class of
+    // value that makes a commit throw in the first place, so it is reachable
+    // here; do not let stringifying it mask the original failure.
+    err = new Error('render error (unstringifiable thrown value)');
+  }
+  // The owner stamped when the directive was installed, which is the
+  // component whose TEMPLATE holds this part. Never walk the parent chain
+  // for this: `_handleRenderError` lives on WebComponent's prototype, so
+  // every upgraded element on the way up carries one, and the FIRST one a
+  // structural walk meets is the innermost element the part happens to sit
+  // inside, not the template that owns it. Routing there is not merely the
+  // wrong log line: a light-DOM component's renderError() commits into the
+  // component itself, which would replace the very children holding this
+  // part's markers and silently kill every later update through it.
+  const owner = /** @type any */ (part).__commitOwner;
+  if (owner && typeof owner._handleRenderError === 'function') {
+    owner._handleRenderError(err);
+    return;
+  }
+  // No component boundary owns this part (a bare `render()` into a plain
+  // container). Nothing can contain the error, so surface it rather than
+  // swallow it.
+  throw err;
+}
+
 /**
  * Abort an `until` directive's in-flight Promise tracking. Called from
  * `teardownChild` when the part is being reset.
@@ -1824,6 +2604,11 @@ function teardownUntil(state) {
  */
 function applyWatch(part, sig) {
   const partAny = /** @type any */ (part);
+  // Record the owning component while we are still inside its render(), the
+  // only moment it is knowable. The notify microtask below commits with no
+  // render on the stack and no way to derive it. Keep a prior stamp if this
+  // somehow runs outside a render, rather than clearing a good owner.
+  if (currentRenderRoot) partAny.__commitOwner = boundaryOwnerOf(currentRenderRoot);
   // Same signal as last render: refresh dep tracking via observe (the
   // spec-aligned Watcher fires once per arm, so re-observing re-arms).
   if (partAny.__watchSig === sig && partAny.__watchSub) {
@@ -1845,8 +2630,15 @@ function applyWatch(part, sig) {
     queueMicrotask(() => {
       if (partAny.__watchSub !== watcher) return; // disposed mid-flight
       let v;
-      watcher.observe(() => { v = sig.get(); });
-      applyChildInner(part, v);
+      // Nothing above this microtask catches: it runs outside the host's
+      // update cycle, so a commit throw here would surface at the window
+      // instead of the component's renderError(). Route it explicitly.
+      try {
+        watcher.observe(() => { v = sig.get(); });
+        commitOutOfBand(part, () => applyChildInner(part, v));
+      } catch (err) {
+        reportOutOfBandCommitError(part, err);
+      }
     });
   });
   partAny.__watchSub = watcher;
@@ -1885,6 +2677,15 @@ function teardownWatch(partAny) {
  * @param {{ iterable: AsyncIterable<unknown>, mapper?: (v: unknown, i: number) => unknown }} dir
  */
 function applyAsyncAppend(part, dir) {
+  const partAny = /** @type any */ (part);
+  // Record the owning component while we are still inside its render(), the
+  // only moment it is knowable, exactly as `applyWatch` / `applyUntil` do.
+  // Chunks commit from an async loop with no render on the stack, so without
+  // this both the chunk's own commit throw and any directive nested inside a
+  // chunk have no owner to route to. Stamped ABOVE the short-circuit so a
+  // re-render that returns early still refreshes the owner, and guarded so a
+  // re-install outside a render keeps a previously good one.
+  if (currentRenderRoot) partAny.__commitOwner = boundaryOwnerOf(currentRenderRoot);
   // Same-iterable short-circuit: if the prior render's iterable identity
   // matches, the existing iterator is still consuming it. Re-subscribing
   // would start a fresh iterator that misses already-yielded values.
@@ -1923,6 +2724,9 @@ function applyAsyncAppend(part, dir) {
  * @param {{ iterable: AsyncIterable<unknown>, mapper?: (v: unknown, i: number) => unknown }} dir
  */
 function applyAsyncReplace(part, dir) {
+  const partAny = /** @type any */ (part);
+  // Owner stamp: see comment in applyAsyncAppend. Above the short-circuit.
+  if (currentRenderRoot) partAny.__commitOwner = boundaryOwnerOf(currentRenderRoot);
   // Same-iterable short-circuit: see comment in applyAsyncAppend.
   const currentChild = /** @type any */ (part.child);
   if (currentChild && currentChild.kind === 'async-stream'
@@ -1969,6 +2773,23 @@ function applyAsyncReplace(part, dir) {
  * after every `next()` resolve to short-circuit if abortion happened
  * while the iterator was suspended.
  *
+ * Each pass carries TWO try spans, and which failure lands in which is the
+ * load-bearing part. SPAN A is the author's own code, the iterable AND the
+ * `mapper` it was given, and a throw from either is logged to the console and
+ * ends the stream, on the long-standing reasoning that an author's iterable
+ * should handle its own errors. SPAN B is the chunk COMMIT, which is a render
+ * failure of the component whose template holds the binding, so it routes to
+ * that component's `renderError()` and stops the stream.
+ *
+ * Scope note: only a throw from the COMMIT can stop the stream from here. A
+ * directive nested INSIDE a committed chunk (a `watch` whose signal changes
+ * later) throws from its own handler, outside this loop entirely, so it
+ * reaches the boundary but this loop knows nothing about it and keeps
+ * pulling. That is the same for any directive nested anywhere else. lit is no authority
+ * either way here (it has no per-component boundary, and both failures become
+ * unhandled rejections at the window), so this follows the
+ * per-component error isolation WebJs has instead.
+ *
  * @param {AsyncStreamState} state
  * @param {Extract<BoundPart, {kind:'child'}>} part
  * @param {{ iterable: AsyncIterable<unknown>, mapper?: (v: unknown, i: number) => unknown }} dir
@@ -1976,39 +2797,84 @@ function applyAsyncReplace(part, dir) {
 async function consumeAsyncStream(state, part, dir) {
   const marker = part.marker;
   let i = 0;
-  try {
-    while (!state.aborted) {
-      const result = await state.iterator.next();
+  while (!state.aborted) {
+    /** @type {IteratorResult<unknown>} */
+    let result;
+    /** @type {unknown} */
+    let mapped;
+    // SPAN A, the author's iterable. A throw here is the author's generator
+    // failing, not a render, so it keeps the long-standing console.error and
+    // ends the stream. It is a separate span from the commit below on purpose
+    // rather than a flag the one catch inspects, because the distinction is
+    // the whole point: `reportOutOfBandCommitError` RETHROWS for a part with
+    // no owner, and a single enclosing try would hand that rethrow straight
+    // back to this swallow, which is the escape this split exists to stop.
+    try {
+      result = await state.iterator.next();
       if (state.aborted) break;
       if (result.done) break;
-      const mapped = dir.mapper ? dir.mapper(result.value, i) : result.value;
-      const newNodes = renderToNodes(mapped);
-
-      // This chunk commit runs in an async loop OUTSIDE any render() window,
-      // so open the renderer-write window explicitly: without it, committing a
-      // stream chunk into a light slot host would hit the patched insertBefore /
-      // removeChild and fold the renderer's own output into `authored`.
-      commitInto(marker.parentNode, () => {
-        if (state.mode === 'replace') {
-          for (const n of state.nodes) {
-            if (n.parentNode) n.parentNode.removeChild(n);
+      mapped = dir.mapper ? dir.mapper(result.value, i) : result.value;
+    } catch (err) {
+      // Note this ENDS the stream, and always has: the catch used to sit
+      // outside the loop, so there has never been a resume path here.
+      if (typeof console !== 'undefined') console.error('[webjs] asyncStream error:', err);
+      return;
+    }
+
+    // SPAN B, the chunk commit. This is a render of the component whose
+    // TEMPLATE holds the binding, so a throw is that component's render
+    // failure and routes to its `renderError()`, the same as `watch` and
+    // `until` already do from their own out-of-band commits. `renderToNodes`
+    // is INSIDE the wrap because that is where a nested directive is
+    // installed and reads `currentRenderRoot`; without it, a `watch()` inside
+    // a chunk is stamped with no owner and its later throw escapes.
+    // `commitInto` is a different concern (the renderer-write window for a
+    // light slot host), so the two nest rather than replace each other.
+    try {
+      commitOutOfBand(part, () => {
+        const newNodes = renderToNodes(mapped);
+
+        // This chunk commit runs in an async loop OUTSIDE any render() window,
+        // so open the renderer-write window explicitly: without it, committing a
+        // stream chunk into a light slot host would hit the patched insertBefore /
+        // removeChild and fold the renderer's own output into `authored`.
+        commitInto(marker.parentNode, () => {
+          if (state.mode === 'replace') {
+            for (const n of state.nodes) {
+              if (n.parentNode) n.parentNode.removeChild(n);
+            }
+            state.nodes = [];
           }
-          state.nodes = [];
-        }
 
-        const frag = document.createDocumentFragment();
-        for (const n of newNodes) frag.appendChild(n);
-        marker.parentNode?.insertBefore(frag, marker);
-        state.nodes.push(...newNodes);
+          const frag = document.createDocumentFragment();
+          for (const n of newNodes) frag.appendChild(n);
+          marker.parentNode?.insertBefore(frag, marker);
+          state.nodes.push(...newNodes);
+        });
       });
-
-      i++;
+    } catch (err) {
+      // Stop the stream. The boundary is about to render an error state, and
+      // appending later chunks into a region it may have replaced is not a
+      // recovery. The rendered nodes are left alone: blanking the region is a
+      // separate decision, and `teardownAsyncStream` is for the part being
+      // reset, not for this.
+      state.aborted = true;
+      try { state.iterator.return?.()?.catch?.(() => {}); } catch { /* best effort */ }
+      // Rethrows when nothing can receive the error, which for a bare
+      // `render()` into a plain container is an owner that carries no
+      // `_handleRenderError` (the stamp records the container itself, so the
+      // owner is present, just not a component). Surfacing beats swallowing
+      // there, and it matches `watch` and `until`, which rethrow from their
+      // own out-of-band handlers for the same reason. The exact shape differs
+      // by site rather than being one thing: this rejects the loop's
+      // promise, `until` rejects from its `.then`, and `watch` throws inside
+      // a `queueMicrotask`, which is an uncaught error rather than a
+      // rejection.
+      reportOutOfBandCommitError(part, err);
+      return;
     }
-  } catch (err) {
-    // Swallow iteration errors. A leaked iterator throwing should not
-    // crash the host's render cycle. Authors who care about errors
-    // should handle them in their iterable / generator.
-    if (typeof console !== 'undefined') console.error('[webjs] asyncStream error:', err);
+
+    i++;
   }
 }
 
@@ -2022,12 +2888,13 @@ function renderToNodes(value) {
   if (value == null || value === false || value === true) return [];
   if (isTemplate(value)) {
     const tr = /** @type any */ (value);
-    const { templateEl, parts } = compile(tr);
+    const { templateEl, parts, formActions } = compile(tr);
     const frag = /** @type DocumentFragment */ (templateEl.content.cloneNode(true));
     const bound = parts.map((p) => bindPart(p, frag));
     for (let i = 0; i < tr.values.length; i++) {
       applyPart(bound[i], tr.values[i], undefined, tr.values);
     }
+    reconcileFormActions(formActions, bound, tr.values);
     // Slot parts need their one-shot apply here too (same contract as
     // createInstance / nested templates / buildDetached): the caller
     // (consumeAsyncStream) inserts these nodes synchronously in the same