@gjermundgaraba-designs/pixel-paper 0.20.1 → 0.21.0

package/DESIGN.md

@@ -1057,7 +1057,7 @@ The printed button: a paper rectangle in a 2px ink frame that casts a 3px shadow
 - **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 the `Announcer.Announce` 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 > 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 or a reel, 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`, its left trimmed to 3px under a `lead`), centred, with an optional `lead` (`span.panel-lead`, a quiet IconButton: a Reel's grip), 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.
+- **Window** → `section.panel.window (.flush) > header.panel-tb + div.window-body + div.panel-foot`: a Panel for a stage or a reel, 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`, its left trimmed to 3px under a `lead`), centred, with an optional `lead` (`span.panel-lead`, a quiet IconButton: a Reel's grip), 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. Tools a child Submodel hands back come as one element, `span.window-tools`, which is no box of its own (`display: contents`), so its buttons sit in the bar as the others do. 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. It is not the page's live region (the Announcer's).
 - **Remote** → spread where content goes: data that loads, in each of Foldkit's `AsyncData` states, with the retry built in, so a failure is never shown without its way back. A Loading line (`loading <label>`) leads in every state, in place, so its status is heard, and holds its words only while the first load runs: a refresh over data already shown is quiet, so a page that polls is not heard each time. Retry takes its button away with the notice, so the update returns focus to the line (its `id`) with the retry, where a first load is heard. A failure with nothing to show is an error Notice titled "<Label> not loaded", the reason (`toErrorText`) under it and a small "retry" button (`onRetry`); a refresh that failed over data already shown (stale) is a warn Notice titled "<Label> not refreshed" with the same reason and retry, above the last data; loaded and refreshing data is the caller's `toDataView` alone, an EmptyState for none included.
 - **Disclosure** (a View over `@foldkit/ui`'s Disclosure; the caller keeps whether it is open) → `div.disclosure > button.disclosure-summary[aria-expanded] + div.disclosure-body`. The summary is a control-register line (`3px 0`) of a 12px `caret-right` glyph, `span.disclosure-label` (a dotted underline on hover) and an optional `span.meta` pushed right; open, the caret turns a quarter in one step (a right angle keeps the grid). The body hangs from the caret on a 1px Rule Grey guide, its content level with the summary's words (`margin-left: 5px`, `padding-left: 14px`), in a 14px grid. For what a reader opens on purpose (grants to edit, details, a danger zone), never to hide the one thing the screen is for.
@@ -1130,7 +1130,7 @@ Focus is the reel's: one pane is focused (`.focused`, its window on the 8px card
 
 ### Inputs / Fields
 
-- **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.
+- **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. A field whose place says what it is (a browser's address bar) hides its label (`label.sr-only`), which still names the input. **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.
 - **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.
@@ -1164,7 +1164,7 @@ Focus is the reel's: one pane is focused (`.focused`, its window on the 8px card
 - **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.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.
+- **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. What git's header says prints as one note line, above the table or in its place: a rename (its path unquoted), a mode change, a new or deleted empty file, a binary change; a file whose type changed (a file that became a symlink) is one note over a table for each side, named for its side, the note and tables in a `div.stack.gap-s`. A lone table or note is drawn bare, so a flush window's body still meets it. Text that is not a diff, or holds several files, prints a note line that says it cannot be shown as lines. `LineDiff.describePatch` gives the notes, for a caller that prints them itself.
 
 ### Meters and cells
 

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

@@ -24,6 +24,9 @@ export type ViewConfig<Message> = Readonly<{
     isBoxed?: boolean;
     /** Code and identifiers: the system monospace. */
     isMono?: boolean;
+    /** The label is for screen readers only (`.sr-only`): a field whose place says what it is,
+     *  such as a browser's address bar. It still names the input. */
+    isLabelHidden?: boolean;
     /** The input's type (`"date"` for the browser's date control, always boxed); text when not
      *  given. */
     type?: string;

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,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"}
+{"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;qEACiE;IACjE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;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,IA6CpF,CAAC"}

package/dist/src/field/field.js

@@ -15,7 +15,7 @@ export const describedByError = (id, error, hasHelp, h) => __foldkitBrandViewRes
  *  `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, error, isRequired = false, isBoxed = false, isMono = false, type, inputAttributes = [], } = config;
+    const { id, label, value, onInput, help, error, isRequired = false, isBoxed = false, isMono = false, isLabelHidden = false, type, inputAttributes = [], } = config;
     return __foldkitBrandViewResult((UiInput.view({
         id,
         value,
@@ -24,7 +24,7 @@ export const view = (config, h) => {
         ...(type !== undefined && { type }),
         hasDescription: help !== undefined,
         toView: (groups) => __foldkitBrandViewResult((h.div([h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)], [
-            h.label(groups.label, [label]),
+            h.label([...groups.label, ...(isLabelHidden ? [h.Class("sr-only")] : [])], [label]),
             // NOTE: @foldkit/ui gap: Input has no required option, so the wrapper says it.
             h.input([
                 ...inputAttributes,

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

@@ -1,3 +1,5 @@
 export { patchView, view } from "./lineDiff.ts";
 export type { PatchViewConfig, ViewConfig } from "./lineDiff.ts";
+export { describePatch } from "./patch.ts";
+export type { PatchDescription } from "./patch.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,SAAS,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,eAAe,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;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,YAAY,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/lineDiff/index.js

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

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

@@ -11,7 +11,8 @@ export type ViewConfig = Readonly<{
 }>;
 /** 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. */
+    /** One file's unified diff, as `diff -u` or `git diff -- <path>` writes it, its git header
+     *  included. */
     patch: string;
     /** Names the two sides for screen readers: `"Version 3 against version 4"`. */
     label: string;
@@ -23,8 +24,11 @@ export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>
 /** 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. */
+ *  them. What git's header says beyond the lines prints as a note line above the table, or in
+ *  its place: a rename, a mode change, an empty or binary file (`describePatch` has the
+ *  sentences). A file whose type changed (a file that became a symlink) is two sections, each
+ *  its own table under one note, named for its side (`"<label>, as it was"`). An empty patch
+ *  says there is no difference, as `view` does; text that is not a diff, or holds 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;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"}
+{"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;AAWtD,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;oBACgB;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAyEH;;kFAEkF;AAClF,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAO3E,CAAC;AAEF;;;;;;;;+CAQ+C;AAC/C,eAAO,MAAM,SAAS,GAAI,OAAO,UAAU,eAAe,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoBrF,CAAC"}

package/dist/src/lineDiff/lineDiff.js

@@ -1,7 +1,8 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
-import { Array, Option, String } from "effect";
+import { Array, Option } from "effect";
 import { LOCALE } from "../locale/locale.js";
-import { DiffRow, diffRowsOf, diffRowsOfPatch, foldUnchanged, hasChanges, } from "./diff.js";
+import { DiffRow, diffRowsOf, foldUnchanged, hasChanges } from "./diff.js";
+import { SAME_NOTE, readPatch } from "./patch.js";
 // VIEW
 const DEFAULT_CONTEXT = 2;
 const COLUMN_COUNT = 4;
@@ -29,7 +30,6 @@ const rowView = (row, h) => __foldkitBrandViewResult((DiffRow.match(row, {
     Fold: ({ count, firstOldNumber }) => __foldkitBrandViewResult((foldView(count, firstOldNumber, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#Fold"),
 })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#rowView");
 const noteView = (note, h) => __foldkitBrandViewResult((h.p([h.Class("note-line")], [note])), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#noteView");
-const SAME_NOTE = "No difference: both sides hold the same text.";
 const tableView = (rows, label, h) => __foldkitBrandViewResult((h.div([h.Class("diff-wrap")], [
     h.table([h.AriaLabel(label), h.Class("diff")], [
         h.tbody([], Array.map(rows, (row) => __foldkitBrandViewResult((rowView(row, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#anonymous"))),
@@ -48,18 +48,22 @@ export const view = (config, h) => {
 /** 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. */
+ *  them. What git's header says beyond the lines prints as a note line above the table, or in
+ *  its place: a rename, a mode change, an empty or binary file (`describePatch` has the
+ *  sentences). A file whose type changed (a file that became a symlink) is two sections, each
+ *  its own table under one note, named for its side (`"<label>, as it was"`). An empty patch
+ *  says there is no difference, as `view` does; text that is not a diff, or holds several
+ *  files, says it cannot be shown as lines. */
 export const patchView = (config, h) => {
     const { patch, label } = config;
-    if (String.isEmpty(String.trim(patch))) {
-        return __foldkitBrandViewResult((noteView(SAME_NOTE, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#patchView");
-    }
-    else {
-        return __foldkitBrandViewResult((Option.match(diffRowsOfPatch(patch), {
-            onNone: () => __foldkitBrandViewResult((noteView("This diff cannot be shown as lines.", h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onNone"),
-            onSome: (rows) => __foldkitBrandViewResult((tableView(rows, label, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onSome"),
-        })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#patchView");
-    }
+    const { notes, tables } = readPatch(patch);
+    const parts = [
+        ...(Array.isReadonlyArrayNonEmpty(notes) ? [noteView(Array.join(notes, " "), h)] : []),
+        ...Array.map(tables, ({ rows, maybeSide }) => __foldkitBrandViewResult((tableView(rows, Option.match(maybeSide, { onNone: () => __foldkitBrandViewResult((label), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onNone"), onSome: (side) => __foldkitBrandViewResult((`${label}, ${side}`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onSome") }), h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#anonymous~2")),
+    ];
+    // a lone table or note is drawn bare, so a flush window's body still meets its table
+    return __foldkitBrandViewResult((Array.match(parts, {
+        onEmpty: () => __foldkitBrandViewResult((noteView(SAME_NOTE, h)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onEmpty"),
+        onNonEmpty: ([part, ...others]) => __foldkitBrandViewResult((Array.isArrayEmpty(others) ? part : h.div([h.Class("stack gap-s")], parts)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#onNonEmpty"),
+    })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/lineDiff.js#patchView");
 };

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

@@ -0,0 +1,35 @@
+import { Option } from "effect";
+import { type DiffRow } from "./diff.ts";
+/** The name a path in git's header stands for: git C-quotes a name with unusual bytes
+ *  (`"caf\303\251.txt"`), and leaves any other as it is. */
+export declare const unquoted: (path: string) => string;
+/** What a diff of two same texts says. */
+export declare const SAME_NOTE = "No difference: both sides hold the same text.";
+/** A table of the patch's lines; `maybeSide` says which side of a type change it is. */
+type Table = Readonly<{
+    rows: ReadonlyArray<DiffRow>;
+    maybeSide: Option.Option<string>;
+}>;
+/** What `patchView` draws: its notes as a line, then its tables. */
+export type PatchReading = Readonly<{
+    maybeRenamedFrom: Option.Option<string>;
+    notes: ReadonlyArray<string>;
+    tables: ReadonlyArray<Table>;
+}>;
+/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
+export declare const readPatch: (patch: string) => PatchReading;
+/** What a patch says beyond its lines, as `patchView` prints it. */
+export type PatchDescription = Readonly<{
+    /** The path a rename left, unquoted: for a heading such as `old.txt → new.txt`. */
+    maybeRenamedFrom: Option.Option<string>;
+    /** The sentences `patchView` prints above the patch's lines, or in their place: a rename,
+     *  a mode change, a type change, an empty or binary file, no difference, or a patch it
+     *  cannot show as lines. */
+    notes: ReadonlyArray<string>;
+}>;
+/** What `patchView` says about a patch from `git diff`, read from its header: the notes it
+ *  prints (`["Renamed from old.txt."]`), for a caller that prints them itself, and the path a
+ *  rename left. */
+export declare const describePatch: (patch: string) => PatchDescription;
+export {};
+//# sourceMappingURL=patch.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"patch.d.ts","sourceRoot":"","sources":["../../../src/lineDiff/patch.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAErD,OAAO,EAAE,KAAK,OAAO,EAAmB,MAAM,WAAW,CAAC;AAgC1D;4DAC4D;AAC5D,eAAO,MAAM,QAAQ,SAAU,MAAM,KAAG,MAO9B,CAAC;AAsCX,0CAA0C;AAC1C,eAAO,MAAM,SAAS,kDAAkD,CAAC;AAIzE,wFAAwF;AACxF,KAAK,KAAK,GAAG,QAAQ,CAAC;IAAE,IAAI,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAAC,SAAS,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAA;CAAE,CAAC,CAAC;AAE1F,oEAAoE;AACpE,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC;IAClC,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC7B,MAAM,EAAE,aAAa,CAAC,KAAK,CAAC,CAAC;CAC9B,CAAC,CAAC;AAoFH,sFAAsF;AACtF,eAAO,MAAM,SAAS,UAAW,MAAM,KAAG,YAiBzC,CAAC;AAIF,oEAAoE;AACpE,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CAAC;IACtC,mFAAmF;IACnF,gBAAgB,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IACxC;;gCAE4B;IAC5B,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;CAC9B,CAAC,CAAC;AAEH;;mBAEmB;AACnB,eAAO,MAAM,aAAa,UAAW,MAAM,KAAG,gBAI7C,CAAC"}

package/dist/src/lineDiff/patch.js

@@ -0,0 +1,146 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Array, Option, String, pipe } from "effect";
+import { diffRowsOfPatch } from "./diff.js";
+// QUOTED PATHS
+const ESCAPED_BYTES = {
+    a: 7,
+    b: 8,
+    t: 9,
+    n: 10,
+    v: 11,
+    f: 12,
+    r: 13,
+};
+// an octal escape is one byte of the name's UTF-8, so the bytes are gathered before decoding
+const QUOTED_PART = /\\([0-7]{3})|\\(.)|[^\\]+/gu;
+const bytesOf = (text) => __foldkitBrandViewResult(([...new TextEncoder().encode(text)]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#bytesOf");
+const bytesOfPart = ([part, octal, escaped]) => {
+    if (octal !== undefined) {
+        return __foldkitBrandViewResult(([Number.parseInt(octal, 8)]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#bytesOfPart");
+    }
+    else if (escaped !== undefined) {
+        return __foldkitBrandViewResult((Option.match(Option.fromUndefinedOr(ESCAPED_BYTES[escaped]), {
+            onNone: () => __foldkitBrandViewResult((bytesOf(escaped)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#onNone"),
+            onSome: (byte) => __foldkitBrandViewResult(([byte]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#onSome"),
+        })), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#bytesOfPart");
+    }
+    else {
+        return __foldkitBrandViewResult((bytesOf(part)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#bytesOfPart");
+    }
+};
+/** The name a path in git's header stands for: git C-quotes a name with unusual bytes
+ *  (`"caf\303\251.txt"`), and leaves any other as it is. */
+export const unquoted = (path) => __foldkitBrandViewResult((path.length >= 2 && path.startsWith('"') && path.endsWith('"')
+    ? new TextDecoder().decode(Uint8Array.from(Array.flatMap(Array.fromIterable(path.slice(1, -1).matchAll(QUOTED_PART)), bytesOfPart)))
+    : path), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#unquoted");
+// HEADER
+const GIT_SECTION = "diff --git ";
+// the header is what comes before the first hunk, so a changed line that reads like a header
+// line ("+rename from x") is never taken for one
+const headOf = (section) => __foldkitBrandViewResult((Array.takeWhile(section.split("\n"), (line) => __foldkitBrandViewResult((!line.startsWith("@@") && !line.startsWith("--- ")), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#headOf");
+const valueAfter = (head, prefix) => __foldkitBrandViewResult((pipe(Array.findFirst(head, String.startsWith(prefix)), Option.map((line) => __foldkitBrandViewResult((line.slice(prefix.length)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~2")))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#valueAfter");
+const hasLine = (head, prefix) => __foldkitBrandViewResult((Option.isSome(valueAfter(head, prefix))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#hasLine");
+const hasHunk = (section) => __foldkitBrandViewResult((Array.some(section.split("\n"), String.startsWith("@@ "))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#hasHunk");
+// git writes one section per file, after whatever precedes the first (a commit's message, a
+// mail's head); a patch without a git header is one section
+const sectionsOf = (patch) => {
+    const [first = "", ...others] = patch.split(/(?=^diff --git )/mu);
+    return __foldkitBrandViewResult((Array.isArrayNonEmpty(others) && !first.startsWith(GIT_SECTION)
+        ? others
+        : [first, ...others]), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#sectionsOf");
+};
+// READING
+/** What a diff of two same texts says. */
+export const SAME_NOTE = "No difference: both sides hold the same text.";
+const UNREADABLE_NOTE = "This diff cannot be shown as lines.";
+const BINARY_NOTE = "A binary file: its change has no lines.";
+const unreadable = {
+    maybeRenamedFrom: Option.none(),
+    notes: [UNREADABLE_NOTE],
+    tables: [],
+};
+const lineNote = (head, hasRows) => {
+    if (hasLine(head, "Binary files ") || hasLine(head, "GIT binary patch")) {
+        return __foldkitBrandViewResult((Option.some(BINARY_NOTE)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#lineNote");
+    }
+    else if (hasRows) {
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#lineNote");
+    }
+    else if (hasLine(head, "new file mode ")) {
+        return __foldkitBrandViewResult((Option.some("New empty file.")), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#lineNote");
+    }
+    else if (hasLine(head, "deleted file mode ")) {
+        return __foldkitBrandViewResult((Option.some("Deleted empty file.")), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#lineNote");
+    }
+    else {
+        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#lineNote");
+    }
+};
+const readSection = (section) => {
+    const head = headOf(section);
+    const maybeRows = diffRowsOfPatch(section);
+    const maybeRenamedFrom = Option.map(valueAfter(head, "rename from "), unquoted);
+    const notes = [
+        ...Option.toArray(Option.map(maybeRenamedFrom, (from) => __foldkitBrandViewResult((`Renamed from ${from}.`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~3"))),
+        ...Option.toArray(Option.map(Option.all({ before: valueAfter(head, "old mode "), after: valueAfter(head, "new mode ") }), ({ before, after }) => __foldkitBrandViewResult((`Mode ${before} → ${after}.`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~4"))),
+        ...Option.toArray(lineNote(head, Option.isSome(maybeRows))),
+    ];
+    const isUnread = Option.isNone(maybeRows) && (hasHunk(section) || Array.isArrayEmpty(notes));
+    return __foldkitBrandViewResult((isUnread
+        ? unreadable
+        : {
+            maybeRenamedFrom,
+            notes,
+            tables: Option.toArray(Option.map(maybeRows, (rows) => (__foldkitBrandViewResult(({ rows, maybeSide: Option.none() }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~5")))),
+        }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readSection");
+};
+const KINDS = {
+    "100644": "a file",
+    "100755": "an executable file",
+    "120000": "a symlink",
+    "160000": "a submodule",
+};
+const kindOf = (mode) => __foldkitBrandViewResult((KINDS[mode] ?? `mode ${mode}`), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#kindOf");
+const sideTable = (section, side) => __foldkitBrandViewResult((Option.toArray(Option.map(diffRowsOfPatch(section), (rows) => (__foldkitBrandViewResult(({ rows, maybeSide: Option.some(side) }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~6"))))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#sideTable");
+// a file that became a symlink (or any other kind) is two sections for one path: the old
+// kind deleted, then the new one added
+const readTypeChange = (gone, added) => {
+    const [goneHead, addedHead] = [headOf(gone), headOf(added)];
+    return __foldkitBrandViewResult((Option.flatMap(Option.all({
+        before: valueAfter(goneHead, "deleted file mode "),
+        after: valueAfter(addedHead, "new file mode "),
+    }), ({ before, after }) => __foldkitBrandViewResult((goneHead[0] === addedHead[0]
+        ? Option.some({
+            maybeRenamedFrom: Option.none(),
+            notes: [`It was ${kindOf(before)} and is now ${kindOf(after)}.`],
+            tables: [...sideTable(gone, "as it was"), ...sideTable(added, "as it is")],
+        })
+        : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~7"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readTypeChange");
+};
+/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
+export const readPatch = (patch) => {
+    const text = patch.replaceAll("\r\n", "\n");
+    if (String.isEmpty(String.trim(text))) {
+        return __foldkitBrandViewResult(({ maybeRenamedFrom: Option.none(), notes: [SAME_NOTE], tables: [] }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readPatch");
+    }
+    else {
+        const sections = sectionsOf(text);
+        const [first, second, ...rest] = sections;
+        if (first !== undefined && second === undefined) {
+            return __foldkitBrandViewResult((readSection(first)), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readPatch");
+        }
+        else if (first !== undefined && second !== undefined && Array.isArrayEmpty(rest)) {
+            return __foldkitBrandViewResult((Option.getOrElse(readTypeChange(first, second), () => __foldkitBrandViewResult((unreadable), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#anonymous~8"))), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readPatch");
+        }
+        else {
+            return __foldkitBrandViewResult((unreadable), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#readPatch");
+        }
+    }
+};
+/** What `patchView` says about a patch from `git diff`, read from its header: the notes it
+ *  prints (`["Renamed from old.txt."]`), for a caller that prints them itself, and the path a
+ *  rename left. */
+export const describePatch = (patch) => {
+    const { maybeRenamedFrom, notes } = readPatch(patch);
+    return __foldkitBrandViewResult(({ maybeRenamedFrom, notes }), "@gjermundgaraba-designs/pixel-paper/src/lineDiff/patch.js#describePatch");
+};

package/dist/src/menu/menu.d.ts

@@ -76,6 +76,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     };
     commands?: Update.Commands<{
         readonly _tag: "CompletedFocus";
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "ClickedToggle";
     } | {
@@ -84,8 +86,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         readonly _tag: "CompletedPlaceSlip";
     } | {
         readonly _tag: "LeftSlip";
-    } | {
-        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedTab";
     } | {
@@ -125,11 +125,11 @@ export declare const BindSlip: Mount.MountDefinitionWithArgs<"BindSlip", {
     isEnd: Schema.Boolean;
     edge: Schema.Literals<readonly ["First", "Last"]>;
 }, {
+    readonly _tag: "PressedEscape";
+} | {
     readonly _tag: "CompletedPlaceSlip";
 } | {
     readonly _tag: "LeftSlip";
-} | {
-    readonly _tag: "PressedEscape";
 } | {
     readonly _tag: "PressedTab";
 }>;
@@ -175,6 +175,8 @@ export declare const view: import("foldkit/submodel").View<{
     readonly edge: "First" | "Last";
 }, {
     readonly _tag: "CompletedFocus";
+} | {
+    readonly _tag: "PressedEscape";
 } | {
     readonly _tag: "ClickedToggle";
 } | {
@@ -183,8 +185,6 @@ export declare const view: import("foldkit/submodel").View<{
     readonly _tag: "CompletedPlaceSlip";
 } | {
     readonly _tag: "LeftSlip";
-} | {
-    readonly _tag: "PressedEscape";
 } | {
     readonly _tag: "PressedTab";
 } | {

package/dist/src/sortable/sortable.d.ts

@@ -245,8 +245,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         }>;
     };
     commands?: Update.Commands<{
-        readonly _tag: "PressedEscape";
-    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -255,9 +253,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -284,6 +279,9 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly containerId: string;
                 readonly index: number;
             }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -301,6 +299,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -413,8 +413,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
-        readonly _tag: "PressedEscape";
-    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -423,9 +421,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -452,6 +447,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -469,6 +467,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -559,8 +559,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
-        readonly _tag: "PressedEscape";
-    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -569,9 +567,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -598,6 +593,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -615,6 +613,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -710,8 +710,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
-        readonly _tag: "PressedEscape";
-    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -720,9 +718,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -749,6 +744,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -766,6 +764,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -857,8 +857,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
             }>;
         }>;
     }, {
-        readonly _tag: "PressedEscape";
-    } | {
         readonly _tag: "CancelledPointer";
     } | {
         readonly _tag: "CompletedAnnounceReorder";
@@ -867,9 +865,6 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
     } | {
         readonly _tag: "GotDragAndDropMessage";
         readonly message: {
-            readonly _tag: "PressedArrowKey";
-            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-        } | {
             readonly _tag: "ActivatedKeyboardDrag";
             readonly itemId: string;
             readonly containerId: string;
@@ -896,6 +891,9 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
                 readonly containerId: string;
                 readonly index: number;
             }>;
+        } | {
+            readonly _tag: "PressedArrowKey";
+            readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
         } | {
             readonly _tag: "PressedDraggable";
             readonly itemId: string;
@@ -913,6 +911,8 @@ export declare const subscriptions: <Prefix extends string>(keyPrefix: Prefix) =
         readonly clientX: number;
         readonly clientY: number;
         readonly maybeIndex: Option.Option<number>;
+    } | {
+        readonly _tag: "PressedEscape";
     } | {
         readonly _tag: "PressedGripKey";
         readonly itemId: string;
@@ -1055,8 +1055,6 @@ export declare const view: import("foldkit/submodel").View<{
         }>;
     }>;
 }, {
-    readonly _tag: "PressedEscape";
-} | {
     readonly _tag: "CancelledPointer";
 } | {
     readonly _tag: "CompletedAnnounceReorder";
@@ -1065,9 +1063,6 @@ export declare const view: import("foldkit/submodel").View<{
 } | {
     readonly _tag: "GotDragAndDropMessage";
     readonly message: {
-        readonly _tag: "PressedArrowKey";
-        readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
-    } | {
         readonly _tag: "ActivatedKeyboardDrag";
         readonly itemId: string;
         readonly containerId: string;
@@ -1094,6 +1089,9 @@ export declare const view: import("foldkit/submodel").View<{
             readonly containerId: string;
             readonly index: number;
         }>;
+    } | {
+        readonly _tag: "PressedArrowKey";
+        readonly direction: "Down" | "Left" | "NextContainer" | "PreviousContainer" | "Right" | "Up";
     } | {
         readonly _tag: "PressedDraggable";
         readonly itemId: string;
@@ -1111,6 +1109,8 @@ export declare const view: import("foldkit/submodel").View<{
     readonly clientX: number;
     readonly clientY: number;
     readonly maybeIndex: Option.Option<number>;
+} | {
+    readonly _tag: "PressedEscape";
 } | {
     readonly _tag: "PressedGripKey";
     readonly itemId: string;

package/dist/src/toast/toast.d.ts

@@ -326,6 +326,8 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                 readonly pendingDismissVersion: number;
                 readonly isHovered: boolean;
                 readonly swipeState: {
+                    readonly _tag: "Idle";
+                } | {
                     readonly _tag: "Dismissing";
                     readonly offsetX: number;
                     readonly direction: "Left" | "Right";
@@ -334,8 +336,6 @@ export declare const update: (model: Model, message: Message) => Readonly<{
                     readonly pointerId: number;
                     readonly startX: number;
                     readonly currentX: number;
-                } | {
-                    readonly _tag: "Idle";
                 } | {
                     readonly _tag: "Settling";
                     readonly offsetX: number;
@@ -371,15 +371,15 @@ export declare const update: (model: Model, message: Message) => Readonly<{
             readonly _tag: "GotAnimationMessage";
             readonly entryId: string;
             readonly message: {
+                readonly _tag: "Hid";
+            } | {
+                readonly _tag: "Showed";
+            } | {
                 readonly _tag: "CompletedWaitForPaint";
                 readonly generation: number;
             } | {
                 readonly _tag: "EndedAnimation";
                 readonly generation: number;
-            } | {
-                readonly _tag: "Hid";
-            } | {
-                readonly _tag: "Showed";
             };
         } | {
             readonly _tag: "HoveredEntry";
@@ -557,6 +557,8 @@ export declare const view: import("foldkit/submodel").View<{
             readonly pendingDismissVersion: number;
             readonly isHovered: boolean;
             readonly swipeState: {
+                readonly _tag: "Idle";
+            } | {
                 readonly _tag: "Dismissing";
                 readonly offsetX: number;
                 readonly direction: "Left" | "Right";
@@ -565,8 +567,6 @@ export declare const view: import("foldkit/submodel").View<{
                 readonly pointerId: number;
                 readonly startX: number;
                 readonly currentX: number;
-            } | {
-                readonly _tag: "Idle";
             } | {
                 readonly _tag: "Settling";
                 readonly offsetX: number;
@@ -602,15 +602,15 @@ export declare const view: import("foldkit/submodel").View<{
         readonly _tag: "GotAnimationMessage";
         readonly entryId: string;
         readonly message: {
+            readonly _tag: "Hid";
+        } | {
+            readonly _tag: "Showed";
+        } | {
             readonly _tag: "CompletedWaitForPaint";
             readonly generation: number;
         } | {
             readonly _tag: "EndedAnimation";
             readonly generation: number;
-        } | {
-            readonly _tag: "Hid";
-        } | {
-            readonly _tag: "Showed";
         };
     } | {
         readonly _tag: "HoveredEntry";

package/dist/src/window/window.d.ts

@@ -12,7 +12,9 @@ export type ViewConfig<Message> = Readonly<{
     glyph?: GlyphName;
     /** A chip in the title bar: its state. */
     status?: ReadonlyArray<Html | string>;
-    /** IconButtons in the title bar, before the close. */
+    /** IconButtons in the title bar, before the close. A child Submodel, whose view is one
+     *  `Html`, hands back several in a `span.window-tools`: it is no box of its own
+     *  (`display: contents`), so its buttons sit in the bar as the others do. */
     tools?: ReadonlyArray<Html>;
     /** The close glyph's Message; the glyph prints when it is given. */
     onClose?: Message;

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

@@ -1 +1 @@
-{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC,sDAAsD;IACtD,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsCpF,CAAC"}
+{"version":3,"file":"window.d.ts","sourceRoot":"","sources":["../../../src/window/window.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOpD,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,+DAA+D;IAC/D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACtC;;iFAE6E;IAC7E,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,oEAAoE;IACpE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,iEAAiE;IACjE,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACpC,8DAA8D;IAC9D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC,CAAC;AAEH;;6DAE6D;AAC7D,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,CAAC,OAAO,CAAC,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAsCpF,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.20.1",
+  "version": "0.21.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/field/field.ts

@@ -48,6 +48,9 @@ export type ViewConfig<Message> = Readonly<{
   isBoxed?: boolean;
   /** Code and identifiers: the system monospace. */
   isMono?: boolean;
+  /** The label is for screen readers only (`.sr-only`): a field whose place says what it is,
+   *  such as a browser's address bar. It still names the input. */
+  isLabelHidden?: boolean;
   /** The input's type (`"date"` for the browser's date control, always boxed); text when not
    *  given. */
   type?: string;
@@ -71,6 +74,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
     isRequired = false,
     isBoxed = false,
     isMono = false,
+    isLabelHidden = false,
     type,
     inputAttributes = [],
   } = config;
@@ -87,7 +91,7 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
         h.div(
           [h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)],
           [
-            h.label(groups.label, [label]),
+            h.label([...groups.label, ...(isLabelHidden ? [h.Class("sr-only")] : [])], [label]),
             // NOTE: @foldkit/ui gap: Input has no required option, so the wrapper says it.
             h.input([
               ...inputAttributes,

package/src/lineDiff/index.ts

@@ -1,2 +1,4 @@
 export { patchView, view } from "./lineDiff.ts";
 export type { PatchViewConfig, ViewConfig } from "./lineDiff.ts";
+export { describePatch } from "./patch.ts";
+export type { PatchDescription } from "./patch.ts";

package/src/lineDiff/lineDiff.ts

@@ -1,15 +1,9 @@
-import { Array, Option, String } from "effect";
+import { Array, Option } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import { LOCALE } from "../locale/locale.ts";
-import {
-  DiffRow,
-  type LineKind,
-  diffRowsOf,
-  diffRowsOfPatch,
-  foldUnchanged,
-  hasChanges,
-} from "./diff.ts";
+import { DiffRow, type LineKind, diffRowsOf, foldUnchanged, hasChanges } from "./diff.ts";
+import { SAME_NOTE, readPatch } from "./patch.ts";
 
 // VIEW
 
@@ -29,7 +23,8 @@ export type ViewConfig = Readonly<{
 
 /** 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. */
+  /** One file's unified diff, as `diff -u` or `git diff -- <path>` writes it, its git header
+   *  included. */
   patch: string;
   /** Names the two sides for screen readers: `"Version 3 against version 4"`. */
   label: string;
@@ -86,8 +81,6 @@ const rowView = <Message>(row: DiffRow, h: HtmlBuilder<Message>): Html =>
 const noteView = <Message>(note: string, h: HtmlBuilder<Message>): Html =>
   h.p([h.Class("note-line")], [note]);
 
-const SAME_NOTE = "No difference: both sides hold the same text.";
-
 const tableView = <Message>(
   rows: ReadonlyArray<DiffRow>,
   label: string,
@@ -123,18 +116,30 @@ export 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. */
+ *  them. What git's header says beyond the lines prints as a note line above the table, or in
+ *  its place: a rename, a mode change, an empty or binary file (`describePatch` has the
+ *  sentences). A file whose type changed (a file that became a symlink) is two sections, each
+ *  its own table under one note, named for its side (`"<label>, as it was"`). An empty patch
+ *  says there is no difference, as `view` does; text that is not a diff, or holds several
+ *  files, says it cannot be shown as lines. */
 export const patchView = <Message>(config: PatchViewConfig, h: HtmlBuilder<Message>): Html => {
   const { patch, label } = config;
-
-  if (String.isEmpty(String.trim(patch))) {
-    return noteView(SAME_NOTE, h);
-  } else {
-    return Option.match(diffRowsOfPatch(patch), {
-      onNone: () => noteView("This diff cannot be shown as lines.", h),
-      onSome: (rows) => tableView(rows, label, h),
-    });
-  }
+  const { notes, tables } = readPatch(patch);
+  const parts = [
+    ...(Array.isReadonlyArrayNonEmpty(notes) ? [noteView(Array.join(notes, " "), h)] : []),
+    ...Array.map(tables, ({ rows, maybeSide }) =>
+      tableView(
+        rows,
+        Option.match(maybeSide, { onNone: () => label, onSome: (side) => `${label}, ${side}` }),
+        h,
+      ),
+    ),
+  ];
+
+  // a lone table or note is drawn bare, so a flush window's body still meets its table
+  return Array.match(parts, {
+    onEmpty: () => noteView(SAME_NOTE, h),
+    onNonEmpty: ([part, ...others]) =>
+      Array.isArrayEmpty(others) ? part : h.div([h.Class("stack gap-s")], parts),
+  });
 };

package/src/lineDiff/patch.ts

@@ -0,0 +1,218 @@
+import { Array, Option, String, pipe } from "effect";
+
+import { type DiffRow, diffRowsOfPatch } from "./diff.ts";
+
+// QUOTED PATHS
+
+const ESCAPED_BYTES: Readonly<Record<string, number>> = {
+  a: 7,
+  b: 8,
+  t: 9,
+  n: 10,
+  v: 11,
+  f: 12,
+  r: 13,
+};
+
+// an octal escape is one byte of the name's UTF-8, so the bytes are gathered before decoding
+const QUOTED_PART = /\\([0-7]{3})|\\(.)|[^\\]+/gu;
+
+const bytesOf = (text: string): ReadonlyArray<number> => [...new TextEncoder().encode(text)];
+
+const bytesOfPart = ([part, octal, escaped]: RegExpExecArray): ReadonlyArray<number> => {
+  if (octal !== undefined) {
+    return [Number.parseInt(octal, 8)];
+  } else if (escaped !== undefined) {
+    return Option.match(Option.fromUndefinedOr(ESCAPED_BYTES[escaped]), {
+      onNone: () => bytesOf(escaped),
+      onSome: (byte) => [byte],
+    });
+  } else {
+    return bytesOf(part);
+  }
+};
+
+/** The name a path in git's header stands for: git C-quotes a name with unusual bytes
+ *  (`"caf\303\251.txt"`), and leaves any other as it is. */
+export const unquoted = (path: string): string =>
+  path.length >= 2 && path.startsWith('"') && path.endsWith('"')
+    ? new TextDecoder().decode(
+        Uint8Array.from(
+          Array.flatMap(Array.fromIterable(path.slice(1, -1).matchAll(QUOTED_PART)), bytesOfPart),
+        ),
+      )
+    : path;
+
+// HEADER
+
+const GIT_SECTION = "diff --git ";
+
+// the header is what comes before the first hunk, so a changed line that reads like a header
+// line ("+rename from x") is never taken for one
+const headOf = (section: string): ReadonlyArray<string> =>
+  Array.takeWhile(
+    section.split("\n"),
+    (line) => !line.startsWith("@@") && !line.startsWith("--- "),
+  );
+
+const valueAfter = (head: ReadonlyArray<string>, prefix: string): Option.Option<string> =>
+  pipe(
+    Array.findFirst(head, String.startsWith(prefix)),
+    Option.map((line) => line.slice(prefix.length)),
+  );
+
+const hasLine = (head: ReadonlyArray<string>, prefix: string): boolean =>
+  Option.isSome(valueAfter(head, prefix));
+
+const hasHunk = (section: string): boolean =>
+  Array.some(section.split("\n"), String.startsWith("@@ "));
+
+// git writes one section per file, after whatever precedes the first (a commit's message, a
+// mail's head); a patch without a git header is one section
+const sectionsOf = (patch: string): ReadonlyArray<string> => {
+  const [first = "", ...others] = patch.split(/(?=^diff --git )/mu);
+
+  return Array.isArrayNonEmpty(others) && !first.startsWith(GIT_SECTION)
+    ? others
+    : [first, ...others];
+};
+
+// READING
+
+/** What a diff of two same texts says. */
+export const SAME_NOTE = "No difference: both sides hold the same text.";
+const UNREADABLE_NOTE = "This diff cannot be shown as lines.";
+const BINARY_NOTE = "A binary file: its change has no lines.";
+
+/** A table of the patch's lines; `maybeSide` says which side of a type change it is. */
+type Table = Readonly<{ rows: ReadonlyArray<DiffRow>; maybeSide: Option.Option<string> }>;
+
+/** What `patchView` draws: its notes as a line, then its tables. */
+export type PatchReading = Readonly<{
+  maybeRenamedFrom: Option.Option<string>;
+  notes: ReadonlyArray<string>;
+  tables: ReadonlyArray<Table>;
+}>;
+
+const unreadable: PatchReading = {
+  maybeRenamedFrom: Option.none(),
+  notes: [UNREADABLE_NOTE],
+  tables: [],
+};
+
+const lineNote = (head: ReadonlyArray<string>, hasRows: boolean): Option.Option<string> => {
+  if (hasLine(head, "Binary files ") || hasLine(head, "GIT binary patch")) {
+    return Option.some(BINARY_NOTE);
+  } else if (hasRows) {
+    return Option.none();
+  } else if (hasLine(head, "new file mode ")) {
+    return Option.some("New empty file.");
+  } else if (hasLine(head, "deleted file mode ")) {
+    return Option.some("Deleted empty file.");
+  } else {
+    return Option.none();
+  }
+};
+
+const readSection = (section: string): PatchReading => {
+  const head = headOf(section);
+  const maybeRows = diffRowsOfPatch(section);
+  const maybeRenamedFrom = Option.map(valueAfter(head, "rename from "), unquoted);
+  const notes = [
+    ...Option.toArray(Option.map(maybeRenamedFrom, (from) => `Renamed from ${from}.`)),
+    ...Option.toArray(
+      Option.map(
+        Option.all({ before: valueAfter(head, "old mode "), after: valueAfter(head, "new mode ") }),
+        ({ before, after }) => `Mode ${before} → ${after}.`,
+      ),
+    ),
+    ...Option.toArray(lineNote(head, Option.isSome(maybeRows))),
+  ];
+  const isUnread = Option.isNone(maybeRows) && (hasHunk(section) || Array.isArrayEmpty(notes));
+
+  return isUnread
+    ? unreadable
+    : {
+        maybeRenamedFrom,
+        notes,
+        tables: Option.toArray(
+          Option.map(maybeRows, (rows) => ({ rows, maybeSide: Option.none() })),
+        ),
+      };
+};
+
+const KINDS: Readonly<Record<string, string>> = {
+  "100644": "a file",
+  "100755": "an executable file",
+  "120000": "a symlink",
+  "160000": "a submodule",
+};
+
+const kindOf = (mode: string): string => KINDS[mode] ?? `mode ${mode}`;
+
+const sideTable = (section: string, side: string): ReadonlyArray<Table> =>
+  Option.toArray(
+    Option.map(diffRowsOfPatch(section), (rows) => ({ rows, maybeSide: Option.some(side) })),
+  );
+
+// a file that became a symlink (or any other kind) is two sections for one path: the old
+// kind deleted, then the new one added
+const readTypeChange = (gone: string, added: string): Option.Option<PatchReading> => {
+  const [goneHead, addedHead] = [headOf(gone), headOf(added)];
+
+  return Option.flatMap(
+    Option.all({
+      before: valueAfter(goneHead, "deleted file mode "),
+      after: valueAfter(addedHead, "new file mode "),
+    }),
+    ({ before, after }) =>
+      goneHead[0] === addedHead[0]
+        ? Option.some({
+            maybeRenamedFrom: Option.none(),
+            notes: [`It was ${kindOf(before)} and is now ${kindOf(after)}.`],
+            tables: [...sideTable(gone, "as it was"), ...sideTable(added, "as it is")],
+          })
+        : Option.none(),
+  );
+};
+
+/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
+export const readPatch = (patch: string): PatchReading => {
+  const text = patch.replaceAll("\r\n", "\n");
+
+  if (String.isEmpty(String.trim(text))) {
+    return { maybeRenamedFrom: Option.none(), notes: [SAME_NOTE], tables: [] };
+  } else {
+    const sections = sectionsOf(text);
+    const [first, second, ...rest] = sections;
+
+    if (first !== undefined && second === undefined) {
+      return readSection(first);
+    } else if (first !== undefined && second !== undefined && Array.isArrayEmpty(rest)) {
+      return Option.getOrElse(readTypeChange(first, second), () => unreadable);
+    } else {
+      return unreadable;
+    }
+  }
+};
+
+// DESCRIPTION
+
+/** What a patch says beyond its lines, as `patchView` prints it. */
+export type PatchDescription = Readonly<{
+  /** The path a rename left, unquoted: for a heading such as `old.txt → new.txt`. */
+  maybeRenamedFrom: Option.Option<string>;
+  /** The sentences `patchView` prints above the patch's lines, or in their place: a rename,
+   *  a mode change, a type change, an empty or binary file, no difference, or a patch it
+   *  cannot show as lines. */
+  notes: ReadonlyArray<string>;
+}>;
+
+/** What `patchView` says about a patch from `git diff`, read from its header: the notes it
+ *  prints (`["Renamed from old.txt."]`), for a caller that prints them itself, and the path a
+ *  rename left. */
+export const describePatch = (patch: string): PatchDescription => {
+  const { maybeRenamedFrom, notes } = readPatch(patch);
+
+  return { maybeRenamedFrom, notes };
+};

package/src/pixel-paper.css

@@ -5151,6 +5151,12 @@ dialog.veil:focus {
   color: inherit;
 }
 
+/* a child Submodel's tools come back as one element; the group is no box of its own, so its
+   buttons take the bar's gap as the others do */
+.window-tools {
+  display: contents;
+}
+
 .window-body {
   flex: 1;
   min-height: 0;

package/src/window/window.ts

@@ -20,7 +20,9 @@ export type ViewConfig<Message> = Readonly<{
   glyph?: GlyphName;
   /** A chip in the title bar: its state. */
   status?: ReadonlyArray<Html | string>;
-  /** IconButtons in the title bar, before the close. */
+  /** IconButtons in the title bar, before the close. A child Submodel, whose view is one
+   *  `Html`, hands back several in a `span.window-tools`: it is no box of its own
+   *  (`display: contents`), so its buttons sit in the bar as the others do. */
   tools?: ReadonlyArray<Html>;
   /** The close glyph's Message; the glyph prints when it is given. */
   onClose?: Message;