@gjermundgaraba-designs/pixel-paper 0.11.0 → 0.13.0

package/DESIGN.md

@@ -804,7 +804,7 @@ Two neutral palettes over one set of tokens, with three meaning hues shared betw
 
 - **Marker Amber** (`{colors.amber}`, both palettes): the Mark (a viewfinder glyph on an amber square beside a marked item), the warn chip (an update waiting, a source behind), a meter reading at or above 80% of its limit, the glyph box of a warning notice, of a confirm dialog and of a reconnecting banner; a stat's change or a bar's reading that the product calls a warning. Always carries Printer Ink text (`{colors.on-status}`); an amber glyph on paper is never allowed because it fails contrast. Where every row is marked the Mark prints plain (muted, no fill): amber is for the one among many.
 - **Active Green** (`{colors.green}`, both palettes): the go chip of something that is live or in sync. Also carries Printer Ink text. Nothing else is green.
-- **Urgent Red** (`{colors.red}` paper / `{colors.red-plum}` plum): the danger button's text, border and shadow tint; the blocked and limit-reached chips; the error notice's and error toast's border and glyph box; the offline word and an offline banner's glyph box; a stat's change or a bar's reading at fault; a broken image, video or audio frame; a stale age, a late due day (on a cursor row or card, a red slip with `on-red` text), a failed check, a stale meter's foot; a failed field's rule and label, a failed radio or select box, a fieldset's legend over a failed control; a link to a page that does not exist; the minus sign of a deleted diff line. Red fills carry Paper White text on paper (`{colors.on-red}`) and Printer Ink on plum (`{colors.on-red-plum}`), because plum lightens red for text contrast.
+- **Urgent Red** (`{colors.red}` paper / `{colors.red-plum}` plum): the danger button's text, border and shadow tint; the blocked and limit-reached chips; a field's error line; the error notice's and error toast's border and glyph box; the offline word and an offline banner's glyph box; a stat's change or a bar's reading at fault; a broken image, video or audio frame; a stale age, a late due day (on a cursor row or card, a red slip with `on-red` text), a failed check, a stale meter's foot; a failed field's rule and label, a failed radio or select box, a fieldset's legend over a failed control; a link to a page that does not exist; the minus sign of a deleted diff line. Red fills carry Paper White text on paper (`{colors.on-red}`) and Printer Ink on plum (`{colors.on-red-plum}`), because plum lightens red for text contrast.
 
 ### Neutral
 
@@ -929,7 +929,7 @@ Depth is printed, not lit. Every raised surface casts a solid rectangle of Shado
 ### Shadow Vocabulary
 
 - **Card** (`box-shadow: var(--shadow-card)`, 8px): dialog cards and menus; the highest print.
-- **Panel** (`box-shadow: var(--shadow-panel)`, 5px): panels and the open select picker.
+- **Panel** (`box-shadow: var(--shadow-panel)`, 5px): panels, sheets and the open select picker.
 - **Button** (`box-shadow: var(--shadow-button)`, 3px): buttons, the filter strip, board cards, the Banner, toasts, the wall's corner slip.
 - **Small button** (`box-shadow: var(--shadow-button-small)`, 2px): small buttons.
 - **Pressed** (`box-shadow: var(--shadow-pressed)`, 1px, with `translate(2px, 2px)`): the active state of any button.
@@ -1009,7 +1009,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 - **Segmented** → `div.nav[role="group"] > button[aria-pressed]`: a choice of one printed as the same strip. When every option carries a `glyph` it prints as `div.switch > button[aria-pressed][aria-label]`, the strip holding 26×22px glyph cells (a layout, a density), each option's label its name and its tip. **Scheme.SchemeSwitch** is a Submodel printing a Segmented of system, paper and plum that remembers the choice (see Palette below).
 - **Tabs** (Submodel over `@foldkit/ui`'s Tabs; the caller keeps the tab on show) → `div.tabbed > div.nav.tabs[role="tablist"] > button[role="tab"][aria-selected]` plus `div.tab-panel[role="tabpanel"]`: the strip at 11px with `4px 12px` segments, a count spaced as NavStrip's; arrows, Home and End move and select. At the top of a flush panel the strip sits inside the panel's padding.
 - **Crumbs** → `nav.crumbs > ol > li`: the path in the 11px pixel face, muted slashes between, the last crumb ink with `aria-current="page"`, the others muted with a dotted underline on hover.
-- **Places** (a View over `@foldkit/ui`'s Button) → `nav.places[aria-label] > ul > li`, each place (keyed by an `id` that is stable and unique among the places, so two places that share a name stay apart) → `li > button` holding `span.place-name` and `span.place-count`, then `span.place-tools`: a column of places to go (areas, collections, saved filters), flush in a rail panel. Each line is at least 34px (`--row`), `8px 12px`, over a 1px rule; the name in the sans, sentence case, wrapping anywhere rather than clipping; the count in the 11px pixel face, muted, at the right; a quiet IconButton after it acts on the place itself (remove a saved filter). Hover tints head. The place you are in carries `aria-current="page"` and its whole `li` prints inverted, the count and a quiet tool in paper at 0.75, never tinted by hover; the ring sits 4px inside the line, in paper on the current one.
+- **Places** (a View over `@foldkit/ui`'s Button) → `nav.places[aria-label] > ul > li`, each place (keyed by an `id` that is stable and unique among the places, so two places that share a name stay apart) → `li > a[href]` when the place has an address (an area, a saved view: it opens in a new tab and reads as a link) or `li > button` when choosing it only changes the page, holding `span.place-name` and `span.place-count`, then `span.place-tools`: a column of places to go (areas, collections, saved filters), flush in a rail panel. Each line is at least 34px (`--row`), `8px 12px`, over a 1px rule; the name in the sans, sentence case, wrapping anywhere rather than clipping; the count in the 11px pixel face, muted, at the right; a quiet IconButton after it acts on the place itself (remove a saved filter). Hover tints head. The place you are in carries `aria-current="page"` and its whole `li` prints inverted, the count and a quiet tool in paper at 0.75, never tinted by hover; the ring sits 4px inside the line, in paper on the current one.
 - **PageHead** → `header.page-head > div.page-name > h1.page-title + span.meta`, then `div.page-acts`: the heading of a working screen, one per screen, above its panels (which title in h2). The name in the page-title register with a count or state beside it in the 11px pixel face; the screen's own Buttons at the right, 8px apart, wrapping under the name when the line runs out (`14px × 24px` gaps), aligned to the name's foot. No surface of its own: it stands on the ground. There is no label above the heading; the name says where you are.
 - **TopBar** (a Mount measures it, reporting through `toParentMessage`) → `header.topbar` (brand, nav, `div.topbar-tools`), **Wordmark** → `.wordmark` with `span.cursor`, **LinkState** → `span.link-state[role="status"]`: online prints plain; `.connecting` (the first reach) prints muted with the working cursor; `.reconnecting` (the link dropped and is coming back) fills amber with `on-status` and the cursor; `.offline` (given up) fills red with `on-red`. Reconnecting and offline stay in a phone's top bar; the other two hide there.
 - **StatusBar** (a Mount measures it, reporting through `toParentMessage`) → `footer.statusbar > div.statusbar-state + p.statusbar-keys`: the quiet line along the bottom of an interface, the page's footer (one per page, after the rail and the deck, outside `main`). Fixed to the bottom edge on paper over a 1px rule, in the pixel face at the state size in Muted Ink: the status at the left (a LinkState, a sync word), the keys at the right, each a `kbd.key-hint` in ink (printed as the help prints it, ⌘K or Ctrl+K by platform) and its word, plain text and not pressable. Narrow, the keys wrap under the status; nothing hides. It keeps `--statusbar-h` on the page at its height (25px, one line, until it is measured), like the top bar's `--topbar-h`: the page pads its end by it, a scrolled-to anchor stays clear of it, and the rail, the stage, a Banner and the toast stack all stop above it.
@@ -1039,10 +1039,10 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 
 - **Panel** → `section.panel[aria-labelledby] > header.panel-tb > h2 + span.meta`, then `div.panel-body` (or the body directly when `isFlush`), then `div.panel-foot`. The section is keyed by its `id`, so a panel among siblings that come and go keeps its own element, and a panel under another id is another element: one that replaces another in the same place is built anew (a live region inside it is inserted, not kept), so keep one panel under one id across states that should share it. Square, 2px ink border, Paper White, panel shadow. The title bar is inverted Departure Mono 13px uppercase 0.08em (`--tracking-title`), `padding: 6px 12px`; its meta is 11px at 75% opacity. A control in a title bar (a panel's, a window's or a card's) rings in paper, 2px inside its own edge, because the ink ring would vanish on the ink bar. The body pads 16px with a 14px grid gap; the foot pads `10px 12px` over a 1px rule, with a `.push` slot that goes right. `actions` puts small Buttons and IconButtons in `span.panel-acts` (6px apart) at the title bar's right end, after the meta; the bar trims to `3px 3px 3px 12px` at 31px or more. On the ink bar a button is a paper outline (a primary one fills paper), flat, nudged 1px when pressed, its ring 4px inside in its own colour; disabled, it prints at 60%.
 - **Deck** → `main.deck#main`: the column of panels.
-- **EmptyState** → `div.empty > strong + p`: centred, `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) headline, a muted 46ch sentence, an optional action 6px below.
+- **EmptyState** → `div.empty > strong.empty-title + p` (an `h1` to `h6.empty-title` with `headingLevel`, where the empty state is a page's or a section's main content, looking the same): centred, `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) headline, a muted 46ch sentence, an optional action 6px below.
 - **Wall** → `main.wall`, `Wall.markView` → `div.wall-mark` (a 30px ink-bordered glyph box beside the 22px wordmark). `Wall.cornerView` → `aside.wall-corner[aria-label]`, rendered just before the Wall: a paper slip in a 2px ink box on the 3px shadow, `6px 8px`, holding what a top bar would (see Layout).
 - **Banner** → `div.banner > span.glyph (.error, .ok, .quiet) + span`: a fixed paper slip on the 3px shadow with a 26px glyph box in the Notice's tones and a sentence that says what happens to the reader's work. It holds a state the whole interface is in, for as long as it lasts, one at a time. It is not a live region (it arrives already holding its sentence, which would go unheard): the application says the state once, when it begins, with `Announcer.announce` from its own Command. `"Error"` (the default; red, bang): a state that stops work (offline). `"Warn"` (amber): a state that is passing (reconnecting). `"Ok"` (ink, check): the state just ended (back online), shown briefly and then taken away. `"Quiet"` (head, info): news. With the connection word it is one pair: LinkState `"Reconnecting"` beside a warn Banner, `"Offline"` beside an error Banner with a retry, then `"Online"` beside an ok Banner for a moment; `"Connecting"` takes none.
-- **Rail** (Submodel) → `div.railed > aside.rail[popover="auto"][aria-label] + main.deck#main`: the rail's panels (a tree, places, filters) beside the deck's. One element serves both layouts, so nothing in it renders twice or loses its state: at rest it is in the page's flow (its `popover` attribute is inert until opened), and at 900px and under it is hidden and `button.btn.small.rail-open[popovertarget]` at the top of the deck opens it as a drawer: a slice of the dithered ground, `min(320px, 100vw - 40px)` wide from the left edge, closed by a 2px ink rule and the 8px card shadow, entering from the left in three steps over a veil. Its head (`div.rail-head`: the name in the label register and a close IconButton) shows only in the drawer. Opening focuses its first control; Escape, a click on the veil, the close glyph or focus leaving closes it, and all but the last return focus to the button. Widening the window past 900px closes it. The parent reads whether the drawer is open with `Rail.isOpen`, to hold its own page keys while the drawer covers the page. A file tree flush in a rail panel (or any panel) drops its own border.
+- **Rail** (Submodel) → `div.railed > main.deck#main + aside.rail[popover="auto"][aria-label]`: the rail's panels (a tree, places, filters) beside the deck's, after it in the markup so the page's main content and its h1 come first in reading order; the stylesheet fixes the rail at the left under the top bar. One element serves both layouts, so nothing in it renders twice or loses its state: at rest it stands there (its `popover` attribute is inert until opened), and at 900px and under it is hidden and `span.rail-open > button.btn.small[aria-expanded]` at the top of the deck opens it as a drawer: a slice of the dithered ground, `min(320px, 100vw - 40px)` wide from the left edge, closed by a 2px ink rule and the 8px card shadow, entering from the left in three steps over a veil. Its head (`div.rail-head`: the name in the label register and a close IconButton) shows only in the drawer. Opening focuses its first control; Escape, a click on the veil, the close glyph or focus leaving closes it, and all but the last return focus to the button. Widening the window past 900px closes it. The parent reads whether the drawer is open with `Rail.isOpen`, to hold its own page keys while the drawer covers the page. A file tree flush in a rail panel (or any panel) drops its own border.
 - **Stage** → `main.stage#main > div.stage-work > div.stage-canvas + div.stage-tools + div.stage-bar`: see Layout. `paused` (a Notice saying why: the link dropped, the page is read-only) veils the work when editing stops: `div.stage-paused[role="status"]` lays the dialog veil and its ink grain over everything and centres that Notice on the 3px button shadow, while the work beneath is `inert`. It lifts when `paused` is not given; the connection word says reconnecting meanwhile.
 - **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage, as tall and wide as whatever places it (and moved by it, if anything moves it). Its title bar is the panel's, trimmed to hold tools: 30px tall (`3px 3px 3px 10px`), centred, with an optional kind glyph, the title (clipped with an ellipsis), a status chip (its border turns paper so it reads on ink), tools and a close IconButton, both in the bar's paper. The body scrolls inside (`16px`, a 14px grid); flush, what fills it (a code surface, a file tree, a diff) drops its border and fills it. A foot is a panel foot; a notice there takes the whole line.
 - **Loading** → `div.loading[role="status"]`: where content is on its way, centred like an EmptyState at `26px 16px`, a 12px uppercase 0.08em (`--tracking-title`) muted line ("loading the items") ending in the 6×11px working cursor. Its status element stays in the page and only its words change: with `isLoading` false it is `div.loading-idle[role="status"]`, empty and out of the flow (`position: absolute`, never `display: none`, which would drop the live region), so it takes no room and no gap at the top of a panel's or a card's body, and a screen reader hears the line when it arrives. The content or an EmptyState takes its place on screen; the line never prints beside either.
@@ -1068,7 +1068,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 - **KeyHelp** (Submodel; `KeyHelp.subscriptions` bind `?`) → a Dialog holding a narrow Card titled "Keys": the application's own words when it gives `toIntroView` (what the covered page would say that the reader still needs, a sync notice and its retry), a text Field ("Find a key", focused on open) that finds a key by its key or its words, then a Keymap of every binding given, under its group, each key listed once under the command it gives, and a note saying that keys wait while you type in a field and, when sequences exist, that a sequence's keys are typed one straight after the other and any other key lets go of the first. That is what Foldkit's key bindings do; any other pause (while a card is held, while a menu is open) is the application's to make, so the note does not claim it. `?` opens it and so does `KeyHelp.open` from the parent's update (a button, a palette entry). Render it once per page, with the bindings in force on that page. `Closed` reports the reader closing it (Escape, the veil, a close button); opening it reports nothing, by `?` or by `open`, so read `KeyHelp.isOpen` to keep another dialog from opening over the help.
 - **KeyHint** → `kbd.key-hint[aria-hidden="true"]` (Button's and a menu item's `keyHint`), a key sequence printed as the help prints it: arrows as arrows, a sequence of characters as one word (`["G", "G"]` prints gg; named keys keep their space), `Mod+K` as ⌘K or Ctrl+K, Shift as ⇧ or Shift+. The platform lives in the application's Model as `KeyHint.KeyPlatform`, `"Other"` until `KeyHint.detectKeyPlatform` runs once from `init`, so a server render prints Ctrl. The same notation is exported as `KeyHint.keyLabel(keys, platform)`, for anything else that names a key (a command palette's hint).
-- **A list's cursor** is the application's: it keeps the current item in its Model, sets `aria-current="true"` and a roving `tabindex` (0 on the current item, -1 elsewhere) on that row's `div.row` or on that board card (`Board.cardView`'s `attributes`), and binds j and k (and ↓ ↑) to move it, `g g` and G (Home and End) to go to the ends, in an outline h and l to fold and unfold or step to the parent and the first child, on a board h and l to cross columns, and Enter to open, with the commands on the current item (`d d` removes it) beside them. A move focuses the item and scrolls it into view by the least distance; when the current item leaves (filtered, removed, folded away) the cursor takes its place. While a Board holds a card, the arrows and Space are the move's: turn the page's own bindings for them off. Give a Row `role="group"` and a label.
+- **A list's cursor** is the application's: it keeps the current item in its Model, sets `aria-current="true"` and a roving `tabindex` (0 on the current item, -1 elsewhere) on that row's `div.row` or on that board card (`Board.cardView`'s `attributes`), and binds j and k (and ↓ ↑) to move it, `g g` and G (Home and End) to go to the ends, in an outline h and l to fold and unfold or step to the parent and the first child, on a board h and l to cross columns, and Enter to open, with the commands on the current item (`d d` removes it) beside them. A move focuses the item and scrolls it into view by the least distance; when the current item leaves (filtered, removed, folded away) the cursor takes its place. While a Board holds a card, the arrows and Space are the move's: turn the page's own bindings for them off. A keyboard-driven list of Rows is a treegrid (`Rows.view`'s `isTreegrid`, named by its `label`), so a screen reader hands the list its arrows and letters instead of taking them for browsing: each row carries its place (`treegrid`: its level, its position among its siblings, how many there are, and whether it is expanded when it folds) and a name in its `attributes`.
 
 ### Tips and toolbars
 
@@ -1084,9 +1084,9 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 ### Rows and the outline
 
-**Rows** → `ul.rows` (`.tree` for an outline); each row, `Rows.rowView` → `li > div.row` (`.context`) with an optional nested `ul.rows`. A context row (outside a filter, printed only to keep a match on its chain) is muted and carries no chips, and since muting is colour alone it ends its text with `span.sr-only` " (context)", which a selectable row's box takes into its name. A 34px flex row (`5px 12px`, 8px gap): an 18px glyph cell (`Rows.glyphView` → `span.glyph`, or `Rows.toggleView` → `button.glyph[aria-expanded]` with the ring glyph open or closed), `div.grow` holding the text (a `label.grow` when it is the label of the row's box; `Rows.titleView` → `button.title`, underlined on hover, `.done-title` when done), `span.slot` for chips, marks and due days, the row's actions, and `span.tools` (`tools`, icon buttons) resting at 55% opacity until hover or focus-within (hidden on phones). Hover and focus-within tint the row head with `background-color` only, so the indent guides survive; the cursor row takes neither. A keyboard-driven list puts its cursor on `div.row` (`aria-current="true"`, a roving `tabindex`), which the stylesheet outlines (see "The cursor" below), through `Rows.rowView`'s `attributes`, which go on `div.row` rather than its `li` and also carry the row's `role="group"`, its name and its key handlers (never a class). Nested lists indent 26px on a 1px rule guide. **InlineInput** (Submodel; its `init` focuses and selects the field, so fold it in with `Update.foldChildInit`) → `input.inline-input` swaps in for text at exactly `1lh + 1px` so the row never moves. Enter or leaving the field reports new, non-empty text, trimmed, as `Committed`; an untouched field reports nothing, so a remote edit is never written back. The field then holds `readonly` and `aria-busy` (muted, still focused) until the parent answers with `InlineInput.succeeded` or `InlineInput.failed`: a failure keeps the field and its text for another try and, when it is a refusal with a reason, says why through `InlineInput.errorView`, which the field points at (`aria-invalid`, a red rule, and `aria-describedby`); the parent reads the held reason with `InlineInput.maybeError`. The parent's own `error` (the item's parent was deleted while editing) marks the field the same way, given to the view and to `errorView` alike, and shows before a refused save's reason. `Ended` says the edit is over (`"Enter"`, `"Blur"` or `"Escape"`, and `"Blur"` when focus left while the save was out) with the id the edit's last save returned (`maybeLastSavedId`, the item a repeat added last); the parent moves focus on `"Enter"` and `"Escape"` only, so a clicked destination keeps it. `isRepeating` (adding several) empties the field after each saved Enter instead of ending; Enter on an empty one ends. The text lives in the Submodel's Model, so it outlives a render. Escape is stopped from closing a dialog around it; an IME's Enter and Escape stay with the IME; removing the field writes nothing. **EditableTitle** (Submodel; it reports `Committed`, which the parent answers with `EditableTitle.succeeded` or `failed`) → `button.title-display` ⇄ `input.inline-input.title-edit` at 16px/600; Enter and Escape put focus back on the title.
+**Rows** → `ul.rows` (`.tree` for an outline); each row, `Rows.rowView` → `li > div.row` (`.context`) with an optional nested `ul.rows`. A context row (outside a filter, printed only to keep a match on its chain) is muted and carries no chips, and since muting is colour alone it ends its text with `span.sr-only` " (context)", which a selectable row's box takes into its name. A 34px flex row (`5px 12px`, 8px gap): an 18px glyph cell (`Rows.glyphView` → `span.glyph`, or `Rows.toggleView` → `button.glyph[aria-expanded]` with the ring glyph open or closed, named "Rows under" its label whether open or not), `div.grow` holding the text (a `label.grow` when it is the label of the row's box; `Rows.titleView` → `button.title`, underlined on hover, `.done-title` when done), `span.slot` for chips, marks and due days, the row's actions, and `span.tools` (`tools`, icon buttons) resting at 55% opacity until hover or focus-within (hidden on phones). Hover and focus-within tint the row head with `background-color` only, so the indent guides survive; the cursor row takes neither. A keyboard-driven list is a treegrid: `ul.rows[role="treegrid"]` named by its label, each `li` and nested `ul` stepping aside (`role="none"`), each `div.row[role="row"]` carrying `aria-level`, `aria-posinset`, `aria-setsize` and, on a row that folds, `aria-expanded`, and each of its parts a `role="gridcell"` (the box's `span.row-check`, the text, `span.slot`, `span.tools`, and `span.cell` around the glyph and around the actions, laid out as the row lays them out). It puts its cursor on `div.row` (`aria-current="true"`, a roving `tabindex`), which the stylesheet outlines (see "The cursor" below), through `Rows.rowView`'s `attributes`, which go on `div.row` rather than its `li` and also carry the row's name and its key handlers (never a class). A list no keyboard drives stays `ul > li`; a row there named for a screen reader takes `role="group"` with its name. Nested lists indent 26px on a 1px rule guide. **InlineInput** (Submodel; its `init` focuses and selects the field, so fold it in with `Update.foldChildInit`) → `input.inline-input` swaps in for text at exactly `1lh + 1px` so the row never moves. Enter or leaving the field reports new, non-empty text, trimmed, as `Committed`; an untouched field reports nothing, so a remote edit is never written back. The field then holds `readonly` and `aria-busy` (muted, still focused) until the parent answers with `InlineInput.succeeded` or `InlineInput.failed`: a failure keeps the field and its text for another try and, when it is a refusal with a reason, says why through `InlineInput.errorView`, which the field points at (`aria-invalid`, a red rule, and `aria-describedby`); the parent reads the held reason with `InlineInput.maybeError`. The parent's own `error` (the item's parent was deleted while editing) marks the field the same way, given to the view and to `errorView` alike, and shows before a refused save's reason. `Ended` says the edit is over (`"Enter"`, `"Blur"` or `"Escape"`, and `"Blur"` when focus left while the save was out) with the id the edit's last save returned (`maybeLastSavedId`, the item a repeat added last); the parent moves focus on `"Enter"` and `"Escape"` only, so a clicked destination keeps it. `isRepeating` (adding several) empties the field after each saved Enter instead of ending; Enter on an empty one ends. The text lives in the Submodel's Model, so it outlives a render. Escape is stopped from closing a dialog around it; an IME's Enter and Escape stay with the IME; removing the field writes nothing. **EditableTitle** (Submodel; it reports `Committed`, which the parent answers with `EditableTitle.succeeded` or `failed`) → `button.title-display` ⇄ `input.inline-input.title-edit` at 16px/600; Enter and Escape put focus back on the title.
 
-**The cursor:** `div.row[aria-current="true"]`, set on the row by the application, the one row the keyboard's commands act on. It is drawn, not filled: a 1px Muted Ink outline 4px inside the row (`outline-offset: -4px`), so a nested row's follows its indent and none leaves the panel. It takes no fill at all, not even the hover or focus tint other rows take, and its text, chips and tools keep their own colours (the tools at full opacity). Focus on the row itself thickens the same line to 2px (`--line`): one line inside the row, never a second ring outside it, for any focused row. It is neither focus nor selection (the check cell), it stays put when focus leaves, and moving it is the application's (see Keys). Controls in it keep their own ring: the text cell (`.grow`) clips, but with 4px of room inside the clip, so a title's ring prints whole; an InlineInput in a row shows its focus as its caret and rule, not a ring. A board's cursor card is inverted instead (see Board).
+**The cursor:** `div.row[aria-current="true"]`, set on the row by the application, the one row the keyboard's commands act on. It is drawn, not filled: a 1px Muted Ink outline 4px inside the row (`outline-offset: -4px`), so a nested row's follows its indent and none leaves the panel. It takes no fill at all, not even the hover or focus tint other rows take, and its text, chips and tools keep their own colours (the tools at full opacity). Focus on the row itself thickens the same line to 2px (`--line`): one line inside the row, never a second ring outside it, for any focused row. It is neither focus nor selection (the check cell), it stays put when focus leaves, and moving it is the application's (see Keys). Controls in it keep their own ring: the text cell (`.grow`) clips, but with 4px of room inside the clip, so a title's ring prints whole; an InlineInput in a row shows its focus as its caret and its rule doubled to 2px (drawn inside its box, so the row keeps its height; red while refused), not a ring. A board's cursor card is inverted instead (see Board).
 
 **Selectable rows:** a row's `select` puts `span.row-check > button[role="checkbox"][aria-checked]`, built on `@foldkit/ui`'s Checkbox, at the row's left edge: the cell is the row's full height and all of it the box's target, and the text is the box's label (`label.grow`, which names it through `aria-labelledby`), so a click there toggles too. A row whose text holds a button or a link names the box with `label` instead (a `span.sr-only` in the cell, the text a plain `div.grow`), since a label's click is on all of its text. `select.id` is the stem of the label's id (`<id>-label`); the box has no id. Checked, the box's cell inverts: an ink square at the edge with the box in paper inside. Only the cell (the whole row inverts only as the cursor): inversion marks the one current thing, and half a list inverted reads as a barcode that buries its titles and chips. **SelectAll** (a View over `@foldkit/ui`'s Checkbox) → `div.row.bulk > span.row-check + div.grow > span.bulk-count`, then `span.bulk-acts`: the head above a selectable list in a flush panel, over a 1px rule: a box that is checked, clear or mixed (`aria-checked="mixed"`, a 2px bar; a mixed box selects all), named "Select all" by a `span.sr-only` in its cell and described by the count ("3 of 12 selected") in the 11px pixel face, muted until something is selected, and the bulk actions (small Buttons), which always render so the head never shifts and focus never drops when the selection clears; the caller marks them `aria-disabled` while nothing is selected. Only the box toggles: a click on the count does nothing. With no rows the box is `aria-disabled`, muted and still in the keyboard. `id` is the stem of the name's and the count's ids (`<id>-label`, `<id>-description`); the box has no id.
 
@@ -1096,11 +1096,11 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 
 ### Inputs / Fields
 
-- **Field** (a View over `@foldkit/ui`'s Input) → `div.field (.boxed, .mono) > label + input + p.field-help`, the label naming the input and the help describing it, the input's `type` the platform's (`"date"` for the browser's date control) when given. **SelectField** (over `@foldkit/ui`'s Select) → `div.field > label + select + p.field-help`, its options in order and a group's under an `optgroup` heading, an option that is listed but not choosable `disabled`; **TextareaField** (over `@foldkit/ui`'s Textarea) → `div.field > label + textarea + p.field-help`, opening at `rows` lines. Both name, describe and mark their control as a Field does (`aria-invalid`; SelectField's `isRequired`, `aria-required`). **Fieldset** → `fieldset.field > legend.field-label`, its help linked with `aria-describedby`; **FieldGrid** → `div.field-grid` (auto-fit, 160px minimum); **Fields** → `fieldset.stack.gap-m`: a form's fields as one column `--space-m` (14px) apart, a body's gap, on the layout primitives with no rule of its own. `isBusy` (a save in flight) sets `disabled` and `aria-busy` on it, so every control holds at once and nothing changes under the save; the submit Button stays outside it, `isBusy`, so it keeps focus. A disabled control prints its value in Muted Ink; a boxless one also drops its dotted baseline (the mark of a place to type), a boxed one or a select mutes its box and caret.
+- **Field** (a View over `@foldkit/ui`'s Input) → `div.field (.boxed, .mono) > label + input + p.field-error + p.field-help`, the label naming the input and the help describing it; a failed field prints why in `p.field-error` (sans, Urgent Red) under the control, which is `aria-invalid` and described by it before its help, and the ErrorSummary above the fields says it again; a required field's control is `aria-required`; the input's `type` the platform's (`"date"` for the browser's date control) when given. **SelectField** (over `@foldkit/ui`'s Select) → `div.field > label + select + p.field-error + p.field-help`, its options in order and a group's under an `optgroup` heading, an option that is listed but not choosable `disabled`; **TextareaField** (over `@foldkit/ui`'s Textarea) → `div.field (.mono) > label + textarea + p.field-error + p.field-help`, opening at `rows` lines. Both name, describe and mark their control as a Field does. **Fieldset** → `fieldset.field > legend.field-label`, then the controls, `p.field-error` and `p.field-help`, its error and its help linked with `aria-describedby`; **FieldGrid** → `div.field-grid` (auto-fit, 160px minimum); **Fields** → `fieldset.stack.gap-m`: a form's fields as one column `--space-m` (14px) apart, a body's gap, on the layout primitives with no rule of its own. `isBusy` (a save in flight) sets `disabled` and `aria-busy` on it, so every control holds at once and nothing changes under the save; the submit Button stays outside it, `isBusy`, so it keeps focus. A disabled control prints its value in Muted Ink; a boxless one also drops its dotted baseline (the mark of a place to type), a boxed one or a select mutes its box and caret.
 - **Label:** 10px uppercase 0.1em Muted Ink, 4px above; turns red when the field is invalid, as a fieldset's legend does when a control in it is.
-- **Boxless (default):** full width, sans body, no box, a 1px dotted Muted Ink baseline, `padding: 2px 0`. On keyboard the baseline becomes 2px solid ink; invalid, 2px solid red. `isInvalid` sets `aria-invalid`; say why in an ErrorSummary above the fields. `isRequired` sets `aria-required="true"` on the input, a Field's and a PasswordField's alike.
+- **Boxless (default):** full width, sans body, no box, a 1px dotted Muted Ink baseline, `padding: 2px 0`. On keyboard the baseline becomes 2px solid ink; invalid, 2px solid red.
 - **Boxed:** the field that is the whole job of its form (sign-in, a quick-add field): 2px ink border, `padding: 5px 8px`; keyboard ring 2px outside; invalid turns the border red. A date is always boxed.
-- **PasswordField** (a View; the caller keeps whether it shows) → a boxed Field whose control is `span.password > input + button.iconbtn.quiet[aria-pressed]`: the toggle ("Show password", pressed while shown; its glyph turns from `eye` to `eye-off`) sits inside the box at its right end, the input padded 32px clear of it. With `strength` (0 to 4, as the product measures it; the system does not) a new password shows `span.strength` 6px under the box: four short cells lit up to the reading, a `meter` named "Password strength", and its word in the age register ("too short", which an empty box is, "weak", "fair", "good", "strong"). Signing in leaves it out.
+- **PasswordField** (a View; the caller keeps whether it shows) → a boxed Field whose control is `span.password > input + button.iconbtn.quiet[aria-pressed]`: the toggle ("Show password", pressed while shown; each of two in one form named apart, such as "Show password again"; its glyph turns from `eye` to `eye-off`) sits inside the box at its right end, the input padded 32px clear of it. With `strength` (0 to 4, as the product measures it; the system does not) a new password shows `span.strength` 6px under the box (under its `p.field-error` when it failed): four short cells lit up to the reading, a `meter` named "Password strength", and its word in the age register ("too short", which an empty box is, "weak", "fair", "good", "strong"). Signing in leaves it out.
 - **Textarea** (TextareaField's): boxless, 13px/1.5 sans, grows with content from 96px, vertical resize with an ink corner grip. **Mono:** system mono at 12px.
 - **Select** (SelectField's): `appearance: base-select` where supported; 30px minimum, 2px ink border, 11px pixel face, a CSS-drawn caret; the picker is paper with a 2px border and the panel shadow. Invalid, its box turns red.
 - **Choice** (a View over `@foldkit/ui`'s Checkbox) → `div.choice > button.choice-box[role="checkbox"][aria-checked] + span > span.choice-name + span.choice-note`; **RadioChoices** (Submodel over `@foldkit/ui`'s RadioGroup) → `div.choices[role="radiogroup"] > button.choice[role="radio"][aria-checked] > span.choice-box + span > span.choice-name + span.choice-note`: the option is the button itself, so a click anywhere on its line chooses it and the focus ring is around the line; `RadioChoices.firstOptionId` is the id of the first option, for a link to the group (an ErrorSummary's); **Choices** → `div.choices (.inline)`. 14px ink-bordered squares with a 6px painted cell (radio: 8px diamond). Invalid (`aria-invalid` on the radiogroup, since a radio does not take it), each box and choice's name turns red.
@@ -1130,7 +1130,7 @@ One keyboard for the page, Vim first, with the arrows beside the letters. The ke
 - **CodeSurface** → `pre.code-surface[tabindex="0"][role="group"]`, named by its label: a 2px ink-bordered head-tinted block in 12px/1.6 system mono, `10px 12px`, `tab-size: 2`, wrapping. It takes a string or a highlighter's spans: `tok-keyword`; `tok-string`, `tok-string2`, `tok-url`; `tok-number`, `tok-bool`, `tok-atom`, `tok-literal`; `tok-definition`, `tok-variableName2`, `tok-macroName`, `tok-link` (underlined); `tok-typeName`, `tok-className`, `tok-namespace`; `tok-comment`, `tok-meta`, `tok-punctuation` take their syntax roles; `tok-heading` and `tok-strong` are bold, `tok-emphasis` italic, `tok-inserted` green ink, `tok-deleted` and `tok-invalid` red ink (invalid on a dotted underline). Anything unnamed stays ink. **CodeEditor** (a View over `@foldkit/ui`'s Textarea) → `textarea.code-surface`, spelling, capitals and autocomplete off: 220px minimum, grows to 60vh, vertically resizable, scrolls sideways (wraps on phones).
 - **Secret** → `div.secret > code[role="group"] + button.btn.small`, the code named by its label: the same box at `6px 6px 6px 12px` with a scrolling nowrap code at 0.02em (wrapping anywhere on a phone, so the end is never hidden) and, in its `actions`, a copy button whose word turns "copied". **CopyButton** (Submodel; `CopyButton.isCopied` is for a parent that follows the copy) → the quiet copy glyph (a check once copied) or, as `"Button"`, a small button whose word turns "copied", for a beat; either says it to screen readers, and a copy that fails says so. It writes through Effect's `Clipboard` service: the application provides `Clipboard.layer` from `@effect/platform-browser` in its `resources`. A `div.save-row` with a `span.push` holds what follows it (the "I've stored it" commit).
 - **History** → `ol.history-list (.checks) > li (.current, [aria-current="true"]) > span.v + span.who + span.what (.failed)`: ruled rows, the version in 11px pixel face in a fixed `4ch + 8px` box (inverted when current, so nothing moves, a Time in it taking the paper too), who in 10px muted at 10ch (20ch for checks), what in sans, a failed line red with "(failed)" after it for screen readers (`span.sr-only`), so the state never rests on colour. `isWrapped` → `ol.history-list.wrapped` (never `.wrap`, which is Wrap's row), for an activity log whose words matter more than a tidy column, compact enough for a rail's panel: when (a whole timestamp, its box as wide as it, muted and flush with the what under it, padded `0 4px` and inverted only when current) and who share the first line with the action pushed to its end, and what runs on its own line below in the note size (12px/1.45 sans, in ink), wrapping anywhere. Entries are `6px 0` apart over 1px rules with a 2px gap between their lines; there is no rule above the first and no padding before the first or after the last, so the list starts where a body's content starts.
-- **LineDiff** → `div.diff-wrap > table.diff > tr.add | tr.del | tr.same | tr.fold`: a Myers line diff (jsdiff's `diff`, a runtime dependency) in a 2px ink box on paper that scrolls sideways; 12px/1.6 system-mono lines, each with two 10px pixel-face line numbers behind a 1px rule, a sign column, and the line. Added lines are Head Tint behind an ink `+`; deleted lines muted behind a red `−`; unchanged runs beyond two lines of context fold into a head-tinted row labelled in 10px uppercase On Head. On phones lines wrap.
+- **LineDiff** → `div.diff-wrap > table.diff > tr.add | tr.del | tr.same | tr.fold`: a Myers line diff (jsdiff's `diff`, a runtime dependency) in a 2px ink box on paper that scrolls sideways; 12px/1.6 system-mono lines, each with two 10px pixel-face line numbers behind a 1px rule, a sign column, and the line. Added lines are Head Tint behind an ink `+`; deleted lines muted behind a red `−`; unchanged runs beyond two lines of context fold into a head-tinted row labelled in 10px uppercase On Head. On phones lines wrap. `LineDiff.patchView` draws the same table from one file's unified diff, the lines between its hunks folded into the counted row; anything else prints a note line.
 
 ### Meters and cells
 
@@ -1161,7 +1161,7 @@ All three keep their space from the first paint (`size`: `Media.FrameSize.Ratio(
 
 ### Reading
 
-**Sheet** → `article.sheet > div.sheet-head > h1.sheet-title + div.sheet-acts`, then `p.byline`, then the body, usually **Prose** → `div.prose`. The sheet pads 28px 32px 36px (20px 16px 28px on phones); the byline is 10px pixel meta over a 1px rule. Prose: paragraphs 1em apart; h2 (and an h1, styled as h2) 2em above, h3, h4 (pixel caps), h5 (bold, 13px) and h6 (muted pixel label) 24px above; a document rendered inside a titled container shifts its headings to sit under that title (under a Dialog's h2, Markdown's `#` becomes h3); square list bullets in Muted Ink and ordered-list numbers in the 12px pixel face; inline code on head tint at 0.85em; code blocks as code surfaces at 12.5px; tables in a 2px ink box at 14px; a 1px Rule Grey `hr`; blockquotes muted behind a 1px ink rule. Links are ink with a 1px underline offset 3px that thickens to 2px on hover; `a.missing` (a page that does not exist) is red on a dotted red underline. **Toc** → `nav > ul.toc > li (.l3) > a[href="#id"][aria-current]`, an entry with detail holding `span.toc-entry` (its words over the detail, 2px apart): plain links to the page's headings (`html` keeps `scroll-padding-top` clear of the sticky top bar) in 13px sans (12px muted for h3, indented), one 6px ink cell before the heading being read; every entry keeps the slot so nothing shifts. The heading being read is the caller's, kept by a Subscription entry, `Toc.readingPositionEntry`.
+**Sheet** → `article.sheet > div.sheet-head > h1.sheet-title + div.sheet-acts`, then `p.byline`, then the body, usually **Prose** → `div.prose`. A sheet is framed as a panel is (paper, a 2px ink box, the 5px print shadow) and takes a panel's place on the page, never sitting inside one: its h1 opens the page, where a panel's h2 title would come before it. What a panel's title bar would say (the path, "earlier version") goes in the byline or the actions. The sheet pads 28px 32px 36px (20px 16px 28px on phones); the byline is 10px pixel meta over a 1px rule. Prose: paragraphs 1em apart; h2 (and an h1, styled as h2) 2em above, h3, h4 (pixel caps), h5 (bold, 13px) and h6 (muted pixel label) 24px above; a document rendered inside a titled container shifts its headings to sit under that title (under a Dialog's h2, Markdown's `#` becomes h3); square list bullets in Muted Ink and ordered-list numbers in the 12px pixel face; inline code on head tint at 0.85em; code blocks as code surfaces at 12.5px; tables in a 2px ink box at 14px; a 1px Rule Grey `hr`; blockquotes muted behind a 1px ink rule. Links are ink with a 1px underline offset 3px that thickens to 2px on hover; `a.missing` (a page that does not exist) is red on a dotted red underline. **Toc** → `nav > ul.toc > li (.l3) > a[href="#id"][aria-current]`, an entry with detail holding `span.toc-entry` (its words over the detail, 2px apart): plain links to the page's headings (`html` keeps `scroll-padding-top` clear of the sticky top bar) in 13px sans (12px muted for h3, indented), one 6px ink cell before the heading being read; every entry keeps the slot so nothing shifts. The heading being read is the caller's, kept by a Subscription entry, `Toc.readingPositionEntry`.
 
 ### Signature: the invert flash and the flash word
 

package/dist/src/emptyState/emptyState.d.ts

@@ -3,6 +3,10 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 export type ViewConfig = Readonly<{
     /** Pixel caps: what is missing (`"Nothing queued"`). */
     title: string;
+    /** Makes the title a heading at this level, for an empty state that is the page's or the
+     *  section's main content (a gate, a missing page); a `strong` when not given. It looks the
+     *  same either way. */
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
     /** One sentence: how it gets filled. */
     body?: ReadonlyArray<Html | string>;
     /** What fills it: a button under the sentence. */

package/dist/src/emptyState/emptyState.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"emptyState.d.ts","sourceRoot":"","sources":["../../../src/emptyState/emptyState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,8DAA8D;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH,yFAAyF;AACzF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAW3E,CAAC"}
+{"version":3,"file":"emptyState.d.ts","sourceRoot":"","sources":["../../../src/emptyState/emptyState.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,8DAA8D;AAC9D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,wDAAwD;IACxD,KAAK,EAAE,MAAM,CAAC;IACd;;2BAEuB;IACvB,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACrC,wCAAwC;IACxC,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,kDAAkD;IAClD,OAAO,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH,yFAAyF;AACzF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAa3E,CAAC"}

package/dist/src/emptyState/emptyState.js

@@ -2,9 +2,11 @@ import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array } from "effect";
 /** What a panel says when it has nothing to show, centred where its content would be. */
 export const view = (config, h) => {
-    const { title, body = [], actions = [] } = config;
+    const { title, headingLevel, body = [], actions = [] } = config;
     return __foldkitBrandViewResult((h.div([h.Class("empty")], [
-        h.strong([], [title]),
+        headingLevel === undefined
+            ? h.strong([h.Class("empty-title")], [title])
+            : h[`h${headingLevel}`]([h.Class("empty-title")], [title]),
         ...Array.match(body, { onEmpty: () => __foldkitBrandViewResult(([]), "@gjermundgaraba-designs/pixel-paper/src/emptyState/emptyState.js#onEmpty"), onNonEmpty: (sentence) => __foldkitBrandViewResult(([h.p([], sentence)]), "@gjermundgaraba-designs/pixel-paper/src/emptyState/emptyState.js#onNonEmpty") }),
         ...actions,
     ])), "@gjermundgaraba-designs/pixel-paper/src/emptyState/emptyState.js#view");

package/dist/src/field/field.d.ts

@@ -1,5 +1,11 @@
-import type { Html, HtmlBuilder } from "foldkit/html";
+import type { Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
 import type { Attributes } from "../attributes/attributes.ts";
+/** The red sentence under a field's control that says why it failed, given an error. */
+export declare const errorView: <Message>(id: string, error: string | undefined, h: HtmlBuilder<Message>) => ReadonlyArray<Html>;
+/** Points the control at its error, then at its help line when it has one. After the
+ *  `@foldkit/ui` attributes, whose `aria-describedby` names the help line alone; every
+ *  `@foldkit/ui` control names that line `<id>-description`, as Input does. */
+export declare const describedByError: <Message>(id: string, error: string | undefined, hasHelp: boolean, h: HtmlBuilder<Message>) => ReadonlyArray<TextareaAttribute<Message>>;
 /** Configuration for rendering a text field with `view`. */
 export type ViewConfig<Message> = Readonly<{
     id: string;
@@ -8,8 +14,10 @@ export type ViewConfig<Message> = Readonly<{
     onInput: (value: string) => Message;
     /** A sans sentence under the control. */
     help?: string;
-    /** Red on the control's rule and on its label; say why in a Notice above the form. */
-    isInvalid?: boolean;
+    /** Why the value was refused: a red sentence under the control, which the control is
+     *  described by, with red on its rule and its label (`aria-invalid`). Say it again in an
+     *  ErrorSummary above the form. */
+    error?: string | undefined;
     /** The form is not sent without it: screen readers hear "required" (`aria-required`). */
     isRequired?: boolean;
     /** A 2px ink box: the field that is the whole job of its form. A date is always boxed. */
@@ -24,8 +32,8 @@ export type ViewConfig<Message> = Readonly<{
     inputAttributes?: Attributes<Message>;
 }>;
 /** A labelled text input with its help line, built on `@foldkit/ui`'s `Input`: the label
- *  names the input, the help line describes it (`aria-describedby`), `isInvalid` sets
- *  `aria-invalid` and `isRequired` sets `aria-required`. The input is boxless, a dotted
- *  baseline that turns solid ink on focus. */
+ *  names the input, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The input is boxless, a dotted baseline that turns solid ink on focus. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=field.d.ts.map

package/dist/src/field/field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAI9D,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,sFAAsF;IACtF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;iBACa;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;iBACa;IACb,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH;;;8CAG8C;AAC9C,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA0CpF,CAAC"}
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/field/field.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEzE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAM9D,wFAAwF;AACxF,eAAO,MAAM,SAAS,GAAI,OAAO,MAC3B,MAAM,SACH,MAAM,GAAG,SAAS,KACtB,WAAW,CAAC,OAAO,CAAC,KACtB,aAAa,CAAC,IAAI,CACmE,CAAC;AAEzF;;+EAE+E;AAC/E,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAClC,MAAM,SACH,MAAM,GAAG,SAAS,WAChB,OAAO,KACb,WAAW,CAAC,OAAO,CAAC,KACtB,aAAa,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAGqD,CAAC;AAIjG,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,yCAAyC;IACzC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;uCAEmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,yFAAyF;IACzF,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kDAAkD;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;iBACa;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;iBACa;IACb,eAAe,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH;;;6EAG6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA4CpF,CAAC"}

package/dist/src/field/field.js

@@ -1,16 +1,26 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Input as UiInput } from "@foldkit/ui";
+// ERROR
+const errorId = (id) => __foldkitBrandViewResult((`${id}-error`), "@gjermundgaraba-designs/pixel-paper/src/field/field.js#errorId");
+/** The red sentence under a field's control that says why it failed, given an error. */
+export const errorView = (id, error, h) => __foldkitBrandViewResult((error === undefined ? [] : [h.p([h.Id(errorId(id)), h.Class("field-error")], [error])]), "@gjermundgaraba-designs/pixel-paper/src/field/field.js#errorView");
+/** Points the control at its error, then at its help line when it has one. After the
+ *  `@foldkit/ui` attributes, whose `aria-describedby` names the help line alone; every
+ *  `@foldkit/ui` control names that line `<id>-description`, as Input does. */
+export const describedByError = (id, error, hasHelp, h) => __foldkitBrandViewResult((error === undefined
+    ? []
+    : [h.AriaDescribedBy(hasHelp ? `${errorId(id)} ${UiInput.descriptionId(id)}` : errorId(id))]), "@gjermundgaraba-designs/pixel-paper/src/field/field.js#describedByError");
 /** A labelled text input with its help line, built on `@foldkit/ui`'s `Input`: the label
- *  names the input, the help line describes it (`aria-describedby`), `isInvalid` sets
- *  `aria-invalid` and `isRequired` sets `aria-required`. The input is boxless, a dotted
- *  baseline that turns solid ink on focus. */
+ *  names the input, the help line describes it (`aria-describedby`), an `error` sets
+ *  `aria-invalid` and describes it before the help, and `isRequired` sets `aria-required`.
+ *  The input is boxless, a dotted baseline that turns solid ink on focus. */
 export const view = (config, h) => {
-    const { id, label, value, onInput, help, isInvalid = false, isRequired = false, isBoxed = false, isMono = false, type, inputAttributes = [], } = config;
+    const { id, label, value, onInput, help, error, isRequired = false, isBoxed = false, isMono = false, type, inputAttributes = [], } = config;
     return __foldkitBrandViewResult((UiInput.view({
         id,
         value,
         onInput,
-        isInvalid,
+        isInvalid: error !== undefined,
         ...(type !== undefined && { type }),
         hasDescription: help !== undefined,
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)], [
@@ -19,8 +29,10 @@ export const view = (config, h) => {
             h.input([
                 ...inputAttributes,
                 ...groups.input,
+                ...describedByError(id, error, help !== undefined, h),
                 ...(isRequired ? [h.AriaRequired(true)] : []),
             ]),
+            ...errorView(id, error, h),
             ...(help === undefined
                 ? []
                 : [h.p([...groups.description, h.Class("field-help")], [help])]),

package/dist/src/fieldset/fieldset.d.ts

@@ -7,11 +7,16 @@ export type ViewConfig = Readonly<{
     label: string;
     /** A sans sentence under the controls; it describes the group. */
     help?: string;
+    /** Why the choice was refused: a red sentence under the controls, which the group is
+     *  described by, before its help. Mark the control itself invalid too (RadioChoices'
+     *  `isInvalid`), which turns the legend red. Say it again in an ErrorSummary above the
+     *  form. */
+    error?: string | undefined;
     /** The controls: Choices, a Segmented. */
     body: ReadonlyArray<Html | string>;
 }>;
 /** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
- *  named by its `<legend>` and described by its help line (`aria-describedby`). The legend
- *  turns red while a control in it is invalid. */
+ *  named by its `<legend>` and described by its error and its help line
+ *  (`aria-describedby`). The legend turns red while a control in it is invalid. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=fieldset.d.ts.map

package/dist/src/fieldset/fieldset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../src/fieldset/fieldset.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;kDAEkD;AAClD,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAqB3E,CAAC"}
+{"version":3,"file":"fieldset.d.ts","sourceRoot":"","sources":["../../../src/fieldset/fieldset.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,0DAA0D;AAC1D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;gBAGY;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,0CAA0C;IAC1C,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACpC,CAAC,CAAC;AAEH;;mFAEmF;AACnF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IA0B3E,CAAC"}

package/dist/src/fieldset/fieldset.js

@@ -1,16 +1,22 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Fieldset as UiFieldset } from "@foldkit/ui";
+import { describedByError, errorView } from "../field/field.js";
 /** A group of controls under one name, built on `@foldkit/ui`'s Fieldset: a `<fieldset>`
- *  named by its `<legend>` and described by its help line (`aria-describedby`). The legend
- *  turns red while a control in it is invalid. */
+ *  named by its `<legend>` and described by its error and its help line
+ *  (`aria-describedby`). The legend turns red while a control in it is invalid. */
 export const view = (config, h) => {
-    const { id, label, help, body } = config;
+    const { id, label, help, error, body } = config;
     return __foldkitBrandViewResult((UiFieldset.view({
         id,
         hasDescription: help !== undefined,
-        toView: (groups) => __foldkitBrandViewResult((h.fieldset([...groups.fieldset, h.Class("field")], [
+        toView: (groups) => __foldkitBrandViewResult((h.fieldset([
+            ...groups.fieldset,
+            ...describedByError(id, error, help !== undefined, h),
+            h.Class("field"),
+        ], [
             h.legend([...groups.legend, h.Class("field-label")], [label]),
             ...body,
+            ...errorView(id, error, h),
             ...(help === undefined
                 ? []
                 : [h.p([...groups.description, h.Class("field-help")], [help])]),

package/dist/src/lineDiff/diff.d.ts

@@ -1,43 +1,38 @@
-import { Schema } from "effect";
-/** What a line did between the two sides. */
-export declare const LineKind: Schema.Literals<readonly ["Same", "Added", "Removed"]>;
-export type LineKind = typeof LineKind.Type;
-/** One line of a diff, numbered on the side or sides it is on. */
-export declare const DiffLine: Schema.Struct<{
-    readonly kind: Schema.Literals<readonly ["Same", "Added", "Removed"]>;
-    readonly text: Schema.String;
-    readonly maybeOldNumber: Schema.Option<Schema.Number>;
-    readonly maybeNewNumber: Schema.Option<Schema.Number>;
-}>;
-export type DiffLine = typeof DiffLine.Type;
-/** A row of a folded diff: a line, or a run of two or more unchanged lines folded into a
- *  count, with the run's first line. */
+import { Option, Schema } from "effect";
+/** A row of a diff: a line, numbered on the side or sides it is on, or a run of unchanged
+ *  lines folded into a count, known by its first line's old number. */
 export declare const DiffRow: import("foldkit/schema").TaggedUnion<{
-    readonly Line: {
-        line: Schema.Struct<{
-            readonly kind: Schema.Literals<readonly ["Same", "Added", "Removed"]>;
-            readonly text: Schema.String;
-            readonly maybeOldNumber: Schema.Option<Schema.Number>;
-            readonly maybeNewNumber: Schema.Option<Schema.Number>;
-        }>;
+    readonly Same: {
+        text: Schema.String;
+        oldNumber: Schema.Number;
+        newNumber: Schema.Number;
+    };
+    readonly Added: {
+        text: Schema.String;
+        newNumber: Schema.Number;
+    };
+    readonly Removed: {
+        text: Schema.String;
+        oldNumber: Schema.Number;
     };
     readonly Fold: {
         count: Schema.Number;
-        firstLine: Schema.Struct<{
-            readonly kind: Schema.Literals<readonly ["Same", "Added", "Removed"]>;
-            readonly text: Schema.String;
-            readonly maybeOldNumber: Schema.Option<Schema.Number>;
-            readonly maybeNewNumber: Schema.Option<Schema.Number>;
-        }>;
+        firstOldNumber: Schema.Number;
     };
 }>;
 export type DiffRow = typeof DiffRow.Type;
+/** What a line did between the two sides. */
+export type LineKind = "Same" | "Added" | "Removed";
 /** The line diff of two texts (Myers, through jsdiff), each line numbered on its side. A
  *  missing final newline is not a change. */
-export declare const diffLinesOf: (before: string, after: string) => ReadonlyArray<DiffLine>;
-/** Whether anything changed. */
-export declare const hasChanges: (lines: ReadonlyArray<DiffLine>) => boolean;
+export declare const diffRowsOf: (before: string, after: string) => ReadonlyArray<DiffRow>;
+/** Whether a line was added or removed. */
+export declare const hasChanges: (rows: ReadonlyArray<DiffRow>) => boolean;
+/** The rows of one file's unified diff, numbered from its hunks' headers, with the unchanged
+ *  lines between hunks folded into a count. `None` unless it is one file with a hunk: text that
+ *  is not a diff, a binary change and several files have no lines to show. */
+export declare const diffRowsOfPatch: (patch: string) => Option.Option<ReadonlyArray<DiffRow>>;
 /** The diff's rows: every change with `context` unchanged lines around it, and each longer
  *  run of unchanged lines folded into one row that counts them (a run of one stays a line). */
-export declare const foldUnchanged: (lines: ReadonlyArray<DiffLine>, context: number) => ReadonlyArray<DiffRow>;
+export declare const foldUnchanged: (rows: ReadonlyArray<DiffRow>, context: number) => ReadonlyArray<DiffRow>;
 //# sourceMappingURL=diff.d.ts.map

package/dist/src/lineDiff/diff.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/diff.ts"],"names":[],"mappings":"AACA,OAAO,EAAwB,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAK5D,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,wDAAgD,CAAC;AACtE,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C,kEAAkE;AAClE,eAAO,MAAM,QAAQ;;;;;EAKnB,CAAC;AACH,MAAM,MAAM,QAAQ,GAAG,OAAO,QAAQ,CAAC,IAAI,CAAC;AAE5C;wCACwC;AACxC,eAAO,MAAM,OAAO;;QACV,IAAI;;;;;;;;QACJ,KAAK;QAAiB,SAAS;;;;;;;EACvC,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AA6B1C;6CAC6C;AAC7C,eAAO,MAAM,WAAW,WAAY,MAAM,SAAS,MAAM,KAAG,aAAa,CAAC,QAAQ,CAc/E,CAAC;AAEJ,gCAAgC;AAChC,eAAO,MAAM,UAAU,UAAW,aAAa,CAAC,QAAQ,CAAC,KAAG,OACV,CAAC;AAmBnD;+FAC+F;AAC/F,eAAO,MAAM,aAAa,UACjB,aAAa,CAAC,QAAQ,CAAC,WACrB,MAAM,KACd,aAAa,CAAC,OAAO,CAWvB,CAAC"}
+{"version":3,"file":"diff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/diff.ts"],"names":[],"mappings":"AACA,OAAO,EAAgB,MAAM,EAAE,MAAM,EAAQ,MAAM,QAAQ,CAAC;AAK5D;uEACuE;AACvE,eAAO,MAAM,OAAO;;QACV,IAAI;QAAiB,SAAS;QAAiB,SAAS;;;QACvD,IAAI;QAAiB,SAAS;;;QAC5B,IAAI;QAAiB,SAAS;;;QACjC,KAAK;QAAiB,cAAc;;EAC5C,CAAC;AACH,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAI1C,6CAA6C;AAC7C,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;AAgCpD;6CAC6C;AAC7C,eAAO,MAAM,UAAU,WAAY,MAAM,SAAS,MAAM,KAAG,aAAa,CAAC,OAAO,CAc7E,CAAC;AAEJ,2CAA2C;AAC3C,eAAO,MAAM,UAAU,SAAU,aAAa,CAAC,OAAO,CAAC,KAAG,OACiB,CAAC;AA+C5E;;8EAE8E;AAC9E,eAAO,MAAM,eAAe,UAAW,MAAM,KAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAOjF,CAAC;AAqBJ;+FAC+F;AAC/F,eAAO,MAAM,aAAa,SAClB,aAAa,CAAC,OAAO,CAAC,WACnB,MAAM,KACd,aAAa,CAAC,OAAO,CAWvB,CAAC"}

package/dist/src/lineDiff/diff.js

@@ -1,59 +1,80 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { diffLines } from "diff";
+import { diffLines, parsePatch } from "diff";
 import { Array, Match, Option, Schema, pipe } from "effect";
 import { defineTaggedUnion } from "foldkit/schema";
-// LINES
-/** What a line did between the two sides. */
-export const LineKind = Schema.Literals(["Same", "Added", "Removed"]);
-/** One line of a diff, numbered on the side or sides it is on. */
-export const DiffLine = Schema.Struct({
-    kind: LineKind,
-    text: Schema.String,
-    maybeOldNumber: Schema.Option(Schema.Number),
-    maybeNewNumber: Schema.Option(Schema.Number),
-});
-/** A row of a folded diff: a line, or a run of two or more unchanged lines folded into a
- *  count, with the run's first line. */
+// ROWS
+/** A row of a diff: a line, numbered on the side or sides it is on, or a run of unchanged
+ *  lines folded into a count, known by its first line's old number. */
 export const DiffRow = defineTaggedUnion({
-    Line: { line: DiffLine },
-    Fold: { count: Schema.Number, firstLine: DiffLine },
+    Same: { text: Schema.String, oldNumber: Schema.Number, newNumber: Schema.Number },
+    Added: { text: Schema.String, newNumber: Schema.Number },
+    Removed: { text: Schema.String, oldNumber: Schema.Number },
+    Fold: { count: Schema.Number, firstOldNumber: Schema.Number },
 });
 const withFinalNewline = (text) => (__foldkitBrandViewResult((text.endsWith("\n") ? text : `${text}\n`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#withFinalNewline"));
 const changeKind = (change) => __foldkitBrandViewResult((Match.value(change).pipe(Match.withReturnType(), Match.when({ added: true }, () => __foldkitBrandViewResult(("Added"), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous")), Match.when({ removed: true }, () => __foldkitBrandViewResult(("Removed"), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~2")), Match.orElse(() => __foldkitBrandViewResult(("Same"), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~3")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#changeKind");
-const numberLine = (numbers, kind, text) => {
-    const hasOld = kind !== "Added";
-    const hasNew = kind !== "Removed";
-    return __foldkitBrandViewResult(([
-        { old: hasOld ? numbers.old + 1 : numbers.old, new: hasNew ? numbers.new + 1 : numbers.new },
-        {
-            kind,
-            text,
-            maybeOldNumber: Option.liftPredicate(numbers.old, () => __foldkitBrandViewResult((hasOld), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~4")),
-            maybeNewNumber: Option.liftPredicate(numbers.new, () => __foldkitBrandViewResult((hasNew), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~5")),
-        },
-    ]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#numberLine");
-};
+const numberLine = (numbers, kind, text) => __foldkitBrandViewResult((Match.value(kind).pipe(Match.withReturnType(), Match.when("Same", () => __foldkitBrandViewResult(([
+    { old: numbers.old + 1, new: numbers.new + 1 },
+    DiffRow.Same({ text, oldNumber: numbers.old, newNumber: numbers.new }),
+]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~4")), Match.when("Added", () => __foldkitBrandViewResult(([
+    { old: numbers.old, new: numbers.new + 1 },
+    DiffRow.Added({ text, newNumber: numbers.new }),
+]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~5")), Match.when("Removed", () => __foldkitBrandViewResult(([
+    { old: numbers.old + 1, new: numbers.new },
+    DiffRow.Removed({ text, oldNumber: numbers.old }),
+]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~6")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#numberLine");
 /** The line diff of two texts (Myers, through jsdiff), each line numbered on its side. A
  *  missing final newline is not a change. */
-export const diffLinesOf = (before, after) => __foldkitBrandViewResult((pipe(diffLines(withFinalNewline(before), withFinalNewline(after)), Array.flatMap((change) => __foldkitBrandViewResult((Array.map(change.value.slice(0, -1).split("\n"), (text) => (__foldkitBrandViewResult(({
+export const diffRowsOf = (before, after) => __foldkitBrandViewResult((pipe(diffLines(withFinalNewline(before), withFinalNewline(after)), Array.flatMap((change) => __foldkitBrandViewResult((Array.map(change.value.slice(0, -1).split("\n"), (text) => (__foldkitBrandViewResult(({
     kind: changeKind(change),
     text,
-}), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~7")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~6")), (lines) => __foldkitBrandViewResult((Array.mapAccum(lines, { old: 1, new: 1 }, (numbers, { kind, text }) => __foldkitBrandViewResult((numberLine(numbers, kind, text)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~9"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~8"), ([, numbered]) => __foldkitBrandViewResult((numbered), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#diffLinesOf");
-/** Whether anything changed. */
-export const hasChanges = (lines) => __foldkitBrandViewResult((Array.some(lines, ({ kind }) => __foldkitBrandViewResult((kind !== "Same"), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~11"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#hasChanges");
+}), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~8")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~7")), (lines) => __foldkitBrandViewResult((Array.mapAccum(lines, { old: 1, new: 1 }, (numbers, { kind, text }) => __foldkitBrandViewResult((numberLine(numbers, kind, text)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~9"), ([, rows]) => __foldkitBrandViewResult((rows), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~11"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#diffRowsOf");
+/** Whether a line was added or removed. */
+export const hasChanges = (rows) => __foldkitBrandViewResult((Array.some(rows, (row) => __foldkitBrandViewResult((row._tag === "Added" || row._tag === "Removed"), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~12"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#hasChanges");
+const LINE_KIND_BY_PREFIX = {
+    " ": "Same",
+    "+": "Added",
+    "-": "Removed",
+};
+// a blank context line that lost its leading space on the way (a trimming editor, a mail) is
+// still a context line
+const kindOf = (line) => __foldkitBrandViewResult((line === "" ? Option.some("Same") : Option.fromUndefinedOr(LINE_KIND_BY_PREFIX[line.charAt(0)])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#kindOf");
+const readHunk = ({ rows, numbers }, hunk) => {
+    const gap = hunk.oldStart - numbers.old;
+    const gapRows = gap > 0 ? [DiffRow.Fold({ count: gap, firstOldNumber: numbers.old })] : [];
+    return __foldkitBrandViewResult((Array.reduce(hunk.lines, { rows: [...rows, ...gapRows], numbers: { old: hunk.oldStart, new: hunk.newStart } }, (state, line) => 
+    // "" starts with a "\", a prefix that draws no row
+    __foldkitBrandViewResult((Option.match(kindOf(line), {
+        onNone: () => __foldkitBrandViewResult((state), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onNone"),
+        onSome: (kind) => {
+            const [nextNumbers, row] = numberLine(state.numbers, kind, line.slice(1));
+            return __foldkitBrandViewResult(({ rows: [...state.rows, row], numbers: nextNumbers }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onSome");
+        },
+    })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~13"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#readHunk");
+};
+const onlyHunksOf = (files) => __foldkitBrandViewResult((Array.match(files, {
+    onEmpty: () => __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onEmpty"),
+    onNonEmpty: ([file, ...others]) => __foldkitBrandViewResult((Array.isArrayEmpty(others) && Array.isArrayNonEmpty(file.hunks)
+        ? Option.some(file.hunks)
+        : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onNonEmpty"),
+})), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onlyHunksOf");
+/** The rows of one file's unified diff, numbered from its hunks' headers, with the unchanged
+ *  lines between hunks folded into a count. `None` unless it is one file with a hunk: text that
+ *  is not a diff, a binary change and several files have no lines to show. */
+export const diffRowsOfPatch = (patch) => __foldkitBrandViewResult((pipe(Option.liftThrowable(parsePatch)(patch.replaceAll("\r\n", "\n")), Option.flatMap(onlyHunksOf), Option.map((hunks) => __foldkitBrandViewResult((Array.reduce(hunks, { rows: [], numbers: { old: 1, new: 1 } }, readHunk).rows), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~14")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#diffRowsOfPatch");
 // a run of one stays a line: a row that says "1 unchanged line" takes the same room as the line
 const foldRow = (run) => __foldkitBrandViewResult((run.length === 1
-    ? DiffRow.Line({ line: Array.headNonEmpty(run) })
-    : DiffRow.Fold({ count: run.length, firstLine: Array.headNonEmpty(run) })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#foldRow");
+    ? Array.headNonEmpty(run)
+    : DiffRow.Fold({ count: run.length, firstOldNumber: Array.headNonEmpty(run).oldNumber })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#foldRow");
 const flushFold = ({ rows, folded }) => __foldkitBrandViewResult((Array.match(folded, {
-    onEmpty: () => __foldkitBrandViewResult((rows), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onEmpty"),
-    onNonEmpty: (run) => __foldkitBrandViewResult(([...rows, foldRow(run)]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onNonEmpty"),
+    onEmpty: () => __foldkitBrandViewResult((rows), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onEmpty~2"),
+    onNonEmpty: (run) => __foldkitBrandViewResult(([...rows, foldRow(run)]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#onNonEmpty~2"),
 })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#flushFold");
 /** The diff's rows: every change with `context` unchanged lines around it, and each longer
  *  run of unchanged lines folded into one row that counts them (a run of one stays a line). */
-export const foldUnchanged = (lines, context) => {
-    const isKept = (index) => __foldkitBrandViewResult((hasChanges(lines.slice(Math.max(0, index - context), index + context + 1))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#isKept");
-    return __foldkitBrandViewResult((flushFold(Array.reduce(lines, { rows: [], folded: [] }, (state, line, index) => __foldkitBrandViewResult((isKept(index)
-        ? { rows: [...flushFold(state), DiffRow.Line({ line })], folded: [] }
-        : { rows: state.rows, folded: [...state.folded, line] }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#foldUnchanged");
+export const foldUnchanged = (rows, context) => {
+    const isKept = (index) => __foldkitBrandViewResult((hasChanges(rows.slice(Math.max(0, index - context), index + context + 1))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#isKept");
+    return __foldkitBrandViewResult((flushFold(Array.reduce(rows, { rows: [], folded: [] }, (state, row, index) => __foldkitBrandViewResult((row._tag === "Same" && !isKept(index)
+        ? { rows: state.rows, folded: [...state.folded, row] }
+        : { rows: [...flushFold(state), row], folded: [] }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/diff.js#foldUnchanged");
 };

package/dist/src/lineDiff/index.d.ts

@@ -1,3 +1,3 @@
-export { view } from "./lineDiff.ts";
-export type { ViewConfig } from "./lineDiff.ts";
+export { patchView, view } from "./lineDiff.ts";
+export type { PatchViewConfig, ViewConfig } from "./lineDiff.ts";
 //# sourceMappingURL=index.d.ts.map

package/dist/src/lineDiff/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,eAAe,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC"}

package/dist/src/lineDiff/index.js

@@ -1 +1 @@
-export { view } from "./lineDiff.js";
+export { patchView, view } from "./lineDiff.js";