@abide/abide 0.111.0 → 0.112.0

package/src/ui/Level.ts

@@ -6,7 +6,7 @@ import {
 } from '#shared/reactive/share.ts'
 import { untracked } from '#shared/reactive/tracking.ts'
 import { type Disposer, watchTracked } from '#shared/reactive/watch.ts'
-import { applyHead, withdrawHead } from './applyHead.ts'
+import { reconciled, reconcileHead } from './reconcileHead.ts'
 import { isEmptyRegion, type Region } from './regions.ts'
 import type { Scope } from './Scope.ts'
 
@@ -43,10 +43,10 @@ export class Level {
      */
     share: ShareScope | null = null
     /**
-     * The head the components built on the client contributed while this level mounts, applied
-     * once its `mount` returns; `undefined` outside one, where a contribution applies at once.
+     * Whether a component built on the client contributed a head while this level mounts, which is
+     * reconciled once its `mount` returns; `undefined` outside one, where it is reconciled at once.
      */
-    unapplied: string | undefined = undefined
+    unapplied: boolean | undefined = undefined
     /**
      * This level's own head markup as it reads now; `undefined` for a level with no `<head>`.
      *
@@ -82,11 +82,31 @@ export class Level {
         this.share = share
     }
 
-    /** The level's head as it reads now: its own, then every component's, deepest last (39.4). */
-    headMarkup(): string {
-        let markup = this.head?.() ?? ''
-        for (const one of this.contributed) markup += one.head()
-        return markup
+    /** Reconciles the document head from the chain this level stands in (`reconcileHead`). */
+    reconcile(): void {
+        Level.reconcile(this.levels)
+    }
+
+    /**
+     * Reconciles the document head from `levels`: each level's own head, then every component's in
+     * the order they mounted, outermost first — so the deepest wins by key (39.4). Read untracked:
+     * a head read here is followed by its own watch, not by whatever wrote.
+     */
+    static reconcile(levels: Level[]): void {
+        reconcileHead(untracked(Level.chain, levels, undefined))
+    }
+
+    /** Every contributor in `levels` and the head it reads now, outermost first. */
+    static chain(
+        levels: Level[],
+        _?: undefined,
+    ): [who: object, text: string][] {
+        const chain: [object, string][] = []
+        for (const level of levels) {
+            if (level.head !== undefined) chain.push([level, level.head()])
+            for (const one of level.contributed) chain.push([one, one.head()])
+        }
+        return chain
     }
 
     /**
@@ -100,78 +120,18 @@ export class Level {
         const contribution = new HeadContribution(this, head)
         this.contributed.add(contribution)
         contribution.dispose = watchTracked(() => contribution.follow())
-        // Batched while this level mounts; applied at once by an arm or a row mounted after it,
-        // under whatever is deeper (39.4) — only the levels below, since it was added last here.
-        const text = contribution.last ?? ''
+        // Batched while this level mounts; reconciled at once for an arm or a row mounted after it.
         if (isEmptyRegion(region))
-            if (this.unapplied !== undefined) this.unapplied += text
-            else
-                applyHead(
-                    text,
-                    untracked(Level.headsOf, this.levels, this.at + 1),
-                )
+            if (this.unapplied !== undefined) this.unapplied = true
+            else this.reconcile()
         return contribution
     }
 
-    /**
-     * Writes `text` over the `last` that `contributor` in this level wrote.
-     *
-     * 39.4 — IT YIELDS TO EVERY CONTRIBUTOR DEEPER, read as they stand at the write and untracked:
-     * the components that contributed after it, then every level below, so a layout's
-     * `<title>{site}</title>` moving does not write over the page's `<title>`, and the page's head
-     * moving wakes only the page's own watch. 39.15 — its keyless nodes replace the ones it wrote.
-     */
-    reapply(text: string, last: string, contributor: HeadContribution): void {
-        applyHead(
-            text,
-            untracked(Level.headsAfter, this, contributor),
-            last,
-            // Read only where a key `last` held is withdrawn.
-            () => untracked(Level.headsBefore, this, contributor),
-        )
-    }
-
-    /**
-     * The heads either side of `contribution` in `level` (`headsBefore`, `headsAfter`). One `level`
-     * does not hold is the level's own head (`followHead`), which stands before every component's.
-     */
-    static headsAround(
-        level: Level,
-        contribution: HeadContribution,
-    ): [string, string] {
-        return [
-            Level.headsBefore(level, contribution),
-            Level.headsAfter(level, contribution),
-        ]
-    }
-
-    /** Every level above `level`, then what stands before `contribution` in it. */
-    static headsBefore(level: Level, contribution: HeadContribution): string {
-        let outer = Level.headsOf(level.levels, 0, level.at)
-        if (!level.contributed.has(contribution)) return outer
-        outer += level.head?.() ?? ''
-        for (const one of level.contributed) {
-            if (one === contribution) break
-            outer += one.head()
-        }
-        return outer
-    }
-
-    /** What stands after `contribution` in `level`, then every level below it. */
-    static headsAfter(level: Level, contribution: HeadContribution): string {
-        let inner = ''
-        let past = !level.contributed.has(contribution)
-        for (const one of level.contributed)
-            if (past) inner += one.head()
-            else if (one === contribution) past = true
-        return inner + Level.headsOf(level.levels, level.at + 1)
-    }
-
     /**
      * 39.13 — A HEAD THAT READS A VALUE FOLLOWS IT for as long as the level is mounted, which is
      * `scope`'s life. The first run only subscribes: the head it would write is already there,
      * written by the server or applied by the level's mount ahead of its fill (39.6). Followed as a
-     * component's is, by a contribution the level does not hold (`headsAround`).
+     * component's is, by a contribution the level does not hold.
      */
     followHead(scope: Scope): void {
         const own = new HeadContribution(this, this.head as () => string)
@@ -190,8 +150,8 @@ export class Level {
             values: new Map(),
             level: this,
         })
-        this.unapplied = ''
-        let unapplied: string
+        this.unapplied = false
+        let unapplied: boolean
         let result: Result
         try {
             result = run()
@@ -200,20 +160,9 @@ export class Level {
             this.unapplied = undefined
             leaveShare(back)
         }
-        // 39.4 — under whatever a level below wrote while this one was mounting: the page in a
-        // layout's `<slot/>` applied its own head ahead of the components that layout holds.
-        if (unapplied !== '')
-            applyHead(unapplied, Level.headsOf(this.levels, this.at + 1))
+        if (unapplied) this.reconcile()
         return result
     }
-
-    /** The heads of `levels` from `from` to `to`, outermost first. */
-    static headsOf(levels: Level[], from: number, to = levels.length): string {
-        let markup = ''
-        for (let at = from; at < to; at += 1)
-            markup += (levels[at] as Level).headMarkup()
-        return markup
-    }
 }
 
 /**
@@ -236,24 +185,23 @@ export class HeadContribution {
     follow(): void {
         const text = this.head()
         const last = this.last
-        if (last !== undefined && text !== last)
-            this.level.reapply(text, last, this)
         this.last = text
+        if (last !== undefined && text !== last) this.level.reconcile()
     }
 
     /**
-     * 39.14 — WITHDRAWN AS A LEAVING LEVEL'S IS, its keys going back to what stands outside it and
-     * staying where something deeper holds them. Nothing where the level is leaving too: the router
-     * withdraws the whole level once, and cleared its contributions before stopping it.
+     * 39.14 — WITHDRAWN AS A LEAVING LEVEL'S IS: the chain is reconciled without it. Adopted first
+     * where the server painted it and nothing has reconciled since, so what it painted is known to
+     * be its own. Nothing where the level is leaving too: the router reconciles the whole chain
+     * once, and cleared its contributions before stopping it.
      */
     stop(): void {
         this.dispose?.()
         const level = this.level
         if (!level.contributed.has(this)) return
-        withdrawHead(this.last ?? '', () =>
-            untracked(Level.headsAround, level, this),
-        )
+        if (!reconciled(this)) level.reconcile()
         level.contributed.delete(this)
+        level.reconcile()
     }
 }
 

package/src/ui/Router.ts

@@ -10,7 +10,6 @@ import { arrive, route } from '#shared/route.ts'
 import { rankRoutes, type Segment } from '#shared/routePattern.ts'
 import { setUpLevels } from '#shared/setUpLevels.ts'
 import { paintedCallsLanded } from '#shared/takeEarlyCall.ts'
-import { withdrawHead } from './applyHead.ts'
 import { LAYER_MOUNT, LAYER_NAVIGATE } from './LAYER_NAMES.ts'
 import { Level } from './Level.ts'
 import { beginLayer, endLayer } from './measureLayer.ts'
@@ -469,12 +468,9 @@ export class Router {
             // table written by hand may answer with a fresh record each call. The function a module
             // exports is the same function either way.
             const shared = this.sharedLevels(arriving)
-            // READ BEFORE THE STOP, while the leaving levels' heads read what they read on screen.
-            const leaving = Level.headsOf(
-                this.levels,
-                shared,
-                this.levels.length,
-            )
+            // RECONCILED BEFORE THE STOP, while the leaving levels' heads read what they read on
+            // screen: what the server painted for them is adopted as theirs, so it leaves with them.
+            Level.reconcile(this.levels)
             const left: Scroll = [scrollX, scrollY]
             this.stopFrom(shared)
             // The region the arriving part goes into: the page region where nothing is kept, and
@@ -495,11 +491,8 @@ export class Router {
             // outermost first; a kept layout is not mounted again, so neither is its head.
             this.mountChain(target, found, arriving, shared, into)
             // 39.14 — what the leaving levels keyed and the arriving ones did not goes back to the
-            // nearest kept layout's, else leaves.
-            withdrawHead(leaving, () => [
-                Level.headsOf(this.levels, 0, shared),
-                Level.headsOf(this.levels, shared, this.levels.length),
-            ])
+            // nearest kept layout's, else leaves; their keyless nodes leave with them (39.16).
+            Level.reconcile(this.levels)
             // 30.29 — where the entry was left, on a history step; else the top of the page, or —
             // as the browser does on a load — the fragment's element.
             if (step.scroll !== undefined)
@@ -542,11 +535,13 @@ export class Router {
     private stopFrom(at: number): void {
         for (let index = this.levels.length - 1; index >= at; index -= 1) {
             const level = this.levels[index] as Level
+            // OUT OF THE CHAIN BEFORE IT STOPS, so a slot stop it fires on the way finds it gone
+            // (`release`) and leaves the head to whoever stopped it.
+            this.levels.length = index
             // The level's head leaves whole, so none of its components withdraws its own.
             level.contributed.clear()
             level.scope?.stop()
         }
-        this.levels.length = at
     }
 
     /**
@@ -629,7 +624,11 @@ export class Router {
     private release(level: Level, at: number): void {
         if (this.levels[at] !== level) return
         level.slot = undefined
+        // 39.14, 39.16 — THE LEVELS BELOW LEAVE WITH THE SLOT'S REGION, and their head with them:
+        // reconciled first, so what the server painted for them is adopted as theirs.
+        Level.reconcile(this.levels)
         this.stopFrom(at + 1)
+        Level.reconcile(this.levels)
     }
 
     /**

package/src/ui/bindGroup.ts

@@ -0,0 +1,41 @@
+import {
+    boundValue,
+    groupHolds,
+    heldValue,
+    writeBound,
+} from '#shared/boundValue.ts'
+import type { Scope } from './Scope.ts'
+
+/**
+ * Keeps a radio or checkbox's `checked` in step with a `bind:group` value, both ways.
+ *
+ * 32.8 — COMPARED AGAINST THE INPUT'S OWN VALUE, read through `own` — the `value` attribute's
+ * expression, or its static text, or `on` where it has none — rather than off the element: a
+ * `value={option.id}` that moves reruns the compare, and a number stays a number in the group
+ * where the element's `value` property would have handed back its text.
+ */
+export function bindGroup(
+    element: Element,
+    operand: unknown,
+    own: () => unknown,
+    scope: Scope,
+): void {
+    const bound = element as HTMLInputElement
+    scope.watch(() => {
+        const checked = groupHolds(boundValue(operand), own())
+        bound.checked = checked
+        bound.toggleAttribute('checked', checked)
+    })
+    bound.addEventListener('change', () => {
+        const value = own()
+        const standing = heldValue(operand)
+        // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
+        if (Array.isArray(standing)) {
+            const next: unknown[] = []
+            for (const member of standing)
+                if (member !== value) next.push(member)
+            if (bound.checked) next.push(value)
+            writeBound(operand, next)
+        } else if (bound.checked) writeBound(operand, value)
+    })
+}

package/src/ui/bindProperty.ts

@@ -8,7 +8,6 @@
 
 import {
     boundValue,
-    groupHolds,
     heldValue,
     selectHolds,
     writeBound,
@@ -20,7 +19,7 @@ type Bound = HTMLInputElement & HTMLDetailsElement
 
 export function bindProperty(
     element: Element,
-    kind: 'value' | 'checked' | 'open' | 'group',
+    kind: 'value' | 'checked' | 'open',
     operand: unknown,
     scope: Scope,
 ): void {
@@ -29,25 +28,6 @@ export function bindProperty(
         bindValue(bound, operand, scope)
         return
     }
-    if (kind === 'group') {
-        scope.watch(() => {
-            const checked = groupHolds(boundValue(operand), bound.value)
-            bound.checked = checked
-            bound.toggleAttribute('checked', checked)
-        })
-        bound.addEventListener('change', () => {
-            const standing = heldValue(operand)
-            // A checkbox group holds a list, and keeps its order; a radio group holds the one value.
-            if (Array.isArray(standing)) {
-                const next: unknown[] = []
-                for (const member of standing)
-                    if (member !== bound.value) next.push(member)
-                if (bound.checked) next.push(bound.value)
-                writeBound(operand, next)
-            } else if (bound.checked) writeBound(operand, bound.value)
-        })
-        return
-    }
     // `checked` on an input, `open` on a `<details>`.
     const property = kind
     scope.watch(() => {

package/src/ui/index.ts

@@ -15,6 +15,8 @@
 // and every `class:name` on an element is merged by the server into the single `style` or `class`
 // attribute beside the author's own, so neither of those two attributes can be written back whole
 // — the CSSOM and `classList` are what touch the one declaration or the one token a binding owns.
+// A `class={expr}` or `style={expr}` beside its directives is the same answer once more
+// (`setClassGroup`, `setStyleGroup`, 32.71): the group writes what it owns, and nothing else.
 // A list is reached through `listAt` and `updateList` alone, so its rows' shape is no caller's.
 // Nothing that finds a node by something added to the document, because a compiler may not invent
 // structure an author's CSS or queries can see.
@@ -37,10 +39,8 @@ export {
     runHere,
     textHere,
 } from './adoptWalk.ts'
-// 39.6 — a module mounted into an empty region applies its own head, from inside its instance
-// (`emitClient`); only a module that carries its own markup and a `<head>` imports it.
-export { applyHead } from './applyHead.ts'
 export { bindElement } from './bindElement.ts'
+export { bindGroup } from './bindGroup.ts'
 export { bindProperty } from './bindProperty.ts'
 export { bindSpread } from './bindSpread.ts'
 export { escapeless } from './escapeless.ts'
@@ -60,7 +60,9 @@ export { itemOf, noUpdate, replaceRow, rowCell } from './rows.ts'
 export { EMPTY_SCOPE, Scope } from './Scope.ts'
 export { setAttribute } from './setAttribute.ts'
 export { setClass } from './setClass.ts'
+export { setClassGroup } from './setClassGroup.ts'
 export { setMarkup } from './setMarkup.ts'
+export { setStyleGroup } from './setStyleGroup.ts'
 export { setStyleProperty } from './setStyleProperty.ts'
 export { setText } from './setText.ts'
 export { TryRegion } from './TryRegion.ts'

package/src/ui/reconcileHead.ts

@@ -0,0 +1,215 @@
+// 39.4–39.6, 39.13–39.17 — THE DOCUMENT HEAD HAS ONE WRITER. Every routed level and every component
+// with a `<head>` is a contributor, and the head is reconciled from all of them at once, in the
+// chain's order — each level's own head, then its components' in the order they mounted — rather
+// than patched by each with what it can learn of the others.
+//
+// A KEY IS WON BY THE LAST CONTRIBUTOR HOLDING IT (39.4), and one nobody holds any more leaves or
+// goes back to whoever still does (39.14) because that is what the chain now says. A KEYLESS NODE
+// IS ITS CONTRIBUTOR'S, held by reference (39.5, 39.15, 39.16): two contributors writing the same
+// `<style>` each own their own, and one leaving takes its own with it — told apart by where they
+// stand, never by being equal.
+//
+// NOTHING IS ADDED TO MARK OWNERSHIP, and nothing a contributor did not write is touched: a node the
+// server painted is ADOPTED the first time its contributor is reconciled, matched in chain order.
+
+import { headKeyOf } from '#shared/headKeyOf.ts'
+import { markupNodes } from './parseMarkup.ts'
+
+/** One contributor's head, parsed once per text it reads. */
+type Parsed = { text: string; keyed: Map<string, Element>; keyless: Node[] }
+
+const parsedBy = new WeakMap<object, Parsed>()
+/** The keyless nodes standing in the head for each contributor, in its order. */
+const ownedBy = new Map<object, Node[]>()
+/**
+ * The element standing for each key the chain held at the last reconcile, so one it drops is
+ * withdrawn — that element, and never another holding the same key that nothing here wrote.
+ */
+const keyedNodes = new Map<string, Element>()
+
+/** Whether `who` has been reconciled — adopted or written — since it joined. */
+export function reconciled(who: object): boolean {
+    return ownedBy.has(who)
+}
+
+/**
+ * Writes the head the chain contributes: `chain` is every contributor and the head it reads now,
+ * outermost first.
+ *
+ * Only what moved is written. A key standing as it is wanted, and a keyless node equal to the one
+ * its contributor wants there, are left standing — a `<link rel=stylesheet>` put back as itself is
+ * refetched and flashes the page unstyled, and a `<script>` would run again.
+ */
+export function reconcileHead(
+    chain: readonly (readonly [who: object, text: string])[],
+): void {
+    const head = document.head
+    const present = new Set<object>()
+    const wanted = new Map<string, Element>()
+    for (const [who, text] of chain) {
+        present.add(who)
+        for (const [key, element] of parsedOf(head, who, text).keyed)
+            wanted.set(key, element)
+    }
+    const standing = standingKeys(head)
+    for (const [key, node] of keyedNodes)
+        if (!wanted.has(key)) {
+            node.remove()
+            keyedNodes.delete(key)
+        }
+    for (const [key, element] of wanted) {
+        let at = standing.get(key)
+        if (at === undefined) {
+            at = element.cloneNode(true) as Element
+            head.appendChild(at)
+        } else if (at.outerHTML !== element.outerHTML) {
+            const next = element.cloneNode(true) as Element
+            head.replaceChild(next, at)
+            at = next
+        }
+        keyedNodes.set(key, at)
+    }
+
+    for (const [who, nodes] of ownedBy)
+        if (!present.has(who)) {
+            for (const node of nodes) node.parentNode?.removeChild(node)
+            ownedBy.delete(who)
+        }
+    const claimed = new Set<Node>()
+    for (const nodes of ownedBy.values())
+        for (const node of nodes) claimed.add(node)
+    let previous: Node | null = null
+    for (let at = 0; at < chain.length; at += 1) {
+        const who = (chain[at] as readonly [object, string])[0]
+        const wants = (parsedBy.get(who) as Parsed).keyless
+        const owned = ownedBy.get(who) ?? adopt(head, wants, claimed)
+        const next: Node[] = []
+        for (let index = 0; index < wants.length; index += 1) {
+            const want = wants[index] as Node
+            const have = owned[index]
+            let node: Node
+            if (have?.isEqualNode(want) === true) node = have as Node
+            else {
+                node = runnable(want.cloneNode(true))
+                if (have !== undefined) head.replaceChild(node, have)
+                else
+                    head.insertBefore(
+                        node,
+                        previous === null
+                            ? firstOwnedAfter(chain, at)
+                            : previous.nextSibling,
+                    )
+            }
+            next.push(node)
+            previous = node
+        }
+        for (let index = wants.length; index < owned.length; index += 1)
+            (owned[index] as Node).parentNode?.removeChild(owned[index] as Node)
+        ownedBy.set(who, next)
+    }
+}
+
+/** `who`'s head parsed, from the cache while it reads the same text. */
+function parsedOf(head: HTMLHeadElement, who: object, text: string): Parsed {
+    const cached = parsedBy.get(who)
+    if (cached !== undefined && cached.text === text) return cached
+    const parsed: Parsed = { text, keyed: new Map(), keyless: [] }
+    for (const node of markupNodes(head, text)) {
+        const key = node.nodeType === 1 ? headKey(node as Element) : undefined
+        if (key === undefined) parsed.keyless.push(node)
+        else parsed.keyed.set(key, node as Element)
+    }
+    parsedBy.set(who, parsed)
+    return parsed
+}
+
+/**
+ * The nodes the server painted for a contributor reconciled for the first time: each one it wants,
+ * the first equal node nobody has claimed, in order. Contributors are adopted in the chain's
+ * order, which is the order the server painted them in, so an earlier one claims the earlier of
+ * two equal nodes.
+ */
+function adopt(
+    head: HTMLHeadElement,
+    wants: Node[],
+    claimed: Set<Node>,
+): Node[] {
+    const adopted: Node[] = []
+    let from = head.firstChild
+    for (const want of wants) {
+        let found: Node | null = null
+        for (let at = from; at !== null; at = at.nextSibling)
+            if (!claimed.has(at) && at.isEqualNode(want)) {
+                found = at
+                break
+            }
+        if (found === null) break
+        claimed.add(found)
+        adopted.push(found)
+        from = found.nextSibling
+    }
+    return adopted
+}
+
+/** The first keyless node a contributor after `at` owns, which a new one goes before. */
+function firstOwnedAfter(
+    chain: readonly (readonly [object, string])[],
+    at: number,
+): Node | null {
+    for (let later = at + 1; later < chain.length; later += 1) {
+        const owned = ownedBy.get(
+            (chain[later] as readonly [object, string])[0],
+        )
+        if (owned !== undefined && owned.length > 0) return owned[0] as Node
+    }
+    return null
+}
+
+/**
+ * `node`, or — for a `<script>` — the same script made by the document rather than the parser.
+ *
+ * 39.17 — A PARSED SCRIPT NEVER RUNS. The fragment parser marks every `<script>` it makes "already
+ * started", and a clone keeps the mark, so a script it made and then moved into the head is inert
+ * where the server's, made by the document's own parser, ran. One made by `createElement` starts
+ * clear and runs on insertion. Keyless always (39.11 keys no `<script>`).
+ */
+function runnable(node: Node): Node {
+    if (node.nodeName !== 'SCRIPT') return node
+    const parsed = node as HTMLScriptElement
+    const script = document.createElement('script')
+    const attributes = parsed.attributes
+    for (let index = 0; index < attributes.length; index += 1) {
+        const attribute = attributes[index] as Attr
+        script.setAttribute(attribute.name, attribute.value)
+    }
+    script.text = parsed.text
+    return script
+}
+
+/**
+ * The head's keyed elements by key, the first holding each — 39.12 within the standing head: the
+ * FIRST element holding a key is the one a contribution replaces.
+ */
+function standingKeys(head: HTMLHeadElement): Map<string, Element> {
+    const standingByKey = new Map<string, Element>()
+    for (
+        let node = head.firstElementChild;
+        node !== null;
+        node = node.nextElementSibling
+    ) {
+        const key = headKey(node)
+        if (key !== undefined && !standingByKey.has(key))
+            standingByKey.set(key, node)
+    }
+    return standingByKey
+}
+
+/**
+ * The key a head element replaces by, or `undefined` for one that appends — 39.11 through the one
+ * grammar (`headKeyOf`), asked with a resolved attribute.
+ */
+function headKey(element: Element): string | undefined {
+    return headKeyOf(element.tagName.toLowerCase(), (name) =>
+        element.getAttribute(name),
+    )
+}

package/src/ui/setClassGroup.ts

@@ -0,0 +1,79 @@
+import { ASCII_WHITESPACE } from '#shared/ASCII_WHITESPACE.ts'
+import { textOf } from '#shared/Raw.ts'
+import { WORK } from '#shared/WORK.ts'
+
+/**
+ * 32.71 — what a `class={expr}` and the `class:name` directives beside it last wrote, as one
+ * group: the attribute's text and tokens, and the directives' conditions in the order `names`
+ * gives them.
+ *
+ * KEYED BY ELEMENT rather than declared by the mount, because a row's `update` writes the same
+ * element from a function of its own and both have to read one record.
+ */
+const owned = new WeakMap<
+    Element,
+    {
+        text: string | undefined
+        tokens: ReadonlySet<string>
+        conditions: readonly unknown[] | undefined
+        names: string[]
+    }
+>()
+
+// Every record's tokens until its `class` is first written, which replaces the set.
+const NO_TOKENS: ReadonlySet<string> = new Set()
+
+/**
+ * Writes a `class={expr}` and the `class:name` directives beside it as one group, through
+ * `classList`: `plain` is the attribute's value, and `conditions` each directive's, in the order
+ * of `names`, its classes space-separated.
+ *
+ * 32.71 — ONLY ITS OWN CLASSES, and only what moved: the attribute's tokens are re-split only when
+ * its text changed, a token it dropped comes off unless a directive holds it, and a directive is
+ * written only when its condition flipped, kept on while the attribute holds its class. Every
+ * write is guarded by `contains`, so the first run over a served page writes nothing.
+ */
+export function setClassGroup(
+    element: Element,
+    names: string,
+    plain: unknown,
+    conditions: readonly unknown[],
+): void {
+    WORK.bindingRuns += 1
+    let held = owned.get(element)
+    if (held === undefined) {
+        held = {
+            text: undefined,
+            tokens: NO_TOKENS,
+            conditions: undefined,
+            names: names.split(' '),
+        }
+        owned.set(element, held)
+    }
+    const classes = element.classList
+    const text = textOf(plain)
+    const was = held.conditions
+    if (text !== held.text) {
+        const next = new Set<string>()
+        for (const token of text.split(ASCII_WHITESPACE))
+            if (token !== '') next.add(token)
+        for (const token of held.tokens) {
+            if (next.has(token)) continue
+            const at = held.names.indexOf(token)
+            if (at !== -1 && conditions[at]) continue
+            if (classes.contains(token)) classes.remove(token)
+        }
+        for (const token of next)
+            if (!classes.contains(token)) classes.add(token)
+        held.text = text
+        held.tokens = next
+    }
+    for (let at = 0; at < held.names.length; at += 1) {
+        const on = Boolean(conditions[at])
+        if (was !== undefined && Boolean(was[at]) === on) continue
+        const name = held.names[at] as string
+        const wanted = on || held.tokens.has(name)
+        if (classes.contains(name) !== wanted) classes.toggle(name, wanted)
+    }
+    held.conditions = conditions
+}