@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{inlineInput/inlineInput.ts → inline-input/inline-input.ts}

@@ -2,36 +2,32 @@ import { Input as UiInput } from "@foldkit/ui";
 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";
+import type { Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
 import { defineTaggedUnion } from "foldkit/schema";
 import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
-import * as Update from "foldkit/update";
+import type * as Update from "foldkit/update";
 
 import { isPlain } from "../keys/keys.ts";
 import * as Notice from "../notice/notice.ts";
 
-// MODEL
-
-/** What started a save: Enter, or leaving the field. */
 const SaveTrigger = Schema.Literals(["Enter", "Blur"]);
+
 type SaveTrigger = typeof SaveTrigger.Type;
 
-/** How an inline edit ended: Enter, leaving the field, or Escape. */
 const InlineEnd = Schema.Literals(["Enter", "Blur", "Escape"]);
+
 type InlineEnd = typeof InlineEnd.Type;
 
-/** Where an inline edit is. `Saving`: the caller's save is out; the field holds, read-only and
- *  focused. `hasLeft` records that focus left it meanwhile, so the edit ends when the save
- *  lands instead of taking the next item. `Ended`: the edit is over; a blur from the field
- *  being removed writes nothing. */
 const Phase = defineTaggedUnion({
   Editing: {},
-  Saving: { trigger: SaveTrigger, hasLeft: Schema.Boolean },
+  Saving: { trigger: SaveTrigger },
+  LeftWhileSaving: {},
   Ended: {},
 });
+
 type Phase = typeof Phase.Type;
 
 /** Schema for an inline field. `maybeDraft` is none while the field is untouched: it then
@@ -48,9 +44,8 @@ export const Model = Schema.Struct({
   maybeLastSavedId: Schema.Option(Schema.String),
   isRepeating: Schema.Boolean,
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of all Messages an inline field can produce. `UpdatedDraft` carries the draft and the
  *  value it replaces, as the view had it. */
@@ -61,9 +56,8 @@ export const Message = defineMessageUnion({
   BlurredField: {},
   CompletedFocusField: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages an inline field reports. `Committed`: save this text (new, non-empty,
  *  trimmed); the field holds until the caller reports back with `succeeded` or `failed`.
@@ -74,9 +68,8 @@ export const OutMessage = defineMessageUnion({
   Committed: { text: Schema.String },
   Ended: { how: InlineEnd, maybeLastSavedId: Schema.Option(Schema.String) },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// COMMAND
+export type OutMessage = typeof OutMessage.Type;
 
 /** Focuses the field once it renders, selecting its text as an edit begins. */
 export const FocusField = Command.define("FocusField", {
@@ -86,19 +79,18 @@ export const FocusField = Command.define("FocusField", {
     Dom.focus(`#${CSS.escape(id)}`).pipe(
       Effect.andThen(
         Effect.sync(() => {
-          const field = document.getElementById(id);
+          const field = document.querySelector(`#${CSS.escape(id)}`);
+
           if (field instanceof HTMLInputElement) {
             field.select();
           }
-        }),
+        })
       ),
       Effect.ignore,
-      Effect.as(Message.CompletedFocusField()),
+      Effect.as(Message.CompletedFocusField())
     ),
 });
 
-// INIT
-
 /** Configuration for starting an inline edit with `init`. The `id` (the input's) must be
  *  unique in the document. `isRepeating`: adding several, so a save from Enter empties the
  *  field and keeps it open for the next instead of ending. */
@@ -119,35 +111,35 @@ export const init = (config: InitConfig): Update.Return<Model, Message> => ({
   commands: [FocusField({ id: config.id })],
 });
 
-// ACCESSORS
-
 /** Whether the caller's save is out: the field holds until `succeeded` or `failed`. */
-export const isSaving = (model: Model): boolean => Phase.guards.Saving(model.phase);
+export const isSaving = (model: Model): boolean =>
+  Phase.guards.Saving(model.phase) || Phase.guards.LeftWhileSaving(model.phase);
 
 /** Why the last save was refused, while the field still holds that text: none before a save
  *  fails, and again once the draft changes or the next save goes out. */
-export const maybeError = (model: Model): Option.Option<string> => model.maybeError;
+export const maybeError = (model: Model): Option.Option<string> =>
+  model.maybeError;
 
-// the element `errorView` renders, which the field points at while a save was refused
 const errorId = (model: Model): string => UiInput.descriptionId(model.id);
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
 const end = (model: Model, how: InlineEnd): UpdateReturn => ({
   model: modifyFields(model, { phase: () => Phase.Ended() }),
-  outMessage: OutMessage.Ended({ how, maybeLastSavedId: model.maybeLastSavedId }),
+  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> =>
+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),
+    Option.filter((text) => String.isNonEmpty(text) && text !== value)
   );
 
 const commit = (model: Model, trigger: SaveTrigger): UpdateReturn =>
@@ -155,7 +147,7 @@ const commit = (model: Model, trigger: SaveTrigger): UpdateReturn =>
     onNone: () => end(model, trigger),
     onSome: (text) => ({
       model: modifyFields(model, {
-        phase: () => Phase.Saving({ trigger, hasLeft: false }),
+        phase: () => Phase.Saving({ trigger }),
         maybeError: () => Option.none(),
       }),
       outMessage: OutMessage.Committed({ text }),
@@ -175,39 +167,46 @@ export const update = (model: Model, message: Message) =>
             }),
           }
         : { model },
-    PressedEnter: () => (Phase.guards.Editing(model.phase) ? commit(model, "Enter") : { model }),
-    PressedEscape: () => (Phase.guards.Editing(model.phase) ? end(model, "Escape") : { model }),
+    PressedEnter: () =>
+      Phase.guards.Editing(model.phase) ? commit(model, "Enter") : { model },
+    PressedEscape: () =>
+      Phase.guards.Editing(model.phase) ? end(model, "Escape") : { model },
     BlurredField: () =>
       Phase.match<UpdateReturn>(model.phase, {
         Editing: () => commit(model, "Blur"),
-        Saving: ({ trigger }) => ({
+        Saving: () => ({
           model: modifyFields(model, {
-            phase: () => Phase.Saving({ trigger, hasLeft: true }),
+            phase: () => Phase.LeftWhileSaving(),
           }),
         }),
+        LeftWhileSaving: () => ({ model }),
         Ended: () => ({ model }),
       }),
     CompletedFocusField: () => ({ model }),
   });
 
+const savedAs = (model: Model, savedId: string): Model =>
+  modifyFields(model, { maybeLastSavedId: () => Option.some(savedId) });
+
 /** The caller's save went through, giving the saved item's id. A save from Enter in a
  *  repeating field empties the field and keeps it open, focused, for the next; any other
  *  save ends the edit (as `Blur` if focus left meanwhile). A result for an edit that is no
  *  longer saving changes nothing. */
 export const succeeded = (model: Model, savedId: string): UpdateReturn =>
   Phase.match<UpdateReturn>(model.phase, {
-    Saving: ({ trigger, hasLeft }) => {
-      const saved = modifyFields(model, { maybeLastSavedId: () => Option.some(savedId) });
-      const isNext = model.isRepeating && trigger === "Enter" && !hasLeft;
-      return isNext
+    Saving: ({ trigger }) => {
+      const saved = savedAs(model, savedId);
+
+      return model.isRepeating && trigger === "Enter"
         ? {
             model: modifyFields(saved, {
               phase: () => Phase.Editing(),
               maybeDraft: () => Option.some(""),
             }),
           }
-        : end(saved, hasLeft ? "Blur" : trigger);
+        : end(saved, trigger);
     },
+    LeftWhileSaving: () => end(savedAs(model, savedId), "Blur"),
     Editing: () => ({ model }),
     Ended: () => ({ model }),
   });
@@ -217,8 +216,11 @@ export const succeeded = (model: Model, savedId: string): UpdateReturn =>
  *  outcome is told elsewhere, such as a lost connection's notice) it only lets go of the
  *  text. It reports nothing, so it folds as a plain return. A result for an edit that is no
  *  longer saving changes nothing. */
-export const failed = (model: Model, error?: string): Update.Return<Model, Message> =>
-  Phase.guards.Saving(model.phase)
+export const failed = (
+  model: Model,
+  error?: string
+): Update.Return<Model, Message> =>
+  isSaving(model)
     ? {
         model: modifyFields(model, {
           phase: () => Phase.Editing(),
@@ -227,13 +229,10 @@ export const failed = (model: Model, error?: string): Update.Return<Model, Messa
       }
     : { model };
 
-// KEYS
-
-type KeyMessage = typeof Message.PressedEnter.Type | typeof Message.PressedEscape.Type;
+type KeyMessage =
+  | typeof Message.PressedEnter.Type
+  | typeof Message.PressedEscape.Type;
 
-/** What one keydown in the field does: Enter saves, Escape discards. A key an IME is
- *  composing, a modified key, a key someone already handled and any other key are left
- *  alone. */
 export const fieldKey = (event: KeyboardEvent): Option.Option<KeyMessage> =>
   event.isComposing || event.defaultPrevented || !isPlain(event)
     ? Option.none()
@@ -241,7 +240,7 @@ export const fieldKey = (event: KeyboardEvent): Option.Option<KeyMessage> =>
         Match.withReturnType<Option.Option<KeyMessage>>(),
         Match.when("Enter", () => Option.some(Message.PressedEnter())),
         Match.when("Escape", () => Option.some(Message.PressedEscape())),
-        Match.orElse(() => Option.none()),
+        Match.orElse(() => Option.none())
       );
 
 /** The field's keys: Enter saves (or ends, with nothing new to save) and Escape discards and
@@ -259,10 +258,9 @@ export const BindFieldKeys = Mount.defineStream("BindFieldKeys", {
     }),
 });
 
-// VIEW
-
 /** How tall the field is: a row's words, or a card's 16px title. */
 export const Size = Schema.Literals(["Row", "Title"]);
+
 export type Size = typeof Size.Type;
 
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
@@ -279,7 +277,10 @@ export type ViewInputs = Readonly<{
   error?: string | undefined;
 }>;
 
-const shownError = (model: Model, error: string | undefined): Option.Option<string> =>
+const shownError = (
+  model: Model,
+  error: string | undefined
+): Option.Option<string> =>
   Option.orElse(Option.fromNullishOr(error), () => model.maybeError);
 
 /**
@@ -290,34 +291,39 @@ const shownError = (model: Model, error: string | undefined): Option.Option<stri
  * the field `aria-invalid` and points it at `errorView`. Escape discards the draft and ends. The field moves no focus
  * itself: the caller does on `Ended`.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { value, label, placeholder, size = "Row", error } = viewInputs;
-  const isHeld = isSaving(model);
-  const hasError = Option.isSome(shownError(model, error));
-
-  return UiInput.view(
-    {
-      id: model.id,
-      value: Option.getOrElse(model.maybeDraft, () => value),
-      onInput: (draft) => Message.UpdatedDraft({ value: draft, replaced: value }),
-      isReadOnly: isHeld,
-      isInvalid: hasError,
-      hasDescription: hasError,
-      ...(placeholder !== undefined && { placeholder }),
-      toView: (groups) =>
-        h.input([
-          ...groups.input,
-          h.AriaLabel(label),
-          ...(isHeld ? [h.AriaBusy(true)] : []),
-          h.Autocomplete("off"),
-          h.OnBlur(Message.BlurredField()),
-          h.OnMount(BindFieldKeys()),
-          h.Class(size === "Title" ? "inline-input title-edit" : "inline-input"),
-        ]),
-    },
-    h,
-  );
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const { value, label, placeholder, size = "Row", error } = viewInputs;
+    const isHeld = isSaving(model);
+    const hasError = Option.isSome(shownError(model, error));
+
+    return UiInput.view(
+      {
+        id: model.id,
+        value: Option.getOrElse(model.maybeDraft, () => value),
+        onInput: (draft) =>
+          Message.UpdatedDraft({ value: draft, replaced: value }),
+        isReadOnly: isHeld,
+        isInvalid: hasError,
+        hasDescription: hasError,
+        ...(placeholder !== undefined && { placeholder }),
+        toView: (groups) =>
+          h.input([
+            ...groups.input,
+            h.AriaLabel(label),
+            ...(isHeld ? [h.AriaBusy(true)] : []),
+            h.Autocomplete("off"),
+            h.OnBlur(Message.BlurredField()),
+            h.OnMount(BindFieldKeys()),
+            h.Class(
+              size === "Title" ? "inline-input title-edit" : "inline-input"
+            ),
+          ]),
+      },
+      h
+    );
+  }
+);
 
 /** Why the field is marked: the caller's `error`, else why the last save was refused, as an
  *  error Notice with the id the field points at, or nothing. Place it under the field and
@@ -325,10 +331,13 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
 export const errorView = <ParentMessage>(
   model: Model,
   h: HtmlBuilder<ParentMessage>,
-  error?: string,
+  error?: string
 ): Html =>
   Option.match(shownError(model, error), {
     onNone: () => h.empty,
-    onSome: (error) =>
-      Notice.view({ tone: "Error", body: [error], attributes: [h.Id(errorId(model))] }, h),
+    onSome: (shown) =>
+      Notice.view(
+        { tone: "Error", body: [shown], attributes: [h.Id(errorId(model))] },
+        h
+      ),
   });

package/src/{keyHelp → key-help}/index.ts

@@ -12,5 +12,6 @@ export {
   toKeymapGroups,
   update,
   view,
-} from "./keyHelp.ts";
-export type { Binding, InitConfig, ViewInputs } from "./keyHelp.ts";
+} from "./key-help.ts";
+
+export type { Binding, InitConfig, ViewInputs } from "./key-help.ts";

package/src/{keyHelp/keyHelp.ts → key-help/key-help.ts}

@@ -6,23 +6,23 @@ import { defineMessageUnion } from "foldkit/message";
 import { modifyFields } from "foldkit/struct";
 import { defineView } from "foldkit/submodel";
 import * as Subscription from "foldkit/subscription";
-import * as Update from "foldkit/update";
+import type * as Update from "foldkit/update";
 
 import * as Button from "../button/button.ts";
 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, pressesOf } from "../keyHint/keyLabel.ts";
+import { keyLabel, pressesOf } from "../key-hint/key-label.ts";
+import type { KeyPlatform } from "../key-hint/key-label.ts";
 import * as Keymap from "../keymap/keymap.ts";
 
-// MODEL
-
 /** Schema for the key help: its Dialog and the words in its find field. */
 export const Model = Schema.Struct({
   dialog: Dialog.Model,
   query: Schema.String,
 });
+
 export type Model = typeof Model.Type;
 
 /** One command the keyboard gives, as the help lists it: the keys that give it (any of
@@ -30,7 +30,7 @@ export type Model = typeof Model.Type;
  *  Describe the same bindings the application hands `Dom.streamFromKeyBindings`, so a key
  *  never says one thing and does another. */
 export type Binding = Readonly<{
-  keys: ReadonlyArray<KeySequence>;
+  keys: readonly KeySequence[];
   group: string;
   does: string;
 }>;
@@ -39,9 +39,11 @@ export type Binding = Readonly<{
 export const HELP_KEYS: KeySequence = "Shift+?";
 
 /** The help's own line in its listing. */
-export const helpBinding: Binding = { keys: [HELP_KEYS], group: "Help", does: "These keys" };
-
-// MESSAGE
+export const helpBinding: Binding = {
+  keys: [HELP_KEYS],
+  group: "Help",
+  does: "These keys",
+};
 
 /** Union of all Messages the key help can produce. */
 export const Message = defineMessageUnion({
@@ -49,18 +51,16 @@ export const Message = defineMessageUnion({
   UpdatedQuery: { value: Schema.String },
   PressedHelpKey: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** 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`, reports nothing. */
 export const OutMessage = defineMessageUnion({
   Closed: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating the key help with `init`. */
 export type InitConfig = Readonly<{ id: string }>;
@@ -71,8 +71,6 @@ export const init = (config: InitConfig): Model => ({
   query: "",
 });
 
-// UPDATE
-
 const toOutMessage = Dialog.OutMessage.match<OutMessage>({
   Closed: () => OutMessage.Closed(),
 });
@@ -81,34 +79,38 @@ const dialogFold = foldDialog(Dialog, {
   read: (model: Model) => model.dialog,
   write: (model: Model, nextDialog: Dialog.Model): Model =>
     modifyFields(model, { dialog: () => nextDialog }),
-  toParentMessage: (message: Dialog.Message) => Message.GotDialogMessage({ message }),
+  toParentMessage: (message: Dialog.Message) =>
+    Message.GotDialogMessage({ message }),
   toParentOutMessage: toOutMessage,
 });
 
-const clearQuery = (model: Model): Model => modifyFields(model, { query: () => "" });
+const clearQuery = (model: Model): Model =>
+  modifyFields(model, { query: () => "" });
 
 /** Processes a key help Message and returns the next Model, Commands and OutMessage. */
 export const update = (model: Model, message: Message) =>
-  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
-    GotDialogMessage: ({ message: dialogMessage }) => dialogFold.update(model, dialogMessage),
-    UpdatedQuery: ({ value }) => ({ model: modifyFields(model, { query: () => value }) }),
-    PressedHelpKey: () => dialogFold.open(clearQuery(model)),
-  });
+  Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(
+    message,
+    {
+      GotDialogMessage: ({ message: dialogMessage }) =>
+        dialogFold.update(model, dialogMessage),
+      UpdatedQuery: ({ value }) => ({
+        model: modifyFields(model, { query: () => value }),
+      }),
+      PressedHelpKey: () => dialogFold.open(clearQuery(model)),
+    }
+  );
 
 /** Opens the key help, as `?` does: for a button or a command palette entry. */
 export const open = (model: Model): Update.Return<Model, Message> =>
   dialogFold.open(clearQuery(model));
 
-// ACCESSORS
-
 /** The key help's id, unique in the document. */
 export const id = (model: Model): string => Dialog.id(model.dialog);
 
 /** Whether the key help is open. */
 export const isOpen = (model: Model): boolean => Dialog.isOpen(model.dialog);
 
-// SUBSCRIPTION
-
 /** Opens the help on `?` while it is closed. Lift it into the application's Subscriptions. */
 export const subscriptions = Subscription.make<Model, Message>()((entry) => ({
   helpKey: entry(
@@ -125,43 +127,50 @@ export const subscriptions = Subscription.make<Model, Message>()((entry) => ({
             },
           ],
         }),
-    },
+    }
   ),
 }));
 
-// LISTING
-
 const isFound = (binding: Binding, labels: string, query: string): boolean =>
   pipe(
-    [labels, ...Array.flatMap(binding.keys, pressesOf), binding.does, binding.group],
+    [
+      labels,
+      ...Array.flatMap(binding.keys, pressesOf),
+      binding.does,
+      binding.group,
+    ],
     Array.join(" "),
     String.toLowerCase,
-    String.includes(query),
+    String.includes(query)
   );
 
 /** The bindings as a keymap: under their groups in the order the groups first appear, each
  *  binding's keys printed for the platform, filtered by the query (its keys or its words). */
 export const toKeymapGroups = (
-  bindings: ReadonlyArray<Binding>,
+  bindings: readonly Binding[],
   platform: KeyPlatform,
-  query: string,
-): ReadonlyArray<Keymap.KeymapGroup> => {
+  query: string
+): readonly Keymap.KeymapGroup[] => {
   const normalizedQuery = pipe(query, String.trim, String.toLowerCase);
+
   const rows = pipe(
     bindings,
     Array.map((binding) => ({
       binding,
       labels: Array.join(
         Array.map(binding.keys, (keys) => keyLabel(keys, platform)),
-        " / ",
+        " / "
       ),
     })),
-    Array.filter(({ binding, labels }) => isFound(binding, labels, normalizedQuery)),
+    Array.filter(({ binding, labels }) =>
+      isFound(binding, labels, normalizedQuery)
+    ),
     Array.map(({ binding, labels }) => ({
       group: binding.group,
       row: { keys: labels, does: binding.does },
-    })),
+    }))
   );
+
   const groups = Array.dedupe(Array.map(rows, ({ group }) => group));
 
   return Array.map(groups, (group) => ({
@@ -169,17 +178,15 @@ export const toKeymapGroups = (
     rows: pipe(
       rows,
       Array.filter((row) => row.group === group),
-      Array.map(({ row }) => row),
+      Array.map(({ row }) => row)
     ),
   }));
 };
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** Every key in force now. The help adds its own `?` line. */
-  bindings: ReadonlyArray<Binding>;
+  bindings: readonly Binding[];
   platform: KeyPlatform;
   /** The application's own words above the find field: what the page would say that the
    *  reader still needs while the help covers it (a sync notice and its retry). A slot that
@@ -190,29 +197,31 @@ export type ViewInputs = Readonly<{
   toLiveRegionView?: (() => Html) | undefined;
 }>;
 
-// NOTE: the note claims only what Foldkit's key bindings do: a key waits while focus is in a
-// field (unless its binding acts while typing), and a pending sequence lets go on any key that
-// does not continue it. Any other pause (while a card is held) is the application's, so the
-// note does not claim it.
 const NOTE = "Keys wait while you type in a field.";
+
 const SEQUENCE_NOTE =
   " Type the keys of a sequence one straight after the other; any other key lets go of the first.";
+
 const NOTHING_FOUND = "No key does that.";
 
-const hasSequence = (bindings: ReadonlyArray<Binding>): boolean =>
-  Array.some(bindings, (binding) => Array.some(binding.keys, (keys) => !Predicate.isString(keys)));
+const hasSequence = (bindings: readonly Binding[]): boolean =>
+  Array.some(bindings, (binding) =>
+    Array.some(binding.keys, (keys) => !Predicate.isString(keys))
+  );
 
 const cardView = (
   model: Model,
   viewInputs: ViewInputs,
   render: Dialog.RenderInfo,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const bindings = [...viewInputs.bindings, helpBinding];
   const groups = toKeymapGroups(bindings, viewInputs.platform, model.query);
+
   const note = Array.match(groups, {
     onEmpty: () => NOTHING_FOUND,
-    onNonEmpty: () => (hasSequence(bindings) ? `${NOTE}${SEQUENCE_NOTE}` : NOTE),
+    onNonEmpty: () =>
+      hasSequence(bindings) ? `${NOTE}${SEQUENCE_NOTE}` : NOTE,
   });
 
   return Card.view(
@@ -222,7 +231,9 @@ const cardView = (
       isNarrow: true,
       closeAttributes: render.closeButton,
       actionBarAttributes: render.actionBar,
-      actions: [Button.view({ label: "close", attributes: render.closeButton }, h)],
+      actions: [
+        Button.view({ label: "close", attributes: render.closeButton }, h),
+      ],
       body: [
         ...(viewInputs.toIntroView?.() ?? []),
         Field.view(
@@ -233,27 +244,28 @@ const cardView = (
             onInput: (value) => Message.UpdatedQuery({ value }),
             inputAttributes: render.initialFocus,
           },
-          h,
+          h
         ),
         Keymap.view({ groups, note }, h),
       ],
     },
-    h,
+    h
   );
 };
 
 /** The keyboard's help: every key in force, under its group, with a field that finds one by
  *  its keys or its words. `?` opens it (see `subscriptions`), and so does `open`. Render it
  *  once per page. */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html =>
-  h.submodel({
-    slotId: id(model),
-    model: model.dialog,
-    view: Dialog.view,
-    viewInputs: {
-      toLiveRegionView: viewInputs.toLiveRegionView,
-      toView: (render) => cardView(model, viewInputs, render, h),
-    },
-    toParentMessage: (message) => Message.GotDialogMessage({ message }),
-  }),
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html =>
+    h.submodel({
+      slotId: id(model),
+      model: model.dialog,
+      view: Dialog.view,
+      viewInputs: {
+        toLiveRegionView: viewInputs.toLiveRegionView,
+        toView: (render) => cardView(model, viewInputs, render, h),
+      },
+      toParentMessage: (message) => Message.GotDialogMessage({ message }),
+    })
 );