Add Ledger and Band template families with decor primitives

Crimson Grid, Tangerine Ledger, Slate Band and Teal Swoosh are rebuilt from
the Canva PDFs with grid and band tables that survive page breaks,
full-bleed fixed bands, pennant tabs, gradient corner swooshes with
keep-outs, Carbon icon circles, and the user's logo in the measured slot
(knockout or white chip on the dark Slate band). Adds static Poppins
500-700 and Inter fonts. Thumbnails regenerated for all eight templates;
the item-count sweeps run in their own test file.
This commit is contained in:
2026-10-04 08:34:18 +05:30
parent 04d92aa149
commit 06976df55c
57 changed files with 4078 additions and 217 deletions
+16
View File
@@ -197,3 +197,19 @@ Near-duplicate of 9.pdf. Both use the same Montserrat type scale, and these elem
- Payment method and Note.
9.pdf swaps the swooshes for a slate top bar (logo plus NO.), a blue full-width 'INVOICE' band and an icon contact footer. 10.pdf has a logo/brand row, swoosh corners and a 'Contact:' block. Build 9 and 10 as one layout component with a header/decor variant. Not related to format.pdf or the current IBM Plex in-app template.
## Implementation notes
Built as `src/pdf/templates/band/` (the family component shared with Slate Band; tokens in `teal.tsx`) on the decor primitives in `src/pdf/decor/` (`CornerSwoosh`, with `LinearGradient` fills and keep-out rectangles). Measured against `10.pdf` with `npm run templates:compare` (`/tmp/invoice-c4/compare-teal-swoosh.png`, left Canva, right ours).
**Matches the design (measured, A4):** logo mark at (59.5, 59.5); INVOICE in Montserrat 800 30 pt with 0.26 em tracking, baseline 144; Date and 'NO.' on one row (x 59.5 and 342), Billed to / From at x 59.5 / 342 (270.5 and 193.7 wide); the full-bleed #EFF1F2 header band 58.3 tall, 2.25 pt #C2C7CF rules; the teal / gunmetal / silver corner art at the design's coordinates (the paths are the spec's, mirrored numerically for the top-right cluster, gradients flipped with them).
**Intentional deviations, and why:**
- **Swooshes.** Static Svg paths with gradients in a single `Defs` (react-pdf resolves `url(#id)` from the first direct `Defs` only), anchored to the page corners (`left 0 / bottom 0`, `right 0 / top 0`, 342 x 188 pt), so they also fit Letter. The bottom-left cluster is fixed on every page. The top-right cluster is **page 1 only** (it sits in `FirstPageHeader`): on pages 2+ the table band starts at the top margin right under where the crescent would be, and the flow may not enter a keep-out. The gradient stops (dark at the teal edge, a highlight about two thirds along, dark again at the page edge) were read off the rendered original; the doc lists only the colours.
- **Keep-outs.** Staircases of 8 pt strips follow the silver crescent's inner edge plus 4 pt, per corner (bottom-left on every page, top-right on page 1); the audit's `keepout` check runs against them for text, images and Svg, fixed chrome included. The bottom padding is 110 pt so the flow stays above the crescent on every page and size; the footer text starts at x 200 (right of the crescent at the footer's height, no supplier name there), and the continuation band keeps its normal place.
- **Header.** The brand block stays left of x 440 (the design's limit): a mark logo has the vendor name beside it at 13 pt Bold (the design's 10.75 pt is a short placeholder), wrapping to more lines when long; a wordmark replaces the name; the tagline slot is dropped.
- **Meta.** Left column: Date, then 'Due:'; right column: 'NO. {number}', then 'PO:'. (The design's second meta line is added; everything below shifts down by one line, 16.5 pt.)
- **Table, totals.** As for Slate Band (docs/templates/09-slate-band.md): PRICE and TOTAL right-aligned, HSN/SAC as a sub-line, 44 pt rows instead of 52.5, a right-anchored stack of SUBTOTAL / DISCOUNT / TAXABLE VALUE / CGST+SGST (or IGST) above TOTAL with the 41.85 x 3 pt teal dash on its baseline, amount in words under it.
- **Bottom block.** The bank details (headed 'Payment details:') take the 'Contact:' column on the right (x 345-526, 181 pt), with the signature below; the Note sits bottom left when it is at most 100 pt tall, else flows below the table. Vendor phone and e-mail are in the From block, so 'Contact:' is not repeated.
- **Margins.** Top 55, sides 59.55, bottom floor 24 plus an 86 pt reserve (110 in all).
- **Letter.** The 49.9 pt deficit comes out of the brand-to-title gap (26.2 to 14), the gaps to the date row, parties, table and totals (58 pt of slack); rows, bands and the art keep their size.