From fd7b660183653f7923864e3df76951290a37adab Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Sat, 5 Sep 2026 18:31:28 +0100
Subject: [PATCH 1/3] Add opt-in skipping of unchanged subtrees

Preserve root callbacks and exclude hidden form state, templates and head handling from subtree skipping. Include documentation and browser tests, adapted to upstream realm-safe node handling.
---
 CHANGELOG.md           |   1 +
 README.md              |  13 +
 src/idiomorph.js       | 272 ++++++++++++++
 test/index.html        |   1 +
 test/skip-unchanged.js | 824 +++++++++++++++++++++++++++++++++++++++++
 5 files changed, 1111 insertions(+)
 create mode 100644 test/skip-unchanged.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a82b008..d4e1b03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -16,6 +16,7 @@
 * Added:
   * Publish TypeScript declarations, generated from the JSDoc types already in the source (@myabc) #152
   * Warn in the console when duplicate ids are detected during a morph, since they can cause subtle state loss (@botandrose) #142
+  * New off-by-default `skipUnchanged` option that skips morphing subtrees whose old and new content are already identical, for large speedups on mostly-unchanged pages (@myabc) #144
 
 * Fixed:
   * Fix TypeError when restoring focus to an element that doesn't support text selection (@emaia) #150
diff --git a/README.md b/README.md
index dc8abcb..0d489a7 100644
--- a/README.md
+++ b/README.md
@@ -91,6 +91,7 @@ Idiomorph supports the following options:
 | `ignoreActive: false`         | If `true`, idiomorph will skip the active element                                                          | `Idiomorph.morph(..., {ignoreActive:true})`                              |
 | `ignoreActiveValue: false`    | If `true`, idiomorph will not update the active element's value                                            | `Idiomorph.morph(..., {ignoreActiveValue:true})`                         |
 | `restoreFocus: true`          | If `true`, idiomorph will attempt to restore any lost focus and selection state after the morph.           | `Idiomorph.morph(..., {restoreFocus:true})`                              |
+| `skipUnchanged: false`        | If `true`, idiomorph will not descend into subtrees that are already identical. See the [skipping unchanged content](#skipping-unchanged-content) section | `Idiomorph.morph(..., {skipUnchanged:true})`                             |
 | `head: {style: 'merge', ...}` | Allows you to control how the `head` tag is merged. See the [head](#the-head-tag) section for more details | `Idiomorph.morph(..., {head:{style:'merge'}})`                           |
 | `callbacks: {...}`            | Allows you to insert callbacks when events occur in the morph lifecycle. See the callback table below      | `Idiomorph.morph(..., {callbacks:{beforeNodeAdded:function(node){...}})` |
 
@@ -109,6 +110,18 @@ of the algorithm.
 | afterNodeRemoved(node)                                    | Called after a node is removed from the DOM                                                                    | none                                               |
 | beforeAttributeUpdated(attributeName, node, mutationType) | Called before an attribute on an element is updated or removed (`mutationType` is either "update" or "remove") | return false to not update or remove the attribute |
 
+### Skipping unchanged content
+
+Most real-world morphs change only a small part of a large page. With `skipUnchanged: true`, idiomorph compares each pair of old and new elements with [`isEqualNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/isEqualNode) and, when they are identical, leaves the whole subtree alone instead of walking into it. On pages that mostly stay the same this makes morphs many times faster. On pages where most of the content changes between morphs, though, the extra comparisons can cost slightly more than they save, so the option is best suited to mostly-unchanged pages.
+
+Idiomorph's own morphing produces the same DOM with or without the option. What changes is what your callbacks see, and callbacks that rely on being called for every node can therefore behave differently:
+
+* `beforeNodeMorphed` and `afterNodeMorphed` are still called for the root of an unchanged subtree, so you can still veto it, but they are **not** called for its descendants. `beforeAttributeUpdated` is never called inside it either, since nothing changes.
+* Hidden state is respected: an `<input>`, `<textarea>` or `<option>` whose `value`, `checked` or `selected` property differs from its effective default (what parsing its markup would produce — an attribute-less checkbox legitimately has the value `on`, an untouched single-select has its first enabled option selected) is never skipped, nor are its ancestors, so it is synced exactly as without the option. `<template>` and `<head>` elements are never skipped either.
+* If a `beforeNodeMorphed` callback changes such hidden state on the two nodes it was handed, that is honoured. Changes it makes to *descendants* of those nodes are not: an unchanged subtree may already have been skipped by the time they would be visited, so such side effects can leave the DOM different from a morph without the option.
+
+The option is off by default in this release.
+
 ### The `head` tag
 
 The head tag is treated specially by idiomorph because:
diff --git a/src/idiomorph.js b/src/idiomorph.js
index bbd972e..1bd462b 100644
--- a/src/idiomorph.js
+++ b/src/idiomorph.js
@@ -28,6 +28,7 @@
  * @property {boolean} [ignoreActive]
  * @property {boolean} [ignoreActiveValue]
  * @property {boolean} [restoreFocus]
+ * @property {boolean} [skipUnchanged]
  * @property {ConfigCallbacks} [callbacks]
  * @property {ConfigHead} [head]
  */
@@ -68,6 +69,7 @@
  * @property {boolean} [ignoreActive]
  * @property {boolean} [ignoreActiveValue]
  * @property {boolean} [restoreFocus]
+ * @property {boolean} [skipUnchanged]
  * @property {ConfigCallbacksInternal} callbacks
  * @property {ConfigHeadInternal} head
  */
@@ -112,6 +114,8 @@ var Idiomorph = (function () {
    * @property {ConfigInternal['ignoreActive']} ignoreActive
    * @property {ConfigInternal['ignoreActiveValue']} ignoreActiveValue
    * @property {ConfigInternal['restoreFocus']} restoreFocus
+   * @property {boolean} skipUnchanged
+   * @property {Set<Node>} unskippableNodes
    * @property {Map<Node, Set<string>>} idMap
    * @property {Set<string>} persistentIds
    * @property {ConfigInternal['callbacks']} callbacks
@@ -148,6 +152,7 @@ var Idiomorph = (function () {
       afterHeadMorphed: noOp,
     },
     restoreFocus: true,
+    skipUnchanged: false,
   };
 
   /**
@@ -644,6 +649,23 @@ var Idiomorph = (function () {
         return oldNode;
       }
 
+      if (
+        ctx.skipUnchanged &&
+        !ctx.unskippableNodes.has(oldNode) &&
+        !ctx.unskippableNodes.has(newContent) &&
+        // re-check the pair itself: beforeNodeMorphed may have changed hidden state since the pre-scan
+        !isUnskippable(oldNode) &&
+        !isUnskippable(newContent) &&
+        // a sibling option's change can flip this option's implicit selectedness
+        // without either side's own isUnskippable check ever seeing it
+        !optionSelectionDiffers(oldNode, newContent) &&
+        oldNode.isEqualNode(newContent)
+      ) {
+        // the whole subtree is unchanged; the root has been announced, its descendants are never visited
+        ctx.callbacks.afterNodeMorphed(oldNode, newContent);
+        return oldNode;
+      }
+
       if (is.headElement(oldNode) && ctx.head.style === "none") {
         // ignore the head element
       } else if (is.headElement(oldNode) && ctx.head.style !== "morph") {
@@ -990,6 +1012,249 @@ var Idiomorph = (function () {
     return promises;
   }
 
+  //=============================================================================
+  // Unchanged Subtree Skipping
+  //=============================================================================
+  const { isUnskippable, optionSelectionDiffers, createUnskippableNodeSet } =
+    (function () {
+      // Must stay in lockstep with the node-type checks in `isUnskippable`
+      // below: adding a node type to one without the other silently under- or
+      // over-scans.
+      const UNSKIPPABLE_SELECTOR = "input,textarea,select,option,template,head";
+
+      /**
+       * Nodes whose subtree must never be skipped under `skipUnchanged`, because
+       * `isEqualNode` either ignores state a morph would sync, or lies about them.
+       *
+       * @param {Node} node
+       * @returns {boolean}
+       */
+      function isUnskippable(node) {
+        if (is.templateElement(node)) {
+          // isEqualNode does not compare template .content
+          return true;
+        }
+        if (is.headElement(node)) {
+          // head merging has side effects (im-re-append) even when the head is unchanged
+          return true;
+        }
+        if (is.inputElement(node)) {
+          return (
+            node.type !== "file" &&
+            (node.checked !== node.defaultChecked ||
+              node.value !== defaultValueOf(node))
+          );
+        }
+        if (is.textAreaElement(node)) {
+          return node.value !== node.defaultValue;
+        }
+        if (is.selectElement(node)) {
+          // A single-select's overall selection can be dirty (e.g. cleared to
+          // selectedIndex -1, or coupled through a sibling option) without any
+          // option's own `selected` differing from its own default, so compare
+          // the live selectedIndex against what a fresh parse would select.
+          // selectedIndex is reliable across engines even where select.options
+          // is not. A multiple/size>1 select has no single selectedIndex; each
+          // of its options is dirty-checked individually by the option branch.
+          if (node.multiple || node.size > 1) {
+            return false;
+          }
+          const index = effectiveDefaultIndex(node.querySelectorAll("option"));
+          return index !== -1 && node.selectedIndex !== index;
+        }
+        if (is.optionElement(node)) {
+          // An option is dirty only when its live `selected` disagrees with
+          // BOTH the effective default of its select AND its own `selected`
+          // attribute (`defaultSelected`). Either agreement means a fresh parse
+          // of the markup would reproduce the live state, so a skip stays
+          // DOM-correct. This straddles a browser difference: a detached
+          // single-select applies its implicit first-option selection on
+          // Chromium/Firefox (a clean first option reports selected=true, which
+          // matches the effective default) but not on WebKit (it reports
+          // selected=false, which instead matches defaultSelected).
+          return (
+            node.selected !== defaultSelectedOf(node) &&
+            node.selected !== node.defaultSelected
+          );
+        }
+        return false;
+      }
+
+      /**
+       * Whether an option pair's live `selected` state has diverged. This
+       * exists to catch a coupling `isUnskippable` cannot see on its own: a
+       * single-select's implicit default selection depends on every option in
+       * the select, so removing the `selected` attribute from one option can
+       * flip another, untouched option's effective selectedness as a side
+       * effect once the morph runs — so the motivating case is exactly the one
+       * where neither option looks dirty on its own `isUnskippable` check,
+       * because each still agrees with its own default in isolation.
+       *
+       * Only meaningful when both sides sit in a real single-select: an option
+       * morphed on its own (no `<select>` ancestor, e.g. an outerHTML root
+       * morph) reports `selected: false` for reasons unrelated to this
+       * coupling, and comparing that against the old side would misfire.
+       *
+       * @param {Node} oldNode
+       * @param {Node} newNode
+       * @returns {boolean}
+       */
+      function optionSelectionDiffers(oldNode, newNode) {
+        if (!is.optionElement(oldNode) || !is.optionElement(newNode)) {
+          return false;
+        }
+        const oldSelect = oldNode.closest("select");
+        const newSelect = newNode.closest("select");
+        if (
+          !oldSelect ||
+          oldSelect.multiple ||
+          oldSelect.size > 1 ||
+          !newSelect ||
+          newSelect.multiple ||
+          newSelect.size > 1
+        ) {
+          return false;
+        }
+        return oldNode.selected !== newNode.selected;
+      }
+
+      /**
+       * The option index a fresh parse of a single-select's markup would leave
+       * selected: the last option carrying a `selected` attribute, else the
+       * first enabled option, else -1 when no option is enabled. Browsers
+       * disagree on what an all-disabled select selects (WebKit picks the first
+       * option, others select nothing), so -1 signals "no definitive default"
+       * and callers treat such a select as clean.
+       *
+       * @param {NodeListOf<HTMLOptionElement>} options
+       * @returns {number}
+       */
+      function effectiveDefaultIndex(options) {
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (options[i].defaultSelected) return i;
+        }
+        for (let i = 0; i < options.length; i++) {
+          if (!options[i].disabled) return i;
+        }
+        return -1;
+      }
+
+      /**
+       * Whether an option would be selected right after parsing its markup.
+       * In a single-select without any `selected` attribute the browser selects
+       * the first enabled option, and `defaultSelected` does not reflect that.
+       *
+       * @param {HTMLOptionElement} option
+       * @returns {boolean}
+       */
+      function defaultSelectedOf(option) {
+        const select = option.closest("select");
+        if (!select || select.multiple || select.size > 1) {
+          return option.defaultSelected;
+        }
+        // WebKit leaves `select.options` empty for a select that was parsed in
+        // a detached fragment, so scan the DOM directly instead.
+        const options = select.querySelectorAll("option");
+        // the last option with a selected attribute wins; otherwise the first enabled option
+        for (let i = options.length - 1; i >= 0; i--) {
+          if (options[i].defaultSelected) return options[i] === option;
+        }
+        for (let i = 0; i < options.length; i++) {
+          if (!options[i].disabled) return options[i] === option;
+        }
+        // No enabled option: browsers disagree on what a fresh parse selects
+        // (WebKit selects the first option even though it is disabled, others
+        // select nothing), so treat the first option as the effective default.
+        // Paired with the `selected !== defaultSelected` escape hatch in
+        // isUnskippable, this reads a clean all-disabled select as clean on
+        // every engine.
+        return options.length > 0 && options[0] === option;
+      }
+
+      /**
+       * The value an input reports when its value property has not been touched.
+       * Checkbox and radio inputs report "on" when the value attribute is absent,
+       * while `defaultValue` reports "" in that case.
+       *
+       * @param {HTMLInputElement} input
+       * @returns {string}
+       */
+      function defaultValueOf(input) {
+        if (input.type === "checkbox" || input.type === "radio") {
+          return input.getAttribute("value") ?? "on";
+        }
+        return input.defaultValue;
+      }
+
+      /**
+       * Computes the set of nodes that must never be skipped by `skipUnchanged`:
+       * every unskippable node (see `isUnskippable`) plus all of its ancestors,
+       * from both the old and the new content. Ancestors matter because
+       * `isEqualNode` on an ancestor can report equality while ignoring a
+       * descendant's hidden state or a template's content.
+       *
+       * @param {Element} oldRoot
+       * @param {Element} newRoot
+       * @returns {Set<Node>}
+       */
+      function createUnskippableNodeSet(oldRoot, newRoot) {
+        /** @type {Set<Node>} */
+        const set = new Set();
+        collectUnskippableNodes(oldRoot, oldRoot, set);
+        // a duck-typed parent exposes its single child as the root, to halt the upward walk
+        // @ts-ignore
+        const newStopAt = newRoot.__idiomorphRoot || newRoot;
+        collectUnskippableNodes(newRoot, newStopAt, set);
+        return set;
+      }
+
+      /**
+       * @param {Element | DocumentFragment} root the node to scan
+       * @param {Node} stopAt the topmost node the upward walk may add
+       * @param {Set<Node>} set
+       */
+      function collectUnskippableNodes(root, stopAt, set) {
+        const candidates = Array.from(
+          root.querySelectorAll?.(UNSKIPPABLE_SELECTOR) || [],
+        );
+        // querySelectorAll excludes the root, but an outerHTML morph can have a control as its root
+        if (is.element(root) && root.matches(UNSKIPPABLE_SELECTOR)) {
+          candidates.push(root);
+        }
+        for (const candidate of candidates) {
+          if (isUnskippable(candidate)) {
+            addWithAncestors(candidate, stopAt, set);
+          }
+          if (is.templateElement(candidate)) {
+            // querySelectorAll does not descend into template content, but morphChildren does
+            collectUnskippableNodes(candidate.content, candidate.content, set);
+          }
+        }
+      }
+
+      /**
+       * @param {Node} node
+       * @param {Node} stopAt
+       * @param {Set<Node>} set
+       */
+      function addWithAncestors(node, stopAt, set) {
+        /** @type {Node} */
+        let current = node;
+        // every candidate is a descendant of (or is) stopAt, so the walk always terminates there
+        while (!set.has(current)) {
+          set.add(current);
+          if (current === stopAt) break;
+          current = /** @type {Node} */ (current.parentNode);
+        }
+      }
+
+      return {
+        isUnskippable,
+        optionSelectionDiffers,
+        createUnskippableNodeSet,
+      };
+    })();
+
   //=============================================================================
   // Create Morph Context Functions
   //=============================================================================
@@ -1020,6 +1285,7 @@ var Idiomorph = (function () {
       }
 
       const doc = oldNode.ownerDocument;
+      const skipUnchanged = !!mergedConfig.skipUnchanged;
 
       return {
         target: oldNode,
@@ -1030,6 +1296,10 @@ var Idiomorph = (function () {
         ignoreActive: mergedConfig.ignoreActive,
         ignoreActiveValue: mergedConfig.ignoreActiveValue,
         restoreFocus: mergedConfig.restoreFocus,
+        skipUnchanged: skipUnchanged,
+        unskippableNodes: skipUnchanged
+          ? createUnskippableNodeSet(oldNode, newContent)
+          : new Set(),
         idMap: idMap,
         persistentIds: persistentIds,
         pantry: createPantry(doc),
@@ -1447,6 +1717,8 @@ var Idiomorph = (function () {
       inputElement: (value) => htmlElement(value, "input"),
       /** @param {Node | null | undefined} value @returns {value is HTMLOptionElement} */
       optionElement: (value) => htmlElement(value, "option"),
+      /** @param {Node | null | undefined} value @returns {value is HTMLSelectElement} */
+      selectElement: (value) => htmlElement(value, "select"),
       /** @param {Node | null | undefined} value @returns {value is HTMLTextAreaElement} */
       textAreaElement: (value) => htmlElement(value, "textarea"),
     };
diff --git a/test/index.html b/test/index.html
index f835d73..11e2671 100644
--- a/test/index.html
+++ b/test/index.html
@@ -48,6 +48,7 @@ <h2>Mocha Test Suite</h2>
     <script src="preserve-focus.js"></script>
     <script src="restore-focus.js"></script>
     <script src="retain-hidden-state.js"></script>
+    <script src="skip-unchanged.js"></script>
 
     <div id="mocha"></div>
 
diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
new file mode 100644
index 0000000..739fbca
--- /dev/null
+++ b/test/skip-unchanged.js
@@ -0,0 +1,824 @@
+describe("skipUnchanged option", function () {
+  setup();
+
+  // Records every beforeNodeMorphed/afterNodeMorphed call as [hook, oldNode.outerHTML|textContent]
+  function recordingCallbacks(calls) {
+    const label = (node) => node.outerHTML || node.textContent;
+    return {
+      beforeNodeMorphed: (oldNode) => {
+        calls.push(["before", label(oldNode)]);
+      },
+      afterNodeMorphed: (oldNode) => {
+        calls.push(["after", label(oldNode)]);
+      },
+    };
+  }
+
+  describe("off by default", function () {
+    it("still visits every node of an identical subtree", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>x</b></p></div>`, {
+        callbacks: recordingCallbacks(calls),
+      });
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p></div>"],
+        ["before", "<p><b>x</b></p>"],
+        ["before", "<b>x</b>"],
+        ["before", "x"],
+        ["after", "x"],
+        ["after", "<b>x</b>"],
+        ["after", "<p><b>x</b></p>"],
+        ["after", "<div><p><b>x</b></p></div>"],
+      ]);
+    });
+
+    it("still clears a typed input value as before", function () {
+      const initial = make(`<div><input></div>`);
+      initial.querySelector("input").value = "typed";
+      Idiomorph.morph(initial, `<div><input></div>`);
+      initial.querySelector("input").value.should.equal("");
+    });
+  });
+
+  describe("on", function () {
+    it("skips the descendants of an equal subtree but still calls both hooks on its root", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>x</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: recordingCallbacks(calls),
+      });
+      initial.outerHTML.should.equal(`<div><p><b>x</b></p></div>`);
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p></div>"],
+        ["after", "<div><p><b>x</b></p></div>"],
+      ]);
+    });
+
+    it("does not call beforeAttributeUpdated inside a skipped subtree", function () {
+      let attributeCalls = 0;
+      const initial = make(`<div><p class="a"><b id="b">x</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p class="a"><b id="b">x</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: {
+          beforeAttributeUpdated: () => {
+            attributeCalls++;
+          },
+        },
+      });
+      attributeCalls.should.equal(0);
+    });
+
+    it("still morphs a subtree whose deepest leaf changed", function () {
+      const calls = [];
+      const initial = make(`<div><p><b>x</b></p><p><b>same</b></p></div>`);
+      Idiomorph.morph(initial, `<div><p><b>y</b></p><p><b>same</b></p></div>`, {
+        skipUnchanged: true,
+        callbacks: recordingCallbacks(calls),
+      });
+      initial.outerHTML.should.equal(
+        `<div><p><b>y</b></p><p><b>same</b></p></div>`,
+      );
+      calls.should.eql([
+        ["before", "<div><p><b>x</b></p><p><b>same</b></p></div>"],
+        ["before", "<p><b>x</b></p>"],
+        ["before", "<b>x</b>"],
+        ["before", "x"],
+        ["after", "y"],
+        ["after", "<b>y</b>"],
+        ["after", "<p><b>y</b></p>"],
+        ["before", "<p><b>same</b></p>"],
+        ["after", "<p><b>same</b></p>"],
+        ["after", "<div><p><b>y</b></p><p><b>same</b></p></div>"],
+      ]);
+    });
+
+    it("still honours beforeNodeMorphed returning false on an equal root", function () {
+      const calls = [];
+      const initial = make(`<div><p>x</p></div>`);
+      Idiomorph.morph(initial, `<div><p>x</p></div>`, {
+        skipUnchanged: true,
+        callbacks: {
+          beforeNodeMorphed: (oldNode) => {
+            calls.push(oldNode.outerHTML || oldNode.textContent);
+            return false;
+          },
+          afterNodeMorphed: () => {
+            calls.push("after");
+          },
+        },
+      });
+      calls.should.eql(["<div><p>x</p></div>"]);
+    });
+
+    describe("dirty form controls are never skipped", function () {
+      // Each case morphs the control as an outerHTML root, so the pair given to
+      // morphNode is the control itself and the skip-time re-check decides.
+
+      it("text input with a typed value is reset as before", function () {
+        const input = make(`<input>`);
+        input.value = "typed";
+        Idiomorph.morph(input, `<input>`, { skipUnchanged: true });
+        input.value.should.equal("");
+      });
+
+      it("checkbox with toggled checked is reset as before", function () {
+        const input = make(`<input type="checkbox">`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input type="checkbox">`, {
+          skipUnchanged: true,
+        });
+        input.checked.should.equal(false);
+      });
+
+      it("checkbox with a programmatic value and untouched checked is synced as before", function () {
+        // setting .value on a checkbox reflects to the value attribute, so this is caught by
+        // isEqualNode rather than the predicate; kept as a regression guard for the "on" default rule
+        const input = make(`<input type="checkbox" value="a">`);
+        input.value = "b";
+        Idiomorph.morph(input, `<input type="checkbox" value="a">`, {
+          skipUnchanged: true,
+        });
+        input.value.should.equal("a");
+      });
+
+      it("radio with toggled checked is reset as before", function () {
+        const input = make(`<input type="radio">`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input type="radio">`, { skipUnchanged: true });
+        input.checked.should.equal(false);
+      });
+
+      it("text input with programmatic checked is synced as before", function () {
+        const input = make(`<input>`);
+        input.checked = true;
+        Idiomorph.morph(input, `<input>`, { skipUnchanged: true });
+        input.checked.should.equal(false);
+      });
+
+      it("textarea with a typed value is reset as before", function () {
+        const textarea = make(`<textarea>foo</textarea>`);
+        textarea.value = "typed";
+        Idiomorph.morph(textarea, `<textarea>foo</textarea>`, {
+          skipUnchanged: true,
+        });
+        textarea.value.should.equal("foo");
+      });
+
+      // The following five cases morph a <select>/<datalist> whose own markup is
+      // byte-for-byte unchanged, with the dirty state living on a child <option>.
+      // isEqualNode already reports the select/datalist pair as equal, so the
+      // ancestor is skipped before the option is ever visited by morphNode's
+      // skip-time re-check. Making these pass requires Task 3's pre-scan to mark
+      // the ancestor unskippable; un-skip them there.
+
+      it("single select with a changed option is reset as before", function () {
+        const select = make(
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        select.value = "b";
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("a");
+      });
+
+      it("single select whose selected attribute is on a later option is reset as before", function () {
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+        );
+        select.value = "a";
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("b");
+      });
+
+      it("multiple select with a changed option is reset as before", function () {
+        const select = make(
+          `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
+        );
+        // WebKit leaves select.options empty for a detached-fragment select,
+        // so address the option through the DOM instead.
+        const options = select.querySelectorAll("option");
+        options[1].selected = true;
+        Idiomorph.morph(
+          select,
+          `<select multiple><option value="a" selected>A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        options[1].selected.should.equal(false);
+      });
+
+      it("listbox (size > 1) select with a changed option is reset as before", function () {
+        const select = make(
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        select.value = "b";
+        Idiomorph.morph(
+          select,
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.selectedIndex.should.equal(-1);
+      });
+
+      it("option outside a select uses defaultSelected", function () {
+        const datalist = make(
+          `<datalist><option value="a"></option></datalist>`,
+        );
+        datalist.firstChild.selected = true;
+        Idiomorph.morph(
+          datalist,
+          `<datalist><option value="a"></option></datalist>`,
+          {
+            skipUnchanged: true,
+          },
+        );
+        datalist.firstChild.selected.should.equal(false);
+      });
+
+      // The cases above morph a container whose own markup never changes, so
+      // isUnskippable is only ever asked about the container (never the option)
+      // until Task 3's pre-scan exists. Morphing the option itself as the root
+      // exercises defaultSelectedOf's branches directly today.
+
+      it("standalone option (outside any select) is reset via defaultSelected", function () {
+        const option = make(`<option value="a"></option>`);
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="a"></option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("option inside a multiple select is reset via defaultSelected", function () {
+        const select = make(
+          `<select multiple><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[1];
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("option inside a listbox (size > 1) select is reset via defaultSelected", function () {
+        const select = make(
+          `<select size="2"><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[1];
+        option.selected = true;
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+        });
+        option.selected.should.equal(false);
+      });
+
+      it("file input is never considered dirty", function () {
+        const calls = [];
+        const input = make(`<input type="file">`);
+        Idiomorph.morph(input, `<input type="file">`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<input type="file">`],
+          ["after", `<input type="file">`],
+        ]);
+      });
+    });
+
+    describe("clean form controls are skipped", function () {
+      it("skips an attribute-less checkbox (value defaults to 'on')", function () {
+        const calls = [];
+        const initial = make(`<div><input type="checkbox"></div>`);
+        Idiomorph.morph(initial, `<div><input type="checkbox"></div>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<div><input type="checkbox"></div>`],
+          ["after", `<div><input type="checkbox"></div>`],
+        ]);
+      });
+
+      it("skips a single select whose selected attribute is on a later option", function () {
+        const calls = [];
+        const html = `<div><select><option>a</option><option selected="">b</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a single select whose first option is disabled", function () {
+        const calls = [];
+        const html = `<div><select><option disabled="">a</option><option>b</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a single select whose options are all disabled", function () {
+        const calls = [];
+        const html = `<div><select><option disabled="">a</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      it("skips a checkbox with a value attribute", function () {
+        const calls = [];
+        const initial = make(`<div><input type="checkbox" value="x"></div>`);
+        Idiomorph.morph(
+          initial,
+          `<div><input type="checkbox" value="x"></div>`,
+          {
+            skipUnchanged: true,
+            callbacks: recordingCallbacks(calls),
+          },
+        );
+        calls.should.eql([
+          ["before", `<div><input type="checkbox" value="x"></div>`],
+          ["after", `<div><input type="checkbox" value="x"></div>`],
+        ]);
+      });
+
+      it("skips a clean text input, textarea and select", function () {
+        // the first option of an untouched single-select reports selected=true but
+        // defaultSelected=false; the effective-default rule must still treat it as clean
+        const calls = [];
+        const html = `<div><input value="a"><textarea>b</textarea><select><option>c</option><option>d</option></select></div>`;
+        const initial = make(html);
+        Idiomorph.morph(initial, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+
+      // Same reasoning as the "option inside a ... select is reset" tests above:
+      // morphing the option itself as the root exercises defaultSelectedOf's
+      // single-select branches (explicit `selected`, implicit first option,
+      // disabled options) directly today.
+
+      it("skips a clean option that is explicitly selected", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected="">B</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[1];
+        Idiomorph.morph(option, `<option value="b" selected="">B</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="b" selected="">B</option>`],
+          ["after", `<option value="b" selected="">B</option>`],
+        ]);
+      });
+
+      it("skips a clean, implicitly-selected first option", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[0];
+        Idiomorph.morph(option, `<option value="a">A</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="a">A</option>`],
+          ["after", `<option value="a">A</option>`],
+        ]);
+      });
+
+      it("skips a clean option following a disabled option", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a" disabled="">A</option><option value="b">B</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[1];
+        Idiomorph.morph(option, `<option value="b">B</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="b">B</option>`],
+          ["after", `<option value="b">B</option>`],
+        ]);
+      });
+
+      it("skips a clean option when every option in the select is disabled", function () {
+        const calls = [];
+        const select = make(
+          `<select><option value="a" disabled="">A</option></select>`,
+        );
+        const option = select.querySelectorAll("option")[0];
+        Idiomorph.morph(option, `<option value="a" disabled="">A</option>`, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", `<option value="a" disabled="">A</option>`],
+          ["after", `<option value="a" disabled="">A</option>`],
+        ]);
+      });
+    });
+
+    describe("templates and the head are never skipped", function () {
+      it("re-morphs template content even though the template's outerHTML looks unchanged", function () {
+        // isEqualNode does not look inside .content, so without the special case
+        // this mutation would be missed and the skip would leave "changed" in place
+        const template = make(`<template><p>x</p></template>`);
+        template.content.querySelector("p").textContent = "changed";
+        Idiomorph.morph(template, `<template><p>x</p></template>`, {
+          skipUnchanged: true,
+        });
+        template.content.querySelector("p").textContent.should.equal("x");
+      });
+
+      it("still applies head re-append side effects when the head looks unchanged", function () {
+        // im-re-append removes and re-adds a matching head element even when it's
+        // otherwise identical; isEqualNode can't see that, so without the special
+        // case the head would be skipped and the re-append would never happen
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(
+          `<html><head><meta im-re-append="true"></head></html>`,
+          "text/html",
+        );
+        const originalMeta = doc.head.firstChild;
+        Idiomorph.morph(doc.head, `<head><meta im-re-append="true"></head>`, {
+          skipUnchanged: true,
+        });
+        doc.head.firstChild.should.not.equal(originalMeta);
+      });
+    });
+
+    describe("dirty state on the new side", function () {
+      // The dirty input inside `final` is a descendant of the pair root `<div>`,
+      // not the pair itself; this only passes once Task 3 adds the pre-scan.
+      it("morphs when the new input carries a programmatic value", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        const final = make(`<div><input value="a"></div>`);
+        final.querySelector("input").value = "b";
+        Idiomorph.morph(initial, final, { skipUnchanged: true });
+        initial.querySelector("input").value.should.equal("b");
+      });
+    });
+
+    describe("hidden state mutated by beforeNodeMorphed", function () {
+      it("honours a callback that sets the new node's value", function () {
+        const initial = make(`<input value="a">`);
+        Idiomorph.morph(initial, `<input value="a">`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode, newNode) => {
+              newNode.value = "x";
+            },
+          },
+        });
+        initial.value.should.equal("x");
+      });
+
+      it("keeps working for the #132 two-way-binding pattern (copy the typed value onto the new node)", function () {
+        // https://github.com/bigskysoftware/idiomorph/issues/132 — incoming markup has no
+        // value attribute; the app preserves user input from beforeNodeMorphed by setting
+        // the *attribute* on newNode (syncInputValue only ever consults newNode's
+        // "value" attribute, never a bare .value property assignment)
+        const initial = make(`<div><input></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<div><input></div>`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode, newNode) => {
+              if (oldNode instanceof HTMLInputElement)
+                newNode.setAttribute("value", oldNode.value);
+            },
+          },
+        });
+        initial.querySelector("input").value.should.equal("typed");
+      });
+
+      it("honours a callback that sets the old node's value (reset to the new value, as today)", function () {
+        const initial = make(`<input value="a">`);
+        Idiomorph.morph(initial, `<input value="a">`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode) => {
+              oldNode.value = "client";
+            },
+          },
+        });
+        initial.value.should.equal("a");
+      });
+
+      it("does not honour a callback that mutates a descendant of an equal root (documented limitation)", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        Idiomorph.morph(initial, `<div><input value="a"></div>`, {
+          skipUnchanged: true,
+          callbacks: {
+            beforeNodeMorphed: (oldNode) => {
+              if (oldNode.tagName === "DIV") {
+                oldNode.querySelector("input").value = "client";
+              }
+            },
+          },
+        });
+        // the div was equal and clean at skip time, so the mutated input inside it was never visited
+        initial.querySelector("input").value.should.equal("client");
+      });
+    });
+
+    describe("ancestors of unskippable nodes are not skipped", function () {
+      it("resets a typed input nested inside an otherwise equal subtree", function () {
+        const initial = make(`<div><p><input></p></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<div><p><input></p></div>`, {
+          skipUnchanged: true,
+        });
+        initial.querySelector("input").value.should.equal("");
+      });
+
+      it("resets two typed inputs under the same parent", function () {
+        const initial = make(`<div><input><input></div>`);
+        const [first, second] = initial.querySelectorAll("input");
+        first.value = "one";
+        second.value = "two";
+        Idiomorph.morph(initial, `<div><input><input></div>`, {
+          skipUnchanged: true,
+        });
+        first.value.should.equal("");
+        second.value.should.equal("");
+      });
+
+      it("morphs a template whose content differs", function () {
+        const initial = make(`<div><template><b>A</b></template></div>`);
+        Idiomorph.morph(initial, `<div><template><b>B</b></template></div>`, {
+          skipUnchanged: true,
+        });
+        initial.querySelector("template").innerHTML.should.equal(`<b>B</b>`);
+      });
+
+      it("resets a typed input inside template content", function () {
+        const initial = make(`<div><template><input></template></div>`);
+        initial.querySelector("template").content.querySelector("input").value =
+          "typed";
+        Idiomorph.morph(initial, `<div><template><input></template></div>`, {
+          skipUnchanged: true,
+        });
+        initial
+          .querySelector("template")
+          .content.querySelector("input")
+          .value.should.equal("");
+      });
+
+      it("morphs a nested template inside template content", function () {
+        const initial = make(
+          `<div><template><p><template><b>A</b></template></p></template></div>`,
+        );
+        Idiomorph.morph(
+          initial,
+          `<div><template><p><template><b>B</b></template></p></template></div>`,
+          { skipUnchanged: true },
+        );
+        initial
+          .querySelector("template")
+          .content.querySelector("template")
+          .innerHTML.should.equal(`<b>B</b>`);
+      });
+    });
+
+    describe("head handling keeps its side effects", function () {
+      it("re-appends im-re-append elements in an otherwise equal document", function () {
+        const html =
+          "<html><head><title im-re-append='true'>Foo</title></head><body></body></html>";
+        const doc = parseHTML(html);
+        const originalHead = doc.head;
+        const originalTitle = originalHead.children[0];
+        Idiomorph.morph(doc, html, { skipUnchanged: true });
+        originalHead.should.equal(doc.head);
+        originalHead.children.length.should.equal(1);
+        originalHead.children[0].outerHTML.should.equal(
+          '<title im-re-append="true">Foo</title>',
+        );
+        originalHead.children[0].should.not.equal(originalTitle);
+      });
+
+      it("skips the body of an equal document while still visiting the head", function () {
+        const calls = [];
+        const html =
+          "<html><head><title>Foo</title></head><body><p><b>x</b></p></body></html>";
+        const doc = parseHTML(html);
+        Idiomorph.morph(doc, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls
+          .filter(
+            ([, label]) => label.startsWith("<p>") || label.startsWith("<b>"),
+          )
+          .should.eql([]);
+        calls
+          .some(([, label]) => label.startsWith("<head>"))
+          .should.equal(true);
+      });
+    });
+
+    describe("root shapes", function () {
+      for (const kind of ["Text", "Comment"]) {
+        it(`morphs a ${kind.toLowerCase()} root with skipping enabled`, function () {
+          const factory = kind === "Text" ? "createTextNode" : "createComment";
+          const root = document[factory]("old");
+          getWorkArea().append(root);
+          Idiomorph.morph(root, document[factory]("new"), {
+            skipUnchanged: true,
+          });
+          root.nodeValue.should.equal("new");
+        });
+      }
+
+      it("resets a dirty input inside an equal subtree from another realm", function () {
+        const iframe = document.createElement("iframe");
+        getWorkArea().append(iframe);
+        const doc = iframe.contentDocument;
+        const html = `<div><input value="default"></div>`;
+        doc.body.innerHTML = html;
+        const root = doc.body.firstElementChild;
+        const input = root.querySelector("input");
+        input.value = "typed";
+        Idiomorph.morph(root, html, { skipUnchanged: true });
+        input.value.should.equal("default");
+      });
+
+      it("scans string content (template fragment root without matches)", function () {
+        // the dirty input sits under an equal <p>, so only the pre-scan of the parsed
+        // fragment can stop the <p> from being skipped
+        const initial = make(`<div><p><input></p></div>`);
+        initial.querySelector("input").value = "typed";
+        Idiomorph.morph(initial, `<p><input></p>`, {
+          morphStyle: "innerHTML",
+          skipUnchanged: true,
+        });
+        initial.querySelector("input").value.should.equal("");
+      });
+
+      it("scans a new node that has siblings (SlicedParentNode root)", function () {
+        const initial = make(`<div><input value="a"></div>`);
+        const wrapper = make(
+          `<section><div><input value="a"></div><span></span></section>`,
+        );
+        const final = wrapper.firstElementChild;
+        final.querySelector("input").value = "b";
+        Idiomorph.morph(initial, final, { skipUnchanged: true });
+        initial.querySelector("input").value.should.equal("b");
+      });
+
+      it("checks the old root itself when it is a dirty control (outerHTML morph)", function () {
+        // the pre-scan must include the root: querySelectorAll excludes it
+        const attributeCalls = [];
+        const parent = make(`<div><input></div>`);
+        const input = parent.querySelector("input");
+        input.value = "typed";
+        Idiomorph.morph(input, `<input>`, {
+          skipUnchanged: true,
+          callbacks: {
+            // neutralise the skip-time re-check so only the pre-scan can catch this
+            beforeNodeMorphed: (oldNode) => {
+              if (oldNode.tagName === "INPUT") oldNode.value = "";
+            },
+            beforeAttributeUpdated: (name, node, type) => {
+              attributeCalls.push([name, type]);
+            },
+          },
+        });
+        // syncInputValue ran (it asks before removing the value attribute); a skip would never ask
+        attributeCalls.should.eql([["value", "remove"]]);
+      });
+    });
+
+    describe("interplay with other options", function () {
+      it("ignoreActive still wins over skipUnchanged", function () {
+        getWorkArea().append(make(`<div><input id="active" class="a"></div>`));
+        const input = document.getElementById("active");
+        input.focus();
+        input.value = "typed";
+        Idiomorph.morph(
+          getWorkArea(),
+          `<div><input id="active" class="b"></div>`,
+          { morphStyle: "innerHTML", skipUnchanged: true, ignoreActive: true },
+        );
+        input.getAttribute("class").should.equal("a");
+        input.value.should.equal("typed");
+      });
+    });
+
+    describe("sibling options coupled through implicit selection", function () {
+      it("selects the first option when a later option's explicit selection is removed", function () {
+        // neither option's own markup changes match isUnskippable's per-node check: the
+        // first option was never dirty, and the second option's own selectedness (now
+        // false either way) matches its own new-side default too. Only comparing the
+        // live `selected` property across the pair reveals that the first option's
+        // effective selectedness has changed as a side effect of the second option's
+        // attribute being removed.
+        const select = make(
+          `<select><option value="a">A</option><option value="b" selected>B</option></select>`,
+        );
+        Idiomorph.morph(
+          select,
+          `<select><option value="a">A</option><option value="b">B</option></select>`,
+          { skipUnchanged: true },
+        );
+        select.value.should.equal("a");
+        select.outerHTML.should.equal(
+          `<select><option value="a" selected="">A</option><option value="b">B</option></select>`,
+        );
+      });
+    });
+
+    describe("a cleared single-select is backed at the select level", function () {
+      // A single-select whose selection was cleared (selectedIndex = -1) has no
+      // option whose own `selected` differs from its own default, so the
+      // per-option check cannot see it; only comparing the select's live
+      // selectedIndex against the effective parse default reveals the dirtiness.
+      // The invariant: morphing with skipUnchanged on must produce the same DOM
+      // as morphing with it off, which re-applies the implicit selection.
+      // Built with DOM APIs so the fixtures are portable to WebKit (which
+      // leaves select.options empty for markup parsed in a detached fragment).
+      function buildDivSelect(specs) {
+        const div = document.createElement("div");
+        const select = document.createElement("select");
+        for (const spec of specs) {
+          const option = document.createElement("option");
+          option.textContent = spec.text;
+          if (spec.disabled) option.disabled = true;
+          if (spec.selectedAttr) option.setAttribute("selected", "");
+          select.appendChild(option);
+        }
+        div.appendChild(select);
+        return div;
+      }
+
+      it("re-selects the implicit first option of a cleared single-select", function () {
+        const div = buildDivSelect([{ text: "a" }, { text: "b" }]);
+        const html = div.outerHTML;
+        div.querySelector("select").selectedIndex = -1;
+        Idiomorph.morph(div, html, { skipUnchanged: true });
+        div.querySelector("select").selectedIndex.should.equal(0);
+      });
+
+      it("re-selects the first enabled option of a cleared single-select whose first option is disabled", function () {
+        const div = buildDivSelect([
+          { text: "a", disabled: true },
+          { text: "b" },
+        ]);
+        const html = div.outerHTML;
+        div.querySelector("select").selectedIndex = -1;
+        Idiomorph.morph(div, html, { skipUnchanged: true });
+        div.querySelector("select").selectedIndex.should.equal(1);
+      });
+
+      it("still skips a genuinely clean single-select", function () {
+        const calls = [];
+        const div = buildDivSelect([{ text: "a" }, { text: "b" }]);
+        const html = div.outerHTML;
+        Idiomorph.morph(div, html, {
+          skipUnchanged: true,
+          callbacks: recordingCallbacks(calls),
+        });
+        calls.should.eql([
+          ["before", html],
+          ["after", html],
+        ]);
+      });
+    });
+  });
+});

From ae65fbc314f0dfde5b086c2d3b8c1bb95da4807e Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Sat, 5 Sep 2026 18:31:29 +0100
Subject: [PATCH 2/3] Add benchmarks and morph options for subtree skipping

---
 PERFORMANCE.md                          |   9 +
 perf/benchmarks/backlogs.new.html       | 947 ++++++++++++++++++++++++
 perf/benchmarks/backlogs.old.html       | 947 ++++++++++++++++++++++++
 perf/benchmarks/deep-last-leaf.new.html | 862 +++++++++++++++++++++
 perf/benchmarks/deep-last-leaf.old.html | 862 +++++++++++++++++++++
 perf/generate-deep-last-leaf.js         |  32 +
 perf/runner.html                        |   3 +-
 perf/runner.js                          |  14 +-
 8 files changed, 3673 insertions(+), 3 deletions(-)
 create mode 100644 perf/benchmarks/backlogs.new.html
 create mode 100644 perf/benchmarks/backlogs.old.html
 create mode 100644 perf/benchmarks/deep-last-leaf.new.html
 create mode 100644 perf/benchmarks/deep-last-leaf.old.html
 create mode 100644 perf/generate-deep-last-leaf.js

diff --git a/PERFORMANCE.md b/PERFORMANCE.md
index 9ad3326..3f01f01 100644
--- a/PERFORMANCE.md
+++ b/PERFORMANCE.md
@@ -13,6 +13,7 @@ npm run perf [versus=morphdom] [benchmarks...]
 ### Arguments
 * The optional `versus` argument can be used to compare with morphdom (the default), previous Idiomorph releases specified by the git release tag, e.g. `v0.3.0`, or a path to a local `.js` file that defines `Idiomorph`.
 * The optional `benchmarks` argument can be used to run specific benchmarks, defaulting to all of them.
+* The optional `--options='<json>'` argument passes a config object to `Idiomorph.morph` in both runs, e.g. `--options='{"skipUnchanged":true}'`. A previous version that does not know the option ignores it, which makes this the way to measure an opt-in option against the code it replaces. Pass it after `--` so npm does not swallow it.
 
 Examples:
 Running only the `table` and `checkboxes` benchmarks against morphdom:
@@ -36,6 +37,14 @@ cp src/idiomorph.js tmp/before.js  # then edit src/idiomorph.js
 npm run perf tmp/before.js
 ```
 
+Measuring an opt-in option against the current code:
+```bash
+cp src/idiomorph.js tmp/before.js
+npm run perf -- tmp/before.js --options='{"skipUnchanged":true}'
+```
+
 ## Adding Benchmarks
 You can add more benchmarks by creating new `benchmark-name.old.html` and `benchmark-name.new.html` files in the `perf/benchmarks` directory, containing the starting and final morph HTML respectively.
 
+`deep-last-leaf` is generated by `node perf/generate-deep-last-leaf.js` and is the worst case among the committed benchmarks for the `skipUnchanged` option: every section changes, but only in its last and deepest text node, so every `isEqualNode` call walks a whole subtree before failing. Its equal filler siblings at each level are still individually skippable, so in practice it measures near-parity rather than a large regression.
+
diff --git a/perf/benchmarks/backlogs.new.html b/perf/benchmarks/backlogs.new.html
new file mode 100644
index 0000000..2acdf31
--- /dev/null
+++ b/perf/benchmarks/backlogs.new.html
@@ -0,0 +1,947 @@
+<!-- Trimmed from a real OpenProject backlogs_container render; new = old with one card moved between lists (synthesised, not a server re-render). Session tokens scrubbed. -->
+<turbo-frame id="backlogs_container">
+  <div class="op-sprint-planning-container">
+    <div
+      id="owner_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-backlog-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Backlog<span
+              title="283"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >283</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="backlog_bucket-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/buckets/new_dialog"
+              aria-label="New backlog bucket"
+              data-controller="async-dialog"
+              data-test-selector="op-backlog-buckets--new-backlog-bucket-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Backlog bucket</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-bucket-component-7">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="backlog_bucket"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="7"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Foobar"
+              data-test-selector="backlog-bucket-7"
+              id="backlog_bucket_7"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Foobar
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="2 work packages"
+                        aria-live="polite"
+                        title="2"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >2</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="backlog_bucket_7_list"
+                data-border-box-list-target="list"
+                aria-labelledby="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_100"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="100"
+                  data-sortable-lists--item-label-value="Feature: Story 0 (MYPN2-1)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-1"
+                  data-test-selector="work-package-100"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="100"
+                    data-backlogs--work-package-display-id-value="MYPN2-1"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-1"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-1"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 0 (MYPN2-1)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 0"
+                            href="/projects/MYPN2/work_packages/MYPN2-1"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-1</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_100_menu-button"
+                          popovertarget="work_package_100_menu-overlay"
+                          aria-controls="work_package_100_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-b83e2f5b-334f-4ac2-af6f-2be3783b6467"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-1"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 0</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Backlog bucket is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        Drag items here to add them
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+
+        <section id="backlogs-inbox-component-21"></section>
+      </turbo-frame>
+    </div>
+    <div
+      id="sprint_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-sprints-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Sprints<span
+              data-test-selector="op-sprints--total-counter"
+              title="17"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >17</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="sprint-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/sprints/new_dialog"
+              aria-label="New sprint"
+              data-controller="async-dialog"
+              data-test-selector="op-sprints--new-sprint-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Sprint</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-sprint-component-18">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="sprint"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="18"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Sprint 1"
+              data-test-selector="sprint-18"
+              id="sprint_18"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="sprint_18_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Sprint 1
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="8 work packages"
+                        aria-live="polite"
+                        title="8"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >8</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: description"
+                    data-view-component="true"
+                    class="op-border-box-list-header--description"
+                  >
+                    <span
+                      data-view-component="true"
+                      class="row-gap-2 d-flex flex-column color-fg-muted"
+                    >
+                      <div
+                        data-justify="start"
+                        data-direction="horizontal"
+                        data-align="center"
+                        data-wrap="nowrap"
+                        data-padding="none"
+                        data-view-component="true"
+                        class="Stack"
+                      >
+                        <span
+                          data-view-component="true"
+                          class="Label text-bold color-bg-default"
+                          >In planning</span
+                        >
+
+                        <span
+                          aria-live="polite"
+                          data-view-component="true"
+                          class="velocity"
+                        >
+                          0&nbsp;points
+                        </span>
+                        <span
+                          role="group"
+                          data-view-component="true"
+                          class="ml-auto tmp-ml-auto mr-2 tmp-mr-2"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-calendar mr-1 tmp-mr-1"
+                          >
+                            <path
+                              d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0M2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25"
+                            ></path>
+                          </svg>
+                          <time datetime="2026-04-13">04/13/2026</time
+                          >&nbsp;–&nbsp;<time datetime="2026-04-27"
+                            >04/27/2026</time
+                          >
+                        </span>
+                      </div></span
+                    >
+                  </div>
+                  <div
+                    style="grid-area: actions"
+                    data-view-component="true"
+                    class="op-border-box-list-header--actions"
+                  >
+                    <a
+                      id="sprint_18_start_button"
+                      href="/projects/MYPN2/backlogs/sprints/18/start"
+                      data-turbo-method="post"
+                      data-view-component="true"
+                      class="Button--secondary Button--medium Button"
+                    >
+                      <span class="Button-content">
+                        <span class="Button-visual Button-leadingVisual">
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-rocket"
+                          >
+                            <path
+                              d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.75 8.75 0 0 1-2.564 6.186l-.458.459q-.472.471-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.75.75 0 0 1-1.11-.418l-.954-3.102a1 1 0 0 1-.145-.125L3.754 9.816a1 1 0 0 1-.124-.145L.528 8.717a.75.75 0 0 1-.418-1.11l1.71-2.774A1.75 1.75 0 0 1 3.31 4h3.204q.433-.508.904-.979l.459-.458A8.75 8.75 0 0 1 14.064 0M8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.25 7.25 0 0 0-5.125 2.123M3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.23.23 0 0 1-.201-.064.23.23 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12m6.94-3.935q-.132.09-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766q.087-.135.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"
+                            ></path>
+                          </svg>
+                        </span>
+                        <span class="Button-label">Start sprint</span>
+                      </span>
+                    </a>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="sprint_18_list"
+                data-border-box-list-target="list"
+                aria-labelledby="sprint_18_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_104"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="104"
+                  data-sortable-lists--item-label-value="Feature: Story 4 (MYPN2-5)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-5"
+                  data-test-selector="work-package-104"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="104"
+                    data-backlogs--work-package-display-id-value="MYPN2-5"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-5"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-5"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 4 (MYPN2-5)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 4"
+                            href="/projects/MYPN2/work_packages/MYPN2-5"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-5</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_104_menu-button"
+                          popovertarget="work_package_104_menu-overlay"
+                          aria-controls="work_package_104_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-6ed074da-2170-4618-ba12-470a1254cd16"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-5"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 4</a
+                      >
+                    </div>
+                  </article>
+                </li>
+                <li
+                  id="work_package_105"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="105"
+                  data-sortable-lists--item-label-value="Feature: Story 5 (MYPN2-6)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-6"
+                  data-test-selector="work-package-105"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="105"
+                    data-backlogs--work-package-display-id-value="MYPN2-6"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-6"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-6"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 5 (MYPN2-6)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 5"
+                            href="/projects/MYPN2/work_packages/MYPN2-6"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-6</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_105_menu-button"
+                          popovertarget="work_package_105_menu-overlay"
+                          aria-controls="work_package_105_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-874b9b93-09fe-45af-8e50-74545b4a362a"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-6"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 5</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Sprint 1 is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        No items planned yet. Drag items here to add them.
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+      </turbo-frame>
+    </div>
+  </div>
+</turbo-frame>
diff --git a/perf/benchmarks/backlogs.old.html b/perf/benchmarks/backlogs.old.html
new file mode 100644
index 0000000..f9ba3b0
--- /dev/null
+++ b/perf/benchmarks/backlogs.old.html
@@ -0,0 +1,947 @@
+<!-- Trimmed from a real OpenProject backlogs_container render; new = old with one card moved between lists (synthesised, not a server re-render). Session tokens scrubbed. -->
+<turbo-frame id="backlogs_container">
+  <div class="op-sprint-planning-container">
+    <div
+      id="owner_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-backlog-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Backlog<span
+              title="283"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >283</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="backlog_bucket-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/buckets/new_dialog"
+              aria-label="New backlog bucket"
+              data-controller="async-dialog"
+              data-test-selector="op-backlog-buckets--new-backlog-bucket-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Backlog bucket</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-bucket-component-7">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="backlog_bucket"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="7"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Foobar"
+              data-test-selector="backlog-bucket-7"
+              id="backlog_bucket_7"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Foobar
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="2 work packages"
+                        aria-live="polite"
+                        title="2"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >2</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="backlog_bucket_7_list"
+                data-border-box-list-target="list"
+                aria-labelledby="backlog_bucket_7_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_104"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="104"
+                  data-sortable-lists--item-label-value="Feature: Story 4 (MYPN2-5)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-5"
+                  data-test-selector="work-package-104"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="104"
+                    data-backlogs--work-package-display-id-value="MYPN2-5"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-5"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-5"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 4 (MYPN2-5)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 4"
+                            href="/projects/MYPN2/work_packages/MYPN2-5"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-5</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_104_menu-button"
+                          popovertarget="work_package_104_menu-overlay"
+                          aria-controls="work_package_104_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-6ed074da-2170-4618-ba12-470a1254cd16"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-5"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 4</a
+                      >
+                    </div>
+                  </article>
+                </li>
+                <li
+                  id="work_package_100"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="100"
+                  data-sortable-lists--item-label-value="Feature: Story 0 (MYPN2-1)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-1"
+                  data-test-selector="work-package-100"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="100"
+                    data-backlogs--work-package-display-id-value="MYPN2-1"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-1"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-1"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 0 (MYPN2-1)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 0"
+                            href="/projects/MYPN2/work_packages/MYPN2-1"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-1</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_100_menu-button"
+                          popovertarget="work_package_100_menu-overlay"
+                          aria-controls="work_package_100_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-b83e2f5b-334f-4ac2-af6f-2be3783b6467"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-1"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 0</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Backlog bucket is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        Drag items here to add them
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+
+        <section id="backlogs-inbox-component-21"></section>
+      </turbo-frame>
+    </div>
+    <div
+      id="sprint_backlogs_container"
+      class="op-sprint-planning-lists"
+      data-controller="sortable-lists--scrollable"
+    >
+      <turbo-frame
+        id="backlogs-sprints-component-21"
+        refresh="morph"
+        style="display: contents"
+      >
+        <div
+          data-view-component="true"
+          class="Subhead border-bottom-0 pb-0 tmp-pb-0 mb-0 tmp-mb-0"
+        >
+          <h3
+            data-view-component="true"
+            class="gap-2 Subhead-heading Subhead-heading--medium text-bold d-inline-flex flex-items-center"
+          >
+            Sprints<span
+              data-test-selector="op-sprints--total-counter"
+              title="17"
+              data-view-component="true"
+              class="Counter Counter--primary"
+              >17</span
+            >
+          </h3>
+        </div>
+
+        <div
+          data-view-component="true"
+          class="flex-justify-between flex-items-center d-flex flex-row"
+        >
+          <div data-view-component="true">
+            <form
+              id="sprint-clear-form"
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+            <form
+              data-turbo-frame="backlogs_container"
+              data-turbo-action="advance"
+              action="/projects/MYPN2/backlogs/backlog"
+              accept-charset="UTF-8"
+              method="get"
+            ></form>
+          </div>
+          <div data-view-component="true">
+            <a
+              href="/projects/MYPN2/backlogs/sprints/new_dialog"
+              aria-label="New sprint"
+              data-controller="async-dialog"
+              data-test-selector="op-sprints--new-sprint-button"
+              data-view-component="true"
+              class="Button--secondary Button--medium Button"
+            >
+              <span class="Button-content">
+                <span class="Button-visual Button-leadingVisual">
+                  <svg
+                    aria-hidden="true"
+                    data-component="Octicon"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    version="1.1"
+                    width="16"
+                    data-view-component="true"
+                    class="octicon octicon-plus"
+                  >
+                    <path
+                      d="M7.75 2a.75.75 0 0 1 .75.75V7h4.25a.75.75 0 0 1 0 1.5H8.5v4.25a.75.75 0 0 1-1.5 0V8.5H2.75a.75.75 0 0 1 0-1.5H7V2.75A.75.75 0 0 1 7.75 2"
+                    ></path>
+                  </svg>
+                </span>
+                <span class="Button-label">Sprint</span>
+              </span>
+            </a>
+          </div>
+        </div>
+
+        <section id="backlogs-sprint-component-18">
+          <div data-controller="border-box-list" data-view-component="true">
+            <div
+              data-controller="sortable-lists--list"
+              data-sortable-lists--list-type-value="sprint"
+              data-sortable-lists--list-accepted-type-value="work_package"
+              data-sortable-lists--list-id-value="18"
+              data-sortable-lists--list-drop-position-value="start"
+              data-sortable-lists--list-name-value="Sprint 1"
+              data-test-selector="sprint-18"
+              id="sprint_18"
+              data-view-component="true"
+              class="Box Box--condensed op-border-box-list op-border-box-list_transparent op-border-box-list_header-padding-condensed"
+            >
+              <div
+                id="sprint_18_header"
+                data-view-component="true"
+                class="Box-header"
+              >
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-header"
+                >
+                  <div
+                    style="grid-area: heading"
+                    data-view-component="true"
+                    class="op-border-box-list-header--heading"
+                  >
+                    <div
+                      data-view-component="true"
+                      class="op-border-box-list-header--heading-line"
+                    >
+                      <h4
+                        data-view-component="true"
+                        class="Truncate Box-title f4"
+                      >
+                        <span data-view-component="true" class="Truncate-text">
+                          Sprint 1
+                        </span>
+                      </h4>
+                      <span
+                        aria-label="8 work packages"
+                        aria-live="polite"
+                        title="8"
+                        data-view-component="true"
+                        class="Counter Counter--secondary"
+                        >8</span
+                      >
+                    </div>
+                  </div>
+                  <div
+                    style="grid-area: description"
+                    data-view-component="true"
+                    class="op-border-box-list-header--description"
+                  >
+                    <span
+                      data-view-component="true"
+                      class="row-gap-2 d-flex flex-column color-fg-muted"
+                    >
+                      <div
+                        data-justify="start"
+                        data-direction="horizontal"
+                        data-align="center"
+                        data-wrap="nowrap"
+                        data-padding="none"
+                        data-view-component="true"
+                        class="Stack"
+                      >
+                        <span
+                          data-view-component="true"
+                          class="Label text-bold color-bg-default"
+                          >In planning</span
+                        >
+
+                        <span
+                          aria-live="polite"
+                          data-view-component="true"
+                          class="velocity"
+                        >
+                          0&nbsp;points
+                        </span>
+                        <span
+                          role="group"
+                          data-view-component="true"
+                          class="ml-auto tmp-ml-auto mr-2 tmp-mr-2"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-calendar mr-1 tmp-mr-1"
+                          >
+                            <path
+                              d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0M2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25"
+                            ></path>
+                          </svg>
+                          <time datetime="2026-04-13">04/13/2026</time
+                          >&nbsp;–&nbsp;<time datetime="2026-04-27"
+                            >04/27/2026</time
+                          >
+                        </span>
+                      </div></span
+                    >
+                  </div>
+                  <div
+                    style="grid-area: actions"
+                    data-view-component="true"
+                    class="op-border-box-list-header--actions"
+                  >
+                    <a
+                      id="sprint_18_start_button"
+                      href="/projects/MYPN2/backlogs/sprints/18/start"
+                      data-turbo-method="post"
+                      data-view-component="true"
+                      class="Button--secondary Button--medium Button"
+                    >
+                      <span class="Button-content">
+                        <span class="Button-visual Button-leadingVisual">
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-rocket"
+                          >
+                            <path
+                              d="M14.064 0h.186C15.216 0 16 .784 16 1.75v.186a8.75 8.75 0 0 1-2.564 6.186l-.458.459q-.472.471-.979.904v3.207c0 .608-.315 1.172-.833 1.49l-2.774 1.707a.75.75 0 0 1-1.11-.418l-.954-3.102a1 1 0 0 1-.145-.125L3.754 9.816a1 1 0 0 1-.124-.145L.528 8.717a.75.75 0 0 1-.418-1.11l1.71-2.774A1.75 1.75 0 0 1 3.31 4h3.204q.433-.508.904-.979l.459-.458A8.75 8.75 0 0 1 14.064 0M8.938 3.623h-.002l-.458.458c-.76.76-1.437 1.598-2.02 2.5l-1.5 2.317 2.143 2.143 2.317-1.5c.902-.583 1.74-1.26 2.499-2.02l.459-.458a7.25 7.25 0 0 0 2.123-5.127V1.75a.25.25 0 0 0-.25-.25h-.186a7.25 7.25 0 0 0-5.125 2.123M3.56 14.56c-.732.732-2.334 1.045-3.005 1.148a.23.23 0 0 1-.201-.064.23.23 0 0 1-.064-.201c.103-.671.416-2.273 1.15-3.003a1.502 1.502 0 1 1 2.12 2.12m6.94-3.935q-.132.09-.266.175l-2.35 1.521.548 1.783 1.949-1.2a.25.25 0 0 0 .119-.213ZM3.678 8.116 5.2 5.766q.087-.135.176-.266H3.309a.25.25 0 0 0-.213.119l-1.2 1.95ZM12 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0"
+                            ></path>
+                          </svg>
+                        </span>
+                        <span class="Button-label">Start sprint</span>
+                      </span>
+                    </a>
+                  </div>
+                  <div
+                    style="grid-area: menu"
+                    data-view-component="true"
+                    class="op-border-box-list-header--menu"
+                  ></div>
+                </div>
+              </div>
+
+              <ul
+                id="sprint_18_list"
+                data-border-box-list-target="list"
+                aria-labelledby="sprint_18_header"
+                data-view-component="true"
+                class="Box-list"
+              >
+                <li
+                  id="work_package_105"
+                  data-controller="sortable-lists--item"
+                  data-sortable-lists--item-id-value="105"
+                  data-sortable-lists--item-label-value="Feature: Story 5 (MYPN2-6)"
+                  data-sortable-lists--item-type-value="work_package"
+                  data-sortable-lists--item-confined-value="false"
+                  data-sortable-lists--item-external-url-value="http://localhost:3000/work_packages/MYPN2-6"
+                  data-test-selector="work-package-105"
+                  draggable="true"
+                  data-view-component="true"
+                  class="Box-row"
+                >
+                  <article
+                    tabindex="0"
+                    data-story="true"
+                    data-controller="backlogs--work-package contextual-action-menu"
+                    data-backlogs--work-package-id-value="105"
+                    data-backlogs--work-package-display-id-value="MYPN2-6"
+                    data-backlogs--work-package-split-url-value="/projects/MYPN2/backlogs/backlog/details/MYPN2-6"
+                    data-backlogs--work-package-full-url-value="/work_packages/MYPN2-6"
+                    data-sortable-lists--item-target="preview handle"
+                    aria-keyshortcuts="Enter Shift+F10"
+                    aria-label="Feature: Story 5 (MYPN2-6)"
+                    data-view-component="true"
+                    class="Box-card Box-card--clickable Box-card--draggable op-work-package-card_with-menu op-work-package-card_with-metric op-work-package-card"
+                  >
+                    <div
+                      style="grid-area: info_line"
+                      data-view-component="true"
+                      class="op-work-package-card--info_line"
+                    >
+                      <div
+                        data-view-component="true"
+                        class="op-wp-info-line flex-nowrap flex-items-center overflow-hidden d-flex flex-row"
+                      >
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--type mr-2 tmp-mr-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="__hl_inline_type_4 text-small"
+                            >FEATURE</span
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--id"
+                        >
+                          <a
+                            title="Story 5"
+                            href="/projects/MYPN2/work_packages/MYPN2-6"
+                            data-view-component="true"
+                            class="Link text-small color-fg-muted"
+                            >MYPN2-6</a
+                          >
+                        </div>
+                        <div
+                          data-view-component="true"
+                          class="op-wp-info-line--status ml-2 tmp-ml-2"
+                        >
+                          <span
+                            data-view-component="true"
+                            class="Label op-status-badge Label--secondary Label--inline"
+                          >
+                            <span
+                              data-view-component="true"
+                              class="op-status-badge--name"
+                              >New</span
+                            ></span
+                          >
+                        </div>
+                      </div>
+                    </div>
+                    <div
+                      style="grid-area: actions"
+                      data-view-component="true"
+                      class="op-work-package-card--actions"
+                    >
+                      <span class="op-work-package-card--metric">
+                        <span
+                          data-view-component="true"
+                          class="color-fg-subtle position-relative"
+                        >
+                          <span aria-hidden="true">0</span>
+                          <span class="sr-only">0 story points</span>
+                        </span></span
+                      >
+
+                      <span
+                        data-view-component="true"
+                        class="op-work-package-card--priority __hl_inline_priority_8 __hl_inline__small_dot no-wrap"
+                      >
+                        <span class="op-work-package-card--priority-name"
+                          >Normal</span
+                        >
+                      </span>
+
+                      <action-menu
+                        data-select-variant="none"
+                        data-view-component="true"
+                        class="op-work-package-card--menu hide-when-print"
+                      >
+                        <button
+                          id="work_package_105_menu-button"
+                          popovertarget="work_package_105_menu-overlay"
+                          aria-controls="work_package_105_menu-list"
+                          aria-haspopup="true"
+                          aria-labelledby="tooltip-874b9b93-09fe-45af-8e50-74545b4a362a"
+                          type="button"
+                          data-view-component="true"
+                          class="Button Button--iconOnly Button--invisible Button--medium"
+                        >
+                          <svg
+                            aria-hidden="true"
+                            data-component="Octicon"
+                            height="16"
+                            viewBox="0 0 16 16"
+                            version="1.1"
+                            width="16"
+                            data-view-component="true"
+                            class="octicon octicon-kebab-horizontal Button-visual"
+                          >
+                            <path
+                              d="M8 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M1.5 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"
+                            ></path>
+                          </svg>
+                        </button>
+                      </action-menu>
+                    </div>
+                    <div
+                      style="grid-area: subject"
+                      data-view-component="true"
+                      class="op-work-package-card--subject"
+                    >
+                      <a
+                        draggable="false"
+                        href="/work_packages/MYPN2-6"
+                        data-view-component="true"
+                        class="Link text-semibold"
+                        >Story 5</a
+                      >
+                    </div>
+                  </article>
+                </li>
+              </ul>
+            </div>
+            <template data-border-box-list-target="emptyStateTemplate">
+              <li class="Box-row" data-empty-list-item="true">
+                <!-- BEGIN app/components/open_project/common/border_box_list_component/empty_state.html.erb
+-->
+                <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                <div
+                  data-view-component="true"
+                  class="op-border-box-list-empty-state"
+                >
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb
+-->
+                  <div class="blankslate-container">
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <div
+                      role="status"
+                      aria-live="polite"
+                      data-view-component="true"
+                      class="blankslate"
+                    >
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <h4 data-view-component="true" class="blankslate-heading">
+                        Sprint 1 is empty
+                      </h4>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/heading.rb -->
+                      <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                      <p
+                        data-view-component="true"
+                        class="blankslate-description"
+                      >
+                        No items planned yet. Drag items here to add them.
+                      </p>
+                      <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    </div>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/blankslate.html.erb -->
+
+                  <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                  <div
+                    aria-hidden="true"
+                    data-view-component="true"
+                    class="op-border-box-list-empty-state--drop-overlay"
+                  >
+                    <!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb --><!-- BEGIN .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb -->
+                    <p data-view-component="true" class="color-fg-muted f4">
+                      Drop here to add this item
+                    </p>
+                    <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/beta/text.rb -->
+                  </div>
+                  <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb -->
+                </div>
+                <!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/base_component.rb --><!-- END .bundle/gems/ruby/4.0.0/gems/openproject-primer_view_components-0.91.1/app/components/primer/box.rb --><!-- END app/components/open_project/common/border_box_list_component/empty_state.html.erb -->
+              </li>
+            </template>
+          </div>
+        </section>
+      </turbo-frame>
+    </div>
+  </div>
+</turbo-frame>
diff --git a/perf/benchmarks/deep-last-leaf.new.html b/perf/benchmarks/deep-last-leaf.new.html
new file mode 100644
index 0000000..fb422d9
--- /dev/null
+++ b/perf/benchmarks/deep-last-leaf.new.html
@@ -0,0 +1,862 @@
+<main id="root">
+  <section id="section-0">
+    <div class="level-1">
+      <p class="filler">s0d1i0</p>
+      <p class="filler">s0d1i1</p>
+      <div class="level-2">
+        <p class="filler">s0d2i0</p>
+        <p class="filler">s0d2i1</p>
+        <div class="level-3">
+          <p class="filler">s0d3i0</p>
+          <p class="filler">s0d3i1</p>
+          <div class="level-4">
+            <p class="filler">s0d4i0</p>
+            <p class="filler">s0d4i1</p>
+            <div class="level-5">
+              <p class="filler">s0d5i0</p>
+              <p class="filler">s0d5i1</p>
+              <div class="level-6">
+                <p class="filler">s0d6i0</p>
+                <p class="filler">s0d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s0d7i0</p>
+                  <p class="filler">s0d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s0d8i0</p>
+                    <p class="filler">s0d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s0d9i0</p>
+                      <p class="filler">s0d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s0d10i0</p>
+                        <p class="filler">s0d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-1">
+    <div class="level-1">
+      <p class="filler">s1d1i0</p>
+      <p class="filler">s1d1i1</p>
+      <div class="level-2">
+        <p class="filler">s1d2i0</p>
+        <p class="filler">s1d2i1</p>
+        <div class="level-3">
+          <p class="filler">s1d3i0</p>
+          <p class="filler">s1d3i1</p>
+          <div class="level-4">
+            <p class="filler">s1d4i0</p>
+            <p class="filler">s1d4i1</p>
+            <div class="level-5">
+              <p class="filler">s1d5i0</p>
+              <p class="filler">s1d5i1</p>
+              <div class="level-6">
+                <p class="filler">s1d6i0</p>
+                <p class="filler">s1d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s1d7i0</p>
+                  <p class="filler">s1d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s1d8i0</p>
+                    <p class="filler">s1d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s1d9i0</p>
+                      <p class="filler">s1d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s1d10i0</p>
+                        <p class="filler">s1d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-2">
+    <div class="level-1">
+      <p class="filler">s2d1i0</p>
+      <p class="filler">s2d1i1</p>
+      <div class="level-2">
+        <p class="filler">s2d2i0</p>
+        <p class="filler">s2d2i1</p>
+        <div class="level-3">
+          <p class="filler">s2d3i0</p>
+          <p class="filler">s2d3i1</p>
+          <div class="level-4">
+            <p class="filler">s2d4i0</p>
+            <p class="filler">s2d4i1</p>
+            <div class="level-5">
+              <p class="filler">s2d5i0</p>
+              <p class="filler">s2d5i1</p>
+              <div class="level-6">
+                <p class="filler">s2d6i0</p>
+                <p class="filler">s2d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s2d7i0</p>
+                  <p class="filler">s2d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s2d8i0</p>
+                    <p class="filler">s2d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s2d9i0</p>
+                      <p class="filler">s2d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s2d10i0</p>
+                        <p class="filler">s2d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-3">
+    <div class="level-1">
+      <p class="filler">s3d1i0</p>
+      <p class="filler">s3d1i1</p>
+      <div class="level-2">
+        <p class="filler">s3d2i0</p>
+        <p class="filler">s3d2i1</p>
+        <div class="level-3">
+          <p class="filler">s3d3i0</p>
+          <p class="filler">s3d3i1</p>
+          <div class="level-4">
+            <p class="filler">s3d4i0</p>
+            <p class="filler">s3d4i1</p>
+            <div class="level-5">
+              <p class="filler">s3d5i0</p>
+              <p class="filler">s3d5i1</p>
+              <div class="level-6">
+                <p class="filler">s3d6i0</p>
+                <p class="filler">s3d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s3d7i0</p>
+                  <p class="filler">s3d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s3d8i0</p>
+                    <p class="filler">s3d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s3d9i0</p>
+                      <p class="filler">s3d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s3d10i0</p>
+                        <p class="filler">s3d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-4">
+    <div class="level-1">
+      <p class="filler">s4d1i0</p>
+      <p class="filler">s4d1i1</p>
+      <div class="level-2">
+        <p class="filler">s4d2i0</p>
+        <p class="filler">s4d2i1</p>
+        <div class="level-3">
+          <p class="filler">s4d3i0</p>
+          <p class="filler">s4d3i1</p>
+          <div class="level-4">
+            <p class="filler">s4d4i0</p>
+            <p class="filler">s4d4i1</p>
+            <div class="level-5">
+              <p class="filler">s4d5i0</p>
+              <p class="filler">s4d5i1</p>
+              <div class="level-6">
+                <p class="filler">s4d6i0</p>
+                <p class="filler">s4d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s4d7i0</p>
+                  <p class="filler">s4d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s4d8i0</p>
+                    <p class="filler">s4d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s4d9i0</p>
+                      <p class="filler">s4d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s4d10i0</p>
+                        <p class="filler">s4d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-5">
+    <div class="level-1">
+      <p class="filler">s5d1i0</p>
+      <p class="filler">s5d1i1</p>
+      <div class="level-2">
+        <p class="filler">s5d2i0</p>
+        <p class="filler">s5d2i1</p>
+        <div class="level-3">
+          <p class="filler">s5d3i0</p>
+          <p class="filler">s5d3i1</p>
+          <div class="level-4">
+            <p class="filler">s5d4i0</p>
+            <p class="filler">s5d4i1</p>
+            <div class="level-5">
+              <p class="filler">s5d5i0</p>
+              <p class="filler">s5d5i1</p>
+              <div class="level-6">
+                <p class="filler">s5d6i0</p>
+                <p class="filler">s5d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s5d7i0</p>
+                  <p class="filler">s5d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s5d8i0</p>
+                    <p class="filler">s5d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s5d9i0</p>
+                      <p class="filler">s5d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s5d10i0</p>
+                        <p class="filler">s5d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-6">
+    <div class="level-1">
+      <p class="filler">s6d1i0</p>
+      <p class="filler">s6d1i1</p>
+      <div class="level-2">
+        <p class="filler">s6d2i0</p>
+        <p class="filler">s6d2i1</p>
+        <div class="level-3">
+          <p class="filler">s6d3i0</p>
+          <p class="filler">s6d3i1</p>
+          <div class="level-4">
+            <p class="filler">s6d4i0</p>
+            <p class="filler">s6d4i1</p>
+            <div class="level-5">
+              <p class="filler">s6d5i0</p>
+              <p class="filler">s6d5i1</p>
+              <div class="level-6">
+                <p class="filler">s6d6i0</p>
+                <p class="filler">s6d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s6d7i0</p>
+                  <p class="filler">s6d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s6d8i0</p>
+                    <p class="filler">s6d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s6d9i0</p>
+                      <p class="filler">s6d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s6d10i0</p>
+                        <p class="filler">s6d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-7">
+    <div class="level-1">
+      <p class="filler">s7d1i0</p>
+      <p class="filler">s7d1i1</p>
+      <div class="level-2">
+        <p class="filler">s7d2i0</p>
+        <p class="filler">s7d2i1</p>
+        <div class="level-3">
+          <p class="filler">s7d3i0</p>
+          <p class="filler">s7d3i1</p>
+          <div class="level-4">
+            <p class="filler">s7d4i0</p>
+            <p class="filler">s7d4i1</p>
+            <div class="level-5">
+              <p class="filler">s7d5i0</p>
+              <p class="filler">s7d5i1</p>
+              <div class="level-6">
+                <p class="filler">s7d6i0</p>
+                <p class="filler">s7d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s7d7i0</p>
+                  <p class="filler">s7d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s7d8i0</p>
+                    <p class="filler">s7d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s7d9i0</p>
+                      <p class="filler">s7d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s7d10i0</p>
+                        <p class="filler">s7d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-8">
+    <div class="level-1">
+      <p class="filler">s8d1i0</p>
+      <p class="filler">s8d1i1</p>
+      <div class="level-2">
+        <p class="filler">s8d2i0</p>
+        <p class="filler">s8d2i1</p>
+        <div class="level-3">
+          <p class="filler">s8d3i0</p>
+          <p class="filler">s8d3i1</p>
+          <div class="level-4">
+            <p class="filler">s8d4i0</p>
+            <p class="filler">s8d4i1</p>
+            <div class="level-5">
+              <p class="filler">s8d5i0</p>
+              <p class="filler">s8d5i1</p>
+              <div class="level-6">
+                <p class="filler">s8d6i0</p>
+                <p class="filler">s8d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s8d7i0</p>
+                  <p class="filler">s8d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s8d8i0</p>
+                    <p class="filler">s8d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s8d9i0</p>
+                      <p class="filler">s8d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s8d10i0</p>
+                        <p class="filler">s8d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-9">
+    <div class="level-1">
+      <p class="filler">s9d1i0</p>
+      <p class="filler">s9d1i1</p>
+      <div class="level-2">
+        <p class="filler">s9d2i0</p>
+        <p class="filler">s9d2i1</p>
+        <div class="level-3">
+          <p class="filler">s9d3i0</p>
+          <p class="filler">s9d3i1</p>
+          <div class="level-4">
+            <p class="filler">s9d4i0</p>
+            <p class="filler">s9d4i1</p>
+            <div class="level-5">
+              <p class="filler">s9d5i0</p>
+              <p class="filler">s9d5i1</p>
+              <div class="level-6">
+                <p class="filler">s9d6i0</p>
+                <p class="filler">s9d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s9d7i0</p>
+                  <p class="filler">s9d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s9d8i0</p>
+                    <p class="filler">s9d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s9d9i0</p>
+                      <p class="filler">s9d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s9d10i0</p>
+                        <p class="filler">s9d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-10">
+    <div class="level-1">
+      <p class="filler">s10d1i0</p>
+      <p class="filler">s10d1i1</p>
+      <div class="level-2">
+        <p class="filler">s10d2i0</p>
+        <p class="filler">s10d2i1</p>
+        <div class="level-3">
+          <p class="filler">s10d3i0</p>
+          <p class="filler">s10d3i1</p>
+          <div class="level-4">
+            <p class="filler">s10d4i0</p>
+            <p class="filler">s10d4i1</p>
+            <div class="level-5">
+              <p class="filler">s10d5i0</p>
+              <p class="filler">s10d5i1</p>
+              <div class="level-6">
+                <p class="filler">s10d6i0</p>
+                <p class="filler">s10d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s10d7i0</p>
+                  <p class="filler">s10d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s10d8i0</p>
+                    <p class="filler">s10d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s10d9i0</p>
+                      <p class="filler">s10d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s10d10i0</p>
+                        <p class="filler">s10d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-11">
+    <div class="level-1">
+      <p class="filler">s11d1i0</p>
+      <p class="filler">s11d1i1</p>
+      <div class="level-2">
+        <p class="filler">s11d2i0</p>
+        <p class="filler">s11d2i1</p>
+        <div class="level-3">
+          <p class="filler">s11d3i0</p>
+          <p class="filler">s11d3i1</p>
+          <div class="level-4">
+            <p class="filler">s11d4i0</p>
+            <p class="filler">s11d4i1</p>
+            <div class="level-5">
+              <p class="filler">s11d5i0</p>
+              <p class="filler">s11d5i1</p>
+              <div class="level-6">
+                <p class="filler">s11d6i0</p>
+                <p class="filler">s11d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s11d7i0</p>
+                  <p class="filler">s11d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s11d8i0</p>
+                    <p class="filler">s11d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s11d9i0</p>
+                      <p class="filler">s11d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s11d10i0</p>
+                        <p class="filler">s11d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-12">
+    <div class="level-1">
+      <p class="filler">s12d1i0</p>
+      <p class="filler">s12d1i1</p>
+      <div class="level-2">
+        <p class="filler">s12d2i0</p>
+        <p class="filler">s12d2i1</p>
+        <div class="level-3">
+          <p class="filler">s12d3i0</p>
+          <p class="filler">s12d3i1</p>
+          <div class="level-4">
+            <p class="filler">s12d4i0</p>
+            <p class="filler">s12d4i1</p>
+            <div class="level-5">
+              <p class="filler">s12d5i0</p>
+              <p class="filler">s12d5i1</p>
+              <div class="level-6">
+                <p class="filler">s12d6i0</p>
+                <p class="filler">s12d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s12d7i0</p>
+                  <p class="filler">s12d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s12d8i0</p>
+                    <p class="filler">s12d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s12d9i0</p>
+                      <p class="filler">s12d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s12d10i0</p>
+                        <p class="filler">s12d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-13">
+    <div class="level-1">
+      <p class="filler">s13d1i0</p>
+      <p class="filler">s13d1i1</p>
+      <div class="level-2">
+        <p class="filler">s13d2i0</p>
+        <p class="filler">s13d2i1</p>
+        <div class="level-3">
+          <p class="filler">s13d3i0</p>
+          <p class="filler">s13d3i1</p>
+          <div class="level-4">
+            <p class="filler">s13d4i0</p>
+            <p class="filler">s13d4i1</p>
+            <div class="level-5">
+              <p class="filler">s13d5i0</p>
+              <p class="filler">s13d5i1</p>
+              <div class="level-6">
+                <p class="filler">s13d6i0</p>
+                <p class="filler">s13d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s13d7i0</p>
+                  <p class="filler">s13d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s13d8i0</p>
+                    <p class="filler">s13d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s13d9i0</p>
+                      <p class="filler">s13d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s13d10i0</p>
+                        <p class="filler">s13d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-14">
+    <div class="level-1">
+      <p class="filler">s14d1i0</p>
+      <p class="filler">s14d1i1</p>
+      <div class="level-2">
+        <p class="filler">s14d2i0</p>
+        <p class="filler">s14d2i1</p>
+        <div class="level-3">
+          <p class="filler">s14d3i0</p>
+          <p class="filler">s14d3i1</p>
+          <div class="level-4">
+            <p class="filler">s14d4i0</p>
+            <p class="filler">s14d4i1</p>
+            <div class="level-5">
+              <p class="filler">s14d5i0</p>
+              <p class="filler">s14d5i1</p>
+              <div class="level-6">
+                <p class="filler">s14d6i0</p>
+                <p class="filler">s14d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s14d7i0</p>
+                  <p class="filler">s14d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s14d8i0</p>
+                    <p class="filler">s14d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s14d9i0</p>
+                      <p class="filler">s14d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s14d10i0</p>
+                        <p class="filler">s14d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-15">
+    <div class="level-1">
+      <p class="filler">s15d1i0</p>
+      <p class="filler">s15d1i1</p>
+      <div class="level-2">
+        <p class="filler">s15d2i0</p>
+        <p class="filler">s15d2i1</p>
+        <div class="level-3">
+          <p class="filler">s15d3i0</p>
+          <p class="filler">s15d3i1</p>
+          <div class="level-4">
+            <p class="filler">s15d4i0</p>
+            <p class="filler">s15d4i1</p>
+            <div class="level-5">
+              <p class="filler">s15d5i0</p>
+              <p class="filler">s15d5i1</p>
+              <div class="level-6">
+                <p class="filler">s15d6i0</p>
+                <p class="filler">s15d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s15d7i0</p>
+                  <p class="filler">s15d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s15d8i0</p>
+                    <p class="filler">s15d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s15d9i0</p>
+                      <p class="filler">s15d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s15d10i0</p>
+                        <p class="filler">s15d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-16">
+    <div class="level-1">
+      <p class="filler">s16d1i0</p>
+      <p class="filler">s16d1i1</p>
+      <div class="level-2">
+        <p class="filler">s16d2i0</p>
+        <p class="filler">s16d2i1</p>
+        <div class="level-3">
+          <p class="filler">s16d3i0</p>
+          <p class="filler">s16d3i1</p>
+          <div class="level-4">
+            <p class="filler">s16d4i0</p>
+            <p class="filler">s16d4i1</p>
+            <div class="level-5">
+              <p class="filler">s16d5i0</p>
+              <p class="filler">s16d5i1</p>
+              <div class="level-6">
+                <p class="filler">s16d6i0</p>
+                <p class="filler">s16d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s16d7i0</p>
+                  <p class="filler">s16d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s16d8i0</p>
+                    <p class="filler">s16d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s16d9i0</p>
+                      <p class="filler">s16d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s16d10i0</p>
+                        <p class="filler">s16d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-17">
+    <div class="level-1">
+      <p class="filler">s17d1i0</p>
+      <p class="filler">s17d1i1</p>
+      <div class="level-2">
+        <p class="filler">s17d2i0</p>
+        <p class="filler">s17d2i1</p>
+        <div class="level-3">
+          <p class="filler">s17d3i0</p>
+          <p class="filler">s17d3i1</p>
+          <div class="level-4">
+            <p class="filler">s17d4i0</p>
+            <p class="filler">s17d4i1</p>
+            <div class="level-5">
+              <p class="filler">s17d5i0</p>
+              <p class="filler">s17d5i1</p>
+              <div class="level-6">
+                <p class="filler">s17d6i0</p>
+                <p class="filler">s17d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s17d7i0</p>
+                  <p class="filler">s17d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s17d8i0</p>
+                    <p class="filler">s17d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s17d9i0</p>
+                      <p class="filler">s17d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s17d10i0</p>
+                        <p class="filler">s17d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-18">
+    <div class="level-1">
+      <p class="filler">s18d1i0</p>
+      <p class="filler">s18d1i1</p>
+      <div class="level-2">
+        <p class="filler">s18d2i0</p>
+        <p class="filler">s18d2i1</p>
+        <div class="level-3">
+          <p class="filler">s18d3i0</p>
+          <p class="filler">s18d3i1</p>
+          <div class="level-4">
+            <p class="filler">s18d4i0</p>
+            <p class="filler">s18d4i1</p>
+            <div class="level-5">
+              <p class="filler">s18d5i0</p>
+              <p class="filler">s18d5i1</p>
+              <div class="level-6">
+                <p class="filler">s18d6i0</p>
+                <p class="filler">s18d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s18d7i0</p>
+                  <p class="filler">s18d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s18d8i0</p>
+                    <p class="filler">s18d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s18d9i0</p>
+                      <p class="filler">s18d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s18d10i0</p>
+                        <p class="filler">s18d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-19">
+    <div class="level-1">
+      <p class="filler">s19d1i0</p>
+      <p class="filler">s19d1i1</p>
+      <div class="level-2">
+        <p class="filler">s19d2i0</p>
+        <p class="filler">s19d2i1</p>
+        <div class="level-3">
+          <p class="filler">s19d3i0</p>
+          <p class="filler">s19d3i1</p>
+          <div class="level-4">
+            <p class="filler">s19d4i0</p>
+            <p class="filler">s19d4i1</p>
+            <div class="level-5">
+              <p class="filler">s19d5i0</p>
+              <p class="filler">s19d5i1</p>
+              <div class="level-6">
+                <p class="filler">s19d6i0</p>
+                <p class="filler">s19d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s19d7i0</p>
+                  <p class="filler">s19d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s19d8i0</p>
+                    <p class="filler">s19d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s19d9i0</p>
+                      <p class="filler">s19d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s19d10i0</p>
+                        <p class="filler">s19d10i1</p>
+                        <span class="leaf">changed</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
diff --git a/perf/benchmarks/deep-last-leaf.old.html b/perf/benchmarks/deep-last-leaf.old.html
new file mode 100644
index 0000000..b4abe8c
--- /dev/null
+++ b/perf/benchmarks/deep-last-leaf.old.html
@@ -0,0 +1,862 @@
+<main id="root">
+  <section id="section-0">
+    <div class="level-1">
+      <p class="filler">s0d1i0</p>
+      <p class="filler">s0d1i1</p>
+      <div class="level-2">
+        <p class="filler">s0d2i0</p>
+        <p class="filler">s0d2i1</p>
+        <div class="level-3">
+          <p class="filler">s0d3i0</p>
+          <p class="filler">s0d3i1</p>
+          <div class="level-4">
+            <p class="filler">s0d4i0</p>
+            <p class="filler">s0d4i1</p>
+            <div class="level-5">
+              <p class="filler">s0d5i0</p>
+              <p class="filler">s0d5i1</p>
+              <div class="level-6">
+                <p class="filler">s0d6i0</p>
+                <p class="filler">s0d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s0d7i0</p>
+                  <p class="filler">s0d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s0d8i0</p>
+                    <p class="filler">s0d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s0d9i0</p>
+                      <p class="filler">s0d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s0d10i0</p>
+                        <p class="filler">s0d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-1">
+    <div class="level-1">
+      <p class="filler">s1d1i0</p>
+      <p class="filler">s1d1i1</p>
+      <div class="level-2">
+        <p class="filler">s1d2i0</p>
+        <p class="filler">s1d2i1</p>
+        <div class="level-3">
+          <p class="filler">s1d3i0</p>
+          <p class="filler">s1d3i1</p>
+          <div class="level-4">
+            <p class="filler">s1d4i0</p>
+            <p class="filler">s1d4i1</p>
+            <div class="level-5">
+              <p class="filler">s1d5i0</p>
+              <p class="filler">s1d5i1</p>
+              <div class="level-6">
+                <p class="filler">s1d6i0</p>
+                <p class="filler">s1d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s1d7i0</p>
+                  <p class="filler">s1d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s1d8i0</p>
+                    <p class="filler">s1d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s1d9i0</p>
+                      <p class="filler">s1d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s1d10i0</p>
+                        <p class="filler">s1d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-2">
+    <div class="level-1">
+      <p class="filler">s2d1i0</p>
+      <p class="filler">s2d1i1</p>
+      <div class="level-2">
+        <p class="filler">s2d2i0</p>
+        <p class="filler">s2d2i1</p>
+        <div class="level-3">
+          <p class="filler">s2d3i0</p>
+          <p class="filler">s2d3i1</p>
+          <div class="level-4">
+            <p class="filler">s2d4i0</p>
+            <p class="filler">s2d4i1</p>
+            <div class="level-5">
+              <p class="filler">s2d5i0</p>
+              <p class="filler">s2d5i1</p>
+              <div class="level-6">
+                <p class="filler">s2d6i0</p>
+                <p class="filler">s2d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s2d7i0</p>
+                  <p class="filler">s2d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s2d8i0</p>
+                    <p class="filler">s2d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s2d9i0</p>
+                      <p class="filler">s2d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s2d10i0</p>
+                        <p class="filler">s2d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-3">
+    <div class="level-1">
+      <p class="filler">s3d1i0</p>
+      <p class="filler">s3d1i1</p>
+      <div class="level-2">
+        <p class="filler">s3d2i0</p>
+        <p class="filler">s3d2i1</p>
+        <div class="level-3">
+          <p class="filler">s3d3i0</p>
+          <p class="filler">s3d3i1</p>
+          <div class="level-4">
+            <p class="filler">s3d4i0</p>
+            <p class="filler">s3d4i1</p>
+            <div class="level-5">
+              <p class="filler">s3d5i0</p>
+              <p class="filler">s3d5i1</p>
+              <div class="level-6">
+                <p class="filler">s3d6i0</p>
+                <p class="filler">s3d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s3d7i0</p>
+                  <p class="filler">s3d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s3d8i0</p>
+                    <p class="filler">s3d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s3d9i0</p>
+                      <p class="filler">s3d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s3d10i0</p>
+                        <p class="filler">s3d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-4">
+    <div class="level-1">
+      <p class="filler">s4d1i0</p>
+      <p class="filler">s4d1i1</p>
+      <div class="level-2">
+        <p class="filler">s4d2i0</p>
+        <p class="filler">s4d2i1</p>
+        <div class="level-3">
+          <p class="filler">s4d3i0</p>
+          <p class="filler">s4d3i1</p>
+          <div class="level-4">
+            <p class="filler">s4d4i0</p>
+            <p class="filler">s4d4i1</p>
+            <div class="level-5">
+              <p class="filler">s4d5i0</p>
+              <p class="filler">s4d5i1</p>
+              <div class="level-6">
+                <p class="filler">s4d6i0</p>
+                <p class="filler">s4d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s4d7i0</p>
+                  <p class="filler">s4d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s4d8i0</p>
+                    <p class="filler">s4d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s4d9i0</p>
+                      <p class="filler">s4d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s4d10i0</p>
+                        <p class="filler">s4d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-5">
+    <div class="level-1">
+      <p class="filler">s5d1i0</p>
+      <p class="filler">s5d1i1</p>
+      <div class="level-2">
+        <p class="filler">s5d2i0</p>
+        <p class="filler">s5d2i1</p>
+        <div class="level-3">
+          <p class="filler">s5d3i0</p>
+          <p class="filler">s5d3i1</p>
+          <div class="level-4">
+            <p class="filler">s5d4i0</p>
+            <p class="filler">s5d4i1</p>
+            <div class="level-5">
+              <p class="filler">s5d5i0</p>
+              <p class="filler">s5d5i1</p>
+              <div class="level-6">
+                <p class="filler">s5d6i0</p>
+                <p class="filler">s5d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s5d7i0</p>
+                  <p class="filler">s5d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s5d8i0</p>
+                    <p class="filler">s5d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s5d9i0</p>
+                      <p class="filler">s5d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s5d10i0</p>
+                        <p class="filler">s5d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-6">
+    <div class="level-1">
+      <p class="filler">s6d1i0</p>
+      <p class="filler">s6d1i1</p>
+      <div class="level-2">
+        <p class="filler">s6d2i0</p>
+        <p class="filler">s6d2i1</p>
+        <div class="level-3">
+          <p class="filler">s6d3i0</p>
+          <p class="filler">s6d3i1</p>
+          <div class="level-4">
+            <p class="filler">s6d4i0</p>
+            <p class="filler">s6d4i1</p>
+            <div class="level-5">
+              <p class="filler">s6d5i0</p>
+              <p class="filler">s6d5i1</p>
+              <div class="level-6">
+                <p class="filler">s6d6i0</p>
+                <p class="filler">s6d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s6d7i0</p>
+                  <p class="filler">s6d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s6d8i0</p>
+                    <p class="filler">s6d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s6d9i0</p>
+                      <p class="filler">s6d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s6d10i0</p>
+                        <p class="filler">s6d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-7">
+    <div class="level-1">
+      <p class="filler">s7d1i0</p>
+      <p class="filler">s7d1i1</p>
+      <div class="level-2">
+        <p class="filler">s7d2i0</p>
+        <p class="filler">s7d2i1</p>
+        <div class="level-3">
+          <p class="filler">s7d3i0</p>
+          <p class="filler">s7d3i1</p>
+          <div class="level-4">
+            <p class="filler">s7d4i0</p>
+            <p class="filler">s7d4i1</p>
+            <div class="level-5">
+              <p class="filler">s7d5i0</p>
+              <p class="filler">s7d5i1</p>
+              <div class="level-6">
+                <p class="filler">s7d6i0</p>
+                <p class="filler">s7d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s7d7i0</p>
+                  <p class="filler">s7d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s7d8i0</p>
+                    <p class="filler">s7d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s7d9i0</p>
+                      <p class="filler">s7d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s7d10i0</p>
+                        <p class="filler">s7d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-8">
+    <div class="level-1">
+      <p class="filler">s8d1i0</p>
+      <p class="filler">s8d1i1</p>
+      <div class="level-2">
+        <p class="filler">s8d2i0</p>
+        <p class="filler">s8d2i1</p>
+        <div class="level-3">
+          <p class="filler">s8d3i0</p>
+          <p class="filler">s8d3i1</p>
+          <div class="level-4">
+            <p class="filler">s8d4i0</p>
+            <p class="filler">s8d4i1</p>
+            <div class="level-5">
+              <p class="filler">s8d5i0</p>
+              <p class="filler">s8d5i1</p>
+              <div class="level-6">
+                <p class="filler">s8d6i0</p>
+                <p class="filler">s8d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s8d7i0</p>
+                  <p class="filler">s8d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s8d8i0</p>
+                    <p class="filler">s8d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s8d9i0</p>
+                      <p class="filler">s8d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s8d10i0</p>
+                        <p class="filler">s8d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-9">
+    <div class="level-1">
+      <p class="filler">s9d1i0</p>
+      <p class="filler">s9d1i1</p>
+      <div class="level-2">
+        <p class="filler">s9d2i0</p>
+        <p class="filler">s9d2i1</p>
+        <div class="level-3">
+          <p class="filler">s9d3i0</p>
+          <p class="filler">s9d3i1</p>
+          <div class="level-4">
+            <p class="filler">s9d4i0</p>
+            <p class="filler">s9d4i1</p>
+            <div class="level-5">
+              <p class="filler">s9d5i0</p>
+              <p class="filler">s9d5i1</p>
+              <div class="level-6">
+                <p class="filler">s9d6i0</p>
+                <p class="filler">s9d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s9d7i0</p>
+                  <p class="filler">s9d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s9d8i0</p>
+                    <p class="filler">s9d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s9d9i0</p>
+                      <p class="filler">s9d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s9d10i0</p>
+                        <p class="filler">s9d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-10">
+    <div class="level-1">
+      <p class="filler">s10d1i0</p>
+      <p class="filler">s10d1i1</p>
+      <div class="level-2">
+        <p class="filler">s10d2i0</p>
+        <p class="filler">s10d2i1</p>
+        <div class="level-3">
+          <p class="filler">s10d3i0</p>
+          <p class="filler">s10d3i1</p>
+          <div class="level-4">
+            <p class="filler">s10d4i0</p>
+            <p class="filler">s10d4i1</p>
+            <div class="level-5">
+              <p class="filler">s10d5i0</p>
+              <p class="filler">s10d5i1</p>
+              <div class="level-6">
+                <p class="filler">s10d6i0</p>
+                <p class="filler">s10d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s10d7i0</p>
+                  <p class="filler">s10d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s10d8i0</p>
+                    <p class="filler">s10d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s10d9i0</p>
+                      <p class="filler">s10d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s10d10i0</p>
+                        <p class="filler">s10d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-11">
+    <div class="level-1">
+      <p class="filler">s11d1i0</p>
+      <p class="filler">s11d1i1</p>
+      <div class="level-2">
+        <p class="filler">s11d2i0</p>
+        <p class="filler">s11d2i1</p>
+        <div class="level-3">
+          <p class="filler">s11d3i0</p>
+          <p class="filler">s11d3i1</p>
+          <div class="level-4">
+            <p class="filler">s11d4i0</p>
+            <p class="filler">s11d4i1</p>
+            <div class="level-5">
+              <p class="filler">s11d5i0</p>
+              <p class="filler">s11d5i1</p>
+              <div class="level-6">
+                <p class="filler">s11d6i0</p>
+                <p class="filler">s11d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s11d7i0</p>
+                  <p class="filler">s11d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s11d8i0</p>
+                    <p class="filler">s11d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s11d9i0</p>
+                      <p class="filler">s11d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s11d10i0</p>
+                        <p class="filler">s11d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-12">
+    <div class="level-1">
+      <p class="filler">s12d1i0</p>
+      <p class="filler">s12d1i1</p>
+      <div class="level-2">
+        <p class="filler">s12d2i0</p>
+        <p class="filler">s12d2i1</p>
+        <div class="level-3">
+          <p class="filler">s12d3i0</p>
+          <p class="filler">s12d3i1</p>
+          <div class="level-4">
+            <p class="filler">s12d4i0</p>
+            <p class="filler">s12d4i1</p>
+            <div class="level-5">
+              <p class="filler">s12d5i0</p>
+              <p class="filler">s12d5i1</p>
+              <div class="level-6">
+                <p class="filler">s12d6i0</p>
+                <p class="filler">s12d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s12d7i0</p>
+                  <p class="filler">s12d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s12d8i0</p>
+                    <p class="filler">s12d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s12d9i0</p>
+                      <p class="filler">s12d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s12d10i0</p>
+                        <p class="filler">s12d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-13">
+    <div class="level-1">
+      <p class="filler">s13d1i0</p>
+      <p class="filler">s13d1i1</p>
+      <div class="level-2">
+        <p class="filler">s13d2i0</p>
+        <p class="filler">s13d2i1</p>
+        <div class="level-3">
+          <p class="filler">s13d3i0</p>
+          <p class="filler">s13d3i1</p>
+          <div class="level-4">
+            <p class="filler">s13d4i0</p>
+            <p class="filler">s13d4i1</p>
+            <div class="level-5">
+              <p class="filler">s13d5i0</p>
+              <p class="filler">s13d5i1</p>
+              <div class="level-6">
+                <p class="filler">s13d6i0</p>
+                <p class="filler">s13d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s13d7i0</p>
+                  <p class="filler">s13d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s13d8i0</p>
+                    <p class="filler">s13d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s13d9i0</p>
+                      <p class="filler">s13d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s13d10i0</p>
+                        <p class="filler">s13d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-14">
+    <div class="level-1">
+      <p class="filler">s14d1i0</p>
+      <p class="filler">s14d1i1</p>
+      <div class="level-2">
+        <p class="filler">s14d2i0</p>
+        <p class="filler">s14d2i1</p>
+        <div class="level-3">
+          <p class="filler">s14d3i0</p>
+          <p class="filler">s14d3i1</p>
+          <div class="level-4">
+            <p class="filler">s14d4i0</p>
+            <p class="filler">s14d4i1</p>
+            <div class="level-5">
+              <p class="filler">s14d5i0</p>
+              <p class="filler">s14d5i1</p>
+              <div class="level-6">
+                <p class="filler">s14d6i0</p>
+                <p class="filler">s14d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s14d7i0</p>
+                  <p class="filler">s14d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s14d8i0</p>
+                    <p class="filler">s14d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s14d9i0</p>
+                      <p class="filler">s14d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s14d10i0</p>
+                        <p class="filler">s14d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-15">
+    <div class="level-1">
+      <p class="filler">s15d1i0</p>
+      <p class="filler">s15d1i1</p>
+      <div class="level-2">
+        <p class="filler">s15d2i0</p>
+        <p class="filler">s15d2i1</p>
+        <div class="level-3">
+          <p class="filler">s15d3i0</p>
+          <p class="filler">s15d3i1</p>
+          <div class="level-4">
+            <p class="filler">s15d4i0</p>
+            <p class="filler">s15d4i1</p>
+            <div class="level-5">
+              <p class="filler">s15d5i0</p>
+              <p class="filler">s15d5i1</p>
+              <div class="level-6">
+                <p class="filler">s15d6i0</p>
+                <p class="filler">s15d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s15d7i0</p>
+                  <p class="filler">s15d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s15d8i0</p>
+                    <p class="filler">s15d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s15d9i0</p>
+                      <p class="filler">s15d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s15d10i0</p>
+                        <p class="filler">s15d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-16">
+    <div class="level-1">
+      <p class="filler">s16d1i0</p>
+      <p class="filler">s16d1i1</p>
+      <div class="level-2">
+        <p class="filler">s16d2i0</p>
+        <p class="filler">s16d2i1</p>
+        <div class="level-3">
+          <p class="filler">s16d3i0</p>
+          <p class="filler">s16d3i1</p>
+          <div class="level-4">
+            <p class="filler">s16d4i0</p>
+            <p class="filler">s16d4i1</p>
+            <div class="level-5">
+              <p class="filler">s16d5i0</p>
+              <p class="filler">s16d5i1</p>
+              <div class="level-6">
+                <p class="filler">s16d6i0</p>
+                <p class="filler">s16d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s16d7i0</p>
+                  <p class="filler">s16d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s16d8i0</p>
+                    <p class="filler">s16d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s16d9i0</p>
+                      <p class="filler">s16d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s16d10i0</p>
+                        <p class="filler">s16d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-17">
+    <div class="level-1">
+      <p class="filler">s17d1i0</p>
+      <p class="filler">s17d1i1</p>
+      <div class="level-2">
+        <p class="filler">s17d2i0</p>
+        <p class="filler">s17d2i1</p>
+        <div class="level-3">
+          <p class="filler">s17d3i0</p>
+          <p class="filler">s17d3i1</p>
+          <div class="level-4">
+            <p class="filler">s17d4i0</p>
+            <p class="filler">s17d4i1</p>
+            <div class="level-5">
+              <p class="filler">s17d5i0</p>
+              <p class="filler">s17d5i1</p>
+              <div class="level-6">
+                <p class="filler">s17d6i0</p>
+                <p class="filler">s17d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s17d7i0</p>
+                  <p class="filler">s17d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s17d8i0</p>
+                    <p class="filler">s17d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s17d9i0</p>
+                      <p class="filler">s17d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s17d10i0</p>
+                        <p class="filler">s17d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-18">
+    <div class="level-1">
+      <p class="filler">s18d1i0</p>
+      <p class="filler">s18d1i1</p>
+      <div class="level-2">
+        <p class="filler">s18d2i0</p>
+        <p class="filler">s18d2i1</p>
+        <div class="level-3">
+          <p class="filler">s18d3i0</p>
+          <p class="filler">s18d3i1</p>
+          <div class="level-4">
+            <p class="filler">s18d4i0</p>
+            <p class="filler">s18d4i1</p>
+            <div class="level-5">
+              <p class="filler">s18d5i0</p>
+              <p class="filler">s18d5i1</p>
+              <div class="level-6">
+                <p class="filler">s18d6i0</p>
+                <p class="filler">s18d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s18d7i0</p>
+                  <p class="filler">s18d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s18d8i0</p>
+                    <p class="filler">s18d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s18d9i0</p>
+                      <p class="filler">s18d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s18d10i0</p>
+                        <p class="filler">s18d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="section-19">
+    <div class="level-1">
+      <p class="filler">s19d1i0</p>
+      <p class="filler">s19d1i1</p>
+      <div class="level-2">
+        <p class="filler">s19d2i0</p>
+        <p class="filler">s19d2i1</p>
+        <div class="level-3">
+          <p class="filler">s19d3i0</p>
+          <p class="filler">s19d3i1</p>
+          <div class="level-4">
+            <p class="filler">s19d4i0</p>
+            <p class="filler">s19d4i1</p>
+            <div class="level-5">
+              <p class="filler">s19d5i0</p>
+              <p class="filler">s19d5i1</p>
+              <div class="level-6">
+                <p class="filler">s19d6i0</p>
+                <p class="filler">s19d6i1</p>
+                <div class="level-7">
+                  <p class="filler">s19d7i0</p>
+                  <p class="filler">s19d7i1</p>
+                  <div class="level-8">
+                    <p class="filler">s19d8i0</p>
+                    <p class="filler">s19d8i1</p>
+                    <div class="level-9">
+                      <p class="filler">s19d9i0</p>
+                      <p class="filler">s19d9i1</p>
+                      <div class="level-10">
+                        <p class="filler">s19d10i0</p>
+                        <p class="filler">s19d10i1</p>
+                        <span class="leaf">original</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</main>
diff --git a/perf/generate-deep-last-leaf.js b/perf/generate-deep-last-leaf.js
new file mode 100644
index 0000000..bb03d4f
--- /dev/null
+++ b/perf/generate-deep-last-leaf.js
@@ -0,0 +1,32 @@
+// Generates the worst case for skipUnchanged: every section differs, but only
+// in its last, deepest text node, so every ancestor's isEqualNode walks its
+// whole subtree before failing. Deterministic; re-run to regenerate.
+import fs from "node:fs";
+
+const SECTIONS = 20;
+const DEPTH = 10;
+const FILLERS_PER_LEVEL = 2;
+
+function level(section, depth, changed) {
+  const fillers = Array.from(
+    { length: FILLERS_PER_LEVEL },
+    (_, i) => `<p class="filler">s${section}d${depth}i${i}</p>`,
+  ).join("");
+  if (depth === DEPTH) {
+    const leaf = changed ? "changed" : "original";
+    return `<div class="level-${depth}">${fillers}<span class="leaf">${leaf}</span></div>`;
+  }
+  return `<div class="level-${depth}">${fillers}${level(section, depth + 1, changed)}</div>`;
+}
+
+function document(changed) {
+  const sections = Array.from(
+    { length: SECTIONS },
+    (_, i) => `<section id="section-${i}">${level(i, 1, changed)}</section>`,
+  ).join("\n");
+  return `<main id="root">\n${sections}\n</main>\n`;
+}
+
+const dir = new URL("benchmarks/", import.meta.url);
+fs.writeFileSync(new URL("deep-last-leaf.old.html", dir), document(false));
+fs.writeFileSync(new URL("deep-last-leaf.new.html", dir), document(true));
diff --git a/perf/runner.html b/perf/runner.html
index 6f0ccf0..39c10cf 100644
--- a/perf/runner.html
+++ b/perf/runner.html
@@ -24,6 +24,7 @@
   const benchmark = params.get("benchmark");
   const startUrl = `/perf/benchmarks/${benchmark}.old.html`;
   const endUrl = `/perf/benchmarks/${benchmark}.new.html`;
+  const options = JSON.parse(params.get("options") || "{}");
 
   Promise.all([
     fetch(startUrl).then((r) => r.text()),
@@ -34,7 +35,7 @@
     if (params.get("using").includes("morphdom")) {
       morphdom(document.body.firstElementChild, end);
     } else {
-      Idiomorph.morph(document.body.firstElementChild, end);
+      Idiomorph.morph(document.body.firstElementChild, end, options);
     }
     bench.stop();
   });
diff --git a/perf/runner.js b/perf/runner.js
index 482aa5f..823b5cc 100755
--- a/perf/runner.js
+++ b/perf/runner.js
@@ -4,6 +4,16 @@ import { chromium } from "playwright";
 
 let benchmarks = process.argv.slice(2);
 let versus;
+let options = "{}";
+
+benchmarks = benchmarks.filter((arg) => {
+  const match = arg.match(/^--options=(.*)$/);
+  if (match) {
+    options = match[1];
+    return false;
+  }
+  return true;
+});
 
 if (
   benchmarks[0] === "morphdom" ||
@@ -35,12 +45,12 @@ benchmarks.forEach((benchmark) => {
     benchmarks: [
       {
         name: `${benchmark}: ${versus}`,
-        url: `../perf/runner.html?using=${versus}&benchmark=${benchmark}`,
+        url: `../perf/runner.html?using=${versus}&benchmark=${benchmark}&options=${encodeURIComponent(options)}`,
         browser,
       },
       {
         name: `${benchmark}: src/idiomorph.js`,
-        url: `../perf/runner.html?using=idiomorph&benchmark=${benchmark}`,
+        url: `../perf/runner.html?using=idiomorph&benchmark=${benchmark}&options=${encodeURIComponent(options)}`,
         browser,
       },
     ],

From 21b3bd47fb998dea616042250b96584a96858319 Mon Sep 17 00:00:00 2001
From: Alexander Brandon Coles <a.coles@openproject.com>
Date: Sat, 5 Sep 2026 18:31:47 +0100
Subject: [PATCH 3/3] Capture differential form-state regressions

Compare markup and live state with skipping enabled and disabled for radio groups, optgroups and all-disabled selects. Leave these tests enabled and intentionally failing while the feature is parked pending maintainer discussion.
---
 test/skip-unchanged.js | 61 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)

diff --git a/test/skip-unchanged.js b/test/skip-unchanged.js
index 739fbca..4a0e851 100644
--- a/test/skip-unchanged.js
+++ b/test/skip-unchanged.js
@@ -14,6 +14,67 @@ describe("skipUnchanged option", function () {
     };
   }
 
+  describe("differential form-state regressions", function () {
+    // Keep these enabled while the implementation is parked: equal markup is
+    // not enough to prove that skipping preserves the normal morph's behavior.
+    function morphAndSnapshot(oldHTML, newHTML, skipUnchanged, prepare) {
+      const workArea = getWorkArea();
+      // Radio coupling requires a connected tree. Run fixtures sequentially so
+      // same-name radios from the baseline cannot affect the candidate run.
+      workArea.innerHTML = oldHTML;
+      const root = workArea.firstElementChild;
+      try {
+        if (prepare) prepare(root);
+        Idiomorph.morph(root, newHTML, { skipUnchanged });
+        return {
+          html: root.outerHTML,
+          inputs: Array.from(root.querySelectorAll("input"), (input) => ({
+            value: input.value,
+            checked: input.checked,
+          })),
+          selects: Array.from(root.querySelectorAll("select"), (select) => ({
+            value: select.value,
+            selectedIndex: select.selectedIndex,
+          })),
+          options: Array.from(root.querySelectorAll("option"), (option) => ({
+            value: option.value,
+            selected: option.selected,
+            defaultSelected: option.defaultSelected,
+          })),
+        };
+      } finally {
+        clearWorkArea();
+      }
+    }
+
+    function assertSameMorph(oldHTML, newHTML, prepare) {
+      const baseline = morphAndSnapshot(oldHTML, newHTML, false, prepare);
+      const skipped = morphAndSnapshot(oldHTML, newHTML, true, prepare);
+      skipped.should.eql(baseline);
+    }
+
+    it("matches normal morphing when a radio changes a later subtree's checked state", function () {
+      assertSameMorph(
+        `<div><section><input type="radio" name="group" value="a"></section><section><input type="radio" name="group" value="b" checked></section></div>`,
+        `<div><section><input type="radio" name="group" value="a" checked></section><section><input type="radio" name="group" value="b" checked></section></div>`,
+      );
+    });
+
+    it("matches normal morphing when implicit selection crosses an unchanged optgroup", function () {
+      assertSameMorph(
+        `<div><select><optgroup><option>A</option></optgroup><option selected>B</option></select></div>`,
+        `<div><select><optgroup><option>A</option></optgroup><option>B</option></select></div>`,
+      );
+    });
+
+    it("matches normal morphing of a dirty all-disabled select", function () {
+      const html = `<div><select><option disabled>A</option><option disabled>B</option></select></div>`;
+      assertSameMorph(html, html, (root) => {
+        root.querySelector("select").selectedIndex = 0;
+      });
+    });
+  });
+
   describe("off by default", function () {
     it("still visits every node of an identical subtree", function () {
       const calls = [];