feat(statements): periodic statements playground under Cards

[jaymantri]

What

Adds the Statements playground under Cards. It builds a consumer or commercial periodic statement from sample Grid customer, account, and transaction data, and shows the exact API calls behind it.
The app is a re-fork of the Cards playground chrome, with the Wallet AppShell for the device frame. It exports the statement as a one-page PDF or a self-contained HTML file.
The docs page embeds the production app at /cards/statements.

Single-commit resubmission of #1032 with review feedback applied and shared chrome re-synced to the Cards demo on main; #1032 is closed.

Try it

• Production app: https://grid-statements-demo.vercel.app
• Docs path: /cards/statements
• Mintlify preview builds from the branch once pushed.

What's in the diff

• components/grid-statements-demo/ — new Next.js app (port 4003). Statement model, fixtures, and API samples live in src/statement/. scripts/check-chrome-parity.mjs checks byte parity with Cards and Wallet.
• mintlify/cards/statements.mdx + mintlify/snippets/cards/statements-demo-embed.mdx — the docs page and its iframe snippet.
• mintlify/docs.json — new Statements group after Transactions; head script adds /cards/statements to the ls-page-playground class.
• mintlify/sidebar-toggle.js — same /cards/statements route for the playground class.
• components/grid-statements-demo/README.md — develop, parity, deploy, embed, and data contract.

No OpenAPI changes. No changes to Cards, Wallet, or Flow Builder.

Parity with Cards/Wallet

npm run check:chrome compares every copied file to Cards (or Wallet) by bytes. It passes at f8c60776 against the Cards and Wallet demos on main.

Byte-equal with Cards: public/fonts, src/app/fonts, src/app/globals.scss, src/apps/shared/typography, src/components/ApiPanel, ColumnResizeHandle, liquid-glass/squircle.ts, GridWordmark.tsx, PanelHeader, SectionDivider, ThemeSync.tsx, Tooltip, src/data/actions.ts, flow.ts, src/hooks/useColumnResize.ts, useNowTick.ts, useTheme.ts, useThemeMode.ts, src/lib/apiCodeFormat.tsx, easing.ts, formatRelativeTime.ts, groupApiEntries.ts, layout.ts, src/styles/breakpoints.scss.

Byte-equal with Wallet: src/apps/shared/AppShell/* except the two adapted files below.

Adapted, with the exact transform pinned in scripts/check-chrome-parity.mjs:

File	Source	Reason
next.config.mjs	Cards	Drops the Cards share-domain redirect
src/components/PlaygroundIntro/PlaygroundIntro.tsx	Cards	Statements product copy
src/app/layout.tsx	Cards	Statements metadata and production URL; drops the card-face asset preloads; pre-paint script unchanged
src/app/page.module.scss	Cards	Adds print-only rules that hide playground chrome
src/data/flowIcons.tsx	Cards	Adds the Load statement icon
src/apps/shared/AppShell/AppShell.tsx	Wallet	Accepts a device preset (phone or iPhone Duo landscape)
src/apps/shared/AppShell/usePhoneFitScale.ts	Wallet	Duo outer/screen dimensions
src/components/ShareSheet/StageShareButton.*	Cards	Export/Cancel labels and fixed bottom placement

Deploy notes

Vercel project grid-statements-demo, root directory components/grid-statements-demo. vercel.json skips builds for commits that do not touch this directory. After merge, connect the project to GitHub with production branch main.

Held

A periodic statements guide page is not part of this PR. Only the playground ships.

Follow-ups

Mobile history stacking and iframe postMessage origin checks are shared with the Cards, Wallet, and Visualizer playgrounds and tracked in #1059.

Verification at f8c60776

• npm test: 72 tests pass in 18 files.
• npm run check:chrome: passes.
• npm run build and npx tsc --noEmit: pass on Node 22.
• make lint: 0 errors.

[mintlify]

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

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

[vercel]

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

3 Skipped Deployments

Project	Deployment	Actions	Updated
grid-cards-demo	Ignored		Sep 23, 2026 8:24pm UTC
grid-flow-builder	Ignored		Sep 23, 2026 8:24pm UTC
grid-wallet-demo	Ignored		Sep 23, 2026 8:24pm UTC

[greptile-apps]

Confidence Score: 4/5

The PR appears safe to merge after considering a non-blocking PDF pagination issue in the statement export.

Findings

1.  Print pagination rules are lost ▶

Fix with agent prompt

### Issue 1
components/grid-statements-demo/src/statement/export.ts:53
The PDF export copies only the listed screen styles, removes the elements’ classes, and does not copy `break-inside`. This prevents the statement’s print rules from keeping transactions, fee totals, and notice paragraphs together, so content that reaches a page boundary can split across PDF pages. Please preserve these print properties or add equivalent rules to the generated document.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

Summary

This PR adds a standalone periodic-statements playground, its consumer and commercial fixtures, API-call visualization, branding controls, share state, PDF/HTML exports, and the Mintlify embed and navigation wiring.

• Builds statement previews from shared fixture data and exposes the corresponding customer, account, and transaction calls.
• Supports phone and desktop presentation, preset or uploaded branding, contrast checks, and shareable configuration URLs.
• Adds self-contained HTML and print-to-PDF export flows.
• Reuses Cards and Wallet playground chrome with automated parity checks.
• Adds the /cards/statements documentation page and production/preview iframe integration.

Diagram

%%{init: {'theme': 'neutral'}}%%
flowchart LR
  A[Statement configuration] --> B[Build consumer or commercial model]
  B --> C[Statement preview]
  B --> D[Generate sample Grid API entries]
  C --> E[Share configured URL]
  C --> F[Clone rendered statement]
  F --> G[Self-contained HTML download]
  F --> H[Print iframe / PDF dialog]
  I[Mintlify /cards/statements] --> J[Embedded playground]

Loading

_{Reviews (1) · Last reviewed commit: "feat(statements): periodic statements pl..."}

[greptile-apps]

Print pagination rules are lost

The PDF export copies only the listed screen styles, removes the elements’ classes, and does not copy break-inside. This prevents the statement’s print rules from keeping transactions, fee totals, and notice paragraphs together, so content that reaches a page boundary can split across PDF pages. Please preserve these print properties or add equivalent rules to the generated document.

Prompt To Fix With AI

This is a comment left during a code review.
Path: components/grid-statements-demo/src/statement/export.ts
Line: 53

Comment:
**Print pagination rules are lost**

The PDF export copies only the listed screen styles, removes the elements’ classes, and does not copy `break-inside`. This prevents the statement’s print rules from keeping transactions, fee totals, and notice paragraphs together, so content that reaches a page boundary can split across PDF pages. Please preserve these print properties or add equivalent rules to the generated document.

---

For each issue above, determine whether it is valid and should be fixed. If so, fix it directly.

[jaymantri]

Parked as a draft. The periodic statements guide ships separately in #1071. If the playground rolls out later, it needs a page path other than cards/statements and a rebase on the guide.