@gjermundgaraba/pixel-paper 0.0.0-stage → 0.1.0

package/dist/board/board.js

@@ -0,0 +1,449 @@
+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, innerControls, isCarrying, measureLift, phaseOf, pressedDraggable, 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 { slotView } from "../slot/slot.js";
+import { prefixKeys } from "../subscription/prefix-keys.js";
+import { Array, Effect, Equal, Match, Option, Schema, pipe } from "effect";
+import * as Command from "foldkit/command";
+import { defineMessageUnion } from "foldkit/message";
+import { Button, DragAndDrop } from "@foldkit/ui";
+import { childAttributes } from "foldkit/html";
+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/board/board.ts
+/** Schema for one card as the board knows it: its id, unique across the board, and its name
+*  in words, which the grip and screen readers use. */
+const Card = Schema.Struct({
+	id: Schema.String,
+	label: Schema.String
+});
+/** Schema for one column: its id, its title, and its cards in order. */
+const Column = Schema.Struct({
+	id: Schema.String,
+	title: Schema.String,
+	cards: Schema.Array(Card)
+});
+const KEYBOARD_MOVES = "Arrow keys move it to another column, space drops it, escape cancels.";
+const COPY = {
+	gripLabel: "Move {card}",
+	gripHelp: `Press space to pick the card up. ${KEYBOARD_MOVES}`,
+	pickedUp: "Picked up {card}.",
+	pickedUpByKeyboard: `Picked up {card}. ${KEYBOARD_MOVES}`,
+	over: "{card} is over {column}.",
+	dropped: "{card} dropped in {column}.",
+	putBack: "{card} put back where it was.",
+	cancelled: "Move cancelled. {card} put back where it was."
+};
+const PressPoint = Schema.Struct({
+	clientX: Schema.Finite,
+	clientY: Schema.Finite
+});
+const Held = Schema.Struct({
+	card: Card,
+	columnsAtPress: Schema.Array(Column),
+	maybePressPoint: Schema.Option(PressPoint)
+});
+/** Schema for a board: the `@foldkit/ui` DragAndDrop it moves cards with, and what it keeps
+*  while a card is held. The cards and columns are the parent's. */
+const Model = Schema.Struct({
+	dragAndDrop: DragAndDrop.Model,
+	maybeHeld: Schema.Option(Held)
+});
+const PressSpot = Schema.Literals(["Body", "Grip"]);
+/** Union of all Messages a board can produce. */
+const Message = defineMessageUnion({
+	GotDragAndDropMessage: { message: DragAndDrop.Message },
+	PressedCard: {
+		cardId: Schema.String,
+		spot: PressSpot,
+		pointerType: Schema.String,
+		screenX: Schema.Finite,
+		screenY: Schema.Finite,
+		clientX: Schema.Finite,
+		clientY: Schema.Finite,
+		columnsAtPress: Schema.Array(Column)
+	},
+	PressedGripKey: {
+		cardId: Schema.String,
+		columnsAtPress: Schema.Array(Column)
+	},
+	PressedEscape: {},
+	CompletedAnnounceMove: {},
+	CompletedSizeLiftedCard: {}
+});
+/**
+* Union of OutMessages a board reports.
+*
+* - `Moved`: a card was dropped somewhere new. `toIndex` is its place among the destination
+*   column's other cards; `maybeAfterCardId` and `maybeBeforeCardId` name the cards it now
+*   sits between, the anchors a list that orders by neighbours needs. A drop where the card
+*   already was, over no column, or while cards may not move reports nothing. The parent
+*   moves the item (or decides not to): the data is its own.
+* - `SelectedCard`: a primary press on a card's body, not on a control inside it (an input,
+*   a link, a button other than the title, `[data-no-lift]`) nor its grip.
+*/
+const OutMessage = defineMessageUnion({
+	Moved: {
+		cardId: Schema.String,
+		fromColumnId: Schema.String,
+		fromIndex: Schema.Finite,
+		toColumnId: Schema.String,
+		toIndex: Schema.Finite,
+		maybeAfterCardId: Schema.Option(Schema.String),
+		maybeBeforeCardId: Schema.Option(Schema.String)
+	},
+	SelectedCard: { cardId: Schema.String }
+});
+/** Creates a board with nothing held. */
+const init = (config) => (__foldkitBrandViewResult(({
+	dragAndDrop: DragAndDrop.init({ id: config.id }),
+	maybeHeld: Option.none()
+}), "@gjermundgaraba/pixel-paper/board/board.js#init"));
+/** The board's id, unique in the document. */
+const id = (model) => __foldkitBrandViewResult((model.dragAndDrop.id), "@gjermundgaraba/pixel-paper/board/board.js#id");
+const isDragging = (model) => __foldkitBrandViewResult((DragAndDrop.isDragging(model.dragAndDrop)), "@gjermundgaraba/pixel-paper/board/board.js#isDragging");
+const hookId = (boardId, localId) => __foldkitBrandViewResult((`${boardId}/${localId}`), "@gjermundgaraba/pixel-paper/board/board.js#hookId");
+const cardHook = (model, cardId) => __foldkitBrandViewResult((hookId(id(model), cardId)), "@gjermundgaraba/pixel-paper/board/board.js#cardHook");
+const columnHook = (model, columnId) => __foldkitBrandViewResult((hookId(id(model), columnId)), "@gjermundgaraba/pixel-paper/board/board.js#columnHook");
+const CARD_ATTRIBUTE = "board-card";
+const TITLE_ATTRIBUTE = "board-title";
+const GRIP_ATTRIBUTE = "board-grip";
+/** Says a step of a move through the page's live region (as `Announcer.Announce` does), which is
+*  inside the topmost open dialog when there is one. */
+const AnnounceMove = Command.define("AnnounceMove", {
+	args: { text: Schema.String },
+	messages: [Message.CompletedAnnounceMove],
+	execute: ({ text }) => __foldkitBrandViewResult((announce(text).pipe(Effect.as(Message.CompletedAnnounceMove()))), "@gjermundgaraba/pixel-paper/board/board.js#execute")
+});
+const placeOf = (columns, cardId) => __foldkitBrandViewResult((Array.findFirst(columns, (column) => __foldkitBrandViewResult((Array.findFirst(Array.map(column.cards, (card, index) => (__foldkitBrandViewResult(({
+	card,
+	column,
+	index
+}), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~2"))), ({ card }) => __foldkitBrandViewResult((card.id === cardId), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~3"))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous"))), "@gjermundgaraba/pixel-paper/board/board.js#placeOf");
+const fill = (template, card, column = "") => __foldkitBrandViewResult((template.replaceAll("{card}", card).replaceAll("{column}", column)), "@gjermundgaraba/pixel-paper/board/board.js#fill");
+const columnOfHook = (model, held, hook) => __foldkitBrandViewResult((Array.findFirst(held.columnsAtPress, (column) => __foldkitBrandViewResult((columnHook(model, column.id) === hook), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~4"))), "@gjermundgaraba/pixel-paper/board/board.js#columnOfHook");
+const overColumn = (model) => __foldkitBrandViewResult((Option.flatMap(model.maybeHeld, (held) => __foldkitBrandViewResult((Option.flatMap(DragAndDrop.maybeDropTarget(model.dragAndDrop), ({ containerId }) => __foldkitBrandViewResult((columnOfHook(model, held, containerId)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~6"))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~5"))), "@gjermundgaraba/pixel-paper/board/board.js#overColumn");
+const placementOf = (model, held, toContainerId, rawIndex) => __foldkitBrandViewResult((Option.gen(function* () {
+	const from = yield* placeOf(held.columnsAtPress, held.card.id);
+	const to = yield* columnOfHook(model, held, toContainerId);
+	const others = Array.filter(to.cards, (card) => __foldkitBrandViewResult((card.id !== held.card.id), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~8"));
+	const isSameColumn = to.id === from.column.id;
+	const isKeyboard = Option.isNone(held.maybePressPoint);
+	const pastItself = isSameColumn && rawIndex > from.index ? rawIndex - 1 : rawIndex;
+	const toIndex = Math.min(Math.max(pastItself, 0), others.length);
+	if (isSameColumn && (isKeyboard || toIndex === from.index)) return __foldkitBrandViewResult((yield* Option.none()), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~7");
+	return __foldkitBrandViewResult((OutMessage.Moved({
+		cardId: held.card.id,
+		fromColumnId: from.column.id,
+		fromIndex: from.index,
+		toColumnId: to.id,
+		toIndex,
+		maybeAfterCardId: Option.map(Array.get(others, toIndex - 1), (card) => __foldkitBrandViewResult((card.id), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~9")),
+		maybeBeforeCardId: Option.map(Array.get(others, toIndex), (card) => __foldkitBrandViewResult((card.id), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~10"))
+	})), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~7");
+})), "@gjermundgaraba/pixel-paper/board/board.js#placementOf");
+const foldDragAndDropOutMessage = DragAndDrop.OutMessage.match({
+	Reordered: ({ toContainerId, toIndex }) => __foldkitBrandViewResult(((stepModel) => __foldkitBrandViewResult((Update.withOutMessage({ model: stepModel }, Option.getOrUndefined(Option.flatMap(stepModel.maybeHeld, (held) => __foldkitBrandViewResult((placementOf(stepModel, held, toContainerId, toIndex)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~12"))))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~11")), "@gjermundgaraba/pixel-paper/board/board.js#Reordered"),
+	Cancelled: () => __foldkitBrandViewResult(((stepModel) => (__foldkitBrandViewResult(({ model: stepModel }), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~13"))), "@gjermundgaraba/pixel-paper/board/board.js#Cancelled")
+});
+const toDragAndDropMessage = (message) => __foldkitBrandViewResult((Message.GotDragAndDropMessage({ message })), "@gjermundgaraba/pixel-paper/board/board.js#toDragAndDropMessage");
+const foldDragAndDrop = Update.foldChild({
+	update: DragAndDrop.update,
+	read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba/pixel-paper/board/board.js#read"),
+	write: (model, nextDragAndDrop) => __foldkitBrandViewResult((modifyFields(model, { dragAndDrop: () => __foldkitBrandViewResult((nextDragAndDrop), "@gjermundgaraba/pixel-paper/board/board.js#dragAndDrop") })), "@gjermundgaraba/pixel-paper/board/board.js#write"),
+	toParentMessage: toDragAndDropMessage,
+	foldOutMessage: foldDragAndDropOutMessage
+});
+const moveText = (held, previous, next, maybeOutMessage, putBack) => {
+	const { label } = held.card;
+	const before = phaseOf(previous.dragAndDrop);
+	const after = phaseOf(next.dragAndDrop);
+	const maybeMoved = Option.filter(maybeOutMessage, (outMessage) => __foldkitBrandViewResult((outMessage._tag === "Moved"), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~14"));
+	if (after === "Idle") return __foldkitBrandViewResult((isCarrying(before) ? Option.some(Option.match(Option.flatMap(maybeMoved, () => __foldkitBrandViewResult((overColumn(previous)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~15")), {
+		onNone: () => __foldkitBrandViewResult((fill(putBack, label)), "@gjermundgaraba/pixel-paper/board/board.js#onNone"),
+		onSome: (column) => __foldkitBrandViewResult((fill(COPY.dropped, label, column.title)), "@gjermundgaraba/pixel-paper/board/board.js#onSome")
+	})) : Option.none()), "@gjermundgaraba/pixel-paper/board/board.js#moveText");
+	else if (before === "Pressed" && after === "PointerDragging") return __foldkitBrandViewResult((Option.some(fill(COPY.pickedUp, label))), "@gjermundgaraba/pixel-paper/board/board.js#moveText");
+	else if (before === "Idle" && after === "KeyboardDragging") return __foldkitBrandViewResult((Option.some(fill(COPY.pickedUpByKeyboard, label))), "@gjermundgaraba/pixel-paper/board/board.js#moveText");
+	return __foldkitBrandViewResult((pipe(overColumn(next), Option.filter((column) => __foldkitBrandViewResult((!Equal.equals(Option.map(overColumn(previous), (over) => __foldkitBrandViewResult((over.id), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~17")), Option.some(column.id))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~16")), Option.map((column) => __foldkitBrandViewResult((fill(COPY.over, label, column.title)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~18")))), "@gjermundgaraba/pixel-paper/board/board.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/board/board.js#anonymous~20")), (text) => __foldkitBrandViewResult((AnnounceMove({ text })), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~21")))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~19")), "@gjermundgaraba/pixel-paper/board/board.js#settle");
+const holding = (model, held) => __foldkitBrandViewResult((modifyFields(model, { maybeHeld: () => __foldkitBrandViewResult((Option.some(held)), "@gjermundgaraba/pixel-paper/board/board.js#maybeHeld") })), "@gjermundgaraba/pixel-paper/board/board.js#holding");
+const liftByKeyboard = (model, place, columnsAtPress) => {
+	const pressed = holding(model, {
+		card: place.card,
+		columnsAtPress,
+		maybePressPoint: Option.none()
+	});
+	return __foldkitBrandViewResult((settle(pressed)(foldDragAndDrop(pressed, activatedKeyboardDrag({
+		itemId: cardHook(model, place.card.id),
+		containerId: columnHook(model, place.column.id),
+		index: place.index
+	})))), "@gjermundgaraba/pixel-paper/board/board.js#liftByKeyboard");
+};
+const toColumnStepInReadingOrder = (direction) => __foldkitBrandViewResult((Match.value(direction).pipe(Match.withReturnType(), Match.whenOr("Left", "Up", () => __foldkitBrandViewResult(("PreviousContainer"), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~22")), Match.whenOr("Right", "Down", () => __foldkitBrandViewResult(("NextContainer"), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~23")), Match.orElse(() => __foldkitBrandViewResult((direction), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~24")))), "@gjermundgaraba/pixel-paper/board/board.js#toColumnStepInReadingOrder");
+const moveByKeyboard = (model, direction) => __foldkitBrandViewResult((Option.match(Option.filter(Option.all({
+	itemId: DragAndDrop.maybeDraggedItemId(model.dragAndDrop),
+	target: DragAndDrop.maybeDropTarget(model.dragAndDrop)
+}), () => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "KeyboardDragging"), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~25")), {
+	onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/board/board.js#onNone~2")),
+	onSome: ({ itemId, target }) => (__foldkitBrandViewResult(({
+		model,
+		commands: [Command.mapMessage(DragAndDrop.ResolveKeyboardMove({
+			itemId,
+			currentContainerId: target.containerId,
+			currentIndex: target.index,
+			direction: toColumnStepInReadingOrder(direction)
+		}), toDragAndDropMessage)]
+	}), "@gjermundgaraba/pixel-paper/board/board.js#onSome~2"))
+})), "@gjermundgaraba/pixel-paper/board/board.js#moveByKeyboard");
+const isOwnColumnHook = (model, hook) => __foldkitBrandViewResult((Option.exists(model.maybeHeld, (held) => __foldkitBrandViewResult((Option.isSome(columnOfHook(model, held, hook))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~26"))), "@gjermundgaraba/pixel-paper/board/board.js#isOwnColumnHook");
+const cancelDrag = (model, message) => __foldkitBrandViewResult((settle(model, COPY.cancelled)(foldDragAndDrop(model, message))), "@gjermundgaraba/pixel-paper/board/board.js#cancelDrag");
+const updateDragAndDrop = (model, message) => __foldkitBrandViewResult((Match.value(message).pipe(Match.withReturnType(), Match.tag("PressedArrowKey", ({ direction }) => __foldkitBrandViewResult((moveByKeyboard(model, direction)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~27")), Match.tag("CompletedResolveKeyboardMove", ({ targetContainerId }) => __foldkitBrandViewResult((isOwnColumnHook(model, targetContainerId) ? settle(model)(foldDragAndDrop(model, message)) : { model }), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~28")), Match.tag("CancelledDrag", () => __foldkitBrandViewResult((cancelDrag(model, message)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~29")), Match.orElse(() => __foldkitBrandViewResult((settle(model)(foldDragAndDrop(model, message))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~30")))), "@gjermundgaraba/pixel-paper/board/board.js#updateDragAndDrop");
+const pressCard = (model) => __foldkitBrandViewResult((({ cardId, spot, pointerType, screenX, screenY, clientX, clientY, columnsAtPress }) => {
+	const maybeSelected = Option.liftPredicate(OutMessage.SelectedCard({ cardId }), () => __foldkitBrandViewResult((spot === "Body" && phaseOf(model.dragAndDrop) === "Idle"), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~32"));
+	const isLifting = canLift(model) && (spot === "Grip" || pointerType === "mouse");
+	const press = Option.match(Option.filter(placeOf(columnsAtPress, cardId), () => __foldkitBrandViewResult((isLifting), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~33")), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/board/board.js#onNone~3")),
+		onSome: (place) => {
+			const pressed = holding(model, {
+				card: place.card,
+				columnsAtPress,
+				maybePressPoint: Option.some({
+					clientX,
+					clientY
+				})
+			});
+			return __foldkitBrandViewResult((settle(pressed)(foldDragAndDrop(pressed, pressedDraggable({
+				itemId: cardHook(model, cardId),
+				containerId: columnHook(model, place.column.id),
+				index: place.index,
+				screenX,
+				screenY
+			})))), "@gjermundgaraba/pixel-paper/board/board.js#onSome~3");
+		}
+	});
+	return __foldkitBrandViewResult((Option.match(maybeSelected, {
+		onNone: () => __foldkitBrandViewResult((press), "@gjermundgaraba/pixel-paper/board/board.js#onNone~4"),
+		onSome: (selected) => (__foldkitBrandViewResult(({
+			...press,
+			outMessage: selected
+		}), "@gjermundgaraba/pixel-paper/board/board.js#onSome~4"))
+	})), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~31");
+}), "@gjermundgaraba/pixel-paper/board/board.js#pressCard");
+/**
+* Puts a pressed or held card back where it was, says so, and reports no move. A keyboard
+* move hands focus back to the card's grip. Call it when the layout changes under the board.
+*/
+const cancel = (model) => __foldkitBrandViewResult((cancelDrag(model, cancelledDrag())), "@gjermundgaraba/pixel-paper/board/board.js#cancel");
+/** Processes a board 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/board/board.js#GotDragAndDropMessage"),
+	PressedCard: pressCard(model),
+	PressedGripKey: ({ cardId, columnsAtPress }) => __foldkitBrandViewResult((Option.match(Option.filter(placeOf(columnsAtPress, cardId), () => __foldkitBrandViewResult((canLift(model)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~34")), {
+		onNone: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/board/board.js#onNone~5")),
+		onSome: (place) => __foldkitBrandViewResult((liftByKeyboard(model, place, columnsAtPress)), "@gjermundgaraba/pixel-paper/board/board.js#onSome~5")
+	})), "@gjermundgaraba/pixel-paper/board/board.js#PressedGripKey"),
+	PressedEscape: () => __foldkitBrandViewResult((cancel(model)), "@gjermundgaraba/pixel-paper/board/board.js#PressedEscape"),
+	CompletedAnnounceMove: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/board/board.js#CompletedAnnounceMove")),
+	CompletedSizeLiftedCard: () => (__foldkitBrandViewResult(({ model }), "@gjermundgaraba/pixel-paper/board/board.js#CompletedSizeLiftedCard"))
+})), "@gjermundgaraba/pixel-paper/board/board.js#update");
+const dragSubscriptions = Subscription.lift({
+	pointer: DragAndDrop.subscriptions.documentPointer,
+	keyboard: DragAndDrop.subscriptions.documentKeyboard,
+	autoScroll: DragAndDrop.subscriptions.autoScroll
+})({
+	read: (model) => __foldkitBrandViewResult((Option.some(model.dragAndDrop)), "@gjermundgaraba/pixel-paper/board/board.js#read~2"),
+	toParentMessage: toDragAndDropMessage
+});
+const boardSubscriptions = Subscription.aggregate(escapeSubscriptions(Message.PressedEscape()), dragSubscriptions);
+/** A held card follows the pointer, the arrows and Space move and drop it, Escape puts it
+*  back and the page scrolls near its edges, all from listeners that run only while a card is
+*  pressed or held. Lift them into the application's Subscriptions, once per board, with a
+*  key prefix of the parent's that no other record on the page uses:
+*  `subscriptions("queueBoard")` is keyed `queueBoardEscape`, `queueBoardPointer`,
+*  `queueBoardKeyboard` and `queueBoardAutoScroll`, so two boards (or a board beside another
+*  DragAndDrop user) aggregate side by side. */
+const subscriptions = (keyPrefix) => __foldkitBrandViewResult((prefixKeys(keyPrefix, boardSubscriptions)), "@gjermundgaraba/pixel-paper/board/board.js#subscriptions");
+/** Sizes the copy that follows the pointer to the card it lifts, and keeps the pointer where
+*  it pressed the card. Measures the card once, when the copy appears. */
+const SizeLiftedCard = Mount.define("SizeLiftedCard", {
+	args: {
+		cardHook: Schema.String,
+		pressX: Schema.Finite,
+		pressY: Schema.Finite
+	},
+	messages: [Message.CompletedSizeLiftedCard],
+	execute: ({ element, cardHook: hook, pressX, pressY }) => __foldkitBrandViewResult((Effect.sync(() => {
+		measureLift(element, `[data-sortable-id="${CSS.escape(hook)}"]`, pressX, pressY);
+		return __foldkitBrandViewResult((Message.CompletedSizeLiftedCard()), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~35");
+	})), "@gjermundgaraba/pixel-paper/board/board.js#execute~2")
+});
+const INNER_CONTROL = innerControls(`[data-${TITLE_ATTRIBUTE}], [data-${GRIP_ATTRIBUTE}]`);
+const isInside = (outer, inner) => __foldkitBrandViewResult((inner !== null && outer.contains(inner)), "@gjermundgaraba/pixel-paper/board/board.js#isInside");
+const pressSpotOf = (target) => {
+	if (!(target instanceof Element)) return __foldkitBrandViewResult((Option.some("Body")), "@gjermundgaraba/pixel-paper/board/board.js#pressSpotOf");
+	const maybeCard = Option.fromNullishOr(target.closest(`[data-${CARD_ATTRIBUTE}]`));
+	const isOnControl = Option.exists(maybeCard, (card) => __foldkitBrandViewResult((isInside(card, target.closest(INNER_CONTROL))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~36"));
+	const isOnGrip = target.closest(`[data-${GRIP_ATTRIBUTE}]`) !== null;
+	if (isOnControl) return __foldkitBrandViewResult((Option.none()), "@gjermundgaraba/pixel-paper/board/board.js#pressSpotOf");
+	else if (isOnGrip) return __foldkitBrandViewResult((Option.some("Grip")), "@gjermundgaraba/pixel-paper/board/board.js#pressSpotOf");
+	return __foldkitBrandViewResult((Option.some("Body")), "@gjermundgaraba/pixel-paper/board/board.js#pressSpotOf");
+};
+const gripHelpId = (model) => __foldkitBrandViewResult((`${id(model)}-grip-help`), "@gjermundgaraba/pixel-paper/board/board.js#gripHelpId");
+const isHeldCard = (model, cardId) => __foldkitBrandViewResult((isDragging(model) && Option.exists(DragAndDrop.maybeDraggedItemId(model.dragAndDrop), (heldHook) => __foldkitBrandViewResult((heldHook === cardHook(model, cardId)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~37"))), "@gjermundgaraba/pixel-paper/board/board.js#isHeldCard");
+const liftedRender = (h) => (__foldkitBrandViewResult(({
+	attributes: childAttributes([h.AriaHidden(true), h.Inert(true)]),
+	isMovable: false,
+	isHeld: false,
+	grip: [h.span([
+		h.Class("iconbtn"),
+		h.DataAttribute(GRIP_ATTRIBUTE, ""),
+		h.AriaHidden(true)
+	], [view$1({ name: "grip" }, h)])],
+	isLifted: true
+}), "@gjermundgaraba/pixel-paper/board/board.js#liftedRender"));
+const cardRender = (info, place, h) => {
+	const { model, columns } = info;
+	const { card } = place;
+	const isIdleNow = phaseOf(model.dragAndDrop) === "Idle";
+	const isHeld = isHeldCard(model, card.id);
+	const onPress = h.OnPointerDown((pointerType, button, screenX, screenY, _time, clientX, clientY, _pointerId, target) => __foldkitBrandViewResult((Option.map(Option.filter(pressSpotOf(target), () => __foldkitBrandViewResult((isIdleNow && button === 0), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~39")), (spot) => __foldkitBrandViewResult((Message.PressedCard({
+		cardId: card.id,
+		spot,
+		pointerType,
+		screenX,
+		screenY,
+		clientX,
+		clientY,
+		columnsAtPress: columns
+	})), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~40"))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~38"));
+	const onGripKey = h.OnKeyDownPreventDefault((key) => __foldkitBrandViewResult((Option.liftPredicate(Message.PressedGripKey({
+		cardId: card.id,
+		columnsAtPress: columns
+	}), () => __foldkitBrandViewResult((isIdleNow && (key === " " || key === "Enter")), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~42"))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~41"));
+	const grip = [view$2({
+		glyph: "grip",
+		label: fill(COPY.gripLabel, card.label),
+		isQuiet: true,
+		attributes: [
+			h.DataAttribute("draggable-id", cardHook(model, card.id)),
+			h.DataAttribute(GRIP_ATTRIBUTE, ""),
+			h.AriaRoleDescription("draggable"),
+			h.AriaDescribedBy(gripHelpId(model)),
+			pressedAttribute(isHeld, h),
+			onGripKey
+		]
+	}, h)];
+	return __foldkitBrandViewResult(({
+		attributes: childAttributes([h.DataAttribute(CARD_ATTRIBUTE, ""), onPress]),
+		isMovable: true,
+		isHeld,
+		grip,
+		isLifted: false
+	}), "@gjermundgaraba/pixel-paper/board/board.js#cardRender");
+};
+const cardClass = ({ isMovable: movable, isHeld, isLifted }) => __foldkitBrandViewResult((`board-card${movable ? " movable" : ""}${isHeld ? " drag-dim" : ""}${isLifted ? " lifted" : ""}`), "@gjermundgaraba/pixel-paper/board/board.js#cardClass");
+/**
+* One card on the board, from what the board handed `toCardView`: `article.board-card`, a
+* paper slip on the 3px print shadow, its title a two-line `button.title` (or `span.title`
+* without `onOpen`, or the `editor` while the title is edited) over `div.meta-row`, which
+* ends in the grip. Spread
+* `aria-current="true"` through `attributes` for the board's cursor, which prints inverted.
+*/
+const cardView = (config, h) => {
+	const { render, title, onOpen, editor = [], meta = [] } = config;
+	const attributes = render.isLifted ? [] : config.attributes ?? [];
+	const isEditing = !render.isLifted && Array.isReadonlyArrayNonEmpty(editor);
+	const titleView = onOpen === void 0 ? h.span([h.Class("title")], [title]) : Button.view({
+		onClick: onOpen,
+		toView: (groups) => __foldkitBrandViewResult((h.button([
+			...groups.button,
+			h.DataAttribute(TITLE_ATTRIBUTE, ""),
+			h.Class("title")
+		], [title])), "@gjermundgaraba/pixel-paper/board/board.js#toView")
+	}, h);
+	return __foldkitBrandViewResult((h.article([
+		...attributes,
+		...render.attributes,
+		h.Class(cardClass(render))
+	], [...isEditing ? editor : [titleView], ...slotView("div", "meta-row", [...meta, ...render.grip], h)])), "@gjermundgaraba/pixel-paper/board/board.js#cardView");
+};
+const cardItemView = (info, place, h) => __foldkitBrandViewResult((h.keyed("li")(place.card.id, [...DragAndDrop.sortable(cardHook(info.model, place.card.id))], [info.toCardView(place.card, cardRender(info, place, h))])), "@gjermundgaraba/pixel-paper/board/board.js#cardItemView");
+const keyboardSlot = (info, column, h) => {
+	const { model } = info;
+	const maybeSlot = pipe(Option.all({
+		held: model.maybeHeld,
+		over: overColumn(model)
+	}), Option.filter(({ held, over }) => __foldkitBrandViewResult((phaseOf(model.dragAndDrop) === "KeyboardDragging" && over.id === column.id && !Array.some(column.cards, (card) => __foldkitBrandViewResult((card.id === held.card.id), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~44"))), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~43")));
+	return __foldkitBrandViewResult((Array.fromOption(Option.map(maybeSlot, ({ held }) => __foldkitBrandViewResult((h.keyed("li")("board-lift-slot", [h.Class("board-lift-slot"), h.AriaHidden(true)], [info.toCardView(held.card, liftedRender(h))])), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~45")))), "@gjermundgaraba/pixel-paper/board/board.js#keyboardSlot");
+};
+const columnView = (info, column, h) => {
+	const { model } = info;
+	const headingId = `${id(model)}-${column.id}-title`;
+	const items = [...keyboardSlot(info, column, h), ...Array.map(column.cards, (card, index) => __foldkitBrandViewResult((cardItemView(info, {
+		card,
+		column,
+		index
+	}, h)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~46"))];
+	const isTarget = isDragging(model) && Equal.equals(Option.map(overColumn(model), ({ id: overId }) => __foldkitBrandViewResult((overId), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~47")), Option.some(column.id));
+	return __foldkitBrandViewResult((h.keyed("div")(column.id, [h.DataAttribute("droppable-id", columnHook(model, column.id)), h.Class(isTarget ? "board-col drop-target" : "board-col")], [h.section([h.Class("panel"), h.AriaLabelledBy(headingId)], [h.header([h.Class("panel-tb")], [h.h2([h.Id(headingId)], [column.title]), h.span([h.Class("meta")], [column.cards.length.toLocaleString(LOCALE)])]), ...Array.match(items, {
+		onEmpty: () => __foldkitBrandViewResult((info.toEmptyView(column)), "@gjermundgaraba/pixel-paper/board/board.js#onEmpty"),
+		onNonEmpty: (cards) => __foldkitBrandViewResult(([h.ul([h.Role("list"), h.Class("board-cards")], cards)]), "@gjermundgaraba/pixel-paper/board/board.js#onNonEmpty")
+	})])])), "@gjermundgaraba/pixel-paper/board/board.js#columnView");
+};
+const liftedCopyView = (info, h) => {
+	const { model } = info;
+	const maybeLifted = Option.all({
+		style: DragAndDrop.ghostStyle(model.dragAndDrop),
+		held: model.maybeHeld,
+		pressPoint: Option.flatMap(model.maybeHeld, (held) => __foldkitBrandViewResult((held.maybePressPoint), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~48"))
+	});
+	return __foldkitBrandViewResult((Array.fromOption(Option.map(maybeLifted, ({ style, held, pressPoint }) => __foldkitBrandViewResult((h.div([
+		h.Class("board-lift"),
+		h.Style(style),
+		h.AriaHidden(true),
+		h.OnMount(SizeLiftedCard({
+			cardHook: cardHook(model, held.card.id),
+			pressX: pressPoint.clientX,
+			pressY: pressPoint.clientY
+		}))
+	], [info.toCardView(held.card, liftedRender(h))])), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~49")))), "@gjermundgaraba/pixel-paper/board/board.js#liftedCopyView");
+};
+/**
+* Columns of printed slips, one panel per column (one column on narrow screens), built on
+* `@foldkit/ui`'s DragAndDrop: `div.board` of `div.board-col`, each a `section.panel` titled
+* by its column and holding `ul.board-cards`. The cards are the parent's; each renders
+* through `toCardView`, usually with `cardView`.
+*
+* A press on a card's body reports `SelectedCard`. While cards may move, a mouse drags a slip
+* (a press that moves under 5px stays a click), and touch and the keyboard take its grip:
+* Space or Enter picks the card up, every arrow jumps it one column in reading order, Space
+* drops it at the top of that column and Escape puts it back. A press on a control inside a
+* card does neither. The held card dims in place, a lifted copy follows the pointer, the
+* receiving column is outlined, and each step is said through the page's live region. A drop
+* reports `Moved`; lift `subscriptions(keyPrefix)` into the application's, or nothing
+* follows the pointer or the keys.
+*/
+const view = defineView((model, viewInputs, h) => {
+	const { columns, toCardView, toEmptyView = () => __foldkitBrandViewResult(([]), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~51") } = viewInputs;
+	const info = {
+		model,
+		columns,
+		toCardView,
+		toEmptyView
+	};
+	return __foldkitBrandViewResult((h.div([h.Class("board"), h.Style({ "--cols": `${columns.length}` })], [
+		...Array.map(columns, (column) => __foldkitBrandViewResult((columnView(info, column, h)), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~52")),
+		h.p([h.Id(gripHelpId(model)), h.Class("sr-only")], [COPY.gripHelp]),
+		...liftedCopyView(info, h)
+	])), "@gjermundgaraba/pixel-paper/board/board.js#anonymous~50");
+});
+export { AnnounceMove, Card, Column, Message, Model, OutMessage, SizeLiftedCard, cancel, cardView, id, init, isDragging, subscriptions, update, view };

package/dist/board/index.d.ts

@@ -0,0 +1,6 @@
+import { AnnounceMove, CardRender, CardViewConfig, Column, InitConfig, Message, Model, OutMessage, ViewInputs, cancel, cardView, id, init, subscriptions, update, view } from "./board.js";
+import { isHolding } from "../drag/drag.js";
+declare namespace index_d_exports {
+  export { AnnounceMove, CardRender, CardViewConfig, Column, InitConfig, Message, Model, OutMessage, ViewInputs, cancel, cardView, id, init, isHolding, subscriptions, update, view };
+}
+export { AnnounceMove, type CardRender, type CardViewConfig, Column, type InitConfig, Message, Model, OutMessage, type ViewInputs, cancel, cardView, id, index_d_exports, init, isHolding, subscriptions, update, view };

package/dist/board/index.js

@@ -0,0 +1,21 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { __exportAll } from "../_virtual/_rolldown/runtime.js";
+import { isHolding } from "../drag/drag.js";
+import { AnnounceMove, Column, Message, Model, OutMessage, cancel, cardView, id, init, subscriptions, update, view } from "./board.js";
+// src/board/index.ts
+var board_exports = /* @__PURE__ */ __exportAll({
+	AnnounceMove: () => __foldkitBrandViewResult((AnnounceMove), "@gjermundgaraba/pixel-paper/board/index.js#AnnounceMove"),
+	Column: () => __foldkitBrandViewResult((Column), "@gjermundgaraba/pixel-paper/board/index.js#Column"),
+	Message: () => __foldkitBrandViewResult((Message), "@gjermundgaraba/pixel-paper/board/index.js#Message"),
+	Model: () => __foldkitBrandViewResult((Model), "@gjermundgaraba/pixel-paper/board/index.js#Model"),
+	OutMessage: () => __foldkitBrandViewResult((OutMessage), "@gjermundgaraba/pixel-paper/board/index.js#OutMessage"),
+	cancel: () => __foldkitBrandViewResult((cancel), "@gjermundgaraba/pixel-paper/board/index.js#cancel"),
+	cardView: () => __foldkitBrandViewResult((cardView), "@gjermundgaraba/pixel-paper/board/index.js#cardView"),
+	id: () => __foldkitBrandViewResult((id), "@gjermundgaraba/pixel-paper/board/index.js#id"),
+	init: () => __foldkitBrandViewResult((init), "@gjermundgaraba/pixel-paper/board/index.js#init"),
+	isHolding: () => __foldkitBrandViewResult((isHolding), "@gjermundgaraba/pixel-paper/board/index.js#isHolding"),
+	subscriptions: () => __foldkitBrandViewResult((subscriptions), "@gjermundgaraba/pixel-paper/board/index.js#subscriptions"),
+	update: () => __foldkitBrandViewResult((update), "@gjermundgaraba/pixel-paper/board/index.js#update"),
+	view: () => __foldkitBrandViewResult((view), "@gjermundgaraba/pixel-paper/board/index.js#view")
+});
+export { AnnounceMove, Column, Message, Model, OutMessage, board_exports, cancel, cardView, id, init, isHolding, subscriptions, update, view };

package/dist/button/button.d.ts

@@ -0,0 +1,54 @@
+import { Attributes } from "../attributes/attributes.js";
+import { GlyphName } from "../glyph/glyphs.js";
+import { KeyPlatform } from "../key-hint/key-label.js";
+import { Schema } from "effect";
+import { Attribute, Html, HtmlBuilder } from "foldkit/html";
+import { KeySequence } from "foldkit/dom";
+/** How a button prints. `Primary` is the one committing action. `Danger` is the commit inside a
+ *  confirm, never at rest: a destructive action is a neutral button that opens a danger
+ *  `ConfirmDialog`. */
+export declare const Variant: Schema.Literals<readonly ["Default", "Primary", "Danger"]>;
+export type Variant = typeof Variant.Type;
+/** What `Button` and `LinkButton` share: the variant, the size, and the default ring. */
+export type Look = Readonly<{
+  variant?: Variant;
+  isSmall?: boolean;
+  /** The action Enter takes in a card: a double ring instead of the print shadow. */
+  isDefault?: boolean;
+}>;
+/** The key that does the same as the button, printed small after its words. */
+export type KeyHintConfig = Readonly<{
+  keys: KeySequence;
+  platform: KeyPlatform;
+}>;
+/** `aria-pressed` for a toggle button, always present so the button reads as a toggle in
+ *  both states. Shared by every pressable in the system. */
+export declare const pressedAttribute: <Message>(isPressed: boolean, h: HtmlBuilder<Message>) => Attribute<Message>;
+/** Configuration for rendering a button with `view`. */
+export type ViewConfig<Message> = Look & Readonly<{
+  label: string;
+  onClick?: Message;
+  /** Working: a blinking block cursor prints in the right padding, so the label stays put
+   *  and the button keeps its width. The button is held and says so (`aria-busy`). */
+  isBusy?: boolean;
+  /** Unavailable: the button is held. As in `@foldkit/ui`, it stays focusable
+   *  (`aria-disabled`), so focus never falls to the page and Tab still finds it. */
+  isDisabled?: boolean;
+  keyHint?: KeyHintConfig;
+  /** `submit` makes it its form's submit button while it is not held. */
+  type?: "button" | "submit";
+  /** Further attributes for the `<button>`, such as an id or a Submodel's attribute group. */
+  attributes?: Attributes<Message>;
+  glyph?: GlyphName;
+}>;
+/**
+ * The printed button: pixel caps in a 2px ink box on a 3px print shadow, built on
+ * `@foldkit/ui`'s `Button`. It is held while busy or disabled: it prints unavailable
+ * (`aria-disabled`), has no click handler, keeps its place in the keyboard, and renders as
+ * `type="button"` so a held submit button submits nothing, by click or by Enter on itself.
+ * While busy it is `aria-busy` too.
+ *
+ * Enter in a field can still submit a form that has no live submit button, so the form's
+ * own update must ignore a submit while its work is saving (see `Card.formView`).
+ */
+export declare const view: <Message>(config: ViewConfig<Message>, h: HtmlBuilder<Message>) => Html;

package/dist/button/button.js

@@ -0,0 +1,50 @@
+import { brandViewResult as __foldkitBrandViewResult } from 'foldkit/brand'
+import { view as view$1 } from "../glyph/glyph.js";
+import { view as view$2 } from "../key-hint/key-hint.js";
+import { Schema } from "effect";
+import { Button } from "@foldkit/ui";
+Schema.Literals([
+	"Default",
+	"Primary",
+	"Danger"
+]);
+const VARIANT_CLASS = {
+	Default: "btn",
+	Primary: "btn primary",
+	Danger: "btn danger"
+};
+const lookClassName = ({ variant = "Default", isSmall = false, isDefault = false }) => __foldkitBrandViewResult((`${VARIANT_CLASS[variant]}${isSmall ? " small" : ""}${isDefault ? " default-ring" : ""}`), "@gjermundgaraba/pixel-paper/button/button.js#lookClassName");
+/** `aria-pressed` for a toggle button, always present so the button reads as a toggle in
+*  both states. Shared by every pressable in the system. */
+const pressedAttribute = (isPressed, h) => __foldkitBrandViewResult((h.AriaPressed(isPressed ? "true" : "false")), "@gjermundgaraba/pixel-paper/button/button.js#pressedAttribute");
+/**
+* The printed button: pixel caps in a 2px ink box on a 3px print shadow, built on
+* `@foldkit/ui`'s `Button`. It is held while busy or disabled: it prints unavailable
+* (`aria-disabled`), has no click handler, keeps its place in the keyboard, and renders as
+* `type="button"` so a held submit button submits nothing, by click or by Enter on itself.
+* While busy it is `aria-busy` too.
+*
+* Enter in a field can still submit a form that has no live submit button, so the form's
+* own update must ignore a submit while its work is saving (see `Card.formView`).
+*/
+const view = (config, h) => {
+	const { label, onClick, isBusy = false, isDisabled = false, type = "button", attributes = [], glyph, keyHint } = config;
+	const isHeld = isBusy || isDisabled;
+	return __foldkitBrandViewResult((Button.view({
+		type: isHeld ? "button" : type,
+		isDisabled: isHeld,
+		...onClick !== void 0 && { onClick },
+		toView: (groups) => __foldkitBrandViewResult((h.button([
+			...attributes,
+			...groups.button,
+			...isBusy ? [h.AriaBusy(true)] : [],
+			h.Class(lookClassName(config))
+		], [
+			...glyph === void 0 ? [] : [view$1({ name: glyph }, h)],
+			label,
+			...keyHint === void 0 ? [] : [view$2(keyHint, h)],
+			...isBusy ? [h.span([h.Class("cursor"), h.AriaHidden(true)])] : []
+		])), "@gjermundgaraba/pixel-paper/button/button.js#toView")
+	}, h)), "@gjermundgaraba/pixel-paper/button/button.js#view");
+};
+export { lookClassName, pressedAttribute, view };

package/dist/button/index.d.ts

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

package/dist/button/index.js

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