Maintained host examples#

These local fixtures demonstrate a reproducible host bug and integration of the optional branding prototype. They do not implement capture, submission, persistence, or a finished reporter. Use the pinned workspace setup.

pnpm worktree:setup
pnpm dev:examples

Append playground/ or plain-html/ to the URL printed by the owned server. The development command builds reporting's supported entries first. Restart it after changing that package. The plain host uses only HTML and its own DOM script; it has no React import or host package dependency and reserves an empty, labelled mount region for future universal embedding. Root React development dependencies support the separate playground and prototype fixtures, not the plain page.

One scenario#

examples/playground/scenarios/profile.ts owns the deterministic state transition. ProfileScenario renders it both on the playground page and inside the optional branding component. To reproduce:

1. Choose Buggy save, enter Morgan Lee, and save.
2. Visit Overview, then Profile. The confirmation claimed success, but Alex Morgan returns. Expected and actual stored values are shown explicitly.
3. Choose Fixed save and repeat. Morgan Lee remains after navigation.
4. Reset scenario restores initial state while keeping the selected mode.

Switching modes also starts fresh. Everything is in memory; a full browser reload resets both modes. This fixture models loss across in-app navigation, not durable storage. Whitespace-only saves are rejected. Both intentional buggy behavior and fixed behavior are passing assertions in the committed suite.

Branding boundary#

/playground/branding/?variant=A mounts the same scenario via the supported @snagbadger/reporting/theming-prototype host prop. A–E remain unselected studies. The component and its CSS load only on that route. The host imports layout and host-skin entries separately; ?omitDefaultSkin=1 omits the default skin import. The development switcher is gated by import.meta.env.DEV; normal static builds hide it, while direct variant URLs still work. B and E put the host inside their existing disclosures. The separate branding fixture remains a component test surface; it does not implement another host scenario.

Low-specificity host styles intentionally challenge prototype isolation. Built browser tests compare header/h2/p/details/summary computed styles before mounting and after every pinned layout, skin, appearance, and token change. They also use the scenario controls while nested inside the prototype.

Build and verify#

pnpm build
pnpm test:unit examples/playground/scenarios/profile.test.ts
pnpm test:pr-preview
pnpm verify

dist/examples/ contains a static index, playground/, playground/branding/, plain-html/, and relative assets. Serve the whole artifact, preserving directory structure. Relative URLs support /SnagBadger/ and deeper deployment subpaths; the existing built-preview Playwright configuration exercises /SnagBadger/ on desktop and mobile alongside the pre-existing prototype PR-subpath test. Its second owned Vite preview server uses an independently allocated port, propagated to the tests by the browser helper. Artifacts/reports stay ignored; each run has its own evidence directory. See Cloudflare Pages dev builds for automatic deployments after verified pushes to main and manual branch previews.

Source receives the same strict typing, lint, formatting, import graph, and naming checks as the SDK. Examples are explicitly registered support trees rather than published packages, and use the existing pinned Vite/React/toolchain. No extra runtime dependency or parallel package-manager setup was added.

This implementation pins combined prerequisite 2e543d7c31640690a27e5d0042193a2086188c78 (PR #36), inheriting the verified #24 harness and corrected #23 commit f49b8c1e385c35054cae90185ae2a5e836260f77. Newer branding/recording design work is intentionally outside this snapshot.