@barefootjs/client 0.17.1 → 0.18.0

package/src/reactive.ts

@@ -88,8 +88,16 @@ export interface ProfilerEventSink {
   turnEnd(): void
 }
 
-/** A signal's subscriber set, tagged with the signal's id for edge-removal events. */
-type SubscriberSet = Set<EffectContext> & { __bfSignalId?: string }
+/**
+ * A signal's subscriber set, tagged with the signal's id for edge-removal
+ * events. `__bfSnapshot` is a dispatch-order cache for `set()` (perf): the
+ * array `[...subscribers]` would otherwise allocate on every write, but a
+ * stable subscriber graph (the common case — see `runEffect`'s dependency
+ * sweep) never mutates this Set between writes, so the same array can be
+ * reused. `undefined`/`null` means "no valid cache, rebuild on next write";
+ * every call site that adds or removes a member sets it back to `null`.
+ */
+type SubscriberSet = Set<EffectContext> & { __bfSignalId?: string; __bfSnapshot?: EffectContext[] | null }
 
 let profilerSink: ProfilerEventSink | null = null
 let signalSeq = 0
@@ -142,9 +150,34 @@ export function __bfReportOutput(changed: boolean): void {
 type EffectContext = {
   fn: EffectFn
   cleanup: CleanupFn | null
-  dependencies: Set<SubscriberSet>
+  // Signals read by the most recently completed run, mapped to the `gen`
+  // stamp they were (re)confirmed at. A re-run that reads the SAME signal
+  // again just refreshes its stamp in `get()` (no Set.delete/add on the
+  // signal's subscriber Set); one that stops reading a signal leaves that
+  // entry stamped with a stale `gen`, which the end-of-run sweep in
+  // `runEffect` detects and removes (perf: this is what makes a stable
+  // dependency graph — the overwhelmingly common case — free of the
+  // unsubscribe/resubscribe churn a naive clear-and-rebuild pays on every
+  // single run, while keeping dynamic dependency tracking exact).
+  dependencies: Map<SubscriberSet, number>
+  // Monotonic per-effect run counter, bumped once per invocation (including
+  // reentrant/circular ones — each nested call gets its own higher value).
+  // Stamped onto `dependencies` entries in `get()`; compared against by the
+  // OUTERMOST invocation's end-of-run sweep to find entries the most recent
+  // run didn't touch. Never compared across effects.
+  gen: number
   owner: EffectContext | null   // Parent scope for hierarchical disposal
-  children: EffectContext[]     // Owned child effects/roots
+  // Owned child effects/roots. A `Set` (not an array) so a single child's
+  // detach in `disposeEffect` is O(1) — `mapArray` disposes large sibling
+  // groups one scope at a time (list clear/replace), and an array would need
+  // an `indexOf` scan per removal, making that O(n²) in the sibling count
+  // (bulk-disposal perf). Insertion order is preserved (Set iterates in
+  // insertion order), so cascade disposal in `disposeSubtree` still walks
+  // children in the same order they were created. Lazily allocated — most
+  // effects never gain a child (leaf effects/memos), so `null` until the
+  // first `owner.children.add(...)` avoids a per-effect Set allocation on
+  // the common path (perf).
+  children: Set<EffectContext> | null
   disposed: boolean
   runCount: number              // Per-effect re-entry counter for circular dependency detection
   id: string                    // Dev instrumentation id ('' when profiling is off)
@@ -161,6 +194,16 @@ let Owner: EffectContext | null = null
 let Listener: EffectContext | null = null
 const MAX_EFFECT_RUNS = 100
 
+/**
+ * Register `child` under `owner`, lazily allocating `owner.children` on the
+ * first registration (perf: most effects never gain a child, so this keeps
+ * the common leaf-effect path allocation-free).
+ */
+function registerChild(owner: EffectContext, child: EffectContext): void {
+  if (!owner.children) owner.children = new Set()
+  owner.children.add(child)
+}
+
 let BatchDepth = 0
 const PendingEffects = new Set<EffectContext>()
 
@@ -186,9 +229,33 @@ export function createSignal<T>(initialValue: T, __bfId?: string): Signal<T> {
 
   const get = () => {
     if (Listener) {
-      subscribers.add(Listener)
-      Listener.dependencies.add(subscribers)
-      if (profilerSink) profilerSink.subscribeAdd(id, Listener.id)
+      if (profilerSink) {
+        // Exact historical event contract: unconditionally (re)add and fire
+        // `subscribeAdd` for every read call, even a signal read twice
+        // within the same run body — profiler consumers must see the same
+        // stream regardless of the perf path below (dev-only instrumentation,
+        // its cost doesn't matter). See profiler-instrumentation.test.ts.
+        // Always invalidates `__bfSnapshot`, even on a redundant re-add of an
+        // already-present member — cheap here (profiling is already off the
+        // fast path) and correctness-critical: a real new member (e.g. this
+        // signal previously had zero subscribers, cached an empty snapshot,
+        // and gains its first one here) must not leave a stale empty cache
+        // behind for `set()` to reuse.
+        subscribers.add(Listener)
+        subscribers.__bfSnapshot = null
+        Listener.dependencies.set(subscribers, Listener.gen)
+        profilerSink.subscribeAdd(id, Listener.id)
+      } else if (!Listener.dependencies.has(subscribers)) {
+        // New dependency for this effect (first time it's read this signal,
+        // or it stopped and started again) — the only case that needs to
+        // touch the signal's subscriber Set. An already-tracked dependency
+        // (the common case) just gets its stamp refreshed below.
+        subscribers.add(Listener)
+        subscribers.__bfSnapshot = null
+        Listener.dependencies.set(subscribers, Listener.gen)
+      } else {
+        Listener.dependencies.set(subscribers, Listener.gen)
+      }
     }
     return value
   }
@@ -211,9 +278,25 @@ export function createSignal<T>(initialValue: T, __bfId?: string): Signal<T> {
         PendingEffects.add(effect)
       }
     } else {
-      const effectsToRun = [...subscribers]
-      for (const effect of effectsToRun) {
-        runEffect(effect)
+      // Snapshot the subscriber list before dispatch so an effect that
+      // subscribes/unsubscribes DURING this write's dispatch (a nested
+      // re-run, or a disposal triggered from an effect body) can't change
+      // what THIS write runs — same fixed-at-dispatch-time semantics as the
+      // previous per-write `[...subscribers]` copy (pinned in
+      // reactive.test.ts's "dispatch snapshot" cases).
+      //
+      // The array is cached on the Set itself and only rebuilt when
+      // membership actually changes (`get()`'s new-dependency branch, the
+      // end-of-run sweep, and disposal all null it out) — a stable
+      // subscriber graph (effects that read the same signals every run,
+      // the common case) reuses the same array across every subsequent
+      // write instead of paying a fresh allocation + copy each time.
+      let snapshot = subscribers.__bfSnapshot
+      if (!snapshot) {
+        snapshot = subscribers.__bfSnapshot = [...subscribers]
+      }
+      for (let i = 0; i < snapshot.length; i++) {
+        runEffect(snapshot[i]!)
       }
     }
   }
@@ -241,9 +324,10 @@ export function createEffect(fn: EffectFn, __bfId?: string, __bfKind: Subscriber
   const effect: EffectContext = {
     fn,
     cleanup: null,
-    dependencies: new Set(),
+    dependencies: new Map(),
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: __bfId ?? (profilerSink ? `e${++subscriberSeq}` : ''),
@@ -255,7 +339,7 @@ export function createEffect(fn: EffectFn, __bfId?: string, __bfKind: Subscriber
   if (profilerSink) profilerSink.effectCreate(effect.id, effect.kind)
 
   // Register with parent owner for hierarchical disposal
-  if (Owner) Owner.children.push(effect)
+  if (Owner) registerChild(Owner, effect)
 
   runEffect(effect)
 }
@@ -268,6 +352,15 @@ function runEffect(effect: EffectContext): void {
     effect.runCount = 0
     throw new Error(`Circular dependency detected: effect re-entered itself ${MAX_EFFECT_RUNS} times.`)
   }
+  // Captured right after the reentrancy counter above so a nested re-entrant
+  // run of this SAME effect (the circular-dependency guard above bounds how
+  // deep that can go) doesn't run the end-of-run dependency sweep against
+  // its own, shallower run: only the outermost call sweeps, using whatever
+  // `effect.gen` the deepest/most-recently-completed nested run left behind
+  // — that run's reads are the authoritative "current dependencies" for the
+  // whole reentrant chain, exactly like the old clear-at-every-entry code's
+  // last write won.
+  const isOutermostRun = effect.runCount === 1
 
   // `effectEnter` is emitted *before* cleanup so the whole run — cleanup
   // included — is bracketed by enter/exit. A `set()` performed inside a cleanup
@@ -282,16 +375,30 @@ function runEffect(effect: EffectContext): void {
     effect.cleanup = null
   }
 
-  for (const dep of effect.dependencies) {
-    dep.delete(effect)
-    if (profilerSink) profilerSink.subscribeRemove(dep.__bfSignalId ?? '', effect.id)
+  if (profilerSink) {
+    // Dev-instrumented path only: reproduce the exact pre-optimization event
+    // contract by dropping every dependency up front, so `get()` re-adds (and
+    // re-fires `subscribeAdd` for) everything the run reads — including a
+    // signal read twice in one body. Profiling is dev-only and its cost
+    // doesn't matter; what matters is that turning it on never changes the
+    // event stream a consumer sees. The perf path below (no profiler) uses
+    // the cheaper end-of-run sweep instead.
+    for (const dep of effect.dependencies.keys()) {
+      dep.delete(effect)
+      // Membership changed — a dep this run doesn't re-read would otherwise
+      // leave a stale cached dispatch snapshot that still contains this
+      // effect (re-reads re-add via `get()`, which re-invalidates anyway).
+      dep.__bfSnapshot = null
+      profilerSink.subscribeRemove(dep.__bfSignalId ?? '', effect.id)
+    }
+    effect.dependencies.clear()
   }
-  effect.dependencies.clear()
 
   const prevOwner = Owner
   const prevListener = Listener
   Owner = effect
   Listener = effect
+  effect.gen++
 
   // Fresh output fingerprint for this run (§4.2.2); `__bfReportOutput` fills it.
   effect.outputReported = false
@@ -310,6 +417,25 @@ function runEffect(effect: EffectContext): void {
     Owner = prevOwner
     Listener = prevListener
     effect.runCount--
+
+    if (!profilerSink && isOutermostRun) {
+      // Sweep: a dependency whose stamp isn't the current `effect.gen`
+      // wasn't (re)read by the most recent run of this effect's body, so it
+      // must be dropped — this is what keeps dynamic dependency tracking
+      // exact (an effect that stops reading a signal stops depending on it).
+      // A dependency that IS still read every run (the overwhelmingly common
+      // case: most effects' read set never changes) never reaches this
+      // branch at all — `get()` above just refreshed its stamp, no
+      // Set.delete/add round trip on the signal's subscriber Set.
+      for (const [dep, gen] of effect.dependencies) {
+        if (gen !== effect.gen) {
+          effect.dependencies.delete(dep)
+          dep.delete(effect)
+          dep.__bfSnapshot = null
+        }
+      }
+    }
+
     if (profilerSink) {
       profilerSink.effectExit(effect.id, performance.now() - start)
       if (effect.outputReported) profilerSink.effectOutput?.(effect.id, effect.outputChanged)
@@ -327,18 +453,21 @@ function disposeSubtree(effect: EffectContext): void {
   if (effect.disposed) return
   effect.disposed = true
 
-  for (const child of effect.children) {
-    disposeSubtree(child)
+  if (effect.children) {
+    for (const child of effect.children) {
+      disposeSubtree(child)
+    }
+    effect.children.clear()
   }
-  effect.children.length = 0
 
   if (effect.cleanup) {
     effect.cleanup()
     effect.cleanup = null
   }
 
-  for (const dep of effect.dependencies) {
+  for (const dep of effect.dependencies.keys()) {
     dep.delete(effect)
+    dep.__bfSnapshot = null
     if (profilerSink) profilerSink.subscribeRemove(dep.__bfSignalId ?? '', effect.id)
   }
   effect.dependencies.clear()
@@ -350,19 +479,23 @@ function disposeSubtree(effect: EffectContext): void {
 
 /**
  * Public dispose entry point: detach `effect` from its parent's `children`
- * list, then dispose the subtree rooted at `effect`. The detach step lives
+ * set, then dispose the subtree rooted at `effect`. The detach step lives
  * only here so the recursion (which doesn't need it — the parent clears
- * `children.length = 0` itself) cannot splice entries out of the array
- * it is iterating. The splice-during-iter shape was the root cause of
+ * the whole set itself via `children.clear()`) cannot mutate the set
+ * it is iterating. The mutate-during-iterate shape was the root cause of
  * #1366; separating the two responsibilities makes it structurally
  * unreachable.
+ *
+ * `Set.delete` is O(1), so detaching one child from a parent that owns many
+ * siblings (e.g. `mapArray` disposing a cleared/replaced keyed list one
+ * `createRoot` scope at a time) no longer costs an `indexOf` scan over the
+ * remaining siblings — that scan was O(n) per disposal, O(n²) for the batch.
  */
 function disposeEffect(effect: EffectContext): void {
   if (effect.disposed) return
 
   if (effect.owner) {
-    const idx = effect.owner.children.indexOf(effect)
-    if (idx >= 0) effect.owner.children.splice(idx, 1)
+    effect.owner.children?.delete(effect)
   }
 
   disposeSubtree(effect)
@@ -382,9 +515,10 @@ export function createRoot<T>(fn: (dispose: () => void) => T): T {
   const root: EffectContext = {
     fn: () => {},
     cleanup: null,
-    dependencies: new Set(),
+    dependencies: new Map(),
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: profilerSink ? `r${++subscriberSeq}` : '',
@@ -395,7 +529,7 @@ export function createRoot<T>(fn: (dispose: () => void) => T): T {
 
   if (profilerSink) profilerSink.effectCreate(root.id, 'root')
 
-  if (Owner) Owner.children.push(root)
+  if (Owner) registerChild(Owner, root)
 
   const prevOwner = Owner
   const prevListener = Listener
@@ -425,9 +559,10 @@ export function createDisposableEffect(fn: EffectFn, __bfId?: string): () => voi
       return fn()
     },
     cleanup: null,
-    dependencies: new Set(),
+    dependencies: new Map(),
+    gen: 0,
     owner: Owner,
-    children: [],
+    children: null,
     disposed: false,
     runCount: 0,
     id: __bfId ?? (profilerSink ? `e${++subscriberSeq}` : ''),
@@ -438,7 +573,7 @@ export function createDisposableEffect(fn: EffectFn, __bfId?: string): () => voi
 
   if (profilerSink) profilerSink.effectCreate(effect.id, effect.kind)
 
-  if (Owner) Owner.children.push(effect)
+  if (Owner) registerChild(Owner, effect)
 
   runEffect(effect)
 

package/src/runtime/component.ts

@@ -463,12 +463,23 @@ export function escapeAttr(value: unknown): string {
  * slots). The HTML spec only requires `& < >` in text, but the SSR
  * adapters (Hono) escape text with the same set as attribute values
  * (`& " ' < >`), and the fixture-hydrate / CSR-conformance layer requires
- * byte-parity with the server-rendered output — so this delegates to
- * `escapeAttr`. Kept as a distinct export so generated code reads
+ * byte-parity with the server-rendered output — so the escaping delegates
+ * to `escapeAttr`. Kept as a distinct export so generated code reads
  * `escapeText(...)` at text sites (self-documenting) and so the two
- * contexts can diverge later without touching call sites.
+ * contexts can diverge (as they now do for nullish) without touching call
+ * sites.
+ *
+ * A nullish value renders as empty text — the JSX/Solid semantics the Hono
+ * SSR reference follows (`{undefined}` / `{null}` produce no text), and
+ * what the reactive text-update path already does (`dynamic-text.ts` and
+ * `client-marker.ts` both `String(value ?? '')`). Only this initial-render
+ * escape site used to stringify `undefined` / `null` into literal
+ * "undefined" / "null" text, so a bare `{props.x}` on an absent prop
+ * diverged from SSR at first paint (#2137). Non-nullish values (including
+ * `0` and `false`) keep their `String()` form, matching the reactive path.
  */
 export function escapeText(value: unknown): string {
+  if (value == null) return ''
   return escapeAttr(value)
 }
 

package/src/runtime/map-array.ts

@@ -72,7 +72,11 @@ function findLoopMarkers(
   if (markerId) {
     const startVal = loopStartMarker(markerId)
     const endVal = loopEndMarker(markerId)
-    for (const node of Array.from(container.childNodes)) {
+    // Walk via firstChild/nextSibling rather than Array.from(childNodes) —
+    // this runs on every un-cached lookup (see `resolveMarkers` in
+    // `mapArray`), so avoiding the intermediate array allocation matters
+    // for large sibling counts.
+    for (let node = container.firstChild; node; node = node.nextSibling) {
       if (node.nodeType !== Node.COMMENT_NODE) continue
       const value = (node as Comment).nodeValue
       if (value === startVal) start = node as Comment
@@ -81,7 +85,7 @@ function findLoopMarkers(
   } else {
     const startPrefix = `${BF_LOOP_START}:`
     const endPrefix = `${BF_LOOP_END}:`
-    for (const node of Array.from(container.childNodes)) {
+    for (let node = container.firstChild; node; node = node.nextSibling) {
       if (node.nodeType !== Node.COMMENT_NODE) continue
       const value = (node as Comment).nodeValue ?? ''
       if (!start && (value === BF_LOOP_START || value.startsWith(startPrefix))) {
@@ -140,14 +144,61 @@ function findItemRanges(start: Comment, end: Comment): Array<{
 }
 
 /**
- * Insert a scope's nodes into the container in their canonical order
+ * Insert a scope's nodes into `target` in their canonical order
  * (startMarker → primaryEl → extras). Idempotent — `insertBefore` on a
  * node already at the target position is a no-op.
+ *
+ * `target` is typed as `Node` (not `HTMLElement`) so callers can pass a
+ * `DocumentFragment` to batch several scopes into one subsequent
+ * `container.insertBefore(fragment, anchor)` call — see the minimal-move
+ * reorder in `mapArray`.
  */
-function insertScope<T>(scope: ItemScope<T>, container: HTMLElement, anchor: Node | null): void {
-  if (scope.startMarker) container.insertBefore(scope.startMarker, anchor)
-  container.insertBefore(scope.primaryEl, anchor)
-  for (const ex of scope.extras) container.insertBefore(ex, anchor)
+function insertScope<T>(scope: ItemScope<T>, target: Node, anchor: Node | null): void {
+  if (scope.startMarker) target.insertBefore(scope.startMarker, anchor)
+  target.insertBefore(scope.primaryEl, anchor)
+  for (const ex of scope.extras) target.insertBefore(ex, anchor)
+}
+
+/**
+ * Longest increasing subsequence, returned as ascending indices into `arr`.
+ * O(n log n) patience sorting with predecessor backtracking.
+ *
+ * Used by `mapArray`'s reorder step: `arr` holds, for each already-attached
+ * scope encountered while walking the live DOM in its current order, the
+ * scope's index in the *desired* order. The LIS of that array is the
+ * largest set of scopes whose relative order already matches the desired
+ * order — those scopes can stay exactly where they are; every other scope
+ * (plus any brand-new one) needs to move. This is the same strategy
+ * keyed-diff reconcilers in the udomdiff/Solid family use to turn an
+ * arbitrary reorder into a minimal set of DOM moves.
+ */
+function longestIncreasingSubsequenceIndices(arr: number[]): number[] {
+  const n = arr.length
+  if (n === 0) return []
+  // tails[k] = index into `arr` of the smallest possible tail value for an
+  // increasing subsequence of length k + 1.
+  const tails: number[] = []
+  const predecessors: number[] = new Array(n).fill(-1)
+  for (let i = 0; i < n; i++) {
+    const value = arr[i]
+    let lo = 0
+    let hi = tails.length
+    while (lo < hi) {
+      const mid = (lo + hi) >>> 1
+      if (arr[tails[mid]] < value) lo = mid + 1
+      else hi = mid
+    }
+    if (lo > 0) predecessors[i] = tails[lo - 1]
+    if (lo === tails.length) tails.push(i)
+    else tails[lo] = i
+  }
+  const result: number[] = new Array(tails.length)
+  let k = tails[tails.length - 1]
+  for (let i = tails.length - 1; i >= 0; i--) {
+    result[i] = k
+    k = predecessors[k]
+  }
+  return result
 }
 
 /** Detach all of a scope's nodes from the DOM. */
@@ -229,11 +280,29 @@ export function mapArray<T>(
   const scopes = new Map<string, ItemScope<T>>()
   let hydrated = false
 
+  // Loop boundary markers are structural — this module never removes or
+  // re-inserts them — so they can be found once and reused across every
+  // effect run instead of rescanning `container.childNodes` on every
+  // reconcile. `isConnected` guards against the (unusual) case of the
+  // container itself being torn down and rebuilt out from under this
+  // closure; in that case we fall back to a fresh lookup.
+  let cachedStart: Comment | null = null
+  let cachedEnd: Comment | null = null
+  const resolveMarkers = (): { start: Comment | null; end: Comment | null } => {
+    if (cachedStart && cachedEnd && cachedStart.isConnected && cachedEnd.isConnected) {
+      return { start: cachedStart, end: cachedEnd }
+    }
+    const found = findLoopMarkers(container, markerId)
+    cachedStart = found.start
+    cachedEnd = found.end
+    return found
+  }
+
   createEffect(() => {
     const items = accessor()
     if (!items) return
 
-    const { start: startMarker, end: endMarker } = findLoopMarkers(container, markerId)
+    const { start: startMarker, end: endMarker } = resolveMarkers()
     const anchor = endMarker ?? null
 
     // --- First run: hydrate SSR-rendered children ---
@@ -315,6 +384,43 @@ export function mapArray<T>(
       }
     }
 
+    // --- Fast path: clearing the whole list ---
+    // When every existing scope is being removed, dispose them all and then
+    // remove their DOM in one bulk operation instead of one `.remove()` per
+    // scope. Loop markers (and their bracketing range) are always preserved.
+    if (items.length === 0) {
+      if (scopes.size > 0) {
+        for (const scope of scopes.values()) scope.dispose()
+        if (startMarker && endMarker) {
+          // Scoped (or per-item-marker) range: the space between the
+          // markers is owned entirely by this list, so a single Range
+          // delete clears it without touching the markers themselves.
+          const range = document.createRange()
+          range.setStartAfter(startMarker)
+          range.setEndBefore(endMarker)
+          range.deleteContents()
+        } else {
+          // Unscoped: the list owns the container's children directly.
+          // Verify no foreign siblings snuck in before nuking everything —
+          // counting is O(n), same order as the disposal loop above, so it
+          // doesn't add an asymptotically new cost.
+          let expectedNodeCount = 0
+          for (const scope of scopes.values()) {
+            expectedNodeCount += 1 + scope.extras.length + (scope.startMarker ? 1 : 0)
+          }
+          let actualNodeCount = 0
+          for (let node = container.firstChild; node; node = node.nextSibling) actualNodeCount++
+          if (actualNodeCount === expectedNodeCount) {
+            container.textContent = ''
+          } else {
+            for (const scope of scopes.values()) removeScope(scope)
+          }
+        }
+        scopes.clear()
+      }
+      return
+    }
+
     // --- Key-based diff ---
     const newKeys = new Set<string>()
     // Distinct from `newKeys`: tracks which keys have ALREADY emitted a
@@ -365,30 +471,67 @@ export function mapArray<T>(
       }
     }
 
-    // Reconcile DOM order: skip insertBefore entirely when order is unchanged.
+    // --- Reconcile DOM order: minimal-move, LIS-based ---
+    //
+    // Rather than "any mismatch reinserts every scope", find the longest
+    // run of already-attached scopes that are already in the right
+    // relative order — the longest increasing subsequence of their desired
+    // positions, walking the live DOM once — and never touch those. Every
+    // other scope (scopes that need to move, plus brand-new scopes not yet
+    // in the DOM at all) is grouped into contiguous runs and inserted with
+    // ONE insertBefore per run (a DocumentFragment when a run has more than
+    // one scope). A swap of two rows becomes exactly two single-scope
+    // moves; a bulk append becomes one fragment insert that never touches
+    // the existing rows; an unchanged order performs zero DOM mutations.
+    //
     // Moving elements via insertBefore causes detach/reattach which makes
-    // focused inputs lose focus (controlled input flicker). Each scope can
-    // span multiple nodes (startMarker + primaryEl + extras), so the walk
-    // consumes the full range when a primaryEl matches.
-    let inOrder = true
-    let checkNode: Node | null = startMarker ? startMarker.nextSibling : container.firstChild
-    for (const scope of desiredOrder) {
-      // Skip non-element nodes (comments, text) when looking for the primary element.
-      while (checkNode && checkNode.nodeType !== Node.ELEMENT_NODE) checkNode = checkNode.nextSibling
-      if (checkNode !== scope.primaryEl) { inOrder = false; break }
-      // Advance past the rest of the scope's extras.
-      checkNode = checkNode.nextSibling
-      for (let i = 0; i < scope.extras.length; i++) {
-        while (checkNode && checkNode.nodeType !== Node.ELEMENT_NODE) checkNode = checkNode.nextSibling
-        if (checkNode !== scope.extras[i]) { inOrder = false; break }
-        checkNode = checkNode.nextSibling
-      }
-      if (!inOrder) break
+    // focused inputs lose focus (controlled input flicker) — scopes kept
+    // stationary by the LIS are provably never detached, so that guarantee
+    // still holds for them.
+    const primaryElToDesiredIndex = new Map<HTMLElement, number>()
+    for (let i = 0; i < desiredOrder.length; i++) {
+      primaryElToDesiredIndex.set(desiredOrder[i].primaryEl, i)
     }
-    if (!inOrder) {
-      for (const scope of desiredOrder) {
-        insertScope(scope, container, anchor)
+
+    // Old DOM order of currently-attached scopes, expressed as desired-order
+    // indices. Brand-new scopes aren't attached yet, so they simply never
+    // appear here — which is exactly what marks them for insertion below.
+    // Single O(n) walk, no Array.from allocation.
+    const domOrderIndices: number[] = []
+    for (
+      let node: Node | null = startMarker ? startMarker.nextSibling : container.firstChild;
+      node && node !== anchor;
+      node = node.nextSibling
+    ) {
+      if (node.nodeType !== Node.ELEMENT_NODE) continue
+      const idx = primaryElToDesiredIndex.get(node as HTMLElement)
+      if (idx !== undefined) domOrderIndices.push(idx)
+    }
+
+    const stationary = new Array<boolean>(desiredOrder.length).fill(false)
+    for (const pos of longestIncreasingSubsequenceIndices(domOrderIndices)) {
+      stationary[domOrderIndices[pos]] = true
+    }
+
+    let i = 0
+    while (i < desiredOrder.length) {
+      if (stationary[i]) { i++; continue }
+      let j = i
+      while (j < desiredOrder.length && !stationary[j]) j++
+      // Insert this run immediately before the next stationary scope (which
+      // is already exactly where it needs to be), or before the loop's
+      // trailing anchor when the run reaches the end of the list.
+      const before = j < desiredOrder.length
+        ? (desiredOrder[j].startMarker ?? desiredOrder[j].primaryEl)
+        : anchor
+      if (j - i === 1) {
+        insertScope(desiredOrder[i], container, before)
+      } else {
+        const runFragment = document.createDocumentFragment()
+        for (let k = i; k < j; k++) insertScope(desiredOrder[k], runFragment, null)
+        container.insertBefore(runFragment, before)
       }
+      i = j
     }
   }, bfId)
 }