fix(www): resolve mobile layout overflow and center transmutation in automatic coercion showcase

[yamcodes]

Summary

Fixes layout overflow, backwards chip travel, and off-center transmutation in the Automatic coercion homepage showcase component (apps/www/components/page/declarative-showcase.tsx and aurora.css).

Root Cause

On narrow viewports (e.g. 375px mobile), the 5-column layout crushed the two traveling payload wires down to 12.3px. Because token chips are ~40–60px wide:

1. Tokens overlapped adjacent columns and the middle gate.
2. The keyframe left: calc(100% - 2.5rem) resolved to a negative travel distance (12.3px - 40px = -27.7px), causing tokens to physically animate backwards into the left key column.
3. Anchoring via translateY(-50%) left-anchored the tokens, causing the visual midpoint transition to occur late and off-center.

Solution

1. Container Query Degradation (@container stream-stage (min-width: 28rem)):
   • On containers < 28rem (448px), hides the desktop middle gate and split wires, rendering a direct full-width wire (.home-aurora__payload-wire--direct) with 159px of clear runway.
   • On containers >= 28rem (desktop), fully preserves the 5-column schema gate layout.
2. True Center Anchor & Mechanical Transmutation:
   • Anchors carriers via transform: translate(-50%, -50%), centering each token horizontally and vertically.
   • Symmetric trajectory: launches from 15%, crosses the exact midpoint at 50% (where quotes dissolve and token ignites in cyan --color-accent), and docks cleanly at 82%.
   • Uses mechanical cubic-bezier(0.2, 0.8, 0.25, 1) easing.
3. Synchronized Dock Pulses & Reduced Motion:
   • Pulses the destination dock (number and boolean) upon token arrival.
   • Hides traveling carriers and locks docks into static high-contrast visibility when prefers-reduced-motion: reduce is active.
4. Unit Tests:
   • Added tests in declarative-showcase.test.tsx asserting mobile single-wire direct elements and carrier values.

Verification

• pnpm test apps/www/components/page/declarative-showcase.test.tsx: 2/2 passed
• pnpm check: 0 errors
• pnpm typecheck: 30/30 tasks successful, 104 static pages generated
• Playwright headless inspection across mobile (375px), tablet (768px), and desktop (1280px).

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0d2d397

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

[arkenv-bot]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (Asia/Almaty)
arkenv	Ready	Preview, Comment	Sep 2 2026, 9:05 PM (Asia/Almaty)

[pullfrog]

ℹ️ Two minor suggestions — the new test pins markup rather than the fixed behavior, and the @container block never governs on this page's geometry. Nothing blocking.

Reviewed changes This initial review covers the full PR (1 commit, 3 files): a container-query responsive degradation that swaps the Automatic coercion showcase to a single mobile "direct wire" below 28rem and restores the desktop 5-column gate layout above it, with new centered mobile carrier keyframes and synchronized dock pulses.

• aurora.css — adds container-type/container-name to the showcase <figure>, toggles .home-aurora__payload-wire--direct (mobile) vs gate + wires (desktop) via @container and @media, trims .home-aurora__payload-col min-width to 3.5rem on mobile, adds mobile-only travel/raw/coerced keyframes and dock pulses, and extends prefers-reduced-motion to hide carriers.
• declarative-showcase.tsx — per row, adds an aria-hidden single-track direct wire with absolutely-positioned raw/coerced carriers, keeping the existing desktop gate markup untouched.
• declarative-showcase.test.tsx — adds a jsdom test asserting the mobile direct-wire elements exist and carriers hold both raw and coerced values.

The mobile keyframe timings are internally consistent: the raw→coerced swap sits at the 50% midpoint keyframe, and the dock pulses align with token arrivals. The unit test passes (verified this run).

  ^{｜ Fix all ➔ ｜ Fix 👍s ➔ ｜ View workflow run ｜ Using DeepSeek Flash (free via Pullfrog for OSS) ｜ 𝕏}

[yamcodes]

Addressed both review items in commit 0d2d397:

• Pin responsive behavior in E2E: Added computed-style tests in apps/playwright-www/tests/responsive.test.ts verifying display: flex vs display: none for .home-aurora__payload-wire--direct and .home-aurora__payload-gate across 375px and 1280px viewports, and clarified the jsdom unit test description in declarative-showcase.test.tsx.
• Deduplicate container query and media query: Removed the redundant @media (min-width: 64rem) overrides in aurora.css, allowing @container stream-stage (min-width: 28rem) to serve as the single source of truth for the showcase geometry, and documented the 28rem runway floor.

[pullfrog]

✅ No new issues found.

Reviewed changes Incremental re-review of commit 0d2d397 (the delta since the prior pullfrog review of 79b3172 — an e2e test pinning the responsive degradation plus a container-query dedup):

• Removed the redundant @media (min-width: 64rem) gate/dock overrides so @container stream-stage (min-width: 28rem) is now the single source of truth for the showcase layout, with a comment documenting the 28rem runway floor. At the page's real geometry (2-column bento, widget cell ~half-width), the container now genuinely governs: it crosses 28rem at ~1046px viewport, so the previous duplication (media query pre-empting the never-effective container query) is gone and the mobile direct wire correctly serves the 1024–1044px band that previously rendered a cramped gate.
• Added a Playwright computed-style test in apps/playwright-www/tests/responsive.test.ts asserting display of .home-aurora__payload-wire--direct vs .home-aurora__payload-gate / --1 at 375px and 1280px — a real behavior pin, not just markup. Verified against the CSS geometry (container ~307px at 375px, ~564px at 1280px) so both assertion sets hold, and the CI test-e2e job will run it via turbo --affected.
• Clarified the jsdom unit test title to reflect it pins markup + carrier tokens rather than responsive behavior.

The dsf unit suite passes (2/2, re-run this run). Both prior review threads' concerns are now genuinely resolved; no new issues in the delta.

  ^{｜ View workflow run ｜ Using DeepSeek Flash (free via Pullfrog for OSS) ｜ 𝕏}