feat(a2ui-playground): container queries + mobile share sheet

[Huxpro]

Summary

Refactors the A2UI playground preview panel so its layout reacts to the panel's own width instead of the viewport. Dragging the JSON/preview resize handle now correctly collapses the split when the panel itself can no longer fit it — previously only viewport size triggered the collapse, so resizing did nothing.

Also adds a mobile bottom sheet for the Components stack and Web/Native Preview cards on narrow panels, so the phone mockup can dominate the available space.

Container queries

• .examplesPreviewWrap is the new container host (container-name: previewPanel). Split → stacked threshold drops from @media (max-width: 1280px) to @container previewPanel (max-width: 660px), matching the grid's natural floor (360 phone min + 280 controls min).
• .previewQrSection is its own container (container-name: previewQr) so QR card layouts respond to their own column width (description hides in narrow examples columns).

QR section polish

• Top-aligns title with the QR thumbnail (was align-items: center, which left short text floating mid-QR).
• Adds a QR unavailable / URL too long to encode placeholder (128×128, matching the QR slot) for live drafts whose URLs can't be encoded. Keeps create and example panels structurally aligned (both cards now have a right-side slot).

Mobile share sheet

• Adds vaul@^1.1.2.
• On panels narrower than 660px, the Components stack and URL/QR cards collapse out of the panel and into a bottom sheet, opened by a phone-icon button in the panel header.
• A single renderExtras() closure feeds both the inline (via display: contents on .previewPanelExtras) and sheet renderings, so Copy state stays in sync between them.

Test plan

• Demos page at wide viewport: drag the JSON/preview resize handle to shrink the preview panel past ~660px → it should collapse from split (phone | controls) to a vertical stack. Drag wider → split returns.
• Mobile-width viewport / narrow preview panel: phone-icon button appears in the panel header; tapping slides up a sheet with Components + Web/Native Preview cards. Swipe down / tap overlay / press Esc dismisses.
• Create (AIChat) page: each preview card shows a dashed QR unavailable placeholder in place of the QR; visual rhythm aligns with the example page's QR cards.
• Example page wide: QR card title/URL+Copy top-align with the 128px QR (no longer centered).
• Light + dark themes: sheet, placeholder, and panel split all render correctly.

Summary by CodeRabbit

• New Features

  • Added mobile preview share sheet with a new "Open this preview on a phone" button in the preview panel header for streamlined mobile device testing and preview sharing workflows.

• Improvements

  • Enhanced responsive design architecture with improved mobile and tablet layout handling, featuring refined content spacing, intelligent visibility controls, and better adaptive behavior across varying device widths.

[changeset-bot]

⚠️ No Changeset found

Latest commit: b3e4c4a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

The PR adds a mobile-friendly "Preview info" share sheet to the playground's preview panel using the vaul drawer library, refactors preview extras rendering into a reusable helper, and converts the entire responsive layout from viewport-based media queries to container query-driven behavior for superior responsive control.

Changes

Mobile Preview Share Sheet with Container Queries

Layer / File(s)	Summary
Vaul drawer library dependency packages/genui/a2ui-playground/package.json	Adds vaul (^1.1.2) as a dependency to provide drawer and bottom-sheet UI primitives.
PreviewPanel mobile share sheet and extras refactor packages/genui/a2ui-playground/src/components/PreviewPanel.tsx	Imports Drawer from vaul and adds shareOpen state. Extracts previously inline "extras" rendering (streamed components, QR placeholder, or QR/link cards) into a renderExtras() function that serves both the inline panel display and the drawer content. A conditional header button ("Open this preview on a phone") toggles the share sheet when hasExtras is true. The Drawer wraps the extras with overlay, content, title, and description.
Container query responsive layout and DOM restructuring packages/genui/a2ui-playground/src/pages/DemosPage.tsx, packages/genui/a2ui-playground/src/pages/DemosPage.css, packages/genui/a2ui-playground/src/styles.css	Wraps the preview panel in a new examplesPreviewWrap container div that receives previewPanelStyle (moved from the PreviewPanel component). Converts responsive layout from viewport media queries to container queries: .previewPanel becomes a container host that hides .previewPanelExtras and shows .previewInfoBtn under @container previewPanel (max-width: 660px); .previewQrSection becomes its own container host with overrides for QR spacing and description visibility. DemosPage.css adds .examplesPreviewWrap container setup, split-to-stack breakpoint, and updates small-screen styling. styles.css adds container query rules, mobile share sheet UI styles (overlay, bottom sheet, handle, title, scrollable body), and a .previewQrUnavailable placeholder for layout alignment when QR encoding fails.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• lynx-family/lynx-stack#2704: Overlapping refactor of previewQrSection styling and QR layout behavior in the preview panel.
• lynx-family/lynx-stack#2690: Shared modifications to preview panel and QR section responsive styling in packages/genui/a2ui-playground/src/styles.css.

Suggested reviewers

• HuJean
• Sherry-hue

Poem

A drawer slides in from the mobile phone,
Extras rendered once, in two places shown—
Container queries replace viewport's old way,
Responsive and graceful, come what may! 📱✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main changes: adding container queries for responsive layout and a mobile share sheet component.
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 unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!