Add Lookbook preview for lazy-loaded tab panels

[joshsadam]

What does this PR do and why?

Adds a new Lookbook preview that demonstrates lazy-loaded tab panels using Pathogen::Tabs#with_lazy_panel and Turbo Frames.

The preview shows a three-tab layout where the selected panel renders immediately and the other panels fetch mocked Turbo Frame responses when their tabs become visible. To support this without adding demo-only Rails routes, the Lookbook preview layout now boots MSW (Mock Service Worker) before Turbo starts. MSW intercepts requests to /lookbook-mocks/tabs/lazy-load/:panel and returns realistic frame HTML with a short artificial delay.

Changes include:

• New Turbo Frame Lazy Load preview under Pathogen::Tabs
• lookbook_mocks/tabs_lazy_load.js MSW handlers and lookbook_preview.js entry point
• mockServiceWorker.js in demo/public/ for browser interception
• MSW added as a dev dependency (package.json, pnpm-lock.yaml)
• ESLint config updated to allow MSW imports in demo JavaScript
• Minor copy updates in the Advanced Features preview

Screenshots or screen recordings

Requests:

How to set up and validate locally

1. Update dependencies in root folder bin/setup
2. cd demo & bin/dev
3. Open http://localhost:3001/lookbook
4. Navigate to Pathogen::Tabs → Turbo Frame Lazy Load
5. Confirm the Summary tab content is visible on load
6. Click Metrics and Timeline — each panel should show a brief loading state, then render mocked content with a green Loaded by MSW badge
7. Optionally review Advanced Features for updated lazy-loading documentation copy

PR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the PR acceptance checklist for this PR.

[Copilot]

Pull request overview

Adds a new Lookbook preview demonstrating Pathogen::Tabs#with_lazy_panel with Turbo Frames, using Mock Service Worker (MSW) in the demo app to intercept lazy-frame requests without adding demo-only Rails routes. The PR also refreshes existing Tabs previews to use Pathogen view helpers/typography tokens and adjusts demo wiring to load MSW before Turbo boots.

Changes:

• Add a new “Turbo Frame Lazy Load” preview and MSW handlers/entrypoint to mock /lookbook-mocks/tabs/lazy-load/:panel frame responses.
• Update the demo Lookbook preview layout/importmap and add the MSW service worker asset; add turbo-rails to the demo app.
• Modernize Tabs preview templates (headings, supporting text, lists, typography tokens) and add a LazyPanel fallback test + helper method.

Reviewed changes

Copilot reviewed 22 out of 24 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
test/components/previews/pathogen/tabs_preview/url_sync.html.erb	Updates preview copy/layout to use Pathogen helpers and new typography tokens.
test/components/previews/pathogen/tabs_preview/turbo_frame_lazy_load.html.erb	Adds the new Lookbook preview demonstrating lazy-loaded panels via Turbo Frames + with_lazy_panel.
test/components/previews/pathogen/tabs_preview/orientations.html.erb	Refactors orientation demos and adds a “Many tabs” example using Pathogen helpers.
test/components/previews/pathogen/tabs_preview/keyboard_and_accessibility.html.erb	Converts headings/descriptive text to Pathogen helpers and adjusts typography tokens.
test/components/previews/pathogen/tabs_preview/integration_examples.html.erb	Refreshes integration examples and trims/reshapes sections using Pathogen helpers.
test/components/previews/pathogen/tabs_preview/basic_usage.html.erb	Reworks “Overview” content, adds custom default tab + single-tab edge case examples.
test/components/previews/pathogen/tabs_preview/advanced_features.html.erb	Removes the old “Advanced Features” preview content (moved/reshaped elsewhere).
test/components/previews/pathogen/tabs_preview.rb	Reorganizes preview groups/labels and includes Pathogen::ViewHelper for helper usage.
test/components/pathogen/tabs/lazy_panel_test.rb	Adds coverage for LazyPanel rendering fallback when turbo-rails helpers are unavailable.
app/components/pathogen/tabs/lazy_panel.rb	Adds render_turbo_frame helper method to support environments with/without turbo_frame_tag.
app/components/pathogen/tabs/lazy_panel.html.erb	Uses render_turbo_frame for eager and lazy branches.
demo/app/javascript/lookbook_preview.js	New entrypoint that starts MSW before importing the main application (Turbo).
demo/app/javascript/lookbook_mocks/tabs_lazy_load.js	MSW handlers that return realistic Turbo Frame HTML with a small artificial delay.
demo/app/views/layouts/lookbook_preview.html.erb	Loads a Lookbook-specific importmap entrypoint so MSW can start before Turbo.
demo/public/mockServiceWorker.js	Adds the generated MSW service worker used for browser interception.
demo/config/importmap.rb	Pins the new JS entrypoints and MSW ESM URLs.
demo/Gemfile	Adds turbo-rails to support Turbo helpers in the demo Rails app.
demo/config/environments/development.rb	Changes host authorization configuration for dev (currently disables it).
demo/Procfile.dev	Adjusts dev server bind/port behavior.
demo/bin/dev	Defaults PORT to 3001 for the demo dev script.
eslint.config.js	Adds an ESLint config block for demo JavaScript files (browser/module context).
package.json	Adds MSW as a dev dependency and configures MSW worker output directory.
pnpm-lock.yaml	Locks MSW and its transitive dependencies.
app/assets/stylesheets/pathogen.tailwind.css	Anchors new Tailwind arbitrary length utilities used by updated previews.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.