feat(web): example flows on Pages empty state

[naorsabag]

Default flows

Visiting https://naorsabag.github.io/openhop/ without a flow fragment showed only "No flow shared" plus a hint to use the share URL or "+ New flow". First-time visitors had no in-page way to see what a real flow looks like.

Adds a curated list of three example flows on the empty state:

• Simple CRUD — smallest useful flow
• OAuth2 Login — browser → app → Google OAuth → DB + cache
• Order Processing — multi-service order pipeline with payment, audit, retry

Each card sets `location.hash` to the encoded YAML, which feeds the existing decode pipeline so the flow loads exactly like a share URL would.

The YAML strings come from the existing `examples/*.yaml` files via Vite `?raw` imports — single source of truth, no duplication, ~6 KB total in the bundle.

Carrot click

The other thing you mentioned ("click on carrot doesn't work on the site") — I think this was downstream of the missing-sprite bug fixed in #106. Before that fix, the carrot SVG was 404'ing on Pages so there was nothing visible to click. The hitbox should still have been there, but browsers can be flaky about pointer events on broken images. After the #106 deploy, please retry — if clicks still don't fire, I'll dig in with concrete repro steps.

Test plan

• `npm test -w @openhop/web` (42/42)
• `VITE_BASE=/openhop/ VITE_FRAGMENT_MODE=1 npm run build` succeeds
• After merge: visit Pages without a hash, verify the three example cards render and clicking each loads the matching flow
• Confirm carrot clicks open the inspector after the latest deploy

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features

  • Example flows now displayed when opening the app without a loaded flow, allowing users to quickly explore pre-built workflows.

• Bug Fixes

  • Fixed sprite and asset loading for deployments at alternate base paths.
  • Corrected GitHub Release tagging precedence for combined server and web publishes.

[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: 63fec154-5b69-49b1-994f-f9d15afbc34a

📥 Commits

Reviewing files that changed from the base of the PR and between c0c9465 and 47b382c.

📒 Files selected for processing (6)

• .github/workflows/publish.yml
• packages/web/src/AppFragment.tsx
• packages/web/src/components/DataPixel.tsx
• packages/web/src/components/nodes/node-sprites.ts
• packages/web/src/globals.d.ts
• packages/web/src/lib/example-flows.ts

---

Walkthrough

This PR fixes asset loading on GitHub Pages deployments by making sprite URLs base-path aware, adds pre-built example flows to the empty-state UI, updates TypeScript types for YAML imports, and adjusts release tag selection logic to prioritize server publishes over web-only publishes.

Changes

Web Frontend — GitHub Pages Deployment

Layer / File(s)	Summary
TypeScript Type Setup packages/web/src/globals.d.ts	Ambient module declaration added for *.yaml?raw imports, resolving to string type.
Example Flows Data Model packages/web/src/lib/example-flows.ts	New ExampleFlow interface and EXAMPLE_FLOWS array export defined, importing three YAML examples as raw strings with metadata.
Asset Path Resolution packages/web/src/components/nodes/node-sprites.ts, packages/web/src/components/DataPixel.tsx	Sprite URLs changed from hardcoded /sprites/ to ${BASE}sprites/ using Vite's import.meta.env.BASE_URL for correct GitHub Pages subdirectory resolution.
UI Integration packages/web/src/AppFragment.tsx	Empty-state UI expanded to display example flow buttons; clicking a button sets window.location.hash with encoded YAML to load the flow via existing decode pipeline.

Release Tagging Logic

Layer / File(s)	Summary
Tag Scheme & Selection .github/workflows/publish.yml	Tag precedence clarified in comments and conditional logic reordered to check SERVER_PUBLISHED before WEB_PUBLISHED, ensuring server tags apply to combined publishes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related PRs

• naorsabag/openhop#106: Both PRs modify sprite paths in DataPixel.tsx and node-sprites.ts to prepend Vite's BASE_URL for GitHub Pages asset resolution.
• naorsabag/openhop#104: Both PRs update the publish workflow's release tag selection logic based on which packages publish.
• naorsabag/openhop#77: This PR extends the fragment-mode GitHub Pages deployment infrastructure introduced in PR #77 with base-path-aware assets and example flows.

🚥 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 clearly and concisely summarizes the main change: adding example flows to the Pages empty state UI component.
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/pages-example-flows

---

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