@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.23.0

package/src/dialog/dialog.ts

@@ -89,7 +89,8 @@ export type UpdateContext = Readonly<{
   isCloseHeld: boolean;
 }>;
 
-const FREE: UpdateContext = { isCloseHeld: false };
+/** The context of a dialog whose close is not held, the default. */
+export const FREE: UpdateContext = { isCloseHeld: false };
 
 // NOTE: @foldkit/ui gap: Dialog has no way to hold a close. Escape, a press on the veil and a
 // control given the `closeButton` group all send `RequestedClose`, so a held dialog reads it
@@ -248,7 +249,7 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
   } = viewInputs;
 
   const actionBar = childAttributes([
-    h.DataAttribute("pixel-paper-action-bar", ""),
+    h.Attribute(ACTION_BAR_ATTRIBUTE, ""),
     h.OnMount(BindActionKeys()),
   ]);
 

package/src/drag/drag.ts

@@ -1,13 +1,16 @@
 // Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop, and Reel, which
-// holds its own: the phase a drag is in, the DragAndDrop Messages both build, what a press
-// lifts, Escape taken before anything else, the pressing pointer's events, the lifted copy's
-// measure, and the closest-centre drop target a sortable resolves for a pointer. A splitter's
-// handlers are the Reel's and the Rail's.
+// holds its own: the phase a drag is in, what a hold keeps and how a step settles it, the
+// DragAndDrop Messages both build, what a press lifts, Escape taken before anything else, the
+// pressing pointer's events, the lifted copy's measure, and the closest-centre drop target a
+// sortable resolves for a pointer. A splitter's handlers are the Reel's and the Rail's.
 
 import { DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
-import { Array, Effect, Option, Order, Stream, pipe } from "effect";
+import { Array, Effect, Option, Order, Schema, Stream, pipe } from "effect";
+import type * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Attribute, HtmlBuilder } from "foldkit/html";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
 
 import { isPlain } from "../keys/keys.ts";
 
@@ -36,6 +39,38 @@ export const phaseOf = (dragAndDrop: UiDragAndDrop.Model): Phase => {
 export const isCarrying = (phase: Phase): boolean =>
   phase === "PointerDragging" || phase === "KeyboardDragging";
 
+// HOLD
+
+/** What a Board's and a Sortable's Model share: the DragAndDrop, whether items may move, and
+ *  what the list keeps while an item is pressed or held. */
+type Holder = Readonly<{
+  dragAndDrop: UiDragAndDrop.Model;
+  isMovable: boolean;
+  maybeHeld: Option.Option<unknown>;
+}>;
+
+/** Whether an item is pressed or held. While it is, the arrow keys, Space and Escape belong to
+ *  the list: pause the page's own bindings for them. The list takes Escape before anything
+ *  else sees it. */
+export const isHolding = (model: Holder): boolean => phaseOf(model.dragAndDrop) !== "Idle";
+
+/** Whether a press may lift an item now: items may move and none is pressed or held. */
+export const canLift = (model: Holder): boolean => model.isMovable && !isHolding(model);
+
+/** Settles a DragAndDrop step: forgets the held item once it is down, and runs what the step
+ *  says (`maybeAnnouncement`) after the step's own Commands. */
+export const settle = <Model extends Holder, Message, OutMessage>(
+  step: Update.ReturnWithOutMessage<Model, Message, OutMessage>,
+  maybeAnnouncement: Option.Option<Command.Command<Message>>,
+): Update.ReturnWithOutMessage<Model, Message, OutMessage> =>
+  Update.withOutMessage(
+    {
+      model: isHolding(step.model) ? step.model : { ...step.model, maybeHeld: Option.none() },
+      commands: [...(step.commands ?? []), ...Array.fromOption(maybeAnnouncement)],
+    },
+    step.outMessage,
+  );
+
 // CHILD MESSAGES
 
 // NOTE: @foldkit/ui gap: DragAndDrop exposes no update capability for a press, a keyboard
@@ -114,6 +149,20 @@ export const escapeKeys = <Message>(message: Message): Stream.Stream<Message> =>
     options: { capture: true },
   });
 
+/** A list's `escape` Subscription: `escapeKeys` as `message` while an item is pressed or
+ *  held. */
+export const escapeSubscriptions = <Model extends Holder, Message>(message: Message) =>
+  Subscription.make<Model, Message>()((entry) => ({
+    escape: entry(
+      { isHolding: Schema.Boolean },
+      {
+        modelToDependencies: (model) => ({ isHolding: isHolding(model) }),
+        dependenciesToStream: ({ isHolding: isHoldingNow }) =>
+          isHoldingNow ? escapeKeys(message) : Stream.empty,
+      },
+    ),
+  }));
+
 // POINTER
 
 /** The moves, release and cancel of the pointer `pointerId`, on the document; another

package/src/field/field.ts

@@ -1,5 +1,5 @@
 import { Input as UiInput } from "@foldkit/ui";
-import type { Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
+import type { Attribute, Html, HtmlBuilder, TextareaAttribute } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
 
@@ -28,6 +28,32 @@ export const describedByError = <Message>(
     ? []
     : [h.AriaDescribedBy(hasHelp ? `${errorId(id)} ${UiInput.descriptionId(id)}` : errorId(id))];
 
+/** A field's control, after the `@foldkit/ui` attributes: described by its error before its
+ *  help line, and `aria-required` when the form is not sent without it. */
+// NOTE: @foldkit/ui gap: Input, Select and Textarea have no required option, so the wrapper
+// says it.
+export const controlAttributes = <Message>(
+  id: string,
+  error: string | undefined,
+  help: string | undefined,
+  isRequired: boolean,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<TextareaAttribute<Message>> => [
+  ...describedByError(id, error, help !== undefined, h),
+  ...(isRequired ? [h.AriaRequired(true)] : []),
+];
+
+// HELP
+
+/** The sans sentence under a field's controls, given one, with the `@foldkit/ui`
+ *  `description` group that makes it describe them. */
+export const helpView = <Message>(
+  help: string | undefined,
+  description: ReadonlyArray<Attribute<Message>>,
+  h: HtmlBuilder<Message>,
+): ReadonlyArray<Html> =>
+  help === undefined ? [] : [h.p([...description, h.Class("field-help")], [help])];
+
 // VIEW
 
 /** Configuration for rendering a text field with `view`. */
@@ -92,17 +118,13 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
           [h.Class(`field${isBoxed || type === "date" ? " boxed" : ""}${isMono ? " mono" : ""}`)],
           [
             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,
               ...groups.input,
-              ...describedByError(id, error, help !== undefined, h),
-              ...(isRequired ? [h.AriaRequired(true)] : []),
+              ...controlAttributes(id, error, help, isRequired, h),
             ]),
             ...errorView(id, error, h),
-            ...(help === undefined
-              ? []
-              : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
           ],
         ),
     },

package/src/fieldset/fieldset.ts

@@ -1,7 +1,7 @@
 import { Fieldset as UiFieldset } from "@foldkit/ui";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { describedByError, errorView } from "../field/field.ts";
+import { describedByError, errorView, helpView } from "../field/field.ts";
 
 // VIEW
 
@@ -43,9 +43,7 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
             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])]),
+            ...helpView(help, groups.description, h),
           ],
         ),
     },

package/src/fileTree/fileTree.ts

@@ -209,18 +209,16 @@ const moveInTree = (tree: Element, event: KeyboardEvent): Option.Option<TreeKeyA
   const items = ownItems(tree);
 
   return pipe(
-    Array.findFirstIndex(items, (item) => item === event.target),
-    Option.flatMap((index) =>
-      Option.flatMap(Array.get(items, index), (item) => {
-        if (isTypeahead(event)) {
-          return moveTo(itemStartingWith(items, index, event.key));
-        } else if (isPlain(event)) {
-          return actOnKey(items, index, item, event.key);
-        } else {
-          return Option.none();
-        }
-      }),
-    ),
+    Array.findFirstWithIndex(items, (item) => item === event.target),
+    Option.flatMap(([item, index]) => {
+      if (isTypeahead(event)) {
+        return moveTo(itemStartingWith(items, index, event.key));
+      } else if (isPlain(event)) {
+        return actOnKey(items, index, item, event.key);
+      } else {
+        return Option.none();
+      }
+    }),
   );
 };
 

package/src/inlineInput/inlineInput.ts

@@ -1,5 +1,5 @@
 import { Input as UiInput } from "@foldkit/ui";
-import { Effect, Match, Option, Schema } from "effect";
+import { Effect, Match, Option, Schema, String, pipe } from "effect";
 import * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import { type Html, type HtmlBuilder } from "foldkit/html";
@@ -12,7 +12,6 @@ import * as Update from "foldkit/update";
 
 import { isPlain } from "../keys/keys.ts";
 import * as Notice from "../notice/notice.ts";
-import { toWrite } from "./inline.ts";
 
 // MODEL
 
@@ -141,6 +140,16 @@ const end = (model: Model, how: InlineEnd): UpdateReturn => ({
   outMessage: OutMessage.Ended({ how, maybeLastSavedId: model.maybeLastSavedId }),
 });
 
+/** What Enter or leaving an inline field writes: the draft trimmed, or none (an untouched
+ *  draft, so an edit made elsewhere to `value` is never overwritten; an empty one; or the
+ *  text it replaces). */
+export const toWrite = (maybeDraft: Option.Option<string>, value: string): Option.Option<string> =>
+  pipe(
+    maybeDraft,
+    Option.map(String.trim),
+    Option.filter((text) => String.isNonEmpty(text) && text !== value),
+  );
+
 const commit = (model: Model, trigger: SaveTrigger): UpdateReturn =>
   Option.match(toWrite(model.maybeDraft, model.replaced), {
     onNone: () => end(model, trigger),

package/src/keyHelp/index.ts

@@ -3,7 +3,6 @@ export {
   Message,
   Model,
   OutMessage,
-  close,
   id,
   helpBinding,
   init,

package/src/keyHelp/keyHelp.ts

@@ -13,7 +13,7 @@ import * as Card from "../card/card.ts";
 import * as Dialog from "../dialog/dialog.ts";
 import { foldDialog } from "../dialog/fold.ts";
 import * as Field from "../field/field.ts";
-import { type KeyPlatform, keyLabel } from "../keyHint/keyLabel.ts";
+import { type KeyPlatform, keyLabel, pressesOf } from "../keyHint/keyLabel.ts";
 import * as Keymap from "../keymap/keymap.ts";
 
 // MODEL
@@ -54,7 +54,7 @@ export type Message = typeof Message.Type;
 // OUT MESSAGE
 
 /** Union of OutMessages the key help reports: the reader closed it (Escape, a click on the
- *  veil, a close button). Opening it, by `?` or `open`, and `close` report nothing. */
+ *  veil, a close button). Opening it, by `?` or `open`, reports nothing. */
 export const OutMessage = defineMessageUnion({
   Closed: {},
 });
@@ -99,9 +99,6 @@ export const update = (model: Model, message: Message) =>
 export const open = (model: Model): Update.Return<Model, Message> =>
   dialogFold.open(clearQuery(model));
 
-/** Closes the key help without reporting `Closed`. */
-export const close = (model: Model): Update.Return<Model, Message> => dialogFold.close(model);
-
 // ACCESSORS
 
 /** The key help's id, unique in the document. */
@@ -134,12 +131,9 @@ export const subscriptions = Subscription.make<Model, Message>()((entry) => ({
 
 // LISTING
 
-const keysOf = (keys: KeySequence): ReadonlyArray<string> =>
-  Predicate.isString(keys) ? [keys] : keys;
-
 const isFound = (binding: Binding, labels: string, query: string): boolean =>
   pipe(
-    [labels, ...Array.flatMap(binding.keys, keysOf), binding.does, binding.group],
+    [labels, ...Array.flatMap(binding.keys, pressesOf), binding.does, binding.group],
     Array.join(" "),
     String.toLowerCase,
     String.includes(query),

package/src/keyHint/keyLabel.ts

@@ -110,6 +110,10 @@ const pressLabel = (press: string, platform: KeyPlatform): string => {
   return `${prefix}${keyName(key, Array.isReadonlyArrayNonEmpty(orderedModifiers))}`;
 };
 
+/** The presses a binding's keys name: one, or a sequence. */
+export const pressesOf = (keys: KeySequence): ReadonlyArray<string> =>
+  Predicate.isString(keys) ? [keys] : keys;
+
 /**
  * A key binding as the help and the key hints print it. Takes the same strings
  * `Dom.streamFromKeyBindings` matches: `"Mod+K"` prints `⌘K` on Apple and `Ctrl+K` elsewhere,
@@ -119,8 +123,7 @@ const pressLabel = (press: string, platform: KeyPlatform): string => {
  * named key keeps its spaces.
  */
 export const keyLabel = (keys: KeySequence, platform: KeyPlatform): string => {
-  const presses = Predicate.isString(keys) ? [keys] : keys;
-  const labels = Array.map(presses, (press) => pressLabel(press, platform));
+  const labels = Array.map(pressesOf(keys), (press) => pressLabel(press, platform));
 
   return Array.every(labels, isCharacter) ? Array.join(labels, "") : Array.join(labels, " ");
 };

package/src/lineDiff/diff.ts

@@ -49,6 +49,14 @@ const numberLine = (numbers: Numbers, kind: LineKind, text: string): [Numbers, D
     Match.exhaustive,
   );
 
+type Line = Readonly<{ kind: LineKind; text: string }>;
+
+const numbered = (
+  lines: ReadonlyArray<Line>,
+  from: Numbers,
+): readonly [Numbers, ReadonlyArray<DiffRow>] =>
+  Array.mapAccum(lines, from, (numbers, { kind, text }) => numberLine(numbers, kind, text));
+
 /** 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 diffRowsOf = (before: string, after: string): ReadonlyArray<DiffRow> =>
@@ -60,21 +68,16 @@ export const diffRowsOf = (before: string, after: string): ReadonlyArray<DiffRow
         text,
       })),
     ),
-    (lines) =>
-      Array.mapAccum(lines, { old: 1, new: 1 }, (numbers, { kind, text }) =>
-        numberLine(numbers, kind, text),
-      ),
-    ([, rows]) => rows,
+    (lines) => numbered(lines, { old: 1, new: 1 })[1],
   );
 
+const isChange = (row: DiffRow): boolean => row._tag === "Added" || row._tag === "Removed";
+
 /** Whether a line was added or removed. */
-export const hasChanges = (rows: ReadonlyArray<DiffRow>): boolean =>
-  Array.some(rows, (row) => row._tag === "Added" || row._tag === "Removed");
+export const hasChanges = (rows: ReadonlyArray<DiffRow>): boolean => Array.some(rows, isChange);
 
 // PATCH
 
-type PatchState = Readonly<{ rows: ReadonlyArray<DiffRow>; numbers: Numbers }>;
-
 const LINE_KIND_BY_PREFIX: Readonly<Record<string, LineKind>> = {
   " ": "Same",
   "+": "Added",
@@ -86,23 +89,27 @@ const LINE_KIND_BY_PREFIX: Readonly<Record<string, LineKind>> = {
 const kindOf = (line: string): Option.Option<LineKind> =>
   line === "" ? Option.some("Same") : Option.fromUndefinedOr(LINE_KIND_BY_PREFIX[line.charAt(0)]);
 
-const readHunk = ({ rows, numbers }: PatchState, hunk: StructuredPatchHunk): PatchState => {
-  const gap = hunk.oldStart - numbers.old;
-  const gapRows = gap > 0 ? [DiffRow.Fold({ count: gap, firstOldNumber: numbers.old })] : [];
-
-  return Array.reduce(
-    hunk.lines,
-    { rows: [...rows, ...gapRows], numbers: { old: hunk.oldStart, new: hunk.newStart } },
-    (state: PatchState, line): PatchState =>
-      // "" starts with a "\", a prefix that draws no row
-      Option.match(kindOf(line), {
-        onNone: () => state,
-        onSome: (kind) => {
-          const [nextNumbers, row] = numberLine(state.numbers, kind, line.slice(1));
-          return { rows: [...state.rows, row], numbers: nextNumbers };
-        },
-      }),
+// "" starts with a "\", a prefix that draws no row
+const linesOf = (hunk: StructuredPatchHunk): ReadonlyArray<Line> =>
+  Array.getSomes(
+    Array.map(hunk.lines, (line) =>
+      Option.map(kindOf(line), (kind) => ({ kind, text: line.slice(1) })),
+    ),
   );
+
+// each hunk is numbered from its own header; only the gap before it needs the old line the
+// previous one ended on
+const readHunk = (
+  nextOld: number,
+  hunk: StructuredPatchHunk,
+): readonly [number, ReadonlyArray<DiffRow>] => {
+  const gap = hunk.oldStart - nextOld;
+  const [end, rows] = numbered(linesOf(hunk), { old: hunk.oldStart, new: hunk.newStart });
+
+  return [
+    end.old,
+    gap > 0 ? [DiffRow.Fold({ count: gap, firstOldNumber: nextOld }), ...rows] : rows,
+  ];
 };
 
 const onlyHunksOf = <File extends Readonly<{ hunks: Array<StructuredPatchHunk> }>>(
@@ -116,35 +123,29 @@ const onlyHunksOf = <File extends Readonly<{ hunks: Array<StructuredPatchHunk> }
         : Option.none(),
   });
 
-/** 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
+/** The hunks of one file's unified diff. `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 hunksOfPatch = (
+  patch: string,
+): Option.Option<Array.NonEmptyReadonlyArray<StructuredPatchHunk>> =>
+  Option.flatMap(Option.liftThrowable(parsePatch)(patch), 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` where `hunksOfPatch` is. */
 export const diffRowsOfPatch = (patch: string): Option.Option<ReadonlyArray<DiffRow>> =>
-  pipe(
-    Option.liftThrowable(parsePatch)(patch.replaceAll("\r\n", "\n")),
-    Option.flatMap(onlyHunksOf),
-    Option.map(
-      (hunks) => Array.reduce(hunks, { rows: [], numbers: { old: 1, new: 1 } }, readHunk).rows,
-    ),
-  );
+  Option.map(hunksOfPatch(patch), (hunks) => Array.flatten(Array.mapAccum(hunks, 1, readHunk)[1]));
 
 // FOLD
 
-type FoldState = Readonly<{
-  rows: ReadonlyArray<DiffRow>;
-  folded: ReadonlyArray<SameRow>;
-}>;
+/** A run of unchanged lines being folded: its first line and how many there are. */
+type Run = Readonly<{ first: SameRow; count: number }>;
 
 // a run of one stays a line: a row that says "1 unchanged line" takes the same room as the line
-const foldRow = (run: Array.NonEmptyReadonlyArray<SameRow>): DiffRow =>
-  run.length === 1
-    ? Array.headNonEmpty(run)
-    : DiffRow.Fold({ count: run.length, firstOldNumber: Array.headNonEmpty(run).oldNumber });
-
-const flushFold = ({ rows, folded }: FoldState): ReadonlyArray<DiffRow> =>
-  Array.match(folded, {
-    onEmpty: () => rows,
-    onNonEmpty: (run) => [...rows, foldRow(run)],
+const runRows = (maybeRun: Option.Option<Run>): ReadonlyArray<DiffRow> =>
+  Option.match(maybeRun, {
+    onNone: () => [],
+    onSome: ({ first, count }) =>
+      count === 1 ? [first] : [DiffRow.Fold({ count, firstOldNumber: first.oldNumber })],
   });
 
 /** The diff's rows: every change with `context` unchanged lines around it, and each longer
@@ -153,14 +154,29 @@ export const foldUnchanged = (
   rows: ReadonlyArray<DiffRow>,
   context: number,
 ): ReadonlyArray<DiffRow> => {
+  // the changes before each index, so the changes in any window are one subtraction
+  const changesBefore = Array.scan(rows, 0, (count, row) => count + (isChange(row) ? 1 : 0));
   const isKept = (index: number): boolean =>
-    hasChanges(rows.slice(Math.max(0, index - context), index + context + 1));
-
-  return flushFold(
-    Array.reduce(rows, { rows: [], folded: [] }, (state: FoldState, row, index): FoldState =>
+    Array.getUnsafe(changesBefore, Math.min(rows.length, index + context + 1)) -
+      Array.getUnsafe(changesBefore, Math.max(0, index - context)) >
+    0;
+
+  const [maybeRun, kept] = Array.mapAccum(
+    rows,
+    Option.none<Run>(),
+    (maybeRun, row, index): readonly [Option.Option<Run>, ReadonlyArray<DiffRow>] =>
       row._tag === "Same" && !isKept(index)
-        ? { rows: state.rows, folded: [...state.folded, row] }
-        : { rows: [...flushFold(state), row], folded: [] },
-    ),
+        ? [
+            Option.some(
+              Option.match(maybeRun, {
+                onNone: () => ({ first: row, count: 1 }),
+                onSome: (run) => ({ ...run, count: run.count + 1 }),
+              }),
+            ),
+            [],
+          ]
+        : [Option.none(), [...runRows(maybeRun), row]],
   );
+
+  return [...Array.flatten(kept), ...runRows(maybeRun)];
 };

package/src/lineDiff/patch.ts

@@ -1,6 +1,6 @@
 import { Array, Option, String, pipe } from "effect";
 
-import { type DiffRow, diffRowsOfPatch } from "./diff.ts";
+import { type DiffRow, diffRowsOfPatch, hunksOfPatch } from "./diff.ts";
 
 // QUOTED PATHS
 
@@ -114,9 +114,12 @@ const lineNote = (head: ReadonlyArray<string>, hasRows: boolean): Option.Option<
   }
 };
 
-const readSection = (section: string): PatchReading => {
+/** How a section's lines are read: `None` where it has none to show. */
+type RowsOf = (section: string) => Option.Option<ReadonlyArray<DiffRow>>;
+
+const readSection = (section: string, rowsOf: RowsOf): PatchReading => {
   const head = headOf(section);
-  const maybeRows = diffRowsOfPatch(section);
+  const maybeRows = rowsOf(section);
   const maybeRenamedFrom = Option.map(valueAfter(head, "rename from "), unquoted);
   const notes = [
     ...Option.toArray(Option.map(maybeRenamedFrom, (from) => `Renamed from ${from}.`)),
@@ -150,14 +153,16 @@ const KINDS: Readonly<Record<string, string>> = {
 
 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) })),
-  );
+const sideTable = (section: string, side: string, rowsOf: RowsOf): ReadonlyArray<Table> =>
+  Option.toArray(Option.map(rowsOf(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 readTypeChange = (
+  gone: string,
+  added: string,
+  rowsOf: RowsOf,
+): Option.Option<PatchReading> => {
   const [goneHead, addedHead] = [headOf(gone), headOf(added)];
 
   return Option.flatMap(
@@ -170,14 +175,16 @@ const readTypeChange = (gone: string, added: string): Option.Option<PatchReading
         ? 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")],
+            tables: [
+              ...sideTable(gone, "as it was", rowsOf),
+              ...sideTable(added, "as it is", rowsOf),
+            ],
           })
         : Option.none(),
   );
 };
 
-/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
-export const readPatch = (patch: string): PatchReading => {
+const readPatchWith = (patch: string, rowsOf: RowsOf): PatchReading => {
   const text = patch.replaceAll("\r\n", "\n");
 
   if (String.isEmpty(String.trim(text))) {
@@ -187,15 +194,18 @@ export const readPatch = (patch: string): PatchReading => {
     const [first, second, ...rest] = sections;
 
     if (first !== undefined && second === undefined) {
-      return readSection(first);
+      return readSection(first, rowsOf);
     } else if (first !== undefined && second !== undefined && Array.isArrayEmpty(rest)) {
-      return Option.getOrElse(readTypeChange(first, second), () => unreadable);
+      return Option.getOrElse(readTypeChange(first, second, rowsOf), () => unreadable);
     } else {
       return unreadable;
     }
   }
 };
 
+/** What `patchView` makes of a patch: the notes it prints and the tables it draws. */
+export const readPatch = (patch: string): PatchReading => readPatchWith(patch, diffRowsOfPatch);
+
 // DESCRIPTION
 
 /** What a patch says beyond its lines, as `patchView` prints it. */
@@ -212,7 +222,10 @@ export type PatchDescription = Readonly<{
  *  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);
+  // the notes need only whether a section has lines, so none are numbered
+  const { maybeRenamedFrom, notes } = readPatchWith(patch, (section) =>
+    Option.as(hunksOfPatch(section), []),
+  );
 
   return { maybeRenamedFrom, notes };
 };

package/src/linkState/linkState.ts

@@ -27,13 +27,6 @@ export type ViewConfig = Readonly<{
   label?: string;
 }>;
 
-const STATE_CLASS: Readonly<Record<State, string>> = {
-  Online: "",
-  Connecting: " connecting",
-  Reconnecting: " reconnecting",
-  Offline: " offline",
-};
-
 /** The connection word, in a top bar or a status bar. It is a status (`role="status"`), so a
  *  change of state is read out; while it connects it prints the working cursor. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
@@ -41,7 +34,7 @@ export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html
   const isWorking = state === "Connecting" || state === "Reconnecting";
 
   return h.span(
-    [h.Role("status"), h.Class(`link-state${STATE_CLASS[state]}`)],
+    [h.Role("status"), h.Class(`link-state${state === "Online" ? "" : ` ${stateWord(state)}`}`)],
     [label, ...(isWorking ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : [])],
   );
 };

package/src/menu/slip.ts

@@ -58,8 +58,8 @@ const edgeAttributes = <Message>(
   id: string,
   h: HtmlBuilder<Message>,
 ) => [
-  ...(Option.contains(context.firstId, id) ? [h.DataAttribute("pixel-paper-slip-first", "")] : []),
-  ...(Option.contains(context.lastId, id) ? [h.DataAttribute("pixel-paper-slip-last", "")] : []),
+  ...(Option.contains(context.firstId, id) ? [h.Attribute(FIRST_ATTRIBUTE, "")] : []),
+  ...(Option.contains(context.lastId, id) ? [h.Attribute(LAST_ATTRIBUTE, "")] : []),
 ];
 
 const wordsView = <Message>(