@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.24.0

package/src/announcer/announcer.ts

@@ -35,7 +35,7 @@ export const view = <Message>(h: HtmlBuilder<Message>): Html =>
     h.Class("sr-only"),
     h.Role("status"),
     h.AriaLive("polite"),
-    h.DataAttribute("pixel-paper-announcer", ""),
+    h.Attribute(ANNOUNCER_ATTRIBUTE, ""),
   ]);
 
 // ANNOUNCE
@@ -97,28 +97,21 @@ export const announce = (text: string): Effect.Effect<void> =>
 // FLASH
 
 const FLASH_ID = "pixel-paper-flash";
-const DEFAULT_BEAT = Duration.millis(700);
 
-const toMillis = (time: string): Option.Option<number> =>
-  pipe(
+/** The beat in milliseconds, from the stylesheet's `--motion-flash`: none on a page that has
+ *  not loaded the stylesheet, which has nothing to flash with. */
+const beatOf = (element: Element): Option.Option<number> => {
+  const time = getComputedStyle(element).getPropertyValue("--motion-flash").trim();
+  return pipe(
     Option.liftPredicate(Number.parseFloat(time), Number.isFinite),
     Option.map((value) => (time.endsWith("ms") ? value : value * 1000)),
   );
-
-const beatOf = (element: Element): number =>
-  Option.getOrElse(
-    toMillis(getComputedStyle(element).getPropertyValue("--motion-flash").trim()),
-    () => Duration.toMillis(DEFAULT_BEAT),
-  );
+};
 
 const prefersReducedMotion = (): boolean =>
   window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
-const runFlash = (element: Element): void => {
-  if (!("animate" in element)) {
-    return;
-  }
-  const beat = beatOf(element);
+const runFlash = (element: Element, beat: number): void => {
   Array.forEach(
     Array.filter(element.getAnimations(), (animation) => animation.id === FLASH_ID),
     (animation) => animation.cancel(),
@@ -141,8 +134,11 @@ const runFlash = (element: Element): void => {
 export const flash = (selector: string): Effect.Effect<void> =>
   Effect.sync(() => {
     const maybeElement = Option.fromNullishOr(document.querySelector(selector));
-    if (Option.isSome(maybeElement)) {
-      runFlash(maybeElement.value);
+    const maybeFlash = Option.flatMap(maybeElement, (element) =>
+      Option.map(beatOf(element), (beat) => ({ element, beat })),
+    );
+    if (Option.isSome(maybeFlash)) {
+      runFlash(maybeFlash.value.element, maybeFlash.value.beat);
     }
   });
 

package/src/board/board.ts

@@ -1,5 +1,5 @@
 import { Button as UiButton, DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
-import { Array, Effect, Equal, Match, Option, Schema, Stream, pipe } from "effect";
+import { Array, Effect, Equal, Match, Option, Schema, pipe } from "effect";
 import * as Command from "foldkit/command";
 import {
   type Attribute,
@@ -26,13 +26,15 @@ import { prefixKeys } from "../subscription/prefixKeys.ts";
 import {
   LEFT_BUTTON,
   activatedKeyboardDrag,
+  canLift,
   cancelledDrag,
-  escapeKeys,
+  escapeSubscriptions,
   innerControls,
   isCarrying,
   measureLift,
   phaseOf,
   pressedDraggable,
+  settle as settleDrag,
 } from "../drag/drag.ts";
 
 // MODEL
@@ -50,19 +52,20 @@ export const Column = Schema.Struct({
 });
 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.";
+
 /** 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. Arrow keys move it to another column, space drops it, escape cancels.",
+  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}. Arrow keys move it to another column, space drops it, escape cancels.",
+  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. */
@@ -177,12 +180,6 @@ 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);
 
-/** Whether a card is pressed or held. While it is, the arrow keys, Space and Escape belong to
- *  the board: pause the page's own bindings for them. The board takes Escape before anything
- *  else sees it. */
-export const isHolding = (model: Model): boolean =>
-  Option.isSome(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop));
-
 // DOM HOOKS
 
 const hookId = (boardId: string, localId: string): string => `${boardId}/${localId}`;
@@ -234,9 +231,6 @@ const overColumn = (model: Model): Option.Option<Column> =>
     ),
   );
 
-const announceMove = (maybeText: Option.Option<string>): ReadonlyArray<Command.Command<Message>> =>
-  Array.fromOption(Option.map(maybeText, (text) => AnnounceMove({ text })));
-
 const placementOf = (
   model: Model,
   held: Held,
@@ -263,10 +257,7 @@ const placementOf = (
       fromIndex: from.index,
       toColumnId: to.id,
       toIndex,
-      maybeAfterCardId: Option.map(
-        toIndex > 0 ? Array.get(others, toIndex - 1) : Option.none(),
-        (card) => card.id,
-      ),
+      maybeAfterCardId: Option.map(Array.get(others, toIndex - 1), (card) => card.id),
       maybeBeforeCardId: Option.map(Array.get(others, toIndex), (card) => card.id),
     });
   });
@@ -349,35 +340,26 @@ const moveText = (
  *  A card set down without a move says `putBack`. */
 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) => AnnounceMove({ text }),
       ),
     );
 
-    return Update.withOutMessage(
-      {
-        model: nextModel,
-        commands: [...(dragAndDropUpdate.commands ?? []), ...announceMove(maybeText)],
-      },
-      dragAndDropUpdate.outMessage,
-    );
-  };
-
 const holding = (model: Model, held: Held): Model =>
   modifyFields(model, { maybeHeld: () => Option.some(held) });
 
-const canLift = (model: Model): boolean => model.isMovable && phaseOf(model.dragAndDrop) === "Idle";
-
 const liftByKeyboard = (model: Model, place: Place, columns: ReadonlyArray<Column>) => {
   const pressed = holding(model, { card: place.card, columns, maybePressPoint: Option.none() });
   return settle(pressed)(
@@ -545,17 +527,6 @@ export const setMovable = (model: Model, isMovable: boolean): UpdateReturn => {
 
 // SUBSCRIPTION
 
-const holdingSubscriptions = 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
 // page would share them. The board lifts them under its own names, behind the parent's prefix.
 const dragSubscriptions = Subscription.lift({
@@ -567,7 +538,10 @@ const dragSubscriptions = Subscription.lift({
   toParentMessage: toDragAndDropMessage,
 });
 
-const boardSubscriptions = Subscription.aggregate(holdingSubscriptions, dragSubscriptions);
+const boardSubscriptions = Subscription.aggregate(
+  escapeSubscriptions<Model, Message>(Message.PressedEscape()),
+  dragSubscriptions,
+);
 
 /** A held card follows the pointer, the arrows and Space move and drop it, Escape puts it
  *  back and the page scrolls near its edges, all from listeners that run only while a card is
@@ -581,9 +555,6 @@ export const subscriptions = <Prefix extends string>(keyPrefix: Prefix) =>
 
 // LIFTED CARD
 
-const pressPointOf = (model: Model): Option.Option<typeof PressPoint.Type> =>
-  Option.flatMap(model.maybeHeld, (held) => held.maybePressPoint);
-
 /** 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", {
@@ -627,9 +598,6 @@ export type ViewInputs = Readonly<{
   toEmptyView?: (column: Column) => ReadonlyArray<Html>;
   /** Controls at the right of a column's head, after its count ("capture here"). */
   toColumnActions?: (column: Column) => ReadonlyArray<Html>;
-  /** Further attributes for a column's `div.board-col` (`data-status`), never a class. Wrap
-   *  them with `childAttributes` so their handlers dispatch the parent's Messages. */
-  toColumnAttributes?: (column: Column) => ReadonlyArray<ChildAttribute>;
 }>;
 
 const INNER_CONTROL = innerControls(`[data-${TITLE_ATTRIBUTE}], [data-${GRIP_ATTRIBUTE}]`);
@@ -664,7 +632,6 @@ type PlaceInfo = Readonly<{
   toCardView: (card: Card, render: CardRender) => Html;
   toEmptyView: (column: Column) => ReadonlyArray<Html>;
   toColumnActions: (column: Column) => ReadonlyArray<Html>;
-  toColumnAttributes: (column: Column) => ReadonlyArray<ChildAttribute>;
 }>;
 
 const gripHelpId = (model: Model): string => `${id(model)}-grip-help`;
@@ -872,7 +839,6 @@ const columnView = (info: PlaceInfo, column: Column, h: HtmlBuilder<Message>): H
   return h.keyed("div")(
     column.id,
     [
-      ...info.toColumnAttributes(column),
       h.DataAttribute("droppable-id", columnHook(model, column.id)),
       h.Class(isTarget ? "board-col drop-target" : "board-col"),
     ],
@@ -905,12 +871,11 @@ const liftedCopyView = (info: PlaceInfo, h: HtmlBuilder<Message>): ReadonlyArray
   const maybeLifted = Option.all({
     style: UiDragAndDrop.ghostStyle(model.dragAndDrop),
     held: model.maybeHeld,
+    pressPoint: Option.flatMap(model.maybeHeld, (held) => held.maybePressPoint),
   });
 
-  const pressPoint = Option.getOrElse(pressPointOf(model), () => ({ clientX: 0, clientY: 0 }));
-
   return Array.fromOption(
-    Option.map(maybeLifted, ({ style, held }) =>
+    Option.map(maybeLifted, ({ style, held, pressPoint }) =>
       h.div(
         [
           h.Class("board-lift"),
@@ -946,21 +911,8 @@ const liftedCopyView = (info: PlaceInfo, h: HtmlBuilder<Message>): ReadonlyArray
  * follows the pointer or the keys.
  */
 export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const {
-    columns,
-    toCardView,
-    toEmptyView = () => [],
-    toColumnActions = () => [],
-    toColumnAttributes = () => [],
-  } = viewInputs;
-  const info: PlaceInfo = {
-    model,
-    columns,
-    toCardView,
-    toEmptyView,
-    toColumnActions,
-    toColumnAttributes,
-  };
+  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}` })],

package/src/board/index.ts

@@ -10,10 +10,10 @@ export {
   cardView,
   id,
   init,
-  isHolding,
   setMovable,
   subscriptions,
   update,
   view,
 } from "./board.ts";
+export { isHolding } from "../drag/drag.ts";
 export type { CardRender, CardViewConfig, InitConfig, ViewInputs } from "./board.ts";

package/src/button/button.ts

@@ -76,7 +76,7 @@ export type ViewConfig<Message> = Look &
     isDisabled?: boolean;
     keyHint?: KeyHintConfig;
     /** `submit` makes it its form's submit button while it is not held. */
-    type?: "button" | "submit" | "reset";
+    type?: "button" | "submit";
     /** Further attributes for the `<button>`, such as an id or a Submodel's attribute group. */
     attributes?: Attributes<Message>;
   }> &

package/src/commandPalette/commandPalette.ts

@@ -1,5 +1,5 @@
 import { Input as UiInput } from "@foldkit/ui";
-import { Array, Effect, HashSet, Match, Option, Schema, Stream, String, pipe } from "effect";
+import { Array, Effect, Equal, HashSet, Match, Option, Schema, Stream, String, pipe } from "effect";
 import * as FoldkitCommand from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Attribute, Html, HtmlBuilder, KeyboardModifiers } from "foldkit/html";
@@ -230,19 +230,10 @@ const fresh = (model: Model, maybePage: Option.Option<OpenPage>): Model =>
     }),
   );
 
-const isSamePage = (
-  maybeFirst: Option.Option<string>,
-  maybeSecond: Option.Option<string>,
-): boolean =>
-  Option.match(maybeFirst, {
-    onNone: () => Option.isNone(maybeSecond),
-    onSome: (commandId) => Option.contains(maybeSecond, commandId),
-  });
-
 /** Makes the Model follow what the view showed: a page whose command is gone is dropped (with
  *  a pick out on it), so the commands' query and cursor take the reader's input again. */
 const followShown = (model: Model, maybeShownPage: Option.Option<string>): Model =>
-  isSamePage(maybePageId(model), maybeShownPage)
+  Equal.equals(maybePageId(model), maybeShownPage)
     ? model
     : clearPendingKeys(
         modifyFields(model, {
@@ -265,13 +256,12 @@ const leavePage = (model: Model): UpdateReturn =>
         commands: [focusField(model), scrollPaletteToCursor(model)],
       };
 
-const openPage = (model: Model, commandId: string): UpdateReturn =>
-  unlessPicking(model, (current) => ({
-    model: clearPendingKeys(
-      modifyFields(current, { maybePage: () => Option.some(freshPage(commandId)) }),
-    ),
-    commands: [focusField(current), scrollPaletteToCursor(current)],
-  }));
+const openPage = (model: Model, commandId: string): UpdateReturn => ({
+  model: clearPendingKeys(
+    modifyFields(model, { maybePage: () => Option.some(freshPage(commandId)) }),
+  ),
+  commands: [focusField(model), scrollPaletteToCursor(model)],
+});
 
 const selectCommand = (model: Model, commandId: string): UpdateReturn =>
   pipe(
@@ -292,18 +282,16 @@ const moveCursor = (model: Model, cursorId: string): Model =>
   );
 
 // A pick drops the keys waiting for the next render: the row picked is the one acted on.
-const pick = (model: Model, commandId: string, choiceId: string): UpdateReturn =>
-  isPicking(model)
-    ? { model }
-    : {
-        model: clearPendingKeys(
-          modifyFields(moveCursor(model, choiceId), { maybePicking: () => Option.some(choiceId) }),
-        ),
-        outMessage: OutMessage.SelectedChoice({ commandId, choiceId }),
-      };
+const pick = (model: Model, commandId: string, choiceId: string): UpdateReturn => ({
+  model: clearPendingKeys(
+    modifyFields(moveCursor(model, choiceId), { maybePicking: () => Option.some(choiceId) }),
+  ),
+  outMessage: OutMessage.SelectedChoice({ commandId, choiceId }),
+});
 
 // What a click on a row or Enter on the cursor's does: nothing when it is held, else pick it
-// on a page, open its page, or select it.
+// on a page, open its page, or select it. Never while a pick is out: the click and the keys
+// come through `unlessPicking`, and a pick clears the waiting Enter `settlePending` runs.
 const runRow = (model: Model, row: ShownRow): UpdateReturn => {
   if (row.isHeld) {
     return { model };
@@ -322,12 +310,7 @@ const maybeCurrentCursor = (model: Model): Option.Option<string> =>
 
 const ARROW_STEP: Readonly<Record<ArrowKey, number>> = { ArrowUp: -1, ArrowDown: 1 };
 
-type ShownList = Readonly<{
-  rows: ReadonlyArray<ShownRow>;
-  maybeShownCursor: Option.Option<string>;
-  shownQuery: string;
-  shownShift: number;
-}>;
+type ShownList = Omit<typeof Message.PressedEnter.Type, "_tag" | "maybeShownPage">;
 
 const isListed = (rows: ReadonlyArray<Readonly<{ id: string }>>, rowId: string): boolean =>
   Array.some(rows, (row) => row.id === rowId);
@@ -435,7 +418,7 @@ type PendingReport = typeof Message.CompletedReportPendingKeys.Type;
 const settlePending = (model: Model, report: PendingReport): UpdateReturn => {
   const { maybeShownPage, shownQuery, shownShift, maybeRow } = report;
   const isCurrent =
-    isSamePage(maybePageId(model), maybeShownPage) &&
+    Equal.equals(maybePageId(model), maybeShownPage) &&
     shownShift === model.cursorShift &&
     shownQuery === query(model);
   if (!isPending(model) || !isCurrent) {
@@ -566,7 +549,7 @@ export type ViewInputs = Readonly<{
   toLiveRegionView?: (() => Html) | undefined;
 }>;
 
-type ShownPageState = Readonly<{ commandId: string; page: Page; state: OpenPage }>;
+type ShownPageState = Readonly<{ page: Page; state: OpenPage }>;
 
 type Shown = Readonly<{
   maybePage: Option.Option<ShownPageState>;
@@ -580,7 +563,7 @@ const pageOf = (commands: ReadonlyArray<Command>, state: OpenPage): Option.Optio
   pipe(
     Array.findFirst(commands, (command) => command.id === state.commandId),
     Option.flatMap((command) => Option.fromNullishOr(command.page)),
-    Option.map((page) => ({ commandId: state.commandId, page, state })),
+    Option.map((page) => ({ page, state })),
   );
 
 const firstListed = (
@@ -686,7 +669,7 @@ const shownQueryOf = (model: Model, shown: Shown): string =>
 
 // The command whose page the view shows.
 const shownPageIdOf = (shown: Shown): Option.Option<string> =>
-  Option.map(shown.maybePage, ({ commandId }) => commandId);
+  Option.map(shown.maybePage, ({ state }) => state.commandId);
 
 // NOTE: the field's keys that act on the rows are taken here, where the rows are known, as a
 // Mount on the document cannot know them: ↑, ↓ and Enter carry what this render shows (see

package/src/commandPalette/keys.ts

@@ -24,14 +24,13 @@ const isEmptyFieldOnPage = (root: Element, field: Element): boolean =>
 
 /** What a Backspace in the palette's field does: in an empty field on a page it goes back.
  *  It reads the field as it is at the press, which a render cannot know. A key from elsewhere,
- *  a key an IME is composing, a modified key, a key someone already handled, and every key
- *  while a pick is out are left alone. */
+ *  a key an IME is composing, a modified key and a key someone already handled are left
+ *  alone; while a pick is out the update refuses it. */
 export const fieldKey = (
   root: Element,
   event: KeyboardEvent,
 ): Option.Option<typeof Message.PressedBackspace.Type> => {
   const field = root.querySelector(`[data-${FIELD_ATTRIBUTE}]`);
-  const isWaiting = root.querySelector('[aria-busy="true"]') !== null;
   if (
     field === null ||
     event.target !== field ||
@@ -39,7 +38,6 @@ export const fieldKey = (
     event.isComposing ||
     event.defaultPrevented ||
     !isPlain(event) ||
-    isWaiting ||
     !isEmptyFieldOnPage(root, field)
   ) {
     return Option.none();

package/src/commandPalette/match.ts

@@ -56,13 +56,15 @@ export const matches = (query: string, label: string): boolean => {
   return isSubsequence(needle, String.toLowerCase(label));
 };
 
+const isBlank = (query: string): boolean => String.isEmpty(String.trim(query));
+
 /** The commands the query finds, under their groups in the order the groups first appear,
  *  authored titles after the commands. With no query, authored titles wait. */
 export const findCommands = (
   commands: ReadonlyArray<Command>,
   query: string,
 ): ReadonlyArray<Command> => {
-  const hits = String.isEmpty(String.trim(query))
+  const hits = isBlank(query)
     ? Array.filter(commands, (command) => command.isAuthored !== true)
     : Array.filter(commands, (command) => matches(query, command.label));
   const ordered = [
@@ -78,8 +80,6 @@ export const findCommands = (
   return Array.sort(ordered, Order.mapInput(Order.Number, groupIndex));
 };
 
-const isBlank = (query: string): boolean => String.isEmpty(String.trim(query));
-
 /** The choices a page's query finds. */
 export const findChoices = (page: Page, query: string): ReadonlyArray<Choice> =>
   isBlank(query)

package/src/confirmDialog/confirmDialog.ts

@@ -65,11 +65,13 @@ const dialogFold = foldDialog(Dialog, {
   toParentOutMessage: toCancelled,
 });
 
-const FREE: Dialog.UpdateContext = { isCloseHeld: false };
-
 /** Processes a confirm dialog Message and returns the next Model, Commands and OutMessage.
  *  While `context.isCloseHeld`, cancel, Escape and the veil change nothing. */
-export const update = (model: Model, message: Message, context: Dialog.UpdateContext = FREE) =>
+export const update = (
+  model: Model,
+  message: Message,
+  context: Dialog.UpdateContext = Dialog.FREE,
+) =>
   Message.match<Update.ReturnWithOutMessage<Model, Message, OutMessage>>(message, {
     GotDialogMessage: ({ message: dialogMessage }) =>
       dialogFold.updateWith(context)(model, dialogMessage),

package/src/copyButton/copyButton.ts

@@ -10,7 +10,6 @@ import type * 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 IconButton from "../iconButton/iconButton.ts";
 
 // MODEL
@@ -139,8 +138,6 @@ export type ViewInputs = Readonly<{
    *  word (`"copy"`). */
   label: string;
   variant?: Variant;
-  /** Further attributes for the `<button>`, never a class. */
-  attributes?: Attributes<Message>;
 }>;
 
 /**
@@ -151,9 +148,9 @@ export type ViewInputs = Readonly<{
  * resources.
  */
 export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h): Html => {
-  const { text, label, variant = "Icon", attributes = [] } = viewInputs;
+  const { text, label, variant = "Icon" } = viewInputs;
   const isDone = isCopied(model);
-  const buttonAttributes = [...attributes, h.Id(id(model))];
+  const buttonAttributes = [h.Id(id(model))];
   const onClick = Message.ClickedCopy({ text });
 
   return variant === "Icon"

package/src/crumbs/crumbs.ts

@@ -14,8 +14,6 @@ export type Crumb = Readonly<{
 /** Configuration for rendering crumbs with `view`. */
 export type ViewConfig = Readonly<{
   crumbs: ReadonlyArray<Crumb>;
-  /** Names the navigation for screen readers. */
-  label?: string;
 }>;
 
 const crumbView =
@@ -34,10 +32,10 @@ const crumbView =
 /** The path to where you are, in the pixel face, split by muted slashes: a navigation
  *  landmark named "Breadcrumb", its steps an ordered list, the last `aria-current="page"`. */
 export const view = <Message>(config: ViewConfig, h: HtmlBuilder<Message>): Html => {
-  const { crumbs, label = "Breadcrumb" } = config;
+  const { crumbs } = config;
 
   return h.nav(
-    [h.AriaLabel(label), h.Class("crumbs")],
+    [h.AriaLabel("Breadcrumb"), h.Class("crumbs")],
     [h.ol([], Array.map(crumbs, crumbView(crumbs.length - 1, h)))],
   );
 };

package/src/dialog/dialog.ts

@@ -89,7 +89,8 @@ export type UpdateContext = Readonly<{
   isCloseHeld: boolean;
 }>;
 
-const FREE: UpdateContext = { isCloseHeld: false };
+/** The context of a dialog whose close is not held, the default. */
+export const FREE: UpdateContext = { isCloseHeld: false };
 
 // NOTE: @foldkit/ui gap: Dialog has no way to hold a close. Escape, a press on the veil and a
 // control given the `closeButton` group all send `RequestedClose`, so a held dialog reads it
@@ -248,7 +249,7 @@ export const view = defineView<Model, Message, ViewInputs>((model, viewInputs, h
   } = viewInputs;
 
   const actionBar = childAttributes([
-    h.DataAttribute("pixel-paper-action-bar", ""),
+    h.Attribute(ACTION_BAR_ATTRIBUTE, ""),
     h.OnMount(BindActionKeys()),
   ]);
 

package/src/drag/drag.ts

@@ -1,13 +1,16 @@
 // Shared by Board and Sortable, the two users of @foldkit/ui's DragAndDrop, and Reel, which
-// holds its own: the phase a drag is in, the DragAndDrop Messages both build, what a press
-// lifts, Escape taken before anything else, the pressing pointer's events, the lifted copy's
-// measure, and the closest-centre drop target a sortable resolves for a pointer. A splitter's
-// handlers are the Reel's and the Rail's.
+// holds its own: the phase a drag is in, what a hold keeps and how a step settles it, the
+// DragAndDrop Messages both build, what a press lifts, Escape taken before anything else, the
+// pressing pointer's events, the lifted copy's measure, and the closest-centre drop target a
+// sortable resolves for a pointer. A splitter's handlers are the Reel's and the Rail's.
 
 import { DragAndDrop as UiDragAndDrop } from "@foldkit/ui";
-import { Array, Effect, Option, Order, Stream, pipe } from "effect";
+import { Array, Effect, Option, Order, Schema, Stream, pipe } from "effect";
+import type * as Command from "foldkit/command";
 import * as Dom from "foldkit/dom";
 import type { Attribute, HtmlBuilder } from "foldkit/html";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
 
 import { isPlain } from "../keys/keys.ts";
 
@@ -36,6 +39,38 @@ export const phaseOf = (dragAndDrop: UiDragAndDrop.Model): Phase => {
 export const isCarrying = (phase: Phase): boolean =>
   phase === "PointerDragging" || phase === "KeyboardDragging";
 
+// HOLD
+
+/** What a Board's and a Sortable's Model share: the DragAndDrop, whether items may move, and
+ *  what the list keeps while an item is pressed or held. */
+type Holder = Readonly<{
+  dragAndDrop: UiDragAndDrop.Model;
+  isMovable: boolean;
+  maybeHeld: Option.Option<unknown>;
+}>;
+
+/** Whether an item is pressed or held. While it is, the arrow keys, Space and Escape belong to
+ *  the list: pause the page's own bindings for them. The list takes Escape before anything
+ *  else sees it. */
+export const isHolding = (model: Holder): boolean => phaseOf(model.dragAndDrop) !== "Idle";
+
+/** Whether a press may lift an item now: items may move and none is pressed or held. */
+export const canLift = (model: Holder): boolean => model.isMovable && !isHolding(model);
+
+/** Settles a DragAndDrop step: forgets the held item once it is down, and runs what the step
+ *  says (`maybeAnnouncement`) after the step's own Commands. */
+export const settle = <Model extends Holder, Message, OutMessage>(
+  step: Update.ReturnWithOutMessage<Model, Message, OutMessage>,
+  maybeAnnouncement: Option.Option<Command.Command<Message>>,
+): Update.ReturnWithOutMessage<Model, Message, OutMessage> =>
+  Update.withOutMessage(
+    {
+      model: isHolding(step.model) ? step.model : { ...step.model, maybeHeld: Option.none() },
+      commands: [...(step.commands ?? []), ...Array.fromOption(maybeAnnouncement)],
+    },
+    step.outMessage,
+  );
+
 // CHILD MESSAGES
 
 // NOTE: @foldkit/ui gap: DragAndDrop exposes no update capability for a press, a keyboard
@@ -114,6 +149,20 @@ export const escapeKeys = <Message>(message: Message): Stream.Stream<Message> =>
     options: { capture: true },
   });
 
+/** A list's `escape` Subscription: `escapeKeys` as `message` while an item is pressed or
+ *  held. */
+export const escapeSubscriptions = <Model extends Holder, Message>(message: Message) =>
+  Subscription.make<Model, Message>()((entry) => ({
+    escape: entry(
+      { isHolding: Schema.Boolean },
+      {
+        modelToDependencies: (model) => ({ isHolding: isHolding(model) }),
+        dependenciesToStream: ({ isHolding: isHoldingNow }) =>
+          isHoldingNow ? escapeKeys(message) : Stream.empty,
+      },
+    ),
+  }));
+
 // POINTER
 
 /** The moves, release and cancel of the pointer `pointerId`, on the document; another