# 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](workspace.md).

```sh
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

```sh
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](github-checks.md#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.