feat(web): all 5 examples grouped under examples/ + autoload first one

[naorsabag]

Two related Pages-only changes.

All 5 examples

`example-flows.ts` previously listed only 3 of the 5 YAMLs in `/examples/`. Now imports every one (simple-crud, auth-flow, order-flow, self-loops, type-variants) via the same Vite `?raw` pattern so the source-of-truth stays in the repo's `examples/*.yaml`.

The `path` field is overridden to a single `examples` root for every entry so the sidebar tree groups all of them under one folder, even though the YAMLs' own `meta.path` values diverge (some use `e-commerce/orders`, `demos`, etc).

Autoload first example on no hash

Visiting Pages without a flow fragment landed on an empty canvas. Now `AppFragment` `history.replaceState`s the encoded YAML of `EXAMPLE_FLOWS[0]` (Simple CRUD) so the canvas is populated on first visit. `replaceState` (not `assign`) keeps the empty URL out of back/forward history.

Pages-only because `AppFragment` is the Pages bundle; `App.tsx` (local app) has its own server-driven flow list and is untouched.

Test plan

• `npm test -w @openhop/web` (42/42)
• `VITE_BASE=/openhop/ VITE_FRAGMENT_MODE=1 npm run build` succeeds
• After merge: visit https://naorsabag.github.io/openhop/ with no hash, confirm Simple CRUD loads and the sidebar lists all 5 examples under `examples/`

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Example flows now auto-load on first visit, showing the first example instead of an empty canvas while preserving query parameters.
  • Two new example flows — "self-loops" and "type-variants" — added to the examples library.
  • Examples in the sidebar are now grouped under a unified examples root for clearer organization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: e4b01c15-32d7-463a-95dd-41a2ac704d0f

📥 Commits

Reviewing files that changed from the base of the PR and between 7639d91 and 5db9d3a.

📒 Files selected for processing (1)

• packages/web/src/AppFragment.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/web/src/AppFragment.tsx

---

Walkthrough

The PR adds two bundled example flows and a shared EXAMPLES_ROOT, then adds a mount-time useEffect in AppFragment that, when the URL fragment is empty, encodes EXAMPLE_FLOWS[0], replaces the browser fragment with it, and initializes the component hash so the canvas loads that example.

Changes

First-Visit Example Autoload

Layer / File(s)	Summary
Example Flows Configuration packages/web/src/lib/example-flows.ts	Imports self-loops.yaml and type-variants.yaml, introduces EXAMPLES_ROOT = 'examples', and updates EXAMPLE_FLOWS to include the two new examples and use the unified path value.
First-Visit Autoload Effect packages/web/src/AppFragment.tsx	Adds a useEffect that checks for an empty URL hash on initial mount, encodes EXAMPLE_FLOWS[0], updates the browser URL via history.replaceState, and sets internal hash state to trigger the canvas load.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• naorsabag/openhop#77: Both PRs modify the fragment-mode app shell (packages/web/src/AppFragment.tsx) and related fragment handling.
• naorsabag/openhop#108: Both modify example-flows data and AppFragment fragment-based loading behavior.
• naorsabag/openhop#107: Related edits to AppFragment and example flow loading/encoding.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main changes: consolidating all 5 examples under a shared examples/ path and implementing autoload for the first example on initial visits.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/all-examples-and-autoload

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/web/src/AppFragment.tsx`:
- Around line 60-65: The autoload logic treats a lone "#" as a real hash and
also drops query parameters when replacing the URL; update the early-return
check to treat "#" as empty (e.g., if (window.location.hash &&
window.location.hash !== '#') return) and when calling history.replaceState
include window.location.search so you preserve query params (use
`${window.location.pathname}${window.location.search}#${fragment}`), keeping
references to EXAMPLE_FLOWS, encodeFragment, setHash, and history.replaceState.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a2a9971c-e1c3-4004-b870-df06341aa670

📥 Commits

Reviewing files that changed from the base of the PR and between 3fe763e and 7639d91.

📒 Files selected for processing (2)

• packages/web/src/AppFragment.tsx
• packages/web/src/lib/example-flows.ts