Build HTML scrubber utility for noise-free component snapshots

[kvithayathil]

Goal

Create a reusable scrubber utility that strips superficial/noisy attributes from rendered HTML before snapshot comparison.

Context

Parent: #119 (Frontend approval/snapshot testing infrastructure)

When snapshot-testing rendered Svelte components, these change across runs without meaningful differences:

• Svelte scoped class hashes (svelte-1a2b3c)
• Dynamic id attributes
• Tailwind class ordering (if purgeable classes shift)
• Timestamps, UUIDs, random tokens

Tasks

• Create tests/helpers/scrub-snapshot.ts with composable scrubber functions
• Implement scrubbers for:
  • Svelte scoped classes (/class="[^"]*svelte-[a-z0-9]+[^"]*"/)
  • Dynamic IDs (/id="[^"]*"/ — configurable allowlist)
  • Timestamps / dates
  • UUIDs
• Export a scrubHtml(html: string, options?: ScrubOptions) default pipeline
• Write tests for the scrubbers themselves
• Document usage pattern with toMatchFileSnapshot

Acceptance Criteria

• Scrubber removes Svelte scoped classes, dynamic IDs, timestamps, UUIDs
• Scrubber preserves semantic attributes (aria-*, data-testid, role, etc.)
• Configurable: callers can opt-in/out of specific scrubbers
• Tests pass, zero dependencies beyond Vitest

Usage Pattern

import { scrubHtml } from '$tests/helpers/scrub-snapshot'
import { render } from '@testing-library/svelte'

it('renders correctly', () => {
  const { container } = render(MyComponent)
  await expect(scrubHtml(container.innerHTML)).toMatchFileSnapshot('./__snapshots__/my-component.html')
})