@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/{commandPalette/commandPalette.ts → command-palette/command-palette.ts}

@@ -1,8 +1,24 @@
 import { Input as UiInput } from "@foldkit/ui";
-import { Array, Effect, Equal, HashSet, Match, Option, Schema, Stream, String, pipe } from "effect";
+import {
+  Array,
+  Effect,
+  Equal,
+  HashSet,
+  Match,
+  Option,
+  Schema,
+  Stream,
+  String,
+  pipe,
+} from "effect";
 import * as FoldkitCommand from "foldkit/command";
 import * as Dom from "foldkit/dom";
-import type { Attribute, Html, HtmlBuilder, KeyboardModifiers } from "foldkit/html";
+import type {
+  Attribute,
+  Html,
+  HtmlBuilder,
+  KeyboardModifiers,
+} from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Render from "foldkit/render";
 import { modifyFields } from "foldkit/struct";
@@ -14,32 +30,29 @@ import * as Dialog from "../dialog/dialog.ts";
 import { foldDialog } from "../dialog/fold.ts";
 import { Focus } from "../focus/focus.ts";
 import * as Glyph from "../glyph/glyph.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
 import { isPlain } from "../keys/keys.ts";
 import { LOCALE } from "../locale/locale.ts";
 import { slotView } from "../slot/slot.ts";
-import { prefixKeys } from "../subscription/prefixKeys.ts";
+import { prefixKeys } from "../subscription/prefix-keys.ts";
 import {
   BindPaletteKeys,
   FIELD_ATTRIBUTE,
   OPTION_SELECTOR,
   PAGE_ATTRIBUTE,
   earlyKeys,
-  shownPageOf,
 } from "./keys.ts";
 import { findCommands, pageChoices } from "./match.ts";
 import type { Choice, Command, Page } from "./match.ts";
 import { Message } from "./message.ts";
-import type { ArrowKey, ShownRow } from "./message.ts";
-
-// MODEL
+import type { ArrowKey, RenderSnapshot, ShownRow } from "./message.ts";
 
-/** An open page: its command, its own query, and its cursor once the reader moved it. */
 const OpenPage = Schema.Struct({
   commandId: Schema.String,
   query: Schema.String,
   maybeCursor: Schema.Option(Schema.String),
 });
+
 type OpenPage = typeof OpenPage.Type;
 
 /** Schema for a command palette: its Dialog, the commands' query and cursor (kept while a
@@ -53,19 +66,20 @@ type OpenPage = typeof OpenPage.Type;
  *  last query's rows) cannot name a row yet: `cursorShift` counts the arrows, which the next
  *  render applies from the cursor's row, and `isEnterPending` an Enter. Such a key returns
  *  `ReportPendingKeys`, which reads the row the next render shows the cursor on: it becomes
- *  the cursor, and a waiting Enter acts on it. */
+ *  the cursor, and a waiting Enter acts on it. `renderGeneration` counts the changes to the
+ *  page, the query and the waiting arrows, so a report from an older render is refused. */
 export const Model = Schema.Struct({
   dialog: Dialog.Model,
   query: Schema.String,
   maybeCursor: Schema.Option(Schema.String),
-  cursorShift: Schema.Number,
+  cursorShift: Schema.Finite,
   isEnterPending: Schema.Boolean,
+  renderGeneration: Schema.Int,
   maybePage: Schema.Option(OpenPage),
   maybePicking: Schema.Option(Schema.String),
 });
-export type Model = typeof Model.Type;
 
-// OUT MESSAGE
+export type Model = typeof Model.Type;
 
 /** Union of OutMessages a command palette reports. `SelectedCommand`: run this command; the
  *  palette has closed first, so what it opens takes focus. `SelectedChoice`: apply this choice
@@ -78,9 +92,8 @@ export const OutMessage = defineMessageUnion({
   SelectedChoice: { commandId: Schema.String, choiceId: Schema.String },
   Closed: {},
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a command palette with `init`. The `id` must be unique in the
  *  document. */
@@ -96,12 +109,11 @@ export const init = (config: InitConfig): Model => ({
   maybeCursor: Option.none(),
   cursorShift: 0,
   isEnterPending: false,
+  renderGeneration: 0,
   maybePage: Option.none(),
   maybePicking: Option.none(),
 });
 
-// ACCESSORS
-
 /** The palette's id, unique in the document. */
 export const id = (model: Model): string => Dialog.id(model.dialog);
 
@@ -111,20 +123,21 @@ export const isOpen = (model: Model): boolean => Dialog.isOpen(model.dialog);
 /** The words in the field: the open page's, or the commands'. A page whose choices are a
  *  function of what is typed reads it here. */
 export const query = (model: Model): string =>
-  Option.match(model.maybePage, { onNone: () => model.query, onSome: (page) => page.query });
+  Option.match(model.maybePage, {
+    onNone: () => model.query,
+    onSome: (page) => page.query,
+  });
 
 /** The command whose page is open. */
 export const maybePageId = (model: Model): Option.Option<string> =>
   Option.map(model.maybePage, (page) => page.commandId);
 
 /** Whether a picked choice is waiting for the caller's answer. */
-export const isPicking = (model: Model): boolean => Option.isSome(model.maybePicking);
-
-// COMMAND
+export const isPicking = (model: Model): boolean =>
+  Option.isSome(model.maybePicking);
 
-/** The data attribute on a row: its id. */
 const ROW_ATTRIBUTE = "value";
-/** The data attribute on a command's row that opens a page. */
+
 const OPENS_PAGE_ATTRIBUTE = "pixel-paper-palette-opens-page";
 
 /**
@@ -139,63 +152,63 @@ export const ScrollToCursor = FoldkitCommand.define("ScrollToCursor", {
   messages: [Message.CompletedScrollToCursor],
   execute: ({ paletteId }) =>
     Effect.suspend(() =>
-      Dom.scrollIntoView(`#${CSS.escape(listIdOf(paletteId))} [aria-selected="true"]`),
+      Dom.scrollIntoView(
+        `#${CSS.escape(listIdOf(paletteId))} [aria-selected="true"]`
+      )
     ).pipe(Effect.ignore, Effect.as(Message.CompletedScrollToCursor())),
 });
 
 const shownRowOf = (row: Element): Option.Option<ShownRow> =>
-  Option.map(Option.fromNullishOr(row.getAttribute(`data-${ROW_ATTRIBUTE}`)), (rowId) => ({
-    id: rowId,
-    isHeld: row.getAttribute("aria-disabled") === "true",
-    hasPage: row.hasAttribute(`data-${OPENS_PAGE_ATTRIBUTE}`),
-  }));
-
-// The page the palette's render shows and the row it shows the cursor on, from its markup.
-const shownCursorOf = (paletteId: string) => {
-  const find = (selector: string): Option.Option<Element> =>
-    Option.fromNullishOr(document.querySelector(selector));
-  return {
-    maybeShownPage: Option.flatMap(
-      find(`#${CSS.escape(paletteId)} [data-${PAGE_ATTRIBUTE}]`),
-      shownPageOf,
-    ),
-    maybeRow: Option.flatMap(
-      find(`#${CSS.escape(listIdOf(paletteId))} ${OPTION_SELECTOR}[aria-selected="true"]`),
-      shownRowOf,
+  Option.map(
+    Option.fromNullishOr(row.getAttribute(`data-${ROW_ATTRIBUTE}`)),
+    (rowId) => ({
+      id: rowId,
+      isHeld: row.getAttribute("aria-disabled") === "true",
+      hasPage: row.hasAttribute(`data-${OPENS_PAGE_ATTRIBUTE}`),
+    })
+  );
+
+const find = (selector: string): Option.Option<Element> =>
+  Option.fromNullishOr(document.querySelector(selector));
+
+const shownCursorOf = (paletteId: string): Option.Option<ShownRow> =>
+  Option.flatMap(
+    find(
+      `#${CSS.escape(listIdOf(paletteId))} ${OPTION_SELECTOR}[aria-selected="true"]`
     ),
-  };
-};
+    shownRowOf
+  );
 
 /** Reads, once the next render has committed, the row it shows the cursor on while keys wait
- *  for it (see `Model`), with the query and waiting arrows the Model had as they waited, so
- *  update knows whether that render is still the list. The palette's update returns it as a
- *  key waits; in a Scene, resolve it with `Message.CompletedReportPendingKeys`. */
+ *  for it (see `Model`), with the Model's `renderGeneration` as they waited, so update knows
+ *  whether that render is still the list. The palette's update returns it as a key waits; in
+ *  a Scene, resolve it with `Message.CompletedReportPendingKeys`. */
 export const ReportPendingKeys = FoldkitCommand.define("ReportPendingKeys", {
-  args: { paletteId: Schema.String, shownQuery: Schema.String, shownShift: Schema.Number },
+  args: {
+    paletteId: Schema.String,
+    renderGeneration: Schema.Int,
+  },
   messages: [Message.CompletedReportPendingKeys],
-  execute: ({ paletteId, shownQuery, shownShift }) =>
+  execute: ({ paletteId, renderGeneration }) =>
     Effect.gen(function* () {
       yield* Render.afterCommit;
-      const shown = yield* Effect.sync(() => shownCursorOf(paletteId));
-      return Message.CompletedReportPendingKeys({ shownQuery, shownShift, ...shown });
+      const maybeRow = yield* Effect.sync(() => shownCursorOf(paletteId));
+
+      return Message.CompletedReportPendingKeys({ renderGeneration, maybeRow });
     }),
 });
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
-const scrollPaletteToCursor = (model: Model) => ScrollToCursor({ paletteId: id(model) });
+const scrollPaletteToCursor = (model: Model) =>
+  ScrollToCursor({ paletteId: id(model) });
 
 const reportPendingKeys = (model: Model) =>
   ReportPendingKeys({
     paletteId: id(model),
-    shownQuery: query(model),
-    shownShift: model.cursorShift,
+    renderGeneration: model.renderGeneration,
   });
 
-// Focus goes back to the field as the view changes between the commands and a page (the Back
-// button that had it is gone).
 const focusField = (model: Model) => Focus({ id: fieldId(id(model)) });
 
 const toClosed = Dialog.OutMessage.match<OutMessage>({
@@ -206,7 +219,8 @@ 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: toClosed,
 });
 
@@ -216,9 +230,14 @@ const freshPage = (commandId: string): OpenPage => ({
   maybeCursor: Option.none(),
 });
 
-/** No key waits for the next render (see `Model`). */
+const nextGeneration = (generation: number): number => generation + 1;
+
 const clearPendingKeys = (model: Model): Model =>
-  modifyFields(model, { cursorShift: () => 0, isEnterPending: () => false });
+  modifyFields(model, {
+    cursorShift: () => 0,
+    isEnterPending: () => false,
+    renderGeneration: nextGeneration,
+  });
 
 const fresh = (model: Model, maybePage: Option.Option<OpenPage>): Model =>
   clearPendingKeys(
@@ -227,38 +246,45 @@ const fresh = (model: Model, maybePage: Option.Option<OpenPage>): Model =>
       maybeCursor: () => Option.none(),
       maybePage: () => maybePage,
       maybePicking: () => Option.none(),
-    }),
+    })
   );
 
-/** Makes the Model follow what the view showed: a page whose command is gone is dropped (with
- *  a pick out on it), so the commands' query and cursor take the reader's input again. */
-const followShown = (model: Model, maybeShownPage: Option.Option<string>): Model =>
+const followShown = (
+  model: Model,
+  maybeShownPage: Option.Option<string>
+): Model =>
   Equal.equals(maybePageId(model), maybeShownPage)
     ? model
     : clearPendingKeys(
         modifyFields(model, {
           maybePage: () => Option.map(maybeShownPage, freshPage),
           maybePicking: () => Option.none(),
-        }),
+        })
       );
 
-const modifyPage = (model: Model, modifyOpenPage: (page: OpenPage) => OpenPage): Model =>
-  modifyFields(model, { maybePage: Option.map(modifyOpenPage) });
+const modifyPage = (
+  model: Model,
+  modifyOpenPage: (page: OpenPage) => OpenPage
+): Model => modifyFields(model, { maybePage: Option.map(modifyOpenPage) });
 
-const unlessPicking = (model: Model, next: (model: Model) => UpdateReturn): UpdateReturn =>
-  isPicking(model) ? { model } : next(model);
+const unlessPicking = (
+  model: Model,
+  next: (model: Model) => UpdateReturn
+): UpdateReturn => (isPicking(model) ? { model } : next(model));
 
 const leavePage = (model: Model): UpdateReturn =>
   isPicking(model) || Option.isNone(model.maybePage)
     ? { model }
     : {
-        model: clearPendingKeys(modifyFields(model, { maybePage: () => Option.none() })),
+        model: clearPendingKeys(
+          modifyFields(model, { maybePage: () => Option.none() })
+        ),
         commands: [focusField(model), scrollPaletteToCursor(model)],
       };
 
 const openPage = (model: Model, commandId: string): UpdateReturn => ({
   model: clearPendingKeys(
-    modifyFields(model, { maybePage: () => Option.some(freshPage(commandId)) }),
+    modifyFields(model, { maybePage: () => Option.some(freshPage(commandId)) })
   ),
   commands: [focusField(model), scrollPaletteToCursor(model)],
 });
@@ -266,39 +292,44 @@ const openPage = (model: Model, commandId: string): UpdateReturn => ({
 const selectCommand = (model: Model, commandId: string): UpdateReturn =>
   pipe(
     dialogFold.close(model),
-    Update.withOutMessage(OutMessage.SelectedCommand({ id: commandId })),
+    Update.withOutMessage(OutMessage.SelectedCommand({ id: commandId }))
   );
 
 const moveCursor = (model: Model, cursorId: string): Model =>
   modifyFields(
     Option.match(model.maybePage, {
-      onNone: () => modifyFields(model, { maybeCursor: () => Option.some(cursorId) }),
+      onNone: () =>
+        modifyFields(model, { maybeCursor: () => Option.some(cursorId) }),
       onSome: () =>
         modifyPage(model, (page) =>
-          modifyFields(page, { maybeCursor: () => Option.some(cursorId) }),
+          modifyFields(page, { maybeCursor: () => Option.some(cursorId) })
         ),
     }),
-    { cursorShift: () => 0 },
+    { cursorShift: () => 0, renderGeneration: nextGeneration }
   );
 
-// A pick drops the keys waiting for the next render: the row picked is the one acted on.
-const pick = (model: Model, commandId: string, choiceId: string): UpdateReturn => ({
+const pick = (
+  model: Model,
+  commandId: string,
+  choiceId: string
+): UpdateReturn => ({
   model: clearPendingKeys(
-    modifyFields(moveCursor(model, choiceId), { maybePicking: () => Option.some(choiceId) }),
+    modifyFields(moveCursor(model, choiceId), {
+      maybePicking: () => Option.some(choiceId),
+    })
   ),
   outMessage: OutMessage.SelectedChoice({ commandId, choiceId }),
 });
 
-// What a click on a row or Enter on the cursor's does: nothing when it is held, else pick it
-// on a page, open its page, or select it. Never while a pick is out: the click and the keys
-// come through `unlessPicking`, and a pick clears the waiting Enter `settlePending` runs.
 const runRow = (model: Model, row: ShownRow): UpdateReturn => {
   if (row.isHeld) {
     return { model };
   }
+
   return Option.match(maybePageId(model), {
     onSome: (commandId) => pick(model, commandId, row.id),
-    onNone: () => (row.hasPage ? openPage(model, row.id) : selectCommand(model, row.id)),
+    onNone: () =>
+      row.hasPage ? openPage(model, row.id) : selectCommand(model, row.id),
   });
 };
 
@@ -308,40 +339,50 @@ const maybeCurrentCursor = (model: Model): Option.Option<string> =>
     onSome: (page) => page.maybeCursor,
   });
 
-const ARROW_STEP: Readonly<Record<ArrowKey, number>> = { ArrowUp: -1, ArrowDown: 1 };
+const ARROW_STEP: Readonly<Record<ArrowKey, number>> = {
+  ArrowUp: -1,
+  ArrowDown: 1,
+};
 
-type ShownList = Omit<typeof Message.PressedEnter.Type, "_tag" | "maybeShownPage">;
+const isListed = (
+  rows: ReadonlyArray<Readonly<{ id: string }>>,
+  rowId: string
+): boolean => Array.some(rows, (row) => row.id === rowId);
 
-const isListed = (rows: ReadonlyArray<Readonly<{ id: string }>>, rowId: string): boolean =>
-  Array.some(rows, (row) => row.id === rowId);
+type CursorAsShown =
+  | Readonly<{ _tag: "Listed"; rowId: string }>
+  | Readonly<{ _tag: "Shown"; maybeRowId: Option.Option<string> }>
+  | Readonly<{ _tag: "Waiting" }>;
 
-// NOTE: where the cursor is among the rows a key carries (see `Model`). With no arrows waiting
-// it is the Model's cursor while that row is listed, else the shown one, so each key acts from
-// where the last left it, also when several come before the next render; with arrows waiting,
-// the shown row once the render has applied them. Rows that are not the list: none, and the
-// key waits for the next render.
-const cursorAsShown = (model: Model, shown: ShownList): Option.Option<Option.Option<string>> => {
+const cursorAsShown = (model: Model, shown: RenderSnapshot): CursorAsShown => {
   const { rows, maybeShownCursor, shownQuery, shownShift } = shown;
   const isTheList = shownQuery === query(model);
+  const hasNoWaitingArrows = model.cursorShift === 0;
+  const hasAppliedWaitingArrows = shownShift === model.cursorShift;
 
-  if (isTheList && model.cursorShift === 0) {
-    return Option.some(
-      Option.orElse(
-        Option.filter(maybeCurrentCursor(model), (rowId) => isListed(rows, rowId)),
-        () => maybeShownCursor,
+  if (isTheList && hasNoWaitingArrows) {
+    return Option.match(
+      Option.filter(maybeCurrentCursor(model), (rowId) =>
+        isListed(rows, rowId)
       ),
+      {
+        onSome: (rowId): CursorAsShown => ({ _tag: "Listed", rowId }),
+        onNone: (): CursorAsShown => ({
+          _tag: "Shown",
+          maybeRowId: maybeShownCursor,
+        }),
+      }
     );
-  } else if (isTheList && shownShift === model.cursorShift) {
-    return Option.some(maybeShownCursor);
-  } else {
-    return Option.none();
+  } else if (isTheList && hasAppliedWaitingArrows) {
+    return { _tag: "Shown", maybeRowId: maybeShownCursor };
   }
+
+  return { _tag: "Waiting" };
 };
 
-// The cursor moves to a row and the waiting arrows are spent; a waiting Enter asks for the
-// next render again, which shows the cursor on that row.
 const stepTo = (model: Model, rowId: string): UpdateReturn => {
   const moved = moveCursor(model, rowId);
+
   return {
     model: moved,
     commands: [
@@ -351,86 +392,104 @@ const stepTo = (model: Model, rowId: string): UpdateReturn => {
   };
 };
 
-// The row `steps` rows on from the cursor's, held at the ends. Update's arrows, one at a time,
-// and the view's waiting arrows, all at once, both land through this, so they land alike.
 const rowAfter = <Row extends Readonly<{ id: string }>>(
-  rows: ReadonlyArray<Row>,
+  rows: readonly Row[],
   maybeFrom: Option.Option<string>,
-  steps: number,
+  steps: number
 ): Option.Option<Row> =>
   pipe(
     maybeFrom,
-    Option.flatMap((rowId) => Array.findFirstIndex(rows, (row) => row.id === rowId)),
-    Option.flatMap((index) =>
-      Array.get(rows, Math.min(Math.max(index + steps, 0), rows.length - 1)),
+    Option.flatMap((rowId) =>
+      Array.findFirstIndex(rows, (row) => row.id === rowId)
     ),
+    Option.flatMap((index) =>
+      Array.get(rows, Math.min(Math.max(index + steps, 0), rows.length - 1))
+    )
   );
 
 const stepFrom = (
   model: Model,
   key: ArrowKey,
-  rows: ReadonlyArray<ShownRow>,
-  maybeFrom: Option.Option<string>,
+  rows: readonly ShownRow[],
+  maybeFrom: Option.Option<string>
 ): UpdateReturn =>
   Option.match(rowAfter(rows, maybeFrom, ARROW_STEP[key]), {
     onNone: () => ({ model }),
     onSome: (row) => stepTo(model, row.id),
   });
 
-// An arrow that cannot name a row yet waits for the next render, which applies it from the
-// cursor's row (see `Model`).
 const pendArrow = (model: Model, key: ArrowKey): UpdateReturn => {
-  const pending = modifyFields(model, { cursorShift: (shift) => shift + ARROW_STEP[key] });
-  return { model: pending, commands: [scrollPaletteToCursor(model), reportPendingKeys(pending)] };
+  const pending = modifyFields(model, {
+    cursorShift: (shift) => shift + ARROW_STEP[key],
+    renderGeneration: nextGeneration,
+  });
+
+  return {
+    model: pending,
+    commands: [scrollPaletteToCursor(model), reportPendingKeys(pending)],
+  };
 };
 
-// An arrow steps one row from the cursor as its render showed it, and stops at the ends.
-const pressArrow = (model: Model, key: ArrowKey, shown: ShownList): UpdateReturn =>
-  Option.match(cursorAsShown(model, shown), {
-    onNone: () => pendArrow(model, key),
-    onSome: (maybeFrom) => stepFrom(model, key, shown.rows, maybeFrom),
+const pressArrow = (
+  model: Model,
+  key: ArrowKey,
+  shown: RenderSnapshot
+): UpdateReturn =>
+  Match.valueTags(cursorAsShown(model, shown), {
+    Listed: ({ rowId }) => stepFrom(model, key, shown.rows, Option.some(rowId)),
+    Shown: ({ maybeRowId }) => stepFrom(model, key, shown.rows, maybeRowId),
+    Waiting: () => pendArrow(model, key),
   });
 
 const pendEnter = (model: Model): UpdateReturn => {
   const pending = modifyFields(model, { isEnterPending: () => true });
+
   return { model: pending, commands: [reportPendingKeys(pending)] };
 };
 
-// An Enter acts on the cursor's row as its render showed it, or waits for the next render.
-const pressEnter = (model: Model, shown: ShownList): UpdateReturn =>
-  Option.match(cursorAsShown(model, shown), {
-    onNone: () => pendEnter(model),
-    onSome: (maybeRowId) =>
-      pipe(
-        maybeRowId,
-        Option.flatMap((rowId) => Array.findFirst(shown.rows, (row) => row.id === rowId)),
-        Option.match({ onNone: () => ({ model }), onSome: (row) => runRow(model, row) }),
-      ),
+const enterOn = (
+  model: Model,
+  rows: readonly ShownRow[],
+  maybeRowId: Option.Option<string>
+): UpdateReturn =>
+  pipe(
+    maybeRowId,
+    Option.flatMap((rowId) => Array.findFirst(rows, (row) => row.id === rowId)),
+    Option.match({
+      onNone: () => ({ model }),
+      onSome: (row) => runRow(model, row),
+    })
+  );
+
+const pressEnter = (model: Model, shown: RenderSnapshot): UpdateReturn =>
+  Match.valueTags(cursorAsShown(model, shown), {
+    Listed: ({ rowId }) => enterOn(model, shown.rows, Option.some(rowId)),
+    Shown: ({ maybeRowId }) => enterOn(model, shown.rows, maybeRowId),
+    Waiting: () => pendEnter(model),
   });
 
-const isPending = (model: Model): boolean => model.cursorShift !== 0 || model.isEnterPending;
+const isPending = (model: Model): boolean =>
+  model.cursorShift !== 0 || model.isEnterPending;
 
 type PendingReport = typeof Message.CompletedReportPendingKeys.Type;
 
-// A report settles the waiting keys (see `Model`) only from the render the Model is at. One from
-// a render it has moved on from (another page, query or count of arrows) is left: the key that
-// moved it on cleared the waiting keys or asked again.
 const settlePending = (model: Model, report: PendingReport): UpdateReturn => {
-  const { maybeShownPage, shownQuery, shownShift, maybeRow } = report;
-  const isCurrent =
-    Equal.equals(maybePageId(model), maybeShownPage) &&
-    shownShift === model.cursorShift &&
-    shownQuery === query(model);
-  if (!isPending(model) || !isCurrent) {
+  if (!isPending(model) || report.renderGeneration !== model.renderGeneration) {
     return { model };
   }
+
   const settled = clearPendingKeys(model);
-  return Option.match(maybeRow, {
+
+  return Option.match(report.maybeRow, {
     onNone: () => ({ model: settled }),
     onSome: (row) => {
       const moved = moveCursor(settled, row.id);
       const ran = model.isEnterPending ? runRow(moved, row) : { model: moved };
-      return { ...ran, commands: [scrollPaletteToCursor(model), ...(ran.commands ?? [])] };
+
+      return {
+        ...ran,
+        commands: [scrollPaletteToCursor(model), ...(ran.commands ?? [])],
+      };
     },
   });
 };
@@ -438,35 +497,49 @@ const settlePending = (model: Model, report: PendingReport): UpdateReturn => {
 const updateQuery = (model: Model, value: string): Model =>
   clearPendingKeys(
     Option.match(model.maybePage, {
-      onNone: () => modifyFields(model, { query: () => value, maybeCursor: () => Option.none() }),
+      onNone: () =>
+        modifyFields(model, {
+          query: () => value,
+          maybeCursor: () => Option.none(),
+        }),
       onSome: () =>
         modifyPage(model, (page) =>
-          modifyFields(page, { query: () => value, maybeCursor: () => Option.none() }),
+          modifyFields(page, {
+            query: () => value,
+            maybeCursor: () => Option.none(),
+          })
         ),
-    }),
+    })
   );
 
 /** Processes a command palette Message and returns the next Model, Commands and OutMessage. */
 export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
-    GotDialogMessage: ({ message: dialogMessage }) => dialogFold.update(model, dialogMessage),
+    GotDialogMessage: ({ message: dialogMessage }) =>
+      dialogFold.update(model, dialogMessage),
     UpdatedQuery: ({ value, maybeShownPage }) =>
       unlessPicking(followShown(model, maybeShownPage), (shown) => ({
         model: updateQuery(shown, value),
         commands: [scrollPaletteToCursor(shown)],
       })),
-    PressedArrowKey: ({ key, maybeShownPage, ...shown }) =>
-      unlessPicking(followShown(model, maybeShownPage), (current) =>
-        pressArrow(current, key, shown),
+    PressedArrowKey: ({ key, snapshot }) =>
+      unlessPicking(followShown(model, snapshot.maybeShownPage), (current) =>
+        pressArrow(current, key, snapshot)
       ),
-    PressedEarlyArrowKey: ({ key }) => unlessPicking(model, (current) => pendArrow(current, key)),
+    PressedEarlyArrowKey: ({ key }) =>
+      unlessPicking(model, (current) => pendArrow(current, key)),
     CompletedReportPendingKeys: (report) => settlePending(model, report),
-    PressedEnter: ({ maybeShownPage, ...shown }) =>
-      unlessPicking(followShown(model, maybeShownPage), (current) => pressEnter(current, shown)),
+    PressedEnter: ({ snapshot }) =>
+      unlessPicking(followShown(model, snapshot.maybeShownPage), (current) =>
+        pressEnter(current, snapshot)
+      ),
     PressedEarlyEnter: () => unlessPicking(model, pendEnter),
-    PressedBackspace: ({ maybeShownPage }) => leavePage(followShown(model, maybeShownPage)),
+    PressedBackspace: ({ maybeShownPage }) =>
+      leavePage(followShown(model, maybeShownPage)),
     ClickedRow: ({ row, maybeShownPage }) =>
-      unlessPicking(followShown(model, maybeShownPage), (current) => runRow(current, row)),
+      unlessPicking(followShown(model, maybeShownPage), (current) =>
+        runRow(current, row)
+      ),
     ClickedBack: () => leavePage(model),
     CompletedScrollToCursor: () => ({ model }),
     CompletedFocus: () => ({ model }),
@@ -486,13 +559,19 @@ export type OpenAtConfig = Readonly<{
 }>;
 
 /** Opens the palette straight on a command's page. Back still leads to the commands. */
-export const openAt = (model: Model, config: OpenAtConfig): Update.Return<Model, Message> =>
+export const openAt = (
+  model: Model,
+  config: OpenAtConfig
+): Update.Return<Model, Message> =>
   dialogFold.open(fresh(model, Option.some(freshPage(config.commandId))));
 
 /** The caller applied the choice: the palette closes. An answer for a pick that is no longer
  *  out (the palette was dismissed, its page left, or a newer pick replaced it) changes
  *  nothing; the caller keeps the write it made. */
-export const pickSucceeded = (model: Model, choiceId: string): Update.Return<Model, Message> =>
+export const pickSucceeded = (
+  model: Model,
+  choiceId: string
+): Update.Return<Model, Message> =>
   Option.contains(model.maybePicking, choiceId)
     ? dialogFold.close(fresh(model, Option.none()))
     : { model };
@@ -500,13 +579,14 @@ export const pickSucceeded = (model: Model, choiceId: string): Update.Return<Mod
 /** The caller refused the choice: the page stays with its query, focus and the cursor on that
  *  choice; say why in the view's `toDetailView`. An answer for a pick that is no longer out
  *  changes nothing. */
-export const pickFailed = (model: Model, choiceId: string): Update.Return<Model, Message> =>
+export const pickFailed = (
+  model: Model,
+  choiceId: string
+): Update.Return<Model, Message> =>
   Option.contains(model.maybePicking, choiceId)
     ? { model: modifyFields(model, { maybePicking: () => Option.none() }) }
     : { model };
 
-// SUBSCRIPTIONS
-
 const earlyKeySubscriptions = Subscription.make<Model, Message>()((entry) => ({
   earlyKeys: entry(
     { maybeOpenId: Schema.Option(Schema.String) },
@@ -515,8 +595,11 @@ const earlyKeySubscriptions = Subscription.make<Model, Message>()((entry) => ({
         maybeOpenId: isOpen(model) ? Option.some(id(model)) : Option.none(),
       }),
       dependenciesToStream: ({ maybeOpenId }) =>
-        Option.match(maybeOpenId, { onNone: () => Stream.empty, onSome: earlyKeys }),
-    },
+        Option.match(maybeOpenId, {
+          onNone: () => Stream.empty,
+          onSome: earlyKeys,
+        }),
+    }
   ),
 }));
 
@@ -528,13 +611,11 @@ const earlyKeySubscriptions = Subscription.make<Model, Message>()((entry) => ({
 export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
   prefixKeys(keyPrefix, earlyKeySubscriptions);
 
-// VIEW
-
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. */
 export type ViewInputs = Readonly<{
   /** Built from what the caller snapshotted as the palette opened (see `open`). A command
    *  that leaves while its page is open sends the reader back to the commands. */
-  commands: ReadonlyArray<Command>;
+  commands: readonly Command[];
   /** What the commands act on, kept on every page (the selected item's name). Defaults to
    *  `"commands"`. */
   scope?: string;
@@ -554,85 +635,113 @@ type ShownPageState = Readonly<{ page: Page; state: OpenPage }>;
 type Shown = Readonly<{
   maybePage: Option.Option<ShownPageState>;
   rows: ReadonlyArray<Choice | Command>;
-  /** The rows a page's query keeps only to show where a row it finds sits in the tree. */
   contextIds: HashSet.HashSet<string>;
   maybeCursorId: Option.Option<string>;
 }>;
 
-const pageOf = (commands: ReadonlyArray<Command>, state: OpenPage): Option.Option<ShownPageState> =>
+const pageOf = (
+  commands: readonly Command[],
+  state: OpenPage
+): Option.Option<ShownPageState> =>
   pipe(
     Array.findFirst(commands, (command) => command.id === state.commandId),
     Option.flatMap((command) => Option.fromNullishOr(command.page)),
-    Option.map((page) => ({ page, state })),
+    Option.map((page) => ({ page, state }))
   );
 
 const firstListed = (
-  rows: ReadonlyArray<Choice>,
-  candidates: ReadonlyArray<Option.Option<string>>,
+  rows: ReadonlyArray<Readonly<{ id: string }>>,
+  candidates: ReadonlyArray<Option.Option<string>>
 ): Option.Option<string> =>
-  Array.findFirst(Array.getSomes(candidates), (cursorId) => isListed(rows, cursorId));
+  Array.findFirst(Array.getSomes(candidates), (cursorId) =>
+    isListed(rows, cursorId)
+  );
 
-const firstId = (rows: ReadonlyArray<Choice | Command>): Option.Option<string> =>
-  Option.map(Array.head(rows), (row) => row.id);
+const firstId = (
+  rows: ReadonlyArray<Readonly<{ id: string }>>
+): Option.Option<string> => Option.map(Array.head(rows), (row) => row.id);
+
+const cursorRowFallback = ({
+  maybeMovedTo,
+  rows,
+  found,
+  pageDefaults,
+}: Readonly<{
+  maybeMovedTo: Option.Option<string>;
+  rows: ReadonlyArray<Readonly<{ id: string }>>;
+  found: ReadonlyArray<Readonly<{ id: string }>>;
+  pageDefaults: ReadonlyArray<Option.Option<string>>;
+}>): Option.Option<string> =>
+  pipe(
+    Option.filter(maybeMovedTo, (rowId) => isListed(rows, rowId)),
+    Option.orElse(() => firstListed(found, pageDefaults)),
+    Option.orElse(() => firstId(found))
+  );
 
 const shifted = (shown: Shown, shift: number): Shown => ({
   ...shown,
-  maybeCursorId: Option.map(rowAfter(shown.rows, shown.maybeCursorId, shift), (row) => row.id),
+  maybeCursorId: Option.map(
+    rowAfter(shown.rows, shown.maybeCursorId, shift),
+    (row) => row.id
+  ),
 });
 
-// NOTE: arrows waiting for the view count from the cursor's row. When that row has left the
-// list (the application changed it in between), they are dropped rather than counted from
-// another row.
-const shownOf = (model: Model, commands: ReadonlyArray<Command>): Shown => {
-  const unshifted = unshiftedOf(model, commands);
-  const isAnchored = Option.match(maybeCurrentCursor(model), {
-    onNone: () => true,
-    onSome: (rowId) => Option.contains(unshifted.maybeCursorId, rowId),
-  });
-  return isAnchored ? shifted(unshifted, model.cursorShift) : unshifted;
-};
+const unshiftedOf = (model: Model, commands: readonly Command[]): Shown => {
+  const maybePage = Option.flatMap(model.maybePage, (state) =>
+    pageOf(commands, state)
+  );
 
-// What the view shows of the Model with `commands`: the open page while its command is
-// listed, the rows its query finds (on a tree page, with the rows they sit under), and the
-// cursor's row: the row the reader moved it to while that row is listed, else the page's
-// `start`, else its `current`, else the first row, these three only among the rows the query
-// finds; none when nothing is listed.
-const unshiftedOf = (model: Model, commands: ReadonlyArray<Command>): Shown => {
-  const maybePage = Option.flatMap(model.maybePage, (state) => pageOf(commands, state));
   return Option.match(maybePage, {
     onNone: () => {
       const rows = findCommands(commands, model.query);
+
       return {
         maybePage,
         rows,
         contextIds: HashSet.empty(),
-        maybeCursorId: pipe(
-          Option.filter(model.maybeCursor, (rowId) => isListed(rows, rowId)),
-          Option.orElse(() => firstId(rows)),
-        ),
+        maybeCursorId: cursorRowFallback({
+          maybeMovedTo: model.maybeCursor,
+          rows,
+          found: rows,
+          pageDefaults: [],
+        }),
       };
     },
     onSome: ({ page, state }) => {
       const { rows, found, contextIds } = pageChoices(page, state.query);
+
       return {
         maybePage,
         rows,
         contextIds,
-        maybeCursorId: pipe(
-          Option.filter(state.maybeCursor, (rowId) => isListed(rows, rowId)),
-          Option.orElse(() =>
-            firstListed(found, [
-              Option.fromNullishOr(page.start),
-              Option.fromNullishOr(page.current),
-            ]),
-          ),
-          Option.orElse(() => firstId(found)),
-        ),
+        maybeCursorId: cursorRowFallback({
+          maybeMovedTo: state.maybeCursor,
+          rows,
+          found,
+          pageDefaults: [
+            Option.fromNullishOr(page.start),
+            Option.fromNullishOr(page.current),
+          ],
+        }),
       };
     },
   });
 };
 
+const hasCursorRowLeft = (model: Model, unshifted: Shown): boolean =>
+  Option.exists(
+    maybeCurrentCursor(model),
+    (rowId) => !Option.contains(unshifted.maybeCursorId, rowId)
+  );
+
+const dropArrowsWhenCursorRowGone = (model: Model, unshifted: Shown): Shown =>
+  hasCursorRowLeft(model, unshifted)
+    ? unshifted
+    : shifted(unshifted, model.cursorShift);
+
+const shownOf = (model: Model, commands: readonly Command[]): Shown =>
+  dropArrowsWhenCursorRowGone(model, unshiftedOf(model, commands));
+
 /** The row the cursor is on as the view shows it with `commands`: the row the reader moved it
  *  to while that row is listed, else the page's `start` or `current` while the query finds it,
  *  else the first row the query finds; none when nothing is listed. Compare it before and after
@@ -641,7 +750,7 @@ const unshiftedOf = (model: Model, commands: ReadonlyArray<Command>): Shown => {
  *  it, and the list its scroll. */
 export const maybeCursorId = (
   model: Model,
-  commands: ReadonlyArray<Command>,
+  commands: readonly Command[]
 ): Option.Option<string> => shownOf(model, commands).maybeCursorId;
 
 const isCommand = (row: Choice | Command): row is Command => "group" in row;
@@ -655,70 +764,76 @@ const isContextRow = (shown: Shown, row: Choice | Command): boolean =>
 const levelOf = (row: Choice | Command): Option.Option<number> =>
   "level" in row ? Option.fromNullishOr(row.level) : Option.none();
 
-// What a row is as this render shows it, which Enter acts on as a click would.
 const shownRowFor = (shown: Shown, row: Choice | Command): ShownRow => ({
   id: row.id,
   isHeld: row.isDisabled === true || isCurrentRow(shown, row),
   hasPage: isCommand(row) && row.page !== undefined,
 });
 
-// The query the shown rows were found by: the open page's, or the commands' when the view
-// shows them (also for a page whose command left).
 const shownQueryOf = (model: Model, shown: Shown): string =>
-  Option.match(shown.maybePage, { onNone: () => model.query, onSome: ({ state }) => state.query });
+  Option.match(shown.maybePage, {
+    onNone: () => model.query,
+    onSome: ({ state }) => state.query,
+  });
 
-// The command whose page the view shows.
 const shownPageIdOf = (shown: Shown): Option.Option<string> =>
   Option.map(shown.maybePage, ({ state }) => state.commandId);
 
-// NOTE: the field's keys that act on the rows are taken here, where the rows are known, as a
-// Mount on the document cannot know them: ↑, ↓ and Enter carry what this render shows (see
-// `Model`), and each is taken from the field (its default prevented). A modified key and every
-// key while a pick is out are left to the field.
-const fieldKeyDown =
+const renderedListOf = (model: Model, shown: Shown): RenderSnapshot => ({
+  rows: Array.map(shown.rows, (row) => shownRowFor(shown, row)),
+  maybeShownCursor: shown.maybeCursorId,
+  maybeShownPage: shownPageIdOf(shown),
+  shownQuery: shownQueryOf(model, shown),
+  shownShift: model.cursorShift,
+});
+
+const rowKeysWithRenderedList =
   (model: Model, shown: Shown) =>
   (key: string, modifiers: KeyboardModifiers): Option.Option<Message> => {
-    const list = {
-      rows: Array.map(shown.rows, (row) => shownRowFor(shown, row)),
-      maybeShownCursor: shown.maybeCursorId,
-      maybeShownPage: shownPageIdOf(shown),
-      shownQuery: shownQueryOf(model, shown),
-      shownShift: model.cursorShift,
-    };
+    const snapshot = renderedListOf(model, shown);
+
     return isPicking(model) || !isPlain(modifiers)
       ? Option.none()
       : Match.value(key).pipe(
           Match.withReturnType<Option.Option<Message>>(),
           Match.whenOr("ArrowDown", "ArrowUp", (arrow) =>
-            Option.some(Message.PressedArrowKey({ key: arrow, ...list })),
+            Option.some(Message.PressedArrowKey({ key: arrow, snapshot }))
+          ),
+          Match.when("Enter", () =>
+            Option.some(Message.PressedEnter({ snapshot }))
           ),
-          Match.when("Enter", () => Option.some(Message.PressedEnter(list))),
-          Match.orElse(() => Option.none()),
+          Match.orElse(() => Option.none())
         );
   };
 
-const optionId = (paletteId: string, index: number): string => `${paletteId}-option-${index}`;
+const optionId = (paletteId: string, index: number): string =>
+  `${paletteId}-option-${index}`;
 
 const NOTHING_FOUND = "nothing matches · try fewer letters";
 const COMMANDS_FOOT = "↑ ↓ move · enter runs · esc closes";
 const PAGE_FOOT = "↑ ↓ move · enter picks · ⌫ back · esc closes";
 
-const resultWord = (count: number): string => (count === 1 ? "result" : "results");
+const resultWord = (count: number): string =>
+  count === 1 ? "result" : "results";
 
 const countWords = (count: number): string =>
-  count === 0 ? "Nothing matches." : `${count.toLocaleString(LOCALE)} ${resultWord(count)}.`;
+  count === 0
+    ? "Nothing matches."
+    : `${count.toLocaleString(LOCALE)} ${resultWord(count)}.`;
 
 const rowPartsView = (
   model: Model,
   shown: Shown,
   row: Choice | Command,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const hint = row.isDisabled === true ? (row.reason ?? row.hint) : row.hint;
+
   const opens = h.span(
     [h.Class("glyph opens"), h.AriaHidden(true)],
-    [Glyph.view({ name: "caret-right" }, h)],
+    [Glyph.view({ name: "caret-right" }, h)]
   );
+
   return [
     ...(row.glyph === undefined
       ? []
@@ -727,13 +842,17 @@ const rowPartsView = (
       [h.Class("palette-label")],
       [
         row.label,
-        ...(isContextRow(shown, row) ? [h.span([h.Class("sr-only")], [" (context)"])] : []),
-      ],
+        ...(isContextRow(shown, row)
+          ? [h.span([h.Class("sr-only")], [" (context)"])]
+          : []),
+      ]
     ),
     ...(Option.contains(model.maybePicking, row.id)
       ? [h.span([h.Class("cursor"), h.AriaHidden(true)])]
       : []),
-    ...(isCurrentRow(shown, row) ? [h.span([h.Class("tag")], ["current"])] : []),
+    ...(isCurrentRow(shown, row)
+      ? [h.span([h.Class("tag")], ["current"])]
+      : []),
     ...(hint === undefined ? [] : [h.span([h.Class("hint")], [hint])]),
     ...(shownRowFor(shown, row).hasPage ? [opens] : []),
   ];
@@ -744,9 +863,10 @@ const rowView = (
   shown: Shown,
   row: Choice | Command,
   index: number,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const shownRow = shownRowFor(shown, row);
+
   return h.keyed("div")(
     row.id,
     [
@@ -763,8 +883,8 @@ const rowView = (
             ...(row.isAuthored === true ? ["authored"] : []),
             ...(isContextRow(shown, row) ? ["context"] : []),
           ],
-          " ",
-        ),
+          " "
+        )
       ),
       ...Option.match(levelOf(row), {
         onNone: () => [],
@@ -772,32 +892,59 @@ const rowView = (
       }),
       ...(shownRow.isHeld || isPicking(model)
         ? []
-        : [h.OnClick(Message.ClickedRow({ row: shownRow, maybeShownPage: shownPageIdOf(shown) }))]),
+        : [
+            h.OnClick(
+              Message.ClickedRow({
+                row: shownRow,
+                maybeShownPage: shownPageIdOf(shown),
+              })
+            ),
+          ]),
     ],
-    rowPartsView(model, shown, row, h),
+    rowPartsView(model, shown, row, h)
   );
 };
 
-const groupedRows = (model: Model, shown: Shown, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+const groupedRows = (
+  model: Model,
+  shown: Shown,
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const indexed = Array.map(shown.rows, (row, index) => ({ row, index }));
+
   return Option.match(shown.maybePage, {
-    onSome: () => Array.map(indexed, ({ row, index }) => rowView(model, shown, row, index, h)),
+    onSome: () =>
+      Array.map(indexed, ({ row, index }) =>
+        rowView(model, shown, row, index, h)
+      ),
     onNone: () => {
       const groups = Array.dedupe(
-        Array.map(shown.rows, (row) => (isCommand(row) ? row.group : "")),
+        Array.map(shown.rows, (row) => (isCommand(row) ? row.group : ""))
       );
+
       return Array.map(groups, (group, groupIndex) => {
         const headingId = `${id(model)}-group-${groupIndex}`;
+
         return h.keyed("div")(
           `group-${group}`,
           [h.Role("group"), h.AriaLabelledBy(headingId)],
           [
-            h.div([h.Id(headingId), h.Role("presentation"), h.Class("palette-group")], [group]),
+            h.div(
+              [
+                h.Id(headingId),
+                h.Role("presentation"),
+                h.Class("palette-group"),
+              ],
+              [group]
+            ),
             ...Array.map(
-              Array.filter(indexed, ({ row }) => isCommand(row) && row.group === group),
-              ({ row, index }) => rowView(model, shown, row, index, h),
+              Array.filter(
+                indexed,
+                ({ row }) => isCommand(row) && row.group === group
+              ),
+              ({ row, index }) => rowView(model, shown, row, index, h)
             ),
-          ],
+          ]
         );
       });
     },
@@ -808,26 +955,30 @@ const comboboxAttributes = (
   model: Model,
   shown: Shown,
   noun: string,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): ReadonlyArray<Attribute<Message>> => {
   const paletteId = id(model);
+
   const maybeCursorIndex = Option.flatMap(shown.maybeCursorId, (cursorId) =>
-    Array.findFirstIndex(shown.rows, (row) => row.id === cursorId),
+    Array.findFirstIndex(shown.rows, (row) => row.id === cursorId)
   );
+
   return [
-    h.OnKeyDownPreventDefault(fieldKeyDown(model, shown)),
+    h.OnKeyDownPreventDefault(rowKeysWithRenderedList(model, shown)),
     h.Role("combobox"),
     h.AriaExpanded(true),
     h.AriaControls(listIdOf(paletteId)),
     h.AriaAutocomplete("list"),
     ...Option.toArray(
-      Option.map(maybeCursorIndex, (index) => h.AriaActiveDescendant(optionId(paletteId, index))),
+      Option.map(maybeCursorIndex, (index) =>
+        h.AriaActiveDescendant(optionId(paletteId, index))
+      )
     ),
     h.AriaLabel(
       Option.match(shown.maybePage, {
         onNone: () => `Command or ${noun}`,
         onSome: ({ page }) => page.title,
-      }),
+      })
     ),
     h.Autocomplete("off"),
     h.DataAttribute(FIELD_ATTRIBUTE, ""),
@@ -839,9 +990,10 @@ const fieldView = (
   shown: Shown,
   noun: string,
   render: Dialog.RenderInfo,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
   const maybeShownPage = shownPageIdOf(shown);
+
   return UiInput.view(
     {
       id: fieldId(id(model)),
@@ -859,7 +1011,7 @@ const fieldView = (
           ...comboboxAttributes(model, shown, noun, h),
         ]),
     },
-    h,
+    h
   );
 };
 
@@ -868,7 +1020,7 @@ const headView = (
   shown: Shown,
   scope: string,
   field: Html,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html =>
   h.div(
     [h.Class("palette-q field")],
@@ -883,16 +1035,18 @@ const headView = (
               isDisabled: isPicking(model),
               onClick: Message.ClickedBack(),
             },
-            h,
-          ),
-        ),
+            h
+          )
+        )
       ),
       h.span([h.Class("palette-scope")], [scope]),
       ...Option.toArray(
-        Option.map(shown.maybePage, ({ page }) => h.span([h.Class("palette-title")], [page.title])),
+        Option.map(shown.maybePage, ({ page }) =>
+          h.span([h.Class("palette-title")], [page.title])
+        )
       ),
       field,
-    ],
+    ]
   );
 
 const listView = (model: Model, shown: Shown, h: HtmlBuilder<Message>): Html =>
@@ -904,27 +1058,34 @@ const listView = (model: Model, shown: Shown, h: HtmlBuilder<Message>): Html =>
         Option.match(shown.maybePage, {
           onNone: () => "Results",
           onSome: ({ page }) => page.title,
-        }),
+        })
       ),
       ...(isPicking(model) ? [h.AriaBusy(true)] : []),
       h.Class("palette-list"),
     ],
     Array.match(shown.rows, {
-      onEmpty: () => [h.div([h.Role("presentation"), h.Class("palette-group")], [NOTHING_FOUND])],
+      onEmpty: () => [
+        h.div(
+          [h.Role("presentation"), h.Class("palette-group")],
+          [NOTHING_FOUND]
+        ),
+      ],
       onNonEmpty: () => groupedRows(model, shown, h),
-    }),
+    })
   );
 
-// The count is said once a query is typed: the status is mounted empty as the card opens (a
-// status mounted holding its words goes unheard), and the rows an empty field lists need no
-// count.
-const countView = (model: Model, shown: Shown, h: HtmlBuilder<Message>): Html => {
+const countView = (
+  model: Model,
+  shown: Shown,
+  h: HtmlBuilder<Message>
+): Html => {
   const shownQuery = shownQueryOf(model, shown);
+
   return h.div(
     [h.Role("status"), h.Class("sr-only")],
     String.isEmpty(shownQuery)
       ? []
-      : [countWords(shown.rows.length - HashSet.size(shown.contextIds))],
+      : [countWords(shown.rows.length - HashSet.size(shown.contextIds))]
   );
 };
 
@@ -932,29 +1093,48 @@ const cardView = (
   model: Model,
   viewInputs: ViewInputs,
   render: Dialog.RenderInfo,
-  h: HtmlBuilder<Message>,
+  h: HtmlBuilder<Message>
 ): Html => {
-  const { commands, scope = "commands", noun = "title", toDetailView = () => [] } = viewInputs;
+  const {
+    commands,
+    scope = "commands",
+    noun = "title",
+    toDetailView = () => [],
+  } = viewInputs;
+
   const shown = shownOf(model, commands);
 
   return h.div(
     [
       ...Option.toArray(
-        Option.map(shownPageIdOf(shown), (commandId) => h.DataAttribute(PAGE_ATTRIBUTE, commandId)),
+        Option.map(shownPageIdOf(shown), (commandId) =>
+          h.DataAttribute(PAGE_ATTRIBUTE, commandId)
+        )
       ),
       h.OnMount(BindPaletteKeys()),
       h.Class("card palette"),
     ],
     [
-      headView(model, shown, scope, fieldView(model, shown, noun, render, h), h),
+      headView(
+        model,
+        shown,
+        scope,
+        fieldView(model, shown, noun, render, h),
+        h
+      ),
       ...slotView("div", "palette-detail", toDetailView(), h),
       listView(model, shown, h),
       countView(model, shown, h),
       h.div(
         [h.Class("palette-more")],
-        [Option.match(shown.maybePage, { onNone: () => COMMANDS_FOOT, onSome: () => PAGE_FOOT })],
+        [
+          Option.match(shown.maybePage, {
+            onNone: () => COMMANDS_FOOT,
+            onSome: () => PAGE_FOOT,
+          }),
+        ]
       ),
-    ],
+    ]
   );
 };
 
@@ -972,23 +1152,18 @@ const cardView = (
  * `@foldkit/ui`'s Input as an ARIA combobox (`aria-activedescendant` on the cursor's row) over
  * an always open `role="listbox"` of `role="option"` rows, grouped under their headings.
  */
-// NOTE: @foldkit/ui gap: Combobox's popup does not fit an always open list in a card, so the
-// palette is not built on it. Its list is a popup anchored under the field (portaled
-// unless told not to) behind a press-catcher, hidden until positioned; its cursor is an index
-// that wraps and passes disabled rows; pointer movement moves it; leaving the field closes
-// it; and its Escape is handled (default prevented), so the Dialog never sees the Escape that
-// must close the whole palette.
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html =>
-  h.submodel({
-    slotId: id(model),
-    model: model.dialog,
-    view: Dialog.view,
-    viewInputs: {
-      label: "Commands",
-      placement: "Top",
-      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: {
+        label: "Commands",
+        placement: "Top",
+        toLiveRegionView: viewInputs.toLiveRegionView,
+        toView: (render) => cardView(model, viewInputs, render, h),
+      },
+      toParentMessage: (message) => Message.GotDialogMessage({ message }),
+    })
 );