@gjermundgaraba-designs/pixel-paper 0.11.0 → 0.12.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.
@@ -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.
@@ -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 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.
 
-**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";

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

@@ -9,8 +9,22 @@ export type ViewConfig = Readonly<{
      *  default. */
     context?: number;
 }>;
+/** Configuration for rendering a unified diff with `patchView`. */
+export type PatchViewConfig = Readonly<{
+    /** One file's unified diff, as `diff -u` or `git diff -- <path>` writes it. */
+    patch: string;
+    /** Names the two sides for screen readers: `"Version 3 against version 4"`. */
+    label: string;
+}>;
 /** A line diff as a ruled table: the old and new numbers, a sign, the line. Added lines sit on
  *  the head tint behind an ink +; removed lines go muted behind a red −, and each sign is
  *  named for screen readers. Two texts that are the same say so in a sentence. */
 export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;
+/** A unified diff the caller already has (from a server, or `git diff -- <path>`) as `view`'s
+ *  table: its hunks' lines, numbered from their headers, and the unchanged lines between hunks
+ *  folded into a counted row. Lines past the last hunk are not in the patch, so nothing counts
+ *  them. An empty patch says there is no difference, as `view` does; anything but one file
+ *  with a hunk (text that is not a diff, a binary change, several files) says it cannot be
+ *  shown as lines. */
+export declare const patchView: <Message>(config: PatchViewConfig, h: HtmlBuilder<Message>) => Html;
 //# sourceMappingURL=lineDiff.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"lineDiff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/lineDiff.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiBtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd;mBACe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AA0CH;;kFAEkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsB3E,CAAC"}
+{"version":3,"file":"lineDiff.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/lineDiff.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAiBtD,2DAA2D;AAC3D,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd;mBACe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,mEAAmE;AACnE,MAAM,MAAM,eAAe,GAAG,QAAQ,CAAC;IACrC,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AA2EH;;kFAEkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAO3E,CAAC;AAEF;;;;;sBAKsB;AACtB,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,eAAe,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAWrF,CAAC"}