@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

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/iconButton/iconButton.ts

@@ -2,8 +2,10 @@ import { Button as UiButton } from "@foldkit/ui";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
 import type { Attributes } from "../attributes/attributes.ts";
+import type { KeyHintConfig } from "../button/button.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
+import { keyLabel } from "../keyHint/keyLabel.ts";
 
 // VIEW
 
@@ -17,13 +19,25 @@ export type ViewConfig<Message> = Readonly<{
   isQuiet?: boolean;
   /** Unavailable but focusable (`aria-disabled`), as in `@foldkit/ui`. */
   isDisabled?: boolean;
+  /** The key that does the same, printed in the tip after the label (`data-tip-key`): the
+   *  button has no words to print it beside. */
+  keyHint?: KeyHintConfig;
   /** Further attributes for the `<button>`, never a class. */
   attributes?: Attributes<Message>;
 }>;
 
-/** A bare glyph button, 24px square. Its label is its accessible name and its tip. */
+/** A bare glyph button, 24px square. Its label is its accessible name and its tip, and its
+ *  key, where it has one, prints in the tip after the label. */
 export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>): Html => {
-  const { glyph, label, onClick, isQuiet = false, isDisabled = false, attributes = [] } = config;
+  const {
+    glyph,
+    label,
+    onClick,
+    isQuiet = false,
+    isDisabled = false,
+    keyHint,
+    attributes = [],
+  } = config;
 
   return UiButton.view(
     {
@@ -36,6 +50,9 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
             ...groups.button,
             h.AriaLabel(label),
             h.DataAttribute("tip", label),
+            ...(keyHint === undefined
+              ? []
+              : [h.DataAttribute("tip-key", keyLabel(keyHint.keys, keyHint.platform))]),
             h.Class(isQuiet ? "iconbtn quiet" : "iconbtn"),
           ],
           [Glyph.view({ name: glyph }, h)],

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>(

package/src/meter/meter.ts

@@ -105,32 +105,41 @@ const numbersText = (value: number, max: number, unit: string | undefined): stri
   return unit === undefined ? numbers : `${numbers} ${unit}`;
 };
 
+/** How high a reading is: full at `max`, high from `HIGH_SHARE` of it, calm below. The
+ *  percentage and a toned meter's cells both print it. */
+type Level = "Full" | "High" | "Calm";
+
+const levelOf = (value: number, max: number): Level => {
+  if (value >= max) {
+    return "Full";
+  } else if (value >= max * HIGH_SHARE) {
+    return "High";
+  } else {
+    return "Calm";
+  }
+};
+
 const percentView = <Message>(
   config: MeterConfig,
   percent: number,
-  isFull: boolean,
+  level: Level,
   h: HtmlBuilder<Message>,
 ): Html => {
   const percentText = `${percent}%`;
-  const high = config.max * HIGH_SHARE;
 
-  if (isFull) {
+  if (level === "Full") {
     return Chip.view({ label: config.full ?? percentText, tone: "Blocked" }, h);
-  } else if (config.value >= high) {
+  } else if (level === "High") {
     return Mark.readingView({ label: percentText }, h);
   } else {
     return h.span([h.Class("pct")], [percentText]);
   }
 };
 
-const toneClass = (value: number, max: number, isFull: boolean): string => {
-  if (isFull) {
-    return " toned full";
-  } else if (value >= max * HIGH_SHARE) {
-    return " toned high";
-  } else {
-    return " toned";
-  }
+const TONE_CLASS: Readonly<Record<Level, string>> = {
+  Full: " toned full",
+  High: " toned high",
+  Calm: " toned",
 };
 
 const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html => {
@@ -146,9 +155,10 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
     isToned = false,
   } = config;
   const share = max > 0 ? Math.min(1, Math.max(0, value / max)) : 0;
-  const isFull = value >= max;
+  const level = levelOf(value, max);
+  const isFull = level === "Full";
   const numbers = config.valueText ?? numbersText(value, max, config.unit);
-  const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? toneClass(value, max, isFull) : ""}`;
+  const rowClass = `meter-row${isStale ? " stale" : ""}${isToned ? TONE_CLASS[level] : ""}`;
 
   return UiMeter.view(
     {
@@ -179,7 +189,7 @@ const meterView = <Message>(config: MeterConfig, h: HtmlBuilder<Message>): Html
                   [...groups.meter, h.Class("cells")],
                   cellRowView(METER_CELLS, scaled(share, METER_CELLS, isFull), h),
                 ),
-                percentView(config, scaled(share, PERCENT, isFull), isFull, h),
+                percentView(config, scaled(share, PERCENT, isFull), level, h),
                 ...(hasNumbers ? [h.span([h.Class("meter-num tnum")], [numbers])] : []),
               ],
             ),

package/src/notice/notice.ts

@@ -22,7 +22,8 @@ const toneGlyph = (tone: Tone): GlyphName =>
     Match.exhaustive,
   );
 
-const TONE_CLASS: Readonly<Record<Tone, string>> = {
+/** The class a tone adds to a notice's, a toast's or a glyph box's own. */
+export const TONE_CLASS: Readonly<Record<Tone, string>> = {
   Warn: "",
   Error: " error",
   Ok: " ok",