Restore docs example personality and shared data

[spencerc99]

Summary

• restore the established styling, image assets, element IDs, and data shapes for the canonical docs examples
• keep the approved shared guestbook and shared-list layouts
• make compact examples fill their docs slots and fit at desktop and mobile sizes
• give every inline and standalone example a stable pathname room by default
• remove obsolete React demos and styles left behind by the recipe conversion

What happened

PR #328 moved inline demos into canonical recipes so one source could power the docs embed, examples catalogue, detail page, and remix playground. That structure is still useful, but the conversion also replaced several purpose-built examples with generic versions. The cat and hat images became emoji, established element IDs changed, and compact examples inherited catalogue-oriented sizing.

The room changed too. The previous inline React examples used the stable docs-page room. RecipeExample generated a random room for each iframe, and about:srcdoc reports an empty host, so PlayHTML normalized the iframe namespace under LOCAL. Restoring the old IDs alone would not have restored the old data because the room portion of the data address still differed.

The conversion also stopped importing four React demos without removing their implementations or styles.

Implementation

• restore the original cat and hat assets, compact toggle, hover pad, emoji textarea, and heart counter
• restore stable IDs in Vanilla HTML and React recipe sources
• retain the approved guestbook and growing-list UI while restoring their IDs and the guestbook entry timestamp
• use each page pathname as its default room, including standalone examples; a valid explicit ?room= still overrides it
• stop generating rooms and rewriting standalone example URLs
• resolve the embedding host from document.referrer only for hostless about: documents
• set compact recipes to full width and tune frame heights and mobile spacing to their actual content
• remove MoveHatCatDemo, CanHoverDemo, DocsCounter, and DocsGuestbook, plus their orphaned CSS

Validation

• bun run --cwd packages/playhtml test (508 tests)
• docs Vitest suite (52 tests at the integrated head)
• bun build-packages
• bun run lint
• docs production build (39 pages)
• browser checks for assets, stable IDs, toggle/list interactions, and desktop/mobile overflow
• two standalone can-toggle tabs joined Room /docs/examples/can-toggle/; a toggle synced between them and persisted after reload without adding a query parameter

Docs and starters

The public API and usage patterns do not change, so the starter templates and API documentation do not need updates. The docs examples and their source snippets are updated together through the canonical recipes.

Screenshots

See the PR Evidence comment for the restored cat and hat example, the approved guestbook mobile layout, and the stable standalone room.

[pkg-pr-new]

Open in StackBlitz

bun add https://pkg.pr.new/@playhtml/common@370

bun add https://pkg.pr.new/playhtml@370

bun add https://pkg.pr.new/@playhtml/react@370

commit: 921401e

[spencerc99]

Preview evidence

Restores distinctive examples, preserves approved guestbook/list UI, and gives each standalone page a stable shared room.

Open preview · Review all evidence · Commit 921401e

Restored cat and hat example

The can-move recipe again uses the original cat and Yankees hat assets, preserved IDs, and a stage that fits the live example.

Open captured page · 1440×900

Approved shared guestbook UI

The guestbook keeps its approved prompt-and-entry layout while fitting inside the standardized live-example frame.

Open captured page · 390×844

Stable standalone shared room

The clean standalone URL maps to Room /docs/examples/can-toggle/; two tabs synchronized and the on state survived reload.

Open captured page · 1440×900

_{Published by PR Evidence. Media is temporary and is removed after retention expires.}

[cloudflare-workers-and-pages]

Deploying playhtml with    Cloudflare Pages

Latest commit:	921401e
Status:	✅  Deploy successful!
Preview URL:	https://0f2e302a.playhtml.pages.dev
Branch Preview URL:	https://cx-restore-example-personali.playhtml.pages.dev

View logs

[cloudflare-workers-and-pages]

Deploying we-were-online-website with    Cloudflare Pages

Latest commit:	c53a46b
Status:	✅  Deploy successful!
Preview URL:	https://0c74d1bb.we-were-online-website.pages.dev
Branch Preview URL:	https://cx-restore-example-personali.we-were-online-website.pages.dev

View logs

[spencerc99]

Code review

No issues found. Checked for bugs and project-instruction compliance.