@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.23.0

package/src/rail/rail.ts

@@ -87,7 +87,7 @@ export const init = (config: InitConfig): Model => ({
  *  (which leaves the deck at least 421px of a 901px window, the narrowest one the rail stands
  *  in, more than a phone has), and what an arrow on its splitter moves it. The bounds and the
  *  step are the component's, not tokens: the splitter says them as its values. */
-const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
+export const WIDTH = { start: 272, least: 220, most: 480, step: 16 };
 
 const bounded = (width: number): number =>
   Math.round(Number.clamp(width, { minimum: WIDTH.least, maximum: WIDTH.most }));
@@ -238,7 +238,7 @@ type DrawerMessage =
   | typeof Message.WidenedPastDrawer.Type;
 
 /** The width at and under which the rail is a drawer, as the stylesheet has it. */
-const DRAWER_QUERY = "(max-width: 900px)";
+export const DRAWER_QUERY = "(max-width: 900px)";
 
 /** The window crossing the drawer's width: growing past it while the drawer is open closes
  *  the drawer, since the rail is back in the page there. */
@@ -373,9 +373,9 @@ export type ViewInputs = Readonly<{
  *
  * Its splitter sizes it, by a pointer (previewed as it moves) or the side arrows, within its
  * bounds, and reports the width as `ResizedRail` for the parent to keep and pass back as
- * `maybeWidth`, which the view sets as `--rail` on `div.railed`, so the page's padding and the
- * rail's width follow it. The drawer keeps its own width. Lift `subscriptions(keyPrefix)` into
- * the application's, or a dragged splitter follows nothing.
+ * `maybeWidth`, which the view sets as `--railed-width` on `div.railed`, so the page's padding
+ * and the rail's width follow it (without one, `--rail`). The drawer keeps its own width. Lift
+ * `subscriptions(keyPrefix)` into the application's, or a dragged splitter follows nothing.
  *
  * Its state is its own, not `@foldkit/ui`'s Popover: that panel is placed by Floating UI and
  * rendered only while open, and this one is always in the page, placed by the stylesheet, and
@@ -414,7 +414,9 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
   return h.div(
     [
       h.Class("railed"),
-      ...Array.fromOption(Option.map(maybeWidth, (shown) => h.Style({ "--rail": `${shown}px` }))),
+      ...Array.fromOption(
+        Option.map(maybeWidth, (shown) => h.Style({ "--railed-width": `${shown}px` })),
+      ),
     ],
     [
       toDeckView(openButton),

package/src/reel/layout.ts

@@ -247,6 +247,11 @@ export const apply = (layout: Layout, request: OutMessage): Layout =>
       })),
   });
 
+/** Whether `request` changes `layout`: a move, a drop or a stop that would leave it as it is
+ *  is passed over. */
+export const isChange = (layout: Layout, request: OutMessage): boolean =>
+  !Equal.equals(apply(layout, request), layout);
+
 // WIDTHS
 
 /** How close a width is to a preset to count as it. */
@@ -349,7 +354,7 @@ export const requestOf = (
         OutMessage.MovedPane({ paneId, toColumnId: columnId, toIndex: index }),
       Gap: ({ maybeBeforeColumnId }) => OutMessage.PulledOutPane({ paneId, maybeBeforeColumnId }),
     }),
-    (request) => !Equal.equals(apply(layout, request), layout),
+    (request) => isChange(layout, request),
   );
 
 /** Where the pane `paneId` would be once dropped at `target`, in words. */
@@ -469,13 +474,11 @@ export const steppedTarget = (
 const EDGE_SHARE = 0.2;
 const EDGE_MAX = 48;
 
-/** A column as a pointer reads it: its id, its left and right edges, and the vertical middles
- *  of its slots, the held pane's left out. */
+/** A column as a pointer reads it: its id and its left and right edges. */
 export type ColumnBox = Readonly<{
   id: string;
   left: number;
   right: number;
-  slotMiddles: ReadonlyArray<number>;
 }>;
 
 const gapBefore = (columns: ReadonlyArray<ColumnBox>, gap: number): Target =>
@@ -484,18 +487,22 @@ const gapBefore = (columns: ReadonlyArray<ColumnBox>, gap: number): Target =>
 /** Where a pointer at (`clientX`, `clientY`) over a reel whose columns sit at `columns`, left
  *  to right, would drop a pane. Over a column's edge band (or over a gap, or past the last
  *  column) it lands in that gap, as a column of its own; over the rest of a column it lands
- *  among that column's other panes, after each whose middle is above the pointer. */
+ *  among that column's other panes, after each whose middle is above the pointer.
+ *  `slotMiddlesOf` gives the vertical middles of a column's slots, by its index, the held
+ *  pane's left out: it is asked for the column the pointer is over alone, and only when the
+ *  pointer is among its panes. */
 export const targetAtPoint = (
   columns: ReadonlyArray<ColumnBox>,
   clientX: number,
   clientY: number,
+  slotMiddlesOf: (index: number) => ReadonlyArray<number>,
 ): Target =>
   pipe(
     Array.findFirstIndex(columns, ({ right }) => clientX <= right),
     Option.flatMap((index) => Option.map(Array.get(columns, index), (box) => ({ index, box }))),
     Option.match({
       onNone: () => gapBefore(columns, columns.length),
-      onSome: ({ index, box: { id, left, right, slotMiddles } }) => {
+      onSome: ({ index, box: { id, left, right } }) => {
         const band = Math.min((right - left) * EDGE_SHARE, EDGE_MAX);
         if (clientX < left + band) {
           return gapBefore(columns, index);
@@ -504,7 +511,7 @@ export const targetAtPoint = (
         } else {
           return Target.Into({
             columnId: id,
-            index: Array.filter(slotMiddles, (middle) => middle < clientY).length,
+            index: Array.filter(slotMiddlesOf(index), (middle) => middle < clientY).length,
           });
         }
       },

package/src/reel/reel.ts

@@ -1,4 +1,16 @@
-import { Array, Effect, Equal, Match, Number, Option, Order, Schema, Stream, String } from "effect";
+import {
+  Array,
+  Effect,
+  Equal,
+  Match,
+  Number,
+  Option,
+  Order,
+  Queue,
+  Schema,
+  Stream,
+  String,
+} from "effect";
 import * as Command from "foldkit/command";
 import type { Attribute, Html, HtmlBuilder } from "foldkit/html";
 import { defineMessageUnion } from "foldkit/message";
@@ -42,6 +54,7 @@ import {
   columnOfTarget,
   fill,
   firstPlace,
+  isChange,
   isSplitterPresent,
   isTargetPresent,
   landingWords,
@@ -61,21 +74,22 @@ import {
 
 // MODEL
 
+/** How the keyboard carries what it holds: said on the grip and once it is picked up. */
+const KEYBOARD_MOVES = "Arrow keys move it, space drops it, escape or tab puts it back.";
+
 /** The words a reel says. `{pane}` is a pane's label, `{subject}` what moves (the held pane,
  *  or a column a key moves, by its first pane), `{where}` a place and `{column}` a column's
  *  number. */
 const COPY = {
   paneGrip: "Move {pane}",
-  gripHelp:
-    "Press space to pick it up. Arrow keys move it, space drops it, escape or tab puts it back.",
+  gripHelp: `Press space to pick it up. ${KEYBOARD_MOVES}`,
   widthLabel: "Width of column {column}",
   heightLabel: "Height of {pane}",
   focused: "{pane}, {where}.",
   moved: "{subject} moved to {where}.",
   widened: "Column {column} takes {width}.",
   pickedUp: "Picked up {subject}.",
-  pickedUpByKeyboard:
-    "Picked up {subject}. Arrow keys move it, space drops it, escape or tab puts it back.",
+  pickedUpByKeyboard: `Picked up {subject}. ${KEYBOARD_MOVES}`,
   over: "{subject}, {where}.",
   dropped: "{subject} dropped at {where}.",
   putBack: "{subject} put back where it was.",
@@ -665,7 +679,7 @@ const requestStep = (
   maybeRequest: Option.Option<OutMessage>,
 ): UpdateReturn =>
   Option.match(
-    Option.filter(maybeRequest, (request) => !Equal.equals(apply(layout, request), layout)),
+    Option.filter(maybeRequest, (request) => isChange(layout, request)),
     {
       onNone: () => ({ model }),
       onSome: (request) => {
@@ -823,29 +837,32 @@ const EDGE_SCROLL = 40;
 const EDGE_SCROLL_PIXELS_PER_MILLI = 0.8;
 const LONGEST_FRAME_MILLIS = 50;
 
-/** A column as the pointer reads it from the page: its edges, and the middles of its slots
- *  but the held pane's. */
-const columnBoxOf = (element: Element, heldId: string): ColumnBox => {
+/** A column as the pointer reads it from the page: its edges. */
+const columnBoxOf = (element: Element): ColumnBox => {
   const rect = element.getBoundingClientRect();
   return {
     id: element.getAttribute("data-reel-column") ?? "",
     left: rect.left,
     right: rect.right,
-    slotMiddles: Array.map(
-      Array.filter(
-        Array.fromIterable(element.querySelectorAll("[data-reel-slot]")),
-        (slot) => slot.getAttribute("data-reel-slot") !== heldId,
-      ),
-      (slot) => {
-        const slotRect = slot.getBoundingClientRect();
-        return slotRect.top + slotRect.height / 2;
-      },
-    ),
   };
 };
 
+/** The middles of a column's slots but the held pane's. */
+const slotMiddlesOf = (element: Element, heldId: string): ReadonlyArray<number> =>
+  Array.map(
+    Array.filter(
+      Array.fromIterable(element.querySelectorAll("[data-reel-slot]")),
+      (slot) => slot.getAttribute("data-reel-slot") !== heldId,
+    ),
+    (slot) => {
+      const slotRect = slot.getBoundingClientRect();
+      return slotRect.top + slotRect.height / 2;
+    },
+  );
+
 /** Where a pointer at (`clientX`, `clientY`) would drop the pane `paneId` in the reel
- *  `reelHook` names, read from where its columns and their slots sit: none outside the reel. */
+ *  `reelHook` names, read from where its columns sit and the slots of the one it is over: none
+ *  outside the reel. */
 const pointerTarget = (
   reelHook: string,
   paneId: string,
@@ -862,14 +879,15 @@ const pointerTarget = (
         clientY <= rect.bottom
       );
     }),
-    (view) =>
-      targetAtPoint(
-        Array.map(Array.fromIterable(view.querySelectorAll("[data-reel-column]")), (element) =>
-          columnBoxOf(element, paneId),
-        ),
-        clientX,
-        clientY,
-      ),
+    (view) => {
+      const columns = Array.fromIterable(view.querySelectorAll("[data-reel-column]"));
+      return targetAtPoint(Array.map(columns, columnBoxOf), clientX, clientY, (index) =>
+        Option.match(Array.get(columns, index), {
+          onNone: () => [],
+          onSome: (column) => slotMiddlesOf(column, paneId),
+        }),
+      );
+    },
   );
 
 const PointerHold = Schema.Struct({
@@ -885,13 +903,60 @@ const pointerAt = (hold: PointerHold, event: PointerEvent): PointerAt => ({
   maybeTarget: pointerTarget(hold.reelHook, hold.paneId, event.clientX, event.clientY),
 });
 
-/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. */
+/** The pressing pointer's moves, release and cancel; another pointer's are not the reel's. A
+ *  pointer reports moves faster than the page draws, and each reads the reel's layout, so its
+ *  moves are read once a frame, at the latest; a release first reads the move not read yet,
+ *  so the pane is carried as far as the pointer went, and a cancel drops it. */
 const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
-  dragMessages<Message>(hold.pointerId, {
-    moved: (event) => Message.MovedPointer(pointerAt(hold, event)),
-    released: (event) => Message.ReleasedPointer(pointerAt(hold, event)),
-    cancelled: () => Message.CancelledPointer(),
-  });
+  Stream.callback<Message>((queue) =>
+    Effect.acquireRelease(
+      Effect.sync(() => {
+        const state = { maybeMove: Option.none<PointerEvent>(), frame: 0 };
+        const offer = (message: Message): void => {
+          Queue.offerUnsafe(queue, message);
+        };
+        const readMove = (): void => {
+          cancelAnimationFrame(state.frame);
+          Option.map(state.maybeMove, (event) =>
+            offer(Message.MovedPointer(pointerAt(hold, event))),
+          );
+          state.maybeMove = Option.none();
+        };
+        const onMove = (event: PointerEvent): void => {
+          if (event.pointerId === hold.pointerId) {
+            if (Option.isNone(state.maybeMove)) {
+              state.frame = requestAnimationFrame(readMove);
+            }
+            state.maybeMove = Option.some(event);
+          }
+        };
+        const onUp = (event: PointerEvent): void => {
+          if (event.pointerId === hold.pointerId) {
+            readMove();
+            offer(Message.ReleasedPointer(pointerAt(hold, event)));
+          }
+        };
+        const onCancel = (event: PointerEvent): void => {
+          if (event.pointerId === hold.pointerId) {
+            cancelAnimationFrame(state.frame);
+            state.maybeMove = Option.none();
+            offer(Message.CancelledPointer());
+          }
+        };
+        document.addEventListener("pointermove", onMove);
+        document.addEventListener("pointerup", onUp);
+        document.addEventListener("pointercancel", onCancel);
+        return { state, onMove, onUp, onCancel };
+      }),
+      ({ state, onMove, onUp, onCancel }) =>
+        Effect.sync(() => {
+          cancelAnimationFrame(state.frame);
+          document.removeEventListener("pointermove", onMove);
+          document.removeEventListener("pointerup", onUp);
+          document.removeEventListener("pointercancel", onCancel);
+        }),
+    ),
+  );
 
 /** Which way a pointer at `at` scrolls a box from `low` to `high`: towards the edge it is near. */
 const towards = (at: number, low: number, high: number): number => {
@@ -1224,33 +1289,32 @@ const reelSplitterAttributes = (
     h,
   );
 
-const dropClass = (info: ReelInfo, column: Column, paneId: string): string =>
-  Option.match(
-    Option.flatMap(info.maybeMark, (mark) => {
-      if (mark._tag !== "Into" || mark.columnId !== column.id) {
-        return Option.none();
-      }
-      const others = Array.filter(
-        column.panes,
-        (pane) => !Option.contains(info.maybeCarriedId, pane.id),
-      );
-      return Option.orElse(
+/** The pane a drop into `column` is marked on, and the class that marks it: the pane it would
+ *  land before, or the last one when it would land at the end, the carried pane left out. */
+const dropMarkOf = (
+  info: ReelInfo,
+  column: Column,
+): Option.Option<Readonly<{ paneId: string; markClass: string }>> =>
+  Option.flatMap(info.maybeMark, (mark) => {
+    if (mark._tag !== "Into" || mark.columnId !== column.id) {
+      return Option.none();
+    }
+    const others = Array.filter(
+      column.panes,
+      (pane) => !Option.contains(info.maybeCarriedId, pane.id),
+    );
+    return Option.orElse(
+      Option.map(Array.get(others, mark.index), ({ id }) => ({
+        paneId: id,
+        markClass: " drop-before",
+      })),
+      () =>
         Option.map(
-          Option.filter(Array.get(others, mark.index), (pane) => pane.id === paneId),
-          () => " drop-before",
+          Option.filter(Array.last(others), () => mark.index >= others.length),
+          ({ id }) => ({ paneId: id, markClass: " drop-after" }),
         ),
-        () =>
-          Option.map(
-            Option.filter(
-              Array.last(others),
-              (pane) => mark.index >= others.length && pane.id === paneId,
-            ),
-            () => " drop-after",
-          ),
-      );
-    }),
-    { onNone: () => "", onSome: (mark) => mark },
-  );
+    );
+  });
 
 const isGapMarked = (info: ReelInfo, maybeBeforeColumnId: Option.Option<string>): boolean =>
   Option.exists(
@@ -1259,14 +1323,18 @@ const isGapMarked = (info: ReelInfo, maybeBeforeColumnId: Option.Option<string>)
   );
 
 const slotView = (
-  info: ReelInfo,
   anchors: ReadonlyMap<string, string>,
-  column: Column,
+  maybeDropMark: Option.Option<Readonly<{ paneId: string; markClass: string }>>,
   pane: Pane,
   h: HtmlBuilder<Message>,
 ): Html =>
   h.keyed("div")(pane.id, [
-    h.Class(`reel-slot${dropClass(info, column, pane.id)}`),
+    h.Class(
+      `reel-slot${Option.match(
+        Option.filter(maybeDropMark, ({ paneId }) => paneId === pane.id),
+        { onNone: () => "", onSome: ({ markClass }) => markClass },
+      )}`,
+    ),
     h.DataAttribute("reel-slot", pane.id),
     h.Style({ "--reel-weight": `${pane.weight}`, "--reel-anchor": anchors.get(pane.id) ?? "none" }),
   ]);
@@ -1293,13 +1361,14 @@ const columnView = (
 ): ReadonlyArray<Html> => {
   const { model, layout } = info;
   const total = Number.sumAll(Array.map(column.panes, (pane) => pane.weight));
+  const maybeDropMark = dropMarkOf(info, column);
   const stack = Array.flatMap(column.panes, (pane, row) => [
     ...Array.fromOption(
       Option.map(Array.get(column.panes, row - 1), (above) =>
         splitView(model, above, total > 0 ? above.weight / total : 0, h),
       ),
     ),
-    slotView(info, anchors, column, pane, h),
+    slotView(anchors, maybeDropMark, pane, h),
   ]);
   const maybeNextId = Option.map(Array.get(layout, index + 1), ({ id }) => id);
 

package/src/scheme/scheme.ts

@@ -21,7 +21,7 @@ export const toPinnedValue = (scheme: Scheme): Option.Option<string> =>
   );
 
 /** The scheme a `data-scheme` value pins. Anything else, or nothing, is `System`. */
-export const fromPinnedValue = (value: string | null | undefined): Scheme =>
+export const fromPinnedValue = (value: string | null): Scheme =>
   Match.value(value).pipe(
     Match.withReturnType<Scheme>(),
     Match.when("light", () => "Paper"),

package/src/segmented/segmented.ts

@@ -2,7 +2,6 @@ import { Button as UiButton } from "@foldkit/ui";
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import type { Attributes } from "../attributes/attributes.ts";
 import { pressedAttribute } from "../button/button.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import type { GlyphName } from "../glyph/glyphs.ts";
@@ -24,8 +23,6 @@ export type ViewConfig<Value extends string, Message> = Readonly<{
   options: ReadonlyArray<Segment<Value>>;
   value: Value;
   onSelect: (value: Value) => Message;
-  /** Further attributes for the group, never a class. */
-  attributes?: Attributes<Message>;
 }>;
 
 const segmentView = <Value extends string, Message>(
@@ -62,12 +59,7 @@ export const view = <Value extends string, Message>(
   const isGlyphs = Array.every(config.options, (option) => option.glyph !== undefined);
 
   return h.div(
-    [
-      ...(config.attributes ?? []),
-      h.Role("group"),
-      h.AriaLabel(config.label),
-      h.Class(isGlyphs ? "switch" : "nav"),
-    ],
+    [h.Role("group"), h.AriaLabel(config.label), h.Class(isGlyphs ? "switch" : "nav")],
     Array.map(config.options, (option) => segmentView(config, option, h)),
   );
 };

package/src/selectField/selectField.ts

@@ -2,7 +2,7 @@ import { Select as UiSelect } from "@foldkit/ui";
 import { Array } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 
-import { describedByError, errorView } from "../field/field.ts";
+import { controlAttributes, errorView, helpView } from "../field/field.ts";
 
 // VIEW
 
@@ -78,19 +78,12 @@ export const view = <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Messag
           [h.Class("field")],
           [
             h.label(groups.label, [label]),
-            // NOTE: @foldkit/ui gap: Select has no required option, so the wrapper says it.
             h.select(
-              [
-                ...groups.select,
-                ...describedByError(id, error, help !== undefined, h),
-                ...(isRequired ? [h.AriaRequired(true)] : []),
-              ],
+              [...groups.select, ...controlAttributes(id, error, help, isRequired, h)],
               Array.map(options, entryView(h)),
             ),
             ...errorView(id, error, h),
-            ...(help === undefined
-              ? []
-              : [h.p([...groups.description, h.Class("field-help")], [help])]),
+            ...helpView(help, groups.description, h),
           ],
         ),
     },

package/src/sortable/index.ts

@@ -6,7 +6,6 @@ export {
   OutMessage,
   SizeLiftedItem,
   init,
-  isHolding,
   setMovable,
   subscriptions,
   update,

package/src/sortable/sortable.ts

@@ -14,8 +14,9 @@ import * as Button from "../button/button.ts";
 import {
   LEFT_BUTTON,
   activatedKeyboardDrag,
+  canLift,
   cancelledDrag,
-  escapeKeys,
+  escapeSubscriptions,
   insertionIndex,
   isCarrying,
   markDragging,
@@ -25,6 +26,7 @@ import {
   pointerMessages as dragMessages,
   pressedDraggable,
   releasedPointer,
+  settle as settleDrag,
 } from "../drag/drag.ts";
 import * as Glyph from "../glyph/glyph.ts";
 import * as IconButton from "../iconButton/iconButton.ts";
@@ -38,15 +40,16 @@ import { prefixKeys } from "../subscription/prefixKeys.ts";
 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.";
+
 /** 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. Arrow keys move it one place, space drops it, escape cancels.",
+  gripHelp: `Press space to pick the item up. ${KEYBOARD_MOVES}`,
   pickedUp: "Picked up {item}.",
-  pickedUpByKeyboard:
-    "Picked up {item}, {position} of {total}. Arrow keys move it one place, space drops it, escape cancels.",
+  pickedUpByKeyboard: `Picked up {item}, {position} of {total}. ${KEYBOARD_MOVES}`,
   over: "{item}, {position} of {total}.",
   dropped: "{item} dropped at {position} of {total}.",
   putBack: "{item} put back where it was.",
@@ -150,10 +153,6 @@ export const init = (config: InitConfig): Model => ({
 /** The list's id, unique in the document. */
 const id = (model: Model): string => model.dragAndDrop.id;
 
-/** Whether an item is pressed or held. */
-export const isHolding = (model: Model): boolean =>
-  Option.isSome(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop));
-
 // DOM HOOKS
 
 const itemHook = (model: Model, itemId: string): string => `${id(model)}/${itemId}`;
@@ -204,10 +203,7 @@ const placementOf = (model: Model, held: Held, rawIndex: number): Option.Option<
       itemId: held.item.id,
       fromIndex,
       toIndex,
-      maybeAfterItemId: Option.map(
-        toIndex > 0 ? Array.get(others, toIndex - 1) : Option.none(),
-        (item) => item.id,
-      ),
+      maybeAfterItemId: Option.map(Array.get(others, toIndex - 1), (item) => item.id),
       maybeBeforeItemId: Option.map(Array.get(others, toIndex), (item) => item.id),
     });
   });
@@ -283,38 +279,23 @@ const moveText = (
 /** 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 => {
-    const nextModel =
-      phaseOf(dragAndDropUpdate.model.dragAndDrop) === "Idle"
-        ? modifyFields(dragAndDropUpdate.model, { maybeHeld: () => Option.none() })
-        : dragAndDropUpdate.model;
-    const maybeText = Option.flatMap(previous.maybeHeld, (held) =>
-      moveText(
-        held,
-        previous,
-        dragAndDropUpdate.model,
-        Option.fromNullishOr(dragAndDropUpdate.outMessage),
-        putBack,
+  (dragAndDropUpdate: UpdateReturn): UpdateReturn =>
+    settleDrag(
+      dragAndDropUpdate,
+      Option.map(
+        Option.flatMap(previous.maybeHeld, (held) =>
+          moveText(
+            held,
+            previous,
+            dragAndDropUpdate.model,
+            Option.fromNullishOr(dragAndDropUpdate.outMessage),
+            putBack,
+          ),
+        ),
+        (text) => AnnounceReorder({ text }),
       ),
     );
 
-    return Update.withOutMessage(
-      {
-        model: nextModel,
-        commands: [
-          ...(dragAndDropUpdate.commands ?? []),
-          ...Array.fromOption(Option.map(maybeText, (text) => AnnounceReorder({ text }))),
-        ],
-      },
-      dragAndDropUpdate.outMessage,
-    );
-  };
-
-// 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.
-const canLift = (model: Model): boolean => model.isMovable && phaseOf(model.dragAndDrop) === "Idle";
-
 /** The item `itemId` and its place, when the list may lift it now. */
 const liftable = (
   model: Model,
@@ -322,8 +303,9 @@ const liftable = (
   itemId: string,
 ): Option.Option<Readonly<{ index: number; item: Item }>> =>
   Option.filter(
-    Option.flatMap(indexOf(items, itemId), (index) =>
-      Option.map(Array.get(items, index), (item) => ({ index, item })),
+    Option.map(
+      Array.findFirstWithIndex(items, (item) => item.id === itemId),
+      ([item, index]) => ({ index, item }),
     ),
     () => canLift(model),
   );
@@ -441,6 +423,9 @@ export const setMovable = (model: Model, isMovable: boolean): UpdateReturn => {
 
 // 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 = (
@@ -480,7 +465,7 @@ const pointerMessages = (hold: PointerHold): Stream.Stream<Message> =>
     cancelled: () => Message.CancelledPointer(),
   });
 
-const ownSubscriptions = Subscription.make<Model, Message>()((entry) => ({
+const pointerSubscriptions = Subscription.make<Model, Message>()((entry) => ({
   pointer: entry(
     { maybeHold: Schema.Option(PointerHold) },
     {
@@ -506,14 +491,6 @@ const ownSubscriptions = Subscription.make<Model, Message>()((entry) => ({
         }),
     },
   ),
-  escape: entry(
-    { isHolding: Schema.Boolean },
-    {
-      modelToDependencies: (model) => ({ isHolding: isHolding(model) }),
-      dependenciesToStream: ({ isHolding: isHoldingNow }) =>
-        isHoldingNow ? escapeKeys(Message.PressedEscape()) : Stream.empty,
-    },
-  ),
 }));
 
 // NOTE: @foldkit/ui gap: DragAndDrop's Subscription keys are fixed, so two of its users on a
@@ -527,7 +504,11 @@ const dragSubscriptions = Subscription.lift({
   toParentMessage: toDragAndDropMessage,
 });
 
-const sortableSubscriptions = Subscription.aggregate(ownSubscriptions, dragSubscriptions);
+const sortableSubscriptions = Subscription.aggregate(
+  pointerSubscriptions,
+  escapeSubscriptions<Model, Message>(Message.PressedEscape()),
+  dragSubscriptions,
+);
 
 /** A held item follows the pointer, the arrows and Space move and drop it, Escape puts it back
  *  and the page scrolls near its edges, from listeners that run only while an item is pressed

package/src/stack/stack.ts

@@ -4,7 +4,7 @@ import type { Html, HtmlBuilder } from "foldkit/html";
 // SPACE
 
 /** `S`: things in one line (8px). `M`: the parts of one body (14px). `L`: whole surfaces,
- *  panel to panel (24px). Shared by Stack, Group and Wrap. */
+ *  panel to panel (24px). */
 export const Space = Schema.Literals(["S", "M", "L"]);
 export type Space = typeof Space.Type;