Add the Monolith and Cobalt Stripe templates

Standalone layouts for Canva templates 3 and 8, with the user's logo sized to the
placeholder box, a CapRule decor primitive, optional TableRows rule/heading options,
and a separate 1..45-row sweep test file.
This commit is contained in:
2026-10-04 11:25:19 +05:30
parent 5ea62a9be8
commit 385d7974cb
26 changed files with 2795 additions and 37 deletions
+17
View File
@@ -139,3 +139,20 @@ Voiced fields with no Canva slot, and where they go:
## Similarity to other templates
Structurally this is the closest of the three to the existing in-app InvoiceDocument: a title with a meta stack, rule dividers, a ruled table with a heavy top rule, right-hand totals with a rule above Total, and bank details at bottom left. It is also close to format.pdf/4.pdf (rules, a column-header row with a rule, right-hand totals). It is the cheapest to build, as a restyle of the existing component: Poppins, a 60pt auto-fit title, 1.5pt table rules, centred numbers and a two-column footer. Within the set, 7 and 11 share the big Poppins Bold INVOICE with the brand at top right; 3 is the monochrome, rules-only variant.
## Implementation notes
Built as `src/pdf/templates/monolith/`: a standalone template (`tokens.ts` the type roles and Canva distances, `plan.ts` the pure planner, `Layout.tsx` the body, `monolith.tsx` the definition), on the shared blocks and the `AccentRule` decor primitive. Measured against `3.pdf` with `npm run templates:compare -- monolith` (`/tmp/invoice-c6a/compare-monolith.png`, left Canva, right ours; `--numbers` prints the baselines).
**Matches the design (measured, A4, no due date so the stack is the design's three lines):** INVOICE origin x 50.7 with its baseline at 96.0 (Canva 96.2); the vendor name, date and INVOICE NO. lines at baselines 63.7 / 84.7 / 105.7 with their right edge at x 560.3 (Canva 560.6); BILLED TO at baseline 153.0 and x 35 (Canva 153.0, 34.4); client lines at 178.1 with the 17.25 pitch; Poppins 400/500/700 at the design's sizes (60.02 / 14.5 / 12.5 / 10.5), black only (a test scans the sources for any other colour); 0.75 pt rules, the table between two 1.5 pt rules around a 39.3 pt header; the totals block 215.5 pt wide with centred labels, a 0.75 pt rule over Total and the 23 pt row pitch; the footer grid with its 114 pt label column and the colon column at x 149; the vendor column at x 395.
**The logo.** The slot is the text-only "CAVEIN" placeholder (46.8 x 9 pt), so the logo is fitted to its 160 x 28 pt allowance, right-anchored, and the brand zone of the right-hand stack reserves the logo's whole box: the date and number lines are laid out under it, never over it (the earlier contact sheet showed a 28 pt logo covering the date line). A wordmark replaces the vendor name, a mark keeps it to its left, a tall logo is held to 28 pt, and with no logo the vendor name is printed in Bold 12.5 at the design's position. The zone is the `SUPPLIER_ID` box and the date and number lines the `META_ID` box, so the harness proves they do not meet.
**Intentional deviations, and why:**
- **Title.** The design's 60 pt is shrunk (to 30 pt at the least) when the right-hand stack leaves less than the title needs: TAX INVOICE comes out at about 51 pt on A4, and a long invoice number shrinks first (IdText) before the title does.
- **Right-hand stack.** The design's three lines plus a "Due:" line (Regular 12.5) when the invoice has a due date, and a red CANCELLED line on a cancelled one. The rule under it follows the stack, so an invoice with a logo or a due date starts 13 to 34 pt lower than the design.
- **Supplier identifiers.** The design's empty band under the client holds a SUPPLIER heading with the GSTIN (through `Slot.Gstin`) and PAN, in the footer's right-hand column x. They are on page 1 whatever the length of the invoice. The supplier's address, phone and e-mail are the footer's vendor block, as in the design, so on a multi-page invoice they appear on the last page only.
- **Table.** Numbers are right-aligned with a 10 pt pad (the design centres them; the doc's recommendation) except QTY, which stays centred; the cells of a row share one baseline (Canva's description and numbers are 7 pt apart); the rate's unit is `/hr` or a second line, HSN/SAC a 10 pt sub-line. Row padding is 16 pt for up to 3 rows, 12 for up to 5 and 8 beyond, then the elastic gaps take over.
- **Elastic gaps.** The 88 pt band under the client (down to 24), the row padding (down to 6), the gaps above BILLED TO and under the client block (down to 14) and the two gaps in the footer (down to 8) give back Letter's missing 50 pt, and the overflow of an invoice that is a little too long for one page. A 2-item tax invoice with a bank block fits one A4 page that way; with 3 rows and a signature image the closing block moves to page 2 (the items and totals stay together on page 1).
- **Amount in words and reverse charge** are the totals' left column (Medium 10.5, x 35..329). **Notes** and the **signature** (an image up to 150 x 45, or the signatory name and designation and the computer-generated line) form the band above the footer's top rule; notes taller than 110 pt flow as their own block before the closing.
- **Footer position.** The closing block ends 24 pt above the "Generated with Voiced" line, so its bottom rule is at y 804 where Canva's is at 812.
+16
View File
@@ -140,3 +140,19 @@ No raster XObjects. Everything is vector shapes plus live text.
- No near-duplicate in the set. It is the only template with cobalt bars, zebra rows and a swoosh logo. It shares the 'Studio Shodwe' placeholder copy with 7 and 11, but the layout is unrelated.
- Shared-component candidate: the icon contact footer (phone/email/address) also appears in 2, 9 (circled icons) and 12/13. The zebra rows loosely echo 1 (grey zebra) and 12/13 (pill rows).
- Does not resemble the in-app InvoiceDocument.tsx (closest in the set is 3.pdf), or format.pdf / 4.pdf.
## Implementation notes
Built as `src/pdf/templates/cobalt/`: a standalone template (`tokens.ts` the type roles, palette and Canva distances, `plan.ts` the pure planner, `Layout.tsx` the body, `cobalt.tsx` the definition) on the shared blocks, the `CapRule` decor primitive (a grey round-capped rule with accent segments, one static Svg) and the Carbon icon paths. Measured against `8.pdf` with `npm run templates:compare -- cobalt-stripe` (`/tmp/invoice-c6a/compare-cobalt-stripe.png` and `-nologo.png`, left Canva, right ours; `--numbers` prints the baselines).
**Matches the design (measured, A4, the 8-row sample without GST data):** vendor name baseline 74.5 (Canva 74.6) at x 59.5; INVOICE origin x 395.4 and baseline 87.2 (395.6 / 87.3), tracked +0.043 em with its ink ending on the right edge; the rule text baseline 117.1 and the header rule centred on y 113.8 with its sky accent at the left; "Billed to :" 173.8, the client name 195.8 and the first contact line 219.8 (173.8 / 195.9 / 219.9); "Invoice no" and the date at 174.8 / 194.0 (175.2 / 194.4); the table bar 20.76 pt tall at y 292 with its heading baseline at 304.6 (304.7), the five columns at 24.9 / 84.9 / 105.4 / 89.3 pt and rows of 17.82 pt, the first row baseline 325.7 (325.2); the price ends 31.7 pt inside its column (x 414.7, Canva 414.9) and the total 3.1 pt inside the edge; Sub Total at 477.0 with its label at x 363.5 (477.0 / 363.7); the GRAND TOTAL bar 214.5 x 20.76 beside the PAYMENT METHOD bar 133.8 wide, both cobalt; the bank lines 541.0 (Canva 561.8 less its second tax row); every colour is one of the design's (a test scans the sources).
**Intentional deviations, and why:**
- **Script signature.** Not reproduced (BD Script is licensed by Canva). The signature slot is the user's image (up to 36 pt tall, right-aligned, 5.5 pt inside the edge) or, without one, the signatory name and designation plus "Computer-generated invoice; no signature is required."
- **Header content.** The tagline under the name is the supplier's GSTIN (through `Slot.Gstin`, in caps) and the text at the end of the rule is the PAN. A logo goes in the measured slot: a mark (at most 34.25 pt square) keeps the name and tagline beside it; a wordmark (at most 181.5 x 34.25 pt, left-anchored) replaces the name and the tagline moves under it, which makes the header 13 pt taller. With no logo the name starts at the margin. The rule row follows the header, so it is never nearer than 6 pt to it.
- **Right-hand column.** "Invoice no : N" and the date as in the design, plus "Due date" and "PO" lines; a red CANCELLED line on a cancelled invoice. The client's GSTIN and place of supply follow the address in the grey 10 pt lines, whose pitch is 17.5 pt (Canva 19.2) so longer blocks fit.
- **Table.** HSN/SAC is an 8.5 pt grey sub-line under the description (no slot in the design), which makes a row 11.5 pt taller; wrapped descriptions grow the row, and the zebra fill and the 1.5 pt light-blue separators are per cell, so they grow with it. The rate's unit is `/hr` or a second line. `TableRows` gained two additive options for this template: `innerRules` (separators between the columns only, no outer edge and no top rule) and `headAlign` (the heading centred over a left-aligned column).
- **Totals.** "Sub Total :", Discount, Taxable Value and the CGST / SGST / IGST rows (labelled "CGST 9% :") end at the label column's right edge (x 417.4 of the design); the amount in words and the reverse-charge line sit under the GRAND TOTAL bar, right-aligned in 9.5 pt grey. The PAYMENT METHOD bar is level with the GRAND TOTAL bar as in the design whenever the invoice still fits its page that way; with a longer stack (a GST invoice has up to five rows against the design's two) it moves up beside the first row, which gives back up to the stack's height (104 pt for five rows), and the bank lines follow it.
- **Closing.** The divider, "Thank you for business with us!" and the terms (the notes; taller than 110 pt they flow as a block of their own before the closing) at the left, the signature at the right, then the icon footer: the footer rule with accents at both ends, and phone, e-mail and address with Carbon icons (26 pt boxes, sky). The footer is part of the closing block, so it is on the last page only, not on every page, and everything in it is audited. The contacts keep their natural width at 32.5 pt apart; when they do not fit, the address wraps into what is left and the phone and e-mail shrink only if the address would get under 120 pt.
- **Elastic gaps** (Letter, and A4 when a one-page invoice overflows by less than the slack): header to client (42 to 26 pt), client to table (30.5 to 16), last row to the totals (9.8 to 4), thank-you to terms (26 to 14) and terms to the footer rule (16 to 8). Type is never scaled.
- **Margins.** 54.2 pt at the top (the INVOICE line box starts there so its baseline lands at 87.2), 59.55 at the sides and 35.5 plus the 24 pt footer reserve at the foot, which puts the icons' bottom 59.5 pt above the page foot as in the design.