Molecule

Address

The address of a thing, rendered so it can be taken. 6 instances across 6 screens in the register’s count, and the ones that carry the class stand on the log entry, where a ?as-of permalink is the artefact the whole cluster exists to produce.

Both readings of it are strings somebody pastes into a ticket at 03:00: the permalink to an evidence snapshot as it stood, and the address a deep link was heading for before the door asked who you were. So both get a boundary, a ground and a button, rather than being a run of text in a paragraph.

kit.css calls it one component in as many words. It existed twice, on node 5.4 and on node 8.1, with the same hairline and the same wrapping, and the comment there proposes that the sign in page adopt it instead of a bare code chip. Counted on the frozen wireframes, 5 renderings wear the class, all five on the states of node 5.4. Node 8.1 draws the same anatomy under nf-addr, one of the eleven one-off classes that page keeps and the system does not take, and the sign in page has not adopted it yet.

The code flexes from 220px and wraps anywhere. A URL with a 27 character query parameter and no space in it left the box at 360 otherwise, which is the same defect stamp carries the same cure for.

Anatomy

• .addrthe box. A wrapping flex row on --bg-surface inside a hairline, centred rather than baselined, because the two things in it are a string and a control rather than two runs of text
• codethe address, and it is the component. flex: 1 1 220px and overflow-wrap: anywhere. The basis is what makes the button drop to its own line before the string starts breaking, and anywhere is what makes it break inside a query parameter when it has to
• .btnwhat you do with it, in the outline emphasis. btn unchanged: docs/inventory.md counts 5 of its 157 standing inside this box

Variants

When to use it

Where a string is going to leave the product: into a ticket, a chat message, an email to the client. One per surface, near the thing it addresses, and always with the action beside it rather than in a menu. If nobody is going to paste it anywhere, it does not need a box.

Where she meets it. Twice over, and months apart. Once at 03:00, when she has escalated and somebody on a call needs the link to what she saw. Once much later, when a client or an auditor asks how a decision was reached and the answer has to be a URL that opens the evidence as it stood, not as it is now. The append-only log is a compliance requirement; this box is where that requirement becomes something you can hand to a person.

Rule and anti-rule

At 360 the button wraps under the address rather than beside it, and the address itself breaks inside the timestamp if it has to. That order is deliberate: the string is what the reader came for, and a control that pushes it out of the box is a control that has taken the box.

States

It has none. The box is a boundary and a ground; the only thing in it that responds is the button, which brings btn’s hover, active, focus ring and out of reach with it. The address is text and is not selectable in any way the browser does not already do.

There is no copied confirmation here, and that is a gap rather than a decision. The button says what it will do and nothing in the component says it did. The product answers that with toast on the surfaces that use it, and the log entry states do not currently raise one.

The raised ground is the state, in the sense that matters. --bg-surface is the same fill the hover ground uses elsewhere, standing here permanently. That is what makes a run of monospace read as a thing rather than as a sentence, and it is the reason the box needs no other treatment to be found on a page of prose.

What it reads, and where it stands

Copy this

Where it stands