@gjermundgaraba-designs/pixel-paper 0.26.0 → 0.27.0

package/dist/src/sortable/sortable.js

@@ -12,17 +12,13 @@ import * as Announcer from "../announcer/announcer.js";
 import * as Button from "../button/button.js";
 import { LEFT_BUTTON, activatedKeyboardDrag, canLift, cancelledDrag, escapeSubscriptions, insertionIndex, isCarrying, markDragging, measureLift, movedPointer, phaseOf, pointerMessages as dragMessages, pressedDraggable, releasedPointer, settle as settleDrag, } from "../drag/drag.js";
 import * as Glyph from "../glyph/glyph.js";
-import * as IconButton from "../iconButton/iconButton.js";
+import * as IconButton from "../icon-button/icon-button.js";
 import { LOCALE } from "../locale/locale.js";
-import { prefixKeys } from "../subscription/prefixKeys.js";
-// MODEL
+import { prefixKeys } from "../subscription/prefix-keys.js";
 /** 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 });
-/** 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. ${KEYBOARD_MOVES}`,
@@ -34,13 +30,10 @@ const COPY = {
     cancelled: "Move cancelled. {item} put back where it was.",
 };
 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),
@@ -53,40 +46,38 @@ export const Model = Schema.Struct({
     isMovable: Schema.Boolean,
     maybeHeld: Schema.Option(Held),
 });
-// MESSAGE
 /** 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: {},
 });
-// OUT MESSAGE
 /** 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`
  *  name the items it now sits between, the anchors a list ordered by neighbours needs. A drop
@@ -95,8 +86,8 @@ export const Message = defineMessageUnion({
 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),
     },
@@ -107,13 +98,9 @@ export const init = (config) => (__foldkitBrandViewResult(({
     isMovable: true,
     maybeHeld: Option.none(),
 }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#init"));
-// ACCESSORS
-/** The list's id, unique in the document. */
 const id = (model) => __foldkitBrandViewResult((model.dragAndDrop.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#id");
-// DOM HOOKS
 const itemHook = (model, itemId) => __foldkitBrandViewResult((`${id(model)}/${itemId}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemHook");
 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 },
@@ -125,8 +112,6 @@ const fill = (template, item, position = 0, total = 0) => __foldkitBrandViewResu
     .replaceAll("{position}", position.toLocaleString(LOCALE))
     .replaceAll("{total}", total.toLocaleString(LOCALE))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#fill");
 const indexOf = (items, itemId) => __foldkitBrandViewResult((Array.findFirstIndex(items, (item) => __foldkitBrandViewResult((item.id === itemId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#indexOf");
-/** 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, held) => __foldkitBrandViewResult((Option.map(UiDragAndDrop.maybeDropTarget(model.dragAndDrop), ({ index }) => __foldkitBrandViewResult((Math.min(Math.max(index, 0), held.items.length - 1)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~2"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#targetIndex");
 const placementOf = (model, held, rawIndex) => __foldkitBrandViewResult((Option.gen(function* () {
     const fromIndex = yield* indexOf(held.items, held.item.id);
@@ -155,19 +140,17 @@ const foldDragAndDrop = Update.foldChild({
     toParentMessage: toDragAndDropMessage,
     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) => __foldkitBrandViewResult((index + 1), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#positionOf");
 const moveText = (held, previous, next, maybeOutMessage, putBack) => {
     const { label } = held.item;
     const total = held.items.length;
     const before = phaseOf(previous.dragAndDrop);
     const after = phaseOf(next.dragAndDrop);
-    const position = (index) => __foldkitBrandViewResult((index + 1), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#position");
     if (after === "Idle") {
         return __foldkitBrandViewResult((isCarrying(before)
             ? Option.some(Option.match(maybeOutMessage, {
                 onNone: () => __foldkitBrandViewResult((fill(putBack, label)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone"),
-                onSome: ({ toIndex }) => __foldkitBrandViewResult((fill(COPY.dropped, label, position(toIndex), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome"),
+                onSome: ({ toIndex }) => __foldkitBrandViewResult((fill(COPY.dropped, label, positionOf(toIndex), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome"),
             }))
             : Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
     }
@@ -175,20 +158,15 @@ const moveText = (held, previous, next, maybeOutMessage, putBack) => {
         return __foldkitBrandViewResult((Option.some(fill(COPY.pickedUp, label))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
     }
     else if (before === "Idle" && after === "KeyboardDragging") {
-        return __foldkitBrandViewResult((Option.map(targetIndex(next, held), (index) => __foldkitBrandViewResult((fill(COPY.pickedUpByKeyboard, label, position(index), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
+        return __foldkitBrandViewResult((Option.map(targetIndex(next, held), (index) => __foldkitBrandViewResult((fill(COPY.pickedUpByKeyboard, label, positionOf(index), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~10"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
     }
     else if (after === "KeyboardDragging") {
-        return __foldkitBrandViewResult((pipe(targetIndex(next, held), Option.filter((index) => __foldkitBrandViewResult((!Option.contains(targetIndex(previous, held), index)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~11")), Option.map((index) => __foldkitBrandViewResult((fill(COPY.over, label, position(index), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
-    }
-    else {
-        return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
+        return __foldkitBrandViewResult((pipe(targetIndex(next, held), Option.filter((index) => __foldkitBrandViewResult((!Option.contains(targetIndex(previous, held), index)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~11")), Option.map((index) => __foldkitBrandViewResult((fill(COPY.over, label, positionOf(index), total)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~12")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
     }
+    return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moveText");
 };
-/** Announces the step a DragAndDrop update took and forgets the held item once it is down. */
 const settle = (previous, putBack = COPY.putBack) => __foldkitBrandViewResult(((dragAndDropUpdate) => __foldkitBrandViewResult((settleDrag(dragAndDropUpdate, Option.map(Option.flatMap(previous.maybeHeld, (held) => __foldkitBrandViewResult((moveText(held, previous, dragAndDropUpdate.model, Option.fromNullishOr(dragAndDropUpdate.outMessage), putBack)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~14")), (text) => __foldkitBrandViewResult((AnnounceReorder({ text })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~15")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~13")), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#settle");
-/** The item `itemId` and its place, when the list may lift it now. */
 const liftable = (model, items, itemId) => __foldkitBrandViewResult((Option.filter(Option.map(Array.findFirstWithIndex(items, (item) => __foldkitBrandViewResult((item.id === itemId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~16")), ([item, index]) => (__foldkitBrandViewResult(({ index, item }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~17"))), () => __foldkitBrandViewResult((canLift(model)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~18"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftable");
-/** Lifts `held` with the DragAndDrop Message `lift` and says so. */
 const lift = (model, held, liftMessage) => {
     const pressed = modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((Option.some(held)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#maybeHeld") });
     return __foldkitBrandViewResult((settle(pressed)(foldDragAndDrop(pressed, liftMessage))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#lift");
@@ -198,16 +176,18 @@ const pointerMove = (model, pointer) => __foldkitBrandViewResult((movedPointer({
     screenY: pointer.screenY,
     clientX: pointer.clientX,
     clientY: pointer.clientY,
-    maybeDropTarget: Option.map(pointer.maybeIndex, (index) => (__foldkitBrandViewResult(({ containerId: id(model), index }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~19"))),
+    maybeDropTarget: Option.map(pointer.maybeIndex, (index) => (__foldkitBrandViewResult(({
+        containerId: id(model),
+        index,
+    }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~19"))),
 })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerMove");
-/** 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) => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "PointerDragging"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isPointerCarrying");
+const rereadPointerAtRelease = (model, pointer) => __foldkitBrandViewResult((foldDragAndDrop(model, pointerMove(model, pointer))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#rereadPointerAtRelease");
 const release = (model, pointer) => {
-    if (phaseOf(model.dragAndDrop) !== "PointerDragging") {
+    if (!isPointerCarrying(model)) {
         return __foldkitBrandViewResult((foldDragAndDrop(model, releasedPointer())), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#release");
     }
-    const moved = foldDragAndDrop(model, pointerMove(model, pointer));
+    const moved = rereadPointerAtRelease(model, pointer);
     const released = foldDragAndDrop(moved.model, releasedPointer());
     return __foldkitBrandViewResult((Update.withOutMessage({
         model: released.model,
@@ -215,18 +195,19 @@ const release = (model, pointer) => {
     }, released.outMessage)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#release");
 };
 const cancelDrag = (model) => __foldkitBrandViewResult((settle(model, COPY.cancelled)(foldDragAndDrop(model, cancelledDrag()))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#cancelDrag");
-const updateDragAndDrop = (model, message) => __foldkitBrandViewResult((Match.value(message).pipe(Match.withReturnType(), 
-// 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 }) => __foldkitBrandViewResult((direction === "NextContainer" || direction === "PreviousContainer"
+const updateDragAndDrop = (model, message) => __foldkitBrandViewResult((Match.value(message).pipe(Match.withReturnType(), Match.tag("PressedArrowKey", ({ direction }) => __foldkitBrandViewResult((direction === "NextContainer" || direction === "PreviousContainer"
     ? { model }
     : settle(model)(foldDragAndDrop(model, message))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~20")), Match.tag("CancelledDrag", () => __foldkitBrandViewResult((cancelDrag(model)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~21")), Match.orElse(() => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, message))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~22")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#updateDragAndDrop");
 /** Processes a sortable Message and returns the next Model, Commands and OutMessage. */
 export const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
     GotDragAndDropMessage: ({ message: dragAndDropMessage }) => __foldkitBrandViewResult((updateDragAndDrop(model, dragAndDropMessage)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#GotDragAndDropMessage"),
-    PressedItem: ({ itemId, pointerId, screenX, screenY, clientX, clientY, items }) => __foldkitBrandViewResult((Option.match(liftable(model, items, itemId), {
+    PressedItem: ({ itemId, pointerId, screenX, screenY, clientX, clientY, items, }) => __foldkitBrandViewResult((Option.match(liftable(model, items, itemId), {
         onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~2")),
-        onSome: ({ index, item }) => __foldkitBrandViewResult((lift(model, { item, items, maybePress: Option.some({ pointerId, clientX, clientY }) }, pressedDraggable({
+        onSome: ({ index, item }) => __foldkitBrandViewResult((lift(model, {
+            item,
+            items,
+            maybePress: Option.some({ pointerId, clientX, clientY }),
+        }, pressedDraggable({
             itemId: itemHook(model, itemId),
             containerId: id(model),
             index,
@@ -249,24 +230,18 @@ export const update = (model, message) => __foldkitBrandViewResult((Message.matc
     CompletedAnnounceReorder: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#CompletedAnnounceReorder")),
     CompletedSizeLiftedItem: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#CompletedSizeLiftedItem")),
 })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#update");
-// 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, isMovable) => {
     const next = modifyFields(model, { isMovable: () => __foldkitBrandViewResult((isMovable), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isMovable") });
     return __foldkitBrandViewResult((isMovable ? { model: next } : cancelDrag(next)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#setMovable");
 };
-// 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, heldHook, clientX, clientY) => __foldkitBrandViewResult((pipe(Array.findFirst(document.elementsFromPoint(clientX, clientY), (element) => __foldkitBrandViewResult((element.getAttribute("data-droppable-id") === listId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~23")), Option.map((list) => __foldkitBrandViewResult((insertionIndex(list, heldHook, clientX, clientY)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~24")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerIndex");
+const pointerIndex = (listId, heldHook, clientX, clientY) => __foldkitBrandViewResult((pipe(Array.findFirst(document.elementsFromPoint(clientX, clientY), (element) => __foldkitBrandViewResult((element instanceof HTMLElement &&
+    element.dataset["droppableId"] === listId), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~23")), Option.map((list) => __foldkitBrandViewResult((insertionIndex(list, heldHook, clientX, clientY)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~24")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerIndex");
 const PointerHold = Schema.Struct({
     listId: Schema.String,
     heldHook: Schema.String,
-    pointerId: Schema.Number,
+    pointerId: Schema.Finite,
 });
 const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
     screenX: event.screenX,
@@ -275,7 +250,6 @@ const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
     clientY: event.clientY,
     maybeIndex: pointerIndex(hold.listId, hold.heldHook, event.clientX, event.clientY),
 }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#pointerAt"));
-/** The pressing pointer's moves, release and cancel; another pointer's are not the list's. */
 const pointerMessages = (hold) => __foldkitBrandViewResult((dragMessages(hold.pointerId, {
     moved: (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#moved"),
     released: (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#released"),
@@ -299,9 +273,6 @@ const pointerSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewR
         })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dependenciesToStream"),
     }),
 }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~25")));
-// 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,
@@ -316,11 +287,14 @@ const sortableSubscriptions = Subscription.aggregate(pointerSubscriptions, escap
  *  of the parent's: `subscriptions("order")` is keyed `orderPointer`, `orderEscape`,
  *  `orderKeyboard` and `orderAutoScroll`. */
 export const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, sortableSubscriptions)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#subscriptions");
-// 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 }) => __foldkitBrandViewResult((Effect.sync(() => {
         measureLift(element, `[data-sortable-id="${CSS.escape(hook)}"]`, pressX, pressY);
@@ -331,8 +305,6 @@ const helpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "
 const isHeldItem = (model, itemId) => __foldkitBrandViewResult((UiDragAndDrop.isDragging(model.dragAndDrop) &&
     Option.contains(UiDragAndDrop.maybeDraggedItemId(model.dragAndDrop), itemHook(model, itemId))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#isHeldItem");
 const liftedGrip = (h) => __foldkitBrandViewResult((h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [Glyph.view({ name: "grip" }, h)])), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#liftedGrip");
-/** The item's content beside its grip, or, in a layout where the item places its grip,
- *  alone. */
 const itemContents = (info, item, render, h) => {
     const body = h.div([h.Class("sortable-body")], info.toItemView(item, render));
     return __foldkitBrandViewResult((info.layout === "Panels" ? [body] : [render.grip, body]), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemContents");
@@ -351,10 +323,6 @@ const gripView = (info, item, h) => {
         clientY,
         items,
     }), () => __foldkitBrandViewResult((isIdleNow && button === LEFT_BUTTON), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~33"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~32"));
-    // 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 __foldkitBrandViewResult((IconButton.view({
         glyph: "grip",
         label: fill(COPY.gripLabel, item.label),
@@ -370,8 +338,6 @@ const gripView = (info, item, h) => {
         ],
     }, h)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#gripView");
 };
-/** 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) => __foldkitBrandViewResult((pipe(model.maybeHeld, Option.filter(() => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "PointerDragging"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~34")), Option.flatMap((held) => __foldkitBrandViewResult((pipe(targetIndex(model, held), Option.filter((index) => __foldkitBrandViewResult((!Option.contains(indexOf(held.items, held.item.id), index)), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~36")), Option.flatMap((index) => {
     const others = Array.filter(held.items, (item) => __foldkitBrandViewResult((item.id !== held.item.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~38"));
     return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, index), (item) => (__foldkitBrandViewResult(({
@@ -384,16 +350,19 @@ const dropMarkOf = (model) => __foldkitBrandViewResult((pipe(model.maybeHeld, Op
 }))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~35")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dropMarkOf");
 const dropClass = (info, item) => __foldkitBrandViewResult((Option.match(Option.filter(info.maybeDropMark, ({ itemId }) => __foldkitBrandViewResult((itemId === item.id), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~42")), {
     onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~5"),
-    onSome: ({ side }) => (__foldkitBrandViewResult((side === "Before" ? " drop-before" : " drop-after"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~5")),
+    onSome: ({ side }) => __foldkitBrandViewResult((side === "Before" ? " drop-before" : " drop-after"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onSome~5"),
 })), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#dropClass");
 const itemClass = (info, item) => __foldkitBrandViewResult((`sortable-item${info.isMovable ? " movable" : ""}${isHeldItem(info.model, item.id) ? " drag-dim" : ""}${dropClass(info, item)}`), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemClass");
-const itemView = (info, item, h) => __foldkitBrandViewResult((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))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
-/** 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 itemView = (info, item, h) => __foldkitBrandViewResult((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))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#itemView");
 const itemsView = (info, h) => {
     const { model, items } = info;
-    const rows = Array.map(items, (item) => (__foldkitBrandViewResult(({ item, html: itemView(info, item, h) }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~43")));
+    const rows = Array.map(items, (item) => (__foldkitBrandViewResult(({
+        item,
+        html: itemView(info, item, h),
+    }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~43")));
     const maybeSlot = pipe(model.maybeHeld, Option.filter(() => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "KeyboardDragging"), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~44")), Option.flatMap((held) => __foldkitBrandViewResult((Option.map(targetIndex(model, held), (index) => (__foldkitBrandViewResult(({ held, index }), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~46")))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~45")));
     return __foldkitBrandViewResult((Option.match(maybeSlot, {
         onNone: () => __foldkitBrandViewResult((Array.map(rows, ({ html }) => __foldkitBrandViewResult((html), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#anonymous~47"))), "@gjermundgaraba-designs/pixel-paper/src/sortable/sortable.js#onNone~6"),
@@ -443,7 +412,7 @@ const layoutClass = (layout) => __foldkitBrandViewResult((Match.value(layout).pi
  * the keys.
  */
 export const view = defineView((model, viewInputs, h) => {
-    const { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
+    const { items, label, layout = "List", isReadOnly = false, toItemView, } = viewInputs;
     const info = {
         model,
         layout,
@@ -453,8 +422,6 @@ export const view = defineView((model, viewInputs, h) => {
         toItemView,
     };
     return __foldkitBrandViewResult((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"),

package/dist/src/stack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stack/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,YAAY,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/stack/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD;6BAC6B;AAC7B,eAAO,MAAM,KAAK,2CAAmC,CAAC;AACtD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AActC,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC,CAAC;AAEH;;iBAEiB;AACjB,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAI3E,CAAC"}
+{"version":3,"file":"stack.d.ts","sourceRoot":"","sources":["../../../src/stack/stack.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,QAAQ,CAAC;AACvC,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEtD;6BAC6B;AAC7B,eAAO,MAAM,KAAK,2CAAmC,CAAC;AAEtD,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAC;AAWtC,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,qDAAqD;IACrD,GAAG,CAAC,EAAE,KAAK,CAAC;CACb,CAAC,CAAC;AAEH;;iBAEiB;AACjB,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAIF,CAAC"}

package/dist/src/stack/stack.js

@@ -1,10 +1,8 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Match, Schema } from "effect";
-// SPACE
 /** `S`: things in one line (8px). `M`: the parts of one body (14px). `L`: whole surfaces,
  *  panel to panel (24px). */
 export const Space = Schema.Literals(["S", "M", "L"]);
-/** The class that sets a layout's gap. */
 const gapClassName = (gap) => __foldkitBrandViewResult((Match.value(gap).pipe(Match.withReturnType(), Match.when("S", () => __foldkitBrandViewResult(("gap-s"), "@gjermundgaraba-designs/pixel-paper/src/stack/stack.js#anonymous")), Match.when("M", () => __foldkitBrandViewResult(("gap-m"), "@gjermundgaraba-designs/pixel-paper/src/stack/stack.js#anonymous~2")), Match.when("L", () => __foldkitBrandViewResult(("gap-l"), "@gjermundgaraba-designs/pixel-paper/src/stack/stack.js#anonymous~3")), Match.exhaustive)), "@gjermundgaraba-designs/pixel-paper/src/stack/stack.js#gapClassName");
 /** A column of components a gap apart; each takes the column's width. Space only: no paper,
  *  border or shadow. Put buttons and chips in a Group or a Wrap inside it, so they keep their

package/dist/src/stage/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAClC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stage/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAC;AAElC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/stage/stage.d.ts

@@ -4,7 +4,7 @@ export type ViewConfig = Readonly<{
     /** The canvas, filling the stage. */
     body: ReadonlyArray<Html | string>;
     /** A floating Toolbar at the left edge (along the bottom on a phone). */
-    tools?: ReadonlyArray<Html>;
+    tools?: readonly Html[];
     /** Along the top edge: the connection, a notice, a count. */
     bar?: ReadonlyArray<Html | string>;
     /** Editing is paused: a Notice that says why (the link dropped, the page is read-only). The

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

@@ -1 +1 @@
-{"version":3,"file":"stage.d.ts","sourceRoot":"","sources":["../../../src/stage/stage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAMtD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qCAAqC;IACrC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,yEAAyE;IACzE,KAAK,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;IAC5B,6DAA6D;IAC7D,GAAG,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;+EAC2E;IAC3E,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH;;;2EAG2E;AAC3E,eAAO,MAAM,IAAI,GAAI,OAAO,UAAU,UAAU,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAoB3E,CAAC"}
+{"version":3,"file":"stage.d.ts","sourceRoot":"","sources":["../../../src/stage/stage.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAItD,uDAAuD;AACvD,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,qCAAqC;IACrC,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC,yEAAyE;IACzE,KAAK,CAAC,EAAE,SAAS,IAAI,EAAE,CAAC;IACxB,6DAA6D;IAC7D,GAAG,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;+EAC2E;IAC3E,MAAM,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACvC,CAAC,CAAC;AAEH;;;2EAG2E;AAC3E,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,KACf,WAAW,CAAC,OAAO,CAAC,KACtB,IAuBF,CAAC"}

package/dist/src/stage/stage.js

@@ -7,7 +7,10 @@ import { slotView } from "../slot/slot.js";
 export const view = (config, h) => {
     const { body, tools = [], bar = [], paused } = config;
     return __foldkitBrandViewResult((h.main([h.Id("main"), h.Class("stage")], [
-        h.div([h.Class("stage-work"), ...(paused === undefined ? [] : [h.Inert(true)])], [
+        h.div([
+            h.Class("stage-work"),
+            ...(paused === undefined ? [] : [h.Inert(true)]),
+        ], [
             h.div([h.Class("stage-canvas")], body),
             ...slotView("div", "stage-tools", tools, h),
             ...slotView("div", "stage-bar", bar, h),

package/dist/src/stat/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AACrC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,WAAW,CAAC;AAErC,YAAY,EAAE,cAAc,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC"}

package/dist/src/stat/stat.d.ts

@@ -27,7 +27,7 @@ export type StatConfig = Readonly<{
 }>;
 /** Configuration for rendering a row of stats with `listView`. */
 export type ListViewConfig = Readonly<{
-    stats: ReadonlyArray<StatConfig>;
+    stats: readonly StatConfig[];
 }>;
 /** A row of figures in ruled cells, four across (two on a phone), edge to edge in a flush panel that names what they
  *  measure. A description list: each stat is a term and its value. */

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

@@ -1 +1 @@
-{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../src/stat/stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAStD;iEACiE;AACjE,eAAO,MAAM,IAAI,6CAAqC,CAAC;AACvD,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAEpC,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;qBACiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;0CACsC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;oEACgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,qFAAqF;IACrF,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACrC,CAAC,CAAC;AAsEH,kEAAkE;AAClE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;CAClC,CAAC,CAAC;AAEH;sEACsE;AACtE,eAAO,MAAM,QAAQ,GAAI,OAAO,UAAU,cAAc,KAAK,WAAW,CAAC,OAAO,CAAC,KAAG,IAIjF,CAAC"}
+{"version":3,"file":"stat.d.ts","sourceRoot":"","sources":["../../../src/stat/stat.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,MAAM,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAOtD;iEACiE;AACjE,eAAO,MAAM,IAAI,6CAAqC,CAAC;AAEvD,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC;AAEpC,gCAAgC;AAChC,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC;qBACiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd;0CACsC;IACtC,UAAU,EAAE,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAClC,sDAAsD;IACtD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qFAAqF;IACrF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;oEACgE;IAChE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8DAA8D;IAC9D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,qFAAqF;IACrF,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;CACrC,CAAC,CAAC;AAuFH,kEAAkE;AAClE,MAAM,MAAM,cAAc,GAAG,QAAQ,CAAC;IACpC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;CAC9B,CAAC,CAAC;AAEH;sEACsE;AACtE,eAAO,MAAM,QAAQ,GAAI,OAAO,UACtB,cAAc,KACnB,WAAW,CAAC,OAAO,CAAC,KACtB,IAIA,CAAC"}

package/dist/src/stat/stat.js

@@ -1,21 +1,28 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array, Match, Option, Schema } from "effect";
-import { LOCALE } from "../locale/locale.js";
 import * as Glyph from "../glyph/glyph.js";
+import { LOCALE } from "../locale/locale.js";
 import { slotView } from "../slot/slot.js";
-// STAT
 /** Only when a change is a warning in itself: `Warn` fills it amber, `Error` prints it red. Up
  *  is not good and down is not bad until the product says so. */
 export const Tone = Schema.Literals(["Warn", "Error"]);
 const valueView = (config, h) => {
     if (config.isLoading === true) {
-        return __foldkitBrandViewResult((h.dd([h.Class("stat-value"), h.AriaBusy(true)], [h.span([h.Class("sr-only")], ["loading"]), h.span([h.Class("cursor"), h.AriaHidden(true)])])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#valueView");
+        return __foldkitBrandViewResult((h.dd([h.Class("stat-value"), h.AriaBusy(true)], [
+            h.span([h.Class("sr-only")], ["loading"]),
+            h.span([h.Class("cursor"), h.AriaHidden(true)]),
+        ])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#valueView");
     }
     return __foldkitBrandViewResult((Option.match(config.maybeValue, {
-        onNone: () => __foldkitBrandViewResult((h.dd([h.Class("stat-value unknown")], [h.span([h.AriaHidden(true)], ["—"]), h.span([h.Class("sr-only")], ["not known"])])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#onNone"),
+        onNone: () => __foldkitBrandViewResult((h.dd([h.Class("stat-value unknown")], [
+            h.span([h.AriaHidden(true)], ["—"]),
+            h.span([h.Class("sr-only")], ["not known"]),
+        ])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#onNone"),
         onSome: (value) => __foldkitBrandViewResult((h.dd([h.Class("stat-value")], [
             value.toLocaleString(LOCALE),
-            ...(config.unit === undefined ? [] : [h.span([h.Class("stat-unit")], [config.unit])]),
+            ...(config.unit === undefined
+                ? []
+                : [h.span([h.Class("stat-unit")], [config.unit])]),
         ])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#onSome"),
     })), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#valueView");
 };
@@ -23,14 +30,16 @@ const DELTA_TONE = { Warn: "warn", Error: "error" };
 const direction = (delta) => __foldkitBrandViewResult((Match.value(Math.sign(delta)).pipe(Match.withReturnType(), Match.when(1, () => (__foldkitBrandViewResult(({ glyph: "arrow-up", said: "up" }), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#anonymous"))), Match.when(-1, () => (__foldkitBrandViewResult(({ glyph: "arrow-down", said: "down" }), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#anonymous~2"))), Match.orElse(() => (__foldkitBrandViewResult(({ glyph: "minus", said: "no change," }), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#anonymous~3"))))), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#direction");
 const deltaView = (config, delta, h) => {
     const { glyph, said } = direction(delta);
-    return __foldkitBrandViewResult((h.dd([h.Class(config.tone === undefined ? "stat-delta" : `stat-delta ${DELTA_TONE[config.tone]}`)], [
+    return __foldkitBrandViewResult((h.dd([
+        h.Class(config.tone === undefined
+            ? "stat-delta"
+            : `stat-delta ${DELTA_TONE[config.tone]}`),
+    ], [
         Glyph.view({ name: glyph }, h),
         h.span([h.Class("sr-only")], [said]),
         `${Math.abs(delta).toLocaleString(LOCALE)}${config.deltaUnit ?? ""}`,
     ])), "@gjermundgaraba-designs/pixel-paper/src/stat/stat.js#deltaView");
 };
-// one figure in a row of stats: its label as the term, then the value in the pixel face at
-// 30px (22px at 900px and under) with tabular figures, an optional change and a note
 const statView = (config, h) => __foldkitBrandViewResult((h.keyed("div")(config.label, [h.Class("stat")], [
     h.dt([h.Class("label")], [config.label]),
     valueView(config, h),

package/dist/src/status-bar/index.d.ts

@@ -0,0 +1,4 @@
+export { MeasureHeight, Message } from "../top-bar/bar-height.ts";
+export { view } from "./status-bar.ts";
+export type { KeyNote, ViewConfig } from "./status-bar.ts";
+//# sourceMappingURL=index.d.ts.map

package/dist/src/status-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/status-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAElE,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAEvC,YAAY,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/src/status-bar/index.js

@@ -0,0 +1,2 @@
+export { MeasureHeight, Message } from "../top-bar/bar-height.js";
+export { view } from "./status-bar.js";

package/dist/src/{statusBar/statusBar.d.ts → status-bar/status-bar.d.ts}

@@ -1,7 +1,7 @@
 import type { KeySequence } from "foldkit/dom";
 import type { Html, HtmlBuilder } from "foldkit/html";
-import { type KeyPlatform } from "../keyHint/keyLabel.ts";
-import { type Message as BarHeightMessage } from "../topBar/barHeight.ts";
+import type { KeyPlatform } from "../key-hint/key-label.ts";
+import type { Message as BarHeightMessage } from "../top-bar/bar-height.ts";
 /** A key worth knowing and what it does, as the key help prints it. */
 export type KeyNote = Readonly<{
     keys: KeySequence;
@@ -13,7 +13,7 @@ export type ViewConfig<Message> = Readonly<{
     body: ReadonlyArray<Html | string>;
     /** Keys worth knowing, at the right, printed and not pressable. Narrow, they wrap under the
      *  state. */
-    keys?: ReadonlyArray<KeyNote>;
+    keys?: readonly KeyNote[];
     platform: KeyPlatform;
     /** Lifts the bar's lifecycle Message (`MeasureHeight` started: the page keeps
      *  `--statusbar-h` at the bar's height however it wraps, so the page, the rail, a banner and
@@ -26,4 +26,4 @@ export type ViewConfig<Message> = Readonly<{
  *  know. One per page, after the rail and the deck and outside `main`, where it is the page's
  *  footer (`<footer>`, the contentinfo landmark). Its keys are content, so each `kbd` is read. */
 export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;
-//# sourceMappingURL=statusBar.d.ts.map
+//# sourceMappingURL=status-bar.d.ts.map

package/dist/src/status-bar/status-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-bar.d.ts","sourceRoot":"","sources":["../../../src/status-bar/status-bar.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,KAAK,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAG5D,OAAO,KAAK,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAE5E,uEAAuE;AACvE,MAAM,MAAM,OAAO,GAAG,QAAQ,CAAC;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEpE,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,iEAAiE;IACjE,IAAI,EAAE,aAAa,CAAC,IAAI,GAAG,MAAM,CAAC,CAAC;IACnC;iBACa;IACb,IAAI,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;IAC1B,QAAQ,EAAE,WAAW,CAAC;IACtB;;;;sIAIkI;IAClI,eAAe,EAAE,CAAC,OAAO,EAAE,gBAAgB,KAAK,OAAO,CAAC;CACzD,CAAC,CAAC;AAcH;;kGAEkG;AAClG,eAAO,MAAM,IAAI,GAAI,OAAO,UAClB,UAAU,CAAC,OAAO,CAAC,KACxB,WAAW,CAAC,OAAO,CAAC,KACtB,IAsBF,CAAC"}

package/dist/src/{statusBar/statusBar.js → status-bar/status-bar.js}

@@ -1,11 +1,10 @@
 import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
 import { Array, Predicate } from "effect";
-import { keyLabel } from "../keyHint/keyLabel.js";
+import { keyLabel } from "../key-hint/key-label.js";
 import { slotView } from "../slot/slot.js";
-import { measureAttributes } from "../topBar/barHeight.js";
-// a key note is keyed by its binding, which stays the same on every platform
-const bindingKey = (keys) => __foldkitBrandViewResult((Predicate.isString(keys) ? keys : Array.join(keys, " ")), "@gjermundgaraba-designs/pixel-paper/src/statusBar/statusBar.js#bindingKey");
-const keyNoteView = (platform, h) => __foldkitBrandViewResult((({ keys, does }) => __foldkitBrandViewResult((h.keyed("span")(bindingKey(keys), [], [h.kbd([h.Class("key-hint")], [keyLabel(keys, platform)]), ` ${does}`])), "@gjermundgaraba-designs/pixel-paper/src/statusBar/statusBar.js#anonymous")), "@gjermundgaraba-designs/pixel-paper/src/statusBar/statusBar.js#keyNoteView");
+import { measureAttributes } from "../top-bar/bar-height.js";
+const bindingKey = (keys) => __foldkitBrandViewResult((Predicate.isString(keys) ? keys : Array.join(keys, " ")), "@gjermundgaraba-designs/pixel-paper/src/status-bar/status-bar.js#bindingKey");
+const keyNoteView = (platform, h) => __foldkitBrandViewResult((({ keys, does }) => __foldkitBrandViewResult((h.keyed("span")(bindingKey(keys), [], [h.kbd([h.Class("key-hint")], [keyLabel(keys, platform)]), ` ${does}`])), "@gjermundgaraba-designs/pixel-paper/src/status-bar/status-bar.js#anonymous")), "@gjermundgaraba-designs/pixel-paper/src/status-bar/status-bar.js#keyNoteView");
 /** The quiet line along the bottom of an interface: what state it is in, and the keys to
  *  know. One per page, after the rail and the deck and outside `main`, where it is the page's
  *  footer (`<footer>`, the contentinfo landmark). Its keys are content, so each `kbd` is read. */
@@ -17,5 +16,5 @@ export const view = (config, h) => {
     ], [
         h.div([h.Class("statusbar-state")], body),
         ...slotView("p", "statusbar-keys", Array.map(keys, keyNoteView(platform, h)), h),
-    ])), "@gjermundgaraba-designs/pixel-paper/src/statusBar/statusBar.js#view");
+    ])), "@gjermundgaraba-designs/pixel-paper/src/status-bar/status-bar.js#view");
 };

package/dist/src/subscription/{prefixKeys.d.ts → prefix-keys.d.ts}

@@ -1,4 +1,3 @@
-/** A Subscriptions record with every key behind `Prefix`: `pointer` becomes `${Prefix}Pointer`. */
 type PrefixedKeys<Prefix extends string, Entries> = {
     readonly [Key in keyof Entries as `${Prefix}${Capitalize<Key & string>}`]: Entries[Key];
 };
@@ -11,4 +10,4 @@ type PrefixedKeys<Prefix extends string, Entries> = {
  */
 export declare const prefixKeys: <Prefix extends string, Entries extends Readonly<Record<string, unknown>>>(prefix: Prefix, entries: Entries) => PrefixedKeys<Prefix, Entries>;
 export {};
-//# sourceMappingURL=prefixKeys.d.ts.map
+//# sourceMappingURL=prefix-keys.d.ts.map

package/dist/src/subscription/prefix-keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prefix-keys.d.ts","sourceRoot":"","sources":["../../../src/subscription/prefix-keys.ts"],"names":[],"mappings":"AAEA,KAAK,YAAY,CAAC,MAAM,SAAS,MAAM,EAAE,OAAO,IAAI;IAClD,QAAQ,EACN,GAAG,IAAI,MAAM,OAAO,IAAI,GAAG,MAAM,GAAG,UAAU,CAAC,GAAG,GAAG,MAAM,CAAC,EAAE,GAC7D,OAAO,CAAC,GAAG,CAAC;CAChB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,GACrB,MAAM,SAAS,MAAM,EACrB,OAAO,SAAS,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,UAEzC,MAAM,WACL,OAAO,KACf,YAAY,CAAC,MAAM,EAAE,OAAO,CAMK,CAAC"}