Build a canonical examples index and recipe-backed playground

[spencerc99]

Context

The docs currently have strong live examples embedded directly in pages like capabilities.mdx and custom-elements.mdx, and /play has a CodeMirror + iframe playground with a starter recipe. What is missing is a real examples index/gallery and a shared recipe source that can power docs pages, example detail pages, and the playground from the same canonical example.

This is also already anticipated by apps/docs/plans/live-editor.md: Phase 1 calls for a recipe format plus gallery, and Phase 2 loads recipes into /play. The current code only recognizes _starter, so every richer example still lives inline in MDX or React demo components.

Goal

Create a separate examples section where readers can browse, filter, open, copy, and remix PlayHTML examples, with each live docs example rendering from the same underlying example source instead of duplicating code/demo logic across docs pages.

Proposed shape

• Add an Astro content collection for examples/recipes.
• Store each example as a small folder with metadata and source files, e.g.
  • recipe.md or example.md for title, description, tags, capabilities, framework, and notes.
  • index.html for vanilla examples.
  • Optional React entry/source later, after the runtime/editor path supports it cleanly.
  • Optional preview image.
• Add /docs/examples/ as the browsable index with filters for capability, state primitive, framework, and difficulty.
• Add per-example pages with:
  • live preview,
  • source view,
  • copy source,
  • open/remix in /play,
  • related docs links.
• Teach /play#id=<example-id> to load canonical examples, not just _starter.
• Migrate existing live docs demos so docs pages embed/render the canonical example instead of maintaining separate code paths.

Initial examples to extract

• Basic can-toggle.
• Basic can-move.
• Basic can-hover.
• Basic can-mirror textarea/list.
• can-play counter.
• Shared guestbook or reactions example.
• One composed room-scale example, such as fridge poetry or an experiments-page style demo, if it can be scoped safely.

Acceptance criteria

• A reader can open /docs/examples/, filter examples, and open a detail page.
• Every listed example has a live preview and source shown from the same canonical source used by the playground.
• /play#id=<example-id> loads the selected example source.
• Editing in /play still preserves a private remix room and shareable URL behavior.
• At least the first set of built-in capabilities has canonical examples.
• Existing docs pages link to or embed the canonical examples rather than duplicating the live example implementation.
• Build and docs tests cover the recipe registry enough to catch broken missing source/metadata.

Notes

• Keep the first version vanilla-first. React examples can follow once we decide whether the playground uses Sandpack/esbuild-wasm or a separate read-only source path.
• Do not build a community capabilities directory in this issue. That should come after authoring reusable tags/capabilities is easier.
• This issue should preserve the useful part of the current /play route: the preview iframe is itself a PlayHTML room, so sharing a remix URL also shares the rendered state.