@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/sortable/sortable.js

@@ -0,0 +1,431 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { announce } from "../announcer/announcer.js";
+import { view as view$1 } from "../glyph/glyph.js";
+import { pressedAttribute } from "../button/button.js";
+import { activatedKeyboardDrag, canLift, cancelledDrag, escapeSubscriptions, insertionIndex, isCarrying, markDragging, measureLift, movedPointer, phaseOf, pointerMessages as pointerMessages$1, pressedDraggable, releasedPointer, settle as settle$1 } from "../drag/drag.js";
+import { view as view$2 } from "../icon-button/icon-button.js";
+import { LOCALE } from "../locale/locale.js";
+import { prefixKeys } from "../subscription/prefix-keys.js";
+import { Array, Effect, Match, Option, Schema, Stream, pipe } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import { DragAndDrop } from "@foldkit/ui";
+import * as Mount from "foldkit/mount";
+import { modifyFields } from "foldkit/struct";
+import { defineView } from "foldkit/submodel";
+import * as Subscription from "foldkit/subscription";
+import * as Update from "foldkit/update";
+// src/sortable/sortable.ts
+/** Schema for one item as the list knows it: its id, unique in the list, and its name in
+*  words, which the grip and screen readers use. */
+const Item = Schema.Struct({
+	id: Schema.String,
+	label: Schema.String
+});
+const KEYBOARD_MOVES = "Arrow keys move it one place, space drops it, escape cancels.";
+const COPY = {
+	gripLabel: "Move {item}",
+	gripHelp: `Press space to pick the item up. ${KEYBOARD_MOVES}`,
+	pickedUp: "Picked up {item}.",
+	pickedUpByKeyboard: `Picked up {item}, {position} of {total}. ${KEYBOARD_MOVES}`,
+	over: "{item}, {position} of {total}.",
+	dropped: "{item} dropped at {position} of {total}.",
+	putBack: "{item} put back where it was.",
+	cancelled: "Move cancelled. {item} put back where it was."
+};
+const Press = Schema.Struct({
+	pointerId: Schema.Finite,
+	clientX: Schema.Finite,
+	clientY: Schema.Finite
+});
+const Held = Schema.Struct({
+	item: Item,
+	items: Schema.Array(Item),
+	maybePress: Schema.Option(Press)
+});
+/** Schema for a sortable: the `@foldkit/ui` DragAndDrop it moves items with, and what it keeps
+*  while an item is held. The items are the parent's. */
+const Model = Schema.Struct({
+	dragAndDrop: DragAndDrop.Model,
+	maybeHeld: Schema.Option(Held)
+});
+/** Union of all Messages a sortable can produce. */
+const Message = defineMessageUnion({
+	GotDragAndDropMessage: { message: DragAndDrop.Message },
+	PressedItem: {
+		itemId: Schema.String,
+		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.Finite,
+		screenY: Schema.Finite,
+		clientX: Schema.Finite,
+		clientY: Schema.Finite,
+		maybeIndex: Schema.Option(Schema.Finite)
+	},
+	ReleasedPointer: {
+		screenX: Schema.Finite,
+		screenY: Schema.Finite,
+		clientX: Schema.Finite,
+		clientY: Schema.Finite,
+		maybeIndex: Schema.Option(Schema.Finite)
+	},
+	CancelledPointer: {},
+	PressedEscape: {},
+	CompletedAnnounceReorder: {},
+	CompletedSizeLiftedItem: {}
+});
+/** 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
+*  where the item already was, outside the list, or while items may not move reports nothing.
+*  The parent moves the item (or decides not to): the data is its own. */
+const OutMessage = defineMessageUnion({ Moved: {
+	itemId: Schema.String,
+	fromIndex: Schema.Finite,
+	toIndex: Schema.Finite,
+	maybeAfterItemId: Schema.Option(Schema.String),
+	maybeBeforeItemId: Schema.Option(Schema.String)
+} });
+/** Creates a sortable with nothing held. */
+const init = (config) => (__foldkitBrandViewResult(({
+	dragAndDrop: DragAndDrop.init({ id: config.id }),
+	maybeHeld: Option.none()
+}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#init"));
+const id = (model) => __foldkitBrandViewResult((model.dragAndDrop.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#id");
+const itemHook = (model, itemId) => __foldkitBrandViewResult((`${id(model)}/${itemId}`), "@gjermundgaraba/pixel-paper/sortable/sortable.js#itemHook");
+const GRIP_ATTRIBUTE = "sortable-grip";
+/** Says a step of a move through the page's live region (as `Announcer.Announce` does). */
+const AnnounceReorder = Command.define("AnnounceReorder", {
+	args: { text: Schema.String },
+	messages: [Message.CompletedAnnounceReorder],
+	execute: ({ text }) => __foldkitBrandViewResult((announce(text).pipe(Effect.as(Message.CompletedAnnounceReorder()))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#execute")
+});
+const fill = (template, item, position = 0, total = 0) => __foldkitBrandViewResult((template.replaceAll("{item}", item).replaceAll("{position}", position.toLocaleString(LOCALE)).replaceAll("{total}", total.toLocaleString(LOCALE))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#fill");
+const indexOf = (items, itemId) => __foldkitBrandViewResult((Array.findFirstIndex(items, (item) => __foldkitBrandViewResult((item.id === itemId), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#indexOf");
+const targetIndex = (model, held) => __foldkitBrandViewResult((Option.map(DragAndDrop.maybeDropTarget(model.dragAndDrop), ({ index }) => __foldkitBrandViewResult((Math.min(Math.max(index, 0), held.items.length - 1)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~2"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#targetIndex");
+const placementOf = (held, rawIndex) => __foldkitBrandViewResult((Option.gen(function* () {
+	const fromIndex = yield* indexOf(held.items, held.item.id);
+	const others = Array.filter(held.items, (item) => __foldkitBrandViewResult((item.id !== held.item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~4"));
+	const toIndex = Math.min(Math.max(rawIndex, 0), others.length);
+	if (toIndex === fromIndex) return __foldkitBrandViewResult((yield* Option.none()), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~3");
+	return __foldkitBrandViewResult((OutMessage.Moved({
+		itemId: held.item.id,
+		fromIndex,
+		toIndex,
+		maybeAfterItemId: Option.map(Array.get(others, toIndex - 1), (item) => __foldkitBrandViewResult((item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~5")),
+		maybeBeforeItemId: Option.map(Array.get(others, toIndex), (item) => __foldkitBrandViewResult((item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~6"))
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~3");
+})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#placementOf");
+const foldDragAndDropOutMessage = DragAndDrop.OutMessage.match({
+	Reordered: ({ toIndex }) => __foldkitBrandViewResult(((stepModel) => __foldkitBrandViewResult((Update.withOutMessage({ model: stepModel }, Option.getOrUndefined(Option.flatMap(stepModel.maybeHeld, (held) => __foldkitBrandViewResult((placementOf(held, toIndex)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~8"))))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~7")), "@gjermundgaraba/pixel-paper/sortable/sortable.js#Reordered"),
+	Cancelled: () => __foldkitBrandViewResult(((stepModel) => (__foldkitBrandViewResult(({ model: stepModel }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~9"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#Cancelled")
+});
+const toDragAndDropMessage = (message) => __foldkitBrandViewResult((Message.GotDragAndDropMessage({ message })), "@gjermundgaraba/pixel-paper/sortable/sortable.js#toDragAndDropMessage");
+const foldDragAndDrop = Update.foldChild({
+	update: DragAndDrop.update,
+	read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#read"),
+	write: (model, nextDragAndDrop) => __foldkitBrandViewResult((modifyFields(model, { dragAndDrop: () => __foldkitBrandViewResult((nextDragAndDrop), "@gjermundgaraba/pixel-paper/sortable/sortable.js#dragAndDrop") })), "@gjermundgaraba/pixel-paper/sortable/sortable.js#write"),
+	toParentMessage: toDragAndDropMessage,
+	foldOutMessage: foldDragAndDropOutMessage
+});
+const positionOf = (index) => __foldkitBrandViewResult((index + 1), "@gjermundgaraba/pixel-paper/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);
+	if (after === "Idle") return __foldkitBrandViewResult((isCarrying(before) ? Option.some(Option.match(maybeOutMessage, {
+		onNone: () => __foldkitBrandViewResult((fill(putBack, label)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone"),
+		onSome: ({ toIndex }) => __foldkitBrandViewResult((fill(COPY.dropped, label, positionOf(toIndex), total)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome")
+	})) : Option.none()), "@gjermundgaraba/pixel-paper/sortable/sortable.js#moveText");
+	else if (before === "Pressed" && after === "PointerDragging") return __foldkitBrandViewResult((Option.some(fill(COPY.pickedUp, label))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#moveText");
+	else if (before === "Idle" && after === "KeyboardDragging") return __foldkitBrandViewResult((Option.map(targetIndex(next, held), (index) => __foldkitBrandViewResult((fill(COPY.pickedUpByKeyboard, label, positionOf(index), total)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~10"))), "@gjermundgaraba/pixel-paper/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/pixel-paper/sortable/sortable.js#anonymous~11")), Option.map((index) => __foldkitBrandViewResult((fill(COPY.over, label, positionOf(index), total)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~12")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#moveText");
+	return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/sortable/sortable.js#moveText");
+};
+const settle = (previous, putBack = COPY.putBack) => __foldkitBrandViewResult(((dragAndDropUpdate) => __foldkitBrandViewResult((settle$1(dragAndDropUpdate, Option.map(Option.flatMap(previous.maybeHeld, (held) => __foldkitBrandViewResult((moveText(held, previous, dragAndDropUpdate.model, Option.fromNullishOr(dragAndDropUpdate.outMessage), putBack)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~14")), (text) => __foldkitBrandViewResult((AnnounceReorder({ text })), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~15")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~13")), "@gjermundgaraba/pixel-paper/sortable/sortable.js#settle");
+const liftable = (model, items, itemId) => __foldkitBrandViewResult((Option.filter(Option.map(Array.findFirstWithIndex(items, (item) => __foldkitBrandViewResult((item.id === itemId), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~16")), ([item, index]) => (__foldkitBrandViewResult(({
+	index,
+	item
+}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~17"))), () => __foldkitBrandViewResult((canLift(model)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~18"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#liftable");
+const lift = (model, held, liftMessage) => {
+	const pressed = modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((Option.some(held)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#maybeHeld") });
+	return __foldkitBrandViewResult((settle(pressed)(foldDragAndDrop(pressed, liftMessage))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#lift");
+};
+const pointerMove = (model, pointer) => __foldkitBrandViewResult((movedPointer({
+	screenX: pointer.screenX,
+	screenY: pointer.screenY,
+	clientX: pointer.clientX,
+	clientY: pointer.clientY,
+	maybeDropTarget: Option.map(pointer.maybeIndex, (index) => (__foldkitBrandViewResult(({
+		containerId: id(model),
+		index
+	}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~19")))
+})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#pointerMove");
+const isPointerCarrying = (model) => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "PointerDragging"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#isPointerCarrying");
+const rereadPointerAtRelease = (model, pointer) => __foldkitBrandViewResult((foldDragAndDrop(model, pointerMove(model, pointer))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#rereadPointerAtRelease");
+const release = (model, pointer) => {
+	if (!isPointerCarrying(model)) return __foldkitBrandViewResult((foldDragAndDrop(model, releasedPointer())), "@gjermundgaraba/pixel-paper/sortable/sortable.js#release");
+	const moved = rereadPointerAtRelease(model, pointer);
+	const released = foldDragAndDrop(moved.model, releasedPointer());
+	return __foldkitBrandViewResult((Update.withOutMessage({
+		model: released.model,
+		commands: [...moved.commands ?? [], ...released.commands ?? []]
+	}, released.outMessage)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#release");
+};
+const cancelDrag = (model) => __foldkitBrandViewResult((settle(model, COPY.cancelled)(foldDragAndDrop(model, cancelledDrag()))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#cancelDrag");
+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/pixel-paper/sortable/sortable.js#anonymous~20")), Match.tag("CancelledDrag", () => __foldkitBrandViewResult((cancelDrag(model)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~21")), Match.orElse(() => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, message))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~22")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#updateDragAndDrop");
+/** Processes a sortable Message and returns the next Model, Commands and OutMessage. */
+const update = (model, message) => __foldkitBrandViewResult((Message.match(message, {
+	GotDragAndDropMessage: ({ message: dragAndDropMessage }) => __foldkitBrandViewResult((updateDragAndDrop(model, dragAndDropMessage)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#GotDragAndDropMessage"),
+	PressedItem: ({ itemId, pointerId, screenX, screenY, clientX, clientY, items }) => __foldkitBrandViewResult((Option.match(liftable(model, items, itemId), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~2")),
+		onSome: ({ index, item }) => __foldkitBrandViewResult((lift(model, {
+			item,
+			items,
+			maybePress: Option.some({
+				pointerId,
+				clientX,
+				clientY
+			})
+		}, pressedDraggable({
+			itemId: itemHook(model, itemId),
+			containerId: id(model),
+			index,
+			screenX,
+			screenY
+		}))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~2")
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#PressedItem"),
+	PressedGripKey: ({ itemId, items }) => __foldkitBrandViewResult((Option.match(liftable(model, items, itemId), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~3")),
+		onSome: ({ index, item }) => __foldkitBrandViewResult((lift(model, {
+			item,
+			items,
+			maybePress: Option.none()
+		}, activatedKeyboardDrag({
+			itemId: itemHook(model, itemId),
+			containerId: id(model),
+			index
+		}))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~3")
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#PressedGripKey"),
+	MovedPointer: (pointer) => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, pointerMove(model, pointer)))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#MovedPointer"),
+	ReleasedPointer: (pointer) => __foldkitBrandViewResult((settle(model)(release(model, pointer))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#ReleasedPointer"),
+	CancelledPointer: () => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, cancelledDrag()))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#CancelledPointer"),
+	PressedEscape: () => __foldkitBrandViewResult((cancelDrag(model)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#PressedEscape"),
+	CompletedAnnounceReorder: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#CompletedAnnounceReorder")),
+	CompletedSizeLiftedItem: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#CompletedSizeLiftedItem"))
+})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#update");
+const pointerIndex = (listId, heldHook, clientX, clientY) => __foldkitBrandViewResult((pipe(Array.findFirst(document.elementsFromPoint(clientX, clientY), (element) => __foldkitBrandViewResult((element instanceof HTMLElement && element.dataset["droppableId"] === listId), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~23")), Option.map((list) => __foldkitBrandViewResult((insertionIndex(list, heldHook, clientX, clientY)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~24")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#pointerIndex");
+const PointerHold = Schema.Struct({
+	listId: Schema.String,
+	heldHook: Schema.String,
+	pointerId: Schema.Finite
+});
+const pointerAt = (hold, event) => (__foldkitBrandViewResult(({
+	screenX: event.screenX,
+	screenY: event.screenY,
+	clientX: event.clientX,
+	clientY: event.clientY,
+	maybeIndex: pointerIndex(hold.listId, hold.heldHook, event.clientX, event.clientY)
+}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#pointerAt"));
+const pointerMessages = (hold) => __foldkitBrandViewResult((pointerMessages$1(hold.pointerId, {
+	moved: (event) => __foldkitBrandViewResult((Message.MovedPointer(pointerAt(hold, event))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#moved"),
+	released: (event) => __foldkitBrandViewResult((Message.ReleasedPointer(pointerAt(hold, event))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#released"),
+	cancelled: () => __foldkitBrandViewResult((Message.CancelledPointer()), "@gjermundgaraba/pixel-paper/sortable/sortable.js#cancelled")
+})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#pointerMessages");
+const pointerSubscriptions = Subscription.make()((entry) => (__foldkitBrandViewResult(({ pointer: entry({ maybeHold: Schema.Option(PointerHold) }, {
+	modelToDependencies: (model) => (__foldkitBrandViewResult(({ maybeHold: Option.filter(Option.flatMap(model.maybeHeld, ({ item, maybePress }) => __foldkitBrandViewResult((Option.map(maybePress, ({ pointerId }) => (__foldkitBrandViewResult(({
+		listId: id(model),
+		heldHook: itemHook(model, item.id),
+		pointerId
+	}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~27")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~26")), () => {
+		const phase = phaseOf(model.dragAndDrop);
+		return __foldkitBrandViewResult((phase === "Pressed" || phase === "PointerDragging"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~28");
+	}) }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#modelToDependencies")),
+	dependenciesToStream: ({ maybeHold }) => __foldkitBrandViewResult((Option.match(maybeHold, {
+		onNone: () => __foldkitBrandViewResult((Stream.empty), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~4"),
+		onSome: (hold) => __foldkitBrandViewResult((Stream.merge(pointerMessages(hold), markDragging)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~4")
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#dependenciesToStream")
+}) }), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~25")));
+const dragSubscriptions = Subscription.lift({
+	keyboard: DragAndDrop.subscriptions.documentKeyboard,
+	autoScroll: DragAndDrop.subscriptions.autoScroll
+})({
+	read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#read~2"),
+	toParentMessage: toDragAndDropMessage
+});
+const sortableSubscriptions = Subscription.aggregate(pointerSubscriptions, escapeSubscriptions(Message.PressedEscape()), dragSubscriptions);
+/** A held item follows the pointer, the arrows and Space move and drop it, Escape puts it back
+*  and the page scrolls near its edges, from listeners that run only while an item is pressed
+*  or held. Lift them into the application's Subscriptions, once per list, behind a key prefix
+*  of the parent's: `subscriptions("order")` is keyed `orderPointer`, `orderEscape`,
+*  `orderKeyboard` and `orderAutoScroll`. */
+const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, sortableSubscriptions)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#subscriptions");
+/** 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. */
+const SizeLiftedItem = Mount.define("SizeLiftedItem", {
+	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);
+		return __foldkitBrandViewResult((Message.CompletedSizeLiftedItem()), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~29");
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#execute~2")
+});
+const helpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "@gjermundgaraba/pixel-paper/sortable/sortable.js#helpId");
+const isHeldItem = (model, itemId) => __foldkitBrandViewResult((DragAndDrop.isDragging(model.dragAndDrop) && Option.contains(DragAndDrop.maybeDraggedItemId(model.dragAndDrop), itemHook(model, itemId))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#isHeldItem");
+const liftedGrip = (h) => __foldkitBrandViewResult((h.span([h.Class("iconbtn quiet"), h.AriaHidden(true)], [view$1({ name: "grip" }, h)])), "@gjermundgaraba/pixel-paper/sortable/sortable.js#liftedGrip");
+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/pixel-paper/sortable/sortable.js#itemContents");
+};
+const liftedView = (info, item, h) => __foldkitBrandViewResult((h.div([h.Class("sortable-item lifted")], itemContents(info, item, {
+	isLifted: true,
+	grip: liftedGrip(h)
+}, h))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#liftedView");
+const gripView = (info, item, h) => {
+	const { model, isMovable, items } = info;
+	const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
+	const onGripKey = h.OnKeyDownPreventDefault((key) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({
+		itemId: item.id,
+		items
+	}), () => __foldkitBrandViewResult((isIdleNow && (key === " " || key === "Enter")), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~31"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~30"));
+	const onGripPress = h.OnPointerDown((_pointerType, button, screenX, screenY, _time, clientX, clientY, pointerId) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedItem({
+		itemId: item.id,
+		pointerId,
+		screenX,
+		screenY,
+		clientX,
+		clientY,
+		items
+	}), () => __foldkitBrandViewResult((isIdleNow && button === 0), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~33"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~32"));
+	return __foldkitBrandViewResult((view$2({
+		glyph: "grip",
+		label: fill(COPY.gripLabel, item.label),
+		isQuiet: true,
+		isDisabled: !isMovable,
+		attributes: [
+			h.DataAttribute("draggable-id", itemHook(model, item.id)),
+			h.DataAttribute(GRIP_ATTRIBUTE, ""),
+			h.AriaRoleDescription("draggable"),
+			h.AriaDescribedBy(helpId(model)),
+			pressedAttribute(isHeldItem(model, item.id), h),
+			...isMovable ? [onGripKey, onGripPress] : []
+		]
+	}, h)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#gripView");
+};
+const dropMarkOf = (model) => __foldkitBrandViewResult((pipe(model.maybeHeld, Option.filter(() => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "PointerDragging"), "@gjermundgaraba/pixel-paper/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/pixel-paper/sortable/sortable.js#anonymous~36")), Option.flatMap((index) => {
+	const others = Array.filter(held.items, (item) => __foldkitBrandViewResult((item.id !== held.item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~38"));
+	return __foldkitBrandViewResult((Option.orElse(Option.map(Array.get(others, index), (item) => (__foldkitBrandViewResult(({
+		itemId: item.id,
+		side: "Before"
+	}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~39"))), () => __foldkitBrandViewResult((Option.map(Array.last(others), (item) => (__foldkitBrandViewResult(({
+		itemId: item.id,
+		side: "After"
+	}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~41")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~40"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~37");
+}))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~35")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#dropMarkOf");
+const dropClass = (info, item) => __foldkitBrandViewResult((Option.match(Option.filter(info.maybeDropMark, ({ itemId }) => __foldkitBrandViewResult((itemId === item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~42")), {
+	onNone: () => __foldkitBrandViewResult((""), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~5"),
+	onSome: ({ side }) => __foldkitBrandViewResult((side === "Before" ? " drop-before" : " drop-after"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~5")
+})), "@gjermundgaraba/pixel-paper/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/pixel-paper/sortable/sortable.js#itemClass");
+const itemView = (info, item, h) => __foldkitBrandViewResult((h.keyed("li")(item.id, [...DragAndDrop.sortable(itemHook(info.model, item.id)), h.Class(itemClass(info, item))], itemContents(info, item, {
+	isLifted: false,
+	grip: gripView(info, item, h)
+}, h))), "@gjermundgaraba/pixel-paper/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/pixel-paper/sortable/sortable.js#anonymous~43")));
+	const maybeSlot = pipe(model.maybeHeld, Option.filter(() => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "KeyboardDragging"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~44")), Option.flatMap((held) => __foldkitBrandViewResult((Option.map(targetIndex(model, held), (index) => (__foldkitBrandViewResult(({
+		held,
+		index
+	}), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~46")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~45")));
+	return __foldkitBrandViewResult((Option.match(maybeSlot, {
+		onNone: () => __foldkitBrandViewResult((Array.map(rows, ({ html }) => __foldkitBrandViewResult((html), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~47"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~6"),
+		onSome: ({ held, index }) => {
+			const slot = h.keyed("li")("sortable-slot", [
+				h.Class("sortable-slot"),
+				h.AriaHidden(true),
+				h.Inert(true)
+			], [liftedView(info, held.item, h)]);
+			const others = Array.filter(rows, ({ item }) => __foldkitBrandViewResult((item.id !== held.item.id), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~48"));
+			const maybeBefore = Array.get(others, index);
+			return __foldkitBrandViewResult((Option.match(maybeBefore, {
+				onNone: () => __foldkitBrandViewResult(([...Array.map(rows, ({ html }) => __foldkitBrandViewResult((html), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~49")), slot]), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onNone~7"),
+				onSome: (before) => __foldkitBrandViewResult((Array.flatMap(rows, ({ item, html }) => __foldkitBrandViewResult((item.id === before.item.id ? [slot, html] : [html]), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~50"))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~7")
+			})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#onSome~6");
+		}
+	})), "@gjermundgaraba/pixel-paper/sortable/sortable.js#itemsView");
+};
+const liftedCopyView = (info, h) => {
+	const { model } = info;
+	const maybeLifted = Option.all({
+		style: DragAndDrop.ghostStyle(model.dragAndDrop),
+		held: model.maybeHeld,
+		press: Option.flatMap(model.maybeHeld, ({ maybePress }) => __foldkitBrandViewResult((maybePress), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~51"))
+	});
+	return __foldkitBrandViewResult((Array.fromOption(Option.map(maybeLifted, ({ style, held, press }) => __foldkitBrandViewResult((h.div([
+		h.Class("sortable-lift"),
+		h.Style(style),
+		h.AriaHidden(true),
+		h.Inert(true),
+		h.OnMount(SizeLiftedItem({
+			itemHook: itemHook(model, held.item.id),
+			pressX: press.clientX,
+			pressY: press.clientY
+		}))
+	], [liftedView(info, held.item, h)])), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~52")))), "@gjermundgaraba/pixel-paper/sortable/sortable.js#liftedCopyView");
+};
+const layoutClass = (layout) => __foldkitBrandViewResult((Match.value(layout).pipe(Match.withReturnType(), Match.when("List", () => __foldkitBrandViewResult(("sortable"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~53")), Match.when("Grid", () => __foldkitBrandViewResult(("sortable grid"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~54")), Match.when("Panels", () => __foldkitBrandViewResult(("sortable panels"), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~55")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/sortable/sortable.js#layoutClass");
+/**
+* Items the reader puts in order, as rows, as tiles or as panels, built on `@foldkit/ui`'s
+* DragAndDrop: `div.sortable` holding `ul.sortable-items` (named by `label`) of
+* `li.sortable-item`, each its grip and the parent's content (a panel holds its grip in its
+* title bar). The items are the parent's; a drop reports `Moved`.
+*
+* Only the grip lifts an item, under every pointer, so the item's own text selects and a
+* finger on it scrolls the page; the keyboard takes the grip too: Space or Enter picks the
+* item up, every arrow moves it one place in reading order, Space drops it and Escape puts it back.
+* The held item dims in place; a copy, lifted onto the card shadow, follows the pointer or
+* prints where the keyboard would drop it; each step is said through the page's live region.
+* Lift `subscriptions(keyPrefix)` into the application's, or nothing follows the pointer or
+* the keys.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { items, label, layout = "List", isReadOnly = false, toItemView } = viewInputs;
+	const info = {
+		model,
+		layout,
+		isMovable: !isReadOnly,
+		items,
+		maybeDropMark: dropMarkOf(model),
+		toItemView
+	};
+	return __foldkitBrandViewResult((h.div([h.Class(layoutClass(layout))], [
+		h.ul([
+			h.DataAttribute("droppable-id", id(model)),
+			h.Role("list"),
+			h.AriaLabel(label),
+			h.Class("sortable-items")
+		], itemsView(info, h)),
+		h.p([h.Id(helpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+		...liftedCopyView(info, h)
+	])), "@gjermundgaraba/pixel-paper/sortable/sortable.js#anonymous~56");
+});
+export { AnnounceReorder, Item, Message, Model, OutMessage, SizeLiftedItem, init, subscriptions, update, view };

package/dist/stack/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./stack.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/stack/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./stack.js";
+// src/stack/index.ts
+var stack_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/stack/index.js#view") });
+export { stack_exports, view };

package/dist/stack/stack.d.ts

@@ -0,0 +1,15 @@
+import { Schema } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** `M`: the parts of one body (14px). `L`: whole surfaces, panel to panel (24px). */
+export declare const Space: Schema.Literals<readonly ["M", "L"]>;
+export type Space = typeof Space.Type;
+/** Configuration for rendering a stack with `view`. */
+export type ViewConfig = Readonly<{
+  body: ReadonlyArray<Html | string>;
+  /** `M` by default: the gap inside a panel's body. */
+  gap?: Space;
+}>;
+/** 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
+ *  own width. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/stack/stack.js

@@ -0,0 +1,12 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { Match, Schema } from "effect";
+Schema.Literals(["M", "L"]);
+const gapClassName = (gap) => __foldkitBrandViewResult((Match.value(gap).pipe(Match.withReturnType(), Match.when("M", () => __foldkitBrandViewResult(("gap-m"), "@gjermundgaraba/pixel-paper/stack/stack.js#anonymous")), Match.when("L", () => __foldkitBrandViewResult(("gap-l"), "@gjermundgaraba/pixel-paper/stack/stack.js#anonymous~2")), Match.exhaustive)), "@gjermundgaraba/pixel-paper/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
+*  own width. */
+const view = (config, h) => {
+	const { body, gap = "M" } = config;
+	return __foldkitBrandViewResult((h.div([h.Class(`stack ${gapClassName(gap)}`)], body)), "@gjermundgaraba/pixel-paper/stack/stack.js#view");
+};
+export { view };

package/dist/stage/index.d.ts

@@ -0,0 +1,5 @@
+import { ViewConfig, view } from "./stage.js";
+declare namespace index_d_exports {
+  export { ViewConfig, view };
+}
+export { type ViewConfig, index_d_exports, view };

package/dist/stage/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { view } from "./stage.js";
+// src/stage/index.ts
+var stage_exports = /* @__PURE__ */ __exportAll({ view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/stage/index.js#view") });
+export { stage_exports, view };

package/dist/stage/stage.d.ts

@@ -0,0 +1,14 @@
+import { Html, HtmlBuilder } from "foldkit/html";
+/** Configuration for rendering a stage with `view`. */
+export type ViewConfig = Readonly<{
+  /** The canvas, filling the stage. */
+  body: ReadonlyArray<Html | string>;
+  /** Editing is paused: a Notice that says why (the link dropped, the page is read-only). The
+   *  veil comes down over the work, which is inert until this is cleared. */
+  paused?: ReadonlyArray<Html | string>;
+}>;
+/** The ground itself, from under the top bar to the window's edges, for a canvas: the main
+ *  landmark (`<main id="main">`). It does not scroll; what is on it pans. While paused, the
+ *  work is inert and the reason is on the veil, inside a status (`role="status"`) that stays
+ *  in place while the veil comes and goes, so a screen reader hears it. */
+export declare const view: <Message>(config: ViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/stage/stage.js

@@ -0,0 +1,11 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+// src/stage/stage.ts
+/** The ground itself, from under the top bar to the window's edges, for a canvas: the main
+*  landmark (`<main id="main">`). It does not scroll; what is on it pans. While paused, the
+*  work is inert and the reason is on the veil, inside a status (`role="status"`) that stays
+*  in place while the veil comes and goes, so a screen reader hears it. */
+const view = (config, h) => {
+	const { body, paused } = config;
+	return __foldkitBrandViewResult((h.main([h.Id("main"), h.Class("stage")], [h.div([h.Class("stage-work"), ...paused === void 0 ? [] : [h.Inert(true)]], [h.div([h.Class("stage-canvas")], body)]), h.div([h.Role("status")], paused === void 0 ? [] : [h.div([h.Class("stage-paused")], paused)])])), "@gjermundgaraba/pixel-paper/stage/stage.js#view");
+};
+export { view };

package/dist/stat/index.d.ts

@@ -0,0 +1,5 @@
+import { ListViewConfig, listView } from "./stat.js";
+declare namespace index_d_exports {
+  export { ListViewConfig, listView };
+}
+export { type ListViewConfig, index_d_exports, listView };

package/dist/stat/index.js

@@ -0,0 +1,6 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { listView } from "./stat.js";
+// src/stat/index.ts
+var stat_exports = /* @__PURE__ */ __exportAll({ listView: () => __foldkitBrandViewResult((listView), "@gjermundgaraba/pixel-paper/stat/index.js#listView") });
+export { listView, stat_exports };

package/dist/stat/stat.d.ts

@@ -0,0 +1,18 @@
+import { Option } from "effect";
+import { Html, HtmlBuilder } from "foldkit/html";
+/** One stat in a `listView`. */
+export type StatConfig = Readonly<{
+  /** What is counted, in the label register (`"Requests today"`); unique in its row. It wraps
+   *  when long. */
+  label: string;
+  /** The figure, printed in English (41,200). `None` when it is not known: a muted dash, and
+   *  "not known" for screen readers. */
+  maybeValue: Option.Option<number>;
+}>;
+/** Configuration for rendering a row of stats with `listView`. */
+export type ListViewConfig = Readonly<{
+  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. */
+export declare const listView: <Message>(config: ListViewConfig, h: HtmlBuilder<Message>) => Html;

package/dist/stat/stat.js

@@ -0,0 +1,13 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { LOCALE } from "../locale/locale.js";
+import { Array, Option } from "effect";
+// src/stat/stat.ts
+const valueView = (config, h) => __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/pixel-paper/stat/stat.js#onNone"),
+	onSome: (value) => __foldkitBrandViewResult((h.dd([h.Class("stat-value")], [value.toLocaleString(LOCALE)])), "@gjermundgaraba/pixel-paper/stat/stat.js#onSome")
+})), "@gjermundgaraba/pixel-paper/stat/stat.js#valueView");
+const statView = (config, h) => __foldkitBrandViewResult((h.keyed("div")(config.label, [h.Class("stat")], [h.dt([h.Class("label")], [config.label]), valueView(config, h)])), "@gjermundgaraba/pixel-paper/stat/stat.js#statView");
+/** 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. */
+const listView = (config, h) => __foldkitBrandViewResult((h.dl([h.Class("stats")], Array.map(config.stats, (stat) => __foldkitBrandViewResult((statView(stat, h)), "@gjermundgaraba/pixel-paper/stat/stat.js#anonymous")))), "@gjermundgaraba/pixel-paper/stat/stat.js#listView");
+export { listView };

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

@@ -0,0 +1,6 @@
+import { MeasureHeight, Message } from "../top-bar/bar-height.js";
+import { KeyNote, ViewConfig, view } from "./status-bar.js";
+declare namespace index_d_exports {
+  export { KeyNote, MeasureHeight, Message, ViewConfig, view };
+}
+export { type KeyNote, MeasureHeight, Message, type ViewConfig, index_d_exports, view };

package/dist/status-bar/index.js

@@ -0,0 +1,11 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { MeasureHeight, Message } from "../top-bar/bar-height.js";
+import { view } from "./status-bar.js";
+// src/status-bar/index.ts
+var status_bar_exports = /* @__PURE__ */ __exportAll({
+	MeasureHeight: () => __foldkitBrandViewResult((MeasureHeight), "@gjermundgaraba/pixel-paper/status-bar/index.js#MeasureHeight"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/status-bar/index.js#Message"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/status-bar/index.js#view")
+});
+export { MeasureHeight, Message, status_bar_exports, view };

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

@@ -0,0 +1,28 @@
+import { KeyPlatform } from "../key-hint/key-label.js";
+import { Message } from "../top-bar/bar-height.js";
+import { Html, HtmlBuilder } from "foldkit/html";
+import { KeySequence } from "foldkit/dom";
+/** A key worth knowing and what it does, as the key help prints it. */
+export type KeyNote = Readonly<{
+  keys: KeySequence;
+  does: string;
+}>;
+/** Configuration for rendering a status bar with `view`. */
+export type ViewConfig<Message$1> = Readonly<{
+  /** The state, at the left: a LinkState, a sync word, a count. */
+  body: ReadonlyArray<Html | string>;
+  /** Keys worth knowing, at the right, printed and not pressable. Narrow, they wrap under the
+   *  state. */
+  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
+   *  the toasts stop above it) into the parent's Message, which the parent's update takes and
+   *  changes nothing for. In a Scene, resolve the Mount by name with the lifted Message:
+   *  `Scene.Mount.resolve({ name: StatusBar.MeasureHeight.name }, toParentMessage(StatusBar.Message.CompletedMeasureHeight()))`. */
+  toParentMessage: (message: Message) => Message$1;
+}>;
+/** 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. */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;