Conversation
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>
Contributor
|
Preview deployment for your docs. Learn more about Mintlify Previews.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
3 Skipped Deployments
|
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>
Contributor
Author
|
Docs nav: the statements playground now lives in the Cards tab (commit 0e88008).
Why Cards: Reg E periodic statements cover the Lead Bank prepaid account behind the card program, and card purchases are the statement line items. Update (b45defc): both statements pages moved out of Overview into a new Cards sidebar group, Statements, placed directly after Transactions. Cards group order: Overview → Onboarding → Card management → Transactions → Statements → Card design → Platform tools. Pages in the group: Update (ab8b389): the guide page |
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 desktop export preview used `flex: none` with a fixed 922 by 658 aspect ratio, so it could not absorb the panel's `max-height`. On a 700 px viewport the panel clipped its own action row and `Copy link`, `Save PDF`, and `Save HTML` were not hit-testable. The preview now shrinks, so the actions stay inside the panel. Also give the device switch a roving tabindex and arrow keys, which matches the account radiogroup in `ChoiceGrid`. Verification at 440bbfe plus these edits, in a clean worktree: - npm test: 57 tests pass in 16 files - npx tsc --noEmit: passes - npm run build: passes - npm run check:chrome: passes - npm run audit:behavior: passes, and its new short-viewport check fails on the old CSS with insidePanel false and clickable false at 1440 by 700 Co-authored-by: Cursor <cursoragent@cursor.com>
Rename the stage action and dialog from Share to Export. Use the shared download arrow for the export control. Trap focus inside the modal and return it to the trigger on close. Keep desktop export actions reachable in short viewports. Verification: - npm test: 57 tests pass in 17 files - npx tsc --noEmit: passes - npm run build: passes on Node 22 - npm run check:chrome: passes - npm run audit:behavior: passes with zero browser errors - make lint: passes Co-authored-by: Cursor <cursoragent@cursor.com>
The grid-statements-demo Vercel project lost its GitHub link on 2026-09-21 because its Root Directory exists only on this branch, so Git deploys from main failed and posted red statuses on unrelated PRs. Document the interim CLI deploy procedure and the post-merge relink. Co-authored-by: Cursor <cursoragent@cursor.com>
Move the preview mode selector into the panel header and adopt the Wallet selected-cell state system. Keep print frames alive through afterprint, remove browser PDF chrome, and add reproducible rail and PDF audits. Co-authored-by: Cursor <cursoragent@cursor.com>
Fix printable marker and masthead geometry, preserve merchant location in one line, tighten the Reg E notice, and align export motion with Cards. Verified: - npm test - npx tsc --noEmit - npm run build - npm run check:chrome - npm run audit:behavior - npm run audit:pdf - make lint Co-authored-by: Cursor <cursoragent@cursor.com>
Wait for the Cards-matched panel motion to finish before recording visual evidence. Verified: - npm run audit:behavior Co-authored-by: Cursor <cursoragent@cursor.com>
Accept the no-filter reduced-motion end state when waiting for settled export visuals. Co-authored-by: Cursor <cursoragent@cursor.com>
Require full panel opacity before hit-testing or recording export-sheet evidence. Co-authored-by: Cursor <cursoragent@cursor.com>
The masthead set secondary text on the whole header, so the derived
title ("September statement") rendered muted. Move primary text to the
masthead and scope secondary text to the brand slot, which is the only
child that used it. Apply the same fix to the in-app hero title.
Also set `text-wrap: pretty` on the Reg E error-resolution footer and
export `text-wrap` in the inline-style HTML/print path so the export
matches the screen.
Co-authored-by: Cursor <cursoragent@cursor.com>
Use the Cards neutral selected stroke for statement controls. Replace browser chrome with a brand-aware desktop app frame. Pin direct and export-frame behavior with tests and audits. Co-authored-by: Cursor <cursoragent@cursor.com>
Move the live brand into a full-height sidebar with empty content and footer zones. Keep the main header empty and the statement scrolling inside the right column. Pin the shared direct and Export frame across desktop sizes and themes. Co-authored-by: Cursor <cursoragent@cursor.com>
- simplify the desktop shell and recess its document surface - make the mobile statement full bleed with scroll elevation - remove the redundant commercial footer divider - audit consumer and commercial screen, HTML, and PDF output Co-authored-by: Cursor <cursoragent@cursor.com>
Empty the desktop rail and sink the whole frame so only the statement card lifts. Bleed the mobile document under a scrolled header, drop the spare Commercial footer hairline, and match Cards API rail copy. Co-authored-by: Cursor <cursoragent@cursor.com>
Compare every chrome surface to the token-derived sunken mix, not the primary background, so the lifted statement card is the only exception. Co-authored-by: Cursor <cursoragent@cursor.com>
The frame surfaces now share the token-derived sunken mix. Keep the document on primary background as the only lifted element. Co-authored-by: Cursor <cursoragent@cursor.com>
Validate primary chrome around the token-derived recessed document area. Co-authored-by: Cursor <cursoragent@cursor.com>
Apply the recessed token only behind the statement document. Co-authored-by: Cursor <cursoragent@cursor.com>
The playground already groups Load statement under one divider; tests must reject the old explanatory sentence and require unified sunken frame surfaces. Co-authored-by: Cursor <cursoragent@cursor.com>
Add mintlify/cards/statements-guide.mdx and list it in the Cards tab, Overview group, after the statements playground. The page covers who receives a statement, the monthly and quarterly cadence (12 CFR 1005.9(b)), the section-to-field mapping for each Reg E item, consumer versus commercial differences, the three API calls the playground uses to build a statement view, delivery, and a note on what is not yet available (no statement endpoint, webhook, or balance snapshots). No back-link from the playground page: its CSS hides every child of Co-authored-by: Cursor <cursoragent@cursor.com> #content except the embed container.
Contributor
Author
|
Held at Held pending three items:
What changed in
Verified on node 22 with mint 4.2.284: Original comment (guide added in 7a5be9e, superseded)Added the periodic statements guide in 7a5be9e, reworked in the commit below to cover shipped behavior only.
|
Reframe the guide around what the API returns today. The Platform builds and delivers the statement from getCustomerById, listCustomerInternalAccounts, and listTransactions. Remove every sentence that said Grid generates, renders, or provides a statement artifact, and drop the "Not yet available" note. The note's content moves verbatim to components/grid-statements-demo/docs/prd-checklist.md under "Open items (not for public docs)". Balances: the page now says the Platform records the balance at period close and carries it forward, or derives the opening balance from the period's activity. Co-authored-by: Cursor <cursoragent@cursor.com>
Move the periodic statements guide and playground out of Cards → Overview into a new `Statements` group placed directly after `Transactions`. Labels are one word each within the group: "Periodic statements" (guide) and "Playground" (playground). Icons are unique within the Cards tab: IconNewspaper2.svg for the guide, receipt-check.svg for the playground (phone.svg stays with the Cards Playground). Paths and the /global-accounts/periodic-statements-playground redirect are unchanged. Co-authored-by: Cursor <cursoragent@cursor.com>
Ship only the Statements playground page. Remove mintlify/cards/statements-guide.mdx from the docs tree and drop cards/statements-guide from the Statements sidebar group. The group stays after Transactions with the single page cards/statements (Playground, receipt-check.svg). The guide is held, not deleted. The draft moves to components/grid-statements-demo/docs/statements-guide-draft.md with a header that records the hold reasons. prd-checklist.md points to it. Held 2026-09-22 pending: - Settled ownership of statement generation and delivery. The PRD says Grid generates; MSA 2.6(c) says Lightspark provides required notices; the draft said the partner produces. - Legal review of 12 CFR 1005.18 prepaid applicability and of commercial error language. - Accuracy fixes: paymentRail is not a top-level transaction field; the amount rule must key on type, not direction; balance is current-only; card transactions carry no fees; RTP Reg E coverage is unverified; the 60-day window runs from the send date. Verified on node 22 with mint 4.2.284: docs.json parses, mint broken-links has 0 hits for cards/statements, /cards/statements renders the Playground, /cards/statements-guide renders Page Not Found, and markdownlint passes on the moved draft. Co-authored-by: Cursor <cursoragent@cursor.com>
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Why
This assembly PR lets reviewers test the complete Statements playground before the work is split into smaller PRs.
Do not merge this assembly PR.
The sixth polish pass moves the device selector into the preview header, adopts Pat's complete Wallet selected-cell state system, proves rail parity, removes browser PDF chrome, and keeps the print iframe alive through the macOS Save PDF flow.
Sixth-pass implementation
components/grid-visualizer/src/components/CodePanel/CodePanel.tsx:297-317andCodePanel.module.scss:75-110onorigin/main.DeviceToggleuses the sameaudienceToggle,audienceTab, and active-tab structure with Mobile and Desktop text. It sits in the existing right-alignedPanelHeader.actionsslot. The floating stage glass control and its adapter/preset are deleted.components/grid-wallet-demo/src/components/UseCasePicker/UseCasePicker.tsx:184-221andUseCasePicker.module.scss:1-100,143-218onorigin/main. The StatementsChoiceGridnow uses the whole Wallet surface, border, corner, hover, press, selected z-index, masked gradient ring, and icon motion system.:focus-visibleoutline is added because the source toggle removes the native button outline.scripts/rail-audit.mjs.@page { margin: 0 }removes Chrome's header/footer region.body { padding: 12mm }supplies the document inset. The title remains the filename stem.afterprintevent. A five-minute fallback handles missing browser events. The fallback is armed beforeprint()and cleared on normal cleanup. Errors remove the frame immediately.PDF root cause
The old 60-second timeout could remove the same-origin print iframe while a macOS Save PDF sheet was still open. The native sheet still depended on that frame's document. The sixth pass makes
afterprintthe primary lifetime signal and extends only the abandoned-frame fallback to five minutes.Headless Chrome produced a real one-page PDF from the production deployment with selectable statement text. PDFKit found 1,832 text characters and no filename-stem title, URL, date header, or
1/1page footer. Chromium and Playwright WebKit both kept the iframe beforeafterprintand removed it afterafterprint. Native Chrome and Safari save sheets were not automated because macOS does not expose them safely through Playwright.Production rail measurements
Source API maximum is
viewport - 400 - 320: 720, 960, and 1200px at the three widths. The rendered default remains 680px in wide layout. Stacked layout uses the full 1040px right side. Rail-feed padding is28px 40px 40pxstacked and28px 40px 48pxwide. The card itself has 0 outer padding; rows use 14px.Verification at
8a88b85anpm test: 58 tests pass in 17 files.npx tsc --noEmit: passes.npm run build: passes on Node 22.23.2.npm run check:chrome: passes.npm run audit:behavior: passes locally and against production.npm run audit:visual: passes across 1280, 1680, 1920, 2560, stacked, and mobile cases in light and dark themes.npm run audit:rails: all nine production cases match the shared contract with zero console, page, or failed-response errors.npm run audit:pdf: production Chrome PDF and WebKit iframe lifecycle pass; PDFKit reports one page and no browser chrome.make lint: passes.8a88b85a.Deployments
The repository-root
.vercel/project.jsonwas checked before both commands and namedgrid-statements-demo.dpl_FvbuC2JmYnH8cR16wvAigM3y1MBQ)dpl_aktYtEhutcUPhBWHcbb4yCcQr2qD)Both deployments ran from the repository root with the required unlinked-project CLI flow.
Visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/sixth-polish-8a88b85a/.The ignored folder contains 126 files: before and after screenshots, the 1920 additions, nine rail screenshots,
rail-measurements.json, a realactual-export.pdf,print-document.html,pdf-audit.json, visual metrics, and the decision trail.Blast radius
All source edits stay in
components/grid-statements-demo/. This PR does not change OpenAPI, Mintlify, Cards, Wallet, or Flow Builder.Seventh-pass implementation
supelements after the amount. They use static positioning, superscript alignment, and tabular numerals. The masthead title now aligns with the amount column in print.Blue Bottle Coffee · Los Angeles, CAon one line. The fixture terminal is city/state. The API sample still carriesmerchant.city,merchant.state, andmerchant.country.origin/maincommit6c275a23has no modal backdrop node. It showsSharePanelover the live DotGrid stage and uses 48px blur, 0.9 scale, 128px travel, quart easing, and reduced-motion handling. Statements copies that panel motion and makes its required outside-click target transparent so its existing gradient, ripple, and dark-mode stage remain visible. This is an accessibility adaptation, not a verbatim backdrop-node copy.Seventh-pass commits
0e3f2e34— product, export, audit, test, and documentation changes.5f68a1d2— wait for the export panel to settle before capture.c77bfc16— handle reduced-motion capture.5a3b0ca1— require full panel opacity before capture.Verification at
5a3b0ca1npm test: 58 tests pass in 17 files.npx tsc --noEmit: passes after the build generates Next types. The first concurrent run racednext buildand failed only because.next/typeswas being replaced.npm run build: passes.npm run check:chrome: passes.npm run audit:behavior: passes.npm run audit:visual: passes for Cards and Statements across 12 light/dark, desktop, stacked, and mobile cases.npm run audit:rails: passes.npm run audit:pdf: passes. PDFKit reports one page and no browser header/footer. Print-emulated HTML records a 0px title delta, 2px inline marker gaps, superscript/tabular marker styles, and 7.17:1 legal-text contrast.make lint: passes with existing OpenAPI warnings.The PDF geometry gate measures print-emulated HTML. PDFKit separately checks PDF page count and text content. Final PDF and offline HTML screenshots were also inspected directly.
Seventh-pass deployments
The repository-root
.vercel/project.jsonwas checked before deployment and namesgrid-statements-demo.All three URLs return HTTP 200. Both deployments also pass
npm run audit:behavior.Seventh-pass visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/seventh-polish-5a3b0ca1/./Users/ajaymantri/Downloads/Grid Statements - Playground.pdfcomponents/grid-statements-demo/.artifacts/visual-audit/seventh-polish-before/actual-export.pdfcomponents/grid-statements-demo/.artifacts/visual-audit/seventh-polish-5a3b0ca1/actual-export.pdfcomponents/grid-statements-demo/.artifacts/visual-audit/seventh-polish-5a3b0ca1/actual-export.pngcomponents/grid-statements-demo/.artifacts/visual-audit/seventh-polish-5a3b0ca1/actual-export.htmlcomponents/grid-statements-demo/.artifacts/visual-audit/seventh-polish-5a3b0ca1/actual-export-html.pngEighth-pass implementation
components/grid-cards-demo/src/components/DesignPicker/DesignPicker.module.scss:180-190onorigin/main. Cards usesborder: 2px solid var(--text-primary)for the selected swatch ring. Statements now uses that exact width and token for both design swatches and Account type cells. Swatches keep the Cards radius. Account cells keep the Wallet inset and cell radius. Hover, pressed, focus-visible, animation, and dark-mode behavior are unchanged.--statement-primary-background. Dividers use the existing--statement-hairlinemix based on--statement-primary-text.ShareSheetstill rendersStatementPreview. The Desktop export preview therefore uses the same frame, brand values, sidebar, title count, and scroll structure as the direct preview.Verification at
fc6cc057npm test: 63 tests pass in 18 files.npx tsc --noEmit: passes.npm run build: passes.npm run check:chrome: passes.npm run audit:behavior: passes against the local production build, the preview deployment, and the production deployment.npm run audit:visual: passes across 24 Cards and Statements cases. The set includes 1280, 1680, 1920, 2560, stacked, and mobile layouts in light and dark. All 10 desktop direct/Export signatures match. All 10 Export panels fit their viewports. Console and hydration error count is zero.make lint: passes with the existing OpenAPI warnings.Eighth-pass deployments
The repository-root
.vercel/project.jsonnamedgrid-statements-demobefore both deploy commands.All URLs return HTTP 200.
Eighth-pass visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/eighth-polish-fc6cc057/.Ninth-pass implementation
--statement-primary-background. The sidebar, header, and footer separators use--statement-hairline.ShareSheetstill renders the sameStatementPreviewtree. The direct Desktop frame and Export Desktop frame therefore use the same skeleton and fit behavior.Verification at
fb9cae71npm test: 64 tests pass in 18 files.npx tsc --noEmit: passes.npm run build: passes.npm run check:chrome: passes.npm run audit:behavior: passes before and after commit.npm run audit:visual: passes across all 24 Cards and Statements cases. All ten desktop direct and Export signatures match. All Export panels fit their viewports. Console and hydration error count is zero.make lint: passes with the existing OpenAPI warnings.Ninth-pass visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/ninth-polish-fb9cae71/.Ninth-pass deployments
The repository-root
.vercel/project.jsonnamedgrid-statements-demobefore both deploy commands.All three URLs return HTTP 200.
Tenth-pass implementation
color-mix(in srgb, var(--statement-primary-text) 4%, var(--statement-primary-background))so the primary-background statement card sits above a token-derived recessed surface.Verification at
843d35c2npm test: 68 tests pass in 18 files.npm run build: passes.npx tsc --noEmit: passes.npm run check:chrome: passes.npm run audit:behavior: passes locally, on preview, and on production.npm run audit:visual: passes all 24 Cards and Statements light/dark, desktop, stacked, and mobile cases. It also checks empty desktop rail zones, recessed-surface contrast, mobile full-bleed borders, the resting hairline, the scrolled shadow, direct/Export parity, and zero console or hydration errors.npm run audit:rails: passes.npm run audit:pdf: passes for Consumer. Consumer has two footer hairlines, one page, no browser chrome, and 7.17:1 legal-text contrast. The Commercial PDF verification also passes with one footer hairline, one page, no Reg E notice, and no browser chrome.make lint: passes with existing OpenAPI warnings.Tenth-pass deployments
The repository-root
.vercel/project.jsonwas checked before both deploys. It namesgrid-statements-demo.All three URLs return HTTP 200. Preview and production pass the behavior audit.
Tenth-pass visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/tenth-polish-843d35c2/.The audit includes the supplied before screenshot, direct and Export screenshots, resting and scrolled mobile screenshots, consumer and commercial self-contained HTML, both one-page PDFs, PDF screenshots, metrics, and the PDF audit record.
Item 6 — API rail copy (Cards parity)
API calls. There is no explanatory sentence in the divider slot.SectionDividerlabeledLoad statementwithshowFlowIcon.No API calls yet/Run a flow in the app and each request will appear here.API callsplus the new-call count pill.Verification at
843d35c2npm test: 70 tests pass in 18 files.npx tsc --noEmit: passes.npm run build: passes.npm run check:chrome: passes.npm run audit:behavior: passes locally and against production.npm run audit:visual: passes all 24 Cards and Statements cases. Desktop chrome matches the sunken mix. The statement card stays on primary.npm run audit:pdf: passes. One page, no browser chrome.make lint: not re-run in this item; OpenAPI warnings remain from earlier.Item 6 deployments
The repository-root
.vercel/project.jsonnamedgrid-statements-demobefore both deploys.All three URLs return HTTP 200.
Item 6 visual audit
Artifacts:
components/grid-statements-demo/.artifacts/visual-audit/tenth-polish-843d35c2/.Sunken formula:
color-mix(in srgb, var(--statement-primary-text) 4%, var(--statement-primary-background)).