@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/board/board.ts

@@ -1,12 +1,12 @@
 import { Button as UiButton, DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
 import { Array, Effect, Equal, Match, Option, Schema, pipe } from "effect";
 import * as Command from "foldkit/command";
-import {
-  type Attribute,
-  type ChildAttribute,
-  type Html,
-  type HtmlBuilder,
-  childAttributes,
+import { childAttributes } from "foldkit/html";
+import type {
+  Attribute,
+  ChildAttribute,
+  Html,
+  HtmlBuilder,
 } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
 import * as Mount from "foldkit/mount";
@@ -16,13 +16,8 @@ import * as Subscription from "foldkit/subscription";
 import * as Update from "foldkit/update";
 
 import * as Announcer from "../announcer/announcer.ts";
-import * as Button from "../button/button.ts";
 import type { Attributes } from "../attributes/attributes.ts";
-import * as Glyph from "../glyph/glyph.ts";
-import * as IconButton from "../iconButton/iconButton.ts";
-import { LOCALE } from "../locale/locale.ts";
-import { slotView } from "../slot/slot.ts";
-import { prefixKeys } from "../subscription/prefixKeys.ts";
+import * as Button from "../button/button.ts";
 import {
   LEFT_BUTTON,
   activatedKeyboardDrag,
@@ -36,12 +31,16 @@ import {
   pressedDraggable,
   settle as settleDrag,
 } from "../drag/drag.ts";
-
-// MODEL
+import * as Glyph from "../glyph/glyph.ts";
+import * as IconButton from "../icon-button/icon-button.ts";
+import { LOCALE } from "../locale/locale.ts";
+import { slotView } from "../slot/slot.ts";
+import { prefixKeys } from "../subscription/prefix-keys.ts";
 
 /** Schema for one card as the board knows it: its id, unique across the board, and its name
  *  in words, which the grip and screen readers use. */
 export const Card = Schema.Struct({ id: Schema.String, label: Schema.String });
+
 export type Card = typeof Card.Type;
 
 /** Schema for one column: its id, its title, and its cards in order. */
@@ -50,45 +49,34 @@ export const Column = Schema.Struct({
   title: Schema.String,
   cards: Schema.Array(Card),
 });
+
 export type Column = typeof Column.Type;
 
-/** How the keyboard carries what it holds: said on the grip and once it is picked up. */
-const KEYBOARD_MOVES = "Arrow keys move it to another column, space drops it, escape cancels.";
+const KEYBOARD_MOVES =
+  "Arrow keys move it to another column, space drops it, escape cancels.";
 
-/** The words a board says. `{card}` stands for the card's label and `{column}` for a
- *  column's title. */
 const COPY = {
-  /** The grip's name. */
   gripLabel: "Move {card}",
-  /** What the grip describes: how to move a card from the keyboard. */
   gripHelp: `Press space to pick the card up. ${KEYBOARD_MOVES}`,
-  /** A pointer has lifted the card. */
   pickedUp: "Picked up {card}.",
-  /** The keyboard has lifted the card: say how to go on. */
   pickedUpByKeyboard: `Picked up {card}. ${KEYBOARD_MOVES}`,
-  /** The held card is over another column. */
   over: "{card} is over {column}.",
-  /** The card was dropped in a column. */
   dropped: "{card} dropped in {column}.",
-  /** The card was let go where it already was, or over no column. */
   putBack: "{card} put back where it was.",
-  /** Escape, or the application, cancelled the move. */
   cancelled: "Move cancelled. {card} put back where it was.",
 };
 
-const PressPoint = Schema.Struct({ clientX: Schema.Number, clientY: Schema.Number });
+const PressPoint = Schema.Struct({
+  clientX: Schema.Finite,
+  clientY: Schema.Finite,
+});
 
-/** What the board keeps while a card is pressed or held: the card, the columns as the view had
- *  them when it was pressed, and where a pointer pressed it (none for the keyboard). The
- *  columns are the parent's and reach the board only through its view, so the press carries
- *  them and they are kept: a drop is placed against them (the destination's other cards give
- *  `toIndex` and the neighbours), as the reader saw them when picking the card up, and each
- *  step is said with their titles. */
 const Held = Schema.Struct({
   card: Card,
-  columns: Schema.Array(Column),
+  columnsAtPress: Schema.Array(Column),
   maybePressPoint: Schema.Option(PressPoint),
 });
+
 type Held = typeof Held.Type;
 
 /** Schema for a board: the `@foldkit/ui` DragAndDrop it moves cards with, whether cards may
@@ -98,12 +86,11 @@ export const Model = Schema.Struct({
   isMovable: Schema.Boolean,
   maybeHeld: Schema.Option(Held),
 });
-export type Model = typeof Model.Type;
 
-// MESSAGE
+export type Model = typeof Model.Type;
 
-/** Where on a card a press landed: its body (which selects it) or its grip. */
 const PressSpot = Schema.Literals(["Body", "Grip"]);
+
 type PressSpot = typeof PressSpot.Type;
 
 /** Union of all Messages a board can produce. */
@@ -113,20 +100,22 @@ export const Message = defineMessageUnion({
     cardId: Schema.String,
     spot: PressSpot,
     pointerType: Schema.String,
-    screenX: Schema.Number,
-    screenY: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
-    columns: Schema.Array(Column),
+    screenX: Schema.Finite,
+    screenY: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
+    columnsAtPress: Schema.Array(Column),
+  },
+  PressedGripKey: {
+    cardId: Schema.String,
+    columnsAtPress: Schema.Array(Column),
   },
-  PressedGripKey: { cardId: Schema.String, columns: Schema.Array(Column) },
   PressedEscape: {},
   CompletedAnnounceMove: {},
   CompletedSizeLiftedCard: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /**
  * Union of OutMessages a board reports.
@@ -143,17 +132,16 @@ export const OutMessage = defineMessageUnion({
   Moved: {
     cardId: Schema.String,
     fromColumnId: Schema.String,
-    fromIndex: Schema.Number,
+    fromIndex: Schema.Finite,
     toColumnId: Schema.String,
-    toIndex: Schema.Number,
+    toIndex: Schema.Finite,
     maybeAfterCardId: Schema.Option(Schema.String),
     maybeBeforeCardId: Schema.Option(Schema.String),
   },
   SelectedCard: { cardId: Schema.String },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a board with `init`. The `id` must be unique in the document;
  *  the board's DOM hooks are scoped by it, so two boards on a page keep to their own cards. */
@@ -172,78 +160,89 @@ export const init = (config: InitConfig): Model => ({
   maybeHeld: Option.none(),
 });
 
-// ACCESSORS
-
 /** The board's id, unique in the document. */
 export const id = (model: Model): string => model.dragAndDrop.id;
 
-/** Whether a card is held by a pointer or the keyboard. */
-export const isDragging = (model: Model): boolean => UiDragAndDrop.isDragging(model.dragAndDrop);
+export const isDragging = (model: Model): boolean =>
+  UiDragAndDrop.isDragging(model.dragAndDrop);
 
-// DOM HOOKS
+const hookId = (boardId: string, localId: string): string =>
+  `${boardId}/${localId}`;
 
-const hookId = (boardId: string, localId: string): string => `${boardId}/${localId}`;
+const cardHook = (model: Model, cardId: string): string =>
+  hookId(id(model), cardId);
 
-const cardHook = (model: Model, cardId: string): string => hookId(id(model), cardId);
-
-const columnHook = (model: Model, columnId: string): string => hookId(id(model), columnId);
+const columnHook = (model: Model, columnId: string): string =>
+  hookId(id(model), columnId);
 
 const CARD_ATTRIBUTE = "board-card";
 const TITLE_ATTRIBUTE = "board-title";
 const GRIP_ATTRIBUTE = "board-grip";
 
-// COMMAND
-
 /** Says a step of a move through the page's live region (as `Announcer.Announce` does), which is
  *  inside the topmost open dialog when there is one. */
 export const AnnounceMove = Command.define("AnnounceMove", {
   args: { text: Schema.String },
   messages: [Message.CompletedAnnounceMove],
-  execute: ({ text }) => Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceMove())),
+  execute: ({ text }) =>
+    Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceMove())),
 });
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
-type Direction = (typeof UiDragAndDrop.Message.PressedArrowKey.Type)["direction"];
+type Direction =
+  (typeof UiDragAndDrop.Message.PressedArrowKey.Type)["direction"];
 
 type Place = Readonly<{ card: Card; column: Column; index: number }>;
 
-const placeOf = (columns: ReadonlyArray<Column>, cardId: string): Option.Option<Place> =>
+const placeOf = (
+  columns: readonly Column[],
+  cardId: string
+): Option.Option<Place> =>
   Array.findFirst(columns, (column) =>
     Array.findFirst(
       Array.map(column.cards, (card, index) => ({ card, column, index })),
-      ({ card }) => card.id === cardId,
-    ),
+      ({ card }) => card.id === cardId
+    )
   );
 
 const fill = (template: string, card: string, column = ""): string =>
   template.replaceAll("{card}", card).replaceAll("{column}", column);
 
-const columnOfHook = (model: Model, held: Held, hook: string): Option.Option<Column> =>
-  Array.findFirst(held.columns, (column) => columnHook(model, column.id) === hook);
+const columnOfHook = (
+  model: Model,
+  held: Held,
+  hook: string
+): Option.Option<Column> =>
+  Array.findFirst(
+    held.columnsAtPress,
+    (column) => columnHook(model, column.id) === hook
+  );
 
 const overColumn = (model: Model): Option.Option<Column> =>
   Option.flatMap(model.maybeHeld, (held) =>
-    Option.flatMap(UiDragAndDrop.maybeDropTarget(model.dragAndDrop), ({ containerId }) =>
-      columnOfHook(model, held, containerId),
-    ),
+    Option.flatMap(
+      UiDragAndDrop.maybeDropTarget(model.dragAndDrop),
+      ({ containerId }) => columnOfHook(model, held, containerId)
+    )
   );
 
 const placementOf = (
   model: Model,
   held: Held,
   toContainerId: string,
-  rawIndex: number,
+  rawIndex: number
 ): Option.Option<OutMessage> =>
   Option.gen(function* () {
-    const from = yield* placeOf(held.columns, held.card.id);
+    const from = yield* placeOf(held.columnsAtPress, held.card.id);
     const to = yield* columnOfHook(model, held, toContainerId);
     const others = Array.filter(to.cards, (card) => card.id !== held.card.id);
     const isSameColumn = to.id === from.column.id;
     const isKeyboard = Option.isNone(held.maybePressPoint);
-    const pastItself = isSameColumn && rawIndex > from.index ? rawIndex - 1 : rawIndex;
+
+    const pastItself =
+      isSameColumn && rawIndex > from.index ? rawIndex - 1 : rawIndex;
+
     const toIndex = Math.min(Math.max(pastItself, 0), others.length);
     const isWhereItWas = isSameColumn && (isKeyboard || toIndex === from.index);
 
@@ -257,8 +256,14 @@ const placementOf = (
       fromIndex: from.index,
       toColumnId: to.id,
       toIndex,
-      maybeAfterCardId: Option.map(Array.get(others, toIndex - 1), (card) => card.id),
-      maybeBeforeCardId: Option.map(Array.get(others, toIndex), (card) => card.id),
+      maybeAfterCardId: Option.map(
+        Array.get(others, toIndex - 1),
+        (card) => card.id
+      ),
+      maybeBeforeCardId: Option.map(
+        Array.get(others, toIndex),
+        (card) => card.id
+      ),
     });
   });
 
@@ -272,9 +277,9 @@ const foldDragAndDropOutMessage = UiDragAndDrop.OutMessage.match<
         { model: stepModel },
         Option.getOrUndefined(
           Option.flatMap(stepModel.maybeHeld, (held) =>
-            placementOf(stepModel, held, toContainerId, toIndex),
-          ),
-        ),
+            placementOf(stepModel, held, toContainerId, toIndex)
+          )
+        )
       ),
   Cancelled: () => (stepModel) => ({ model: stepModel }),
 });
@@ -291,19 +296,21 @@ const foldDragAndDrop = Update.foldChild({
   foldOutMessage: foldDragAndDropOutMessage,
 });
 
-/** What screen readers hear for one step of a move, from the phase before and after it.
- *  `putBack` is what a card set down without a move says: put back, or cancelled. */
 const moveText = (
   held: Held,
   previous: Model,
   next: Model,
   maybeOutMessage: Option.Option<OutMessage>,
-  putBack: string,
+  putBack: string
 ): Option.Option<string> => {
-  const label = held.card.label;
+  const { label } = held.card;
   const before = phaseOf(previous.dragAndDrop);
   const after = phaseOf(next.dragAndDrop);
-  const maybeMoved = Option.filter(maybeOutMessage, (outMessage) => outMessage._tag === "Moved");
+
+  const maybeMoved = Option.filter(
+    maybeOutMessage,
+    (outMessage) => outMessage._tag === "Moved"
+  );
 
   if (after === "Idle") {
     return isCarrying(before)
@@ -313,31 +320,29 @@ const moveText = (
             {
               onNone: () => fill(putBack, label),
               onSome: (column) => fill(COPY.dropped, label, column.title),
-            },
-          ),
+            }
+          )
         )
       : Option.none();
   } else if (before === "Pressed" && after === "PointerDragging") {
     return Option.some(fill(COPY.pickedUp, label));
   } else if (before === "Idle" && after === "KeyboardDragging") {
     return Option.some(fill(COPY.pickedUpByKeyboard, label));
-  } else {
-    return pipe(
-      overColumn(next),
-      Option.filter(
-        (column) =>
-          !Equal.equals(
-            Option.map(overColumn(previous), ({ id }) => id),
-            Option.some(column.id),
-          ),
-      ),
-      Option.map((column) => fill(COPY.over, label, column.title)),
-    );
   }
+
+  return pipe(
+    overColumn(next),
+    Option.filter(
+      (column) =>
+        !Equal.equals(
+          Option.map(overColumn(previous), (over) => over.id),
+          Option.some(column.id)
+        )
+    ),
+    Option.map((column) => fill(COPY.over, label, column.title))
+  );
 };
 
-/** Announces the step a DragAndDrop update took and forgets the held card once it is down.
- *  A card set down without a move says `putBack`. */
 const settle =
   (previous: Model, putBack = COPY.putBack) =>
   (dragAndDropUpdate: UpdateReturn): UpdateReturn =>
@@ -350,18 +355,27 @@ const settle =
             previous,
             dragAndDropUpdate.model,
             Option.fromNullishOr(dragAndDropUpdate.outMessage),
-            putBack,
-          ),
+            putBack
+          )
         ),
-        (text) => AnnounceMove({ text }),
-      ),
+        (text) => AnnounceMove({ text })
+      )
     );
 
 const holding = (model: Model, held: Held): Model =>
   modifyFields(model, { maybeHeld: () => Option.some(held) });
 
-const liftByKeyboard = (model: Model, place: Place, columns: ReadonlyArray<Column>) => {
-  const pressed = holding(model, { card: place.card, columns, maybePressPoint: Option.none() });
+const liftByKeyboard = (
+  model: Model,
+  place: Place,
+  columnsAtPress: readonly Column[]
+) => {
+  const pressed = holding(model, {
+    card: place.card,
+    columnsAtPress,
+    maybePressPoint: Option.none(),
+  });
+
   return settle(pressed)(
     foldDragAndDrop(
       pressed,
@@ -369,19 +383,17 @@ const liftByKeyboard = (model: Model, place: Place, columns: ReadonlyArray<Colum
         itemId: cardHook(model, place.card.id),
         containerId: columnHook(model, place.column.id),
         index: place.index,
-      }),
-    ),
+      })
+    )
   );
 };
 
-// NOTE: every arrow jumps a column in reading order, so one press is one column whether the
-// columns sit side by side or stack on a phone. The ui's own arrows move within a column.
-const toColumnDirection = (direction: Direction): Direction =>
+const toColumnStepInReadingOrder = (direction: Direction): Direction =>
   Match.value(direction).pipe(
     Match.withReturnType<Direction>(),
     Match.whenOr("Left", "Up", () => "PreviousContainer"),
     Match.whenOr("Right", "Down", () => "NextContainer"),
-    Match.orElse(() => direction),
+    Match.orElse(() => direction)
   );
 
 const moveByKeyboard = (model: Model, direction: Direction): UpdateReturn =>
@@ -391,7 +403,7 @@ const moveByKeyboard = (model: Model, direction: Direction): UpdateReturn =>
         itemId: UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop),
         target: UiDragAndDrop.maybeDropTarget(model.dragAndDrop),
       }),
-      () => phaseOf(model.dragAndDrop) === "KeyboardDragging",
+      () => phaseOf(model.dragAndDrop) === "KeyboardDragging"
     ),
     {
       onNone: () => ({ model }),
@@ -403,41 +415,44 @@ const moveByKeyboard = (model: Model, direction: Direction): UpdateReturn =>
               itemId,
               currentContainerId: target.containerId,
               currentIndex: target.index,
-              direction: toColumnDirection(direction),
+              direction: toColumnStepInReadingOrder(direction),
             }),
-            toDragAndDropMessage,
+            toDragAndDropMessage
           ),
         ],
       }),
-    },
+    }
   );
 
-// NOTE: @foldkit/ui gap: DragAndDrop's ResolveKeyboardMove walks every `[data-droppable-id]`
-// in the document. A column it finds past this board's first or last is another list's, so
-// that step is not taken.
 const isOwnColumnHook = (model: Model, hook: string): boolean =>
-  Option.exists(model.maybeHeld, (held) => Option.isSome(columnOfHook(model, held, hook)));
+  Option.exists(model.maybeHeld, (held) =>
+    Option.isSome(columnOfHook(model, held, hook))
+  );
 
-/** DragAndDrop's own cancel (the card back where it was, focus back on a keyboard-held card's
- *  grip), said as a cancel rather than a card put back. */
-const cancelDrag = (model: Model, message: UiDragAndDrop.Message): UpdateReturn =>
+const cancelDrag = (
+  model: Model,
+  message: UiDragAndDrop.Message
+): UpdateReturn =>
   settle(model, COPY.cancelled)(foldDragAndDrop(model, message));
 
-const updateDragAndDrop = (model: Model, message: UiDragAndDrop.Message): UpdateReturn =>
+const updateDragAndDrop = (
+  model: Model,
+  message: UiDragAndDrop.Message
+): UpdateReturn =>
   Match.value(message).pipe(
     Match.withReturnType<UpdateReturn>(),
-    Match.tag("PressedArrowKey", ({ direction }) => moveByKeyboard(model, direction)),
+    Match.tag("PressedArrowKey", ({ direction }) =>
+      moveByKeyboard(model, direction)
+    ),
     Match.tag("CompletedResolveKeyboardMove", ({ targetContainerId }) =>
       isOwnColumnHook(model, targetContainerId)
         ? settle(model)(foldDragAndDrop(model, message))
-        : { model },
+        : { model }
     ),
     Match.tag("CancelledDrag", () => cancelDrag(model, message)),
-    Match.orElse(() => settle(model)(foldDragAndDrop(model, message))),
+    Match.orElse(() => settle(model)(foldDragAndDrop(model, message)))
   );
 
-/** A press on a card: on its body it selects the card (while nothing is held); under a mouse,
- *  or on the grip, it also presses the card for a drag while cards may move. */
 const pressCard =
   (model: Model) =>
   ({
@@ -448,24 +463,27 @@ const pressCard =
     screenY,
     clientX,
     clientY,
-    columns,
+    columnsAtPress,
   }: typeof Message.PressedCard.Type): UpdateReturn => {
     const maybeSelected = Option.liftPredicate(
       OutMessage.SelectedCard({ cardId }),
-      () => spot === "Body" && phaseOf(model.dragAndDrop) === "Idle",
+      () => spot === "Body" && phaseOf(model.dragAndDrop) === "Idle"
     );
-    const isLifting = canLift(model) && (spot === "Grip" || pointerType === "mouse");
+
+    const isLifting =
+      canLift(model) && (spot === "Grip" || pointerType === "mouse");
 
     const press = Option.match(
-      Option.filter(placeOf(columns, cardId), () => isLifting),
+      Option.filter(placeOf(columnsAtPress, cardId), () => isLifting),
       {
         onNone: (): UpdateReturn => ({ model }),
         onSome: (place) => {
           const pressed = holding(model, {
             card: place.card,
-            columns,
+            columnsAtPress,
             maybePressPoint: Option.some({ clientX, clientY }),
           });
+
           return settle(pressed)(
             foldDragAndDrop(
               pressed,
@@ -475,60 +493,55 @@ const pressCard =
                 index: place.index,
                 screenX,
                 screenY,
-              }),
-            ),
+              })
+            )
           );
         },
-      },
+      }
     );
 
-    // a press reports nothing of its own, so the selection is the step's one OutMessage
     return Option.match(maybeSelected, {
       onNone: () => press,
       onSome: (selected) => ({ ...press, outMessage: selected }),
     });
   };
 
+/**
+ * Puts a pressed or held card back where it was, says so, and reports no move. A keyboard
+ * move hands focus back to the card's grip. Call it when the layout changes under the board.
+ */
+export const cancel = (model: Model): UpdateReturn =>
+  cancelDrag(model, cancelledDrag());
+
 /** Processes a board Message and returns the next Model, Commands and OutMessage. */
 export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     GotDragAndDropMessage: ({ message: dragAndDropMessage }) =>
       updateDragAndDrop(model, dragAndDropMessage),
     PressedCard: pressCard(model),
-    PressedGripKey: ({ cardId, columns }) =>
+    PressedGripKey: ({ cardId, columnsAtPress }) =>
       Option.match(
-        Option.filter(placeOf(columns, cardId), () => canLift(model)),
+        Option.filter(placeOf(columnsAtPress, cardId), () => canLift(model)),
         {
           onNone: () => ({ model }),
-          onSome: (place) => liftByKeyboard(model, place, columns),
-        },
+          onSome: (place) => liftByKeyboard(model, place, columnsAtPress),
+        }
       ),
     PressedEscape: () => cancel(model),
     CompletedAnnounceMove: () => ({ model }),
     CompletedSizeLiftedCard: () => ({ model }),
   });
 
-// CAPABILITIES
-
-/**
- * Puts a pressed or held card back where it was, says so, and reports no move. A keyboard
- * move hands focus back to the card's grip. Call it when the layout changes under the board.
- */
-export const cancel = (model: Model): UpdateReturn => cancelDrag(model, cancelledDrag());
-
 /**
  * Lets cards move, or stops them: while work runs, nothing moves. Stopping cancels a card
  * that is pressed or held, so no `Moved` arrives for it.
  */
 export const setMovable = (model: Model, isMovable: boolean): UpdateReturn => {
   const next = modifyFields(model, { isMovable: () => isMovable });
+
   return isMovable ? { model: next } : cancel(next);
 };
 
-// SUBSCRIPTION
-
-// NOTE: @foldkit/ui gap: DragAndDrop's Subscription keys are fixed, so two of its users on a
-// page would share them. The board lifts them under its own names, behind the parent's prefix.
 const dragSubscriptions = Subscription.lift({
   pointer: UiDragAndDrop.subscriptions.documentPointer,
   keyboard: UiDragAndDrop.subscriptions.documentKeyboard,
@@ -540,7 +553,7 @@ const dragSubscriptions = Subscription.lift({
 
 const boardSubscriptions = Subscription.aggregate(
   escapeSubscriptions<Model, Message>(Message.PressedEscape()),
-  dragSubscriptions,
+  dragSubscriptions
 );
 
 /** A held card follows the pointer, the arrows and Space move and drop it, Escape puts it
@@ -553,33 +566,39 @@ const boardSubscriptions = Subscription.aggregate(
 export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
   prefixKeys(keyPrefix, boardSubscriptions);
 
-// LIFTED CARD
-
 /** Sizes the copy that follows the pointer to the card it lifts, and keeps the pointer where
  *  it pressed the card. Measures the card once, when the copy appears. */
 export const SizeLiftedCard = Mount.define("SizeLiftedCard", {
-  args: { cardHook: Schema.String, pressX: Schema.Number, pressY: Schema.Number },
+  args: {
+    cardHook: Schema.String,
+    pressX: Schema.Finite,
+    pressY: Schema.Finite,
+  },
   messages: [Message.CompletedSizeLiftedCard],
   execute: ({ element, cardHook: hook, pressX, pressY }) =>
     Effect.sync(() => {
-      measureLift(element, `[data-sortable-id="${CSS.escape(hook)}"]`, pressX, pressY);
+      measureLift(
+        element,
+        `[data-sortable-id="${CSS.escape(hook)}"]`,
+        pressX,
+        pressY
+      );
+
       return Message.CompletedSizeLiftedCard();
     }),
 });
 
-// VIEW
-
 /** What the board hands `toCardView` for each card. Pass it to `cardView` as `render`. */
 export type CardRender = Readonly<{
   /** For the card's root: the press that selects it, and lifts it under a mouse. */
-  attributes: ReadonlyArray<ChildAttribute>;
+  attributes: readonly ChildAttribute[];
   /** Cards may move: the card prints the grab cursor (`movable`). */
   isMovable: boolean;
   /** The card is the one held: it dims in place (`drag-dim`). */
   isHeld: boolean;
   /** The grip, last in the meta row: a quiet glyph button named "Move <label>" that touch and
    *  the keyboard take. Empty when cards may not move. */
-  grip: ReadonlyArray<Html>;
+  grip: readonly Html[];
   /** This render is the held copy (`lifted`): hidden from screen readers and inert, taking
    *  none of the caller's attributes. */
   isLifted: boolean;
@@ -590,48 +609,53 @@ export type CardRender = Readonly<{
  *  level: Foldkit runs them in the parent's boundary, so handlers in what they return
  *  dispatch the parent's Messages. */
 export type ViewInputs = Readonly<{
-  columns: ReadonlyArray<Column>;
+  columns: readonly Column[];
   /** Renders one card, usually with `Board.cardView`. It is also called for the held copy,
    *  with `render.isLifted`. */
   toCardView: (card: Card, render: CardRender) => Html;
   /** What a column holding nothing prints, usually an EmptyState. */
-  toEmptyView?: (column: Column) => ReadonlyArray<Html>;
+  toEmptyView?: (column: Column) => readonly Html[];
   /** Controls at the right of a column's head, after its count ("capture here"). */
-  toColumnActions?: (column: Column) => ReadonlyArray<Html>;
+  toColumnActions?: (column: Column) => readonly Html[];
 }>;
 
-const INNER_CONTROL = innerControls(`[data-${TITLE_ATTRIBUTE}], [data-${GRIP_ATTRIBUTE}]`);
+const INNER_CONTROL = innerControls(
+  `[data-${TITLE_ATTRIBUTE}], [data-${GRIP_ATTRIBUTE}]`
+);
 
 const isInside = (outer: Element, inner: Element | null): boolean =>
   inner !== null && outer.contains(inner);
 
-/** Where a press on a card landed: its body, its grip, or a control inside it (none). */
 const pressSpotOf = (target: EventTarget | null): Option.Option<PressSpot> => {
   if (!(target instanceof Element)) {
     return Option.some("Body");
   }
 
-  const maybeCard = Option.fromNullishOr(target.closest(`[data-${CARD_ATTRIBUTE}]`));
+  const maybeCard = Option.fromNullishOr(
+    target.closest(`[data-${CARD_ATTRIBUTE}]`)
+  );
+
   const isOnControl = Option.exists(maybeCard, (card) =>
-    isInside(card, target.closest(INNER_CONTROL)),
+    isInside(card, target.closest(INNER_CONTROL))
   );
+
   const isOnGrip = target.closest(`[data-${GRIP_ATTRIBUTE}]`) !== null;
 
   if (isOnControl) {
     return Option.none();
   } else if (isOnGrip) {
     return Option.some("Grip");
-  } else {
-    return Option.some("Body");
   }
+
+  return Option.some("Body");
 };
 
 type PlaceInfo = Readonly<{
   model: Model;
-  columns: ReadonlyArray<Column>;
+  columns: readonly Column[];
   toCardView: (card: Card, render: CardRender) => Html;
-  toEmptyView: (column: Column) => ReadonlyArray<Html>;
-  toColumnActions: (column: Column) => ReadonlyArray<Html>;
+  toEmptyView: (column: Column) => readonly Html[];
+  toColumnActions: (column: Column) => readonly Html[];
 }>;
 
 const gripHelpId = (model: Model): string => `${id(model)}-grip-help`;
@@ -640,32 +664,55 @@ const isHeldCard = (model: Model, cardId: string): boolean =>
   isDragging(model) &&
   Option.exists(
     UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop),
-    (heldHook) => heldHook === cardHook(model, cardId),
+    (heldHook) => heldHook === cardHook(model, cardId)
   );
 
-const liftedRender = <ParentMessage>(h: HtmlBuilder<ParentMessage>): CardRender => ({
+const liftedRender = <ParentMessage>(
+  h: HtmlBuilder<ParentMessage>
+): CardRender => ({
   attributes: childAttributes([h.AriaHidden(true), h.Inert(true)]),
   isMovable: false,
   isHeld: false,
   grip: [
     h.span(
-      [h.Class("iconbtn"), h.DataAttribute(GRIP_ATTRIBUTE, ""), h.AriaHidden(true)],
-      [Glyph.view({ name: "grip" }, h)],
+      [
+        h.Class("iconbtn"),
+        h.DataAttribute(GRIP_ATTRIBUTE, ""),
+        h.AriaHidden(true),
+      ],
+      [Glyph.view({ name: "grip" }, h)]
     ),
   ],
   isLifted: true,
 });
 
-const cardRender = (info: PlaceInfo, place: Place, h: HtmlBuilder<Message>): CardRender => {
+const cardRender = (
+  info: PlaceInfo,
+  place: Place,
+  h: HtmlBuilder<Message>
+): CardRender => {
   const { model, columns } = info;
   const { card } = place;
   const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
   const isHeld = isHeldCard(model, card.id);
 
   const onPress: Attribute<Message> = h.OnPointerDown(
-    (pointerType, button, screenX, screenY, _time, clientX, clientY, _pointerId, target) =>
+    (
+      pointerType,
+      button,
+      screenX,
+      screenY,
+      _time,
+      clientX,
+      clientY,
+      _pointerId,
+      target
+    ) =>
       Option.map(
-        Option.filter(pressSpotOf(target), () => isIdleNow && button === LEFT_BUTTON),
+        Option.filter(
+          pressSpotOf(target),
+          () => isIdleNow && button === LEFT_BUTTON
+        ),
         (spot) =>
           Message.PressedCard({
             cardId: card.id,
@@ -675,22 +722,18 @@ const cardRender = (info: PlaceInfo, place: Place, h: HtmlBuilder<Message>): Car
             screenY,
             clientX,
             clientY,
-            columns,
-          }),
-      ),
+            columnsAtPress: columns,
+          })
+      )
   );
 
   const onGripKey = h.OnKeyDownPreventDefault((key) =>
     Option.liftPredicate(
-      Message.PressedGripKey({ cardId: card.id, columns }),
-      () => isIdleNow && (key === " " || key === "Enter"),
-    ),
+      Message.PressedGripKey({ cardId: card.id, columnsAtPress: columns }),
+      () => isIdleNow && (key === " " || key === "Enter")
+    )
   );
 
-  // NOTE: @foldkit/ui gap: DragAndDrop's `draggable` bundle forces `role="option"` and
-  // `data-sortable-id`, which belong on a list's own items, and the card's `li` already
-  // carries `sortable`. So the grip carries the ui's `data-draggable-id` by hand, and
-  // FocusItem finds the grip by it.
   const grip = model.isMovable
     ? [
         IconButton.view(
@@ -707,7 +750,7 @@ const cardRender = (info: PlaceInfo, place: Place, h: HtmlBuilder<Message>): Car
               onGripKey,
             ],
           },
-          h,
+          h
         ),
       ]
     : [];
@@ -721,7 +764,11 @@ const cardRender = (info: PlaceInfo, place: Place, h: HtmlBuilder<Message>): Car
   };
 };
 
-const cardClass = ({ isMovable: movable, isHeld, isLifted }: CardRender): string =>
+const cardClass = ({
+  isMovable: movable,
+  isHeld,
+  isLifted,
+}: CardRender): string =>
   `board-card${movable ? " movable" : ""}${isHeld ? " drag-dim" : ""}${isLifted ? " lifted" : ""}`;
 
 /** Configuration for rendering one card with `cardView`. */
@@ -754,9 +801,17 @@ export type CardViewConfig<ParentMessage> = Readonly<{
  */
 export const cardView = <ParentMessage>(
   config: CardViewConfig<ParentMessage>,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html => {
-  const { render, title, onOpen, isDisabled = false, editor = [], meta = [] } = config;
+  const {
+    render,
+    title,
+    onOpen,
+    isDisabled = false,
+    editor = [],
+    meta = [],
+  } = config;
+
   const attributes = render.isLifted ? [] : (config.attributes ?? []);
   const isEditing = !render.isLifted && Array.isReadonlyArrayNonEmpty(editor);
 
@@ -769,11 +824,15 @@ export const cardView = <ParentMessage>(
             isDisabled,
             toView: (groups) =>
               h.button(
-                [...groups.button, h.DataAttribute(TITLE_ATTRIBUTE, ""), h.Class("title")],
-                [title],
+                [
+                  ...groups.button,
+                  h.DataAttribute(TITLE_ATTRIBUTE, ""),
+                  h.Class("title"),
+                ],
+                [title]
               ),
           },
-          h,
+          h
         );
 
   return h.article(
@@ -781,31 +840,36 @@ export const cardView = <ParentMessage>(
     [
       ...(isEditing ? editor : [titleView]),
       ...slotView("div", "meta-row", [...meta, ...render.grip], h),
-    ],
+    ]
   );
 };
 
-const cardItemView = (info: PlaceInfo, place: Place, h: HtmlBuilder<Message>): Html =>
+const cardItemView = (
+  info: PlaceInfo,
+  place: Place,
+  h: HtmlBuilder<Message>
+): Html =>
   h.keyed("li")(
     place.card.id,
     [...UiDragAndDrop.sortable(cardHook(info.model, place.card.id))],
-    [info.toCardView(place.card, cardRender(info, place, h))],
+    [info.toCardView(place.card, cardRender(info, place, h))]
   );
 
 const keyboardSlot = (
   info: PlaceInfo,
   column: Column,
-  h: HtmlBuilder<Message>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model } = info;
+
   const maybeSlot = pipe(
     Option.all({ held: model.maybeHeld, over: overColumn(model) }),
     Option.filter(
       ({ held, over }) =>
         phaseOf(model.dragAndDrop) === "KeyboardDragging" &&
         over.id === column.id &&
-        !Array.some(column.cards, (card) => card.id === held.card.id),
-    ),
+        !Array.some(column.cards, (card) => card.id === held.card.id)
+    )
   );
 
   return Array.fromOption(
@@ -813,29 +877,34 @@ const keyboardSlot = (
       h.keyed("li")(
         "board-lift-slot",
         [h.Class("board-lift-slot"), h.AriaHidden(true)],
-        [info.toCardView(held.card, liftedRender(h))],
-      ),
-    ),
+        [info.toCardView(held.card, liftedRender(h))]
+      )
+    )
   );
 };
 
-const columnView = (info: PlaceInfo, column: Column, h: HtmlBuilder<Message>): Html => {
+const columnView = (
+  info: PlaceInfo,
+  column: Column,
+  h: HtmlBuilder<Message>
+): Html => {
   const { model } = info;
   const headingId = `${id(model)}-${column.id}-title`;
+
   const items = [
     ...keyboardSlot(info, column, h),
-    ...Array.map(column.cards, (card, index) => cardItemView(info, { card, column, index }, h)),
+    ...Array.map(column.cards, (card, index) =>
+      cardItemView(info, { card, column, index }, h)
+    ),
   ];
+
   const isTarget =
     isDragging(model) &&
     Equal.equals(
       Option.map(overColumn(model), ({ id: overId }) => overId),
-      Option.some(column.id),
+      Option.some(column.id)
     );
 
-  // NOTE: @foldkit/ui gap: DragAndDrop's `droppable` bundle forces `role="listbox"`, which
-  // would claim cards that are not options. So the column carries the ui's
-  // `data-droppable-id` by hand, and drops are found by it.
   return h.keyed("div")(
     column.id,
     [
@@ -850,24 +919,31 @@ const columnView = (info: PlaceInfo, column: Column, h: HtmlBuilder<Message>): H
             [h.Class("panel-tb")],
             [
               h.h2([h.Id(headingId)], [column.title]),
-              h.span([h.Class("meta")], [column.cards.length.toLocaleString(LOCALE)]),
+              h.span(
+                [h.Class("meta")],
+                [column.cards.length.toLocaleString(LOCALE)]
+              ),
               ...info.toColumnActions(column),
-            ],
+            ]
           ),
           ...Array.match(items, {
             onEmpty: () => info.toEmptyView(column),
-            // NOTE: Safari takes list semantics from a list printed without markers, so the
-            // list says it is one
-            onNonEmpty: (cards) => [h.ul([h.Role("list"), h.Class("board-cards")], cards)],
+            onNonEmpty: (cards) => [
+              h.ul([h.Role("list"), h.Class("board-cards")], cards),
+            ],
           }),
-        ],
+        ]
       ),
-    ],
+    ]
   );
 };
 
-const liftedCopyView = (info: PlaceInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+const liftedCopyView = (
+  info: PlaceInfo,
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model } = info;
+
   const maybeLifted = Option.all({
     style: UiDragAndDrop.ghostStyle(model.dragAndDrop),
     held: model.maybeHeld,
@@ -886,12 +962,12 @@ const liftedCopyView = (info: PlaceInfo, h: HtmlBuilder<Message>): ReadonlyArray
               cardHook: cardHook(model, held.card.id),
               pressX: pressPoint.clientX,
               pressY: pressPoint.clientY,
-            }),
+            })
           ),
         ],
-        [info.toCardView(held.card, liftedRender(h))],
-      ),
-    ),
+        [info.toCardView(held.card, liftedRender(h))]
+      )
+    )
   );
 };
 
@@ -910,18 +986,37 @@ const liftedCopyView = (info: PlaceInfo, h: HtmlBuilder<Message>): ReadonlyArray
  * reports `Moved`; lift `subscriptions(keyPrefix)` into the application's, or nothing
  * follows the pointer or the keys.
  */
-export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { columns, toCardView, toEmptyView = () => [], toColumnActions = () => [] } = viewInputs;
-  const info: PlaceInfo = { model, columns, toCardView, toEmptyView, toColumnActions };
-
-  return h.div(
-    [h.Class("board"), h.Style({ "--cols": `${columns.length}` })],
-    [
-      ...Array.map(columns, (column) => columnView(info, column, h)),
-      ...(model.isMovable
-        ? [h.p([h.Id(gripHelpId(model)), h.Class("sr-only")], [COPY.gripHelp])]
-        : []),
-      ...liftedCopyView(info, h),
-    ],
-  );
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const {
+      columns,
+      toCardView,
+      toEmptyView = () => [],
+      toColumnActions = () => [],
+    } = viewInputs;
+
+    const info: PlaceInfo = {
+      model,
+      columns,
+      toCardView,
+      toEmptyView,
+      toColumnActions,
+    };
+
+    return h.div(
+      [h.Class("board"), h.Style({ "--cols": `${columns.length}` })],
+      [
+        ...Array.map(columns, (column) => columnView(info, column, h)),
+        ...(model.isMovable
+          ? [
+              h.p(
+                [h.Id(gripHelpId(model)), h.Class("sr-only")],
+                [COPY.gripHelp]
+              ),
+            ]
+          : []),
+        ...liftedCopyView(info, h),
+      ]
+    );
+  }
+);