[preview] Grid Statements Playground — assembly (do not merge) by jaymantri · Pull Request #1032 · lightsparkdev/grid-api

jaymantri · 2026-09-18T17:46:40Z

Why

This PR is an assembly preview. It lets reviewers test the full Statements playground before the work is split into reviewer-sized PRs.

Do not merge this assembly PR.

Fourth-polish result

Configure statement: One two-by-two grid now selects Consumer, Commercial, Mobile, and Desktop.
Rail geometry: The configure and API rails keep the shared Cards widths and remain in viewport bounds at wide, stacked, and mobile breakpoints.
Automatic load: Account changes show the Wallet loader for at least 500 ms, then stage the three ordered calls. The manual Period closes and Reset flow is gone. Re-selecting the active account does not reload it.
Desktop device: Desktop uses a Wallet-based landscape Duo shell with an 890 x 626 screen and shell-contained scrolling.
Document surfaces: Masthead and section treatments use the configured secondary color. The details and footer rules no longer add unwanted strokes.
Shared controls: Choice, color, share, panel, rail, typography, font, and Wallet shell sources are either byte-identical to Cards or Wallet, or covered by named adaptation checks.
Live design changes: Brand and color edits update the visible preview and open share preview without extra API calls. Account changes re-run the calls.
Reg E notice: The duplicate footer contact block is removed. The complete Reg E error-resolution notice still contains 8605 Santa Monica Blvd. and (855) 516-0103.
Live share preview: Share reuses the active Mobile or Desktop preview tree and current brand state. It closes when a new account load starts.
Responsive share controls: The Cards share pill and three actions remain bounded and reachable at 1280, 1680, 2560, stacked, and 390 px mobile widths.
Mobile statement width: The in-app document fills the 380 px Wallet screen body. It uses Wallet's 24 px horizontal padding and scrolls inside the shell.
Single-header contract: Mobile shows one September statement app title with Wallet title typography, no logo, no period line, and showMasthead={false}. Standalone, Desktop, HTML, and PDF documents keep the masthead. UI titles and aurora-september-statement.{pdf,html} filenames use one shared closed-period derivation.

Commits

ab6fbaea — configure, loading, rail, and device preview refactor
ff4bfd1e — title, export, width, footer, and Reg E document polish
d2feb188 — live responsive share preview
7e6938c7 — browser, visual, and parity audit coverage
e96a9552 — preserve the executable audit entry point
4cad8c65 — close final audit findings

Verified at `4cad8c65`

npm test: 48 tests pass in 13 files.
npx tsc --noEmit: passes.
npm run build: passes.
npm run check:chrome: passes.
npm run audit:behavior: passes. Mobile article and scroller are both 380 px; desktop and mobile scroll positions advance inside their shells.
AUDIT_LABEL=fourth-polish-final npm run audit:visual: passes.
Independent diff audit: no findings after fixes.
make lint: passes with existing informational OpenAPI output.
Audit artifacts: components/grid-statements-demo/.artifacts/visual-audit/fourth-polish-final/.

Parity

Cards shared sources: identical, except named local exceptions in the parity script.
Wallet AppShell: eight files identical; AppShell.tsx and usePhoneFitScale.ts are checked adaptations for the landscape Duo geometry.
Cards share button: StageShareButton.tsx is identical at Cards commit 39baddfd; its SCSS is a checked mobile-position adaptation.
Statement-only document and preview code: local by design and covered by unit, behavior, and visual checks.

Preview

Vercel project: grid-statements-demo
Deployment: https://grid-statements-demo-kl3plf7g0-lightspark-team.vercel.app
State: Ready for commit 4cad8c65
HTTP check: 200

Not in this PR

No Statements endpoint in the OpenAPI spec.
No email chrome.
No card effects.
The MDX-pure artifacts in the separate grid-statements repo remain the static paste target.

Add the standalone statement renderer and its focused tests. Co-authored-by: Cursor <cursoragent@cursor.com>

Set an explicit TypeScript base URL for clean remote builds. Co-authored-by: Cursor <cursoragent@cursor.com>

Add the Mintlify page, restore its Overview navigation entry, and point the embed at the public playground project. Co-authored-by: Cursor <cursoragent@cursor.com>

Fork the Cards chrome and layout contract into Statements. Drive the statement, API samples, and totals from one typed model. Reuse Cards presets and real Grid OpenAPI operation IDs. Co-authored-by: Cursor <cursoragent@cursor.com>

Document the cp-based chrome port contract. Add byte-parity, behavior, and visual audit scripts. Keep generated browser evidence out of Git. Co-authored-by: Cursor <cursoragent@cursor.com>

Map Mintlify preview branches to the Statements Vercel preview host. Pass embed, theme, and navigation state in the iframe URL. Co-authored-by: Cursor <cursoragent@cursor.com>

State that Grid account balances are current data and that the platform stores period balances. Generate distinct transaction identities for each statement period and pin the rebuild behavior. Co-authored-by: Cursor <cursoragent@cursor.com>

mintlify · 2026-09-18T17:46:43Z

Preview deployment for your docs. Learn more about Mintlify Previews.

Project	Status	Preview	Updated
Grid	🟢 Ready	View Preview	Sep 18, 2026, 8:18 PM

vercel · 2026-09-18T17:46:46Z

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

Project	Deployment	Actions	Updated
grid-statements-demo	Ready	Preview	Sep 19, 2026 12:30am UTC
grid-statements-playground	Ready	Preview	Sep 19, 2026 12:30am UTC

3 Skipped Deployments

Project	Deployment	Actions	Updated
grid-cards-demo	Ignored	Preview	Sep 19, 2026 12:30am UTC
grid-flow-builder	Ignored	Preview	Sep 19, 2026 12:30am UTC
grid-wallet-demo	Ignored	Preview	Sep 19, 2026 12:30am UTC

Rename the Vercel project to grid-statements-demo to match the Cards and Wallet projects and the components directory. Mirror the Cards embed snippet so Mintlify previews use the branch-derived Vercel host. Update the layout metadata base and the chrome parity exception. Document the 22-character branch name budget. Co-authored-by: Cursor <cursoragent@cursor.com>

Reg E periodic statements cover the Lead Bank prepaid account behind the card program, and card purchases are the statement line items, so the playground belongs in the Cards tab next to the Cards playground. - global-accounts/periodic-statements-playground -> cards/statements - snippet moved to snippets/cards/statements-demo-embed.mdx - redirect added for the old path - ls-page-playground path lists updated (head raw + sidebar-toggle.js) - sidebar label is the single word "Statements" to avoid wrapping Co-authored-by: Cursor <cursoragent@cursor.com>

jaymantri · 2026-09-18T20:18:02Z

Docs nav: the statements playground now lives in the Cards tab (commit 0e88008).

New path: /cards/statements (mintlify/cards/statements.mdx), listed in Cards → Overview right after the Cards Playground.
Redirect: /global-accounts/periodic-statements-playground → /cards/statements (verified 307 locally).
Sidebar label: Statements — one word, so it does not wrap in the sidebar.
Snippet moved to mintlify/snippets/cards/statements-demo-embed.mdx; ls-page-playground path lists in docs.json head and sidebar-toggle.js updated.

Why Cards: Reg E periodic statements cover the Lead Bank prepaid account behind the card program, and card purchases are the statement line items.

Add four typed statement color tokens, WCAG checks, print colors, and Cards-style controls. Co-authored-by: Cursor <cursoragent@cursor.com>

Parameterize the Cards AppShell shape for standard iPhone and iPhone Duo Mail views. Co-authored-by: Cursor <cursoragent@cursor.com>

Refresh calls for preset, account, and period changes without reacting to brand edits. Co-authored-by: Cursor <cursoragent@cursor.com>

Add a two-action export preview, print isolation, and self-contained HTML downloads. Co-authored-by: Cursor <cursoragent@cursor.com>

Lock the Duo outer preset, finish control and accessibility polish, and enforce browser audit evidence. Co-authored-by: Cursor <cursoragent@cursor.com>

Match the official open-body and inner-display proportions, and remove the invented camera treatment from the device preset. Co-authored-by: Cursor <cursoragent@cursor.com>

Assert both the official open-body ratio and inner-display ratio. Co-authored-by: Cursor <cursoragent@cursor.com>

Remove the portrait camera offset so the landscape status bar uses the shared safe inset. Co-authored-by: Cursor <cursoragent@cursor.com>

Use the measured closed outer geometry required for the Mail preview. Restore the asymmetric hinge bezel, corner radii, and camera hole. Co-authored-by: Cursor <cursoragent@cursor.com>

Restore the locked open-device geometry after a concurrent commit changed the view to the closed outer display. Assert both official ratios and use the neutral landscape safe inset. Co-authored-by: Cursor <cursoragent@cursor.com>

Keep the Mail preview on the measured closed outer display. Restore the asymmetric hinge bezel, corner radii, and camera hole. Co-authored-by: Cursor <cursoragent@cursor.com>

The server rendered relative timestamps from its own clock and locale. A reader in another time zone saw different text and React discarded the tree with errors 418, 423, and 425. Start the list empty and fill it on the client. The visual audit now runs the browser in a time zone behind UTC, so this mismatch fails locally instead of in production. Co-authored-by: Cursor <cursoragent@cursor.com>

Apple publishes an open body of 164.6 by 117.8 mm and an inner display of 1878 by 2670 at 430 ppi. The preset held closed cover dimensions and an invented camera hole instead. Use the open landscape body and inner display, with symmetric bezels. Delete the camera hole, because no published source gives its position. Co-authored-by: Cursor <cursoragent@cursor.com>

- port the Wallet AppShell and Cards choice and share patterns - replace device, period, mail, and legacy export controls - stage statement API calls only after the period closes - keep branding live with fixed closed-cycle statement data Co-authored-by: Cursor <cursoragent@cursor.com>

- avoid share-button hydration differences - capture the closed mobile state in visual audits - frame transaction derivation from the app view Co-authored-by: Cursor <cursoragent@cursor.com>

Move account and viewport choices into one configure grid. Replace the manual close flow with the timed loading state, and add the Wallet-based landscape Duo preview while preserving rail geometry parity. Co-authored-by: Cursor <cursoragent@cursor.com>

Derive statement titles and filenames from the closed period. Keep one Wallet title in-app, retain standalone mastheads for exports, use the full mobile width, and remove duplicate footer contact blocks without changing the Reg E notice. Co-authored-by: Cursor <cursoragent@cursor.com>

Reuse the active preview tree in the share panel. Restore the Cards share control behavior and cap the responsive panel while keeping mobile controls clear and reachable. Co-authored-by: Cursor <cursoragent@cursor.com>

Cover timed loading, rail bounds, shared live previews, export names, full-width shell scrolling, responsive share bounds, and final visual cases. Co-authored-by: Cursor <cursoragent@cursor.com>

Co-authored-by: Cursor <cursoragent@cursor.com>

Avoid duplicate account reloads, close share during account loading, and remove redundant legal contact constants. Co-authored-by: Cursor <cursoragent@cursor.com>

jaymantri and others added 7 commits September 17, 2026 15:39

feat: add periodic statements playground

8a9f3fd

Add the standalone statement renderer and its focused tests. Co-authored-by: Cursor <cursoragent@cursor.com>

fix: make demo path aliases portable

f726adc

Set an explicit TypeScript base URL for clean remote builds. Co-authored-by: Cursor <cursoragent@cursor.com>

docs: embed periodic statements playground

c5d4189

Add the Mintlify page, restore its Overview navigation entry, and point the embed at the public playground project. Co-authored-by: Cursor <cursoragent@cursor.com>

feat(statements): match Cards playground structure

58cad6f

Fork the Cards chrome and layout contract into Statements. Drive the statement, API samples, and totals from one typed model. Reuse Cards presets and real Grid OpenAPI operation IDs. Co-authored-by: Cursor <cursoragent@cursor.com>

test(statements): lock chrome and browser parity

6b96bc2

Document the cp-based chrome port contract. Add byte-parity, behavior, and visual audit scripts. Keep generated browser evidence out of Git. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(docs): route Statements preview embeds

a600c5c

Map Mintlify preview branches to the Statements Vercel preview host. Pass embed, theme, and navigation state in the iframe URL. Co-authored-by: Cursor <cursoragent@cursor.com>

mintlify Bot deployed to staging - mintlify September 18, 2026 17:48 View deployment

vercel Bot deployed to Preview – grid-statements-playground September 18, 2026 19:51 View deployment

mintlify Bot deployed to staging - mintlify September 18, 2026 20:05 View deployment

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 20:07 View deployment

mintlify Bot deployed to staging - mintlify September 18, 2026 20:18 View deployment

jaymantri and others added 8 commits September 18, 2026 13:21

feat(statements): add accessible brand controls

f38cab6

Add four typed statement color tokens, WCAG checks, print colors, and Cards-style controls. Co-authored-by: Cursor <cursoragent@cursor.com>

feat(statements): add iPhone mail previews

8c25b97

Parameterize the Cards AppShell shape for standard iPhone and iPhone Duo Mail views. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): isolate API refresh triggers

d0102ed

Refresh calls for preset, account, and period changes without reacting to brand edits. Co-authored-by: Cursor <cursoragent@cursor.com>

feat(statements): export PDF and standalone HTML

b5a83c9

Add a two-action export preview, print isolation, and self-contained HTML downloads. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): complete playground polish audit

15b55d4

Lock the Duo outer preset, finish control and accessibility polish, and enforce browser audit evidence. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): render iPhone Duo in landscape

8bb4eaa

Match the official open-body and inner-display proportions, and remove the invented camera treatment from the device preset. Co-authored-by: Cursor <cursoragent@cursor.com>

test(statements): lock Duo landscape ratios

31c1871

Assert both the official open-body ratio and inner-display ratio. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): use neutral Duo safe area

e970003

Remove the portrait camera offset so the landscape status bar uses the shared safe inset. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 21:25 View deployment

jaymantri and others added 3 commits September 18, 2026 14:28

fix(statements): restore Duo outer display

acda512

Use the measured closed outer geometry required for the Mail preview. Restore the asymmetric hinge bezel, corner radii, and camera hole. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): keep Duo open and landscape

f8ad1ec

Restore the locked open-device geometry after a concurrent commit changed the view to the closed outer display. Assert both official ratios and use the neutral landscape safe inset. Co-authored-by: Cursor <cursoragent@cursor.com>

fix(statements): enforce Duo outer device

e1a5704

Keep the Mail preview on the measured closed outer display. Restore the asymmetric hinge bezel, corner radii, and camera hole. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 21:53 View deployment

jaymantri and others added 2 commits September 18, 2026 15:11

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 22:13 View deployment

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 23:02 View deployment

fix(statements): close final audit gaps

83457e6

- avoid share-button hydration differences - capture the closed mobile state in visual audits - frame transaction derivation from the app view Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview – grid-statements-demo September 18, 2026 23:11 View deployment

jaymantri and others added 5 commits September 18, 2026 17:19

fix(statements): scale live share previews

d2feb18

Reuse the active preview tree in the share panel. Restore the Cards share control behavior and cap the responsive panel while keeping mobile controls clear and reachable. Co-authored-by: Cursor <cursoragent@cursor.com>

test(statements): audit fourth polish behavior

7e6938c

Cover timed loading, rail bounds, shared live previews, export names, full-width shell scrolling, responsive share bounds, and final visual cases. Co-authored-by: Cursor <cursoragent@cursor.com>

chore(statements): keep behavior audit executable

e96a955

Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview – grid-statements-demo September 19, 2026 00:23 View deployment

fix(statements): close fourth-polish audit findings

4cad8c6

Avoid duplicate account reloads, close share during account loading, and remove redundant legal contact constants. Co-authored-by: Cursor <cursoragent@cursor.com>

vercel Bot deployed to Preview – grid-statements-demo September 19, 2026 00:30 View deployment

Navigation Menu

[preview] Grid Statements Playground — assembly (do not merge) - #1032

[preview] Grid Statements Playground — assembly (do not merge)#1032
jaymantri wants to merge 30 commits into
mainfrom
ajay/grid-statements-playground

jaymantri commented Sep 18, 2026 •

edited

Loading

Uh oh!

mintlify Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

vercel Bot commented Sep 18, 2026 •

edited

Loading

Uh oh!

jaymantri commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

jaymantri commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Why

Fourth-polish result

Commits

Verified at 4cad8c65

Parity

Preview

Not in this PR

Uh oh!

mintlify Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel Bot commented Sep 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jaymantri commented Sep 18, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

jaymantri commented Sep 18, 2026 •

edited

Loading

Verified at `4cad8c65`

mintlify Bot commented Sep 18, 2026 •

edited

Loading

vercel Bot commented Sep 18, 2026 •

edited

Loading