perf(template): drop backdrop-blur and filter transitions so viewer stays smooth

[iqiiidi-sudo]

Problem

Delivered HTML artifacts (~840 KB for a 17-node architecture diagram) stutter badly during pan/zoom and when opening modal panels (radar, guide, export menu). Four costs in the viewer repaint the huge SVG every frame:

1. backdrop-filter: blur(10–18px) on 10 panels/modals — the browser re-samples and re-blurs the entire SVG underneath on every frame; the main cause of freezes when opening modals.
2. filter in 6 transition lists (e.g. transition: opacity 0.18s ease, filter 0.18s ease) — animating drop-shadow is not composited and repaints the filter per frame on hover/focus/lens.
3. The scene svg was not a compositing layer — the pan/zoom transform triggered full repaints.
4. A permanent drop-shadow on the radar viewport frame — recomputed on every camera sync.

Change

Applied in viewer/template.source.html (the source of truth since #381), regenerated into archify/assets/template.html via npm run generate:viewer:

• backdrop-filter: blur(...) → none in all 10 places; panel backgrounds are already semi-opaque over their own base color, so the visual delta is negligible.
• Remove filter from all transition lists; hover glow now applies instantly instead of animating a filter per frame.
• Promote the scene canvas to its own compositing layer: will-change: transform; contain: layout style; — pan/zoom moves a ready raster, no scene repaint.
• Drop the permanent drop-shadow on the radar viewport frame.

Scope

• The global Viewer visual change is the intended product change of this PR: the stutter is inherent to the shared template, so it cannot be fixed per-diagram. There is no linked issue; scope decision is deferred to the maintainer at review.
• Regenerated stale artifacts: examples/archify-repo.html, examples/archify-repo-grid.html, examples/maka-architecture.html, examples/rag-pipeline.html, docs/cases/mco-runtime.architecture.html, experiments/mco-showcase/mco-runtime.html, generated/maka-regenerated.workflow.html (+ its visual-check receipt and screenshots). These were stale against the current renderer (last built before fix(viewer): embed the viewer font so delivered pages stay self-contained #256/refactor(viewer): modularize source while preserving standalone HTML #381 and this PR), so rebuilding them from the final template picks up accumulated upstream template behavior (export cleanup, source-evidence links) in addition to the CSS delta. That is required, not unrelated: with a shared template, any stale tracked render contradicts the golden/freshness tests and the claim that no tracked artifact retains blur.
• generated/maka-regenerated.workflow.visual-check.json was regenerated with visual-check so the receipt sha256 matches the rebuilt artifact (ok=true, containment + readability pass).
• Rollback/failure: pure presentation-layer change in the shared template; reverting the single commit restores prior rendering byte-for-byte. No API, schema, or contract change. Not applicable beyond revert.

Validation evidence (final head e277148)

Base is 8c3af8a (upstream main). All local runs below executed on the exact final-head tree; the last amend only added the two regenerated artifacts whose rebuild was verified before the amend.

1. cd archify && npm test — 1337 tests: 1290 pass, 0 fail, 47 skipped (Node-version gates; skipped classification visible in the TAP output). Covers check:viewer freshness, golden byte-identity, check:release-identity, validators, brand marks, and the checked-in Checkout delta reproducibility test.
2. ARCHIFY_CHROME=<chrome> node --test test/desktop-reader-browser.test.mjs (real Chrome 152) — 2 tests: 2 pass, 0 fail, 0 skipped.
3. node bin/archify.mjs compare architecture ... --quality showcase --json — 28/28 checks, completeness complete; receipt sha256 matches examples/checkout-platform-delta.receipt.json.
4. scripts/build-zip.sh archify.zip on Node 22 — reproduces committed archive bytes (release-package-gates inside npm test).
5. node bin/archify.mjs visual-check generated/maka-regenerated.workflow.html --json — ok=true, containment + readability pass on 1440x900/1600x1000/1920x1080/2048x1320, both themes; receipt and screenshots committed.
6. Real-world regression: 17-node architecture diagram re-delivered with the patched skill — deliver 9/9 checks; visual-check containment + readability pass at all four viewports in both themes.
7. Upstream CI: .github/workflows/ci.yml has a pull_request trigger, so the matrix (Node 18/20/22/24) and webm-artifact jobs run on this head — see the Checks tab of this PR for e277148.

Automated browser evidence: items 2, 5, 6 (receipts). Perceptual review, reported separately: the author visually compared panels in both themes at 1440x900/2048x1320 before and after — no readability regression observed; the maintainer's perceptual call is welcome.

Trade-offs

• Panels lose their blur effect — they were mostly opaque already, so readability is unchanged; exports were never affected (static serialization strips viewer chrome state).
• Glow on hover is instant instead of eased. If the easing is desired, an opacity-only transition on a pre-rendered glow layer would be the compositable alternative; happy to iterate.

[coderabbitai]

Important

Review skipped

We couldn't safely recover the incremental review. No full review was started, and the last reviewed checkpoint was preserved. Retry later, or explicitly request a full review by commenting @coderabbitai full review.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: dbcaa3e3-4287-4038-8c52-879b6d314e75

📥 Commits

Reviewing files that changed from the base of the PR and between 0f3c2b8 and 332172f.

⛔ Files ignored due to path filters (2)

• archify.zip is excluded by !**/*.zip
• docs/assets/archify-live-proof.gif is excluded by !**/*.gif

📒 Files selected for processing (34)

• archify/assets/template.html
• archify/examples/dataflow-product-analytics.html
• archify/examples/lifecycle-agent-run.html
• archify/examples/sequence-cache-miss-request.html
• archify/examples/web-app-rendered.html
• archify/examples/workflow-agent-tool-call-rendered.html
• docs/assets/archify-live-proof.json
• docs/cases/mco-runtime.architecture.html
• docs/gallery.html
• docs/gallery/artifacts/agent-run.lifecycle.html
• docs/gallery/artifacts/agent-tool-call.workflow.html
• docs/gallery/artifacts/async-job-roundtrip.sequence.html
• docs/gallery/artifacts/cache-miss.sequence.html
• docs/gallery/artifacts/deployment-release.lifecycle.html
• docs/gallery/artifacts/event-stream.dataflow.html
• docs/gallery/artifacts/incident-response.workflow.html
• docs/gallery/artifacts/product-analytics.dataflow.html
• docs/gallery/artifacts/production-deployment.architecture.html
• docs/gallery/artifacts/release-delivery.workflow.html
• docs/gallery/artifacts/web-app.architecture.html
• docs/gallery/manifest.json
• examples/archify-repo-grid.html
• examples/archify-repo.html
• examples/checkout-platform-delta.html
• examples/checkout-platform-delta.receipt.json
• examples/dataflow-product-analytics.html
• examples/lifecycle-agent-run.html
• examples/maka-architecture.html
• examples/rag-pipeline.html
• examples/sequence-cache-miss-request.html
• examples/web-app-rendered.html
• examples/web-app.html
• examples/workflow-agent-tool-call-rendered.html
• viewer/template.source.html

💤 Files with no reviewable changes (5)

• viewer/template.source.html
• examples/maka-architecture.html
• examples/rag-pipeline.html
• examples/archify-repo.html
• examples/archify-repo-grid.html

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Summary

Summary

This change improves viewer performance by removing UI backdrop-filter: blur(...) effects, selected filter transitions, and the radar viewport shadow. It adds will-change: transform and contain: layout style to the scene SVG.

It also regenerates examples, gallery artifacts, manifests, proof metadata, receipts, and the archive. Export cleanup and story-stop centering are refactored. Source evidence rendering now uses explicit optional links.

Compatibility impact

Panels no longer use blur. Filter-based hover effects no longer transition. Source entries without href values render without links. No public entity declarations change.

Validation and evidence

The author reports 1,049 passing tests, 33 skipped Node-version gates, no failures, passing release identity and archive reproducibility checks, and delivery and visual checks for a 17-node diagram.

The current head contains commit 332172f, which implements the reported performance changes. The provided shell output does not independently verify the reported test results or browser behavior.

The residual-declaration search produced truncated output and included generated inline data, so it does not establish whether any blur declarations remain. Static checks do not prove perceptual or cross-browser acceptance.

Walkthrough

The change removes blur and filter effects from the diagram UI, adds transform containment hints, centralizes SVG export cleanup, corrects story-stop centering, adds resize-based recentering, updates source-evidence links, and refreshes generated artifact metadata.

Changes

Viewer rendering and behavior

Layer / File(s)	Summary
Rendering and layout updates archify/assets/template.html, archify/examples/*, examples/*.html, viewer/template.source.html	Backdrop blur, filter transitions, and overview-map drop shadows are removed. Diagram transform containment hints are added.
SVG export cleanup and story navigation archify/assets/template.html, archify/examples/*.html, examples/*.html, docs/gallery/artifacts/*	cleanExportClone centralizes export sanitization. centerStoryStop uses viewport rectangles. ResizeObserver recenters active chapter and story items after width changes.
Source evidence rendering docs/cases/mco-runtime.architecture.html, examples/archify-repo-grid.html, examples/archify-repo.html, examples/maka-architecture.html, examples/rag-pipeline.html	Source entries use optional href values. Linked entries render as anchors. Unlinked entries render as div elements. Repository links use explicit labels and links.
Generated artifact metadata docs/assets/archify-live-proof.json, docs/gallery.html, docs/gallery/manifest.json, examples/checkout-platform-delta.receipt.json	Generated artifact byte counts and SHA-256 values are updated.

Priority: ⬇️ Low

Estimated code review effort: 4 (Complex) | ~45 minutes

Merge Risk: ⚪ Minimal · up to 33217

The viewer performance and generated-artifact updates are ready to merge with no identified current-head risk.

🚥 Pre-merge checks | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Contribution Scope	⚠️ Warning	The PR explains the user problem, intended performance behavior, compatibility impact, rollback, and validation. The implementation is a focused shared Viewer change with regenerated artifacts. Howeve…	Before merge, link an agreed issue or record an explicit maintainer scope decision in the PR or an issue. The decision should state the value, compatibility impact, and non-goals for the global Viewer visual change. Then retain or update th…
Validation Evidence	❓ Inconclusive	The changed generated artifacts are internally consistent, but required final-head validation is not complete. Byte-preserving Viewer assembly matches archify/assets/template.html; all 11 gallery ma…	A maintainer must inspect the unchanged workflow and approve or rerun the fork pull_request workflow for e277148; then verify all required CI jobs and branch-protection checks complete successfully. Do not ask the author for unavailable…

Full details: Contribution Scope

Explanation

The PR explains the user problem, intended performance behavior, compatibility impact, rollback, and validation. The implementation is a focused shared Viewer change with regenerated artifacts. However, it introduces broad product behavior: the shared template changes all delivered viewers and the PR explicitly calls this a global Viewer visual change. CONTRIBUTING.md requires a linked issue or recorded maintainer scope decision for broad product behavior. The PR states that no issue exists and defers the scope decision to review; no recorded decision appears in the commit metadata or tracked review files. This is a contribution-scope gap, not a confirmed runtime defect.

Resolution

Before merge, link an agreed issue or record an explicit maintainer scope decision in the PR or an issue. The decision should state the value, compatibility impact, and non-goals for the global Viewer visual change. Then retain or update the PR description to reference that decision.

Full details: Validation Evidence

Explanation

The changed generated artifacts are internally consistent, but required final-head validation is not complete. Byte-preserving Viewer assembly matches archify/assets/template.html; all 11 gallery manifest hashes, the three proof-card hashes, the visual-check artifact hash, and the committed archive template entry match. The committed visual receipt reports automated-browser pass for containment/readability at the four stated viewports, and its visualReview: pending field is correctly separate from the author's perceptual report. However, GitHub shows the exact-head CI run 34600967706 for e277148 as action_required with zero jobs. Only CodeRabbit reports success. Therefore the author's local npm test, browser, archive, compare, and delivery results are not verified final-head CI evidence. The PR also gives an incomplete compare command containing ..., does not link a base/candidate shared-Viewer comparison, and does not provide the PR-template generated-artifacts section with a complete output list.

Resolution

A maintainer must inspect the unchanged workflow and approve or rerun the fork pull_request workflow for e277148; then verify all required CI jobs and branch-protection checks complete successfully. Do not ask the author for unavailable fork permissions. Add the complete compare and delivery commands or links to their receipts. Add a comparable base/candidate Viewer result for the same representative input, viewport, theme, and page state, or explain why that comparison is not applicable. Complete the Generated artifacts section with all regenerated paths (or precise grouped paths), freshness commands, and results.

---

_{Comment @coderabbitai help to get the list of available commands.}

[iqiiidi-sudo]

@coderabbitai run pre-merge checks

[coderabbitai]

✅ Actions performed

Running Pre-merge checks. Results will be posted in the summary comment once complete.

[iqiiidi-sudo]

@coderabbitai run pre-merge checks

[coderabbitai]

✅ Actions performed

Running Pre-merge checks. Results will be posted in the summary comment once complete.

[iqiiidi-sudo]

@coderabbitai run pre-merge checks

[coderabbitai]

✅ Actions performed

Running Pre-merge checks. Results will be posted in the summary comment once complete.

[iqiiidi-sudo]

@tt-a1i Rebased onto current main (0857afc) and regenerated archify.zip, so the PR no longer conflicts. The full CI matrix is green on this head; the failing webm-artifact job also fails on main itself, so it is unrelated to this change. Local run: 1379 tests, 1331 pass, 0 fail, 48 skipped (Node-version gates).

If removing the blur entirely is too large a visual change, an opacity-only transition on a pre-rendered glow layer keeps the easing without repainting a filter per frame. Happy to iterate.