Paper

A sheet of paper on the page's ground — a reading width, generous margins, the theme's hairline and lift — so an invoice, a contract or a report reads as the thing it is rather than as a form about it. Its content is the slot.

Summary#

Some records ARE documents — an invoice, a quote, a contract, a report — and the clearest way to show one is as a page: a sheet at a reading width with margins, its own heading, its figures lined up. Paper is that sheet. It takes its ground, hairline, corners and lift from the theme, so a look decides whether it reads as bright paper on grey (Ledger) or as a quiet panel.

[Route("/invoice")] [Render(CSR)] [AllowAnonymous]
component InvoicePage() {
  render {
    Stack(gap: 4, p: 6) {
      Paper("Invoice F-2041") {
        Row(gap: 4, align: Align.Start) {
          Stack(gap: 1, grow: 1) { Strong("Larkspur Studio"); Hint("4 Mill Lane, Bristol"); }
          Text("Invoice", fontFamily: Font.Display, fontSize: FontSize.Title);
        }
        Divider();
        Row(justify: Justify.Between) { Text("Design retainer, October"); Text("1,840.00", fontFamily: Font.Figure); }
        Row(justify: Justify.Between) { Strong("Total due"); Strong("1,840.00"); }
      }
    }
  }
}

Signature#

Paper(string label) { <the document> }

Description#

How wide is it?#

As wide as its column up to 52rem, centred — a measure a page of prose and a column of figures both read well at — with 2.5rem margins from Laptop up and tighter ones on a phone.

What goes beside it?#

The record's activity, its terms, its approvals — in a column of their own (the document desk puts the account's terms there, editable, with a SaveBar) or in a shell's aside. The paper itself stays the document.

How do I drive it in a test?#

It is a region named by its label: Assert.Visible("Total due", within: "Invoice F-2041").