feat: complete Group B — canonical sources for the eight filter demos

[arena-ai-coding-agent]

Branch: arena/01a0dca7-0-js · commit 88a6920 · base: main @ c27b31092cfc275c40dd07f8eeeac5cd5323e3f9

---

1. Verified starting commit and inventory

• PR feat: finish Group B canonical gradient migration #10 verified MERGED; main is still at c27b310, and it is an ancestor of this branch, so no rebase or merge was needed.
• Untouched starting index.html SHA-256:
  7cd4d27dbe56d0a5e4e381b340fbcfac673b37b7090d6f62db13c8ca5e3214f8.
• Verified before any edit: 133 live demos · 134 register entries · 22 canonical sources · 16 Group B demos · 8 Group B remaining (all filters) · 2 shared fragments · zero runtime JS.
• After: 133 · 134 · 30 sources · 3 fragments · 16/16 Group B migrated · 0 remaining · zero runtime JS.

2. CSS ownership map for all eight filters

Full table in docs/migrering/grupp-b-filter/README.md §2. Summary:

Owner	What it owns	Treatment
demos/_delat/swatch.css (existing)	.swatch, .swatch-yta, .swatch-lbl	requested by all 8; published once
demos/_delat/swatch-solo.css (existing)	.swatch-solo, .swatch-solo > .swatch, .swatch-solo .swatch-yta	requested by all 8; published once
demos/_delat/filter-motiv.css (new)	.f-motiv .swatch-yta — the complete four-layer motif, same declaration and layer order, byte for byte	one owner, one published copy, exactly 8 snippet consumers
each demos/filter-*.html	its own filter: declaration only (.f-blur .swatch-yta { filter: blur(3px); } … .f-drop .swatch-yta { filter: drop-shadow(0 0 8px var(--acc)) brightness(.9); })	own <style>, copied
each source's <style data-live>	.labbar.f-* .swatch-yta { filter: … calc(var(--lv) …) } — original selectors/declarations retained	laboratory scenography, never copied
page	.labbar, .labb-*, --lv radios, .enh-* counters, .fig, support rows, register, navigation	unchanged, outside markers
removed	the old nine-selector rule (.filter-row .swatch-yta, .f-blur … .f-drop .swatch-yta) and its page comment	ownership transferred; absence asserted
deferred	.filter-row { display:grid; … } — dead (no live element uses the class), not imported into any snippet	same treatment as .grad-row in PR #10

3. Motif architecture chosen

Four options were weighed; the shared class was chosen:

1. eight private motif copies → eight places to drift;
2. keep the nine-selector list in the fragment → every copied example carries the seven other demos' selectors (the failure this migration removes);
3. reuse .swatch-solo .swatch-yta → it also matches the five gradient swatches, so correctness would depend on stylesheet order;
4. chosen: one narrow class f-motiv, which has no rule of its own and changes no computed style — it only lets .f-motiv .swatch-yta own the motif.

4. Exact markup change

- <span class="swatch f-blur">
+ <span class="swatch f-blur f-motiv">

Eight elements, one per demo (div:nth-child(5)>span:nth-child(1) in each .demo-yta). Nothing else changed in the DOM. Proven by reconstruction: taking HEAD:index.html, inserting only the markers, and running the generator reproduces the committed index.html byte for byte.

5. The complete motif is preserved

Declaration body compared byte for byte against the pre-migration rule: identical. Asserted in scripts/build.test.mjs §12b (each layer present, in order, in the fragment; the rule published exactly once; the old selector gone; each layer string occurring exactly once in the whole stylesheet) and §12d (all four layers, in order, in every snippet). Browser-side, each snippet's computed background-image is compared with a probe-computed reference (§8 evidence), and §12c/§8 assert the layers paint.

6. Standalone evidence per filter

docs/migrering/grupp-b-filter/standalone/ — one screenshot and one computed-style report per filter (Grundpaketet + the real generated textarea content). Painted assertions (Chromium 153.0.8010.0): blur sharpness 5.12 vs 9.26; contrast luma σ 45.86 vs 30.01; saturate mean saturation 142.18 vs 69.65; hue-rotate 248° → 11.7°; sepia r−b 50.28 vs −25.99; grayscale saturation 0 at unchanged luma 161.82; invert mean |px − (255 − original)| 0.13; drop-shadow luma 145.66 vs 161.82 plus a measured warm glow when the ancestor clip is lifted. Table in the migration README §8.

7. Before/after evidence for the live demos

144 samples (8 demos × 375/768/1280 px × guld/syra × default/lv-0/lv-8): 144/144 PNG pairs byte-identical; all 144 normalised attribute/text/geometry/computed-style hashes identical; all 144 raw hashes differ only by the documented f-motiv token. No tolerance or masking. Four representative pairs and both JSON manifests are committed; the whole matrix is reproducible with evidence.mjs.

8. Baseline provenance

Eight separate --capture --merge --demo ID runs against the untouched document (the utility refuses any other file). tests/baseline/demos.json: 30 entries; all 22 historical entries byte-identical; top-level documentSha256, chromium, viewport, _readme unchanged; the previous 8 mergeLog records preserved and 8 appended (each with documentSha256 7cd4d27d…, chromium 153.0.8010.0). No historical entry was recaptured.

9. Intentional DOM differences and their narrowed tests

tests/demo-parity.mjs declares INTENTIONAL_DIFFS: eight records (id, node path, class before, class after). applyIntentionalDiffs normalises only that token and throws if either side does not match, so a recaptured baseline fails instead of hiding the change. Everything else stays strict. scripts/build.test.mjs §14 locks it from both sides with negative cases: undeclared class on the same node, extra class, removed filter class, recaptured baseline, node not measured, and a non-filter demo (no exemption at all). §12i is the negative regression for the class itself: removing f-motiv from any one source makes index.html stale and leaves that snippet without the motif.

10. Commands and results

Command	Result
npm run build / npm run build:check	in sync / green
npm run check	green (build.test 1,298 ✓ · check.test 16 ✓ · register.test 70 ✓ · check.mjs · check-snippets.mjs)
npm run test:browser	green: menu-keyboard, ux-polish, register-nav, demo-source (30 demos, page + standalone), demo-parity 43,356 values, no structural deviations
node tests/demo-parity.mjs --strict --require-same-browser --demo ID (×8)	1,412 values per demo, 0 style/DOM deviations, 0 px geometry
node docs/migrering/grupp-b-filter/evidence.mjs compare …	144/144 PNG pairs byte-identical

Chromium for every capture and comparison: @sparticuz/chromium@153.0.0 (verified 153.0.8010.0). No dependency or package-lock change.

11. GitHub Actions status

The existing workflow already runs the scripts used here; no workflow change is needed. Checks on this PR are reported below. (Note: earlier in the session push and PR creation failed with HTTP 401: Bad credentials because the environment token had expired; the connection was reconnected, the branch was pushed, and the results above are unchanged.)

12. Updated inventory

133 demonstrations · 134 register entries · 30 canonical sources · 3 shared fragments · 16 of 16 Group B migrated, 0 remaining · zero runtime JS. README.md and docs/demo-kalla.md updated accordingly.

13. Remaining limitations

1. The DOM is intentionally not byte-identical: one class token on eight elements, declared per node and covered by a narrowed test.
2. The dead .filter-row layout rule remains in the stylesheet, deferred exactly as .grad-row was in PR feat: finish Group B canonical gradient migration #10.
3. .swatch { overflow: hidden } clips the drop-shadow glow on the live page — pre-existing behaviour, unchanged; measured separately.
4. Browser-support metadata untouched; color-mix-kontinuerligt and the other 103 non-Group-B demos are out of scope.
5. The 7 pre-existing cross-environment geometry warnings (target, appearance-base-select, max 22.09 px) remain; they are unrelated to this batch and do not appear in the eight strict comparisons.