The primary nav is one Toggle — a thumb slides under the active tab. Its thumb is textured to stand apart from filter toggles: wood (paper) / metal (film), with the active label riding light. Primary tabs are Library · Catalogue · Search · Tags · Import; Metadata / Settings live in the user-chip menu. Tab icons are 28px; at ≤768px the .tab-label spans hide, leaving icon-only tabs. It renders twice — once in the topbar, once in the bottom-nav — with CSS showing only one at a time.

Top-right account button — a squircle (rounded-corner square, border-radius:32%; more geometric in film), not a circle. Clips an uploaded avatar; otherwise shows the initial. It opens Profile directly. It opened a dropdown until 1.4.1 — Profile, User management, Log out — and the drawer repeated the same three rows, so "my account" was a menu of screens rather than a screen; all of it is a section of Profile now, and the chip is one tap.

There is no account dropdown any more. The avatar chip opened one until 1.4.1 — a username header, avatar upload, Profile, User management, Log out — and the drawer carried the same rows again, which made the chip a menu standing between you and a screen whose parts the menu was listing. Everything is now a section of Profile, in the order you would ask it: photo and display name, then which account you are in (switch account — that account's password every time, being an admin does not let you in without one — and log out), then your password, then, for an admin, the user list and the recovery tools. AccountOverlay frames it: a centred pop-up on a pointer device, a full-screen page on a phone (which is the one screen still carrying its own "?", because it covers the shell bar). .menu-item survives, shared by MoreMenu and the date picker. (Rows shown here stand in for the sections.)

Secondary tab-strip styling: a row of quiet .tab buttons where the active one wears a hand-drawn accent pill (paper) or an accent tint + glow (film). The .tab-label span is also what NavToggle wraps its labels in — hiding it at ≤768px is how the primary nav goes icon-only.

The "⋯" overflow dropdown for actions that don't fit a mobile bar: an IconButton trigger opening a hand-card hc-r2 panel of menu-items; danger items are tinted var(--error). Closes on outside click or item pick. (Shown open, inline.)

The ⋯ at the right of both top bars, holding everything the screen you are looking at can do.

A menu bar, not an overflow. It lists the whole set — including controls also drawn on the page: which view you are in, which sort is running, what the filters are. An overflow menu holds the leftovers, which makes it a different shape on every screen and empty on several; a menu bar is one place a reader can always look, and it is the same shape on all twelve. The cost is deliberate duplication of the visible controls, and it buys the only thing that makes a menu worth opening — you can find something in it without already knowing it is there.

The items are built when it opens. useScreenBar({ actions }) takes a builder, not a list, and the builder is never published through the subscription the sub-line and the dock keys use. A menu bar’s rows carry state, and a published list would be stamped by its ids — the ids do not move when the sort does, nothing re-publishes, and the menu goes on ticking the view you left. The shell holds a pointer to the current builder and calls it at the moment the ⋯ opens, so nothing can be one render behind.

Every builder on screen, not one. Checks composes the staging queue and the stray-marks list, both embedded and both entitled to publish, so the registry is a Set and the menu concatenates in mount order. A single slot would have let whichever rendered last win silently, and the other half of the page would simply have looked like it had no actions.

Three kinds of row. A heading carries no role and takes no focus, so the arrow keys skip it for free. A choice is a menuitemradio with aria-checked and a ✓ at the far end — a plain menuitem with a tick drawn on it is a decoration a screen reader never mentions. A verb is a plain menuitem, tinted var(--error) when it destroys something. The keyboard handler reads [role^=menuitem], because a selector naming only menuitem steps over exactly the rows that are a choice.

It wears the ? button’s skin on a desktop and the phone bar’s on a phone — one component, each bar dressing it. Caught by looking at a render: the first cut gave it the .help-btn ring, a hairline in --line, and a bare glyph between two solid accent controls reads as something bolted on afterwards whatever it does. Help is the shell’s own row, appended after whatever the screen published, because it is never the screen’s to offer and several screens publish nothing at all. (Shown open, inline.)

A 44×44 circular ghost tactile button wrapping a line icon — the atom of every mobile bar (back, filter, add, ⋯). The larger of the app’s two icon sizes, and the one that can be named: pass label and it renders the same icon + .btn-label pair a worded button does, so it honours Button labels in both directions. danger and ok tint it; ok exists because its absence was being worked around — the Add sheet’s ✓ wore the 34px family’s colour class to go green, and one family borrowing another’s stylesheet is how two families stop being two.

The other icon size: 34px on desktop, 42px on a phone where the touch minimum wins. It lives inside a row that has already spent its width — a text input with a ✓ and a ✕ after it, a card’s action row, the cover controls — and it carries the edit/save/cancel trio, the table row actions, every CloseButton and the quote tools. Variants: ok, danger, boxed (a resting outline, for the cover cluster that has no field row around it to be the affordance) and two latches, active and busy, which are classes rather than hover states because a latch has to survive the pointer leaving.

It was a class string until 1.14.0 — field-icon-btn tactile, hand-written at 46 call sites across 13 files, the only primitive in the app that was never a component. The copy-paste had held well: all 46 carried an aria-label, all 46 were wrapped in a Tooltip, and exactly one had drifted (a Home button was missing tactile, so it did not press when you pushed it). The drift is not why it became this. A class string cannot make a decision — IconButton gained an opt-in label so the 44px family could honour Button labels, and this family could not opt into anything because there was nowhere to put the opting. Forty-six buttons sat outside a preference that claims to govern the app, not by a decision but by never having been asked.

Asked, the answer is that this size is nameless, and there is deliberately no label prop. 34px exists precisely because there is no room for a word beside the glyph; adding one would collapse the distinction between the two families rather than complete it. So the app has two sizes and two rules — 44px can be named and opts in, 34px is nameless and puts its name in the tooltip and the accessible name, both of which the component guarantees. A test asserts exactly one <button> in the SPA wears the class, so the 47th hand-written copy is not a paste away. The one non-button that wears it is named too: a file picker has to be a <label> around an <input type="file">, so it borrows the look on purpose.

Screen title (Newsreader) + mono-label counts + optional right-side actions. The Library page is headed "Books", the Catalogue "Movies & Shows". On mobile it's wrapped in a mobile-sticky-bar and its desktop action buttons become IconButtons + a MoreMenu. What it deliberately does not carry any more: a ＋ Add or a "?". Both were shell controls drawn a second time per page — the header's ＋ sat inches from the top bar's own ＋ — so 1.4.1 left the header only what is genuinely local to the list, its filters and its export.

Six type ROLES, three faces each, and every row shown doing its own job. A role is what the font is for — quotes, interface, labels, notes, Bengali, Devanagari — so swapping one is a line in fonts.js rather than a search for every place a family name was written down. Each row sets its own text, which is the whole design of the screen: a type list that puts “the quick brown fox” in every face answers no question anybody has, and it cannot show the Bengali row at all, whose entire point is a script no specimen sentence contains.

The Indic faces live inside the Latin stacks, listed after the Latin face. No Latin codepoint ever reaches the Bengali face and no Bengali codepoint stops at the Latin one, so one stack serves both and neither pays for the other — listed before, their own Latin subsets would win and the app would change typeface. The non-obvious consequence: picking a new Bengali face rebuilds the display, ui and hand stacks too, so stacks are composed from the whole choice rather than per role.

The style modifiers are companion custom properties — --font-display-weight and four more — set beside every font-family: var(--font-X), 69 rules and 63 inline styles, so a modifier lands where its role is used and nowhere else. Set once at :root they would inherit into everything. Off is inherit, not normal: a heading already at 600 must not be flattened to 400 by a role nobody touched. Where an element already sets its own weight or italic the companion is dropped rather than left to fight it.

It is a pop-up off Appearance, not a card (1.15.2). Six roles, each with a specimen, a face picker and a row of style chips, is the tallest thing the settings page has, and it stood open in a column beside cards you read at a glance — for a choice most readers make once. The button and its letterform glyph sit under the theme presets. Language marks became a pop-up in the same pass and for the same reason, and moved to the Metadata card in 2.1.3, so this is the only door Appearance carries.

There is no “monospace” switch, and the screen no longer says so either. It was asked for; whether a face is monospaced is how it was drawn, and no CSS makes a proportional face monospaced — so a control by that name could only lie, and the face picker directly above it is the real answer. The paragraph that explained this to every reader who opened the Labels row went in 1.15.2: it answered a question nobody on that screen had asked, and the reasoning now lives in fonts.js beside the style table it is about. font-variant-numeric: tabular-nums ships as Lining figures, which is the true thing behind the request. Small caps and all caps are absent from the Bengali and Devanagari rows, which have no case at all.

Bundled, never fetched. Eighteen families, all OFL-1.1. This app makes no network request the reader did not ask for, and a type picker that phoned a font CDN would have been the first exception — on a screen about how your own words look. Your own font can be uploaded beside them: stored on your own server, never parsed there, sniffed by magic bytes rather than by extension, and measured against the row’s script afterwards. That check is a warning and not a refusal — it can be fooled either way, and refusing somebody’s own font on a metrics heuristic is worse than telling them what looks wrong.

Uppercase mono micro-label — counts, chapter/location lines, field labels.

Small lead-in line above a heading.

Small lowercase mono aside — form hints, sheet result counts, login-card footnotes, "loading…" lines.

The Bengali display role — amber Noto Serif Bengali. Carries the টিপ্পনী subtitle on the login card.

The reader's own note — Caveat + accent tick (paper), Newsreader italic (film).

Favourite toggle. Hearts for favourites — never stars.

On a saved quote it is the card’s resting mark, and it sits at the head of the action row along the foot of the card, ahead of the colour dots and the ⋯ cluster. A film or show dialogue puts it in the same place as a book annotation: the two are the same object with different credits, and a control that moved between them would be two controls to learn. Everything else in that row hides until the card is hovered; the ♥ never does.

What a proverb wears where every other quote wears a face. Every quote card leads its meta line with somebody’s portrait — a book’s author, a film line’s actor, a quote’s speaker. A proverb has nobody to credit; that is close to the definition. So the line began with nothing at all, and what a proverb does have is a language. The mark is drawn as the same disc a portrait draws, in the raised surface rather than a photograph, because it stands in for a face rather than being one.

Flags are offered and not assumed, and that is the whole design. The ask was “use flags for languages”, and the tray offers two dozen of them, first. What the app does not ship is a mapping. A flag is a country and a language is not: Bengali is spoken either side of a border, Hindi has no flag of its own, and Spanish, Portuguese, Arabic and English have a dozen each with nothing to choose between them — so a default here would be this app telling somebody which country owns their mother tongue. A test asserts no starter language arrives wearing one, because a table like that is exactly what gets filled in later out of tidiness.

The built-in is a letter from that language’s own script, the same list a proverb board’s cover draws from. A language nobody listed gets no mark at all rather than a guessed one — being confidently wrong about somebody’s language is worse than being blank — and setting one in Settings → Metadata sources → Language marks is how it gets a mark. It has been a pop-up rather than a card of its own since 1.15.2, and it hung off Appearance until 2.1.3, on the argument that what a proverb wears is a matter of appearance. It hangs off Metadata now, because the mark is what a quote with nobody to credit says it is — the same question the rest of that card answers. Where it is drawn is appearance; what it says is a fact about the quote. Only where there is no face to show: a quote that has a speaker gets the speaker, because a person outranks a language for the one slot going, and the language is still named a few words along.

One row per language, and it stays one row. Metadata › Languages lists every language the reader's quotes are in. Each row is the language's mark (a round tile, like the face it stands in for), its name, its ISO 639-3 code — the three-letter registry of every language, so Ancient Greek is grc and not el — and how much of a quote's original shows.

That last choice is four icons: a solid bar is the quotation as written, an outlined bar its translation, the top one shown first. The default at the top is the only place the four are also worded, and it carries a key to the two bars; every row draws them as icons, so a row that has its own setting shows it in the accent and says own setting beside the name.

Adding a language searches the registry — 7,800-odd codes, loaded only when the search opens — and anything the registry lacks is still added as typed. Pressing a row's mark or name opens one editor for every language: its name, its code, and one grid of equal square cells for its mark.

One picture may not hold two jobs. Everywhere in this app a single IconCheck commits — it is the confirming half of the tick-and-cross every form wears, and its arming is what says something has changed; a single IconClose is the way out. Over a LIST of rows to choose between, the same two drawings meant “tick all of them” and “untick all of them”: presses that write nothing and leave the reader still at the decision.

The report was the owner's, over the metadata merge screen: “replace the single tick at the top with double tick. the single tick feels like ‘ok’ and not ‘multi-select’.” The cross beside it goes with it — a double tick next to a single ✕ reads as “select all / cancel”, which moves the confusion one control along instead of ending it.

Drawn as two whole marks with daylight between them rather than as the overlapping done_all of the icon sets, whose second mark is a bare diagonal that reads as a slash at this size. Shown here in the order they must never be confused in: confirm, take-all, close, take-none.

A year, its estimate flag, and the phrase carrying both. It does NOT strip to digits — c. 1500, 380 BCE and c. 380 BCE are all typable, and parseYearInput reads them at save. The tick is DERIVED from the phrase rather than stored beside it, so the two cannot disagree; typing the marker lights it, pressing it writes the marker. Disabled with no year, because c. alone reads back as nothing. An unparseable phrase takes a red edge instead of saving as no year.

A date that may be a year, a year and month, or a full day (YYYY | YYYY-MM | YYYY-MM-DD), with a calendar button beside it. Where a caller passes the estimate flag — the two quote surfaces do — the tick is drawn as part of the field, and a c., ca, circa or ~ typed in front is read BEFORE the box strips non-digits, which is where it used to be silently deleted.

Plain range sliders on the Settings page — there are two: Library cover size and Catalogue poster size — each setting its grid's cell min-width, persisted per screen in localStorage (mobile defaults smaller).

The small underlined text-action — edit/share/delete on cards, "refetch links", table row actions. The danger variant is tinted var(--error).

The quiet mono pill for read-only facts (genres on a detail page, "saved" key pills); amber-tinted rectangles in film. tp-chip-btn is the actionable variant — same pill, accent text + hover lift — used for the provider link chips in the Metadata People console and for the role controls in the user list.

Make admin and Step down are the same control on different rows, and the pair is the whole rule: granting is something you do to others, revoking is something you do to yourself. An admin row that is not yours carries neither — nor a delete, since removing the account would be the same act with that person's library attached. The button is absent rather than disabled: a greyed control still says "this is mine to do, just not now", which is the opposite of what is true here.

The inline form/API error line, var(--error). Renders nothing when empty, so it can sit permanently in a form.

Centred mono empty/loading message for any list. Film gives it a dashed amber frame.

A height-animating wrapper: when a card swaps between its read view and the inline edit form, the wrapper morphs to the new height so content below glides instead of snapping. Overflow is only clamped during the transition — a sticker spilling into the gutter isn't clipped at rest. Used by annotation cards.

The lighter edit-entrance for non-annotation editors (book/title forms): the replacing card fades + rises in (edit-fade, one-shot on mount — reload to replay). In table view an .editing-row drops the hover tint while its form is open.

The one segmented control. A single accent thumb slides under the active option (draggable; its width is measured in JS to fit any labels). Filter/settings toggles carry leather (paper) / rubber (film) grain; the active label rides light over a --sel-scrim ground.

A box you tick, where a Toggle would be two words wide. The Toggle is the better control wherever there is room for it — it spells both states out, “Hide” and “Show”, instead of leaving you to infer what an empty box means. On a 390px phone those two words plus the row’s own name and its sorter do not fit a line, so the row wrapped and the list of sections ran twice the height of the screen. This is the same decision in a quarter of the width.

It is a real checkbox. appearance: none on an input[type=checkbox] gives up the platform’s drawing — which is the one thing here that has to match the app, being a different size and colour on every OS — and keeps the keyboard, the label association and the announced role. The tick is drawn by a rotated ::before rather than a glyph, so it scales with the box rather than with a font the reader may have changed.

On-brand dropdown replacing native <select>. Tactile trigger; the chevron flips when the panel opens.

The panel dips open and carries Toggle's sliding accent thumb (now vertical); hover or the arrow keys move the highlight. (Shown flowing inline; the real panel floats absolutely below the trigger.)

The inverse-chip label bubble that replaces native title=. One bubble serves every input style — hover or keyboard focus on a pointer device, a 500ms press-and-hold on touch — and only what opens and closes it differs: the pointer leaving closes a hovered label, while a held one closes itself after 1.2s, because there is no "leave" on a finger that has already lifted. Shown forced-open here, above its control.

A hovered label needed two more closes (1.14.1). pointerleave is the whole answer only while the thing under the pointer stays there — press a colour swatch and the picker re-renders, a panel opens over the control, the row reflows, and the leave event that was going to close it never arrives. The label then sits over the screen indefinitely, obscuring the control it was read to explain. So a click closes it, because you hovered to learn what the control does and then pressed it, and the click is the one moment we know for certain the pointer was there; and a three-second backstop catches the case where neither event comes, which is long enough to read a five-word label several times over. Both apply to hover alone: a keyboard reader has not asked for their label to vanish mid-sentence, and that bubble is closed by blur, which unlike pointerleave always arrives. The backstop gets its own timer ref rather than sharing the long-press one — a single ref for two unrelated schedules is how a hover cancels a press.

Until 1.4.1 these were two mechanisms: a pure-CSS bubble absolutely positioned inside the wrapper for hover, and a pill pinned to the top of the screen for touch. Both failed the same way — neither could be kept inside the viewport. An opacity-0 CSS bubble still has a border box, so one hanging off a control near the right edge widened the page's scrollable area; the touch pill was centred with left:50% + translateX(-50%), which cannot be clamped at all. Between them, Library and Settings could be panned sideways into blank space on a phone. The pill was also detached from its control, which answers "what is this?" without saying which "this" — and several 44px glyphs sit within a thumb's width of each other in these bars. The replacement is measured and placed in script: anchored to the control, flipped to whichever side has room, clamped on both axes. A fired long-press also swallows the click behind it, exactly as Material does, so holding Delete to find out what it does never deletes anything.

A small circled "i" that keeps dense help off the page until it is asked for. It carries no tooltip — see the full entry further down for why that was a mistake and what opens it now.

The shared Tiles / List / Table switch — Library annotations and Catalogue dialogues offer the same three views through this one Toggle, its glyphs drawn by ViewIcon (also reused as IconGrid/IconList/IconTable).

The six colour categories as a radio group — the one control every capture form, filter row and card shares. The active dot gains full opacity and an accent outline ring.

The ring is only drawn where there is something to tell it apart from. It marks one dot out of six; on the collapsed picker, where the trigger is the chosen dot and the only dot on screen, it was saying "this one" to a row of one, so it is suppressed there and kept in the open list. The full opacity stays either way — that is what makes the chosen colour read as chosen rather than as offered.

It draws the reader’s names, not the colour words. "Pick blue" describes a highlighter; the whole point of naming a category is that the picker then asks the question you actually have. An unnamed slot falls back to its colour word, so a fresh account reads exactly as it always did.

A hidden category is dropped from the CHOICES but never from a quote that already wears it — the current value is added back into the list for exactly that reason. Hiding is about tidying a picker you have stopped using; a quote silently changing colour because of it would be the app editing your library to match a preference you were not thinking about it with.

A clickable <th> carrying the active sort's ▲/▼ arrow and aria-sort; useSort holds the {col, dir} state and sorts rows via per-column value functions. Shared by the table views and the tag/sticker manager tables.

Inline clamp with a WhatsApp-style coloured show more / show less toggle that appears only when the text actually overflows (a ResizeObserver re-checks as tiles resize). ExpandableDescription is the 3-line detail-hero variant using a tp-link toggle so the poster beside it keeps a stable height.

The search-match highlight — a <mark> with an accent-tinted, unevenly-rounded wash, used to mark hits in Search results.

The non-interactive ♥ overlay on a favourited cover/poster corner — the tile itself is the clickable element, so this can't be a button. Hand-tilted (randWobble) and drop-shadowed to read over any artwork. Cousin of the interactive Hearts mark (see Marks).

Determinate progress for long jobs (covers refetch, bulk people-link fetch): a recessed track, an accent fill, and a mono caption — visible movement instead of a dead "busy button".

The touch-sized filter-chip variant used inside mobile sheets — same look, but the touch-target pass guarantees it 44px hit height on phones. (Renders as a normal chip at desktop width.)

A book's board can be put in order and cut into sections — by chapter, by category, by tag, by date added — and the grouping and the order are one decision made twice, so they are one control: "by chapter, in reading order" is a single thought and was three things to press. The grouping is the field; the order is the row at the end of its menu, stating the current order as its value so one press away is still one glance away. That row does not close the menu, because the column and the direction are two questions answered in one visit — and the two direction rows wear the bars that grow and shrink, so the picture IS the order rather than an arrow a reader has to remember the meaning of.

The order applies to every view. It used to be the table's alone — clickable column headers — so the two card views, which is where a reader actually reads, had no order to choose at all and three hundred highlights sat in whatever order they were saved.

Each dimension is ordered by what it is, not by its name. Chapters run in reading order (the number when there is one, then the named ones alphabetically), categories run in the order the swatches are drawn, days run newest first, and tags run by how many quotes wear them — which is why this is not groupWorks: that one orders buckets by label, which is right for a shelf of authors and wrong for all four of these. Missing values sink rather than float, always: a quote with no location is not "location zero".

Grouping is orthogonal to the view. A section holds whichever view was chosen — list, tiles or table — because a control that worked in one view and silently did nothing in another would be worse than no control. Sections are windowed as well as their contents: a hundred small groups is still the whole book mounted.

A book's board publishes a SECTION into the screen's ⋯ rather than drawing a second overflow menu an inch under the shell's. Three groups: View (tiles, list, table), Quote text (both, quote only, translation only) and Select quotes.

The view left the header. It was the widest control in the row and the one changed least often — you pick a view and read for an hour — so it costs a menu row instead of a third of the toolbar. List came back with it: the board always rendered three views and the toggle only ever offered two, so it was a setting a reader could hold and not choose.

Quote text is the one that is new. A translated quote is two texts and the board always drew both. Asked for the translation alone, a quote that has none shows its own words — quoteBody prefers rather than obeys, because a setting that empties every untranslated card reads as a bug that has eaten the library. The table honours it too, which is the one view where the translation was never drawn at all.

Select quotes is the door that can be found by looking. The other two ways into the mode — a long press, a Ctrl-click — are gestures a reader must already know. It starts the mode with nothing picked and then hides itself, since a row offering to start what is running is a dead control.

The shell's own two seats, and they are the default everywhere rather than Home's alone. The dock seats five and three never move, so the last two belong to the screen — and a screen with nothing of its own to offer used to publish nothing and get two blanks. These two are what is useful from anywhere: the boards this reader keeps things in (Library, Catalogue, Quotes, Anthologies, filtered by Settings → Features), and the tools about them (Settings, Stats, Metadata). The ☰ has held both lists all along; the point is that the drawer is at the top of a phone and the thumb is at the bottom.

Both glyphs are outlines, and the rail's for the same destinations are not. The fill rule's exception is "the glyph names a PLACE rather than a job", and a key opening a list of four places is a control — the place is the row you press inside it.

The first key collapses. With one section switched on there is nothing to choose between, so it becomes that section's own door wearing that section's own (filled) rail glyph, and no menu opens.

A screen may ask for the boards seat by name. A board publishes its own filter in the first seat and { id: 'nav' } in the second, which the shell swaps for the boards key above — only the shell knows which sections are switched on and only the shell can change tab, so the screen names the seat rather than building it. That is how the Library, the Catalogue and the Quotes page keep their filter and still get the way out; it is also what fills the second seat on Metadata, where a reader who is not an admin has one verb and used to have a blank beside it.

One row per link: the site's own mark, its name over the address, and a ✕. The list is what is ADDED, not what exists. There is no fixed roster with "not linked" beside half of it — a panel made mostly of absences decides for the reader which sites their record may have, and it is wrong about it: a novel with a film adaptation legitimately wants a TMDB page, and a game novelisation wants IGDB.

The globe is not a failure state. "A web page" is a legitimate kind of link — a review, an author's own site, a scan somebody hosted — so an address matching nothing known is kept whole and wears IconGlobe. A dashed box or an error colour would tell the reader they had done something wrong by linking to the open web, and it is also why there is no WorldCat slot: an obscure catalogue is not a special case, it is just a URL.

The reading is shown before the link is added. A key and a URL are one fact written twice, so the paste box says "Reads as IMDb — www.imdb.com" under what you typed: a field that silently transforms your input is a field you check afterwards every time. A scheme-less address is completed rather than refused, because copying out of a browser's bar drops it about half the time.

On a work, one screen holds the ids, the links and the paste box. The section's pencil and the + at the end of its row both open it: every id the medium has, filled or not, then the stored links, then the box. Its one ✓ saves the edited ids and a pasted link in a single request and counts both; it is greyed while it would write nothing. A work with no links lands straight on the box, with no empty list in between.

And the box leads with the pages this record can already address. A record pinned to TheTVDB has a TheTVDB page — the id is sitting in the row — so making the reader copy that address out of a browser is the app declining to do arithmetic it can do. One press appends it, wearing that site's mark, with the whole address shown first. It is derived from the record's own ids rather than being a roster of the twelve marks with "not linked" beside eight of them, which is the absence-list this panel exists to avoid; a site the record cannot address is simply not in the list, and once linked a site drops out rather than drawing as ticked. AND AN ID CAN STAND IN FOR AN ADDRESS. A reader holding a person's IMDb id still had to know the page is /name/<id>/ and not /person/ or /people/ before they could paste anything — three words for one idea, and the app has known all three since it started fetching portraits. So the add surface also takes the id: pick the provider, type the id, and the address is written and shown before it is kept. Every pattern is copied from internal/metadata/people.go rather than derived, so a link typed by hand and a link fetched from TMDB are the same string. The list offered is the record's own: an ASIN goes to the author page and never to /dp/, because an ASIN names a product and would file a book under the person; and a studio or a publisher is offered IGDB's company space instead of the four person ones, because nobody has an IMDb /name/ page for Electronic Arts.

Some sites are absent for reasons, not oversights: Letterboxd and IGDB address records by slug while the row stores a number, a work carries no Wikipedia or Wikidata id at all, and an Amazon marketplace guessed as .com is a real page for a different edition — wrong in the way that looks right. The paste box below is unchanged and is still the way in for all of them.

The marks are masks, vendored, never hotlinked — see providerMarks.js. Twelve brand hues in one panel would be the loudest thing on a screen made of paper, and a links panel that phones a dozen companies to draw itself is exactly the request this app promises not to make.

A Details row whose editor is a sheet rather than the row itself. Four fields keep one, and the handoff names each one's reason so that nobody adds a fifth by feel: a description is prose and editing it under a 44px label means reading it through a letterbox; genres are a token input with a filter list of their own; a cover is a grid of pictures with no text to type; people are not a value at all but a list of rows with roles, faces and actions of their own.

The affordance is one affordance. This is InlineField's resting row to the pixel — same label, same provenance tag, same pencil in the same place — and only what the pencil opens differs. The reader is not being asked to learn which rows are cheap; the size of the thing decides where it opens and says nothing about it beforehand.

At rest it prints what is behind the door: the description itself, the genres joined, or the work's credited names followed by how many characters it has — the names and not a count, because "6 people" is a number you have to open the panel to understand.

A stepped range that commits when the reader lets go, not as the thumb passes. A native range fires a change for every step it crosses, so writing through on change means one save per step and a preference that briefly held four values on the way to the one that was wanted — which is why this is a component rather than a bare input.

The readout is the point of the stops. It shows the value formatted through a locale key by default ("175%", "21 days"), and a readout given by the caller replaces it — for stops whose meaning is a word rather than a number. The Metadata screen's per-language rows are that case: four states saying how much of the original a card shows.

It lived in Settings.jsx and now lives here, because a second screen needed it. A control drawn on two screens is one function both call, not a line each — which is the repo's directive and the reason the two would otherwise have drifted the first time either changed.

A slider only where the stops are an axis. SizeDial beside it deliberately is not one: six scaling factors in a column of stacked labelled rows are wider than the label they belong to, so that setting is a Select. These four are ordered — each shows strictly more of the original than the last — and they get a column of their own in a table, where a master slider above them can push every row into line.

A number with the glyph of the thing it counts. Two shapes, one component. Where there is room — a section subtitle, a subheader — the word stays and the glyph joins it (showWord), and that is where a reader learns that this drawing means a work and that one means a skip. Where the row is tight — a card caption, a console row already carrying a tick box, a cover, three action glyphs and a chip row — the glyph stands in for the word. The second only reads because the first taught it, which is why they are one component and not two.

The word is always in the name, drawn or not. A glyph alone is a picture to a screen reader and nothing at all; showWord decides whether the noun is painted, never whether it is said. The whole tally carries one aria-label of "27 skipped", because the figure and its noun are one fact — met as two, they arrive either side of a fraction’s slash.

Red is for a count that is the problem, not for emphasis: tone="warn" takes the danger colour on the figure and its glyph, since a red number beside a grey drawing says the number is the warning and the noun is neutral. A count of things the reader owns is never red.

A count whose noun has no drawing keeps its word, and a-count-wears-its-glyph.test.js is the list of which those are and why — a measure in "characters" that means letters, a confirm dialog’s sentence, an <option> that can only hold text.

A card's heading: the name on the left at --type-ui-17, an optional InfoDot beside it, and a right slot for whatever the card acts on itself — a toggle, a count, a button. The dot goes through the heading rather than beside it, so the paragraph a card used to spend three lines on is one glyph on the line the reader is already looking at, and the card's first content is content.

It lived in Settings.jsx and eight cards used it. The ninth — metadata sources — moved to its own screen, and a component two screens import is a shared component: importing it back out of Settings would have pulled that whole route's chunk into another one to draw an <h2>.

Renders an author/actor name as a link that opens that person's Person panel. It hands its caller the RECORD as well as the name — {kind, name, person} — because the panel is reached by id; where the chip has no record, POST /people/ensure files one and the press lands on the same screen. The click stops propagation so it works inside clickable cards.

The small round portrait (default 30px, ink-bordered, object-fit cover) beside a group-by heading or the modal title — renders nothing when the person has no saved image. (Placeholder circle shown.)

A tp-link that carries a glyph. Two things it settles, neither of which a call site can: the icon set is drawn at 24px against 12.5px link type, so the svg is sized here in em and rides whatever size the link is set to; and the underline moves onto the words. Text decoration cannot be cancelled by a descendant, so a rule drawn under the glyph as well reads as a strikethrough across the whole control — which is why this pattern wraps its label in a span.

The compact inline form of the same link set — one small tp-chip tp-chip-btn anchor per recognised provider. Shows a "—" microcopy when nothing is saved. With marks it draws each supplier's ProviderMark instead of its name, which is what the People console's row uses: eight suppliers spelled out was most of a row spent on a vocabulary the marks already say, and the word survives as the mark's accessible name and its tooltip. There is no Links column any more — the row's second content line is where they sit.

Every card carries paper fibre (paper) or brushed metal (film), plus a fine ::after dither that breaks up 8-bit banding in the low-contrast gradient.

.film-frame joined in 1.6.0, and the absence was conspicuous: it was the only card primitive in the app with no tile, no dither and no answer to the aesthetic toggle, which is why the Catalogue was the one board whose cards wore nothing. Its own CSS comment had promised the material for three releases. Film posters were not cards at all — a bare bordered span with the card's shadow bolted on — and are hand-cards now, like the book covers they sit one tap away from.

Accent buttons, toggle/select thumbs and active filter chips share this leather (paper) / rubber (film) grain. The nav thumb overrides it with wood / metal to keep the shell distinct.

One scale, since 1.6.0. The same fabric was tiled at 150px on a primary button, 130px on a toggle thumb and 120px on an active filter chip — three grains of one material on three controls that share a filter row and are meant to read as one family. .btn-sticker also stopped being the one accent control that ignored the aesthetic: it wore leather, an ink border and a −0.5° tilt under BOTH skins, so Settings, Profile, the work-detail pages and the tour showed tilted leather while every other screen showed level rubber — from one component.

The Settings preset cards preview their combo with real texture grain: paper fibre (tex-paper) or brushed metal (tex-film) tiled behind the callout; dark-combo flips the blend to screen for dark pairings. Its tile size derives from --grain-card and its dark opacity now matches .hand-card's — a preview of a card was previewing it at a different grain strength, which is exactly enough to be invisible alone and wrong side by side.

The two page motions: every tab switch replays a quick roll-down (fade + slight drop, keyed on the active tab), and sections carrying .reveal + the useReveal ref fade-rise in as they scroll into view. Both are disabled on mobile — ancestor transforms un-stick the sticky bars — and under reduced-motion.

Shown at 2:3 when no image is stored.

A grid cell on either board: artwork in a hand-card, then title, credit and quote count. The status bar rides inside the card, directly under the artwork, so it reads as part of the card rather than a stripe floating below it — and the artwork stays completely unobscured, which is the whole point of a bar over a badge.

Until 1.6.0 only a book cover got the card. A film poster sat in a bare bordered span with the card’s shadow bolted on, so the Library’s board wore the app’s material and the Catalogue’s wore a rectangle — on two screens built from this same component and reachable from each other in one tap. This tile was also named poster-card after a class that does not exist anywhere in the source, which is its own small lesson about hand-written documentation.

It has a context menu since 1.14.2, and the reason it did not is worth keeping. The comment here read “no context menu — a work’s actions live in its detail header and in the selection bar, and a menu that opened on a gesture and offered nothing would teach the gesture and then refuse it”. Sound reasoning about a state nobody had noticed: what was empty was actionsFor, which stayed quote-only after bulkActionsFor grew a work branch in 1.11.1. So the bar could Fill gaps, skip in the quiz, edit and delete a book with exactly ONE thing selected, and the tile that one was selected from could do none of them — the precise asymmetry the registry exists to make impossible, invisible for three releases because every test walked item → bulk and never the other way. There is a test in both directions now.

The menu leads with Select, the same as a quote card’s, so the gesture that asks “what can I do to this” is also how you start doing it to several. Everything under it runs through useBulkOps — the same hook the bar calls, with one id instead of forty — because two implementations of “skip this in the quiz” is how a card and a bar come to disagree about an act whose result the card then draws. Delete asks once and does not ask you to type, unlike the bar: the bar’s phrase guards a number you can misread over one shared Undo, and here the subject is the cover you just right-clicked. The dialog names how many quotes travel with it, because a cover gives no hint that twelve are attached. Favourite is absent, and that is a constraint rather than a choice — a work’s ♥ is a field of the full-state PUT, and a board holds the LIST row, which carries no description, no ISBN and none of the other credits; setting it from a tile would send the short row back as the whole book.

Covers and posters lift on hover/focus — a spring translate + scale with a deepening drop-shadow (.cover-tile:hover .cover-lift). Hover this tile to see it.

The book cover image (locally served — remote images are never hotlinked), or the striped placeholder: a small list thumb, a large variant, and a hero variant that fills its sized wrapper at 2:3 for the detail header. On mobile the .book-detail-hero stacks — the .cover-wrap centres at 140px above the text.

The perforation holes. (This is "the sprocket".)

The scenic backdrop: book-spines on shelves (paper) / film strips in a studio (film). Pure CSS gradients — no external image.

A faint paper/film grain over everything, including the auth screens.

The track under a work's state chip on its detail, in the units the thing is actually made of. A show reads E06/10 · S02/03, a book p. 128 of 320, and a film — which has neither — falls back to the bare percentage. Both halves of a pair are zero-padded to the same width, two digits minimum, widening together past 99 (E006/456 · S011/123), so a column of these cannot rag. The percentage is not printed alongside a unit label: the label is more precise, and the bar is drawn from that percentage anyway.

The state chip opens the rest of the lifecycle; completed is settled, and the only move out of it is starting again. Clearing back to untracked stays available everywhere, because a mis-tap should not be permanent. The ×3 chip opens the read log — one row per read, so a reread is history rather than an overwrite, and only finished attempts count. The log is editable: add a read that happened before you kept the library, correct a date, delete a mistake. The read still open is the one exception — it says set above, because it is what keeps the status and the log agreeing with each other, and finishing or abandoning it is already one tap away in the chip.

A library that keeps quotes accumulates books it has nothing from yet: a shelf photographed at a friend's house, an import that brought the titles and not the highlights, everything bought and not started. The triplet above already let you browse them. What was missing was a way to get them out of the way — forty unopened covers scattered through a grid of books you have actually read is forty tiles of noise between the ones you are looking for, and a chip only helps when the wishlist is what you came for.

It is a DOOR, not a place. Opening it is the wishlist chip that already exists. Nothing moves, nothing is stored, and there is no membership that could disagree with the count printed on a cover — which is the same reason the wishlist has no column: a second source of truth for something already computable. A book leaves the folder by itself the moment you save a quote from it.

Drawn as a WorkCard is drawn, at the same width and the same 2/3 aspect, because a folder wearing a different material reads as a control that wandered into the Library rather than as one of its tiles. The collage adapts to how many covers there are (one spans the box, two split it, three make an L): a 2×2 holding one cover and three blanks reads as a broken image rather than as a wishlist with one thing on it. A cover-less book gets an empty cell rather than the “COVER” placeholder — that placeholder carries its own word, and four of them inside one tile is the word printed four times at quarter size.

Not selectable. A tick in its corner would have to mean “select the twelve behind it”, which is a different act from every other tick on the board and one the bar has no way to report a count for. Ungrouped Library only: inside the wishlist chip there is nothing to fold away from, and a Wishlist folder inside the bucket for one author would mean something different in every group it appeared in. Off until you turn it on, and then it stays on — a grid that silently rearranged itself on upgrade is a library that looks like it lost books.

A work with zero quotes is the wishlist — derived, so there is no column, no bookkeeping, and it clears itself the moment you add a quote. The triplet browses just the unopened shelf, or hides it to leave only what you have actually marked up.

A negative year is written, not signed: -380 reads as 380 BCE, because a minus sign in front of a year reads as a countdown. CE is left unmarked — saying "1954 CE" about a novel is pedantry, and the era is worth naming only when it is the unusual one. The field also reads what it writes, so 380 BC, -380, c. 380 BCE and circa 380 BCE all arrive at the same year. c. is an estimate and display-only: a text written over a century does not have a publication date, it has a contested guess, and marking it never moves the work on a shelf or a chart.

When the library’s works are from, as opposed to when they were saved — the activity calendar already answers the second. A quote sits at its work’s year, so a line copied out of the Analects last week belongs at 479 BCE. Readable as decades, centuries or years, because a shelf spanning two millennia and a shelf of films want different bucket sizes and neither is the right default for the other. The empty buckets are drawn deliberately: two columns side by side would read as two adjacent periods rather than two thousand years apart. Columns keep a minimum width and the band scrolls, so a narrow screen shows fewer of them rather than thinner ones.

A dot plot, not a stacked bar. Each bucket draws two columns of dots from the same floor — quotes in the accent, works in the muted ink — and the two are never added together. Stacking them had put the quote counts, which are what the chart is read for, each starting at a different height, so no two buckets could be compared by eye; and the summed height it produced was a number about nothing, because a work and a quote are not two of the same thing. A standalone quote is a quote and not a work, so it raises one column and not the other. Both series share one scale, and a legend states what one dot is worth once a library is large enough that a dot has to stand for more than one.

The tick is a door, at decade scale only. A decade with something in it opens that decade’s works in Search — the same click-through the activity calendar’s days and the breakdown rows have. Years and centuries stay plain text, and that asymmetry is the point: the search reads a decade exactly, a bare year cannot go through the query box at all (“1984” is a book somebody owns), and a century would be answered — wrongly, as its first ten years, and with nothing on the page to say so. A control that returns a confident wrong answer is worse than one that is not there. The labels are set in the UI face rather than the mono one for the same kind of reason: these are years, and a 0 that could be an 8 moves a landmark by centuries.

Six colour categories plus a heart plus the actions do not fit one line on a narrow card, so below a threshold the six dots become the current one with a chevron, opening a list. The list is the point rather than a consolation: the categories carry names you chose, and six unlabelled blobs squeezed to fit are six things nobody can tell apart — so the narrow layout shows more than the wide one, not less. Decided by the width of the card, not the window, since a phone in one column and a five-column desktop board can hand the control the same space.

No selection ring on the trigger. The ring exists to pick one dot out of six, and here there is one dot — the chosen colour, alone. It stays on the dots inside the open list, which is the case it was drawn for.

Every level is a legal stopping point: pick a year and you have a year, carry on for a month, carry on again for the day. Stored as text and compared as text, because YYYY, YYYY-MM and YYYY-MM-DD sort correctly against each other lexically. "I read it in 2019" is a real answer, and padding it to January 1st invents a precision nobody has.

A film is one runtime, so a timestamp locates a line completely. A show is not: 01:12:40 says nothing without the episode it is 01:12:40 of. Shows only, and null is the only "unset" — season 0 is a real season, the specials strand, so S0E1 has to be storable and distinguishable from "no episode recorded". A season with no episode is fine; an episode with no season is refused, because it cannot be ordered against a numbered season. Sort order is season, episode, timestamp, id — with specials first and un-episoded lines last. Two occurrences of a recurring line in different episodes are two quotes, not one, since the occasion is part of what identifies a line.

Arithmetic over the numeric runs inside free text, which is what a Kindle location-to-page division or a PDF page offset actually needs. p.142 minus 5 is p.137; a range moves at both ends; leading zeros and thousands separators survive; clock values convert through seconds and come back with their original padding. Detection is by value, not by field. Formulae chain, and reset restores every row's as-imported snapshot — so one applied by mistake is undone rather than lived with.

One selection strip, three screens. In staging it does two things the live endpoints cannot: tags come off as well as on, and the work can be retargeted across kinds — book and film interchangeable — because a staged row carries both locator sets, so the move never destroys the ones the destination won't use.

A count on the ＋ Add pill, so a half-finished import is not forgotten. Staged quotes carry no FTS triggers and no review rows, so an unapproved import never turns up in search, never gets pulled into a quiz, and its tags never join your vocabulary.

A 16px circled i carrying the paragraph that used to sit under the control. It is a real <button>, not a hoverable span: on a phone there is no hover, which quietly made "move it into an info dot" a non-answer on the device this app is built for. A transparent ::after grows the tap target to 30px without moving any neighbouring text, and the click preventDefaults — these sit inside rows and labels that are themselves clickable, and asking for help must never also trigger the thing behind it. Second chip shows the open state.

How it opens, since 1.4.2. On a pointer device, hovering opens it and moving away closes it: an explanation should cost a glance, not a click and then a dismissal. A click pins it, and a pinned popover stays until it is clicked again, because text you want to re-read or select must not evaporate when the mouse drifts. Reaching across the 12px gap into the card keeps it open — there is a 140ms grace period the card itself cancels, or the thing you were reaching for would close as you reached. On touch, a tap toggles, and every touch-opened popover behaves as pinned, since a tap is the only thing it has. An unpinned popover gets no click-catcher behind it, so a hover-opened card never swallows a click aimed at the page underneath.

And it carries no tooltip. It had one until 1.4.2 — the dot's hover label read "About ISBN" — which on a phone was two mechanisms answering the same question: hold the dot to be told it explains the ISBN, tap it to be told what an ISBN is. The first is a label for a control whose entire content is a label. It only confused people.

A 44px "?" in the top bar, matching IconButton and .tp-btn's minimum so it never reads as the odd control in a row. It opens the help panel for whichever screen you are on, resolved from the route (see helpScreen in App.jsx). It was drawn per screen until 1.4.1 — eleven call sites, in each page's own header — which made it a property of eleven pages instead of one thing in one place, and on a phone it competed for the single row a page title also needs. Two exceptions remain, both because the shell bar is not there: the work-detail screens put it in their ⋯ menu (that phone bar already carries a back arrow, a filter, a ＋ and a ⋯ , and a fifth 44px control would leave a book title about eighty pixels to live in), and the full-screen Profile page carries its own. In the phone bars it drops its ring and lets the glyph carry the affordance.

The open book / play triangle on a work you are part-way through. It used to be a bare blue glyph carrying a dark blur halo, which is the trick that fails at exactly the size it mattered: a halo is a soft gradient, so at the ~18px a phone cover gives it, it ate the thin strokes it existed to protect and the mark read as a smudge on anything but plain artwork. Now it is an opaque disc in the shelf blue with a white glyph and a hard rim — contrast from an edge that does not scale away, legible over busy art and pale art alike, and consistent with every other coloured chip instead of being the one thing with a glow. The rim flips light in dark mode, or a dark edge vanishes against a dark cover. 22px, growing to 24px on phones where covers shrink and this is the only in-progress signal.

Was Good ${morning|afternoon|evening}: three strings for 365 days. Now a pool chosen from what the device knows — its clock (six buckets, because "Good evening" at 23:50 and at 17:05 are the same sentence for very different moments), its date, and its IANA time zone. All local: no locale asked of the server, nothing sent anywhere, no network call. A date earns a place only if it is the same Gregorian month and day every year or computable from an exact rule (Easter's computus; "the fourth Thursday in November") — so no Diwali, Eid or Lunar New Year, which move yearly and differ by country in the same year. National days beat international ones on a shared date (25 December is Quaid-e-Azam Day in Pakistan), and commemorations say Marking …, never Happy.

The two nav surfaces a phone actually touches — the ☰ drawer and the floating bottom bar — were the last bare ones in the app: every card, button, toggle thumb and select thumb already wears a tile, and these two read as plastic beside them. They take the shell material (wood on paper, brushed metal on film), the same tile the nav toggle's thumb wears, not the card material — the shell is a different substance from the things sitting on it. Same recipe as .hand-card: isolation:isolate plus a z-index:-1 ::before, so the grain sits above the surface's own background and below its content, and the blend flips to screen in dark mode where multiplying a grey tile just makes mud.

A drawn tick over a real, visually-hidden checkbox — role, checked state, label and tab order all kept, because a div with an onClick would look identical and announce nothing. One drawing for every board: a quote card, a book cover and a film poster are three very different rectangles, and a selection that looked like a checkbox on one and something else on another would be two affordances for one idea.

When it shows. On hover on a pointer, like the colour dots and the copy/share pair, and standing on every card of a board with a selection running (.is-selecting) — the cards you have not picked are half the answer to “what am I about to act on”. It no longer stands permanently on a phone, which it used to: there was nothing to select with then, and a hollow circle on every cover for a mode nobody had entered is a lot of furniture for an affordance the long press now provides.

And on a touch screen the mode is the only thing that reveals it (1.11.2). The hover and :focus-within reveals are gated behind (hover: hover), because a tap leaves focus on the card it landed on — so a phone was keeping the dot lit on the card that had been long-pressed after everything was deselected, until a reload, which is the only thing that drops the focus. Nothing was selected and one card said it was. .is-selecting now tracks the mode rather than the count, which makes the pairing the rule: the ticks are up while the bar is up, and dismissing puts every one of them away together.

An accent RING rather than a fill for the picked card: a quote card already carries a colour bar that means something else entirely, and tinting the paper would fight it — on the film aesthetic it would fight the frame. The ring is what you see from across the board; the tick is what you read up close.

Sticky, and that is the feature rather than a flourish: selecting forty things and scrolling to check one of them must not lose the controls. The count is the only thing on screen saying how many are picked, and it is a count the bar can act on — the selection drops ids that leave the visible list, so the bar goes with them rather than reporting a number about nothing.

One bar, two very different selections. A quote gets colour, tags, one seal across the lot, favourite, the quiz toggle and delete; a book, film or show gets fill-the-gaps, a shelf, set-fields, the quiz toggle and delete. A colour category is a note about a quote and a work has never had one; a shelf is a fact about a work and a quote has none. Which appear is decided by which callbacks the bar passes for the kind in hand, from the same registry the card menu reads — a bar offering something the menu does not looks completely normal on both screens, and the divergence only surfaces when somebody wonders why they cannot do to forty what they just did to one.

Delete is last, danger-styled, and the only one that asks. It is unreachable by gesture: select, press Delete, then type what it will do. Over works the dialog says plainly that the quotes go with them.

The mode outlives the picks (1.11.2), and the two controls at the right-hand end are that distinction. The bar used to render on count > 0, so taking the last card off tore it off the screen mid-task — “these four are the wrong four” cost a fresh long press to undo. It now renders on the mode: Deselect all empties the selection and leaves the bar standing, reading no books selected with every action disabled, and the × ends the mode and takes every tick on the board with it. Escape does the same, so the way out is not something you have to find. Zero is spoken in words rather than shown as a bare 0 — the badge reads 0, dimmed and disabled, and its accessible name is no books selected, so the reason is carried where it can still be heard once the words are clipped; the actions are disabled rather than hidden, because a row that changes shape at zero is a row you have to re-read. The kind is kept at zero too — drop it and an empty selection of books would render the quote actions, since isWorkKind(null) is false.

A row of glyphs, and only three of them (1.12.0). It shipped with four word-buttons and left 1.11.1 with eleven controls — colour dots, a tag field, a tag button, Seal, Favourite, a shelf dropdown, Fill gaps, Skip in quiz, Delete, Deselect all, ×. Every one was added for a good reason and none of them is the one that broke it, because nothing broke: it simply became, on a phone, a strip wider than the phone, one release at a time. Three stand in the row now — for quotes the colour, the ♥ and the quiz toggle; for works fill-the-gaps, the shelf and the quiz toggle — and the rest fold behind a ⋯.

Which three is decided in actions.jsx (where: ROW | OVERFLOW), not here, and a test asserts the count is exactly three: a fourth fits on a desktop and pushes the count off the screen on a phone, silently. The three that fold away have one thing in common — each needs something MORE from you before it can run. Tags need a keyboard, the seal needs a picture chosen, Delete needs a phrase typed. Standing open in the row, the tag field was the widest control in the strip and was open on every selection whether or not anybody meant to type into it; it asks in a dialog now.

The quiz toggle's PICTURE flips with its label, which stopped being optional the moment the words came off. That label was doing two jobs — naming the action and reporting which way round the selection is — and a fixed glyph keeps the first and silently drops the second. It is the one place the icon set holds two drawings that are nearly the same picture on purpose.

Edit appears at exactly one, in the ⋯, opening the same form the card's own ⋯ opens. Pick a second and it is gone rather than greyed. Set fields is its mirror — two upwards only — so a selection never shows two ways to change the same fields, and neither is ever a dead control. THE COUNT IS THE CONTROL (1.13.0), and the bar finally obeys Button labels. It was built entirely from glyph-only primitives — IconButton and MoreMenu, neither of which rendered a .btn-label span — so Show had no name to reveal and Hide had none to clip. The one row in the app that ignored the preference in both directions, on the surface with the least room, where it matters most. Nothing failed: it looked right on a desktop, which is where it was built. Both primitives now take an optional label and render the same two spans Button does, so the existing collapse rule does all of it.

The count moved into the glyph slot of that button: the number wears the same round 44px border as every control beside it, and clearing the picks is the obvious thing to tap. Deselect all is its word, standing on a desktop and clipping to the badge on a phone. That merged two items into one — a sentence saying how many and a worded button undoing it were one idea drawn twice — and it moved the pair apart: Deselect all and × side by side read as the same control twice, and the one that ends the mode is the one you reach for by accident. The badge is mono and tabular so it does not change width between 3 and 8, because a control that resizes as you tick things is a control that moves under your thumb. The ⋯ stays nameless on purpose: More beside three dots is the same thing said twice.

The app is drawn, and stays drawn. Every glyph spreads iconStroke: no fill, a 1.85 stroke, round caps, on a 24 box. Swapping the whole set to a filled pack would double the ink on every screen to fix a problem the app does not have. A key — tick, plus, close, chevron, three dots — is a pen mark with nothing inside to fill; a letterform — translate, the question mark — becomes a blob at 19px. Neither qualifies for the exception below, and icons-fill.test.jsx fails a glyph that fills without naming its reason.

A fill has to argue for itself, and only four arguments count. 1 — it is the ON state of a pair (the favourite; the three shelf marks). 2 — the glyph names a PLACE rather than a job, which is the whole rail: solid says “somewhere to go” before the word beside it is read, the same thing the shell says one step later when the active row wears an accent fill. 3 — the subject is a silhouette in life, where an outline at 19px turns the shape into a ring; the mortarboard is the case, and a face and a film reel were both rejected because each already sits inside something that supplies the ring. 4 — the fill carries information, as the palette’s wells hold the category colours.

Each fill carries its own viewBox. Phosphor draws every glyph to its own margins, so straight from the pack the film reel occupies 0.59 of its box and users 0.98 — thirteen tabs at thirteen sizes. Each is cropped to its own ink and sized so the long side is 0.82 of the box: uniform scaling, nothing stretched, the drawing still the pack’s.

The favourite, set. Phosphor `heart`. review.jsx flips this against IconHeart; before it, the label changed and the picture did not.

The Home tab. Phosphor `house`. Nothing outside the rail drew it, so the tab’s own glyph became the filled one rather than gaining a twin.

The rail's Checks row. Phosphor `note-pencil` — a page being marked up, which is what that screen is: imports waiting to be okayed and quotes with something odd left in them. A tick would have promised the app had already decided, and a tray would have said only that things had arrived.

The rail's Bin row. Phosphor `trash`, filled — and IconDelete stays an outline beside it, which is the whole point of the pair: one is a place things wait, the other is the verb on every row that can destroy something. Drawn alike, a row's delete button would read as a door.

The Library tab. Phosphor `books`. IconBooks keeps the outline for the shelf and the search result.

The Catalogue tab. Phosphor `film-reel`. IconReel keeps the outline where a film is the subject rather than the destination.

The Quotes tab. Phosphor `quotes`. IconQuote keeps the outline for the five places a quote is the thing being acted on.

The Anthologies tab. Phosphor `stack`. Stacked sheets: a gathering of lines that live somewhere else.

The Tags section of the metadata console — it was a tab of its own until Tags moved in there. Phosphor `tag`. IconTag stays the label drawn on a card; this is the door to the list of every one of them.

The Works section of the metadata console. Phosphor `shapes`, filled — a triangle, a circle and a square together. There is no glyph for “a mixture of books and films”: all 3,060 names in phosphor-icons/core were read, and the library has `books`, it has `film-reel`, and it has nothing that is both. IconBooks and IconReel are also already spent on the Library and the Catalogue, so borrowing either would tell a reader this section holds one kind when it holds two. `shapes` is abstract and leans on the word beside it; that is the cost, and it is smaller than naming one medium on a door that covers both.

The People section of the metadata console, and user management. Phosphor `users`, filled. IconUsers keeps the outline for its non-nav callers.

The Characters section of the metadata console. Phosphor `mask-happy`, filled. It replaces a second drawing of a head: People and Characters sat side by side in that rail wearing IconUsers and IconPerson, so the only thing telling two doors apart was the word under them. A mask is the one glyph in the set that says a part somebody plays rather than a person, which is exactly the difference between those two lists.

The Metadata tab. Phosphor `article`. Nav-only, so the drawing was replaced rather than twinned.

The Stats tab. Phosphor `chart-bar`. Nav-only, so the drawing was replaced rather than twinned.

WhatsApp, as a share destination. One of five marks the owner drew for the share sheet — two services and three file shapes, in one frame so no option reads as a different kind of choice. A 1088 box filled rather than the app's 24 stroked: the paths are as authored, because renormalising somebody's curve to fit a house viewBox is how a drawing quietly changes shape. Only `fill: currentColor` matters for theming, and it has it.

Reddit, as a share destination. See IconShareWhatsApp for why these five share a frame and a geometry the rest of the set does not.

Plain text — the format, not a destination. A speech bubble inside a bubble: what you get is the words and nothing else.

The quote rendered to a PNG. The only one of the five that produces a picture rather than text, which is why the frame holds a landscape and a sun.

Markdown. Three ruled lines in the same frame the plain-text and image marks use — the format that keeps its formatting, drawn as text that has structure.

Go and ask the sources. Arrows coming down into a stem — data arriving from somewhere else, which is the one thing every caller has in common: test a metadata source, look a person up, refetch a portrait, re-verify a shelf of works. This and the two below replaced one glyph doing three jobs. IconRefresh sat on fetching, resetting and installing a release alike, and the owner named it: "it is not just this row that uses refresh as fetch. all popups use that for fetch. even the update uses a refresh icon." Three questions with one picture between them means the picture answers none of them. Same 1088 filled frame as the share marks and for the same reason — see IconShareWhatsApp.

Put it back the way it was: a field before a lookup overwrote it, a filter sheet to its defaults, an item out of the bin, a whole Settings section. This was IconRevert and drew a hooked arrow; the name followed the drawing when the owner sent this one, because the app had two words for one act. Not to be confused with IconRestore — that is the backup box opened upward, which replaces the whole instance and logs everyone out.

Install a release, and nothing else. A square being swapped for another — the app replacing itself. It is deliberately the narrowest of the three verbs: it appears twice in the whole app, and the reason it is not IconFetch is that checking for a release and fetching a portrait are not the same promise.

The queue. A list whose first bullet is a play mark and whose others are dots: one job runs, the rest wait their turn in the order they were started — which is the whole rule of the queue, said before the word beside it is read. It is the Jobs section's glyph in the rail and on the phone's index, and the glyph a count of running or waiting jobs wears. A stack of layers was the other candidate and lost, because layers say "several at once", which is exactly what the queue refuses to do.

Stop a job. The rounded square every media control uses, unchanged from the pack. A job stops at once, leaves the item in hand untouched and is kept with its log, so this is not IconClose: nothing a Stop press touches is thrown away. It is drawn red, with its words kept, on Stop all and on a running job's row.

Run a finished job again. Two arrows chasing each other round a loop — the one "again" arrow that is not a circle. IconRefresh, IconReset and IconUpdate each turn round a centre and each means something narrower; a fourth circle meaning a fourth thing is the confusion the split of those three was made to end.

Author. Eight roles wore four drawings until the owner chose this set. An author wore the shelf of books that also means the Library tab, a director wore the reel that also means the catalogue, and studio and publisher wore the same company mark — so the one column whose job is telling roles apart was answering three of them with one picture, and the words underneath were doing all the work. The owner picked each: "author: fountain pen".

Director — "the director cut board". Not IconReel, which is the catalogue's own glyph: a director and a shelf of films drawn alike on a screen showing both is the confusion this set exists to end.

Publisher, and it is a substitute rather than the drawing asked for. The owner wanted a typewriter; no pack surveyed has one at this weight, so this is the thing a publisher puts out rather than the thing they type on. It replaces the company mark publisher used to share with studio, which is the confusion that mattered.

Speaker — whoever a quote is attributed to when the work is a talk rather than a book or a film. "speaker: mic".

Actor — the theatre masks. Sent as a picture and traced to vector here, so the fill IS the line: that is what tracing a line drawing produces, and stroking it instead would mean redrawing somebody else's picture. Verified against the source at 0.988 overlap rather than by eye, after a first pass came back as a solid block — the tracer reads zero as ink, and one path per contour leaves every hole filled in.

Translator — a letterform from one script, a letterform from another, and the arrows turning between them: "the same glyph, but with two arrows (look it up)", then "the arrows need to be closer". Traced like the actor masks, at 0.990 overlap with the source.

Studio — a studio light, and the one of the three that is stroked rather than filled: "studio light needs to be no fill". It is also the app's one glyph at a stroke weight other than 1.85, because a trace produces an outline of the ink and at 1.85 the head closes up; at 1.1 it still reads at 20px, where filled it collapses into a blob below 32.

The Settings tab. Phosphor `gear`. Nav-only, so the drawing was replaced rather than twinned.

Search as a destination. Phosphor `magnifying-glass`. IconSearch has thirteen other callers where it is the verb, and every one stays drawn.

The Import tab. Phosphor `tray-arrow-down`. Nav-only, so the drawing was replaced rather than twinned.

The account. Phosphor `identification-card`. A card with a face on it, rather than the bare head IconPerson draws for a credit.

User management. Phosphor `users`. The widest glyph in the pack — 0.98 of its box before the crop, 0.82 after.

Practise. Phosphor `graduation-cap`. Nine call sites read practise and drew the quiz card, so the place you go to study and the card you are asked looked identical.

The colour category. Phosphor `palette`. Replaces the ink drop: rule 4 is about a fill that holds the six category colours, and an outline has nowhere to put them.

A book underway. Phosphor `book-open-user`. A shelf mark is the ON state of a work.

An open book with no fill, for the shelf-move VERB. Fill is a state and stroke is an act, which is the line this set draws everywhere else — IconReading is solid because it marks what a work is (the shelf chip, the help entry beside it). "Read it again" is something you do, and it was borrowing the state mark, so a menu of five stroke verbs carried one solid glyph that read as a badge rather than a button.

A film or show underway. Phosphor `monitor-play`. A shelf mark is the ON state of a work.

A game underway. Phosphor `game-controller`. New. ReadingBadge computed isGame for its aria-label and then drew the film glyph.

The floor for anything tappable, and it is a floor rather than a size — a control may be taller, never shorter.

A person, or a value. The most-used radius in the app, and the one that says "this is a thing, not a verb".

Something that acts on the row it sits in. `.tp-btn` wears it, which is what keeps a button from reading as another pill in a row of chips.

Every `.tp-btn`. Transparent at rest on the primary; `--ink-border` on a ghost.

Every `.hand-card`. Heavier than a button on purpose: the card is the object, the button is a control on it.

The hand-drawn card corner — four different radii on two axes, so no two corners of a card match. `.hc-r1/r2/r3` rotate this same figure rather than inventing three more.

The page’s horizontal margin, and the one number the page body and the top bar must never disagree about — they are not in the same subtree, so a literal in each is a literal that drifts. Falls to 12px on a phone. Spacing, so it stays px: a gutter is not made of words.

The vertical step between rows. ALMOST NOTHING READS THIS YET — the app still spaces its screens with hand-typed Tailwind `space-y-*` classes across seven different values, which is the drift this constant exists to end. `spacing-debt.test.js` holds that count as a ratchet; the screen-by-screen pass is what spends it.

How far a sideways scroller dissolves at an end that still has content. An edge fade IS the signal that a row scrolls — there is no arrow, no scrollbar and no counter. px, because what it has to clear is a thumb rather than a word.

The same fade downward, and the unit is the whole point: it has to land on the LAST LINE, and the last line moves when the reader changes their type size. `max-height: 72px` is three lines at exactly one setting; 1.6em is one line at all of them.

The `.ph` placeholder for a missing picture: `--ink` at 5%, 12px on and 14px off, at 45 degrees. A missing PERSON is never this — that is the silhouette, and the two are not interchangeable.

Body text, a person’s name, a row label, a work title — and any glyph under the pointer.

Every glyph at rest, everywhere. A chip’s label. Secondary prose.

A mono label, a locator, a drawer badge, a role line.

A chapter heading, a link, a MORE, the Add row.

Anything riding on a lit row, key, tab or chip.

Destruction only. Not a warning, and not a subtractive half.

Commit. The tick in a sheet head is the only green on that surface.