@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/src/sortable/sortable.ts

@@ -29,22 +29,19 @@ import {
   settle as settleDrag,
 } from "../drag/drag.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 { LOCALE } from "../locale/locale.ts";
-import { prefixKeys } from "../subscription/prefixKeys.ts";
-
-// MODEL
+import { prefixKeys } from "../subscription/prefix-keys.ts";
 
 /** Schema for one item as the list knows it: its id, unique in the list, and its name in
  *  words, which the grip and screen readers use. */
 export const Item = Schema.Struct({ id: Schema.String, label: Schema.String });
+
 export type Item = typeof Item.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 one place, space drops it, escape cancels.";
+const KEYBOARD_MOVES =
+  "Arrow keys move it one place, space drops it, escape cancels.";
 
-/** The words a sortable says. `{item}` stands for the item's label, `{position}` and `{total}`
- *  for where it is, counted from one. */
 const COPY = {
   gripLabel: "Move {item}",
   gripHelp: `Press space to pick the item up. ${KEYBOARD_MOVES}`,
@@ -57,19 +54,17 @@ const COPY = {
 };
 
 const Press = Schema.Struct({
-  pointerId: Schema.Number,
-  clientX: Schema.Number,
-  clientY: Schema.Number,
+  pointerId: Schema.Finite,
+  clientX: Schema.Finite,
+  clientY: Schema.Finite,
 });
 
-/** What the list keeps while an item is pressed or held: the item, the items as the view had
- *  them when it was pressed (a drop is placed against them, and each step is said from them),
- *  and the pointer that pressed it and where (none for the keyboard). */
 const Held = Schema.Struct({
   item: Item,
   items: Schema.Array(Item),
   maybePress: Schema.Option(Press),
 });
+
 type Held = typeof Held.Type;
 
 /** Schema for a sortable: the `@foldkit/ui` DragAndDrop it moves items with, whether items may
@@ -79,45 +74,43 @@ 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;
 
 /** Union of all Messages a sortable can produce. */
 export const Message = defineMessageUnion({
   GotDragAndDropMessage: { message: UiDragAndDrop.Message },
   PressedItem: {
     itemId: Schema.String,
-    pointerId: Schema.Number,
-    screenX: Schema.Number,
-    screenY: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
+    pointerId: Schema.Finite,
+    screenX: Schema.Finite,
+    screenY: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
     items: Schema.Array(Item),
   },
   PressedGripKey: { itemId: Schema.String, items: Schema.Array(Item) },
   MovedPointer: {
-    screenX: Schema.Number,
-    screenY: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
-    maybeIndex: Schema.Option(Schema.Number),
+    screenX: Schema.Finite,
+    screenY: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
+    maybeIndex: Schema.Option(Schema.Finite),
   },
   ReleasedPointer: {
-    screenX: Schema.Number,
-    screenY: Schema.Number,
-    clientX: Schema.Number,
-    clientY: Schema.Number,
-    maybeIndex: Schema.Option(Schema.Number),
+    screenX: Schema.Finite,
+    screenY: Schema.Finite,
+    clientX: Schema.Finite,
+    clientY: Schema.Finite,
+    maybeIndex: Schema.Option(Schema.Finite),
   },
   CancelledPointer: {},
   PressedEscape: {},
   CompletedAnnounceReorder: {},
   CompletedSizeLiftedItem: {},
 });
-export type Message = typeof Message.Type;
 
-// OUT MESSAGE
+export type Message = typeof Message.Type;
 
 /** Union of OutMessages a sortable reports. `Moved`: an item was dropped somewhere new.
  *  `toIndex` is its place in the list once moved; `maybeAfterItemId` and `maybeBeforeItemId`
@@ -127,15 +120,14 @@ export type Message = typeof Message.Type;
 export const OutMessage = defineMessageUnion({
   Moved: {
     itemId: Schema.String,
-    fromIndex: Schema.Number,
-    toIndex: Schema.Number,
+    fromIndex: Schema.Finite,
+    toIndex: Schema.Finite,
     maybeAfterItemId: Schema.Option(Schema.String),
     maybeBeforeItemId: Schema.Option(Schema.String),
   },
 });
-export type OutMessage = typeof OutMessage.Type;
 
-// INIT
+export type OutMessage = typeof OutMessage.Type;
 
 /** Configuration for creating a sortable with `init`. The `id` must be unique in the document;
  *  the list's DOM hooks are scoped by it. */
@@ -148,48 +140,52 @@ export const init = (config: InitConfig): Model => ({
   maybeHeld: Option.none(),
 });
 
-// ACCESSORS
-
-/** The list's id, unique in the document. */
 const id = (model: Model): string => model.dragAndDrop.id;
 
-// DOM HOOKS
-
-const itemHook = (model: Model, itemId: string): string => `${id(model)}/${itemId}`;
+const itemHook = (model: Model, itemId: string): string =>
+  `${id(model)}/${itemId}`;
 
 const GRIP_ATTRIBUTE = "sortable-grip";
 
-// COMMAND
-
 /** Says a step of a move through the page's live region (as `Announcer.Announce` does). */
 export const AnnounceReorder = Command.define("AnnounceReorder", {
   args: { text: Schema.String },
   messages: [Message.CompletedAnnounceReorder],
   execute: ({ text }) =>
-    Announcer.announce(text).pipe(Effect.as(Message.CompletedAnnounceReorder())),
+    Announcer.announce(text).pipe(
+      Effect.as(Message.CompletedAnnounceReorder())
+    ),
 });
 
-// UPDATE
-
 type UpdateReturn = Update.ReturnWithOutMessage<Model, Message, OutMessage>;
 
-const fill = (template: string, item: string, position = 0, total = 0): string =>
+const fill = (
+  template: string,
+  item: string,
+  position = 0,
+  total = 0
+): string =>
   template
     .replaceAll("{item}", item)
     .replaceAll("{position}", position.toLocaleString(LOCALE))
     .replaceAll("{total}", total.toLocaleString(LOCALE));
 
-const indexOf = (items: ReadonlyArray<Item>, itemId: string): Option.Option<number> =>
+const indexOf = (
+  items: readonly Item[],
+  itemId: string
+): Option.Option<number> =>
   Array.findFirstIndex(items, (item) => item.id === itemId);
 
-/** Where the held item would land, counted among the others (both the keyboard's target and
- *  the pointer's are), clamped to the list. */
 const targetIndex = (model: Model, held: Held): Option.Option<number> =>
   Option.map(UiDragAndDrop.maybeDropTarget(model.dragAndDrop), ({ index }) =>
-    Math.min(Math.max(index, 0), held.items.length - 1),
+    Math.min(Math.max(index, 0), held.items.length - 1)
   );
 
-const placementOf = (model: Model, held: Held, rawIndex: number): Option.Option<OutMessage> =>
+const placementOf = (
+  model: Model,
+  held: Held,
+  rawIndex: number
+): Option.Option<OutMessage> =>
   Option.gen(function* () {
     const fromIndex = yield* indexOf(held.items, held.item.id);
     const others = Array.filter(held.items, (item) => item.id !== held.item.id);
@@ -203,8 +199,14 @@ const placementOf = (model: Model, held: Held, rawIndex: number): Option.Option<
       itemId: held.item.id,
       fromIndex,
       toIndex,
-      maybeAfterItemId: Option.map(Array.get(others, toIndex - 1), (item) => item.id),
-      maybeBeforeItemId: Option.map(Array.get(others, toIndex), (item) => item.id),
+      maybeAfterItemId: Option.map(
+        Array.get(others, toIndex - 1),
+        (item) => item.id
+      ),
+      maybeBeforeItemId: Option.map(
+        Array.get(others, toIndex),
+        (item) => item.id
+      ),
     });
   });
 
@@ -217,8 +219,10 @@ const foldDragAndDropOutMessage = UiDragAndDrop.OutMessage.match<
       Update.withOutMessage(
         { model: stepModel },
         Option.getOrUndefined(
-          Option.flatMap(stepModel.maybeHeld, (held) => placementOf(stepModel, held, toIndex)),
-        ),
+          Option.flatMap(stepModel.maybeHeld, (held) =>
+            placementOf(stepModel, held, toIndex)
+          )
+        )
       ),
   Cancelled: () => (stepModel) => ({ model: stepModel }),
 });
@@ -235,48 +239,49 @@ 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 an item set down without a move says: put back, or cancelled. */
+const positionOf = (index: number): number => index + 1;
+
 const moveText = (
   held: Held,
   previous: Model,
   next: Model,
   maybeOutMessage: Option.Option<OutMessage>,
-  putBack: string,
+  putBack: string
 ): Option.Option<string> => {
   const { label } = held.item;
   const total = held.items.length;
   const before = phaseOf(previous.dragAndDrop);
   const after = phaseOf(next.dragAndDrop);
-  const position = (index: number): number => index + 1;
 
   if (after === "Idle") {
     return isCarrying(before)
       ? Option.some(
           Option.match(maybeOutMessage, {
             onNone: () => fill(putBack, label),
-            onSome: ({ toIndex }) => fill(COPY.dropped, label, position(toIndex), total),
-          }),
+            onSome: ({ toIndex }) =>
+              fill(COPY.dropped, label, positionOf(toIndex), total),
+          })
         )
       : Option.none();
   } else if (before === "Pressed" && after === "PointerDragging") {
     return Option.some(fill(COPY.pickedUp, label));
   } else if (before === "Idle" && after === "KeyboardDragging") {
     return Option.map(targetIndex(next, held), (index) =>
-      fill(COPY.pickedUpByKeyboard, label, position(index), total),
+      fill(COPY.pickedUpByKeyboard, label, positionOf(index), total)
     );
   } else if (after === "KeyboardDragging") {
     return pipe(
       targetIndex(next, held),
-      Option.filter((index) => !Option.contains(targetIndex(previous, held), index)),
-      Option.map((index) => fill(COPY.over, label, position(index), total)),
+      Option.filter(
+        (index) => !Option.contains(targetIndex(previous, held), index)
+      ),
+      Option.map((index) => fill(COPY.over, label, positionOf(index), total))
     );
-  } else {
-    return Option.none();
   }
+
+  return Option.none();
 };
 
-/** Announces the step a DragAndDrop update took and forgets the held item once it is down. */
 const settle =
   (previous: Model, putBack = COPY.putBack) =>
   (dragAndDropUpdate: UpdateReturn): UpdateReturn =>
@@ -289,30 +294,33 @@ const settle =
             previous,
             dragAndDropUpdate.model,
             Option.fromNullishOr(dragAndDropUpdate.outMessage),
-            putBack,
-          ),
+            putBack
+          )
         ),
-        (text) => AnnounceReorder({ text }),
-      ),
+        (text) => AnnounceReorder({ text })
+      )
     );
 
-/** The item `itemId` and its place, when the list may lift it now. */
 const liftable = (
   model: Model,
-  items: ReadonlyArray<Item>,
-  itemId: string,
+  items: readonly Item[],
+  itemId: string
 ): Option.Option<Readonly<{ index: number; item: Item }>> =>
   Option.filter(
     Option.map(
       Array.findFirstWithIndex(items, (item) => item.id === itemId),
-      ([item, index]) => ({ index, item }),
+      ([item, index]) => ({ index, item })
     ),
-    () => canLift(model),
+    () => canLift(model)
   );
 
-/** Lifts `held` with the DragAndDrop Message `lift` and says so. */
-const lift = (model: Model, held: Held, liftMessage: UiDragAndDrop.Message): UpdateReturn => {
+const lift = (
+  model: Model,
+  held: Held,
+  liftMessage: UiDragAndDrop.Message
+): UpdateReturn => {
   const pressed = modifyFields(model, { maybeHeld: () => Option.some(held) });
+
   return settle(pressed)(foldDragAndDrop(pressed, liftMessage));
 };
 
@@ -330,43 +338,53 @@ const pointerMove = (model: Model, pointer: PointerAt): UiDragAndDrop.Message =>
     screenY: pointer.screenY,
     clientX: pointer.clientX,
     clientY: pointer.clientY,
-    maybeDropTarget: Option.map(pointer.maybeIndex, (index) => ({ containerId: id(model), index })),
+    maybeDropTarget: Option.map(pointer.maybeIndex, (index) => ({
+      containerId: id(model),
+      index,
+    })),
   });
 
-/** Drops a carried item where the pointer is let go, read again there: the page may have
- *  scrolled under a still pointer since it last moved. A press that never moved is let go
- *  as it is, so it stays a press. */
+const isPointerCarrying = (model: Model): boolean =>
+  phaseOf(model.dragAndDrop) === "PointerDragging";
+
+const rereadPointerAtRelease = (
+  model: Model,
+  pointer: PointerAt
+): UpdateReturn => foldDragAndDrop(model, pointerMove(model, pointer));
+
 const release = (model: Model, pointer: PointerAt): UpdateReturn => {
-  if (phaseOf(model.dragAndDrop) !== "PointerDragging") {
+  if (!isPointerCarrying(model)) {
     return foldDragAndDrop(model, releasedPointer());
   }
 
-  const moved = foldDragAndDrop(model, pointerMove(model, pointer));
+  const moved = rereadPointerAtRelease(model, pointer);
   const released = foldDragAndDrop(moved.model, releasedPointer());
+
   return Update.withOutMessage(
     {
       model: released.model,
       commands: [...(moved.commands ?? []), ...(released.commands ?? [])],
     },
-    released.outMessage,
+    released.outMessage
   );
 };
 
 const cancelDrag = (model: Model): UpdateReturn =>
   settle(model, COPY.cancelled)(foldDragAndDrop(model, cancelledDrag()));
 
-const updateDragAndDrop = (model: Model, message: UiDragAndDrop.Message): UpdateReturn =>
+const updateDragAndDrop = (
+  model: Model,
+  message: UiDragAndDrop.Message
+): UpdateReturn =>
   Match.value(message).pipe(
     Match.withReturnType<UpdateReturn>(),
-    // Tab while an item is held reaches DragAndDrop as a step to another list: the list has
-    // no other, so it stays
     Match.tag("PressedArrowKey", ({ direction }) =>
       direction === "NextContainer" || direction === "PreviousContainer"
         ? { model }
-        : settle(model)(foldDragAndDrop(model, message)),
+        : settle(model)(foldDragAndDrop(model, message))
     ),
     Match.tag("CancelledDrag", () => cancelDrag(model)),
-    Match.orElse(() => settle(model)(foldDragAndDrop(model, message))),
+    Match.orElse(() => settle(model)(foldDragAndDrop(model, message)))
   );
 
 /** Processes a sortable Message and returns the next Model, Commands and OutMessage. */
@@ -374,20 +392,32 @@ export const update = (model: Model, message: Message) =>
   Message.match<UpdateReturn>(message, {
     GotDragAndDropMessage: ({ message: dragAndDropMessage }) =>
       updateDragAndDrop(model, dragAndDropMessage),
-    PressedItem: ({ itemId, pointerId, screenX, screenY, clientX, clientY, items }) =>
+    PressedItem: ({
+      itemId,
+      pointerId,
+      screenX,
+      screenY,
+      clientX,
+      clientY,
+      items,
+    }) =>
       Option.match(liftable(model, items, itemId), {
         onNone: () => ({ model }),
         onSome: ({ index, item }) =>
           lift(
             model,
-            { item, items, maybePress: Option.some({ pointerId, clientX, clientY }) },
+            {
+              item,
+              items,
+              maybePress: Option.some({ pointerId, clientX, clientY }),
+            },
             pressedDraggable({
               itemId: itemHook(model, itemId),
               containerId: id(model),
               index,
               screenX,
               screenY,
-            }),
+            })
           ),
       }),
     PressedGripKey: ({ itemId, items }) =>
@@ -401,52 +431,49 @@ export const update = (model: Model, message: Message) =>
               itemId: itemHook(model, itemId),
               containerId: id(model),
               index,
-            }),
+            })
           ),
       }),
-    MovedPointer: (pointer) => settle(model)(foldDragAndDrop(model, pointerMove(model, pointer))),
+    MovedPointer: (pointer) =>
+      settle(model)(foldDragAndDrop(model, pointerMove(model, pointer))),
     ReleasedPointer: (pointer) => settle(model)(release(model, pointer)),
-    CancelledPointer: () => settle(model)(foldDragAndDrop(model, cancelledDrag())),
+    CancelledPointer: () =>
+      settle(model)(foldDragAndDrop(model, cancelledDrag())),
     PressedEscape: () => cancelDrag(model),
     CompletedAnnounceReorder: () => ({ model }),
     CompletedSizeLiftedItem: () => ({ model }),
   });
 
-// CAPABILITIES
-
 /** Lets items move, or stops them: while work runs, nothing moves. Stopping cancels an item
  *  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 } : cancelDrag(next);
 };
 
-// SUBSCRIPTION
-
-// NOTE: @foldkit/ui gap: DragAndDrop's pointer resolves a drop along one axis, which a
-// wrapping grid cannot use, so the list reads the pointer itself and hands DragAndDrop its
-// moves and release.
-/** Where a pointer at this point would drop the held item in the list `listId`: none when the
- *  pointer is not over it. */
 const pointerIndex = (
   listId: string,
   heldHook: string,
   clientX: number,
-  clientY: number,
+  clientY: number
 ): Option.Option<number> =>
   pipe(
     Array.findFirst(
       document.elementsFromPoint(clientX, clientY),
-      (element) => element.getAttribute("data-droppable-id") === listId,
+      (element) =>
+        element instanceof HTMLElement &&
+        element.dataset["droppableId"] === listId
     ),
-    Option.map((list) => insertionIndex(list, heldHook, clientX, clientY)),
+    Option.map((list) => insertionIndex(list, heldHook, clientX, clientY))
   );
 
 const PointerHold = Schema.Struct({
   listId: Schema.String,
   heldHook: Schema.String,
-  pointerId: Schema.Number,
+  pointerId: Schema.Finite,
 });
+
 type PointerHold = typeof PointerHold.Type;
 
 const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
@@ -454,10 +481,14 @@ const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
   screenY: event.screenY,
   clientX: event.clientX,
   clientY: event.clientY,
-  maybeIndex: pointerIndex(hold.listId, hold.heldHook, event.clientX, event.clientY),
+  maybeIndex: pointerIndex(
+    hold.listId,
+    hold.heldHook,
+    event.clientX,
+    event.clientY
+  ),
 });
 
-/** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
 const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
   dragMessages<Message>(hold.pointerId, {
     moved: (event) => Message.MovedPointer(pointerAt(hold, event)),
@@ -476,12 +507,13 @@ const pointerSubscriptions = Subscription.make<Model, Message>()((entry) => ({
               listId: id(model),
               heldHook: itemHook(model, item.id),
               pointerId,
-            })),
+            }))
           ),
           () => {
             const phase = phaseOf(model.dragAndDrop);
+
             return phase === "Pressed" || phase === "PointerDragging";
-          },
+          }
         ),
       }),
       dependenciesToStream: ({ maybeHold }) =>
@@ -489,13 +521,10 @@ const pointerSubscriptions = Subscription.make<Model, Message>()((entry) => ({
           onNone: () => Stream.empty,
           onSome: (hold) => Stream.merge(pointerMessages(hold), markDragging),
         }),
-    },
+    }
   ),
 }));
 
-// NOTE: @foldkit/ui gap: DragAndDrop's Subscription keys are fixed, so two of its users on a
-// page would share them. The list lifts the ones it uses under its own names, behind the
-// parent's prefix.
 const dragSubscriptions = Subscription.lift({
   keyboard: UiDragAndDrop.subscriptions.documentKeyboard,
   autoScroll: UiDragAndDrop.subscriptions.autoScroll,
@@ -507,7 +536,7 @@ const dragSubscriptions = Subscription.lift({
 const sortableSubscriptions = Subscription.aggregate(
   pointerSubscriptions,
   escapeSubscriptions<Model, Message>(Message.PressedEscape()),
-  dragSubscriptions,
+  dragSubscriptions
 );
 
 /** A held item follows the pointer, the arrows and Space move and drop it, Escape puts it back
@@ -518,22 +547,28 @@ const sortableSubscriptions = Subscription.aggregate(
 export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
   prefixKeys(keyPrefix, sortableSubscriptions);
 
-// LIFTED ITEM
-
 /** Sizes the copy that follows the pointer to the item it lifts, and keeps the pointer where
  *  it pressed the item. Measures the item once, when the copy appears. */
 export const SizeLiftedItem = Mount.define("SizeLiftedItem", {
-  args: { itemHook: Schema.String, pressX: Schema.Number, pressY: Schema.Number },
+  args: {
+    itemHook: Schema.String,
+    pressX: Schema.Finite,
+    pressY: Schema.Finite,
+  },
   messages: [Message.CompletedSizeLiftedItem],
   execute: ({ element, itemHook: 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.CompletedSizeLiftedItem();
     }),
 });
 
-// VIEW
-
 /** How the items lay out: a column of rows, tiles that wrap, or the parent's own panels. */
 export type Layout = "List" | "Grid" | "Panels";
 
@@ -550,7 +585,7 @@ export type ItemRender = Readonly<{
 /** Per-render inputs passed to `view` through `h.submodel`'s `viewInputs`. The `to*` members
  *  are functions because they may carry the parent's handlers. */
 export type ViewInputs = Readonly<{
-  items: ReadonlyArray<Item>;
+  items: readonly Item[];
   /** Names the list for screen readers. */
   label: string;
   /** `"List"` (the default): rows between 1px rules, for a flush panel. `"Grid"`: tiles that
@@ -562,62 +597,80 @@ export type ViewInputs = Readonly<{
   isReadOnly?: boolean;
   /** One item's content, beside its grip. Also called for the held copy, with
    *  `render.isLifted`. */
-  toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
+  toItemView: (item: Item, render: ItemRender) => readonly Html[];
 }>;
 
 type ListInfo = Readonly<{
   model: Model;
   layout: Layout;
   isMovable: boolean;
-  items: ReadonlyArray<Item>;
+  items: readonly Item[];
   maybeDropMark: Option.Option<DropMark>;
-  toItemView: (item: Item, render: ItemRender) => ReadonlyArray<Html>;
+  toItemView: (item: Item, render: ItemRender) => readonly Html[];
 }>;
 
 const helpId = (model: Model): string => `${id(model)}-grip-help`;
 
 const isHeldItem = (model: Model, itemId: string): boolean =>
   UiDragAndDrop.isDragging(model.dragAndDrop) &&
-  Option.contains(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop), itemHook(model, itemId));
+  Option.contains(
+    UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop),
+    itemHook(model, itemId)
+  );
 
 const liftedGrip = <ParentMessage>(h: HtmlBuilder<ParentMessage>): Html =>
-  h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [Glyph.view({ name: "grip" }, h)]);
+  h.span(
+    [h.Class("iconbtn quiet"), h.AriaHidden(true)],
+    [Glyph.view({ name: "grip" }, h)]
+  );
 
-/** The item's content beside its grip, or, in a layout where the item places its grip,
- *  alone. */
 const itemContents = <ParentMessage>(
   info: ListInfo,
   item: Item,
   render: ItemRender,
-  h: HtmlBuilder<ParentMessage>,
-): ReadonlyArray<Html> => {
+  h: HtmlBuilder<ParentMessage>
+): readonly Html[] => {
   const body = h.div([h.Class("sortable-body")], info.toItemView(item, render));
+
   return info.layout === "Panels" ? [body] : [render.grip, body];
 };
 
 const liftedView = <ParentMessage>(
   info: ListInfo,
   item: Item,
-  h: HtmlBuilder<ParentMessage>,
+  h: HtmlBuilder<ParentMessage>
 ): Html =>
   h.div(
     [h.Class("sortable-item lifted")],
-    itemContents(info, item, { isLifted: true, grip: liftedGrip(h) }, h),
+    itemContents(info, item, { isLifted: true, grip: liftedGrip(h) }, h)
   );
 
-const gripView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html => {
+const gripView = (
+  info: ListInfo,
+  item: Item,
+  h: HtmlBuilder<Message>
+): Html => {
   const { model, isMovable, items } = info;
   const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
 
   const onGripKey: Attribute<Message> = h.OnKeyDownPreventDefault((key) =>
     Option.liftPredicate(
       Message.PressedGripKey({ itemId: item.id, items }),
-      () => isIdleNow && (key === " " || key === "Enter"),
-    ),
+      () => isIdleNow && (key === " " || key === "Enter")
+    )
   );
 
   const onGripPress: Attribute<Message> = h.OnPointerDown(
-    (_pointerType, button, screenX, screenY, _time, clientX, clientY, pointerId) =>
+    (
+      _pointerType,
+      button,
+      screenX,
+      screenY,
+      _time,
+      clientX,
+      clientY,
+      pointerId
+    ) =>
       Option.liftPredicate(
         Message.PressedItem({
           itemId: item.id,
@@ -628,14 +681,10 @@ const gripView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
           clientY,
           items,
         }),
-        () => isIdleNow && button === LEFT_BUTTON,
-      ),
+        () => isIdleNow && button === LEFT_BUTTON
+      )
   );
 
-  // NOTE: @foldkit/ui gap: DragAndDrop's `draggable` bundle forces `role="option"`, which a
-  // plain list's items are not. So the grip carries the ui's `data-draggable-id` by hand, and
-  // FocusItem finds the grip by it. While moves are held the grip stays, held, so the focus
-  // of a keyboard hold that stopping cancels has somewhere to return.
   return IconButton.view(
     {
       glyph: "grip",
@@ -651,14 +700,12 @@ const gripView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
         ...(isMovable ? [onGripKey, onGripPress] : []),
       ],
     },
-    h,
+    h
   );
 };
 
 type DropMark = Readonly<{ itemId: string; side: "Before" | "After" }>;
 
-/** Where a pointer would drop the held item, marked on the item it would land beside: before
- *  the other item at its target, or after the last. None where it already was. */
 const dropMarkOf = (model: Model): Option.Option<DropMark> =>
   pipe(
     model.maybeHeld,
@@ -666,9 +713,15 @@ const dropMarkOf = (model: Model): Option.Option<DropMark> =>
     Option.flatMap((held) =>
       pipe(
         targetIndex(model, held),
-        Option.filter((index) => !Option.contains(indexOf(held.items, held.item.id), index)),
+        Option.filter(
+          (index) => !Option.contains(indexOf(held.items, held.item.id), index)
+        ),
         Option.flatMap((index) => {
-          const others = Array.filter(held.items, (item) => item.id !== held.item.id);
+          const others = Array.filter(
+            held.items,
+            (item) => item.id !== held.item.id
+          );
+
           return Option.orElse(
             Option.map(Array.get(others, index), (item): DropMark => ({
               itemId: item.id,
@@ -678,11 +731,11 @@ const dropMarkOf = (model: Model): Option.Option<DropMark> =>
               Option.map(Array.last(others), (item): DropMark => ({
                 itemId: item.id,
                 side: "After",
-              })),
+              }))
           );
-        }),
-      ),
-    ),
+        })
+      )
+    )
   );
 
 const dropClass = (info: ListInfo, item: Item): string =>
@@ -690,8 +743,9 @@ const dropClass = (info: ListInfo, item: Item): string =>
     Option.filter(info.maybeDropMark, ({ itemId }) => itemId === item.id),
     {
       onNone: () => "",
-      onSome: ({ side }) => (side === "Before" ? " drop-before" : " drop-after"),
-    },
+      onSome: ({ side }) =>
+        side === "Before" ? " drop-before" : " drop-after",
+    }
   );
 
 const itemClass = (info: ListInfo, item: Item): string =>
@@ -700,20 +754,35 @@ const itemClass = (info: ListInfo, item: Item): string =>
 const itemView = (info: ListInfo, item: Item, h: HtmlBuilder<Message>): Html =>
   h.keyed("li")(
     item.id,
-    [...UiDragAndDrop.sortable(itemHook(info.model, item.id)), h.Class(itemClass(info, item))],
-    itemContents(info, item, { isLifted: false, grip: gripView(info, item, h) }, h),
+    [
+      ...UiDragAndDrop.sortable(itemHook(info.model, item.id)),
+      h.Class(itemClass(info, item)),
+    ],
+    itemContents(
+      info,
+      item,
+      { isLifted: false, grip: gripView(info, item, h) },
+      h
+    )
   );
 
-/** The items in order, with the held item's copy where the keyboard would drop it: before the
- *  other item at its target, or last. The copy carries no `data-sortable-id`, so it is not
- *  counted as an item. */
-const itemsView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+const itemsView = (
+  info: ListInfo,
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model, items } = info;
-  const rows = Array.map(items, (item) => ({ item, html: itemView(info, item, h) }));
+
+  const rows = Array.map(items, (item) => ({
+    item,
+    html: itemView(info, item, h),
+  }));
+
   const maybeSlot = pipe(
     model.maybeHeld,
     Option.filter(() => phaseOf(model.dragAndDrop) === "KeyboardDragging"),
-    Option.flatMap((held) => Option.map(targetIndex(model, held), (index) => ({ held, index }))),
+    Option.flatMap((held) =>
+      Option.map(targetIndex(model, held), (index) => ({ held, index }))
+    )
   );
 
   return Option.match(maybeSlot, {
@@ -722,8 +791,9 @@ const itemsView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html>
       const slot = h.keyed("li")(
         "sortable-slot",
         [h.Class("sortable-slot"), h.AriaHidden(true), h.Inert(true)],
-        [liftedView(info, held.item, h)],
+        [liftedView(info, held.item, h)]
       );
+
       const others = Array.filter(rows, ({ item }) => item.id !== held.item.id);
       const maybeBefore = Array.get(others, index);
 
@@ -731,15 +801,19 @@ const itemsView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html>
         onNone: () => [...Array.map(rows, ({ html }) => html), slot],
         onSome: (before) =>
           Array.flatMap(rows, ({ item, html }) =>
-            item.id === before.item.id ? [slot, html] : [html],
+            item.id === before.item.id ? [slot, html] : [html]
           ),
       });
     },
   });
 };
 
-const liftedCopyView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<Html> => {
+const liftedCopyView = (
+  info: ListInfo,
+  h: HtmlBuilder<Message>
+): readonly Html[] => {
   const { model } = info;
+
   const maybeLifted = Option.all({
     style: UiDragAndDrop.ghostStyle(model.dragAndDrop),
     held: model.maybeHeld,
@@ -759,12 +833,12 @@ const liftedCopyView = (info: ListInfo, h: HtmlBuilder<Message>): ReadonlyArray<
               itemHook: itemHook(model, held.item.id),
               pressX: press.clientX,
               pressY: press.clientY,
-            }),
+            })
           ),
         ],
-        [liftedView(info, held.item, h)],
-      ),
-    ),
+        [liftedView(info, held.item, h)]
+      )
+    )
   );
 };
 
@@ -774,7 +848,7 @@ const layoutClass = (layout: Layout): string =>
     Match.when("List", () => "sortable"),
     Match.when("Grid", () => "sortable grid"),
     Match.when("Panels", () => "sortable panels"),
-    Match.exhaustive,
+    Match.exhaustive
   );
 
 /**
@@ -791,33 +865,40 @@ const layoutClass = (layout: Layout): string =>
  * 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 { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
-  const info: ListInfo = {
-    model,
-    layout,
-    isMovable: model.isMovable && !isReadOnly,
-    items,
-    maybeDropMark: dropMarkOf(model),
-    toItemView,
-  };
-
-  return h.div(
-    [h.Class(layoutClass(layout))],
-    [
-      // NOTE: Safari takes list semantics from a list printed without markers, so the list
-      // says it is one
-      h.ul(
-        [
-          h.DataAttribute("droppable-id", id(model)),
-          h.Role("list"),
-          h.AriaLabel(label),
-          h.Class("sortable-items"),
-        ],
-        itemsView(info, h),
-      ),
-      h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
-      ...liftedCopyView(info, h),
-    ],
-  );
-});
+export const view = defineView<Model, Message, ViewInputs>(
+  (model, viewInputs, h): Html => {
+    const {
+      items,
+      label,
+      layout = "List",
+      isReadOnly = false,
+      toItemView,
+    } = viewInputs;
+
+    const info: ListInfo = {
+      model,
+      layout,
+      isMovable: model.isMovable && !isReadOnly,
+      items,
+      maybeDropMark: dropMarkOf(model),
+      toItemView,
+    };
+
+    return h.div(
+      [h.Class(layoutClass(layout))],
+      [
+        h.ul(
+          [
+            h.DataAttribute("droppable-id", id(model)),
+            h.Role("list"),
+            h.AriaLabel(label),
+            h.Class("sortable-items"),
+          ],
+          itemsView(info, h)
+        ),
+        h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+        ...liftedCopyView(info, h),
+      ]
+    );
+  }
+);