@abide/abide 0.111.0 → 0.112.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @abide/abide
 
+## 0.112.0
+
+### Minor Changes
+
+- cabe8d1: a class or style attribute beside class: and style: directives keeps moving and writes only its own classes and declarations, and an element where a bind: and something else both write its value is a build error ([`bbbfd81`](https://github.com/briancray/abide/commit/bbbfd810d817235ddb51b8c605756187e473719e))
+
+### Patch Changes
+
+- cabe8d1: one writer owns document.head — a keyless head node stands in its contributors' order, an equal one another contributor made stays when the first leaves, and a page's head leaves with its layout's slot ([`f21f687`](https://github.com/briancray/abide/commit/f21f68742efb463f7873a6aafc4482fd572363e7))
+
 ## 0.111.0
 
 ### Minor Changes

package/docs/REGISTRY.md

@@ -529,18 +529,18 @@ type Gated<Gate, Accepted> = [Schema<Accepted>] extends [Gate] ? never : Failed<
 | `{expr}` | Reactive text, escaped. | 32.1, 32.23 |
 | formatting whitespace | What a run of whitespace renders as. | 33.17, 33.18 |
 | `{raw(...)}` | Raw HTML. | 32.2, 32.25, 32.26, 32.30, 32.31, 32.70 |
-| `name={expr}` | A reactive attribute or property. | 32.3, 32.20, 32.23, 32.37 |
+| `name={expr}` | A reactive attribute or property. | 32.3, 32.20, 32.23, 32.37, 32.71 |
 | `on<event>={fn}` | A native listener on an element, and an ordinary prop on a component. | 32.4 |
-| `name="…{expr}…"` | An interpolated quoted value. | 32.3 |
-| `bind:value` | Two-way bind on an element. | 5.16, 32.5, 32.58, 32.59, 32.60, 32.61, 32.62 |
+| `name="…{expr}…"` | An interpolated quoted value. | 32.3, 32.71 |
+| `bind:value` | Two-way bind on an element. | 5.16, 32.5, 32.58, 32.59, 32.60, 32.61, 32.62, 32.72 |
 | `bind:prop={state}` | Hands a component prop the caller's `Reactive`, or a `{get, set}` pair, to write through. | 32.6, 33.6, 33.8, 14.18 |
-| `bind:checked` | A boolean bind on an input. | 32.7 |
-| `bind:open` | The same, on a `<details>`. | 32.7 |
-| `bind:group` | Radio or checkbox membership. | 32.8 |
+| `bind:checked` | A boolean bind on an input. | 32.7, 32.72 |
+| `bind:open` | The same, on a `<details>`. | 32.7, 32.72 |
+| `bind:group` | Radio or checkbox membership. | 32.8, 32.72 |
 | `bind:value={{get, set}}` | Two-way bind over an explicit accessor pair, on an element or a component. | 32.5, 32.6 |
 | `bind:element={Reactive<Element> \| ((element: Element) => void \| Disposer)}` | A node reference. | 32.9, 32.38, 32.66, 32.68, 32.69 |
-| `class:name={cond}` | Toggles a class. | 32.10 |
-| `style:prop={value}` | Sets one style property. | 32.10, 32.19 |
+| `class:name={cond}` | Toggles a class. | 32.10, 32.71 |
+| `style:prop={value}` | Sets one style property. | 32.10, 32.19, 32.71 |
 | `{...expr}` | Spreads props or attributes. | 32.11, 32.37, 33.12, 33.13 |
 | static template text | What an author writes outside a slot, in body text and in an attribute value. | 32.27, 32.28 |
 

package/docs/RULEBOOK.md

@@ -2003,6 +2003,15 @@ reading layout, querying its descendants or calling `focus()` acts on a connecte
 32.70 Markup the client parses for a slot holding a value branded by `raw`, a `{#if}` arm or a
 `{#for}` row MUST be parsed as the document's parser parses it inside the element it goes into.
 
+32.71 A `class` or `style` attribute beside a `class:name` or `style:prop` MUST keep moving (32.3)
+and MUST write only its own classes or declarations; a class either of them holds MUST stay on the
+element, and a style property MUST resolve as the server's merged attribute does — the attribute's
+declarations first, then each directive's in the tag's order.
+
+32.72 An element MUST be a build error where a `bind:` and something else both write its value: the
+attribute a `bind:name` names, `checked` beside `bind:group`, an `<option selected>` inside a
+`<select bind:value>`, or text inside a `<textarea bind:value>`.
+
 # 33. Props
 
 33.1 `props` MUST be callable from a `<script>` block only, and calling it from a `<script module>`
@@ -2674,8 +2683,9 @@ hydration woke before it settles; it MUST throw where the component was not impo
 39.4 `<head>` contributions MUST be merged by key, and the deepest contributor MUST win. The shell's
 `<head>` MUST be the outermost contributor.
 
-39.5 A `<head>` contribution with no merge key MUST append — in tree order among the contributions
-its level mounts with, and when it mounts for a component mounted after its level.
+39.5 A `<head>` contribution with no merge key MUST append, and MUST stand in its contributors'
+order — each level's own, then its components' in the order they mounted, outermost level first — a
+component mounted after its level included.
 
 39.6 On a client navigation the incoming page's keyed `<head>` contributions MUST replace the
 outgoing page's by key, and a layout's MUST NOT move.
@@ -2709,7 +2719,7 @@ contributor has that key.
 MUST replace, in place, the one that same contributor wrote before.
 
 39.16 A `<head>` contribution with no merge key MUST be removed when the page, layout or component
-that made it leaves.
+that made it leaves, and an equal one another contributor made MUST stay.
 
 39.17 A `<script>` a `<head>` contribution writes in a browser MUST run when it is written, as the
 one a server paints does, and MUST NOT run again while the same contributor writes it unchanged.

package/docs/abide.md

@@ -8628,18 +8628,18 @@ Generated surfaces: what is written in place rather than imported.
 | `{expr}` | Reactive text, escaped. | [32.1](/rulebook#32.1), [32.23](/rulebook#32.23) |
 | formatting whitespace | What a run of whitespace renders as. | [33.17](/rulebook#33.17), [33.18](/rulebook#33.18) |
 | `{raw(...)}` | Raw HTML. | [32.2](/rulebook#32.2), [32.25](/rulebook#32.25), [32.26](/rulebook#32.26), [32.30](/rulebook#32.30), [32.31](/rulebook#32.31), [32.70](/rulebook#32.70) |
-| `name={expr}` | A reactive attribute or property. | [32.3](/rulebook#32.3), [32.20](/rulebook#32.20), [32.23](/rulebook#32.23), [32.37](/rulebook#32.37) |
+| `name={expr}` | A reactive attribute or property. | [32.3](/rulebook#32.3), [32.20](/rulebook#32.20), [32.23](/rulebook#32.23), [32.37](/rulebook#32.37), [32.71](/rulebook#32.71) |
 | `on<event>={fn}` | A native listener on an element, and an ordinary prop on a component. | [32.4](/rulebook#32.4) |
-| `name="…{expr}…"` | An interpolated quoted value. | [32.3](/rulebook#32.3) |
-| `bind:value` | Two-way bind on an element. | [5.16](/rulebook#5.16), [32.5](/rulebook#32.5), [32.58](/rulebook#32.58), [32.59](/rulebook#32.59), [32.60](/rulebook#32.60), [32.61](/rulebook#32.61), [32.62](/rulebook#32.62) |
+| `name="…{expr}…"` | An interpolated quoted value. | [32.3](/rulebook#32.3), [32.71](/rulebook#32.71) |
+| `bind:value` | Two-way bind on an element. | [5.16](/rulebook#5.16), [32.5](/rulebook#32.5), [32.58](/rulebook#32.58), [32.59](/rulebook#32.59), [32.60](/rulebook#32.60), [32.61](/rulebook#32.61), [32.62](/rulebook#32.62), [32.72](/rulebook#32.72) |
 | `bind:prop={state}` | Hands a component prop the caller's `Reactive`, or a `{get, set}` pair, to write through. | [32.6](/rulebook#32.6), [33.6](/rulebook#33.6), [33.8](/rulebook#33.8), [14.18](/rulebook#14.18) |
-| `bind:checked` | A boolean bind on an input. | [32.7](/rulebook#32.7) |
-| `bind:open` | The same, on a `<details>`. | [32.7](/rulebook#32.7) |
-| `bind:group` | Radio or checkbox membership. | [32.8](/rulebook#32.8) |
+| `bind:checked` | A boolean bind on an input. | [32.7](/rulebook#32.7), [32.72](/rulebook#32.72) |
+| `bind:open` | The same, on a `<details>`. | [32.7](/rulebook#32.7), [32.72](/rulebook#32.72) |
+| `bind:group` | Radio or checkbox membership. | [32.8](/rulebook#32.8), [32.72](/rulebook#32.72) |
 | `bind:value={{get, set}}` | Two-way bind over an explicit accessor pair, on an element or a component. | [32.5](/rulebook#32.5), [32.6](/rulebook#32.6) |
 | `bind:element={Reactive<Element> \| ((element: Element) => void \| Disposer)}` | A node reference. | [32.9](/rulebook#32.9), [32.38](/rulebook#32.38), [32.66](/rulebook#32.66), [32.68](/rulebook#32.68), [32.69](/rulebook#32.69) |
-| `class:name={cond}` | Toggles a class. | [32.10](/rulebook#32.10) |
-| `style:prop={value}` | Sets one style property. | [32.10](/rulebook#32.10), [32.19](/rulebook#32.19) |
+| `class:name={cond}` | Toggles a class. | [32.10](/rulebook#32.10), [32.71](/rulebook#32.71) |
+| `style:prop={value}` | Sets one style property. | [32.10](/rulebook#32.10), [32.19](/rulebook#32.19), [32.71](/rulebook#32.71) |
 | `{...expr}` | Spreads props or attributes. | [32.11](/rulebook#32.11), [32.37](/rulebook#32.37), [33.12](/rulebook#33.12), [33.13](/rulebook#33.13) |
 | static template text | What an author writes outside a slot, in body text and in an attribute value. | [32.27](/rulebook#32.27), [32.28](/rulebook#32.28) |
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@abide/abide",
-    "version": "0.111.0",
+    "version": "0.112.0",
     "type": "module",
     "description": "Isomorphic type-safe framework for reactive async interfaces for humans and machines",
     "license": "MIT",

package/src/compiler/Lowering.ts

@@ -222,6 +222,11 @@ export class Lowering {
         }
     }
 
+    /** 32.67 — whether a position reads any row's item. */
+    readsAnItem(holder: object): boolean {
+        return this.holdsRead(holder, (read) => read.item !== -1)
+    }
+
     /** 32.67 — whether a position reads `block`'s item. */
     readsItem(holder: object, block: object): boolean {
         const item = this.itemOf(block)

package/src/compiler/classifyTemplate.ts

@@ -1,7 +1,9 @@
+import { ASCII_WHITESPACE } from '#shared/ASCII_WHITESPACE.ts'
 import { escapeAttribute, escapeQuote } from '#shared/escapeText.ts'
 import { isEventName } from '#shared/isEventName.ts'
 import { safeUrl } from '#shared/safeUrl.ts'
 import { URL_ATTRIBUTES } from '#shared/URL_ATTRIBUTES.ts'
+import { decodeCharacterReferences } from './decodeCharacterReferences.ts'
 import {
     type Attribute,
     bodiesOf,
@@ -90,8 +92,11 @@ export type ClassifiedAttribute = {
           kind: 'bound'
           bind: ValueBind
           reflects: 'value' | 'checked' | 'open' | undefined
-          /** 32.8 — a group member's own `value`, which the group is compared against. */
-          own: string
+          /**
+           * 32.8 — a group member's `value` attribute, which the group is compared against —
+           * `undefined` where it has none, and the input's value is then `on`.
+           */
+          own: Attribute | undefined
       }
     // 32.9 — the node itself, which a server has none of: written out it was `bind:element=""`,
     // inert and a tell. The client does not set it either; what the value takes is the element.
@@ -102,24 +107,39 @@ export type ClassifiedAttribute = {
     // 32.10, 32.19 — a member of a `class` or `style` merge group (`MergeGroup`). `group` is set on
     // the FIRST member only, where the whole group is written, which keeps the tag in the author's
     // attribute order. `toggles` is the one class or style property a directive's binding writes,
-    // and `undefined` for the author's own plain attribute — see where that is decided.
+    // or a shared group's whole value at its first member (32.71), named by the directives'
+    // classes or properties, and `undefined` for any other member — see where that is decided.
     | {
           kind: 'merged'
           group: MergeGroup | undefined
-          toggles: { write: 'class' | 'style'; name: string } | undefined
+          toggles:
+              | {
+                    write: 'class' | 'style' | 'classGroup' | 'styleGroup'
+                    name: string
+                }
+              | undefined
       }
 )
 
 /**
  * Every attribute of an element, classified, in the order the tag carries them.
  *
- * `lowering` answers `live` (`Lowering.isLive`).
+ * `lowering` answers `live` (`Lowering.isLive`), and whether a shared `class` group can move
+ * (`Lowering.readsAnItem`: a row's item read at its top level is not live, and a row's `update`
+ * writes it).
  */
 export function classifyAttributes(
     node: ElementNode,
-    lowering: { isLive(holder: object): boolean },
+    lowering: {
+        isLive(holder: object): boolean
+        readsAnItem(holder: object): boolean
+    },
 ): ClassifiedAttribute[] {
+    refuseTwoOwners(node)
     const groups = mergeGroupsOf(node)
+    const sharing: ReturnType<typeof sharingOf>[] = []
+    for (const group of groups) sharing.push(sharingOf(group, lowering))
+    const held = heldClasses(groups)
     const written = new Set<MergeGroup>()
     const classified: ClassifiedAttribute[] = []
     for (const attribute of node.attributes) {
@@ -130,33 +150,37 @@ export function classifyAttributes(
         if (group !== undefined) {
             const leads = !written.has(group)
             written.add(group)
-            // 32.10, 32.19 — THE PLAIN `style={expr}` OR `class={expr}` BESIDE A DIRECTIVE IS LEFT
-            // UNBOUND. `setAttribute` replaces the whole merged value and takes the directives'
-            // halves with it, and the two bindings then overwrite each other in whichever order
-            // they reran.
+            // 32.71 — A SHARED GROUP IS WRITTEN WHOLE AT ITS FIRST MEMBER, through `classList` or
+            // the CSSOM, as the server merged it, and moves where any member does — so a directive
+            // keeps what the plain attribute still holds without either knowing of the other.
             //
-            // ALLOWED, rather than refused. The page still RENDERS right — the server writes both
-            // halves into the one merged attribute — so the only thing a build error would buy is
-            // breaking a page that works today for a clause that is not built. What it costs is
-            // the hole: this one attribute keeps the value standing at render where 32.3 says it
-            // moves, and nothing reports that.
-            //
-            // 32.19 IS WHAT CLOSES THE `style` HALF: an interpolated `style` lowers to `style:prop`
-            // under a static name and is never built as a string, and then there is no
-            // whole-attribute write left to clobber anything. No clause spells the same road for
-            // `class`, and until one does the two share this answer.
+            // 32.10 — A STATIC PLAIN ATTRIBUTE IS LEFT UNBOUND, and so is a directive naming one of
+            // a static `class`'s classes, which is always on. The static value is never written
+            // again, and the directives write through `classList` or the CSSOM beside it.
+            const shared = sharing[groups.indexOf(group)]
+            if (shared !== undefined) {
+                classified.push({
+                    attribute,
+                    live: leads ? shared.live : live,
+                    kind: 'merged',
+                    group: leads ? group : undefined,
+                    toggles: leads
+                        ? { write: `${group.name}Group`, name: shared.names }
+                        : undefined,
+                })
+                continue
+            }
+            const name = attribute.name.slice(group.name.length + 1)
             classified.push({
                 attribute,
                 live,
                 kind: 'merged',
                 group: leads ? group : undefined,
                 toggles:
-                    attribute === group.plain
+                    attribute === group.plain ||
+                    (group.name === 'class' && held.includes(name))
                         ? undefined
-                        : {
-                              write: group.name,
-                              name: attribute.name.slice(group.name.length + 1),
-                          },
+                        : { write: group.name, name },
             })
             continue
         }
@@ -191,7 +215,7 @@ export function classifyAttributes(
                         : bind === 'group'
                           ? 'checked'
                           : bind,
-                own: staticAttribute(node, 'value') ?? 'on',
+                own: attributeOf(node, 'value'),
             })
         else if (isElementBind(attribute.lowerName))
             classified.push({ attribute, live, kind: 'element' })
@@ -294,6 +318,85 @@ function mergeGroupsOf(node: ElementNode): MergeGroup[] {
     return groups
 }
 
+/**
+ * 32.71 — for a group whose plain attribute is an expression and where some member can move, so
+ * neither half can be written without the other: whether a member is `live`, and the directives'
+ * classes or properties, which the group owns before its first write. `undefined` for any other.
+ */
+function sharingOf(
+    group: MergeGroup,
+    lowering: Parameters<typeof classifyAttributes>[1],
+): { live: boolean; names: string } | undefined {
+    if (!group.plain?.expression) return undefined
+    let live = false
+    let moves = false
+    for (const member of group.members) {
+        if (!member.expression) continue
+        if (lowering.isLive(member)) live = moves = true
+        else if (lowering.readsAnItem(member)) moves = true
+    }
+    if (!moves) return undefined
+    const names: string[] = []
+    for (const directive of group.directives)
+        names.push(directive.name.slice(group.name.length + 1))
+    return { live, names: names.join(' ') }
+}
+
+/** 32.71 — the classes a static `class` beside a `class:name` holds, each always on. */
+function heldClasses(groups: MergeGroup[]): string[] {
+    for (const group of groups)
+        if (group.name === 'class' && group.plain && !group.plain.expression)
+            return decodeCharacterReferences(
+                group.plain.value,
+                'attribute',
+            ).split(ASCII_WHITESPACE)
+    return []
+}
+
+/**
+ * 32.72 — WHAT A `bind:` WRITES IS THE BIND'S ALONE: `checked` beside `bind:checked` or
+ * `bind:group`, `value` beside `bind:value`, any `bind:name` beside `name` — and an
+ * `<option selected>` inside a `<select bind:value>`, and a `<textarea bind:value>`'s text. Two
+ * owners of one value render whichever the browser keeps and move with whichever wrote last.
+ */
+function refuseTwoOwners(node: ElementNode): void {
+    for (const attribute of node.attributes) {
+        const lower = attribute.lowerName
+        if (!lower.startsWith('bind:') || lower === 'bind:element') continue
+        const owned =
+            lower === 'bind:group' ? 'checked' : lower.slice('bind:'.length)
+        const beside = attributeOf(node, owned)
+        if (beside !== undefined)
+            throw new Error(
+                `abide: <${node.tag}> has ${attribute.name} and ${beside.name} — one value, two owners. ${attribute.name} writes ${owned} already; drop ${beside.name}. RULEBOOK 32.72.`,
+            )
+        if (owned !== 'value') continue
+        if (node.lowerTag === 'textarea' && node.children.length > 0)
+            throw new Error(
+                `abide: <${node.tag} ${attribute.name}> has text of its own — one value, two owners. The bind writes the text; drop what stands between the tags. RULEBOOK 32.72.`,
+            )
+        if (node.lowerTag === 'select' && holdsSelectedOption(node.children))
+            throw new Error(
+                `abide: <${node.tag} ${attribute.name}> has an <option selected> — one value, two owners. The bind selects the option its value holds; drop selected. RULEBOOK 32.72.`,
+            )
+    }
+}
+
+/** Whether an `<option>` with a `selected` attribute stands anywhere among `nodes`, blocks included. */
+function holdsSelectedOption(nodes: readonly TemplateNode[]): boolean {
+    for (const node of nodes) {
+        if (
+            node.kind === 'element' &&
+            node.lowerTag === 'option' &&
+            attributeOf(node, 'selected') !== undefined
+        )
+            return true
+        for (const body of bodiesOf(node))
+            if (holdsSelectedOption(body.children)) return true
+    }
+    return false
+}
+
 /** An element's attribute by its folded name, or `undefined`. */
 export function attributeOf(
     node: ElementNode,
@@ -304,14 +407,6 @@ export function attributeOf(
     return undefined
 }
 
-/** An attribute's static value, or `undefined` where it is absent or an expression. */
-function staticAttribute(node: ElementNode, name: string): string | undefined {
-    const attribute = attributeOf(node, name)
-    return attribute === undefined || attribute.expression
-        ? undefined
-        : attribute.value
-}
-
 /**
  * Whether a tag names a component: it starts with an uppercase ASCII letter.
  *

package/src/compiler/emitClient.ts

@@ -21,6 +21,7 @@ import {
     classifyAttributes,
     isBound,
     isSingleRooted,
+    type MergeGroup,
     isSlot,
 } from './classifyTemplate.ts'
 import { decodeCharacterReferences } from './decodeCharacterReferences.ts'
@@ -220,9 +221,7 @@ export function emitClient(
     const registered = heads
         ? `if (${ROUTED}) ${ROUTED}.setHead(() => ${headMarkup})\n`
         : ''
-    const applied = heads
-        ? `if (${ROUTED}) ${lowering.use('applyHead')}(${ROUTED}.headMarkup()); `
-        : ''
+    const applied = heads ? `if (${ROUTED}) ${ROUTED}.reconcile(); ` : ''
     // Applied with the fill either way, so the watch's first run only subscribes: what it would
     // write is already there, from the server or from the line above.
     if (liveHeads) lines.push(`if (${ROUTED}) ${ROUTED}.followHead(${SCOPE})`)
@@ -767,6 +766,17 @@ function elementUnits(
             )
         // 32.5, 32.7, 32.8 — THE PROPERTY AND THE VALUE, IN STEP BOTH WAYS: a watch on this
         // region's scope writes the property, and a listener writes it back.
+        // 32.8 — a group compares against the input's own value, read where the value is.
+        else if (one.kind === 'bound' && one.bind === 'group')
+            binds.push(
+                `${lowering.use('bindGroup')}(${element}, ${lowering.reference(one.attribute)}, () => (${
+                    one.own === undefined
+                        ? "'on'"
+                        : one.own.expression
+                          ? lowering.binding(one.own)
+                          : JSON.stringify(one.own.value)
+                }), ${SCOPE})`,
+            )
         else if (one.kind === 'bound')
             binds.push(
                 `${lowering.use('bindProperty')}(${element}, ${JSON.stringify(one.bind)}, ${lowering.reference(one.attribute)}, ${SCOPE})`,
@@ -798,16 +808,32 @@ if (__r${slot} !== undefined) ${SCOPE}.stops.push(__r${slot})`,
                           write: 'attribute' as const,
                           name: one.attribute.name,
                       }
+            // 32.71 — A SHARED GROUP IS ONE WATCH over its whole value, which wakes for any member:
+            // a directive cannot keep what the plain attribute holds from a watch of its own.
+            const group =
+                one.kind === 'merged' && writesGroup(write)
+                    ? one.group
+                    : undefined
             // 32.67 — one reading a row's item is one of the row's item watches, on a name of its
             // own because it is installed apart from the element's other attributes.
-            if (lowering.readsOwnItem(one.attribute))
-                itemWrites.push(
-                    `${SCOPE}.itemWatch(() => ${lowering.use(WRITES[write])}(__i${slot}, ${JSON.stringify(name)}, ${lowering.binding(one.attribute)}))`,
-                )
-            else
-                writes.push(
-                    `${SCOPE}.watch(() => ${lowering.use(WRITES[write])}(__a${slot}, ${JSON.stringify(name)}, ${lowering.binding(one.attribute)}))`,
-                )
+            const asItem =
+                group === undefined
+                    ? lowering.readsOwnItem(one.attribute)
+                    : groupReadsOwnItem(group, lowering)
+            const call = writeCall(
+                write,
+                asItem ? `__i${slot}` : `__a${slot}`,
+                name,
+                group === undefined
+                    ? lowering.binding(one.attribute)
+                    : groupArguments(group, (attribute) =>
+                          lowering.binding(attribute),
+                      ),
+                lowering,
+            )
+            ;(asItem ? itemWrites : writes).push(
+                `${SCOPE}.${asItem ? 'itemWatch' : 'watch'}(() => ${call})`,
+            )
         }
     }
     if (itemWrites.length > 0)
@@ -825,14 +851,27 @@ if (__r${slot} !== undefined) ${SCOPE}.stops.push(__r${slot})`,
 const SCOPE = '__scope'
 
 // Which runtime write each kind of attribute binding is handed to. A record rather than a chain
-// of ternaries, so a fourth kind is a row here and the call site stays one line — all three take
-// the same three arguments, which is what makes them one site at all.
+// of ternaries, so a sixth kind is a row here and the call site stays one line — all take the
+// same three arguments, which is what makes them one site at all.
 const WRITES = {
     attribute: 'setAttribute',
     class: 'setClass',
     style: 'setStyleProperty',
+    classGroup: 'setClassGroup',
+    styleGroup: 'setStyleGroup',
 } as const
 
+/** One attribute binding's write: the element, the one name it owns, and the value. */
+function writeCall(
+    write: keyof typeof WRITES,
+    element: string,
+    name: string,
+    value: string,
+    lowering: Lowering,
+): string {
+    return `${lowering.use(WRITES[write])}(${element}, ${JSON.stringify(name)}, ${value})`
+}
+
 // The share scope an instance captures for its deferred mounts (10.5), named apart from the one an
 // instance OPENS (`shareScope`): a page that shares nothing still carries this for a child that does.
 const SHARE_AT = '__shareAt'
@@ -1059,6 +1098,41 @@ function buildRender(lowering: Lowering): ValueRender {
     }
 }
 
+/** 32.71 — whether a write is a shared group's whole value. */
+function writesGroup(write: keyof typeof WRITES): boolean {
+    return write === 'classGroup' || write === 'styleGroup'
+}
+
+/** 32.71 — whether a shared group is one of a row's item watches: any member is. */
+function groupReadsOwnItem(group: MergeGroup, lowering: Lowering): boolean {
+    for (const member of group.members)
+        if (member.expression && lowering.readsOwnItem(member)) return true
+    return false
+}
+
+/**
+ * 32.71 — a shared group's write arguments: the plain attribute's value, then every directive's
+ * condition or value in the order the group names them, each read by `read`. A directive with no
+ * expression is a class that is always on, or a property's own bytes.
+ */
+function groupArguments(
+    group: MergeGroup,
+    read: (attribute: Attribute) => string,
+): string {
+    const values: string[] = []
+    for (const directive of group.directives)
+        values.push(
+            directive.expression
+                ? read(directive)
+                : group.name === 'class'
+                  ? 'true'
+                  : JSON.stringify(
+                        decodeCharacterReferences(directive.value, 'attribute'),
+                    ),
+        )
+    return `${read(group.plain as Attribute)}, [${values.join(', ')}]`
+}
+
 /**
  * Emits a region's `_build` and `_mount` pair into `helpers`, for a region nobody painted.
  *
@@ -1565,6 +1639,40 @@ function rowUpdate(
             position.holder as ElementNode,
             lowering,
         )) {
+            // 32.71 — a shared group is written whole where a member moves with the item — and
+            // where none is live, as for any attribute: a live group's watch reads the item too.
+            if (
+                one.kind === 'merged' &&
+                one.group !== undefined &&
+                one.toggles !== undefined &&
+                writesGroup(one.toggles.write)
+            ) {
+                if (one.live) continue
+                for (const member of one.group.members)
+                    if (
+                        member.expression &&
+                        !lowering.isLive(member) &&
+                        lowering.readsItem(member, block)
+                    ) {
+                        own.push(
+                            writeCall(
+                                one.toggles.write,
+                                `__a${slot}`,
+                                one.toggles.name,
+                                groupArguments(one.group, (attribute) =>
+                                    unlandable(
+                                        lowering,
+                                        attribute,
+                                        lowering.expression(attribute),
+                                    ),
+                                ),
+                                lowering,
+                            ),
+                        )
+                        break
+                    }
+                continue
+            }
             if (!one.attribute.expression || one.live) continue
             if (!lowering.readsItem(one.attribute, block)) continue
             const toggles =
@@ -1578,7 +1686,13 @@ function rowUpdate(
                       : undefined
             if (toggles === undefined) continue
             own.push(
-                `${lowering.use(WRITES[toggles.write])}(__a${slot}, ${JSON.stringify(toggles.name)}, ${lowering.expression(one.attribute)})`,
+                writeCall(
+                    toggles.write,
+                    `__a${slot}`,
+                    toggles.name,
+                    lowering.expression(one.attribute),
+                    lowering,
+                ),
             )
         }
         if (own.length === 0) continue

package/src/compiler/renderMarkup.ts

@@ -354,13 +354,9 @@ function renderPosition(
     // `<br>`, and a close tag written for one is markup no browser accepts.
     if (node.children.length === 0 && VOID_ELEMENTS.has(node.lowerTag))
         return parts.join(' + ')
-    // 32.61 — THE VALUE IN PLACE OF THE AUTHOR'S TEXT, led by the newline the parser drops after
-    // `<textarea>` so a value opening on one keeps it.
-    if (
-        within !== undefined &&
-        node.lowerTag === 'textarea' &&
-        node.children.length === 0
-    )
+    // 32.61 — THE VALUE AS THE TEXT, led by the newline the parser drops after `<textarea>` so a
+    // value opening on one keeps it. The author wrote none: 32.72 refuses it beside the bind.
+    if (within !== undefined && node.lowerTag === 'textarea')
         return [
             ...parts,
             `'\\n' + ${lowering.use('escapeAttribute')}(${within})`,
@@ -614,7 +610,17 @@ function boundMarkup(
         return `' value="' + ${lowering.use('escapeAttribute')}(${read}) + '"'`
     const on =
         written.bind === 'group'
-            ? `${lowering.use('groupHolds')}(${read}, ${JSON.stringify(written.own)})`
+            ? `${lowering.use('groupHolds')}(${read}, ${
+                  written.own === undefined
+                      ? "'on'"
+                      : written.own.expression
+                        ? unlandable(
+                              lowering,
+                              written.own,
+                              lowering.expression(written.own),
+                          )
+                        : JSON.stringify(written.own.value)
+              })`
             : read
     return `(${on} ? ' ${written.reflects}' : '')`
 }

package/src/server/render.ts

@@ -117,10 +117,10 @@ export async function composePage(
  * 39.4, 39.11 — THE DEEPEST CONTRIBUTOR WINS, and the markup is in tree order — the shell's head
  * (its outermost contributor), then each level's, outermost first — so the deepest is the last.
  * Written end to end instead, a shell's or a layout's `<title>` stands ahead of its page's and a
- * browser reads the first. The compiler merges within a file (39.12) and `applyHead` across a
+ * browser reads the first. The compiler merges within a file (39.12) and `reconcileHead` across a
  * navigation; this is the same grammar across the contributors of one render.
  *
- * TOP LEVEL OF THE HEAD ONLY, as `applyHead` keys the head's children and nothing inside them.
+ * TOP LEVEL OF THE HEAD ONLY, as `reconcileHead` keys the head's children and nothing inside them.
  * The attribute is the one WRITTEN rather than decoded — a shell's escaping and the compiler's
  * agree on every key a shell and a page would plausibly share.
  *

package/src/shared/ASCII_WHITESPACE.ts

@@ -0,0 +1,6 @@
+/**
+ * A run of ASCII whitespace, which is what a `class` value is split into tokens on — read by the
+ * compiler finding the classes a static `class` holds and by the runtime writing a `class={expr}`'s
+ * tokens (32.71), so both split one way.
+ */
+export const ASCII_WHITESPACE = /[\t\n\f\r ]+/