Plate № 42 · UX · records-page model

A pattern from the gf.cx specimen book

Folded by default, open on demand

The problem

A telemetry or records surface accretes sections as it matures: a monthly rollup, a recent-runs table, a "how it's wired" explainer, a running lane of session notes. Shown all-expanded — the browser's default for a stack of content — the page becomes a wall. The reader scrolls past everything to reach the one row they came for, and the load-bearing status at the very top scrolls out of sight on the way down. The signal that mattered is buried under the detail that supported it.

Two more things clutter the margins. The build-provenance stamp — generated at, by this script, from this source — sits exposed at the page foot, monospace and stale-looking. And every section grows a little raw JSON ↗ link beside its heading. Worse, each surface hand-rolls its own accordion: one page marks the fold with a right-hand +/−, another with a chevron, a third with nothing at all. The wording drifts, the marker drifts, the behaviour drifts. A stack of bespoke accordions is the opposite of a system.

The model, in-page

The ledger opens as a summary. Four moves, applied together:

• The status stays pinned. The load-bearing top — a stat strip, a single headline metric — sits outside every fold, always visible. Only the sections below it collapse.
• Sections fold, collapsed by default. Each content section is a native <details class="acc">, closed on load, with a left ▸/▾ disclosure triangle on its heading. The page opens lean; the reader expands only what they want.
• One control opens them all. A single Expand all / Collapse all toggle sits under the status strip. Its label and marker reflect the next action and stay honest as sections are folded by hand.
• Provenance folds into the footer. The exposed stamp is tucked into the "Built with" footer as extra <li> lines, and the per-section raw JSON links come off the headings. The page foot goes quiet.

A session-notes lane — a running, JSON-driven ledger of what happened and what's owed next — closes the page, harmonised to the same marker. The demo below is the real thing: it loads the actual ledger.css and ledger.js from the shelf.

The marker — a disclosure triangle

The fold marker is a left-pointing ▸ (collapsed) that swaps to ▾ (open) — the solid triangle Apple's Human Interface Guidelines call a disclosure triangle (older tree-widget parlance: a "twisty"). Internally we call it the bird-beak. Two rules make it house style:

• Always on the left, never a right-hand +/−. A right-floated marker collides with any right-floated section meta — a timestamp, a cost label — and when the section collapses that meta detaches into a phantom right column. Keeping the marker in a 26px left gutter on the heading sidesteps it entirely.
• The whole heading goes inside the <summary>. <summary><h2>Title</h2></summary> — so the heading inherits the page's own type and the marker rides on the h2, not the summary box.

Because the sections are native <details>, a collapsed section is hidden, not removed — its DOM stays live. So a client-side renderer that fills blocks by id (a JSON snapshot populating #overview, #recent) keeps working inside a fold that has never been opened. Collapse is presentation, not absence.

Where it applies

Reference implementations: vault.gf.cx/transit and vault.gf.cx/lto — both wired end to end: stat strip up top, collapsed .acc sections, an expand-all control, a session-notes lane, and the stamp folded into Built-with. The status.gf.cx storage pages share the same left bird-beak through the sibling archive-map and session-notes shelf modules, so the marker reads identically across surfaces. Records tables inside the folds are sortable grids from the shared sortable-table shelf — the same single-source move, so no surface hand-rolls column sorting either.

Reach for the ledger model on any surface that stacks records or telemetry a reader consults section-by-section rather than reading top to bottom — a per-bucket storage board, a job-run history, a spend ledger, a vehicle's service log.

Reusable elements

Named, copyable pieces — lift any one without the others:

• assets.gf.cx/ledger/ledger.css — the fold mechanics plus the left ▸/▾ bird-beak marker on <summary> headings. Also harmonises a .sn-notes lane on the same page to the identical marker.
• assets.gf.cx/ledger/ledger.js — the expand / collapse-all control. Drop <div data-ledger-controls></div> under the strip; it renders a self-styled toggle and wires every details.acc, leaving the notes lane alone.
• <details class="acc"> section — a native, JS-free collapsible content section, collapsed by default. Add open to any you want expanded on load.
• assets.gf.cx/sortable-table/sortable-table.{css,js} — records tables as a sortable grid. Author <table class="rt" data-sortable>; each header opts in with data-sort="alpha|num|date", and any formatted cell carries data-sort-value so it sorts by raw value, not the display text. The shelf's MutationObserver re-applies the active sort through a live re-render, so one grid serves both server-rendered and client-rendered tables. Link the CSS and the JS — the CSS alone is an inert ⇅ affordance where no header actually sorts.
• Stamp → Built-with — the move that folds the exposed provenance stamp into the made-with footer as <li> extras (see plate № 16) instead of leaving it bare at the foot.
• The bird-beak marker — the left disclosure triangle itself, shared verbatim with the session-notes and archive-map modules so every fold on every surface reads the same.

Reference

Source

Dan, 2026-09-01 — named while wiring vault.gf.cx/transit ("this should be a future-page-model-pattern"; "patterns are the way out of this drift").

In use / example

vault.gf.cx/transit and vault.gf.cx/lto — full reference implementations. Shared bird-beak on the status.gf.cx storage pages.

Reusable elements

ledger.css · ledger.js · <div data-ledger-controls> · <details class="acc"> section · sortable-table grid · stamp-into-Built-with · the bird-beak marker (all listed above).

Build cost

One <link> + one <script defer> per page; author sections as <details class="acc"> and drop one data-ledger-controls div. The shelf caches portfolio-wide; a marker or control change propagates from the two files.