@gjermundgaraba-designs/pixel-paper 0.22.2 → 0.23.0

package/dist/src/toast/toast.js

@@ -215,14 +215,9 @@ export const show = (model, config) => {
 /** Takes a slip back by its id: what it reported has recovered. */
 export const dismiss = (model, entryId) => __foldkitBrandViewResult((dismissKeepingFocus(model, entryId)), "@gjermundgaraba-designs/pixel-paper/src/toast/toast.js#dismiss");
 // VIEW
-const TONE_CLASS = {
-    Ok: "notice toast ok",
-    Error: "notice toast error",
-    Quiet: "notice toast quiet",
-};
 const slipView = (entry, h) => {
     const { tone, title, maybeBody, maybeAction } = entry.payload;
-    return __foldkitBrandViewResult((h.div([h.Class(TONE_CLASS[tone])], [
+    return __foldkitBrandViewResult((h.div([h.Class(`notice toast${Notice.TONE_CLASS[tone]}`)], [
         Notice.toneGlyphView({ tone }, h),
         h.div([], [h.strong([], [title]), ...Option.toArray(maybeBody)]),
         ...Array.fromOption(Option.map(maybeAction, (action) => __foldkitBrandViewResult((Button.view({

package/dist/src/toolbar/toolbar.d.ts

@@ -1,7 +1,6 @@
 import { Schema } from "effect";
 import type { Html, HtmlBuilder } from "foldkit/html";
 import * as Mount from "foldkit/mount";
-import type { Attributes } from "../attributes/attributes.ts";
 /** Which way the strip lies. A `Vertical` strip stands on end: a canvas's tools down its left
  *  edge. The arrows of both axes move in either. */
 export declare const Orientation: Schema.Literals<readonly ["Horizontal", "Vertical"]>;
@@ -38,8 +37,6 @@ export type ViewConfig<ParentMessage> = Readonly<{
      *  Scene, resolve the Mount by name with the lifted Message:
      *  `Scene.Mount.resolve({ name: Toolbar.BindToolKeys.name }, toParentMessage(Toolbar.Message.MovedToolFocus({ move })))`. */
     toParentMessage: (message: Message) => ParentMessage;
-    /** Further attributes for the toolbar, never a class. */
-    attributes?: Attributes<ParentMessage>;
 }>;
 /** A strip of tools that is one stop for Tab (`role="toolbar"`, named by its label, with its
  *  `aria-orientation`): the arrows move between the tools and stop at the ends, Home and End

package/dist/src/toolbar/toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAK9D;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAQlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QAA0C,IAAI;;EAAe,CAAC;AAClF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAsG1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EAuBvB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;IACrD,yDAAyD;IACzD,UAAU,CAAC,EAAE,UAAU,CAAC,aAAa,CAAC,CAAC;CACxC,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAqBF,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwC,MAAM,EAAgB,MAAM,QAAQ,CAAC;AAEpF,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD,OAAO,KAAK,KAAK,MAAM,eAAe,CAAC;AAMvC;oDACoD;AACpD,eAAO,MAAM,WAAW,sDAA8C,CAAC;AACvE,MAAM,MAAM,WAAW,GAAG,OAAO,WAAW,CAAC,IAAI,CAAC;AAQlD,6FAA6F;AAC7F,eAAO,MAAM,OAAO;;QAA0C,IAAI;;EAAe,CAAC;AAClF,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAC;AAsG1C;;;;;;yDAMyD;AACzD,eAAO,MAAM,YAAY;;;EAuBvB,CAAC;AAIH,yDAAyD;AACzD,MAAM,MAAM,UAAU,CAAC,aAAa,IAAI,QAAQ,CAAC;IAC/C,4CAA4C;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,wEAAwE;IACxE,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;iIAG6H;IAC7H,eAAe,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,aAAa,CAAC;CACtD,CAAC,CAAC;AAEH;;gEAEgE;AAChE,eAAO,MAAM,IAAI,GAAI,aAAa,UACxB,UAAU,CAAC,aAAa,CAAC,KAC9B,WAAW,CAAC,aAAa,CAAC,KAC5B,IAmBF,CAAC"}

package/dist/src/toolbar/toolbar.js

@@ -90,9 +90,8 @@ export const BindToolKeys = Mount.defineStream("BindToolKeys", {
  *  `aria-orientation`): the arrows move between the tools and stop at the ends, Home and End
  *  go to the ends, and Tab comes back to the tool used last. */
 export const view = (config, h) => {
-    const { label, tools: toolViews, orientation = "Horizontal", isFloating = false, toParentMessage, attributes = [], } = config;
+    const { label, tools: toolViews, orientation = "Horizontal", isFloating = false, toParentMessage, } = config;
     return __foldkitBrandViewResult((h.div([
-        ...attributes,
         h.Role("toolbar"),
         h.AriaLabel(label),
         h.AriaOrientation(orientation === "Vertical" ? "vertical" : "horizontal"),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gjermundgaraba-designs/pixel-paper",
-  "version": "0.22.2",
+  "version": "0.23.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/src/adapters/mermaid.ts

@@ -2,30 +2,6 @@
 // faces, in the page's palette. An optional entry point ("./adapters/mermaid"):
 // mermaid is the adopter's own dependency, loaded here only when a diagram is drawn.
 //
-// `view` renders the diagram's box and draws into it from a Mount (`DrawDiagram`), so it
-// needs the DOM only once the box is on the page, never while rendering on the server. The
-// box is keyed by the palette the page prints in, from the application's SchemeSwitch
-// (`Scheme.SchemeSwitch.palette`, which under "System" follows the reader's system as it
-// changes), so a new palette mounts a new box and draws the diagram again; a new source does
-// the same. The box reports `SucceededDrawDiagram`, `FailedLoadMermaid` or `FailedDrawDiagram`
-// through the caller's `toParentMessage`, and the caller keeps what it shows meanwhile (a
-// Loading line, an error Notice) in its own Model:
-//
-//   Mermaid.view(
-//     {
-//       source,
-//       palette: Scheme.SchemeSwitch.palette(model.schemeSwitch),
-//       toParentMessage: (message) => GotDiagramMessage({ message }),
-//     },
-//     h,
-//   );
-//
-// `renderDiagram` waits for the faces, so words are measured in them and not a fallback;
-// renders in the box (it must be on the page), so labels are measured where they will print;
-// and returns the SVG. Mermaid's settings are global, so draws run one at a time. It fails with
-// `MermaidMissing` when mermaid itself does not load, and with `DiagramError` when mermaid
-// loads but the diagram is not drawn.
-//
 // Two layers. themeCSS repaints with var(…), so the parts it names (nodes, edges, labels,
 // clusters, actors, messages, notes) follow a palette switch in place. themeVariables must be
 // colours, not var() strings (mermaid mixes its own shades from them), so they are read from

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)))],
   );
 };